machinaos 0.0.76 → 0.0.78

package/client/src/components/ui/SettingsPanel.tsx

@@ -9,7 +9,9 @@ import {
   HelpCircle,
   RotateCcw,
   X,
+  Volume2,
 } from 'lucide-react';
+import { useAppStore } from '../../store/useAppStore';
 
 import { Button } from '@/components/ui/button';
 import { ActionButton } from '@/components/ui/action-button';
@@ -44,12 +46,13 @@ interface SettingsPanelProps {
 // Reusable row + section primitives
 // ---------------------------------------------------------------------------
 
-type SectionTone = 'agent' | 'model' | 'workflow';
+type SectionTone = 'agent' | 'model' | 'workflow' | 'tool';
 
 const TONE_CLASSES: Record<SectionTone, string> = {
   agent:    'bg-node-agent-soft text-node-agent',
   model:    'bg-node-model-soft text-node-model',
   workflow: 'bg-node-workflow-soft text-node-workflow',
+  tool:     'bg-node-tool-soft text-node-tool',
 };
 
 interface SectionProps {
@@ -60,12 +63,17 @@ interface SectionProps {
 }
 
 const Section: React.FC<SectionProps> = ({ title, Icon, tone, children }) => (
-  <div className="mb-4 rounded-md border border-border bg-muted p-4">
-    <div className="mb-4 flex items-center gap-2 border-b border-border pb-3">
+  // bg-bg-elevated + border-default — settings sections are elevated
+  // cards stacked inside the modal body. font-display + tracking gives
+  // Renaissance/Cyber their typographic identity on section headers.
+  <div className="mb-4 rounded-md border border-border-default bg-bg-elevated p-4">
+    <div className="mb-4 flex items-center gap-2 border-b border-border-default pb-3">
       <div className={`flex h-8 w-8 items-center justify-center rounded-md ${TONE_CLASSES[tone]}`}>
         <Icon className="h-4 w-4" />
       </div>
-      <div className="text-base font-semibold text-foreground">{title}</div>
+      <div className="font-display text-base font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
+        {title}
+      </div>
     </div>
     {children}
   </div>
@@ -80,8 +88,8 @@ interface RowProps {
 const Row: React.FC<RowProps> = ({ label, description, children }) => (
   <div className="flex items-center justify-between py-2">
     <div className="flex-1">
-      <div className="text-sm font-medium text-foreground">{label}</div>
-      <div className="mt-0.5 text-xs text-muted-foreground">{description}</div>
+      <div className="text-sm font-medium text-fg-default">{label}</div>
+      <div className="mt-0.5 text-xs text-fg-muted">{description}</div>
     </div>
     {children}
   </div>
@@ -103,6 +111,12 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
   const isLoading = settingsQuery.isLoading;
   const isSaving = saveMutation.isPending;
 
+  // Sound preference lives in the global UI store (not the per-user
+  // server settings row) because it's gated by browser autoplay policy
+  // and persists locally only.
+  const soundEnabled = useAppStore((s) => s.soundEnabled);
+  const setSoundEnabled = useAppStore((s) => s.setSoundEnabled);
+
   // Hydrate Dashboard's controlled state from the cached settings row
   // exactly once per open. The query is shared with useOnboarding so
   // cross-component reads stay in sync.
@@ -149,7 +163,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
 
   const headerActions = (
     <div className="flex items-center gap-4">
-      <div className="flex items-center gap-2 text-[15px] font-semibold text-foreground">
+      <div className="flex items-center gap-2 font-display text-[15px] font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
         <SettingsIcon className="h-4 w-4" />
         <span>Settings</span>
       </div>
@@ -266,7 +280,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
                     disabled={isSaving}
                     className="pr-6"
                   />
-                  <span className="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-xs text-muted-foreground">
+                  <span className="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-xs text-fg-muted">
                     s
                   </span>
                 </div>
@@ -292,13 +306,13 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
               />
             </Row>
 
-            <div className="my-1 border-b border-border" />
+            <div className="my-1 border-b border-border-default" />
 
             <div className="py-2">
               <div className="mb-2 flex items-center justify-between">
                 <div className="flex-1">
-                  <div className="text-sm font-medium text-foreground">Compaction Ratio</div>
-                  <div className="mt-0.5 text-xs text-muted-foreground">
+                  <div className="text-sm font-medium text-fg-default">Compaction Ratio</div>
+                  <div className="mt-0.5 text-xs text-fg-muted">
                     Fraction of context window that triggers memory compaction
                   </div>
                 </div>
@@ -315,12 +329,12 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
                 disabled={isSaving}
                 className="my-3"
               />
-              <div className="flex justify-between text-[10px] text-muted-foreground">
+              <div className="flex justify-between text-[10px] text-fg-muted">
                 <span>10%</span>
                 <span>50%</span>
                 <span>90%</span>
               </div>
-              <div className="mt-1 text-xs leading-snug text-muted-foreground">
+              <div className="mt-1 text-xs leading-snug text-fg-muted">
                 Lower = compact sooner (saves tokens, loses detail). Higher = compact later (preserves context, uses more tokens).
               </div>
             </div>
@@ -345,6 +359,21 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
             </Row>
           </Section>
 
+          {/* Audio — per-theme WebAudio sound packs. On by default;
+              honours browser autoplay policy (engine resumes on first
+              user gesture via Sounds.unlock()). */}
+          <Section title="Audio" Icon={Volume2} tone="tool">
+            <Row
+              label="Sound Effects"
+              description="Play per-theme click / hover / save / error sounds. Each theme ships a different pack (parchment, terminal, marble, ink, clockwork, ...). Enabled by default — toggle off if you prefer silence."
+            >
+              <Switch
+                checked={soundEnabled}
+                onCheckedChange={setSoundEnabled}
+              />
+            </Row>
+          </Section>
+
           {/* Help */}
           <Section title="Help" Icon={HelpCircle} tone="model">
             <Row

package/client/src/components/ui/StatusBar.tsx

@@ -0,0 +1,108 @@
+/**
+ * StatusBar — fixed-bottom system console line.
+ *
+ * Lives below the canvas, shows workflow name, node count, WebSocket
+ * connection state, active theme, and a live clock. Designed to read
+ * as a "shell prompt" line under Cyber and a "manuscript footer" under
+ * Renaissance via the new-contract typography tokens (font-mono,
+ * tracking, uppercase).
+ *
+ * Per the handoff this is the `.statusbar` surface — it always exists,
+ * height is 24px, sits above the ConsolePanel toggle bar.
+ */
+
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useWebSocket } from '../../contexts/WebSocketContext';
+import { useTheme, type ThemeName } from '../../contexts/ThemeContext';
+import { cn } from '@/lib/utils';
+
+const THEME_LABEL: Record<ThemeName, string> = {
+  light:        'LIGHT',
+  dark:         'DARK',
+  renaissance:  'RENAISSANCE',
+  greek:        'GREEK',
+  edo:          'EDO',
+  steampunk:    'STEAMPUNK',
+  atomic:       'ATOMIC',
+  cyber:        'CYBER',
+  wasteland:    'WASTELAND',
+  rot:          'ROT',
+  plague:       'PLAGUE',
+  surveillance: 'SURVEILLANCE',
+};
+
+interface StatusBarProps {
+  workflowName?: string;
+  nodeCount?: number;
+}
+
+const useClock = (): string => {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = window.setInterval(() => setTime(new Date()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+  return time.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+};
+
+const Sep: React.FC = () => <span className="opacity-40">|</span>;
+
+export const StatusBar: React.FC<StatusBarProps> = ({ workflowName, nodeCount }) => {
+  const { isReady, isConnected } = useWebSocket();
+  const { theme } = useTheme();
+  const clock = useClock();
+
+  const wsStatus = isReady ? 'ONLINE' : isConnected ? 'CONNECTING' : 'OFFLINE';
+  const wsTone = isReady ? 'text-success' : isConnected ? 'text-warning' : 'text-destructive';
+
+  return (
+    // Fixed-bottom strip: bg-bg-panel + 1px top rule. font-mono carries
+    // through to IM Fell English under Renaissance and JetBrains Mono
+    // under Cyber, system mono under light/dark.
+    <div
+      className={cn(
+        // `statusbar` is the handoff structural hook for per-theme
+        // decorations (gauge readouts on Steampunk, REC blink on
+        // Surveillance, illuminated footer on Renaissance).
+        'statusbar flex h-6 items-center gap-3 border-t border-border-default bg-bg-panel px-3.5',
+        'font-mono text-[11px] tracking-[0.04em] text-fg-muted',
+        '[text-transform:var(--type-uppercase)]',
+      )}
+      role="contentinfo"
+      aria-label="Status bar"
+    >
+      <span className={cn('flex items-center gap-1.5 font-medium', wsTone)}>
+        {/* `pip` is the handoff hook for the per-theme blinking dot
+            (Surveillance fires `surv-blink`, Cyber fires `cyber-blink`). */}
+        <span
+          className={cn(
+            'pip inline-block h-1.5 w-1.5 rounded-full',
+            isReady ? 'bg-success animate-pulse' : isConnected ? 'bg-warning' : 'bg-destructive',
+          )}
+        />
+        {wsStatus}
+      </span>
+
+      <Sep />
+
+      <span title={workflowName ?? 'No workflow'}>
+        WF: <span className="text-fg-default">{workflowName ?? '—'}</span>
+      </span>
+
+      <Sep />
+
+      <span>NODES: <span className="text-fg-default">{nodeCount ?? 0}</span></span>
+
+      <span className="ml-auto flex items-center gap-3">
+        <span>
+          THEME: <span className="text-fg-default">{THEME_LABEL[theme]}</span>
+        </span>
+        <Sep />
+        <span className="tabular-nums">{clock}</span>
+      </span>
+    </div>
+  );
+};
+
+export default StatusBar;

package/client/src/components/ui/ThemeSwitcher.tsx

@@ -0,0 +1,109 @@
+/**
+ * ThemeSwitcher — picks the active visual theme.
+ *
+ * Renders one DropdownMenu item per theme listed in `AVAILABLE_THEMES`,
+ * grouped into System / Utopian / Dystopian sections per the design
+ * handoff's dual taxonomy.
+ *
+ * Adding a new theme: drop a CSS file under client/src/themes/, import
+ * it in main.tsx, add the name to `AVAILABLE_THEMES` in ThemeContext,
+ * and add an entry to `THEME_META` + the matching `THEME_GROUPS` row
+ * below.
+ */
+
+import * as React from 'react';
+import { Check, Palette } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useTheme, type ThemeName } from '../../contexts/ThemeContext';
+
+interface ThemeMeta {
+  label: string;
+  blurb: string;
+}
+
+const THEME_META: Record<ThemeName, ThemeMeta> = {
+  light:        { label: 'Light',          blurb: 'Clean default' },
+  dark:         { label: 'Dark',           blurb: 'Solarized + Dracula' },
+  renaissance:  { label: 'Renaissance',    blurb: 'Illuminated codex' },
+  greek:        { label: 'Greek',          blurb: 'Sun-bleached marble agora' },
+  edo:          { label: 'Edo',            blurb: 'Washi paper, sumi ink' },
+  steampunk:    { label: 'Steampunk',      blurb: 'Riveted brass + leather' },
+  atomic:       { label: 'Atomic Modern',  blurb: 'Eames mid-century' },
+  cyber:        { label: 'Cyber-Tyranny',  blurb: 'Neon night market' },
+  wasteland:    { label: 'Wasteland',      blurb: 'Irradiated scrap + rust' },
+  rot:          { label: 'Necromantic Rot',blurb: 'Moss-overgrown crypt' },
+  plague:       { label: 'Plague City',    blurb: 'Quarantine notices' },
+  surveillance: { label: 'Surveillance',   blurb: 'Institutional CCTV' },
+};
+
+interface ThemeGroup {
+  heading: string;
+  themes: readonly ThemeName[];
+}
+
+/** Order of sections + members within each section. Drives the
+ *  dropdown layout; AVAILABLE_THEMES flat list is unchanged. */
+const THEME_GROUPS: readonly ThemeGroup[] = [
+  { heading: 'System',    themes: ['light', 'dark'] },
+  { heading: 'Utopian',   themes: ['renaissance', 'greek', 'edo', 'steampunk', 'atomic'] },
+  { heading: 'Dystopian', themes: ['cyber', 'wasteland', 'rot', 'plague', 'surveillance'] },
+];
+
+export const ThemeSwitcher: React.FC<{ className?: string }> = ({ className }) => {
+  const { theme, setTheme } = useTheme();
+  const activeMeta = THEME_META[theme];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon-sm"
+          title={`Theme: ${activeMeta.label}`}
+          className="border-action-secret-border bg-action-secret-soft text-action-secret hover:bg-action-secret/25"
+        >
+          <Palette />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className={className ?? 'min-w-[240px]'}>
+        {THEME_GROUPS.map((group, groupIdx) => (
+          <React.Fragment key={group.heading}>
+            {groupIdx > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuLabel className="text-xs uppercase tracking-wider text-muted-foreground">
+              {group.heading}
+            </DropdownMenuLabel>
+            {group.themes.map((name) => {
+              const meta = THEME_META[name];
+              const isActive = name === theme;
+              return (
+                <DropdownMenuItem
+                  key={name}
+                  onSelect={() => setTheme(name)}
+                  className="flex items-center gap-2"
+                >
+                  <span className="flex h-4 w-4 items-center justify-center">
+                    {isActive && <Check className="h-3.5 w-3.5" />}
+                  </span>
+                  <span className="flex-1">
+                    <span className="block text-sm font-medium">{meta.label}</span>
+                    <span className="block text-[11px] text-muted-foreground">{meta.blurb}</span>
+                  </span>
+                </DropdownMenuItem>
+              );
+            })}
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ThemeSwitcher;

package/client/src/components/ui/TopToolbar.tsx

@@ -14,8 +14,6 @@ import {
   Pencil,
   Settings as SettingsIcon,
   KeyRound,
-  Sun,
-  Moon,
   LogOut,
   Save,
   Play,
@@ -43,14 +41,17 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { ActionButton } from '@/components/ui/action-button';
+import { ThemeSwitcher } from '@/components/ui/ThemeSwitcher';
 import { cn } from '@/lib/utils';
-import { useTheme } from '../../contexts/ThemeContext';
 import { useAuth } from '../../contexts/AuthContext';
 import { useApiKeys, GlobalModelState } from '../../hooks/useApiKeys';
-import { useWebSocket } from '../../contexts/WebSocketContext';
+import { useStoredProviderCount } from '../../hooks/useCatalogueQuery';
 import { AI_PROVIDER_META } from '../icons/AIProviderIcons';
 
-const Divider = () => <div className="mx-1 h-6 w-px bg-border" />;
+// New-contract token: --border-default ↔ Tailwind utility `bg-border-default`.
+// Same colour as `bg-border` under light/dark, retints automatically under
+// renaissance / cyber via the per-theme [data-theme="..."] block.
+const Divider = () => <div className="mx-1 h-6 w-px bg-border-default" />;
 
 interface TopToolbarProps {
   workflowName: string;
@@ -107,16 +108,17 @@ const TopToolbar: React.FC<TopToolbarProps> = ({
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [tempName, setTempName] = useState(workflowName);
-  const { isDarkMode, toggleTheme } = useTheme();
   const { user, logout } = useAuth();
 
   // Global Model Selector state
   const { getValidatedAiProviders, saveGlobalModel, isConnected: apiKeysConnected } = useApiKeys();
-  const { apiKeyStatuses } = useWebSocket();
   const [globalModelState, setGlobalModelState] = useState<GlobalModelState>({ providers: [], global_provider: null, global_model: null });
 
-  // Re-fetch validated providers when API key statuses change
-  const apiKeyCount = Object.values(apiKeyStatuses).filter(s => s.hasKey).length;
+  // Re-fetch validated providers whenever the count of stored
+  // credentials changes. Read from the catalogue (single source of
+  // truth — `provider.stored` flag); the retired
+  // `apiKeyStatuses[id].hasKey` mirror duplicated this answer.
+  const apiKeyCount = useStoredProviderCount();
   useEffect(() => {
     if (!apiKeysConnected) return;
     getValidatedAiProviders().then(state => setGlobalModelState(state));
@@ -153,7 +155,15 @@ const TopToolbar: React.FC<TopToolbarProps> = ({
   };
 
   return (
-    <div className="flex h-12 items-center justify-between gap-3 border-b border-border bg-muted px-3">
+    // border-default + bg-bg-panel are the new-contract tokens. They
+    // resolve to the existing colours under light/dark (no visual
+    // change) but pick up the parchment / void surfaces under
+    // renaissance / cyber automatically.
+    // `toolbar` is the design-handoff structural class — per-theme CSS
+    // attaches panel textures (vellum on Renaissance, scanlines on Cyber,
+    // marble veins on Greek, riveted leather on Steampunk, etc.) +
+    // border treatments via `:root[data-theme="..."] .toolbar`.
+    <div className="toolbar flex h-12 items-center justify-between gap-3 border-b border-border-default bg-bg-panel px-3">
       {/* ---------- Left Section ---------- */}
       <div className="flex items-center gap-1.5">
         <Button
@@ -178,7 +188,13 @@ const TopToolbar: React.FC<TopToolbarProps> = ({
               className="border-action-save-border bg-action-save-soft text-action-save hover:bg-action-save/25"
             >
               <FileText />
-              File
+              {/* font-display + tracking-display drive the per-theme display
+                  font + letter-spacing; uppercase is gated by --type-uppercase
+                  via the new-contract `tracking-display` token (light/dark
+                  use 0 + none, renaissance + cyber turn it on). */}
+              <span className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)]">
+                File
+              </span>
               <ChevronDown />
             </Button>
           </DropdownMenuTrigger>
@@ -228,10 +244,17 @@ const TopToolbar: React.FC<TopToolbarProps> = ({
           <button
             onClick={handleNameClick}
             title="Click to rename"
-            className="flex items-center gap-1.5 rounded-sm bg-transparent px-3 py-1.5 transition-colors hover:bg-card"
+            className="flex items-center gap-1.5 rounded-sm bg-transparent px-3 py-1.5 transition-colors hover:bg-bg-hover"
           >
-            <span className="text-sm font-medium text-node-agent">{workflowName}</span>
-            <Pencil className="h-3 w-3 text-muted-foreground" />
+            {/* font-display + tracking-display + [text-transform] are
+                theme-driven via the new-contract typography tokens. Under
+                light/dark the workflow name reads as our regular sans-serif;
+                under Renaissance it becomes Cinzel uppercase, under Cyber it
+                becomes Major Mono Display uppercase. */}
+            <span className="text-sm font-display font-medium tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
+              {workflowName}
+            </span>
+            <Pencil className="h-3 w-3 text-fg-muted" />
           </button>
         )}
       </div>
@@ -352,15 +375,7 @@ const TopToolbar: React.FC<TopToolbarProps> = ({
           <KeyRound />
         </Button>
 
-        <Button
-          variant="outline"
-          size="icon-sm"
-          onClick={toggleTheme}
-          title={isDarkMode ? 'Switch to Light mode' : 'Switch to Dark mode'}
-          className="border-action-secret-border bg-action-secret-soft text-action-secret hover:bg-action-secret/25"
-        >
-          {isDarkMode ? <Sun /> : <Moon />}
-        </Button>
+        <ThemeSwitcher />
 
         {user && (
           <Button
@@ -408,10 +423,12 @@ const TopToolbar: React.FC<TopToolbarProps> = ({
           Save
         </ActionButton>
 
-        {/* Status Indicator */}
+        {/* Status Indicator — font-mono tracks the new-contract --font-mono
+            so renaissance gets IM Fell English and cyber gets JetBrains
+            Mono. Stays system mono under light/dark. */}
         <div
           className={cn(
-            'flex items-center gap-2 rounded-sm px-3 py-1 text-xs font-medium',
+            'flex items-center gap-2 rounded-sm px-3 py-1 text-xs font-mono',
             hasUnsavedChanges ? 'text-warning' : 'text-success'
           )}
         >

package/client/src/components/ui/WorkflowSidebar.tsx

@@ -40,13 +40,18 @@ const WorkflowCard: React.FC<WorkflowCardProps> = ({
   onSelect,
   onDelete,
 }) => (
+  // Card: bg-bg-app (page-level surface, sits below panel chrome) +
+  // border-default. Selected state lifts to bg-bg-active and gains a
+  // 3px accent left edge — matches handoff `.wf-card.selected`.
   <Card
     onClick={onSelect}
+    // `wf-card` + `row` co-classes are the handoff structural hooks for
+    // per-theme card decorations + the global hover-sound delegate.
     className={cn(
-      'group relative mb-2 cursor-pointer p-3 transition-colors',
+      'wf-card row group relative mb-2 cursor-pointer border-border-default bg-bg-app p-3 transition-colors',
       isSelected
-        ? 'border-accent border-l-[3px] bg-accent/10'
-        : 'hover:bg-muted'
+        ? 'selected border-accent border-l-[3px] bg-bg-active'
+        : 'hover:bg-bg-hover'
     )}
   >
     <div className="mb-1 flex items-center gap-2">
@@ -55,25 +60,29 @@ const WorkflowCard: React.FC<WorkflowCardProps> = ({
           'flex h-6 w-6 shrink-0 items-center justify-center rounded-sm border',
           isSelected
             ? 'border-accent bg-accent/20 text-accent'
-            : 'border-border bg-muted text-muted-foreground'
+            : 'border-border-default bg-bg-elevated text-fg-muted'
         )}
       >
         <Code2 className="h-3 w-3" />
       </div>
       <h4
         className={cn(
-          'm-0 flex-1 truncate text-sm font-medium',
-          isSelected ? 'text-accent' : 'text-foreground'
+          // Display typography on the workflow name — Cinzel under
+          // Renaissance, Major Mono Display under Cyber.
+          'm-0 flex-1 truncate font-display text-sm font-medium tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)]',
+          isSelected ? 'text-accent' : 'text-fg-default'
         )}
       >
         {workflow.name}
       </h4>
     </div>
 
+    {/* Metadata uses font-mono — picks up IM Fell English / JetBrains
+        Mono / system mono per theme. */}
     <div
       className={cn(
-        'flex items-center justify-between text-xs',
-        isSelected ? 'text-foreground' : 'text-muted-foreground'
+        'flex items-center justify-between font-mono text-xs',
+        isSelected ? 'text-fg-default' : 'text-fg-muted'
       )}
     >
       <span>{workflow.nodeCount} nodes</span>
@@ -106,16 +115,23 @@ const WorkflowSidebar: React.FC<WorkflowSidebarProps> = ({
   onDeleteWorkflow,
 }) => {
   return (
-    <div className="flex h-full w-[280px] flex-col overflow-hidden border-r border-border bg-card">
-      {/* Header */}
-      <div className="border-b border-border bg-muted px-4 py-5">
+    // Sidebar shell: bg-bg-panel matches the handoff `.sidebar` token.
+    // `sidebar` co-class activates per-theme decorations (panel textures,
+    // border treatments) declared under `:root[data-theme="..."] .sidebar`.
+    <div className="sidebar flex h-full w-[280px] flex-col overflow-hidden border-r border-border-default bg-bg-panel">
+      {/* Header — bg-bg-app drops one elevation step below the panel
+          chrome, giving the heading area a subtle "page" backdrop
+          that's distinct from the card list. */}
+      <div className="border-b border-border-default bg-bg-app px-4 py-5">
         <div className="flex items-center gap-2">
           <div className="flex h-9 w-9 items-center justify-center rounded-md bg-accent/20 text-accent">
             <FolderOpen className="h-4 w-4" />
           </div>
           <div>
-            <h3 className="m-0 text-base font-semibold text-foreground">Workflows</h3>
-            <p className="m-0 text-xs text-muted-foreground">{workflows.length} saved</p>
+            <h3 className="m-0 font-display text-base font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
+              Workflows
+            </h3>
+            <p className="m-0 font-mono text-xs text-fg-muted">{workflows.length} saved</p>
           </div>
         </div>
       </div>
@@ -123,11 +139,11 @@ const WorkflowSidebar: React.FC<WorkflowSidebarProps> = ({
       {/* List */}
       <div className="flex-1 overflow-y-auto p-3">
         {workflows.length === 0 ? (
-          <div className="px-4 py-12 text-center text-sm text-muted-foreground">
-            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted">
+          <div className="px-4 py-12 text-center text-sm text-fg-muted">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-lg border-2 border-dashed border-border-default bg-bg-elevated">
               <FilePlus className="h-7 w-7 stroke-1" />
             </div>
-            <p className="m-0 font-medium text-foreground">No workflows yet</p>
+            <p className="m-0 font-medium text-fg-default">No workflows yet</p>
             <p className="mt-2 text-xs leading-relaxed">
               Create your first workflow<br />to get started
             </p>