UI: warm two-tone (Codex-style) theme refresh + chat/sidebar polish

ui/desktop/src/components/BaseChat.tsx

@@ -136,6 +136,17 @@ function BaseChatContent({
 
   const isMobile = useIsMobile();
   const { state: sidebarState } = useSidebar();
+  const isMacOS = (window?.electron?.platform || 'darwin') === 'darwin';
+  // 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');
@@ -676,7 +687,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'
           }
         >
@@ -688,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 px-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
@@ -733,7 +744,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 +788,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]'}`
             }
           >

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>

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-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}

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}

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>
     );

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>

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>
   );
 }

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);

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" />

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" />}

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

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"

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}

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"

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}