@zq-silk/yui 2.15.0 → 2.17.0

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

@@ -1,28 +1,33 @@
 import { BREAKPOINTS, DOCK } from "../../shared/geometry.js";
 export const WORKSPACE_SCRIPT = String.raw `
-// The sidebar | center | dock workspace. The dock holds the Task discussion
-// or a live native Session; on desktop it is a resizable column (at the end or
-// in the center), below the narrow breakpoint a full-screen sheet opened
-// explicitly per Task. Everything here is view state and browser preference.
+// The sidebar | center | dock workspace. The dock holds the session page
+// (one Role and Session, as chat or terminal), the Task discussion or the
+// preview; on desktop it is a resizable column (at the end or 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, session, preview }
+//   el        the shell elements (dock, dividers, sidebar, the dock's target
+//             menu, and the page's [data-panel-toggle] / legacy [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
-//             refreshes the Session target chips (app/taskView).
-// The dock state (open, mode, side, width, sheet) is private to this module.
+//   session   the dock's session page (views/dock/session): owner, selected
+//             Session and its chat / terminal mode
+// The dock state (open, view, side, width, sheet) and the Role list offered
+// by the target menu are private to this module.
 export function createWorkspace(deps) {
   const ws = {
     deps: deps,
     dock: readDockState(),
+    // Roles the target menu offers besides Operator (setTargets, app/taskView).
+    targets: [],
     // Task list width: null keeps the CSS default (--sidebar-w); otherwise
     // the width the user dragged to.
     sidebar: { width: Number(readPreference("yui.sidebar.width", "")) || null },
@@ -36,41 +41,43 @@ 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); },
-    openSession: function (target) { openSession(ws, target); },
+    setTargets: function (targets) { ws.targets = targets; drawTarget(ws); },
+    setDockOpen: function (open) { glide(function () { setDockOpen(ws, open); }); },
+    toggleDock: function (mode) { glide(function () { toggleDock(ws, mode); }); },
+    // Shortcuts into the session page: a Role's live Session opens in the
+    // terminal mode, a continuation of the Leader in the chat mode.
+    openSession: function (target) { openSessionPage(ws, target, { mode: "terminal", current: true }); },
     openConversation: function (target, materials) {
-      ws.deps.terminal.close();
-      showDock(ws, true);
-      ws.dock.mode = "conversation";
-      updateLayout(ws);
-      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" });
-      }
+      openSessionPage(ws, target, { mode: "chat", current: true, ...(materials ? { materials: materials } : {}) });
     },
+    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();
-      ws.terminalTarget = { scope: "task", taskId: ws.deps.state.selected, roleName: "leader" };
       ws.dock.sheet = false;
-      ws.dock.mode = preferredMode();
-      ws.deps.conversation.open({ scope: "task", taskId: ws.deps.state.selected, roleName: "leader" });
-      if (ws.dock.mode === "session" && !ws.narrow.matches && ws.dock.open) {
-        ws.deps.terminal.open({ scope: "task", taskId: ws.deps.state.selected, roleName: "leader" });
-      }
+      ws.dock.mode = "conversation";
+      ws.deps.session.open({ scope: "task", taskId: ws.deps.state.selected, roleName: "leader" },
+        { current: true, mode: preferredMode() });
+      pauseHiddenSession(ws);
+      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,
+    // Which dock view: the session page ("conversation"), the Task
+    // discussion or the preview.
     mode: "conversation",
     center: readPreference("yui.dock.side", "end") === "center",
     width: Number(readPreference("yui.dock.width", String(DOCK_INITIAL))) || DOCK_INITIAL,
@@ -80,30 +87,29 @@ function readDockState() {
   };
 }
 
+// The Settings preference picks the session page's starting mode.
 function preferredMode() {
-  return readSessionAccessMode() === "native" ? "session" : "conversation";
+  return readSessionAccessMode() === "native" ? "terminal" : "chat";
 }
 
 function dockVisible(ws) {
   const dock = ws.dock;
   if (ws.narrow.matches ? !dock.sheet : !dock.open) return false;
-  if (ws.deps.state.selected) return true;
-  if (dock.mode === "conversation") return true;
-  return dock.mode === "session" && !!ws.deps.terminal.current();
+  return !!ws.deps.state.selected || dock.mode === "conversation";
 }
 
 function updateLayout(ws) {
   const el = ws.deps.el;
   const dock = ws.dock;
   const selected = !!ws.deps.state.selected;
+  if (!selected && dock.mode !== "conversation") dock.mode = "conversation";
   const visible = dockVisible(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";
   el.conversation.hidden = dock.mode !== "conversation";
   el.preview.hidden = dock.mode !== "preview";
   el.dockTabPreview.setAttribute("aria-selected", String(dock.mode === "preview"));
@@ -112,118 +118,196 @@ function updateLayout(ws) {
   else ws.deps.preview.close();
   el.dockTabConversation.setAttribute("aria-selected", String(dock.mode === "conversation"));
   el.dockTabDiscussion.setAttribute("aria-selected", String(dock.mode === "discussion"));
-  el.dockTabSession.setAttribute("aria-selected", String(dock.mode === "session"));
   el.dockTabDiscussion.disabled = !selected;
   el.dockSwap.setAttribute("aria-pressed", String(dock.center));
   ws.sizing.applySidebarWidth();
   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.detail.querySelectorAll("[data-panel-toggle]").forEach(function (button) {
+    button.setAttribute("aria-expanded", String(visible));
+    button.setAttribute("aria-label", ws.deps.t(visible ? "dock.hide" : "dock.show"));
+  });
+  markSelected(el.detail.querySelectorAll("[data-operator-toggle]"), "aria-pressed", function () { return operatorShown(ws); });
+  drawTarget(ws);
+}
+
+// --- Conversation target -----------------------------------------------------
+// The dock header names who the session page talks to; it is the only Role
+// selector for both chat and terminal. Operator is always offered; a selected
+// Task adds its Roles. Other global Roles use the global message dialog.
+function currentTarget(ws) {
+  const selected = ws.deps.state.selected;
+  if (ws.dock.mode === "conversation") return ws.deps.session.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 targetOptions(ws, current) {
+  const selected = ws.deps.state.selected;
+  const options = [{ scope: "global", roleName: "operator" }];
+  if (selected) {
+    const roles = ws.targets.filter(function (target) { return target.scope === "task" && target.taskId === selected; });
+    if (!roles.some(function (target) { return target.roleName === "leader"; })) options.push({ scope: "task", taskId: selected, roleName: "leader" });
+    roles.forEach(function (target) { options.push(target); });
+  }
+  if (current && !options.some(function (option) { return sameTarget(option, current); })) options.push(current);
+  return options;
+}
+
+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 = targetOptions(ws, 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) {
+    const chosen = sameTarget(target, current);
+    el.dockTargetOptions.append(h("button.dock-target-item", {
+      type: "button", "aria-pressed": String(chosen),
+      onclick: function () { chooseTarget(ws, target); }
+    }, target.scope === "task" ? h("i.dock-target-dot" + (target.live ? ".is-live" : ""), { "aria-hidden": "true" }) : icon("broadcast"),
+      h("span", null, targetLabel(ws, target)),
+      chosen ? icon("check", "icon-sm dock-target-check") : null));
   });
-  el.operator.setAttribute("aria-pressed", String(operatorShown(ws)));
+}
+
+// Keep the session page's mode (chat or terminal) and switch only its owner;
+// from the discussion or preview, the session page opens again.
+function chooseTarget(ws, target) {
+  ws.deps.el.dockTarget.open = false;
+  openSessionPage(ws, { scope: target.scope, roleName: target.roleName, ...(target.scope === "task" ? { taskId: target.taskId } : {}) }, {});
+}
+
+function openSessionPage(ws, target, options) {
+  showDock(ws, true);
+  ws.dock.mode = "conversation";
+  updateLayout(ws);
+  ws.deps.session.open(target, options);
+  syncDockButtons(ws);
 }
 
 // The dock currently shows the global operator Session.
 function operatorShown(ws) {
-  if (ws.dock.mode === "conversation") return dockVisible(ws) && ws.deps.conversation.current()?.scope === "global";
-  const current = ws.deps.terminal.current();
-  return dockVisible(ws) && ws.dock.mode === "session" && !!current && current.scope === "global";
+  return dockVisible(ws) && ws.dock.mode === "conversation" && ws.deps.session.current()?.scope === "global";
 }
 
 function showDock(ws, open) {
   if (ws.narrow.matches) ws.dock.sheet = open;
   else {
     ws.dock.open = open;
-    writePreference("yui.dock.open", String(open));
   }
 }
 
 function setDockOpen(ws, open) {
+  // Closing with focus inside the panel returns it to the page's panel switch
+  // rather than leaving it on a hidden element.
+  const active = document.activeElement;
+  const focusInside = !open && !!active && ws.deps.el.dock.contains(active);
   showDock(ws, open);
-  if (!open) {
-    ws.terminalTarget = ws.deps.terminal.current() || ws.terminalTarget;
-    ws.deps.terminal.close();
-  }
-  if (!open) ws.deps.conversation.close();
-  if (open && ws.dock.mode === "conversation") ws.deps.conversation.reconnect();
-  if (open && ws.dock.mode === "session") {
-    // Keep the selected owner, not a Session identity cached before hiding.
-    const target = ws.terminalTarget || { scope: "global", roleName: "operator" };
-    ws.deps.terminal.open({ scope: target.scope, roleName: target.roleName,
-      ...(target.scope === "task" ? { taskId: target.taskId } : {}) });
+  // Hiding stops polling and detaches the terminal; showing resumes the same
+  // owner and selected Session in the same mode.
+  if (!open) ws.deps.session.close();
+  else if (ws.dock.mode === "conversation") {
+    if (ws.deps.session.current()) ws.deps.session.reconnect();
+    else ws.deps.session.open({ scope: "global", roleName: "operator" }, { mode: preferredMode() });
   }
   updateLayout(ws);
+  if (focusInside) {
+    const toggle = ws.deps.el.detail.querySelector("[data-panel-toggle]");
+    if (toggle) toggle.focus();
+  }
 }
 
 function setDockMode(ws, mode) {
-  if (mode === "preview" && ws.deps.state.selected) {
-    ws.deps.terminal.close();
-    ws.deps.conversation.close();
-    ws.dock.mode = "preview";
-    updateLayout(ws);
-    return;
-  }
+  if (mode === ws.dock.mode) return;
   if (mode === "conversation") {
-    const target = ws.deps.terminal.current() || ws.deps.conversation.current();
-    ws.deps.terminal.close();
     ws.dock.mode = mode;
     updateLayout(ws);
-    ws.deps.conversation.open(target ? { scope: target.scope, ...(target.scope === "task" ? { taskId: target.taskId } : {}), roleName: target.roleName } : ws.deps.state.selected
+    if (ws.deps.session.current()) ws.deps.session.reconnect();
+    else ws.deps.session.open(ws.deps.state.selected
       ? { scope: "task", taskId: ws.deps.state.selected, roleName: "leader" }
-      : { scope: "global", roleName: "operator" });
-    return;
-  }
-  if (mode === "session") {
-    const target = ws.deps.conversation.selection();
-    if (!target) return;
-    openSession(ws, target);
+      : { scope: "global", roleName: "operator" }, { mode: preferredMode() });
+    syncDockButtons(ws);
     return;
   }
-  ws.deps.terminal.close();
-  ws.deps.conversation.close();
-  ws.dock.mode = mode === "session" || !ws.deps.state.selected ? "session" : "discussion";
+  if (!ws.deps.state.selected) return;
+  ws.deps.session.close();
+  ws.dock.mode = mode === "preview" ? "preview" : "discussion";
   updateLayout(ws);
 }
 
+// mode "session" (the legacy native entry) opens the session page in its
+// terminal mode; "discussion" and "preview" need a selected Task.
 function toggleDock(ws, mode) {
   const dock = ws.dock;
   const selected = ws.deps.state.selected;
-  if (dockVisible(ws) && (!mode || dock.mode === mode)) { setDockOpen(ws, false); return; }
-  if (mode) dock.mode = mode === "session" || !selected ? mode : "discussion";
-  if (!selected && dock.mode === "discussion") dock.mode = "session";
+  const view = mode === "session" ? "conversation" : mode;
+  if (dockVisible(ws) && (!view || dock.mode === view)) { setDockOpen(ws, false); return; }
+  if (view) dock.mode = view === "conversation" || selected ? view : "conversation";
+  if (!selected && dock.mode !== "conversation") dock.mode = "conversation";
   setDockOpen(ws, true);
+  if (mode === "session") ws.deps.session.setMode("terminal");
 }
 
-function openSession(ws, target) {
-  ws.terminalTarget = target;
-  ws.deps.conversation.close();
-  ws.dock.mode = "session";
-  showDock(ws, true);
-  ws.deps.terminal.open(target);
-  updateLayout(ws);
-  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);
-  setDockMode(ws, "conversation");
-  ws.deps.conversation.open({ scope: "global", roleName: "operator" });
-  if (preferredMode() === "session") openSession(ws, { scope: "global", roleName: "operator" });
-  syncDockButtons(ws);
+  const current = ws.deps.session.current();
+  openSessionPage(ws, { scope: "global", roleName: "operator" },
+    current && current.scope === "global" && current.roleName === "operator" ? {} : { mode: preferredMode() });
 }
 
-// Leaving a Task: when the dock's last Session belonged to a Task and is no
-// longer connected, the dock returns to the discussion mode.
+// Leaving a Task: the session page returns to Operator, hidden unless shown.
 function leaveTask(ws) {
-  ws.deps.terminal.close();
   ws.dock.mode = "conversation";
-  ws.deps.conversation.open({ scope: "global", roleName: "operator" });
+  ws.deps.session.open({ scope: "global", roleName: "operator" });
+  pauseHiddenSession(ws);
+  syncDockButtons(ws);
+}
+
+// The session page keeps its owner while the panel is hidden but stops
+// polling and detaches; opening the panel reconnects it.
+function pauseHiddenSession(ws) {
+  if (!dockVisible(ws) || ws.dock.mode !== "conversation") ws.deps.session.close();
 }
 
 function bindDockControls(ws) {
@@ -231,17 +315,19 @@ function bindDockControls(ws) {
   const dock = ws.dock;
   el.dockTabDiscussion.addEventListener("click", function () { setDockMode(ws, "discussion"); });
   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,46 @@ export function button(text, options) {
   return element;
 }
 
+// The page header's session-panel switch: the same place on the overview and
+// on every Task page. It shows or hides the dock with its last target and view
+// (Operator, discussion, terminal and preview are chosen inside the panel);
+// layout/workspace keeps aria-expanded and the accessible name current.
+export function panelToggle(t, onClick) {
+  const element = h("button.btn.btn-ghost.dock-toggle.panel-toggle", {
+    type: "button", "aria-label": t("dock.show"), title: t("dock.label") + " · D",
+    "aria-expanded": "false", "aria-controls": "dock", onclick: onClick
+  }, icon("dock"), h("span", null, t("dock.label")));
+  element.dataset.panelToggle = "true";
+  return element;
+}
+
+// The former Operator-only header switch, kept unchanged for pages that still
+// import it; layout/workspace marks it pressed while the dock shows Operator.
+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);
 }