@zq-silk/yui 2.14.0 → 2.16.0

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/api.js

@@ -1,6 +1,8 @@
 export const API_SCRIPT = String.raw `
 // Loopback API client. Every request carries the page token; a write is keyed
 // so an unresolved submission can never be silently replayed from this page.
+import { sessionExpired } from "/assets/js/lib/session.js";
+
 const token = document.querySelector('meta[name="yui-web-token"]').content;
 const unresolved = new Set();
 
@@ -22,6 +24,9 @@ export async function requestJson(path, options) {
       const body = await response.json();
       if (body && body.error) message = body.error;
       if (body && body.disposition === "not-submitted") disposition = "not-submitted";
+      // The server rejected the request before reading it: the browser session
+      // is missing or expired. Return to the sign-in page for this view.
+      if (response.status === 401 && body && body.code === "authentication-required") sessionExpired();
     } catch {}
     throw Object.assign(new Error(message), { disposition, status: response.status });
   }

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/session.js

@@ -0,0 +1,21 @@
+export const SESSION_SCRIPT = String.raw `
+// Browser session helper for password-protected listeners. The session
+// itself is an HttpOnly cookie owned by the server; this module never reads
+// or stores a credential. It only routes an expired page back to the
+// sign-in page with a same-origin return path.
+let redirecting = false;
+
+export function returnTarget() {
+  return window.location.pathname + window.location.search;
+}
+
+// Called when any API read/write answers 401. Navigates once; the fragment
+// survives on the sign-in URL and is restored after a successful sign-in.
+export function sessionExpired() {
+  if (redirecting) return;
+  redirecting = true;
+  const query = new URLSearchParams({ reason: "expired" });
+  if (returnTarget() !== "/") query.set("next", returnTarget());
+  window.location.assign("/login?" + query.toString() + window.location.hash);
+}
+`;

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/dock/terminal.js

@@ -8,6 +8,7 @@ import { h, icon, clear } from "/assets/js/lib/dom.js";
 import { fill } from "/assets/js/lib/format.js";
 import { pageToken, requestJson } from "/assets/js/lib/api.js";
 import { dot } from "/assets/js/ui/primitives.js";
+import { sessionExpired } from "/assets/js/lib/session.js";
 
 function cssVar(name, fallback) {
   const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -172,9 +173,11 @@ function bindSocket(ctl, socket, terminal, link, generation) {
       terminal.writeln("\r\n" + message.message);
     }
   });
-  socket.addEventListener("close", function () {
+  socket.addEventListener("close", function (event) {
     if (generation !== ctl.generation) return;
     link.writable = false;
+    // 1008: the server closed this terminal because its browser session ended.
+    if (event && event.code === 1008) { sessionExpired(); return; }
     if (ctl.stateKey !== "terminal.error") setState(ctl, "terminal.closed", "closed");
   });
   socket.addEventListener("error", function () {

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) {

package/dist/web/assets/client/views/task/page.js

@@ -4,7 +4,7 @@ export const TASK_PAGE_SCRIPT = String.raw `
 // observation arrives separately from the Context snapshot, so every fact it
 // feeds lives in a [data-slot] that updateObservation() redraws in place.
 import { h, icon, clear } from "/assets/js/lib/dom.js";
-import { badge, chip, timeTag } from "/assets/js/ui/primitives.js";
+import { badge, chip, operatorToggle, timeTag, topBar } from "/assets/js/ui/primitives.js";
 import { label, statusBadge } from "/assets/js/domain/vocab.js";
 import { totalOf } from "/assets/js/domain/context.js";
 import { renderOverviewPanel } from "/assets/js/views/task/overview.js";
@@ -29,8 +29,8 @@ export function renderTaskDetail(container, data, t, locale, ctx) {
   container.dataset.jobsLocale = locale;
   data.viewState.coreKey = data.core.coreCursor;
   const page = h("div.page.task-page");
-  page.append(h("header.task-header", null, taskBar(task, t, ctx)),
-    h("div.task-hero", null, h("h1.task-title", null, task.title), taskMeta(task, t, locale)),
+  container.append(taskBar(task, t, ctx));
+  page.append(h("div.task-hero", null, h("h1.task-title", null, task.title), taskMeta(task, t, locale)),
     h("div.tabs-wrap", null, taskTabs(data.core, t, ctx)));
   const panels = {};
   TABS.forEach(function (tab) {
@@ -74,15 +74,15 @@ export function selectTab(container, tab) {
 }
 
 function taskBar(task, t, ctx) {
-  return h("div.task-bar", null,
-    h("button.icon-btn.back-btn", { type: "button", "aria-label": t("actions.back"), title: t("actions.back"), onclick: ctx.onBack }, icon("back")),
+  return topBar(t, ctx.revealSidebar,
     h("nav.crumbs", { "aria-label": t("crumbs.label") },
-      h("button.crumb", { type: "button", onclick: ctx.onBack }, t("crumbs.tasks")),
+      h("button.crumb", { type: "button", title: t("overview.title"), onclick: ctx.onBack }, t("manage.workbench")),
       h("span.crumb-sep", { "aria-hidden": "true" }, "/"),
-      h("code.crumb-current", null, task.id)),
-    h("span.spacer"),
-    dockToggle("discussion", "chat", t("dock.discussion") + " · D", t, ctx),
-    dockToggle("session", "terminal", t("dock.session"), t, ctx));
+      h("code.crumb-current", { title: task.title }, task.id)),
+    [dockToggle("discussion", "chat", t("dock.discussion") + " · D", t, ctx),
+      dockToggle("session", "terminal", t("dock.session"), t, ctx),
+      h("span.task-bar-sep", { "aria-hidden": "true" }),
+      operatorToggle(t, ctx.toggleOperator)]);
 }
 
 function dockToggle(mode, iconName, title, t, ctx) {

package/dist/web/assets/shared/brand.js

@@ -0,0 +1,22 @@
+import { THEMES } from "./themes.js";
+// The Yui mark: a capital Y with an accent dot on a tile (64×64 grid). One
+// geometry source for the in-page mark and the favicon. The in-page mark is
+// drawn with theme tokens via CSS (tile = ink, Y = canvas, dot = accent), so it
+// follows a theme switch; the favicon cannot read page CSS, so each theme gets
+// a pre-coloured copy that the theme script swaps in.
+const Y_PATH = "M17 17L30 33L43 17M30 33V49";
+const DOT = { cx: 49.5, cy: 46, r: 4.6 };
+// Inline glyph for `.brand-mark`; the tile itself is the element's background.
+export function brandGlyphSvg() {
+    return `<svg class="brand-glyph" viewBox="0 0 64 64" aria-hidden="true" focusable="false">`
+        + `<path d="${Y_PATH}" fill="none" stroke="currentColor" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/>`
+        + `<circle class="brand-dot" cx="${DOT.cx}" cy="${DOT.cy}" r="${DOT.r}"/></svg>`;
+}
+function brandIconSvg(tile, glyph, dot) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">`
+        + `<rect width="64" height="64" rx="16" fill="${tile}"/>`
+        + `<path d="${Y_PATH}" fill="none" stroke="${glyph}" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/>`
+        + `<circle cx="${DOT.cx}" cy="${DOT.cy}" r="${DOT.r}" fill="${dot}"/></svg>`;
+}
+// Favicon data URIs keyed by theme id (img-src allows data:).
+export const BRAND_ICONS = Object.freeze(Object.fromEntries(THEMES.map(theme => [theme.id, "data:image/svg+xml," + encodeURIComponent(brandIconSvg(theme.tokens.ink, theme.tokens.canvas, theme.tokens.accent))])));

package/dist/web/assets/shared/geometry.js

@@ -9,11 +9,17 @@ export const BREAKPOINTS = Object.freeze({
     // ≤ small: phone layout for page content.
     small: 620
 });
+// The global navigation rail (Workbench / Models / Settings) on every page.
+export const RAIL_WIDTH = 60;
 export const SIDEBAR = Object.freeze({ min: 240, max: 560, compact: 264, step: 16 });
 export const DOCK = Object.freeze({ min: 320, max: 760, initial: 440, step: 24 });
 // The task column never shrinks below this while a divider is dragged.
 export const CENTER_MIN = 420;
 export const DIVIDER_WIDTH = 9;
+// Between narrow and this width an open dock and the default task list cannot
+// both fit beside a minimum task column, so the task list steps aside while
+// the dock is open (closing the dock brings it back).
+export const DOCK_FOCUS_MAX = RAIL_WIDTH + SIDEBAR.compact + DIVIDER_WIDTH + DOCK.initial + CENTER_MIN - 1;
 export const LAYOUT_GEOMETRY = Object.freeze({
-    narrow: BREAKPOINTS.narrow, sidebar: SIDEBAR, dock: DOCK, centerMin: CENTER_MIN, divider: DIVIDER_WIDTH
+    narrow: BREAKPOINTS.narrow, focusMax: DOCK_FOCUS_MAX, rail: RAIL_WIDTH, sidebar: SIDEBAR, dock: DOCK, centerMin: CENTER_MIN, divider: DIVIDER_WIDTH
 });

package/dist/web/assets/shared/icons.js

@@ -4,10 +4,14 @@
 export const ICON_PATHS = Object.freeze({
     refresh: ["M20 11a8 8 0 0 0-14.3-4.9L4 8", "M4 4v4h4", "M4 13a8 8 0 0 0 14.3 4.9L20 16", "M20 20v-4h-4"],
     search: ["M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14z", "M20 20l-4-4"],
+    textSearch: ["M4 6h14", "M4 11h6", "M4 16h4", "M15.5 19a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z", "M21 21l-3-3"],
     terminal: ["M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z", "M7 10l3 2-3 2", "M12 15h5"],
     send: ["M4 12l16-8-6 16-2.5-6.5z", "M11.5 13.5L20 4"],
     swap: ["M7 7h13", "M16 3l4 4-4 4", "M17 17H4", "M8 13l-4 4 4 4"],
     close: ["M6 6l12 12", "M18 6L6 18"],
+    workbench: ["M4 4h7v7H4z", "M13 4h7v4h-7z", "M13 10h7v10h-7z", "M4 13h7v7H4z"],
+    sidebar: ["M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z", "M9 5v14", "M5.5 9h1", "M5.5 12h1"],
+    menu: ["M4 7h16", "M4 12h16", "M4 17h16"],
     back: ["M19 12H5", "M11 6l-6 6 6 6"],
     dock: ["M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z", "M14 5v14", "M17 9h1", "M17 12h1"],
     settings: ["M4 7h10", "M18 7h2", "M16 5v4", "M4 17h4", "M12 17h8", "M10 15v4"],
@@ -32,6 +36,7 @@ export const ICON_PATHS = Object.freeze({
     dots: ["M5 12h.01", "M12 12h.01", "M19 12h.01"],
     inbox: ["M4 13l2.5-8h11L20 13", "M4 13v6h16v-6", "M4 13h5l1 2h4l1-2h5"],
     user: ["M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M4 20a8 8 0 0 1 16 0"],
+    eyeOff: ["M3 3l18 18", "M10.6 5.1A10 10 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3 3.9", "M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.6 9.6 0 0 0 5.4-1.6", "M9.9 9.9a3 3 0 0 0 4.2 4.2"],
     eye: ["M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z", "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
     plus: ["M12 5v14", "M5 12h14"],
     play: ["M8 5v14l11-7z"],