diff --git a/src/components/AgentLibrary.tsx b/src/components/AgentLibrary.tsx
index c1f680b..d80a158 100644
--- a/src/components/AgentLibrary.tsx
+++ b/src/components/AgentLibrary.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Plus, Clock, Bot, Search, Trash2, Copy, ArrowUpDown, CheckCircle, XCircle, Rocket } from 'lucide-react';
+import { Plus, Clock, Bot, Search, Trash2, Copy, ArrowUpDown, Rocket } from 'lucide-react';
 import { useTheme } from '../theme';
 import { useConsoleStore } from '../store/consoleStore';
 import { Button } from './ds/Button';
@@ -10,6 +10,7 @@ import { Select } from './ds/Select';
 import { API_BASE } from '../config';
 import { DEMO_PRESETS } from '../store/demoPresets';
 import { TemplateCard } from './TemplateCard';
+import { useToastStore } from '../store/toastStore';
 
 interface Agent {
   id: string;
@@ -20,12 +21,6 @@ interface Agent {
   updatedAt: string;
 }
 
-interface Toast {
-  id: number;
-  type: 'success' | 'error';
-  message: string;
-}
-
 interface AgentLibraryProps {
   onSelectAgent: (agentId: string) => void;
   onNewAgent: () => void;
@@ -44,8 +39,6 @@ const TEMPLATE_LIST = Object.entries(DEMO_PRESETS).map(([id, preset]) => ({
   tags: preset.agentMeta.tags,
 }));
 
-let _toastSeq = 0;
-
 export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
   const [agents, setAgents] = useState<Agent[]>([]);
   const [loading, setLoading] = useState(true);
@@ -56,7 +49,6 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
   const [deleteTarget, setDeleteTarget] = useState<Agent | null>(null);
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [cloningId, setCloningId] = useState<string | null>(null);
-  const [toasts, setToasts] = useState<Toast[]>([]);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const t = useTheme();
 
@@ -67,11 +59,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
     return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
   }, [searchQuery]);
 
-  const showToast = useCallback((type: Toast['type'], message: string) => {
-    const id = ++_toastSeq;
-    setToasts((prev) => [...prev, { id, type, message }]);
-    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 3500);
-  }, []);
+  const addToast = useToastStore((s) => s.addToast);
 
   const handleUseTemplate = useCallback((presetId: string) => {
     const { loadDemoPreset } = useConsoleStore.getState();
@@ -130,9 +118,9 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
       const res = await fetch(`${API_BASE}/agents/${encodeURIComponent(deleteTarget.id)}`, { method: 'DELETE' });
       if (!res.ok) throw new Error('Delete failed');
       setAgents((prev) => prev.filter((a) => a.id !== deleteTarget.id));
-      showToast('success', `"${deleteTarget.name}" deleted`);
+      addToast(`"${deleteTarget.name}" deleted`, 'success');
     } catch {
-      showToast('error', `Failed to delete "${deleteTarget.name}"`);
+      addToast(`Failed to delete "${deleteTarget.name}"`, 'error');
     } finally {
       setDeletingId(null);
     }
@@ -165,10 +153,10 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
       });
       if (!saveRes.ok) throw new Error('Failed to save clone');
 
-      showToast('success', `Cloned as "${cloned.agentMeta.name}"`);
+      addToast(`Cloned as "${cloned.agentMeta.name}"`, 'success');
       onSelectAgent(newId);
     } catch {
-      showToast('error', `Failed to clone "${agent.name}"`);
+      addToast(`Failed to clone "${agent.name}"`, 'error');
     } finally {
       setCloningId(null);
     }
@@ -255,7 +243,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
                 background: t.inputBg,
                 border: `1px solid ${t.border}`,
                 color: t.textPrimary,
-                fontFamily: "'Geist Sans', sans-serif",
+                fontFamily: "var(--m-font-sans), sans-serif",
                 fontSize: 13,
               }}
             />
@@ -276,13 +264,13 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
           <div
             className="mb-6 flex items-start gap-4 p-5 rounded-xl"
             style={{
-              background: t.isDark ? 'rgba(254,80,0,0.07)' : 'rgba(254,80,0,0.05)',
-              border: `1px solid ${t.isDark ? 'rgba(254,80,0,0.25)' : 'rgba(254,80,0,0.2)'}`,
+              background: t.isDark ? 'color-mix(in srgb, var(--m-accent) 7%, transparent)' : 'color-mix(in srgb, var(--m-accent) 5%, transparent)',
+              border: `1px solid ${t.isDark ? 'color-mix(in srgb, var(--m-accent) 25%, transparent)' : 'color-mix(in srgb, var(--m-accent) 20%, transparent)'}`,
             }}
           >
-            <Rocket size={28} style={{ color: '#FE5000', flexShrink: 0, marginTop: 2 }} aria-hidden="true" />
+            <Rocket size={28} style={{ color: 'var(--m-accent)', flexShrink: 0, marginTop: 2 }} aria-hidden="true" />
             <div>
-              <div className="text-base font-bold mb-1" style={{ color: t.textPrimary, fontFamily: "'Geist Sans', sans-serif" }}>
+              <div className="text-base font-bold mb-1" style={{ color: t.textPrimary, fontFamily: "var(--m-font-sans), sans-serif" }}>
                 Welcome to Modular Studio
               </div>
               <div className="text-sm mb-3" style={{ color: t.textSecondary }}>
@@ -292,7 +280,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
                 type="button"
                 onClick={handleNewAgentClick}
                 className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold border-none cursor-pointer"
-                style={{ background: '#FE5000', color: '#fff' }}
+                style={{ background: 'var(--m-accent)', color: '#fff' }}
               >
                 <Plus size={14} aria-hidden="true" />
                 Get Started
@@ -325,17 +313,17 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
                   border: `1px solid ${t.border}`,
                   boxShadow: `0 2px 8px ${t.isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.06)'}`,
                 }}
-                onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#FE5000'; }}
+                onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--m-accent)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.borderColor = t.border; }}
               >
                 <div className="p-4">
                   {/* Avatar and Name */}
                   <div className="flex items-start gap-3 mb-3">
-                    <div className="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style={{ background: '#FE500015' }}>
-                      <Bot size={16} style={{ color: '#FE5000' }} />
+                    <div className="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style={{ background: 'color-mix(in srgb, var(--m-accent) 8%, transparent)' }}>
+                      <Bot size={16} style={{ color: 'var(--m-accent)' }} />
                     </div>
                     <div className="min-w-0 flex-1">
-                      <h3 className="text-base font-semibold mb-1 truncate" style={{ color: t.textPrimary, fontFamily: "'Geist Sans', sans-serif" }}>
+                      <h3 className="text-base font-semibold mb-1 truncate" style={{ color: t.textPrimary, fontFamily: "var(--m-font-sans), sans-serif" }}>
                         {agent.name}
                       </h3>
                       <p className="text-sm line-clamp-2" style={{ color: t.textSecondary }}>
@@ -349,7 +337,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
                     <div className="flex flex-wrap gap-1 mb-3">
                       {agent.tags.slice(0, 3).map((tag) => (
                         <span key={tag} className="text-[11px] px-1.5 py-0.5 rounded"
-                          style={{ background: t.surfaceElevated, color: t.textDim, fontFamily: "'Geist Mono', monospace" }}>
+                          style={{ background: t.surfaceElevated, color: t.textDim, fontFamily: "var(--m-font-mono), monospace" }}>
                           {tag}
                         </span>
                       ))}
@@ -365,7 +353,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-1 text-xs" style={{ color: t.textDim }}>
                       <Clock size={12} />
-                      <span style={{ fontFamily: "'Geist Mono', monospace" }}>{formatDate(agent.updatedAt)}</span>
+                      <span style={{ fontFamily: "var(--m-font-mono), monospace" }}>{formatDate(agent.updatedAt)}</span>
                     </div>
                     <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                       <button
@@ -376,7 +364,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
                         onClick={(e) => handleClone(agent, e)}
                         className="flex items-center justify-center w-6 h-6 rounded cursor-pointer border-none bg-transparent transition-colors"
                         style={{ color: cloningId === agent.id ? t.textFaint : t.textDim }}
-                        onMouseEnter={(e) => { e.currentTarget.style.color = '#FE5000'; }}
+                        onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--m-accent)'; }}
                         onMouseLeave={(e) => { e.currentTarget.style.color = cloningId === agent.id ? t.textFaint : t.textDim; }}
                       >
                         {cloningId === agent.id ? <span className="animate-spin text-[10px]" aria-hidden="true">⟳</span> : <Copy size={13} aria-hidden="true" />}
@@ -389,7 +377,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
                         onClick={(e) => { e.stopPropagation(); setDeleteTarget(agent); }}
                         className="flex items-center justify-center w-6 h-6 rounded cursor-pointer border-none bg-transparent transition-colors"
                         style={{ color: deletingId === agent.id ? t.textFaint : t.textDim }}
-                        onMouseEnter={(e) => { e.currentTarget.style.color = '#ff4d4f'; }}
+                        onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--m-error)'; }}
                         onMouseLeave={(e) => { e.currentTarget.style.color = deletingId === agent.id ? t.textFaint : t.textDim; }}
                       >
                         {deletingId === agent.id ? <span className="animate-spin text-[10px]" aria-hidden="true">⟳</span> : <Trash2 size={13} aria-hidden="true" />}
@@ -423,27 +411,7 @@ export function AgentLibrary({ onSelectAgent, onNewAgent }: AgentLibraryProps) {
         </div>
       </Modal>
 
-      {/* Toast notifications */}
-      <div className="fixed bottom-5 right-5 z-[300] flex flex-col gap-2 pointer-events-none">
-        {toasts.map((toast) => (
-          <div
-            key={toast.id}
-            className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium pointer-events-auto"
-            style={{
-              background: t.surfaceOpaque,
-              border: `1px solid ${toast.type === 'success' ? '#22c55e40' : '#ff4d4f40'}`,
-              color: t.textPrimary,
-              boxShadow: `0 4px 16px ${t.isDark ? 'rgba(0,0,0,0.4)' : 'rgba(0,0,0,0.12)'}`,
-              fontFamily: "'Geist Sans', sans-serif",
-            }}
-          >
-            {toast.type === 'success'
-              ? <CheckCircle size={15} style={{ color: '#22c55e', flexShrink: 0 }} />
-              : <XCircle size={15} style={{ color: '#ff4d4f', flexShrink: 0 }} />}
-            {toast.message}
-          </div>
-        ))}
-      </div>
+
     </div>
   );
 }
diff --git a/src/components/ds/Button.tsx b/src/components/ds/Button.tsx
index e8be5f3..f6517ec 100644
--- a/src/components/ds/Button.tsx
+++ b/src/components/ds/Button.tsx
@@ -20,10 +20,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   const fontSizes = { sm: 12, md: 13 };
 
   const variants: Record<string, { bg: string; color: string; border: string; hoverBg: string }> = {
-    primary: { bg: '#FE5000', color: '#fff', border: 'transparent', hoverBg: '#e54700' },
-    secondary: { bg: t.surfaceElevated, color: t.textSecondary, border: t.border, hoverBg: t.isDark ? '#2a2a30' : '#eee' },
-    ghost: { bg: 'transparent', color: t.textSecondary, border: 'transparent', hoverBg: t.isDark ? '#ffffff08' : '#00000008' },
-    danger: { bg: t.statusErrorBg, color: t.statusError, border: 'transparent', hoverBg: t.isDark ? '#ff4d4f20' : '#ff4d4f15' },
+    primary: { bg: 'var(--m-accent)', color: '#fff', border: 'transparent', hoverBg: 'var(--m-accent-hover)' },
+    secondary: { bg: 'var(--m-surface-elevated)', color: t.textSecondary, border: 'var(--m-border)', hoverBg: 'var(--m-surface-hover)' },
+    ghost: { bg: 'transparent', color: t.textSecondary, border: 'transparent', hoverBg: t.isDark ? 'oklch(1 0 0 / 0.03)' : 'oklch(0 0 0 / 0.03)' },
+    danger: { bg: t.statusErrorBg, color: t.statusError, border: 'transparent', hoverBg: 'var(--m-error-hover-bg)' },
   };
 
   const v = variants[variant];
@@ -38,7 +38,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         height: heights[size],
         padding: paddings[size],
         fontSize: fontSizes[size],
-        fontFamily: "'Geist Mono', monospace",
+        fontFamily: "var(--m-font-mono), monospace",
         background: v.bg,
         color: v.color,
         borderColor: v.border,
diff --git a/src/components/ds/Modal.tsx b/src/components/ds/Modal.tsx
index 9ea05eb..640a00a 100644
--- a/src/components/ds/Modal.tsx
+++ b/src/components/ds/Modal.tsx
@@ -12,18 +12,59 @@ export interface ModalProps {
   width?: number;
 }
 
+function getFocusableElements(container: HTMLElement) {
+  return container.querySelectorAll<HTMLElement>(
+    'button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'
+  );
+}
+
 export function Modal({ open, onClose, title, children, footer, width = 520 }: ModalProps) {
   const t = useTheme();
   const panelRef = useRef<HTMLDivElement>(null);
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
   const titleId = title ? `modal-title-${title.toLowerCase().replace(/\s+/g, '-')}` : undefined;
 
+  // Store previously focused element and restore on close
+  useEffect(() => {
+    if (open) {
+      previouslyFocusedRef.current = document.activeElement as HTMLElement;
+    } else if (previouslyFocusedRef.current) {
+      previouslyFocusedRef.current.focus();
+      previouslyFocusedRef.current = null;
+    }
+  }, [open]);
+
+  // Escape handler + focus trap
   useEffect(() => {
     if (!open) return;
-    const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+        return;
+      }
+      if (e.key === 'Tab' && panelRef.current) {
+        const focusable = getFocusableElements(panelRef.current);
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first || document.activeElement === panelRef.current) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
     document.addEventListener('keydown', handleKey);
     return () => document.removeEventListener('keydown', handleKey);
   }, [open, onClose]);
 
+  // Auto-focus panel on open
   useEffect(() => {
     if (open) panelRef.current?.focus();
   }, [open]);
@@ -32,7 +73,7 @@ export function Modal({ open, onClose, title, children, footer, width = 520 }: M
 
   return createPortal(
     <div className="fixed inset-0 z-[200] flex items-center justify-center" onClick={onClose}>
-      <div className="absolute inset-0" style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }} />
+      <div className="absolute inset-0" style={{ background: 'var(--m-overlay, rgba(0,0,0,0.5))', backdropFilter: 'blur(4px)' }} />
       <div
         ref={panelRef}
         role="dialog"
@@ -43,22 +84,22 @@ export function Modal({ open, onClose, title, children, footer, width = 520 }: M
         className="relative flex flex-col rounded-xl overflow-hidden outline-none"
         style={{
           width, maxWidth: '90vw', maxHeight: '80vh',
-          background: t.surfaceOpaque,
-          border: `1px solid ${t.border}`,
+          background: 'var(--m-surface-opaque)',
+          border: '1px solid var(--m-border)',
           boxShadow: `0 16px 48px ${t.isDark ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.15)'}`,
         }}
       >
         {title && (
-          <div className="flex items-center justify-between px-4 py-3 shrink-0" style={{ borderBottom: `1px solid ${t.borderSubtle}` }}>
-            <span id={titleId} className="text-[17px] font-bold" style={{ fontFamily: "'Geist Mono', monospace", color: t.textPrimary }}>{title}</span>
-            <button type="button" onClick={onClose} aria-label="Close dialog" className="flex items-center justify-center w-7 h-7 rounded-md cursor-pointer border-none bg-transparent" style={{ color: t.textDim }}>
+          <div className="flex items-center justify-between px-4 py-3 shrink-0" style={{ borderBottom: '1px solid var(--m-border-subtle)' }}>
+            <span id={titleId} className="text-[17px] font-bold" style={{ fontFamily: "'Geist Mono', monospace", color: 'var(--m-text-primary)' }}>{title}</span>
+            <button type="button" onClick={onClose} aria-label="Close dialog" className="flex items-center justify-center w-7 h-7 rounded-md cursor-pointer border-none bg-transparent" style={{ color: 'var(--m-text-dim)' }}>
               <X size={14} aria-hidden="true" />
             </button>
           </div>
         )}
         <div className="flex-1 overflow-y-auto">{children}</div>
         {footer && (
-          <div className="flex items-center justify-end gap-2 px-4 py-3 shrink-0" style={{ borderTop: `1px solid ${t.borderSubtle}` }}>
+          <div className="flex items-center justify-end gap-2 px-4 py-3 shrink-0" style={{ borderTop: '1px solid var(--m-border-subtle)' }}>
             {footer}
           </div>
         )}
diff --git a/src/components/ds/Tabs.tsx b/src/components/ds/Tabs.tsx
index ba60997..8c907a6 100644
--- a/src/components/ds/Tabs.tsx
+++ b/src/components/ds/Tabs.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, useRef, useCallback } from 'react';
 import { useTheme } from '../../theme';
 
 export interface Tab {
@@ -17,39 +17,81 @@ export interface TabsProps {
 
 export function Tabs({ tabs, active, onChange, size = 'sm' }: TabsProps) {
   const t = useTheme();
-  const fontSize = size === 'sm' ? 9 : 10;
+  const fontSize = size === 'sm' ? 11 : 12;
   const py = size === 'sm' ? 6 : 8;
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent, index: number) => {
+    let nextIndex: number | null = null;
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        nextIndex = index === 0 ? tabs.length - 1 : index - 1;
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        nextIndex = index === tabs.length - 1 ? 0 : index + 1;
+        break;
+      case 'Home':
+        e.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        nextIndex = tabs.length - 1;
+        break;
+    }
+    if (nextIndex !== null) {
+      tabRefs.current[nextIndex]?.focus();
+      onChange(tabs[nextIndex].id);
+    }
+  }, [tabs, onChange]);
 
   return (
-    <div className="flex gap-1 overflow-x-auto shrink-0" style={{ borderBottom: `1px solid ${t.borderSubtle}`, scrollbarWidth: 'none' }}>
-      {tabs.map((tab) => (
-        <button
-          key={tab.id}
-          type="button"
-          onClick={() => onChange(tab.id)}
-          className="flex items-center gap-1 justify-center px-3 cursor-pointer border-none bg-transparent whitespace-nowrap tracking-wider uppercase font-semibold nodrag"
-          style={{
-            paddingTop: py,
-            paddingBottom: py,
-            fontSize,
-            fontFamily: "'Geist Mono', monospace",
-            color: active === tab.id ? '#FE5000' : t.textDim,
-            borderBottom: active === tab.id ? '2px solid #FE5000' : '2px solid transparent',
-            transition: 'color 0.15s',
-          }}
-        >
-          {tab.icon}
-          {tab.label}
-          {tab.count !== undefined && (
-            <span className="text-[12px] px-1 rounded-full" style={{
-              background: active === tab.id ? '#FE500020' : t.badgeBg,
-              color: active === tab.id ? '#FE5000' : t.textMuted,
-            }}>
-              {tab.count}
-            </span>
-          )}
-        </button>
-      ))}
+    <div
+      role="tablist"
+      className="flex gap-1 overflow-x-auto shrink-0"
+      style={{ borderBottom: `1px solid ${t.borderSubtle}`, scrollbarWidth: 'none' }}
+    >
+      {tabs.map((tab, index) => {
+        const isActive = active === tab.id;
+        return (
+          <button
+            key={tab.id}
+            ref={el => { tabRefs.current[index] = el; }}
+            type="button"
+            role="tab"
+            id={`tab-${tab.id}`}
+            aria-selected={isActive}
+            aria-controls={`tabpanel-${tab.id}`}
+            tabIndex={isActive ? 0 : -1}
+            onClick={() => onChange(tab.id)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            className="flex items-center gap-1 justify-center px-3 cursor-pointer border-none bg-transparent whitespace-nowrap nodrag"
+            style={{
+              paddingTop: py,
+              paddingBottom: py,
+              fontSize,
+              fontFamily: 'var(--m-font-mono)',
+              fontWeight: isActive ? 600 : 400,
+              color: isActive ? 'var(--m-accent)' : t.textDim,
+              borderBottom: isActive ? '2px solid var(--m-accent)' : '2px solid transparent',
+              transition: 'color 0.15s',
+            }}
+          >
+            {tab.icon}
+            {tab.label}
+            {tab.count !== undefined && (
+              <span className="text-[12px] px-1 rounded-full" style={{
+                background: isActive ? 'var(--m-accent-bg)' : t.badgeBg,
+                color: isActive ? 'var(--m-accent)' : t.textMuted,
+              }}>
+                {tab.count}
+              </span>
+            )}
+          </button>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/layouts/WizardLayout.tsx b/src/layouts/WizardLayout.tsx
index 0b52104..c5b9d28 100644
--- a/src/layouts/WizardLayout.tsx
+++ b/src/layouts/WizardLayout.tsx
@@ -238,7 +238,7 @@ export function WizardLayout() {
     >
       {/* Skip Link */}
       <a
-        href="#main-content"
+        href={`#tabpanel-${activeTab}`}
         className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-3 focus:py-2 focus:rounded"
         style={{ 
           background: t.surface, 
@@ -309,6 +309,7 @@ export function WizardLayout() {
                 ref={el => { tabRefs.current[index] = el; }}
                 type="button"
                 role="tab"
+                id={`tab-${tab.id}`}
                 aria-selected={isActive}
                 aria-controls={`tabpanel-${tab.id}`}
                 tabIndex={isActive ? 0 : -1}
@@ -353,7 +354,7 @@ export function WizardLayout() {
                   }}
                   aria-hidden="true"
                 />
-                <span style={{ fontFamily: "'Geist Sans', sans-serif" }}>
+                <span style={{ fontFamily: "'Geist', sans-serif" }}>
                   {tab.label}
                 </span>
                 {isTabCompleted && (
@@ -378,7 +379,7 @@ export function WizardLayout() {
       {/* Tab Content */}
       <div 
         ref={contentRef}
-        id="main-content"
+        id={`tabpanel-${activeTab}`}
         role="tabpanel"
         aria-labelledby={`tab-${activeTab}`}
         tabIndex={0}
diff --git a/src/panels/AgentBuilder.tsx b/src/panels/AgentBuilder.tsx
index 572cdf1..67c4d23 100644
--- a/src/panels/AgentBuilder.tsx
+++ b/src/panels/AgentBuilder.tsx
@@ -1,527 +1,79 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { useTheme, type ThemePalette } from '../theme';
-import { useConsoleStore, collectFullState, agentNameToId } from '../store/consoleStore';
+import { useState, useCallback } from 'react';
+import { useTheme } from '../theme';
+import { useConsoleStore } from '../store/consoleStore';
 import { useMemoryStore } from '../store/memoryStore';
-import { useConversationStore } from '../store/conversationStore';
-import { Input } from '../components/ds/Input';
-import { TextArea } from '../components/ds/TextArea';
+import { refineField, type RefinedAgent } from '../utils/refineInstruction';
+import { formatTokens } from '../utils/formatTokens';
 import { Toggle } from '../components/ds/Toggle';
+import { TextArea } from '../components/ds/TextArea';
 import { Tooltip } from '../components/ds/Tooltip';
-import { PRESET_AVATARS, AvatarIcon } from '../components/ds/AvatarIcon';
 import { ConstraintModal } from '../components/ConstraintModal';
-import { WorkflowModal } from '../components/WorkflowModal';
-import { refineField, type RefinedAgent } from '../utils/refineInstruction';
-import { formatTokens } from '../utils/formatTokens';
-import { OUTPUT_FORMATS, type OutputFormat } from '../store/knowledgeBase';
-import { exportAsAgent, downloadAgentFile } from '../utils/agentExport';
-import {
-  Bot, Sparkles, Loader2,
-  ChevronDown, ChevronRight,
-  Plus, X, Download, Upload, FolderOpen, Save, Check, PencilLine,
-} from 'lucide-react';
-import { VersionIndicator } from '../components/VersionIndicator';
-import { API_BASE } from '../config';
-
-/* ── Types ── */
-// type InstructionState = ReturnType<typeof useConsoleStore.getState>['instructionState'];
-// type WorkflowStep = ReturnType<typeof useConsoleStore.getState>['workflowSteps'][number];
-
-/* ── Output Format Select ── */
-function OutputFormatSelect({ value, onChange, t }: { value: string; onChange: (v: string) => void; t: ThemePalette & { isDark: boolean } }) {
-  return (
-    <select
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      className="appearance-none cursor-pointer outline-none text-[14px] h-8 pl-3 pr-7 rounded-lg"
-      style={{
-        fontFamily: "'Geist Sans', sans-serif",
-        background: t.surfaceOpaque,
-        border: `1px solid ${t.border}`,
-        color: t.isDark ? t.textSecondary : '#1a1a20',
-        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 2l4 4 4-4' fill='none' stroke='%23${t.isDark ? '555' : '999'}' stroke-width='1.5'/%3E%3C/svg%3E")`,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'right 8px center',
-      }}
-    >
-      {OUTPUT_FORMATS.map((f) => (
-        <option key={f.id} value={f.id}>{f.label}</option>
-      ))}
-    </select>
-  );
-}
-
-/* ── Agent Action Bar ── */
-function AgentActionBar() {
-  const t = useTheme();
-  const agentMeta = useConsoleStore(s => s.agentMeta);
-  const setAgentMeta = useConsoleStore(s => s.setAgentMeta);
-  const outputFormat = useConsoleStore(s => s.outputFormat);
-  const setOutputFormat = useConsoleStore(s => s.setOutputFormat);
-  const loadAgent = useConsoleStore(s => s.loadAgent);
-  const resetAgent = useConsoleStore(s => s.resetAgent);
-  const channels = useConsoleStore(s => s.channels);
-  const selectedModel = useConsoleStore(s => s.selectedModel);
-  const outputFormats = useConsoleStore(s => s.outputFormats);
-  const prompt = useConsoleStore(s => s.prompt);
-  const tokenBudget = useConsoleStore(s => s.tokenBudget);
-  const mcpServers = useConsoleStore(s => s.mcpServers);
-  const skills = useConsoleStore(s => s.skills);
-
-  const [savedAgents, setSavedAgents] = useState<{ id: string; agentMeta?: { name: string; description: string } }[]>([]);
-  const [agentPickerOpen, setAgentPickerOpen] = useState(false);
-  const [showSaveNamePrompt, setShowSaveNamePrompt] = useState(false);
-  const [saveNameInput, setSaveNameInput] = useState('');
-  const [savingAgent, setSavingAgent] = useState(false);
-  const [saveConfirmed, setSaveConfirmed] = useState(false);
-  const saveConfirmTimerRef = useRef<number | null>(null);
-
-
-  useEffect(() => {
-    return () => {
-      if (saveConfirmTimerRef.current) {
-        window.clearTimeout(saveConfirmTimerRef.current);
-      }
-    };
-  }, []);
-
-  const fetchSavedAgents = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/agents`);
-      if (!res.ok) return;
-      const json = await res.json();
-      setSavedAgents(json.data ?? []);
-    } catch {
-      // backend not available
-    }
-  }, []);
-
-  const handleExport = () => {
-    const store = useConsoleStore.getState();
-    const convStore = useConversationStore.getState();
-    const memStore = useMemoryStore.getState();
-
-    const knowledgeContent = channels
-      .filter((ch) => ch.enabled)
-      .map((ch) => ({
-        sourceId: ch.sourceId,
-        name: ch.name,
-        path: ch.path,
-        knowledgeType: ch.knowledgeType,
-        depth: ch.depth,
-        tokens: ch.baseTokens,
-        content: ch.content,
-      }));
-
-    const pipelineResult = convStore.lastPipelineStats?.pipeline;
-    const pipelineSnapshot = pipelineResult
-      ? {
-          context: pipelineResult.context,
-          tokens: pipelineResult.tokens,
-          utilization: pipelineResult.utilization,
-          sources: pipelineResult.sources.map((s) => ({ name: s.name, type: s.type, totalTokens: s.totalTokens })),
-          compression: {
-            originalTokens: pipelineResult.compression.originalTokens,
-            compressedTokens: pipelineResult.compression.compressedTokens,
-            ratio: pipelineResult.compression.ratio,
-          },
-          timing: { totalMs: pipelineResult.timing.totalMs },
-        }
-      : undefined;
-
-    const facts = memStore.facts.map((f) => ({ id: f.id, text: f.content, domain: f.domain }));
-
-    const content = exportAsAgent({
-      channels, selectedModel, outputFormat, outputFormats, prompt, tokenBudget, mcpServers, skills, agentMeta,
-      agentConfig: store.agentConfig,
-      connectors: store.connectors,
-      instructionState: store.instructionState,
-      workflowSteps: store.workflowSteps,
-      knowledgeContent,
-      pipelineSnapshot,
-      facts: facts.length > 0 ? facts : undefined,
-    });
-    const name = content.match(/^name:\s*(.+)$/m)?.[1]?.trim() ?? 'modular-agent';
-    downloadAgentFile(content, name);
-  };
-
-  const showSaveConfirmation = useCallback(() => {
-    setSaveConfirmed(true);
-    if (saveConfirmTimerRef.current) {
-      window.clearTimeout(saveConfirmTimerRef.current);
-    }
-    saveConfirmTimerRef.current = window.setTimeout(() => {
-      setSaveConfirmed(false);
-    }, 2000);
-  }, []);
-
-  const persistAgent = useCallback(async (nameOverride?: string) => {
-    const resolvedName = (nameOverride ?? agentMeta.name).trim();
-    if (!resolvedName) {
-      setSaveNameInput(agentMeta.name);
-      setShowSaveNamePrompt(true);
-      return;
-    }
-
-    if (resolvedName !== agentMeta.name) {
-      setAgentMeta({ name: resolvedName });
-    }
-
-    setSavingAgent(true);
-    try {
-      const id = agentNameToId(resolvedName);
-      const state = collectFullState();
-      state.id = id;
-      state.agentMeta = { ...state.agentMeta, name: resolvedName };
-
-      const res = await fetch(`${API_BASE}/agents/${encodeURIComponent(id)}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(state),
-      });
-      if (!res.ok) return;
-      setShowSaveNamePrompt(false);
-      showSaveConfirmation();
-    } catch {
-      // backend may not be available
-    } finally {
-      setSavingAgent(false);
-    }
-  }, [agentMeta.name, setAgentMeta, showSaveConfirmation]);
-
-  return (
-    <div
-      className="flex items-center gap-3 px-4 py-3 shrink-0 border-b select-none"
-      style={{
-        position: 'sticky',
-        top: 0,
-        zIndex: 10,
-        background: t.surface,
-        borderColor: t.border,
-      }}
-    >
-      {/* Agent Name Label */}
-      <span
-        className="text-[14px] font-bold tracking-[0.12em] uppercase"
-        style={{ fontFamily: "'Geist Mono', monospace", color: t.textPrimary, minWidth: '100px' }}
-      >
-        {agentMeta.name || 'New Agent'}
-      </span>
-
-      {/* Version */}
-      <VersionIndicator />
-
-      {/* Output Format Selector */}
-      <OutputFormatSelect value={outputFormat} onChange={(v) => setOutputFormat(v as OutputFormat)} t={t} />
-
-      <div className="flex-1" />
-
-      {/* New Agent */}
-      <button
-        type="button"
-        onClick={() => resetAgent()}
-        className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none"
-        style={{ background: '#FE500012', color: '#FE5000', transition: 'background 0.15s' }}
-        onMouseEnter={(e) => { e.currentTarget.style.background = '#FE500025'; }}
-        onMouseLeave={(e) => { e.currentTarget.style.background = '#FE500012'; }}
-        title="Create new agent"
-      >
-        <Plus size={13} />
-        New
-      </button>
-
-      {/* Load Agent */}
-      <div className="relative">
-        <button
-          type="button"
-          onClick={() => { setAgentPickerOpen(!agentPickerOpen); if (!agentPickerOpen) fetchSavedAgents(); }}
-          className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none"
-          style={{ background: '#FE500012', color: '#FE5000', transition: 'background 0.15s' }}
-          onMouseEnter={(e) => { e.currentTarget.style.background = '#FE500025'; }}
-          onMouseLeave={(e) => { e.currentTarget.style.background = '#FE500012'; }}
-          title="Load saved agent"
-        >
-          <FolderOpen size={13} />
-          Load
-        </button>
-        {agentPickerOpen && (
-          <div
-            className="absolute top-full right-0 mt-1 z-50 min-w-[260px] max-h-[300px] overflow-y-auto rounded-lg shadow-lg"
-            style={{ background: t.surface, border: `1px solid ${t.border}` }}
-          >
-            {savedAgents.length === 0 ? (
-              <div className="px-3 py-4 text-[14px] text-center" style={{ color: t.textDim }}>
-                No saved agents found
-              </div>
-            ) : (
-              savedAgents.map((a) => (
-                <button
-                  key={a.id}
-                  type="button"
-                  onClick={() => { loadAgent(a.id); setAgentPickerOpen(false); }}
-                  className="w-full text-left px-3 py-2 border-none cursor-pointer block"
-                  style={{ background: 'transparent', color: t.textPrimary }}
-                  onMouseEnter={(e) => { e.currentTarget.style.background = t.surfaceHover; }}
-                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
-                >
-                  <div className="text-[14px] font-medium">{a.agentMeta?.name || a.id}</div>
-                  {a.agentMeta?.description && (
-                    <div className="text-[12px] mt-0.5" style={{ color: t.textDim }}>
-                      {a.agentMeta.description.length > 80 ? a.agentMeta.description.slice(0, 80) + '…' : a.agentMeta.description}
-                    </div>
-                  )}
-                </button>
-              ))
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Save Agent */}
-      <button
-        type="button"
-        onClick={() => { void persistAgent(); }}
-        className="flex items-center justify-center h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none"
-        style={{ background: saveConfirmed ? '#2ecc7115' : '#FE500012', color: saveConfirmed ? '#2ecc71' : '#FE5000', transition: 'background 0.15s', opacity: savingAgent ? 0.6 : 1 }}
-        onMouseEnter={(e) => { if (!saveConfirmed) e.currentTarget.style.background = '#FE500025'; }}
-        onMouseLeave={(e) => { if (!saveConfirmed) e.currentTarget.style.background = '#FE500012'; }}
-        title={saveConfirmed ? 'Agent saved' : 'Save agent'}
-        disabled={savingAgent}
-      >
-        {saveConfirmed ? <Check size={13} /> : <Save size={13} />}
-        Save
-      </button>
-
-      {/* Import Agent */}
-      <label className="cursor-pointer">
-        <input type="file" accept=".agent.yaml,.agent.yml,.yaml,.yml" style={{ display: 'none' }} onChange={(e) => {
-          const file = e.target.files?.[0];
-          if (file) {
-            const reader = new FileReader();
-            reader.onload = () => {
-              try {
-                // This would require parsing the agent file - implementation pending
-              } catch (err) {
-                console.error('Failed to import agent:', err);
-              }
-            };
-            reader.readAsText(file);
-          }
-        }} />
-        <button
-          type="button"
-          className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none"
-          style={{ background: '#FE500012', color: '#FE5000', transition: 'background 0.15s' }}
-          onMouseEnter={(e) => { e.currentTarget.style.background = '#FE500025'; }}
-          onMouseLeave={(e) => { e.currentTarget.style.background = '#FE500012'; }}
-          title="Import agent definition"
-        >
-          <Upload size={13} />
-          Import
-        </button>
-      </label>
-
-      {/* Export Agent */}
-      <button
-        type="button"
-        onClick={handleExport}
-        className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none"
-        style={{ background: '#FE500012', color: '#FE5000', transition: 'background 0.15s' }}
-        onMouseEnter={(e) => { e.currentTarget.style.background = '#FE500025'; }}
-        onMouseLeave={(e) => { e.currentTarget.style.background = '#FE500012'; }}
-        title="Export agent definition"
-      >
-        <Download size={13} />
-        Export
-      </button>
+import { Bot } from 'lucide-react';
 
-      {/* Save Name Prompt */}
-      {showSaveNamePrompt && (
-        <div className="flex items-center gap-1.5 h-8 px-2 rounded-lg" style={{ background: t.surfaceOpaque, border: `1px solid ${t.border}` }}>
-          <input
-            type="text"
-            value={saveNameInput}
-            onChange={(e) => setSaveNameInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                void persistAgent(saveNameInput);
-              }
-              if (e.key === 'Escape') {
-                setShowSaveNamePrompt(false);
-              }
-            }}
-            className="w-44 h-6 px-2 text-[14px] rounded-md outline-none"
-            style={{ background: t.inputBg, border: `1px solid ${t.borderSubtle}`, color: t.textPrimary }}
-            placeholder="Agent name required"
-            autoFocus
-          />
-          <button
-            type="button"
-            onClick={() => { void persistAgent(saveNameInput); }}
-            className="flex items-center justify-center w-6 h-6 rounded-md border-none cursor-pointer"
-            style={{ background: '#FE5000', color: '#fff' }}
-          >
-            <Check size={12} />
-          </button>
-          <button
-            type="button"
-            onClick={() => setShowSaveNamePrompt(false)}
-            className="flex items-center justify-center w-6 h-6 rounded-md border-none cursor-pointer"
-            style={{ background: 'transparent', color: t.textDim }}
-          >
-            <X size={12} />
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── Section Header ── */
-function SectionHeader({
-  label, color, collapsed, onToggle, right, t,
-}: {
-  label: string; color: string; collapsed: boolean; onToggle: () => void; right?: React.ReactNode; t: ThemePalette & { isDark: boolean };
-}) {
-  return (
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: 10,
-      width: '100%',
-      padding: '14px 20px',
-      userSelect: 'none',
-      borderTop: `1px solid ${t.isDark ? '#222226' : '#e8e8ec'}`,
-      background: `${color}08`
-    }}>
-      <button type="button" onClick={onToggle} aria-expanded={!collapsed}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 10,
-          flex: 1,
-          cursor: 'pointer',
-          border: 'none',
-          background: 'transparent',
-          padding: 0,
-          textAlign: 'left'
-        }}>
-        {collapsed ? <ChevronRight size={12} style={{ color: t.textDim }} /> : <ChevronDown size={12} style={{ color: t.textDim }} />}
-        <div style={{ width: 3, height: 14, borderRadius: 2, background: color, opacity: 0.8 }} />
-        <span style={{
-          fontSize: 12,
-          fontWeight: 700,
-          letterSpacing: '0.08em',
-          textTransform: 'uppercase',
-          fontFamily: "'Geist Mono', monospace",
-          color: t.textPrimary
-        }}>
-          {label}
-        </span>
-      </button>
-      {right}
-    </div>
-  );
-}
-
-/* ── Generate Button ── */
-function GenerateBtn({ loading, onClick }: { loading: boolean; onClick: () => void }) {
-  return (
-    <button type="button" onClick={e => { e.stopPropagation(); onClick(); }} disabled={loading}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 4,
-        fontSize: 13,
-        padding: '4px 8px',
-        borderRadius: 4,
-        cursor: 'pointer',
-        border: 'none',
-        background: '#FE500015',
-        color: '#FE5000',
-        fontFamily: "'Geist Mono', monospace"
-      }}>
-      {loading ? <Loader2 size={9} style={{ animation: 'spin 1s linear infinite' }} /> : <Sparkles size={9} />}
-      Generate
-    </button>
-  );
-}
+import { AgentActionBar } from './builder/AgentActionBar';
+import { SectionHeader } from './builder/SectionHeader';
+import { IdentitySection } from './builder/IdentitySection';
+import { PersonaSection } from './builder/PersonaSection';
+import { ConstraintsSection, type ConstraintModalConfig } from './builder/ConstraintsSection';
+import { ObjectivesSection } from './builder/ObjectivesSection';
+import { WorkflowCard } from './builder/WorkflowCard';
+import { ContextBudgetCard } from './builder/ContextBudgetCard';
 
-/* ── Main AgentBuilder ── */
 export function AgentBuilder() {
   const t = useTheme();
 
-  // Store selectors
   const agentMeta = useConsoleStore(s => s.agentMeta);
-  const setAgentMeta = useConsoleStore(s => s.setAgentMeta);
   const instructionState = useConsoleStore(s => s.instructionState);
   const updateInstruction = useConsoleStore(s => s.updateInstruction);
   const workflowSteps = useConsoleStore(s => s.workflowSteps);
   const channels = useConsoleStore(s => s.channels);
-  const mcpServers = useConsoleStore(s => s.mcpServers);
-  const skills = useConsoleStore(s => s.skills);
   const tokenBudget = useConsoleStore(s => s.tokenBudget);
   const facts = useMemoryStore(s => s.facts);
 
-  // Tags chip input state
-  const [tagInput, setTagInput] = useState('');
+  const { persona, constraints, objectives, rawPrompt, autoSync } = instructionState;
 
-  // Collapse state
   const [identityOpen, setIdentityOpen] = useState(true);
   const [personaOpen, setPersonaOpen] = useState(true);
   const [constraintsOpen, setConstraintsOpen] = useState(false);
   const [objectivesOpen, setObjectivesOpen] = useState(false);
   const [promptOpen, setPromptOpen] = useState(false);
-  // workflow section is always open in dashboard mode
-  const [showAvatarPicker, setShowAvatarPicker] = useState(false);
-  const [editingName, setEditingName] = useState(false);
+
   const [refining, setRefining] = useState<string | null>(null);
 
-  // Modal state
   const [constraintModalOpen, setConstraintModalOpen] = useState(false);
-  const [constraintModalConfig, setConstraintModalConfig] = useState<{
-    mode: 'criteria' | 'constraint';
-    index?: number;
-    title: string;
-    initial?: string;
-  } | null>(null);
-  const [workflowModalOpen, setWorkflowModalOpen] = useState(false);
+  const [constraintModalConfig, setConstraintModalConfig] = useState<ConstraintModalConfig | null>(null);
 
-  const { persona, tone, expertise, constraints, objectives, rawPrompt, autoSync } = instructionState;
+  const openConstraintModal = useCallback((config: ConstraintModalConfig) => {
+    setConstraintModalConfig(config);
+    setConstraintModalOpen(true);
+  }, []);
 
-  // Modal handlers
-  const handleConstraintModalSave = (text: string) => {
+  const handleConstraintModalSave = useCallback((text: string) => {
     if (!constraintModalConfig) return;
-
     if (constraintModalConfig.mode === 'constraint') {
       if (constraintModalConfig.index !== undefined) {
-        // Edit existing rule
         const rules = constraints.customConstraints.split('\n').filter(Boolean);
         rules[constraintModalConfig.index] = text;
         updateInstruction({ constraints: { ...constraints, customConstraints: rules.join('\n') } });
       } else {
-        // Add new rule
         const newRules = constraints.customConstraints ? constraints.customConstraints + '\n' + text : text;
         updateInstruction({ constraints: { ...constraints, customConstraints: newRules } });
       }
     } else if (constraintModalConfig.mode === 'criteria') {
       if (constraintModalConfig.index !== undefined) {
-        // Edit existing criterion
         const updated = [...objectives.successCriteria];
         updated[constraintModalConfig.index] = text;
         updateInstruction({ objectives: { ...objectives, successCriteria: updated } });
       } else {
-        // Add new criterion
         updateInstruction({ objectives: { ...objectives, successCriteria: [...objectives.successCriteria, text] } });
       }
     }
-
     setConstraintModalOpen(false);
     setConstraintModalConfig(null);
-  };
+  }, [constraintModalConfig, constraints, objectives, updateInstruction]);
 
-  const handleConstraintModalDelete = () => {
+  const handleConstraintModalDelete = useCallback(() => {
     if (!constraintModalConfig || constraintModalConfig.index === undefined) return;
-
     if (constraintModalConfig.mode === 'constraint') {
       const rules = constraints.customConstraints.split('\n').filter(Boolean);
       rules.splice(constraintModalConfig.index, 1);
@@ -530,11 +82,9 @@ export function AgentBuilder() {
       const updated = objectives.successCriteria.filter((_, i) => i !== constraintModalConfig.index);
       updateInstruction({ objectives: { ...objectives, successCriteria: updated } });
     }
-
     setConstraintModalOpen(false);
     setConstraintModalConfig(null);
-  };
-
+  }, [constraintModalConfig, constraints, objectives, updateInstruction]);
 
   const handleRefineAll = useCallback(async () => {
     setRefining('all');
@@ -546,11 +96,10 @@ export function AgentBuilder() {
         if (r.constraints) updateInstruction({ constraints: { ...constraints, customConstraints: r.constraints.join('\n') } });
         if (r.objectives) updateInstruction({ objectives: { ...objectives, primary: r.objectives.primary || objectives.primary } });
       }
-    } catch {}
+    } catch { }
     setRefining(null);
-  }, [persona, channels, mcpServers, skills, constraints, objectives, updateInstruction]);
+  }, [persona, constraints, objectives, updateInstruction]);
 
-  // Progress dots
   const done = {
     identity: !!(agentMeta.name && agentMeta.description),
     persona: persona.length > 20,
@@ -559,7 +108,6 @@ export function AgentBuilder() {
   };
   const progress = Object.values(done).filter(Boolean).length;
 
-  // Token budget breakdown
   const knowledgeTokens = channels.reduce((sum, c) => sum + (c.effectiveTokens ?? c.baseTokens ?? 0), 0);
   const instructionTokens = Math.ceil(persona.length / 4) + Math.ceil(constraints.customConstraints.length / 4);
   const workflowTokens = workflowSteps.reduce((sum, s) => sum + Math.ceil(s.label.length / 4), 0);
@@ -567,291 +115,39 @@ export function AgentBuilder() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-      {/* Panel Header */}
       <div style={{ paddingBottom: 10, borderBottom: `1px solid ${t.border}` }}>
-        <span
-          className="text-[11px] font-bold uppercase tracking-[0.12em]"
-          style={{ fontFamily: "'Geist Mono', monospace", color: t.textDim }}
-        >
+        <span className="text-[11px] font-bold uppercase tracking-[0.12em]" style={{ fontFamily: 'var(--m-font-mono)', color: t.textDim }}>
           Agent Configuration
         </span>
       </div>
+
       <AgentActionBar />
-      {/* Agent Card */}
-      <div className="rounded-xl overflow-hidden" style={{ background: t.surfaceOpaque, border: `1px solid ${t.border}`, boxShadow: `0 2px 12px ${t.isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.06)'}` }}>
 
-        {/* Header */}
+      <div className="rounded-xl overflow-hidden" style={{
+        background: t.surfaceOpaque,
+        border: `1px solid ${t.border}`,
+        boxShadow: `0 2px 12px ${t.isDark ? 'oklch(0 0 0 / 0.3)' : 'oklch(0 0 0 / 0.06)'}`,
+      }}>
         <div className="flex items-center gap-2.5 px-5 py-3.5 select-none" style={{ borderBottom: `1px solid ${t.border}`, background: t.surfaceElevated }}>
-          <Bot size={14} style={{ color: '#FE5000' }} />
+          <Bot size={14} style={{ color: 'var(--m-accent)' }} />
           <Tooltip content="Build your agent step by step">
-            <span className="text-[13px] font-bold tracking-[0.08em] uppercase" style={{ fontFamily: "'Geist Mono', monospace", color: t.textPrimary }}>Agent</span>
+            <span className="text-[13px] font-bold tracking-[0.08em] uppercase" style={{ fontFamily: 'var(--m-font-mono)', color: t.textPrimary }}>Agent</span>
           </Tooltip>
           <div className="flex-1" />
           <div className="flex items-center gap-1">
             {Object.entries(done).map(([key, v]) => (
-              <div key={key} title={key} style={{ width: 6, height: 6, borderRadius: '50%', background: v ? '#FE5000' : t.borderSubtle, transition: 'background 200ms' }} />
+              <div key={key} title={key} style={{ width: 6, height: 6, borderRadius: '50%', background: v ? 'var(--m-accent)' : t.borderSubtle, transition: 'background 200ms' }} />
             ))}
-            <span className="text-[13px] ml-1" style={{ color: t.textDim, fontFamily: "'Geist Mono', monospace" }}>{progress}/4</span>
+            <span className="text-[13px] ml-1" style={{ color: t.textDim, fontFamily: 'var(--m-font-mono)' }}>{progress}/4</span>
           </div>
         </div>
 
-        {/* ── 1. IDENTITY ── */}
-        <SectionHeader label="Identity" color="#FE5000" collapsed={!identityOpen} onToggle={() => setIdentityOpen(!identityOpen)} t={t} />
-        {identityOpen && (
-          <div className="px-5 py-4 flex flex-col gap-4">
-            <div className="flex items-center gap-3">
-              <div className="relative">
-                <button type="button" aria-label="Choose avatar" onClick={() => setShowAvatarPicker(!showAvatarPicker)}
-                  className="w-11 h-11 rounded-lg cursor-pointer flex items-center justify-center"
-                  style={{ background: t.surfaceElevated, border: `1.5px solid ${t.border}`, color: '#FE5000' }}>
-                  <AvatarIcon avatarId={agentMeta.avatar} size={20} />
-                </button>
-                {showAvatarPicker && (
-                  <div className="absolute top-13 left-0 z-50 grid grid-cols-5 gap-0.5 p-2 rounded-lg"
-                    style={{ background: t.surfaceOpaque, border: `1px solid ${t.border}`, boxShadow: '0 8px 24px rgba(0,0,0,0.2)', width: 185 }}>
-                    {PRESET_AVATARS.map(av => {
-                      const Icon = av.icon;
-                      return (
-                        <button key={av.id} type="button" title={av.id}
-                          onClick={() => { setAgentMeta({ avatar: av.id }); setShowAvatarPicker(false); }}
-                          className="w-8 h-8 rounded cursor-pointer flex items-center justify-center border-none"
-                          style={{ background: agentMeta.avatar === av.id ? '#FE500020' : 'transparent', color: agentMeta.avatar === av.id ? '#FE5000' : t.textSecondary }}>
-                          <Icon size={15} />
-                        </button>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-              <div className="flex-1">
-                {editingName ? (
-                  <Input value={agentMeta.name} onChange={e => setAgentMeta({ name: e.target.value })}
-                    onBlur={() => setEditingName(false)} onKeyDown={e => e.key === 'Enter' && setEditingName(false)}
-                    autoFocus style={{ fontSize: 19, padding: '6px 10px' }} />
-                ) : (
-                  <button type="button" onClick={() => setEditingName(true)}
-                    className="text-left font-semibold cursor-pointer border-none bg-transparent p-0 w-full"
-                    style={{ color: agentMeta.name ? t.textPrimary : t.textMuted, fontSize: 19, fontFamily: "'Geist Sans', sans-serif" }}>
-                    {agentMeta.name || 'Click to name your agent'}
-                  </button>
-                )}
-              </div>
-            </div>
-            <TextArea label="Description" value={agentMeta.description}
-              onChange={e => setAgentMeta({ description: e.target.value })}
-              placeholder="One-line summary of what this agent does..." style={{ minHeight: 40 }} />
-            {/* Tags chip input */}
-            <div className="flex flex-col gap-1.5">
-              <span className="text-[13px] tracking-wider uppercase font-semibold" style={{ color: t.textMuted, fontFamily: "'Geist Mono', monospace" }}>Tags</span>
-              <div
-                className="flex flex-wrap gap-1.5 px-2 py-1.5 rounded-lg min-h-[36px]"
-                style={{ background: t.inputBg, border: `1px solid ${t.border}` }}
-              >
-                {agentMeta.tags.map((tag, i) => (
-                  <span
-                    key={i}
-                    className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[12px]"
-                    style={{ fontFamily: "'Geist Mono', monospace", background: '#FE500015', color: '#FE5000', border: '1px solid #FE500030' }}
-                  >
-                    {tag}
-                    <button
-                      type="button"
-                      onClick={() => setAgentMeta({ tags: agentMeta.tags.filter((_, j) => j !== i) })}
-                      className="flex items-center justify-center border-none bg-transparent cursor-pointer p-0"
-                      style={{ color: '#FE5000', lineHeight: 1 }}
-                      aria-label={`Remove tag ${tag}`}
-                    >
-                      <X size={10} />
-                    </button>
-                  </span>
-                ))}
-                <input
-                  type="text"
-                  value={tagInput}
-                  onChange={e => setTagInput(e.target.value)}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter' || e.key === ',') {
-                      e.preventDefault();
-                      const newTag = tagInput.trim().replace(/,$/, '');
-                      if (newTag && !agentMeta.tags.includes(newTag)) {
-                        setAgentMeta({ tags: [...agentMeta.tags, newTag] });
-                      }
-                      setTagInput('');
-                    } else if (e.key === 'Backspace' && tagInput === '' && agentMeta.tags.length > 0) {
-                      setAgentMeta({ tags: agentMeta.tags.slice(0, -1) });
-                    }
-                  }}
-                  placeholder={agentMeta.tags.length === 0 ? 'pm, analysis, competitor' : ''}
-                  className="flex-1 min-w-[100px] text-[12px] outline-none border-none bg-transparent"
-                  style={{ fontFamily: "'Geist Mono', monospace", color: t.textPrimary }}
-                />
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* ── 2. PERSONA ── */}
-        <SectionHeader label="Persona" color="#9b59b6" collapsed={!personaOpen} onToggle={() => setPersonaOpen(!personaOpen)} t={t}
-          right={<GenerateBtn loading={refining === 'all'} onClick={handleRefineAll} />} />
-        {personaOpen && (
-          <div className="px-5 py-4 flex flex-col gap-4">
-            <TextArea label="Who is this agent?" value={persona}
-              onChange={e => updateInstruction({ persona: e.target.value })}
-              placeholder="Describe the agent's role, expertise, and personality..." style={{ minHeight: 64 }} />
-            <div className="grid grid-cols-2 gap-4">
-              <div className="flex flex-col gap-1.5">
-                <span className="text-[13px] tracking-wider uppercase font-semibold" style={{ color: t.textMuted, fontFamily: "'Geist Mono', monospace" }}>Tone</span>
-                <div className="flex rounded-md overflow-hidden" style={{ border: `1px solid ${t.border}` }}>
-                  {(['formal', 'neutral', 'casual'] as const).map(opt => (
-                    <button key={opt} type="button" onClick={() => updateInstruction({ tone: opt })}
-                      className="flex-1 text-center text-[13px] py-1.5 cursor-pointer border-none"
-                      style={{ background: tone === opt ? '#FE5000' : 'transparent', color: tone === opt ? '#fff' : t.textDim, transition: 'all 150ms' }}>
-                      {opt.charAt(0).toUpperCase() + opt.slice(1)}
-                    </button>
-                  ))}
-                </div>
-              </div>
-              <div className="flex flex-col gap-1.5">
-                <span className="text-[13px] tracking-wider uppercase font-semibold" style={{ color: t.textMuted, fontFamily: "'Geist Mono', monospace" }}>Expertise</span>
-                <div className="flex rounded-md overflow-hidden" style={{ border: `1px solid ${t.border}` }}>
-                  {([{ l: 'Junior', v: 1 }, { l: 'Mid', v: 3 }, { l: 'Senior', v: 5 }] as const).map(opt => (
-                    <button key={opt.v} type="button" onClick={() => updateInstruction({ expertise: opt.v })}
-                      className="flex-1 text-center text-[13px] py-1.5 cursor-pointer border-none"
-                      style={{ background: expertise === opt.v ? '#FE5000' : 'transparent', color: expertise === opt.v ? '#fff' : t.textDim, transition: 'all 150ms' }}>
-                      {opt.l}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* ── 3. CONSTRAINTS ── */}
-        <SectionHeader label="Constraints" color="#2ecc71" collapsed={!constraintsOpen} onToggle={() => setConstraintsOpen(!constraintsOpen)} t={t} />
-        {constraintsOpen && (
-          <div className="px-5 py-4 flex flex-col gap-3">
-            {/* Safety Profile */}
-            <div className="flex items-center gap-3">
-              <span className="text-[13px] tracking-wider uppercase font-semibold" style={{ color: t.textMuted, fontFamily: "'Geist Mono', monospace" }}>Safety</span>
-              <div className="flex gap-1">
-                {([
-                  { id: 'autonomous', label: 'Autonomous', desc: 'No guardrails', apply: { neverMakeUp: false, askBeforeActions: false, stayInScope: false, useOnlyTools: false, limitWords: false } },
-                  { id: 'balanced', label: 'Balanced', desc: 'Cite sources, stay in scope', apply: { neverMakeUp: true, askBeforeActions: false, stayInScope: true, useOnlyTools: false, limitWords: false } },
-                  { id: 'careful', label: 'Careful', desc: 'All guardrails on', apply: { neverMakeUp: true, askBeforeActions: true, stayInScope: true, useOnlyTools: true, limitWords: false } },
-                ] as const).map(profile => {
-                  const isActive = profile.id === 'careful'
-                    ? constraints.neverMakeUp && constraints.askBeforeActions && constraints.stayInScope && constraints.useOnlyTools
-                    : profile.id === 'balanced'
-                    ? constraints.neverMakeUp && constraints.stayInScope && !constraints.askBeforeActions && !constraints.useOnlyTools
-                    : !constraints.neverMakeUp && !constraints.askBeforeActions && !constraints.stayInScope && !constraints.useOnlyTools;
-                  return (
-                    <Tooltip key={profile.id} content={profile.desc}>
-                      <button
-                        type="button"
-                        onClick={() => updateInstruction({ constraints: { ...constraints, ...profile.apply } })}
-                        className="text-[13px] px-3 py-1.5 rounded-md cursor-pointer border-none font-medium"
-                        style={{
-                          background: isActive ? '#2ecc7120' : 'transparent',
-                          color: isActive ? '#2ecc71' : t.textDim,
-                          border: `1px solid ${isActive ? '#2ecc7140' : t.border}`,
-                          fontFamily: "'Geist Mono', monospace",
-                          transition: 'all 0.15s',
-                        }}
-                      >
-                        {profile.label}
-                      </button>
-                    </Tooltip>
-                  );
-                })}
-              </div>
-            </div>
-            <div>
-              <span className="text-[13px] tracking-wider uppercase font-semibold block mb-1.5" style={{ color: t.textMuted, fontFamily: "'Geist Mono', monospace" }}>Custom Rules</span>
-              {constraints.customConstraints.split('\n').filter(Boolean).map((rule, i) => (
-                <div key={i} className="flex items-center gap-2 px-3 py-2 rounded-lg mb-1.5" style={{
-                  background: t.isDark ? '#2e1a0a' : '#fdf5ee',
-                  border: `1px solid ${t.isDark ? '#e67e2230' : '#e67e2240'}`,
-                }}>
-                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#e67e22', flexShrink: 0 }} />
-                  <span className="flex-1 text-[13px]" style={{
-                    color: t.textPrimary,
-                    lineHeight: 1.4,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    maxWidth: '100%',
-                  }}>
-                    {rule}
-                  </span>
-                  <button type="button" onClick={() => { setConstraintModalConfig({ mode: 'constraint', index: i, title: 'Edit Custom Rule', initial: rule }); setConstraintModalOpen(true); }}
-                    className="border-none bg-transparent cursor-pointer p-1 rounded min-w-[44px] min-h-[44px] flex items-center justify-center"
-                    style={{ color: t.textDim }}
-                    aria-label="Edit rule">
-                    <PencilLine size={11} />
-                  </button>
-                </div>
-              ))}
-              <button type="button" onClick={() => {
-                setConstraintModalConfig({ mode: 'constraint', title: 'Add Custom Rule' });
-                setConstraintModalOpen(true);
-              }}
-                className="flex items-center gap-1 text-[12px] cursor-pointer border-none bg-transparent mt-1.5" style={{ color: t.textDim }}>
-                <Plus size={10} /> Add rule
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* ── 4. OBJECTIVES ── */}
-        <SectionHeader label="Objectives" color="#e74c3c" collapsed={!objectivesOpen} onToggle={() => setObjectivesOpen(!objectivesOpen)} t={t} />
-        {objectivesOpen && (
-          <div className="px-5 py-4 flex flex-col gap-4">
-            <TextArea label="Primary Objective" value={objectives.primary}
-              onChange={e => updateInstruction({ objectives: { ...objectives, primary: e.target.value } })}
-              placeholder="What is this agent's main goal?" style={{ minHeight: 40 }} />
-            <div>
-              <span className="text-[13px] tracking-wider uppercase font-semibold block mb-1.5" style={{ color: t.textMuted, fontFamily: "'Geist Mono', monospace" }}>Success Criteria</span>
-              {objectives.successCriteria.map((c, i) => (
-                <div key={i} className="flex items-center gap-2 px-3 py-2 rounded-lg mb-1.5" style={{
-                  background: t.isDark ? '#1a2e1a' : '#f0faf0',
-                  border: `1px solid ${t.isDark ? '#2ecc7130' : '#2ecc7140'}`,
-                }}>
-                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#2ecc71', flexShrink: 0 }} />
-                  <span className="flex-1 text-[13px]" style={{
-                    color: t.textPrimary,
-                    lineHeight: 1.4,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    maxWidth: '100%',
-                  }}>
-                    {c}
-                  </span>
-                  <button type="button" onClick={() => {
-                    setConstraintModalConfig({ mode: 'criteria', index: i, title: 'Edit Success Criterion', initial: c });
-                    setConstraintModalOpen(true);
-                  }}
-                    className="border-none bg-transparent cursor-pointer p-1 rounded min-w-[44px] min-h-[44px] flex items-center justify-center"
-                    style={{ color: t.textDim }}
-                    aria-label="Edit criterion">
-                    <PencilLine size={11} />
-                  </button>
-                </div>
-              ))}
-              <button type="button" onClick={() => {
-                setConstraintModalConfig({ mode: 'criteria', title: 'Add Success Criterion' });
-                setConstraintModalOpen(true);
-              }}
-                className="flex items-center gap-1 text-[12px] cursor-pointer border-none bg-transparent mt-1.5" style={{ color: t.textDim }}>
-                <Plus size={10} /> Add criterion
-              </button>
-            </div>
-          </div>
-        )}
+        <IdentitySection collapsed={!identityOpen} onToggle={() => setIdentityOpen(v => !v)} />
+        <PersonaSection collapsed={!personaOpen} onToggle={() => setPersonaOpen(v => !v)} refining={refining} onRefineAll={handleRefineAll} />
+        <ConstraintsSection collapsed={!constraintsOpen} onToggle={() => setConstraintsOpen(v => !v)} onOpenModal={openConstraintModal} />
+        <ObjectivesSection collapsed={!objectivesOpen} onToggle={() => setObjectivesOpen(v => !v)} onOpenModal={openConstraintModal} />
 
-        {/* ── 5. SYSTEM PROMPT ── */}
-        <SectionHeader label="System Prompt" color="#555" collapsed={!promptOpen} onToggle={() => setPromptOpen(!promptOpen)} t={t}
+        <SectionHeader label="System Prompt" color="var(--m-text-muted)" collapsed={!promptOpen} onToggle={() => setPromptOpen(v => !v)}
           right={
             <div className="flex items-center gap-1.5" onClick={e => e.stopPropagation()}>
               <Toggle checked={autoSync} onChange={v => updateInstruction({ autoSync: v })} label="" />
@@ -862,106 +158,30 @@ export function AgentBuilder() {
           <div className="px-5 py-4">
             <TextArea value={rawPrompt} onChange={e => updateInstruction({ rawPrompt: e.target.value })}
               placeholder="System prompt will be auto-generated from sections above, or type manually..."
-              style={{ minHeight: 120, fontFamily: "'Geist Mono', monospace", fontSize: 13 }} />
+              style={{ minHeight: 120, fontFamily: 'var(--m-font-mono)', fontSize: 13 }} />
           </div>
         )}
       </div>
 
-      {/* Constraint Modal */}
       <ConstraintModal
         open={constraintModalOpen}
-        onClose={() => {
-          setConstraintModalOpen(false);
-          setConstraintModalConfig(null);
-        }}
+        onClose={() => { setConstraintModalOpen(false); setConstraintModalConfig(null); }}
         onSave={handleConstraintModalSave}
         onDelete={constraintModalConfig?.index !== undefined ? handleConstraintModalDelete : undefined}
         initial={constraintModalConfig?.initial}
         title={constraintModalConfig?.title || ''}
       />
 
-      <WorkflowModal
-        open={workflowModalOpen}
-        onClose={() => setWorkflowModalOpen(false)}
-      />
-
-      {/* Workflow Card */}
-      <div className="rounded-xl overflow-hidden" style={{ background: t.surfaceOpaque, border: `1px solid ${t.border}`, boxShadow: `0 2px 12px ${t.isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.06)'}` }}>
-        <div className="flex items-center gap-2.5 px-5 py-3.5 select-none" style={{ background: t.surfaceElevated }}>
-          <div style={{ width: 3, height: 14, borderRadius: 2, background: '#e67e22', opacity: 0.8 }} />
-          <span className="text-[13px] font-bold tracking-[0.08em] uppercase flex-1" style={{ fontFamily: "'Geist Mono', monospace", color: t.textPrimary }}>Workflow</span>
-          <span className="text-[13px]" style={{ fontFamily: "'Geist Mono', monospace", color: t.textDim }}>{workflowSteps.length} steps</span>
-        </div>
-        <div className="px-5 py-4 flex flex-col items-center">
-          {workflowSteps.length === 0 ? (
-            <button
-              type="button"
-              onClick={() => setWorkflowModalOpen(true)}
-              className="flex items-center justify-center gap-1.5 text-[13px] px-4 py-2.5 rounded-lg cursor-pointer border-none"
-              style={{ background: '#e67e2215', color: '#e67e22', fontFamily: "'Geist Mono', monospace", fontWeight: 600 }}
-            >
-              <Plus size={12} /> Define workflow steps
-            </button>
-          ) : (
-            <>
-              {workflowSteps.map((step, i) => (
-                <div key={step.id} className="w-full">
-                  <div className="flex items-center gap-3 py-2">
-                    <div style={{ width: 24, height: 24, borderRadius: '50%', background: t.surfaceElevated, border: '1.5px solid #e67e2230', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                      <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 13, fontWeight: 700, color: '#e67e22' }}>{i + 1}</span>
-                    </div>
-                    <span style={{ flex: 1, fontSize: 14, color: t.textPrimary }}>{step.label || 'Unnamed step'}</span>
-                    <span className="text-[12px] px-2 py-0.5 rounded" style={{ background: t.badgeBg, color: t.textDim, fontFamily: "'Geist Mono', monospace" }}>
-                      {step.action || 'action'}
-                    </span>
-                  </div>
-                  {i < workflowSteps.length - 1 && (
-                    <div style={{ width: 2, height: 12, background: '#e67e2220', marginLeft: 11 }} />
-                  )}
-                </div>
-              ))}
-              <button
-                type="button"
-                onClick={() => setWorkflowModalOpen(true)}
-                className="text-[12px] px-3 py-2 mt-3 rounded cursor-pointer border-none"
-                style={{ background: t.border, color: t.textDim }}
-              >
-                Edit workflow
-              </button>
-            </>
-          )}
-        </div>
-      </div>
+      <WorkflowCard />
 
-      {/* Context Budget */}
-      <div className="rounded-xl overflow-hidden" style={{ background: t.surfaceOpaque, border: `1px solid ${t.border}`, padding: '16px 20px' }}>
-        <div className="flex items-center justify-between mb-2.5">
-          <span className="text-[12px] font-bold tracking-[0.08em] uppercase" style={{ fontFamily: "'Geist Mono', monospace", color: t.textDim }}>Context Budget</span>
-          <span className="text-[13px] font-semibold" style={{ fontFamily: "'Geist Mono', monospace", color: '#FE5000' }}>
-            {formatTokens(totalUsed)} / {formatTokens(tokenBudget)}
-          </span>
-        </div>
-        <div style={{ height: 8, background: t.isDark ? '#25252a' : '#dddde2', borderRadius: 4, overflow: 'hidden' }}>
-          <div style={{ width: `${Math.min((totalUsed / tokenBudget) * 100, 100)}%`, height: '100%', borderRadius: 4, background: 'linear-gradient(90deg, #FE5000, #ff8c55)', transition: 'width 500ms' }} />
-        </div>
-        <div className="flex gap-3 mt-2.5">
-          {[
-            { label: 'Knowledge', tokens: knowledgeTokens, color: '#3498db' },
-            { label: 'Instructions', tokens: instructionTokens, color: '#9b59b6' },
-            { label: 'Workflow', tokens: workflowTokens, color: '#e67e22' },
-          ].map(cat => (
-            <span key={cat.label} className="flex items-center gap-1 text-[12px]" style={{ color: t.textDim }}>
-              <span style={{ width: 8, height: 8, borderRadius: 2, background: cat.color }} />
-              {cat.label} {formatTokens(cat.tokens)}
-            </span>
-          ))}
-        </div>
-        {facts.length > 0 && (
-          <div className="mt-2 text-[12px]" style={{ fontFamily: "'Geist Mono', monospace", color: t.textDim }}>
-            💡 Based on {facts.length} insight{facts.length !== 1 ? 's' : ''}
-          </div>
-        )}
-      </div>
+      <ContextBudgetCard
+        knowledgeTokens={knowledgeTokens}
+        instructionTokens={instructionTokens}
+        workflowTokens={workflowTokens}
+        totalUsed={totalUsed}
+        tokenBudget={tokenBudget}
+        factCount={facts.length}
+      />
     </div>
   );
 }
diff --git a/src/panels/RuntimePanel.tsx b/src/panels/RuntimePanel.tsx
index 88f8949..1c8e5c4 100644
--- a/src/panels/RuntimePanel.tsx
+++ b/src/panels/RuntimePanel.tsx
@@ -4,17 +4,17 @@ import { useRuntimeStore, type ExtractedFact, type RuntimeAgentState } from '../
 import { Loader2, CheckCircle, XCircle, Clock, Brain, Maximize2, Minimize2, ChevronDown, ChevronRight, Copy, Check, Zap } from 'lucide-react';
 
 const FACT_COLORS: Record<string, string> = {
-  observation: '#3498db',
-  inference: '#f1c40f',
-  decision: '#2ecc71',
-  hypothesis: '#9b59b6',
-  contract: '#FE5000',
+  observation: 'var(--m-fact-observation)',
+  inference: 'var(--m-fact-inference)',
+  decision: 'var(--m-fact-decision)',
+  hypothesis: 'var(--m-fact-hypothesis)',
+  contract: 'var(--m-fact-contract)',
 };
 
 function FactBadge({ fact }: { fact: ExtractedFact }) {
-  const color = FACT_COLORS[fact.epistemicType] ?? '#888';
+  const color = FACT_COLORS[fact.epistemicType] ?? 'var(--m-text-dim)';
   return (
-    <span style={{ fontSize: 12, padding: '2px 6px', borderRadius: 4, background: color + '15', color, fontFamily: "'Geist Mono', monospace" }}>
+    <span style={{ fontSize: 12, padding: '2px 6px', borderRadius: 4, background: `color-mix(in srgb, ${color} 8%, transparent)`, color, fontFamily: "var(--m-font-mono), monospace" }}>
       {fact.key}
     </span>
   );
@@ -29,7 +29,7 @@ function CopyButton({ text }: { text: string }) {
       style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, opacity: 0.6 }}
       title="Copy output"
     >
-      {copied ? <Check size={12} style={{ color: '#2ecc71' }} /> : <Copy size={12} />}
+      {copied ? <Check size={12} style={{ color: 'var(--m-success)' }} /> : <Copy size={12} />}
     </button>
   );
 }
@@ -40,19 +40,19 @@ function AgentCard({ agent, expanded: forceExpanded }: { agent: RuntimeAgentStat
 
   const statusIcon = {
     waiting: <Clock size={14} style={{ color: t.textDim }} />,
-    running: <Loader2 size={14} className="animate-spin" style={{ color: '#FE5000' }} />,
-    completed: <CheckCircle size={14} style={{ color: '#2ecc71' }} />,
-    error: <XCircle size={14} style={{ color: '#dc2626' }} />,
+    running: <Loader2 size={14} className="animate-spin" style={{ color: 'var(--m-accent)' }} />,
+    completed: <CheckCircle size={14} style={{ color: 'var(--m-success)' }} />,
+    error: <XCircle size={14} style={{ color: 'var(--m-error)' }} />,
   }[agent.status];
 
   const output = agent.status === 'completed' ? agent.output : agent.currentMessage;
   const hasLongOutput = (output?.length ?? 0) > 300;
 
   return (
-    <div style={{ padding: 12, borderRadius: 8, border: `1px solid ${agent.status === 'running' ? '#FE500040' : t.border}`, background: agent.status === 'running' ? '#FE500008' : t.surface }}>
+    <div style={{ padding: 12, borderRadius: 8, border: `1px solid ${agent.status === 'running' ? 'color-mix(in srgb, var(--m-accent) 25%, transparent)' : t.border}`, background: agent.status === 'running' ? 'color-mix(in srgb, var(--m-accent) 3%, transparent)' : t.surface }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: output ? 8 : 0 }}>
         {statusIcon}
-        <span style={{ fontSize: 14, fontWeight: 600, color: t.textPrimary, fontFamily: "'Geist Mono', monospace" }}>
+        <span style={{ fontSize: 14, fontWeight: 600, color: t.textPrimary, fontFamily: "var(--m-font-mono), monospace" }}>
           {agent.name}
         </span>
         {agent.isAgentSdk && (
@@ -61,11 +61,11 @@ function AgentCard({ agent, expanded: forceExpanded }: { agent: RuntimeAgentStat
               fontSize: 10,
               padding: '2px 6px',
               borderRadius: 4,
-              background: '#FE500015',
-              color: '#FE5000',
-              fontFamily: "'Geist Mono', monospace",
+              background: 'color-mix(in srgb, var(--m-accent) 8%, transparent)',
+              color: 'var(--m-accent)',
+              fontFamily: "var(--m-font-mono), monospace",
               fontWeight: 600,
-              border: '1px solid #FE500030',
+              border: '1px solid color-mix(in srgb, var(--m-accent) 19%, transparent)',
             }}
           >
             Agent SDK
@@ -95,7 +95,7 @@ function AgentCard({ agent, expanded: forceExpanded }: { agent: RuntimeAgentStat
               <button
                 type="button"
                 onClick={() => setExpanded(!expanded)}
-                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 6px', fontSize: 12, color: '#FE5000', display: 'flex', alignItems: 'center', gap: 4, fontFamily: "'Geist Mono', monospace" }}
+                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 6px', fontSize: 12, color: 'var(--m-accent)', display: 'flex', alignItems: 'center', gap: 4, fontFamily: "var(--m-font-mono), monospace" }}
               >
                 {expanded ? <><ChevronDown size={12} /> Collapse</> : <><ChevronRight size={12} /> Expand ({Math.ceil((output?.length ?? 0) / 1000)}k chars)</>}
               </button>
@@ -108,8 +108,8 @@ function AgentCard({ agent, expanded: forceExpanded }: { agent: RuntimeAgentStat
       {agent.toolCalls.length > 0 && (
         <div style={{ marginTop: 8 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
-            <Zap size={12} style={{ color: '#2ecc71' }} />
-            <span style={{ fontSize: 12, fontWeight: 600, color: t.textSecondary, fontFamily: "'Geist Mono', monospace" }}>
+            <Zap size={12} style={{ color: 'var(--m-success)' }} />
+            <span style={{ fontSize: 12, fontWeight: 600, color: t.textSecondary, fontFamily: "var(--m-font-mono), monospace" }}>
               Tool Calls ({agent.toolCalls.length})
             </span>
           </div>
@@ -121,13 +121,13 @@ function AgentCard({ agent, expanded: forceExpanded }: { agent: RuntimeAgentStat
                   fontSize: 12,
                   padding: 6,
                   borderRadius: 4,
-                  background: '#2ecc7115',
-                  border: '1px solid #2ecc7130',
+                  background: 'color-mix(in srgb, var(--m-success) 8%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--m-success) 19%, transparent)',
                   color: t.textSecondary,
-                  fontFamily: "'Geist Mono', monospace",
+                  fontFamily: "var(--m-font-mono), monospace",
                 }}
               >
-                <div style={{ fontWeight: 600, color: '#2ecc71', marginBottom: 2 }}>
+                <div style={{ fontWeight: 600, color: 'var(--m-success)', marginBottom: 2 }}>
                   {tc.tool}
                 </div>
                 {tc.args && (
@@ -157,8 +157,8 @@ function SharedFacts({ facts }: { facts: ExtractedFact[] }) {
   return (
     <div style={{ padding: 12, borderRadius: 8, border: `1px solid ${t.border}`, background: t.surface }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
-        <Brain size={14} style={{ color: '#FE5000' }} />
-        <span style={{ fontSize: 13, fontWeight: 600, color: t.textPrimary, fontFamily: "'Geist Mono', monospace" }}>
+        <Brain size={14} style={{ color: 'var(--m-accent)' }} />
+        <span style={{ fontSize: 13, fontWeight: 600, color: t.textPrimary, fontFamily: "var(--m-font-mono), monospace" }}>
           Shared Memory ({facts.length})
         </span>
       </div>
@@ -203,9 +203,9 @@ export function RuntimeResults() {
   const content = (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 12, height: '100%' }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        {status === 'running' && <Loader2 size={14} className="animate-spin" style={{ color: '#FE5000' }} />}
-        {status === 'completed' && <CheckCircle size={14} style={{ color: '#2ecc71' }} />}
-        {status === 'error' && <XCircle size={14} style={{ color: '#dc2626' }} />}
+        {status === 'running' && <Loader2 size={14} className="animate-spin" style={{ color: 'var(--m-accent)' }} />}
+        {status === 'completed' && <CheckCircle size={14} style={{ color: 'var(--m-success)' }} />}
+        {status === 'error' && <XCircle size={14} style={{ color: 'var(--m-error)' }} />}
         <span style={{ fontSize: 13, fontWeight: 600, color: t.textPrimary }}>
           {status === 'running' ? 'Running...' : status === 'completed' ? 'Completed' : 'Error'}
         </span>
@@ -221,7 +221,7 @@ export function RuntimeResults() {
       </div>
 
       {error && (
-        <div style={{ fontSize: 13, color: '#dc2626', padding: 8, borderRadius: 6, background: '#dc262610' }}>{error}</div>
+        <div style={{ fontSize: 13, color: 'var(--m-error)', padding: 8, borderRadius: 6, background: 'color-mix(in srgb, var(--m-error) 6%, transparent)' }}>{error}</div>
       )}
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, overflowY: 'auto' }}>
diff --git a/src/panels/builder/AgentActionBar.tsx b/src/panels/builder/AgentActionBar.tsx
new file mode 100644
index 0000000..5c23e15
--- /dev/null
+++ b/src/panels/builder/AgentActionBar.tsx
@@ -0,0 +1,180 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useTheme, type ThemePalette } from '../../theme';
+import { useConsoleStore, collectFullState, agentNameToId } from '../../store/consoleStore';
+import { useMemoryStore } from '../../store/memoryStore';
+import { useConversationStore } from '../../store/conversationStore';
+import { OUTPUT_FORMATS, type OutputFormat } from '../../store/knowledgeBase';
+import { exportAsAgent, downloadAgentFile } from '../../utils/agentExport';
+import { Plus, X, Download, Upload, FolderOpen, Save, Check } from 'lucide-react';
+import { VersionIndicator } from '../../components/VersionIndicator';
+import { API_BASE } from '../../config';
+
+function OutputFormatSelect({ value, onChange, t }: { value: string; onChange: (v: string) => void; t: ThemePalette & { isDark: boolean } }) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="appearance-none cursor-pointer outline-none text-[14px] h-8 pl-3 pr-7 rounded-lg"
+      style={{
+        fontFamily: 'var(--m-font-sans)',
+        background: 'var(--m-surface-opaque)',
+        border: '1px solid var(--m-border)',
+        color: t.isDark ? 'var(--m-text-secondary)' : 'var(--m-text-primary)',
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 2l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E")`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'right 8px center',
+      }}
+    >
+      {OUTPUT_FORMATS.map((f) => (
+        <option key={f.id} value={f.id}>{f.label}</option>
+      ))}
+    </select>
+  );
+}
+
+export function AgentActionBar() {
+  const t = useTheme();
+  const agentMeta = useConsoleStore(s => s.agentMeta);
+  const setAgentMeta = useConsoleStore(s => s.setAgentMeta);
+  const outputFormat = useConsoleStore(s => s.outputFormat);
+  const setOutputFormat = useConsoleStore(s => s.setOutputFormat);
+  const loadAgent = useConsoleStore(s => s.loadAgent);
+  const resetAgent = useConsoleStore(s => s.resetAgent);
+  const channels = useConsoleStore(s => s.channels);
+  const selectedModel = useConsoleStore(s => s.selectedModel);
+  const outputFormats = useConsoleStore(s => s.outputFormats);
+  const prompt = useConsoleStore(s => s.prompt);
+  const tokenBudget = useConsoleStore(s => s.tokenBudget);
+  const mcpServers = useConsoleStore(s => s.mcpServers);
+  const skills = useConsoleStore(s => s.skills);
+
+  const [savedAgents, setSavedAgents] = useState<{ id: string; agentMeta?: { name: string; description: string } }[]>([]);
+  const [agentPickerOpen, setAgentPickerOpen] = useState(false);
+  const [showSaveNamePrompt, setShowSaveNamePrompt] = useState(false);
+  const [saveNameInput, setSaveNameInput] = useState('');
+  const [savingAgent, setSavingAgent] = useState(false);
+  const [saveConfirmed, setSaveConfirmed] = useState(false);
+  const saveConfirmTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => { if (saveConfirmTimerRef.current) window.clearTimeout(saveConfirmTimerRef.current); };
+  }, []);
+
+  const fetchSavedAgents = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/agents`);
+      if (!res.ok) return;
+      const json = await res.json();
+      setSavedAgents(json.data ?? []);
+    } catch { /* backend not available */ }
+  }, []);
+
+  const handleExport = () => {
+    const store = useConsoleStore.getState();
+    const convStore = useConversationStore.getState();
+    const memStore = useMemoryStore.getState();
+    const knowledgeContent = channels.filter((ch) => ch.enabled).map((ch) => ({
+      sourceId: ch.sourceId, name: ch.name, path: ch.path, knowledgeType: ch.knowledgeType,
+      depth: ch.depth, tokens: ch.baseTokens, content: ch.content,
+    }));
+    const pipelineResult = convStore.lastPipelineStats?.pipeline;
+    const pipelineSnapshot = pipelineResult ? {
+      context: pipelineResult.context, tokens: pipelineResult.tokens, utilization: pipelineResult.utilization,
+      sources: pipelineResult.sources.map((s) => ({ name: s.name, type: s.type, totalTokens: s.totalTokens })),
+      compression: { originalTokens: pipelineResult.compression.originalTokens, compressedTokens: pipelineResult.compression.compressedTokens, ratio: pipelineResult.compression.ratio },
+      timing: { totalMs: pipelineResult.timing.totalMs },
+    } : undefined;
+    const facts = memStore.facts.map((f) => ({ id: f.id, text: f.content, domain: f.domain }));
+    const content = exportAsAgent({
+      channels, selectedModel, outputFormat, outputFormats, prompt, tokenBudget, mcpServers, skills, agentMeta,
+      agentConfig: store.agentConfig, connectors: store.connectors, instructionState: store.instructionState,
+      workflowSteps: store.workflowSteps, knowledgeContent, pipelineSnapshot, facts: facts.length > 0 ? facts : undefined,
+    });
+    const name = content.match(/^name:\s*(.+)$/m)?.[1]?.trim() ?? 'modular-agent';
+    downloadAgentFile(content, name);
+  };
+
+  const showSaveConfirmation = useCallback(() => {
+    setSaveConfirmed(true);
+    if (saveConfirmTimerRef.current) window.clearTimeout(saveConfirmTimerRef.current);
+    saveConfirmTimerRef.current = window.setTimeout(() => setSaveConfirmed(false), 2000);
+  }, []);
+
+  const persistAgent = useCallback(async (nameOverride?: string) => {
+    const resolvedName = (nameOverride ?? agentMeta.name).trim();
+    if (!resolvedName) { setSaveNameInput(agentMeta.name); setShowSaveNamePrompt(true); return; }
+    if (resolvedName !== agentMeta.name) setAgentMeta({ name: resolvedName });
+    setSavingAgent(true);
+    try {
+      const id = agentNameToId(resolvedName);
+      const state = collectFullState();
+      state.id = id;
+      state.agentMeta = { ...state.agentMeta, name: resolvedName };
+      const res = await fetch(`${API_BASE}/agents/${encodeURIComponent(id)}`, {
+        method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(state),
+      });
+      if (!res.ok) return;
+      setShowSaveNamePrompt(false);
+      showSaveConfirmation();
+    } catch { /* backend may not be available */ } finally { setSavingAgent(false); }
+  }, [agentMeta.name, setAgentMeta, showSaveConfirmation]);
+
+  const accentBtnStyle = { background: 'var(--m-accent-bg)', color: 'var(--m-accent)', transition: 'background 0.15s' };
+  const accentBtnHover = (e: React.MouseEvent<HTMLElement>) => { e.currentTarget.style.background = 'oklch(0.63 0.24 38 / 0.15)'; };
+  const accentBtnLeave = (e: React.MouseEvent<HTMLElement>) => { e.currentTarget.style.background = 'var(--m-accent-bg)'; };
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-3 shrink-0 border-b select-none"
+      style={{ position: 'sticky', top: 0, zIndex: 10, background: 'var(--m-surface)', borderColor: 'var(--m-border)' }}>
+      <span className="text-[14px] font-bold tracking-[0.12em] uppercase"
+        style={{ fontFamily: 'var(--m-font-mono)', color: 'var(--m-text-primary)', minWidth: '100px' }}>
+        {agentMeta.name || 'New Agent'}
+      </span>
+      <VersionIndicator />
+      <OutputFormatSelect value={outputFormat} onChange={(v) => setOutputFormat(v as OutputFormat)} t={t} />
+      <div className="flex-1" />
+      <button type="button" onClick={() => resetAgent()} className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none" style={accentBtnStyle} onMouseEnter={accentBtnHover} onMouseLeave={accentBtnLeave} title="Create new agent"><Plus size={13} />New</button>
+      <div className="relative">
+        <button type="button" onClick={() => { setAgentPickerOpen(!agentPickerOpen); if (!agentPickerOpen) fetchSavedAgents(); }} className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none" style={accentBtnStyle} onMouseEnter={accentBtnHover} onMouseLeave={accentBtnLeave} title="Load saved agent"><FolderOpen size={13} />Load</button>
+        {agentPickerOpen && (
+          <div className="absolute top-full right-0 mt-1 z-50 min-w-[260px] max-h-[300px] overflow-y-auto rounded-lg shadow-lg" style={{ background: 'var(--m-surface)', border: '1px solid var(--m-border)' }}>
+            {savedAgents.length === 0 ? (
+              <div className="px-3 py-4 text-[14px] text-center" style={{ color: 'var(--m-text-dim)' }}>No saved agents found</div>
+            ) : savedAgents.map((a) => (
+              <button key={a.id} type="button" onClick={() => { loadAgent(a.id); setAgentPickerOpen(false); }}
+                className="w-full text-left px-3 py-2 border-none cursor-pointer block"
+                style={{ background: 'transparent', color: 'var(--m-text-primary)' }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--m-surface-hover)'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
+                <div className="text-[14px] font-medium">{a.agentMeta?.name || a.id}</div>
+                {a.agentMeta?.description && <div className="text-[12px] mt-0.5" style={{ color: 'var(--m-text-dim)' }}>{a.agentMeta.description.length > 80 ? a.agentMeta.description.slice(0, 80) + '…' : a.agentMeta.description}</div>}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      <button type="button" onClick={() => { void persistAgent(); }} className="flex items-center justify-center h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none"
+        style={{ background: saveConfirmed ? 'var(--m-success-bg)' : 'var(--m-accent-bg)', color: saveConfirmed ? 'var(--m-success)' : 'var(--m-accent)', transition: 'background 0.15s', opacity: savingAgent ? 0.6 : 1 }}
+        onMouseEnter={(e) => { if (!saveConfirmed) accentBtnHover(e); }} onMouseLeave={(e) => { if (!saveConfirmed) accentBtnLeave(e); }}
+        title={saveConfirmed ? 'Agent saved' : 'Save agent'} disabled={savingAgent}>
+        {saveConfirmed ? <Check size={13} /> : <Save size={13} />}Save
+      </button>
+      <label className="cursor-pointer">
+        <input type="file" accept=".agent.yaml,.agent.yml,.yaml,.yml" style={{ display: 'none' }} onChange={() => {}} />
+        <button type="button" className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none" style={accentBtnStyle} onMouseEnter={accentBtnHover} onMouseLeave={accentBtnLeave} title="Import agent definition"><Upload size={13} />Import</button>
+      </label>
+      <button type="button" onClick={handleExport} className="flex items-center justify-center gap-1.5 h-8 px-2.5 rounded-lg text-[14px] font-medium cursor-pointer border-none" style={accentBtnStyle} onMouseEnter={accentBtnHover} onMouseLeave={accentBtnLeave} title="Export agent definition"><Download size={13} />Export</button>
+      {showSaveNamePrompt && (
+        <div className="flex items-center gap-1.5 h-8 px-2 rounded-lg" style={{ background: 'var(--m-surface-opaque)', border: '1px solid var(--m-border)' }}>
+          <input type="text" value={saveNameInput} onChange={(e) => setSaveNameInput(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') void persistAgent(saveNameInput); if (e.key === 'Escape') setShowSaveNamePrompt(false); }}
+            className="w-44 h-6 px-2 text-[14px] rounded-md outline-none"
+            style={{ background: 'var(--m-input-bg)', border: '1px solid var(--m-border-subtle)', color: 'var(--m-text-primary)' }}
+            placeholder="Agent name required" autoFocus />
+          <button type="button" onClick={() => { void persistAgent(saveNameInput); }} className="flex items-center justify-center w-6 h-6 rounded-md border-none cursor-pointer" style={{ background: 'var(--m-accent)', color: '#fff' }}><Check size={12} /></button>
+          <button type="button" onClick={() => setShowSaveNamePrompt(false)} className="flex items-center justify-center w-6 h-6 rounded-md border-none cursor-pointer" style={{ background: 'transparent', color: 'var(--m-text-dim)' }}><X size={12} /></button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/panels/builder/ConstraintsSection.tsx b/src/panels/builder/ConstraintsSection.tsx
new file mode 100644
index 0000000..d6d0c65
--- /dev/null
+++ b/src/panels/builder/ConstraintsSection.tsx
@@ -0,0 +1,63 @@
+import { useTheme } from '../../theme';
+import { useConsoleStore } from '../../store/consoleStore';
+import { Tooltip } from '../../components/ds/Tooltip';
+import { Plus, PencilLine } from 'lucide-react';
+
+export interface ConstraintModalConfig {
+  mode: 'criteria' | 'constraint';
+  index?: number;
+  title: string;
+  initial?: string;
+}
+
+export function ConstraintsSection({ onOpenModal }: { onOpenModal: (config: ConstraintModalConfig) => void }) {
+  const t = useTheme();
+  const { constraints } = useConsoleStore(s => s.instructionState);
+  const updateInstruction = useConsoleStore(s => s.updateInstruction);
+  const profiles = [
+    { id: 'autonomous', label: 'Autonomous', desc: 'No guardrails', apply: { neverMakeUp: false, askBeforeActions: false, stayInScope: false, useOnlyTools: false, limitWords: false } },
+    { id: 'balanced', label: 'Balanced', desc: 'Cite sources, stay in scope', apply: { neverMakeUp: true, askBeforeActions: false, stayInScope: true, useOnlyTools: false, limitWords: false } },
+    { id: 'careful', label: 'Careful', desc: 'All guardrails on', apply: { neverMakeUp: true, askBeforeActions: true, stayInScope: true, useOnlyTools: true, limitWords: false } },
+  ] as const;
+  return (
+    <div className="px-5 py-4 flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <span className="text-[13px] font-semibold" style={{ color: 'var(--m-text-muted)', fontFamily: 'var(--m-font-mono)' }}>Safety</span>
+        <div className="flex gap-1">
+          {profiles.map(profile => {
+            const isActive = profile.id === 'careful'
+              ? constraints.neverMakeUp && constraints.askBeforeActions && constraints.stayInScope && constraints.useOnlyTools
+              : profile.id === 'balanced'
+              ? constraints.neverMakeUp && constraints.stayInScope && !constraints.askBeforeActions && !constraints.useOnlyTools
+              : !constraints.neverMakeUp && !constraints.askBeforeActions && !constraints.stayInScope && !constraints.useOnlyTools;
+            return (
+              <Tooltip key={profile.id} content={profile.desc}>
+                <button type="button" onClick={() => updateInstruction({ constraints: { ...constraints, ...profile.apply } })}
+                  className="text-[13px] px-3 py-1.5 rounded-md cursor-pointer border-none font-medium"
+                  style={{ background: isActive ? 'var(--m-success-bg)' : 'transparent', color: isActive ? 'var(--m-success)' : 'var(--m-text-dim)', border: `1px solid ${isActive ? 'oklch(0.72 0.19 155 / 0.25)' : 'var(--m-border)'}`, fontFamily: 'var(--m-font-mono)', transition: 'all 0.15s' }}>
+                  {profile.label}
+                </button>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </div>
+      <div>
+        <span className="text-[13px] font-semibold block mb-1.5" style={{ color: 'var(--m-text-muted)', fontFamily: 'var(--m-font-mono)' }}>Custom Rules</span>
+        {constraints.customConstraints.split('
+').filter(Boolean).map((rule: string, i: number) => (
+          <div key={i} className="flex items-center gap-2 px-3 py-2 rounded-lg mb-1.5" style={{ background: t.isDark ? 'oklch(0.18 0.02 50)' : 'oklch(0.97 0.01 70)', border: `1px solid ${t.isDark ? 'oklch(0.68 0.16 60 / 0.19)' : 'oklch(0.68 0.16 60 / 0.25)'}` }}>
+            <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--m-intel)', flexShrink: 0 }} />
+            <span className="flex-1 text-[13px]" style={{ color: 'var(--m-text-primary)', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{rule}</span>
+            <button type="button" onClick={() => onOpenModal({ mode: 'constraint', index: i, title: 'Edit Custom Rule', initial: rule })}
+              className="border-none bg-transparent cursor-pointer p-1 rounded" style={{ color: 'var(--m-text-dim)' }} aria-label="Edit rule"><PencilLine size={11} /></button>
+          </div>
+        ))}
+        <button type="button" onClick={() => onOpenModal({ mode: 'constraint', title: 'Add Custom Rule' })}
+          className="flex items-center gap-1 text-[12px] cursor-pointer border-none bg-transparent mt-1.5" style={{ color: 'var(--m-text-dim)' }}>
+          <Plus size={10} /> Add rule
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/panels/builder/ContextBudgetCard.tsx b/src/panels/builder/ContextBudgetCard.tsx
new file mode 100644
index 0000000..eb7b2a5
--- /dev/null
+++ b/src/panels/builder/ContextBudgetCard.tsx
@@ -0,0 +1,47 @@
+import { useTheme } from '../../theme';
+import { formatTokens } from '../../utils/formatTokens';
+
+interface ContextBudgetCardProps {
+  knowledgeTokens: number;
+  instructionTokens: number;
+  workflowTokens: number;
+  tokenBudget: number;
+  factsCount: number;
+}
+
+export function ContextBudgetCard({ knowledgeTokens, instructionTokens, workflowTokens, tokenBudget, factsCount }: ContextBudgetCardProps) {
+  const t = useTheme();
+  const totalUsed = knowledgeTokens + instructionTokens + workflowTokens;
+  const categories = [
+    { label: 'Knowledge', tokens: knowledgeTokens, color: 'var(--m-knowledge)' },
+    { label: 'Instructions', tokens: instructionTokens, color: 'var(--m-agents)' },
+    { label: 'Workflow', tokens: workflowTokens, color: 'var(--m-intel)' },
+  ];
+
+  return (
+    <div className="rounded-xl overflow-hidden" style={{ background: 'var(--m-surface-opaque)', border: '1px solid var(--m-border)', padding: '16px 20px' }}>
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-[12px] font-bold tracking-[0.08em] uppercase" style={{ fontFamily: 'var(--m-font-mono)', color: 'var(--m-text-dim)' }}>Context Budget</span>
+        <span className="text-[13px] font-semibold" style={{ fontFamily: 'var(--m-font-mono)', color: 'var(--m-accent)' }}>
+          {formatTokens(totalUsed)} / {formatTokens(tokenBudget)}
+        </span>
+      </div>
+      <div style={{ height: 8, background: 'var(--m-surface-elevated)', borderRadius: 4, overflow: 'hidden' }}>
+        <div style={{ width: `${Math.min((totalUsed / tokenBudget) * 100, 100)}%`, height: '100%', borderRadius: 4, background: 'linear-gradient(90deg, var(--m-accent), oklch(0.72 0.18 45))', transition: 'width 500ms' }} />
+      </div>
+      <div className="flex gap-3 mt-2.5">
+        {categories.map(cat => (
+          <span key={cat.label} className="flex items-center gap-1 text-[12px]" style={{ color: 'var(--m-text-dim)' }}>
+            <span style={{ width: 8, height: 8, borderRadius: 2, background: cat.color }} />
+            {cat.label} {formatTokens(cat.tokens)}
+          </span>
+        ))}
+      </div>
+      {factsCount > 0 && (
+        <div className="mt-2 text-[12px]" style={{ fontFamily: 'var(--m-font-mono)', color: 'var(--m-text-dim)' }}>
+          Based on {factsCount} insight{factsCount !== 1 ? 's' : ''}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/panels/builder/IdentitySection.tsx b/src/panels/builder/IdentitySection.tsx
new file mode 100644
index 0000000..5aaf96b
--- /dev/null
+++ b/src/panels/builder/IdentitySection.tsx
@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { useTheme } from '../../theme';
+import { useConsoleStore } from '../../store/consoleStore';
+import { Input } from '../../components/ds/Input';
+import { TextArea } from '../../components/ds/TextArea';
+import { PRESET_AVATARS, AvatarIcon } from '../../components/ds/AvatarIcon';
+import { X } from 'lucide-react';
+
+export function IdentitySection() {
+  const t = useTheme();
+  const agentMeta = useConsoleStore(s => s.agentMeta);
+  const setAgentMeta = useConsoleStore(s => s.setAgentMeta);
+  const [tagInput, setTagInput] = useState('');
+  const [showAvatarPicker, setShowAvatarPicker] = useState(false);
+  const [editingName, setEditingName] = useState(false);
+
+  return (
+    <div className="px-5 py-4 flex flex-col gap-4">
+      <div className="flex items-center gap-3">
+        <div className="relative">
+          <button type="button" aria-label="Choose avatar" onClick={() => setShowAvatarPicker(!showAvatarPicker)}
+            className="w-11 h-11 rounded-lg cursor-pointer flex items-center justify-center"
+            style={{ background: 'var(--m-surface-elevated)', border: '1.5px solid var(--m-border)', color: 'var(--m-accent)' }}>
+            <AvatarIcon avatarId={agentMeta.avatar} size={20} />
+          </button>
+          {showAvatarPicker && (
+            <div className="absolute top-13 left-0 z-50 grid grid-cols-5 gap-0.5 p-2 rounded-lg"
+              style={{ background: 'var(--m-surface-opaque)', border: '1px solid var(--m-border)', boxShadow: '0 8px 24px oklch(0 0 0 / 0.2)', width: 185 }}>
+              {PRESET_AVATARS.map(av => {
+                const Icon = av.icon;
+                return (
+                  <button key={av.id} type="button" title={av.id}
+                    onClick={() => { setAgentMeta({ avatar: av.id }); setShowAvatarPicker(false); }}
+                    className="w-8 h-8 rounded cursor-pointer flex items-center justify-center border-none"
+                    style={{ background: agentMeta.avatar === av.id ? 'var(--m-accent-bg)' : 'transparent', color: agentMeta.avatar === av.id ? 'var(--m-accent)' : 'var(--m-text-secondary)' }}>
+                    <Icon size={15} />
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        <div className="flex-1">
+          {editingName ? (
+            <Input value={agentMeta.name} onChange={e => setAgentMeta({ name: e.target.value })}
+              onBlur={() => setEditingName(false)} onKeyDown={e => e.key === 'Enter' && setEditingName(false)}
+              autoFocus style={{ fontSize: 19, padding: '6px 10px' }} />
+          ) : (
+            <button type="button" onClick={() => setEditingName(true)}
+              className="text-left font-semibold cursor-pointer border-none bg-transparent p-0 w-full"
+              style={{ color: agentMeta.name ? 'var(--m-text-primary)' : 'var(--m-text-muted)', fontSize: 19, fontFamily: 'var(--m-font-sans)' }}>
+              {agentMeta.name || 'Click to name your agent'}
+            </button>
+          )}
+        </div>
+      </div>
+      <TextArea label="Description" value={agentMeta.description}
+        onChange={e => setAgentMeta({ description: e.target.value })}
+        placeholder="One-line summary of what this agent does..." style={{ minHeight: 40 }} />
+      <div className="flex flex-col gap-1.5">
+        <span className="text-[13px] tracking-wider uppercase font-semibold" style={{ color: 'var(--m-text-muted)', fontFamily: 'var(--m-font-mono)' }}>Tags</span>
+        <div className="flex flex-wrap gap-1.5 px-2 py-1.5 rounded-lg min-h-[36px]" style={{ background: 'var(--m-input-bg)', border: '1px solid var(--m-border)' }}>
+          {agentMeta.tags.map((tag, i) => (
+            <span key={i} className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[12px]"
+              style={{ fontFamily: 'var(--m-font-mono)', background: 'var(--m-accent-bg)', color: 'var(--m-accent)', border: '1px solid oklch(0.63 0.24 38 / 0.19)' }}>
+              {tag}
+              <button type="button" onClick={() => setAgentMeta({ tags: agentMeta.tags.filter((_, j) => j !== i) })}
+                className="flex items-center justify-center border-none bg-transparent cursor-pointer p-0"
+                style={{ color: 'var(--m-accent)', lineHeight: 1 }} aria-label={"Remove tag"}>
+                <X size={10} />
+              </button>
+            </span>
+          ))}
+          <input type="text" value={tagInput} onChange={e => setTagInput(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ',') {
+                e.preventDefault();
+                const newTag = tagInput.trim().replace(/,$/, '');
+                if (newTag && !agentMeta.tags.includes(newTag)) setAgentMeta({ tags: [...agentMeta.tags, newTag] });
+                setTagInput('');
+              } else if (e.key === 'Backspace' && tagInput === '' && agentMeta.tags.length > 0) {
+                setAgentMeta({ tags: agentMeta.tags.slice(0, -1) });
+              }
+            }}
+            placeholder={agentMeta.tags.length === 0 ? 'pm, analysis, competitor' : ''}
+            className="flex-1 min-w-[100px] text-[12px] outline-none border-none bg-transparent"
+            style={{ fontFamily: 'var(--m-font-mono)', color: 'var(--m-text-primary)' }} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/panels/builder/ObjectivesSection.tsx b/src/panels/builder/ObjectivesSection.tsx
new file mode 100644
index 0000000..c0fde63
--- /dev/null
+++ b/src/panels/builder/ObjectivesSection.tsx
@@ -0,0 +1,33 @@
+import { useTheme } from '../../theme';
+import { useConsoleStore } from '../../store/consoleStore';
+import { TextArea } from '../../components/ds/TextArea';
+import { Plus, PencilLine } from 'lucide-react';
+import type { ConstraintModalConfig } from './ConstraintsSection';
+
+export function ObjectivesSection({ onOpenModal }: { onOpenModal: (config: ConstraintModalConfig) => void }) {
+  const t = useTheme();
+  const { objectives } = useConsoleStore(s => s.instructionState);
+  const updateInstruction = useConsoleStore(s => s.updateInstruction);
+  return (
+    <div className="px-5 py-4 flex flex-col gap-4">
+      <TextArea label="Primary Objective" value={objectives.primary}
+        onChange={e => updateInstruction({ objectives: { ...objectives, primary: e.target.value } })}
+        placeholder="What is this agent's main goal?" style={{ minHeight: 40 }} />
+      <div>
+        <span className="text-[13px] font-semibold block mb-1.5" style={{ color: 'var(--m-text-muted)', fontFamily: 'var(--m-font-mono)' }}>Success Criteria</span>
+        {objectives.successCriteria.map((c: string, i: number) => (
+          <div key={i} className="flex items-center gap-2 px-3 py-2 rounded-lg mb-1.5" style={{ background: t.isDark ? 'oklch(0.18 0.02 150)' : 'oklch(0.97 0.01 150)', border: '1px solid oklch(0.72 0.19 155 / 0.25)' }}>
+            <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--m-success)', flexShrink: 0 }} />
+            <span className="flex-1 text-[13px]" style={{ color: 'var(--m-text-primary)', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c}</span>
+            <button type="button" onClick={() => onOpenModal({ mode: 'criteria', index: i, title: 'Edit Success Criterion', initial: c })}
+              className="border-none bg-transparent cursor-pointer p-1 rounded" style={{ color: 'var(--m-text-dim)' }} aria-label="Edit criterion"><PencilLine size={11} /></button>
+          </div>
+        ))}
+        <button type="button" onClick={() => onOpenModal({ mode: 'criteria', title: 'Add Success Criterion' })}
+          className="flex items-center gap-1 text-[12px] cursor-pointer border-none bg-transparent mt-1.5" style={{ color: 'var(--m-text-dim)' }}>
+          <Plus size={10} /> Add criterion
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/panels/builder/PersonaSection.tsx b/src/panels/builder/PersonaSection.tsx
new file mode 100644
index 0000000..88cfe3e
--- /dev/null
+++ b/src/panels/builder/PersonaSection.tsx
@@ -0,0 +1,44 @@
+import { useTheme } from '../../theme';
+import { useConsoleStore } from '../../store/consoleStore';
+import { TextArea } from '../../components/ds/TextArea';
+
+export function PersonaSection() {
+  const t = useTheme();
+  const instructionState = useConsoleStore(s => s.instructionState);
+  const updateInstruction = useConsoleStore(s => s.updateInstruction);
+  const { persona, tone, expertise } = instructionState;
+
+  return (
+    <div className="px-5 py-4 flex flex-col gap-4">
+      <TextArea label="Who is this agent?" value={persona}
+        onChange={e => updateInstruction({ persona: e.target.value })}
+        placeholder="Describe the agent's role, expertise, and personality..." style={{ minHeight: 64 }} />
+      <div className="grid grid-cols-2 gap-4">
+        <div className="flex flex-col gap-1.5">
+          <span className="text-[13px] font-semibold" style={{ color: 'var(--m-text-muted)', fontFamily: 'var(--m-font-mono)' }}>Tone</span>
+          <div className="flex rounded-md overflow-hidden" style={{ border: '1px solid var(--m-border)' }}>
+            {(['formal', 'neutral', 'casual'] as const).map(opt => (
+              <button key={opt} type="button" onClick={() => updateInstruction({ tone: opt })}
+                className="flex-1 text-center text-[13px] py-1.5 cursor-pointer border-none"
+                style={{ background: tone === opt ? 'var(--m-accent)' : 'transparent', color: tone === opt ? '#fff' : 'var(--m-text-dim)', transition: 'all 150ms' }}>
+                {opt.charAt(0).toUpperCase() + opt.slice(1)}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <span className="text-[13px] font-semibold" style={{ color: 'var(--m-text-muted)', fontFamily: 'var(--m-font-mono)' }}>Expertise</span>
+          <div className="flex rounded-md overflow-hidden" style={{ border: '1px solid var(--m-border)' }}>
+            {([{ l: 'Junior', v: 1 }, { l: 'Mid', v: 3 }, { l: 'Senior', v: 5 }] as const).map(opt => (
+              <button key={opt.v} type="button" onClick={() => updateInstruction({ expertise: opt.v })}
+                className="flex-1 text-center text-[13px] py-1.5 cursor-pointer border-none"
+                style={{ background: expertise === opt.v ? 'var(--m-accent)' : 'transparent', color: expertise === opt.v ? '#fff' : 'var(--m-text-dim)', transition: 'all 150ms' }}>
+                {opt.l}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/panels/builder/SectionHeader.tsx b/src/panels/builder/SectionHeader.tsx
new file mode 100644
index 0000000..6169cec
--- /dev/null
+++ b/src/panels/builder/SectionHeader.tsx
@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { useTheme } from '../../theme';
+import { ChevronDown, ChevronRight, Sparkles, Loader2 } from 'lucide-react';
+
+interface SectionHeaderProps {
+  label: string;
+  color: string;
+  collapsed: boolean;
+  onToggle: () => void;
+  right?: ReactNode;
+}
+
+export function SectionHeader({ label, color, collapsed, onToggle, right }: SectionHeaderProps) {
+  const t = useTheme();
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '14px 20px',
+      userSelect: 'none', borderTop: '1px solid var(--m-border-subtle)', background: `color-mix(in oklch, ${color} 5%, transparent)`,
+    }}>
+      <button type="button" onClick={onToggle} aria-expanded={!collapsed}
+        style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, cursor: 'pointer', border: 'none', background: 'transparent', padding: 0, textAlign: 'left' }}>
+        {collapsed ? <ChevronRight size={12} style={{ color: 'var(--m-text-dim)' }} /> : <ChevronDown size={12} style={{ color: 'var(--m-text-dim)' }} />}
+        <div style={{ width: 3, height: 14, borderRadius: 2, background: color, opacity: 0.8 }} />
+        <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', fontFamily: 'var(--m-font-mono)', color: 'var(--m-text-primary)' }}>{label}</span>
+      </button>
+      {right}
+    </div>
+  );
+}
+
+export function GenerateBtn({ loading, onClick }: { loading: boolean; onClick: () => void }) {
+  return (
+    <button type="button" onClick={e => { e.stopPropagation(); onClick(); }} disabled={loading}
+      style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, padding: '4px 8px', borderRadius: 4, cursor: 'pointer', border: 'none', background: 'var(--m-accent-bg)', color: 'var(--m-accent)', fontFamily: 'var(--m-font-mono)' }}>
+      {loading ? <Loader2 size={9} style={{ animation: 'spin 1s linear infinite' }} /> : <Sparkles size={9} />}
+      Generate
+    </button>
+  );
+}
diff --git a/src/panels/builder/WorkflowCard.tsx b/src/panels/builder/WorkflowCard.tsx
new file mode 100644
index 0000000..c1f6f5e
--- /dev/null
+++ b/src/panels/builder/WorkflowCard.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { useTheme } from '../../theme';
+import { useConsoleStore } from '../../store/consoleStore';
+import { WorkflowModal } from '../../components/WorkflowModal';
+import { Plus } from 'lucide-react';
+
+export function WorkflowCard() {
+  const t = useTheme();
+  const workflowSteps = useConsoleStore(s => s.workflowSteps);
+  const [workflowModalOpen, setWorkflowModalOpen] = useState(false);
+
+  return (
+    <>
+      <div className="rounded-xl overflow-hidden" style={{
+        background: t.surfaceOpaque,
+        border: `1px solid ${t.border}`,
+        boxShadow: `0 2px 12px ${t.isDark ? 'oklch(0 0 0 / 0.3)' : 'oklch(0 0 0 / 0.06)'}`,
+      }}>
+        <div className="flex items-center gap-2.5 px-5 py-3.5 select-none" style={{ background: t.surfaceElevated }}>
+          <div style={{ width: 3, height: 14, borderRadius: 2, background: 'var(--m-intel)', opacity: 0.8 }} />
+          <span className="text-[13px] font-bold tracking-[0.08em] uppercase flex-1" style={{ fontFamily: 'var(--m-font-mono)', color: t.textPrimary }}>
+            Workflow
+          </span>
+          <span className="text-[13px]" style={{ fontFamily: 'var(--m-font-mono)', color: t.textDim }}>
+            {workflowSteps.length} steps
+          </span>
+        </div>
+
+        <div className="px-5 py-4 flex flex-col items-center">
+          {workflowSteps.length === 0 ? (
+            <button
+              type="button"
+              onClick={() => setWorkflowModalOpen(true)}
+              className="flex items-center justify-center gap-1.5 text-[13px] px-4 py-2.5 rounded-lg cursor-pointer border-none"
+              style={{ background: 'oklch(0.68 0.16 60 / 0.08)', color: 'var(--m-intel)', fontFamily: 'var(--m-font-mono)', fontWeight: 600 }}
+            >
+              <Plus size={12} /> Define workflow steps
+            </button>
+          ) : (
+            <>
+              {workflowSteps.map((step, i) => (
+                <div key={step.id} className="w-full">
+                  <div className="flex items-center gap-3 py-2">
+                    <div style={{
+                      width: 24, height: 24, borderRadius: '50%',
+                      background: t.surfaceElevated,
+                      border: '1.5px solid oklch(0.68 0.16 60 / 0.19)',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    }}>
+                      <span style={{ fontFamily: 'var(--m-font-mono)', fontSize: 13, fontWeight: 700, color: 'var(--m-intel)' }}>
+                        {i + 1}
+                      </span>
+                    </div>
+                    <span style={{ flex: 1, fontSize: 14, color: t.textPrimary }}>{step.label || 'Unnamed step'}</span>
+                    <span className="text-[12px] px-2 py-0.5 rounded" style={{
+                      background: t.badgeBg, color: t.textDim, fontFamily: 'var(--m-font-mono)',
+                    }}>
+                      {step.action || 'action'}
+                    </span>
+                  </div>
+                  {i < workflowSteps.length - 1 && (
+                    <div style={{ width: 2, height: 12, background: 'oklch(0.68 0.16 60 / 0.12)', marginLeft: 11 }} />
+                  )}
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() => setWorkflowModalOpen(true)}
+                className="text-[12px] px-3 py-2 mt-3 rounded cursor-pointer border-none"
+                style={{ background: t.border, color: t.textDim }}
+              >
+                Edit workflow
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <WorkflowModal open={workflowModalOpen} onClose={() => setWorkflowModalOpen(false)} />
+    </>
+  );
+}
diff --git a/src/store/themeStore.ts b/src/store/themeStore.ts
index 0f21166..a546071 100644
--- a/src/store/themeStore.ts
+++ b/src/store/themeStore.ts
@@ -11,11 +11,19 @@ const stored = typeof localStorage !== 'undefined'
   ? (localStorage.getItem('modular-theme') as Theme | null)
   : null;
 
+const initial: Theme = stored === 'light' ? 'light' : 'dark';
+
+// Set data-theme on initial load
+if (typeof document !== 'undefined') {
+  document.documentElement.setAttribute('data-theme', initial);
+}
+
 export const useThemeStore = create<ThemeState>((set, get) => ({
-  theme: stored === 'light' ? 'light' : 'dark',
+  theme: initial,
   toggleTheme: () => {
     const next = get().theme === 'dark' ? 'light' : 'dark';
     localStorage.setItem('modular-theme', next);
+    document.documentElement.setAttribute('data-theme', next);
     set({ theme: next });
   },
 }));
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 4dc3da8..19a65e7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,26 +1,48 @@
+@import "./tokens.css";
 @import "tailwindcss";
 
+/* ═══════════════════════════════════════════════════════════
+   Tailwind Theme Integration
+   Maps --m-* design tokens → Tailwind --color-* utilities
+   ═══════════════════════════════════════════════════════════ */
 @theme {
-  --color-bg: #111114;
-  --color-surface: #1c1c20;
-  --color-surface-elevated: #25252a;
-  --color-border: #2a2a30;
-  --color-accent: #FE5000;
-  --color-accent-dim: #CC4000;
-  --color-text-primary: #f0f0f0;
-  --color-text-secondary: #888;
-  --color-text-muted: #555;
-  --color-led-green: #00ff88;
-  --color-led-red: #ff3344;
-  --color-led-amber: #ffaa00;
-  --color-knowledge: #3498db;
-  --color-discovery: #2ecc71;
-  --color-intel: #e67e22;
-  --color-agents: #9b59b6;
-  --font-mono: 'Geist Mono', monospace;
-  --font-sans: 'Geist Sans', sans-serif;
-}
-
+  --color-bg: var(--m-bg);
+  --color-surface: var(--m-surface-opaque);
+  --color-surface-elevated: var(--m-surface-elevated);
+  --color-surface-hover: var(--m-surface-hover);
+  --color-border: var(--m-border);
+  --color-border-subtle: var(--m-border-subtle);
+  --color-accent: var(--m-accent);
+  --color-accent-hover: var(--m-accent-hover);
+  --color-accent-glow: var(--m-accent-glow);
+  --color-accent-bg: var(--m-accent-bg);
+  --color-text-primary: var(--m-text-primary);
+  --color-text-secondary: var(--m-text-secondary);
+  --color-text-muted: var(--m-text-muted);
+  --color-text-dim: var(--m-text-dim);
+  --color-text-faint: var(--m-text-faint);
+  --color-success: var(--m-success);
+  --color-success-bg: var(--m-success-bg);
+  --color-error: var(--m-error);
+  --color-error-bg: var(--m-error-bg);
+  --color-warning: var(--m-warning);
+  --color-warning-bg: var(--m-warning-bg);
+  --color-info: var(--m-info);
+  --color-info-bg: var(--m-info-bg);
+  --color-knowledge: var(--m-knowledge);
+  --color-discovery: var(--m-discovery);
+  --color-intel: var(--m-intel);
+  --color-agents: var(--m-agents);
+  --color-input-bg: var(--m-input-bg);
+  --color-badge-bg: var(--m-badge-bg);
+  --color-overlay: var(--m-overlay);
+  --font-sans: var(--m-font-sans);
+  --font-mono: var(--m-font-mono);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Base Reset
+   ═══════════════════════════════════════════════════════════ */
 @layer base {
   * {
     margin: 0;
@@ -29,13 +51,13 @@
   }
 }
 
-/* A3 — Focus indicators */
+/* ── Focus indicators ── */
 :focus-visible {
-  outline: 2px solid var(--color-accent, #6366F1);
+  outline: 2px solid var(--m-accent);
   outline-offset: 2px;
 }
 
-/* Accessibility: aria-live region for canvas announcements */
+/* ── Screen-reader only ── */
 .sr-only {
   position: absolute;
   width: 1px;
@@ -48,32 +70,56 @@
   border-width: 0;
 }
 
+/* ═══════════════════════════════════════════════════════════
+   Root Layout
+   ═══════════════════════════════════════════════════════════ */
 html, body, #root {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: var(--color-bg);
-  font-family: var(--font-sans);
-  color: var(--color-text-primary);
+  background: var(--m-bg);
+  font-family: var(--m-font-sans);
+  color: var(--m-text-primary);
 }
 
-/* Scrollbar — base sizing (applies to both themes) */
-::-webkit-scrollbar { width: 6px; height: 6px; }
+/* ═══════════════════════════════════════════════════════════
+   Theme Transitions
+   Scoped to panels/modals — NOT applied to all elements.
+   Add .theme-transition to elements that should animate
+   on theme change.
+   ═══════════════════════════════════════════════════════════ */
+.theme-transition {
+  transition: background-color var(--m-t-base), color var(--m-t-base), border-color var(--m-t-base);
+}
 
-/* Scrollbar — dark theme (default) */
-.dark ::-webkit-scrollbar-track,
-[data-theme="dark"] ::-webkit-scrollbar-track { background: #111114; }
-.dark ::-webkit-scrollbar-thumb,
-[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 3px; }
-.dark ::-webkit-scrollbar-thumb:hover,
-[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3a40; }
+/* ═══════════════════════════════════════════════════════════
+   Scrollbars
+   ═══════════════════════════════════════════════════════════ */
 
-/* Scrollbar — light theme */
-[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f1f3; }
-[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccccd4; border-radius: 3px; }
-[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aaaaB0; }
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--m-scrollbar-thumb) var(--m-scrollbar-track);
+}
 
-/* Remove default ReactFlow node background/border/shadow */
+/* WebKit (Chrome, Safari, Edge) — base sizing */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--m-scrollbar-track); }
+::-webkit-scrollbar-thumb { background: var(--m-scrollbar-thumb); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--m-scrollbar-thumb); filter: brightness(1.2); }
+
+/* Tab bar: hidden scrollbar */
+.tab-scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.tab-scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   React Flow — Node Reset
+   ═══════════════════════════════════════════════════════════ */
 .react-flow__node {
   background: transparent !important;
   border: none !important;
@@ -83,8 +129,8 @@ html, body, #root {
 
 /* ── React Flow Controls (zoom +/- and fit) ── */
 .react-flow__controls {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
-  border-radius: 8px !important;
+  box-shadow: var(--m-shadow-card) !important;
+  border-radius: var(--m-radius) !important;
   overflow: hidden !important;
 }
 .react-flow__controls-button {
@@ -93,14 +139,14 @@ html, body, #root {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  background: #1c1c20 !important;
+  background: var(--m-surface-opaque) !important;
   border: none !important;
-  border-bottom: 1px solid #2a2a30 !important;
-  color: #f0f0f0 !important;
-  fill: #f0f0f0 !important;
+  border-bottom: 1px solid var(--m-border) !important;
+  color: var(--m-text-primary) !important;
+  fill: var(--m-text-primary) !important;
 }
 .react-flow__controls-button:hover {
-  background: #25252a !important;
+  background: var(--m-surface-elevated) !important;
 }
 .react-flow__controls-button:last-child {
   border-bottom: none !important;
@@ -113,79 +159,42 @@ html, body, #root {
 
 /* ── React Flow Minimap ── */
 .react-flow__minimap {
-  background: #1c1c20 !important;
-  border: 1px solid #2a2a30 !important;
-  border-radius: 8px !important;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
+  background: var(--m-surface-opaque) !important;
+  border: 1px solid var(--m-border) !important;
+  border-radius: var(--m-radius) !important;
+  box-shadow: var(--m-shadow-card) !important;
 }
 .react-flow__minimap-mask {
-  fill: rgba(17,17,20,0.85) !important;
+  fill: var(--m-overlay) !important;
 }
 .react-flow__minimap-node {
-  fill: #3a3a42 !important;
-  stroke: #555 !important;
+  fill: var(--m-border) !important;
+  stroke: var(--m-text-muted) !important;
   stroke-width: 1 !important;
 }
 
-/* ── Light mode overrides ── */
-[data-theme="light"] .react-flow__controls-button {
-  background: #ffffff !important;
-  border-bottom-color: #dddde2 !important;
-  color: #1a1a20 !important;
-  fill: #1a1a20 !important;
-}
-[data-theme="light"] .react-flow__controls-button:hover {
-  background: #f0f0f5 !important;
-}
-[data-theme="light"] .react-flow__minimap {
-  background: #ffffff !important;
-  border-color: #ccccd4 !important;
-}
-[data-theme="light"] .react-flow__minimap-mask {
-  fill: rgba(240,241,243,0.85) !important;
-}
-[data-theme="light"] .react-flow__minimap-node {
-  fill: #ccccd4 !important;
-  stroke: #999 !important;
+/* ── Edge labels ── */
+.react-flow__edge-textwrapper .react-flow__edge-text {
+  fill: var(--m-text-secondary) !important;
 }
 
-/* ── Placeholder text contrast ── */
+/* ── Placeholder text ── */
 ::placeholder {
-  color: #666 !important;
+  color: var(--m-text-muted) !important;
   opacity: 1 !important;
 }
-[data-theme="light"] ::placeholder {
-  color: #888 !important;
-}
-
-/* ── Edge labels ── */
-.react-flow__edge-textwrapper .react-flow__edge-text {
-  fill: #888 !important;
-}
-[data-theme="light"] .react-flow__edge-textwrapper .react-flow__edge-text {
-  fill: #555 !important;
-}
 
-/* ── Import spinner animation ── */
+/* ═══════════════════════════════════════════════════════════
+   Animations
+   ═══════════════════════════════════════════════════════════ */
 @keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Tab bar horizontal scrolling without scrollbar */
-.tab-scrollbar-hidden {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* Internet Explorer and Edge */
-}
-.tab-scrollbar-hidden::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-/* Accessibility: respect reduced motion preference */
+/* ═══════════════════════════════════════════════════════════
+   Accessibility: Reduced Motion
+   ═══════════════════════════════════════════════════════════ */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
@@ -194,21 +203,18 @@ html, body, #root {
   }
 }
 
-/* ── Mobile responsiveness (< 768px) ── */
+/* ═══════════════════════════════════════════════════════════
+   Mobile Responsiveness (< 768px)
+   ═══════════════════════════════════════════════════════════ */
 @media (max-width: 767px) {
-  /* Wizard content: full-width, remove side padding */
   .wizard-content-inner {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
     max-width: 100% !important;
   }
-
-  /* Hide prev/next edge navigation arrows on mobile (use tabs instead) */
   .wizard-edge-nav {
     display: none !important;
   }
-
-  /* FAB moves closer to edge on mobile */
   .floating-run-btn {
     right: 12px !important;
     bottom: 72px !important;
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..739da61
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,135 @@
+/* ═══════════════════════════════════════════════════════════
+   MODULAR Design Tokens (OKLCH)
+   Single source of truth for both Studio and Crew
+   ═══════════════════════════════════════════════════════════ */
+
+:root {
+  /* ── Accent ── */
+  --m-accent: oklch(0.63 0.24 38);
+  --m-accent-hover: oklch(0.58 0.22 38);
+  --m-accent-glow: oklch(0.63 0.24 38 / 0.25);
+  --m-accent-bg: oklch(0.63 0.24 38 / 0.08);
+
+  /* ── Semantic status ── */
+  --m-success: oklch(0.72 0.19 155);
+  --m-success-bg: oklch(0.72 0.19 155 / 0.07);
+  --m-success-glow: oklch(0.72 0.19 155 / 0.5);
+  --m-error: oklch(0.60 0.25 20);
+  --m-error-bg: oklch(0.60 0.25 20 / 0.08);
+  --m-error-glow: oklch(0.60 0.25 20 / 0.5);
+  --m-warning: oklch(0.78 0.18 80);
+  --m-warning-bg: oklch(0.78 0.18 80 / 0.08);
+  --m-warning-glow: oklch(0.78 0.18 80 / 0.5);
+  --m-info: oklch(0.60 0.12 245);
+  --m-info-bg: oklch(0.60 0.12 245 / 0.08);
+
+  /* ── Semantic domains ── */
+  --m-knowledge: oklch(0.60 0.12 245);
+  --m-discovery: oklch(0.72 0.19 155);
+  --m-intel: oklch(0.68 0.16 60);
+  --m-agents: oklch(0.55 0.18 310);
+
+  /* ── Cable/port roles ── */
+  --m-cable-skills: oklch(0.80 0.18 90);
+  --m-cable-mcp: oklch(0.72 0.19 155);
+  --m-cable-knowledge: oklch(0.60 0.25 20);
+
+  /* ── Fact epistemic types ── */
+  --m-fact-observation: oklch(0.60 0.12 245);
+  --m-fact-inference: oklch(0.80 0.18 90);
+  --m-fact-decision: oklch(0.72 0.19 155);
+  --m-fact-hypothesis: oklch(0.55 0.18 310);
+  --m-fact-contract: oklch(0.63 0.24 38);
+
+  /* ── Sizing ── */
+  --m-radius-sm: 6px;
+  --m-radius: 8px;
+  --m-radius-lg: 12px;
+  --m-radius-xl: 16px;
+  --m-radius-full: 9999px;
+
+  /* ── Spacing ── */
+  --m-space-1: 4px;
+  --m-space-2: 8px;
+  --m-space-3: 12px;
+  --m-space-4: 16px;
+  --m-space-6: 24px;
+  --m-space-8: 32px;
+  --m-space-12: 48px;
+
+  /* ── Typography ── */
+  --m-font-sans: 'Geist', system-ui, -apple-system, sans-serif;
+  --m-font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
+  --m-text-xs: 11px;
+  --m-text-sm: 12px;
+  --m-text-base: 13px;
+  --m-text-md: 14px;
+  --m-text-lg: 16px;
+  --m-text-xl: 18px;
+  --m-text-2xl: 24px;
+  --m-text-3xl: 32px;
+
+  /* ── Layout ── */
+  --m-topbar-h: 48px;
+
+  /* ── Transitions ── */
+  --m-t-fast: 120ms ease;
+  --m-t-base: 150ms ease;
+  --m-t-slide: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Dark Theme (default) ── */
+[data-theme="dark"], :root {
+  --m-bg: oklch(0.15 0.005 280);
+  --m-surface: oklch(0.20 0.005 280 / 0.9);
+  --m-surface-opaque: oklch(0.20 0.005 280);
+  --m-surface-elevated: oklch(0.23 0.005 280);
+  --m-surface-hover: oklch(0.21 0.005 280);
+  --m-border: oklch(0.26 0.005 280);
+  --m-border-subtle: oklch(0.22 0.005 280);
+  --m-text-primary: oklch(0.95 0 0);
+  --m-text-secondary: oklch(0.65 0 0);
+  --m-text-muted: oklch(0.50 0 0);
+  --m-text-dim: oklch(0.42 0 0);
+  --m-text-faint: oklch(0.35 0 0);
+  --m-input-bg: oklch(0.16 0.005 280);
+  --m-badge-bg: oklch(0.23 0.005 280);
+  --m-dot-grid: oklch(0.22 0.005 280);
+  --m-scrollbar-track: oklch(0.18 0.005 280);
+  --m-scrollbar-thumb: oklch(0.30 0.005 280);
+  --m-shadow-card: 0 2px 8px oklch(0 0 0 / 0.3);
+  --m-overlay: oklch(0 0 0 / 0.5);
+  color-scheme: dark;
+}
+
+/* ── Light Theme ── */
+[data-theme="light"] {
+  --m-bg: oklch(0.95 0.005 260);
+  --m-surface: oklch(1.0 0 0 / 0.95);
+  --m-surface-opaque: oklch(1.0 0 0);
+  --m-surface-elevated: oklch(0.94 0.005 260);
+  --m-surface-hover: oklch(0.97 0.005 260);
+  --m-border: oklch(0.83 0.005 260);
+  --m-border-subtle: oklch(0.88 0.005 260);
+  --m-text-primary: oklch(0.18 0.01 280);
+  --m-text-secondary: oklch(0.35 0.01 280);
+  --m-text-muted: oklch(0.50 0.01 280);
+  --m-text-dim: oklch(0.55 0.01 280);
+  --m-text-faint: oklch(0.62 0.01 280);
+  --m-input-bg: oklch(0.97 0.005 260);
+  --m-badge-bg: oklch(0.91 0.005 260);
+  --m-dot-grid: oklch(0.85 0.005 260);
+  --m-scrollbar-track: oklch(0.93 0.005 260);
+  --m-scrollbar-thumb: oklch(0.78 0.005 260);
+  --m-shadow-card: 0 2px 8px oklch(0 0 0 / 0.08);
+  --m-overlay: oklch(0 0 0 / 0.18);
+  color-scheme: light;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}
diff --git a/src/theme.ts b/src/theme.ts
index 268b3c8..69631ef 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,139 +1,65 @@
 import { useThemeStore } from './store/themeStore';
 
-const dark = {
-  bg: '#111114',
-  surface: 'rgba(28, 28, 32, 0.9)',
-  surfaceOpaque: '#1c1c20',
-  surfaceElevated: '#25252a',
-  surfaceHover: '#1f1f24',
-  border: '#2a2a30',
-  borderSubtle: '#222226',
-  textPrimary: '#f0f0f0',
-  textSecondary: '#888',
-  textMuted: '#666',
-  textDim: '#555',
-  textFaint: '#444',
-  inputBg: '#141417',
-  badgeBg: '#25252a',
-  dotGrid: '#222228',
-  minimapBg: '#111114',
-  minimapMask: 'rgba(17,17,20,0.8)',
-  minimapNode: '#25252a',
-  controlsBg: '#1c1c20',
-  controlsBorder: '#2a2a30',
-  // Tile
-  tileActiveBg: '#25252a',
-  tileHoverBg: '#1f1f24',
-  tileBg: '#1c1c20',
-  tileBorderHover: '#3a3a40',
-  // Agent preview
-  agentBg: '#151210',
-  agentBorder: '#2d2720',
-  agentLabel: '#9a8e82',
-  agentMeta: '#6d6058',
-  agentArrow: '#6d6058',
-  agentLineNum: '#2d2720',
-  agentText: '#8a7e72',
-  // Token budget
-  tokenLabel: '#999',
-  tokenDivider: '#777',
-  tokenTrackBg: '#25252a',
-  // Jack port ring in light vs dark
-  jackRingBase: '#0a0a0a',
-  jackLabelOnRing: '#999',
-  jackLabelBeside: '#666',
-  // Cable shadow
-  cableShadow: 'rgba(0,0,0,0.4)',
-  cableHighlight: 'rgba(255,255,255,0.06)',
-  // Response
-  responseBg: 'rgba(28, 28, 32, 0.9)',
-  responseText: '#bbb',
-  // Status
-  statusSuccess: '#00ff88',
-  statusError: '#ff3344',
-  statusWarning: '#ffaa00',
-  statusInfo: '#3498db',
-  statusSuccessBg: 'rgba(0,255,136,0.07)',
-  statusErrorBg: 'rgba(255,51,68,0.08)',
-  statusWarningBg: 'rgba(255,170,0,0.08)',
-  statusSuccessGlow: '0 0 6px rgba(0,255,136,0.5)',
-  statusErrorGlow: '0 0 6px rgba(255,51,68,0.5)',
-  statusWarningGlow: '0 0 6px rgba(255,170,0,0.5)',
-  // Semantic cable/port colors (these are "role" colors, not status)
-  cableSkills: '#f1c40f',
-  cableMcp: '#2ecc71',
-  cableKnowledge: '#e74c3c',
-};
-
-const light = {
-  bg: '#f0f1f3',
-  surface: 'rgba(255,255,255,0.95)',
-  surfaceOpaque: '#ffffff',
-  surfaceElevated: '#eeeef2',
-  surfaceHover: '#f5f5f8',
-  border: '#ccccd4',
-  borderSubtle: '#dddde2',
-  textPrimary: '#1a1a20',
-  textSecondary: '#3a3a45',
-  textMuted: '#555560',
-  textDim: '#5c5c66',
-  textFaint: '#71717a',
-  inputBg: '#f5f5f8',
-  badgeBg: '#e5e5ea',
-  dotGrid: '#d0d0d8',
-  minimapBg: '#f0f1f3',
-  minimapMask: 'rgba(240,241,243,0.8)',
-  minimapNode: '#dddde2',
-  controlsBg: '#ffffff',
-  controlsBorder: '#ccccd4',
-  // Tile
-  tileActiveBg: '#e8e8ee',
-  tileHoverBg: '#f0f0f5',
-  tileBg: '#ffffff',
-  tileBorderHover: '#bbbbc4',
-  // Agent preview
-  agentBg: '#f8f8fa',
-  agentBorder: '#dddde2',
-  agentLabel: '#555560',
-  agentMeta: '#888890',
-  agentArrow: '#888890',
-  agentLineNum: '#ccccd4',
-  agentText: '#666670',
-  // Token budget
-  tokenLabel: '#555560',
-  tokenDivider: '#888890',
-  tokenTrackBg: '#dddde2',
-  // Jack port
-  jackRingBase: '#e8e8ee',
-  jackLabelOnRing: '#555',
-  jackLabelBeside: '#777',
-  // Cable shadow
-  cableShadow: 'rgba(0,0,0,0.12)',
-  cableHighlight: 'rgba(255,255,255,0.3)',
-  // Response
-  responseBg: 'rgba(255,255,255,0.95)',
-  responseText: '#444',
-  // Status
-  statusSuccess: '#16a34a',
-  statusError: '#dc2626',
-  statusWarning: '#ca8a04',
-  statusInfo: '#2563eb',
-  statusSuccessBg: 'rgba(22,163,74,0.08)',
-  statusErrorBg: 'rgba(220,38,38,0.08)',
-  statusWarningBg: 'rgba(202,138,4,0.08)',
-  statusSuccessGlow: '0 0 6px rgba(22,163,74,0.3)',
-  statusErrorGlow: '0 0 6px rgba(220,38,38,0.3)',
-  statusWarningGlow: '0 0 6px rgba(202,138,4,0.3)',
-  // Semantic cable/port colors
-  cableSkills: '#B45309',
-  cableMcp: '#16a34a',
-  cableKnowledge: '#dc2626',
-};
-
-export type ThemePalette = typeof dark;
+export type ThemePalette = { [key: string]: string; isDark: boolean };
 
 export function useTheme(): ThemePalette & { isDark: boolean } {
-  const theme = useThemeStore((s) => s.theme);
-  const palette = theme === 'dark' ? dark : light;
-  return { ...palette, isDark: theme === 'dark' };
+  const theme = useThemeStore(s => s.theme);
+  const isDark = theme === 'dark';
+  return {
+    isDark,
+    bg: 'var(--m-bg)',
+    surface: 'var(--m-surface)',
+    surfaceOpaque: 'var(--m-surface-opaque)',
+    surfaceElevated: 'var(--m-surface-elevated)',
+    surfaceHover: 'var(--m-surface-hover)',
+    border: 'var(--m-border)',
+    borderSubtle: 'var(--m-border-subtle)',
+    textPrimary: 'var(--m-text-primary)',
+    textSecondary: 'var(--m-text-secondary)',
+    textMuted: 'var(--m-text-muted)',
+    textDim: 'var(--m-text-dim)',
+    textFaint: 'var(--m-text-faint)',
+    inputBg: 'var(--m-input-bg)',
+    badgeBg: 'var(--m-badge-bg)',
+    dotGrid: 'var(--m-dot-grid)',
+    minimapBg: 'var(--m-bg)',
+    minimapMask: isDark ? 'oklch(0.15 0.005 280 / 0.8)' : 'oklch(0.95 0.005 260 / 0.8)',
+    minimapNode: 'var(--m-surface-elevated)',
+    controlsBg: 'var(--m-surface-opaque)',
+    controlsBorder: 'var(--m-border)',
+    tileActiveBg: 'var(--m-surface-elevated)',
+    tileHoverBg: 'var(--m-surface-hover)',
+    tileBg: 'var(--m-surface-opaque)',
+    tileBorderHover: isDark ? 'oklch(0.32 0.005 280)' : 'oklch(0.75 0.005 260)',
+    agentBg: isDark ? 'oklch(0.16 0.01 50)' : 'oklch(0.97 0.005 50)',
+    agentBorder: isDark ? 'oklch(0.24 0.01 50)' : 'oklch(0.88 0.005 50)',
+    agentLabel: isDark ? 'oklch(0.60 0.02 50)' : 'oklch(0.45 0.02 50)',
+    agentMeta: isDark ? 'oklch(0.48 0.02 50)' : 'oklch(0.55 0.02 50)',
+    agentArrow: isDark ? 'oklch(0.48 0.02 50)' : 'oklch(0.55 0.02 50)',
+    agentLineNum: isDark ? 'oklch(0.24 0.01 50)' : 'oklch(0.85 0.005 50)',
+    agentText: isDark ? 'oklch(0.55 0.02 50)' : 'oklch(0.50 0.02 50)',
+    tokenLabel: 'var(--m-text-muted)',
+    tokenDivider: 'var(--m-text-secondary)',
+    tokenTrackBg: 'var(--m-surface-elevated)',
+    jackRingBase: isDark ? 'oklch(0.10 0 0)' : 'oklch(0.92 0.005 260)',
+    jackLabelOnRing: 'var(--m-text-muted)',
+    jackLabelBeside: 'var(--m-text-dim)',
+    cableShadow: isDark ? 'oklch(0 0 0 / 0.4)' : 'oklch(0 0 0 / 0.12)',
+    cableHighlight: isDark ? 'oklch(1 0 0 / 0.06)' : 'oklch(1 0 0 / 0.3)',
+    responseBg: 'var(--m-surface)',
+    responseText: 'var(--m-text-secondary)',
+    statusSuccess: 'var(--m-success)',
+    statusError: 'var(--m-error)',
+    statusWarning: 'var(--m-warning)',
+    statusInfo: 'var(--m-info)',
+    statusSuccessBg: 'var(--m-success-bg)',
+    statusErrorBg: 'var(--m-error-bg)',
+    statusWarningBg: 'var(--m-warning-bg)',
+    statusSuccessGlow: 'var(--m-success-glow)',
+    statusErrorGlow: 'var(--m-error-glow)',
+    statusWarningGlow: 'var(--m-warning-glow)',
+    cableSkills: 'var(--m-cable-skills)',
+    cableMcp: 'var(--m-cable-mcp)',
+    cableKnowledge: 'var(--m-cable-knowledge)',
+  };
 }