omnius 1.0.601 → 1.0.602

package/dist/index.js

@@ -678990,6 +678990,7 @@ __export(tray_exports, {
   trayRequiresRestart: () => trayRequiresRestart,
   traySupport: () => traySupport,
   trayUpdatePresentation: () => trayUpdatePresentation,
+  trayVersionPresentation: () => trayVersionPresentation,
   uninstallTrayAutostart: () => uninstallTrayAutostart,
   verifyTrayHelper: () => verifyTrayHelper
 });
@@ -679047,6 +679048,23 @@ function trayUpdatePresentation(currentVersion, latestVersion, state = null) {
     action: "check-update"
   };
 }
+function trayVersionPresentation(health, update2) {
+  if (health.kind === "online" && update2.targetVersion) {
+    const current = health.version ? `v${health.version}` : "current version";
+    const running = !update2.enabled && update2.title.startsWith("Updating ");
+    return {
+      title: running ? update2.title : `Omnius ${current} — update to v${update2.targetVersion} available`,
+      tooltip: update2.tooltip,
+      enabled: update2.enabled,
+      action: "update-omnius"
+    };
+  }
+  return {
+    title: health.label,
+    tooltip: health.tooltip,
+    enabled: false
+  };
+}
 function uidSuffix() {
   return typeof process.getuid === "function" ? String(process.getuid()) : "user";
 }
@@ -679479,7 +679497,7 @@ async function loadSysTray() {
   return constructor;
 }
 function menuForHealth(health, endpoint, registered, update2) {
-  const healthItem = { title: health.label, tooltip: health.tooltip, enabled: false };
+  const healthItem = trayVersionPresentation(health, update2);
   const actionItem = {
     title: health.kind === "online" ? "Restart daemon" : "Start daemon",
     tooltip: health.kind === "online" ? "Restart the Omnius API daemon" : "Start the Omnius API daemon",
@@ -679501,7 +679519,8 @@ function menuForHealth(health, endpoint, registered, update2) {
     title: update2.title,
     tooltip: update2.tooltip,
     enabled: update2.enabled,
-    action: update2.action
+    action: update2.action,
+    hidden: Boolean(update2.targetVersion)
   };
   return {
     healthItem,
@@ -679747,8 +679766,6 @@ async function runTrayForeground(explicitEndpoint) {
       health = next;
       state = { ...state, health };
       writeProcessState(paths, state);
-      menuState.healthItem.title = health.label;
-      menuState.healthItem.tooltip = health.tooltip;
       menuState.actionItem.title = health.kind === "online" ? "Restart daemon" : "Start daemon";
       menuState.actionItem.action = health.kind === "online" ? "restart-daemon" : "start-daemon";
       menuState.stopItem.enabled = health.kind === "online";
@@ -679762,6 +679779,13 @@ async function runTrayForeground(explicitEndpoint) {
       menuState.updateItem.tooltip = updateView.tooltip;
       menuState.updateItem.enabled = updateView.enabled;
       menuState.updateItem.action = updateView.action;
+      menuState.updateItem.hidden = Boolean(updateView.targetVersion);
+      const versionView = trayVersionPresentation(health, updateView);
+      menuState.healthItem.title = versionView.title;
+      menuState.healthItem.tooltip = versionView.tooltip;
+      menuState.healthItem.enabled = versionView.enabled;
+      if (versionView.action) menuState.healthItem.action = versionView.action;
+      else delete menuState.healthItem.action;
       const autostartRegistered = existsSync117(paths.autostartFile);
       const autostartChanged = menuState.autostartItem.checked !== autostartRegistered;
       if (autostartChanged) menuState.autostartItem.checked = autostartRegistered;
@@ -679819,14 +679843,32 @@ async function runTrayForeground(explicitEndpoint) {
                 trayWasRunning: true
               });
               updateView = trayUpdatePresentation(currentVersion, targetVersion, readUpdateState());
+              if (updateView.enabled) {
+                updateView = {
+                  title: `Updating to v${targetVersion} — starting`,
+                  tooltip: "The global npm update transaction is starting",
+                  enabled: false,
+                  targetVersion,
+                  action: "update-omnius"
+                };
+              }
+              const versionView = trayVersionPresentation(health, updateView);
+              menuState.healthItem.title = versionView.title;
+              menuState.healthItem.tooltip = versionView.tooltip;
+              menuState.healthItem.enabled = versionView.enabled;
+              menuState.healthItem.action = "update-omnius";
               menuState.updateItem.title = updateView.title;
               menuState.updateItem.tooltip = updateView.tooltip;
               menuState.updateItem.enabled = false;
+              menuState.updateItem.hidden = true;
             } catch (error) {
-              menuState.updateItem.title = "Update could not start — retry";
-              menuState.updateItem.tooltip = error instanceof Error ? error.message : String(error);
-              menuState.updateItem.enabled = true;
+              const message2 = error instanceof Error ? error.message : String(error);
+              menuState.healthItem.title = `Update to v${targetVersion} could not start — retry`;
+              menuState.healthItem.tooltip = message2;
+              menuState.healthItem.enabled = true;
+              menuState.healthItem.action = "update-omnius";
             }
+            await tray?.sendAction({ type: "update-item", item: menuState.healthItem });
             await tray?.sendAction({ type: "update-item", item: menuState.updateItem });
             break;
           }
@@ -679843,6 +679885,14 @@ async function runTrayForeground(explicitEndpoint) {
             menuState.updateItem.tooltip = updateView.tooltip;
             menuState.updateItem.enabled = updateView.enabled;
             menuState.updateItem.action = updateView.action;
+            menuState.updateItem.hidden = Boolean(updateView.targetVersion);
+            const versionView = trayVersionPresentation(health, updateView);
+            menuState.healthItem.title = versionView.title;
+            menuState.healthItem.tooltip = versionView.tooltip;
+            menuState.healthItem.enabled = versionView.enabled;
+            if (versionView.action) menuState.healthItem.action = versionView.action;
+            else delete menuState.healthItem.action;
+            await tray?.sendAction({ type: "update-item", item: menuState.healthItem });
             await tray?.sendAction({ type: "update-item", item: menuState.updateItem });
             break;
           }
@@ -792889,6 +792939,17 @@ var init_routes_v1 = __esm({
 });
 
 // packages/cli/src/api/web-ui.ts
+function renderRouteHeading(options2) {
+  const signals = options2.signals.map((signal) => `<span class="route-heading__signal">${signal}</span>`).join("");
+  return `<header class="route-heading" data-route-heading="${options2.page}">
+    <div class="route-heading__copy">
+      <span class="route-heading__eyebrow">${options2.eyebrow}</span>
+      <h1 class="route-heading__title">${options2.title}</h1>
+      <p class="route-heading__description">${options2.description}</p>
+    </div>
+    <div class="route-heading__signals" aria-label="Visible operational areas">${signals}</div>
+  </header>`;
+}
 function getWebUI() {
   return `<!DOCTYPE html>
 <html lang="en">
@@ -794986,6 +795047,303 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
 }
 *::-webkit-scrollbar-thumb:hover { background: var(--nclp-yellow); }
 
+/* Shared route composition. This carries the useful six-track command-center
+ * grammar from the Voryn persona/call-tree surfaces while keeping Omnius's
+ * existing NOCLIP palette, compact density, and 3px geometry authoritative. */
+[data-route-page] {
+  min-width: 0;
+  background: var(--nclp-bg-main) !important;
+}
+
+.omnius-route-shell {
+  padding: 12px 16px !important;
+}
+
+.route-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--nclp-line);
+  min-width: 0;
+}
+
+.route-heading__copy { min-width: 0; }
+.route-heading__eyebrow {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--nclp-yellow);
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.route-heading__title {
+  margin: 0 !important;
+  color: var(--nclp-text) !important;
+  font-size: 15px !important;
+  letter-spacing: 0.02em !important;
+  text-transform: none !important;
+}
+.route-heading__description {
+  max-width: 760px;
+  margin: 4px 0 0;
+  color: var(--nclp-muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+.route-heading__signals {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 5px;
+}
+.route-heading__signal,
+.observability-chip {
+  border: 1px solid var(--nclp-line);
+  border-radius: var(--radius-sm);
+  background: var(--nclp-bg-secondary);
+  color: var(--nclp-muted);
+  padding: 3px 6px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.observability-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+  min-width: 0;
+  align-items: start;
+}
+.observability-card {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--nclp-line);
+  border-radius: var(--radius-lg);
+  background: var(--nclp-card);
+  box-shadow: var(--nclp-shadow);
+}
+.observability-card::before {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 38px;
+  height: 2px;
+  background: var(--nclp-yellow);
+  pointer-events: none;
+}
+.observability-card__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid var(--nclp-line);
+}
+.observability-card__title {
+  min-width: 0;
+  margin: 0 !important;
+  color: var(--nclp-text) !important;
+  font-size: 10px !important;
+  letter-spacing: 0.1em !important;
+  text-transform: uppercase !important;
+}
+.observability-card__meta {
+  overflow: hidden;
+  color: var(--nclp-quiet);
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.observability-card__body {
+  min-width: 0;
+  padding: 11px 12px 12px;
+}
+.observability-card__body--flush { padding: 0; }
+.observability-span-2 { grid-column: span 2; }
+.observability-span-3 { grid-column: span 3; }
+.observability-span-4 { grid-column: span 4; }
+.observability-span-6 { grid-column: 1 / -1; }
+
+.observability-facts {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+  min-width: 0;
+}
+.observability-facts > * {
+  min-width: 0;
+  margin: 0 !important;
+}
+.observability-stack {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+.observability-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+}
+.observability-actions > :is(input, select, textarea) { min-width: 0; }
+.observability-table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
+
+.route-workspace {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.route-workspace__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.route-scroll-region {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+.agent-command-body { padding: 11px 12px 12px; }
+.agent-command-body #agent-params { margin: 0; border: 0; background: transparent; }
+.agent-task-input { min-height: 120px !important; margin: 0 !important; }
+.agent-events-surface { min-height: 180px; }
+
+.workspace-switcher { position: relative; flex: 1; min-width: 0; }
+.workspace-switcher__trigger {
+  display: grid !important;
+  grid-template-columns: 9px minmax(0, 1fr) 12px;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 5px 7px !important;
+  text-align: left;
+}
+#sidebar-brand {
+  overflow: hidden;
+  color: var(--nclp-text) !important;
+  font-size: 11px !important;
+  letter-spacing: 0.01em !important;
+  text-overflow: ellipsis;
+  text-transform: none !important;
+  white-space: nowrap;
+}
+.workspace-switcher__chevron { color: var(--nclp-quiet); transition: transform 0.14s ease; }
+.workspace-switcher__trigger[aria-expanded="true"] .workspace-switcher__chevron { transform: rotate(180deg); }
+.workspace-picker {
+  position: absolute;
+  z-index: 80;
+  top: calc(100% + 6px);
+  left: 0;
+  width: min(420px, calc(100vw - 24px));
+  max-height: min(520px, 72vh);
+  overflow: hidden;
+  border: 1px solid var(--nclp-line-strong);
+  border-radius: var(--radius-lg);
+  background: var(--nclp-card);
+  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.48);
+}
+.workspace-picker__header { padding: 10px; border-bottom: 1px solid var(--nclp-line); }
+.workspace-picker__header input { width: 100%; padding: 7px 9px; }
+.workspace-picker__list {
+  display: grid;
+  gap: 3px;
+  max-height: 42vh;
+  overflow-y: auto;
+  padding: 6px;
+  overscroll-behavior: contain;
+}
+.workspace-picker__option {
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 9px !important;
+  text-align: left;
+  text-transform: none !important;
+}
+.workspace-picker__option[aria-selected="true"] {
+  border-color: var(--nclp-yellow) !important;
+  background: var(--nclp-amber-soft) !important;
+}
+.workspace-picker__option.is-keyboard-active {
+  border-color: var(--nclp-yellow) !important;
+  color: var(--nclp-yellow) !important;
+}
+.workspace-picker__name,
+.workspace-picker__path { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-picker__name { color: var(--nclp-text); font-size: 11px; font-weight: 700; }
+.workspace-picker__path { margin-top: 2px; color: var(--nclp-quiet); font-size: 9px; font-weight: 500; }
+.workspace-picker__check { color: var(--nclp-yellow); }
+.workspace-picker__empty { padding: 18px 10px; color: var(--nclp-quiet); font-size: 10px; text-align: center; }
+.workspace-picker__footer { display: flex; justify-content: flex-end; padding: 7px 9px; border-top: 1px solid var(--nclp-line); }
+#omnius-sidebar[data-collapsed="true"] .workspace-switcher { display: none; }
+
+/* Generate keeps its purpose-built rails, but uses the same six-track span
+ * proportions as the overview grids: 1/6 controls, 3/6 work, 2/6 signal. */
+.hud-workbench[data-layout="generate-workbench"] {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.hud-workbench[data-layout="generate-workbench"] > #gen-mode-rail { grid-column: span 1; }
+.hud-workbench[data-layout="generate-workbench"] > main { grid-column: span 3; min-width: 0; }
+.hud-workbench[data-layout="generate-workbench"] > .hud-side-output { grid-column: span 2; min-width: 0; }
+
+@media (max-width: 1180px) {
+  .hud-workbench[data-layout="generate-workbench"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .hud-workbench[data-layout="generate-workbench"] > #gen-mode-rail,
+  .hud-workbench[data-layout="generate-workbench"] > main { grid-column: span 1; }
+  .hud-workbench[data-layout="generate-workbench"] > .hud-side-output { grid-column: 1 / -1; }
+}
+
+@media (max-width: 820px) {
+  .hud-workbench[data-layout="generate-workbench"] { grid-template-columns: minmax(0, 1fr); }
+  .hud-workbench[data-layout="generate-workbench"] > #gen-mode-rail,
+  .hud-workbench[data-layout="generate-workbench"] > main,
+  .hud-workbench[data-layout="generate-workbench"] > .hud-side-output { grid-column: 1; }
+}
+
+@media (max-width: 920px) {
+  .observability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .observability-span-2,
+  .observability-span-3 { grid-column: span 1; }
+  .observability-span-4,
+  .observability-span-6 { grid-column: 1 / -1; }
+  .observability-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 760px) {
+  .omnius-route-shell { padding: 10px !important; }
+  .route-heading { grid-template-columns: 1fr; align-items: start; }
+  .route-heading__signals { justify-content: flex-start; }
+  .observability-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
+  .observability-span-2,
+  .observability-span-3,
+  .observability-span-4,
+  .observability-span-6 { grid-column: 1; }
+  .observability-facts { grid-template-columns: minmax(0, 1fr); }
+  .observability-card__header { grid-template-columns: minmax(0, 1fr); }
+  .observability-card__meta { white-space: normal; }
+  .observability-actions > :is(button, input, select) { max-width: 100%; }
+  .workspace-picker { position: fixed; top: 54px; right: 12px; left: 12px; width: auto; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
@@ -795014,8 +795372,22 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
     <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-dot" title="Connection status" style="width:9px;height:9px;border-radius:999px;background:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.16);flex:0 0 auto"></span>
-    <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">No project</span>
+    <div class="workspace-switcher">
+      <button id="workspace-switcher-trigger" class="workspace-switcher__trigger" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="workspace-picker" onclick="toggleWorkspacePicker(event)" title="Switch workspace">
+        <span id="sidebar-brand-dot" title="Connection status" style="width:9px;height:9px;border-radius:999px;background:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.16);flex:0 0 auto"></span>
+        <span id="sidebar-brand">No project</span>
+        <svg class="workspace-switcher__chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+      <section id="workspace-picker" class="workspace-picker" role="dialog" aria-label="Select workspace" style="display:none">
+        <div class="workspace-picker__header">
+          <input id="workspace-picker-search" type="search" placeholder="Filter workspaces..." autocomplete="off" aria-label="Filter workspaces" oninput="filterWorkspacePicker(this.value)" onkeydown="handleWorkspacePickerKeys(event)">
+        </div>
+        <div id="workspace-picker-list" class="workspace-picker__list" role="listbox" aria-label="Available workspaces"></div>
+        <div class="workspace-picker__footer">
+          <button type="button" onclick="closeWorkspacePicker(); switchTab('projects')">Manage workspaces</button>
+        </div>
+      </section>
+    </div>
   </div>
 
   <!-- New chat button -->
@@ -795051,35 +795423,35 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
 
   <!-- 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">
+    <button class="sb-nav" data-tab="chat" data-route="/chat" aria-controls="chat-container" aria-current="page" 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">
+    <button class="sb-nav" data-tab="agent" data-route="/agent" aria-controls="agent-panel" 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">
+    <button class="sb-nav" data-tab="voice" data-route="/voice" aria-controls="voice-panel" 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="generate" onclick="switchTab('generate')" title="Generate media">
+    <button class="sb-nav" data-tab="generate" data-route="/generate" aria-controls="generate-panel" onclick="switchTab('generate')" title="Generate media">
       <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="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
       <span class="sb-label">Generate</span>
     </button>
-    <button class="sb-nav" data-tab="projects" onclick="switchTab('projects')" title="Projects">
+    <button class="sb-nav" data-tab="projects" data-route="/projects" aria-controls="projects-panel" 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">
+    <button class="sb-nav" data-tab="jobs" data-route="/dashboard" aria-controls="jobs-panel" 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">
+    <button class="sb-nav" data-tab="activity" data-route="/activity" aria-controls="activity-panel" 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">
+    <button class="sb-nav" data-tab="config" data-route="/settings" aria-controls="config-panel" onclick="switchTab('config')" title="Settings">
       <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>
@@ -795105,8 +795477,7 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
 <div id="omnius-main" style="flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--color-bg)">
 
 <div id="header">
-  <span class="accent" id="header-project-name">No project</span>
-  <span class="status" id="status">connecting...</span>
+  <span class="status" id="status" aria-live="polite" style="display:none">connecting...</span>
   <span id="update-btn" style="display:none;background:#0f3f3d;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>
@@ -795148,7 +795519,9 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
     <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="chat-container" class="omnius-route-shell" data-route-page="chat" data-route-tab="chat" style="display:flex;flex:1;overflow:hidden;flex-direction:column">
+  ${renderRouteHeading({ page: "chat", eyebrow: "Conversation", title: "Chat workspace", description: "Keep the active session, execution plan, workspace context, and conversation visible as one operational surface.", signals: ["session", "plan", "live context"] })}
+  <div class="route-workspace" data-layout="chat-split">
   <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:var(--color-brand);font-size:0.7rem;font-weight:bold">Workspace</span>
@@ -795158,7 +795531,7 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
     <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">
+  <div class="route-workspace__main">
     <!-- WO-TASK-02 — Chat session topbar (separate storage from agent runs) -->
     <div class="session-topbar" id="chat-session-topbar">
       <span class="topbar-label">chat session</span>
@@ -795175,8 +795548,10 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
     </div>
     <div id="conversation" style="flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-height:0"></div>
   </div>
+  </div>
 </div>
-<div id="agent-panel" style="display:none;flex:1;overflow:hidden;flex-direction:column">
+<div id="agent-panel" class="omnius-route-shell" data-route-page="agent" data-route-tab="agent" style="display:none;flex:1;overflow:hidden;flex-direction:column">
+  ${renderRouteHeading({ page: "agent", eyebrow: "Execution", title: "Agent command center", description: "Define the task contract, inspect the run configuration, and follow the event stream without losing workspace context.", signals: ["task contract", "run profile", "event stream"] })}
   <!-- WO-TASK-02 — Agent run topbar (separate storage from chat sessions) -->
   <div class="session-topbar" id="agent-session-topbar">
     <span class="topbar-label">agent run</span>
@@ -795188,7 +795563,7 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
     <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 class="route-workspace" data-layout="agent-form">
     <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:var(--color-brand);font-size:0.7rem;font-weight:bold">Agent Workspace</span>
@@ -795197,10 +795572,12 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
       <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">
+    <div class="route-scroll-region" style="flex:1;padding:0 0 4px;">
+  <div class="observability-grid">
   <!-- Parameter form: all the dials for POST /v1/run -->
-  <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>
+  <section class="observability-card observability-span-4" data-module="agent-parameters">
+    <header class="observability-card__header"><h2 class="observability-card__title">Run configuration</h2><span class="observability-card__meta">POST /v1/run</span></header>
+    <div id="agent-params" class="observability-card__body agent-command-body" style="font-size:0.68rem">
     <div style="display:grid;grid-template-columns:120px 1fr;gap:6px 12px;align-items:center">
       <label style="color:var(--color-fg-muted)">Working dir</label>
       <div style="display:flex;gap:4px;align-items:center">
@@ -795231,36 +795608,75 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
       <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>
+    </div>
+  </section>
 
-  <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">
+  <section class="observability-card observability-span-2" data-module="agent-task-contract">
+    <header class="observability-card__header"><h2 class="observability-card__title">Task contract</h2><span class="observability-card__meta">persona + controls</span></header>
+    <div class="observability-card__body observability-stack">
+  <textarea id="agent-task" class="agent-task-input" placeholder="Describe the task for the agent..." style="width:100%;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"></textarea>
+  <div class="observability-actions">
     <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>
+  </section>
+
+  <section class="observability-card observability-span-6" data-module="agent-event-stream">
+    <header class="observability-card__header"><h2 class="observability-card__title">Event stream</h2><span class="observability-card__meta">tools · stdout · completion</span></header>
+    <div id="agent-events" class="observability-card__body agent-events-surface" style="font-size:0.78rem;line-height:1.5"></div>
+  </section>
+  </div>
     </div><!-- /scrollable agent body -->
   </div><!-- /agent body row (sidebar | form) -->
 </div>
-<div id="jobs-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
-  <div id="dashboard-health" style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap"></div>
-  <div id="dashboard-daemons" style="margin-bottom:16px"></div>
-  <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:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Job History</h3>
-  <div id="jobs-list" style="font-size:0.78rem"></div>
+<div id="jobs-panel" class="omnius-route-shell" data-route-page="dashboard" data-route-tab="jobs" style="display:none;flex:1;overflow-y:auto">
+  ${renderRouteHeading({ page: "dashboard", eyebrow: "Operations", title: "System dashboard", description: "Health, active execution, scheduled automation, services, usage, and job history share one scan-friendly command grid.", signals: ["health", "daemons", "usage", "history"] })}
+  <div class="observability-grid" data-layout="dashboard-metrics">
+    <section class="observability-card observability-span-6" data-module="runtime-health">
+      <header class="observability-card__header"><h2 class="observability-card__title">Runtime health</h2><span class="observability-card__meta">live daemon telemetry</span></header>
+      <div id="dashboard-health" class="observability-card__body observability-facts"></div>
+    </section>
+    <section class="observability-card observability-span-2" data-module="active-processes">
+      <header class="observability-card__header"><h2 class="observability-card__title">Active processes</h2><span class="observability-card__meta">agent runs</span></header>
+      <div id="dashboard-daemons" class="observability-card__body"></div>
+    </section>
+    <section class="observability-card observability-span-4" data-module="scheduled-tasks">
+      <header class="observability-card__header"><h2 class="observability-card__title">Scheduled tasks</h2><span class="observability-card__meta">automation control</span></header>
+      <div id="dashboard-scheduled" class="observability-card__body"></div>
+    </section>
+    <section class="observability-card observability-span-3" data-module="services">
+      <header class="observability-card__header"><h2 class="observability-card__title">Services</h2><span class="observability-card__meta">systemd --user</span></header>
+      <div id="dashboard-services" class="observability-card__body"></div>
+    </section>
+    <section class="observability-card observability-span-3" data-module="token-usage">
+      <header class="observability-card__header"><h2 class="observability-card__title">Token usage</h2><span class="observability-card__meta">persistent by provider</span></header>
+      <div id="dashboard-usage" class="observability-card__body"></div>
+    </section>
+    <section class="observability-card observability-span-6" data-module="job-history">
+      <header class="observability-card__header"><h2 class="observability-card__title">Job history</h2><span class="observability-card__meta">latest 20 runs</span></header>
+      <div class="observability-card__body observability-table-scroll"><div id="jobs-list" style="font-size:0.78rem"></div></div>
+    </section>
+  </div>
 </div>
-<div id="config-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
-  <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:var(--color-brand);font-size:0.7rem;margin:16px 0 8px">Model</h3>
-  <div style="display:flex;gap:8px;align-items:center">
+<div id="config-panel" class="omnius-route-shell" data-route-page="settings" data-route-tab="config" style="display:none;flex:1;overflow-y:auto">
+  ${renderRouteHeading({ page: "settings", eyebrow: "Control plane", title: "Settings", description: "Inspect daemon configuration, choose models and providers, manage profiles, and export session data from one modular surface.", signals: ["runtime", "models", "providers", "profiles"] })}
+  <div class="observability-grid" data-layout="config-form">
+  <section class="observability-card observability-span-2" data-module="server-configuration">
+    <header class="observability-card__header"><h2 class="observability-card__title">Server configuration</h2><span class="observability-card__meta">read only</span></header>
+    <div id="config-content" class="observability-card__body" style="font-size:0.78rem"></div>
+  </section>
+  <section class="observability-card observability-span-4" data-module="active-model">
+    <header class="observability-card__header"><h2 class="observability-card__title">Model</h2><span class="observability-card__meta">active inference target</span></header>
+    <div class="observability-card__body observability-actions">
     <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:var(--color-brand);font-size:0.7rem;margin:16px 0 8px">Inference Provider</h3>
+    </div>
+  </section>
+  <section class="observability-card observability-span-6" data-module="inference-provider">
+  <header class="observability-card__header"><h2 class="observability-card__title">Inference provider</h2><span class="observability-card__meta">connection + authentication</span></header>
+  <div class="observability-card__body">
   <div id="config-endpoint" style="font-size:0.78rem;color:var(--color-fg-muted);margin-bottom:8px"></div>
   <div id="config-recent-providers-section" style="display:none;margin-bottom:12px">
     <div style="font-size:0.66rem;color:var(--color-fg-muted);margin-bottom:6px;font-weight:500">Previously connected</div>
@@ -795276,48 +795692,71 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
     </select>
     <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:var(--color-brand);font-size:0.7rem;margin:16px 0 8px">Export Conversation</h3>
-  <div style="display:flex;gap:8px">
+  </div>
+  </section>
+  <section class="observability-card observability-span-3" data-module="agent-profiles">
+    <header class="observability-card__header"><h2 class="observability-card__title">Profiles</h2><span class="observability-card__meta">agent personas</span></header>
+    <div id="config-profiles" class="observability-card__body" style="font-size:0.78rem"></div>
+  </section>
+  <section class="observability-card observability-span-3" data-module="conversation-export">
+    <header class="observability-card__header"><h2 class="observability-card__title">Export conversation</h2><span class="observability-card__meta">portable session record</span></header>
+  <div class="observability-card__body observability-actions">
     <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>
+  </section>
+  </div>
 </div>
-<div id="activity-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
-  <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 id="activity-panel" class="omnius-route-shell" data-route-page="activity" data-route-tab="activity" style="display:none;flex:1;overflow-y:auto">
+  ${renderRouteHeading({ page: "activity", eyebrow: "Audit", title: "Recent activity", description: "Review request outcomes, routes, latency, and actor context as a continuous operational record.", signals: ["status", "latency", "actor"] })}
+  <div class="observability-grid" data-layout="activity-ledger">
+    <section class="observability-card observability-span-6" data-module="audit-log">
+      <header class="observability-card__header"><h2 class="observability-card__title">Audit log</h2><span class="observability-card__meta">latest 50 records</span></header>
+      <div id="activity-feed" class="observability-card__body" style="font-size:0.72rem"></div>
+    </section>
+  </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:8px">
-    <h3 style="color:var(--color-brand);font-size:0.7rem;margin:0">Projects</h3>
-    <div style="display:flex;gap:6px;align-items:center">
+<div id="projects-panel" class="omnius-route-shell" data-route-page="projects" data-route-tab="projects" style="display:none;flex:1;overflow-y:auto">
+  ${renderRouteHeading({ page: "projects", eyebrow: "Workspace registry", title: "Projects", description: "Find, register, and activate workspaces while keeping the current execution context unambiguous.", signals: ["active context", "registry", "discovery"] })}
+  <div class="observability-grid" data-layout="project-toolbar">
+  <section class="observability-card observability-span-6" data-module="workspace-tools">
+    <header class="observability-card__header"><h2 class="observability-card__title">Workspace tools</h2><span class="observability-card__meta">filter · scan · register</span></header>
+    <div class="observability-card__body observability-actions">
       <input id="project-search" type="text" placeholder="Filter projects…" style="background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-fg);padding:3px 8px;border-radius:3px;font-size:0.65rem;width:140px;font-family:inherit" oninput="filterProjects()">
       <button id="scan-btn" onclick="scanProjects()" style="background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-fg-subtle);padding:3px 10px;border-radius:3px;font-size:0.65rem;cursor:pointer;font-family:inherit">🔍 Scan</button>
       <button id="add-project-btn" onclick="showAddProject()" style="background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-fg-subtle);padding:3px 10px;border-radius:3px;font-size:0.65rem;cursor:pointer;font-family:inherit">+ Add</button>
     </div>
-  </div>
-  <div style="font-size:0.65rem;color:var(--color-fg-subtle);margin-bottom:10px">Every folder where you have run <code style="color:var(--color-brand)">omnius</code> is registered here. Click to switch workspace.</div>
-  <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)">
+  </section>
+  <section class="observability-card observability-span-2" data-module="current-workspace">
+    <header class="observability-card__header"><h2 class="observability-card__title">Current workspace</h2><span class="observability-card__meta">active context</span></header>
+  <div id="projects-current" class="observability-card__body" style="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 id="add-project-form" style="display:none;margin-top:10px;padding:10px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:4px">
-    <div style="font-size:0.7rem;color:var(--color-brand);margin-bottom:6px">Add Project</div>
+  </section>
+  <section class="observability-card observability-span-4" data-module="workspace-registry">
+    <header class="observability-card__header"><h2 class="observability-card__title">Registered workspaces</h2><span class="observability-card__meta">select to activate</span></header>
+    <div id="projects-list" class="observability-card__body" style="font-size:0.72rem"></div>
+  </section>
+  <section id="add-project-form" class="observability-card observability-span-6" data-module="register-workspace" style="display:none">
+    <header class="observability-card__header"><h2 class="observability-card__title">Add project</h2><span class="observability-card__meta">absolute filesystem path</span></header>
+    <div class="observability-card__body">
     <input id="add-project-path" type="text" placeholder="/absolute/path/to/project" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg);padding:4px 8px;border-radius:3px;font-size:0.65rem;width:100%;margin-bottom:6px;font-family:inherit">
-    <div style="display:flex;gap:6px">
+    <div class="observability-actions">
       <button onclick="addProject()" style="background:var(--color-brand);border:none;color:var(--color-accent-fg);padding:4px 12px;border-radius:3px;font-size:0.65rem;cursor:pointer;font-family:inherit">Register</button>
       <button onclick="hideAddProject()" style="background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-fg-subtle);padding:4px 12px;border-radius:3px;font-size:0.65rem;cursor:pointer;font-family:inherit">Cancel</button>
     </div>
+    </div>
+  </section>
   </div>
 </div>
 
 <!-- Generate tab — global media generation (image/video/audio/music) backed by
      the unified ~/.omnius model store. Loads models from /v1/media/models,
      generates via /v1/media/<kind>, and browses the global gallery. -->
-<div id="generate-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
-  <div class="hud-workbench">
+<div id="generate-panel" class="omnius-route-shell" data-route-page="generate" data-route-tab="generate" style="display:none;flex:1;overflow-y:auto">
+  ${renderRouteHeading({ page: "generate", eyebrow: "Media operations", title: "Generate", description: "Move between synthesis, perception, model storage, evidence output, and the media archive without leaving the workbench.", signals: ["synthesis", "analysis", "signal", "archive"] })}
+  <div class="hud-workbench" data-layout="generate-workbench">
     <aside class="hud-panel hud-panel--slant hud-rail" id="gen-mode-rail">
       <div class="hud-panel__chrome" aria-hidden="true"></div>
       <header class="hud-panel__header">
@@ -795486,9 +795925,12 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
 </div>
 
 <!-- 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:var(--color-brand);font-size:0.85rem;margin-bottom:4px">voicechat</div>
+<div id="voice-panel" class="omnius-route-shell" data-route-page="voice" data-route-tab="voice" style="display:none;flex:1;overflow-y:auto">
+  ${renderRouteHeading({ page: "voice", eyebrow: "Realtime audio", title: "Voice", description: "Control the live voice session, active model, model-specific options, transcript, and speech test from one observable surface.", signals: ["session", "model", "transcript", "TTS"] })}
+  <div class="observability-grid" data-layout="voice-controls">
+  <section class="observability-card observability-span-4" data-module="voice-session">
+    <header class="observability-card__header"><h2 class="observability-card__title">Voice session</h2><span class="observability-card__meta">mic ↔ ASR ↔ agent ↔ TTS</span></header>
+    <div class="observability-card__body">
     <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
@@ -795500,26 +795942,29 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
       <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: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>
+  </section>
 
-  <div style="margin-bottom:18px">
-    <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">
+  <section class="observability-card observability-span-2" data-module="voice-model">
+    <header class="observability-card__header"><h2 class="observability-card__title">Voice model</h2><span class="observability-card__meta">active engine</span></header>
+    <div class="observability-card__body observability-actions">
       <select id="voice-model-select" onchange="renderVoiceModelOptions()" 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>
+  </section>
 
-  <div id="voice-model-options-panel" style="margin-bottom:18px">
-    <div id="voice-model-options-content" style="font-size:0.7rem;color:var(--color-fg-muted)"></div>
-  </div>
+  <section id="voice-model-options-panel" class="observability-card observability-span-3" data-module="voice-model-options">
+    <header class="observability-card__header"><h2 class="observability-card__title">Model options</h2><span class="observability-card__meta">engine capabilities</span></header>
+    <div id="voice-model-options-content" class="observability-card__body" style="font-size:0.7rem;color:var(--color-fg-muted)"></div>
+  </section>
 
-  <div style="margin-bottom:18px">
-    <div style="color:var(--color-brand);font-size:0.85rem;margin-bottom:4px">say something (test TTS)</div>
-    <div style="display:flex;gap:8px">
+  <section class="observability-card observability-span-3" data-module="voice-tts-test">
+    <header class="observability-card__header"><h2 class="observability-card__title">Speech test</h2><span class="observability-card__meta">test active TTS</span></header>
+    <div class="observability-card__body observability-actions">
       <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>
+  </section>
   </div>
 </div>
 
@@ -795592,7 +796037,7 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
        the mic button on the input row. The panel hits /v1/voice/start
        to warm the engines on first open, /v1/voice/tts to synthesize
        arbitrary text, and /v1/voice/transcribe with mic blob bytes. -->
-  <div id="voice-panel" style="display:none;padding:8px 10px;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);font-size:0.78rem">
+  <div id="voice-mini-panel" style="display:none;padding:8px 10px;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);font-size:0.78rem">
     <div style="display:flex;gap:6px;align-items:center;margin-bottom:6px">
       <span id="voice-state-badge" style="padding:2px 8px;border-radius:10px;background:var(--color-bg-input);border:1px solid var(--color-border);font-size:0.7rem;color:var(--color-fg-muted)">idle</span>
       <button type="button" onclick="warmVoice()" style="font-size:0.74rem">warm</button>
@@ -795614,7 +796059,7 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
   <div id="input-row">
     <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="voice-toggle-btn" type="button" onclick="toggleVoicePanel()" title="open voice panel" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg-muted);padding:10px 12px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer;flex-shrink:0">🎙</button>
+    <button id="voice-input-toggle-btn" type="button" onclick="toggleVoicePanel()" title="open voice panel" style="background:var(--color-bg-input);border:1px solid var(--color-border);color:var(--color-fg-muted);padding:10px 12px;border-radius:3px;font-family:inherit;font-size:0.75rem;cursor:pointer;flex-shrink:0">🎙</button>
     <button id="send-btn" onclick="sendMessage()">send</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
@@ -795753,6 +796198,7 @@ html { scrollbar-color: var(--nclp-line-strong) var(--nclp-bg-main); }
 </div>
 
 <script>
+const webUiRouteSpecs = ${JSON.stringify(WEB_UI_ROUTE_SPECS)};
 // ════════════════════════════════════════════════════════════════════
 // Store layer — Svelte-writable shape, vanilla JS.
 // ════════════════════════════════════════════════════════════════════
@@ -796013,18 +796459,8 @@ const $activeTab = writable('chat');
 
 function parseInitialGuiRoute() {
   const path = (location.pathname || '/').replace(/\\/+$/, '') || '/';
-  const pathToTab = {
-    '/chat': 'chat',
-    '/agent': 'agent',
-    '/voice': 'voice',
-    '/projects': 'projects',
-    '/dashboard': 'jobs',
-    '/jobs': 'jobs',
-    '/activity': 'activity',
-    '/settings': 'config',
-    '/config': 'config',
-  };
-  const tab = pathToTab[path] || null;
+  const matched = webUiRouteSpecs.find(route => route.path === path || route.aliases.includes(path));
+  const tab = matched?.tab || null;
   let chatSession = null;
   if (tab === 'chat') {
     const qs = location.search.replace(/^\\?/, '').trim();
@@ -796223,36 +796659,18 @@ function _projectDisplayName(proj) {
   if (!proj) return 'No project';
   return proj.name || _projectPathLeaf(proj.root) || proj.root || 'Project';
 }
-function _endpointDisplayName(endpoint) {
-  if (!endpoint) return '';
-  try { return new URL(endpoint).host || endpoint; } catch { return String(endpoint); }
-}
 function renderProjectChrome() {
   const proj = $currentProject.get ? $currentProject.get() : null;
-  const cfg = $config.get ? ($config.get() || {}) : {};
   const root = proj?.root || '';
   const name = _projectDisplayName(proj);
-  const headerName = document.getElementById('header-project-name') || document.querySelector('#header .accent');
-  if (headerName) {
-    headerName.textContent = name;
-    headerName.title = root || name;
-  }
   const brand = document.getElementById('sidebar-brand');
   if (brand) {
     brand.textContent = name;
     brand.title = root || name;
   }
   if (statusEl) {
-    const selected = ($selectedModel.get && $selectedModel.get()) || (modelSelect && modelSelect.value) || '';
-    const endpointObj = cfg.endpoint || {};
-    const endpoint = endpointObj.url || cfg.backendUrl || '';
-    const endpointType = endpointObj.backendType || cfg.backendType || '';
-    const endpointLabel = endpoint ? ((endpointType ? endpointType + ' ' : '') + _endpointDisplayName(endpoint)) : '';
-    const bits = [String(_connectionState || 'connecting')];
-    if (selected) bits.push(selected);
-    if (endpointLabel) bits.push(endpointLabel);
-    statusEl.textContent = bits.join(' · ');
-    statusEl.title = [root, endpoint].filter(Boolean).join('\\n');
+    statusEl.textContent = String(_connectionState || 'connecting');
+    statusEl.title = root || name;
     statusEl.className = /connected|ready|online/i.test(_connectionState || '') ? 'status live' : 'status';
   }
   try { _syncSidebarStatus(); } catch {}
@@ -796261,6 +796679,171 @@ function setConnectionState(state) {
   _connectionState = state || 'connecting';
   renderProjectChrome();
 }
+
+// Accessible workspace switcher based on the compact search/listbox pattern
+// used by Voryn. Project state still flows through Omnius's central store.
+let workspacePickerProjects = [];
+let workspacePickerIndex = -1;
+function workspacePickerElements() {
+  return {
+    trigger: document.getElementById('workspace-switcher-trigger'),
+    picker: document.getElementById('workspace-picker'),
+    search: document.getElementById('workspace-picker-search'),
+    list: document.getElementById('workspace-picker-list'),
+  };
+}
+function isWorkspacePickerOpen() {
+  const { picker } = workspacePickerElements();
+  return !!picker && picker.style.display !== 'none';
+}
+async function openWorkspacePicker() {
+  const { trigger, picker, search } = workspacePickerElements();
+  if (!trigger || !picker || !search) return;
+  picker.style.display = 'block';
+  trigger.setAttribute('aria-expanded', 'true');
+  workspacePickerIndex = -1;
+  await loadWorkspacePicker();
+  requestAnimationFrame(() => { try { search.focus(); search.select(); } catch {} });
+}
+function closeWorkspacePicker(restoreFocus) {
+  const { trigger, picker, search } = workspacePickerElements();
+  if (!trigger || !picker) return;
+  picker.style.display = 'none';
+  trigger.setAttribute('aria-expanded', 'false');
+  workspacePickerIndex = -1;
+  if (search) search.value = '';
+  if (restoreFocus) { try { trigger.focus(); } catch {} }
+}
+function toggleWorkspacePicker(event) {
+  if (event) event.stopPropagation();
+  if (isWorkspacePickerOpen()) closeWorkspacePicker(false);
+  else openWorkspacePicker();
+}
+function workspaceAgo(ts) {
+  if (!ts) return '';
+  const seconds = Math.max(0, Math.floor((Date.now() - Number(ts)) / 1000));
+  if (seconds < 60) return seconds + 's';
+  if (seconds < 3600) return Math.floor(seconds / 60) + 'm';
+  if (seconds < 86400) return Math.floor(seconds / 3600) + 'h';
+  return Math.floor(seconds / 86400) + 'd';
+}
+function renderWorkspacePicker(query) {
+  const { list } = workspacePickerElements();
+  if (!list) return;
+  const currentRoot = $currentProject.get?.()?.root || '';
+  const needle = String(query || '').trim().toLowerCase();
+  const matches = workspacePickerProjects.filter(project => {
+    const haystack = (_projectDisplayName(project) + ' ' + (project.root || '')).toLowerCase();
+    return !needle || haystack.includes(needle);
+  });
+  list.replaceChildren();
+  if (!matches.length) {
+    const empty = document.createElement('div');
+    empty.className = 'workspace-picker__empty';
+    empty.textContent = needle ? 'No matching workspaces' : 'No registered workspaces';
+    list.appendChild(empty);
+    return;
+  }
+  for (const project of matches) {
+    const active = project.root === currentRoot;
+    const option = document.createElement('button');
+    option.type = 'button';
+    option.className = 'workspace-picker__option';
+    option.setAttribute('role', 'option');
+    option.setAttribute('aria-selected', active ? 'true' : 'false');
+    option.dataset.root = project.root || '';
+    const copy = document.createElement('span');
+    copy.style.minWidth = '0';
+    const name = document.createElement('span');
+    name.className = 'workspace-picker__name';
+    name.textContent = _projectDisplayName(project);
+    const path = document.createElement('span');
+    path.className = 'workspace-picker__path';
+    const age = workspaceAgo(project.lastSeen);
+    path.textContent = (project.root || '') + (age ? ' · seen ' + age + ' ago' : '');
+    const mark = document.createElement('span');
+    mark.className = 'workspace-picker__check';
+    mark.textContent = active ? 'active' : 'switch';
+    copy.append(name, path);
+    option.append(copy, mark);
+    option.addEventListener('click', () => switchProjectRoot(project.root, option));
+    list.appendChild(option);
+  }
+}
+async function loadWorkspacePicker() {
+  const { list, search } = workspacePickerElements();
+  if (!list) return;
+  list.innerHTML = '<div class="workspace-picker__empty">Loading workspaces...</div>';
+  try {
+    const response = await fetch('/v1/projects', { headers: headers() });
+    if (!response.ok) throw new Error('HTTP ' + response.status);
+    const data = await response.json();
+    workspacePickerProjects = Array.isArray(data.projects) ? data.projects : [];
+    const current = data.current && typeof data.current.root === 'string' ? data.current : null;
+    if ($currentProject.get?.()?.root !== current?.root) $currentProject.set(current);
+    renderWorkspacePicker(search?.value || '');
+  } catch (error) {
+    list.innerHTML = '<div class="workspace-picker__empty">Unable to load workspaces</div>';
+  }
+}
+function filterWorkspacePicker(value) {
+  workspacePickerIndex = -1;
+  renderWorkspacePicker(value);
+}
+function handleWorkspacePickerKeys(event) {
+  const { list } = workspacePickerElements();
+  if (!list) return;
+  const options = Array.from(list.querySelectorAll('.workspace-picker__option'));
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeWorkspacePicker(true);
+    return;
+  }
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    const delta = event.key === 'ArrowDown' ? 1 : -1;
+    workspacePickerIndex = Math.max(0, Math.min(options.length - 1, workspacePickerIndex + delta));
+    options.forEach((option, index) => option.classList.toggle('is-keyboard-active', index === workspacePickerIndex));
+    options[workspacePickerIndex]?.scrollIntoView({ block: 'nearest' });
+    return;
+  }
+  if (event.key === 'Enter' && options.length) {
+    event.preventDefault();
+    options[Math.max(0, workspacePickerIndex)]?.click();
+  }
+}
+async function switchProjectRoot(root, pendingElement) {
+  if (!root) return false;
+  if (pendingElement) pendingElement.disabled = true;
+  try {
+    const response = await fetch('/v1/projects/switch', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...headers() },
+      body: JSON.stringify({ root }),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ message: 'HTTP ' + response.status }));
+      throw new Error(error.message || error.error || 'unknown error');
+    }
+    closeWorkspacePicker(true);
+    await loadProjects();
+    return true;
+  } catch (error) {
+    alert('Switch failed: ' + (error && error.message ? error.message : String(error)));
+    if (pendingElement) pendingElement.disabled = false;
+    return false;
+  }
+}
+document.addEventListener('pointerdown', (event) => {
+  if (isWorkspacePickerOpen() && !event.target.closest('.workspace-switcher')) closeWorkspacePicker(false);
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && isWorkspacePickerOpen()) closeWorkspacePicker(true);
+});
+window.toggleWorkspacePicker = toggleWorkspacePicker;
+window.closeWorkspacePicker = closeWorkspacePicker;
+window.filterWorkspacePicker = filterWorkspacePicker;
+window.handleWorkspacePickerKeys = handleWorkspacePickerKeys;
 let streaming = false;
 let messages = [];
 let chatAbortController = null; // for stop button
@@ -797985,7 +798568,7 @@ async function _refreshVoiceState() {
 }
 
 function toggleVoicePanel() {
-  const p = document.getElementById('voice-panel');
+  const p = document.getElementById('voice-mini-panel');
   if (!p) return;
   if (p.style.display === 'none') {
     p.style.display = 'block';
@@ -797995,7 +798578,7 @@ function toggleVoicePanel() {
   }
 }
 function closeVoicePanel() {
-  const p = document.getElementById('voice-panel');
+  const p = document.getElementById('voice-mini-panel');
   if (p) p.style.display = 'none';
 }
 window.toggleVoicePanel = toggleVoicePanel;
@@ -798275,36 +798858,14 @@ window.closeRemoteConnection = closeRemoteConnection;
 })();
 
 // Tab switching + browser route sync
-const allPanels = ['chat-container','agent-panel','jobs-panel','config-panel','activity-panel','projects-panel','voice-panel','generate-panel'];
+const allPanels = webUiRouteSpecs.map(route => route.panelId);
 function routePathForTab(tab) {
-  const map = {
-    chat: '/chat',
-    agent: '/agent',
-    voice: '/voice',
-    generate: '/generate',
-    projects: '/projects',
-    jobs: '/dashboard',
-    activity: '/activity',
-    config: '/settings',
-  };
-  return map[tab] || '/chat';
+  return webUiRouteSpecs.find(route => route.tab === tab)?.path || '/chat';
 }
 function tabForRoutePath(pathname) {
   const path = (pathname || '/').replace(/\\/+$/, '') || '/';
-  const map = {
-    '/': 'chat',
-    '/chat': 'chat',
-    '/agent': 'agent',
-    '/voice': 'voice',
-    '/generate': 'generate',
-    '/projects': 'projects',
-    '/dashboard': 'jobs',
-    '/jobs': 'jobs',
-    '/activity': 'activity',
-    '/settings': 'config',
-    '/config': 'config',
-  };
-  return map[path] || 'chat';
+  const matched = webUiRouteSpecs.find(route => route.path === path || route.aliases.includes(path));
+  return matched?.tab || 'chat';
 }
 function chatSessionFromRouteSearch(search) {
   const qs = String(search || '').replace(/^\\?/, '').trim();
@@ -798326,13 +798887,19 @@ function syncRouteForTab(tab, replace) {
 }
 function switchTab(tab, opts) {
   opts = opts || {};
-  const panelMap = {chat:'chat-container',agent:'agent-panel',jobs:'jobs-panel',config:'config-panel',activity:'activity-panel',projects:'projects-panel',voice:'voice-panel',generate:'generate-panel'};
-  allPanels.forEach(id => { const el = document.getElementById(id); if(el) el.style.display = 'none'; });
-  const panel = document.getElementById(panelMap[tab]);
+  const route = webUiRouteSpecs.find(candidate => candidate.tab === tab) || webUiRouteSpecs[0];
+  allPanels.forEach(id => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.style.display = 'none';
+    el.setAttribute('aria-hidden', 'true');
+  });
+  const panel = document.getElementById(route.panelId);
   if (panel) {
     // chat AND agent are flex containers (vertical column with sidebar/topbar);
     // other panels are simple block scrollers.
     panel.style.display = (tab === 'chat' || tab === 'agent') ? 'flex' : 'block';
+    panel.setAttribute('aria-hidden', 'false');
   }
   document.getElementById('footer').style.display = tab === 'chat' ? 'flex' : 'none';
   document.querySelectorAll('.tab').forEach(t => { t.style.borderBottomColor = 'transparent'; t.style.color = 'var(--color-fg-faint)'; });
@@ -798340,7 +798907,10 @@ function switchTab(tab, opts) {
   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('#omnius-sidebar .sb-nav').forEach(b => {
-    b.classList.toggle('active', b.getAttribute('data-tab') === tab);
+    const isActive = b.getAttribute('data-tab') === tab;
+    b.classList.toggle('active', isActive);
+    if (isActive) b.setAttribute('aria-current', 'page');
+    else b.removeAttribute('aria-current');
   });
   if ($activeTab.get && $activeTab.get() !== tab) $activeTab.set(tab);
   if (!opts.fromRoute) syncRouteForTab(tab, !!opts.replaceRoute);
@@ -798363,6 +798933,9 @@ function switchTab(tab, opts) {
   }
 }
 window.switchTab = switchTab;
+// Route activation must not depend on a registered/current project. Apply it
+// immediately, then project preference hydration may fill route-local state.
+if (initialGuiRoute.tab) switchTab(initialGuiRoute.tab, { fromRoute: true });
 
 // ════════════════════════════════════════════════════════════
 // Generate tab — global media generation (image/video/audio/music)
@@ -798979,27 +799552,8 @@ async function loadProjects() {
         const root = decodeURIComponent(el.getAttribute('data-root') || '');
         if (!root) return;
         el.style.opacity = '0.5';
-        try {
-          const r = await fetch('/v1/projects/switch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json', ...headers() },
-            body: JSON.stringify({ root }),
-          });
-          if (!r.ok) {
-            const err = await r.json().catch(() => ({ message: 'HTTP ' + r.status }));
-            alert('Switch failed: ' + (err.message || err.error || 'unknown'));
-            el.style.opacity = '1';
-            return;
-          }
-          // Successful switch: re-fetch /v1/projects which updates
-          // $currentProject; the subscription cascade refreshes models,
-          // config, sessions, agent runs, and restores the chat session
-          // for the new project. No more brittle ad-hoc fan-out.
-          await loadProjects();
-        } catch (e) {
-          alert('Switch failed: ' + (e && e.message ? e.message : String(e)));
-          el.style.opacity = '1';
-        }
+        const switched = await switchProjectRoot(root, el);
+        if (!switched) el.style.opacity = '1';
       });
     });
   } catch (e) {
@@ -799363,8 +799917,7 @@ async function loadDaemons() {
       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:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Active Processes</h3>' +
-      d.runs.map(j =>
+    el.innerHTML = d.runs.map(j =>
         '<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> ' +
@@ -799401,7 +799954,7 @@ async function loadScheduled() {
         + '</div>';
       return row;
     }).join('');
-    el.innerHTML = '<h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Scheduled Tasks</h3>' + rows
+    el.innerHTML = rows
       + '<div style="margin-top:6px;display:flex;gap:8px">'
       + '<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>'
@@ -799563,7 +800116,7 @@ async function loadServices() {
         + '<div style="margin-top:4px;display:flex;gap:8px">' + stopBtn + disBtn + '</div>'
         + '</div>';
     }).join('');
-    el.innerHTML = '<h3 style="color:var(--color-brand);font-size:0.7rem;margin-bottom:8px">Services (systemd --user)</h3>' + rows;
+    el.innerHTML = rows;
   } catch {}
 }
 
@@ -799752,7 +800305,6 @@ async function loadDashboard() {
     const totalIn = d.persistent?.totalIn || d.totalTokensIn || 0;
     const totalOut = d.persistent?.totalOut || d.totalTokensOut || 0;
     document.getElementById('dashboard-usage').innerHTML =
-      '<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: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>' +
@@ -802718,6 +803270,7 @@ function toggleSidebar() {
   const sb = document.getElementById('omnius-sidebar');
   if (!sb) return;
   const next = sb.getAttribute('data-collapsed') !== 'true';
+  if (next) closeWorkspacePicker(false);
   sb.setAttribute('data-collapsed', String(next));
   _setLS(SIDEBAR_KEYS.collapsed, next ? '1' : '0');
 }
@@ -804159,8 +804712,22 @@ input.focus();
 </body>
 </html>`;
 }
+var WEB_UI_ROUTE_SPECS, WEB_UI_ROUTE_PATHS;
 var init_web_ui = __esm({
   "packages/cli/src/api/web-ui.ts"() {
+    WEB_UI_ROUTE_SPECS = Object.freeze([
+      { tab: "chat", page: "chat", path: "/chat", aliases: ["/"], panelId: "chat-container" },
+      { tab: "agent", page: "agent", path: "/agent", aliases: [], panelId: "agent-panel" },
+      { tab: "voice", page: "voice", path: "/voice", aliases: [], panelId: "voice-panel" },
+      { tab: "generate", page: "generate", path: "/generate", aliases: [], panelId: "generate-panel" },
+      { tab: "projects", page: "projects", path: "/projects", aliases: [], panelId: "projects-panel" },
+      { tab: "jobs", page: "dashboard", path: "/dashboard", aliases: ["/jobs"], panelId: "jobs-panel" },
+      { tab: "activity", page: "activity", path: "/activity", aliases: [], panelId: "activity-panel" },
+      { tab: "config", page: "settings", path: "/settings", aliases: ["/config"], panelId: "config-panel" }
+    ]);
+    WEB_UI_ROUTE_PATHS = Object.freeze(
+      WEB_UI_ROUTE_SPECS.flatMap((route) => [route.path, ...route.aliases])
+    );
   }
 });
 
@@ -811485,19 +812052,7 @@ async function handleRequest(req3, res, ollamaUrl, verbose, runtimeDefaults = {}
       res.end(svg);
       return;
     }
-    const guiRoutes = /* @__PURE__ */ new Set([
-      "/",
-      "/chat",
-      "/agent",
-      "/voice",
-      "/generate",
-      "/projects",
-      "/dashboard",
-      "/jobs",
-      "/activity",
-      "/settings",
-      "/config"
-    ]);
+    const guiRoutes = new Set(WEB_UI_ROUTE_PATHS);
     if (guiRoutes.has(pathname) && method === "GET" && req3.headers.accept?.includes("text/html")) {
       const htmlHeaders = {
         "Content-Type": "text/html; charset=utf-8",