@zq-silk/yui 2.16.0 → 2.18.0

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

@@ -1,9 +1,10 @@
 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, h, icon, clear } from "/assets/js/lib/dom.js";
 import { createSizing } from "/assets/js/layout/sizing.js";
@@ -12,19 +13,21 @@ 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, t, terminal, conversation, preview, sessionOpened }
+// deps: { el, state, t, session, preview }
 //   el        the shell elements (dock, dividers, sidebar, the dock's target
-//             menu, and the page's [data-dock-toggle] / [data-operator-toggle]
+//             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 },
@@ -38,30 +41,24 @@ export function createWorkspace(deps) {
     dockVisible: function () { return dockVisible(ws); },
     updateLayout: function () { updateLayout(ws); },
     syncDockButtons: function () { syncDockButtons(ws); },
+    setTargets: function (targets) { ws.targets = targets; drawTarget(ws); },
     setDockOpen: function (open) { glide(function () { setDockOpen(ws, open); }); },
     toggleDock: function (mode) { glide(function () { toggleDock(ws, mode); }); },
-    openSession: function (target) { openSession(ws, target); },
+    // 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);
+      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" });
-      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" });
-      }
+      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); }
@@ -79,6 +76,8 @@ function readDockState() {
   return {
     // 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,
@@ -88,22 +87,22 @@ 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);
@@ -111,7 +110,6 @@ function updateLayout(ws) {
   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"));
@@ -120,7 +118,6 @@ 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();
@@ -149,21 +146,21 @@ function revealDock(ws, visible) {
 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 panel talks to. Operator is always offered;
-// a selected Task adds its Leader. Other Roles use the global message dialog.
+// 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 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();
+  if (ws.dock.mode === "conversation") return ws.deps.session.current();
   return selected ? { scope: "task", taskId: selected, roleName: "leader" } : null;
 }
 
@@ -177,45 +174,57 @@ 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 = [{ 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 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(sameTarget(target, current)),
+      type: "button", "aria-pressed": String(chosen),
       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));
+    }, 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));
   });
 }
 
-// Keep the current view (live terminal or structured conversation) and switch
-// only its owner; Task-only views fall back to the conversation.
+// 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;
-  if (ws.dock.mode === "session") { openSession(ws, target); return; }
-  ws.deps.terminal.close();
+  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.conversation.open(target);
+  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) {
@@ -226,70 +235,54 @@ function showDock(ws, 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" });
+      : { scope: "global", roleName: "operator" }, { mode: preferredMode() });
     syncDockButtons(ws);
     return;
   }
-  if (mode === "session") {
-    const target = ws.deps.conversation.selection();
-    if (!target) return;
-    openSession(ws, target);
-    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);
-}
-
-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();
+  if (mode === "session") ws.deps.session.setMode("terminal");
 }
 
 function toggleOperator(ws) {
@@ -298,28 +291,23 @@ function toggleOperator(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" });
-  pauseHiddenConversation(ws);
+  ws.deps.session.open({ scope: "global", roleName: "operator" });
+  pauseHiddenSession(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();
+// 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) {
@@ -327,7 +315,6 @@ 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 () { glide(function () { setDockOpen(ws, false); }); });
   el.dockSwap.addEventListener("click", function () {

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

@@ -18,7 +18,7 @@ export function clearPreference(key) {
 // 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)(?:[/?]|$)/ };
+  jobs: /^\/jobs(?:[/?]|$)/, manage: /^\/(?:jobs|models|settings)(?:[/?]|$)/ };
 
 export function rememberPlace(area, href) {
   if (!PLACES[area] || !PLACES[area].test(href)) return;

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

@@ -42,8 +42,21 @@ 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.
+// 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