From 7621aa4828f3489eafcfa1c2458b589a4611d928 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:44:15 -0300
Subject: [PATCH 01/14] Use Tailwind's slate greys instead of neutral

Every grey token in the default theme moves to the matching slate step, in light and dark. The
three greys that sat between palette steps keep their lightness and take slate's tint from the
steps either side, so contrast does not shift. The onboarding illustration and the component
preview's neutral-* classes become slate-* to match. Skins set their own colours and are
unchanged.
---
 app/src/components/component-preview.tsx      |   2 +-
 .../onboarding/laptop-illustration.tsx        |   8 +-
 app/src/theme.css                             | 108 +++++++++---------
 3 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/app/src/components/component-preview.tsx b/app/src/components/component-preview.tsx
index 57d991c949..fad1047c31 100644
--- a/app/src/components/component-preview.tsx
+++ b/app/src/components/component-preview.tsx
@@ -36,7 +36,7 @@ function PreviewNotice({ children }: { children: ReactNode }) {
   return (
     <div className="flex h-full w-full items-center justify-center p-4">
       {/* The artwork stays pale in both themes, so this text must stay dark. */}
-      <p className="text-center text-neutral-700 text-xs">{children}</p>
+      <p className="text-center text-slate-700 text-xs">{children}</p>
     </div>
   );
 }
diff --git a/app/src/components/onboarding/laptop-illustration.tsx b/app/src/components/onboarding/laptop-illustration.tsx
index cd648a6e94..5ce12fac53 100644
--- a/app/src/components/onboarding/laptop-illustration.tsx
+++ b/app/src/components/onboarding/laptop-illustration.tsx
@@ -18,12 +18,12 @@ export function LaptopIllustration() {
     <div className="mx-auto w-64 perspective-distant">
       <motion.div
         animate={{ rotateX: 0 }}
-        className="mx-auto h-32 w-[90%] rounded-t-lg bg-neutral-100 p-1 shadow-sm ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-800 dark:shadow-white/5 dark:ring-white/10"
+        className="mx-auto h-32 w-[90%] rounded-t-lg bg-slate-100 p-1 shadow-sm ring-1 shadow-black/10 ring-black/10 dark:bg-slate-800 dark:shadow-white/5 dark:ring-white/10"
         initial={reduceMotion ? false : { rotateX: -60 }}
         style={{ transformOrigin: "center bottom" }}
         transition={{ delay: 0.35, duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
       >
-        <div className="relative h-full w-full overflow-hidden rounded-t rounded-b-sm bg-white dark:bg-neutral-900">
+        <div className="relative h-full w-full overflow-hidden rounded-t rounded-b-sm bg-white dark:bg-slate-900">
           <div className="absolute inset-x-0 top-1 mx-auto h-2 w-7 rounded-full bg-black" />
           <motion.div
             animate={{ opacity: 1, filter: "blur(0px)" }}
@@ -38,8 +38,8 @@ export function LaptopIllustration() {
           </motion.div>
         </div>
       </motion.div>
-      <div className="relative h-3 w-full rounded-t-md rounded-b-3xl bg-linear-to-b from-neutral-100 to-neutral-300 shadow-[0px_1px_0px_0px_var(--color-neutral-200)_inset] dark:from-neutral-700 dark:to-neutral-900 dark:shadow-[0px_1px_0px_0px_var(--color-neutral-600)_inset]">
-        <div className="absolute inset-x-0 top-0 mx-auto h-1.5 w-10 rounded-b-sm bg-neutral-400 shadow-[0px_-1px_0px_0px_var(--color-neutral-300)_inset] dark:bg-neutral-600 dark:shadow-[0px_-1px_0px_0px_var(--color-neutral-500)_inset]" />
+      <div className="relative h-3 w-full rounded-t-md rounded-b-3xl bg-linear-to-b from-slate-100 to-slate-300 shadow-[0px_1px_0px_0px_var(--color-slate-200)_inset] dark:from-slate-700 dark:to-slate-900 dark:shadow-[0px_1px_0px_0px_var(--color-slate-600)_inset]">
+        <div className="absolute inset-x-0 top-0 mx-auto h-1.5 w-10 rounded-b-sm bg-slate-400 shadow-[0px_-1px_0px_0px_var(--color-slate-300)_inset] dark:bg-slate-600 dark:shadow-[0px_-1px_0px_0px_var(--color-slate-500)_inset]" />
       </div>
     </div>
   );
diff --git a/app/src/theme.css b/app/src/theme.css
index 8e30caa8b0..21b1ca5df9 100644
--- a/app/src/theme.css
+++ b/app/src/theme.css
@@ -2,75 +2,75 @@
 
 :root {
   color-scheme: light;
-  --background: oklch(0.985 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.984 0.003 247.858);
+  --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.96 0 0);
-  --muted-foreground: oklch(0.5 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.96 0.009 251);
+  --muted-foreground: oklch(0.5 0.045 257.35);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
   --destructive: oklch(0.577 0.245 27.325);
   --success: oklch(0.6 0.118 184.704);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.869 0.022 252.894);
+  --chart-2: oklch(0.554 0.046 257.417);
+  --chart-3: oklch(0.446 0.043 257.281);
+  --chart-4: oklch(0.372 0.044 257.287);
+  --chart-5: oklch(0.279 0.041 260.031);
   --radius: 0.5rem;
-  --sidebar: oklch(0.97 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.5 0 0);
-  --sidebar-accent: oklch(0.95 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.968 0.007 247.896);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.5 0.045 257.35);
+  --sidebar-accent: oklch(0.95 0.01 252);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
 }
 
 .dark {
   color-scheme: dark;
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
   --destructive: oklch(0.704 0.191 22.216);
   --success: oklch(0.704 0.14 182.503);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.554 0.046 257.417);
+  --chart-1: oklch(0.869 0.022 252.894);
+  --chart-2: oklch(0.554 0.046 257.417);
+  --chart-3: oklch(0.446 0.043 257.281);
+  --chart-4: oklch(0.372 0.044 257.287);
+  --chart-5: oklch(0.279 0.041 260.031);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
   --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.554 0.046 257.417);
 }
 
 * {

From aeb0e2e550bb137183cd8a4d71ab8924ff0c691c Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:44:31 -0300
Subject: [PATCH 02/14] Put each page in an inset panel: darker frame, light
 panel, white cards

The sidebar and the window's edge now share one tint, and the page sits in a panel inset 8px with
rounded corners and a hairline, using the sidebar's own inset variant. Light mode runs darkest to
lightest the way Linear does: the frame, a slate-50 panel, then white cards on it; dark mode was
already in that order once the frame became its darkest surface.

Admin and settings now scroll inside the panel like the app does, so its corners stay on screen;
the audit table and the playground fill the panel instead of the window. Fields fill with the
card's white so they read as fields on a card or the panel, and row icon tiles take the panel's
grey with a hairline so they still show on a white card.
---
 app/src/components/admin/admin-sidebar.tsx      |  2 +-
 app/src/components/app-sidebar/app-sidebar.tsx  |  2 +-
 app/src/components/layout/page-parts.tsx        | 17 +++++------------
 app/src/components/layout/page-shell.tsx        |  6 +++---
 .../components/settings/settings-sidebar.tsx    |  2 +-
 app/src/components/ui/input-group.tsx           |  2 +-
 app/src/components/ui/input.tsx                 |  2 +-
 app/src/components/ui/item.tsx                  |  2 +-
 app/src/components/ui/select.tsx                |  2 +-
 app/src/components/ui/sidebar.tsx               |  2 +-
 app/src/components/ui/textarea.tsx              |  2 +-
 app/src/routes/_authed/_app.tsx                 | 16 ++++++++++++----
 app/src/routes/_authed/admin/playground.tsx     |  2 +-
 app/src/routes/_authed/admin/route.tsx          |  8 +++++---
 app/src/routes/_authed/settings/route.tsx       |  8 +++++---
 app/src/theme.css                               | 12 ++++++++----
 app/tests/audit-table.test.tsx                  |  7 ++++---
 17 files changed, 52 insertions(+), 42 deletions(-)

diff --git a/app/src/components/admin/admin-sidebar.tsx b/app/src/components/admin/admin-sidebar.tsx
index 2b4a7d5d6c..0927359c68 100644
--- a/app/src/components/admin/admin-sidebar.tsx
+++ b/app/src/components/admin/admin-sidebar.tsx
@@ -130,7 +130,7 @@ export function AdminSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   return (
-    <Sidebar {...props}>
+    <Sidebar variant="inset" {...props}>
       {/*
        * Pinned to the same height as the app sidebar's header. Left to itself this one is 60px
        * against the app's 45px — `p-2` around a `size="lg"` button rather than a fixed height — so
diff --git a/app/src/components/app-sidebar/app-sidebar.tsx b/app/src/components/app-sidebar/app-sidebar.tsx
index 27fe657b18..e7e8e99b59 100644
--- a/app/src/components/app-sidebar/app-sidebar.tsx
+++ b/app/src/components/app-sidebar/app-sidebar.tsx
@@ -220,7 +220,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const navigation = navigationFor(currentUser?.role);
 
   return (
-    <Sidebar {...props}>
+    <Sidebar variant="inset" {...props}>
       <SidebarHeader className="h-12 p-2">
         <SidebarMenu>
           <SidebarMenuItem className="flex flex-row gap-1.5">
diff --git a/app/src/components/layout/page-parts.tsx b/app/src/components/layout/page-parts.tsx
index 7fa01f8dba..492f7491a0 100644
--- a/app/src/components/layout/page-parts.tsx
+++ b/app/src/components/layout/page-parts.tsx
@@ -40,20 +40,13 @@ export function PageColumn({
   return (
     <>
       {/*
-       * The scroller, and it has to live here rather than in either shell, because the two shells
-       * this frame is used under disagree about who scrolls.
-       *
-       * Under `_authed` — admin, settings — the document scrolls, so a page taller than the window
-       * has always just worked. Under `_authed/_app` it does not: that shell is `h-svh
-       * overflow-hidden` on purpose ("one viewport, never scrolls: panes scroll inside it") and its
-       * `main` is `overflow-hidden` too, so a PageShell taller than the window was silently CLIPPED
-       * — 246px of Skills sat below the fold with no way to reach it, by keyboard or otherwise.
+       * The scroller. Every shell — app, admin, settings — is exactly the window's height and holds
+       * the page in an inset panel that never grows past it, so a page taller than the window
+       * scrolls here, inside the panel, and the panel's rounded corners stay on screen.
        *
        * `min-h-0` is the load-bearing half of `min-h-0 flex-1`: a flex item's default `min-height:
-       * auto` refuses to shrink below its content, so `flex-1` alone would grow this past the pane
-       * and clip exactly as before. Under `_authed` both are inert — the parent is not a flex
-       * container — and `overflow-y-auto` on an auto-height element shows no scrollbar, so those
-       * eighteen screens are unaffected.
+       * auto` refuses to shrink below its content, so `flex-1` alone would grow this past the panel
+       * and the overflow would be clipped instead of scrolled.
        *
        * Separate from the centred column below so the scrollbar rides the pane's edge instead of
        * appearing inside the measure with content either side of it.
diff --git a/app/src/components/layout/page-shell.tsx b/app/src/components/layout/page-shell.tsx
index 073ed9e42e..73c4c01727 100644
--- a/app/src/components/layout/page-shell.tsx
+++ b/app/src/components/layout/page-shell.tsx
@@ -83,10 +83,10 @@ export function PageShell({
   if (width === "full") {
     return (
       /*
-       * One viewport, never scrolls. `min-w-0` lets a table wider than the pane scroll inside its own
-       * container instead of pushing the page sideways.
+       * Exactly the panel's height, never scrolls. `min-w-0` lets a table wider than the pane scroll
+       * inside its own container instead of pushing the page sideways.
        */
-      <div className="flex h-dvh min-w-0 flex-col overflow-hidden">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         {barRow}
         <div className={cn("shrink-0 px-4", bar ? "pt-8" : "pt-12")}>
           {header}
diff --git a/app/src/components/settings/settings-sidebar.tsx b/app/src/components/settings/settings-sidebar.tsx
index 53e5d9bec3..d0694cca64 100644
--- a/app/src/components/settings/settings-sidebar.tsx
+++ b/app/src/components/settings/settings-sidebar.tsx
@@ -84,7 +84,7 @@ export function SettingsSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   return (
-    <Sidebar {...props}>
+    <Sidebar variant="inset" {...props}>
       {/* Matched to the app sidebar's header, as Admin's is. See admin-sidebar.tsx. */}
       <SidebarHeader className="h-12 p-2">
         <SidebarMenu>
diff --git a/app/src/components/ui/input-group.tsx b/app/src/components/ui/input-group.tsx
index c5af85eeaa..429c2230a1 100644
--- a/app/src/components/ui/input-group.tsx
+++ b/app/src/components/ui/input-group.tsx
@@ -11,7 +11,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-lg border border-input bg-card transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className,
       )}
       {...props}
diff --git a/app/src/components/ui/input.tsx b/app/src/components/ui/input.tsx
index 11dff01045..2a5363d8f0 100644
--- a/app/src/components/ui/input.tsx
+++ b/app/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-9 w-full min-w-0 rounded-lg border border-input bg-card px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}
diff --git a/app/src/components/ui/item.tsx b/app/src/components/ui/item.tsx
index 0f68d1c1bf..51b336baca 100644
--- a/app/src/components/ui/item.tsx
+++ b/app/src/components/ui/item.tsx
@@ -90,7 +90,7 @@ const itemMediaVariants = cva(
       variant: {
         default: "bg-transparent",
         // A 32px tile behind a 16px glyph, so a column of rows reads as a column of marks.
-        icon: "size-8 rounded-md bg-muted text-muted-foreground group-data-[size=xs]/item:size-6 [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-8 rounded-md bg-background text-muted-foreground ring-1 ring-border group-data-[size=xs]/item:size-6 [&_svg:not([class*='size-'])]:size-4",
         image:
           "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
       },
diff --git a/app/src/components/ui/select.tsx b/app/src/components/ui/select.tsx
index f854d1b542..e101c0fb6f 100644
--- a/app/src/components/ui/select.tsx
+++ b/app/src/components/ui/select.tsx
@@ -43,7 +43,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/app/src/components/ui/sidebar.tsx b/app/src/components/ui/sidebar.tsx
index b5148fffe0..89672ca877 100644
--- a/app/src/components/ui/sidebar.tsx
+++ b/app/src/components/ui/sidebar.tsx
@@ -325,7 +325,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-sidebar-border md:peer-data-[variant=inset]:shadow-xs md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
       {...props}
diff --git a/app/src/components/ui/textarea.tsx b/app/src/components/ui/textarea.tsx
index 9da9eab61b..eba68955ff 100644
--- a/app/src/components/ui/textarea.tsx
+++ b/app/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}
diff --git a/app/src/routes/_authed/_app.tsx b/app/src/routes/_authed/_app.tsx
index 4c7af72786..fad9d37032 100644
--- a/app/src/routes/_authed/_app.tsx
+++ b/app/src/routes/_authed/_app.tsx
@@ -2,6 +2,7 @@ import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { AppSidebar } from "@/components/app-sidebar/app-sidebar";
 import { SelfHostBanner } from "@/components/layout/self-host-banner";
 import { SidebarShell } from "@/components/layout/sidebar-shell";
+import { SidebarInset } from "@/components/ui/sidebar";
 import { useActiveSkin } from "@/skins/registry";
 
 export const Route = createFileRoute("/_authed/_app")({
@@ -20,14 +21,21 @@ function RouteComponent() {
   }
 
   return (
-    // One viewport, never scrolls: panes scroll inside it. A growable shell lets the transcript's
-    // scroller size against the page, grow it, and grow again.
+    /*
+     * The content sits in a panel inset from the window, on the sidebar's tint, so the sidebar and
+     * the window's edge read as one frame and the page as the thing inside it. Before, the sidebar,
+     * the page and the cards on it were three near-identical whites told apart only by hairlines.
+     *
+     * One viewport, never scrolls: panes scroll inside the panel, which is also what keeps its
+     * rounded corners on screen. A growable shell lets the transcript's scroller size against the
+     * page, grow it, and grow again. Admin and settings use the same panel.
+     */
     <SidebarShell className="h-svh overflow-hidden" width="340px">
       <AppSidebar />
-      <main className="flex-1 flex flex-col min-h-0 overflow-hidden">
+      <SidebarInset className="min-h-0 overflow-hidden">
         <SelfHostBanner />
         <Outlet />
-      </main>
+      </SidebarInset>
     </SidebarShell>
   );
 }
diff --git a/app/src/routes/_authed/admin/playground.tsx b/app/src/routes/_authed/admin/playground.tsx
index 878bc2a9c2..9fd5c3fbad 100644
--- a/app/src/routes/_authed/admin/playground.tsx
+++ b/app/src/routes/_authed/admin/playground.tsx
@@ -198,7 +198,7 @@ function PlaygroundPage() {
      * standard prose column and it lands below the fold, so you would be typing at something you
      * cannot see. It takes the header and the controls, and keeps the two panes.
      */
-    <div className="flex h-screen flex-col">
+    <div className="flex min-h-0 flex-1 flex-col">
       <header className="flex flex-wrap items-start justify-between gap-4 border-border border-b px-6 py-4">
         {/* Inline rather than in a band of its own: this screen is an editor beside a live preview
             and every 48px of height is taken from the thing being previewed. */}
diff --git a/app/src/routes/_authed/admin/route.tsx b/app/src/routes/_authed/admin/route.tsx
index 4100a4f784..76142e4793 100644
--- a/app/src/routes/_authed/admin/route.tsx
+++ b/app/src/routes/_authed/admin/route.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
 import { AdminSidebar } from "@/components/admin/admin-sidebar";
 import { SidebarShell } from "@/components/layout/sidebar-shell";
+import { SidebarInset } from "@/components/ui/sidebar";
 import { currentUserQueryOptions } from "../../../lib/auth/queries";
 
 export const Route = createFileRoute("/_authed/admin")({
@@ -17,11 +18,12 @@ export const Route = createFileRoute("/_authed/admin")({
 
 function RouteComponent() {
   return (
-    <SidebarShell width="300px">
+    // The same inset panel as the app's shell; see `_app.tsx`.
+    <SidebarShell className="h-svh overflow-hidden" width="300px">
       <AdminSidebar />
-      <main className="min-w-0 flex-1">
+      <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
         <Outlet />
-      </main>
+      </SidebarInset>
     </SidebarShell>
   );
 }
diff --git a/app/src/routes/_authed/settings/route.tsx b/app/src/routes/_authed/settings/route.tsx
index 9a753bd732..fc38fdec16 100644
--- a/app/src/routes/_authed/settings/route.tsx
+++ b/app/src/routes/_authed/settings/route.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { SidebarShell } from "@/components/layout/sidebar-shell";
 import { SettingsSidebar } from "@/components/settings/settings-sidebar";
+import { SidebarInset } from "@/components/ui/sidebar";
 
 export const Route = createFileRoute("/_authed/settings")({
   component: RouteComponent,
@@ -8,11 +9,12 @@ export const Route = createFileRoute("/_authed/settings")({
 
 function RouteComponent() {
   return (
-    <SidebarShell width="300px">
+    // The same inset panel as the app's shell; see `_app.tsx`.
+    <SidebarShell className="h-svh overflow-hidden" width="300px">
       <SettingsSidebar />
-      <main className="flex-1">
+      <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
         <Outlet />
-      </main>
+      </SidebarInset>
     </SidebarShell>
   );
 }
diff --git a/app/src/theme.css b/app/src/theme.css
index 21b1ca5df9..c2feb801b1 100644
--- a/app/src/theme.css
+++ b/app/src/theme.css
@@ -2,6 +2,10 @@
 
 :root {
   color-scheme: light;
+  /*
+   * Three surfaces, darkest to lightest, the way Linear draws them: the frame (the sidebar's tint,
+   * which the window edge shares), the panel the page sits in, and the white cards on it.
+   */
   --background: oklch(0.984 0.003 247.858);
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(1 0 0);
@@ -27,11 +31,11 @@
   --chart-4: oklch(0.372 0.044 257.287);
   --chart-5: oklch(0.279 0.041 260.031);
   --radius: 0.5rem;
-  --sidebar: oklch(0.968 0.007 247.896);
+  --sidebar: oklch(0.952 0.01 252);
   --sidebar-foreground: oklch(0.129 0.042 264.695);
   --sidebar-primary: oklch(0.208 0.042 265.755);
   --sidebar-primary-foreground: oklch(0.5 0.045 257.35);
-  --sidebar-accent: oklch(0.95 0.01 252);
+  --sidebar-accent: oklch(0.915 0.015 255.5);
   --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
   --sidebar-border: oklch(0.929 0.013 255.508);
   --sidebar-ring: oklch(0.704 0.04 256.788);
@@ -39,7 +43,7 @@
 
 .dark {
   color-scheme: dark;
-  --background: oklch(0.129 0.042 264.695);
+  --background: oklch(0.168 0.042 265.2);
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.208 0.042 265.755);
   --card-foreground: oklch(0.984 0.003 247.858);
@@ -63,7 +67,7 @@
   --chart-3: oklch(0.446 0.043 257.281);
   --chart-4: oklch(0.372 0.044 257.287);
   --chart-5: oklch(0.279 0.041 260.031);
-  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar: oklch(0.129 0.042 264.695);
   --sidebar-foreground: oklch(0.984 0.003 247.858);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
diff --git a/app/tests/audit-table.test.tsx b/app/tests/audit-table.test.tsx
index a4995f99cd..7d27a8f028 100644
--- a/app/tests/audit-table.test.tsx
+++ b/app/tests/audit-table.test.tsx
@@ -91,12 +91,13 @@ const whats = (container: HTMLElement) =>
     (row) => row.querySelector("[data-column=what]")?.textContent,
   );
 
-test("the page is one viewport tall and only the table scrolls", async () => {
+test("the page fills the shell's panel and only the table scrolls", async () => {
   const view = await renderAudit();
   const heading = view.getByRole("heading", { name: "Audit" });
-  const page = heading.closest(".h-dvh");
+  const page = heading.closest(".overflow-hidden");
   expect(page).not.toBeNull();
-  expect(page?.className).toContain("overflow-hidden");
+  expect(page?.className).toContain("flex-1");
+  expect(page?.className).toContain("min-h-0");
   expect(heading.closest(".max-w-3xl")).toBeNull();
   const scroller = view.container.querySelector(
     "[data-slot=table-container]",

From cf0ccfaee4e7529d28bdbf6c68a440e4a0a07409 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:44:40 -0300
Subject: [PATCH 03/14] Set the sidebar's conversation text on the type scale

The conversation's main line was 14.4px, sized by hand; it is now text-sm like the rest of the
sidebar. The tests that named the old size class follow.
---
 app/src/components/app-sidebar/channel-item-content.tsx | 2 +-
 app/tests/channel-pagination.test.tsx                   | 4 ++--
 app/tests/user-preferences.test.tsx                     | 6 ++----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/src/components/app-sidebar/channel-item-content.tsx b/app/src/components/app-sidebar/channel-item-content.tsx
index ece35115c2..a8128c95bc 100644
--- a/app/src/components/app-sidebar/channel-item-content.tsx
+++ b/app/src/components/app-sidebar/channel-item-content.tsx
@@ -26,7 +26,7 @@ export function ChannelItemContent({
   pinned?: boolean;
   revealing?: boolean;
 }) {
-  const primaryText = `text-[0.9rem] leading-5 tracking-[-1%] ${unread ? "font-semibold" : "font-medium"}`;
+  const primaryText = `text-sm leading-5 tracking-[-1%] ${unread ? "font-semibold" : "font-medium"}`;
   const secondaryText = "text-[12px] leading-4 text-muted-foreground";
 
   return (
diff --git a/app/tests/channel-pagination.test.tsx b/app/tests/channel-pagination.test.tsx
index 55b6300c5b..e98370c2c5 100644
--- a/app/tests/channel-pagination.test.tsx
+++ b/app/tests/channel-pagination.test.tsx
@@ -225,7 +225,7 @@ test("message emphasis updates mounted rows from the account preferences cache",
   const view = renderSidebar();
   const agent = await view.findByText("Recent conversation");
   const thread = view.getByText("New conversation");
-  expect(thread.className).toContain("text-[0.9rem]");
+  expect(thread.className).toContain("text-sm");
   act(() =>
     clients[0]?.setQueryData(userPreferencesQueryOptions("user").queryKey, {
       messageListEmphasis: "agent",
@@ -234,7 +234,7 @@ test("message emphasis updates mounted rows from the account preferences cache",
       skin: "openbot",
     }),
   );
-  await waitFor(() => expect(agent.className).toContain("text-[0.9rem]"));
+  await waitFor(() => expect(agent.className).toContain("text-sm"));
   expect(thread.className).toContain("text-muted-foreground");
 });
 
diff --git a/app/tests/user-preferences.test.tsx b/app/tests/user-preferences.test.tsx
index 16c93797f0..80e2cedbe5 100644
--- a/app/tests/user-preferences.test.tsx
+++ b/app/tests/user-preferences.test.tsx
@@ -71,7 +71,7 @@ function setup() {
 test("loads preferences from the account and renders the saved emphasis", async () => {
   const { view } = setup();
   const agent = await view.findByText("General Assistant");
-  expect(agent.className).toContain("text-[0.9rem]");
+  expect(agent.className).toContain("text-sm");
   expect(requests).toEqual([
     { path: "/api/settings/preferences", method: "GET", body: undefined },
   ]);
@@ -116,9 +116,7 @@ test("successful writes update only the current account cache; failures preserve
     });
   await mutation.execute({ messageListEmphasis: "thread" });
   await waitFor(() =>
-    expect(view.getByText("Plan next week").className).toContain(
-      "text-[0.9rem]",
-    ),
+    expect(view.getByText("Plan next week").className).toContain("text-sm"),
   );
   expect(requests.at(-1)).toEqual({
     path: "/api/settings/preferences",

From 6028a21642bcf1c81d0780f8416d4df15a4ff7d7 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:44:47 -0300
Subject: [PATCH 04/14] Lighten page and section headings

Page titles are semibold with slightly tighter tracking instead of bold. Section titles drop from
18px bold to 15px semibold, close to body size, so a long page reads as one title and its parts
rather than a row of titles competing with each other.
---
 app/src/components/layout/page-parts.tsx    | 11 +++++++++--
 app/src/routes/_authed/_app/index.tsx       | 11 +++++++----
 app/src/routes/_authed/admin/playground.tsx |  4 +++-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/src/components/layout/page-parts.tsx b/app/src/components/layout/page-parts.tsx
index 492f7491a0..0a2e4871dd 100644
--- a/app/src/components/layout/page-parts.tsx
+++ b/app/src/components/layout/page-parts.tsx
@@ -91,7 +91,10 @@ export function PageHeader({
   return (
     <header className="flex flex-col gap-2" data-slot="page-header">
       <div className="flex flex-row items-center justify-between gap-4">
-        <h1 className="font-bold text-2xl" data-slot="page-title">
+        <h1
+          className="font-semibold text-2xl tracking-tight"
+          data-slot="page-title"
+        >
           {title}
         </h1>
         {action}
@@ -129,7 +132,11 @@ export function PageSection({
     <section className={cn("mt-12", className)}>
       {title ? (
         <div className="flex min-h-8 flex-row items-center justify-between gap-4">
-          <h2 className="font-bold text-lg">{title}</h2>
+          {/*
+           * Close to body size and lighter than the page title, so the sections read as parts of
+           * the page rather than as a second row of titles competing with it.
+           */}
+          <h2 className="font-semibold text-base">{title}</h2>
           {action}
         </div>
       ) : null}
diff --git a/app/src/routes/_authed/_app/index.tsx b/app/src/routes/_authed/_app/index.tsx
index 407a32acc6..d3239f2e32 100644
--- a/app/src/routes/_authed/_app/index.tsx
+++ b/app/src/routes/_authed/_app/index.tsx
@@ -154,7 +154,7 @@ function RouteComponent() {
            */}
           {loading ? (
             <>
-              <h2 className="font-bold text-lg">Explore Bots</h2>
+              <h2 className="font-semibold text-base">Explore Bots</h2>
               <Skeleton className="mt-4 h-[180px]" />
             </>
           ) : explore?.length ? (
@@ -166,7 +166,10 @@ function RouteComponent() {
               aria-labelledby="explore-agents-heading"
             >
               <div className="flex flex-row items-center justify-between gap-4">
-                <h2 id="explore-agents-heading" className="font-bold text-lg">
+                <h2
+                  id="explore-agents-heading"
+                  className="font-semibold text-base"
+                >
                   Explore Bots
                 </h2>
                 {/*
@@ -201,7 +204,7 @@ function RouteComponent() {
             // card there would say the opposite of what a populated composer beside it (still
             // working off that same, successfully loaded `agents`) proves.
             <>
-              <h2 className="font-bold text-lg">Explore Bots</h2>
+              <h2 className="font-semibold text-base">Explore Bots</h2>
               <Empty className="mt-4 h-[180px] border border-dashed border-destructive">
                 <EmptyHeader>
                   <EmptyTitle className="text-destructive">
@@ -215,7 +218,7 @@ function RouteComponent() {
             // when it failed but `agents` is defined — a loaded, empty slice either way. Same
             // plain copy for both: an empty roster is a fact, not an error.
             <>
-              <h2 className="font-bold text-lg">Explore Bots</h2>
+              <h2 className="font-semibold text-base">Explore Bots</h2>
               <Empty className="mt-4 h-[180px] border border-dashed">
                 <EmptyHeader>
                   <EmptyTitle className="text-muted-foreground">
diff --git a/app/src/routes/_authed/admin/playground.tsx b/app/src/routes/_authed/admin/playground.tsx
index 9fd5c3fbad..0654c3dfa9 100644
--- a/app/src/routes/_authed/admin/playground.tsx
+++ b/app/src/routes/_authed/admin/playground.tsx
@@ -205,7 +205,9 @@ function PlaygroundPage() {
         <div className="flex items-start gap-2">
           <SidebarToggle className="-ml-2 shrink-0" />
           <div>
-            <h1 className="font-bold text-2xl">Playground</h1>
+            <h1 className="font-semibold text-2xl tracking-tight">
+              Playground
+            </h1>
             <p className="mt-1 max-w-prose text-pretty text-muted-foreground text-sm leading-relaxed">
               Write a component and publish it without redeploying. Your edits
               are a draft. Conversations only show what is published.

From a8dc69fd7140328b8ea300058eff36523793f042 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:44:47 -0300
Subject: [PATCH 05/14] Show an app's logo or initial instead of the same plug
 on every row

Plugins showed one plug icon on every row, so the icons told one vendor from another no better than
none. Rows now show the app's logo, its brand icon, or its initial; Connections and the app
directory fall back to the initial too. The More apps row, a directory rather than a vendor, gets
an apps icon. In the admin sidebar Skills and Automatic learning shared a file icon; they are now a
slash and a bulb.
---
 app/src/components/admin/admin-sidebar.tsx    |  7 ++--
 .../components/plugins/broker-directory.tsx   |  7 ++--
 app/src/components/plugins/plugin-logo.tsx    | 29 +++++++++++++-
 .../routes/_authed/_app/connections.index.tsx | 20 ++++++----
 .../routes/_authed/admin/plugins/index.tsx    | 38 +++++++++++++------
 5 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/app/src/components/admin/admin-sidebar.tsx b/app/src/components/admin/admin-sidebar.tsx
index 0927359c68..62286f8498 100644
--- a/app/src/components/admin/admin-sidebar.tsx
+++ b/app/src/components/admin/admin-sidebar.tsx
@@ -1,15 +1,16 @@
 import {
   IconArrowLeft,
   IconBuildingBank,
+  IconBulb,
   IconChecks,
   IconCode,
   IconDeviceDesktop,
-  IconFileText,
   IconKey,
   IconLayoutGrid,
   IconListDetails,
   IconPuzzle,
   IconShieldCheck,
+  IconSlash,
   IconUsers,
 } from "@tabler/icons-react";
 import { Link, type LinkOptions } from "@tanstack/react-router";
@@ -79,12 +80,12 @@ const GROUPS: {
       },
       {
         title: "Skills",
-        icon: IconFileText,
+        icon: IconSlash,
         linkOptions: { to: "/admin/skills" },
       },
       {
         title: "Automatic learning",
-        icon: IconFileText,
+        icon: IconBulb,
         linkOptions: { to: "/admin/learning" },
       },
       {
diff --git a/app/src/components/plugins/broker-directory.tsx b/app/src/components/plugins/broker-directory.tsx
index 7137bb66e3..bd29fe042f 100644
--- a/app/src/components/plugins/broker-directory.tsx
+++ b/app/src/components/plugins/broker-directory.tsx
@@ -7,6 +7,7 @@ import {
   PageSection,
   PageShell,
 } from "@/components/layout/page-shell";
+import { AppInitial } from "@/components/plugins/plugin-logo";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -178,13 +179,13 @@ export function BrokerDirectory({ provider }: { provider: PluginsProvider }) {
                   {/* The test id names the screen, not the vendor: this module draws whichever
                       broker is active, and the id is not user-visible. */}
                   <Item data-testid={`directory-${entry.slug}`} size="sm">
-                    {/* The vendor's own mark where the broker supplies one, and a plug where it does
-                        not, so a list of third parties still has a fixed left edge. */}
+                    {/* The vendor's own mark where the broker supplies one, and its initial where it
+                        does not, so a list of third parties still has a fixed left edge. */}
                     <ItemMedia variant={entry.logo ? "image" : "icon"}>
                       {entry.logo ? (
                         <img alt="" src={entry.logo} />
                       ) : (
-                        <IconPlug />
+                        <AppInitial name={entry.name} />
                       )}
                     </ItemMedia>
                     <ItemContent>
diff --git a/app/src/components/plugins/plugin-logo.tsx b/app/src/components/plugins/plugin-logo.tsx
index c457a11b0c..d2c279a25f 100644
--- a/app/src/components/plugins/plugin-logo.tsx
+++ b/app/src/components/plugins/plugin-logo.tsx
@@ -1,9 +1,24 @@
 import { IconPlug } from "@tabler/icons-react";
 import { useState } from "react";
 
-export function PluginLogo({ logo }: { logo?: string | null }) {
+/**
+ * An app's logo, or its initial where it has none.
+ *
+ * The initial rather than a generic plug because a list of apps that all show the same plug is a
+ * column of identical tiles, which tells nobody anything; "T" and "G" at least tell Todoist from
+ * GitHub at a glance. The plug is left only for a caller with no name to take an initial from.
+ */
+export function PluginLogo({
+  logo,
+  name,
+}: {
+  logo?: string | null;
+  name?: string;
+}) {
   const [failedUrl, setFailedUrl] = useState<string | null>(null);
-  if (!logo || failedUrl === logo) return <IconPlug className="size-4" />;
+  if (!logo || failedUrl === logo) {
+    return name ? <AppInitial name={name} /> : <IconPlug className="size-4" />;
+  }
 
   return (
     <img
@@ -16,3 +31,13 @@ export function PluginLogo({ logo }: { logo?: string | null }) {
     />
   );
 }
+
+/** The first letter of an app's name, drawn where its logo would go. Hidden from screen readers: the row's title already says the name. */
+export function AppInitial({ name }: { name: string }) {
+  const initial = name.trim().charAt(0).toUpperCase();
+  return (
+    <span aria-hidden className="font-medium text-sm leading-none">
+      {initial || "?"}
+    </span>
+  );
+}
diff --git a/app/src/routes/_authed/_app/connections.index.tsx b/app/src/routes/_authed/_app/connections.index.tsx
index b789b234d7..8cbaa2d008 100644
--- a/app/src/routes/_authed/_app/connections.index.tsx
+++ b/app/src/routes/_authed/_app/connections.index.tsx
@@ -14,7 +14,7 @@ import {
   PageShell,
 } from "@/components/layout/page-shell";
 import { RowMark } from "@/components/layout/row-mark";
-import { PluginLogo } from "@/components/plugins/plugin-logo";
+import { AppInitial, PluginLogo } from "@/components/plugins/plugin-logo";
 import { providerIcon } from "@/components/settings/linked-accounts";
 import {
   linkedNotice,
@@ -191,9 +191,8 @@ const MARKS: ReadonlyMap<
  * nothing a plain object would have inherited, so a catalogue key called `toString` draws the
  * fallback mark rather than handing React `Object.prototype.toString` to render as a component.
  * The read goes through `keyedLookup` so the rule has one home rather than one comment per page;
- * see `app/src/lib/lookup.ts`. The `?? IconPlug` stays here, because what a missing key draws is
- * this page's decision. */
-const markFor = (key: string) => keyedLookup(MARKS, key) ?? IconPlug;
+ * see `app/src/lib/lookup.ts`. A missing key draws the app's initial, in `ConnectionMark`. */
+const markFor = (key: string) => keyedLookup(MARKS, key);
 
 function RouteComponent() {
   const { connected: outcome, authorized, linked } = Route.useSearch();
@@ -428,7 +427,7 @@ function ConnectionItem({ row }: { row: ConnectionRow }) {
       variant="outline"
     >
       <RowMark className="size-9">
-        <ConnectionMark mark={row.mark} />
+        <ConnectionMark mark={row.mark} name={row.title} />
       </RowMark>
       <ItemContent className="min-w-0 gap-0.5">
         <ItemTitle className="block w-auto truncate">{row.title}</ItemTitle>
@@ -446,10 +445,17 @@ function ConnectionItem({ row }: { row: ConnectionRow }) {
   );
 }
 
-function ConnectionMark({ mark }: { mark: ConnectionRow["mark"] }) {
-  if (mark.kind === "logo") return <PluginLogo logo={mark.logo} />;
+function ConnectionMark({
+  mark,
+  name,
+}: {
+  mark: ConnectionRow["mark"];
+  name: string;
+}) {
+  if (mark.kind === "logo") return <PluginLogo logo={mark.logo} name={name} />;
   const Mark =
     mark.kind === "provider" ? providerIcon(mark.provider) : markFor(mark.key);
+  if (!Mark) return <AppInitial name={name} />;
   return <Mark className="size-4" />;
 }
 
diff --git a/app/src/routes/_authed/admin/plugins/index.tsx b/app/src/routes/_authed/admin/plugins/index.tsx
index 8b114c99a8..301dd90909 100644
--- a/app/src/routes/_authed/admin/plugins/index.tsx
+++ b/app/src/routes/_authed/admin/plugins/index.tsx
@@ -1,4 +1,5 @@
 import {
+  IconApps,
   IconBrandGoogleDrive,
   IconBrandNotion,
   IconChevronRight,
@@ -19,6 +20,7 @@ import {
   AccessRequestsSection,
   usePendingRequestCounts,
 } from "@/components/plugins/access-requests";
+import { PluginLogo } from "@/components/plugins/plugin-logo";
 import {
   Item,
   ItemActions,
@@ -59,18 +61,28 @@ export const Route = createFileRoute("/_authed/admin/plugins/")({
 });
 
 /**
- * A vendor's own mark where there is one, and a plug where there is not.
- *
- * The fallback covers a server an administrator added by URL, which has no catalogue entry and so no
- * mark of its own — and it would cover a catalogue vendor Tabler ships no brand for. Only Drive is in
- * the catalogue today, and Tabler has it.
+ * A vendor's own mark where Tabler ships one. Everything else draws the server's logo, or its
+ * initial: a server an administrator added by URL has no catalogue entry and so no mark of its own,
+ * and a column of identical plugs would tell one vendor from another no better than no icon at all.
  */
 const MARKS: Record<string, React.ComponentType<{ className?: string }>> = {
   "google-drive": IconBrandGoogleDrive,
   notion: IconBrandNotion,
 };
 
-const markFor = (key: string) => MARKS[key] ?? IconPlug;
+function VendorMark({
+  id,
+  logo,
+  name,
+}: {
+  id: string;
+  logo?: string | null;
+  name: string;
+}) {
+  const Brand = MARKS[id];
+  if (Brand) return <Brand className="size-4" />;
+  return <PluginLogo logo={logo} name={name} />;
+}
 
 /**
  * What a connected row says on the right.
@@ -167,7 +179,6 @@ function RouteComponent() {
             ) : (
               <PageRows>
                 {plugins.data?.servers.map((server, index) => {
-                  const Mark = markFor(server.id);
                   return (
                     <React.Fragment key={server.id}>
                       {/*
@@ -186,7 +197,11 @@ function RouteComponent() {
                         size="sm"
                       >
                         <RowMark>
-                          <Mark className="size-4" />
+                          <VendorMark
+                            id={server.id}
+                            logo={server.logo}
+                            name={server.title}
+                          />
                         </RowMark>
                         <ItemContent>
                           <ItemTitle>{server.title}</ItemTitle>
@@ -238,7 +253,6 @@ function RouteComponent() {
             ) : (
               <PageRows>
                 {explore.map((entry: CatalogueItem, index) => {
-                  const Mark = markFor(entry.key);
                   return (
                     <React.Fragment key={entry.key}>
                       <Item
@@ -252,7 +266,7 @@ function RouteComponent() {
                         size="sm"
                       >
                         <RowMark>
-                          <Mark className="size-4" />
+                          <VendorMark id={entry.key} name={entry.title} />
                         </RowMark>
                         <ItemContent>
                           <ItemTitle>{entry.title}</ItemTitle>
@@ -302,7 +316,7 @@ function RouteComponent() {
                   size="sm"
                 >
                   <RowMark>
-                    <IconPlug className="size-4" />
+                    <IconApps className="size-4" />
                   </RowMark>
                   <ItemContent>
                     <ItemTitle>{moreApps.title}</ItemTitle>
@@ -317,7 +331,7 @@ function RouteComponent() {
                    until the key is set. */
                 <Item data-testid="plugin-directory" size="sm">
                   <RowMark>
-                    <IconPlug className="size-4" />
+                    <IconApps className="size-4" />
                   </RowMark>
                   <ItemContent>
                     <ItemTitle>{moreApps.title}</ItemTitle>

From 731d7e0434b9ecd46c2b388cf2f788368ca5f519 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:45:29 -0300
Subject: [PATCH 06/14] Home: drop the product-name label above the greeting

The small uppercase OPENBOT over "Start a conversation" repeated what the sidebar already says
and gave the page two headings where one does the job. The greeting is now the page's only title,
in the same semibold as other page titles.
---
 app/src/routes/_authed/_app/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/src/routes/_authed/_app/index.tsx b/app/src/routes/_authed/_app/index.tsx
index d3239f2e32..e086a93b2f 100644
--- a/app/src/routes/_authed/_app/index.tsx
+++ b/app/src/routes/_authed/_app/index.tsx
@@ -23,7 +23,6 @@ import {
   routeMessage,
 } from "@/lib/channels/route";
 import { useStartChannel } from "@/lib/channels/start";
-import { appConfig } from "@/lib/generated/application-config";
 
 export const Route = createFileRoute("/_authed/_app/")({
   component: RouteComponent,
@@ -51,11 +50,10 @@ function RouteComponent() {
     <>
       <SidebarToggleBar />
       <div className="flex-1 flex flex-col items-center justify-center w-full p-4 mt-8">
+        {/* No product-name label above the greeting: the sidebar already names the product, and a
+            second heading over the first made the page open on a word that says nothing. */}
         <div className="flex flex-col items-center">
-          <h2 className="text-sm uppercase text-muted-foreground font-medium tracking-tight text-center">
-            {appConfig.brand.productName}
-          </h2>
-          <h1 className="text-2xl font-bold tracking-tight mt-1.5 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight text-center">
             {firstConversationGreeting(
               user,
               channels.isSuccess && channels.data.length === 0,

From 25b503fcbbf1b72d76efa6d41e03880e707182e3 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:46:22 -0300
Subject: [PATCH 07/14] Home: show Explore Bots as compact cards in a grid

The carousel's tall cards left about 50px of nothing between each avatar and its name, and its
arrows showed even when every card fit. Bots are now rows (avatar beside name and one line of what
the Bot is for) two to a line, up to four, with an All Bots link when there are more. The skeleton,
empty and error states reserve the same two rows so the composer does not move.
---
 app/src/components/agents/agent-card.tsx    | 22 +++---
 app/src/routes/_authed/_app/index.tsx       | 77 ++++++++-------------
 app/tests/home-fallback-routing.fixture.tsx | 13 ----
 3 files changed, 38 insertions(+), 74 deletions(-)

diff --git a/app/src/components/agents/agent-card.tsx b/app/src/components/agents/agent-card.tsx
index 67cc270a06..2aa5abeb83 100644
--- a/app/src/components/agents/agent-card.tsx
+++ b/app/src/components/agents/agent-card.tsx
@@ -9,23 +9,23 @@ export function AgentCard({
   appearance = "compact",
 }: {
   agent: AgentProfile;
-  appearance?: "compact" | "tile";
+  appearance?: "compact" | "row";
 }) {
-  if (appearance === "tile") {
+  if (appearance === "row") {
     return (
-      <div className="flex h-[180px] w-[144px] flex-col overflow-hidden rounded-2xl border border-border bg-card p-3 transition-colors hover:border-ring dark:border-transparent">
+      /*
+       * The avatar beside the name rather than above it: a tall card left most of its height empty
+       * between the two, and a row reads the name and what the Bot is for in one glance.
+       */
+      <div className="flex h-16 min-w-0 items-center gap-3 rounded-xl border border-border bg-card px-3 transition-colors hover:border-ring dark:border-transparent">
         <div aria-hidden="true" className="flex shrink-0">
-          <AbstractAvatar name={agent.name} seed={agent.avatarSeed} size={36} />
+          <AbstractAvatar name={agent.name} seed={agent.avatarSeed} size={32} />
         </div>
-        {/* Bottom-aligned, where the text sat on the earlier artwork card; the avatar holds the top. */}
-        <div className="mt-auto flex min-w-0 flex-col gap-2">
-          <span
-            className="line-clamp-1 break-words text-sm font-medium leading-5"
-            title={agent.name}
-          >
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <span className="truncate text-sm font-medium" title={agent.name}>
             {agent.name}
           </span>
-          <span className="line-clamp-3 break-words text-xs leading-4 text-muted-foreground">
+          <span className="truncate text-xs text-muted-foreground">
             {agent.roleDescription}
           </span>
         </div>
diff --git a/app/src/routes/_authed/_app/index.tsx b/app/src/routes/_authed/_app/index.tsx
index e086a93b2f..5bde403749 100644
--- a/app/src/routes/_authed/_app/index.tsx
+++ b/app/src/routes/_authed/_app/index.tsx
@@ -4,13 +4,6 @@ import { useState } from "react";
 import { AgentCard } from "@/components/agents/agent-card";
 import { Composer, toAgentOptions } from "@/components/channels/composer";
 import { SidebarToggleBar } from "@/components/layout/sidebar-toggle";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel";
 import { Empty, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
 import { Skeleton } from "@/components/ui/skeleton";
 import { defaultAgentProfile } from "@/lib/agents/default-agent";
@@ -24,6 +17,9 @@ import {
 } from "@/lib/channels/route";
 import { useStartChannel } from "@/lib/channels/start";
 
+/** How many Bots the home page shows before pointing to the rest. Two rows of two. */
+const EXPLORE_SHOWN = 4;
+
 export const Route = createFileRoute("/_authed/_app/")({
   component: RouteComponent,
 });
@@ -131,38 +127,22 @@ function RouteComponent() {
           ) : null}
         </div>
         {/*
-         * A carousel rather than the wrapping grid `/agents` uses, and the difference is on purpose.
-         * This is a one-row teaser under the composer: a grid that wrapped here would push the row
-         * down the page every time somebody shared another Bot. `/agents` is the browse surface and
-         * wraps.
-         *
-         * What it replaces was `flex flex-row` with no wrap over cards that have no `shrink-0`, so
-         * the fifth public Bot squeezed all five — the same failure `/agents` had just been fixed
-         * for, still sitting here.
+         * Up to four Bots, two to a row, as compact cards that fill the column. A teaser under the
+         * composer, not the place to browse: more than four would push the composer up every time
+         * somebody shared another Bot, so the rest are one "All Bots" away. Every state below
+         * reserves the same two rows, so the composer above it does not move when the list settles.
          */}
         <div className="mt-10 w-full max-w-2xl">
-          {/*
-           * The heading is repeated in each arm rather than hoisted above this conditional:
-           * `CarouselPrevious`/`CarouselNext` read the carousel's own context, so they must stay
-           * inside `<Carousel>`, and the heading shares that row with them once populated. Each
-           * arm also reserves the same ~180px of body beneath it — a skeleton here, the
-           * carousel's 144×180 cards, or the empty/error state's own `h-[180px]` — so the section
-           * holds its own height across all four states and the composer sitting above it on
-           * this centred column does not move when the query settles or fails.
-           */}
           {loading ? (
             <>
               <h2 className="font-semibold text-base">Explore Bots</h2>
-              <Skeleton className="mt-4 h-[180px]" />
+              <Skeleton className="mt-4 h-[140px]" />
             </>
           ) : explore?.length ? (
             // Wins over `failed`: a failed background refetch does not clear TanStack Query's
-            // cached `data`, so a stale carousel here beats an error card claiming there is
+            // cached `data`, so a stale list here beats an error card claiming there is
             // nothing to explore, which would be false while this list is still populated.
-            <Carousel
-              opts={{ align: "start" }}
-              aria-labelledby="explore-agents-heading"
-            >
+            <section aria-labelledby="explore-agents-heading">
               <div className="flex flex-row items-center justify-between gap-4">
                 <h2
                   id="explore-agents-heading"
@@ -170,28 +150,25 @@ function RouteComponent() {
                 >
                   Explore Bots
                 </h2>
-                {/*
-                 * `static` undoes the primitive's own absolute placement, which parks these either
-                 * side of the row and off the edge of a prose-width column. They belong on the
-                 * heading's baseline, where the section's other decisions are.
-                 */}
-                <div className="flex items-center gap-2">
-                  <CarouselPrevious className="static translate-x-0 translate-y-0" />
-                  <CarouselNext className="static translate-x-0 translate-y-0" />
-                </div>
+                {explore.length > EXPLORE_SHOWN ? (
+                  <Link
+                    className="text-muted-foreground text-sm hover:text-foreground"
+                    to="/bots"
+                  >
+                    All Bots
+                  </Link>
+                ) : null}
               </div>
-              {/* `-ml-4`/`pl-4` is the primitive's own gap convention; `basis-auto` keeps each
-                  slide the card's own 144px instead of a full-width slide. */}
-              <CarouselContent className="-ml-4 mt-4">
-                {explore.map((agent) => (
-                  <CarouselItem className="basis-auto pl-4" key={agent.id}>
+              <ul className="mt-4 grid min-h-[140px] grid-cols-1 content-start gap-3 sm:grid-cols-2">
+                {explore.slice(0, EXPLORE_SHOWN).map((agent) => (
+                  <li className="min-w-0" key={agent.id}>
                     <Link search={{ agent: agent.id }} to="/channel/new">
-                      <AgentCard agent={agent} appearance="tile" />
+                      <AgentCard agent={agent} appearance="row" />
                     </Link>
-                  </CarouselItem>
+                  </li>
                 ))}
-              </CarouselContent>
-            </Carousel>
+              </ul>
+            </section>
           ) : failed && agents === undefined ? (
             // `agents === undefined` narrows this to "the query has never once returned
             // successfully" — not merely "the last request errored". `?.length` alone can't
@@ -203,7 +180,7 @@ function RouteComponent() {
             // working off that same, successfully loaded `agents`) proves.
             <>
               <h2 className="font-semibold text-base">Explore Bots</h2>
-              <Empty className="mt-4 h-[180px] border border-dashed border-destructive">
+              <Empty className="mt-4 h-[140px] border border-dashed border-destructive">
                 <EmptyHeader>
                   <EmptyTitle className="text-destructive">
                     Couldn't load the Bots shared with you.
@@ -217,7 +194,7 @@ function RouteComponent() {
             // plain copy for both: an empty roster is a fact, not an error.
             <>
               <h2 className="font-semibold text-base">Explore Bots</h2>
-              <Empty className="mt-4 h-[180px] border border-dashed">
+              <Empty className="mt-4 h-[140px] border border-dashed">
                 <EmptyHeader>
                   <EmptyTitle className="text-muted-foreground">
                     Nobody has shared a Bot with you yet.
diff --git a/app/tests/home-fallback-routing.fixture.tsx b/app/tests/home-fallback-routing.fixture.tsx
index 0e709144a9..bcb728e6da 100644
--- a/app/tests/home-fallback-routing.fixture.tsx
+++ b/app/tests/home-fallback-routing.fixture.tsx
@@ -1,18 +1,5 @@
 import { mock } from "bun:test";
-import type { ReactNode } from "react";
 
 mock.module("@/components/layout/sidebar-toggle", () => ({
   SidebarToggleBar: () => <div data-testid="sidebar-toggle-bar" />,
 }));
-
-mock.module("@/components/ui/carousel", () => ({
-  Carousel: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  CarouselContent: ({ children }: { children: ReactNode }) => (
-    <div>{children}</div>
-  ),
-  CarouselItem: ({ children }: { children: ReactNode }) => (
-    <div>{children}</div>
-  ),
-  CarouselNext: () => <button type="button">Next agents</button>,
-  CarouselPrevious: () => <button type="button">Previous agents</button>,
-}));

From d412533887868a33ddc1ad925c090ff2c4b31623 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:47:00 -0300
Subject: [PATCH 08/14] Bot page: describe the Bot, not the page

"Review this Bot's activity and settings." could head any page. The description under the title
is now the Bot's own one-liner, which used to sit just below in the avatar block; that block keeps
the avatar and the Bot's title.
---
 app/src/components/bot-profile/profile.tsx          | 10 ++++------
 app/src/routes/_authed/_app/bots.$agentId.index.tsx |  3 ++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/src/components/bot-profile/profile.tsx b/app/src/components/bot-profile/profile.tsx
index fef082c983..656654ac97 100644
--- a/app/src/components/bot-profile/profile.tsx
+++ b/app/src/components/bot-profile/profile.tsx
@@ -77,14 +77,12 @@ export function BotProfile({
 
   return (
     <>
+      {/* The one-liner is the page's description, under the title; here, the face and its title. */}
       <div className="mt-6 flex items-center gap-3">
         <AbstractAvatar name={agent.name} seed={agent.avatarSeed} size={40} />
-        <div className="min-w-0">
-          {agent.title && <p className="truncate font-medium">{agent.title}</p>}
-          <p className="line-clamp-2 text-muted-foreground text-sm">
-            {agent.roleDescription}
-          </p>
-        </div>
+        {agent.title ? (
+          <p className="min-w-0 truncate font-medium">{agent.title}</p>
+        ) : null}
       </div>
       <div className="mt-4">
         <BotPausedBanner agentId={agent.id} />
diff --git a/app/src/routes/_authed/_app/bots.$agentId.index.tsx b/app/src/routes/_authed/_app/bots.$agentId.index.tsx
index 5512c648ea..f2cbbefa28 100644
--- a/app/src/routes/_authed/_app/bots.$agentId.index.tsx
+++ b/app/src/routes/_authed/_app/bots.$agentId.index.tsx
@@ -18,7 +18,8 @@ function BotProfilePage() {
   return (
     <PageShell
       backButton={{ label: "Bots", linkProps: { to: "/bots" } }}
-      description="Review this Bot’s activity and settings."
+      // What this Bot is for, in its own words, rather than a sentence that could head any page.
+      description={agent.data?.roleDescription}
       title={agent.data?.name ?? "Bot"}
     >
       {agent.isPending ? null : agent.error ? (

From 7125aac5585c3362d0710e1918a6600430a41ac6 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:47:47 -0300
Subject: [PATCH 09/14] Bot page: fold an idle Activity section into For you
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With nothing running or scheduled, Activity was a whole section holding one row, "All activity ·
Nothing yet". That row now sits at the end of For you, titled Activity. The section still shows,
with its rows to running and scheduled work, whenever there is any.
---
 app/src/components/bot-profile/activity.tsx | 102 ++++++++++++++------
 app/src/components/bot-profile/profile.tsx  |   3 +-
 app/tests/bot-page-length.test.tsx          |  25 +++--
 3 files changed, 94 insertions(+), 36 deletions(-)

diff --git a/app/src/components/bot-profile/activity.tsx b/app/src/components/bot-profile/activity.tsx
index 91c0fad637..41c3d17599 100644
--- a/app/src/components/bot-profile/activity.tsx
+++ b/app/src/components/bot-profile/activity.tsx
@@ -197,22 +197,31 @@ function ActivitySection({
 /** How many running or scheduled items the Bot's page shows before "All activity". */
 const GLANCE = 3;
 
+/** Running work first, then what is lined up, as many as the Bot's page shows. */
+function upcomingOf(activity: BotActivity | undefined) {
+  return activity
+    ? [
+        ...activity.inProgress.map((item) => ({ item, live: true })),
+        ...activity.scheduled.map((item) => ({ item, live: false })),
+      ].slice(0, GLANCE)
+    : [];
+}
+
 /**
  * The Bot page's view of its activity: what is under way and what is lined up, so either is seen
  * without opening anything, then a row to the full lists. Running work comes first, with its dot.
  *
+ * Only when there is something running or lined up. With nothing to show, a whole section for one
+ * row to the full lists is a heading over nothing; that row joins "For you" instead, through
+ * `BotActivityRow`.
+ *
  * The full lists used to sit here and ran on for screens; finished work is the long part and the
  * least urgent, so it lives only on the Activity page.
  */
 export function BotActivityGlance({ agentId }: { agentId: string }) {
   const activity = useQuery(botActivityQueryOptions(agentId));
-  if (activity.isPending) return null;
-  const upcoming = activity.data
-    ? [
-        ...activity.data.inProgress.map((item) => ({ item, live: true })),
-        ...activity.data.scheduled.map((item) => ({ item, live: false })),
-      ].slice(0, GLANCE)
-    : [];
+  const upcoming = upcomingOf(activity.data);
+  if (activity.isPending || upcoming.length === 0) return null;
   return (
     <PageSection title="Activity">
       <PageRows>
@@ -222,32 +231,69 @@ export function BotActivityGlance({ agentId }: { agentId: string }) {
             <Separator />
           </Fragment>
         ))}
-        <Item
-          render={<Link params={{ agentId }} to="/bots/$agentId/activity" />}
-          size="sm"
-        >
-          {upcoming.length ? null : (
-            <ItemMedia variant="icon">
-              <IconHistory />
-            </ItemMedia>
-          )}
-          <ItemContent>
-            <ItemTitle>All activity</ItemTitle>
-            <ItemDescription>
-              {activity.data
-                ? activitySummary(activity.data)
-                : "Couldn't load this Bot's activity."}
-            </ItemDescription>
-          </ItemContent>
-          <ItemActions>
-            <IconChevronRight className="size-4 text-muted-foreground" />
-          </ItemActions>
-        </Item>
+        <AllActivityItem activity={activity.data} agentId={agentId} />
       </PageRows>
     </PageSection>
   );
 }
 
+/**
+ * The row to a Bot's activity, inside "For you", for when nothing is running or lined up and
+ * `BotActivityGlance` draws no section of its own. Starts with a separator, because it follows the
+ * card's other rows.
+ */
+export function BotActivityRow({ agentId }: { agentId: string }) {
+  const activity = useQuery(botActivityQueryOptions(agentId));
+  if (activity.isPending || upcomingOf(activity.data).length > 0) return null;
+  return (
+    <>
+      <Separator />
+      <AllActivityItem
+        activity={activity.data}
+        agentId={agentId}
+        title="Activity"
+        withIcon
+      />
+    </>
+  );
+}
+
+function AllActivityItem({
+  activity,
+  agentId,
+  title = "All activity",
+  withIcon = false,
+}: {
+  activity: BotActivity | undefined;
+  agentId: string;
+  title?: string;
+  withIcon?: boolean;
+}) {
+  return (
+    <Item
+      render={<Link params={{ agentId }} to="/bots/$agentId/activity" />}
+      size="sm"
+    >
+      {withIcon ? (
+        <ItemMedia variant="icon">
+          <IconHistory />
+        </ItemMedia>
+      ) : null}
+      <ItemContent>
+        <ItemTitle>{title}</ItemTitle>
+        <ItemDescription>
+          {activity
+            ? activitySummary(activity)
+            : "Couldn't load this Bot's activity."}
+        </ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <IconChevronRight className="size-4 text-muted-foreground" />
+      </ItemActions>
+    </Item>
+  );
+}
+
 /**
  * The Bot page's one line about its activity: what is running and what is lined up, the two that
  * might want a look. Finished work is only counted when there is nothing else to say.
diff --git a/app/src/components/bot-profile/profile.tsx b/app/src/components/bot-profile/profile.tsx
index 656654ac97..f452d292e2 100644
--- a/app/src/components/bot-profile/profile.tsx
+++ b/app/src/components/bot-profile/profile.tsx
@@ -41,7 +41,7 @@ import {
   botLifecycleQueryOptions,
 } from "@/lib/bot-lifecycle/queries";
 import { queryClient } from "@/query-client";
-import { BotActivityGlance } from "./activity";
+import { BotActivityGlance, BotActivityRow } from "./activity";
 import { BotPausedBanner } from "./pause-banner";
 
 const NOTIFY_LABEL: Record<BotNotify, string> = {
@@ -216,6 +216,7 @@ export function BotProfile({
                 <IconChevronRight className="size-4 text-muted-foreground" />
               </ItemActions>
             </Item>
+            <BotActivityRow agentId={agent.id} />
           </PageRows>
         )}
       </PageSection>
diff --git a/app/tests/bot-page-length.test.tsx b/app/tests/bot-page-length.test.tsx
index 20263d8e19..5c23bcb85c 100644
--- a/app/tests/bot-page-length.test.tsx
+++ b/app/tests/bot-page-length.test.tsx
@@ -11,6 +11,7 @@ import { cleanup, fireEvent, render } from "@testing-library/react";
 import {
   activitySummary,
   BotActivityGlance,
+  BotActivityRow,
 } from "@/components/bot-profile/activity";
 import { SuggestionsInbox } from "@/components/suggestions/proactive-panel";
 import type { ActivityItem, BotActivity } from "@/lib/bot-lifecycle/queries";
@@ -102,7 +103,10 @@ test("the newest three suggestions show, and the rest open in place", async () =
   expect(view.queryByRole("button", { name: /more$/ })).toBeNull();
 });
 
-function glance(data: BotActivity) {
+function glance(
+  data: BotActivity,
+  Component: typeof BotActivityGlance = BotActivityGlance,
+) {
   global.fetch = (async (input: RequestInfo | URL) =>
     String(input).endsWith("/activity")
       ? Response.json({ activity: data })
@@ -112,7 +116,7 @@ function glance(data: BotActivity) {
         )) as typeof fetch;
   const router = createRouter({
     routeTree: createRootRoute({
-      component: () => <BotActivityGlance agentId="scout" />,
+      component: () => <Component agentId="scout" />,
     }),
     history: createMemoryHistory({ initialEntries: ["/"] }),
   });
@@ -148,13 +152,20 @@ test("running and scheduled work shows on the Bot's page, running first, three a
   expect(view.queryByText("Done 1")).toBeNull();
 });
 
-test("with nothing running or scheduled, the section is the one row to all activity", async () => {
-  const view = glance({
+test("with nothing running or scheduled, there is no Activity section, and For you holds the one row", async () => {
+  const idle = {
     inProgress: [],
     scheduled: [],
     completed: items(4, "Done"),
-  });
+  };
+  const section = glance(idle);
+  const row = glance(idle, BotActivityRow);
 
-  expect(await view.findByText("Nothing running or scheduled")).toBeTruthy();
-  expect(view.container.querySelectorAll("[data-slot=item]")).toHaveLength(1);
+  expect(await row.findByText("Nothing running or scheduled")).toBeTruthy();
+  const titles = [
+    ...row.container.querySelectorAll("[data-slot=item-title]"),
+  ].map((title) => title.textContent);
+  expect(titles).toEqual(["Activity"]);
+  expect(section.container.querySelector("[data-slot=item]")).toBeNull();
+  expect(section.queryByRole("heading", { name: "Activity" })).toBeNull();
 });

From 82d502bc558572ab7b1f0889b14c4fc73ddc2328 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:49:53 -0300
Subject: [PATCH 10/14] Connections: fit each tile's line, and drop the one
 that repeats its button

GitHub's tile line was a full sentence cut off mid-word; tiles now carry a short version that fits
("Repository events can start Bots."), and the full sentence stays on GitHub's own page. An app
with no summary of its own no longer shows "Connect your Todoist account.", which only repeated
the Connect button beside it; the tile shows just its name.
---
 app/src/lib/connections/rows.ts                   | 15 +++++++++++++--
 app/src/routes/_authed/_app/connections.index.tsx | 14 ++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/app/src/lib/connections/rows.ts b/app/src/lib/connections/rows.ts
index 6e22ac303b..4a29251b00 100644
--- a/app/src/lib/connections/rows.ts
+++ b/app/src/lib/connections/rows.ts
@@ -56,6 +56,15 @@ export const IDENTITY_SUMMARIES = {
   slack: "Lets OpenBot recognise you when you message it from Slack.",
 } as const;
 
+/**
+ * The same, short enough for a Connections tile, where the line is one line wide and the full
+ * sentence was cut off mid-word. The full one stays on each connection's own page.
+ */
+const IDENTITY_TILE_SUMMARIES = {
+  github: "Repository events can start Bots.",
+  slack: "Message OpenBot from Slack.",
+} as const;
+
 const IDENTITY_TITLES = { github: "GitHub", slack: "Slack" } as const;
 
 export function connectionRows(input: {
@@ -80,7 +89,7 @@ export function connectionRows(input: {
           title: IDENTITY_TITLES[provider],
           summary: link?.handle
             ? `@${link.handle}`
-            : IDENTITY_SUMMARIES[provider],
+            : IDENTITY_TILE_SUMMARIES[provider],
           state: !link
             ? "available"
             : link.status === "needs_reconnect"
@@ -112,7 +121,9 @@ export function connectionRows(input: {
         (server): ConnectionRow => ({
           key: server.id,
           title: server.title,
-          summary: server.summary || `Connect your ${server.title} account.`,
+          // No line rather than "Connect your Todoist account.", which only repeated the tile's
+          // Connect button.
+          summary: server.summary,
           state: input.connected.has(server.id) ? "connected" : "available",
           mark: { kind: "logo", logo: server.logo },
         }),
diff --git a/app/src/routes/_authed/_app/connections.index.tsx b/app/src/routes/_authed/_app/connections.index.tsx
index 8cbaa2d008..b330b5c575 100644
--- a/app/src/routes/_authed/_app/connections.index.tsx
+++ b/app/src/routes/_authed/_app/connections.index.tsx
@@ -431,12 +431,14 @@ function ConnectionItem({ row }: { row: ConnectionRow }) {
       </RowMark>
       <ItemContent className="min-w-0 gap-0.5">
         <ItemTitle className="block w-auto truncate">{row.title}</ItemTitle>
-        <ItemDescription
-          className="line-clamp-1 break-all text-xs"
-          title={row.summary}
-        >
-          {row.summary}
-        </ItemDescription>
+        {row.summary ? (
+          <ItemDescription
+            className="line-clamp-1 break-all text-xs"
+            title={row.summary}
+          >
+            {row.summary}
+          </ItemDescription>
+        ) : null}
       </ItemContent>
       <ItemActions className="shrink-0">
         <ConnectionStateLabel state={row.state} />

From 7058c0a824cadf0f8f1bd85c67c10966f1236eca Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 16:51:07 -0300
Subject: [PATCH 11/14] Browse Composio: show placeholder rows while the
 directory loads, and its count

The full directory takes a couple of seconds to arrive, and until then the page was a search box
over blank space. It now shows placeholder rows while loading, then how many apps there are
("1,605 apps. Search by name to narrow them.") or how many match a search.
---
 .../components/plugins/broker-directory.tsx   | 143 +++++++++++-------
 1 file changed, 89 insertions(+), 54 deletions(-)

diff --git a/app/src/components/plugins/broker-directory.tsx b/app/src/components/plugins/broker-directory.tsx
index bd29fe042f..4f9b97b8a7 100644
--- a/app/src/components/plugins/broker-directory.tsx
+++ b/app/src/components/plugins/broker-directory.tsx
@@ -19,6 +19,7 @@ import {
   ItemTitle,
 } from "@/components/ui/item";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   consentBreadth,
   coverageWarning,
@@ -57,6 +58,9 @@ import { queryClient } from "@/query-client";
  * here branches on which one it is — a `provider === "composio"` test inside a screen is the same
  * mistake wearing a conditional.
  */
+/** Placeholder rows while the directory loads: enough to fill the view, not to suggest a count. */
+const LOADING_ROWS = ["a", "b", "c", "d", "e", "f"];
+
 export function BrokerDirectory({ provider }: { provider: PluginsProvider }) {
   const { name, directoryLabel } = providerVocabulary(provider);
   const [search, setSearch] = React.useState("");
@@ -147,8 +151,31 @@ export function BrokerDirectory({ provider }: { provider: PluginsProvider }) {
           value={search}
         />
 
-        {/* Pending, error, empty, rows — pending first, so no sentence asserts anything mid-fetch. */}
-        {apps.isPending ? null : apps.error ? (
+        {/*
+         * Pending, error, empty, rows. Pending draws placeholder rows: the full directory takes a
+         * couple of seconds to arrive, and a bare search box over blank space read as a page with
+         * nothing on it. They assert nothing, so no sentence claims anything mid-fetch.
+         */}
+        {apps.isPending ? (
+          <div aria-busy="true" aria-label="Loading apps" role="status">
+            <PageRows>
+              {LOADING_ROWS.map((key, index) => (
+                <React.Fragment key={key}>
+                  {index > 0 ? <Separator /> : null}
+                  <Item size="sm">
+                    <ItemMedia variant="icon">
+                      <Skeleton className="size-full" />
+                    </ItemMedia>
+                    <ItemContent className="gap-1.5">
+                      <Skeleton className="h-3.5 w-32" />
+                      <Skeleton className="h-3 w-64" />
+                    </ItemContent>
+                  </Item>
+                </React.Fragment>
+              ))}
+            </PageRows>
+          </div>
+        ) : apps.error ? (
           <p className="mt-4 text-destructive text-sm" role="alert">
             {/*
              * The server's own sentence, as the enable failure above already does. A keyless
@@ -168,64 +195,72 @@ export function BrokerDirectory({ provider }: { provider: PluginsProvider }) {
               : `${name} returned no apps.`}
           </PageEmpty>
         ) : (
-          <PageRows>
-            {listed.map((entry, index) => {
-              // One mutation serves every row, so which rows are mid-request is tracked beside it
-              // rather than read off it. See `adding` above.
-              const isAdding = adding.has(entry.slug);
+          <>
+            {/* How many there are, before the list: with no search, this is the whole directory. */}
+            <p className="mt-4 text-muted-foreground text-xs">
+              {query
+                ? `${listed.length.toLocaleString()} ${listed.length === 1 ? "match" : "matches"}`
+                : `${listed.length.toLocaleString()} apps. Search by name to narrow them.`}
+            </p>
+            <PageRows className="mt-2">
+              {listed.map((entry, index) => {
+                // One mutation serves every row, so which rows are mid-request is tracked beside it
+                // rather than read off it. See `adding` above.
+                const isAdding = adding.has(entry.slug);
 
-              return (
-                <React.Fragment key={entry.slug}>
-                  {/* The test id names the screen, not the vendor: this module draws whichever
+                return (
+                  <React.Fragment key={entry.slug}>
+                    {/* The test id names the screen, not the vendor: this module draws whichever
                       broker is active, and the id is not user-visible. */}
-                  <Item data-testid={`directory-${entry.slug}`} size="sm">
-                    {/* The vendor's own mark where the broker supplies one, and its initial where it
+                    <Item data-testid={`directory-${entry.slug}`} size="sm">
+                      {/* The vendor's own mark where the broker supplies one, and its initial where it
                         does not, so a list of third parties still has a fixed left edge. */}
-                    <ItemMedia variant={entry.logo ? "image" : "icon"}>
-                      {entry.logo ? (
-                        <img alt="" src={entry.logo} />
-                      ) : (
-                        <AppInitial name={entry.name} />
-                      )}
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>{entry.name}</ItemTitle>
-                      <ItemDescription>{entry.description}</ItemDescription>
-                      {entry.enabled ? null : <CoverageNote app={entry} />}
-                      {entry.enabled ? null : <BreadthNote app={entry} />}
-                    </ItemContent>
-                    <ItemActions>
-                      {/* The size of the decision, stated before it is made: an app is not one
+                      <ItemMedia variant={entry.logo ? "image" : "icon"}>
+                        {entry.logo ? (
+                          <img alt="" src={entry.logo} />
+                        ) : (
+                          <AppInitial name={entry.name} />
+                        )}
+                      </ItemMedia>
+                      <ItemContent>
+                        <ItemTitle>{entry.name}</ItemTitle>
+                        <ItemDescription>{entry.description}</ItemDescription>
+                        {entry.enabled ? null : <CoverageNote app={entry} />}
+                        {entry.enabled ? null : <BreadthNote app={entry} />}
+                      </ItemContent>
+                      <ItemActions>
+                        {/* The size of the decision, stated before it is made: an app is not one
                           tool, and "167 actions" is what says so. */}
-                      <span className="text-muted-foreground text-xs">
-                        {entry.actionCount} actions
-                      </span>
-                      {/*
-                       * An app this deployment already has says so rather than offering Add again.
-                       * A second Add would ask the server to record a connector it already holds,
-                       * and there is nothing on the row to suggest that would be harmless.
-                       */}
-                      {entry.enabled ? (
                         <span className="text-muted-foreground text-xs">
-                          Added
+                          {entry.actionCount} actions
                         </span>
-                      ) : (
-                        <Button
-                          disabled={isAdding}
-                          onClick={() => enable.mutate({ slug: entry.slug })}
-                          size="sm"
-                          variant="outline"
-                        >
-                          {isAdding ? "Adding…" : "Add"}
-                        </Button>
-                      )}
-                    </ItemActions>
-                  </Item>
-                  {index !== listed.length - 1 && <Separator />}
-                </React.Fragment>
-              );
-            })}
-          </PageRows>
+                        {/*
+                         * An app this deployment already has says so rather than offering Add again.
+                         * A second Add would ask the server to record a connector it already holds,
+                         * and there is nothing on the row to suggest that would be harmless.
+                         */}
+                        {entry.enabled ? (
+                          <span className="text-muted-foreground text-xs">
+                            Added
+                          </span>
+                        ) : (
+                          <Button
+                            disabled={isAdding}
+                            onClick={() => enable.mutate({ slug: entry.slug })}
+                            size="sm"
+                            variant="outline"
+                          >
+                            {isAdding ? "Adding…" : "Add"}
+                          </Button>
+                        )}
+                      </ItemActions>
+                    </Item>
+                    {index !== listed.length - 1 && <Separator />}
+                  </React.Fragment>
+                );
+              })}
+            </PageRows>
+          </>
         )}
       </PageSection>
     </PageShell>

From 22dfead1f397f20af0a4342b58c5637bc90ce122 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 17:37:40 -0300
Subject: [PATCH 12/14] Put CopilotKit's dot matrix behind empty states,
 swappable by token

Sam's square-dot matrix (from the design-uplift branch) now sits faintly behind every PageEmpty,
fading out from the top-right corner. It is built to be changed without touching a component:

- the tile is app/src/assets/patterns/dot-matrix.svg, used as a mask, so replacing the file
  changes the pattern;
- --empty-pattern, --empty-pattern-color and --empty-pattern-opacity in theme.css point at the
  file and set its colour and strength, per theme;
- --empty-pattern-opacity: 0 turns it off. Skins start with it off, since it is drawn for
  OpenBot's own palette.
---
 app/src/assets/patterns/dot-matrix.svg   | 136 +++++++++++++++++++++++
 app/src/components/layout/page-parts.tsx |   5 +-
 app/src/skins/skins.css                  |   8 ++
 app/src/styles.css                       |  28 +++++
 app/src/theme.css                        |  11 ++
 5 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 app/src/assets/patterns/dot-matrix.svg

diff --git a/app/src/assets/patterns/dot-matrix.svg b/app/src/assets/patterns/dot-matrix.svg
new file mode 100644
index 0000000000..be9834f09a
--- /dev/null
+++ b/app/src/assets/patterns/dot-matrix.svg
@@ -0,0 +1,136 @@
+<!--
+  The pattern behind empty states: CopilotKit's square-dot matrix, one 108px tile of 5px squares on a
+  9px pitch, each at its own opacity. Used as a mask, so only each shape's opacity matters; the colour
+  is the empty-pattern-color token in theme.css. Replace this file, or point the empty-pattern token
+  at another, to change the pattern. Any tile that repeats works.
+  (No double hyphen anywhere in this comment: XML forbids it, and the image would stop loading.)
+-->
+<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='108' height='108' fill='#000' shape-rendering='crispEdges'>
+  <path fill-opacity='.26' d='M11 2h5v5h-5z'/>
+  <path fill-opacity='.66' d='M20 2h5v5h-5z'/>
+  <path fill-opacity='.29' d='M29 2h5v5h-5z'/>
+  <path fill-opacity='.69' d='M38 2h5v5h-5z'/>
+  <path fill-opacity='.61' d='M47 2h5v5h-5z'/>
+  <path fill-opacity='.76' d='M56 2h5v5h-5z'/>
+  <path fill-opacity='.32' d='M65 2h5v5h-5z'/>
+  <path fill-opacity='.62' d='M74 2h5v5h-5z'/>
+  <path fill-opacity='.40' d='M92 2h5v5h-5z'/>
+  <path fill-opacity='.75' d='M101 2h5v5h-5z'/>
+  <path fill-opacity='.44' d='M2 11h5v5h-5z'/>
+  <path fill-opacity='.61' d='M11 11h5v5h-5z'/>
+  <path fill-opacity='.50' d='M20 11h5v5h-5z'/>
+  <path fill-opacity='.88' d='M29 11h5v5h-5z'/>
+  <path fill-opacity='.29' d='M38 11h5v5h-5z'/>
+  <path fill-opacity='.29' d='M47 11h5v5h-5z'/>
+  <path fill-opacity='.26' d='M56 11h5v5h-5z'/>
+  <path fill-opacity='.26' d='M65 11h5v5h-5z'/>
+  <path fill-opacity='.48' d='M74 11h5v5h-5z'/>
+  <path fill-opacity='.84' d='M83 11h5v5h-5z'/>
+  <path fill-opacity='.48' d='M101 11h5v5h-5z'/>
+  <path fill-opacity='.36' d='M2 20h5v5h-5z'/>
+  <path fill-opacity='.88' d='M11 20h5v5h-5z'/>
+  <path fill-opacity='.30' d='M29 20h5v5h-5z'/>
+  <path fill-opacity='.90' d='M38 20h5v5h-5z'/>
+  <path fill-opacity='.19' d='M47 20h5v5h-5z'/>
+  <path fill-opacity='.25' d='M56 20h5v5h-5z'/>
+  <path fill-opacity='.36' d='M65 20h5v5h-5z'/>
+  <path fill-opacity='.45' d='M74 20h5v5h-5z'/>
+  <path fill-opacity='.22' d='M83 20h5v5h-5z'/>
+  <path fill-opacity='.39' d='M92 20h5v5h-5z'/>
+  <path fill-opacity='.56' d='M101 20h5v5h-5z'/>
+  <path fill-opacity='.44' d='M2 29h5v5h-5z'/>
+  <path fill-opacity='.61' d='M11 29h5v5h-5z'/>
+  <path fill-opacity='.34' d='M20 29h5v5h-5z'/>
+  <path fill-opacity='.23' d='M29 29h5v5h-5z'/>
+  <path fill-opacity='.30' d='M38 29h5v5h-5z'/>
+  <path fill-opacity='.33' d='M47 29h5v5h-5z'/>
+  <path fill-opacity='.84' d='M56 29h5v5h-5z'/>
+  <path fill-opacity='.77' d='M65 29h5v5h-5z'/>
+  <path fill-opacity='.18' d='M83 29h5v5h-5z'/>
+  <path fill-opacity='.22' d='M101 29h5v5h-5z'/>
+  <path fill-opacity='.18' d='M2 38h5v5h-5z'/>
+  <path fill-opacity='.51' d='M11 38h5v5h-5z'/>
+  <path fill-opacity='.90' d='M20 38h5v5h-5z'/>
+  <path fill-opacity='.85' d='M29 38h5v5h-5z'/>
+  <path fill-opacity='.88' d='M38 38h5v5h-5z'/>
+  <path fill-opacity='.25' d='M47 38h5v5h-5z'/>
+  <path fill-opacity='.15' d='M65 38h5v5h-5z'/>
+  <path fill-opacity='.22' d='M83 38h5v5h-5z'/>
+  <path fill-opacity='.41' d='M92 38h5v5h-5z'/>
+  <path fill-opacity='.23' d='M101 38h5v5h-5z'/>
+  <path fill-opacity='.22' d='M2 47h5v5h-5z'/>
+  <path fill-opacity='.86' d='M11 47h5v5h-5z'/>
+  <path fill-opacity='.41' d='M20 47h5v5h-5z'/>
+  <path fill-opacity='.56' d='M38 47h5v5h-5z'/>
+  <path fill-opacity='.14' d='M47 47h5v5h-5z'/>
+  <path fill-opacity='.20' d='M56 47h5v5h-5z'/>
+  <path fill-opacity='.49' d='M65 47h5v5h-5z'/>
+  <path fill-opacity='.24' d='M74 47h5v5h-5z'/>
+  <path fill-opacity='.21' d='M83 47h5v5h-5z'/>
+  <path fill-opacity='.15' d='M92 47h5v5h-5z'/>
+  <path fill-opacity='.63' d='M101 47h5v5h-5z'/>
+  <path fill-opacity='.42' d='M2 56h5v5h-5z'/>
+  <path fill-opacity='.89' d='M20 56h5v5h-5z'/>
+  <path fill-opacity='.61' d='M29 56h5v5h-5z'/>
+  <path fill-opacity='.14' d='M38 56h5v5h-5z'/>
+  <path fill-opacity='.82' d='M47 56h5v5h-5z'/>
+  <path fill-opacity='.94' d='M56 56h5v5h-5z'/>
+  <path fill-opacity='.35' d='M65 56h5v5h-5z'/>
+  <path fill-opacity='.66' d='M74 56h5v5h-5z'/>
+  <path fill-opacity='.34' d='M83 56h5v5h-5z'/>
+  <path fill-opacity='.34' d='M92 56h5v5h-5z'/>
+  <path fill-opacity='.48' d='M101 56h5v5h-5z'/>
+  <path fill-opacity='.54' d='M2 65h5v5h-5z'/>
+  <path fill-opacity='.29' d='M11 65h5v5h-5z'/>
+  <path fill-opacity='.36' d='M20 65h5v5h-5z'/>
+  <path fill-opacity='.27' d='M29 65h5v5h-5z'/>
+  <path fill-opacity='.99' d='M38 65h5v5h-5z'/>
+  <path fill-opacity='.83' d='M47 65h5v5h-5z'/>
+  <path fill-opacity='.21' d='M56 65h5v5h-5z'/>
+  <path fill-opacity='.18' d='M65 65h5v5h-5z'/>
+  <path fill-opacity='.48' d='M74 65h5v5h-5z'/>
+  <path fill-opacity='.93' d='M83 65h5v5h-5z'/>
+  <path fill-opacity='.20' d='M92 65h5v5h-5z'/>
+  <path fill-opacity='.19' d='M101 65h5v5h-5z'/>
+  <path fill-opacity='.44' d='M2 74h5v5h-5z'/>
+  <path fill-opacity='.43' d='M11 74h5v5h-5z'/>
+  <path fill-opacity='.31' d='M20 74h5v5h-5z'/>
+  <path fill-opacity='.14' d='M29 74h5v5h-5z'/>
+  <path fill-opacity='.46' d='M38 74h5v5h-5z'/>
+  <path fill-opacity='.65' d='M47 74h5v5h-5z'/>
+  <path fill-opacity='.23' d='M56 74h5v5h-5z'/>
+  <path fill-opacity='.36' d='M65 74h5v5h-5z'/>
+  <path fill-opacity='.77' d='M83 74h5v5h-5z'/>
+  <path fill-opacity='.88' d='M92 74h5v5h-5z'/>
+  <path fill-opacity='.94' d='M101 74h5v5h-5z'/>
+  <path fill-opacity='.52' d='M11 83h5v5h-5z'/>
+  <path fill-opacity='.86' d='M20 83h5v5h-5z'/>
+  <path fill-opacity='.16' d='M38 83h5v5h-5z'/>
+  <path fill-opacity='.16' d='M47 83h5v5h-5z'/>
+  <path fill-opacity='.93' d='M65 83h5v5h-5z'/>
+  <path fill-opacity='.17' d='M74 83h5v5h-5z'/>
+  <path fill-opacity='.60' d='M83 83h5v5h-5z'/>
+  <path fill-opacity='.39' d='M92 83h5v5h-5z'/>
+  <path fill-opacity='.36' d='M101 83h5v5h-5z'/>
+  <path fill-opacity='.71' d='M2 92h5v5h-5z'/>
+  <path fill-opacity='.35' d='M11 92h5v5h-5z'/>
+  <path fill-opacity='.75' d='M29 92h5v5h-5z'/>
+  <path fill-opacity='.18' d='M38 92h5v5h-5z'/>
+  <path fill-opacity='.43' d='M47 92h5v5h-5z'/>
+  <path fill-opacity='.21' d='M56 92h5v5h-5z'/>
+  <path fill-opacity='.19' d='M65 92h5v5h-5z'/>
+  <path fill-opacity='.57' d='M83 92h5v5h-5z'/>
+  <path fill-opacity='.41' d='M92 92h5v5h-5z'/>
+  <path fill-opacity='.15' d='M101 92h5v5h-5z'/>
+  <path fill-opacity='.28' d='M2 101h5v5h-5z'/>
+  <path fill-opacity='.16' d='M29 101h5v5h-5z'/>
+  <path fill-opacity='.90' d='M38 101h5v5h-5z'/>
+  <path fill-opacity='.70' d='M47 101h5v5h-5z'/>
+  <path fill-opacity='.81' d='M56 101h5v5h-5z'/>
+  <path fill-opacity='.74' d='M65 101h5v5h-5z'/>
+  <path fill-opacity='.49' d='M74 101h5v5h-5z'/>
+  <path fill-opacity='.34' d='M83 101h5v5h-5z'/>
+  <path fill-opacity='.42' d='M92 101h5v5h-5z'/>
+  <path fill-opacity='.65' d='M101 101h5v5h-5z'/>
+  
+</svg>
diff --git a/app/src/components/layout/page-parts.tsx b/app/src/components/layout/page-parts.tsx
index 0a2e4871dd..33e4ff17b7 100644
--- a/app/src/components/layout/page-parts.tsx
+++ b/app/src/components/layout/page-parts.tsx
@@ -243,7 +243,10 @@ export function PageEmpty({
   title?: string;
 }) {
   return (
-    <Empty className="mt-4 rounded-lg border border-border">
+    // `isolate` gives the pattern its own stacking context, so it sits behind the text, not on it.
+    <Empty className="relative isolate mt-4 overflow-hidden rounded-lg border border-border">
+      {/* The pattern is decoration: see `.empty-pattern` in styles.css and its tokens in theme.css. */}
+      <div aria-hidden className="empty-pattern" />
       <EmptyHeader>
         {Icon ? (
           <EmptyMedia variant="icon">
diff --git a/app/src/skins/skins.css b/app/src/skins/skins.css
index 284ac22107..f5d1cf2bd5 100644
--- a/app/src/skins/skins.css
+++ b/app/src/skins/skins.css
@@ -7,3 +7,11 @@
 @import "./openduet/skin.css";
 @import "./opendots/skin.css";
 @import "./openmuse/skin.css";
+
+/*
+ * The empty-state pattern is drawn for OpenBot's own palette, so a skin starts without it. A skin
+ * that wants one sets `--empty-pattern-opacity` (and its colour) in its own skin.css.
+ */
+:root[data-skin] {
+  --empty-pattern-opacity: 0;
+}
diff --git a/app/src/styles.css b/app/src/styles.css
index 46f20924b4..d0b0110729 100644
--- a/app/src/styles.css
+++ b/app/src/styles.css
@@ -152,3 +152,31 @@
     opacity: 0;
   }
 }
+
+/*
+ * The pattern behind an empty state. One rule, read entirely from the `--empty-pattern*` tokens in
+ * theme.css, so changing the pattern never means changing a component: the tile is a mask over a
+ * flat fill of `--empty-pattern-color`, faded out from the top-right corner by a second mask so it
+ * sits behind the empty state rather than across its text.
+ */
+.empty-pattern {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-color: var(--empty-pattern-color);
+  opacity: var(--empty-pattern-opacity);
+  mask-image:
+    var(--empty-pattern),
+    radial-gradient(
+      circle at 85% 15%,
+      #000 0,
+      rgb(0 0 0 / 0.4) 30%,
+      transparent 60%
+    );
+  mask-repeat: repeat, no-repeat;
+  mask-size:
+    auto,
+    100% 100%;
+  mask-composite: intersect;
+}
diff --git a/app/src/theme.css b/app/src/theme.css
index c2feb801b1..aee84abc67 100644
--- a/app/src/theme.css
+++ b/app/src/theme.css
@@ -31,6 +31,15 @@
   --chart-4: oklch(0.372 0.044 257.287);
   --chart-5: oklch(0.279 0.041 260.031);
   --radius: 0.5rem;
+  /*
+   * The pattern behind empty states, in three parts so a customer can change each without touching
+   * a component: the tile (an SVG used as a mask, so only its shapes' opacity matters), its colour,
+   * and how strongly it shows. Turn it off with `--empty-pattern-opacity: 0`. Skins turn it off in
+   * skins.css, since it is drawn for this palette.
+   */
+  --empty-pattern: url("./assets/patterns/dot-matrix.svg");
+  --empty-pattern-color: #9ea4f5;
+  --empty-pattern-opacity: 0.25;
   --sidebar: oklch(0.952 0.01 252);
   --sidebar-foreground: oklch(0.129 0.042 264.695);
   --sidebar-primary: oklch(0.208 0.042 265.755);
@@ -43,6 +52,8 @@
 
 .dark {
   color-scheme: dark;
+  --empty-pattern-color: #bec2ff;
+  --empty-pattern-opacity: 0.15;
   --background: oklch(0.168 0.042 265.2);
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.208 0.042 265.755);

From a2f02be6e90bde44d12ea180ab8740bdae0621ef Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 17:41:44 -0300
Subject: [PATCH 13/14] Show the Bots bolt, not a robot, in empty states about
 Bots

The sidebar draws Bots as a lightning bolt, but empty states about Bots (no Bots yet, no other Bots
to hand off to, Bot not found) drew a robot. They now use the same bolt, so the two read as one
thing.
---
 app/src/components/agents/handoff-panel.tsx                  | 4 ++--
 app/src/components/bots/bot-roster.tsx                       | 4 ++--
 app/src/routes/_authed/admin/computers.tsx                   | 4 ++--
 app/src/routes/_authed/admin/plugins/$key_.bots.$agentId.tsx | 4 ++--
 app/src/routes/_authed/admin/plugins/$key_.tools.$tool.tsx   | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/src/components/agents/handoff-panel.tsx b/app/src/components/agents/handoff-panel.tsx
index 6a693c4910..90ad484fdd 100644
--- a/app/src/components/agents/handoff-panel.tsx
+++ b/app/src/components/agents/handoff-panel.tsx
@@ -1,4 +1,4 @@
-import { IconArrowsExchange, IconLock, IconRobot } from "@tabler/icons-react";
+import { IconArrowsExchange, IconBolt, IconLock } from "@tabler/icons-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Fragment } from "react";
 import { AbstractAvatar } from "@/components/agents/abstract-avatar";
@@ -102,7 +102,7 @@ export function HandoffPanel({ agentId }: { agentId: string }) {
       ) : null}
 
       {grantable && total === 0 ? (
-        <PageEmpty icon={IconRobot} title="No other Bots yet">
+        <PageEmpty icon={IconBolt} title="No other Bots yet">
           When there are more, you can let this Bot ask them here.
         </PageEmpty>
       ) : null}
diff --git a/app/src/components/bots/bot-roster.tsx b/app/src/components/bots/bot-roster.tsx
index c801d12f9e..209741e0d2 100644
--- a/app/src/components/bots/bot-roster.tsx
+++ b/app/src/components/bots/bot-roster.tsx
@@ -1,7 +1,7 @@
 import {
+  IconBolt,
   IconChevronRight,
   IconPlus,
-  IconRobot,
   IconShare,
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
@@ -96,7 +96,7 @@ export function BotRoster() {
                 </Button>
               )
             }
-            icon={IconRobot}
+            icon={IconBolt}
             title={
               yoursPinned
                 ? "All pinned"
diff --git a/app/src/routes/_authed/admin/computers.tsx b/app/src/routes/_authed/admin/computers.tsx
index a0f115aad6..1b8ae6431f 100644
--- a/app/src/routes/_authed/admin/computers.tsx
+++ b/app/src/routes/_authed/admin/computers.tsx
@@ -1,7 +1,7 @@
 import {
   IconAlertTriangle,
+  IconBolt,
   IconDeviceDesktop,
-  IconRobot,
 } from "@tabler/icons-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
@@ -445,7 +445,7 @@ function HostFoldersSection({
       ) : null}
 
       {loading ? null : botIds.length === 0 ? (
-        <PageEmpty icon={IconRobot} title="No Bots yet">
+        <PageEmpty icon={IconBolt} title="No Bots yet">
           Create one, then choose its folders.
         </PageEmpty>
       ) : (
diff --git a/app/src/routes/_authed/admin/plugins/$key_.bots.$agentId.tsx b/app/src/routes/_authed/admin/plugins/$key_.bots.$agentId.tsx
index d518003de3..383368169d 100644
--- a/app/src/routes/_authed/admin/plugins/$key_.bots.$agentId.tsx
+++ b/app/src/routes/_authed/admin/plugins/$key_.bots.$agentId.tsx
@@ -1,7 +1,7 @@
 import {
+  IconBolt,
   IconListDetails,
   IconPlugOff,
-  IconRobot,
   IconSearch,
   IconTool,
 } from "@tabler/icons-react";
@@ -261,7 +261,7 @@ function RouteComponent() {
         description="There is no Bot with that name."
         title="Not a Bot"
       >
-        <PageEmpty icon={IconRobot} title="Bot not found">
+        <PageEmpty icon={IconBolt} title="Bot not found">
           It may have been deleted after you opened this page.
         </PageEmpty>
       </PageShell>
diff --git a/app/src/routes/_authed/admin/plugins/$key_.tools.$tool.tsx b/app/src/routes/_authed/admin/plugins/$key_.tools.$tool.tsx
index a624c3ced1..f178479d91 100644
--- a/app/src/routes/_authed/admin/plugins/$key_.tools.$tool.tsx
+++ b/app/src/routes/_authed/admin/plugins/$key_.tools.$tool.tsx
@@ -1,4 +1,4 @@
-import { IconPlugOff, IconRobot, IconTool } from "@tabler/icons-react";
+import { IconBolt, IconPlugOff, IconTool } from "@tabler/icons-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, useParams } from "@tanstack/react-router";
 import { useState } from "react";
@@ -192,7 +192,7 @@ function RouteComponent() {
         title="Bots"
       >
         {bots.length === 0 ? (
-          <PageEmpty icon={IconRobot} title="No Bots yet">
+          <PageEmpty icon={IconBolt} title="No Bots yet">
             Create one to give it this tool.
           </PageEmpty>
         ) : (

From 12a20dda7c02f39a1e463ede88e7b4679cbab2f0 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 30 Oct 2026 17:49:32 -0300
Subject: [PATCH 14/14] Note the default look's changes in the changelog

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f9d3f16f4..ce88b38731 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -78,6 +78,17 @@ Newest first. `Unreleased` is what is on `main` and not yet tagged.
   `COMPUTER_MEMORY_HIGH_PERCENT=0` and `COMPUTER_TAB_IDLE_MS=0` (Helm: `computers.memoryHighPercent`
   and `computers.tabIdleMs`) keep the old behaviour.
 
+### The default look: an inset page, slate greys and quieter headings
+
+Each page now sits in a panel inset from the window, on a darker frame shared with the sidebar,
+with white cards on a light grey page; admin and settings scroll inside it like the rest of the
+app. The greys are Tailwind's slate rather than neutral, and page and section headings are lighter.
+Rows show an app's logo or initial instead of the same plug; Home shows Bots as compact cards; a
+Bot's page leads with its own one-liner; Connections tiles no longer cut their text off; and the
+Composio directory shows its rows loading. Empty states carry a faint dot pattern whose file,
+colour and strength are theme tokens (`--empty-pattern*` in `theme.css`), so a deployment can
+replace it or turn it off. Skins are unchanged.
+
 ### A computer closes browsers nobody is using when its memory runs high
 
 A computer runs one browser for each Bot that is browsing, and the only limits were a count and half