From 8c37623c54a7095fe7a855b81bb8faa7f5b0ad8b Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:21:36 -0700
Subject: [PATCH 01/14] ui(theme): give the sidebar its own warm-beige surface
 (two-tone canvas)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Decouple --sidebar from --background-muted so the sidebar reads as a
distinct, slightly deeper warm-beige surface against the lighter main
canvas — a Codex-style two-tone layering kept low-contrast and warm so it
never looks glaring. Add dedicated --sidebar-hover/--sidebar-active tokens
(light + dark) and point the sidebar nav item + running-chat hover/active
states at them, so deepening the surface doesn't invert the hover/active
feedback. Main canvas, cards, and the coral accent are unchanged.
---
 .../BioRouterSidebar/AppSidebar.tsx           |  4 ++--
 ui/desktop/src/styles/main.css                | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx b/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx
index a2d83334..a5366589 100644
--- a/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx
+++ b/ui/desktop/src/components/BioRouterSidebar/AppSidebar.tsx
@@ -148,7 +148,7 @@ function RunningChatItem({
     <button
       type="button"
       onClick={() => onOpen(entry.sessionId)}
-      className={`w-full min-w-0 flex items-center gap-2 rounded-md px-2 py-1 text-left text-xs transition-all duration-500 hover:bg-background-medium ${
+      className={`w-full min-w-0 flex items-center gap-2 rounded-md px-2 py-1 text-left text-xs transition-all duration-500 hover:bg-sidebar-hover ${
         completed ? 'opacity-0 translate-y-1' : 'opacity-100 translate-y-0'
       }`}
       title={entry.title}
@@ -257,7 +257,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
                 onClick={() => handleNavigation(entry.path)}
                 isActive={isActivePath(entry.path)}
                 tooltip={entry.tooltip}
-                className="w-full justify-start px-3 py-2 rounded-lg text-sm hover:bg-background-medium transition-colors duration-150 data-[active=true]:bg-background-strong data-[active=true]:font-medium"
+                className="w-full justify-start px-3 py-2 rounded-lg text-sm hover:bg-sidebar-hover transition-colors duration-150 data-[active=true]:bg-sidebar-active data-[active=true]:font-medium"
               >
                 <IconComponent className="w-4 h-4" />
                 <span>{entry.label}</span>
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index fc30dd9f..8219624e 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -90,13 +90,18 @@
 
   --ring: var(--border-strong);
 
-  --sidebar: var(--background-muted);
+  /* Two-tone canvas: the sidebar is a distinct, slightly deeper warm-beige
+     surface sitting against the lighter main canvas (Codex-style layering,
+     kept warm and low-contrast so it never reads as glaring). */
+  --sidebar: #f3ede1;
   --sidebar-foreground: var(--text-default);
   --sidebar-primary: var(--background-accent);
   --sidebar-primary-foreground: var(--text-inverse);
-  --sidebar-accent: var(--background-muted);
+  --sidebar-hover: #ece4d4;
+  --sidebar-active: #e4d9c3;
+  --sidebar-accent: var(--sidebar-hover);
   --sidebar-accent-foreground: var(--text-default);
-  --sidebar-border: var(--border-default);
+  --sidebar-border: #e9e1d0;
   --sidebar-ring: var(--border-default);
 
   /* custom shadow — flat by default; popover for elevated menus/modals */
@@ -148,11 +153,15 @@
 
   --ring: var(--border-strong);
 
+  /* Dark mode mirrors the two-tone: sidebar sits one warm step above the
+     near-black main canvas, with its own hover/active steps. */
   --sidebar: var(--background-muted);
   --sidebar-foreground: var(--text-default);
   --sidebar-primary: var(--background-accent);
   --sidebar-primary-foreground: var(--text-inverse);
-  --sidebar-accent: var(--background-muted);
+  --sidebar-hover: #322b1d;
+  --sidebar-active: #3d3524;
+  --sidebar-accent: var(--sidebar-hover);
   --sidebar-accent-foreground: var(--text-default);
   --sidebar-border: var(--border-default);
   --sidebar-ring: var(--border-default);
@@ -211,6 +220,8 @@
 
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-hover: var(--sidebar-hover);
+  --color-sidebar-active: var(--sidebar-active);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
   --color-sidebar-accent: var(--sidebar-accent);

From 31392293b1b107c0f30e63c2f6a7f1cef1e3dd68 Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:26:23 -0700
Subject: [PATCH 02/14] ui(theme): flatten list/settings rows, hairline sidebar
 edge, define text-subtle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drop the elevation box-shadow on list-row and settings-row hover/focus so
  rows indicate state with background only (surfaces-over-elevation policy).
- Replace the sidebar shell's heavy right-edge drop shadow with a 1px hairline
  in the sidebar-border token — the new two-tone surface already separates it.
- Define the previously-undefined --text-subtle / --color-text-subtle token
  (light + dark) so de-emphasized metadata (Scheduler/Applications/Workflows
  'Created/Updated/model' rows) renders muted instead of full-dark.
---
 ui/desktop/src/styles/main.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 8219624e..3fc306d2 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -82,6 +82,7 @@
 
   --text-default: #2a2520;
   --text-muted: #7a736c;
+  --text-subtle: #948d83;
   --text-inverse: var(--color-white);
   --text-danger: var(--color-red-200);
   --text-success: var(--color-green-200);
@@ -145,6 +146,7 @@
 
   --text-default: var(--color-white);
   --text-muted: var(--color-neutral-400);
+  --text-subtle: var(--color-neutral-500);
   --text-inverse: var(--color-black);
   --text-danger: var(--color-red-100);
   --text-success: var(--color-green-100);
@@ -206,6 +208,7 @@
 
   --color-text-default: var(--text-default);
   --color-text-muted: var(--text-muted);
+  --color-text-subtle: var(--text-subtle);
   --color-text-inverse: var(--text-inverse);
   --color-text-danger: var(--text-danger);
   --color-text-success: var(--text-success);
@@ -550,7 +553,6 @@
 .biorouter-list-row:hover,
 .biorouter-list-row:focus-within {
   background: color-mix(in srgb, var(--background-medium) 42%, transparent);
-  box-shadow: 0 8px 22px -22px rgba(32, 25, 15, 0.38);
 }
 
 .biorouter-settings-tabs {
@@ -605,7 +607,6 @@
 .biorouter-settings-row:hover,
 .biorouter-settings-row:focus-within {
   background: color-mix(in srgb, var(--background-medium) 38%, transparent);
-  box-shadow: 0 8px 22px -22px rgba(32, 25, 15, 0.34);
 }
 
 .dark .biorouter-page-block {
@@ -615,7 +616,9 @@
 }
 
 .biorouter-sidebar-shell {
-  box-shadow: 8px 0 28px -26px rgba(32, 25, 15, 0.42);
+  /* flat two-tone: a hairline edge instead of an elevation shadow —
+     the sidebar's warm-beige surface already separates it from the canvas */
+  box-shadow: 1px 0 0 0 var(--sidebar-border);
 }
 
 .biorouter-sidebar-shell::after {

From bd60cdbc4ae7b38271278ea8703fd48fc9d787d4 Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:36:47 -0700
Subject: [PATCH 03/14] ui(theme): flatten Knowledge panels to the warm token
 system

Add the missing flat page-header bottom border; replace inline rgba box-shadows
on the graph panel, toolbar buttons, ingest/paste boxes, model picker and KB
selector with border-border-subtle; reduce coral overuse on the dropzone
drag-active state to a neutral fill + subtle 1px accent border. Graph canvas
color scale left untouched (canvas can't consume CSS tokens).
---
 .../src/components/knowledge/IngestPanel/Dropzone.tsx  | 10 ++++++----
 .../knowledge/IngestPanel/IngestModelPicker.tsx        | 10 ++++------
 .../components/knowledge/IngestPanel/IngestPanel.tsx   |  2 +-
 .../components/knowledge/IngestPanel/PasteTextBox.tsx  |  2 +-
 .../knowledge/KBSelector/KBSelectorPalette.tsx         |  6 +++---
 .../knowledge/KBSelector/KBSelectorTrigger.tsx         |  2 +-
 ui/desktop/src/components/knowledge/KnowledgeView.tsx  |  7 +++++--
 .../components/knowledge/graph/KnowledgeGraphPanel.tsx |  8 ++++----
 .../src/components/knowledge/graph/NodePreview.tsx     |  2 +-
 9 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx b/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx
index a024b2f9..ab37a45a 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/Dropzone.tsx
@@ -108,10 +108,10 @@ export function Dropzone({ onFiles, onPathPickRequested }: Props) {
           if (dragCounterRef.current === 0) setDragging(false);
         }}
         onDrop={onDrop}
-        className={`relative cursor-pointer rounded-xl px-4 py-5 text-center transition-all focus:outline-none focus:ring-1 focus:ring-ring ${
+        className={`relative cursor-pointer rounded-xl border px-4 py-5 text-center transition-all focus:outline-none focus:ring-1 focus:ring-ring ${
           dragging
-            ? 'bg-block-teal/10 shadow-[0_12px_24px_-24px_rgba(32,25,15,0.38)]'
-            : 'bg-[color-mix(in_srgb,var(--background-default)_60%,var(--background-medium))] shadow-[0_12px_26px_-28px_rgba(32,25,15,0.3)] hover:bg-background-default/72 hover:shadow-[0_12px_26px_-24px_rgba(32,25,15,0.34)]'
+            ? 'border-block-teal bg-background-medium'
+            : 'border-border-subtle bg-[color-mix(in_srgb,var(--background-default)_60%,var(--background-medium))] hover:bg-background-default/72'
         }`}
       >
         <input
@@ -130,7 +130,9 @@ export function Dropzone({ onFiles, onPathPickRequested }: Props) {
         />
         <div
           className={`mx-auto flex h-10 w-10 items-center justify-center rounded-full transition-colors ${
-            dragging ? 'bg-block-teal/15 text-block-teal' : 'bg-background-muted text-text-muted'
+            dragging
+              ? 'bg-background-strong text-text-default'
+              : 'bg-background-muted text-text-muted'
           }`}
         >
           <Upload className="h-5 w-5" />
diff --git a/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx b/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx
index bf68cac6..348dea3e 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/IngestModelPicker.tsx
@@ -119,10 +119,8 @@ export function IngestModelPicker({ value, onChange, disabled = false, saving =
                   onChange({ provider: provider.name, model });
                   setOpen(false);
                 }}
-                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-[background-color,box-shadow] duration-150 ${
-                  selected
-                    ? 'bg-background-medium/82 shadow-[0_8px_20px_-22px_rgba(32,25,15,0.38)]'
-                    : 'hover:bg-background-medium/62 hover:shadow-[0_8px_18px_-24px_rgba(32,25,15,0.3)]'
+                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors duration-150 ${
+                  selected ? 'bg-background-medium/82' : 'hover:bg-background-medium/62'
                 }`}
               >
                 <Brain className="h-4 w-4 shrink-0 text-text-muted" />
@@ -150,7 +148,7 @@ export function IngestModelPicker({ value, onChange, disabled = false, saving =
           if (!disabled) setOpen(true);
         }}
         disabled={disabled}
-        className="group inline-flex min-h-10 w-full items-center justify-between gap-2 rounded-xl bg-background-default/52 px-3 py-2 text-left transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/82 hover:shadow-[0_12px_26px_-22px_rgba(32,25,15,0.42)] focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-60"
+        className="group inline-flex min-h-10 w-full items-center justify-between gap-2 rounded-xl border border-border-subtle bg-background-default/52 px-3 py-2 text-left transition-colors duration-150 hover:bg-background-medium/82 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-60"
       >
         <span className="flex min-w-0 flex-1 items-center gap-2">
           <Brain className="h-4 w-4 shrink-0 text-text-muted" />
@@ -163,7 +161,7 @@ export function IngestModelPicker({ value, onChange, disabled = false, saving =
               : `${value.provider} / ${value.model}`}
           </span>
         </span>
-        <span className="flex shrink-0 items-center gap-1.5 rounded-lg bg-background-medium/64 px-2 py-1 text-[11px] font-medium text-text-default shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] transition-colors group-hover:bg-background-default/76">
+        <span className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border-subtle bg-background-medium/64 px-2 py-1 text-[11px] font-medium text-text-default transition-colors group-hover:bg-background-default/76">
           {saving && <LoaderCircle className="h-3.5 w-3.5 animate-spin text-text-muted" />}
           {saving ? 'Saving' : 'Set default'}
           {!saving && <ChevronDown className="h-3.5 w-3.5 text-text-muted" />}
diff --git a/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx b/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx
index a99ff9f9..485bba81 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/IngestPanel.tsx
@@ -343,7 +343,7 @@ export function IngestPanel() {
         variant="secondary"
         size="sm"
         onClick={() => setShowPasteBox(true)}
-        className="h-10 w-full bg-background-default/74 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/82 hover:shadow-[0_12px_26px_-22px_rgba(32,25,15,0.42)]"
+        className="h-10 w-full border border-border-subtle bg-background-default/74 font-medium transition-colors duration-150 hover:bg-background-medium/82"
       >
         <Clipboard className="mr-1.5 h-4 w-4" />
         Paste text
diff --git a/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx b/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx
index 09193022..55bfffe5 100644
--- a/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx
+++ b/ui/desktop/src/components/knowledge/IngestPanel/PasteTextBox.tsx
@@ -26,7 +26,7 @@ export function PasteTextBox({ onStage, onCancel }: Props) {
   }
 
   return (
-    <div className="overflow-hidden rounded-xl bg-[color-mix(in_srgb,var(--background-default)_82%,var(--background-medium))] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--border-subtle)_46%,transparent),0_10px_22px_-24px_rgba(32,25,15,0.34)] transition-shadow focus-within:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--block-teal)_30%,transparent),0_12px_26px_-24px_rgba(32,25,15,0.38)]">
+    <div className="overflow-hidden rounded-xl border border-border-subtle bg-[color-mix(in_srgb,var(--background-default)_82%,var(--background-medium))] transition-colors focus-within:border-border-default">
       <div className="overflow-hidden">
         <input
           type="text"
diff --git a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx
index f99ee7f7..ec639a45 100644
--- a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx
+++ b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorPalette.tsx
@@ -292,7 +292,7 @@ export function KBSelectorPalette({ onClose }: Props) {
                     key={base.id}
                     className={`biorouter-modal-row flex items-center gap-3 rounded-xl px-3 py-3 transition-all ${
                       isActive
-                        ? '!border-border-default bg-background-muted shadow-sm'
+                        ? '!border-border-default bg-background-muted'
                         : 'hover:!border-border-default hover:bg-background-muted/50'
                     }`}
                   >
@@ -305,7 +305,7 @@ export function KBSelectorPalette({ onClose }: Props) {
                       className="flex min-w-0 flex-1 items-center gap-3 text-left"
                     >
                       <span
-                        className="h-3 w-3 rounded-full border border-black/10"
+                        className="h-3 w-3 rounded-full border border-border-subtle"
                         style={{ background: base.color }}
                       />
                       <div className="min-w-0 flex-1">
@@ -334,7 +334,7 @@ export function KBSelectorPalette({ onClose }: Props) {
                     </button>
 
                     <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-2 rounded-md bg-background-default/70 px-2 py-1 shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--border-subtle)_55%,transparent)]">
+                      <div className="flex items-center gap-2 rounded-md border border-border-subtle bg-background-default/70 px-2 py-1">
                         <EyeOff className="h-3.5 w-3.5 text-text-muted" />
                         <Switch
                           checked={!hidden}
diff --git a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx
index 7c340986..51060d2d 100644
--- a/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx
+++ b/ui/desktop/src/components/knowledge/KBSelector/KBSelectorTrigger.tsx
@@ -23,7 +23,7 @@ export function KBSelectorTrigger({ open: openProp, onOpenChange }: Props) {
       <button
         data-testid="knowledge-kb-selector-trigger"
         onClick={() => setOpen(true)}
-        className="group inline-flex w-full items-center gap-3 rounded-xl bg-background-default px-3 py-3 shadow-[0_10px_24px_-24px_rgba(32,25,15,0.38)] transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/82 hover:shadow-[0_12px_26px_-22px_rgba(32,25,15,0.42)] focus:outline-none focus:ring-1 focus:ring-ring"
+        className="group inline-flex w-full items-center gap-3 rounded-xl border border-border-subtle bg-background-default px-3 py-3 transition-colors duration-150 hover:bg-background-medium/82 focus:outline-none focus:ring-1 focus:ring-ring"
       >
         <span
           className="w-2 h-2 rounded-full flex-shrink-0"
diff --git a/ui/desktop/src/components/knowledge/KnowledgeView.tsx b/ui/desktop/src/components/knowledge/KnowledgeView.tsx
index f532fedd..97939fd7 100644
--- a/ui/desktop/src/components/knowledge/KnowledgeView.tsx
+++ b/ui/desktop/src/components/knowledge/KnowledgeView.tsx
@@ -43,7 +43,10 @@ function KnowledgeViewInner() {
         className="flex flex-col min-w-0 flex-1 overflow-y-auto relative"
         data-search-scroll-area
       >
-        <ReadableContent size="graph" className="px-8 pt-12 pb-4 flex-shrink-0">
+        <ReadableContent
+          size="graph"
+          className="px-8 pt-12 pb-6 border-b border-border-subtle flex-shrink-0"
+        >
           <div className="flex flex-col page-transition">
             <h1 className="text-2xl font-semibold tracking-tight mb-1">Knowledge</h1>
             <p className="text-sm text-text-muted mb-0">
@@ -61,7 +64,7 @@ function KnowledgeViewInner() {
             </div>
             <IngestPanel />
           </div>
-          <div className="flex min-h-[520px] min-w-0 overflow-hidden rounded-2xl bg-[color-mix(in_srgb,var(--background-muted)_72%,var(--background-default))] shadow-[inset_0_1px_0_rgba(255,255,255,0.58),0_18px_46px_-36px_rgba(32,25,15,0.34)] lg:h-full lg:min-h-0">
+          <div className="flex min-h-[520px] min-w-0 overflow-hidden rounded-2xl border border-border-subtle bg-[color-mix(in_srgb,var(--background-muted)_72%,var(--background-default))] lg:h-full lg:min-h-0">
             <KnowledgeGraphPanel
               onOpenChangeLog={() => setChangeLogOpen(true)}
               previewSha={previewSha}
diff --git a/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx b/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx
index 0f01f69a..90299437 100644
--- a/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx
+++ b/ui/desktop/src/components/knowledge/graph/KnowledgeGraphPanel.tsx
@@ -68,7 +68,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
             variant="secondary"
             size="sm"
             shape="round"
-            className="bg-background-muted/82 shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 hover:bg-background-strong"
             onClick={() => void refresh()}
             disabled={!activeKbId || loading}
             title="Refresh graph"
@@ -78,7 +78,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
           <Button
             variant="secondary"
             size="sm"
-            className="bg-background-muted/82 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 font-medium hover:bg-background-strong"
             onClick={() => activeKb && void exportArchive(activeKb.id, activeKb.name)}
             disabled={!activeKb}
             title="Export current knowledge base as .brkb"
@@ -89,7 +89,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
           <Button
             variant="secondary"
             size="sm"
-            className="bg-background-muted/82 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 font-medium hover:bg-background-strong"
             onClick={onOpenChangeLog}
             disabled={!activeKbId}
             title="Open change log"
@@ -100,7 +100,7 @@ export function KnowledgeGraphPanel({ onOpenChangeLog, previewSha, onClearPrevie
           <Button
             variant="secondary"
             size="sm"
-            className="bg-background-muted/82 font-medium shadow-[0_8px_18px_-18px_rgba(32,25,15,0.32)] hover:bg-background-strong"
+            className="border border-border-subtle bg-background-muted/82 font-medium hover:bg-background-strong"
             onClick={() => void openKbFolder()}
             disabled={!activeKbId}
             title="Open the knowledge base folder (raw sources + markdown) in your file explorer"
diff --git a/ui/desktop/src/components/knowledge/graph/NodePreview.tsx b/ui/desktop/src/components/knowledge/graph/NodePreview.tsx
index a1ad9e8e..a2fb7fcf 100644
--- a/ui/desktop/src/components/knowledge/graph/NodePreview.tsx
+++ b/ui/desktop/src/components/knowledge/graph/NodePreview.tsx
@@ -37,7 +37,7 @@ export function NodePreview({ kbId, node, previewSha, onClose }: Props) {
 
   return (
     <div className="biorouter-popover-surface absolute top-12 right-4 z-10 flex max-h-[calc(100%-5rem)] w-[360px] flex-col overflow-hidden rounded-2xl bg-background-default/90 backdrop-blur-md">
-      <div className="flex items-center justify-between bg-background-muted/55 px-4 py-3 shadow-[inset_0_-1px_0_rgba(32,25,15,0.04)]">
+      <div className="flex items-center justify-between border-b border-border-default bg-background-muted/55 px-4 py-3">
         <div className="flex items-center gap-2 min-w-0">
           <span
             aria-hidden

From 00e3e9e0535e8a8e51c78eb26fb5fff24cfe665a Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:36:47 -0700
Subject: [PATCH 04/14] ui(theme): Settings flat header + consistent section
 labels

Add the mandated header bottom-border divider and description; align section
labels (Models/Chat/App tabs) from text-xs to the text-[11px] token size.
---
 ui/desktop/src/components/settings/SettingsView.tsx  |  7 +++++--
 .../components/settings/app/AppSettingsSection.tsx   | 10 +++++-----
 .../components/settings/chat/ChatSettingsSection.tsx | 12 ++++++------
 .../components/settings/config/ConfigSettings.tsx    |  2 +-
 .../src/components/settings/models/ModelsSection.tsx |  4 ++--
 .../models/subcomponents/SwitchModelModal.tsx        |  2 +-
 6 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/ui/desktop/src/components/settings/SettingsView.tsx b/ui/desktop/src/components/settings/SettingsView.tsx
index 38a92424..d7478d64 100644
--- a/ui/desktop/src/components/settings/SettingsView.tsx
+++ b/ui/desktop/src/components/settings/SettingsView.tsx
@@ -72,8 +72,11 @@ export default function SettingsView({
     <>
       <MainPanelLayout>
         <div className="flex-1 flex flex-col min-h-0">
-          <ReadableContent className="px-8 pt-12 pb-0 flex-shrink-0">
-            <h1 className="text-2xl font-semibold tracking-tight page-transition">Settings</h1>
+          <ReadableContent className="px-8 pt-12 pb-6 border-b border-border-subtle flex-shrink-0">
+            <h1 className="text-2xl font-semibold tracking-tight mb-1 page-transition">Settings</h1>
+            <p className="text-sm text-text-muted">
+              Manage models, chat behavior, and application preferences
+            </p>
           </ReadableContent>
 
           <div className="flex-1 min-h-0 flex flex-col">
diff --git a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
index dd217d15..007407f6 100644
--- a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
@@ -124,7 +124,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {/* Appearance */}
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
             Appearance
           </h2>
         </div>
@@ -217,7 +217,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {/* Theme */}
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Theme
           </h2>
           <p className="text-xs text-text-muted">Customize the look and feel of BioRouter</p>
@@ -230,7 +230,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {/* Help & Feedback */}
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Help &amp; Feedback
           </h2>
           <p className="text-xs text-text-muted">
@@ -267,7 +267,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {!shouldShowUpdates && (
         <div className="biorouter-settings-section">
           <div className="biorouter-settings-section-header">
-            <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">
+            <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
               Version
             </h2>
           </div>
@@ -290,7 +290,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       {UPDATES_ENABLED && shouldShowUpdates && (
         <div ref={updateSectionRef} className="biorouter-settings-section">
           <div className="biorouter-settings-section-header">
-            <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+            <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
               Updates
             </h2>
             <p className="text-xs text-text-muted">
diff --git a/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx b/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
index 2283c5e6..ecc09b6c 100644
--- a/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
@@ -10,7 +10,7 @@ export default function ChatSettingsSection() {
     <div className="pb-8">
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">Mode</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">Mode</h2>
           <p className="text-xs text-text-muted">
             Configure how BioRouter interacts with tools and extensions
           </p>
@@ -22,7 +22,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Response Styles
           </h2>
           <p className="text-xs text-text-muted">
@@ -36,7 +36,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             Capabilities
           </h2>
           <p className="text-xs text-text-muted">
@@ -52,7 +52,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
             App SDK
           </h2>
           <p className="text-xs text-text-muted">
@@ -67,7 +67,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">Editor</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">Editor</h2>
         </div>
         <div className="biorouter-settings-list">
           <SpellcheckToggle />
@@ -76,7 +76,7 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">Project</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">Project</h2>
         </div>
         <div className="biorouter-settings-list">
           <BioRouterHintsSection />
diff --git a/ui/desktop/src/components/settings/config/ConfigSettings.tsx b/ui/desktop/src/components/settings/config/ConfigSettings.tsx
index dc9ead7e..0303ee14 100644
--- a/ui/desktop/src/components/settings/config/ConfigSettings.tsx
+++ b/ui/desktop/src/components/settings/config/ConfigSettings.tsx
@@ -144,7 +144,7 @@ export default function ConfigSettings() {
   return (
     <div className="biorouter-settings-section">
       <div className="biorouter-settings-section-header">
-        <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-1">
+        <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
           Configuration
         </h2>
         <p className="text-xs text-text-muted">
diff --git a/ui/desktop/src/components/settings/models/ModelsSection.tsx b/ui/desktop/src/components/settings/models/ModelsSection.tsx
index dcbcc71f..1a6eb69f 100644
--- a/ui/desktop/src/components/settings/models/ModelsSection.tsx
+++ b/ui/desktop/src/components/settings/models/ModelsSection.tsx
@@ -83,7 +83,7 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
     <section id="models" className="pb-8">
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
             Current Model
           </h2>
         </div>
@@ -107,7 +107,7 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider">Reset</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">Reset</h2>
         </div>
         <div className="biorouter-settings-list">
           <ResetProviderSection setView={setView} />
diff --git a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
index 93bca293..8de927f0 100644
--- a/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
+++ b/ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx
@@ -392,7 +392,7 @@ export const SwitchModelModal = ({
                       className={[
                         'biorouter-modal-row flex items-start gap-3 py-2.5 px-3 rounded-xl cursor-pointer transition-colors duration-150',
                         isSelected
-                          ? '!border-border-default bg-background-medium shadow-sm'
+                          ? '!border-border-default bg-background-medium'
                           : 'hover:!border-border-default hover:bg-background-medium',
                       ].join(' ')}
                     >

From 3b7d8300fabfb8996766e54927b558731d507205 Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:36:47 -0700
Subject: [PATCH 05/14] ui(theme): flatten Workflows & Scheduler rows/cards to
 token borders

Neutralize off-policy card/row box-shadows to borders across the list views and
their modals; keep behavior and hover-reveal logic unchanged.
---
 ui/desktop/src/components/schedule/ScheduleDetailView.tsx | 4 ++--
 .../src/components/schedule/ScheduleFromWorkflowModal.tsx | 3 ++-
 .../src/components/workflows/CreateEditWorkflowModal.tsx  | 2 +-
 .../src/components/workflows/WorkflowActivities.tsx       | 4 ++--
 ui/desktop/src/components/workflows/WorkflowInfoModal.tsx | 2 +-
 ui/desktop/src/components/workflows/WorkflowsView.tsx     | 8 ++++----
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
index ce0389c2..408c3c61 100644
--- a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
@@ -285,7 +285,7 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
               </p>
             )}
             {scheduleDetails && (
-              <Card className="p-4 bg-background-card mb-6">
+              <Card className="p-4 bg-background-card border border-border-subtle [box-shadow:none] mb-6">
                 <div className="space-y-2">
                   <div className="flex flex-col md:flex-row md:items-center justify-between">
                     <h3 className="text-base font-semibold text-text-default">
@@ -444,7 +444,7 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
                 {sessions.map((session) => (
                   <Card
                     key={session.id}
-                    className="p-4 bg-background-card border border-border-subtle cursor-pointer hover:bg-background-muted transition-colors duration-200"
+                    className="p-4 bg-background-card border border-border-subtle [box-shadow:none] cursor-pointer hover:bg-background-muted transition-colors duration-200"
                     onClick={() => loadSession(session.id)}
                   >
                     <h3
diff --git a/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx b/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx
index 45be7fcb..943cf149 100644
--- a/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleFromWorkflowModal.tsx
@@ -102,7 +102,8 @@ export const ScheduleFromWorkflowModal: React.FC<ScheduleFromWorkflowModalProps>
               <Button
                 type="button"
                 onClick={handleCopy}
-                className="ml-2 px-3 py-2 bg-background-accent text-text-on-accent rounded-md hover:bg-background-accent/90 flex items-center"
+                variant="outline"
+                className="ml-2 px-3 py-2 rounded-md flex items-center"
               >
                 {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
               </Button>
diff --git a/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx b/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx
index f7289e74..2c55d6f8 100644
--- a/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx
+++ b/ui/desktop/src/components/workflows/CreateEditWorkflowModal.tsx
@@ -434,7 +434,7 @@ export default function CreateEditWorkflowModal({
                   {copied ? (
                     <Check className="w-4 h-4 text-text-success" />
                   ) : (
-                    <Copy className="w-4 h-4 text-iconSubtle" />
+                    <Copy className="w-4 h-4 text-text-muted" />
                   )}
                   <span className="ml-1 text-sm text-text-muted">
                     {copied ? 'Copied!' : 'Copy'}
diff --git a/ui/desktop/src/components/workflows/WorkflowActivities.tsx b/ui/desktop/src/components/workflows/WorkflowActivities.tsx
index e3bfbeac..696f4d06 100644
--- a/ui/desktop/src/components/workflows/WorkflowActivities.tsx
+++ b/ui/desktop/src/components/workflows/WorkflowActivities.tsx
@@ -31,7 +31,7 @@ export default function WorkflowActivities({
     return (
       <div className="flex flex-col px-6">
         {messagePill && (
-          <div className="mb-4 p-3 rounded-lg border animate-[fadein_500ms_ease-in_forwards]">
+          <div className="mb-4 p-3 rounded-lg border border-border-subtle animate-[fadein_500ms_ease-in_forwards]">
             <MarkdownContent
               content={substituteParameters(
                 messagePill.replace(/^message:/i, '').trim(),
@@ -50,7 +50,7 @@ export default function WorkflowActivities({
                 key={index}
                 onClick={() => append(substitutedContent)}
                 title={substitutedContent.length > 60 ? substitutedContent : undefined}
-                className="cursor-pointer px-3 py-1.5 text-sm hover:bg-background-medium transition-colors"
+                className="cursor-pointer px-3 py-1.5 text-sm border border-border-subtle [box-shadow:none] hover:bg-background-medium transition-colors"
               >
                 {substitutedContent.length > 60
                   ? substitutedContent.slice(0, 60) + '...'
diff --git a/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx b/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx
index e5f3782d..1a628bd9 100644
--- a/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx
+++ b/ui/desktop/src/components/workflows/WorkflowInfoModal.tsx
@@ -40,7 +40,7 @@ export default function WorkflowInfoModal({
         <div className="flex flex-col flex-grow overflow-y-auto space-y-8">
           <textarea
             ref={textareaRef}
-            className="biorouter-modal-panel w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] rounded-lg p-3 text-text-default focus:outline-none focus:ring-1 focus:ring-borderProminent"
+            className="biorouter-modal-panel w-full flex-grow resize-none min-h-[300px] max-h-[calc(100vh-300px)] rounded-lg p-3 text-text-default focus:outline-none focus:ring-1 focus:ring-border-strong"
             value={value}
             onChange={(e) => setValue(e.target.value)}
             placeholder={`Enter ${infoLabel.toLowerCase()}...`}
diff --git a/ui/desktop/src/components/workflows/WorkflowsView.tsx b/ui/desktop/src/components/workflows/WorkflowsView.tsx
index 22a7d1ed..24c80f2a 100644
--- a/ui/desktop/src/components/workflows/WorkflowsView.tsx
+++ b/ui/desktop/src/components/workflows/WorkflowsView.tsx
@@ -803,21 +803,21 @@ export default function WorkflowsView() {
             </DialogHeader>
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground mb-3">
+                <p className="text-sm text-text-muted mb-3">
                   Set a slash command to quickly run this workflow from any chat
                 </p>
                 <div className="flex gap-2 items-center">
-                  <span className="text-muted-foreground">/</span>
+                  <span className="text-text-muted">/</span>
                   <input
                     type="text"
                     value={slashCommand}
                     onChange={(e) => setSlashCommand(e.target.value)}
                     placeholder="command-name"
-                    className="flex-1 px-3 py-2 border rounded text-sm"
+                    className="flex-1 px-3 py-2 border border-border-subtle rounded text-sm"
                   />
                 </div>
                 {slashCommand && (
-                  <p className="text-xs text-muted-foreground mt-2">
+                  <p className="text-xs text-text-muted mt-2">
                     Use /{slashCommand} in any chat to run this workflow
                   </p>
                 )}

From 65133df5078c1389f88156c2df7585e04ba676cf Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:36:47 -0700
Subject: [PATCH 06/14] ui(theme): flat app cards + Home metric scale

Remove app-grid card hover elevation (border-only); apply the metric type scale
(text-3xl font-mono font-light) to the Home Sessions/Tokens totals; flatten
FoldedCard's inline shadow to a token border.
---
 ui/desktop/src/components/Dashboard/FoldedCard.tsx      | 5 ++---
 ui/desktop/src/components/apps/AppsView.tsx             | 6 +++---
 ui/desktop/src/components/apps/StandaloneAppView.tsx    | 8 ++++----
 ui/desktop/src/components/sessions/SessionsInsights.tsx | 2 +-
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/ui/desktop/src/components/Dashboard/FoldedCard.tsx b/ui/desktop/src/components/Dashboard/FoldedCard.tsx
index eb3590d3..6ffdb3ce 100644
--- a/ui/desktop/src/components/Dashboard/FoldedCard.tsx
+++ b/ui/desktop/src/components/Dashboard/FoldedCard.tsx
@@ -72,11 +72,10 @@ export const FoldedCard: React.FC<Props> = ({
       onMouseLeave={() => setHovered(false)}
     >
       <div
-        className="h-full w-full rounded-2xl overflow-hidden select-none cursor-grab active:cursor-grabbing flex flex-col border border-border-subtle/30 transition-[transform,box-shadow] duration-200 ease-out"
+        className="h-full w-full rounded-2xl overflow-hidden select-none cursor-grab active:cursor-grabbing flex flex-col border border-border-subtle transition-transform duration-200 ease-out"
         style={{
           background: bg,
           transform: hovered ? 'translateY(-1px)' : 'translateY(0)',
-          boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.14)' : '0 2px 8px rgba(0,0,0,0.08)',
         }}
         onPointerDown={(e) => {
           if ((e.target as HTMLElement).closest('button')) return;
@@ -172,7 +171,7 @@ export const FoldedCard: React.FC<Props> = ({
           transition: 'opacity 140ms ease-out, transform 140ms ease-out',
         }}
       >
-        <div className="rounded-lg border border-border-subtle/40 bg-background-default/95 backdrop-blur-sm shadow-lg px-3 py-2 text-[11px] leading-snug text-text-default/90 max-h-32 overflow-hidden">
+        <div className="rounded-lg border border-border-subtle bg-background-default/95 backdrop-blur-sm shadow-[var(--shadow-popover)] px-3 py-2 text-[11px] leading-snug text-text-default/90 max-h-32 overflow-hidden">
           {previewTail && previewTail.trim().length > 0 ? (
             <div className="whitespace-pre-wrap break-words">
               {isBusy ? <span className="text-text-muted/80">… </span> : null}
diff --git a/ui/desktop/src/components/apps/AppsView.tsx b/ui/desktop/src/components/apps/AppsView.tsx
index 26e78fc0..dded9575 100644
--- a/ui/desktop/src/components/apps/AppsView.tsx
+++ b/ui/desktop/src/components/apps/AppsView.tsx
@@ -119,12 +119,12 @@ export default function AppsView() {
   return (
     <MainPanelLayout>
       <div className="flex-1 flex flex-col min-h-0">
-        <div className="bg-background-default px-8 pb-8 pt-16">
+        <div className="bg-background-default px-8 pt-12 pb-6 border-b border-border-subtle">
           <div className="flex flex-col page-transition">
             <div className="flex justify-between items-center mb-1">
               <h1 className="text-2xl font-semibold tracking-tight">Apps</h1>
             </div>
-            <p className="text-sm text-text-muted mb-4">
+            <p className="text-sm text-text-muted mb-0">
               Applications from your MCP servers that can run in standalone windows.
             </p>
           </div>
@@ -149,7 +149,7 @@ export default function AppsView() {
               {apps.map((app) => (
                 <div
                   key={`${app.uri}-${app.mcpServer}`}
-                  className="flex flex-col p-4 border border-border-subtle rounded-xl bg-background-default transition-[background-color,box-shadow] duration-150 hover:bg-background-medium/40 hover:shadow-[0_8px_22px_-22px_rgba(32,25,15,0.38)]"
+                  className="flex flex-col p-4 border border-border-subtle rounded-xl bg-background-default transition-colors duration-150 hover:bg-background-medium/40 hover:border-border-strong"
                 >
                   <div className="flex-1 mb-4">
                     <h3 className="font-medium text-text-default mb-2">{app.name}</h3>
diff --git a/ui/desktop/src/components/apps/StandaloneAppView.tsx b/ui/desktop/src/components/apps/StandaloneAppView.tsx
index c5acd3d1..cc5ea0ca 100644
--- a/ui/desktop/src/components/apps/StandaloneAppView.tsx
+++ b/ui/desktop/src/components/apps/StandaloneAppView.tsx
@@ -120,8 +120,8 @@ export default function StandaloneAppView() {
           padding: '24px',
         }}
       >
-        <h2 style={{ color: 'var(--text-error, #ef4444)' }}>Failed to Load App</h2>
-        <p style={{ color: 'var(--text-muted, #6b7280)' }}>{error}</p>
+        <h2 style={{ color: 'var(--text-danger)' }}>Failed to Load App</h2>
+        <p style={{ color: 'var(--text-muted, #7a736c)' }}>{error}</p>
       </div>
     );
   }
@@ -137,7 +137,7 @@ export default function StandaloneAppView() {
           justifyContent: 'center',
         }}
       >
-        <p style={{ color: 'var(--text-muted, #6b7280)' }}>Initializing app...</p>
+        <p style={{ color: 'var(--text-muted, #7a736c)' }}>Initializing app...</p>
       </div>
     );
   }
@@ -166,7 +166,7 @@ export default function StandaloneAppView() {
         justifyContent: 'center',
       }}
     >
-      <p style={{ color: 'var(--text-muted, #6b7280)' }}>Initializing app...</p>
+      <p style={{ color: 'var(--text-muted, #7a736c)' }}>Initializing app...</p>
     </div>
   );
 }
diff --git a/ui/desktop/src/components/sessions/SessionsInsights.tsx b/ui/desktop/src/components/sessions/SessionsInsights.tsx
index 987e777b..64b6ad34 100644
--- a/ui/desktop/src/components/sessions/SessionsInsights.tsx
+++ b/ui/desktop/src/components/sessions/SessionsInsights.tsx
@@ -230,7 +230,7 @@ export function SessionInsights() {
                       <p
                         className={
                           idx === 0
-                            ? 'text-2xl font-medium leading-none mb-1.5 tabular-nums'
+                            ? 'text-3xl font-mono font-light leading-none mb-1.5 tabular-nums'
                             : 'text-lg font-medium leading-none mb-1.5 text-text-muted tabular-nums'
                         }
                       >

From e34226d905413b7fe2f4a334536b98badff2a80a Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:36:47 -0700
Subject: [PATCH 07/14] ui(theme): Skills header inset divider, onboarding
 select focus, extensions highlight

Constrain the Skills header divider to the ReadableContent inset so it no longer
overshoots; give the onboarding model selects a focus affordance + subtle border;
swap the extensions deep-link highlight's hard-coded blue shadow for a soft coral ring.
---
 .../components/extensions/ExtensionsView.tsx  |  5 +-
 .../onboarding/LlamaServerInlineCard.tsx      |  4 +-
 .../onboarding/OllamaInlineCard.tsx           |  2 +-
 .../src/components/skills/SkillsView.tsx      | 72 +++++++++----------
 4 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/ui/desktop/src/components/extensions/ExtensionsView.tsx b/ui/desktop/src/components/extensions/ExtensionsView.tsx
index 9aa5b04a..fb9f352d 100644
--- a/ui/desktop/src/components/extensions/ExtensionsView.tsx
+++ b/ui/desktop/src/components/extensions/ExtensionsView.tsx
@@ -72,8 +72,9 @@ export default function ExtensionsView({
           behavior: 'smooth',
           block: 'center',
         });
-        // Add a subtle highlight effect
-        element.style.boxShadow = '0 0 0 2px rgba(59, 130, 246, 0.5)';
+        // Add a subtle, temporary coral highlight ring
+        element.style.boxShadow =
+          '0 0 0 2px color-mix(in srgb, var(--color-block-teal) 45%, transparent)';
         setTimeout(() => {
           element.style.boxShadow = '';
         }, 2000);
diff --git a/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx b/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx
index 7811c4a4..4ae85a4c 100644
--- a/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx
+++ b/ui/desktop/src/components/onboarding/LlamaServerInlineCard.tsx
@@ -179,7 +179,7 @@ export default function LlamaServerInlineCard({ onSuccess }: LlamaServerInlineCa
               onChange={(e) => setSelectedModel(e.target.value)}
               disabled={isStarting || isConnecting}
               data-testid="llamacpp-model-select"
-              className="h-9 px-2 rounded-md border border-border-default bg-background-default text-sm text-text-default"
+              className="h-9 px-2 rounded-md border border-border-subtle bg-background-default text-sm text-text-default focus:outline-none focus:border-border-strong transition-colors duration-150"
             >
               {catalog.map((m) => (
                 <option key={m.name} value={m.name}>
@@ -193,7 +193,7 @@ export default function LlamaServerInlineCard({ onSuccess }: LlamaServerInlineCa
           )}
 
           {isStarting && (
-            <div className="rounded-md border border-border-default bg-background-default p-3">
+            <div className="rounded-md border border-border-subtle bg-background-default p-3">
               <div className="flex items-center gap-2 text-xs text-text-default">
                 <div className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin flex-shrink-0" />
                 <span>
diff --git a/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx b/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx
index b0a14820..bdb21615 100644
--- a/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx
+++ b/ui/desktop/src/components/onboarding/OllamaInlineCard.tsx
@@ -150,7 +150,7 @@ export default function OllamaInlineCard({ onSuccess }: OllamaInlineCardProps) {
           )}
 
           {modelStatus === 'downloading' && downloadProgress && (
-            <div className="rounded-md border border-border-default bg-background-default p-3">
+            <div className="rounded-md border border-border-subtle bg-background-default p-3">
               <p className="text-xs text-text-default">Downloading {getPreferredModel()}…</p>
               <p className="text-[11px] text-text-muted mt-1">{downloadProgress.status}</p>
               {downloadProgress.total && downloadProgress.completed && (
diff --git a/ui/desktop/src/components/skills/SkillsView.tsx b/ui/desktop/src/components/skills/SkillsView.tsx
index c3bfa78b..92f5ba13 100644
--- a/ui/desktop/src/components/skills/SkillsView.tsx
+++ b/ui/desktop/src/components/skills/SkillsView.tsx
@@ -163,43 +163,41 @@ export default function SkillsView() {
         data-search-scroll-area
       >
         {/* Header */}
-        <div className="flex-shrink-0 border-b border-border-subtle">
-          <ReadableContent className="px-8 pt-12 pb-6">
-            <div className="flex flex-col page-transition">
-              <h1 className="text-2xl font-semibold tracking-tight mb-1">Skills</h1>
-              <p className="text-sm text-text-muted mb-0">
-                Reusable instruction sets that guide BioRouter's behavior.{' '}
-                {getSearchShortcutText()} to search.
-              </p>
-            </div>
-            <div className="flex gap-3 mt-5">
-              <Button
-                className="flex items-center gap-2"
-                variant="default"
-                onClick={() => setIsAddModalOpen(true)}
-              >
-                <Upload className="h-4 w-4" />
-                Add Skill
-              </Button>
-              <Button
-                className="flex items-center gap-2"
-                variant="outline"
-                onClick={() => setIsBrowseModalOpen(true)}
-              >
-                <Globe className="h-4 w-4" />
-                Browse Skills
-              </Button>
-              <Button
-                className="flex items-center gap-2"
-                variant="outline"
-                onClick={() => setIsCustomModalOpen(true)}
-              >
-                <Plus className="h-4 w-4" />
-                Add Custom Skill
-              </Button>
-            </div>
-          </ReadableContent>
-        </div>
+        <ReadableContent className="px-8 pt-12 pb-6 border-b border-border-subtle flex-shrink-0">
+          <div className="flex flex-col page-transition">
+            <h1 className="text-2xl font-semibold tracking-tight mb-1">Skills</h1>
+            <p className="text-sm text-text-muted mb-0">
+              Reusable instruction sets that guide BioRouter's behavior. {getSearchShortcutText()}{' '}
+              to search.
+            </p>
+          </div>
+          <div className="flex gap-3 mt-5">
+            <Button
+              className="flex items-center gap-2"
+              variant="default"
+              onClick={() => setIsAddModalOpen(true)}
+            >
+              <Upload className="h-4 w-4" />
+              Add Skill
+            </Button>
+            <Button
+              className="flex items-center gap-2"
+              variant="outline"
+              onClick={() => setIsBrowseModalOpen(true)}
+            >
+              <Globe className="h-4 w-4" />
+              Browse Skills
+            </Button>
+            <Button
+              className="flex items-center gap-2"
+              variant="outline"
+              onClick={() => setIsCustomModalOpen(true)}
+            >
+              <Plus className="h-4 w-4" />
+              Add Custom Skill
+            </Button>
+          </div>
+        </ReadableContent>
 
         {/* List */}
         <SearchView

From 76a9b0843104b9ad51e6d5544ec29110759f7f9e Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:36:47 -0700
Subject: [PATCH 08/14] ui(theme): composer shadow token + harmonize overlays

Point the floating composer at var(--shadow-default) instead of hard-coded rgba;
give Diagnostics semantic text/bg tokens instead of neutral-*/black; align
dropdown submenu radius/padding with the parent menu.
---
 ui/desktop/src/components/ChatInput.tsx        |  4 ++--
 ui/desktop/src/components/ui/Diagnostics.tsx   | 14 +++++++-------
 ui/desktop/src/components/ui/dropdown-menu.tsx |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 13c4689e..e8299507 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -1322,8 +1322,8 @@ export default function ChatInput({
         disableAnimation ? '' : 'page-transition'
       } ${
         isFocused
-          ? 'border-transparent hover:border-transparent shadow-[0_12px_32px_rgba(32,25,15,0.11),0_2px_10px_rgba(32,25,15,0.06)]'
-          : 'border-transparent hover:border-transparent shadow-[0_8px_24px_rgba(32,25,15,0.08),0_1px_6px_rgba(32,25,15,0.04)]'
+          ? 'border-transparent hover:border-transparent shadow-[var(--shadow-default)]'
+          : 'border-transparent hover:border-transparent shadow-[var(--shadow-default)]'
       } bg-background-default z-10 rounded-2xl border`}
       data-drop-zone="true"
       onDrop={handleLocalDrop}
diff --git a/ui/desktop/src/components/ui/Diagnostics.tsx b/ui/desktop/src/components/ui/Diagnostics.tsx
index 6b5bbffb..5858b3c1 100644
--- a/ui/desktop/src/components/ui/Diagnostics.tsx
+++ b/ui/desktop/src/components/ui/Diagnostics.tsx
@@ -155,33 +155,33 @@ Add any other context about the problem here.
     >
       <div className="biorouter-diagnostics-surface w-full max-w-md p-6">
         <div className="flex items-start gap-3 mb-4">
-          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-background-warning/40 text-text-warning shadow-[inset_0_0_0_1px_rgba(32,25,15,0.06)]">
+          <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-background-warning/40 text-text-warning border border-border-subtle">
             <AlertTriangle size={20} />
           </div>
           <div>
-            <h3 className="text-lg font-semibold text-black mb-2">Report a Problem</h3>
-            <p className="text-sm text-neutral-600 mb-3">
+            <h3 className="text-lg font-semibold text-text-default mb-2">Report a Problem</h3>
+            <p className="text-sm text-text-muted mb-3">
               You can download a diagnostics zip file to share with the team, or file a bug directly
               on GitHub with your system details pre-filled. A diagnostics report contains the
               following:
             </p>
-            <ul className="text-sm text-neutral-600 list-disc list-inside space-y-1 mb-3">
+            <ul className="text-sm text-text-muted list-disc list-inside space-y-1 mb-3">
               <li>Basic system info</li>
               <li>Your current session messages</li>
               <li>Recent log files</li>
               <li>Configuration settings</li>
             </ul>
-            <p className="text-sm text-neutral-600">
+            <p className="text-sm text-text-muted">
               <strong>Warning:</strong> If your session contains sensitive information, do not share
               the diagnostics file publicly.
             </p>
-            <p className="text-sm text-neutral-600">
+            <p className="text-sm text-text-muted">
               If you file a bug, consider attaching the diagnostics report to it.
             </p>
           </div>
         </div>
         {isDownloading && (
-          <div className="mb-4 flex items-center gap-3 rounded-xl bg-neutral-100/80 px-3 py-2.5 text-sm text-neutral-700 shadow-[inset_0_0_0_1px_rgba(32,25,15,0.05)]">
+          <div className="mb-4 flex items-center gap-3 rounded-xl bg-background-muted px-3 py-2.5 text-sm text-text-muted border border-border-subtle">
             <Loader2 className="h-4 w-4 animate-spin" />
             Preparing diagnostics bundle...
           </div>
diff --git a/ui/desktop/src/components/ui/dropdown-menu.tsx b/ui/desktop/src/components/ui/dropdown-menu.tsx
index ff3962d4..0598a7be 100644
--- a/ui/desktop/src/components/ui/dropdown-menu.tsx
+++ b/ui/desktop/src/components/ui/dropdown-menu.tsx
@@ -149,7 +149,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn('bg-border-default -mx-1 my-1 h-px', className)}
       {...props}
     />
   );
@@ -201,7 +201,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-background-default text-text-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1000] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+        'biorouter-popover-surface bg-background-default text-text-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1000] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-xl p-1 space-y-0.5',
         className
       )}
       {...props}

From 0c8cf59b8231f48cf62c2c89ed6634c9622a375f Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:39:22 -0700
Subject: [PATCH 09/14] ui(theme): prettier formatting for theme changes

---
 .../settings/chat/ChatSettingsSection.tsx         | 12 +++++++++---
 .../components/settings/models/ModelsSection.tsx  |  4 +++-
 ui/desktop/src/styles/main.css                    | 15 +++++++--------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx b/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
index ecc09b6c..b52f6342 100644
--- a/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx
@@ -10,7 +10,9 @@ export default function ChatSettingsSection() {
     <div className="pb-8">
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">Mode</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1">
+            Mode
+          </h2>
           <p className="text-xs text-text-muted">
             Configure how BioRouter interacts with tools and extensions
           </p>
@@ -67,7 +69,9 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">Editor</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
+            Editor
+          </h2>
         </div>
         <div className="biorouter-settings-list">
           <SpellcheckToggle />
@@ -76,7 +80,9 @@ export default function ChatSettingsSection() {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">Project</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
+            Project
+          </h2>
         </div>
         <div className="biorouter-settings-list">
           <BioRouterHintsSection />
diff --git a/ui/desktop/src/components/settings/models/ModelsSection.tsx b/ui/desktop/src/components/settings/models/ModelsSection.tsx
index 1a6eb69f..29b5c976 100644
--- a/ui/desktop/src/components/settings/models/ModelsSection.tsx
+++ b/ui/desktop/src/components/settings/models/ModelsSection.tsx
@@ -107,7 +107,9 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
 
       <div className="biorouter-settings-section">
         <div className="biorouter-settings-section-header">
-          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">Reset</h2>
+          <h2 className="text-[11px] font-medium text-text-muted uppercase tracking-wider">
+            Reset
+          </h2>
         </div>
         <div className="biorouter-settings-list">
           <ResetProviderSection setView={setView} />
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 3fc306d2..a4adf8f3 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -756,14 +756,13 @@ body {
 }
 
 body.biorouter-headless-browser {
-  background:
-    linear-gradient(
-      to right,
-      color-mix(in srgb, var(--background-muted) 70%, var(--background-default)),
-      var(--background-default) 28%,
-      var(--background-default) 72%,
-      color-mix(in srgb, var(--background-muted) 70%, var(--background-default))
-    );
+  background: linear-gradient(
+    to right,
+    color-mix(in srgb, var(--background-muted) 70%, var(--background-default)),
+    var(--background-default) 28%,
+    var(--background-default) 72%,
+    color-mix(in srgb, var(--background-muted) 70%, var(--background-default))
+  );
 }
 
 body.biorouter-headless-browser .biorouter-readable-content {

From 8f848b851a12ecab568874a414a9624866afd7f5 Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:46:13 -0700
Subject: [PATCH 10/14] ui(theme): give the chat composer a visible edge +
 subtle lift
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The composer had a transparent border and the very-light --shadow-default, so its
edge nearly vanished against the white canvas. Give it a warm hairline
border-border-subtle and a dedicated --shadow-composer token (a hair more lift than
--shadow-default, warm-tinted) so the chat box reads as a distinct, gently raised
surface — kept deliberately subtle. New token, not a change to the shared
--shadow-default (which the base Card also uses).
---
 ui/desktop/src/components/ChatInput.tsx | 4 ++--
 ui/desktop/src/styles/main.css          | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index e8299507..f494dfc8 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -1322,8 +1322,8 @@ export default function ChatInput({
         disableAnimation ? '' : 'page-transition'
       } ${
         isFocused
-          ? 'border-transparent hover:border-transparent shadow-[var(--shadow-default)]'
-          : 'border-transparent hover:border-transparent shadow-[var(--shadow-default)]'
+          ? 'border-border-subtle hover:border-border-subtle shadow-[var(--shadow-composer)]'
+          : 'border-border-subtle hover:border-border-subtle shadow-[var(--shadow-composer)]'
       } bg-background-default z-10 rounded-2xl border`}
       data-drop-zone="true"
       onDrop={handleLocalDrop}
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index a4adf8f3..e57ba2e8 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -107,6 +107,10 @@
 
   /* custom shadow — flat by default; popover for elevated menus/modals */
   --shadow-default: 0px 1px 3px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
+  /* composer: a hair more lift than --shadow-default so the chat box reads as a
+     distinct, gently raised surface — deliberately very subtle */
+  --shadow-composer:
+    0px 2px 6px -1px rgba(32, 25, 15, 0.08), 0px 1px 2px 0px rgba(32, 25, 15, 0.05);
   --shadow-popover: 0px 8px 24px 0px rgba(32, 25, 15, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
   --shadow-modal:
     0px 22px 60px -18px rgba(32, 25, 15, 0.22), 0px 8px 24px -18px rgba(32, 25, 15, 0.16),
@@ -169,6 +173,7 @@
   --sidebar-ring: var(--border-default);
 
   --shadow-default: 0px 1px 3px 0px rgba(0, 0, 0, 0.25), 0px 0px 1px 0px rgba(0, 0, 0, 0.35);
+  --shadow-composer: 0px 2px 10px -1px rgba(0, 0, 0, 0.45), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
   --shadow-popover: 0px 8px 24px 0px rgba(0, 0, 0, 0.4), 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
   --shadow-modal:
     0px 22px 64px -16px rgba(0, 0, 0, 0.62), 0px 8px 26px -18px rgba(0, 0, 0, 0.5),

From 93f62e90dddfdaeab48daf75a1c796aef088b03c Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:56:57 -0700
Subject: [PATCH 11/14] ui(theme): square off the main panel to sit flush with
 the straight sidebar

The inset-variant main content carried rounded-xl + shadow-sm; with the flush,
full-height square sidebar that left a rounded notch where the two met. Drop the
corner radius and floating shadow so the content butts cleanly against the sidebar.
---
 ui/desktop/src/components/ui/sidebar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/ui/sidebar.tsx b/ui/desktop/src/components/ui/sidebar.tsx
index 5d4200f0..26a20130 100644
--- a/ui/desktop/src/components/ui/sidebar.tsx
+++ b/ui/desktop/src/components/ui/sidebar.tsx
@@ -295,8 +295,10 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
       data-slot="sidebar-inset"
       className={cn(
         'biorouter-sidebar-inset-depth bg-background relative flex w-full flex-1 flex-col min-w-0',
-        // For inset variant (used in the app)
-        'md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+        // For inset variant (used in the app): flush against the straight,
+        // full-height sidebar — no rounded corners or floating shadow, which
+        // otherwise leave a notch where the rounded panel meets the square sidebar.
+        'md:peer-data-[variant=inset]:ml-0',
         // For offcanvas variant - ensure content doesn't go under sidebar
         'md:peer-data-[collapsible=offcanvas]:peer-data-[state=expanded]:ml-[var(--sidebar-width)]',
         'md:peer-data-[collapsible=offcanvas]:peer-data-[state=collapsed]:ml-0',

From db2926547c990aaa08ffb633cfe2e7418410120d Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 16:56:57 -0700
Subject: [PATCH 12/14] ui(theme): warm off-white chat canvas to match the rest
 of the app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BaseChat's coherent-mode chat panel, sticky header, and composer bar hard-coded
bg-background-default (pure white) while every other view renders on
bg-background-muted (#faf8f3) via MainPanelLayout — so the chat read as a stark
white slab. Point them at bg-background-muted so the chat is the same elegant
off-white; the bordered white composer input now reads as a raised surface on
top. Warm the three remaining full-screen white pages (provider gate, permission
page, schedule detail) for the same consistency.
---
 ui/desktop/src/components/BaseChat.tsx                      | 6 +++---
 ui/desktop/src/components/ProviderGuard.tsx                 | 2 +-
 ui/desktop/src/components/schedule/ScheduleDetailView.tsx   | 2 +-
 .../components/settings/permission/PermissionSetting.tsx    | 6 ++++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index 9f6657e2..9f112b2c 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -676,7 +676,7 @@ function BaseChatContent({
         <div
           className={
             coherent
-              ? 'flex flex-col flex-1 min-h-0 relative rounded-t-2xl overflow-hidden bg-background-default'
+              ? 'flex flex-col flex-1 min-h-0 relative rounded-t-2xl overflow-hidden bg-background-muted'
               : 'flex flex-col flex-1 mx-4 mt-4 mb-3 min-h-0 relative rounded-2xl overflow-hidden'
           }
         >
@@ -733,7 +733,7 @@ function BaseChatContent({
             >
               <div className="biorouter-chat-column mx-auto w-full max-w-[920px]">
                 {workflow?.title && (
-                  <div className="sticky top-0 z-10 bg-background-default mb-4 pt-2">
+                  <div className="sticky top-0 z-10 bg-background-muted mb-4 pt-2">
                     <WorkflowHeader title={workflow.title} />
                   </div>
                 )}
@@ -777,7 +777,7 @@ function BaseChatContent({
           <div
             className={
               coherent
-                ? 'biorouter-chat-composer-bar flex-shrink-0 px-4 sm:px-6 pb-6 pt-2 bg-background-default'
+                ? 'biorouter-chat-composer-bar flex-shrink-0 px-4 sm:px-6 pb-6 pt-2 bg-background-muted'
                 : `px-4 sm:px-6 pb-6 pt-2 flex-shrink-0 ${disableAnimation ? '' : 'animate-[fadein_400ms_ease-in_forwards]'}`
             }
           >
diff --git a/ui/desktop/src/components/ProviderGuard.tsx b/ui/desktop/src/components/ProviderGuard.tsx
index ae380486..2e62166f 100644
--- a/ui/desktop/src/components/ProviderGuard.tsx
+++ b/ui/desktop/src/components/ProviderGuard.tsx
@@ -134,7 +134,7 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
 
   if (isChecking) {
     return (
-      <div className="h-screen w-full bg-background-default flex items-center justify-center">
+      <div className="h-screen w-full bg-background-muted flex items-center justify-center">
         <WelcomeBioRouterLogo />
       </div>
     );
diff --git a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
index 408c3c61..4bcbe358 100644
--- a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
@@ -261,7 +261,7 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
     : '';
 
   return (
-    <div className="h-screen w-full flex flex-col bg-background-default text-text-default">
+    <div className="h-screen w-full flex flex-col bg-background-muted text-text-default">
       <div className="px-8 pt-6 pb-4 border-b border-border-subtle flex-shrink-0">
         <BackButton onClick={onNavigateBack} />
         <h1 className="text-2xl font-semibold tracking-tight mt-1 mb-1 pt-8">Schedule Details</h1>
diff --git a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
index fe02803d..db654171 100644
--- a/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionSetting.tsx
@@ -81,7 +81,7 @@ export default function PermissionSettingsView({ onClose }: { onClose: () => voi
   }, []);
 
   return (
-    <div className="bg-background-default h-screen w-full animate-[fadein_200ms_ease-in_forwards]">
+    <div className="bg-background-muted h-screen w-full animate-[fadein_200ms_ease-in_forwards]">
       <ScrollArea className="h-full w-full">
         <div className="flex flex-col pb-24">
           <div className="px-8 pt-6 pb-4">
@@ -102,7 +102,9 @@ export default function PermissionSettingsView({ onClose }: { onClose: () => voi
                 <circle cx="7.5" cy="15.5" r="5.5" />
               </svg>
             </div>
-            <h1 className="text-2xl font-semibold tracking-tight text-text-default mt-4">Permission Rules</h1>
+            <h1 className="text-2xl font-semibold tracking-tight text-text-default mt-4">
+              Permission Rules
+            </h1>
             <p className="text-text-muted">
               Hidden instructions that will be passed to the provider to help direct and add context
               to your responses.

From 5409eaf6a6468a832a9eddfffceb5aeaa09106ee Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 17:04:57 -0700
Subject: [PATCH 13/14] ui(theme): offset session-name pill when the sidebar is
 collapsed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the sidebar retracts, the chat goes full-width and the session-name pill slid
to x~16 — directly over the macOS traffic lights (x20-85) and crowding the floating
top controls (which end at x172). Add a collapsed-state left offset to the pill
(pl-[184px] on macOS to clear traffic lights + controls, pl-[104px] elsewhere) via
the already-available useSidebar() state, so the top strip reads cleanly:
traffic-lights -> controls -> session name. Expanded layout is unchanged (pl-4).
---
 ui/desktop/src/components/BaseChat.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index 9f112b2c..c92279dc 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -136,6 +136,12 @@ function BaseChatContent({
 
   const isMobile = useIsMobile();
   const { state: sidebarState } = useSidebar();
+  const isMacOS = (window?.electron?.platform || 'darwin') === 'darwin';
+  // When the sidebar is collapsed, the floating top controls (and, on macOS, the
+  // window traffic lights) occupy the top-left strip; offset the session-name
+  // pill so it starts after them instead of overlapping.
+  const sessionPillPadLeft =
+    sidebarState === 'collapsed' ? (isMacOS ? 'pl-[184px]' : 'pl-[104px]') : 'pl-4';
   const setView = useNavigation();
 
   const contentClassName = cn('pr-1 pb-10', (isMobile || sidebarState === 'collapsed') && 'pt-11');
@@ -688,7 +694,7 @@ function BaseChatContent({
             // window — only the pill's own (inline-flex) bounding box is
             // marked no-drag (done inside SessionNamePill).
             <div
-              className="flex-shrink-0 px-4 pt-3 relative z-[60]"
+              className={`flex-shrink-0 ${sessionPillPadLeft} pr-4 pt-3 relative z-[60]`}
               style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
             >
               <SessionNamePill

From ea1d69f061841a0c3705ea4d478fad56a7b79c77 Mon Sep 17 00:00:00 2001
From: Wanjun Gu <wanjun.gu@ucsf.edu>
Date: Thu, 2 Jul 2026 17:18:52 -0700
Subject: [PATCH 14/14] ui(fix): make top controls clickable when the sidebar
 is collapsed in chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The chat's session-name pill wrapper is a full-width -webkit-app-region: drag
surface (so the header strip drags the window). When the sidebar collapsed, the
chat went full-width and that drag surface covered the floating top controls
(sidebar toggle / new-window / dashboard). -webkit-app-region is resolved by the
compositor in paint order, not z-index, so the drag surface swallowed the
controls' real mouse clicks even though they are higher-z no-drag buttons — the
buttons looked active but did nothing. Shrink the pill wrapper to w-fit and offset
it past the controls with a margin when collapsed so it no longer overlaps them;
only the standard base .titlebar-drag-region (which every other screen's controls
already sit over) remains. Expanded layout is unchanged.
---
 ui/desktop/src/components/BaseChat.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index c92279dc..f0b7f189 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -137,11 +137,16 @@ function BaseChatContent({
   const isMobile = useIsMobile();
   const { state: sidebarState } = useSidebar();
   const isMacOS = (window?.electron?.platform || 'darwin') === 'darwin';
-  // When the sidebar is collapsed, the floating top controls (and, on macOS, the
-  // window traffic lights) occupy the top-left strip; offset the session-name
-  // pill so it starts after them instead of overlapping.
-  const sessionPillPadLeft =
-    sidebarState === 'collapsed' ? (isMacOS ? 'pl-[184px]' : 'pl-[104px]') : 'pl-4';
+  // When the sidebar is collapsed the chat spans full width and the top-left
+  // strip holds the floating controls (sidebar toggle / new-window / dashboard)
+  // plus, on macOS, the window traffic lights. Shrink the pill wrapper to fit and
+  // offset it PAST the controls so it neither overlaps them nor lets its
+  // -webkit-app-region: drag surface swallow their clicks (app-region is resolved
+  // by the compositor, so a full-width drag wrapper eats clicks even under a
+  // higher-z no-drag button). Expanded keeps the full-width draggable header strip
+  // — there the controls sit over the sidebar, not over this wrapper.
+  const sessionPillWrapperCls =
+    sidebarState === 'collapsed' ? `w-fit ${isMacOS ? 'ml-[184px]' : 'ml-[104px]'}` : 'w-full pl-4';
   const setView = useNavigation();
 
   const contentClassName = cn('pr-1 pb-10', (isMobile || sidebarState === 'collapsed') && 'pt-11');
@@ -694,7 +699,7 @@ function BaseChatContent({
             // window — only the pill's own (inline-flex) bounding box is
             // marked no-drag (done inside SessionNamePill).
             <div
-              className={`flex-shrink-0 ${sessionPillPadLeft} pr-4 pt-3 relative z-[60]`}
+              className={`flex-shrink-0 ${sessionPillWrapperCls} pr-4 pt-3 relative z-[60]`}
               style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
             >
               <SessionNamePill