@zq-silk/yui 2.15.0 → 2.17.0

package/dist/web/assets/client/views/dock/session.js

@@ -0,0 +1,229 @@
+export const SESSION_PAGE_SCRIPT = String.raw `
+// The dock's session page: one owner (a Role) and one selected Session, read
+// either as the structured chat or as the live native terminal. The owner is
+// picked in the dock header and the Session in the chat's picker; both carry
+// across modes. Switching mode destroys the old view (polling, socket,
+// listeners and unsent UI state such as drafts and scroll) and builds the
+// other one afresh. Saved submission receipts and pending model switches are
+// facts, not view state, and survive in the chat's existing storage.
+import { h, icon } from "/assets/js/lib/dom.js";
+import { formatShort } from "/assets/js/lib/format.js";
+import { createConversationController } from "/assets/js/views/dock/conversation.js";
+import { createTerminalController } from "/assets/js/views/dock/terminal.js";
+
+export const SESSION_MODES = ["chat", "terminal"];
+
+// host: the dock pane the page owns; notify(message) shows a toast;
+// onChange() runs after the mode changed (the workspace redraws its header).
+export function createSessionPage(host, t, locale, notify, onChange) {
+  const page = { host: host, t: t, locale: locale, notify: notify || function () {}, onChange: onChange || function () {},
+    owner: null, session: null, mode: "chat", view: null, active: false, switcher: null };
+  return {
+    // options: { mode, current, materials }. current resolves the owner's
+    // current Session again instead of keeping the selected one.
+    open: function (target, options) { open(page, target, options || {}); },
+    close: function () { page.active = false; if (page.view) page.view.stop(); },
+    reconnect: function () { page.active = true; if (page.view) page.view.start(); },
+    setMode: function (mode) { return setMode(page, mode); },
+    mode: function () { return page.mode; },
+    current: function () { return page.owner; },
+    selection: function () { return page.view ? page.view.selection() : null; },
+    connected: function () { return !!page.view && page.view.connected(); },
+    captureDraftTarget: function () { return page.view ? page.view.captureDraftTarget() : null; },
+    insertReference: function (target, citation) {
+      if (!page.view) throw new Error(t("bodySearch.targetChanged"));
+      page.view.insertReference(target, citation);
+    },
+    relabel: function () { if (page.view) page.view.relabel(); },
+    retheme: function () { if (page.view) page.view.retheme(); }
+  };
+}
+
+function ownerOf(target) {
+  return { scope: target.scope, ...(target.scope === "task" ? { taskId: target.taskId } : {}), roleName: target.roleName };
+}
+
+function sameOwner(a, b) {
+  return !!a && !!b && JSON.stringify(ownerOf(a)) === JSON.stringify(ownerOf(b));
+}
+
+function open(page, target, options) {
+  const ownerChanged = !sameOwner(target, page.owner);
+  const mode = SESSION_MODES.includes(options.mode) ? options.mode : page.mode;
+  if (ownerChanged || options.current) page.session = null;
+  page.owner = ownerOf(target);
+  page.active = true;
+  if (ownerChanged || options.current || mode !== page.mode || !page.view) {
+    page.mode = mode;
+    build(page, { materials: options.materials });
+    page.onChange();
+  } else page.view.start();
+}
+
+// Why the terminal cannot attach to the selected identity, or null when it
+// may try (the terminal checks again against the newest facts).
+function terminalBlock(page) {
+  const session = page.session;
+  if (!session || session.currentId === undefined) return null;
+  if (!session.currentId) return "terminal.noSession";
+  if (session.id && session.id !== session.currentId) return "terminal.notCurrent";
+  return null;
+}
+
+function setMode(page, mode) {
+  if (!SESSION_MODES.includes(mode) || mode === page.mode || !page.owner) return false;
+  const block = mode === "terminal" ? terminalBlock(page) : null;
+  if (block) { page.notify(page.t(block + "Text")); return false; }
+  const focused = page.host.contains(document.activeElement);
+  page.mode = mode;
+  build(page, { discard: true });
+  if (focused && page.switcher) page.switcher.focus(mode);
+  page.onChange();
+  return true;
+}
+
+function build(page, options) {
+  const previous = page.view;
+  page.view = null;
+  if (previous) previous.destroy(!!options.discard);
+  const root = h("div.session-view.is-" + page.mode);
+  page.host.replaceChildren(root);
+  page.switcher = modeSwitch(page);
+  const view = page.mode === "terminal" ? terminalView(page, root, page.switcher.node)
+    : chatView(page, root, page.switcher.node, options.materials);
+  page.view = view;
+  syncSwitch(page);
+  if (page.active) view.start();
+}
+
+// Chat | Terminal for the same owner and Session: a small radio group in the
+// view's own header row, not another navigation layer.
+function modeSwitch(page) {
+  const t = page.t;
+  const buttons = {};
+  const node = h("div.seg.seg-sm.sp-modes", { role: "radiogroup", "aria-label": t("session.mode"), "data-i18n-aria-label": "session.mode" });
+  [["chat", "sparkle", "session.modeChat"], ["terminal", "terminal", "session.modeTerminal"]].forEach(function (entry) {
+    const button = h("button.seg-btn", { type: "button", role: "radio", dataset: { mode: entry[0] },
+      "aria-label": t(entry[2]), "data-i18n-aria-label": entry[2] },
+      icon(entry[1]), h("span", { dataset: { i18n: entry[2] } }, t(entry[2])));
+    button.addEventListener("click", function () { setMode(page, entry[0]); });
+    buttons[entry[0]] = button;
+    node.append(button);
+  });
+  node.addEventListener("keydown", function (event) {
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault();
+    const next = page.mode === "chat" ? "terminal" : "chat";
+    if (!setMode(page, next)) buttons[next].focus();
+  });
+  return { node: node, buttons: buttons, focus: function (mode) { buttons[mode].focus(); } };
+}
+
+function syncSwitch(page) {
+  const switcher = page.switcher;
+  if (!switcher) return;
+  const block = terminalBlock(page);
+  Object.keys(switcher.buttons).forEach(function (mode) {
+    const button = switcher.buttons[mode];
+    const chosen = mode === page.mode;
+    button.setAttribute("aria-checked", String(chosen));
+    button.tabIndex = chosen ? 0 : -1;
+  });
+  const terminal = switcher.buttons.terminal;
+  // Blocked stays focusable and explains itself on use instead of going silent.
+  terminal.setAttribute("aria-disabled", String(!!block && page.mode !== "terminal"));
+  terminal.title = block && page.mode !== "terminal" ? page.t(block + "Text") : page.t("session.modeTerminal");
+}
+
+// The chat reports its selected Session so the terminal can follow it.
+function chatView(page, root, tools, materials) {
+  let view = null, opened = false;
+  const ctl = createConversationController(root, page.t, page.locale, {
+    tools: tools,
+    onSelection: function (id, currentId) {
+      if (page.view !== view) return;
+      page.session = { id: id || null, currentId: currentId };
+      syncSwitch(page);
+    }
+  });
+  view = {
+    kind: "chat",
+    start: function () {
+      if (opened) { ctl.reconnect(); return; }
+      opened = true;
+      ctl.open(page.owner, { session: page.session && page.session.id, materials: materials });
+    },
+    stop: function () { ctl.close(); },
+    destroy: function (discard) { ctl.close(); if (discard) ctl.discardDraft(); },
+    selection: ctl.selection,
+    connected: function () { return false; },
+    captureDraftTarget: ctl.captureDraftTarget,
+    insertReference: ctl.insertReference,
+    relabel: function () {},
+    retheme: function () {}
+  };
+  return view;
+}
+
+function sessionName(page, info) {
+  const t = page.t;
+  const current = !!info.id && info.id === info.currentSessionId;
+  const s = info.session;
+  const when = s ? formatShort(s.createdAt, page.locale()) : "";
+  return (current ? t("conversation.current") : t("conversation.previous")) + ((s && s.title) || when ? " · " + ((s && s.title) || when) : "");
+}
+
+function terminalView(page, root, tools) {
+  const t = page.t;
+  let view = null;
+  const name = h("span.sp-term-name", null, t("conversation.sessions"));
+  const state = h("span.conn", { dataset: { state: "idle" } }, h("i", { "aria-hidden": "true" }), h("span", null, t("terminal.idle")));
+  const host = h("div.terminal-host");
+  const emptyTitle = h("p.terminal-empty-title");
+  const emptyText = h("p.terminal-empty-text");
+  const toCurrent = h("button.btn", { type: "button", hidden: true }, t("conversation.backCurrent"));
+  const empty = h("div.terminal-empty", { hidden: true }, icon("terminal", "icon icon-xl"), emptyTitle, emptyText, toCurrent);
+  const cli = h("code");
+  root.classList.add("dock-session");
+  root.append(h("div.session-bar", null, icon("terminal", "icon-sm sp-term-icon"), name, h("span.spacer"), state, tools),
+    host, empty,
+    h("footer.session-foot", null, h("span", { dataset: { i18n: "terminal.cliHint" } }, t("terminal.cliHint")), cli));
+  const ctl = createTerminalController({ host: host, empty: empty, emptyTitle: emptyTitle, emptyText: emptyText, state: state, cli: cli },
+    t, page.locale, page.notify, {
+      onSession: function (info) {
+        if (page.view !== view) return;
+        page.session = { id: info.id, currentId: info.currentSessionId };
+        name.textContent = info.id ? sessionName(page, info) : t("conversation.noSessionShort");
+        name.title = name.textContent;
+        toCurrent.hidden = !(info.id && info.currentSessionId && info.id !== info.currentSessionId);
+        syncSwitch(page);
+      }
+    });
+  // An explicit choice, like the chat's "Back to current Session".
+  toCurrent.addEventListener("click", function () {
+    if (!page.session || !page.session.currentId) return;
+    page.session = { id: page.session.currentId, currentId: page.session.currentId };
+    toCurrent.hidden = true;
+    view.start();
+  });
+  function target() {
+    return { ...page.owner, ...(page.session && page.session.id ? { nativeSessionId: page.session.id } : {}) };
+  }
+  view = {
+    kind: "terminal",
+    start: function () { ctl.open(target()); },
+    stop: function () { ctl.close(); },
+    destroy: function () { ctl.close(); },
+    selection: function () {
+      const session = page.session;
+      return session && session.id && session.id === session.currentId ? { ...page.owner, nativeSessionId: session.id } : null;
+    },
+    connected: ctl.connected,
+    captureDraftTarget: function () { return null; },
+    insertReference: function () { throw new Error(t("bodySearch.targetChanged")); },
+    relabel: function () { ctl.relabel(); },
+    retheme: function () { ctl.retheme(); }
+  };
+  return view;
+}
+`;

package/dist/web/assets/client/views/dock/terminal.js

@@ -1,13 +1,13 @@
 export const TERMINAL_SCRIPT = String.raw `
-// The live native Session terminal in the dock: target chips, the xterm view
-// and its WebSocket. One session is open at a time; opening another target
-// disposes the previous one first.
+// The live native terminal of the session page (views/dock/session): the xterm
+// view and its WebSocket for one owner's current Session. The session page
+// builds the surrounding chrome and destroys this controller with its view;
+// opening another target disposes the previous connection first.
 import { Terminal } from "/assets/vendor/xterm.mjs";
 import { FitAddon } from "/assets/vendor/addon-fit.mjs";
-import { h, icon, clear } from "/assets/js/lib/dom.js";
+import { 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) {
@@ -34,18 +34,19 @@ export function sameTarget(left, right) {
     && (left.scope !== "task" || left.taskId === right.taskId);
 }
 
-// elements: { host, empty, state, cli, targets }; locale() reads the current
-// locale; notify(message) shows a toast.
-export function createTerminalController(elements, t, locale, notify) {
-  const ctl = { elements: elements, t: t, locale: locale, notify: notify, session: null, current: null, generation: 0, stateKey: "terminal.idle", targets: [] };
-  drawTargets(ctl);
+// elements: { host, empty, emptyTitle, emptyText, state, cli }; locale() reads
+// the current locale; notify(message) shows a toast.
+// hooks.onSession({ id, currentSessionId, session }) reports which Session the
+// open target resolved to (or that it has none), before any connection.
+export function createTerminalController(elements, t, locale, notify, hooks) {
+  const ctl = { elements: elements, t: t, locale: locale, notify: notify, hooks: hooks || {}, session: null, current: null,
+    generation: 0, stateKey: "terminal.idle", emptyKey: null };
   return {
-    open: function (target) { open(ctl, target); },
+    open: function (target) { return open(ctl, target); },
     close: function () { close(ctl); },
     current: function () { return ctl.current; },
     connected: function () { return !!ctl.session; },
-    setTargets: function (next) { ctl.targets = next; drawTargets(ctl); },
-    relabel: function () { setState(ctl, ctl.stateKey, elements.state.dataset.state); drawTargets(ctl); },
+    relabel: function () { setState(ctl, ctl.stateKey, elements.state.dataset.state); showEmpty(ctl, ctl.emptyKey); },
     retheme: function () { if (ctl.session) ctl.session.terminal.options.theme = terminalTheme(); }
   };
 }
@@ -56,19 +57,16 @@ function setState(ctl, key, state) {
   ctl.elements.state.lastChild.textContent = ctl.t(key);
 }
 
-function drawTargets(ctl) {
-  const t = ctl.t;
-  const list = ctl.elements.targets;
-  clear(list);
-  ctl.targets.forEach(function (target) {
-    list.append(h("button.target-chip", {
-      type: "button",
-      "aria-pressed": String(sameTarget(target, ctl.current)),
-      title: target.scope === "task" ? target.taskId + " / " + target.roleName : t("terminal.global") + " / " + target.roleName,
-      onclick: function () { open(ctl, target); }
-    }, target.scope === "task" ? dot(target.live ? "ok" : "idle") : icon("broadcast", "icon-sm"), h("span", null, target.roleName)));
-  });
-  if (!ctl.targets.length) list.append(h("span.faint.small", null, t("terminal.noTargets")));
+// Why nothing is attached, in place of the terminal: no Session yet, or the
+// selected Session is no longer the current one. Null hides the message.
+function showEmpty(ctl, key) {
+  ctl.emptyKey = key;
+  const elements = ctl.elements;
+  if (!elements.empty) return;
+  elements.empty.hidden = !key;
+  if (!key) return;
+  if (elements.emptyTitle) elements.emptyTitle.textContent = ctl.t(key + "Title");
+  if (elements.emptyText) elements.emptyText.textContent = ctl.t(key + "Text");
 }
 
 function dispose(ctl) {
@@ -86,30 +84,38 @@ function dispose(ctl) {
 function close(ctl) {
   dispose(ctl);
   ctl.current = null;
-  ctl.elements.empty.hidden = false;
+  showEmpty(ctl, null);
   ctl.elements.cli.textContent = "yui operator enter";
   setState(ctl, "terminal.idle", "idle");
-  drawTargets(ctl);
 }
 
+// A target without nativeSessionId attaches to the owner's current Session; a
+// target naming one attaches only while it is still current. A replaced
+// Session is reported, never silently exchanged for the new current one.
 async function open(ctl, target) {
   dispose(ctl);
   const generation = ctl.generation;
   ctl.current = target;
-  ctl.elements.empty.hidden = true;
+  showEmpty(ctl, null);
   ctl.elements.cli.textContent = cliFor(target);
   setState(ctl, "terminal.connecting", "connecting");
-  drawTargets(ctl);
   try {
-    if (!target.nativeSessionId) {
-      const query = new URLSearchParams({ scope: target.scope, role: target.roleName });
-      if (target.scope === "task") query.set("task", target.taskId);
-      const facts = await requestJson("/api/conversation?" + query);
-      if (generation !== ctl.generation) return;
-      if (!facts.currentSessionId) throw new Error(ctl.t("conversation.noSession"));
-      target = { ...target, nativeSessionId: facts.currentSessionId };
-      ctl.current = target;
+    const query = new URLSearchParams({ scope: target.scope, role: target.roleName });
+    if (target.scope === "task") query.set("task", target.taskId);
+    const facts = await requestJson("/api/conversation?" + query);
+    if (generation !== ctl.generation) return;
+    const currentId = facts.currentSessionId || null;
+    const id = target.nativeSessionId || currentId;
+    const session = (facts.sessions || []).find(function (s) { return s.nativeSessionId === id; }) || null;
+    if (ctl.hooks.onSession) ctl.hooks.onSession({ id: id, currentSessionId: currentId, session: session });
+    if (generation !== ctl.generation) return;
+    if (!id || id !== currentId) {
+      setState(ctl, "terminal.unavailable", "idle");
+      showEmpty(ctl, id ? "terminal.notCurrent" : "terminal.noSession");
+      return;
     }
+    target = { ...target, nativeSessionId: id };
+    ctl.current = target;
   } catch (error) {
     if (generation === ctl.generation) { setState(ctl, "terminal.error", "error"); ctl.notify(error.message); }
     return;
@@ -197,6 +203,9 @@ function ready(ctl, message, terminal, link) {
       current: number.format(message.history.limit), target: number.format(message.history.target)
     }));
   }
-  terminal.focus();
+  // A keyboard user moving through the session page's Chat | Terminal switch
+  // keeps focus there (arrow keys must not become terminal input).
+  const active = document.activeElement;
+  if (!(active && active.closest && active.closest(".sp-modes"))) terminal.focus();
 }
 `;

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, panelToggle, 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"))),
+    [panelToggle(t, actions.togglePanel)]));
   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, panelToggle, 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,22 +74,12 @@ 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));
-}
-
-function dockToggle(mode, iconName, title, t, ctx) {
-  return h("button.btn.btn-ghost.dock-toggle", {
-    type: "button", dataset: { dockToggle: mode }, title: title,
-    onclick: function () { ctx.showDock(mode); }
-  }, icon(iconName), h("span", null, t("dock." + mode)));
+      h("code.crumb-current", { title: task.title }, task.id)),
+    [panelToggle(t, ctx.togglePanel)]);
 }
 
 function taskMeta(task, t, locale) {

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"],

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

@@ -0,0 +1,74 @@
+// The motion system: every duration, easing, keyframe and stacking layer in
+// the web UI comes from here. The stylesheets read the generated CSS custom
+// properties (tokens.ts) and keyframes (styles/motion.ts); client scripts read
+// the same values as JSON (client/lib/motion.ts). Changing a number below
+// retimes the whole interface in one place.
+//
+// The curves follow well-known open-source component libraries: `sheet` is
+// the iOS / Vaul drawer curve, `standard` a Material/Radix-style ease-out for
+// small UI, and `exit` an accelerate curve so things leave quicker than they
+// arrive.
+export const DURATIONS = Object.freeze({
+    // Hover, press and colour feedback.
+    fast: 120,
+    // Popovers, menus, dialogs, content swaps.
+    base: 200,
+    // Exits are a little quicker than entries.
+    exit: 150,
+    // Column resizes (sidebar collapse, dock open) via View Transitions.
+    layout: 260,
+    // Drawers and sheets.
+    sheet: 420,
+    sheetOut: 300,
+    // Cross-document page transitions.
+    page: 220
+});
+export const EASINGS = Object.freeze({
+    standard: "cubic-bezier(.2,.8,.2,1)",
+    sheet: "cubic-bezier(.32,.72,0,1)",
+    exit: "cubic-bezier(.4,0,1,1)"
+});
+// Stacking layers, lowest to highest.
+export const LAYERS = Object.freeze({
+    raised: 1,
+    sticky: 10,
+    header: 20,
+    popover: 30,
+    sheet: 60,
+    scrim: 70,
+    drawer: 71,
+    railOver: 72,
+    toast: 90,
+    skip: 100
+});
+// Keyframe presets. Each is emitted as a CSS @keyframes rule named
+// `m-<name>` and handed to the Web Animations API by the client.
+export const PRESETS = Object.freeze({
+    fade: { frames: [{ opacity: 0 }, { opacity: 1 }], duration: "base", easing: "standard" },
+    rise: { frames: [{ opacity: 0, transform: "translate3d(0,6px,0)" }, { opacity: 1, transform: "none" }], duration: "base", easing: "standard" },
+    pop: { frames: [{ opacity: 0, transform: "scale(.96)" }, { opacity: 1, transform: "none" }], duration: "base", easing: "standard" },
+    sheetUp: { frames: [{ transform: "translate3d(0,100%,0)" }, { transform: "translate3d(0,0,0)" }], duration: "sheet", easing: "sheet" },
+    sheetDown: { frames: [{ transform: "translate3d(0,0,0)" }, { transform: "translate3d(0,100%,0)" }], duration: "sheetOut", easing: "sheet" }
+});
+const kebab = (name) => name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+// CSS custom properties: --t-<duration>, --ease-<easing>, --z-<layer>.
+// `--t-med` and `--ease` stay as aliases for the existing stylesheets.
+export function motionTokenStyles() {
+    const t = Object.entries(DURATIONS).map(([k, v]) => `--t-${kebab(k)}:${v}ms`);
+    const e = Object.entries(EASINGS).map(([k, v]) => `--ease-${kebab(k)}:${v}`);
+    const z = Object.entries(LAYERS).map(([k, v]) => `--z-${kebab(k)}:${v}`);
+    return [...t, "--t-med:var(--t-base)", ...e, "--ease:var(--ease-standard)", ...z].join(";") + ";";
+}
+function frameCss(frame) {
+    return Object.entries(frame).map(([k, v]) => `${kebab(k)}:${v}`).join(";");
+}
+export function motionKeyframes() {
+    const presets = Object.entries(PRESETS).map(([name, p]) => {
+        const last = p.frames.length - 1;
+        const stops = p.frames.map((f, i) => `${last ? Math.round((i / last) * 100) : 0}%{${frameCss(f)}}`).join("");
+        return `@keyframes m-${kebab(name)}{${stops}}`;
+    });
+    return [...presets, "@keyframes m-spin{to{transform:rotate(360deg)}}", "@keyframes m-blink{50%{opacity:.35}}"].join("\n");
+}
+// The JSON the client motion helper reads.
+export const MOTION = Object.freeze({ durations: DURATIONS, easings: EASINGS, presets: PRESETS });

package/dist/web/assets/shell/appRail.js

@@ -0,0 +1,14 @@
+import { brandGlyphSvg } from "../shared/brand.js";
+import { iconSvg } from "../shared/icons.js";
+const item = (area, href, icon, key, label, current, id) => `<a${id ? ` id="${id}"` : ""} class="rail-item" href="${href}" data-area="${area}"${area === current ? ` aria-current="page"` : ""}${area === "workbench" && current === "workbench" ? "" : ` data-nav-area="${area}"`} title="${label}" data-i18n-title="${key}">${iconSvg(icon)}<span data-i18n="${key}">${label}</span></a>`;
+export function appRail(current) {
+    const brandNav = current === "workbench" ? "" : ` data-nav-area="workbench"`;
+    return `<nav class="app-rail" aria-label="Main navigation" data-i18n-aria-label="manage.nav">
+      <a class="rail-brand" href="/"${brandNav} title="Yui"><span class="brand-mark" aria-hidden="true">${brandGlyphSvg()}</span><span class="sr-only">Yui</span></a>
+      <div class="rail-items">
+        ${item("workbench", "/", "workbench", "manage.workbench", "Workbench", current, current === "workbench" ? "rail-workbench" : undefined)}
+        ${item("models", "/models", "layers", "models.title", "Models", current)}
+        ${item("settings", "/settings", "settings", "settings.title", "Settings", current, current === "workbench" ? "settings-open" : undefined)}
+      </div>
+    </nav>`;
+}

package/dist/web/assets/shell/dialogs.js

@@ -27,6 +27,7 @@ export const DIALOGS_HTML = `  <dialog id="settings-dialog" class="dialog settin
           <dt><kbd>R</kbd></dt><dd data-i18n="shortcut.refresh">Refresh</dd>
           <dt><kbd>D</kbd></dt><dd data-i18n="shortcut.dock">Show or hide the session panel</dd>
           <dt><kbd>O</kbd></dt><dd data-i18n="shortcut.operator">Operator session</dd>
+          <dt><kbd>[</kbd></dt><dd data-i18n="shortcut.sidebar">Show or hide the task list</dd>
           <dt><kbd>1</kbd>–<kbd>${TASK_TABS.length}</kbd></dt><dd data-i18n="shortcut.tabs">Switch task sections</dd>
           <dt><kbd>Esc</kbd></dt><dd data-i18n="shortcut.escape">Close panel / leave task</dd>
         </dl>