@zq-silk/yui 2.0.0 → 2.1.0

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

@@ -1,101 +1,77 @@
 /*
- * DESIGN TOKEN CONTRACT
- * ---------------------
- * Layout is fully decoupled from themes. Geometry, type, metrics, and motion
- * live once in the theme-independent :root block below and are shared by every
- * theme. A [data-theme="..."] block defines ONLY color / surface / effect
- * tokens, so switching (or adding) a theme can never change layout, sizing, or
- * position. Layout / component / responsive styles reference these variables
- * only — never hardcode a color outside a theme block.
+ * DESIGN TOKENS
+ * -------------
+ * Geometry, type, spacing and motion are theme-independent and live once on
+ * :root. A theme block defines colour and effect tokens only, so switching a
+ * theme can never move or resize anything.
  *
- * To add a theme: copy a color block, rename the selector, retune the color
- * values, then register the name in client/theme.ts (THEMES) and add an
- * <option> in shell.ts. Do NOT put layout tokens in a theme block; if a future
- * theme genuinely needs to affect layout, revisit this contract deliberately.
+ * Themes
+ *   sumi  (墨) graphite dark, vermilion accent — default dark
+ *   washi (和紙) warm paper light, vermilion accent — default light
+ *   ai    (藍) deep indigo dark, periwinkle accent
+ * "system" is not a token block: client/theme.ts resolves it to sumi or washi
+ * from prefers-color-scheme and stamps the resolved name on <html>.
  *
- * Theme-independent (:root, shared by all themes)
- *   Geometry   --radius --radius-lg --radius-pill
- *   Type       --font-mono --font-display --font-body
- *   Metrics    --page-space --sidebar-w --terminal-w
- *   Motion     --motion-fast --motion-slow --ease
- *
- * Per-theme ([data-theme="..."], color only)
- *   Surfaces   --bg --bg-1 --bg-2 --bg-3            (page → elevated layers)
- *   Lines      --border --border-strong
- *   Text       --text --muted --faint
- *   Accent     --accent --accent-2 --on-accent --accent-soft --accent-line
- *   Semantic   --active/--success/--warning/--danger (+ matching --*-soft)
- *   Effects    --glow --shadow-card --shadow-pop --ambient
+ * To add a theme: add a [data-theme="name"] block defining every colour token
+ * below, then register the name in client/theme.ts and the settings menu.
  */
 export const TOKEN_STYLES = `
-/* Theme-independent layout tokens — shared by every theme (see contract above).
-   Never move these into a [data-theme] block. */
 :root{
-  --radius:10px;--radius-lg:16px;--radius-pill:999px;
-  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
-  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
-  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
-  --page-space:clamp(18px,2.6vw,40px);--sidebar-w:clamp(232px,18vw,288px);--terminal-w:clamp(420px,34vw,640px);--pane-w:clamp(300px,29vw,500px);
-  --motion-fast:150ms;--motion-slow:320ms;--ease:cubic-bezier(.16,.84,.44,1);
-}
-:root,[data-theme="control-room"]{
-  color-scheme:dark;
-  --bg:#080b11;--bg-1:#0c111a;--bg-2:#111826;--bg-3:#182132;
-  --border:#1e2836;--border-strong:#2f3d50;
-  --text:#e8eef6;--muted:#8b99ad;--faint:#5a6779;
-  --accent:#49d6ff;--accent-2:#a78bfa;--on-accent:#05121b;
-  --accent-soft:rgba(73,214,255,.1);--accent-line:rgba(73,214,255,.34);
-  --active:#49d6ff;--active-soft:rgba(73,214,255,.12);
-  --success:#43d98d;--success-soft:rgba(67,217,141,.12);
-  --warning:#ffca6b;--warning-soft:rgba(255,202,107,.12);
-  --danger:#ff6b81;--danger-soft:rgba(255,107,129,.12);
-  --glow:0 0 18px rgba(73,214,255,.45);
-  --shadow-card:0 1px 2px rgba(0,0,0,.32),0 4px 12px rgba(0,0,0,.18);
-  --shadow-pop:0 18px 48px rgba(0,0,0,.5);
-  --ambient:
-    radial-gradient(1000px 560px at 8% -12%,rgba(73,214,255,.12),transparent 58%),
-    radial-gradient(900px 520px at 104% -6%,rgba(167,139,250,.12),transparent 55%),
-    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/100% 44px,
-    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/44px 100%;
+  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
+  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
+  --fs-2xs:10.5px;--fs-xs:11.5px;--fs-sm:12.5px;--fs-md:13.5px;--fs-lg:15px;--fs-xl:19px;--fs-2xl:24px;
+  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
+  --r-xs:5px;--r-sm:7px;--r-md:10px;--r-lg:14px;--r-pill:999px;
+  --sidebar-w:clamp(260px,21vw,312px);--dock-w:440px;--dock-min:320px;--divider-w:9px;
+  --center-max:980px;--header-h:56px;
+  --t-fast:120ms;--t-med:220ms;--ease:cubic-bezier(.2,.8,.2,1);
 }
-[data-theme="atlas"]{
+:root,[data-theme="sumi"]{
   color-scheme:dark;
-  --bg:#051221;--bg-1:#081a2c;--bg-2:#0c2436;--bg-3:#122d44;
-  --border:#153349;--border-strong:#2a4a63;
-  --text:#e6f2fb;--muted:#8ba9c2;--faint:#567184;
-  --accent:#38e1d4;--accent-2:#7cabf2;--on-accent:#04131d;
-  --accent-soft:rgba(56,225,212,.1);--accent-line:rgba(56,225,212,.32);
-  --active:#38e1d4;--active-soft:rgba(56,225,212,.12);
-  --success:#49db9e;--success-soft:rgba(73,219,158,.12);
-  --warning:#ffc86b;--warning-soft:rgba(255,200,107,.12);
-  --danger:#ff7a8f;--danger-soft:rgba(255,122,143,.12);
-  --glow:0 0 18px rgba(56,225,212,.4);
-  --shadow-card:0 1px 2px rgba(0,0,0,.32),0 4px 12px rgba(0,0,0,.18);
-  --shadow-pop:0 18px 48px rgba(0,0,0,.5);
-  --ambient:
-    radial-gradient(1000px 560px at 10% -14%,rgba(56,225,212,.11),transparent 58%),
-    radial-gradient(900px 520px at 106% -6%,rgba(124,171,242,.1),transparent 55%),
-    linear-gradient(rgba(230,242,251,.018) 1px,transparent 1px) 0 0/100% 44px,
-    linear-gradient(90deg,rgba(230,242,251,.018) 1px,transparent 1px) 0 0/44px 100%;
+  --canvas:#0e0f11;--surface:#141518;--surface-2:#191a1e;--surface-3:#202126;--sunken:#0b0c0d;
+  --line:rgba(255,255,255,.065);--line-2:rgba(255,255,255,.11);--line-3:rgba(255,255,255,.18);
+  --ink:#ececee;--ink-2:#b4b5bb;--ink-3:#85868e;--ink-4:#5c5d64;
+  --accent:#ff7a52;--accent-ink:#1a0c06;--accent-soft:rgba(255,122,82,.12);--accent-line:rgba(255,122,82,.38);
+  --info:#6cb6ff;--info-soft:rgba(108,182,255,.13);
+  --ok:#4fd18b;--ok-soft:rgba(79,209,139,.13);
+  --warn:#f5c065;--warn-soft:rgba(245,192,101,.14);
+  --bad:#ff6b7a;--bad-soft:rgba(255,107,122,.13);
+  --idle:#8e8f97;--idle-soft:rgba(142,143,151,.14);
+  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.35);
+  --shadow-2:0 12px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35);
+  --focus:0 0 0 2px var(--canvas),0 0 0 4px var(--accent-line);
+  --term-bg:#0b0c0d;--term-fg:#e6e6e8;--term-cursor:#ff7a52;--term-sel:#3a2a24;
 }
-[data-theme="paper"]{
+[data-theme="washi"]{
   color-scheme:light;
-  --bg:#e9eef6;--bg-1:#f2f6fc;--bg-2:#ffffff;--bg-3:#f7fafe;
-  --border:#d4deec;--border-strong:#b2c0d6;
-  --text:#132030;--muted:#54637a;--faint:#8493a8;
-  --accent:#2563eb;--accent-2:#7c3aed;--on-accent:#ffffff;
-  --accent-soft:rgba(37,99,235,.08);--accent-line:rgba(37,99,235,.3);
-  --active:#2563eb;--active-soft:rgba(37,99,235,.1);
-  --success:#0f9d68;--success-soft:rgba(15,157,104,.1);
-  --warning:#b26a00;--warning-soft:rgba(178,106,0,.1);
-  --danger:#d33a52;--danger-soft:rgba(211,58,82,.1);
-  --glow:0 0 16px rgba(37,99,235,.28);
-  --shadow-card:0 1px 2px rgba(24,45,78,.05),0 4px 14px rgba(24,45,78,.07);
-  --shadow-pop:0 18px 44px rgba(24,45,78,.18);
-  --ambient:
-    radial-gradient(1000px 560px at 8% -12%,rgba(37,99,235,.09),transparent 58%),
-    radial-gradient(900px 520px at 104% -6%,rgba(124,58,237,.08),transparent 55%),
-    linear-gradient(rgba(24,45,78,.03) 1px,transparent 1px) 0 0/100% 44px,
-    linear-gradient(90deg,rgba(24,45,78,.03) 1px,transparent 1px) 0 0/44px 100%;
+  --canvas:#f4f2ed;--surface:#fbfaf7;--surface-2:#ffffff;--surface-3:#f1eee7;--sunken:#ebe8e0;
+  --line:rgba(40,32,20,.08);--line-2:rgba(40,32,20,.13);--line-3:rgba(40,32,20,.22);
+  --ink:#1d1b18;--ink-2:#45413b;--ink-3:#77726a;--ink-4:#a39e95;
+  --accent:#d24a26;--accent-ink:#ffffff;--accent-soft:rgba(210,74,38,.09);--accent-line:rgba(210,74,38,.34);
+  --info:#1f6fd1;--info-soft:rgba(31,111,209,.09);
+  --ok:#17844f;--ok-soft:rgba(23,132,79,.1);
+  --warn:#a86500;--warn-soft:rgba(168,101,0,.1);
+  --bad:#c72f45;--bad-soft:rgba(199,47,69,.09);
+  --idle:#7a756c;--idle-soft:rgba(122,117,108,.11);
+  --shadow-1:0 1px 2px rgba(40,32,20,.06);
+  --shadow-2:0 16px 40px rgba(40,32,20,.16),0 2px 8px rgba(40,32,20,.08);
+  --focus:0 0 0 2px var(--canvas),0 0 0 4px var(--accent-line);
+  --term-bg:#1b1a18;--term-fg:#efece6;--term-cursor:#ff8a63;--term-sel:#4a3a32;
+}
+[data-theme="ai"]{
+  color-scheme:dark;
+  --canvas:#0a0e1a;--surface:#0f1424;--surface-2:#141a2e;--surface-3:#1a2139;--sunken:#080b15;
+  --line:rgba(160,180,255,.08);--line-2:rgba(160,180,255,.13);--line-3:rgba(160,180,255,.22);
+  --ink:#e7eaf6;--ink-2:#b0b7d2;--ink-3:#8088a8;--ink-4:#565e7d;
+  --accent:#8fa8ff;--accent-ink:#0a0e1a;--accent-soft:rgba(143,168,255,.13);--accent-line:rgba(143,168,255,.4);
+  --info:#6fd3ff;--info-soft:rgba(111,211,255,.12);
+  --ok:#5ad6a0;--ok-soft:rgba(90,214,160,.12);
+  --warn:#f2c46d;--warn-soft:rgba(242,196,109,.13);
+  --bad:#ff7d93;--bad-soft:rgba(255,125,147,.13);
+  --idle:#8a91ad;--idle-soft:rgba(138,145,173,.14);
+  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.4);
+  --shadow-2:0 14px 44px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
+  --focus:0 0 0 2px var(--canvas),0 0 0 4px var(--accent-line);
+  --term-bg:#080b15;--term-fg:#e2e6f5;--term-cursor:#8fa8ff;--term-sel:#26305a;
 }
 `;

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

@@ -0,0 +1,289 @@
+/*
+ * VIEWS — styling for the concrete surfaces: sidebar index, overview, task
+ * page (header, tabs, sections, records) and the session dock.
+ */
+export const VIEW_STYLES = `
+/* ---------- Sidebar ---------- */
+.brand-mark{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:700;line-height:1}
+.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="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-field{position:relative;display:flex;align-items:center}
+.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)}
+.search-field input::-webkit-search-cancel-button{display:none}
+.search-field kbd{position:absolute;right:8px}
+.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}
+.attention-pill:hover{border-color:var(--tone)}
+.attention-pill[aria-pressed="true"]{background:var(--tone);color:var(--canvas)}
+.attention-clear{display:flex;align-items:center;gap:6px;color:var(--ink-4);font-size:var(--fs-xs)}
+.attention-clear .icon{color:var(--ok)}
+.tabs-row{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;border-bottom:1px solid var(--line)}
+.tabs-row::-webkit-scrollbar{display:none}
+.status-tab{position:relative;display:inline-flex;align-items:center;gap:5px;flex:none;height:32px;padding:0 8px;border:0;background:transparent;color:var(--ink-3);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
+.status-tab:hover{color:var(--ink)}
+.status-tab[aria-pressed="true"]{color:var(--ink)}
+.status-tab[aria-pressed="true"]::after{content:"";position:absolute;left:6px;right:6px;bottom:-3px;height:2px;border-radius:2px;background:var(--accent)}
+.status-tab-count{color:var(--ink-4);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
+.task-group{margin-top:10px}
+.task-group-head{display:flex;align-items:center;gap:6px;padding:4px 8px 6px;color:var(--ink-4);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
+.task-group-head .count{background:transparent;padding:0;min-width:0}
+.task-row{position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--r-md);background:transparent;text-align:left;transition:background var(--t-fast)}
+.task-row>.dot{margin-top:6px}
+.task-row:hover{background:var(--surface-3)}
+.task-row[aria-current="true"]{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2)}
+.task-row[aria-current="true"]::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
+.task-body{display:grid;gap:3px;flex:1;min-width:0}
+.task-line{display:flex;align-items:center;gap:8px;min-width:0}
+.task-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:var(--fs-md);font-weight:500}
+.task-time{flex:none;color:var(--ink-4);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
+.task-sub{gap:8px;height:18px;color:var(--ink-4);font-size:var(--fs-2xs)}
+.task-id{font-size:var(--fs-2xs);line-height:1;color:var(--ink-3)}
+.task-meta{display:inline-flex;align-items:center;gap:3px;line-height:1;white-space:nowrap}
+.task-meta .icon{width:11px;height:11px}
+.task-signals{display:inline-flex;gap:4px;margin-left:auto}
+.signal{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border-radius:var(--r-pill);background:var(--tone-soft);color:var(--tone);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
+.signal .icon{width:11px;height:11px;stroke-width:2}
+.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)}
+.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;border:1px dashed var(--line-3);border-radius:var(--r-sm);background:transparent;color:var(--ink-3);font-size:var(--fs-xs)}
+.pager-clear:hover{color:var(--accent);border-color:var(--accent-line)}
+.foot-btn{display:inline-flex;align-items:center;gap:7px;height:32px;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);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 .foot-btn:first-child{flex:1}
+.side-foot .icon-btn{margin-left:auto}
+
+/* ---------- 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-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}
+.section{margin-top:28px;min-width:0}
+.section-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}
+.section-title h2{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);font-weight:600}
+.section-actions{margin-left:auto}
+.sub-head{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--fs-sm);font-weight:600}
+
+/* ---------- Overview ---------- */
+.metric-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
+.metric-strip .metric{padding:14px 16px;border-radius:var(--r-lg)}
+.metric-strip .metric-value{font-size:var(--fs-2xl)}
+.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px;align-items:start}
+.overview>.card{margin-bottom:14px}
+.row-list{display:grid;gap:2px;margin:-4px -8px}
+.list-row{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-align:left;font-size:var(--fs-sm)}
+.list-row:hover:not(:disabled){background:var(--surface-3)}
+.list-row:disabled{opacity:.45;cursor:default}
+.list-row[aria-pressed="true"]{background:var(--accent-soft)}
+.list-row-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.list-row-count{font-weight:600;font-variant-numeric:tabular-nums}
+.list-row-go{display:inline-flex;align-items:center;gap:2px;color:var(--accent);font-size:var(--fs-xs);font-weight:500}
+.list-row-wrap{flex-wrap:wrap}
+.list-row-wrap .chip-row{flex-basis:100%}
+
+/* ---------- Task page ---------- */
+.task-header{position:sticky;top:0;z-index:10;margin:0 calc(-1 * clamp(16px,3vw,40px));padding:0 clamp(16px,3vw,40px);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-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)}
+.dock-toggle{height:30px}
+.task-hero{padding:14px 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{position:sticky;top:var(--header-h);z-index:9;margin:0 calc(-1 * clamp(16px,3vw,40px));padding:0 clamp(16px,3vw,40px);background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
+.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
+.tabs::-webkit-scrollbar{display:none}
+.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)}
+.tab[aria-selected="true"]{color:var(--ink)}
+.tab[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
+.tab .icon{color:var(--ink-4)}
+.tab[aria-selected="true"] .icon{color:var(--accent)}
+.tab:focus-visible{box-shadow:inset var(--focus)}
+.tab-panel{padding-top:20px;min-width:0}
+.tab-panel>.card{margin-bottom:14px}
+.tab-panel>.section:first-child{margin-top:4px}
+
+/* Now card */
+.now-card{border-color:var(--line-2);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
+.now-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.now-owner{color:var(--ink-2);font-size:var(--fs-sm);font-weight:500}
+.now-summary{margin-top:10px;font-size:var(--fs-lg);line-height:1.45;color:var(--ink)}
+.now-reason{margin-top:4px;color:var(--ink-3);font-size:var(--fs-sm)}
+.now-note{margin-top:8px;color:var(--ink-3);font-size:var(--fs-sm)}
+.signal-list{list-style:none;display:grid;gap:6px;margin:12px 0 0;padding:0}
+.signal-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--tone-soft);font-size:var(--fs-sm)}
+.signal-row>.icon{align-self:center;color:var(--tone)}
+.signal-kind{color:var(--tone);font-weight:600}
+.next-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px;color:var(--ink-3);font-size:var(--fs-xs)}
+.next-line:empty{display:none}
+.next-line .icon{color:var(--accent)}
+.next-line strong{color:var(--ink)}
+
+/* Needs you / input requests */
+.needs-card{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
+.needs-card .card-title .icon{color:var(--warn)}
+.input-card{display:grid;gap:10px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2)}
+.input-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink-3);font-size:var(--fs-xs)}
+.input-kicker{display:inline-flex;align-items:center;gap:5px;color:var(--warn);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-2xs)}
+.input-timeout{display:inline-flex;align-items:center;gap:4px}
+.input-head .when{margin-left:auto}
+.input-question{font-size:var(--fs-lg);font-weight:500;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
+.input-facts{color:var(--ink-3);font-size:var(--fs-xs);overflow-wrap:anywhere}
+.input-choices{display:flex;flex-wrap:wrap;gap:8px}
+.choice{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-weight:500;text-align:left}
+.choice:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
+.choice.is-recommended{border-color:var(--accent-line)}
+.choice:disabled{opacity:.5}
+.input-form{display:flex;gap:8px}
+.input-form input{flex:1}
+
+/* Decisions, sessions, planning */
+.decision{display:grid;gap:4px;padding-top:10px;border-top:1px solid var(--line)}
+.decision:first-child{padding-top:0;border-top:0}
+.decision-head{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
+.decision-head strong{flex:1;min-width:0;font-weight:600}
+.session-list{list-style:none;display:grid;gap:8px;margin:0;padding:0}
+.session-row{display:grid;gap:3px;padding:9px 11px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
+.session-row-head{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
+.session-row p{color:var(--ink-2)}
+.planning-card .kv{font-size:var(--fs-xs)}
+
+/* Work items */
+.work-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1);min-width:0}
+.work-head{display:flex;align-items:center;gap:10px;padding:13px 16px;list-style:none}
+summary.work-head{cursor:pointer}
+summary.work-head::-webkit-details-marker{display:none}
+.work-title{flex:1;min-width:0;font-weight:600;font-size:var(--fs-md);overflow-wrap:anywhere}
+.work-body{display:grid;gap:12px;padding:0 16px 16px 34px}
+.work-card.is-settled .work-title{color:var(--ink-2);font-weight:500}
+.meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--ink-3);font-size:var(--fs-xs)}
+.meta-strong{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-weight:500}
+.meta-label{color:var(--ink-4)}
+.candidates{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:var(--fs-xs)}
+.candidates li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
+.candidate-seq{font-family:var(--font-mono);color:var(--accent)}
+
+/* Records, runs, roles */
+.record,.run-card,.review-card{display:grid;gap:8px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
+.record.is-compact{padding:9px 12px;background:var(--surface-2)}
+.record-head,.run-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;font-size:var(--fs-sm)}
+.record-store{color:var(--ink-3);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
+.record-actions{display:flex;gap:8px}
+.run-card[data-status="failed"]{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
+.run-role{font-weight:600}
+.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
+.role-card{display:grid;gap:10px;align-content:start;min-width:0;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1)}
+.role-head{display:flex;align-items:center;gap:10px}
+.role-title{display:grid;flex:1;min-width:0;line-height:1.3}
+.role-title .faint{font-size:var(--fs-xs)}
+.avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:var(--surface-3);color:var(--ink-2);font-weight:650;font-size:var(--fs-sm)}
+.role-card .kv{font-size:var(--fs-xs)}
+.role-actions{display:flex;justify-content:flex-end;margin:-4px -6px -6px}
+
+/* History timeline */
+.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)}
+.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)}
+.timeline-body{display:grid;gap:6px;min-width:0;padding-top:3px}
+.timeline-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-sm)}
+.timeline-empty{list-style:none}
+.timeline .show-more{margin-left:40px}
+
+/* Evidence */
+.file-list{display:grid;gap:2px}
+.file-list:empty{display:none}
+.file-row{display:flex;align-items:center;gap:8px;min-height:32px;padding:5px 8px;border:0;border-radius:var(--r-sm);background:transparent;text-align:left;font-size:var(--fs-sm);color:var(--ink-2)}
+.file-row:hover{background:var(--surface-3);color:var(--ink)}
+.file-row[aria-current="true"]{background:var(--accent-soft);color:var(--ink)}
+.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-xs)}
+.file-viewer{display:grid;gap:8px}
+.file-viewer:empty{display:none}
+.viewer-head{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
+.viewer-ref code{white-space:normal;overflow-wrap:anywhere}
+.artifact-text{max-height:480px;color:var(--ink)}
+
+/* ---------- Dock ---------- */
+.dock-sub{flex:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:12px 16px 10px;border-bottom:1px solid var(--line)}
+.dock-sub-title{font-weight:600;font-size:var(--fs-sm)}
+.dock-sub-note{color:var(--ink-4);font-size:var(--fs-2xs)}
+.feed{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:16px;scrollbar-gutter:stable}
+.feed:focus-visible{box-shadow:inset var(--focus)}
+.feed>.empty{margin:auto 0}
+.feed-note{color:var(--ink-4);font-size:var(--fs-2xs);text-align:center}
+.feed-day{display:flex;align-items:center;gap:10px;color:var(--ink-4);font-size:var(--fs-2xs);font-weight:500}
+.feed-day::before,.feed-day::after{content:"";flex:1;height:1px;background:var(--line)}
+.msg{display:flex;gap:10px;max-width:100%;min-width:0}
+.msg-avatar{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-xs);font-weight:650}
+.msg-main{display:grid;gap:5px;min-width:0;flex:1}
+.msg-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-xs)}
+.msg-head strong{font-weight:600}
+.msg-head time{margin-left:auto;color:var(--ink-4);font-size:var(--fs-2xs)}
+.msg-bubble{padding:10px 12px;border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);background:var(--surface-2);border:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
+.msg.from-user{flex-direction:row-reverse}
+.msg.from-user .msg-head{flex-direction:row-reverse}
+.msg.from-user .msg-head time{margin-left:0;margin-right:auto}
+.msg.from-user .msg-avatar{background:var(--accent);color:var(--accent-ink)}
+.msg.from-user .msg-bubble{border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);background:var(--accent-soft);border-color:var(--accent-line)}
+.msg.from-system .msg-bubble{background:transparent;border-style:dashed}
+.composer-wrap{flex:none;padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--surface)}
+.composer{display:grid;gap:6px}
+.composer-box{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--sunken);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
+.composer-box:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
+.composer-input{display:block;min-height:64px;max-height:240px;padding:10px 12px 4px;border:0;background:transparent;resize:none}
+.composer-input:focus,.composer-input:hover{border:0;box-shadow:none;background:transparent}
+.composer-bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 8px}
+.composer-send{height:30px}
+.facets:empty{display:none}
+.facets{display:grid;gap:6px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface-2)}
+.next-step{display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-xs);color:var(--ink-2)}
+.next-step .icon{margin-top:2px;color:var(--accent)}
+
+/* Live session (always dark: it renders a native terminal) */
+.dock-session{color:#e6e6e8}
+.target-chip{display:inline-flex;align-items:center;gap:6px;flex:none;height:26px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);background:transparent;color:rgba(255,255,255,.72);font-size:var(--fs-xs);font-weight:500}
+.target-chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
+.target-chip[aria-pressed="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
+.target-chip .dot{width:7px;height:7px;box-shadow:none}
+.dock-session .faint{color:rgba(255,255,255,.4)}
+.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="writable"] i{background:#4fd18b;box-shadow:0 0 0 3px rgba(79,209,139,.2)}
+.conn[data-state="readonly"] i{background:#6cb6ff}
+.conn[data-state="error"] i{background:#ff6b7a}
+.conn[data-state="error"]{color:#ff9aa5}
+.terminal-empty{color:rgba(255,255,255,.55)}
+.terminal-empty .icon{color:rgba(255,255,255,.35)}
+.terminal-empty-title{color:#fff;font-weight:600}
+.terminal-empty-text{max-width:300px;font-size:var(--fs-xs);line-height:1.5}
+.session-foot{color:rgba(255,255,255,.45);font-size:var(--fs-2xs)}
+.session-foot code{color:rgba(255,255,255,.8);user-select:all}
+.terminal-host .xterm{height:100%}
+.terminal-host .xterm-viewport{background:transparent!important}
+`;

package/dist/web/webServer.js

@@ -219,7 +219,8 @@ async function handleHttpRequest(request, response, store, dependencies, token,
             else if (method === "GET" && action === "inspect") {
                 value = dependencies.surface.inspect(taskId, {
                     store: query.get("store") ?? "", refId: query.get("ref") ?? "",
-                    ...(query.has("digest") ? { digest: query.get("digest") } : {})
+                    ...(query.has("digest") ? { digest: query.get("digest") } : {}),
+                    ...(query.has("cursor") ? { cursor: query.get("cursor") } : {})
                 });
             }
             else if (method === "POST" && action === "messages") {

package/docs/release-workflow.md

@@ -27,6 +27,29 @@ system sits behind `ReleaseWorkflowPorts`
 external ports exercise recovery without real GitHub, npm, git, Controller,
 or model effects.
 
+## Yui's default release boundary
+
+For development of Yui itself, the repository's `AGENTS.md` owns the release policy:
+do not release a version by default. Development, tests, acceptance, PR creation
+and merge do not include changing version numbers, creating release tags or
+GitHub Releases, or publishing to npm. Each external effect still requires the
+Task's actual authorization. A workflow containing only PR, CI and merge steps
+is a valid delivery plan; its `ReleaseWorkflow` name does not authorize any
+package release, global CLI update or Controller replacement.
+
+When the user explicitly asks to release a new version without naming its
+level, select only minor or patch according to the actual changes and project
+version rules. A major release requires explicit user authorization for major
+or a specific major version. If breaking changes cannot honestly be represented
+by minor/patch, explain the compatibility conflict and wait for the necessary
+explicit user choice: neither silently publish major nor mislabel incompatible
+behavior as compatible. This does not require adding historical compatibility
+mechanisms. Package release versions are distinct from storage migration
+versions; the storage rules below do not authorize a package release.
+
+The operations and examples below describe how to execute already-authorized
+effects, not a default sequence to run after completing or merging a Task.
+
 ## Stable 1.0 baseline and release evidence
 
 Package 1.0.0 defines the storage **1.0** contract directly. The runtime and

package/docs/release-workflow.zh-CN.md

@@ -20,6 +20,22 @@ Agent 选择一个预先声明的计划，设施从持久状态驱动该计划
 （`src/release/releaseWorkflowPorts.ts`）之后。可用临时 SQLite 和确定性的外部端口测试
 恢复逻辑，无需真实 GitHub、npm、git、Controller 或模型效果。
 
+## Yui 的默认发版边界
+
+开发 Yui 本身时，发版规则以仓库中的 `AGENTS.md` 为准：默认不发布新版本。
+开发、测试、验收、创建 PR 和合并不包含修改版本号、创建发布 tag 或 GitHub Release、
+发布 npm；每项外部效果仍需 Task 的实际授权。仅包含 PR、CI 和合并步骤也是合法的交付
+计划，`ReleaseWorkflow` 这个名称不授予包发布、全局 CLI 更新或 Controller 替换权限。
+
+用户明确要求「发布新版本」但没有指定级别时，根据实际变更和项目版本规则，仅选择
+minor（中版本）或 patch（小版本）。major（大版本）必须得到用户对大版本或具体 major
+版本号的明确授权。如果破坏性变更无法诚实地用 minor/patch 表达，说明兼容性冲突，
+等待必要的明确用户选择：既不能静默发布 major，也不能把不兼容行为冒称为兼容。
+这不要求为了回避选择而新增历史兼容机制。包发布版本与存储迁移版本是不同契约，
+下文的存储规则不授予包发布权限。
+
+下文操作及示例说明如何执行已经获授权的效果，不是 Task 完成或合并后默认运行的步骤。
+
 ## 稳定的 1.0 基线与发布证据
 
 1.0.0 软件包直接定义存储 **1.0** 契约。运行包和当前源码不携带任何历史

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zq-silk/yui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Local control plane for long-running native agent CLI sessions backed by tmux.",
   "license": "MIT",
   "private": false,

package/skills/yui-runtime/SKILL.md

@@ -169,6 +169,32 @@ For unrelated discovery, stop once the necessary evidence is found. Task
 event deltas retain their fixed upper bound and are history, not replacement
 current state. No read acknowledges implementation or consumes a queue.
 
+## Discover operations for the current caller
+
+Use `yui help` or `yui --json help [command ...]` through the authorized CLI
+entry for the current caller's command view. Help, examples and shell completion
+share the catalog projection; public terminals and unmanaged Agents share one
+public view. This offline view is only guidance, not an authenticated permission
+or a way to switch Roles. An incomplete or stale managed identity must not be
+cleared to obtain public execution authority.
+
+When capability discovery appears in that view, use `capability search` for
+templates and `capability describe <name> --task
+<task-id> --input '<json>'` for supported exact authorization assessments.
+No `access` field means no exact authorization conclusion was made: supply the
+required parameters and follow the domain's existing execution checks. Hidden
+operations are omitted; `requestable` includes the exact missing Grant bounds
+and existing request route; `authorized` remains subject to execution-time
+revalidation. Provider outages do not change this authorization observation.
+
+Discovery never sends requests, consumes Grants, starts plugins or approves
+effects. If the Task actually needs a requestable operation, use the existing
+Assignment Message to Leader, Leader InputRequest, or Operator path. Preserve
+the exact action, resource/plugin, digest, environment and phase. A response is
+not a Grant. Existing source-authorized Leader Grant operations and Operator
+Grant authority remain unchanged; never expand an authorization source or
+solicit real-resource validation merely because an operation is requestable.
+
 ## Preserve intent and authority
 
 An analysis, diagnosis, or review request is read-only unless the user also