@zq-silk/yui 2.15.0 → 2.16.0

package/dist/web/assets/client/layout/sidebarNav.js

@@ -0,0 +1,147 @@
+import { LAYOUT_GEOMETRY } from "../../shared/geometry.js";
+export const SIDEBAR_NAV_SCRIPT = String.raw `
+// Task list visibility. On wide screens the list is a column the user can
+// collapse (remembered in this browser). Where it cannot sit beside the
+// workspace — narrow screens, or a medium screen with the dock open — it
+// opens as a drawer over the workspace instead, and closes on a choice,
+// on the scrim, on Escape or by dragging it away. Every [data-sidebar-toggle]
+// reports the state. Drawer motion lives in CSS (layout/responsive); a drag
+// only moves the panels with the finger and hands the release back to CSS.
+// Collapsing the inline column glides through lib/motion.
+import { readPreference, writePreference } from "/assets/js/lib/prefs.js";
+import { layoutTransition } from "/assets/js/lib/motion.js";
+
+const G = ${JSON.stringify(LAYOUT_GEOMETRY)};
+
+// deps: { el: { sidebar, rail?, scrim, collapse }, relayout }
+//   rail        the global rail, which travels with the list on narrow screens
+//   relayout()  re-applies column widths after the list appears or hides
+export function createSidebarNav(deps) {
+  const body = document.body;
+  const state = { collapsed: readPreference("yui.sidebar.collapsed", "0") === "1" };
+
+  // Whether the list can sit in the grid at the current width and dock state.
+  function inlineAvailable() {
+    const width = window.innerWidth;
+    if (width <= G.narrow) return false;
+    return !(width <= G.focusMax && body.classList.contains("dock-open"));
+  }
+  function drawerOpen() { return body.classList.contains("sidebar-drawer"); }
+  function visible() { return drawerOpen() || (inlineAvailable() && !state.collapsed); }
+  function sync() {
+    const expanded = String(visible());
+    document.querySelectorAll("[data-sidebar-toggle]").forEach(function (button) {
+      if (button.getAttribute("aria-expanded") !== expanded) button.setAttribute("aria-expanded", expanded);
+    });
+  }
+  function setCollapsed(collapsed) {
+    state.collapsed = collapsed;
+    writePreference("yui.sidebar.collapsed", collapsed ? "1" : "0");
+    // The columns glide to their new widths (View Transition, desktop only).
+    const update = function () {
+      body.classList.toggle("sidebar-collapsed", collapsed);
+      deps.relayout();
+      sync();
+    };
+    if (typeof layoutTransition === "function") layoutTransition(update);
+    else update();
+  }
+  function setDrawer(open) {
+    if (open === drawerOpen()) return;
+    body.classList.toggle("sidebar-drawer", open);
+    if (open) deps.el.collapse.focus({ preventScroll: true });
+    sync();
+  }
+  function reveal() {
+    if (!inlineAvailable()) setDrawer(true);
+    else if (state.collapsed) setCollapsed(false);
+  }
+  function hide() {
+    if (drawerOpen()) setDrawer(false);
+    else if (inlineAvailable()) setCollapsed(true);
+  }
+
+  body.classList.toggle("sidebar-collapsed", state.collapsed);
+  deps.el.collapse.addEventListener("click", hide);
+  deps.el.scrim.addEventListener("click", function () { setDrawer(false); });
+  // A choice made in the drawer hands the screen back to the workspace.
+  deps.el.sidebar.addEventListener("click", function (event) {
+    if (drawerOpen() && event.target.closest(".task-row, .manage-link, #create-task, #body-search-open")) setDrawer(false);
+  });
+  bindDrag(deps.el, drawerOpen, function () { setDrawer(false); });
+  window.addEventListener("resize", function () { if (drawerOpen() && inlineAvailable()) setDrawer(false); sync(); });
+  // The dock opening or closing changes whether the list fits.
+  new MutationObserver(sync).observe(body, { attributes: true, attributeFilter: ["class"] });
+  sync();
+
+  return {
+    toggle: function () { if (visible()) hide(); else reveal(); },
+    reveal: reveal,
+    hide: hide,
+    closeDrawer: function () { setDrawer(false); },
+    drawerOpen: drawerOpen,
+    sync: sync
+  };
+}
+
+// Drag to dismiss, as native drawers do: once a touch moves mostly sideways,
+// the panels follow the finger (leftward only) and the scrim thins with them.
+// Releasing past a third of the width, or with a quick flick, closes; any
+// other release springs back. Either way CSS animates from the current spot.
+function bindDrag(el, isOpen, close) {
+  const panels = [el.sidebar, el.rail].filter(Boolean);
+  let drag = null;
+  function place(dx) {
+    const offset = "translate3d(" + dx + "px,0,0)";
+    panels.forEach(function (panel) { panel.style.transform = offset; });
+    el.scrim.style.opacity = String(Math.max(0, 1 + dx / drag.width));
+  }
+  function release() {
+    panels.forEach(function (panel) { panel.style.transform = ""; });
+    el.scrim.style.opacity = "";
+    document.body.classList.remove("drawer-dragging");
+  }
+  function start(event) {
+    if (!isOpen() || event.touches.length !== 1) return;
+    const touch = event.touches[0];
+    const width = panels.reduce(function (sum, panel) { return sum + panel.getBoundingClientRect().width; }, 0);
+    drag = { x: touch.clientX, y: touch.clientY, width: width || 1, active: false, dx: 0, at: event.timeStamp, v: 0 };
+  }
+  function move(event) {
+    if (!drag) return;
+    const touch = event.touches[0];
+    const dx = touch.clientX - drag.x;
+    const dy = touch.clientY - drag.y;
+    if (!drag.active) {
+      if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return;
+      // A vertical start is a scroll; leave it alone.
+      if (Math.abs(dy) >= Math.abs(dx) || dx > 0) { drag = null; return; }
+      drag.active = true;
+      document.body.classList.add("drawer-dragging");
+    }
+    const next = Math.min(0, dx);
+    const elapsed = event.timeStamp - drag.at;
+    if (elapsed > 0) drag.v = (next - drag.dx) / elapsed;
+    drag.dx = next;
+    drag.at = event.timeStamp;
+    place(next);
+  }
+  function end() {
+    if (!drag) return;
+    const finished = drag;
+    drag = null;
+    if (!finished.active) return;
+    // Removing the inline offset in the same frame as the class change lets
+    // the CSS transition continue from where the finger let go.
+    const dismiss = finished.dx < -finished.width / 3 || finished.v < -0.45;
+    release();
+    if (dismiss) close();
+  }
+  [el.sidebar, el.rail, el.scrim].filter(Boolean).forEach(function (node) {
+    node.addEventListener("touchstart", start, { passive: true });
+    node.addEventListener("touchmove", move, { passive: true });
+    node.addEventListener("touchend", end, { passive: true });
+    node.addEventListener("touchcancel", end, { passive: true });
+  });
+}
+`;

package/dist/web/assets/client/layout/sizing.js

@@ -18,7 +18,10 @@ export function createSizing(el, dock, sidebar, dockVisible) {
   const root = document.documentElement.style;
 
   function maxDockWidth() {
-    const aside = window.innerWidth > G.narrow ? el.sidebar.offsetWidth : 0;
+    // The global rail and an inline task list both take room from the
+    // workspace; a drawer floats over it and takes none.
+    const inline = !document.body.classList.contains("sidebar-drawer");
+    const aside = window.innerWidth > G.narrow ? G.rail + (inline ? el.sidebar.offsetWidth : 0) : 0;
     return Math.max(G.dock.min, Math.min(G.dock.max, window.innerWidth - aside - G.centerMin));
   }
   function setDockWidth(width, persist) {
@@ -30,7 +33,7 @@ export function createSizing(el, dock, sidebar, dockVisible) {
   }
   function maxSidebarWidth() {
     // An open dock can shrink to its minimum, so it reserves only that much.
-    const reserve = dockVisible() ? G.dock.min + G.divider : 0;
+    const reserve = G.rail + (dockVisible() ? G.dock.min + G.divider : 0);
     return Math.max(G.sidebar.min, Math.min(G.sidebar.max, window.innerWidth - reserve - G.centerMin));
   }
   function applySidebarWidth() {

package/dist/web/assets/client/layout/workspace.js

@@ -5,15 +5,17 @@ export const WORKSPACE_SCRIPT = String.raw `
 // in the center), below the narrow breakpoint a full-screen sheet opened
 // explicitly per Task. Everything here is view state and browser preference.
 import { readPreference, writePreference, readSessionAccessMode } from "/assets/js/lib/prefs.js";
-import { markSelected } from "/assets/js/lib/dom.js";
+import { markSelected, h, icon, clear } from "/assets/js/lib/dom.js";
 import { createSizing } from "/assets/js/layout/sizing.js";
+import { layoutTransition, leave } from "/assets/js/lib/motion.js";
 
 const NARROW_QUERY = "(max-width: ${BREAKPOINTS.narrow}px)";
 const DOCK_INITIAL = ${DOCK.initial};
 
-// deps: { el, state, terminal, sessionOpened }
-//   el        the shell elements (dock, dividers, sidebar, operator button,
-//             and the Task page's [data-dock-toggle] buttons inside el.detail)
+// deps: { el, state, t, terminal, conversation, preview, sessionOpened }
+//   el        the shell elements (dock, dividers, sidebar, the dock's target
+//             menu, and the page's [data-dock-toggle] / [data-operator-toggle]
+//             buttons inside el.detail)
 //   state     read-only here: state.selected
 //   terminal  the dock's native Session (views/dock/terminal)
 //   sessionOpened()  a Session was just opened in the dock; the caller
@@ -36,8 +38,8 @@ export function createWorkspace(deps) {
     dockVisible: function () { return dockVisible(ws); },
     updateLayout: function () { updateLayout(ws); },
     syncDockButtons: function () { syncDockButtons(ws); },
-    setDockOpen: function (open) { setDockOpen(ws, open); },
-    toggleDock: function (mode) { toggleDock(ws, mode); },
+    setDockOpen: function (open) { glide(function () { setDockOpen(ws, open); }); },
+    toggleDock: function (mode) { glide(function () { toggleDock(ws, mode); }); },
     openSession: function (target) { openSession(ws, target); },
     openConversation: function (target, materials) {
       ws.deps.terminal.close();
@@ -47,12 +49,8 @@ export function createWorkspace(deps) {
       ws.deps.conversation.open(target, { current: true, materials: materials });
       syncDockButtons(ws);
     },
-    openOperator: function () { openOperator(ws); },
-    restoreDefaultMode: function () {
-      if (!ws.deps.state.selected && ws.dock.open && !ws.narrow.matches && preferredMode() === "session") {
-        openSession(ws, { scope: "global", roleName: "operator" });
-      }
-    },
+    openOperator: function () { glide(function () { openOperator(ws); }); },
+    toggleOperator: function () { glide(function () { toggleOperator(ws); }); },
     // A newly selected Task starts with the narrow-screen sheet closed.
     enterTask: function () {
       ws.deps.terminal.close();
@@ -60,17 +58,27 @@ export function createWorkspace(deps) {
       ws.dock.sheet = false;
       ws.dock.mode = preferredMode();
       ws.deps.conversation.open({ scope: "task", taskId: ws.deps.state.selected, roleName: "leader" });
+      pauseHiddenConversation(ws);
       if (ws.dock.mode === "session" && !ws.narrow.matches && ws.dock.open) {
         ws.deps.terminal.open({ scope: "task", taskId: ws.deps.state.selected, roleName: "leader" });
       }
+      syncDockButtons(ws);
     },
     leaveTask: function () { leaveTask(ws); }
   };
 }
 
+// User-initiated dock changes (open, close, swap sides) glide the columns to
+// their new widths; internal re-layouts stay immediate.
+function glide(update) {
+  if (typeof layoutTransition === "function") layoutTransition(update);
+  else update();
+}
+
 function readDockState() {
   return {
-    open: readPreference("yui.dock.open", "true") !== "false",
+    // The panel starts closed on every load and opens only on request.
+    open: false,
     mode: "conversation",
     center: readPreference("yui.dock.side", "end") === "center",
     width: Number(readPreference("yui.dock.width", String(DOCK_INITIAL))) || DOCK_INITIAL,
@@ -100,7 +108,7 @@ function updateLayout(ws) {
   document.body.classList.toggle("task-open", selected);
   document.body.classList.toggle("dock-open", visible);
   document.body.classList.toggle("dock-center", dock.center);
-  el.dock.hidden = !visible;
+  revealDock(ws, visible);
   el.divider.hidden = !visible;
   el.discussion.hidden = dock.mode !== "discussion";
   el.session.hidden = dock.mode !== "session";
@@ -119,13 +127,88 @@ function updateLayout(ws) {
   syncDockButtons(ws);
 }
 
+// On narrow screens the dock is a full-screen sheet: CSS slides it up on
+// open, and closing slides it back down before it hides (an immediate close
+// would cut the motion off). Wider screens change the grid; user-initiated
+// changes there glide through glide().
+function revealDock(ws, visible) {
+  const dockEl = ws.deps.el.dock;
+  if (ws.closingDock) { ws.closingDock.cancel(); ws.closingDock = null; }
+  if (visible || dockEl.hidden || !ws.narrow.matches || typeof leave !== "function") { dockEl.hidden = !visible; return; }
+  const closing = leave(dockEl, "sheetDown");
+  if (!closing.animation) { dockEl.hidden = true; return; }
+  ws.closingDock = closing;
+  closing.finished.then(function () {
+    if (ws.closingDock !== closing) return;
+    ws.closingDock = null;
+    dockEl.hidden = true;
+    closing.cancel();
+  });
+}
+
 function syncDockButtons(ws) {
   const el = ws.deps.el;
   const visible = dockVisible(ws);
   markSelected(el.detail.querySelectorAll("[data-dock-toggle]"), "aria-pressed", function (button) {
     return visible && ws.dock.mode === button.dataset.dockToggle;
   });
-  el.operator.setAttribute("aria-pressed", String(operatorShown(ws)));
+  markSelected(el.detail.querySelectorAll("[data-operator-toggle]"), "aria-pressed", function () { return operatorShown(ws); });
+  drawTarget(ws);
+}
+
+// --- Conversation target -----------------------------------------------------
+// The dock header names who the panel talks to. Operator is always offered;
+// a selected Task adds its Leader. Other Roles use the global message dialog.
+function currentTarget(ws) {
+  const mode = ws.dock.mode;
+  const selected = ws.deps.state.selected;
+  if (mode === "session") return ws.deps.terminal.current() || ws.terminalTarget || null;
+  if (mode === "conversation") return ws.deps.conversation.current();
+  return selected ? { scope: "task", taskId: selected, roleName: "leader" } : null;
+}
+
+function targetLabel(ws, target) {
+  if (!target) return ws.deps.t("actions.operator");
+  if (target.scope === "global") return target.roleName === "operator" ? ws.deps.t("actions.operator") : target.roleName;
+  return target.roleName + " · " + target.taskId;
+}
+
+function sameTarget(a, b) {
+  return !!a && !!b && a.scope === b.scope && a.roleName === b.roleName && (a.scope !== "task" || a.taskId === b.taskId);
+}
+
+function drawTarget(ws) {
+  const el = ws.deps.el;
+  const current = currentTarget(ws);
+  el.dockTargetLabel.textContent = targetLabel(ws, current);
+  el.dockTargetIcon.replaceChildren(icon(current && current.scope === "task" ? "target" : "broadcast"));
+  const options = [{ scope: "global", roleName: "operator" }];
+  if (ws.deps.state.selected) options.push({ scope: "task", taskId: ws.deps.state.selected, roleName: "leader" });
+  if (current && !options.some(function (option) { return sameTarget(option, current); })) options.push(current);
+  const signature = JSON.stringify([options, current, ws.deps.t("actions.operator")]);
+  if (el.dockTargetOptions.dataset.signature === signature) return;
+  el.dockTargetOptions.dataset.signature = signature;
+  clear(el.dockTargetOptions);
+  options.forEach(function (target) {
+    el.dockTargetOptions.append(h("button.dock-target-item", {
+      type: "button", "aria-pressed": String(sameTarget(target, current)),
+      onclick: function () { chooseTarget(ws, target); }
+    }, icon(target.scope === "task" ? "target" : "broadcast"), h("span", null, targetLabel(ws, target)),
+      sameTarget(target, current) ? icon("check", "icon-sm dock-target-check") : null));
+  });
+}
+
+// Keep the current view (live terminal or structured conversation) and switch
+// only its owner; Task-only views fall back to the conversation.
+function chooseTarget(ws, target) {
+  ws.deps.el.dockTarget.open = false;
+  if (ws.dock.mode === "session") { openSession(ws, target); return; }
+  ws.deps.terminal.close();
+  showDock(ws, true);
+  ws.dock.mode = "conversation";
+  updateLayout(ws);
+  ws.deps.conversation.open(target);
+  syncDockButtons(ws);
 }
 
 // The dock currently shows the global operator Session.
@@ -139,7 +222,6 @@ function showDock(ws, open) {
   if (ws.narrow.matches) ws.dock.sheet = open;
   else {
     ws.dock.open = open;
-    writePreference("yui.dock.open", String(open));
   }
 }
 
@@ -176,6 +258,7 @@ function setDockMode(ws, mode) {
     ws.deps.conversation.open(target ? { scope: target.scope, ...(target.scope === "task" ? { taskId: target.taskId } : {}), roleName: target.roleName } : ws.deps.state.selected
       ? { scope: "task", taskId: ws.deps.state.selected, roleName: "leader" }
       : { scope: "global", roleName: "operator" });
+    syncDockButtons(ws);
     return;
   }
   if (mode === "session") {
@@ -209,6 +292,11 @@ function openSession(ws, target) {
   ws.deps.sessionOpened();
 }
 
+function toggleOperator(ws) {
+  if (operatorShown(ws)) setDockOpen(ws, false);
+  else openOperator(ws);
+}
+
 function openOperator(ws) {
   ws.deps.terminal.close();
   showDock(ws, true);
@@ -224,6 +312,14 @@ function leaveTask(ws) {
   ws.deps.terminal.close();
   ws.dock.mode = "conversation";
   ws.deps.conversation.open({ scope: "global", roleName: "operator" });
+  pauseHiddenConversation(ws);
+  syncDockButtons(ws);
+}
+
+// The conversation keeps its owner while the panel is hidden but stops
+// polling; opening the panel reconnects it.
+function pauseHiddenConversation(ws) {
+  if (!dockVisible(ws) || ws.dock.mode !== "conversation") ws.deps.conversation.close();
 }
 
 function bindDockControls(ws) {
@@ -233,15 +329,18 @@ function bindDockControls(ws) {
   el.dockTabConversation.addEventListener("click", function () { setDockMode(ws, "conversation"); });
   el.dockTabSession.addEventListener("click", function () { setDockMode(ws, "session"); });
   el.dockTabPreview.addEventListener("click", function () { setDockMode(ws, "preview"); });
-  el.dockClose.addEventListener("click", function () { setDockOpen(ws, false); });
+  el.dockClose.addEventListener("click", function () { glide(function () { setDockOpen(ws, false); }); });
   el.dockSwap.addEventListener("click", function () {
     dock.center = !dock.center;
     writePreference("yui.dock.side", dock.center ? "center" : "end");
-    updateLayout(ws);
+    glide(function () { updateLayout(ws); });
+  });
+  el.globalInputOpen.addEventListener("click", function () { el.dockTarget.open = false; });
+  document.addEventListener("click", function (event) {
+    if (el.dockTarget.open && !el.dockTarget.contains(event.target)) el.dockTarget.open = false;
   });
-  el.operator.addEventListener("click", function () {
-    if (operatorShown(ws)) setDockOpen(ws, false);
-    else openOperator(ws);
+  el.dockTarget.addEventListener("keydown", function (event) {
+    if (event.key === "Escape" && el.dockTarget.open) { event.stopPropagation(); el.dockTarget.open = false; el.dockTarget.querySelector("summary").focus(); }
   });
 }
 `;

package/dist/web/assets/client/lib/motion.js

@@ -0,0 +1,59 @@
+import { BREAKPOINTS } from "../../shared/geometry.js";
+import { MOTION } from "../../shared/motion.js";
+export const MOTION_SCRIPT = String.raw `
+// Script-side motion, on the same durations, curves and presets as the
+// stylesheets (shared/motion.ts). Every helper degrades to an immediate,
+// synchronous change when the browser lacks the API, the user prefers
+// reduced motion, or (for layout transitions) the screen is narrow, where
+// drawers and sheets carry their own CSS motion.
+const M = ${JSON.stringify(MOTION)};
+const NARROW = ${BREAKPOINTS.narrow};
+
+export const motion = M;
+
+export function reducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function options(preset, extra) {
+  return Object.assign({ duration: M.durations[preset.duration], easing: M.easings[preset.easing] }, extra || {});
+}
+
+function canAnimate(el) { return Boolean(el) && typeof el.animate === "function" && !reducedMotion(); }
+
+// Plays a preset on an element that has just appeared. Returns the
+// Animation, or null when nothing was played.
+export function enter(el, name) {
+  const preset = M.presets[name || "rise"];
+  if (!preset || !canAnimate(el)) return null;
+  return el.animate(preset.frames, options(preset));
+}
+
+// Plays an exit preset and resolves once it has finished (or at once when
+// motion is unavailable). The final frame is held until the caller hides
+// the element; call cancel() on the returned animation to abort.
+export function leave(el, name) {
+  const preset = M.presets[name || "fade"];
+  if (!preset || !canAnimate(el)) return { finished: Promise.resolve(), cancel() {} , animation: null };
+  const animation = el.animate(preset.frames, options(preset, { fill: "forwards" }));
+  return { finished: animation.finished.then(function () {}, function () {}), cancel() { animation.cancel(); }, animation };
+}
+
+// Runs a DOM update that moves the workspace columns (sidebar collapse,
+// dock open or close) inside a View Transition, so the columns glide to
+// their new widths. Without support the update runs synchronously.
+let layoutRunning = 0;
+export function layoutTransition(update) {
+  const supported = typeof document !== "undefined" && typeof document.startViewTransition === "function" &&
+    typeof window !== "undefined" && window.innerWidth > NARROW && !reducedMotion() && !document.hidden;
+  if (!supported) { update(); return; }
+  // The column names exist only during the transition (styles/motion).
+  const root = document.documentElement;
+  const done = function () { if (--layoutRunning === 0) root.classList.remove("vt-layout"); };
+  layoutRunning += 1;
+  root.classList.add("vt-layout");
+  let transition;
+  try { transition = document.startViewTransition(update); } catch { done(); update(); return; }
+  transition.finished.finally(done);
+}
+`;

package/dist/web/assets/client/lib/prefs.js

@@ -14,11 +14,38 @@ export function clearPreference(key) {
   try { localStorage.removeItem(key); return true; } catch { return false; }
 }
 
+// Per-tab return points between the workbench and the management areas, so
+// switching back restores the filters, Task or section the user left. Only
+// same-origin paths of the expected area are accepted; anything else falls back.
+const PLACES = { workbench: /^\/(?:\?|$)/, models: /^\/models(?:[/?]|$)/, settings: /^\/settings(?:[/?]|$)/,
+  manage: /^\/(?:models|settings)(?:[/?]|$)/ };
+
+export function rememberPlace(area, href) {
+  if (!PLACES[area] || !PLACES[area].test(href)) return;
+  try { sessionStorage.setItem("yui.nav." + area, href); } catch { /* storage unavailable: links keep defaults */ }
+}
+
+export function recallPlace(area, fallback) {
+  try {
+    const value = sessionStorage.getItem("yui.nav." + area);
+    return value && PLACES[area] && PLACES[area].test(value) ? value : fallback;
+  } catch { return fallback; }
+}
+
+// Point every a[data-nav-area] inside root at its area's return point.
+export function linkPlaces(root) {
+  root.querySelectorAll("a[data-nav-area]").forEach(function (link) {
+    if (!link.dataset.navDefault) link.dataset.navDefault = link.getAttribute("href");
+    link.setAttribute("href", recallPlace(link.dataset.navArea, link.dataset.navDefault));
+  });
+}
+
 // Shared with session access consumers: no server configuration or live
 // Session is changed by this browser-local preference.
 export function readSessionAccessMode() {
-  const value = readPreference("yui.session.accessMode", "native");
-  return value === "structured" ? "structured" : "native";
+  // The structured conversation is the default; the native terminal is opt-in.
+  const value = readPreference("yui.session.accessMode", "structured");
+  return value === "native" ? "native" : "structured";
 }
 
 export function writeSessionAccessMode(value) {

package/dist/web/assets/client/lib/theme.js

@@ -1,3 +1,4 @@
+import { BRAND_ICONS } from "../../shared/brand.js";
 import { DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, THEME_OPTIONS } from "../../shared/themes.js";
 // Shared by the parser-blocking head script and the later settings controller.
 // Both resolve the same browser preference without publishing global state.
@@ -16,15 +17,21 @@ function storedPreference() {
 function resolveTheme(preference, media) {
   return preference === "system" ? (media.matches ? DEFAULT_LIGHT : DEFAULT_DARK) : preference;
 }
+
+// Stamp the resolved theme on <html> and swap in its pre-coloured favicon.
+const BRAND_ICONS = ${JSON.stringify(BRAND_ICONS)};
+function stampTheme(id) {
+  document.documentElement.dataset.theme = id;
+  const icon = document.querySelector('link[rel="icon"]');
+  if (icon && BRAND_ICONS[id] && icon.getAttribute("href") !== BRAND_ICONS[id]) icon.setAttribute("href", BRAND_ICONS[id]);
+}
 `;
 // A same-origin classic script runs before styles/body, unlike the deferred
 // application module graph. No inline script or weaker CSP is needed.
 export const THEME_BOOTSTRAP_SCRIPT = String.raw `
 (function () {
 ${THEME_PREFERENCE_SCRIPT}
-  document.documentElement.dataset.theme = resolveTheme(
-    storedPreference(), window.matchMedia("(prefers-color-scheme: light)")
-  );
+  stampTheme(resolveTheme(storedPreference(), window.matchMedia("(prefers-color-scheme: light)")));
 })();
 `;
 export const THEME_SCRIPT = String.raw `
@@ -60,7 +67,7 @@ export function createThemeController(container, t) {
     return resolveTheme(preference, media);
   }
   function apply() {
-    document.documentElement.dataset.theme = resolved();
+    stampTheme(resolved());
     if (container) markSelected(container.querySelectorAll("[data-theme-option]"), "aria-pressed", function (button) {
       return button.dataset.themeOption === preference;
     });

package/dist/web/assets/client/ui/primitives.js

@@ -42,6 +42,33 @@ export function button(text, options) {
   return element;
 }
 
+// The page header's Operator switch: the same place on the overview and on
+// every Task page; layout/workspace marks it pressed while the dock shows it.
+export function operatorToggle(t, onClick) {
+  const element = h("button.btn.btn-ghost.dock-toggle.operator-toggle", {
+    type: "button", title: t("actions.operator") + " · O", "aria-pressed": "false", onclick: onClick
+  }, icon("broadcast"), h("span", null, t("actions.operator")));
+  element.dataset.operatorToggle = "true";
+  return element;
+}
+
+// The task-list switch at the start of the page header. It shows only while
+// the list is out of view (collapsed, or a drawer on smaller screens);
+// layout/sidebarNav keeps aria-expanded current.
+export function sidebarToggle(t, onClick) {
+  const element = h("button.icon-btn.side-expand", {
+    type: "button", "aria-label": t("sidebar.show"), title: t("sidebar.show") + " · [", "aria-expanded": "false", onclick: onClick
+  }, h("span.i-sidebar", null, icon("sidebar")), h("span.i-menu", null, icon("menu")));
+  element.dataset.sidebarToggle = "true";
+  return element;
+}
+
+// The top bar every page starts with (the management shell renders the same
+// markup statically): the list switch, the location, then page actions.
+export function topBar(t, revealSidebar, location, actions) {
+  return h("header.top-bar", null, sidebarToggle(t, revealSidebar), location, h("span.spacer"), actions || []);
+}
+
 export function note(text, toneName) {
   return h("p.note" + (toneName ? ".tone-" + toneName : ""), null, text);
 }

package/dist/web/assets/client/views/overview.js

@@ -4,7 +4,7 @@ export const OVERVIEW_SCRIPT = String.raw `
 // then catalog-wide signals and the explicit Session read.
 import { h, icon, clear } from "/assets/js/lib/dom.js";
 import { byNewest, fill, formatDateTime, relativeTime } from "/assets/js/lib/format.js";
-import { badge, button, dot, emptyState, note } from "/assets/js/ui/primitives.js";
+import { badge, button, dot, emptyState, note, operatorToggle, topBar } from "/assets/js/ui/primitives.js";
 import { card } from "/assets/js/ui/containers.js";
 import { metricTile } from "/assets/js/ui/metrics.js";
 import { label, sessionBadges, tone } from "/assets/js/domain/vocab.js";
@@ -16,6 +16,12 @@ export function renderOverview(container, state, t, locale, actions) {
   const active = tasks.filter(function (task) { return task.status === "active"; });
   const recent = tasks.filter(function (task) { return task.status !== "archived"; }).slice().sort(byNewest).slice(0, 8);
   const page = h("div.page.overview");
+  container.append(topBar(t, actions.revealSidebar,
+    h("nav.crumbs", { "aria-label": t("crumbs.label") },
+      h("span.crumb", null, t("manage.workbench")),
+      h("span.crumb-sep", { "aria-hidden": "true" }, "/"),
+      h("span.crumb-current", null, t("overview.title"))),
+    [operatorToggle(t, actions.toggleOperator)]));
   page.append(overviewHead(state.counts, t, actions), metricStrip(state.counts, t));
   page.append(h("div.card-stack", null,
     inboxCard(state, t, actions),
@@ -30,13 +36,10 @@ export function renderOverview(container, state, t, locale, actions) {
 function overviewHead(counts, t, actions) {
   return h("header.page-head", null,
     h("div.page-head-main", null,
-      h("p.kicker", null, t("overview.kicker")),
       h("h1.page-title", null, t("overview.title")),
       h("p.page-sub", null, counts
         ? fill(t("overview.sub"), { total: counts.total, active: counts.active || 0 })
-        : t("loading.dashboard"))),
-    h("div.page-head-actions", null,
-      button(t("actions.operator"), { icon: "terminal", variant: "ghost", onClick: actions.openOperator })));
+        : t("loading.dashboard"))));
 }
 
 function metricStrip(counts, t) {