open-agents-ai 0.187.456 → 0.187.458

package/dist/index.js

@@ -13007,8 +13007,8 @@ function deleteCustomToolDefinition(name10, scope, repoRoot) {
   const dir = scope === "project" && repoRoot ? projectToolsDir(repoRoot) : globalToolsDir();
   const filePath = join18(dir, `${name10}.json`);
   if (existsSync13(filePath)) {
-    const { unlinkSync: unlinkSync24 } = __require("node:fs");
-    unlinkSync24(filePath);
+    const { unlinkSync: unlinkSync25 } = __require("node:fs");
+    unlinkSync25(filePath);
     return true;
   }
   return false;
@@ -250314,8 +250314,8 @@ var init_browser_action = __esm({
               const afterDom = await apiCall("/dom", "GET");
               const afterTitle = (afterDom.dom || "").match(/<title[^>]*>([^<]*)<\/title>/i)?.[1] || "";
               try {
-                const { unlinkSync: unlinkSync24 } = await import("node:fs");
-                unlinkSync24(imagePath);
+                const { unlinkSync: unlinkSync25 } = await import("node:fs");
+                unlinkSync25(imagePath);
               } catch {
               }
               return {
@@ -523527,7 +523527,7 @@ ${result}`
             let resizedBase64 = null;
             try {
               const { execSync: execSync57 } = await import("node:child_process");
-              const { writeFileSync: writeFileSync56, readFileSync: readFileSync77, unlinkSync: unlinkSync24 } = await import("node:fs");
+              const { writeFileSync: writeFileSync56, readFileSync: readFileSync77, unlinkSync: unlinkSync25 } = await import("node:fs");
               const { join: join115 } = await import("node:path");
               const { tmpdir: tmpdir22 } = await import("node:os");
               const tmpIn = join115(tmpdir22(), `oa_img_in_${Date.now()}.png`);
@@ -523540,11 +523540,11 @@ ${result}`
               const resizedBuf = readFileSync77(tmpOut);
               resizedBase64 = `data:image/jpeg;base64,${resizedBuf.toString("base64")}`;
               try {
-                unlinkSync24(tmpIn);
+                unlinkSync25(tmpIn);
               } catch {
               }
               try {
-                unlinkSync24(tmpOut);
+                unlinkSync25(tmpOut);
               } catch {
               }
             } catch {
@@ -574787,66 +574787,137 @@ function getWebUI() {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Open Agents</title>
 <style>
+/* ─── Open WebUI-shaped design tokens (OWUI-1) ────────────────────
+ * Replaces ~80 hardcoded color literals with CSS custom properties.
+ * Palette matches openwebui's neutral grayscale + functional blue
+ * accent. Brand gold preserved as --color-brand for OA-only marks.
+ * Typography flips body to Inter (UI) + JetBrains Mono (code only),
+ * leaving the terminal aesthetic only where we explicitly opt in.
+ *
+ * Source: /tmp/openwebui-ref/src/tailwind.css @theme + parity audit
+ * at .aiwg/owui-parity.md.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+:root {
+  /* Surfaces — neutral grayscale, openwebui dark default */
+  --color-bg:           oklch(0.16 0 0);   /* gray-950, body background */
+  --color-bg-elevated:  oklch(0.20 0 0);   /* gray-900, panels + headers */
+  --color-bg-input:     oklch(0.27 0 0);   /* gray-850, inputs + chips + buttons */
+  --color-bg-hover:     oklch(0.32 0 0);   /* gray-800, hover surfaces */
+
+  /* Foregrounds */
+  --color-fg:           oklch(0.94 0 0);   /* primary text */
+  --color-fg-muted:     oklch(0.69 0 0);   /* secondary text — gray-500 */
+  --color-fg-subtle:    oklch(0.51 0 0);   /* tertiary — gray-600 */
+  --color-fg-faint:     oklch(0.42 0 0);   /* faint hints — gray-700 */
+
+  /* Borders */
+  --color-border:       oklch(0.27 0 0);   /* default — gray-850 */
+  --color-border-strong:oklch(0.32 0 0);   /* emphasized — gray-800 */
+
+  /* Functional accents (openwebui pattern: blue for actions, sparing) */
+  --color-accent:       #3b82f6;            /* blue-500 — primary actions */
+  --color-accent-hover: #60a5fa;            /* blue-400 */
+  --color-success:      #22c55e;            /* green-500 */
+  --color-warning:      #f59e0b;            /* amber-500 */
+  --color-error:        #ef4444;            /* red-500 */
+  --color-info:         #14b8a6;            /* teal-500 — checkin/info */
+
+  /* OA brand — kept narrow scope for OA-only marks (active tab strip,
+   * brand glyphs, status accents). NOT the dominant accent anymore. */
+  --color-brand:        #b2920a;
+  --color-brand-hover:  #d4ac0e;
+
+  /* Typography */
+  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
+
+  /* Radii */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;     /* openwebui's rounded-xl */
+  --radius-pill: 9999px;
+}
+
+/* Light theme — opt in via [data-theme=light] on html.
+ * Minimum-effort palette parity (OWUI-1 scope). Phase OWUI-3 polishes. */
+html[data-theme=light] {
+  --color-bg:           oklch(0.98 0 0);
+  --color-bg-elevated:  oklch(0.94 0 0);
+  --color-bg-input:     oklch(0.92 0 0);
+  --color-bg-hover:     oklch(0.85 0 0);
+  --color-fg:           oklch(0.16 0 0);
+  --color-fg-muted:     oklch(0.42 0 0);
+  --color-fg-subtle:    oklch(0.51 0 0);
+  --color-fg-faint:     oklch(0.69 0 0);
+  --color-border:       oklch(0.85 0 0);
+  --color-border-strong:oklch(0.77 0 0);
+}
+
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 /* ─── Cross-browser custom scrollbars ─────────────────────────────
- * Yellow (#b2920a) thumb, grey (#2a2a30) track. Applies to every
- * scrollable container in the app via the universal selector.
- * Firefox uses the standard scrollbar-* properties; WebKit/Blink
- * uses the ::-webkit-scrollbar pseudo-elements. Both render the
- * same brand colors.
+ * Token-driven so theme changes cascade. Subtle hover.
  */
 html {
   scrollbar-width: thin;
-  scrollbar-color: #b2920a #2a2a30;
+  scrollbar-color: var(--color-border-strong) var(--color-bg-elevated);
 }
 *::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 *::-webkit-scrollbar-track {
-  background: #2a2a30;
+  background: var(--color-bg-elevated);
   border-radius: 0;
 }
 *::-webkit-scrollbar-thumb {
-  background: #b2920a;
-  border-radius: 4px;
-  border: 2px solid #2a2a30;
+  background: var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  border: 2px solid var(--color-bg-elevated);
 }
 *::-webkit-scrollbar-thumb:hover {
-  background: #d4ac0e;
+  background: var(--color-fg-faint);
 }
 *::-webkit-scrollbar-corner {
-  background: #2a2a30;
+  background: var(--color-bg-elevated);
 }
 
 body {
-  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
-  background: #1a1a1e;
-  color: #b0b0b0;
+  font-family: var(--font-ui);
+  background: var(--color-bg);
+  color: var(--color-fg);
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
   scrollbar-width: thin;
-  scrollbar-color: #b2920a #2a2a30;
+  scrollbar-color: var(--color-border-strong) var(--color-bg-elevated);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Anywhere we explicitly want the terminal/code feel, opt in via .mono */
+.mono, code, pre, kbd, samp, tt {
+  font-family: var(--font-mono);
 }
 #header {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 16px;
-  background: #1e1e22;
-  border-bottom: 1px solid #2a2a30;
+  background: var(--color-bg-elevated);
+  border-bottom: 1px solid var(--color-bg-input);
   flex-shrink: 0;
 }
-#header .accent { color: #b2920a; font-weight: bold; font-size: 0.8rem; }
-#header .status { font-size: 0.7rem; color: #555; }
-#header .status.live { color: #b2920a; }
+#header .accent { color: var(--color-brand); font-weight: bold; font-size: 0.8rem; }
+#header .status { font-size: 0.7rem; color: var(--color-fg-faint); }
+#header .status.live { color: var(--color-brand); }
 #header select {
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
-  color: #b0b0b0;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
   padding: 4px 8px;
   border-radius: 3px;
   font-family: inherit;
@@ -574857,9 +574928,9 @@ body {
   text-overflow: ellipsis;
 }
 #header .key-btn {
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
-  color: #b2920a;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-brand);
   padding: 4px 10px;
   border-radius: 3px;
   font-family: inherit;
@@ -574867,7 +574938,7 @@ body {
   cursor: pointer;
   transition: background 0.15s;
 }
-#header .key-btn:hover { background: #3a3a42; }
+#header .key-btn:hover { background: var(--color-border); }
 #conversation {
   flex: 1;
   overflow-y: auto;
@@ -574877,20 +574948,20 @@ body {
   gap: 4px;
 }
 .msg { padding: 6px 0; font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
-.msg.user { color: #888; }
-.msg.user::before { content: '\\25B8 '; color: #555; }
-.msg.assistant { color: #b2920a; }
-.msg.assistant::before { content: '\\25B9 '; color: #b2920a; }
-.msg.system { color: #555; font-size: 0.7rem; }
+.msg.user { color: var(--color-fg-muted); }
+.msg.user::before { content: '\\25B8 '; color: var(--color-fg-faint); }
+.msg.assistant { color: var(--color-brand); }
+.msg.assistant::before { content: '\\25B9 '; color: var(--color-brand); }
+.msg.system { color: var(--color-fg-faint); font-size: 0.7rem; }
 .msg code {
-  background: #2a2a30;
+  background: var(--color-bg-input);
   padding: 1px 4px;
   border-radius: 2px;
   font-size: 0.78rem;
 }
 .msg pre {
-  background: #1e1e22;
-  border: 1px solid #2a2a30;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-bg-input);
   border-radius: 3px;
   padding: 8px 12px;
   margin: 6px 0;
@@ -574903,9 +574974,9 @@ body {
   position: absolute;
   top: 4px;
   right: 4px;
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
-  color: #b2920a;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-brand);
   padding: 2px 8px;
   border-radius: 2px;
   font-family: inherit;
@@ -574923,21 +574994,21 @@ body {
 .msg-actions button {
   background: none;
   border: none;
-  color: #555;
+  color: var(--color-fg-faint);
   font-family: inherit;
   font-size: 0.6rem;
   cursor: pointer;
   padding: 0;
 }
-.msg-actions button:hover { color: #b2920a; }
+.msg-actions button:hover { color: var(--color-brand); }
 #footer {
   display: flex;
   flex-direction: column;
   /* gap: 0 — was 4px, removed per user request to tighten footer */
   gap: 0;
   padding: 0;
-  background: #1e1e22;
-  border-top: 1px solid #2a2a30;
+  background: var(--color-bg-elevated);
+  border-top: 1px solid var(--color-bg-input);
   flex-shrink: 0;
   position: relative;
 }
@@ -574947,14 +575018,14 @@ body {
   gap: 6px;
   padding: 4px 16px;
   min-height: 20px;
-  background: #17171a;
-  border-bottom: 1px solid #2a2a30;
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-bg-input);
   overflow-x: auto;
   scrollbar-width: none;
 }
 #processes-row::-webkit-scrollbar { display: none; }
 #processes-row .proc-label {
-  color: #444;
+  color: var(--color-fg-faint);
   font-size: 0.55rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -574975,12 +575046,12 @@ body {
   gap: 6px 6px;              /* row gap + column gap once wrapping kicks in */
   padding: 4px 16px;
   min-height: 22px;
-  background: #17171a;
-  border-bottom: 1px solid #2a2a30;
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-bg-input);
   /* Wrap instead of horizontal scroll so all tasks are visible */
 }
 #tasks-row .tasks-label {
-  color: #444;
+  color: var(--color-fg-faint);
   font-size: 0.55rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -574993,8 +575064,8 @@ body {
   gap: 4px;
   padding: 2px 6px;
   border-radius: 3px;
-  background: #1e1e22;
-  border: 1px solid #2a2a30;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-bg-input);
   font-size: 0.62rem;
   white-space: nowrap;
   flex-shrink: 0;
@@ -575009,15 +575080,15 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-#tasks-row .task-item.pending     { color: #555; }
-#tasks-row .task-item.pending     .mark { color: #555; }
-#tasks-row .task-item.in_progress { color: #b2920a; border-color: #b2920a; box-shadow: 0 0 4px rgba(178,146,10,0.3); }
-#tasks-row .task-item.in_progress .mark { color: #b2920a; }
+#tasks-row .task-item.pending     { color: var(--color-fg-faint); }
+#tasks-row .task-item.pending     .mark { color: var(--color-fg-faint); }
+#tasks-row .task-item.in_progress { color: var(--color-brand); border-color: var(--color-brand); box-shadow: 0 0 4px rgba(178,146,10,0.3); }
+#tasks-row .task-item.in_progress .mark { color: var(--color-brand); }
 #tasks-row .task-item.completed   { color: #4a7a4a; }
 #tasks-row .task-item.completed   .mark { color: #5fa55f; }
 #tasks-row .task-item.completed   .label { text-decoration: line-through; opacity: 0.7; }
-#tasks-row .task-item.blocked     { color: #b25f5f; border-color: #5a2a2a; }
-#tasks-row .task-item.blocked     .mark { color: #b25f5f; }
+#tasks-row .task-item.blocked     { color: var(--color-error); border-color: var(--color-error); }
+#tasks-row .task-item.blocked     .mark { color: var(--color-error); }
 
 /* WO-TASK-02 — session topbar (chat sessions select + agent runs select).
    Sits above each panel's content; shares the processes-row dark strip
@@ -575028,22 +575099,22 @@ body {
   gap: 8px;
   padding: 4px 16px;
   min-height: 22px;
-  background: #17171a;
-  border-bottom: 1px solid #2a2a30;
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-bg-input);
   flex-shrink: 0;
   font-size: 0.62rem;
 }
 .session-topbar .topbar-label {
-  color: #444;
+  color: var(--color-fg-faint);
   font-size: 0.55rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   white-space: nowrap;
 }
 .session-topbar select {
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
-  color: #b0b0b0;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
   padding: 2px 8px;
   border-radius: 3px;
   font-family: inherit;
@@ -575052,9 +575123,9 @@ body {
   max-width: 280px;
 }
 .session-topbar button {
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
-  color: #b2920a;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-brand);
   padding: 2px 8px;
   border-radius: 3px;
   font-family: inherit;
@@ -575076,14 +575147,14 @@ body {
 }
 .proc-dot.fading { opacity: 0.3; }
 /* Dot colors by process type */
-.proc-dot.run     { background: #4ec94e; color: #4ec94e; }  /* agentic runs = green */
-.proc-dot.tool    { background: #b2920a; color: #b2920a; }  /* tool calls = gold */
+.proc-dot.run     { background: var(--color-success); color: var(--color-success); }  /* agentic runs = green */
+.proc-dot.tool    { background: var(--color-brand); color: var(--color-brand); }  /* tool calls = gold */
 .proc-dot.skill   { background: #c94ec9; color: #c94ec9; }  /* skills = magenta */
 .proc-dot.mcp     { background: #4ec9c9; color: #4ec9c9; }  /* mcp = cyan */
 .proc-dot.cron    { background: #c9944e; color: #c9944e; }  /* cron = orange */
 .proc-dot.memory  { background: #4e94c9; color: #4e94c9; }  /* memory = blue */
 .proc-dot.incident{ background: #c94e4e; color: #c94e4e; }  /* incidents = red */
-.proc-dot.other   { background: #888;   color: #888;   }
+.proc-dot.other   { background: var(--color-fg-muted);   color: var(--color-fg-muted);   }
 .proc-dot.running { box-shadow: 0 0 4px currentColor; animation: pulse 1.2s infinite; }
 @keyframes pulse {
   0%,100% { opacity: 1; }
@@ -575095,8 +575166,8 @@ body {
   left: 16px;
   right: 16px;
   margin-bottom: 6px;
-  background: #1e1e22;
-  border: 1px solid #b2920a;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-brand);
   border-radius: 4px;
   padding: 12px 16px;
   box-shadow: 0 -4px 20px rgba(0,0,0,0.6);
@@ -575108,7 +575179,7 @@ body {
 }
 #proc-popover.visible { display: block; }
 #proc-popover .popover-title {
-  color: #b2920a;
+  color: var(--color-brand);
   font-size: 0.75rem;
   font-weight: bold;
   display: flex;
@@ -575119,12 +575190,12 @@ body {
 #proc-popover .popover-close {
   background: none;
   border: none;
-  color: #666;
+  color: var(--color-fg-subtle);
   cursor: pointer;
   font-size: 1rem;
   padding: 0 4px;
 }
-#proc-popover .popover-close:hover { color: #b2920a; }
+#proc-popover .popover-close:hover { color: var(--color-brand); }
 #proc-popover .popover-row {
   display: flex;
   justify-content: space-between;
@@ -575132,26 +575203,26 @@ body {
   padding: 2px 0;
   color: #999;
 }
-#proc-popover .popover-row .k { color: #b2920a; min-width: 90px; }
-#proc-popover .popover-row .v { color: #b0b0b0; word-break: break-all; text-align: right; }
+#proc-popover .popover-row .k { color: var(--color-brand); min-width: 90px; }
+#proc-popover .popover-row .v { color: var(--color-fg); word-break: break-all; text-align: right; }
 #proc-popover .popover-actions {
   display: flex;
   gap: 8px;
   margin-top: 10px;
   padding-top: 8px;
-  border-top: 1px solid #2a2a30;
+  border-top: 1px solid var(--color-bg-input);
 }
 #proc-popover .popover-actions button {
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
-  color: #b2920a;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-brand);
   padding: 4px 10px;
   border-radius: 3px;
   font-family: inherit;
   font-size: 0.65rem;
   cursor: pointer;
 }
-#proc-popover .popover-actions button:hover { background: #3a3a42; }
+#proc-popover .popover-actions button:hover { background: var(--color-border); }
 #proc-popover .popover-actions .kill {
   border-color: #c94e4e;
   color: #c94e4e;
@@ -575164,15 +575235,15 @@ body {
   align-items: flex-end;
   gap: 10px;
   padding: 8px 16px 8px;
-  background: #1e1e22;
+  background: var(--color-bg-elevated);
 }
 #input-area {
   flex: 1;
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
   border-radius: 3px;
   padding: 8px 12px;
-  color: #b0b0b0;
+  color: var(--color-fg);
   font-family: inherit;
   font-size: 0.82rem;
   resize: none;
@@ -575181,11 +575252,11 @@ body {
   line-height: 1.4;
   outline: none;
 }
-#input-area:focus { border-color: #b2920a; }
+#input-area:focus { border-color: var(--color-brand); }
 #send-btn {
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
-  color: #b2920a;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-brand);
   padding: 10px 16px;
   border-radius: 3px;
   font-family: inherit;
@@ -575194,27 +575265,27 @@ body {
   transition: background 0.15s;
   flex-shrink: 0;
 }
-#send-btn:hover { background: #3a3a42; }
+#send-btn:hover { background: var(--color-border); }
 #send-btn:disabled { opacity: 0.3; cursor: default; }
 #system-prompt-toggle {
   font-size: 0.65rem;
-  color: #444;
+  color: var(--color-fg-faint);
   cursor: pointer;
   padding: 4px 0;
 }
-#system-prompt-toggle:hover { color: #b2920a; }
+#system-prompt-toggle:hover { color: var(--color-brand); }
 #system-prompt-area {
   display: none;
   padding: 0 16px 8px;
-  background: #1e1e22;
+  background: var(--color-bg-elevated);
 }
 #system-prompt-area textarea {
   width: 100%;
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
   border-radius: 3px;
   padding: 6px 10px;
-  color: #b0b0b0;
+  color: var(--color-fg);
   font-family: inherit;
   font-size: 0.7rem;
   resize: vertical;
@@ -575232,21 +575303,21 @@ body {
 }
 #key-modal.visible { display: flex; }
 #key-modal .modal {
-  background: #1e1e22;
-  border: 1px solid #2a2a30;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-bg-input);
   border-radius: 6px;
   padding: 20px;
   width: 360px;
   max-width: 90vw;
 }
-#key-modal .modal h3 { color: #b2920a; font-size: 0.8rem; margin-bottom: 12px; }
+#key-modal .modal h3 { color: var(--color-brand); font-size: 0.8rem; margin-bottom: 12px; }
 #key-modal .modal input {
   width: 100%;
-  background: #2a2a30;
-  border: 1px solid #3a3a42;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
   border-radius: 3px;
   padding: 8px 10px;
-  color: #b0b0b0;
+  color: var(--color-fg);
   font-family: inherit;
   font-size: 0.75rem;
   outline: none;
@@ -575260,9 +575331,9 @@ body {
   .tab { padding:6px 10px !important; font-size:0.6rem !important; }
 }
 #key-modal .modal button {
-  background: #2a2a30;
-  border: 1px solid #b2920a;
-  color: #b2920a;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-brand);
+  color: var(--color-brand);
   padding: 6px 16px;
   border-radius: 3px;
   font-family: inherit;
@@ -575270,14 +575341,812 @@ body {
   cursor: pointer;
   margin-right: 8px;
 }
+
+/* ════════════════════════════════════════════════════════════
+   OWUI-2: Sidebar layout chrome
+   Sidebar-led layout to match openwebui aesthetic.
+   #tabs becomes hidden (still in DOM for legacy switchTab JS).
+   ════════════════════════════════════════════════════════════ */
+body { display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
+#oa-shell { font-family: var(--font-ui); }
+#oa-main { font-family: inherit; }
+
+/* Hide the legacy top tabs — sidebar replaces them. */
+#tabs { display:none !important; }
+
+/* Sidebar nav buttons */
+.sb-nav {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--color-fg-muted);
+  padding: 7px 10px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  text-align: left;
+  width: 100%;
+  transition: background 0.12s, color 0.12s;
+}
+.sb-nav:hover { background: var(--color-bg-hover); color: var(--color-fg); }
+.sb-nav.active {
+  background: var(--color-bg-hover);
+  color: var(--color-fg);
+  border-color: var(--color-border-strong);
+}
+.sb-nav svg { flex-shrink: 0; }
+
+/* Sidebar chat row */
+.sb-chat {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-fg-muted);
+  font-size: 0.78rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sb-chat:hover { background: var(--color-bg-hover); color: var(--color-fg); }
+.sb-chat.active { background: var(--color-bg-input); color: var(--color-fg); }
+
+/* Resize handle hover affordance */
+#sidebar-resize:hover { background: var(--color-border-strong); }
+#sidebar-resize.dragging { background: var(--color-accent); }
+
+/* Collapsed state — only icons visible */
+#oa-sidebar[data-collapsed="true"] { width: 56px !important; }
+#oa-sidebar[data-collapsed="true"] .sb-label { display: none !important; }
+#oa-sidebar[data-collapsed="true"] #sidebar-search-row,
+#oa-sidebar[data-collapsed="true"] #sidebar-chats,
+#oa-sidebar[data-collapsed="true"] #sidebar-pinned-section { display: none !important; }
+#oa-sidebar[data-collapsed="true"] #sidebar-new-chat-row button { padding: 8px; justify-content: center; }
+#oa-sidebar[data-collapsed="true"] .sb-nav { justify-content: center; padding: 8px; }
+#oa-sidebar[data-collapsed="true"] #sidebar-footer { flex-direction: column; gap: 6px; padding: 8px 4px; }
+#oa-sidebar[data-collapsed="true"] #sidebar-status-text { display: none !important; }
+
+@media (max-width: 768px) {
+  #oa-sidebar { position:fixed; top:0; left:0; bottom:0; z-index:60; box-shadow:4px 0 20px rgba(0,0,0,0.5); }
+  #oa-sidebar[data-collapsed="true"] { transform: translateX(-100%); }
+}
+
+/* ════════════════════════════════════════════════════════════
+   OWUI-3: Chat surface — bubbles, streaming indicator,
+   per-message actions, code blocks, system-message chip,
+   tool-call card.
+   ════════════════════════════════════════════════════════════ */
+
+/* Wipe the legacy ::before triangle markers; we use avatars/bubbles. */
+.msg.user::before,
+.msg.assistant::before { content: none !important; }
+
+.msg {
+  position: relative;
+  font-family: var(--font-ui);
+  font-size: 0.88rem;
+  line-height: 1.55;
+  padding: 14px 0;
+  max-width: 100%;
+}
+.msg.user {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 0;
+  color: var(--color-fg);
+}
+.msg.user > * {
+  background: var(--color-bg-input);
+  color: var(--color-fg);
+  padding: 10px 14px;
+  border-radius: 18px;
+  max-width: 78%;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.msg.assistant {
+  display: block;
+  padding: 14px 0 10px 44px;
+  color: var(--color-fg);
+}
+.msg.assistant::before {
+  content: 'OA' !important;
+  position: absolute;
+  top: 14px;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--color-bg-input);
+  color: var(--color-brand);
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: 600;
+  font-family: var(--font-ui);
+  letter-spacing: 0.02em;
+}
+
+/* System messages collapse into a small centered chip */
+.msg.system {
+  display: flex;
+  justify-content: center;
+  padding: 6px 0;
+}
+.msg.system > * {
+  background: var(--color-bg-elevated);
+  color: var(--color-fg-muted);
+  border: 1px solid var(--color-border);
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  max-width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Streaming pulsing-dot indicator */
+.msg-streaming-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0 0;
+  color: var(--color-fg-muted);
+  font-size: 0.72rem;
+}
+.msg-streaming-indicator .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-brand);
+  animation: msg-pulse 1.2s ease-in-out infinite;
+}
+@keyframes msg-pulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.85); }
+  50%      { opacity: 1;    transform: scale(1.1); }
+}
+
+/* Per-message actions — visible on hover for assistant messages.
+   The .msg-actions container already exists, but its old style was
+   always-visible micro-buttons. We restyle to openwebui-shape. */
+.msg-actions {
+  display: flex !important;
+  gap: 4px;
+  margin-top: 8px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.msg.assistant:hover .msg-actions,
+.msg.assistant:focus-within .msg-actions { opacity: 1; }
+.msg-actions button {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--color-fg-muted);
+  font-family: var(--font-ui);
+  font-size: 0.68rem;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.msg-actions button:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-fg);
+  border-color: var(--color-border);
+}
+
+/* Code blocks — language label + copy button, prism-friendly */
+.msg pre {
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 28px 14px 12px;
+  margin: 8px 0;
+  overflow-x: auto;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  position: relative;
+  font-family: var(--font-mono);
+}
+.msg pre code {
+  background: transparent;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: inherit;
+  color: var(--color-fg);
+}
+.msg pre::before {
+  content: attr(data-lang);
+  position: absolute;
+  top: 6px;
+  left: 12px;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-fg-faint);
+  font-family: var(--font-ui);
+}
+.msg pre .copy-btn {
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-fg-muted);
+  font-family: var(--font-ui);
+  padding: 3px 8px;
+  font-size: 0.6rem;
+  border-radius: var(--radius-sm);
+  opacity: 0.6;
+}
+.msg pre:hover .copy-btn { opacity: 1; }
+
+/* Tool-call cards rendered inside an assistant message */
+.msg .tool-card {
+  display: block;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 8px 12px;
+  margin: 6px 0;
+  font-size: 0.74rem;
+  color: var(--color-fg-muted);
+  font-family: var(--font-mono);
+}
+.msg .tool-card summary {
+  cursor: pointer;
+  color: var(--color-fg);
+  font-family: var(--font-ui);
+  font-size: 0.74rem;
+  list-style: none;
+}
+.msg .tool-card summary::-webkit-details-marker { display: none; }
+.msg .tool-card summary::before {
+  content: '▸';
+  display: inline-block;
+  margin-right: 6px;
+  color: var(--color-fg-muted);
+  transition: transform 0.12s;
+}
+.msg .tool-card[open] summary::before { transform: rotate(90deg); }
+
+/* ════════════════════════════════════════════════════════════
+   OWUI-4: Input toolbar + slash palette + dropzone
+   ════════════════════════════════════════════════════════════ */
+#input-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px 4px;
+  background: var(--color-bg);
+  border-bottom: 1px solid transparent;
+  font-family: var(--font-ui);
+}
+#input-toolbar .ibtn {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--color-fg-muted);
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-ui);
+  font-size: 0.7rem;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+  height: 26px;
+  min-width: 26px;
+}
+#input-toolbar .ibtn:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-fg);
+  border-color: var(--color-border);
+}
+#input-toolbar .ibtn.active {
+  background: var(--color-bg-input);
+  color: var(--color-brand);
+  border-color: var(--color-brand);
+}
+#input-toolbar .ibtn-model {
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
+  font-family: var(--font-ui);
+  font-size: 0.7rem;
+  padding: 3px 6px;
+  border-radius: var(--radius-sm);
+  height: 26px;
+  max-width: 200px;
+  cursor: pointer;
+  outline: none;
+}
+
+/* Drag & drop visual on the input row */
+#input-row.dragover {
+  outline: 2px dashed var(--color-accent);
+  outline-offset: -4px;
+  background: var(--color-bg-elevated);
+}
+
+/* Attachment chips row */
+#attach-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px 14px 2px;
+  background: var(--color-bg);
+  font-family: var(--font-ui);
+}
+#attach-chips .chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  border-radius: 999px;
+  max-width: 220px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#attach-chips .chip .name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+}
+#attach-chips .chip .x {
+  cursor: pointer;
+  color: var(--color-fg-muted);
+  margin-left: 2px;
+  border: none;
+  background: transparent;
+  padding: 0 2px;
+  font-size: 0.85rem;
+  line-height: 1;
+}
+#attach-chips .chip .x:hover { color: var(--color-error); }
+
+/* Slash command palette */
+#slash-palette {
+  position: absolute;
+  bottom: 100%;
+  left: 14px;
+  right: 14px;
+  margin-bottom: 6px;
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  z-index: 30;
+  font-family: var(--font-ui);
+}
+#slash-palette .slash-row {
+  padding: 8px 12px;
+  font-size: 0.78rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--color-fg);
+  border-bottom: 1px solid var(--color-bg);
+}
+#slash-palette .slash-row:last-child { border-bottom: none; }
+#slash-palette .slash-row:hover,
+#slash-palette .slash-row.selected {
+  background: var(--color-bg-hover);
+}
+#slash-palette .slash-name {
+  font-family: var(--font-mono);
+  color: var(--color-brand);
+  font-size: 0.74rem;
+  flex-shrink: 0;
+}
+#slash-palette .slash-desc {
+  color: var(--color-fg-muted);
+  font-size: 0.7rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Make sure #footer is the slash palette anchor (relative). */
+#footer { position: relative; }
+
+/* Bigger textarea growth budget — was 120px (~6 lines), now 240px. */
+#input-area { max-height: 240px !important; }
+
+/* ════════════════════════════════════════════════════════════
+   OWUI-5: Modal scaffold — full-screen overlay with left-rail
+   tabs + content pane + footer.
+   ════════════════════════════════════════════════════════════ */
+.oa-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  font-family: var(--font-ui);
+}
+.oa-modal[style*="display:none"] { display: none !important; }
+.oa-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+}
+.oa-modal-window {
+  position: relative;
+  width: min(90vw, 920px);
+  height: min(86vh, 640px);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.oa-modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.oa-modal-header h3 {
+  margin: 0;
+  font-size: 0.98rem;
+  font-weight: 600;
+  color: var(--color-fg);
+  letter-spacing: -0.01em;
+}
+.oa-modal-close {
+  background: transparent;
+  border: none;
+  color: var(--color-fg-muted);
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+}
+.oa-modal-close:hover { background: var(--color-bg-hover); color: var(--color-fg); }
+.oa-modal-body {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  flex: 1;
+  min-height: 0;
+}
+.oa-modal-rail {
+  border-right: 1px solid var(--color-border);
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--color-bg-elevated);
+  overflow-y: auto;
+}
+.rail-tab {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--color-fg-muted);
+  text-align: left;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-family: var(--font-ui);
+  transition: background 0.12s, color 0.12s;
+}
+.rail-tab:hover { background: var(--color-bg-hover); color: var(--color-fg); }
+.rail-tab.active {
+  background: var(--color-bg-input);
+  color: var(--color-fg);
+  border-color: var(--color-border-strong);
+}
+.oa-modal-pane {
+  padding: 18px 22px;
+  overflow-y: auto;
+  color: var(--color-fg);
+  font-size: 0.82rem;
+}
+.oa-modal-pane h4 {
+  margin: 0 0 6px;
+  color: var(--color-fg);
+  font-size: 0.86rem;
+}
+.oa-modal-aside {
+  border-left: 1px solid var(--color-border);
+  background: var(--color-bg-elevated);
+  overflow-y: auto;
+}
+.settings-pane[hidden] { display: none !important; }
+.settings-pane.active { display: block; }
+.oa-modal-footer {
+  padding: 12px 20px;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  background: var(--color-bg-elevated);
+}
+.oa-btn-secondary {
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.oa-btn-secondary:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-strong);
+}
+
+/* Settings models list rows */
+#settings-models-list .row,
+#mm-list .row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.8rem;
+  margin: 2px 0;
+}
+#settings-models-list .row:hover,
+#mm-list .row:hover,
+#mm-list .row.selected {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border);
+}
+#settings-models-list .row.active {
+  border-color: var(--color-brand);
+  background: var(--color-bg-input);
+  color: var(--color-brand);
+}
+#settings-models-list .row .right,
+#mm-list .row .right {
+  font-size: 0.7rem;
+  color: var(--color-fg-faint);
+}
+
+/* ════════════════════════════════════════════════════════════
+   OWUI-6: Folders + chat-row layout + context menu
+   ════════════════════════════════════════════════════════════ */
+.sb-chat {
+  display: flex !important;
+  align-items: center;
+}
+.sb-chat-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sb-chat-menu,
+.sb-folder-menu {
+  background: transparent;
+  border: none;
+  color: var(--color-fg-faint);
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: 0.85rem;
+  opacity: 0;
+  transition: opacity 0.12s, background 0.12s, color 0.12s;
+}
+.sb-chat:hover .sb-chat-menu,
+.sb-folder-row:hover .sb-folder-menu { opacity: 1; }
+.sb-chat-menu:hover,
+.sb-folder-menu:hover { background: var(--color-bg-input); color: var(--color-fg); }
+
+.sb-folder-action {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--color-fg-faint);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.62rem;
+  font-family: var(--font-ui);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.sb-folder-action:hover { background: var(--color-bg-hover); color: var(--color-fg); border-color: var(--color-border); }
+
+.sb-folder { margin: 4px 0; }
+.sb-folder.drop-target {
+  outline: 1px dashed var(--color-accent);
+  border-radius: var(--radius-sm);
+}
+.sb-folder-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 6px;
+  cursor: pointer;
+  color: var(--color-fg-muted);
+  border-radius: var(--radius-sm);
+}
+.sb-folder-row:hover { background: var(--color-bg-hover); color: var(--color-fg); }
+.sb-folder-caret {
+  width: 10px;
+  display: inline-block;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--color-fg-muted);
+}
+.sb-folder-name { flex: 1; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sb-folder-count {
+  font-size: 0.6rem;
+  color: var(--color-fg-faint);
+  background: var(--color-bg-input);
+  padding: 1px 6px;
+  border-radius: 999px;
+}
+.sb-folder-body {
+  padding: 0 0 0 14px;
+  border-left: 1px solid var(--color-border);
+  margin-left: 8px;
+}
+.sb-folder-empty {
+  padding: 6px 8px;
+  color: var(--color-fg-faint);
+  font-size: 0.65rem;
+}
+
+/* Context menu shared by chat + folder row ⋮ */
+#sb-chat-menu .sb-menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  color: var(--color-fg);
+  padding: 7px 12px;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+#sb-chat-menu .sb-menu-item:hover { background: var(--color-bg-hover); }
+#sb-chat-menu .sb-menu-item.sub { padding-left: 22px; color: var(--color-fg-muted); font-size: 0.74rem; }
+#sb-chat-menu .sb-menu-item.danger { color: var(--color-error); }
+#sb-chat-menu .sb-menu-item.danger:hover { background: var(--color-bg-hover); color: var(--color-error); }
+#sb-chat-menu .sb-menu-sub {
+  padding: 6px 12px 2px;
+  color: var(--color-fg-faint);
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
 </style>
 </head>
 <body>
 
+<!-- ════════════════════════════════════════════════════════════════
+     OWUI-2: Open WebUI-shaped sidebar layout
+     ────────────────────────────────────────────────────────────────
+     Top-level structure: <aside id="oa-sidebar"> + <div id="oa-main">
+     Sidebar holds: brand + new-chat, search, recents (pinned + recent),
+     and a footer rail with tab links + settings/key buttons.
+     The existing tab-bar moves to be HIDDEN (kept in DOM so legacy JS
+     works); switchTab is driven by sidebar nav buttons instead.
+     Resize handle at the right edge updates $sidebarWidth.
+     ════════════════════════════════════════════════════════════════ -->
+<div id="oa-shell" style="display:flex;flex:1;overflow:hidden;height:100vh">
+
+<aside id="oa-sidebar" data-collapsed="false" style="width:260px;flex-shrink:0;background:var(--color-bg-elevated);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:relative;transition:width 0.18s ease">
+  <!-- Brand + collapse toggle -->
+  <div style="padding:14px 12px 8px;display:flex;align-items:center;gap:10px">
+    <button id="sidebar-toggle" onclick="toggleSidebar()" title="Toggle sidebar (Cmd/Ctrl+B)" style="background:transparent;border:none;color:var(--color-fg-muted);padding:4px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;width:28px;height:28px">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>
+    </button>
+    <span id="sidebar-brand" style="font-weight:600;font-size:0.92rem;color:var(--color-fg);letter-spacing:-0.01em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Open Agents</span>
+  </div>
+
+  <!-- New chat button -->
+  <div id="sidebar-new-chat-row" style="padding:0 12px 10px">
+    <button onclick="newChatSession(); switchTab('chat')" title="New chat (Cmd/Ctrl+Shift+O)" style="width:100%;background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:8px 12px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;gap:10px;font-size:0.82rem;font-weight:500;transition:background 0.12s">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
+      <span class="sb-label">New chat</span>
+    </button>
+  </div>
+
+  <!-- Search bar -->
+  <div id="sidebar-search-row" style="padding:0 12px 8px">
+    <div style="position:relative">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--color-fg-faint);pointer-events:none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input id="sidebar-search" placeholder="Search chats..." class="sb-label" oninput="filterSidebarChats(this.value)" style="width:100%;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-fg);padding:6px 10px 6px 32px;border-radius:var(--radius-md);font-family:var(--font-ui);font-size:0.78rem;outline:none">
+    </div>
+  </div>
+
+  <!-- Chats scroll region — pinned + folders + recent -->
+  <nav id="sidebar-chats" class="sb-label" style="flex:1;overflow-y:auto;padding:4px 8px 8px">
+    <div id="sidebar-pinned-section" style="display:none">
+      <div style="padding:8px 8px 4px;font-size:0.62rem;color:var(--color-fg-faint);text-transform:uppercase;letter-spacing:0.06em">Pinned</div>
+      <div id="sidebar-pinned-list"></div>
+    </div>
+    <div style="padding:8px 8px 4px;font-size:0.62rem;color:var(--color-fg-faint);text-transform:uppercase;letter-spacing:0.06em;display:flex;align-items:center;gap:6px">
+      <span style="flex:1">Chats</span>
+      <span id="sidebar-folder-tools"></span>
+    </div>
+    <div id="sidebar-recent-list">
+      <div style="padding:14px 8px;color:var(--color-fg-faint);font-size:0.7rem;text-align:center">No chats yet</div>
+    </div>
+  </nav>
+
+  <!-- Section nav (the legacy tabs migrated into the sidebar footer) -->
+  <div id="sidebar-nav" class="sb-label" style="border-top:1px solid var(--color-border);padding:8px;display:flex;flex-direction:column;gap:2px">
+    <button class="sb-nav" data-tab="chat"     onclick="switchTab('chat')"     title="Chat">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+      <span class="sb-label">Chat</span>
+    </button>
+    <button class="sb-nav" data-tab="agent"    onclick="switchTab('agent')"    title="Agent">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 7v10l8 5 8-5V7l-8-5z"/><path d="M12 22V12"/><path d="m4 7 8 5 8-5"/></svg>
+      <span class="sb-label">Agent</span>
+    </button>
+    <button class="sb-nav" data-tab="voice"    onclick="switchTab('voice')"    title="Voice">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+      <span class="sb-label">Voice</span>
+    </button>
+    <button class="sb-nav" data-tab="projects" onclick="switchTab('projects')" title="Projects">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+      <span class="sb-label">Projects</span>
+    </button>
+    <button class="sb-nav" data-tab="jobs"     onclick="switchTab('jobs')"     title="Dashboard">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
+      <span class="sb-label">Dashboard</span>
+    </button>
+    <button class="sb-nav" data-tab="activity" onclick="switchTab('activity')" title="Activity">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+      <span class="sb-label">Activity</span>
+    </button>
+    <button class="sb-nav" data-tab="config"   onclick="switchTab('config')"   title="Config">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      <span class="sb-label">Settings</span>
+    </button>
+  </div>
+
+  <!-- Sidebar footer — connection + key + update -->
+  <div id="sidebar-footer" class="sb-label" style="border-top:1px solid var(--color-border);padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:0.65rem;color:var(--color-fg-muted)">
+    <span id="sidebar-status-dot" style="width:8px;height:8px;border-radius:50%;background:var(--color-fg-faint);flex-shrink:0" title="Backend connection"></span>
+    <span id="sidebar-status-text" style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">connecting...</span>
+    <button id="sidebar-update-btn" onclick="doUpdate()" style="display:none;background:var(--color-warning);border:none;color:#000;padding:2px 6px;border-radius:var(--radius-sm);font-size:0.6rem;cursor:pointer;font-weight:600">update</button>
+    <button id="sidebar-key-btn" onclick="document.getElementById('key-modal').style.display='flex'" title="Set API key" style="background:transparent;border:1px solid var(--color-border);color:var(--color-fg-muted);padding:2px 6px;border-radius:var(--radius-sm);font-size:0.6rem;cursor:pointer">key</button>
+  </div>
+
+  <!-- Resize handle -->
+  <div id="sidebar-resize" title="Drag to resize sidebar" style="position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:10"></div>
+</aside>
+
+<!-- Main pane — wraps the existing header + tabs + panels.
+     We keep the existing #header / #tabs / panels structure intact so
+     legacy JS keeps working; the sidebar simply becomes the primary
+     navigation surface and the old tabs get visually de-emphasized
+     (still in DOM, hidden via display:none below — see #tabs override). -->
+<div id="oa-main" style="flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--color-bg)">
+
 <div id="header">
   <span class="accent">OA</span>
   <span class="status" id="status">connecting...</span>
-  <span id="update-btn" style="display:none;background:#3a2a10;border:1px solid #b2920a;color:#b2920a;padding:2px 8px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer" onclick="doUpdate()">update</span>
+  <span id="update-btn" style="display:none;background:#3a2a10;border:1px solid var(--color-brand);color:var(--color-brand);padding:2px 8px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer" onclick="doUpdate()">update</span>
   <select id="model-select"><option>loading...</option></select>
   <button class="key-btn" id="files-btn" onclick="toggleFilesForActiveTab()" title="Toggle workspace sidebar (chat or agent depending on active tab)">files</button>
   <button class="key-btn" id="sandbox-toggle" onclick="toggleSandbox()" title="Toggle Docker sandbox" style="opacity:0.5">sandbox: off</button>
@@ -575292,40 +576161,40 @@ body {
      together when wrapping: (1) tab buttons, (2) session selector,
      (3) sys metrics + token counter. On narrow viewports the sections
      flow onto multiple rows instead of overflowing the header. -->
-<div id="tabs" style="display:flex;flex-wrap:wrap;gap:0.25rem;background:#1e1e22;border-bottom:1px solid #2a2a30;padding:0 16px;flex-shrink:0">
+<div id="tabs" style="display:flex;flex-wrap:wrap;gap:0.25rem;background:var(--color-bg-elevated);border-bottom:1px solid var(--color-bg-input);padding:0 16px;flex-shrink:0">
   <!-- Section 1: tab buttons -->
   <div id="tabs-section-buttons" style="display:flex;gap:0;flex-shrink:0">
-    <button class="tab" onclick="switchTab('projects')" id="tab-projects" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">projects</button>
-    <button class="tab active" onclick="switchTab('chat')" id="tab-chat" style="background:none;border:none;border-bottom:2px solid #b2920a;color:#b2920a;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">chat</button>
-    <button class="tab" onclick="switchTab('agent')" id="tab-agent" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">agent</button>
-    <button class="tab" onclick="switchTab('jobs')" id="tab-jobs" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">dashboard</button>
-    <button class="tab" onclick="switchTab('config')" id="tab-config" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">config</button>
-    <button class="tab" onclick="switchTab('activity')" id="tab-activity" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">activity</button>
-    <button class="tab" onclick="switchTab('voice')" id="tab-voice" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">voice</button>
+    <button class="tab" onclick="switchTab('projects')" id="tab-projects" style="background:none;border:none;border-bottom:2px solid transparent;color:var(--color-fg-faint);padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">projects</button>
+    <button class="tab active" onclick="switchTab('chat')" id="tab-chat" style="background:none;border:none;border-bottom:2px solid var(--color-brand);color:var(--color-brand);padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">chat</button>
+    <button class="tab" onclick="switchTab('agent')" id="tab-agent" style="background:none;border:none;border-bottom:2px solid transparent;color:var(--color-fg-faint);padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">agent</button>
+    <button class="tab" onclick="switchTab('jobs')" id="tab-jobs" style="background:none;border:none;border-bottom:2px solid transparent;color:var(--color-fg-faint);padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">dashboard</button>
+    <button class="tab" onclick="switchTab('config')" id="tab-config" style="background:none;border:none;border-bottom:2px solid transparent;color:var(--color-fg-faint);padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">config</button>
+    <button class="tab" onclick="switchTab('activity')" id="tab-activity" style="background:none;border:none;border-bottom:2px solid transparent;color:var(--color-fg-faint);padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">activity</button>
+    <button class="tab" onclick="switchTab('voice')" id="tab-voice" style="background:none;border:none;border-bottom:2px solid transparent;color:var(--color-fg-faint);padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">voice</button>
   </div>
   <!-- Section 2: session dropdown (legacy slot — the per-tab dropdowns
        now live in #session-topbar above the active panel; this slot is
        kept hidden so existing JS that touches #session-select still works
        without forcing a switch). -->
   <div id="tabs-section-sessions" style="display:none;gap:6px;align-items:center;flex-shrink:0">
-    <select id="session-select" onchange="switchSession(this.value)" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:2px 6px;border-radius:3px;font-family:inherit;font-size:0.6rem;max-width:160px" title="Chat sessions">
+    <select id="session-select" onchange="switchSession(this.value)" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:2px 6px;border-radius:3px;font-family:inherit;font-size:0.6rem;max-width:160px" title="Chat sessions">
       <option value="">new session</option>
     </select>
   </div>
   <!-- Section 3: sys metrics + token counter -->
   <div id="tabs-section-metrics" style="display:flex;flex-flow:wrap;align-items:center;gap:10px;flex-shrink:0">
-    <span id="sys-metrics" style="font-size:0.6rem;color:#555;display:flex;flex-flow:column;justify-content:center"></span>
-    <span id="token-counter" style="font-size:0.6rem;color:#555;display:flex;flex-flow:column;justify-content:center;padding:0 6px">0 tokens</span>
+    <span id="sys-metrics" style="font-size:0.6rem;color:var(--color-fg-faint);display:flex;flex-flow:column;justify-content:center"></span>
+    <span id="token-counter" style="font-size:0.6rem;color:var(--color-fg-faint);display:flex;flex-flow:column;justify-content:center;padding:0 6px">0 tokens</span>
   </div>
 </div>
 <div id="chat-container" style="display:flex;flex:1;overflow:hidden">
-  <div id="workspace-sidebar" style="display:none;width:250px;background:#1e1e22;border-right:1px solid #2a2a30;overflow-y:auto;padding:8px;flex-shrink:0;font-size:0.7rem">
+  <div id="workspace-sidebar" style="display:none;width:250px;background:var(--color-bg-elevated);border-right:1px solid var(--color-bg-input);overflow-y:auto;padding:8px;flex-shrink:0;font-size:0.7rem">
     <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-      <span style="color:#b2920a;font-size:0.7rem;font-weight:bold">Workspace</span>
-      <button onclick="toggleWorkspace()" style="background:none;border:none;color:#555;cursor:pointer;font-size:0.8rem">x</button>
+      <span style="color:var(--color-brand);font-size:0.7rem;font-weight:bold">Workspace</span>
+      <button onclick="toggleWorkspace()" style="background:none;border:none;color:var(--color-fg-faint);cursor:pointer;font-size:0.8rem">x</button>
     </div>
-    <div id="workspace-cwd" style="color:#555;font-size:0.6rem;margin-bottom:8px;word-break:break-all"></div>
-    <div id="workspace-tree" style="color:#b0b0b0"></div>
+    <div id="workspace-cwd" style="color:var(--color-fg-faint);font-size:0.6rem;margin-bottom:8px;word-break:break-all"></div>
+    <div id="workspace-tree" style="color:var(--color-fg)"></div>
   </div>
   <!-- Vertical column: session topbar + checklist + conversation -->
   <div style="display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden">
@@ -575336,11 +576205,11 @@ body {
         <option value="">+ new session</option>
       </select>
       <button onclick="newChatSession()" title="Start a fresh chat session">new</button>
-      <button onclick="deleteChatSession()" title="Delete the current chat session" style="color:#b25f5f;border-color:#5a2a2a">del</button>
+      <button onclick="deleteChatSession()" title="Delete the current chat session" style="color:var(--color-error);border-color:var(--color-error)">del</button>
     </div>
     <!-- WO-TASK-02: Agent-emitted checklist (todos) — visible to user above conversation -->
-    <div id="todo-checklist" style="display:none;padding:8px 16px;background:#17171a;border-bottom:1px solid #2a2a30">
-      <div style="font-size:0.6rem;color:#b2920a;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px">Plan</div>
+    <div id="todo-checklist" style="display:none;padding:8px 16px;background:var(--color-bg);border-bottom:1px solid var(--color-bg-input)">
+      <div style="font-size:0.6rem;color:var(--color-brand);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px">Plan</div>
       <ul id="todo-list" style="list-style:none;margin:0;padding:0;font-size:0.78rem"></ul>
     </div>
     <div id="conversation" style="flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-height:0"></div>
@@ -575354,60 +576223,60 @@ body {
       <option value="">+ new run</option>
     </select>
     <button onclick="newAgentRun()" title="Start a fresh agent run">new</button>
-    <button onclick="deleteAgentRun()" title="Delete the current agent run" style="color:#b25f5f;border-color:#5a2a2a">del</button>
+    <button onclick="deleteAgentRun()" title="Delete the current agent run" style="color:var(--color-error);border-color:var(--color-error)">del</button>
     <button onclick="refreshAgentRunSelect()" title="Refresh the run list">⟳</button>
   </div>
   <!-- Body row: agent workspace sidebar (isolated from chat) | scrollable form -->
   <div style="display:flex;flex:1;overflow:hidden;min-height:0">
-    <div id="agent-workspace-sidebar" style="display:none;width:250px;background:#1e1e22;border-right:1px solid #2a2a30;overflow-y:auto;padding:8px;flex-shrink:0;font-size:0.7rem">
+    <div id="agent-workspace-sidebar" style="display:none;width:250px;background:var(--color-bg-elevated);border-right:1px solid var(--color-bg-input);overflow-y:auto;padding:8px;flex-shrink:0;font-size:0.7rem">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-        <span style="color:#b2920a;font-size:0.7rem;font-weight:bold">Agent Workspace</span>
-        <button onclick="toggleAgentWorkspace()" style="background:none;border:none;color:#555;cursor:pointer;font-size:0.8rem">x</button>
+        <span style="color:var(--color-brand);font-size:0.7rem;font-weight:bold">Agent Workspace</span>
+        <button onclick="toggleAgentWorkspace()" style="background:none;border:none;color:var(--color-fg-faint);cursor:pointer;font-size:0.8rem">x</button>
       </div>
-      <div id="agent-workspace-cwd" style="color:#555;font-size:0.6rem;margin-bottom:8px;word-break:break-all"></div>
-      <div id="agent-workspace-tree" style="color:#b0b0b0"></div>
+      <div id="agent-workspace-cwd" style="color:var(--color-fg-faint);font-size:0.6rem;margin-bottom:8px;word-break:break-all"></div>
+      <div id="agent-workspace-tree" style="color:var(--color-fg)"></div>
     </div>
     <div style="flex:1;overflow-y:auto;padding:12px 16px;min-height:0;min-width:0">
   <!-- Parameter form: all the dials for POST /v1/run -->
-  <div id="agent-params" style="background:#17171a;border:1px solid #2a2a30;border-radius:4px;padding:10px 12px;margin-bottom:10px;font-size:0.68rem">
-    <div style="color:#b2920a;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px">Task Parameters</div>
+  <div id="agent-params" style="background:var(--color-bg);border:1px solid var(--color-bg-input);border-radius:4px;padding:10px 12px;margin-bottom:10px;font-size:0.68rem">
+    <div style="color:var(--color-brand);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px">Task Parameters</div>
     <div style="display:grid;grid-template-columns:120px 1fr;gap:6px 12px;align-items:center">
-      <label style="color:#888">Working dir</label>
+      <label style="color:var(--color-fg-muted)">Working dir</label>
       <div style="display:flex;gap:4px;align-items:center">
-        <input id="agent-working-dir" placeholder="(daemon cwd)" style="flex:1;background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none">
-        <button onclick="syncFromWorkspace()" title="Use workspace selection" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">from ws</button>
-        <button onclick="document.getElementById('agent-working-dir').value=''" title="Clear" style="background:#2a2a30;border:1px solid #3a3a42;color:#666;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">×</button>
+        <input id="agent-working-dir" placeholder="(daemon cwd)" style="flex:1;background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:3px;padding:4px 8px;color:var(--color-fg);font-family:inherit;font-size:0.7rem;outline:none">
+        <button onclick="syncFromWorkspace()" title="Use workspace selection" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">from ws</button>
+        <button onclick="document.getElementById('agent-working-dir').value=''" title="Clear" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg-subtle);padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">×</button>
       </div>
 
-      <label style="color:#888">Model override</label>
-      <input id="agent-model-override" placeholder="(use global model)" style="background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none">
+      <label style="color:var(--color-fg-muted)">Model override</label>
+      <input id="agent-model-override" placeholder="(use global model)" style="background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:3px;padding:4px 8px;color:var(--color-fg);font-family:inherit;font-size:0.7rem;outline:none">
 
-      <label style="color:#888">Max turns</label>
-      <input id="agent-max-turns" type="number" min="1" max="200" placeholder="25" style="background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none;width:120px">
+      <label style="color:var(--color-fg-muted)">Max turns</label>
+      <input id="agent-max-turns" type="number" min="1" max="200" placeholder="25" style="background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:3px;padding:4px 8px;color:var(--color-fg);font-family:inherit;font-size:0.7rem;outline:none;width:120px">
 
-      <label style="color:#888">Timeout (s)</label>
-      <input id="agent-timeout-s" type="number" min="10" max="3600" placeholder="300" style="background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none;width:120px">
+      <label style="color:var(--color-fg-muted)">Timeout (s)</label>
+      <input id="agent-timeout-s" type="number" min="10" max="3600" placeholder="300" style="background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:3px;padding:4px 8px;color:var(--color-fg);font-family:inherit;font-size:0.7rem;outline:none;width:120px">
 
-      <label style="color:#888">Sandbox</label>
-      <select id="agent-sandbox" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem">
+      <label style="color:var(--color-fg-muted)">Sandbox</label>
+      <select id="agent-sandbox" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem">
         <option value="none">none (host process)</option>
         <option value="workspace">workspace (ephemeral dir)</option>
         <option value="container">container (docker)</option>
       </select>
 
-      <label style="color:#888">Stream events</label>
-      <div><input type="checkbox" id="agent-stream" checked style="accent-color:#b2920a"> <span style="color:#555;font-size:0.6rem">SSE with live tool calls</span></div>
+      <label style="color:var(--color-fg-muted)">Stream events</label>
+      <div><input type="checkbox" id="agent-stream" checked style="accent-color:var(--color-brand)"> <span style="color:var(--color-fg-faint);font-size:0.6rem">SSE with live tool calls</span></div>
 
-      <label style="color:#888">Isolate workspace</label>
-      <div><input type="checkbox" id="agent-isolate" style="accent-color:#b2920a"> <span style="color:#555;font-size:0.6rem">fresh temp dir per run</span></div>
+      <label style="color:var(--color-fg-muted)">Isolate workspace</label>
+      <div><input type="checkbox" id="agent-isolate" style="accent-color:var(--color-brand)"> <span style="color:var(--color-fg-faint);font-size:0.6rem">fresh temp dir per run</span></div>
     </div>
   </div>
 
-  <textarea id="agent-task" placeholder="Describe the task for the agent..." style="width:100%;min-height:80px;background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:8px 12px;color:#b0b0b0;font-family:inherit;font-size:0.82rem;resize:vertical;outline:none;margin-bottom:8px"></textarea>
+  <textarea id="agent-task" placeholder="Describe the task for the agent..." style="width:100%;min-height:80px;background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:3px;padding:8px 12px;color:var(--color-fg);font-family:inherit;font-size:0.82rem;resize:vertical;outline:none;margin-bottom:8px"></textarea>
   <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
-    <select id="agent-profile" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem"><option value="">no profile</option></select>
-    <button onclick="submitAgentTask()" id="agent-submit" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:6px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer">run task</button>
-    <button onclick="abortAgentTask()" id="agent-abort" style="display:none;background:#2a2a30;border:1px solid #ff4444;color:#ff4444;padding:6px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer">abort</button>
+    <select id="agent-profile" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem"><option value="">no profile</option></select>
+    <button onclick="submitAgentTask()" id="agent-submit" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:6px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer">run task</button>
+    <button onclick="abortAgentTask()" id="agent-abort" style="display:none;background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:6px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer">abort</button>
   </div>
   <div id="agent-events" style="font-size:0.78rem;line-height:1.5"></div>
     </div><!-- /scrollable agent body -->
@@ -575419,47 +576288,47 @@ body {
   <div id="dashboard-scheduled" style="margin-bottom:16px"></div>
   <div id="dashboard-services" style="margin-bottom:16px"></div>
   <div id="dashboard-usage" style="margin-bottom:16px"></div>
-  <h3 style="color:#b2920a;font-size:0.7rem;margin-bottom:8px">Job History</h3>
+  <h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Job History</h3>
   <div id="jobs-list" style="font-size:0.78rem"></div>
 </div>
 <div id="config-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
-  <h3 style="color:#b2920a;font-size:0.7rem;margin-bottom:12px">Server Configuration</h3>
+  <h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:12px">Server Configuration</h3>
   <div id="config-content" style="font-size:0.78rem"></div>
-  <h3 style="color:#b2920a;font-size:0.7rem;margin:16px 0 8px">Model</h3>
+  <h3 style="color:var(--color-brand);font-size:0.7rem;margin:16px 0 8px">Model</h3>
   <div style="display:flex;gap:8px;align-items:center">
-    <select id="config-model-select" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem;flex:1"></select>
-    <button onclick="switchModel()" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">switch</button>
+    <select id="config-model-select" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem;flex:1"></select>
+    <button onclick="switchModel()" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">switch</button>
   </div>
-  <h3 style="color:#b2920a;font-size:0.7rem;margin:16px 0 8px">Inference Provider</h3>
-  <div id="config-endpoint" style="font-size:0.78rem;color:#888;margin-bottom:8px"></div>
-  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px">
-    <input id="config-ep-url" placeholder="https://api.example.com/v1" style="flex:1;min-width:200px;background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none">
-    <input id="config-ep-key" placeholder="Bearer key (optional)" type="password" style="flex:1;min-width:150px;background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none">
-    <select id="config-ep-type" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem">
+  <h3 style="color:var(--color-brand);font-size:0.7rem;margin:16px 0 8px">Inference Provider</h3>
+  <div id="config-endpoint" style="font-size:0.78rem;color:var(--color-fg-muted);margin-bottom:8px"></div>
+  <form onsubmit="event.preventDefault(); switchEndpoint();" autocomplete="off" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px">
+    <input id="config-ep-url" placeholder="https://api.example.com/v1" autocomplete="off" style="flex:1;min-width:200px;background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:3px;padding:4px 8px;color:var(--color-fg);font-family:inherit;font-size:0.7rem;outline:none">
+    <input id="config-ep-key" placeholder="Bearer key (optional)" type="password" autocomplete="new-password" style="flex:1;min-width:150px;background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:3px;padding:4px 8px;color:var(--color-fg);font-family:inherit;font-size:0.7rem;outline:none">
+    <select id="config-ep-type" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem">
       <option value="ollama">ollama</option><option value="vllm">vllm</option><option value="openai">openai</option>
     </select>
-    <button onclick="switchEndpoint()" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">set</button>
-  </div>
-  <h3 style="color:#b2920a;font-size:0.7rem;margin:16px 0 8px">Profiles</h3>
+    <button type="submit" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">set</button>
+  </form>
+  <h3 style="color:var(--color-brand);font-size:0.7rem;margin:16px 0 8px">Profiles</h3>
   <div id="config-profiles" style="font-size:0.78rem"></div>
-  <h3 style="color:#b2920a;font-size:0.7rem;margin:16px 0 8px">Export Conversation</h3>
+  <h3 style="color:var(--color-brand);font-size:0.7rem;margin:16px 0 8px">Export Conversation</h3>
   <div style="display:flex;gap:8px">
-    <button onclick="exportChat('md')" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">markdown</button>
-    <button onclick="exportChat('json')" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">JSON</button>
+    <button onclick="exportChat('md')" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">markdown</button>
+    <button onclick="exportChat('json')" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:4px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">JSON</button>
   </div>
 </div>
 <div id="activity-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
-  <h3 style="color:#b2920a;font-size:0.7rem;margin-bottom:12px">Recent Activity (Audit Log)</h3>
+  <h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:12px">Recent Activity (Audit Log)</h3>
   <div id="activity-feed" style="font-size:0.72rem"></div>
 </div>
 <div id="projects-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
   <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
-    <h3 style="color:#b2920a;font-size:0.7rem;margin:0">Projects</h3>
-    <div style="font-size:0.65rem;color:#666">Every folder where you have run <code style="color:#b2920a">oa</code> is registered here. Click to switch workspace.</div>
+    <h3 style="color:var(--color-brand);font-size:0.7rem;margin:0">Projects</h3>
+    <div style="font-size:0.65rem;color:var(--color-fg-subtle)">Every folder where you have run <code style="color:var(--color-brand)">oa</code> is registered here. Click to switch workspace.</div>
   </div>
-  <div id="projects-current" style="background:#1a1a1e;border-left:2px solid #b2920a;padding:8px 12px;margin-bottom:12px;font-size:0.72rem;color:#b0b0b0">
-    <span style="color:#666">current:</span> <span id="projects-current-name" style="color:#b2920a">(none)</span>
-    <span id="projects-current-root" style="color:#666;margin-left:8px"></span>
+  <div id="projects-current" style="background:var(--color-bg);border-left:2px solid var(--color-brand);padding:8px 12px;margin-bottom:12px;font-size:0.72rem;color:var(--color-fg)">
+    <span style="color:var(--color-fg-subtle)">current:</span> <span id="projects-current-name" style="color:var(--color-brand)">(none)</span>
+    <span id="projects-current-root" style="color:var(--color-fg-subtle);margin-left:8px"></span>
   </div>
   <div id="projects-list" style="font-size:0.72rem"></div>
 </div>
@@ -575467,35 +576336,35 @@ body {
 <!-- Voice tab — voicechat toggle + clone management. AudioWorklet drives mic capture; WebAudio handles TTS playback. -->
 <div id="voice-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
   <div style="margin-bottom:18px">
-    <div style="color:#b2920a;font-size:0.85rem;margin-bottom:4px">voicechat</div>
-    <div style="font-size:0.65rem;color:#666;margin-bottom:8px">
+    <div style="color:var(--color-brand);font-size:0.85rem;margin-bottom:4px">voicechat</div>
+    <div style="font-size:0.65rem;color:var(--color-fg-subtle);margin-bottom:8px">
       Live mic ↔ ASR ↔ agent ↔ TTS over WebSocket. Audio routes over the same origin
       as this page — works on localhost or over a forwarded public IP. Mic permission
       is requested when you start a session.
     </div>
     <div style="display:flex;gap:10px;align-items:center;margin-bottom:8px">
-      <button id="voice-toggle-btn" onclick="toggleVoiceChat()" style="background:#2a2a30;border:1px solid #b2920a;color:#b2920a;padding:6px 16px;border-radius:3px;font-family:inherit;font-size:0.72rem;cursor:pointer">start voicechat</button>
-      <span id="voice-state-pill" style="background:#1a1a1e;border-left:2px solid #555;padding:4px 10px;font-size:0.65rem;color:#888">idle</span>
-      <span id="voice-mic-pill" style="display:none;background:#1a1a1e;border-left:2px solid #4ec94e;padding:4px 10px;font-size:0.6rem;color:#4ec94e">● mic active</span>
+      <button id="voice-toggle-btn" onclick="toggleVoiceChat()" style="background:var(--color-bg-input);border:1px solid var(--color-brand);color:var(--color-brand);padding:6px 16px;border-radius:3px;font-family:inherit;font-size:0.72rem;cursor:pointer">start voicechat</button>
+      <span id="voice-state-pill" style="background:var(--color-bg);border-left:2px solid var(--color-fg-faint);padding:4px 10px;font-size:0.65rem;color:var(--color-fg-muted)">idle</span>
+      <span id="voice-mic-pill" style="display:none;background:var(--color-bg);border-left:2px solid var(--color-success);padding:4px 10px;font-size:0.6rem;color:var(--color-success)">● mic active</span>
     </div>
-    <div id="voice-transcript-pane" style="display:none;background:#0e0e10;border:1px solid #2a2a30;border-radius:3px;padding:10px;margin-top:6px;min-height:80px;max-height:280px;overflow-y:auto;font-size:0.7rem"></div>
+    <div id="voice-transcript-pane" style="display:none;background:var(--color-bg);border:1px solid var(--color-bg-input);border-radius:3px;padding:10px;margin-top:6px;min-height:80px;max-height:280px;overflow-y:auto;font-size:0.7rem"></div>
   </div>
 
   <div style="margin-bottom:18px">
-    <div style="color:#b2920a;font-size:0.85rem;margin-bottom:4px">voice model</div>
+    <div style="color:var(--color-brand);font-size:0.85rem;margin-bottom:4px">voice model</div>
     <div style="display:flex;gap:8px;align-items:center">
-      <select id="voice-model-select" style="background:#1a1a1e;border:1px solid #3a3a42;color:#b0b0b0;padding:5px 10px;border-radius:3px;font-family:inherit;font-size:0.7rem;flex:1"></select>
-      <button onclick="switchVoiceModel()" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:5px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">switch</button>
+      <select id="voice-model-select" style="background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-fg);padding:5px 10px;border-radius:3px;font-family:inherit;font-size:0.7rem;flex:1"></select>
+      <button onclick="switchVoiceModel()" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:5px 12px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">switch</button>
     </div>
   </div>
 
   <div style="margin-bottom:18px">
     <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
-      <div style="color:#b2920a;font-size:0.85rem">voice clone references</div>
-      <button onclick="document.getElementById('clone-upload-input').click()" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">+ upload</button>
+      <div style="color:var(--color-brand);font-size:0.85rem">voice clone references</div>
+      <button onclick="document.getElementById('clone-upload-input').click()" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">+ upload</button>
       <input type="file" id="clone-upload-input" accept="audio/wav,audio/mp3,audio/mpeg,audio/ogg,audio/flac,audio/m4a,audio/aac,audio/opus,.wav,.mp3,.ogg,.flac,.m4a,.aac,.opus" style="display:none" onchange="uploadCloneRef(this.files)">
     </div>
-    <div style="font-size:0.6rem;color:#666;margin-bottom:8px">
+    <div style="font-size:0.6rem;color:var(--color-fg-subtle);margin-bottom:8px">
       LuxTTS clones a voice from a 3+ second reference clip. Upload a clean WAV/MP3 sample,
       then activate it. Active reference is used whenever the LuxTTS voice model is selected.
     </div>
@@ -575503,10 +576372,10 @@ body {
   </div>
 
   <div style="margin-bottom:18px">
-    <div style="color:#b2920a;font-size:0.85rem;margin-bottom:4px">say something (test TTS)</div>
+    <div style="color:var(--color-brand);font-size:0.85rem;margin-bottom:4px">say something (test TTS)</div>
     <div style="display:flex;gap:8px">
-      <input type="text" id="voice-test-text" placeholder="Type and the voice model speaks it..." style="flex:1;background:#1a1a1e;border:1px solid #3a3a42;color:#b0b0b0;padding:6px 10px;border-radius:3px;font-family:inherit;font-size:0.7rem">
-      <button onclick="testTTS()" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:5px 14px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">speak</button>
+      <input type="text" id="voice-test-text" placeholder="Type and the voice model speaks it..." style="flex:1;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-fg);padding:6px 10px;border-radius:3px;font-family:inherit;font-size:0.7rem">
+      <button onclick="testTTS()" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:5px 14px;border-radius:3px;font-family:inherit;font-size:0.7rem;cursor:pointer">speak</button>
     </div>
   </div>
 </div>
@@ -575518,11 +576387,11 @@ body {
   <!-- WO-CHAT-AUTOSCROLL — tiny tag that appears far-right just above
        the tasks-row when the user has scrolled up from live. Click
        jumps to bottom and re-enables auto-scroll. -->
-  <div id="scroll-bottom-tag" style="display:none;position:absolute;right:14px;top:-22px;background:#17171a;border:1px solid #b2920a;color:#b2920a;padding:2px 8px;border-radius:3px;font-size:0.6rem;cursor:pointer;z-index:5;line-height:1.4" onclick="scrollChatToBottom()">scroll to bottom &darr;</div>
+  <div id="scroll-bottom-tag" style="display:none;position:absolute;right:14px;top:-22px;background:var(--color-bg);border:1px solid var(--color-brand);color:var(--color-brand);padding:2px 8px;border-radius:3px;font-size:0.6rem;cursor:pointer;z-index:5;line-height:1.4" onclick="scrollChatToBottom()">scroll to bottom &darr;</div>
 
   <!-- WO-TASK-06: Compact aggregated pill label above the dots row.
        Hidden when no processes are active; click to toggle dots row visibility. -->
-  <div id="processes-pill" style="display:none;padding:4px 16px;background:#17171a;border-bottom:1px solid #2a2a30;color:#666;font-size:0.62rem;cursor:pointer" onclick="toggleProcessesRow()">
+  <div id="processes-pill" style="display:none;padding:4px 16px;background:var(--color-bg);border-bottom:1px solid var(--color-bg-input);color:var(--color-fg-subtle);font-size:0.62rem;cursor:pointer" onclick="toggleProcessesRow()">
     <span id="processes-pill-text">idle</span>
   </div>
 
@@ -575538,29 +576407,174 @@ body {
     <span class="proc-empty" id="proc-empty">idle</span>
   </div>
 
+  <!-- ════════════════════════════════════════════════════════════
+       OWUI-4: Input toolbar (above the textarea)
+       Buttons: file attach, mic toggle (uses /v1/voicechat/ws),
+       slash palette opener, model picker (compact), system-prompt
+       toggle. The legacy 'sys' toggle moves here too so #input-row
+       stays focused on text + send/stop only.
+       ════════════════════════════════════════════════════════════ -->
+  <div id="input-toolbar">
+    <button class="ibtn" id="attach-btn" title="Attach files" onclick="document.getElementById('attach-input').click()">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+    </button>
+    <input type="file" id="attach-input" multiple style="display:none" onchange="handleAttachInput(this.files); this.value=''">
+
+    <button class="ibtn" id="mic-btn" title="Toggle voicechat (Cmd/Ctrl+Shift+M)" onclick="toggleVoiceMicFromInput()">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+    </button>
+
+    <button class="ibtn" id="slash-btn" title="Slash commands (/)" onclick="openSlashPalette()">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="5" x2="5" y2="19"/></svg>
+    </button>
+
+    <button class="ibtn" id="sys-btn" title="Toggle system prompt" onclick="toggleSystemPrompt()">
+      sys
+    </button>
+
+    <span class="ibtn-spacer" style="flex:1"></span>
+
+    <select id="input-model-mini" class="ibtn-model" onchange="if(this.value){const m=document.getElementById('model-select');if(m){m.value=this.value;m.dispatchEvent(new Event('change'));}}" title="Model"></select>
+  </div>
+
+  <!-- Attachments chip row (populated by handleAttachInput) -->
+  <div id="attach-chips" style="display:none"></div>
+
+  <!-- Slash command palette (floating overlay anchored above the input) -->
+  <div id="slash-palette" style="display:none">
+    <div id="slash-palette-list"></div>
+  </div>
+
   <!-- Lower sub-row: existing input + send/stop -->
   <div id="input-row">
-    <span id="system-prompt-toggle" onclick="toggleSystemPrompt()">sys</span>
+    <span id="system-prompt-toggle" onclick="toggleSystemPrompt()" style="display:none">sys</span>
     <textarea id="input-area" placeholder="Type a message..." rows="1"></textarea>
     <button id="send-btn" onclick="sendMessage()">send</button>
-    <button id="stop-btn" onclick="stopChat()" style="display:none;background:#2a2a30;border:1px solid #ff4444;color:#ff4444;padding:10px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer;flex-shrink:0">stop</button>
+    <button id="stop-btn" onclick="stopChat()" style="display:none;background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:10px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer;flex-shrink:0">stop</button>
     <!-- WO-CHAT-CHECKIN — teal accent button that takes the place of stop
          when the user starts typing during an active run. Click sends a
          side-channel check-in to the triage sub-agent (route /v1/chat/check-in)
          which expands the input into a steering instruction the main agent
          picks up at its next turn. -->
-    <button id="checkin-btn" onclick="sendCheckin()" style="display:none;background:#0a2a2e;border:1px solid #2db4b4;color:#2db4b4;padding:10px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer;flex-shrink:0">check in</button>
+    <button id="checkin-btn" onclick="sendCheckin()" style="display:none;background:var(--color-info);border:1px solid var(--color-info);color:var(--color-info);padding:10px 16px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer;flex-shrink:0">check in</button>
   </div>
 </div>
 
 <div id="key-modal">
-  <div class="modal">
+  <form class="modal" onsubmit="event.preventDefault(); saveKey();" autocomplete="off">
     <h3>API Key</h3>
-    <input id="key-input" type="password" placeholder="Bearer token (leave empty if auth disabled)">
+    <input id="key-input" type="password" placeholder="Bearer token (leave empty if auth disabled)" autocomplete="new-password">
     <div>
-      <button onclick="saveKey()">save</button>
-      <button onclick="clearKey()">clear</button>
-      <button onclick="closeKeyModal()">cancel</button>
+      <button type="submit">save</button>
+      <button type="button" onclick="clearKey()">clear</button>
+      <button type="button" onclick="closeKeyModal()">cancel</button>
+    </div>
+  </form>
+</div>
+
+<!-- ════════════════════════════════════════════════════════════════
+     OWUI-5: Settings modal — full-screen overlay with left-rail
+     tabs + content pane + Save/Cancel footer.
+     ════════════════════════════════════════════════════════════════ -->
+<div id="settings-modal" class="oa-modal" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title" style="display:none">
+  <div class="oa-modal-backdrop" onclick="closeSettingsModal()"></div>
+  <div class="oa-modal-window" role="document">
+    <div class="oa-modal-header">
+      <h3 id="settings-modal-title">Settings</h3>
+      <button class="oa-modal-close" onclick="closeSettingsModal()" aria-label="Close">&times;</button>
+    </div>
+    <div class="oa-modal-body">
+      <nav class="oa-modal-rail" role="tablist">
+        <button class="rail-tab active" role="tab" data-pane="general"     onclick="openSettingsPane('general')">General</button>
+        <button class="rail-tab"        role="tab" data-pane="connections" onclick="openSettingsPane('connections')">Connections</button>
+        <button class="rail-tab"        role="tab" data-pane="models"      onclick="openSettingsPane('models')">Models</button>
+        <button class="rail-tab"        role="tab" data-pane="voice"       onclick="openSettingsPane('voice')">Voice</button>
+        <button class="rail-tab"        role="tab" data-pane="profiles"    onclick="openSettingsPane('profiles')">Profiles</button>
+        <button class="rail-tab"        role="tab" data-pane="advanced"    onclick="openSettingsPane('advanced')">Advanced</button>
+      </nav>
+      <div class="oa-modal-pane">
+        <section class="settings-pane active" id="settings-pane-general" role="tabpanel">
+          <h4>Theme</h4>
+          <label style="display:block;margin:8px 0;font-size:0.78rem">
+            <input type="radio" name="oa-theme" value="dark" checked onchange="setOATheme(this.value)"> Dark
+          </label>
+          <label style="display:block;margin:8px 0;font-size:0.78rem">
+            <input type="radio" name="oa-theme" value="light" onchange="setOATheme(this.value)"> Light
+          </label>
+          <h4 style="margin-top:18px">Font scale</h4>
+          <label style="display:block;margin:8px 0;font-size:0.78rem">
+            <input type="range" min="0.85" max="1.25" step="0.05" value="1" oninput="setOAFontScale(this.value)" style="width:200px;vertical-align:middle">
+            <span id="oa-font-scale-display">1.00x</span>
+          </label>
+        </section>
+        <section class="settings-pane" id="settings-pane-connections" role="tabpanel" hidden>
+          <h4>Backend</h4>
+          <p style="font-size:0.74rem;color:var(--color-fg-muted);margin:6px 0 12px">Loaded from /v1/config — edits POST /v1/config/endpoint.</p>
+          <div id="settings-connections-host">
+            <button onclick="loadSettingsConnections()" style="font-size:0.74rem">load current</button>
+          </div>
+        </section>
+        <section class="settings-pane" id="settings-pane-models" role="tabpanel" hidden>
+          <h4>Available models</h4>
+          <p style="font-size:0.74rem;color:var(--color-fg-muted);margin:6px 0 12px">Sourced from /v1/models. Click a row to set it as active.</p>
+          <input type="search" id="settings-models-search" placeholder="Filter..." oninput="filterSettingsModels(this.value)" style="width:100%;background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:6px 10px;border-radius:var(--radius-sm);font-size:0.78rem;margin-bottom:8px">
+          <div id="settings-models-list" style="max-height:300px;overflow-y:auto;font-size:0.78rem"></div>
+          <div style="margin-top:10px"><button onclick="loadSettingsModels()" style="font-size:0.74rem">refresh</button></div>
+        </section>
+        <section class="settings-pane" id="settings-pane-voice" role="tabpanel" hidden>
+          <h4>Voice clone references</h4>
+          <p style="font-size:0.74rem;color:var(--color-fg-muted);margin:6px 0 12px">Manage TTS clone refs (relocated from the legacy Voice tab).</p>
+          <div id="settings-voice-host">
+            <button onclick="loadSettingsVoice()" style="font-size:0.74rem">load</button>
+          </div>
+        </section>
+        <section class="settings-pane" id="settings-pane-profiles" role="tabpanel" hidden>
+          <h4>Agent profiles</h4>
+          <p style="font-size:0.74rem;color:var(--color-fg-muted);margin:6px 0 12px">Same as Agent tab profile list.</p>
+          <div id="settings-profiles-host">
+            <button onclick="loadSettingsProfiles()" style="font-size:0.74rem">load</button>
+          </div>
+        </section>
+        <section class="settings-pane" id="settings-pane-advanced" role="tabpanel" hidden>
+          <h4>Advanced</h4>
+          <p style="font-size:0.74rem;color:var(--color-fg-muted);margin:6px 0 12px">Diagnostics, raw config, danger zone.</p>
+          <div style="display:flex;gap:8px;flex-wrap:wrap">
+            <button onclick="window.open('/api/docs', '_blank')" style="font-size:0.74rem">open swagger</button>
+            <button onclick="window.open('/redoc', '_blank')"   style="font-size:0.74rem">open redoc</button>
+            <button onclick="window.open('/asyncapi.json', '_blank')" style="font-size:0.74rem">asyncapi spec</button>
+            <button onclick="window.open('/openapi.json', '_blank')"  style="font-size:0.74rem">openapi spec</button>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div class="oa-modal-footer">
+      <button class="oa-btn-secondary" onclick="closeSettingsModal()">Close</button>
+    </div>
+  </div>
+</div>
+
+<!-- ════════════════════════════════════════════════════════════════
+     OWUI-5: Model manager modal — search + list + details.
+     ════════════════════════════════════════════════════════════════ -->
+<div id="model-manager-modal" class="oa-modal" role="dialog" aria-modal="true" aria-labelledby="model-manager-title" style="display:none">
+  <div class="oa-modal-backdrop" onclick="closeModelManager()"></div>
+  <div class="oa-modal-window" role="document">
+    <div class="oa-modal-header">
+      <h3 id="model-manager-title">Model manager</h3>
+      <button class="oa-modal-close" onclick="closeModelManager()" aria-label="Close">&times;</button>
+    </div>
+    <div class="oa-modal-body" style="grid-template-columns:1fr 280px">
+      <div class="oa-modal-pane" style="padding:14px">
+        <input type="search" id="mm-search" placeholder="Search models..." oninput="filterModelManager(this.value)" style="width:100%;background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:8px 12px;border-radius:var(--radius-sm);font-size:0.82rem;margin-bottom:10px">
+        <div id="mm-list" style="max-height:420px;overflow-y:auto"></div>
+      </div>
+      <aside class="oa-modal-aside" id="mm-detail">
+        <div style="padding:14px;color:var(--color-fg-muted);font-size:0.78rem">Select a model on the left.</div>
+      </aside>
+    </div>
+    <div class="oa-modal-footer">
+      <button class="oa-btn-secondary" onclick="loadModelManager()">refresh</button>
+      <button class="oa-btn-secondary" onclick="closeModelManager()">Close</button>
     </div>
   </div>
 </div>
@@ -575917,7 +576931,10 @@ if (conv) {
 // Auto-resize textarea + WO-CHAT-CHECKIN typing detection
 input.addEventListener('input', () => {
   input.style.height = 'auto';
-  input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+  // OWUI-4: bump max from 120 (~6 lines) to 240 (~12 lines).
+  input.style.height = Math.min(input.scrollHeight, 240) + 'px';
+  // OWUI-4: open slash palette as soon as the input starts with "/".
+  try { _maybeUpdateSlashPalette(); } catch {}
   // While a run is streaming, swap stop button → check-in button as
   // soon as the user types anything. When the input is cleared, swap back.
   if (streaming) {
@@ -575933,6 +576950,22 @@ input.addEventListener('input', () => {
   }
 });
 input.addEventListener('keydown', (e) => {
+  // OWUI-4: arrow / enter / escape navigation for the slash palette
+  // takes priority over the normal Enter behaviour.
+  const palOpen = _slashPaletteIsOpen();
+  if (palOpen) {
+    if (e.key === 'ArrowDown')   { e.preventDefault(); _slashPaletteMove(1);  return; }
+    if (e.key === 'ArrowUp')     { e.preventDefault(); _slashPaletteMove(-1); return; }
+    if (e.key === 'Escape')      { e.preventDefault(); closeSlashPalette();    return; }
+    if (e.key === 'Tab')         { e.preventDefault(); _slashPaletteAccept();  return; }
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); _slashPaletteAccept(); return; }
+  }
+  // OWUI-4: Cmd/Ctrl+Enter — always sends, never inserts a newline.
+  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    if (streaming && input.value.trim().length > 0) sendCheckin(); else sendMessage();
+    return;
+  }
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault();
     // While a run is streaming, Enter dispatches a check-in instead of
@@ -576041,29 +577074,106 @@ function persistSelectedModel() {
 function addMessage(role, content) {
   const div = document.createElement('div');
   div.className = 'msg ' + role;
-  // Always run markdown rendering for assistant. For user messages,
-  // detect markdown patterns and render IF present, otherwise keep
-  // plain text (whitespace preserved by the .msg pre-wrap rule).
+  div.dataset.role = role;
+  // OWUI-3: wrap user/system content in an inner element so the bubble/
+  // chip CSS can target it via .msg.user > * / .msg.system > * .
+  // Assistant messages stay structurally flat — the avatar is rendered
+  // via ::before pseudo-element so all child nodes are content.
+  let host = div;
+  if (role === 'user' || role === 'system') {
+    host = document.createElement('div');
+    host.className = 'msg-bubble';
+    div.appendChild(host);
+  }
   if (role === 'assistant' || (role === 'user' && looksLikeMarkdown(content))) {
-    div.innerHTML = renderMarkdown(content);
+    host.innerHTML = renderMarkdown(content);
   } else {
-    div.textContent = content;
+    host.textContent = content;
   }
-  // Copy button on assistant messages
+  // OWUI-3: rich per-message action row on assistant messages.
   if (role === 'assistant') {
     const actions = document.createElement('div');
     actions.className = 'msg-actions';
-    const copyBtn = document.createElement('button');
-    copyBtn.textContent = 'copy';
-    copyBtn.onclick = () => { navigator.clipboard.writeText(content); copyBtn.textContent = 'copied'; setTimeout(() => copyBtn.textContent = 'copy', 1500); };
-    actions.appendChild(copyBtn);
+    const mkBtn = (label, title, fn) => {
+      const b = document.createElement('button');
+      b.textContent = label;
+      b.title = title;
+      b.onclick = fn;
+      return b;
+    };
+    actions.appendChild(mkBtn('copy', 'Copy message', () => {
+      // Copy what's actually visible (post-render text), not the raw arg —
+      // the closure-captured "content" may be empty when this message was
+      // built incrementally during streaming.
+      const txt = host.innerText || host.textContent || content || '';
+      try { navigator.clipboard.writeText(txt); } catch {}
+      const orig = actions.querySelector('button').textContent;
+      actions.querySelector('button').textContent = 'copied';
+      setTimeout(() => { actions.querySelector('button').textContent = orig; }, 1500);
+    }));
+    actions.appendChild(mkBtn('regen', 'Regenerate this response', () => {
+      try { regenerateAssistantMessage(div); } catch (e) { console.warn('regen failed', e); }
+    }));
+    actions.appendChild(mkBtn('del', 'Delete this message', () => {
+      try { deleteMessageDiv(div); } catch (e) { console.warn('del failed', e); }
+    }));
     div.appendChild(actions);
   }
   conv.appendChild(div);
+  // OWUI-3: schedule syntax highlight for any new code blocks.
+  try { _highlightCodeBlocks(div); } catch {}
   maybeAutoScroll();
   return div;
 }
 
+// OWUI-3: regenerate by re-running the most recent user message's send
+// flow. We delete the assistant message + any messages after the
+// preceding user message, then re-dispatch send().
+function regenerateAssistantMessage(msgDiv) {
+  if (!msgDiv || !conv || streaming) return;
+  // Walk backwards in the DOM to find the immediately-preceding user msg.
+  let prev = msgDiv.previousElementSibling;
+  while (prev && !(prev.classList && prev.classList.contains('msg') && prev.dataset.role === 'user')) {
+    prev = prev.previousElementSibling;
+  }
+  if (!prev) return;
+  const userText = (prev.querySelector('.msg-bubble')?.innerText || prev.innerText || '').trim();
+  if (!userText) return;
+  // Drop the assistant + any siblings between user and assistant.
+  let cur = prev.nextElementSibling;
+  while (cur) {
+    const next = cur.nextElementSibling;
+    cur.remove();
+    cur = next;
+  }
+  // Drop the matching backend message-history entry too so it doesn't get
+  // double-counted on resend.
+  if (Array.isArray(messages)) {
+    while (messages.length && messages[messages.length - 1].role !== 'user') messages.pop();
+    if (messages.length && messages[messages.length - 1].role === 'user') messages.pop();
+  }
+  // Now also drop the user's DOM bubble — send() re-adds it.
+  prev.remove();
+  // Repopulate the input and re-fire send.
+  input.value = userText;
+  try { send(); } catch (e) { console.warn('regen send failed', e); }
+}
+
+// OWUI-3: delete a single message div from the DOM + memory.
+// Trims trailing message-history entries beyond the deleted index so the
+// next turn doesn't carry orphaned context.
+function deleteMessageDiv(msgDiv) {
+  if (!msgDiv) return;
+  const role = msgDiv.dataset.role;
+  msgDiv.remove();
+  if (Array.isArray(messages)) {
+    // Remove the LAST entry matching this role (best-effort).
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === role) { messages.splice(i, 1); break; }
+    }
+  }
+}
+
 // WO-TASK-02 — heuristic detection: does this string contain markdown
 // constructs that warrant parsing? Used for .msg.user content where we
 // don't want to render every plain string as HTML, but we DO want to
@@ -576115,14 +577225,14 @@ function renderMarkdown(text) {
   // Headers — h1..h6
   text = text.replace(/(^|\\n)(#{1,6}) (.+?)(\\n|$)/g, (_, pre, hashes, body, post) => {
     const lvl = hashes.length;
-    return pre + '<h' + lvl + ' style="margin:6px 0 4px;color:#b2920a;font-size:' + (1.05 - lvl * 0.05) + 'rem">' + body + '</h' + lvl + '>' + (post === '\\n' ? '' : post);
+    return pre + '<h' + lvl + ' style="margin:6px 0 4px;color:var(--color-brand);font-size:' + (1.05 - lvl * 0.05) + 'rem">' + body + '</h' + lvl + '>' + (post === '\\n' ? '' : post);
   });
   // Blockquote
   text = text.replace(/(^|\\n)> (.+?)(\\n|$)/g, (_, pre, body, post) => {
-    return pre + '<blockquote style="margin:4px 0;padding:2px 8px;border-left:2px solid #b2920a;color:#888">' + body + '</blockquote>' + (post === '\\n' ? '' : post);
+    return pre + '<blockquote style="margin:4px 0;padding:2px 8px;border-left:2px solid var(--color-brand);color:var(--color-fg-muted)">' + body + '</blockquote>' + (post === '\\n' ? '' : post);
   });
   // Horizontal rule
-  text = text.replace(/(^|\\n)(?:---|\\*\\*\\*|___)(\\n|$)/g, '$1<hr style="border:none;border-top:1px solid #2a2a30;margin:8px 0">$2');
+  text = text.replace(/(^|\\n)(?:---|\\*\\*\\*|___)(\\n|$)/g, '$1<hr style="border:none;border-top:1px solid var(--color-bg-input);margin:8px 0">$2');
   // Unordered lists — collapse consecutive items into a single <ul>
   text = text.replace(/(?:(^|\\n)[-*+] [^\\n]+)+/g, m => {
     const items = m.trim().split(/\\n/).map(l => l.replace(/^[-*+] /, '')).map(l => '<li>' + l + '</li>').join('');
@@ -576146,7 +577256,7 @@ function renderMarkdown(text) {
   text = text.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, (_, label, url) => {
     // Only allow http(s) or relative URLs to prevent javascript: links
     const safe = /^(https?:\\/\\/|\\/|\\.\\.?\\/|#)/.test(url) ? url : '#';
-    return '<a href="' + safe + '" target="_blank" rel="noopener noreferrer" style="color:#b2920a">' + label + '</a>';
+    return '<a href="' + safe + '" target="_blank" rel="noopener noreferrer" style="color:var(--color-brand)">' + label + '</a>';
   });
 
   // 5) Re-insert code blocks
@@ -576183,7 +577293,7 @@ function appendExpandableContent(parent, fullText, opts) {
   if (isLong) {
     const btn = document.createElement('button');
     btn.type = 'button';
-    btn.style.cssText = 'align-self:flex-start;margin-top:2px;padding:2px 8px;background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;font-size:0.6rem;border-radius:2px;cursor:pointer;font-family:inherit;';
+    btn.style.cssText = 'align-self:flex-start;margin-top:2px;padding:2px 8px;background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);font-size:0.6rem;border-radius:2px;cursor:pointer;font-family:inherit;';
     btn.textContent = 'Show more (' + text.length + ' chars)';
     let expanded = false;
     btn.addEventListener('click', (e) => {
@@ -576206,9 +577316,9 @@ function appendExpandableContent(parent, fullText, opts) {
 // session message shape ({role:'tool_call', tool, args}).
 function renderToolCallEvent(parent, chunkLike) {
   const details = document.createElement('details');
-  details.style.cssText = 'background:#1e1e22;border-left:2px solid #b2920a;margin:2px 0;font-size:0.7rem';
+  details.style.cssText = 'background:var(--color-bg-elevated);border-left:2px solid var(--color-brand);margin:2px 0;font-size:0.7rem';
   const summary = document.createElement('summary');
-  summary.style.cssText = 'padding:4px 8px;color:#b2920a;cursor:pointer';
+  summary.style.cssText = 'padding:4px 8px;color:var(--color-brand);cursor:pointer';
 
   const toolName = chunkLike.tool || 'tool';
   let a = (chunkLike.args && typeof chunkLike.args === 'object') ? chunkLike.args : {};
@@ -576253,18 +577363,18 @@ function renderToolCallEvent(parent, chunkLike) {
 
   if (a && typeof a === 'object') {
     const argsDiv = document.createElement('div');
-    argsDiv.style.cssText = 'padding:4px 8px 6px 16px;color:#888;font-size:0.65rem;border-top:1px solid #2a2a30';
+    argsDiv.style.cssText = 'padding:4px 8px 6px 16px;color:var(--color-fg-muted);font-size:0.65rem;border-top:1px solid var(--color-bg-input)';
     if (toolName === 'todo_write' && Array.isArray(a.todos)) {
       for (const t of a.todos) {
         if (!t || typeof t !== 'object') continue;
         const row = document.createElement('div');
         row.style.cssText = 'padding:2px 0';
         let mark = '\\u25CB';
-        let color = '#666';
+        let color = 'var(--color-fg-subtle)';
         if (t.status === 'completed') { mark = '\\u25C9'; color = '#4a7a4a'; }
-        else if (t.status === 'in_progress') { mark = '\\u25D0'; color = '#b2920a'; }
-        else if (t.status === 'blocked') { mark = '\\u25CD'; color = '#b25f5f'; }
-        row.innerHTML = '<span style="color:' + color + '">' + mark + '</span> <span style="color:#b0b0b0">' + escHtml(String(t.content || '').slice(0, 300)) + '</span>' + (t.blocker ? ' <span style="color:#b25f5f">(blocked: ' + escHtml(String(t.blocker).slice(0, 100)) + ')</span>' : '');
+        else if (t.status === 'in_progress') { mark = '\\u25D0'; color = 'var(--color-brand)'; }
+        else if (t.status === 'blocked') { mark = '\\u25CD'; color = 'var(--color-error)'; }
+        row.innerHTML = '<span style="color:' + color + '">' + mark + '</span> <span style="color:var(--color-fg)">' + escHtml(String(t.content || '').slice(0, 300)) + '</span>' + (t.blocker ? ' <span style="color:var(--color-error)">(blocked: ' + escHtml(String(t.blocker).slice(0, 100)) + ')</span>' : '');
         argsDiv.appendChild(row);
       }
     } else {
@@ -576278,13 +577388,13 @@ function renderToolCallEvent(parent, chunkLike) {
         else { try { vs = JSON.stringify(v, null, 2); } catch { vs = '[object]'; } }
 
         const keyEl = document.createElement('span');
-        keyEl.style.cssText = 'color:#b2920a;min-width:60px;flex-shrink:0';
+        keyEl.style.cssText = 'color:var(--color-brand);min-width:60px;flex-shrink:0';
         keyEl.textContent = k;
         row.appendChild(keyEl);
 
         const valWrap = document.createElement('div');
-        valWrap.style.cssText = 'flex:1;min-width:0;color:#b0b0b0';
-        appendExpandableContent(valWrap, vs, { truncateAt: 500, baseStyle: 'color:#b0b0b0;' });
+        valWrap.style.cssText = 'flex:1;min-width:0;color:var(--color-fg)';
+        appendExpandableContent(valWrap, vs, { truncateAt: 500, baseStyle: 'color:var(--color-fg);' });
         row.appendChild(valWrap);
 
         argsDiv.appendChild(row);
@@ -576301,8 +577411,8 @@ function renderToolCallEvent(parent, chunkLike) {
 function renderToolResultEvent(parent, chunkLike) {
   const resultEl = document.createElement('div');
   const errStyle = chunkLike.success === false
-    ? 'background:#2a1e1e;border-left:2px solid #b25f5f;color:#b25f5f;'
-    : 'background:#1e1e22;color:#888;';
+    ? 'background:#2a1e1e;border-left:2px solid var(--color-error);color:var(--color-error);'
+    : 'background:var(--color-bg-elevated);color:var(--color-fg-muted);';
   resultEl.style.cssText = errStyle + 'padding:4px 8px 4px 18px;margin:0 0 2px 0;font-size:0.65rem';
   appendExpandableContent(resultEl, chunkLike.output || '', { truncateAt: 150, baseStyle: 'color:inherit;' });
   parent.appendChild(resultEl);
@@ -576315,9 +577425,9 @@ function renderToolResultEvent(parent, chunkLike) {
 // active assistant turn's tool dropdowns.
 function renderCheckinEvent(parent, content) {
   const el = document.createElement('div');
-  el.style.cssText = 'background:#0a2a2e;border-left:3px solid #2db4b4;color:#7fdada;padding:6px 10px 6px 14px;margin:3px 0;font-size:0.7rem;font-family:inherit';
+  el.style.cssText = 'background:var(--color-info);border-left:3px solid var(--color-info);color:#7fdada;padding:6px 10px 6px 14px;margin:3px 0;font-size:0.7rem;font-family:inherit';
   const label = document.createElement('div');
-  label.style.cssText = 'color:#2db4b4;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px';
+  label.style.cssText = 'color:var(--color-info);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px';
   label.textContent = '\\u25B8 user check-in';
   el.appendChild(label);
   const body = document.createElement('div');
@@ -576334,9 +577444,9 @@ function renderCheckinEvent(parent, content) {
 // stack of dropdowns.
 function renderTriageResponseEvent(parent, ack, steering) {
   const el = document.createElement('div');
-  el.style.cssText = 'background:#0a2628;border-left:3px solid #2db4b4;color:#7fdada;padding:6px 10px 6px 14px;margin:3px 0;font-size:0.7rem';
+  el.style.cssText = 'background:#0a2628;border-left:3px solid var(--color-info);color:#7fdada;padding:6px 10px 6px 14px;margin:3px 0;font-size:0.7rem';
   const label = document.createElement('div');
-  label.style.cssText = 'color:#2db4b4;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px';
+  label.style.cssText = 'color:var(--color-info);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px';
   label.textContent = '\\u25B8 triage \\u2192 main agent';
   el.appendChild(label);
   if (ack) {
@@ -576408,7 +577518,7 @@ async function sendCheckin() {
     if (!r.ok) {
       if (toolsContainer) {
         const errEl = document.createElement('div');
-        errEl.style.cssText = 'color:#b25f5f;font-size:0.6rem;padding:2px 14px';
+        errEl.style.cssText = 'color:var(--color-error);font-size:0.6rem;padding:2px 14px';
         errEl.textContent = 'Check-in failed: HTTP ' + r.status;
         toolsContainer.appendChild(errEl);
       }
@@ -576422,7 +577532,7 @@ async function sendCheckin() {
   } catch (err) {
     if (toolsContainer) {
       const errEl = document.createElement('div');
-      errEl.style.cssText = 'color:#b25f5f;font-size:0.6rem;padding:2px 14px';
+      errEl.style.cssText = 'color:var(--color-error);font-size:0.6rem;padding:2px 14px';
       errEl.textContent = 'Check-in network error: ' + (err && err.message || String(err));
       toolsContainer.appendChild(errEl);
     }
@@ -576465,6 +577575,11 @@ async function sendMessage() {
   const contentDiv = document.createElement('div');
   msgDiv.appendChild(contentDiv);
 
+  // OWUI-3: streaming indicator — pulsing dot + 'thinking' label
+  // Stays visible until the first content chunk arrives, then is
+  // replaced by the running content. Hidden in the finally{} block too.
+  showStreamingIndicator(msgDiv, 'thinking');
+
   try {
     // Prepend context files as a FILES block so the agent can read them
     // without having to guess paths. The user picked these via right-click
@@ -576568,9 +577683,9 @@ async function sendMessage() {
           if (chunk.type === 'tool_call') {
             chatTools.push(chunk);
             const details = document.createElement('details');
-            details.style.cssText = 'background:#1e1e22;border-left:2px solid #b2920a;margin:2px 0;font-size:0.7rem';
+            details.style.cssText = 'background:var(--color-bg-elevated);border-left:2px solid var(--color-brand);margin:2px 0;font-size:0.7rem';
             const summary = document.createElement('summary');
-            summary.style.cssText = 'padding:4px 8px;color:#b2920a;cursor:pointer';
+            summary.style.cssText = 'padding:4px 8px;color:var(--color-brand);cursor:pointer';
 
             // Build a compact one-line label so the user sees what the tool
             // is actually doing without expanding. todo_write gets a special
@@ -576628,18 +577743,18 @@ async function sendMessage() {
             // todo_write specifically render a checklist instead of a blob.
             if (chunk.args && typeof chunk.args === 'object') {
               const argsDiv = document.createElement('div');
-              argsDiv.style.cssText = 'padding:4px 8px 6px 16px;color:#888;font-size:0.65rem;border-top:1px solid #2a2a30';
+              argsDiv.style.cssText = 'padding:4px 8px 6px 16px;color:var(--color-fg-muted);font-size:0.65rem;border-top:1px solid var(--color-bg-input)';
               if (toolName === 'todo_write' && Array.isArray(a.todos)) {
                 for (const t of a.todos) {
                   if (!t || typeof t !== 'object') continue;
                   const row = document.createElement('div');
                   row.style.cssText = 'padding:2px 0';
                   let mark = '○';
-                  let color = '#666';
+                  let color = 'var(--color-fg-subtle)';
                   if (t.status === 'completed') { mark = '◉'; color = '#4a7a4a'; }
-                  else if (t.status === 'in_progress') { mark = '◐'; color = '#b2920a'; }
-                  else if (t.status === 'blocked') { mark = '◍'; color = '#b25f5f'; }
-                  row.innerHTML = '<span style="color:' + color + '">' + mark + '</span> <span style="color:#b0b0b0">' + escHtml(String(t.content || '').slice(0, 300)) + '</span>' + (t.blocker ? ' <span style="color:#b25f5f">(blocked: ' + escHtml(String(t.blocker).slice(0, 100)) + ')</span>' : '');
+                  else if (t.status === 'in_progress') { mark = '◐'; color = 'var(--color-brand)'; }
+                  else if (t.status === 'blocked') { mark = '◍'; color = 'var(--color-error)'; }
+                  row.innerHTML = '<span style="color:' + color + '">' + mark + '</span> <span style="color:var(--color-fg)">' + escHtml(String(t.content || '').slice(0, 300)) + '</span>' + (t.blocker ? ' <span style="color:var(--color-error)">(blocked: ' + escHtml(String(t.blocker).slice(0, 100)) + ')</span>' : '');
                   argsDiv.appendChild(row);
                 }
               } else {
@@ -576654,15 +577769,15 @@ async function sendMessage() {
                   else { try { vs = JSON.stringify(v, null, 2); } catch { vs = '[object]'; } }
 
                   const keyEl = document.createElement('span');
-                  keyEl.style.cssText = 'color:#b2920a;min-width:60px;flex-shrink:0';
+                  keyEl.style.cssText = 'color:var(--color-brand);min-width:60px;flex-shrink:0';
                   keyEl.textContent = k;
                   row.appendChild(keyEl);
 
                   const valWrap = document.createElement('div');
-                  valWrap.style.cssText = 'flex:1;min-width:0;color:#b0b0b0';
+                  valWrap.style.cssText = 'flex:1;min-width:0;color:var(--color-fg)';
                   // Use the show-more helper so long values are collapsed
                   // by default and the user can expand inline.
-                  appendExpandableContent(valWrap, vs, { truncateAt: 500, baseStyle: 'color:#b0b0b0;' });
+                  appendExpandableContent(valWrap, vs, { truncateAt: 500, baseStyle: 'color:var(--color-fg);' });
                   row.appendChild(valWrap);
 
                   argsDiv.appendChild(row);
@@ -576680,8 +577795,8 @@ async function sendMessage() {
           // 150 chars. The button sits underneath the result block.
           if (chunk.type === 'tool_result') {
             const resultEl = document.createElement('div');
-            resultEl.style.cssText = 'background:#1e1e22;padding:4px 8px 4px 18px;margin:0 0 2px 0;color:#888;font-size:0.65rem';
-            appendExpandableContent(resultEl, chunk.output || '', { truncateAt: 150, baseStyle: 'color:#888;' });
+            resultEl.style.cssText = 'background:var(--color-bg-elevated);padding:4px 8px 4px 18px;margin:0 0 2px 0;color:var(--color-fg-muted);font-size:0.65rem';
+            appendExpandableContent(resultEl, chunk.output || '', { truncateAt: 150, baseStyle: 'color:var(--color-fg-muted);' });
             toolsContainer.appendChild(resultEl);
             continue;
           }
@@ -576695,8 +577810,15 @@ async function sendMessage() {
           // Content delta
           const delta = chunk.choices?.[0]?.delta?.content || '';
           if (delta) {
+            // OWUI-3: switch indicator from 'thinking' -> 'writing' on
+            // first delta, and remove on subsequent deltas (it lives at
+            // the bottom of the message, below content).
+            if (!fullContent) {
+              showStreamingIndicator(msgDiv, 'writing');
+            }
             fullContent += delta;
             contentDiv.innerHTML = renderMarkdown(fullContent);
+            try { _highlightCodeBlocks(contentDiv); } catch {}
             maybeAutoScroll();
           }
         } catch {}
@@ -576718,11 +577840,14 @@ async function sendMessage() {
 
     // Final render: content + collapsible tools + metadata
     contentDiv.innerHTML = renderMarkdown(fullContent);
+    // OWUI-3: streaming complete — drop the pulsing dot.
+    hideStreamingIndicator(msgDiv);
+    try { _highlightCodeBlocks(contentDiv); } catch {}
 
     // Metadata bar: turns, tokens, duration (always shown, compact)
     if (metaInfo) {
       const metaBar = document.createElement('div');
-      metaBar.style.cssText = 'margin:6px 0 2px;padding:4px 8px;background:#1e1e22;border-radius:3px;font-size:0.6rem;color:#555;display:flex;gap:12px;flex-wrap:wrap';
+      metaBar.style.cssText = 'margin:6px 0 2px;padding:4px 8px;background:var(--color-bg-elevated);border-radius:3px;font-size:0.6rem;color:var(--color-fg-faint);display:flex;gap:12px;flex-wrap:wrap';
       const parts = [];
       if (metaInfo.turns) parts.push(metaInfo.turns + ' turn' + (metaInfo.turns > 1 ? 's' : ''));
       if (metaInfo.toolCalls) parts.push(metaInfo.toolCalls + ' tool call' + (metaInfo.toolCalls > 1 ? 's' : ''));
@@ -576735,9 +577860,9 @@ async function sendMessage() {
     // Collapse tool calls into a dropdown
     if (chatTools.length > 0) {
       const details = document.createElement('details');
-      details.style.cssText = 'margin:2px 0;font-size:0.65rem;color:#555';
+      details.style.cssText = 'margin:2px 0;font-size:0.65rem;color:var(--color-fg-faint)';
       const summary = document.createElement('summary');
-      summary.style.cssText = 'cursor:pointer;color:#888;font-size:0.6rem';
+      summary.style.cssText = 'cursor:pointer;color:var(--color-fg-muted);font-size:0.6rem';
       summary.textContent = 'show ' + chatTools.length + ' tool call' + (chatTools.length > 1 ? 's' : '');
       details.appendChild(summary);
       while (toolsContainer.firstChild) details.appendChild(toolsContainer.firstChild);
@@ -576756,13 +577881,17 @@ async function sendMessage() {
     // Match the red left-border styling used by failed tool_result
     // and the stop-button. Sits inside the assistant bubble so it
     // visually parents to the same turn the user initiated.
-    msgDiv.innerHTML = '<div style="background:#2a1e1e;border-left:3px solid #ff4444;color:#ff4444;padding:6px 10px 6px 14px;margin:3px 0;font-family:inherit"><div style="color:#ff4444;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px">\\u25B8 error</div><div style="color:#ff7777;white-space:pre-wrap;word-break:break-word">' + escHtml(err.message) + '</div></div>';
+    msgDiv.innerHTML = '<div style="background:#2a1e1e;border-left:3px solid var(--color-error);color:var(--color-error);padding:6px 10px 6px 14px;margin:3px 0;font-family:inherit"><div style="color:var(--color-error);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px">\\u25B8 error</div><div style="color:#ff7777;white-space:pre-wrap;word-break:break-word">' + escHtml(err.message) + '</div></div>';
   }
 
   streaming = false;
   chatAbortController = null;
   document.getElementById('send-btn').style.display = 'inline-block';
   document.getElementById('stop-btn').style.display = 'none';
+  // OWUI-3: belt-and-braces — make sure the indicator is gone if we
+  // reach this finally{} via an error path before the success branch
+  // had a chance to call hideStreamingIndicator.
+  try { hideStreamingIndicator(msgDiv); } catch {}
   maybeAutoScroll();
 }
 
@@ -576805,9 +577934,13 @@ function switchTab(tab) {
     panel.style.display = (tab === 'chat' || tab === 'agent') ? 'flex' : 'block';
   }
   document.getElementById('footer').style.display = tab === 'chat' ? 'flex' : 'none';
-  document.querySelectorAll('.tab').forEach(t => { t.style.borderBottomColor = 'transparent'; t.style.color = '#555'; });
+  document.querySelectorAll('.tab').forEach(t => { t.style.borderBottomColor = 'transparent'; t.style.color = 'var(--color-fg-faint)'; });
   const active = document.getElementById('tab-' + tab);
-  if (active) { active.style.borderBottomColor = '#b2920a'; active.style.color = '#b2920a'; }
+  if (active) { active.style.borderBottomColor = 'var(--color-brand)'; active.style.color = 'var(--color-brand)'; }
+  // OWUI-2: mirror active state on the sidebar nav
+  document.querySelectorAll('#oa-sidebar .sb-nav').forEach(b => {
+    b.classList.toggle('active', b.getAttribute('data-tab') === tab);
+  });
   if (tab === 'jobs') loadJobs();
   if (tab === 'agent') {
     loadProfiles();
@@ -576832,7 +577965,7 @@ async function loadProjects() {
     const resp = await fetch('/v1/projects', { headers: headers() });
     if (!resp.ok) {
       document.getElementById('projects-list').innerHTML =
-        '<div style="color:#ff6b6b">Failed to load projects: HTTP ' + resp.status + '</div>';
+        '<div style="color:var(--color-error)">Failed to load projects: HTTP ' + resp.status + '</div>';
       return;
     }
     const data = await resp.json();
@@ -576856,8 +577989,8 @@ async function loadProjects() {
     }
     if (projects.length === 0) {
       document.getElementById('projects-list').innerHTML =
-        '<div style="color:#666;padding:20px;text-align:center;border:1px dashed #3a3a42;border-radius:4px">' +
-        'No projects registered yet. Every time you start <code style="color:#b2920a">oa</code> in a folder, it will appear here.' +
+        '<div style="color:var(--color-fg-subtle);padding:20px;text-align:center;border:1px dashed var(--color-border);border-radius:4px">' +
+        'No projects registered yet. Every time you start <code style="color:var(--color-brand)">oa</code> in a folder, it will appear here.' +
         '</div>';
       return;
     }
@@ -576871,17 +578004,17 @@ async function loadProjects() {
     };
     const isCur = (p) => current && current.root === p.root;
     const rows = projects.map(p => {
-      const accent = isCur(p) ? '#b2920a' : '#3a3a42';
+      const accent = isCur(p) ? 'var(--color-brand)' : 'var(--color-border)';
       const label = (p.name || p.root.split('/').pop() || p.root)
         .replace(/</g, '&lt;').replace(/>/g, '&gt;');
       const rootDisplay = p.root.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      const pidInfo = p.pid ? ' <span style="color:#555">pid ' + p.pid + '</span>' : '';
-      return '<div class="proj-row" data-root="' + encodeURIComponent(p.root) + '" style="background:#1a1a1e;border-left:2px solid ' + accent + ';padding:8px 12px;margin:6px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center">' +
+      const pidInfo = p.pid ? ' <span style="color:var(--color-fg-faint)">pid ' + p.pid + '</span>' : '';
+      return '<div class="proj-row" data-root="' + encodeURIComponent(p.root) + '" style="background:var(--color-bg);border-left:2px solid ' + accent + ';padding:8px 12px;margin:6px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center">' +
         '<div>' +
-        '<div style="color:' + (isCur(p) ? '#b2920a' : '#b0b0b0') + ';font-weight:' + (isCur(p) ? '600' : '400') + '">' + label + (isCur(p) ? ' <span style="color:#4ec94e;font-size:0.6rem">(active)</span>' : '') + '</div>' +
-        '<div style="color:#666;font-size:0.62rem">' + rootDisplay + '</div>' +
+        '<div style="color:' + (isCur(p) ? 'var(--color-brand)' : 'var(--color-fg)') + ';font-weight:' + (isCur(p) ? '600' : '400') + '">' + label + (isCur(p) ? ' <span style="color:var(--color-success);font-size:0.6rem">(active)</span>' : '') + '</div>' +
+        '<div style="color:var(--color-fg-subtle);font-size:0.62rem">' + rootDisplay + '</div>' +
         '</div>' +
-        '<div style="color:#555;font-size:0.62rem;text-align:right">' +
+        '<div style="color:var(--color-fg-faint);font-size:0.62rem;text-align:right">' +
         fmtAgo(p.lastSeen) + pidInfo +
         '</div>' +
         '</div>';
@@ -576917,7 +578050,7 @@ async function loadProjects() {
     });
   } catch (e) {
     document.getElementById('projects-list').innerHTML =
-      '<div style="color:#ff6b6b">Failed to load projects: ' + (e && e.message ? e.message : String(e)) + '</div>';
+      '<div style="color:var(--color-error)">Failed to load projects: ' + (e && e.message ? e.message : String(e)) + '</div>';
   }
 }
 window.loadProjects = loadProjects;
@@ -576938,8 +578071,8 @@ async function loadConfig() {
     document.getElementById('config-content').innerHTML =
       '<table style="width:100%">' +
       Object.entries(c).map(([k,v]) =>
-        '<tr style="border-bottom:1px solid #2a2a30"><td style="padding:4px;color:#888">' + k + '</td>' +
-        '<td style="padding:4px;color:#b0b0b0">' + (v === '[redacted]' ? '<span style="color:#555">[redacted]</span>' : String(v)) + '</td></tr>'
+        '<tr style="border-bottom:1px solid var(--color-bg-input)"><td style="padding:4px;color:var(--color-fg-muted)">' + k + '</td>' +
+        '<td style="padding:4px;color:var(--color-fg)">' + (v === '[redacted]' ? '<span style="color:var(--color-fg-faint)">[redacted]</span>' : String(v)) + '</td></tr>'
       ).join('') + '</table>';
     document.getElementById('config-endpoint').textContent = ep.url + ' (' + (ep.backendType || 'unknown') + ')';
     // Populate model switcher
@@ -576958,11 +578091,11 @@ async function loadConfig() {
     const r = await fetch('/v1/profiles', { headers: headers() });
     const d = await r.json();
     document.getElementById('config-profiles').innerHTML = (d.profiles || []).map(p =>
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:6px 10px;margin:4px 0">' +
-      '<span style="color:#b2920a">' + p.name + '</span>' +
-      (p.encrypted ? ' <span style="color:#555;font-size:0.6rem">(encrypted)</span>' : '') +
-      ' <span style="color:#555;font-size:0.6rem">' + (p.source || '') + '</span></div>'
-    ).join('') || '<span style="color:#555">No profiles</span>';
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:6px 10px;margin:4px 0">' +
+      '<span style="color:var(--color-brand)">' + p.name + '</span>' +
+      (p.encrypted ? ' <span style="color:var(--color-fg-faint);font-size:0.6rem">(encrypted)</span>' : '') +
+      ' <span style="color:var(--color-fg-faint);font-size:0.6rem">' + (p.source || '') + '</span></div>'
+    ).join('') || '<span style="color:var(--color-fg-faint)">No profiles</span>';
   } catch {}
 }
 
@@ -577015,17 +578148,17 @@ async function loadActivity() {
     const r = await fetch('/v1/audit?limit=50', { headers: headers() });
     const d = await r.json();
     const feed = document.getElementById('activity-feed');
-    if (!d.records?.length) { feed.innerHTML = '<span style="color:#555">No activity yet</span>'; return; }
+    if (!d.records?.length) { feed.innerHTML = '<span style="color:var(--color-fg-faint)">No activity yet</span>'; return; }
     feed.innerHTML = d.records.map(r => {
       const time = r.ts?.split('T')[1]?.slice(0,8) || '';
-      const color = r.status >= 400 ? '#ff4444' : r.status >= 300 ? '#b2920a' : '#4ec94e';
-      return '<div style="padding:3px 0;border-bottom:1px solid #1e1e22">' +
-        '<span style="color:#555">' + time + '</span> ' +
+      const color = r.status >= 400 ? 'var(--color-error)' : r.status >= 300 ? 'var(--color-brand)' : 'var(--color-success)';
+      return '<div style="padding:3px 0;border-bottom:1px solid var(--color-bg-elevated)">' +
+        '<span style="color:var(--color-fg-faint)">' + time + '</span> ' +
         '<span style="color:' + color + '">' + r.status + '</span> ' +
-        '<span style="color:#888">' + r.method + '</span> ' +
-        '<span style="color:#b0b0b0">' + r.path + '</span> ' +
-        '<span style="color:#555">' + r.latencyMs + 'ms</span> ' +
-        '<span style="color:#555;font-size:0.6rem">' + (r.user || '') + '</span></div>';
+        '<span style="color:var(--color-fg-muted)">' + r.method + '</span> ' +
+        '<span style="color:var(--color-fg)">' + r.path + '</span> ' +
+        '<span style="color:var(--color-fg-faint)">' + r.latencyMs + 'ms</span> ' +
+        '<span style="color:var(--color-fg-faint);font-size:0.6rem">' + (r.user || '') + '</span></div>';
     }).join('');
   } catch {}
 }
@@ -577039,15 +578172,15 @@ async function loadDaemons() {
     const d = await r.json();
     const el = document.getElementById('dashboard-daemons');
     if (!d.runs?.length) {
-      el.innerHTML = '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;color:#555;font-size:0.7rem">No active processes</div>';
+      el.innerHTML = '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;color:var(--color-fg-faint);font-size:0.7rem">No active processes</div>';
       return;
     }
-    el.innerHTML = '<h3 style="color:#b2920a;font-size:0.7rem;margin-bottom:8px">Active Processes</h3>' +
+    el.innerHTML = '<h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Active Processes</h3>' +
       d.runs.map(j =>
-        '<div style="background:#1e1e22;border-left:2px solid #b2920a;padding:6px 10px;margin:4px 0;font-size:0.72rem">' +
-        '<span style="color:#b2920a">' + (j.id||'').slice(0,12) + '</span> ' +
-        '<span style="color:#4ec94e">running</span> ' +
-        '<span style="color:#888">' + (j.task||'').slice(0,50) + '</span></div>'
+        '<div style="background:var(--color-bg-elevated);border-left:2px solid var(--color-brand);padding:6px 10px;margin:4px 0;font-size:0.72rem">' +
+        '<span style="color:var(--color-brand)">' + (j.id||'').slice(0,12) + '</span> ' +
+        '<span style="color:var(--color-success)">running</span> ' +
+        '<span style="color:var(--color-fg-muted)">' + (j.task||'').slice(0,50) + '</span></div>'
       ).join('');
   } catch {}
 }
@@ -577061,33 +578194,33 @@ async function loadScheduled() {
     if (!el) return;
     const tasks = Array.isArray(d.tasks) ? d.tasks : [];
     if (tasks.length === 0) {
-      el.innerHTML = '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;color:#555;font-size:0.7rem">No scheduled tasks found</div>';
+      el.innerHTML = '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;color:var(--color-fg-faint);font-size:0.7rem">No scheduled tasks found</div>';
       return;
     }
     const rows = tasks.map(t => {
       const enabled = !!t.enabled;
       const btn = enabled
-        ? '<button onclick="toggleScheduled(\\'' + t.id + '\\',false)" style="background:#2a2a30;border:1px solid #5a2a2a;color:#b25f5f;padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">disable</button>'
-        : '<button onclick="toggleScheduled(\\'' + t.id + '\\',true)" style="background:#2a2a30;border:1px solid #2a3a2a;color:#4ec94e;padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">enable</button>';
-      const color = enabled ? '#4ec94e' : '#5a2a2a';
+        ? '<button onclick="toggleScheduled(\\'' + t.id + '\\',false)" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">disable</button>'
+        : '<button onclick="toggleScheduled(\\'' + t.id + '\\',true)" style="background:var(--color-bg-input);border:1px solid #2a3a2a;color:var(--color-success);padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">enable</button>';
+      const color = enabled ? 'var(--color-success)' : 'var(--color-error)';
       const procInfo = t.procs && t.procs.length ? (' (' + t.procs.length + ' proc)') : '';
       const up = t.procs && t.procs[0] && t.procs[0].uptime_s ? (' • up ' + Math.max(1, Math.round(t.procs[0].uptime_s/60)) + 'm') : '';
-      const killBtn = '<button onclick="killScheduledTask(\\'' + t.id + '\\')" style="background:#2a2a30;border:1px solid #5a2a2a;color:#b25f5f;padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">kill</button>';
-      const row = '<div style="background:#1e1e22;border-left:2px solid ' + color + ';padding:6px 10px;margin:4px 0;font-size:0.72rem">'
-        + '<div style="color:#b0b0b0">' + (t.name || '(task)') + ' <span style="color:#555">' + (t.schedule || '') + '</span>' + procInfo + up + '</div>'
-        + '<div style="color:#555;font-size:0.6rem">' + t.file + '#' + t.index + '</div>'
+      const killBtn = '<button onclick="killScheduledTask(\\'' + t.id + '\\')" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">kill</button>';
+      const row = '<div style="background:var(--color-bg-elevated);border-left:2px solid ' + color + ';padding:6px 10px;margin:4px 0;font-size:0.72rem">'
+        + '<div style="color:var(--color-fg)">' + (t.name || '(task)') + ' <span style="color:var(--color-fg-faint)">' + (t.schedule || '') + '</span>' + procInfo + up + '</div>'
+        + '<div style="color:var(--color-fg-faint);font-size:0.6rem">' + t.file + '#' + t.index + '</div>'
         + '<div style="margin-top:4px;display:flex;gap:8px">' + btn + killBtn + '</div>'
         + '</div>';
       return row;
     }).join('');
-    el.innerHTML = '<h3 style="color:#b2920a;font-size:0.7rem;margin-bottom:8px">Scheduled Tasks</h3>' + rows
+    el.innerHTML = '<h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Scheduled Tasks</h3>' + rows
       + '<div style="margin-top:6px;display:flex;gap:8px">'
-      + '<button onclick="disableAllScheduled()" title="Disable all scheduled tasks" style="background:#2a2a30;border:1px solid #5a2a2a;color:#b25f5f;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">disable all</button>'
-      + '<button onclick="enableAllScheduled()" title="Enable all scheduled tasks" style="background:#2a2a30;border:1px solid #2a3a2a;color:#4ec94e;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">enable all</button>'
-      + '<button onclick="killScheduled()" title="Kill OA scheduler processes" style="background:#2a2a30;border:1px solid #5a2a2a;color:#b25f5f;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">kill OA schedulers</button>'
-      + '<button onclick="adoptScheduled()" title="Adopt legacy cron jobs into tasks.json" style="background:#2a2a30;border:1px solid #2a2a5a;color:#6e7bd9;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">adopt</button>'
-      + '<button onclick="fixupScheduled()" title="Rewrite cron entries to canonical form" style="background:#2a2a30;border:1px solid #5a2a2a;color:#dba15f;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">fixup</button>'
-      + '<button onclick="migrateScheduled()" title="Migrate cron → systemd user timers" style="background:#2a2a30;border:1px solid #5a2a2a;color:#a1db5f;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">migrate</button>'
+      + '<button onclick="disableAllScheduled()" title="Disable all scheduled tasks" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">disable all</button>'
+      + '<button onclick="enableAllScheduled()" title="Enable all scheduled tasks" style="background:var(--color-bg-input);border:1px solid #2a3a2a;color:var(--color-success);padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">enable all</button>'
+      + '<button onclick="killScheduled()" title="Kill OA scheduler processes" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">kill OA schedulers</button>'
+      + '<button onclick="adoptScheduled()" title="Adopt legacy cron jobs into tasks.json" style="background:var(--color-bg-input);border:1px solid #2a2a5a;color:#6e7bd9;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">adopt</button>'
+      + '<button onclick="fixupScheduled()" title="Rewrite cron entries to canonical form" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:#dba15f;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">fixup</button>'
+      + '<button onclick="migrateScheduled()" title="Migrate cron → systemd user timers" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:#a1db5f;padding:3px 8px;border-radius:3px;font-size:0.65rem;cursor:pointer">migrate</button>'
       + '</div>';
   } catch {}
 }
@@ -577234,15 +578367,15 @@ async function loadServices() {
     const svcs = Array.isArray(d.services) ? d.services : [];
     if (!svcs.length) { el.innerHTML = ''; return; }
     const rows = svcs.map(s => {
-      const stopBtn = '<button onclick="svcAction(\\'' + s.name + '\\',\\'stop\\')" style="background:#2a2a30;border:1px solid #5a2a2a;color:#b25f5f;padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">stop</button>';
-      const disBtn = '<button onclick="svcAction(\\'' + s.name + '\\',\\'disable\\')" style="background:#2a2a30;border:1px solid #5a2a2a;color:#b25f5f;padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">disable</button>';
-      return '<div style="background:#1e1e22;border-left:2px solid #3a3a42;padding:6px 10px;margin:4px 0;font-size:0.72rem">'
-        + '<div style="color:#b0b0b0">' + s.name + '</div>'
-        + '<div style="color:#555;font-size:0.6rem">enabled: ' + s.enabled + ' • active: ' + s.active + '</div>'
+      const stopBtn = '<button onclick="svcAction(\\'' + s.name + '\\',\\'stop\\')" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">stop</button>';
+      const disBtn = '<button onclick="svcAction(\\'' + s.name + '\\',\\'disable\\')" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:2px 6px;border-radius:3px;font-size:0.65rem;cursor:pointer">disable</button>';
+      return '<div style="background:var(--color-bg-elevated);border-left:2px solid var(--color-border);padding:6px 10px;margin:4px 0;font-size:0.72rem">'
+        + '<div style="color:var(--color-fg)">' + s.name + '</div>'
+        + '<div style="color:var(--color-fg-faint);font-size:0.6rem">enabled: ' + s.enabled + ' • active: ' + s.active + '</div>'
         + '<div style="margin-top:4px;display:flex;gap:8px">' + stopBtn + disBtn + '</div>'
         + '</div>';
     }).join('');
-    el.innerHTML = '<h3 style="color:#b2920a;font-size:0.7rem;margin-bottom:8px">Services (systemd --user)</h3>' + rows;
+    el.innerHTML = '<h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Services (systemd --user)</h3>' + rows;
   } catch {}
 }
 
@@ -577334,7 +578467,7 @@ async function submitAgentTask() {
           div.style.padding = '2px 0';
           if (evt.type === 'run_started') {
             currentRunId = evt.run_id;
-            div.innerHTML = '<span style="color:#b2920a">Task started</span> — run_id: ' + evt.run_id;
+            div.innerHTML = '<span style="color:var(--color-brand)">Task started</span> — run_id: ' + evt.run_id;
             // WO-TASK-02: Persist this run into the agent runs storage so
             // it appears in the #agent-session-select dropdown immediately.
             try {
@@ -577350,12 +578483,12 @@ async function submitAgentTask() {
               currentAgentRunId = evt.run_id;
             } catch {}
           } else if (evt.type === 'run_completed') {
-            div.innerHTML = '<span style="color:' + (evt.exit_code === 0 ? '#4ec94e' : '#ff4444') + '">Task ' + (evt.exit_code === 0 ? 'completed' : 'failed') + '</span> — exit: ' + evt.exit_code;
+            div.innerHTML = '<span style="color:' + (evt.exit_code === 0 ? 'var(--color-success)' : 'var(--color-error)') + '">Task ' + (evt.exit_code === 0 ? 'completed' : 'failed') + '</span> — exit: ' + evt.exit_code;
             document.getElementById('agent-submit').style.display = 'inline-block';
             document.getElementById('agent-abort').style.display = 'none';
             currentRunId = null;
           } else if (evt.type === 'stdout') {
-            div.style.color = '#888';
+            div.style.color = 'var(--color-fg-muted)';
             div.style.fontFamily = 'inherit';
             div.textContent = evt.data?.slice?.(0, 200) || '';
           }
@@ -577365,7 +578498,7 @@ async function submitAgentTask() {
       }
     }
   } catch (err) {
-    eventsDiv.innerHTML += '<div style="background:#2a1e1e;border-left:3px solid #ff4444;color:#ff7777;padding:6px 10px 6px 14px;margin:3px 0"><div style="color:#ff4444;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px">\\u25B8 error</div>' + escHtml(err.message) + '</div>';
+    eventsDiv.innerHTML += '<div style="background:#2a1e1e;border-left:3px solid var(--color-error);color:#ff7777;padding:6px 10px 6px 14px;margin:3px 0"><div style="color:var(--color-error);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px">\\u25B8 error</div>' + escHtml(err.message) + '</div>';
   }
   document.getElementById('agent-submit').style.display = 'inline-block';
   document.getElementById('agent-abort').style.display = 'none';
@@ -577382,15 +578515,15 @@ async function loadDashboard() {
     const r = await fetch('/health', { headers: headers() });
     const d = await r.json();
     document.getElementById('dashboard-health').innerHTML =
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
-      '<div style="color:#555;font-size:0.6rem">STATUS</div>' +
-      '<div style="color:#4ec94e;font-size:0.8rem">' + d.status + '</div></div>' +
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
-      '<div style="color:#555;font-size:0.6rem">UPTIME</div>' +
-      '<div style="color:#b2920a;font-size:0.8rem">' + Math.floor(d.uptime_s/60) + 'm</div></div>' +
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
-      '<div style="color:#555;font-size:0.6rem">VERSION</div>' +
-      '<div style="color:#b0b0b0;font-size:0.8rem">' + d.version + '</div></div>';
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">STATUS</div>' +
+      '<div style="color:var(--color-success);font-size:0.8rem">' + d.status + '</div></div>' +
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">UPTIME</div>' +
+      '<div style="color:var(--color-brand);font-size:0.8rem">' + Math.floor(d.uptime_s/60) + 'm</div></div>' +
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">VERSION</div>' +
+      '<div style="color:var(--color-fg);font-size:0.8rem">' + d.version + '</div></div>';
   } catch {}
   // System info + model recommendations
   try {
@@ -577399,15 +578532,15 @@ async function loadDashboard() {
     const gpuHtml = (sys.gpu || []).map(g => g.name + ' (' + g.vram_gb + 'GB)').join(', ') || 'No GPU detected';
     const healthEl = document.getElementById('dashboard-health');
     healthEl.innerHTML +=
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
-      '<div style="color:#555;font-size:0.6rem">GPU</div>' +
-      '<div style="color:#b0b0b0;font-size:0.7rem">' + gpuHtml + '</div></div>' +
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
-      '<div style="color:#555;font-size:0.6rem">RAM</div>' +
-      '<div style="color:#b0b0b0;font-size:0.8rem">' + sys.ram_gb + 'GB</div></div>' +
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
-      '<div style="color:#555;font-size:0.6rem">MAX MODEL</div>' +
-      '<div style="color:#b2920a;font-size:0.8rem">' + sys.recommended_max_params + '</div></div>';
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">GPU</div>' +
+      '<div style="color:var(--color-fg);font-size:0.7rem">' + gpuHtml + '</div></div>' +
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">RAM</div>' +
+      '<div style="color:var(--color-fg);font-size:0.8rem">' + sys.ram_gb + 'GB</div></div>' +
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1;min-width:120px">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">MAX MODEL</div>' +
+      '<div style="color:var(--color-brand);font-size:0.8rem">' + sys.recommended_max_params + '</div></div>';
     // Store for model badges
     window._sysMaxParams = sys.recommended_max_params;
   } catch {}
@@ -577420,30 +578553,30 @@ async function loadDashboard() {
     for (const [label, stats] of Object.entries(ps)) {
       const s = stats;
       providerCards +=
-        '<div style="background:#1e1e22;border-left:2px solid #b2920a;padding:8px 12px;margin:4px 0">' +
-        '<div style="color:#b2920a;font-size:0.7rem;font-weight:bold">' + label + '</div>' +
+        '<div style="background:var(--color-bg-elevated);border-left:2px solid var(--color-brand);padding:8px 12px;margin:4px 0">' +
+        '<div style="color:var(--color-brand);font-size:0.7rem;font-weight:bold">' + label + '</div>' +
         '<div style="display:flex;gap:16px;margin-top:4px">' +
-        '<span style="color:#555;font-size:0.65rem">in: <span style="color:#b0b0b0">' + (s.tokensIn || 0).toLocaleString() + '</span></span>' +
-        '<span style="color:#555;font-size:0.65rem">out: <span style="color:#b0b0b0">' + (s.tokensOut || 0).toLocaleString() + '</span></span>' +
-        '<span style="color:#555;font-size:0.65rem">reqs: <span style="color:#b0b0b0">' + (s.requests || 0).toLocaleString() + '</span></span>' +
+        '<span style="color:var(--color-fg-faint);font-size:0.65rem">in: <span style="color:var(--color-fg)">' + (s.tokensIn || 0).toLocaleString() + '</span></span>' +
+        '<span style="color:var(--color-fg-faint);font-size:0.65rem">out: <span style="color:var(--color-fg)">' + (s.tokensOut || 0).toLocaleString() + '</span></span>' +
+        '<span style="color:var(--color-fg-faint);font-size:0.65rem">reqs: <span style="color:var(--color-fg)">' + (s.requests || 0).toLocaleString() + '</span></span>' +
         '</div></div>';
     }
     const totalIn = d.persistent?.totalIn || d.totalTokensIn || 0;
     const totalOut = d.persistent?.totalOut || d.totalTokensOut || 0;
     document.getElementById('dashboard-usage').innerHTML =
-      '<h3 style="color:#b2920a;font-size:0.7rem;margin-bottom:8px">Token Usage by Provider (persistent)</h3>' +
+      '<h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Token Usage by Provider (persistent)</h3>' +
       '<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px">' +
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1">' +
-      '<div style="color:#555;font-size:0.6rem">TOTAL IN</div>' +
-      '<div style="color:#b2920a;font-size:0.9rem;font-weight:bold">' + totalIn.toLocaleString() + '</div></div>' +
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1">' +
-      '<div style="color:#555;font-size:0.6rem">TOTAL OUT</div>' +
-      '<div style="color:#b2920a;font-size:0.9rem;font-weight:bold">' + totalOut.toLocaleString() + '</div></div>' +
-      '<div style="background:#1e1e22;border:1px solid #2a2a30;border-radius:3px;padding:8px 12px;flex:1">' +
-      '<div style="color:#555;font-size:0.6rem">TOTAL REQUESTS</div>' +
-      '<div style="color:#b2920a;font-size:0.9rem;font-weight:bold">' + (d.persistent?.totalRequests || 0).toLocaleString() + '</div></div>' +
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">TOTAL IN</div>' +
+      '<div style="color:var(--color-brand);font-size:0.9rem;font-weight:bold">' + totalIn.toLocaleString() + '</div></div>' +
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">TOTAL OUT</div>' +
+      '<div style="color:var(--color-brand);font-size:0.9rem;font-weight:bold">' + totalOut.toLocaleString() + '</div></div>' +
+      '<div style="background:var(--color-bg-elevated);border:1px solid var(--color-bg-input);border-radius:3px;padding:8px 12px;flex:1">' +
+      '<div style="color:var(--color-fg-faint);font-size:0.6rem">TOTAL REQUESTS</div>' +
+      '<div style="color:var(--color-brand);font-size:0.9rem;font-weight:bold">' + (d.persistent?.totalRequests || 0).toLocaleString() + '</div></div>' +
       '</div>' +
-      (providerCards || '<div style="color:#555;font-size:0.7rem">No provider usage recorded yet</div>');
+      (providerCards || '<div style="color:var(--color-fg-faint);font-size:0.7rem">No provider usage recorded yet</div>');
   } catch {}
 }
 
@@ -577454,20 +578587,20 @@ async function loadJobs() {
   try {
     const r = await fetch('/v1/runs', { headers: headers() });
     const d = await r.json();
-    if (!d.runs?.length) { list.innerHTML = '<div style="color:#555">No jobs yet</div>'; return; }
+    if (!d.runs?.length) { list.innerHTML = '<div style="color:var(--color-fg-faint)">No jobs yet</div>'; return; }
     let html = '<table style="width:100%;border-collapse:collapse">';
-    html += '<tr style="color:#b2920a;font-size:0.65rem"><th style="text-align:left;padding:4px">ID</th><th>Status</th><th>Task</th><th>Duration</th></tr>';
+    html += '<tr style="color:var(--color-brand);font-size:0.65rem"><th style="text-align:left;padding:4px">ID</th><th>Status</th><th>Task</th><th>Duration</th></tr>';
     for (const j of d.runs.slice(0, 20)) {
-      const color = j.status === 'completed' ? '#4ec94e' : j.status === 'running' ? '#b2920a' : '#ff4444';
+      const color = j.status === 'completed' ? 'var(--color-success)' : j.status === 'running' ? 'var(--color-brand)' : 'var(--color-error)';
       const dur = j.durationMs ? (j.durationMs / 1000).toFixed(1) + 's' : '—';
-      html += '<tr style="border-top:1px solid #2a2a30"><td style="padding:4px;color:#888">' + (j.id||'').slice(0,12) + '</td>';
+      html += '<tr style="border-top:1px solid var(--color-bg-input)"><td style="padding:4px;color:var(--color-fg-muted)">' + (j.id||'').slice(0,12) + '</td>';
       html += '<td style="color:' + color + '">' + (j.status||'?') + '</td>';
-      html += '<td style="color:#b0b0b0;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escHtml((j.task||'').slice(0,60)) + '</td>';
-      html += '<td style="color:#555">' + dur + '</td></tr>';
+      html += '<td style="color:var(--color-fg);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escHtml((j.task||'').slice(0,60)) + '</td>';
+      html += '<td style="color:var(--color-fg-faint)">' + dur + '</td></tr>';
     }
     html += '</table>';
     list.innerHTML = html;
-  } catch { list.innerHTML = '<div style="color:#ff4444">Failed to load jobs</div>'; }
+  } catch { list.innerHTML = '<div style="color:var(--color-error)">Failed to load jobs</div>'; }
 }
 
 // Session storage (localStorage for persistence across page reloads)
@@ -577694,7 +578827,7 @@ function switchSession(id) {
       // Restore metadata bar
       if (m.meta && m.role === 'assistant') {
         const metaBar = document.createElement('div');
-        metaBar.style.cssText = 'margin:6px 0 2px;padding:4px 8px;background:#1e1e22;border-radius:3px;font-size:0.6rem;color:#555;display:flex;gap:12px';
+        metaBar.style.cssText = 'margin:6px 0 2px;padding:4px 8px;background:var(--color-bg-elevated);border-radius:3px;font-size:0.6rem;color:var(--color-fg-faint);display:flex;gap:12px';
         const parts = [];
         if (m.meta.turns) parts.push(m.meta.turns + ' turns');
         if (m.meta.toolCalls) parts.push(m.meta.toolCalls + ' tool calls');
@@ -577705,24 +578838,24 @@ function switchSession(id) {
       // Restore tool call provenance with expandable args
       if (m.tools?.length && m.role === 'assistant') {
         const outerDetails = document.createElement('details');
-        outerDetails.style.cssText = 'margin:2px 0;font-size:0.6rem;color:#555';
+        outerDetails.style.cssText = 'margin:2px 0;font-size:0.6rem;color:var(--color-fg-faint)';
         const outerSummary = document.createElement('summary');
-        outerSummary.style.cssText = 'cursor:pointer;color:#888';
+        outerSummary.style.cssText = 'cursor:pointer;color:var(--color-fg-muted)';
         outerSummary.textContent = 'show ' + m.tools.length + ' tool calls';
         outerDetails.appendChild(outerSummary);
         for (const t of m.tools) {
           const toolObj = typeof t === 'string' ? { tool: t } : t;
           const td = document.createElement('details');
-          td.style.cssText = 'background:#1e1e22;border-left:2px solid #b2920a;margin:2px 0';
+          td.style.cssText = 'background:var(--color-bg-elevated);border-left:2px solid var(--color-brand);margin:2px 0';
           const ts = document.createElement('summary');
-          ts.style.cssText = 'padding:4px 8px;color:#b2920a;cursor:pointer;font-size:0.65rem';
+          ts.style.cssText = 'padding:4px 8px;color:var(--color-brand);cursor:pointer;font-size:0.65rem';
           ts.textContent = toolObj.tool || String(t);
           td.appendChild(ts);
           if (toolObj.args) {
             const ad = document.createElement('div');
-            ad.style.cssText = 'padding:4px 8px 6px 16px;color:#888;font-size:0.6rem';
+            ad.style.cssText = 'padding:4px 8px 6px 16px;color:var(--color-fg-muted);font-size:0.6rem';
             for (const [k, v] of Object.entries(toolObj.args)) {
-              ad.innerHTML += '<div style="padding:1px 0"><span style="color:#b2920a">' + k + ':</span> ' + String(v).slice(0, 200) + '</div>';
+              ad.innerHTML += '<div style="padding:1px 0"><span style="color:var(--color-brand)">' + k + ':</span> ' + String(v).slice(0, 200) + '</div>';
             }
             td.appendChild(ad);
           }
@@ -577808,13 +578941,13 @@ async function loadAgentWorkspaceRoot() {
     const rootPath = d.path || '.';
     cwdEl.innerHTML = '';
     const wsSpan = document.createElement('span');
-    wsSpan.style.cssText = 'color:#888';
+    wsSpan.style.cssText = 'color:var(--color-fg-muted)';
     wsSpan.textContent = 'ROOT: ' + rootPath;
     cwdEl.appendChild(wsSpan);
     cwdEl.appendChild(document.createElement('br'));
     const wdSpan = document.createElement('span');
     wdSpan.id = 'agent-workspace-dir-label';
-    wdSpan.style.cssText = 'color:#b2920a';
+    wdSpan.style.cssText = 'color:var(--color-brand)';
     wdSpan.textContent = 'CWD: ' + (agentWorkingDir || rootPath);
     cwdEl.appendChild(wdSpan);
 
@@ -577824,7 +578957,7 @@ async function loadAgentWorkspaceRoot() {
     renderAgentWorkspaceTree();
   } catch {
     const tree = document.getElementById('agent-workspace-tree');
-    if (tree) tree.innerHTML = '<div style="color:#555">Could not load files</div>';
+    if (tree) tree.innerHTML = '<div style="color:var(--color-fg-faint)">Could not load files</div>';
   }
 }
 
@@ -577855,7 +578988,7 @@ function renderAgentTreeNode(parentEl, absPath, depth, isRoot) {
 
     if (e.type === 'dir') {
       const caret = document.createElement('span');
-      caret.style.cssText = 'color:#666; font-size:0.55rem; width:10px; display:inline-block; text-align:center';
+      caret.style.cssText = 'color:var(--color-fg-subtle); font-size:0.55rem; width:10px; display:inline-block; text-align:center';
       caret.textContent = agentTreeExpanded.has(childAbs) ? '▾' : '▸';
       row.appendChild(caret);
       const icon = document.createElement('span');
@@ -577863,7 +578996,7 @@ function renderAgentTreeNode(parentEl, absPath, depth, isRoot) {
       row.appendChild(icon);
       const name = document.createElement('span');
       name.textContent = e.name;
-      name.style.cssText = 'color:#b2920a';
+      name.style.cssText = 'color:var(--color-brand)';
       if (agentWorkingDir && childAbs === agentWorkingDir) {
         name.style.cssText += ';font-weight:bold;text-decoration:underline';
       }
@@ -577907,8 +579040,8 @@ function renderAgentTreeNode(parentEl, absPath, depth, isRoot) {
       const name = document.createElement('span');
       name.textContent = e.name;
       name.style.cssText = agentContextFiles.includes(childAbs)
-        ? 'color:#b2920a;font-weight:bold'
-        : 'color:#b0b0b0';
+        ? 'color:var(--color-brand);font-weight:bold'
+        : 'color:var(--color-fg)';
       row.appendChild(name);
       // Click toggles file in/out of agent context
       row.addEventListener('click', () => {
@@ -577947,13 +579080,13 @@ async function loadWorkspaceRoot() {
     const rootPath = d.path || '.';
     cwdEl.innerHTML = '';
     const wsSpan = document.createElement('span');
-    wsSpan.style.cssText = 'color:#888';
+    wsSpan.style.cssText = 'color:var(--color-fg-muted)';
     wsSpan.textContent = 'ROOT: ' + rootPath;
     cwdEl.appendChild(wsSpan);
     cwdEl.appendChild(document.createElement('br'));
     const wdSpan = document.createElement('span');
     wdSpan.id = 'workspace-dir-label';
-    wdSpan.style.cssText = 'color:#b2920a';
+    wdSpan.style.cssText = 'color:var(--color-brand)';
     wdSpan.textContent = 'CWD: ' + (chatWorkingDir || rootPath);
     cwdEl.appendChild(wdSpan);
 
@@ -577964,7 +579097,7 @@ async function loadWorkspaceRoot() {
     treeRoot = rootPath;
     renderWorkspaceTree();
   } catch {
-    document.getElementById('workspace-tree').innerHTML = '<div style="color:#555">Could not load files</div>';
+    document.getElementById('workspace-tree').innerHTML = '<div style="color:var(--color-fg-faint)">Could not load files</div>';
   }
 }
 
@@ -578000,7 +579133,7 @@ function renderTreeNode(parentEl, absPath, depth, isRoot) {
     if (e.type === 'dir') {
       const caret = document.createElement('span');
       caret.className = 'tree-caret';
-      caret.style.cssText = 'color:#666; font-size:0.55rem; width:10px; display:inline-block; text-align:center';
+      caret.style.cssText = 'color:var(--color-fg-subtle); font-size:0.55rem; width:10px; display:inline-block; text-align:center';
       caret.textContent = treeExpanded.has(childAbs) ? '▾' : '▸';
       row.appendChild(caret);
       const icon = document.createElement('span');
@@ -578008,7 +579141,7 @@ function renderTreeNode(parentEl, absPath, depth, isRoot) {
       row.appendChild(icon);
       const name = document.createElement('span');
       name.textContent = e.name;
-      name.style.cssText = 'color:#b2920a';
+      name.style.cssText = 'color:var(--color-brand)';
       // Highlight the current workspace
       if (chatWorkingDir && childAbs === chatWorkingDir) {
         name.style.cssText += ';font-weight:bold;text-decoration:underline';
@@ -578047,7 +579180,7 @@ function renderTreeNode(parentEl, absPath, depth, isRoot) {
       name.textContent = e.name;
       name.style.cssText = contextFiles.includes(childAbs)
         ? 'color:#4e94c9;font-weight:bold'
-        : 'color:#b0b0b0';
+        : 'color:var(--color-fg)';
       row.appendChild(name);
       row.addEventListener('click', (ev) => {
         ev.stopPropagation();
@@ -578078,7 +579211,7 @@ function showTreeContextMenu(x, y, path, type) {
   if (!treeMenuEl) {
     treeMenuEl = document.createElement('div');
     treeMenuEl.id = 'tree-menu';
-    treeMenuEl.style.cssText = 'position:fixed; background:#1e1e22; border:1px solid #b2920a; border-radius:4px; padding:4px 0; box-shadow:0 4px 20px rgba(0,0,0,0.6); z-index:200; font-size:0.7rem; min-width:180px';
+    treeMenuEl.style.cssText = 'position:fixed; background:var(--color-bg-elevated); border:1px solid var(--color-brand); border-radius:4px; padding:4px 0; box-shadow:0 4px 20px rgba(0,0,0,0.6); z-index:200; font-size:0.7rem; min-width:180px';
     document.body.appendChild(treeMenuEl);
     document.addEventListener('click', () => { if (treeMenuEl) treeMenuEl.style.display = 'none'; });
   }
@@ -578098,9 +579231,9 @@ function showTreeContextMenu(x, y, path, type) {
   for (const it of items) {
     if (it.show === false) continue;
     const row = document.createElement('div');
-    row.style.cssText = 'padding:6px 16px; cursor:pointer; color:#b0b0b0';
+    row.style.cssText = 'padding:6px 16px; cursor:pointer; color:var(--color-fg)';
     row.textContent = it.label;
-    row.addEventListener('mouseenter', () => row.style.background = '#2a2a30');
+    row.addEventListener('mouseenter', () => row.style.background = 'var(--color-bg-input)');
     row.addEventListener('mouseleave', () => row.style.background = '');
     row.addEventListener('click', (ev) => {
       ev.stopPropagation();
@@ -578125,7 +579258,7 @@ function setChatWorkingDir(path) {
   if (s) {
     const old = s.textContent;
     s.textContent = path ? 'workspace → ' + path.split('/').slice(-2).join('/') : 'workspace cleared';
-    s.style.color = '#4ec94e';
+    s.style.color = 'var(--color-success)';
     setTimeout(() => { s.textContent = old; s.style.color = ''; }, 3000);
   }
   // Also push to the Agent tab input if visible
@@ -578192,18 +579325,18 @@ async function previewFile(path) {
       modal.style.cssText = 'position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:300; display:flex; align-items:center; justify-content:center; padding:40px';
       modal.addEventListener('click', (e) => { if (e.target === modal) modal.remove(); });
       const card = document.createElement('div');
-      card.style.cssText = 'background:#1e1e22; border:1px solid #2a2a30; border-radius:4px; max-width:90vw; max-height:90vh; overflow:hidden; display:flex; flex-direction:column';
+      card.style.cssText = 'background:var(--color-bg-elevated); border:1px solid var(--color-bg-input); border-radius:4px; max-width:90vw; max-height:90vh; overflow:hidden; display:flex; flex-direction:column';
       const title = document.createElement('div');
-      title.style.cssText = 'padding:10px 16px; border-bottom:1px solid #2a2a30; color:#b2920a; font-size:0.75rem; display:flex; justify-content:space-between; align-items:center; gap:16px';
+      title.style.cssText = 'padding:10px 16px; border-bottom:1px solid var(--color-bg-input); color:var(--color-brand); font-size:0.75rem; display:flex; justify-content:space-between; align-items:center; gap:16px';
       title.innerHTML = '<span>' + escHtml(path) + '</span>';
       const closeBtn = document.createElement('button');
       closeBtn.textContent = '×';
-      closeBtn.style.cssText = 'background:none; border:none; color:#666; font-size:1.2rem; cursor:pointer';
+      closeBtn.style.cssText = 'background:none; border:none; color:var(--color-fg-subtle); font-size:1.2rem; cursor:pointer';
       closeBtn.onclick = () => modal.remove();
       title.appendChild(closeBtn);
       card.appendChild(title);
       const pre = document.createElement('pre');
-      pre.style.cssText = 'padding:12px 16px; color:#b0b0b0; overflow:auto; font-size:0.7rem; margin:0; background:#17171a';
+      pre.style.cssText = 'padding:12px 16px; color:var(--color-fg); overflow:auto; font-size:0.7rem; margin:0; background:var(--color-bg)';
       pre.textContent = d.content || '(empty)';
       card.appendChild(pre);
       modal.appendChild(card);
@@ -578223,7 +579356,7 @@ function toggleSandbox() {
   const btn = document.getElementById('sandbox-toggle');
   btn.textContent = 'sandbox: ' + (sandboxMode === 'none' ? 'off' : 'docker');
   btn.style.opacity = sandboxMode === 'none' ? '0.5' : '1';
-  btn.style.borderColor = sandboxMode === 'none' ? '#3a3a42' : '#b2920a';
+  btn.style.borderColor = sandboxMode === 'none' ? 'var(--color-border)' : 'var(--color-brand)';
 }
 
 // Live system metrics polling
@@ -578387,8 +579520,8 @@ async function doUpdate() {
 
   btn.textContent = 'updated v' + newVersion;
   btn.style.background = '#1a3a1a';
-  btn.style.borderColor = '#4ec94e';
-  btn.style.color = '#4ec94e';
+  btn.style.borderColor = 'var(--color-success)';
+  btn.style.color = 'var(--color-success)';
   try { seenVersion = newVersion || seenVersion; } catch {}
 
   // Flash status bar
@@ -578396,7 +579529,7 @@ async function doUpdate() {
   if (statusEl) {
     const origStatusColor = statusEl.style.color;
     statusEl.textContent = 'updated → v' + newVersion;
-    statusEl.style.color = '#4ec94e';
+    statusEl.style.color = 'var(--color-success)';
     setTimeout(() => { statusEl.style.color = origStatusColor; }, 5000);
   }
 
@@ -578606,7 +579739,7 @@ function renderInlineError(message) {
   }
   const wrap = document.createElement('div');
   wrap.className = 'msg assistant';
-  wrap.innerHTML = '<div style="background:#2a1e1e;border-left:3px solid #ff4444;color:#ff7777;padding:6px 10px 6px 14px;margin:3px 0;font-family:inherit"><div style="color:#ff4444;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px">\\u25B8 error</div><div style="color:#ff7777;white-space:pre-wrap;word-break:break-word">' + escHtml(message) + '</div></div>';
+  wrap.innerHTML = '<div style="background:#2a1e1e;border-left:3px solid var(--color-error);color:#ff7777;padding:6px 10px 6px 14px;margin:3px 0;font-family:inherit"><div style="color:var(--color-error);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px">\\u25B8 error</div><div style="color:#ff7777;white-space:pre-wrap;word-break:break-word">' + escHtml(message) + '</div></div>';
   conv.appendChild(wrap);
   maybeAutoScroll();
 }
@@ -578702,7 +579835,7 @@ function renderTasksRow(todos) {
   const total = todos.length;
   const counter = document.createElement('span');
   counter.className = 'tasks-label';
-  counter.style.color = completed === total ? '#5fa55f' : '#b2920a';
+  counter.style.color = completed === total ? '#5fa55f' : 'var(--color-brand)';
   counter.textContent = completed + '/' + total;
   tasksRowEl.appendChild(counter);
   // One pill per task — color-coded by status
@@ -578750,13 +579883,13 @@ async function refreshTodos(sessionId) {
           const li = document.createElement('li');
           li.style.cssText = 'padding:2px 0;display:flex;gap:8px;align-items:flex-start';
           const mark = document.createElement('span');
-          mark.style.cssText = 'color:#b2920a;font-family:monospace;flex-shrink:0';
+          mark.style.cssText = 'color:var(--color-brand);font-family:monospace;flex-shrink:0';
           mark.textContent = statusMark(t.status);
           li.appendChild(mark);
           const content = document.createElement('span');
           content.style.cssText = t.status === 'completed'
-            ? 'color:#666;text-decoration:line-through'
-            : 'color:#b0b0b0';
+            ? 'color:var(--color-fg-subtle);text-decoration:line-through'
+            : 'color:var(--color-fg)';
           content.textContent = t.content + (t.blocker ? ' (blocked: ' + t.blocker + ')' : '');
           li.appendChild(content);
           todoListEl.appendChild(li);
@@ -579043,9 +580176,9 @@ async function refreshVoiceState() {
     const pill = document.getElementById('voice-state-pill');
     if (pill) {
       pill.textContent = data.state;
-      pill.style.borderLeftColor = data.state === 'listening' ? '#4ec94e'
-        : data.state === 'speaking' ? '#b2920a'
-        : data.state === 'error' ? '#ff4444' : '#555';
+      pill.style.borderLeftColor = data.state === 'listening' ? 'var(--color-success)'
+        : data.state === 'speaking' ? 'var(--color-brand)'
+        : data.state === 'error' ? 'var(--color-error)' : 'var(--color-fg-faint)';
     }
   } catch {}
 }
@@ -579087,33 +580220,33 @@ async function loadCloneRefs() {
   if (!list) return;
   try {
     const r = await fetch('/v1/voice/clone-refs', { headers: headers() });
-    if (!r.ok) { list.innerHTML = '<div style="color:#666">failed to load refs</div>'; return; }
+    if (!r.ok) { list.innerHTML = '<div style="color:var(--color-fg-subtle)">failed to load refs</div>'; return; }
     const data = await r.json();
     const refs = data.refs || [];
     if (refs.length === 0) {
-      list.innerHTML = '<div style="color:#666;padding:14px;text-align:center;border:1px dashed #3a3a42;border-radius:4px">No clone references yet. Upload a clean 3+ second voice sample to clone it.</div>';
+      list.innerHTML = '<div style="color:var(--color-fg-subtle);padding:14px;text-align:center;border:1px dashed var(--color-border);border-radius:4px">No clone references yet. Upload a clean 3+ second voice sample to clone it.</div>';
       return;
     }
     list.innerHTML = refs.map(ref => {
-      const accent = ref.isActive ? '#b2920a' : '#3a3a42';
-      const statusBadge = ref.isActive ? ' <span style="color:#4ec94e;font-size:0.6rem">(active)</span>' : '';
+      const accent = ref.isActive ? 'var(--color-brand)' : 'var(--color-border)';
+      const statusBadge = ref.isActive ? ' <span style="color:var(--color-success);font-size:0.6rem">(active)</span>' : '';
       const sizeKb = (ref.size / 1024).toFixed(1);
       const fnAttr = escAttr(ref.filename);
       const nameAttr = escAttr(ref.name);
-      return '<div style="background:#1a1a1e;border-left:2px solid ' + accent + ';padding:8px 12px;margin:6px 0;display:flex;justify-content:space-between;align-items:center">' +
+      return '<div style="background:var(--color-bg);border-left:2px solid ' + accent + ';padding:8px 12px;margin:6px 0;display:flex;justify-content:space-between;align-items:center">' +
         '<div>' +
-        '<div style="color:' + (ref.isActive ? '#b2920a' : '#b0b0b0') + ';font-weight:' + (ref.isActive ? '600' : '400') + '">' + escHtml(ref.name) + statusBadge + '</div>' +
-        '<div style="color:#666;font-size:0.6rem">' + escHtml(ref.filename) + ' &middot; ' + sizeKb + ' KB</div>' +
+        '<div style="color:' + (ref.isActive ? 'var(--color-brand)' : 'var(--color-fg)') + ';font-weight:' + (ref.isActive ? '600' : '400') + '">' + escHtml(ref.name) + statusBadge + '</div>' +
+        '<div style="color:var(--color-fg-subtle);font-size:0.6rem">' + escHtml(ref.filename) + ' &middot; ' + sizeKb + ' KB</div>' +
         '</div>' +
         '<div style="display:flex;gap:6px">' +
-        (ref.isActive ? '' : '<button onclick="activateCloneRef('' + fnAttr + '')" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer">activate</button>') +
-        '<button onclick="renameCloneRef('' + fnAttr + '','' + nameAttr + '')" style="background:#2a2a30;border:1px solid #3a3a42;color:#888;padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer">rename</button>' +
-        '<button onclick="deleteCloneRef('' + fnAttr + '')" style="background:#2a2a30;border:1px solid #5a2a2a;color:#b25f5f;padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer">del</button>' +
+        (ref.isActive ? '' : '<button onclick="activateCloneRef(\\'' + fnAttr + '\\')" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-brand);padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer">activate</button>') +
+        '<button onclick="renameCloneRef(\\'' + fnAttr + '\\',\\'' + nameAttr + '\\')" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg-muted);padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer">rename</button>' +
+        '<button onclick="deleteCloneRef(\\'' + fnAttr + '\\')" style="background:var(--color-bg-input);border:1px solid var(--color-error);color:var(--color-error);padding:4px 10px;border-radius:3px;font-family:inherit;font-size:0.6rem;cursor:pointer">del</button>' +
         '</div>' +
         '</div>';
     }).join('');
   } catch (e) {
-    list.innerHTML = '<div style="color:#ff6b6b">failed: ' + (e?.message || e) + '</div>';
+    list.innerHTML = '<div style="color:var(--color-error)">failed: ' + (e?.message || e) + '</div>';
   }
 }
 
@@ -579125,7 +580258,7 @@ async function uploadCloneRef(files) {
   if (file.size < 4096) { alert('Audio file too small (min ~4 KB)'); return; }
   if (file.size > 50 * 1024 * 1024) { alert('Audio file too large (max 50 MB)'); return; }
   const list = document.getElementById('clone-refs-list');
-  if (list) list.innerHTML = '<div style="color:#666;padding:14px;text-align:center">uploading ' + escHtml(file.name) + '...</div>';
+  if (list) list.innerHTML = '<div style="color:var(--color-fg-subtle);padding:14px;text-align:center">uploading ' + escHtml(file.name) + '...</div>';
   try {
     const buf = await file.arrayBuffer();
     let binary = '';
@@ -579221,7 +580354,7 @@ async function startVoiceChat() {
     }
     if (_voiceAudioCtx.state === 'suspended') await _voiceAudioCtx.resume();
     $voiceConnected.set(true);
-    if (btn) { btn.textContent = 'stop voicechat'; btn.style.borderColor = '#ff4444'; btn.style.color = '#ff4444'; btn.disabled = false; }
+    if (btn) { btn.textContent = 'stop voicechat'; btn.style.borderColor = 'var(--color-error)'; btn.style.color = 'var(--color-error)'; btn.disabled = false; }
     document.getElementById('voice-mic-pill').style.display = 'inline-block';
     document.getElementById('voice-transcript-pane').style.display = 'block';
     addVoiceTranscriptLine('system', 'connected — speak naturally');
@@ -579239,7 +580372,7 @@ async function stopVoiceChat(silent) {
   try { if (_voiceWs) _voiceWs.close(); _voiceWs = null; } catch {}
   $voiceConnected.set(false);
   const btn = document.getElementById('voice-toggle-btn');
-  if (btn) { btn.textContent = 'start voicechat'; btn.style.borderColor = '#b2920a'; btn.style.color = '#b2920a'; btn.disabled = false; }
+  if (btn) { btn.textContent = 'start voicechat'; btn.style.borderColor = 'var(--color-brand)'; btn.style.color = 'var(--color-brand)'; btn.disabled = false; }
   const micPill = document.getElementById('voice-mic-pill');
   if (micPill) micPill.style.display = 'none';
   if (!silent) addVoiceTranscriptLine('system', 'disconnected');
@@ -579333,12 +580466,12 @@ function addVoiceTranscriptLine(speaker, text) {
   const pane = document.getElementById('voice-transcript-pane');
   if (!pane) return;
   const div = document.createElement('div');
-  const accent = speaker === 'agent' ? '#b2920a'
-    : (speaker === 'you' || speaker === 'you (partial)') ? '#4ec94e'
-    : speaker === 'error' ? '#ff4444' : '#888';
-  div.style.cssText = 'margin:4px 0;padding:4px 6px;border-left:2px solid ' + accent + ';background:#1a1a1e';
-  div.innerHTML = '<span style="color:#888;font-size:0.55rem">' + escHtml(speaker) + '</span> ' +
-    '<span style="color:#b0b0b0">' + escHtml(text) + '</span>';
+  const accent = speaker === 'agent' ? 'var(--color-brand)'
+    : (speaker === 'you' || speaker === 'you (partial)') ? 'var(--color-success)'
+    : speaker === 'error' ? 'var(--color-error)' : 'var(--color-fg-muted)';
+  div.style.cssText = 'margin:4px 0;padding:4px 6px;border-left:2px solid ' + accent + ';background:var(--color-bg)';
+  div.innerHTML = '<span style="color:var(--color-fg-muted);font-size:0.55rem">' + escHtml(speaker) + '</span> ' +
+    '<span style="color:var(--color-fg)">' + escHtml(text) + '</span>';
   pane.appendChild(div);
   pane.scrollTop = pane.scrollHeight;
   while (pane.children.length > 200) pane.removeChild(pane.firstChild);
@@ -579415,8 +580548,1063 @@ setInterval(pollMetrics, 10000);
 setInterval(loadScheduled, 15000);
 setInterval(loadServices, 30000);
 setInterval(pollVersionBump, 5000);
+
+// ════════════════════════════════════════════════════════════
+// OWUI-3: Prism.js syntax highlight loader (CDN with offline-
+// graceful fallback). When Prism isn't available we silently
+// fall back to plain text — the served HTML doesn't need it
+// to be syntactically meaningful.
+// ════════════════════════════════════════════════════════════
+let _prismLoadAttempted = false;
+let _prismReady = false;
+function _ensurePrismLoaded() {
+  if (_prismLoadAttempted) return;
+  _prismLoadAttempted = true;
+  // Skip on file:// and totally offline contexts.
+  if (location.protocol === 'file:') return;
+  const cssLink = document.createElement('link');
+  cssLink.rel = 'stylesheet';
+  cssLink.href = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css';
+  cssLink.onerror = () => { /* ignore — fallback is plain code */ };
+  document.head.appendChild(cssLink);
+  const script = document.createElement('script');
+  script.src = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js';
+  script.onload = () => {
+    const auto = document.createElement('script');
+    auto.src = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js';
+    auto.onload = () => {
+      try {
+        if (window.Prism && window.Prism.plugins && window.Prism.plugins.autoloader) {
+          window.Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/';
+        }
+      } catch {}
+      _prismReady = true;
+      // Highlight any code blocks that already exist.
+      try { _highlightCodeBlocks(document); } catch {}
+    };
+    auto.onerror = () => { /* fallback: leave code unhighlighted */ };
+    document.head.appendChild(auto);
+  };
+  script.onerror = () => { /* fallback: leave code unhighlighted */ };
+  document.head.appendChild(script);
+}
+
+function _highlightCodeBlocks(root) {
+  if (!root) return;
+  if (!_prismReady) {
+    // Defer until prism finishes loading.
+    if (!_prismLoadAttempted) _ensurePrismLoaded();
+    return;
+  }
+  const codes = root.querySelectorAll ? root.querySelectorAll('pre > code[data-lang]') : [];
+  codes.forEach(c => {
+    if (c.dataset.prismHighlighted === '1') return;
+    const lang = (c.getAttribute('data-lang') || '').toLowerCase();
+    if (!lang) return;
+    c.classList.add('language-' + lang);
+    try {
+      window.Prism && window.Prism.highlightElement && window.Prism.highlightElement(c);
+      c.dataset.prismHighlighted = '1';
+    } catch {}
+  });
+}
+
+// Kick the Prism loader once on init — no-op if it's already running.
+_ensurePrismLoaded();
+
+// ════════════════════════════════════════════════════════════
+// OWUI-3: Streaming indicator — pulsing dot + status label.
+// Owned by send()/agent flows. Mounts inside the active
+// assistant .msg div; auto-removed when the next chunk lands
+// or when streaming flips to false.
+// ════════════════════════════════════════════════════════════
+function showStreamingIndicator(msgDiv, label) {
+  if (!msgDiv) return null;
+  let ind = msgDiv.querySelector('.msg-streaming-indicator');
+  if (!ind) {
+    ind = document.createElement('div');
+    ind.className = 'msg-streaming-indicator';
+    ind.innerHTML = '<span class="dot"></span><span class="label"></span>';
+    msgDiv.appendChild(ind);
+  }
+  ind.querySelector('.label').textContent = label || 'thinking';
+  return ind;
+}
+function hideStreamingIndicator(msgDiv) {
+  if (!msgDiv) return;
+  const ind = msgDiv.querySelector('.msg-streaming-indicator');
+  if (ind) ind.remove();
+}
+
+// ════════════════════════════════════════════════════════════
+// OWUI-2: Sidebar wiring — toggle, resize, status sync, recent
+// chat list. State persists in localStorage (per-project scoped
+// via the existing project-namespaced storage helpers).
+// ════════════════════════════════════════════════════════════
+const SIDEBAR_KEYS = { collapsed: 'oa.sidebar.collapsed', width: 'oa.sidebar.width' };
+
+function _getLS(k, fallback) {
+  try { const v = (typeof projLS === 'function' ? projLS() : localStorage).getItem(k); return v == null ? fallback : v; }
+  catch { return fallback; }
+}
+function _setLS(k, v) {
+  try { (typeof projLS === 'function' ? projLS() : localStorage).setItem(k, v); } catch {}
+}
+
+function toggleSidebar() {
+  const sb = document.getElementById('oa-sidebar');
+  if (!sb) return;
+  const next = sb.getAttribute('data-collapsed') !== 'true';
+  sb.setAttribute('data-collapsed', String(next));
+  _setLS(SIDEBAR_KEYS.collapsed, next ? '1' : '0');
+}
+
+function _restoreSidebarState() {
+  const sb = document.getElementById('oa-sidebar');
+  if (!sb) return;
+  const collapsed = _getLS(SIDEBAR_KEYS.collapsed, '0') === '1';
+  sb.setAttribute('data-collapsed', String(collapsed));
+  const w = parseInt(_getLS(SIDEBAR_KEYS.width, '260'), 10);
+  if (!collapsed && Number.isFinite(w) && w >= 200 && w <= 480) {
+    sb.style.width = w + 'px';
+  }
+}
+
+function _wireSidebarResize() {
+  const handle = document.getElementById('sidebar-resize');
+  const sb = document.getElementById('oa-sidebar');
+  if (!handle || !sb) return;
+  let dragging = false;
+  let startX = 0, startW = 0;
+  handle.addEventListener('mousedown', (e) => {
+    if (sb.getAttribute('data-collapsed') === 'true') return;
+    dragging = true;
+    startX = e.clientX;
+    startW = sb.getBoundingClientRect().width;
+    handle.classList.add('dragging');
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  });
+  window.addEventListener('mousemove', (e) => {
+    if (!dragging) return;
+    const next = Math.max(200, Math.min(480, startW + (e.clientX - startX)));
+    sb.style.width = next + 'px';
+  });
+  window.addEventListener('mouseup', () => {
+    if (!dragging) return;
+    dragging = false;
+    handle.classList.remove('dragging');
+    document.body.style.userSelect = '';
+    const w = Math.round(sb.getBoundingClientRect().width);
+    _setLS(SIDEBAR_KEYS.width, String(w));
+  });
+}
+
+// Mirror the legacy #status into the sidebar footer (text + dot color).
+function _syncSidebarStatus() {
+  const src = document.getElementById('status');
+  const dst = document.getElementById('sidebar-status-text');
+  const dot = document.getElementById('sidebar-status-dot');
+  if (!src || !dst) return;
+  const text = (src.textContent || '').trim();
+  dst.textContent = text || 'idle';
+  if (dot) {
+    let color = 'var(--color-fg-faint)';
+    if (/connect/i.test(text)) color = 'var(--color-warning)';
+    else if (/online|ready|ok/i.test(text)) color = 'var(--color-success)';
+    else if (/error|fail|down/i.test(text)) color = 'var(--color-error)';
+    else if (text) color = 'var(--color-success)';
+    dot.style.background = color;
+  }
+  // Mirror the legacy update-btn visibility into the sidebar.
+  const upd = document.getElementById('update-btn');
+  const sUpd = document.getElementById('sidebar-update-btn');
+  if (upd && sUpd) sUpd.style.display = upd.style.display === 'none' ? 'none' : 'inline-block';
+}
+
+// Populate the sidebar recent-chat list from $chatSessions.
+// ════════════════════════════════════════════════════════════
+// OWUI-6: Folders + pinned + inline rename/delete
+// State lives in per-project localStorage:
+//   oa.pinned         -> [chatId, ...]
+//   oa.folders        -> [{ id, name }]
+//   oa.chatFolderMap  -> { chatId: folderId }
+//   oa.foldersOpen    -> { folderId: bool }
+// ════════════════════════════════════════════════════════════
+const CHAT_KEYS = {
+  pinned: 'oa.pinned',
+  folders: 'oa.folders',
+  map: 'oa.chatFolderMap',
+  foldersOpen: 'oa.foldersOpen',
+};
+
+function _readJSON(key, fallback) {
+  try {
+    const raw = (typeof projLS === 'function' ? projLS() : localStorage).getItem(key);
+    if (!raw) return fallback;
+    return JSON.parse(raw);
+  } catch { return fallback; }
+}
+function _writeJSON(key, val) {
+  try { (typeof projLS === 'function' ? projLS() : localStorage).setItem(key, JSON.stringify(val)); } catch {}
+}
+
+function getChatPinned()    { return _readJSON(CHAT_KEYS.pinned, []); }
+function getChatFolders()   { return _readJSON(CHAT_KEYS.folders, []); }
+function getChatFolderMap() { return _readJSON(CHAT_KEYS.map, {}); }
+function getFoldersOpenState() { return _readJSON(CHAT_KEYS.foldersOpen, {}); }
+
+function setChatPinned(arr)     { _writeJSON(CHAT_KEYS.pinned, arr || []); }
+function setChatFolders(arr)    { _writeJSON(CHAT_KEYS.folders, arr || []); }
+function setChatFolderMap(map)  { _writeJSON(CHAT_KEYS.map, map || {}); }
+function setFoldersOpenState(s) { _writeJSON(CHAT_KEYS.foldersOpen, s || {}); }
+
+function pinChat(id) {
+  const p = getChatPinned();
+  if (!p.includes(id)) { p.push(id); setChatPinned(p); }
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+function unpinChat(id) {
+  const p = getChatPinned().filter(x => x !== id);
+  setChatPinned(p);
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+function isPinned(id) { return getChatPinned().includes(id); }
+
+function createChatFolder(name) {
+  const list = getChatFolders();
+  const id = 'fld-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 6);
+  list.push({ id, name: String(name || 'New folder') });
+  setChatFolders(list);
+  _renderSidebarChats(_lastSidebarFilter || '');
+  return id;
+}
+function renameChatFolder(folderId, newName) {
+  const list = getChatFolders().map(f => f.id === folderId ? { ...f, name: String(newName || f.name) } : f);
+  setChatFolders(list);
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+function deleteChatFolder(folderId) {
+  // Move every chat out of this folder, then remove the folder.
+  const map = getChatFolderMap();
+  for (const k of Object.keys(map)) {
+    if (map[k] === folderId) delete map[k];
+  }
+  setChatFolderMap(map);
+  setChatFolders(getChatFolders().filter(f => f.id !== folderId));
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+function moveChatToFolder(chatId, folderId) {
+  const map = getChatFolderMap();
+  if (folderId == null || folderId === '__none__') delete map[chatId];
+  else map[chatId] = folderId;
+  setChatFolderMap(map);
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+function toggleChatFolder(folderId) {
+  const open = getFoldersOpenState();
+  open[folderId] = !open[folderId];
+  setFoldersOpenState(open);
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+
+// Inline rename / delete — best-effort: updates the in-memory store and
+// localStorage. The server-side session store is touched too via the
+// existing deleteChatSession() / saveSessions().
+function renameChatTitle(chatId, newTitle) {
+  if (typeof $chatSessions === 'undefined' || !$chatSessions.set || !$chatSessions.get) return;
+  const all = { ...$chatSessions.get() };
+  const s = all[chatId];
+  if (!s) return;
+  all[chatId] = { ...s, title: String(newTitle || s.title || '') };
+  $chatSessions.set(all);
+  try { if (typeof saveSessions === 'function') saveSessions(); } catch {}
+}
+function deleteChatById(chatId) {
+  // Drop from the active session if it matches; otherwise just remove
+  // from the store and let the saveSessions hook persist.
+  if (typeof $chatSessions === 'undefined' || !$chatSessions.set || !$chatSessions.get) return;
+  const all = { ...$chatSessions.get() };
+  delete all[chatId];
+  $chatSessions.set(all);
+  // Also drop from pinned + folder map.
+  setChatPinned(getChatPinned().filter(x => x !== chatId));
+  const map = getChatFolderMap(); delete map[chatId]; setChatFolderMap(map);
+  try { if (typeof saveSessions === 'function') saveSessions(); } catch {}
+  // If we just deleted the active chat, route the user to a fresh new chat.
+  try {
+    const active = (typeof $currentSession !== 'undefined' && $currentSession.get) ? $currentSession.get() : null;
+    if (active === chatId && typeof newChatSession === 'function') newChatSession();
+  } catch {}
+}
+
+// Context-menu popover for chat rows
+function _showChatRowMenu(evt, chatId) {
+  evt.stopPropagation();
+  evt.preventDefault();
+  _hideChatRowMenu();
+  const menu = document.createElement('div');
+  menu.id = 'sb-chat-menu';
+  menu.style.cssText = 'position:fixed;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.4);min-width:160px;z-index:120;font-family:var(--font-ui);font-size:0.78rem;overflow:hidden';
+  const folders = getChatFolders();
+  const safeChat = String(chatId).replace(/'/g, "\\\\'");
+  const pinLabel = isPinned(chatId) ? 'Unpin' : 'Pin';
+  const pinFn = isPinned(chatId) ? 'unpinChat' : 'pinChat';
+  let html = '';
+  html += '<button class="sb-menu-item" onclick="_chatMenuRename(\\'' + safeChat + '\\')">Rename</button>';
+  html += '<button class="sb-menu-item" onclick="' + pinFn + '(\\'' + safeChat + '\\'); _hideChatRowMenu()">' + pinLabel + '</button>';
+  if (folders.length === 0) {
+    html += '<button class="sb-menu-item" onclick="_chatMenuNewFolder(\\'' + safeChat + '\\')">Move to new folder</button>';
+  } else {
+    html += '<div class="sb-menu-sub">Move to folder</div>';
+    html += '<button class="sb-menu-item sub" onclick="moveChatToFolder(\\'' + safeChat + '\\', null); _hideChatRowMenu()">(none)</button>';
+    for (const f of folders) {
+      const safeF = String(f.id).replace(/'/g, "\\\\'");
+      const safeName = String(f.name).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      html += '<button class="sb-menu-item sub" onclick="moveChatToFolder(\\'' + safeChat + '\\', \\'' + safeF + '\\'); _hideChatRowMenu()">' + safeName + '</button>';
+    }
+    html += '<button class="sb-menu-item sub" onclick="_chatMenuNewFolder(\\'' + safeChat + '\\')">+ New folder...</button>';
+  }
+  html += '<button class="sb-menu-item danger" onclick="_chatMenuDelete(\\'' + safeChat + '\\')">Delete</button>';
+  menu.innerHTML = html;
+  document.body.appendChild(menu);
+  // Position near the click
+  const x = Math.min(evt.clientX, window.innerWidth - 200);
+  const y = Math.min(evt.clientY, window.innerHeight - 220);
+  menu.style.left = x + 'px';
+  menu.style.top  = y + 'px';
+  setTimeout(() => document.addEventListener('click', _hideChatRowMenu, { once: true }), 0);
+}
+function _hideChatRowMenu() {
+  const m = document.getElementById('sb-chat-menu');
+  if (m) m.remove();
+}
+function _chatMenuRename(chatId) {
+  _hideChatRowMenu();
+  const sessions = (typeof $chatSessions !== 'undefined' && $chatSessions.get) ? $chatSessions.get() : {};
+  const cur = (sessions[chatId] && (sessions[chatId].title || sessions[chatId].name)) || '';
+  const next = prompt('Rename chat to:', cur || '');
+  if (next === null) return;
+  renameChatTitle(chatId, next);
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+function _chatMenuDelete(chatId) {
+  _hideChatRowMenu();
+  if (!confirm('Delete this chat?')) return;
+  deleteChatById(chatId);
+  _renderSidebarChats(_lastSidebarFilter || '');
+}
+function _chatMenuNewFolder(chatId) {
+  _hideChatRowMenu();
+  const name = prompt('New folder name:', 'Folder');
+  if (!name) return;
+  const id = createChatFolder(name);
+  if (chatId) moveChatToFolder(chatId, id);
+}
+
+// Folder row context menu
+function _showFolderRowMenu(evt, folderId) {
+  evt.stopPropagation();
+  evt.preventDefault();
+  _hideChatRowMenu();
+  const menu = document.createElement('div');
+  menu.id = 'sb-chat-menu';
+  menu.style.cssText = 'position:fixed;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.4);min-width:160px;z-index:120;font-family:var(--font-ui);font-size:0.78rem;overflow:hidden';
+  const safeF = String(folderId).replace(/'/g, "\\\\'");
+  menu.innerHTML =
+    '<button class="sb-menu-item" onclick="_folderMenuRename(\\'' + safeF + '\\')">Rename folder</button>' +
+    '<button class="sb-menu-item danger" onclick="_folderMenuDelete(\\'' + safeF + '\\')">Delete folder</button>';
+  document.body.appendChild(menu);
+  const x = Math.min(evt.clientX, window.innerWidth - 200);
+  const y = Math.min(evt.clientY, window.innerHeight - 100);
+  menu.style.left = x + 'px';
+  menu.style.top  = y + 'px';
+  setTimeout(() => document.addEventListener('click', _hideChatRowMenu, { once: true }), 0);
+}
+function _folderMenuRename(folderId) {
+  _hideChatRowMenu();
+  const f = getChatFolders().find(x => x.id === folderId);
+  if (!f) return;
+  const next = prompt('Rename folder to:', f.name);
+  if (next == null) return;
+  renameChatFolder(folderId, next);
+}
+function _folderMenuDelete(folderId) {
+  _hideChatRowMenu();
+  if (!confirm('Delete folder? Chats inside will move to the unsorted list.')) return;
+  deleteChatFolder(folderId);
+}
+
+// Drag handlers — chat rows are draggable, folder headers are drop targets.
+function _onChatDragStart(ev, chatId) {
+  ev.dataTransfer.setData('text/plain', 'oa-chat:' + chatId);
+  ev.dataTransfer.effectAllowed = 'move';
+}
+function _onFolderDragOver(ev) {
+  ev.preventDefault();
+  ev.dataTransfer.dropEffect = 'move';
+  ev.currentTarget.classList.add('drop-target');
+}
+function _onFolderDragLeave(ev) {
+  ev.currentTarget.classList.remove('drop-target');
+}
+function _onFolderDrop(ev, folderId) {
+  ev.preventDefault();
+  ev.currentTarget.classList.remove('drop-target');
+  const data = ev.dataTransfer.getData('text/plain') || '';
+  if (!data.startsWith('oa-chat:')) return;
+  const chatId = data.slice('oa-chat:'.length);
+  moveChatToFolder(chatId, folderId);
+}
+
+// Build the new-folder UI button (lives at the top of the chats nav)
+function _renderSidebarFoldersToolbar() {
+  const host = document.getElementById('sidebar-folder-tools');
+  if (!host) return;
+  host.innerHTML =
+    '<button class="sb-folder-action" onclick="(function(){const n=prompt(\\'New folder name:\\',\\'Folder\\');if(n)createChatFolder(n);})()" title="New folder">+ folder</button>';
+}
+
+let _lastSidebarFilter = '';
+
+function _renderSidebarChats(filter) {
+  const list = document.getElementById('sidebar-recent-list');
+  if (!list) return;
+  _lastSidebarFilter = filter || '';
+  _renderSidebarFoldersToolbar();
+
+  const sessions = (typeof $chatSessions !== 'undefined' && $chatSessions.get) ? $chatSessions.get() : {};
+  const allIds = Object.keys(sessions || {});
+  const q = (filter || '').trim().toLowerCase();
+  const activeId = (typeof $currentSession !== 'undefined' && $currentSession.get) ? $currentSession.get() : null;
+
+  const folders = getChatFolders();
+  const pinned = getChatPinned();
+  const folderMap = getChatFolderMap();
+  const folderOpen = getFoldersOpenState();
+
+  // Sort helper
+  const sortByRecency = (a, b) => {
+    const sa = sessions[a] || {}, sb = sessions[b] || {};
+    const ta = sa.updated_at || sa.created_at || a;
+    const tb = sb.updated_at || sb.created_at || b;
+    return String(tb).localeCompare(String(ta));
+  };
+  allIds.sort(sortByRecency);
+
+  // Filter helper — match title OR last message snippet (best effort).
+  const matches = (id) => {
+    if (!q) return true;
+    const s = sessions[id] || {};
+    const title = String(s.title || s.name || '');
+    if (title.toLowerCase().includes(q)) return true;
+    const last = (Array.isArray(s.messages) && s.messages.length)
+      ? String(s.messages[s.messages.length - 1].content || '')
+      : '';
+    return last.toLowerCase().includes(q);
+  };
+
+  // Build rendering buckets
+  const inFolder = {};
+  for (const f of folders) inFolder[f.id] = [];
+  const unsorted = [];
+  for (const id of allIds) {
+    if (!matches(id)) continue;
+    const fId = folderMap[id];
+    if (fId && inFolder[fId]) inFolder[fId].push(id);
+    else unsorted.push(id);
+  }
+
+  const renderRow = (id) => {
+    const s = sessions[id] || {};
+    const title = (s.title || s.name || ('Chat ' + String(id).slice(0, 8))).toString();
+    const cls = 'sb-chat' + (id === activeId ? ' active' : '');
+    const safeId = String(id).replace(/'/g, "\\\\'");
+    const safeTitle = title.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return '<div class="' + cls + '" draggable="true" ondragstart="_onChatDragStart(event,\\'' + safeId + '\\')" onclick="switchTab(\\'chat\\'); switchSession(\\'' + safeId + '\\')" title="' + safeTitle + '">' +
+      '<span class="sb-chat-title">' + safeTitle + '</span>' +
+      '<button class="sb-chat-menu" onclick="_showChatRowMenu(event,\\'' + safeId + '\\')" title="More">&#x22EE;</button>' +
+    '</div>';
+  };
+
+  // Pinned section
+  const pinnedHost = document.getElementById('sidebar-pinned-list');
+  const pinnedSect = document.getElementById('sidebar-pinned-section');
+  if (pinnedHost && pinnedSect) {
+    const pinnedFiltered = pinned.filter(id => allIds.includes(id) && matches(id));
+    if (pinnedFiltered.length === 0) {
+      pinnedSect.style.display = 'none';
+      pinnedHost.innerHTML = '';
+    } else {
+      pinnedSect.style.display = 'block';
+      pinnedHost.innerHTML = pinnedFiltered.map(renderRow).join('');
+    }
+  }
+
+  // Build folders + unsorted
+  const items = [];
+  for (const f of folders) {
+    const ids = inFolder[f.id] || [];
+    if (q && ids.length === 0) continue; // hide empty folders during a search
+    const open = folderOpen[f.id] !== false; // default open
+    const safeF = String(f.id).replace(/'/g, "\\\\'");
+    const safeName = String(f.name).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    items.push(
+      '<div class="sb-folder" data-folder="' + safeF + '" ondragover="_onFolderDragOver(event)" ondragleave="_onFolderDragLeave(event)" ondrop="_onFolderDrop(event,\\'' + safeF + '\\')">' +
+        '<div class="sb-folder-row" onclick="toggleChatFolder(\\'' + safeF + '\\')">' +
+          '<span class="sb-folder-caret">' + (open ? '▾' : '▸') + '</span>' +
+          '<span class="sb-folder-name">' + safeName + '</span>' +
+          '<span class="sb-folder-count">' + ids.length + '</span>' +
+          '<button class="sb-folder-menu" onclick="_showFolderRowMenu(event,\\'' + safeF + '\\')" title="More">&#x22EE;</button>' +
+        '</div>' +
+        (open ? '<div class="sb-folder-body">' + (ids.length ? ids.map(renderRow).join('') : '<div class="sb-folder-empty">empty</div>') + '</div>' : '') +
+      '</div>'
+    );
+  }
+  for (const id of unsorted) {
+    items.push(renderRow(id));
+  }
+
+  if (items.length === 0) {
+    list.innerHTML = '<div style="padding:14px 8px;color:var(--color-fg-faint);font-size:0.7rem;text-align:center">' + (q ? 'No matches' : 'No chats yet') + '</div>';
+  } else {
+    list.innerHTML = items.join('');
+  }
+}
+
+function filterSidebarChats(q) {
+  _renderSidebarChats(q);
+}
+
+// Initialize sidebar state + observers.
+(function _initSidebar() {
+  _restoreSidebarState();
+  _wireSidebarResize();
+  _syncSidebarStatus();
+  _renderSidebarChats('');
+  // Re-render recent list whenever the sessions store changes.
+  if (typeof $chatSessions !== 'undefined' && $chatSessions.subscribe) {
+    $chatSessions.subscribe(() => {
+      const search = document.getElementById('sidebar-search');
+      _renderSidebarChats(search ? search.value : '');
+    });
+  }
+  if (typeof $currentSession !== 'undefined' && $currentSession.subscribe) {
+    $currentSession.subscribe(() => {
+      const search = document.getElementById('sidebar-search');
+      _renderSidebarChats(search ? search.value : '');
+    });
+  }
+  // Poll the legacy status DOM every 2s — cheap and avoids touching every
+  // call site that updates #status.
+  setInterval(_syncSidebarStatus, 2000);
+  // Mark the initial active tab on the sidebar nav.
+  const initial = (typeof $activeTab !== 'undefined' && $activeTab.get) ? $activeTab.get() : 'chat';
+  document.querySelectorAll('#oa-sidebar .sb-nav').forEach(b => {
+    b.classList.toggle('active', b.getAttribute('data-tab') === initial);
+  });
+  // Cmd/Ctrl+B toggles sidebar.
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && (e.key === 'b' || e.key === 'B')) {
+      e.preventDefault();
+      toggleSidebar();
+    }
+  });
+})();
+
+// ════════════════════════════════════════════════════════════
+// OWUI-5: Settings + Model manager modals
+// ════════════════════════════════════════════════════════════
+function openSettingsModal(initialPane) {
+  const m = document.getElementById('settings-modal');
+  if (!m) return;
+  m.style.display = 'flex';
+  document.body.style.overflow = 'hidden';
+  if (initialPane) openSettingsPane(initialPane);
+}
+function closeSettingsModal() {
+  const m = document.getElementById('settings-modal');
+  if (!m) return;
+  m.style.display = 'none';
+  document.body.style.overflow = '';
+}
+function openSettingsPane(name) {
+  document.querySelectorAll('#settings-modal .rail-tab').forEach(t => {
+    t.classList.toggle('active', t.getAttribute('data-pane') === name);
+  });
+  document.querySelectorAll('#settings-modal .settings-pane').forEach(p => {
+    const isThis = (p.id === 'settings-pane-' + name);
+    p.hidden = !isThis;
+    p.classList.toggle('active', isThis);
+  });
+  // Lazy-load each pane's data on first open.
+  if (name === 'connections') { try { loadSettingsConnections(); } catch {} }
+  if (name === 'models')      { try { loadSettingsModels(); } catch {} }
+  if (name === 'voice')       { try { loadSettingsVoice(); } catch {} }
+  if (name === 'profiles')    { try { loadSettingsProfiles(); } catch {} }
+}
+
+// Connections — pulls /v1/config and renders an inline edit form.
+async function loadSettingsConnections() {
+  const host = document.getElementById('settings-connections-host');
+  if (!host) return;
+  host.innerHTML = '<div style="color:var(--color-fg-muted);font-size:0.74rem">loading...</div>';
+  try {
+    const r = await fetch('/v1/config', { headers: headers() });
+    if (r.status !== 200) {
+      host.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">/v1/config returned ' + r.status + '</div>';
+      return;
+    }
+    const cfg = await r.json();
+    const ep = (cfg && (cfg.endpoint || cfg.backend_url)) || '';
+    const safeEp = String(ep).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    host.innerHTML =
+      '<label style="display:block;font-size:0.78rem;margin-bottom:6px">Backend endpoint</label>' +
+      '<input id="settings-conn-endpoint" type="text" value="' + safeEp + '" style="width:100%;background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:6px 10px;border-radius:var(--radius-sm);font-size:0.78rem">' +
+      '<div style="margin-top:10px"><button class="oa-btn-secondary" onclick="saveSettingsConnections()">save</button></div>' +
+      '<div id="settings-conn-status" style="margin-top:8px;font-size:0.7rem;color:var(--color-fg-muted)"></div>';
+  } catch (e) {
+    host.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">' + e.message + '</div>';
+  }
+}
+async function saveSettingsConnections() {
+  const inp = document.getElementById('settings-conn-endpoint');
+  const status = document.getElementById('settings-conn-status');
+  if (!inp || !status) return;
+  status.textContent = 'saving...';
+  try {
+    const r = await fetch('/v1/config/endpoint', {
+      method: 'POST',
+      headers: headers(),
+      body: JSON.stringify({ endpoint: inp.value }),
+    });
+    if (r.status === 200) status.textContent = 'saved';
+    else status.textContent = 'failed (' + r.status + ')';
+  } catch (e) {
+    status.textContent = 'error: ' + e.message;
+  }
+}
+
+// Models pane
+let _settingsModelsCache = [];
+async function loadSettingsModels() {
+  const host = document.getElementById('settings-models-list');
+  if (!host) return;
+  host.innerHTML = '<div style="padding:8px;color:var(--color-fg-muted);font-size:0.74rem">loading...</div>';
+  try {
+    const r = await fetch('/v1/models', { headers: headers() });
+    if (r.status !== 200) {
+      host.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">/v1/models returned ' + r.status + '</div>';
+      return;
+    }
+    const j = await r.json();
+    const arr = Array.isArray(j) ? j : (Array.isArray(j.data) ? j.data : (Array.isArray(j.models) ? j.models : []));
+    _settingsModelsCache = arr.map(m => ({
+      id: m.id || m.name || String(m),
+      detail: (m.size ? Math.round(Number(m.size) / 1e9 * 10) / 10 + 'GB' : '') + (m.modified_at ? '' : ''),
+    }));
+    filterSettingsModels(document.getElementById('settings-models-search').value || '');
+  } catch (e) {
+    host.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">' + e.message + '</div>';
+  }
+}
+function filterSettingsModels(q) {
+  const host = document.getElementById('settings-models-list');
+  if (!host) return;
+  const sel = document.getElementById('model-select');
+  const active = sel ? sel.value : '';
+  const ql = String(q || '').toLowerCase();
+  const rows = _settingsModelsCache
+    .filter(m => !ql || m.id.toLowerCase().includes(ql))
+    .map(m => {
+      const isAct = m.id === active;
+      const safe = m.id.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;');
+      return '<div class="row' + (isAct ? ' active' : '') + '" onclick="setActiveModel(\\'' + m.id.replace(/'/g, "\\\\'") + '\\')"><span>' + safe + '</span><span class="right">' + (m.detail || '') + '</span></div>';
+    }).join('');
+  host.innerHTML = rows || '<div style="padding:8px;color:var(--color-fg-muted);font-size:0.74rem">No models</div>';
+}
+function setActiveModel(id) {
+  const sel = document.getElementById('model-select');
+  if (!sel) return;
+  sel.value = id;
+  sel.dispatchEvent(new Event('change'));
+  filterSettingsModels(document.getElementById('settings-models-search').value || '');
+}
+
+// Voice settings — clone refs CRUD via existing /v1/voice/clones.
+async function loadSettingsVoice() {
+  const host = document.getElementById('settings-voice-host');
+  if (!host) return;
+  host.innerHTML = '<div style="color:var(--color-fg-muted);font-size:0.74rem">loading...</div>';
+  try {
+    const r = await fetch('/v1/voice/clones', { headers: headers() });
+    if (r.status !== 200) {
+      host.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">/v1/voice/clones returned ' + r.status + '</div>';
+      return;
+    }
+    const j = await r.json();
+    const arr = Array.isArray(j) ? j : (Array.isArray(j.clones) ? j.clones : (Array.isArray(j.refs) ? j.refs : []));
+    if (!arr.length) {
+      host.innerHTML = '<div style="color:var(--color-fg-muted);font-size:0.78rem">No clone refs registered. Use the Voice tab to upload a reference.</div>';
+      return;
+    }
+    host.innerHTML = '<div style="font-size:0.78rem;display:flex;flex-direction:column;gap:6px">' +
+      arr.map(c => {
+        const id = c.id || c.name || '';
+        const lbl = (c.label || c.name || id).toString();
+        const safe = lbl.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return '<div class="row" style="display:flex;align-items:center;justify-content:space-between"><span>' + safe + '</span><span class="right">' + (id || '') + '</span></div>';
+      }).join('') +
+      '</div><div style="margin-top:10px"><button class="oa-btn-secondary" onclick="switchTab(\\'voice\\'); closeSettingsModal()">manage in voice tab</button></div>';
+  } catch (e) {
+    host.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">' + e.message + '</div>';
+  }
+}
+
+// Profiles pane — defers to existing loadProfiles()
+async function loadSettingsProfiles() {
+  const host = document.getElementById('settings-profiles-host');
+  if (!host) return;
+  host.innerHTML = '<div style="color:var(--color-fg-muted);font-size:0.74rem">opening agent profiles...</div>';
+  try {
+    if (typeof loadProfiles === 'function') await loadProfiles();
+    host.innerHTML = '<div style="color:var(--color-fg-muted);font-size:0.78rem">Profiles loaded into the Agent tab — switch to Agent to manage them.</div>' +
+      '<div style="margin-top:10px"><button class="oa-btn-secondary" onclick="switchTab(\\'agent\\'); closeSettingsModal()">open agent tab</button></div>';
+  } catch (e) {
+    host.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">' + e.message + '</div>';
+  }
+}
+
+// Theme + font scale (stub wiring; OWUI-5 introduces the toggle, light
+// mode polish is explicitly out of scope per the audit doc).
+function setOATheme(t) {
+  document.documentElement.setAttribute('data-theme', t);
+  try { localStorage.setItem('oa.theme', t); } catch {}
+}
+function setOAFontScale(v) {
+  const n = parseFloat(v);
+  if (!Number.isFinite(n)) return;
+  document.documentElement.style.fontSize = (n * 100) + '%';
+  const disp = document.getElementById('oa-font-scale-display');
+  if (disp) disp.textContent = n.toFixed(2) + 'x';
+  try { localStorage.setItem('oa.font-scale', String(n)); } catch {}
+}
+
+// Restore preferences on init
+(function _restoreOAPrefs() {
+  try {
+    const t = localStorage.getItem('oa.theme'); if (t) document.documentElement.setAttribute('data-theme', t);
+    const f = localStorage.getItem('oa.font-scale'); if (f) document.documentElement.style.fontSize = (parseFloat(f) * 100) + '%';
+  } catch {}
+})();
+
+// Model manager modal — separate from the settings/Models pane: bigger
+// list with a side detail pane. Reuses /v1/models.
+let _modelManagerCache = [];
+let _modelManagerSelected = null;
+function openModelManager() {
+  const m = document.getElementById('model-manager-modal');
+  if (!m) return;
+  m.style.display = 'flex';
+  document.body.style.overflow = 'hidden';
+  loadModelManager();
+}
+function closeModelManager() {
+  const m = document.getElementById('model-manager-modal');
+  if (!m) return;
+  m.style.display = 'none';
+  document.body.style.overflow = '';
+}
+async function loadModelManager() {
+  const list = document.getElementById('mm-list');
+  if (!list) return;
+  list.innerHTML = '<div style="padding:8px;color:var(--color-fg-muted);font-size:0.74rem">loading...</div>';
+  try {
+    const r = await fetch('/v1/models', { headers: headers() });
+    if (r.status !== 200) {
+      list.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">/v1/models returned ' + r.status + '</div>';
+      return;
+    }
+    const j = await r.json();
+    const arr = Array.isArray(j) ? j : (Array.isArray(j.data) ? j.data : (Array.isArray(j.models) ? j.models : []));
+    _modelManagerCache = arr;
+    filterModelManager(document.getElementById('mm-search').value || '');
+  } catch (e) {
+    list.innerHTML = '<div style="color:var(--color-error);font-size:0.74rem">' + e.message + '</div>';
+  }
+}
+function filterModelManager(q) {
+  const list = document.getElementById('mm-list');
+  if (!list) return;
+  const ql = String(q || '').toLowerCase();
+  const rows = _modelManagerCache
+    .filter(m => {
+      const id = m.id || m.name || '';
+      return !ql || String(id).toLowerCase().includes(ql);
+    })
+    .map((m, i) => {
+      const id = m.id || m.name || '';
+      const safe = String(id).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;');
+      const sel = (_modelManagerSelected === id) ? ' selected' : '';
+      return '<div class="row' + sel + '" data-id="' + safe + '" onclick="_modelManagerSelect(\\'' + String(id).replace(/'/g, "\\\\'") + '\\')"><span>' + safe + '</span><span class="right">' + (m.size ? Math.round(Number(m.size) / 1e9 * 10) / 10 + 'GB' : '') + '</span></div>';
+    }).join('');
+  list.innerHTML = rows || '<div style="padding:8px;color:var(--color-fg-muted);font-size:0.74rem">No models</div>';
+}
+function _modelManagerSelect(id) {
+  _modelManagerSelected = id;
+  filterModelManager(document.getElementById('mm-search').value || '');
+  const detail = document.getElementById('mm-detail');
+  if (!detail) return;
+  const m = _modelManagerCache.find(x => (x.id || x.name) === id) || {};
+  const safe = String(id).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;');
+  const rows = [
+    ['ID', safe],
+    ['Size', m.size ? Math.round(Number(m.size) / 1e9 * 10) / 10 + 'GB' : 'unknown'],
+    ['Modified', m.modified_at || m.modifiedAt || '—'],
+    ['Family', m.details && m.details.family ? m.details.family : '—'],
+    ['Quantization', m.details && m.details.quantization_level ? m.details.quantization_level : '—'],
+  ];
+  detail.innerHTML =
+    '<div style="padding:14px;font-size:0.78rem">' +
+      '<h4 style="margin:0 0 10px;color:var(--color-fg)">' + safe + '</h4>' +
+      '<table style="width:100%;border-collapse:collapse">' +
+        rows.map(([k, v]) => '<tr><td style="color:var(--color-fg-muted);padding:3px 6px 3px 0;width:35%">' + k + '</td><td style="color:var(--color-fg);padding:3px 0">' + v + '</td></tr>').join('') +
+      '</table>' +
+      '<div style="margin-top:14px;display:flex;gap:6px;flex-wrap:wrap">' +
+        '<button class="oa-btn-secondary" onclick="setActiveModel(\\'' + String(id).replace(/'/g, "\\\\'") + '\\')">set active</button>' +
+        '<a class="oa-btn-secondary" href="/v1/models" target="_blank" style="text-decoration:none;display:inline-block">raw json</a>' +
+      '</div>' +
+    '</div>';
+}
+
+// Global keybindings
+document.addEventListener('keydown', (e) => {
+  // Escape closes the topmost modal.
+  if (e.key === 'Escape') {
+    const sm = document.getElementById('settings-modal');
+    const mm = document.getElementById('model-manager-modal');
+    if (mm && mm.style.display === 'flex') { closeModelManager(); return; }
+    if (sm && sm.style.display === 'flex') { closeSettingsModal(); return; }
+  }
+  // Cmd/Ctrl+, opens settings.
+  if ((e.metaKey || e.ctrlKey) && e.key === ',') {
+    e.preventDefault();
+    openSettingsModal('general');
+  }
+});
+
+// ════════════════════════════════════════════════════════════
+// OWUI-4: Input toolbar + slash palette + drop-to-attach
+// ════════════════════════════════════════════════════════════
+
+let _attachments = []; // { name, size, file }
+let _slashItems = [];  // cached commands list from /v1/commands
+let _slashSelectedIdx = 0;
+let _slashLoaded = false;
+
+function _slashPaletteIsOpen() {
+  const p = document.getElementById('slash-palette');
+  return p && p.style.display !== 'none';
+}
+async function _ensureSlashList() {
+  if (_slashLoaded) return _slashItems;
+  try {
+    const r = await fetch('/v1/commands', { headers: headers() });
+    if (r.status === 200) {
+      const j = await r.json();
+      // The endpoint returns either an array of {name, description} or
+      // an envelope { commands: [...] }. Be tolerant.
+      const arr = Array.isArray(j) ? j : (Array.isArray(j.commands) ? j.commands : []);
+      _slashItems = arr.map(c => ({
+        name: (c.name || c.cmd || c.command || '').replace(/^\\//, ''),
+        desc: c.description || c.desc || c.summary || '',
+      })).filter(c => c.name);
+    }
+  } catch {}
+  _slashLoaded = true;
+  return _slashItems;
+}
+
+function openSlashPalette() {
+  const v = (input.value || '').trim();
+  if (!v.startsWith('/')) {
+    input.value = '/' + (input.value || '');
+  }
+  input.focus();
+  _maybeUpdateSlashPalette();
+}
+
+function closeSlashPalette() {
+  const p = document.getElementById('slash-palette');
+  if (p) p.style.display = 'none';
+  _slashSelectedIdx = 0;
+}
+
+async function _maybeUpdateSlashPalette() {
+  const v = input.value || '';
+  const p = document.getElementById('slash-palette');
+  if (!p) return;
+  if (!v.startsWith('/')) {
+    p.style.display = 'none';
+    return;
+  }
+  await _ensureSlashList();
+  const q = v.slice(1).split(/\\s/)[0].toLowerCase();
+  const matches = _slashItems
+    .filter(c => c.name.toLowerCase().startsWith(q))
+    .slice(0, 12);
+  if (matches.length === 0) { p.style.display = 'none'; return; }
+  if (_slashSelectedIdx >= matches.length) _slashSelectedIdx = 0;
+  const list = document.getElementById('slash-palette-list');
+  if (!list) return;
+  list.innerHTML = matches.map((c, i) => {
+    const sel = (i === _slashSelectedIdx) ? ' selected' : '';
+    const safeDesc = String(c.desc || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const safeName = c.name.replace(/[^a-zA-Z0-9_:.\\-]/g, '');
+    return '<div class="slash-row' + sel + '" data-cmd="' + safeName + '" onclick="_slashPaletteAcceptByName(\\'' + safeName + '\\')"><span class="slash-name">/' + safeName + '</span><span class="slash-desc">' + safeDesc + '</span></div>';
+  }).join('');
+  p.style.display = 'block';
+}
+
+function _slashPaletteMove(delta) {
+  const list = document.getElementById('slash-palette-list');
+  if (!list) return;
+  const rows = list.querySelectorAll('.slash-row');
+  if (rows.length === 0) return;
+  _slashSelectedIdx = (_slashSelectedIdx + delta + rows.length) % rows.length;
+  rows.forEach((r, i) => r.classList.toggle('selected', i === _slashSelectedIdx));
+  rows[_slashSelectedIdx].scrollIntoView({ block: 'nearest' });
+}
+
+function _slashPaletteAccept() {
+  const list = document.getElementById('slash-palette-list');
+  if (!list) return;
+  const row = list.querySelectorAll('.slash-row')[_slashSelectedIdx];
+  if (!row) return;
+  const name = row.getAttribute('data-cmd');
+  _slashPaletteAcceptByName(name);
+}
+
+function _slashPaletteAcceptByName(name) {
+  if (!name) return;
+  // Replace just the slash-token in the input, preserving any args the
+  // user may have already typed after a space.
+  const v = input.value || '';
+  const idx = v.indexOf(' ');
+  const trailing = idx >= 0 ? v.slice(idx) : '';
+  input.value = '/' + name + (trailing || ' ');
+  closeSlashPalette();
+  input.focus();
+  // Cursor after the inserted command name.
+  try {
+    const pos = ('/' + name + ' ').length;
+    input.setSelectionRange(pos, pos);
+  } catch {}
+}
+
+// Attachments
+function handleAttachInput(fileList) {
+  if (!fileList || fileList.length === 0) return;
+  for (const f of fileList) {
+    _attachments.push({ name: f.name, size: f.size || 0, file: f });
+  }
+  _renderAttachChips();
+}
+
+function _renderAttachChips() {
+  const row = document.getElementById('attach-chips');
+  if (!row) return;
+  if (_attachments.length === 0) {
+    row.innerHTML = '';
+    row.style.display = 'none';
+    return;
+  }
+  row.style.display = 'flex';
+  row.innerHTML = _attachments.map((a, i) => {
+    const safeName = String(a.name).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const sizeKB = a.size > 0 ? ' (' + Math.round(a.size / 1024) + 'KB)' : '';
+    return '<span class="chip"><span class="name" title="' + safeName + '">' + safeName + sizeKB + '</span><button class="x" onclick="_removeAttachment(' + i + ')" title="Remove">&times;</button></span>';
+  }).join('');
+}
+function _removeAttachment(i) {
+  _attachments.splice(i, 1);
+  _renderAttachChips();
+}
+
+// Drag & drop on the input row
+(function _wireDropZone() {
+  const row = document.getElementById('input-row');
+  if (!row) return;
+  ['dragover', 'dragenter'].forEach(ev => row.addEventListener(ev, (e) => {
+    e.preventDefault(); e.stopPropagation();
+    row.classList.add('dragover');
+  }));
+  ['dragleave', 'drop'].forEach(ev => row.addEventListener(ev, (e) => {
+    e.preventDefault(); e.stopPropagation();
+    row.classList.remove('dragover');
+  }));
+  row.addEventListener('drop', (e) => {
+    const files = e.dataTransfer && e.dataTransfer.files;
+    if (files && files.length) handleAttachInput(files);
+  });
+})();
+
+// Mic toggle — defers to the existing voice-tab plumbing; this is
+// a shortcut from the input toolbar so users don't have to navigate
+// to the voice tab to toggle voicechat.
+function toggleVoiceMicFromInput() {
+  // Two paths to flip the live mic, depending on which one is wired
+  // in the current session.
+  let triggered = false;
+  try {
+    if (typeof toggleVoiceChat === 'function') { toggleVoiceChat(); triggered = true; }
+    else if (typeof toggleListenEngine === 'function') { toggleListenEngine(); triggered = true; }
+    else if (typeof toggleVoice === 'function') { toggleVoice(); triggered = true; }
+  } catch {}
+  // As a last resort, jump the user to the voice tab so they can
+  // engage from there.
+  if (!triggered) { try { switchTab('voice'); } catch {} }
+  // Active-state visualization on the toolbar mic icon.
+  const btn = document.getElementById('mic-btn');
+  if (btn) btn.classList.toggle('active');
+}
+
+// Model picker mirror — keep #input-model-mini in sync with the legacy
+// #model-select so OWUI-4's compact picker reflects the truth.
+(function _mirrorModelPicker() {
+  const sync = () => {
+    const src = document.getElementById('model-select');
+    const dst = document.getElementById('input-model-mini');
+    if (!src || !dst) return;
+    if (src.options.length !== dst.options.length) {
+      dst.innerHTML = '';
+      for (const o of src.options) {
+        const opt = document.createElement('option');
+        opt.value = o.value;
+        opt.textContent = o.textContent;
+        dst.appendChild(opt);
+      }
+    }
+    dst.value = src.value;
+  };
+  // Run after every load + on a small interval.
+  setTimeout(sync, 600);
+  setInterval(sync, 4000);
+})();
+
+// Close palette when the user clicks elsewhere.
+document.addEventListener('click', (e) => {
+  const p = document.getElementById('slash-palette');
+  if (!p) return;
+  if (!p.contains(e.target) && e.target !== input && e.target.id !== 'slash-btn') {
+    p.style.display = 'none';
+  }
+});
+
 input.focus();
 </script>
+</div><!-- /#oa-main -->
+</div><!-- /#oa-shell -->
 </body>
 </html>`;
 }
@@ -580986,12 +583174,11 @@ import { fileURLToPath as fileURLToPath17 } from "node:url";
 import { dirname as dirname33, join as join109, resolve as resolve37 } from "node:path";
 import { homedir as homedir40 } from "node:os";
 import { spawn as spawn25, execSync as execSync55 } from "node:child_process";
-import { mkdirSync as mkdirSync59, writeFileSync as writeFileSync52, readFileSync as readFileSync74, readdirSync as readdirSync30, existsSync as existsSync92, watch as fsWatch3 } from "node:fs";
+import { mkdirSync as mkdirSync59, writeFileSync as writeFileSync52, readFileSync as readFileSync74, readdirSync as readdirSync30, existsSync as existsSync92, watch as fsWatch3, renameSync as renameSync8, unlinkSync as unlinkSync24 } from "node:fs";
 import { randomBytes as randomBytes21, randomUUID as randomUUID14 } from "node:crypto";
 import { createHash as createHash14 } from "node:crypto";
 function getVersion3() {
   try {
-    const require3 = createRequire4(import.meta.url);
     const thisDir = dirname33(fileURLToPath17(import.meta.url));
     const candidates = [
       join109(thisDir, "..", "package.json"),
@@ -581707,19 +583894,18 @@ function autoSeedTodosFromPrompt(prompt) {
   return [];
 }
 function atomicJobWrite(dir, id, job) {
-  const fs7 = __require("node:fs");
   const finalPath = join109(dir, `${id}.json`);
   const tmpPath = `${finalPath}.tmp.${process.pid}.${Date.now()}`;
   try {
-    fs7.writeFileSync(tmpPath, JSON.stringify(job, null, 2), "utf-8");
-    fs7.renameSync(tmpPath, finalPath);
+    writeFileSync52(tmpPath, JSON.stringify(job, null, 2), "utf-8");
+    renameSync8(tmpPath, finalPath);
   } catch {
     try {
-      fs7.writeFileSync(finalPath, JSON.stringify(job, null, 2), "utf-8");
+      writeFileSync52(finalPath, JSON.stringify(job, null, 2), "utf-8");
     } catch {
     }
     try {
-      fs7.unlinkSync(tmpPath);
+      unlinkSync24(tmpPath);
     } catch {
     }
   }
@@ -582801,12 +584987,11 @@ function readUpdateState() {
 function writeUpdateState(state) {
   try {
     const dir = join109(homedir40(), ".open-agents");
-    const fs7 = __require("node:fs");
-    fs7.mkdirSync(dir, { recursive: true });
+    mkdirSync59(dir, { recursive: true });
     const finalPath = updateStateFile();
     const tmpPath = `${finalPath}.tmp.${process.pid}`;
-    fs7.writeFileSync(tmpPath, JSON.stringify(state, null, 2), "utf-8");
-    fs7.renameSync(tmpPath, finalPath);
+    writeFileSync52(tmpPath, JSON.stringify(state, null, 2), "utf-8");
+    renameSync8(tmpPath, finalPath);
   } catch {
   }
 }
@@ -582843,10 +585028,10 @@ async function handleV1Update(req2, res, requestId) {
       from: currentVersion,
       to: targetVersion
     }, { subject: req2._authUser ?? "anonymous" });
-    const fs7 = __require("node:fs");
+    const fs7 = require3("node:fs");
     const nodeBin = process.execPath;
     const nodeDir = dirname33(nodeBin);
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     const isWin2 = process.platform === "win32";
     let npmBin = "";
     for (const candidate of isWin2 ? [join109(nodeDir, "npm.cmd"), join109(nodeDir, "npm")] : [join109(nodeDir, "npm"), "/usr/local/bin/npm", "/usr/bin/npm"]) {
@@ -583912,9 +586097,9 @@ async function handleRequest(req2, res, ollamaUrl, verbose) {
       return;
     }
     if (pathname === "/v1/system" && method === "GET") {
-      const os8 = __require("node:os");
+      const os8 = require3("node:os");
       const version4 = getVersion3();
-      const { execSync: es } = __require("node:child_process");
+      const { execSync: es } = require3("node:child_process");
       let gpus = [];
       try {
         const nv = es("nvidia-smi --query-gpu=name,memory.total --format=csv,noheader,nounits", { encoding: "utf8", timeout: 5e3, stdio: "pipe" });
@@ -584138,7 +586323,7 @@ async function handleRequest(req2, res, ollamaUrl, verbose) {
           return;
         }
         const { tmpdir: tmpdir22 } = await import("node:os");
-        const { writeFileSync: writeFileSync56, unlinkSync: unlinkSync24 } = await import("node:fs");
+        const { writeFileSync: writeFileSync56, unlinkSync: unlinkSync25 } = await import("node:fs");
         const { join: pjoin } = await import("node:path");
         const tmpPath = pjoin(tmpdir22(), `oa-clone-upload-${Date.now()}-${safeName}`);
         writeFileSync56(tmpPath, buf);
@@ -584153,7 +586338,7 @@ async function handleRequest(req2, res, ollamaUrl, verbose) {
           });
         } finally {
           try {
-            unlinkSync24(tmpPath);
+            unlinkSync25(tmpPath);
           } catch {
           }
         }
@@ -584795,8 +586980,8 @@ data: ${JSON.stringify(data)}
         } catch {
         }
         try {
-          const { execSync: es, spawnSync: ss } = __require("node:child_process");
-          const home = process.env.HOME || __require("node:os").homedir();
+          const { execSync: es, spawnSync: ss } = require3("node:child_process");
+          const home = process.env.HOME || require3("node:os").homedir();
           const userDir = `${home}/.config/systemd/user`;
           for (const suffix of [".timer", ".service"]) {
             try {
@@ -585795,7 +587980,7 @@ function listScheduledTasks() {
 function listOaUserTimers() {
   const out = [];
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     const files = es("systemctl --user list-unit-files --type=timer --no-legend", { encoding: "utf8", stdio: "pipe" }).trim().split("\n");
     const enabledMap = /* @__PURE__ */ new Map();
     for (const line of files) {
@@ -585893,7 +588078,7 @@ function deleteScheduledById(id) {
     if (id) candidates.push(id);
     if (typeof entry?.id === "string" && entry.id && !candidates.includes(entry.id)) candidates.push(entry.id);
     try {
-      const { createHash: createHash15 } = __require("node:crypto");
+      const { createHash: createHash15 } = require3("node:crypto");
       const fallback = createHash15("sha1").update(`${target.file}#${target.index}`).digest("hex").slice(0, 16);
       if (!candidates.includes(fallback)) candidates.push(fallback);
     } catch {
@@ -585942,7 +588127,7 @@ function removeCronByDirectory(dir) {
 function killProcessGroups(pids, pattern) {
   const killed = [];
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     const targets = /* @__PURE__ */ new Map();
     if (pids && pids.length > 0) {
       for (const pid of pids) {
@@ -586003,8 +588188,8 @@ function killProcessGroups(pids, pattern) {
 function disableAllOaTimers() {
   let disabled = 0;
   try {
-    const { execSync: es } = __require("node:child_process");
-    const home = process.env.HOME || __require("node:os").homedir();
+    const { execSync: es } = require3("node:child_process");
+    const home = process.env.HOME || require3("node:os").homedir();
     const userDir = `${home}/.config/systemd/user`;
     const timers = listOaUserTimers();
     for (const t2 of timers) {
@@ -586055,7 +588240,7 @@ function removeAllOaCrons() {
 function listMatchingProcesses(pattern) {
   const list = [];
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     const re = new RegExp(pattern, "i");
     const ps = es("ps -eo pid,etimes,pcpu,pmem,command", { encoding: "utf8", stdio: "pipe" });
     for (const line of ps.split("\n")) {
@@ -586075,7 +588260,7 @@ function listMatchingProcesses(pattern) {
 }
 function sampleGpuUtil() {
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     const out = es("nvidia-smi --query-gpu=utilization.gpu,memory.used,memory.total --format=csv,noheader,nounits", { encoding: "utf8", timeout: 3e3, stdio: "pipe" });
     const arr = [];
     for (const line of out.trim().split("\n")) {
@@ -586092,7 +588277,7 @@ function sampleGpuUtil() {
 }
 function getCurrentCrontabLines() {
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     return es("crontab -l 2>/dev/null", { encoding: "utf8", stdio: "pipe" }).split("\n");
   } catch {
     return [];
@@ -586175,7 +588360,7 @@ function reconcileScheduledTasks(apply) {
 }
 function findOaBinary4() {
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     for (const cmd of ["oa", "open-agents"]) {
       try {
         const p2 = es(`which ${cmd} 2>/dev/null`, { encoding: "utf8", stdio: "pipe" }).trim();
@@ -586192,7 +588377,7 @@ function getCrontabLines() {
 }
 function writeCrontabLines(lines) {
   try {
-    const { spawnSync: spawnSync6 } = __require("node:child_process");
+    const { spawnSync: spawnSync6 } = require3("node:child_process");
     const result = spawnSync6("crontab", ["-"], { input: lines.join("\n") + "\n", encoding: "utf8", stdio: ["pipe", "pipe", "pipe"] });
     if (result.status !== 0) throw new Error(`crontab exited ${result.status}: ${String(result.stderr || "").trim()}`);
   } catch (e2) {
@@ -586294,7 +588479,7 @@ WantedBy=timers.target
           writeFileSync52(svc, svcText);
           writeFileSync52(tim, timText);
           try {
-            const { execSync: es } = __require("node:child_process");
+            const { execSync: es } = require3("node:child_process");
             es("systemctl --user daemon-reload", { stdio: "pipe" });
             es(`systemctl --user enable --now ${unitBase}.timer`, { stdio: "pipe" });
           } catch {
@@ -586321,7 +588506,7 @@ WantedBy=timers.target
 function listUserServices(pattern) {
   const out = [];
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     const files = es("systemctl --user list-unit-files --type=service --no-legend", { encoding: "utf8", stdio: "pipe" }).trim().split("\n");
     const enabledMap = /* @__PURE__ */ new Map();
     for (const line of files) {
@@ -586347,7 +588532,7 @@ function listUserServices(pattern) {
 }
 function userServiceAction(unit, action) {
   try {
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     if (action === "stop") {
       es(`systemctl --user stop ${unit}`, { stdio: "pipe" });
       return true;
@@ -586515,8 +588700,8 @@ function startApiServer(options2 = {}) {
             const job = JSON.parse(readFileSync74(jobPath, "utf-8"));
             const jobTime = new Date(job.startedAt ?? job.completedAt ?? 0).getTime();
             if (jobTime > 0 && jobTime < cutoff && job.status !== "running") {
-              const { unlinkSync: unlinkSync24 } = __require("node:fs");
-              unlinkSync24(jobPath);
+              const { unlinkSync: unlinkSync25 } = require3("node:fs");
+              unlinkSync25(jobPath);
             }
           } catch {
           }
@@ -586837,7 +589022,7 @@ function startApiServer(options2 = {}) {
       log22(`  Port ${port} in use — reclaiming...
 `);
       try {
-        const { execSync: es } = __require("node:child_process");
+        const { execSync: es } = require3("node:child_process");
         const pids = es(`lsof -ti :${port} 2>/dev/null || fuser ${port}/tcp 2>/dev/null || true`, { encoding: "utf8" }).trim().split(/[\n\s]+/).filter(Boolean);
         for (const pid of pids) {
           const numPid = parseInt(pid, 10);
@@ -587134,8 +589319,8 @@ function removeCronByMarker(id) {
 }
 function disableUserTimerById(id) {
   try {
-    const { execSync: es } = __require("node:child_process");
-    const home = process.env.HOME || __require("node:os").homedir();
+    const { execSync: es } = require3("node:child_process");
+    const home = process.env.HOME || require3("node:os").homedir();
     const userDir = `${home}/.config/systemd/user`;
     const names = [`oa-${id}`, `oa-sched-${id}`, id];
     for (const n2 of names) {
@@ -587164,7 +589349,7 @@ function disableUserTimerById(id) {
 function setTimerEnabled(name10, enabled2) {
   try {
     const unit = `${name10}.timer`;
-    const { execSync: es } = __require("node:child_process");
+    const { execSync: es } = require3("node:child_process");
     if (enabled2) es(`systemctl --user enable --now ${unit}`, { stdio: "pipe" });
     else es(`systemctl --user disable --now ${unit}`, { stdio: "pipe" });
     return true;
@@ -587172,7 +589357,7 @@ function setTimerEnabled(name10, enabled2) {
     return false;
   }
 }
-var endpointRegistry, modelRouteMap, endpointUsage, metrics, startedAt, runningProcesses, perKeyUsage, CRON_MARKER2;
+var require3, endpointRegistry, modelRouteMap, endpointUsage, metrics, startedAt, runningProcesses, perKeyUsage, CRON_MARKER2;
 var init_serve = __esm({
   "packages/cli/src/api/serve.ts"() {
     "use strict";
@@ -587200,6 +589385,7 @@ var init_serve = __esm({
     init_profiles();
     init_docker();
     init_typed_node_events();
+    require3 = createRequire4(import.meta.url);
     endpointRegistry = [];
     modelRouteMap = /* @__PURE__ */ new Map();
     endpointUsage = /* @__PURE__ */ new Map();
@@ -587237,7 +589423,7 @@ function formatTimeAgo2(date) {
 }
 function getVersion4() {
   try {
-    const require3 = createRequire5(import.meta.url);
+    const require4 = createRequire5(import.meta.url);
     const thisDir = dirname34(fileURLToPath18(import.meta.url));
     const candidates = [
       join110(thisDir, "..", "package.json"),
@@ -587246,7 +589432,7 @@ function getVersion4() {
     ];
     for (const pkgPath of candidates) {
       if (existsSync93(pkgPath)) {
-        const pkg = require3(pkgPath);
+        const pkg = require4(pkgPath);
         if (pkg.name === "open-agents-ai" || pkg.name === "@open-agents/cli" || pkg.name === "@open-agents/monorepo") {
           return pkg.version ?? "0.0.0";
         }
@@ -594979,9 +597165,9 @@ init_spinner();
 init_output();
 function getVersion5() {
   try {
-    const require3 = createRequire6(import.meta.url);
+    const require4 = createRequire6(import.meta.url);
     const pkgPath = join114(dirname35(fileURLToPath19(import.meta.url)), "..", "package.json");
-    const pkg = require3(pkgPath);
+    const pkg = require4(pkgPath);
     return pkg.version;
   } catch {
     return "0.1.0";