@zq-silk/yui 2.7.1 → 2.8.1

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

@@ -2,11 +2,14 @@ export const SKILLS_SCRIPT = String.raw `
 import { h } from "/assets/js/lib/dom.js";
 import { requestJson, submitMutation } from "/assets/js/lib/api.js";
 
-export function mountSkills(root, t) {
+// options: heading (default true) renders the card's own title; onDirty(dirty)
+// reports whether unsaved bindings exist, for the page navigation.
+export function mountSkills(root, t, options = {}) {
   if (!root) return;
   const tr = (key, fallback) => t("skills.browser." + key, fallback);
-  const scope = h("select", null, h("option", { value: "global" }, tr("global", "Global Role")),
-    h("option", { value: "task" }, tr("task", "Task Role")));
+  const translated = key => ({ "data-i18n": "skills.browser." + key });
+  const scope = h("select", null, h("option", { value: "global", ...translated("global") }, tr("global", "Global Role")),
+    h("option", { value: "task", ...translated("task") }, tr("task", "Task Role")));
   const task = h("input", { placeholder: "task-123", disabled: true });
   const roles = h("select");
   const status = h("p", { role: "status", "aria-live": "polite" });
@@ -16,20 +19,21 @@ export function mountSkills(root, t) {
   const catalog = h("div.settings-stack");
   const reader = h("div.settings-stack", { tabindex: "-1" });
   const acknowledge = h("input", { type: "checkbox" });
-  const acknowledgement = h("label.settings-reset", null, acknowledge, tr("ack", "Keep any live global Session on its existing version."));
-  const save = h("button.btn.btn-primary", { type: "button", disabled: true }, tr("save", "Save bindings"));
-  const reload = h("button.btn", { type: "button" }, tr("reload", "Load / reload Role"));
-  const more = h("button.btn", { type: "button", hidden: true }, tr("more", "More Skills"));
-  const search = h("button.btn", { type: "button" }, tr("search", "Search"));
+  const acknowledgement = h("label.settings-reset", null, acknowledge, h("span", translated("ack"), tr("ack", "Keep any live global Session on its existing version.")));
+  const save = h("button.btn.btn-primary", { type: "button", disabled: true, ...translated("save") }, tr("save", "Save bindings"));
+  const reload = h("button.btn", { type: "button", ...translated("reload") }, tr("reload", "Load / reload Role"));
+  const more = h("button.btn", { type: "button", hidden: true, ...translated("more") }, tr("more", "More Skills"));
+  const search = h("button.btn", { type: "button", ...translated("search") }, tr("search", "Search"));
   let state = null, draft = [], busy = false, uncertain = false, generation = 0, catalogGeneration = 0, readerGeneration = 0;
   const selected = () => ({ scope: scope.value, role: roles.value, ...(scope.value === "task" ? { task: task.value.trim() } : {}) });
   const params = object => new URLSearchParams(object).toString();
-  const label = (text, control) => h("label.field", null, h("span", null, text), control);
+  const label = (text, control, key) => h("label.field", null, h("span", key ? translated(key) : null, text), control);
   function dirty() { return !!state && JSON.stringify(draft) !== JSON.stringify(state.skills); }
   function invalidate() {
     generation++; state = null; draft = []; bindings.replaceChildren(); frozen.replaceChildren(); save.disabled = true;
     scope.disabled = roles.disabled = false; task.disabled = scope.value !== "task";
     acknowledgement.hidden = scope.value !== "global";
+    options.onDirty?.(false);
   }
   function renderBindings() {
     // A draft remains attached to the exact Role baseline until saved or explicitly reloaded.
@@ -41,6 +45,7 @@ export function mountSkills(root, t) {
         h("button.btn", { type: "button", onclick: () => read({ id }) }, tr("readSource", "Read current source")))));
     if (!draft.length) bindings.append(h("p", null, tr("none", "No additional bindings. Built-in Role Skills are loaded automatically.")));
     save.disabled = busy || uncertain || !dirty();
+    options.onDirty?.(dirty());
   }
   function renderEvidence(data) {
     frozen.replaceChildren(h("h3", null, tr("frozen", "Current Session · frozen evidence")));
@@ -106,8 +111,8 @@ export function mountSkills(root, t) {
         h("h3", null, item.id), h("p", null, item.description || item.error),
         h("small.mono-line", null, item.source.kind + " · " + item.source.path),
         h("div.settings-actions", null,
-          h("button.btn", { type: "button", onclick: () => read({ id: item.id }) }, tr("readSource", "Read current source")),
-          h("button.btn", { type: "button", disabled: !!item.error, onclick: () => {
+          h("button.btn", { type: "button", ...translated("readSource"), onclick: () => read({ id: item.id }) }, tr("readSource", "Read current source")),
+          h("button.btn", { type: "button", ...translated("add"), disabled: !!item.error, onclick: () => {
             if (!state || busy || uncertain) { status.textContent = tr("choose", "Load an explicit Role before editing bindings."); return; }
             if (!draft.includes(item.id)) draft.push(item.id);
             renderBindings(); status.textContent = tr("unsaved", "Unsaved bindings. Review the selected Role and save.");
@@ -141,12 +146,14 @@ export function mountSkills(root, t) {
   search.addEventListener("click", () => loadCatalog());
   query.addEventListener("keydown", event => { if (event.key === "Enter") { event.preventDefault(); void loadCatalog(); } });
   window.addEventListener("beforeunload", event => { if (dirty()) { event.preventDefault(); event.returnValue = ""; } });
-  root.replaceChildren(h("h2", null, tr("title", "Skills · browse & bind")),
-    h("p", null, tr("intro", "Read existing packages and choose additional bindings for one explicit Role. Scripts are displayed as data, never run.")),
-    h("div.settings-grid", null, label(tr("scope", "Scope"), scope), label(tr("taskId", "Task ID"), task), label("Role", roles)),
+  const heading = options.heading === false ? [] : [h("h2", null, tr("title", "Skills · browse & bind")),
+    h("p", null, tr("intro", "Read existing packages and choose additional bindings for one explicit Role. Scripts are displayed as data, never run."))];
+  root.replaceChildren(...heading,
+    h("div.settings-grid", null, label(tr("scope", "Scope"), scope, "scope"), label(tr("taskId", "Task ID"), task, "taskId"), label("Role", roles)),
     h("div.settings-actions", null, reload), status, bindings, acknowledgement,
-    h("div.settings-actions", null, save), frozen, label(tr("query", "Find an existing Skill by name or purpose"), query),
+    h("div.settings-actions", null, save), frozen, label(tr("query", "Find an existing Skill by name or purpose"), query, "query"),
     h("div.settings-actions", null, search), catalog, more, reader);
   void loadRole(); void loadCatalog();
+  return { translate: () => { if (state) { renderBindings(); renderEvidence(state); } } };
 }
 `;

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

@@ -15,6 +15,8 @@ export const ICON_PATHS = Object.freeze({
     broadcast: ["M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", "M8.5 8.5a5 5 0 0 0 0 7", "M15.5 8.5a5 5 0 0 1 0 7", "M5.6 5.6a9 9 0 0 0 0 12.8", "M18.4 5.6a9 9 0 0 1 0 12.8"],
     chevron: ["M9 6l6 6-6 6"],
     down: ["M6 9l6 6 6-6"],
+    up: ["M12 19V5", "M6 11l6-6 6 6"],
+    stop: ["M8 8h8v8H8z"],
     check: ["M5 12.5l4.5 4.5L19 7.5"],
     alert: ["M12 4l9 16H3z", "M12 10v4", "M12 17v.5"],
     clock: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M12 7v5l3 2"],

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

@@ -0,0 +1,13 @@
+export const MANAGE_SECTIONS = Object.freeze({
+    models: [
+        { page: "models", section: "providers", key: "models.section.providers", label: "Access" },
+        { page: "models", section: "catalog", key: "models.section.catalog", label: "Model catalog" },
+        { page: "models", section: "quota", key: "models.section.quota", label: "Quota" }
+    ],
+    settings: [
+        { page: "settings", section: "preferences", key: "settings.section.preferences", label: "Preferences" },
+        { page: "settings", section: "skills", key: "settings.section.skills", label: "Skills" },
+        { page: "settings", section: "server", key: "settings.section.server", label: "Agents & server" },
+        { page: "models", section: "connection", key: "models.section.connection", label: "Model connection" }
+    ]
+});

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

@@ -0,0 +1,54 @@
+import { STYLESHEETS } from "../styles/index.js";
+import { DEFAULT_DARK_THEME } from "../shared/themes.js";
+import { iconSvg } from "../shared/icons.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.
+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) => `
+        <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>
+      </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>
+    </aside>`;
+// 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 name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <script src="/assets/theme.js"></script>
+  <link rel="icon" href="data:,"><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>
+    ${RAIL}
+    <main class="manage-main" id="manage-main">
+${options.main}
+    </main>
+  </div>
+  <script type="module" src="/assets/js/app/manage.js"></script>
+</body></html>`;
+}
+// The common section heading: title and one explanatory line.
+export function manageHead(id, key, label, hintKey, hint) {
+    return `<header class="manage-head"><div class="manage-heading"><h1 id="${id}" data-i18n="${key}">${escapeHtml(label)}</h1><p data-i18n="${hintKey}">${escapeHtml(hint)}</p></div></header>`;
+}

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

@@ -0,0 +1,7 @@
+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.
+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>` });

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

@@ -1,35 +1 @@
-import { STYLESHEETS } from "../styles/index.js";
-import { DEFAULT_DARK_THEME } from "../shared/themes.js";
-export const SETTINGS_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">
-  <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
-  <script src="/assets/theme.js"></script>
-  <link rel="icon" href="data:,"><title>Yui · Settings</title>
-  ${STYLESHEETS.map(s => `<link rel="stylesheet" href="/assets/css/${s.name}.css">`).join("\n")}
-</head>
-<body class="settings-body">
-  <main class="settings-page">
-    <header class="settings-header"><a class="btn" href="/">← Yui</a><h1 data-i18n="settings.title">Settings</h1></header>
-    <p data-i18n="settings.scope">Browser preferences apply here immediately. Server settings are desired configuration, not proof that existing Sessions adopted them.</p>
-    <section class="settings-card">
-      <h2 data-i18n="settings.browser">This browser</h2>
-      <div class="settings-grid">
-        <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="locale-select"><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>
-          <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>
-        </div>
-      </div>
-    </section>
-    <section id="skill-browser" class="settings-card settings-stack"></section>
-    <label class="field settings-search"><span data-i18n="settings.search">Find a setting</span><input id="settings-search" type="search" autocomplete="off"></label>
-    <p id="settings-status" role="status"></p>
-    <div id="settings-groups" class="settings-stack"></div>
-  </main>
-  <script type="module" src="/assets/js/app/settings.js"></script>
-</body></html>`;
+export { MODELS_HTML as SETTINGS_HTML } from "./models.js";

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

@@ -0,0 +1,30 @@
+import { manageHead } from "./manage.js";
+// Settings content in the shared management document. Sections stay mounted
+// across /settings/* and /models/* navigation.
+export const SETTINGS_MAIN = `
+      <section class="manage-section" data-section="preferences" aria-labelledby="settings-preferences-title">
+        ${manageHead("settings-preferences-title", "settings.section.preferences", "Preferences", "settings.hint.preferences", "Theme, language and workspace layout for this browser. Changes apply here immediately and are never sent to the server.")}
+        <section class="card settings-card">
+          <h2 data-i18n="settings.browser">This browser</h2>
+          <div class="settings-grid">
+            <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>
+              <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>
+            </div>
+          </div>
+        </section>
+      </section>
+      <section class="manage-section" data-section="skills" aria-labelledby="settings-skills-title" hidden>
+        ${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="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>
+        <p id="settings-status" role="status"></p>
+        <div id="settings-groups" class="settings-stack"></div>
+      </section>`;

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

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

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

@@ -8,13 +8,16 @@ import { CONTROL_STYLES } from "./ui/controls.js";
 import { FORM_STYLES } from "./ui/forms.js";
 import { SURFACE_STYLES } from "./ui/surfaces.js";
 import { DELIVERY_STYLES } from "./views/delivery.js";
+import { CONVERSATION_STYLES } from "./views/conversation.js";
 import { DOCK_STYLES } from "./views/dock.js";
 import { PAGE_STYLES } from "./views/page.js";
 import { RECORD_STYLES } from "./views/records.js";
 import { SIDEBAR_STYLES } from "./views/sidebar.js";
 import { TASK_STYLES } from "./views/task.js";
 import { TERMINAL_STYLES } from "./views/terminal.js";
+import { MANAGE_STYLES } from "./views/manage.js";
 import { SETTINGS_STYLES } from "./views/settings.js";
+import { MODELS_STYLES } from "./views/models.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
@@ -34,8 +37,11 @@ export const STYLESHEETS = Object.freeze([
     { name: "views/records", body: RECORD_STYLES },
     { name: "views/delivery", body: DELIVERY_STYLES },
     { name: "views/dock", body: DOCK_STYLES },
+    { name: "views/conversation", body: CONVERSATION_STYLES },
     { name: "views/terminal", body: TERMINAL_STYLES },
+    { name: "views/manage", body: MANAGE_STYLES },
     { name: "views/settings", body: SETTINGS_STYLES },
+    { name: "views/models", body: MODELS_STYLES },
     { name: "markdown", body: MARKDOWN_STYLES },
     { name: "layout/responsive", body: RESPONSIVE_STYLES }
 ]);

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

@@ -0,0 +1,133 @@
+/*
+ * CONVERSATION VIEW — the right-dock Conversation pane: a slim header, a
+ * borderless feed (bubble for the user, plain prose for the assistant, one-line
+ * activity rows) and a rounded composer with popovers. Colours come from
+ * theme tokens only; the Discussion pane keeps its own sheet (views/dock).
+ */
+export const CONVERSATION_STYLES = `
+#dock-conversation{min-width:0}
+.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-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}
+.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}
+.cv-jump:hover{background:var(--surface-3)}
+.cv-jump[hidden]{display:none}
+.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-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-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)}
+.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)}
+.cv-assistant:hover .cv-actions,.cv-assistant:focus-within .cv-actions{opacity:1}
+.cv-assistant:last-child .cv-actions{position:static;margin-top:4px;opacity:1}
+.cv-actions .cv-iconbtn{background:var(--surface-2)}
+.cv-assistant:last-child .cv-actions .cv-iconbtn{background:transparent}
+/* Activity: a single muted line that expands to its detail */
+.cv-activity{color:var(--ink-3);font-size:var(--fs-sm);min-width:0}
+.cv-activity>summary{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 0;list-style:none;cursor:pointer;border-radius:var(--r-xs)}
+.cv-activity>summary::-webkit-details-marker{display:none}
+.cv-activity>summary:hover{color:var(--ink)}
+.cv-activity .icon{width:15px;height:15px;flex:none}
+.cv-act-label{flex:none}
+.cv-act-detail{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-4)}
+.cv-activity[open]>summary .cv-act-detail{white-space:normal}
+.cv-group>summary .cv-act-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-chevron{width:13px;height:13px;flex:none;transition:transform var(--t-fast)}
+.cv-group[open]>summary .cv-chevron{transform:rotate(180deg)}
+.cv-group-body{display:grid;gap:4px;padding:6px 0 2px 23px}
+.cv-step{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;min-width:0;overflow-wrap:anywhere}
+/* Composer */
+.cv-composer{flex:none;display:grid;gap:6px;padding:8px 12px 12px;min-width:0}
+.cv-box{display:grid;gap:4px;padding:10px 10px 8px 14px;border:1px solid var(--line-2);border-radius:20px;background:var(--surface-2);box-shadow:var(--shadow-1);transition:border-color var(--t-fast),box-shadow var(--t-fast);min-width:0}
+.cv-box:focus-within{border-color:var(--line-3)}
+.cv-input{display:block;width:100%;box-sizing:border-box;min-height:44px;max-height:240px;padding:0;border:0;background:transparent;box-shadow:none;resize:none;color:var(--ink);font-size:var(--fs-md);line-height:1.5}
+.cv-input:hover,.cv-input:focus{border:0;box-shadow:none;background:transparent;outline:none}
+.cv-tools{display:flex;align-items:center;gap:6px;min-width:0}
+.cv-iconbtn{width:30px;height:30px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;list-style:none;flex:none}
+.cv-iconbtn::-webkit-details-marker{display:none}
+.cv-iconbtn:hover{background:var(--surface-3);color:var(--ink)}
+.cv-iconbtn .icon{width:17px;height:17px}
+.cv-send,.cv-stop{width:32px;height:32px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--canvas);cursor:pointer;flex:none}
+.cv-send .icon,.cv-stop .icon{width:16px;height:16px}
+.cv-send:hover,.cv-stop:hover{opacity:.85}
+/* 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-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-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.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}
+.conversation-slash{padding:0 2px}
+.cv-cmd{padding:3px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-xs);cursor:pointer}
+.cv-cmd:hover{background:var(--surface-3);color:var(--ink)}
+.cv-file{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--r-sm);background:var(--surface-3);font-size:var(--fs-xs);min-width:0}
+.cv-file .small{flex:1;min-width:0;overflow-wrap:anywhere}
+.cv-x{width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer}
+.cv-x:hover{background:var(--line-2);color:var(--ink)}
+.cv-x .icon{width:13px;height:13px}
+/* Popovers: attach and model open upward, the header menu opens downward */
+.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-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)}
+.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}
+.cv-options{display:grid;gap:1px}
+.cv-option{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-align:left;font-size:var(--fs-md);cursor:pointer}
+.cv-option:hover{background:var(--surface-3)}
+.cv-option-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-option-id{display:none}
+.cv-option .icon{width:15px;height:15px;flex:none;visibility:hidden}
+.cv-option.is-selected .icon{visibility:visible}
+.cv-field{display:grid;gap:4px;font-size:var(--fs-xs);color:var(--ink-3)}
+.cv-field select{min-width:0;max-width:100%}
+.cv-sub>summary{cursor:pointer;color:var(--ink-3);font-size:var(--fs-xs)}
+/* Native requests and leader questions */
+.cv-requests{flex:0 1 auto;max-height:35%;overflow-y:auto;overflow-wrap:anywhere;padding:0 12px}
+.cv-requests:empty{display:none}
+.cv-card{display:grid;gap:8px;margin:6px 0;padding:12px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2)}
+.cv-card-title{margin:0;font-size:var(--fs-sm);font-weight:600}
+.cv-requests>.cv-card-title{margin:8px 4px 0}
+.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-input:focus-visible{outline:none;box-shadow:none}
+@media(max-width:760px){
+  .cv-user{max-width:94%}
+  .cv-composer{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
+}
+`;

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

@@ -0,0 +1,71 @@
+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.
+ */
+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}
+
+/* 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}
+.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-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}
+
+/* Reading column and the shared section heading */
+.manage-main{min-width:0;padding:28px var(--gutter) 72px}
+.manage-main>*{max-width:1120px;margin-left:auto;margin-right:auto}
+.manage-scope{margin-bottom:14px;color:var(--ink-3);font-size:var(--fs-xs);line-height:1.5;overflow-wrap:anywhere}
+.manage-section{display:grid;gap:14px;min-width:0}
+.manage-section[hidden]{display:none}
+.manage-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;min-width:0}
+.manage-heading{display:grid;gap:4px;flex:1 1 320px;min-width:0}
+.manage-heading .kicker{margin:0}
+.manage-heading h1{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
+.manage-heading p:not(.kicker){color:var(--ink-3);font-size:var(--fs-sm);line-height:1.55;overflow-wrap:anywhere}
+.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}
+}
+@media(max-width:${BREAKPOINTS.small}px){
+  .manage-heading h1{font-size:var(--fs-xl)}
+}
+`;