@zq-silk/yui 2.15.0 → 2.17.0

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

@@ -1,17 +1,28 @@
 import { DOCK } from "../shared/geometry.js";
 import { iconSvg } from "../shared/icons.js";
-// The dock divider and the dock region: the Discussion / Live session tabs,
-// their actions, the discussion mount and the terminal pane, whose host,
-// target chips and connection state must survive re-renders.
+// The dock divider and the dock region: one header row with the target menu
+// (the only Role selector), the view tabs (icon-only until the dock is wide)
+// and the dock actions; then the session page mount (chat or terminal, built
+// by views/dock/session), the discussion mount and the preview.
 // The string keeps its indentation inside .app and has no trailing newline.
 export const DOCK_HTML = `    <div id="dock-divider" class="dock-divider" role="separator" tabindex="0" aria-orientation="vertical" aria-valuemin="${DOCK.min}" aria-valuemax="${DOCK.max}" aria-valuenow="${DOCK.initial}" aria-label="Resize session panel" data-i18n-aria-label="dock.resize" hidden><span aria-hidden="true"></span></div>
     <aside id="dock" class="dock" aria-label="Session" data-i18n-aria-label="dock.label" hidden>
       <header class="dock-head">
-        <div class="seg" role="tablist" aria-label="Session view" data-i18n-aria-label="dock.label">
-          <button id="dock-tab-conversation" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-conversation"><span data-i18n="conversation.title">Conversation</span></button>
-          <button id="dock-tab-discussion" class="seg-btn" type="button" role="tab" aria-selected="true" aria-controls="dock-discussion">${iconSvg("chat")}<span data-i18n="dock.discussion">Discussion</span></button>
-          <button id="dock-tab-session" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-session">${iconSvg("terminal")}<span data-i18n="dock.session">Live session</span></button>
-          <button id="dock-tab-preview" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-preview" disabled><span data-i18n="preview.title">Preview</span></button>
+        <details id="dock-target" class="dock-target">
+          <summary class="dock-target-btn" aria-label="Conversation target" data-i18n-aria-label="dock.target">
+            <span id="dock-target-icon" class="dock-target-icon" aria-hidden="true">${iconSvg("broadcast")}</span>
+            <span id="dock-target-label" class="dock-target-label">Operator</span>${iconSvg("down")}
+          </summary>
+          <div class="dock-target-menu">
+            <div id="dock-target-options" class="dock-target-options" role="group" aria-label="Conversation target" data-i18n-aria-label="dock.target"></div>
+            <hr>
+            <button id="global-input-open" class="dock-target-item" type="button">${iconSvg("send")}<span data-i18n="global.openRole">Message another Role…</span></button>
+          </div>
+        </details>
+        <div class="seg seg-sm dock-tabs" role="tablist" aria-label="Session view" data-i18n-aria-label="dock.label">
+          <button id="dock-tab-conversation" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-conversation" aria-label="Conversation" data-i18n-aria-label="conversation.title" title="Conversation" data-i18n-title="conversation.title">${iconSvg("sparkle")}<span data-i18n="conversation.title">Conversation</span></button>
+          <button id="dock-tab-discussion" class="seg-btn" type="button" role="tab" aria-selected="true" aria-controls="dock-discussion" aria-label="Discussion" data-i18n-aria-label="dock.discussion" title="Discussion" data-i18n-title="dock.discussion">${iconSvg("chat")}<span data-i18n="dock.discussion">Discussion</span></button>
+          <button id="dock-tab-preview" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-preview" aria-label="Preview" data-i18n-aria-label="preview.title" title="Preview" data-i18n-title="preview.title" disabled>${iconSvg("eye")}<span data-i18n="preview.title">Preview</span></button>
         </div>
         <div class="dock-actions">
           <button id="dock-swap" class="icon-btn" type="button" aria-label="Swap with task details" data-i18n-aria-label="dock.swap" title="Swap with task details">${iconSvg("swap")}</button>
@@ -21,20 +32,4 @@ export const DOCK_HTML = `    <div id="dock-divider" class="dock-divider" role="
       <section id="dock-conversation" class="dock-pane dock-discussion" role="tabpanel" aria-labelledby="dock-tab-conversation" hidden></section>
       <section id="dock-discussion" class="dock-pane dock-discussion" role="tabpanel" aria-labelledby="dock-tab-discussion"></section>
       <section id="dock-preview" class="dock-pane dock-preview" role="tabpanel" aria-labelledby="dock-tab-preview" hidden></section>
-      <section id="dock-session" class="dock-pane dock-session" role="tabpanel" aria-labelledby="dock-tab-session" hidden>
-        <div class="session-bar">
-          <div id="session-targets" class="session-targets" role="group" aria-label="Session target" data-i18n-aria-label="dock.target"></div>
-          <span id="terminal-state" class="conn" data-state="idle"><i aria-hidden="true"></i><span data-i18n="terminal.idle">Not connected</span></span>
-        </div>
-        <div id="terminal-host" class="terminal-host"></div>
-        <div id="terminal-empty" class="terminal-empty">
-          ${iconSvg("terminal", "icon icon-xl")}
-          <p class="terminal-empty-title" data-i18n="terminal.emptyTitle">Attach to a native Session</p>
-          <p class="terminal-empty-text" data-i18n="terminal.emptyText">Pick a Role above. The panel shows the Session's current screen; attaching never starts or restarts an Agent.</p>
-        </div>
-        <footer class="session-foot">
-          <span data-i18n="terminal.cliHint">Full terminal</span>
-          <code id="terminal-cli">yui operator enter</code>
-        </footer>
-      </section>
     </aside>`;

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

@@ -1,8 +1,10 @@
+import { BRAND_ICONS } from "../shared/brand.js";
 import { DEFAULT_DARK_THEME } from "../shared/themes.js";
 import { STYLESHEETS } from "../styles/index.js";
 import { DIALOGS_HTML } from "./dialogs.js";
 import { DOCK_HTML } from "./dock.js";
 import { SIDEBAR_HTML } from "./sidebar.js";
+import { appRail } from "./appRail.js";
 // Static application frame. Everything inside #detail, #task-list and the dock
 // panes is rendered by the client modules; the shell only fixes the regions
 // and the controls whose identity must survive re-renders. Stylesheets are
@@ -17,8 +19,8 @@ export const DASHBOARD_HTML = `<!doctype html>
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
   <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <link rel="icon" type="image/svg+xml" href="${BRAND_ICONS[DEFAULT_DARK_THEME.id]}">
   <script src="/assets/theme.js"></script>
-  <link rel="icon" href="data:,">
   <title>Yui</title>
   <link rel="preload" href="/assets/fonts/inter-500.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/assets/fonts/inter-600.woff2" as="font" type="font/woff2" crossorigin>
@@ -28,7 +30,9 @@ ${STYLESHEET_LINKS}
 <body>
   <a class="skip-link" href="#center" data-i18n="a11y.skip">Skip to task details</a>
   <div class="app">
+    ${appRail("workbench")}
 ${SIDEBAR_HTML}
+    <div id="sidebar-scrim" class="sidebar-scrim"></div>
     <main id="center" class="center" tabindex="-1">
       <div id="detail" class="detail"></div>
     </main>
@@ -36,6 +40,6 @@ ${DOCK_HTML}
   </div>
 ${DIALOGS_HTML}
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
-  <script type="module" src="/assets/app.js"></script>
+  <script type="module" src="/assets/app.js" blocking="render"></script>
 </body>
 </html>`;

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

@@ -1,18 +1,19 @@
 import { DEFAULT_DARK_THEME } from "../shared/themes.js";
+import { BRAND_ICONS, brandGlyphSvg } from "../shared/brand.js";
 import { iconSvg } from "../shared/icons.js";
 // The only document served without a session. It carries no page token and
 // no Task data; the client module posts the password as same-origin JSON and
 // the server answers with a session cookie. CSP form-action 'none' means the
 // form can never submit natively (so a password cannot end up in a URL).
-const SHEETS = ["fonts", "tokens", "base", "ui/controls", "ui/forms", "views/login"];
+const SHEETS = ["fonts", "tokens", "base", "motion", "ui/controls", "ui/forms", "views/login"];
 export const LOGIN_HTML = `<!doctype html>
 <html lang="en" data-theme="${DEFAULT_DARK_THEME.id}">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
+  <link rel="icon" type="image/svg+xml" href="${BRAND_ICONS[DEFAULT_DARK_THEME.id]}">
   <script src="/assets/theme.js"></script>
-  <link rel="icon" href="data:,">
   <title>Sign in · Yui</title>
   <link rel="preload" href="/assets/fonts/inter-500.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/assets/fonts/inter-600.woff2" as="font" type="font/woff2" crossorigin>
@@ -20,13 +21,13 @@ ${SHEETS.map(name => `  <link rel="stylesheet" href="/assets/css/${name}.css">`)
 </head>
 <body class="login-body">
   <main class="login-shell">
-    <div class="login-top">
-      <label class="login-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
-    </div>
     <section class="login-card" aria-labelledby="login-title">
-      <div class="login-brand">
-        <span class="brand-mark" aria-hidden="true">結</span>
-        <span class="brand-name">Yui</span>
+      <div class="login-top">
+        <div class="login-brand">
+          <span class="brand-mark" aria-hidden="true">${brandGlyphSvg()}</span>
+          <span class="brand-name">Yui</span>
+        </div>
+        <label class="login-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
       </div>
       <header class="login-heading">
         <h1 id="login-title" data-i18n="login.heading">Sign in to Yui</h1>

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

@@ -1,51 +1,63 @@
 import { STYLESHEETS } from "../styles/index.js";
 import { DEFAULT_DARK_THEME } from "../shared/themes.js";
+import { BRAND_ICONS } from "../shared/brand.js";
 import { iconSvg } from "../shared/icons.js";
+import { appRail } from "./appRail.js";
 import { MANAGE_SECTIONS } from "../shared/manageNav.js";
-// One frame and entry point for /models/* and /settings/*. The shared router
-// changes sections without unloading their controllers or drafts. Leaving
-// the management document still uses the browser's unsaved-draft prompt.
+// One frame and entry point for /models/* and /settings/*. The frame is the
+// workbench's own: the global rail, a collapsible list (here the current
+// area's sections), and the center column under the shared top bar. Narrow
+// screens open the rail and the list together as a drawer, exactly as on the
+// workbench. The shared router changes sections without unloading their
+// controllers or drafts. Leaving the management document still uses the
+// browser's unsaved-draft prompt.
 const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
 const sectionLink = (item) => `<a class="manage-link" href="/${item.section === "connection" ? "settings" : item.page}/${item.section}" data-page="${item.page}" data-section="${item.section}"><span data-i18n="${item.key}">${escapeHtml(item.label)}</span><i class="manage-dirty" aria-hidden="true"></i></a>`;
-const area = (name, icon, key, label) => `
+const area = (name, key, label) => `
         <div class="manage-area" data-area-group="${name}">
-          <a class="manage-primary" href="/${name}" data-area="${name}">${iconSvg(icon)}<span data-i18n="${key}">${label}</span></a>
           <div class="manage-sections" role="group" aria-label="${label}" data-i18n-aria-label="${key}">
             ${MANAGE_SECTIONS[name].map(sectionLink).join("\n            ")}
           </div>
         </div>`;
-const RAIL = `<aside class="manage-rail">
-      <header class="manage-rail-head">
-        <a class="brand" href="/" title="Workbench" data-i18n-title="manage.workbench">
-          <span class="brand-mark" aria-hidden="true">結</span><span class="brand-name">Yui</span>
-        </a>
-        <label class="manage-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
+const RAIL = `<aside class="manage-rail sidebar" aria-label="Sections" data-i18n-aria-label="manage.sections">
+      <header class="side-head">
+        <h2 id="manage-area-title" class="side-title"></h2>
+        <button id="sidebar-collapse" class="icon-btn side-collapse" type="button" aria-label="Collapse sections" data-i18n-aria-label="manage.collapseSections" title="Collapse sections · [" data-i18n-title="manage.collapseSections">${iconSvg("sidebar")}</button>
       </header>
-      <nav class="manage-nav" aria-label="Main navigation" data-i18n-aria-label="manage.nav">
-        <div class="manage-area" data-area-group="workbench">
-          <a class="manage-primary" href="/" data-area="workbench">${iconSvg("inbox")}<span data-i18n="manage.workbench">Workbench</span></a>
-        </div>${area("models", "layers", "models.title", "Models")}${area("settings", "settings", "settings.title", "Settings")}
+      <nav class="manage-nav" aria-label="Sections" data-i18n-aria-label="manage.sections">${area("models", "models.title", "Models")}${area("settings", "settings.title", "Settings")}
       </nav>
     </aside>`;
+const TOP_BAR = `<header class="top-bar">
+        <button class="icon-btn side-expand" type="button" data-sidebar-toggle="true" aria-expanded="false" aria-label="Show sections" data-i18n-aria-label="manage.showSections" title="Show sections · [" data-i18n-title="manage.showSections"><span class="i-sidebar">${iconSvg("sidebar")}</span><span class="i-menu">${iconSvg("menu")}</span></button>
+        <nav class="crumbs" aria-label="Location" data-i18n-aria-label="crumbs.label"><span id="manage-crumb-area" class="crumb crumb-static"></span><span class="crumb-sep" aria-hidden="true">/</span><span id="manage-crumb-section" class="crumb-current"></span></nav>
+        <span class="spacer"></span>
+        <label class="top-locale"><span class="sr-only" data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
+      </header>`;
 // One management document. `main` is the page's reading column markup.
 export function manageDocument(options) {
     return `<!doctype html>
 <html lang="en" data-theme="${DEFAULT_DARK_THEME.id}">
 <head>
-  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <link rel="icon" type="image/svg+xml" href="${BRAND_ICONS[DEFAULT_DARK_THEME.id]}">
   <script src="/assets/theme.js"></script>
-  <link rel="icon" href="data:,"><title>Yui · ${options.title}</title>
+  <title>Yui · ${options.title}</title>
   ${STYLESHEETS.map(s => `<link rel="stylesheet" href="/assets/css/${s.name}.css">`).join("\n  ")}
 </head>
 <body class="manage-body ${options.page}-body">
-  <div class="manage-app" data-page="${options.page}" hidden>
+  <div class="app manage-app" data-page="${options.page}" hidden>
+    ${appRail(options.page === "models" ? "models" : "settings")}
     ${RAIL}
-    <main class="manage-main" id="manage-main">
+    <div id="sidebar-scrim" class="sidebar-scrim"></div>
+    <main id="manage-scroll" class="center manage-center" tabindex="-1">
+      ${TOP_BAR}
+      <div class="manage-main" id="manage-main">
 ${options.main}
+      </div>
     </main>
   </div>
-  <script type="module" src="/assets/js/app/manage.js"></script>
+  <script type="module" src="/assets/js/app/manage.js" blocking="render"></script>
 </body></html>`;
 }
 // The common section heading: title and one explanatory line.

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

@@ -10,7 +10,7 @@ export const SETTINGS_MAIN = `
             <fieldset class="field"><legend data-i18n="settings.theme">Theme</legend><div id="theme-options" class="theme-options"></div></fieldset>
             <div class="settings-stack">
               <label class="field"><span data-i18n="settings.language">Language</span><select id="settings-locale"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
-              <label class="field"><span data-i18n="settings.accessMode">Default session access</span><select id="access-mode"><option value="native" data-i18n="settings.native">Native terminal</option><option value="structured" data-i18n="settings.structured">Structured view</option></select></label>
+              <label class="field"><span data-i18n="settings.accessMode">Default session access</span><select id="access-mode"><option value="structured" data-i18n="settings.structured">Structured view</option><option value="native" data-i18n="settings.native">Native terminal</option></select></label>
               <p data-i18n="settings.accessHelp">Preference for subsequent session selection where supported. It does not switch a live Session.</p>
               <button id="reset-layout" type="button" class="btn" data-i18n="settings.resetLayout">Reset saved workspace layout</button>
               <p id="browser-receipt" role="status"></p>

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

@@ -6,24 +6,27 @@ import { iconSvg } from "../shared/icons.js";
 // The string keeps its indentation inside .app and has no trailing newline.
 export const SIDEBAR_HTML = `    <aside class="sidebar" aria-label="Tasks" data-i18n-aria-label="sidebar.label">
       <header class="side-head">
-        <div class="brand">
-          <span class="brand-mark" aria-hidden="true">結</span>
-          <span class="brand-name">Yui</span>
-        </div>
+        <h2 class="side-title" data-i18n="sidebar.label">Tasks</h2>
         <span class="sync" id="sync-state" title="Last sync" data-i18n-title="sync.label">
           <i aria-hidden="true"></i><time id="last-sync">—</time>
         </span>
         <button id="refresh" class="icon-btn" type="button" aria-label="Refresh" data-i18n-aria-label="actions.refresh" title="Refresh · R">${iconSvg("refresh")}</button>
+        <button id="sidebar-collapse" class="icon-btn side-collapse" type="button" aria-label="Collapse task list" data-i18n-aria-label="sidebar.collapse" title="Collapse task list · [" data-i18n-title="sidebar.collapse">${iconSvg("sidebar")}</button>
       </header>
-      <button id="create-task" class="btn btn-primary" type="button" data-i18n="create.title">New task</button>
-      <label class="search-field">
-        ${iconSvg("search")}
-        <span class="sr-only" data-i18n="search.label">Search tasks</span>
-        <input id="search" type="search" autocomplete="off" spellcheck="false" placeholder="Search tasks" data-i18n-placeholder="search.placeholder">
-        <kbd>/</kbd>
-      </label>
-      <button id="body-search-open" class="foot-btn" type="button">${iconSvg("search")}<span data-i18n="bodySearch.title">Search task contents</span></button>
-      <div id="attention-bar" class="attention-bar" aria-live="polite"></div>
+      <div class="side-tools">
+        <button id="create-task" class="btn btn-primary side-create" type="button">${iconSvg("plus")}<span data-i18n="create.title">New task</span></button>
+        <div class="side-search">
+          <label class="search-field">
+            ${iconSvg("search")}
+            <span class="sr-only" data-i18n="search.label">Search tasks</span>
+            <input id="search" type="search" autocomplete="off" spellcheck="false" placeholder="Search tasks" data-i18n-placeholder="search.placeholder">
+            <kbd>/</kbd>
+          </label>
+          <button id="body-search-open" class="icon-btn side-search-body" type="button" aria-label="Search task contents" data-i18n-aria-label="bodySearch.title" title="Search task contents" data-i18n-title="bodySearch.title">${iconSvg("textSearch")}</button>
+        </div>
+        <div id="catalog-source" class="seg seg-sm source-seg" role="radiogroup" aria-label="Task category" data-i18n-aria-label="jobs.taskCategory"></div>
+        <div id="attention-bar" class="attention-bar" aria-live="polite"></div>
+      </div>
       <div id="status-filters" class="status-tabs" role="group" aria-label="Filter by status" data-i18n-aria-label="filters.label"></div>
       <div id="task-list" class="task-list" aria-label="Tasks" data-i18n-aria-label="sidebar.label" aria-live="polite"></div>
       <div id="catalog-controls" class="pager" aria-live="polite">
@@ -32,15 +35,5 @@ export const SIDEBAR_HTML = `    <aside class="sidebar" aria-label="Tasks" data-
         <button id="catalog-next" class="pager-btn" type="button" data-i18n="catalog.next" disabled>Next page</button>
         <button id="catalog-attention-reset" class="pager-clear" type="button" data-i18n="catalog.clearAttention" hidden>Clear attention filter</button>
       </div>
-      <footer class="side-foot">
-        <button id="operator-terminal" class="foot-btn" type="button" title="Operator session · O">
-          ${iconSvg("terminal")}<span data-i18n="actions.operator">Operator</span><kbd>O</kbd>
-        </button>
-        <button id="global-input-open" class="foot-btn" type="button" title="Global input" data-i18n-title="global.open">
-          ${iconSvg("broadcast")}<span data-i18n="global.open">Global input</span>
-        </button>
-        <a id="models-open" class="icon-btn" href="/models" aria-label="Models" data-i18n-aria-label="models.title" title="Models" data-i18n-title="models.title">${iconSvg("layers")}</a>
-        <button id="settings-open" class="icon-btn" type="button" aria-label="Settings" data-i18n-aria-label="settings.title" title="Settings">${iconSvg("settings")}</button>
-      </footer>
     </aside>
     <div id="sidebar-divider" class="sidebar-divider" role="separator" tabindex="0" aria-orientation="vertical" aria-valuemin="${SIDEBAR.min}" aria-valuemax="${SIDEBAR.max}" aria-valuenow="${SIDEBAR.compact}" aria-label="Resize task list" data-i18n-aria-label="sidebar.resize" title="Drag to resize · double-click to reset" data-i18n-title="sidebar.resizeHint"><span aria-hidden="true"></span></div>`;

package/dist/web/assets/styles/base.js

@@ -28,7 +28,7 @@ input:disabled,select:disabled,textarea:disabled{opacity:.55}
 ::-webkit-scrollbar-track{background:transparent}
 [hidden]{display:none!important}
 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
-.skip-link{position:fixed;left:12px;top:-60px;z-index:100;padding:9px 14px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;transition:top var(--t-fast)}
+.skip-link{position:fixed;left:12px;top:-60px;z-index:var(--z-skip);padding:9px 14px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;transition:top var(--t-fast)}
 .skip-link:focus{top:12px}
 .icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
 .icon-sm{width:14px;height:14px}

package/dist/web/assets/styles/index.js

@@ -3,6 +3,7 @@ import { BASE_STYLES } from "./base.js";
 import { RESPONSIVE_STYLES } from "./layout/responsive.js";
 import { WORKSPACE_STYLES } from "./layout/workspace.js";
 import { MARKDOWN_STYLES } from "./markdown.js";
+import { MOTION_STYLES } from "./motion.js";
 import { TOKEN_STYLES } from "./tokens.js";
 import { CONTROL_STYLES } from "./ui/controls.js";
 import { FORM_STYLES } from "./ui/forms.js";
@@ -29,6 +30,7 @@ export const STYLESHEETS = Object.freeze([
     { name: "fonts", body: FONT_FACE_STYLES },
     { name: "tokens", body: TOKEN_STYLES },
     { name: "base", body: BASE_STYLES },
+    { name: "motion", body: MOTION_STYLES },
     { name: "layout/workspace", body: WORKSPACE_STYLES },
     { name: "ui/controls", body: CONTROL_STYLES },
     { name: "ui/surfaces", body: SURFACE_STYLES },

package/dist/web/assets/styles/layout/responsive.js

@@ -1,38 +1,83 @@
-import { BREAKPOINTS, SIDEBAR } from "../../shared/geometry.js";
+import { BREAKPOINTS, DOCK_FOCUS_MAX, SIDEBAR } from "../../shared/geometry.js";
 /*
  * RESPONSIVE — breakpoints only, from shared/geometry.ts.
  *   ≤ wide    compact sidebar default and a three-column metric strip
- *   ≤ narrow  master–detail: task list OR task page; the dock becomes a
- *             full-screen sheet over the task page
+ *   ≤ focus   an open dock moves the task list out of the grid so the task
+ *             column keeps its minimum width; it opens as a drawer instead
+ *   ≤ narrow  the workspace takes the screen; the rail and the list open
+ *             together as one drawer, and the dock becomes a full-screen sheet
  *   ≤ small   phone layout for page content
- * Sidebar container queries adapt its footer to the width the user chose.
+ *
+ * Motion follows the native sheet pattern (Vaul, Radix Sheet, iOS): drawers
+ * and sheets stay rendered off screen and move only by transform, so opening
+ * and closing both animate on the compositor; the scrim only fades. A drag
+ * (layout/sidebarNav) moves the panels directly and the release continues
+ * from where the finger left them.
  */
 export const RESPONSIVE_STYLES = `
-@container sidebar (max-width:299px){
-  .foot-btn kbd{display:none}
-}
-@container sidebar (max-width:259px){
-  .foot-btn{gap:0;padding:0 9px}
-  .foot-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
-}
 @media(max-width:${BREAKPOINTS.wide}px){
   :root{--sidebar-w:${SIDEBAR.compact}px}
   .metric-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
 }
+@media(min-width:${BREAKPOINTS.narrow + 1}px) and (max-width:${DOCK_FOCUS_MAX}px){
+  body.dock-open .app{grid-template-areas:"rail center divider dock";grid-template-columns:var(--rail-w) minmax(0,1fr) var(--divider-w) var(--dock-w)}
+  body.dock-open.dock-center .app{grid-template-areas:"rail dock divider center";grid-template-columns:var(--rail-w) var(--dock-w) var(--divider-w) minmax(0,1fr)}
+  body.dock-open .sidebar-divider{display:none}
+  body.dock-open .side-expand{display:inline-grid}
+  /* The list slides out from under the rail. */
+  body.dock-open .app-rail{position:relative;z-index:var(--z-rail-over)}
+  body.dock-open.sidebar-collapsed .app .sidebar{display:flex}
+  body.dock-open .app .sidebar{--drawer-w:min(340px,calc(100vw - var(--rail-w) - 24px));display:flex;position:fixed;top:0;bottom:0;left:var(--rail-w);z-index:var(--z-drawer);width:var(--drawer-w);border-right:1px solid var(--line-2);box-shadow:var(--shadow-2);transform:translate3d(calc(-100% - 32px),0,0);visibility:hidden;transition:transform var(--t-sheet-out) var(--ease-sheet),visibility 0s linear var(--t-sheet-out)}
+}
 @media(max-width:${BREAKPOINTS.narrow}px){
+  :root{--drawer-w:min(320px,calc(100vw - var(--rail-w) - 48px));--drawer-off:calc(-1 * (var(--rail-w) + var(--drawer-w)) - 32px)}
   .app,body.dock-open .app,body.dock-open.dock-center .app{grid-template-areas:"main";grid-template-columns:minmax(0,1fr)}
-  .sidebar{grid-area:main;border-right:0}
-  .center{grid-area:main;display:none}
-  body.task-open .sidebar{display:none}
-  body.task-open .center{display:block}
-  .back-btn{display:inline-grid}
-  .crumbs .crumb,.crumbs .crumb-sep{display:none}
+  .center{grid-area:main}
+  /* One drawer: the rail and the list, side by side, moving together. */
+  .app .app-rail,.app .sidebar{display:flex;position:fixed;top:0;bottom:0;z-index:var(--z-drawer);padding-top:env(safe-area-inset-top,0px);transform:translate3d(var(--drawer-off),0,0);visibility:hidden;transition:transform var(--t-sheet-out) var(--ease-sheet),visibility 0s linear var(--t-sheet-out);touch-action:pan-y}
+  body.sidebar-collapsed .app .sidebar{display:flex}
+  .app .app-rail{left:0;width:var(--rail-w);padding-top:calc(10px + env(safe-area-inset-top,0px))}
+  .app .sidebar{left:var(--rail-w);width:var(--drawer-w);border-right:1px solid var(--line-2);border-radius:0 var(--r-lg) var(--r-lg) 0;box-shadow:var(--shadow-2)}
+  .icon-btn.side-expand{display:inline-grid}
+  .side-expand .i-sidebar{display:none}
+  .side-expand .i-menu{display:contents}
+  /* Top bar: the current place is the title. */
+  .top-bar{padding:0 12px 0 8px}
+  .crumbs>span.crumb,.crumbs>span.crumb+.crumb-sep{display:none}
+  .crumbs span.crumb-current{font-size:var(--fs-lg)}
   .dock-divider,.sidebar-divider{display:none}
-  .dock{position:fixed;inset:0;z-index:60;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
+  .dock{position:fixed;inset:0;z-index:var(--z-sheet);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:m-sheet-up var(--t-sheet) var(--ease-sheet)}
   #dock-swap{display:none}
   .dock-toggle span{display:none}
   .dock-toggle{width:32px;padding:0}
 }
+/* Open drawer (sidebarNav sets body.sidebar-drawer only where the list
+   cannot sit inline). Opening eases in a little slower than closing. */
+body.sidebar-drawer .app .sidebar,body.sidebar-drawer .app .app-rail{transform:translate3d(0,0,0);visibility:visible;transition:transform var(--t-sheet) var(--ease-sheet),visibility 0s}
+body.sidebar-drawer .app .sidebar-divider{display:none}
+.sidebar-scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:rgb(12 10 8 / .4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-sheet-out) var(--ease-sheet),visibility 0s linear var(--t-sheet-out)}
+body.sidebar-drawer .sidebar-scrim{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--t-sheet) var(--ease-sheet),visibility 0s}
+/* While a finger drags the drawer, it follows directly. */
+body.drawer-dragging .app .sidebar,body.drawer-dragging .app .app-rail,body.drawer-dragging .sidebar-scrim{transition:none}
+@media(prefers-reduced-motion:reduce){
+  .app .sidebar,.app .app-rail,.sidebar-scrim,body.sidebar-drawer .app .sidebar,body.sidebar-drawer .app .app-rail,body.sidebar-drawer .sidebar-scrim{transition:none}
+  .dock{animation:none}
+}
+/* Touch screens: controls reach a comfortable tap size without changing the
+   desktop density. */
+@media(pointer:coarse){
+  .btn,.icon-btn,.dock-toggle{min-height:38px}
+  .icon-btn{min-width:38px}
+  .dock-toggle{min-width:38px}
+  .seg-btn,.seg-sm .seg-btn{height:36px}
+  .cv-pill{height:36px}
+  .cv-link{min-height:32px}
+  .chip-tab{height:34px}
+  .btn-link{min-height:32px;padding-top:6px;padding-bottom:6px}
+  .cv-activity>summary{min-height:32px}
+  .cv-sub>summary{padding:8px 0}
+  .task-row{min-height:48px}
+}
 @media(max-width:${BREAKPOINTS.small}px){
   .metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
   .page-head{padding-top:24px;flex-wrap:wrap}
@@ -46,7 +91,6 @@ export const RESPONSIVE_STYLES = `
   .now-card>.card-body{padding:14px 14px 14px 17px}
   .kv{grid-template-columns:minmax(0,1fr)}
   .kv dt{margin-top:4px}
-  .foot-btn kbd{display:none}
   .lazy-meta{display:none}
   .lazy-body{padding-left:16px}
 }

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

@@ -1,18 +1,58 @@
+import { RAIL_WIDTH } from "../../shared/geometry.js";
 /*
- * WORKSPACE — the three-region application frame.
- *   sidebar | center (task details) | divider | dock (session)
- * body.dock-open shows the dock; body.dock-center swaps the dock into the
- * middle so the order becomes sidebar | dock | divider | center. The sidebar's
- * own divider overlays its right edge, so it adds no grid column; --sidebar-w
- * is the default width and a stored preference overrides it inline. Region
+ * WORKSPACE — the application frame.
+ *   rail | sidebar | center (task details) | divider | dock (session)
+ * The rail is the global Workbench / Models / Settings navigation, shared with
+ * the management pages. body.dock-open shows the dock; body.dock-center swaps
+ * the dock into the middle so the order becomes rail | sidebar | dock |
+ * divider | center. body.sidebar-collapsed folds the task list away (the page
+ * header then offers .side-expand to bring it back). The sidebar's own
+ * divider overlays its right edge, so it adds no grid column; --sidebar-w is
+ * the default width and a stored preference overrides it inline. Region
  * contents are styled by the view stylesheets.
  */
 export const WORKSPACE_STYLES = `
+:root{--rail-w:${RAIL_WIDTH}px}
 .app{display:grid;height:100vh;height:100dvh;grid-template-rows:minmax(0,1fr);
-  grid-template-areas:"sidebar center divider dock";
-  grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0 0}
-body.dock-open .app{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--divider-w) var(--dock-w)}
-body.dock-open.dock-center .app{grid-template-areas:"sidebar dock divider center";grid-template-columns:var(--sidebar-w) var(--dock-w) var(--divider-w) minmax(0,1fr)}
+  grid-template-areas:"rail sidebar center divider dock";
+  grid-template-columns:var(--rail-w) var(--sidebar-w) minmax(0,1fr) 0 0}
+body.dock-open .app{grid-template-columns:var(--rail-w) var(--sidebar-w) minmax(0,1fr) var(--divider-w) var(--dock-w)}
+body.dock-open.dock-center .app{grid-template-areas:"rail sidebar dock divider center";grid-template-columns:var(--rail-w) var(--sidebar-w) var(--dock-w) var(--divider-w) minmax(0,1fr)}
+body.sidebar-collapsed{--sidebar-w:0px}
+body.sidebar-collapsed:not(.sidebar-drawer) .sidebar,body.sidebar-collapsed .sidebar-divider{display:none}
+
+/* Global rail: brand, then the three areas as icon-over-label tiles. */
+.app-rail{grid-area:rail;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;padding:10px 0 12px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto}
+.rail-brand{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:var(--r-md);text-decoration:none}
+.rail-brand .brand-mark{display:grid;place-items:center}
+.rail-brand:hover .brand-mark{box-shadow:0 0 0 3px var(--accent-soft)}
+.rail-items{display:flex;flex-direction:column;align-items:center;gap:4px}
+.rail-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:48px;min-height:50px;padding:6px 2px;border-radius:var(--r-md);color:var(--ink-3);font-size:10.5px;font-weight:550;line-height:1.15;text-align:center;text-decoration:none;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
+.rail-item .icon{width:18px;height:18px;flex:none}
+.rail-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rail-item:hover{background:var(--surface-3);color:var(--ink)}
+.rail-item[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
+
+/* Task-list switch in the page header: only while the list is out of view. */
+.icon-btn.side-expand{display:none}
+.side-expand .i-menu{display:none}
+.side-expand>span{display:contents}
+body.sidebar-collapsed .side-expand{display:inline-grid}
+.side-title{flex:1;min-width:0;font-size:var(--fs-md);font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sidebar-scrim[hidden]{display:none}
+
+/* Top bar: the first row of the center column on every page. Its height and
+   rule line up with the task-list head and the dock head, so the frame reads
+   as one header row: list switch, location, then the page's actions. */
+.top-bar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:6px;height:var(--header-h);padding:0 16px 0 12px;border-bottom:1px solid var(--line);background:var(--canvas)}
+.top-title{min-width:0;overflow:hidden;color:var(--ink);font-size:var(--fs-md);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
+.crumbs{display:flex;align-items:center;gap:4px;min-width:0;font-size:var(--fs-sm);white-space:nowrap}
+.crumb,.crumb-sep{flex:none}
+.crumb{padding:3px 6px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--ink-3);font-size:var(--fs-sm)}
+button.crumb:hover{color:var(--ink);background:var(--surface-3)}
+.crumb-sep{color:var(--ink-4)}
+.crumb-current{min-width:0;overflow:hidden;padding:3px 6px;color:var(--ink);font-weight:600;text-overflow:ellipsis}
+code.crumb-current{font-weight:500;font-size:var(--fs-xs);color:var(--ink-2)}
 
 /* Resize dividers: a wide invisible hit area around a 1px rule that lights up
    on hover, focus and while dragging. */
@@ -25,16 +65,13 @@ body.sidebar-resizing,body.dock-resizing{cursor:col-resize;user-select:none}
 
 /* Sidebar */
 .sidebar{grid-area:sidebar;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);border-right:1px solid var(--line);container:sidebar/inline-size}
-.sidebar-divider{grid-area:sidebar;justify-self:end;z-index:20;width:var(--divider-w);margin-right:-5px}
+.sidebar-divider{grid-area:sidebar;justify-self:end;z-index:var(--z-header);width:var(--divider-w);margin-right:-5px}
 .sidebar-divider span{left:3px;background:transparent}
 .side-head{flex:none;display:flex;align-items:center;gap:10px;height:var(--header-h);padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
-.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
-.attention-bar{flex:none;margin:10px 12px 0}
-.status-tabs{flex:none;margin:10px 0 0;padding:0 12px}
+.status-tabs{flex:none;margin:4px 0 0;padding:0 12px}
 .task-list{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 12px;scrollbar-gutter:stable}
 .pager{flex:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid var(--line)}
 .pager .pager-clear{grid-column:1/-1}
-.side-foot{flex:none;display:flex;align-items:center;gap:4px;padding:10px;border-top:1px solid var(--line)}
 
 /* Center */
 .center{grid-area:center;min-width:0;min-height:0;overflow-y:auto;scrollbar-gutter:stable;background:var(--canvas)}
@@ -42,7 +79,7 @@ body.sidebar-resizing,body.dock-resizing{cursor:col-resize;user-select:none}
 .detail{min-height:100%}
 
 /* Dock */
-.dock-divider{grid-area:divider;background:var(--canvas);z-index:5}
+.dock-divider{grid-area:divider;background:var(--canvas);z-index:var(--z-raised)}
 .dock-divider span{left:4px;background:var(--line-2)}
 .dock{grid-area:dock;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
 body.dock-open:not(.dock-center) .dock{border-left:0}

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

@@ -0,0 +1,51 @@
+import { BREAKPOINTS } from "../shared/geometry.js";
+import { motionKeyframes } from "../shared/motion.js";
+/*
+ * MOTION — the shared animation library. Timings, curves and layers are the
+ * tokens generated from shared/motion.ts; this sheet holds the keyframes and
+ * the component motion that is the same everywhere:
+ *   dialogs      scale + fade in, quicker fade out; the backdrop fades
+ *                (@starting-style + allow-discrete, as Radix Dialog does)
+ *   popovers     <details> menus pop in from their anchor
+ *   press        buttons settle slightly under the pointer
+ *   pages        cross-document View Transitions between Workbench, Models
+ *                and Settings; the rail stays put
+ *   layout       same-document View Transitions for column changes (the
+ *                client wraps sidebar collapse and dock open/close)
+ * Everything honours prefers-reduced-motion (base.ts turns it all off).
+ */
+export const MOTION_STYLES = `
+${motionKeyframes()}
+.dialog{opacity:0;transform:scale(.96);transition:opacity var(--t-exit) var(--ease-exit),transform var(--t-exit) var(--ease-exit),overlay var(--t-exit) allow-discrete,display var(--t-exit) allow-discrete}
+.dialog[open]{opacity:1;transform:none;transition-duration:var(--t-base);transition-timing-function:var(--ease-standard)}
+.dialog::backdrop{opacity:0;transition:opacity var(--t-exit) var(--ease-exit),overlay var(--t-exit) allow-discrete,display var(--t-exit) allow-discrete}
+.dialog[open]::backdrop{opacity:1;transition-duration:var(--t-base)}
+@starting-style{.dialog[open]{opacity:0;transform:scale(.96)}.dialog[open]::backdrop{opacity:0}}
+details[open]>.cv-popbody,details[open]>.dock-target-menu{animation:m-pop var(--t-base) var(--ease-standard)}
+.cv-attach>.cv-popbody,.cv-model>.cv-popbody{transform-origin:bottom left}
+.cv-model>.cv-popbody{transform-origin:bottom right}
+.cv-menu>.cv-popbody{transform-origin:top right}
+.dock-target-menu{transform-origin:top left}
+.icon-btn:active:not(:disabled),.rail-item:active{transform:scale(.94)}
+/* Workbench ⇄ Models ⇄ Settings are separate documents: the browser
+   cross-fades them (no blank frame) and the rail stays put between them. */
+@view-transition{navigation:auto}
+::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-page);animation-timing-function:var(--ease-sheet)}
+@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
+/* Page content entering after an explicit navigation (client/lib/motion). */
+.m-enter{animation:m-rise var(--t-base) var(--ease-standard)}
+@media(min-width:${BREAKPOINTS.narrow + 1}px){
+  .app-rail{view-transition-name:app-rail}
+  /* Column changes: client/lib/motion sets .vt-layout for the transition
+     only. Each column glides between its old and new box showing its new
+     content (no double image); a column that appears or leaves fades. */
+  .vt-layout .sidebar{view-transition-name:sidebar}
+  .vt-layout .center{view-transition-name:center}
+  .vt-layout .dock{view-transition-name:dock}
+  ::view-transition-group(sidebar),::view-transition-group(center),::view-transition-group(dock){animation-duration:var(--t-layout);animation-timing-function:var(--ease-sheet);overflow:clip}
+  ::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(center),::view-transition-new(center),::view-transition-old(dock),::view-transition-new(dock){width:100%;height:100%;object-fit:none;object-position:0 0;animation:none}
+  ::view-transition-old(sidebar),::view-transition-old(center),::view-transition-old(dock){opacity:0}
+  ::view-transition-old(sidebar):only-child,::view-transition-old(dock):only-child{opacity:1;animation:m-fade var(--t-exit) var(--ease-exit) reverse both}
+  ::view-transition-new(sidebar):only-child,::view-transition-new(dock):only-child{animation:m-fade var(--t-layout) var(--ease-standard) both}
+}
+`;