@zq-silk/yui 2.14.0 → 2.16.0

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}
+}
+`;

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

@@ -1,4 +1,5 @@
 import { DIVIDER_WIDTH, DOCK } from "../shared/geometry.js";
+import { motionTokenStyles } from "../shared/motion.js";
 import { themeTokenStyles } from "../shared/themes.js";
 /*
  * DESIGN TOKENS
@@ -6,8 +7,9 @@ import { themeTokenStyles } from "../shared/themes.js";
  * Geometry, type, radii, motion and the focus ring are theme-independent and
  * live once on :root. Colour and effect tokens come from the theme registry
  * (shared/themes.ts), one block per theme, so switching a theme can never move
- * or resize anything. Layout widths come from shared/geometry.ts, the same
- * source the client layout controller clamps against.
+ * or resize anything. Layout widths come from shared/geometry.ts and motion
+ * (durations, easings, stacking layers) from shared/motion.ts, the same
+ * sources the client scripts read.
  */
 export const TOKEN_STYLES = `
 :root{
@@ -17,7 +19,7 @@ export const TOKEN_STYLES = `
   --r-xs:5px;--r-sm:7px;--r-md:10px;--r-lg:14px;--r-pill:999px;
   --sidebar-w:clamp(260px,21vw,312px);--dock-w:${DOCK.initial}px;--divider-w:${DIVIDER_WIDTH}px;
   --center-max:880px;--header-h:56px;--gutter:clamp(16px,3vw,40px);
-  --t-fast:120ms;--t-med:220ms;--ease:cubic-bezier(.2,.8,.2,1);
+  ${motionTokenStyles()}
   --focus:0 0 0 2px var(--canvas),0 0 0 4px var(--accent-line);
 }
 ${themeTokenStyles()}

package/dist/web/assets/styles/ui/controls.js

@@ -27,7 +27,7 @@ export const CONTROL_STYLES = `
 .btn-link:hover:not(:disabled){background:transparent;text-decoration:underline;text-underline-offset:3px}
 .link-btn{justify-self:start;padding:0;border:0;background:none;color:var(--accent);font-size:var(--fs-xs);font-weight:500}
 .link-btn:hover{text-decoration:underline;text-underline-offset:3px}
-.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);transition:background var(--t-fast),color var(--t-fast)}
+.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
 .icon-btn:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
 .icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
 .icon-btn:disabled{opacity:.4}

package/dist/web/assets/styles/ui/forms.js

@@ -41,6 +41,6 @@ export const FORM_STYLES = `
 .shortcut-list dd{margin:0}
 
 /* Toast */
-.toast{position:fixed;left:50%;bottom:24px;z-index:90;max-width:min(520px,calc(100vw - 32px));padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-2);font-size:var(--fs-sm);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity var(--t-med),transform var(--t-med) var(--ease)}
+.toast{position:fixed;left:50%;bottom:24px;z-index:var(--z-toast);max-width:min(520px,calc(100vw - 32px));padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-2);font-size:var(--fs-sm);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
 .toast.show{opacity:1;transform:translate(-50%,0)}
 `;

package/dist/web/assets/styles/ui/surfaces.js

@@ -108,8 +108,7 @@ details[open]>summary .disclosure-chevron{transform:rotate(90deg)}
 .show-more:hover,.pager-clear:hover{color:var(--accent);border-color:var(--accent-line)}
 .show-more{justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 12px;font-weight:500}
 .loading-block{display:flex;align-items:center;gap:10px;padding:32px 8px;color:var(--ink-3)}
-.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-3);border-top-color:var(--accent);animation:spin .8s linear infinite}
-@keyframes spin{to{transform:rotate(360deg)}}
+.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-3);border-top-color:var(--accent);animation:m-spin .8s linear infinite}
 
 /* Metrics */
 .metric{display:grid;gap:4px;align-content:start;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}

package/dist/web/assets/styles/views/conversation.js

@@ -98,7 +98,7 @@ export const CONVERSATION_STYLES = `
 .cv-pop{position:relative;flex:none}
 .cv-pop>summary{list-style:none}
 .cv-pop>summary::-webkit-details-marker{display:none}
-.cv-popbody{position:absolute;z-index:20;display:grid;gap:8px;width:min(300px,calc(100vw - 32px));max-height:min(420px,60vh);overflow:auto;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--shadow-2);box-sizing:border-box}
+.cv-popbody{position:absolute;z-index:var(--z-popover);display:grid;gap:8px;width:min(300px,calc(100vw - 32px));max-height:min(420px,60vh);overflow:auto;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--shadow-2);box-sizing:border-box}
 .cv-attach>.cv-popbody{left:0;bottom:calc(100% + 8px)}
 .cv-model>.cv-popbody{right:0;bottom:calc(100% + 8px)}
 .cv-menu>.cv-popbody{right:0;top:calc(100% + 6px)}

package/dist/web/assets/styles/views/dock.js

@@ -4,9 +4,29 @@
  * The Live session pane is views/terminal; the dock frame is layout/workspace.
  */
 export const DOCK_STYLES = `
-.dock-head{height:auto;min-height:var(--header-h);padding-top:6px;padding-bottom:6px}
-.dock-head .seg{min-width:0;flex-wrap:wrap}
+.dock-head{height:auto;min-height:var(--header-h);padding-top:6px;padding-bottom:6px;border-bottom:0}
 .dock-actions{flex-shrink:0}
+/* Who the panel talks to: a title-like menu button with its target list */
+.dock-target{position:relative;min-width:0}
+.dock-target-btn{display:flex;align-items:center;gap:8px;min-width:0;height:34px;padding:0 10px 0 6px;border-radius:var(--r-md);color:var(--ink);font-size:var(--fs-md);font-weight:600;cursor:pointer;list-style:none;transition:background var(--t-fast)}
+.dock-target-btn::-webkit-details-marker{display:none}
+.dock-target-btn:hover,.dock-target[open] .dock-target-btn{background:var(--surface-3)}
+.dock-target-btn>.icon{width:14px;height:14px;flex:none;color:var(--ink-4)}
+.dock-target-icon{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent)}
+.dock-target-icon .icon{width:14px;height:14px}
+.dock-target-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dock-target-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:var(--z-popover);display:grid;gap:2px;min-width:220px;max-width:min(320px,80vw);padding:6px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-2)}
+.dock-target-menu hr{margin:4px 2px;border:0;border-top:1px solid var(--line)}
+.dock-target-options{display:grid;gap:2px}
+.dock-target-item{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:32px;padding:0 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-sm);text-align:left}
+.dock-target-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dock-target-item .icon{width:15px;height:15px;flex:none;color:var(--ink-4)}
+.dock-target-item:hover{background:var(--surface-3);color:var(--ink)}
+.dock-target-item[aria-pressed="true"]{color:var(--ink);font-weight:550}
+.dock-target-item .dock-target-check{color:var(--accent)}
+.dock-tabs{flex:none;padding:0 12px 10px;border-bottom:1px solid var(--line)}
+.dock-tabs .seg{display:flex;flex-wrap:wrap;width:100%;min-width:0}
+.dock-tabs .seg-btn{flex:1 1 auto;justify-content:center}
 .dock-preview{display:flex;flex-direction:column;min-height:0;overflow:auto}
 .dock-preview>.feed-note{text-align:left;padding:0 12px;color:var(--ink-3)}
 .preview-services{flex:none;max-height:40%;overflow:auto}

package/dist/web/assets/styles/views/login.js

@@ -0,0 +1,45 @@
+/*
+ * LOGIN VIEW — the standalone sign-in document: one card centred on the
+ * canvas at every size, headed by the brand and the language control, with a
+ * password field (with reveal toggle), inline error/notice states and the
+ * plain-HTTP reminder. Colour comes only from theme tokens; on phones the
+ * card drops its frame and uses the full width.
+ */
+export const LOGIN_STYLES = `
+.login-body{height:auto;min-height:100vh;min-height:100dvh;overflow:auto}
+.login-shell{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:max(24px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px));background:radial-gradient(120% 70% at 50% -10%,var(--accent-soft),transparent 60%),var(--canvas)}
+.login-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
+.login-locale{flex:none}
+.login-locale select{height:30px;width:auto;max-width:132px;padding:0 26px 0 9px;line-height:28px;font-size:var(--fs-xs)}
+.login-card{display:grid;gap:20px;width:min(400px,100%);margin-bottom:6vh;padding:28px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2)}
+.login-brand{display:flex;align-items:center;gap:10px}
+.login-brand .brand-mark{display:block;width:32px;height:32px;flex:none;border-radius:8px;background:var(--ink);color:var(--canvas);overflow:hidden}
+.brand-glyph{display:block;width:100%;height:100%}
+.brand-dot{fill:var(--accent)}
+.login-brand .brand-name{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.02em}
+.login-heading{display:grid;gap:6px}
+.login-heading h1{font-size:var(--fs-2xl)}
+.login-sub{color:var(--ink-3);font-size:var(--fs-sm);overflow-wrap:anywhere}
+.login-notice{margin:0;padding:10px 12px;border:1px solid var(--line-2);border-left:3px solid var(--tone,var(--info));border-radius:var(--r-sm);background:var(--tone-soft,var(--info-soft));color:var(--ink);font-size:var(--fs-sm)}
+.login-form{display:grid;gap:16px}
+.login-field{display:grid;gap:6px;min-width:0}
+.login-label{color:var(--ink-2);font-size:var(--fs-xs);font-weight:500}
+.login-password{position:relative}
+.login-password input{height:40px;padding-right:44px}
+.login-password input[aria-invalid="true"]{border-color:var(--bad)}
+.login-password input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--bad-soft)}
+.login-reveal{position:absolute;top:4px;right:4px}
+.login-reveal .icon-hide,.login-reveal[aria-pressed="true"] .icon-show{display:none}
+.login-reveal[aria-pressed="true"] .icon-hide{display:block}
+.login-error{margin:0;color:var(--bad);font-size:var(--fs-sm);overflow-wrap:anywhere}
+.login-submit{width:100%;height:40px;font-size:var(--fs-md)}
+.login-spinner{display:none;width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:m-spin .8s linear infinite}
+.login-form[aria-busy="true"] .login-spinner{display:inline-block}
+.login-transport{display:flex;align-items:flex-start;gap:8px;margin:0;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--fs-xs)}
+.login-transport .icon{width:14px;height:14px;margin-top:2px;color:var(--warn)}
+@media(max-width:480px){
+  .login-shell{padding-left:0;padding-right:0;background:var(--surface)}
+  .login-card{width:100%;margin-bottom:0;padding:24px 20px;border:0;border-radius:0;box-shadow:none}
+  .login-heading h1{font-size:var(--fs-xl)}
+}
+`;

package/dist/web/assets/styles/views/manage.js

@@ -1,40 +1,33 @@
 import { BREAKPOINTS } from "../../shared/geometry.js";
 /*
- * MANAGE VIEW — the frame shared by the management pages (/models and
- * /settings): a rail in the dashboard sidebar's language (brand, the fixed
- * Workbench / Models / Settings navigation with every section listed under
- * its area, the language control) beside one reading column whose sections
- * share a heading (area kicker, title, explanation). Page sheets add only
- * their own content. Below the narrow breakpoint the rail becomes a top bar:
- * brand and language, the three main destinations, then the current area's
- * sections, wrapping so every entry stays visible.
+ * MANAGE VIEW — what the management pages (/models and /settings) add to the
+ * workbench frame (layout/workspace): the section list in the sidebar slot,
+ * the language control in the top bar, and one reading column whose sections
+ * share a heading (title, explanation). The rail, the collapsible list, the
+ * top bar and the narrow-screen drawer are the workbench's own. Page sheets
+ * add only their own content.
  */
 export const MANAGE_STYLES = `
-.manage-body{display:block;height:auto;min-height:100vh;min-height:100dvh;overflow:auto}
-.manage-app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;min-height:100dvh}
 .manage-app[hidden],#models-root[hidden],#settings-root[hidden]{display:none}
+.manage-body{--sidebar-w:240px}
+body.manage-body.sidebar-collapsed{--sidebar-w:0px}
 
-/* Rail */
-.manage-rail{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line)}
-.manage-rail-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)}
-.manage-rail-head .brand{flex:1;color:var(--ink);text-decoration:none}
-.manage-locale{flex:none;min-width:0}
-.manage-locale select{height:30px;width:auto;max-width:124px;padding:0 26px 0 9px;line-height:28px;font-size:var(--fs-xs)}
-.manage-nav{display:flex;flex-direction:column;gap:6px;padding:12px 8px 20px;min-width:0}
-.manage-area{display:grid;gap:2px;min-width:0}
-.manage-primary,.manage-link{position:relative;display:flex;align-items:center;min-width:0;border-radius:var(--r-md);text-decoration:none;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
-.manage-primary span,.manage-link span{overflow:hidden;text-overflow:ellipsis}
-.manage-primary{gap:9px;height:34px;padding:0 10px;color:var(--ink-2);font-size:var(--fs-md);font-weight:550}
-.manage-primary .icon{width:16px;height:16px;flex:none;color:var(--ink-4)}
-.manage-primary:hover,.manage-link:hover{background:var(--surface-3);color:var(--ink)}
-.manage-primary[aria-current]{color:var(--ink)}
-.manage-primary[aria-current] .icon{color:var(--accent)}
-.manage-sections{display:grid;gap:1px;margin:0 0 4px 18px;padding-left:8px;border-left:1px solid var(--line);min-width:0}
-.manage-link{gap:8px;height:30px;padding:0 10px;color:var(--ink-3);font-size:var(--fs-sm);font-weight:500}
+/* Section list: only the current area's sections (the rail switches areas). */
+.manage-nav{flex:1;min-height:0;overflow-y:auto;padding:10px 8px 20px}
+.manage-area:not([data-active="true"]){display:none}
+.manage-sections{display:grid;gap:2px;min-width:0}
+.manage-link{position:relative;display:flex;align-items:center;gap:8px;min-width:0;height:34px;padding:0 10px;border-radius:var(--r-md);color:var(--ink-3);font-size:var(--fs-sm);font-weight:500;text-decoration:none;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
+.manage-link span{overflow:hidden;text-overflow:ellipsis}
+.manage-link:hover{background:var(--surface-3);color:var(--ink)}
 .manage-link[aria-current="page"]{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
-.manage-link[aria-current="page"]::before{content:"";position:absolute;left:-9px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--accent)}
+.manage-link[aria-current="page"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
 .manage-dirty{display:none;width:7px;height:7px;margin-left:auto;flex:none;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
 .manage-link[data-dirty="true"] .manage-dirty{display:inline-block}
+@media(pointer:coarse){.manage-link{height:42px}}
+
+/* Language control at the end of the top bar */
+.top-locale{flex:none;min-width:0}
+.top-locale select{height:30px;width:auto;max-width:124px;padding:0 26px 0 9px;line-height:28px;font-size:var(--fs-xs)}
 
 /* Reading column and the shared section heading */
 .manage-main{min-width:0;padding:28px var(--gutter) 72px}
@@ -50,20 +43,10 @@ export const MANAGE_STYLES = `
 .manage-body input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--accent)}
 
 @media(max-width:${BREAKPOINTS.narrow}px){
-  .manage-app{grid-template-columns:minmax(0,1fr)}
-  .manage-rail{position:static;height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
-  .manage-rail-head{height:52px}
-  .manage-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px 10px}
-  .manage-area{display:contents}
-  .manage-primary{justify-content:center;gap:7px;height:36px;padding:0 6px;font-size:var(--fs-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
-  .manage-primary[aria-current]{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -2px 0 var(--accent)}
-  /* Only the current area's sections, as a wrapping strip under the tabs. */
-  .manage-sections{display:none;grid-column:1/-1;grid-row:2;margin:4px 0 0;padding:0;border:0}
-  .manage-area[data-active="true"] .manage-sections{display:flex;flex-wrap:wrap;gap:4px}
-  .manage-link{flex:0 1 auto;max-width:100%;height:32px;padding:0 10px;border:1px solid var(--line)}
-  .manage-link[aria-current="page"]{border-color:var(--line-2)}
-  .manage-link[aria-current="page"]::before{left:10px;right:10px;top:auto;bottom:2px;width:auto;height:2px}
-  .manage-main{padding:18px 14px 56px}
+  .manage-main{padding:20px 14px 56px}
+  .manage-body .top-locale{display:none}
+  /* The top bar already names the section; the page keeps only its explanation. */
+  .manage-heading h1{display:none}
 }
 @media(max-width:${BREAKPOINTS.small}px){
   .manage-heading h1{font-size:var(--fs-xl)}

package/dist/web/assets/styles/views/page.js

@@ -8,9 +8,8 @@ export const PAGE_STYLES = `
 .page{max-width:var(--center-max);margin:0 auto;padding:0 var(--gutter) 64px}
 
 /* Page scaffolding */
-.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:36px 0 24px}
-.kicker{color:var(--accent);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
-.page-title{margin-top:6px;font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.025em}
+.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:28px 0 20px}
+.page-title{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.025em}
 .page-sub{margin-top:4px;color:var(--ink-3)}
 .page-foot{margin-top:20px;color:var(--ink-4);font-size:var(--fs-xs);text-align:center}
 .sub-head{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--fs-sm);font-weight:600}

package/dist/web/assets/styles/views/records.js

@@ -50,7 +50,7 @@ summary.work-head:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-line)}
 .timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
 .timeline::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
 .timeline-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:0 0 18px}
-.timeline-mark{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-3)}
+.timeline-mark{position:relative;z-index:var(--z-raised);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-3)}
 .kind-decision .timeline-mark{color:var(--ok);border-color:var(--ok-soft);background:var(--ok-soft)}
 .kind-milestone .timeline-mark{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}
 .kind-run .timeline-mark{color:var(--info);border-color:var(--info-soft);background:var(--info-soft)}

package/dist/web/assets/styles/views/settings.js

@@ -29,7 +29,7 @@ export const SETTINGS_STYLES = `
 .settings-receipt{white-space:pre-wrap;overflow-wrap:anywhere}
 .settings-error{color:var(--bad)!important}
 .settings-observation{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-xs)}
-.settings-search{position:sticky;top:0;z-index:1;padding:10px 0;background:var(--canvas)}
+.settings-search{position:sticky;top:var(--header-h);z-index:var(--z-raised);padding:10px 0;background:var(--canvas)}
 .settings-search input{width:100%;max-width:520px}
 #settings-status:empty,#browser-receipt:empty{display:none}
 .mono-line{overflow-wrap:anywhere}

package/dist/web/assets/styles/views/sidebar.js

@@ -1,26 +1,38 @@
 /*
- * SIDEBAR VIEW — the task index: brand and sync state, search, attention
- * pills, status filter tabs, grouped task rows, the catalog pager and the
- * footer buttons. Region sizing lives in layout/workspace.
+ * SIDEBAR VIEW — the task index: title and sync state, search, attention
+ * pills, status filter tabs, grouped task rows and the catalog pager. The
+ * brand mark is shared with the global rail. Region sizing lives in
+ * layout/workspace.
  */
 export const SIDEBAR_STYLES = `
-/* Brand and sync state */
-.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:700;line-height:1}
+/* Brand mark (global rail, management top bar) and sync state */
+.brand-mark{width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--canvas);overflow:hidden}
+.brand-glyph{display:block;width:100%;height:100%}
+.brand-dot{fill:var(--accent)}
 .brand-name{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.02em}
 .sync{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-3);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
 .sync i{width:6px;height:6px;border-radius:50%;background:var(--ink-4)}
 .sync[data-state="ok"] i{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
-.sync[data-state="syncing"] i{background:var(--info);animation:blink 1s ease-in-out infinite}
+.sync[data-state="syncing"] i{background:var(--info);animation:m-blink 1s ease-in-out infinite}
 .sync[data-state="error"] i{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
 .sync[data-state="error"]{color:var(--bad)}
-@keyframes blink{50%{opacity:.35}}
 
-/* Search and attention filters */
-.search-field{position:relative;display:flex;align-items:center;flex:none;margin:12px 12px 0}
-.search-field>.icon{position:absolute;left:10px;color:var(--ink-4);pointer-events:none}
-.search-field input{height:34px;padding:0 34px 0 32px;border-radius:var(--r-md);background:var(--surface-2)}
+/* Tools block: create, search, category and attention, on one 8px rhythm */
+.side-tools{flex:none;display:grid;gap:8px;padding:12px 12px 4px}
+.side-create{width:100%;height:34px;border-radius:var(--r-md);box-shadow:var(--shadow-1)}
+.side-create .icon{width:16px;height:16px;stroke-width:2.2}
+.side-search{display:flex;align-items:center;gap:6px;min-width:0}
+.search-field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
+.search-field>.icon{position:absolute;left:10px;width:15px;height:15px;color:var(--ink-4);pointer-events:none}
+.search-field input{height:34px;padding:0 32px 0 32px;border-radius:var(--r-md);background:var(--surface-2)}
 .search-field input::-webkit-search-cancel-button{display:none}
-.search-field kbd{position:absolute;right:8px}
+.search-field kbd{position:absolute;right:8px;pointer-events:none}
+.search-field:focus-within kbd{opacity:0}
+.side-search-body{width:34px;height:34px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2)}
+.side-search-body:hover:not(:disabled){border-color:var(--line-3)}
+.source-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
+.source-seg .seg-btn{justify-content:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
+.attention-bar:empty{display:none}
 .attention-list{display:flex;flex-wrap:wrap;gap:6px}
 .attention-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid transparent;border-radius:var(--r-pill);background:var(--tone-soft);color:var(--tone);font-size:var(--fs-xs);font-weight:500}
 .attention-pill b{font-weight:700;font-variant-numeric:tabular-nums}
@@ -59,17 +71,10 @@ export const SIDEBAR_STYLES = `
 .list-empty{display:grid;justify-items:center;gap:8px;padding:36px 16px;color:var(--ink-4);font-size:var(--fs-sm);text-align:center}
 .list-empty.is-error{color:var(--bad)}
 
-/* Catalog pager and footer */
+/* Catalog pager */
 .pager-btn{height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-xs)}
 .pager-btn:hover:not(:disabled){border-color:var(--line-3);color:var(--ink)}
 .pager-btn:disabled{opacity:.4}
 .pager-count{grid-column:2;text-align:center;color:var(--ink-4);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
 .pager-clear{height:28px}
-.foot-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-xs);font-weight:500;min-width:0}
-.foot-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.foot-btn:hover{color:var(--ink);border-color:var(--line-3);background:var(--surface-3)}
-.foot-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
-.foot-btn kbd{margin-left:2px}
-.side-foot .icon-btn{margin-left:auto}
-.side-foot .icon-btn+.icon-btn{margin-left:0}
 `;

package/dist/web/assets/styles/views/task.js

@@ -1,29 +1,23 @@
 /*
- * TASK VIEW — the task page frame and its Overview tab: the sticky header and
- * section tabs, the hero, the "now" banner, input requests that need the
+ * TASK VIEW — the task page frame and its Overview tab: the sticky section
+ * tabs, the hero, the "now" banner, input requests that need the
  * user, decisions and planning. Rows inside the other tabs live in
  * views/records and views/delivery.
  */
 export const TASK_STYLES = `
-/* Sticky header and tab strip: both bleed through the page gutter and frost
-   the content scrolling beneath them. */
-.task-header,.tabs-wrap{position:sticky;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
-.task-header{top:0;z-index:10}
-.task-bar{display:flex;align-items:center;gap:6px;height:var(--header-h)}
-.back-btn{display:none}
-.crumbs{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-sm)}
-.crumb{padding:3px 6px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--ink-3)}
-.crumb:hover{color:var(--ink);background:var(--surface-3)}
-.crumb-sep{color:var(--ink-4)}
-.crumb-current{color:var(--ink-2);font-size:var(--fs-xs)}
+/* Section tabs: sticky under the top bar, bleeding through the page gutter
+   and frosting the content scrolling beneath them. */
+.tabs-wrap{position:sticky;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:var(--canvas)}
 .dock-toggle{height:30px}
-.task-hero{padding:14px 0 18px}
+.task-bar-sep{width:1px;height:18px;margin:0 2px;background:var(--line-2)}
+.operator-toggle[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
+.task-hero{padding:28px 0 18px}
 .task-title{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.025em;line-height:1.25;overflow-wrap:anywhere}
 .task-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;color:var(--ink-3);font-size:var(--fs-xs)}
 .task-meta:empty{display:none}
 .meta-item{display:inline-flex;align-items:center;gap:5px}
 .meta-item .when{font-size:inherit}
-.tabs-wrap{top:var(--header-h);z-index:9;border-bottom:1px solid var(--line)}
+.tabs-wrap{top:var(--header-h);z-index:calc(var(--z-sticky) - 1);border-bottom:1px solid var(--line)}
 .tabs{gap:4px}
 .tab{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;height:42px;padding:0 10px;border:0;background:transparent;color:var(--ink-3);font-size:var(--fs-sm);font-weight:500}
 .tab:hover{color:var(--ink)}

package/dist/web/assets/styles/views/terminal.js

@@ -18,7 +18,7 @@ export const TERMINAL_STYLES = `
 .target-chip .dot{width:7px;height:7px;box-shadow:none}
 .conn{display:inline-flex;align-items:center;gap:6px;flex:none;color:rgba(255,255,255,.6);font-size:var(--fs-xs);font-weight:500}
 .conn i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
-.conn[data-state="connecting"] i{background:var(--warn);animation:blink 1s infinite}
+.conn[data-state="connecting"] i{background:var(--warn);animation:m-blink 1s infinite}
 .conn[data-state="writable"] i{background:var(--chrome-ok);box-shadow:0 0 0 3px rgba(79,209,139,.2)}
 .conn[data-state="readonly"] i{background:var(--chrome-info)}
 .conn[data-state="error"] i{background:var(--chrome-bad)}