@zq-silk/yui 2.14.0 → 2.16.0

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

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

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

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

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

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

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

@@ -7,17 +7,30 @@ import { iconSvg } from "../shared/icons.js";
 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>
-        </div>
+        <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="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>
           <button id="dock-close" class="icon-btn" type="button" aria-label="Hide session panel" data-i18n-aria-label="dock.hide" title="Hide · D">${iconSvg("close")}</button>
         </div>
       </header>
+      <div class="dock-tabs">
+        <div class="seg seg-sm" 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>
+        </div>
+      </div>
       <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>

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

@@ -0,0 +1,57 @@
+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", "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>
+  <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>
+${SHEETS.map(name => `  <link rel="stylesheet" href="/assets/css/${name}.css">`).join("\n")}
+</head>
+<body class="login-body">
+  <main class="login-shell">
+    <section class="login-card" aria-labelledby="login-title">
+      <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>
+        <p id="login-subtitle" class="login-sub" data-i18n="login.subtitle">Enter the Web access password from this listener's private credential file.</p>
+      </header>
+      <p id="login-notice" class="login-notice" role="status" hidden></p>
+      <form id="login-form" class="login-form" method="post" novalidate aria-describedby="login-subtitle">
+        <input class="sr-only" type="text" name="username" value="yui" autocomplete="username" tabindex="-1" aria-hidden="true" readonly>
+        <div class="login-field">
+          <label class="login-label" for="login-password" data-i18n="login.password">Password</label>
+          <div class="login-password">
+            <input id="login-password" name="password" type="password" autocomplete="current-password" required maxlength="256" spellcheck="false" autocapitalize="off" autocorrect="off" aria-describedby="login-error" aria-invalid="false" autofocus>
+            <button id="login-reveal" class="icon-btn login-reveal" type="button" aria-controls="login-password" aria-pressed="false" aria-label="Show password" data-i18n-aria-label="login.show" title="Show password" data-i18n-title="login.show">${iconSvg("eye", "icon icon-show")}${iconSvg("eyeOff", "icon icon-hide")}</button>
+          </div>
+          <p id="login-error" class="login-error" role="alert" hidden></p>
+        </div>
+        <button id="login-submit" class="btn btn-primary login-submit" type="submit" disabled>
+          <span class="login-spinner" aria-hidden="true"></span><span id="login-submit-label" data-i18n="login.submit">Sign in</span>
+        </button>
+      </form>
+      <p id="login-transport" class="login-transport" hidden>${iconSvg("alert")}<span data-i18n="login.httpWarning">This connection uses plain HTTP and is not encrypted. Sign in only on a trusted network.</span></p>
+      <noscript><p class="login-error" data-i18n="login.noscript">JavaScript is required to sign in.</p></noscript>
+    </section>
+  </main>
+  <script type="module" src="/assets/js/app/login.js"></script>
+</body>
+</html>`;

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";
@@ -19,6 +20,7 @@ import { MANAGE_STYLES } from "./views/manage.js";
 import { SETTINGS_STYLES } from "./views/settings.js";
 import { MODELS_STYLES } from "./views/models.js";
 import { JOBS_STYLES } from "./views/jobs.js";
+import { LOGIN_STYLES } from "./views/login.js";
 // The stylesheet registry, in cascade order: foundations (fonts, tokens,
 // element defaults), the workspace frame, shared UI primitives, then one
 // sheet per view, rendered prose, and breakpoints last so they override
@@ -28,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 },
@@ -44,6 +47,7 @@ export const STYLESHEETS = Object.freeze([
     { name: "views/settings", body: SETTINGS_STYLES },
     { name: "views/models", body: MODELS_STYLES },
     { name: "views/jobs", body: JOBS_STYLES },
+    { name: "views/login", body: LOGIN_STYLES },
     { name: "markdown", body: MARKDOWN_STYLES },
     { name: "layout/responsive", body: RESPONSIVE_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}
 }