@zq-silk/yui 2.16.0 → 2.18.0

package/dist/web/assets/client/views/overview.js

@@ -4,7 +4,7 @@ export const OVERVIEW_SCRIPT = String.raw `
 // then catalog-wide signals and the explicit Session read.
 import { h, icon, clear } from "/assets/js/lib/dom.js";
 import { byNewest, fill, formatDateTime, relativeTime } from "/assets/js/lib/format.js";
-import { badge, button, dot, emptyState, note, operatorToggle, topBar } from "/assets/js/ui/primitives.js";
+import { badge, button, dot, emptyState, note, panelToggle, topBar } from "/assets/js/ui/primitives.js";
 import { card } from "/assets/js/ui/containers.js";
 import { metricTile } from "/assets/js/ui/metrics.js";
 import { label, sessionBadges, tone } from "/assets/js/domain/vocab.js";
@@ -21,7 +21,7 @@ export function renderOverview(container, state, t, locale, actions) {
       h("span.crumb", null, t("manage.workbench")),
       h("span.crumb-sep", { "aria-hidden": "true" }, "/"),
       h("span.crumb-current", null, t("overview.title"))),
-    [operatorToggle(t, actions.toggleOperator)]));
+    [panelToggle(t, actions.togglePanel)]));
   page.append(overviewHead(state.counts, t, actions), metricStrip(state.counts, t));
   page.append(h("div.card-stack", null,
     inboxCard(state, t, actions),

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

@@ -120,6 +120,9 @@ function taskRow(task, state, t, locale, onSelect) {
   h("span.task-body", null,
     h("span.task-line", null, h("span.task-name", null, task.title), h("time.task-time", { dateTime: task.updatedAt }, relativeTime(task.updatedAt, locale, t))),
     h("span.task-line.task-sub", null, h("code.task-id", null, task.id),
+      // A Task a Job Run created is still an ordinary real Task; mark where it came from.
+      task.source && task.source.kind === "job-run"
+        ? h("span.task-source", { title: t("jobs.sourceJob") + " · " + task.source.jobId }, t("catalog.sourceJob")) : null,
       counts.workItems > 0 ? h("span.task-count", { title: t("sidebar.workItems") }, icon("layers", "icon-sm"), String(counts.workItems)) : null,
       taskSignals(task, t))));
 }

package/dist/web/assets/client/views/task/page.js

@@ -4,7 +4,7 @@ export const TASK_PAGE_SCRIPT = String.raw `
 // observation arrives separately from the Context snapshot, so every fact it
 // feeds lives in a [data-slot] that updateObservation() redraws in place.
 import { h, icon, clear } from "/assets/js/lib/dom.js";
-import { badge, chip, operatorToggle, timeTag, topBar } from "/assets/js/ui/primitives.js";
+import { badge, chip, panelToggle, timeTag, topBar } from "/assets/js/ui/primitives.js";
 import { label, statusBadge } from "/assets/js/domain/vocab.js";
 import { totalOf } from "/assets/js/domain/context.js";
 import { renderOverviewPanel } from "/assets/js/views/task/overview.js";
@@ -79,17 +79,7 @@ function taskBar(task, t, ctx) {
       h("button.crumb", { type: "button", title: t("overview.title"), onclick: ctx.onBack }, t("manage.workbench")),
       h("span.crumb-sep", { "aria-hidden": "true" }, "/"),
       h("code.crumb-current", { title: task.title }, task.id)),
-    [dockToggle("discussion", "chat", t("dock.discussion") + " · D", t, ctx),
-      dockToggle("session", "terminal", t("dock.session"), t, ctx),
-      h("span.task-bar-sep", { "aria-hidden": "true" }),
-      operatorToggle(t, ctx.toggleOperator)]);
-}
-
-function dockToggle(mode, iconName, title, t, ctx) {
-  return h("button.btn.btn-ghost.dock-toggle", {
-    type: "button", dataset: { dockToggle: mode }, title: title,
-    onclick: function () { ctx.showDock(mode); }
-  }, icon(iconName), h("span", null, t("dock." + mode)));
+    [panelToggle(t, ctx.togglePanel)]);
 }
 
 function taskMeta(task, t, locale) {

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

@@ -7,9 +7,11 @@ export const MANAGE_SECTIONS = Object.freeze({
     settings: [
         { page: "settings", section: "preferences", key: "settings.section.preferences", label: "Preferences" },
         { page: "settings", section: "skills", key: "settings.section.skills", label: "Skills" },
-        { page: "settings", section: "jobs", key: "settings.section.jobs", label: "Jobs & schedules" },
         { page: "settings", section: "permissions", key: "settings.section.permissions", label: "Command permissions" },
         { page: "settings", section: "server", key: "settings.section.server", label: "Agents & server" },
         { page: "models", section: "connection", key: "models.section.connection", label: "Model connection" }
+    ],
+    jobs: [
+        { page: "jobs", section: "jobs", key: "nav.jobs", label: "Jobs" }
     ]
 });

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

@@ -6,7 +6,8 @@ export function appRail(current) {
     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("workbench", "/", "workbench", "manage.workbench", "Tasks", current, current === "workbench" ? "rail-workbench" : undefined)}
+        ${item("jobs", "/jobs", "clock", "nav.jobs", "Jobs", current)}
         ${item("models", "/models", "layers", "models.title", "Models", current)}
         ${item("settings", "/settings", "settings", "settings.title", "Settings", current, current === "workbench" ? "settings-open" : undefined)}
       </div>

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

@@ -1,8 +1,9 @@
 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>
@@ -18,36 +19,17 @@ export const DOCK_HTML = `    <div id="dock-divider" class="dock-divider" role="
             <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>
           <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>
-      <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/manage.js

@@ -4,7 +4,7 @@ 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 frame is the
+// One frame and entry point for /jobs, /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
@@ -22,9 +22,14 @@ const area = (name, key, 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>
+        <span id="jobs-sync" class="sync" data-area-only="jobs" hidden title="Last sync" data-i18n-title="sync.label"><i aria-hidden="true"></i><time id="jobs-last-sync">—</time></span>
+        <button id="jobs-refresh" class="icon-btn" type="button" data-area-only="jobs" hidden aria-label="Refresh" data-i18n-aria-label="actions.refresh" title="Refresh" data-i18n-title="actions.refresh">${iconSvg("refresh")}</button>
         <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="Sections" data-i18n-aria-label="manage.sections">${area("models", "models.title", "Models")}${area("settings", "settings.title", "Settings")}
+        <div class="manage-area jobs-area" data-area-group="jobs">
+          <div id="jobs-index" class="jobs-index" role="region" aria-label="Jobs" data-i18n-aria-label="nav.jobs"></div>
+        </div>
       </nav>
     </aside>`;
 const TOP_BAR = `<header class="top-bar">
@@ -47,7 +52,7 @@ export function manageDocument(options) {
 </head>
 <body class="manage-body ${options.page}-body">
   <div class="app manage-app" data-page="${options.page}" hidden>
-    ${appRail(options.page === "models" ? "models" : "settings")}
+    ${appRail(options.page)}
     ${RAIL}
     <div id="sidebar-scrim" class="sidebar-scrim"></div>
     <main id="manage-scroll" class="center manage-center" tabindex="-1">

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

@@ -1,7 +1,8 @@
 import { manageDocument } from "./manage.js";
 import { SETTINGS_MAIN } from "./settingsContent.js";
-// One document for /models/* and /settings/*. Both controllers stay mounted
-// across history navigation, preserving drafts, observations and locale.
+// One document for /jobs, /models/* and /settings/*. The controllers stay
+// mounted across history navigation, preserving drafts, observations and locale.
 export const MODELS_HTML = manageDocument({ page: "models", title: "Models", main: `
       <div id="settings-root" hidden>${SETTINGS_MAIN}</div>
-      <div id="models-root" class="models-root" hidden></div>` });
+      <div id="models-root" class="models-root" hidden></div>
+      <div id="jobs-root" class="jobs-root" hidden></div>` });

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

@@ -22,9 +22,6 @@ export const SETTINGS_MAIN = `
         ${manageHead("settings-skills-title", "settings.section.skills", "Skills", "skills.browser.intro", "Read existing packages and choose additional bindings for one explicit Role. Scripts are displayed as data, never run.")}
         <section id="skill-browser" class="card settings-card settings-stack"></section>
       </section>
-      <section class="manage-section" data-section="jobs" hidden>
-        <section id="global-jobs"></section>
-      </section>
       <section class="manage-section" data-section="server" aria-labelledby="settings-server-title" hidden>
         ${manageHead("settings-server-title", "settings.section.server", "Agents & server", "settings.hint.server", "Desired configuration for Yui, Roles, Agents and Profiles. Saving targets later launches; it is not proof that existing Sessions adopted it.")}
         <label class="field settings-search"><span data-i18n="settings.search">Find a setting</span><input id="settings-search" type="search" autocomplete="off"></label>

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

@@ -24,7 +24,6 @@ export const SIDEBAR_HTML = `    <aside class="sidebar" aria-label="Tasks" data-
           </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>

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

@@ -6,21 +6,55 @@
  */
 export const CONVERSATION_STYLES = `
 #dock-conversation{min-width:0}
+/* Session page: one view at a time (chat or terminal), rebuilt on a mode switch */
+.session-view{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
+.sp-modes{flex:none}
+.sp-modes .seg-btn{gap:5px}
+.sp-modes .seg-btn .icon{width:14px;height:14px;flex:none}
+.sp-modes .seg-btn[aria-disabled="true"]{opacity:.45}
+@container dock (max-width:440px){.sp-modes .seg-btn>span{display:none}.sp-modes .seg-btn{padding:0 7px}}
 .cv-head{flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px 4px 8px}
-.cv-picker{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
-/* background-color only: the shorthand would drop the global select arrow */
-.cv-session{flex:1;min-width:0;max-width:100%;height:30px;padding:0 28px 0 8px;border:0;background-color:transparent;color:var(--ink);font-weight:600;font-size:var(--fs-md);text-overflow:ellipsis;cursor:pointer;border-radius:var(--r-sm)}
-.cv-session:hover,.cv-session:focus{background-color:var(--surface-3);border:0;box-shadow:none}
-/* The global select:focus rule resets the whole background, so the arrow is restated for every state */
-.cv-session,.cv-session:hover,.cv-session:focus{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%;background-size:4px 4px;background-repeat:no-repeat}
-.cv-status{flex:none;display:flex;align-items:center;gap:6px;margin:0;padding:0 16px 6px;color:var(--ink-3);font-size:var(--fs-xs)}
+.cv-head .spacer{flex:1 1 0;min-width:0}
+/* Session picker: one readable name; current and previous Sessions on demand */
+.cv-pop.cv-picker{flex:0 1 auto;min-width:0;max-width:100%}
+.cv-picker-btn{display:flex;align-items:center;gap:4px;min-width:0;height:30px;padding:0 6px 0 8px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:var(--fs-md);cursor:pointer}
+.cv-picker-btn:hover,.cv-picker[open]>.cv-picker-btn{background:var(--surface-3)}
+.cv-picker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-picker-chevron{width:13px;height:13px;flex:none;color:var(--ink-3)}
+.cv-picker>.cv-popbody{left:0;top:calc(100% + 6px);width:min(320px,calc(100vw - 32px))}
+.cv-session-list{display:grid;gap:1px}
+.cv-session-opt{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:6px 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
+.cv-session-opt:hover,.cv-session-opt[aria-selected=true]{background:var(--surface-3)}
+.cv-so-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--idle)}
+.cv-so-dot.is-active{background:var(--ok)}
+.cv-so-dot.is-failed{background:var(--bad)}
+.cv-so-text{flex:1;min-width:0;display:grid}
+.cv-so-main,.cv-so-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-so-main{font-size:var(--fs-sm)}
+.cv-so-meta{color:var(--ink-3);font-size:var(--fs-2xs)}
+.cv-so-check{width:14px;height:14px;flex:none}
+.cv-more-sessions{justify-self:start}
+.cv-back{display:inline-flex;align-items:center;gap:3px;flex:none;white-space:nowrap}
+.cv-back .icon{width:13px;height:13px}
+.cv-back[hidden]{display:none}
+/* Status: a dot plus one word; the reason and observation time live in the tooltip */
+.cv-status{flex:0 1 auto;min-width:0;max-width:40%;display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .cv-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--idle);flex:none}
 .cv-status.is-active::before{background:var(--ok)}
 .cv-status.is-waiting::before{background:var(--warn)}
 .cv-status.is-failed::before,.cv-status.is-unknown::before{background:var(--bad)}
 .cv-status:empty{display:none}
-.cv-older{flex:none;display:flex;justify-content:center}
-.cv-older:empty{display:none}
+/* Details menu: labelled facts, then the exact identity for copying */
+.cv-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;margin:0;padding:0 4px;font-size:var(--fs-xs)}
+.cv-facts dt{color:var(--ink-3)}
+.cv-facts dd{margin:0;min-width:0;display:grid;color:var(--ink);overflow-wrap:anywhere}
+.cv-facts small{color:var(--ink-4);font-size:var(--fs-2xs)}
+.cv-identity-row{display:flex;align-items:flex-start;gap:6px;padding:0 4px;min-width:0}
+.cv-identity-row .cv-identity{flex:1;min-width:0;font-family:var(--font-mono)}
+.cv-identity-row .cv-link{display:inline-flex;align-items:center;gap:3px;flex:none}
+.cv-identity-row .icon{width:12px;height:12px}
+.cv-older{position:absolute;z-index:1;top:6px;left:50%;transform:translateX(-50%);padding:3px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface-2);box-shadow:var(--shadow-1)}
+.cv-older[hidden]{display:none}
 .cv-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
 .cv-stage .feed{gap:18px;padding:12px 16px 20px}
 .cv-jump{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--line-2);border-radius:50%;background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-1);cursor:pointer}
@@ -29,14 +63,16 @@ export const CONVERSATION_STYLES = `
 .cv-note{margin:0;color:var(--ink-3);font-size:var(--fs-xs);overflow-wrap:anywhere}
 .cv-link{padding:2px 4px;border:0;background:none;color:var(--ink-3);font-size:var(--fs-xs);cursor:pointer;border-radius:var(--r-xs)}
 .cv-link:hover{color:var(--ink);background:var(--surface-3)}
-.cv-link[hidden],.cv-stop[hidden],.cv-chip[hidden]{display:none}
+.cv-link[hidden],.cv-stop[hidden],.cv-sub[hidden],.cv-pop[hidden]{display:none}
 .cv-code{margin:6px 0 0;padding:8px 10px;max-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:var(--r-sm);background:var(--sunken);font:var(--fs-xs)/1.5 var(--font-mono)}
+.cv-note:empty{display:none}
 .cv-identity{margin:0;color:var(--ink-4);font-size:var(--fs-2xs);overflow-wrap:anywhere}
 /* Messages */
 .cv-msg{min-width:0;overflow-wrap:anywhere}
 .cv-user{align-self:flex-end;max-width:88%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
 .cv-bubble{padding:9px 14px;border-radius:18px;background:var(--info-soft);color:var(--ink);font-size:var(--fs-md);line-height:1.5}
 .cv-tag{color:var(--ink-4);font-size:var(--fs-2xs)}
+/* A leading tagged context block folds to one line; the raw text stays one click away */
 .cv-assistant{position:relative;font-size:var(--fs-md);line-height:1.6}
 /* Copy: always visible under the newest message, a hover badge on older ones */
 .cv-actions{display:flex;gap:2px;position:absolute;top:-6px;right:0;opacity:0;transition:opacity var(--t-fast)}
@@ -75,14 +111,27 @@ export const CONVERSATION_STYLES = `
 /* An empty draft reads as inactive, like the reference composers */
 .cv-box:has(.cv-input:placeholder-shown) .cv-send{background:var(--surface-3);color:var(--ink-4)}
 .cv-send:disabled{background:var(--surface-3);color:var(--ink-4);cursor:default;opacity:1}
-.cv-chip{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:3px 8px;border-radius:var(--r-pill);background:var(--tone-soft,var(--warn-soft));color:var(--tone,var(--warn));font-size:var(--fs-xs)}
-.cv-chip .icon{width:13px;height:13px;flex:none}
-.cv-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.cv-pill{display:inline-flex;align-items:center;gap:4px;max-width:180px;height:28px;padding:0 8px;border-radius:var(--r-pill);color:var(--ink-3);font-size:var(--fs-sm);list-style:none;cursor:pointer}
+.cv-notice{display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:0 6px;color:var(--ink-3);font-size:var(--fs-xs)}
+.cv-notice.is-warn{color:var(--warn)}
+.cv-notice[hidden]{display:none}
+.cv-notice .icon{width:13px;height:13px;flex:none}
+.cv-notice>span{min-width:0;overflow-wrap:anywhere}
+.cv-notice .cv-link{flex:none;margin-left:auto}
+.cv-pill{display:inline-flex;align-items:center;gap:4px;max-width:220px;height:28px;padding:0 8px;border-radius:var(--r-pill);color:var(--ink-3);font-size:var(--fs-sm);list-style:none;cursor:pointer}
 .cv-pill::-webkit-details-marker{display:none}
 .cv-pill:hover,.cv-pop[open]>.cv-pill{background:var(--surface-3);color:var(--ink)}
 .cv-pill .icon{width:13px;height:13px;flex:none}
+.cv-model-state{flex:none;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
+.cv-model-state[hidden]{display:none}
+.cv-model[data-state=pending] .cv-model-state{color:var(--accent,var(--info))}
+/* The model menu shrinks before the send button is pushed out; the state word stays whole and the model name ellipsizes */
+.cv-pop.cv-model{flex:0 1 auto;min-width:0}
+.cv-model>.cv-pill{max-width:min(220px,100%);box-sizing:border-box}
 .cv-model-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-model-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ok)}
+.cv-model[data-state=unknown] .cv-model-dot{background:var(--warn)}
+.cv-model[data-state=pending] .cv-model-dot{background:var(--accent,var(--info))}
+.cv-model[data-state=unknown] .cv-model-label{font-style:italic}
 .cv-hint{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:0 6px;min-width:0}
 .cv-hint:empty{display:none}
 .cv-hint .cv-note:empty{display:none}
@@ -100,7 +149,37 @@ export const CONVERSATION_STYLES = `
 .cv-pop>summary::-webkit-details-marker{display:none}
 .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-model>.cv-popbody{right:0;bottom:calc(100% + 8px);width:min(300px,calc(100vw - 24px));gap:0;padding:6px}
+/* Model picker: two quiet facts, a short list, one action row. Background
+   polls update text in place and never toggle these controls. */
+.cv-model .cv-model-facts{grid-template-columns:auto minmax(0,1fr);gap:5px 14px;align-items:baseline;margin:0;padding:8px 10px 10px;font-size:var(--fs-xs)}
+.cv-model .cv-model-facts dt{color:var(--ink-3);white-space:nowrap}
+.cv-model .cv-model-facts dd{display:flex;align-items:baseline;gap:8px;min-width:0}
+.cv-mf-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:var(--fs-sm);font-weight:600}
+.cv-mf-value.is-empty{color:var(--ink-3);font-weight:400}
+.cv-model .cv-model-facts .cv-mf-note{flex:none;margin-left:auto;color:var(--ink-4);font-size:var(--fs-2xs);white-space:nowrap}
+.cv-mf-note[hidden]{display:none}
+.cv-model[data-state=pending] .cv-mf-note{color:var(--accent)}
+.cv-model .cv-options{gap:2px;max-height:216px;overflow:auto;min-height:0;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
+.cv-model .cv-options:empty{display:none}
+.cv-model .cv-option{gap:10px;min-height:36px;padding:6px 10px;font-size:var(--fs-sm);transition:background var(--t-fast),color var(--t-fast)}
+.cv-model .cv-option:hover:not(:disabled){background:var(--surface-3)}
+.cv-model .cv-option.is-selected{background:var(--accent-soft)}
+.cv-model .cv-option.is-selected .cv-option-name{font-weight:600}
+.cv-model .cv-option.is-selected .icon{color:var(--accent)}
+.cv-model .cv-option:disabled{cursor:default;color:var(--ink-3)}
+.cv-model .cv-option.is-selected:hover:not(:disabled){background:var(--accent-soft)}
+.cv-model .cv-option:disabled:not(.is-selected){background:transparent}
+.cv-option-mark{width:6px;height:6px;flex:none;border-radius:50%;background:transparent}
+.cv-option.is-current .cv-option-mark{background:var(--ok)}
+.cv-model .cv-option-id{display:block;flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-4);font:var(--fs-2xs)/1.4 var(--font-mono)}
+.cv-model .cv-pop-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;padding:8px 4px 2px 10px}
+.cv-model-notes{flex:1 1 140px;min-width:0;display:grid;gap:2px}
+.cv-model-notes:not(:has(.cv-note:not(:empty))){display:none}
+.cv-model .cv-pop-actions .cv-link{flex:none}
+.cv-model .cv-note:empty{display:none}
+.cv-apply{height:28px;padding:0 12px;flex:none}
+.cv-apply:disabled{background:var(--surface-3);color:var(--ink-4);opacity:1}
 .cv-menu>.cv-popbody{right:0;top:calc(100% + 6px)}
 .cv-pop-title{margin:0;padding:0 4px;color:var(--ink-3);font-size:var(--fs-xs)}
 .cv-pop-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
@@ -123,11 +202,11 @@ export const CONVERSATION_STYLES = `
 .cv-card label{display:grid;gap:4px}
 .cv-card input,.cv-card select,.cv-card textarea{min-width:0;max-width:100%;box-sizing:border-box}
 /* Keyboard focus */
-.cv-iconbtn:focus-visible,.cv-send:focus-visible,.cv-stop:focus-visible,.cv-jump:focus-visible,.cv-pill:focus-visible,.cv-option:focus-visible,.cv-link:focus-visible,.cv-cmd:focus-visible,.cv-x:focus-visible,.cv-activity>summary:focus-visible,.cv-sub>summary:focus-visible{outline:none;box-shadow:var(--focus)}
-.cv-session:focus-visible{box-shadow:var(--focus)}
+.cv-iconbtn:focus-visible,.cv-send:focus-visible,.cv-stop:focus-visible,.cv-jump:focus-visible,.cv-pill:focus-visible,.cv-option:focus-visible,.cv-link:focus-visible,.cv-cmd:focus-visible,.cv-x:focus-visible,.cv-activity>summary:focus-visible,.cv-sub>summary:focus-visible,.cv-picker-btn:focus-visible,.cv-session-opt:focus-visible{outline:none;box-shadow:var(--focus)}
 .cv-input:focus-visible{outline:none;box-shadow:none}
 @media(max-width:760px){
   .cv-user{max-width:94%}
+  .cv-status{max-width:30%}
   .cv-composer{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
 }
 `;

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

@@ -1,10 +1,10 @@
 /*
  * DOCK VIEW — the Discussion pane: its sub-header, the message feed with day
  * separators and bubbles, the composer, submission facets and next steps.
- * The Live session pane is views/terminal; the dock frame is layout/workspace.
+ * The session page is views/conversation and 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;border-bottom:0}
+.dock-head{height:auto;min-height:var(--header-h);padding-top:6px;padding-bottom:6px}
 .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}
@@ -24,9 +24,21 @@ export const DOCK_STYLES = `
 .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-target-dot{width:7px;height:7px;margin:0 4px;flex:none;border-radius:50%;background:var(--idle)}
+.dock-target-dot.is-live{background:var(--ok)}
+/* One header row: target, view tabs, actions. The target's name wins space
+   first: icon-only tabs up to 480px, the selected label up to 560px, then
+   every label. Tabs keep aria-label and title at every width. */
+.dock{container-type:inline-size;container-name:dock}
+.dock-target{flex:0 1 auto}
+.dock-tabs{flex:0 0 auto;display:flex;min-width:0;margin-left:auto}
+.dock-tabs .seg-btn{justify-content:center;gap:5px;min-width:0}
+.dock-tabs .seg-btn .icon{width:14px;height:14px;flex:none}
+.dock-tabs .seg-btn[aria-selected="false"]>span{display:none}
+.dock-tabs .seg-btn>span{white-space:nowrap}
+@container dock (min-width:560px){.dock-tabs .seg-btn[aria-selected="false"]>span{display:inline}}
+@container dock (max-width:480px){.dock-tabs .seg-btn>span{display:none}}
+@container dock (max-width:340px){.dock-target-icon{display:none}}
 .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}