@zq-silk/yui 2.1.0 → 2.3.0

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

@@ -2,6 +2,10 @@
  * COMPONENTS — reusable controls and primitives: buttons, segmented
  * controls, badges, dots, chips, cards, disclosures, key/value lists, empty
  * states, metrics, dialogs and the toast. Colour comes only from tokens.
+ *
+ * Task and overview surfaces are one reading column of flat panels: a card
+ * head (icon tile, title, count, hint, actions) above a hairline, then the
+ * body. List cards divide their rows with hairlines instead of nesting boxes.
  */
 export const COMPONENT_STYLES = `
 /* Tones: one semantic colour per tone, used by dots, badges and signals */
@@ -57,24 +61,66 @@ code.id{padding:1px 6px;border-radius:var(--r-xs);background:var(--surface-3);co
 .mono-line{font-family:var(--font-mono);font-size:var(--fs-2xs);overflow-wrap:anywhere}
 
 /* Chip tabs (local filters) */
-.chip-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
+.chip-tabs{display:flex;flex-wrap:wrap;gap:6px}
 .chip-tab{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;color:var(--ink-3);font-size:var(--fs-xs);font-weight:500}
 .chip-tab:hover{color:var(--ink);border-color:var(--line-3)}
 .chip-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
 .chip-tab[aria-pressed="true"] .count{background:rgba(127,127,127,.25);color:inherit}
 
-/* Cards */
-.card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1)}
-.card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:14px 16px 0}
-.card-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:var(--fs-md);font-weight:600;color:var(--ink)}
-.card-title .icon{color:var(--ink-3)}
-.card-actions{grid-row:1;grid-column:2;display:flex;gap:6px;margin:-4px -6px -4px 0}
-.card-hint{grid-column:1/-1;color:var(--ink-3);font-size:var(--fs-xs);line-height:1.45}
-.card-body{display:grid;gap:12px;padding:14px 16px 16px;min-width:0}
-.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
-.card-grid-1{grid-template-columns:minmax(0,1fr)}
+/* Cards: flat panels. Actions sit beside the heading and wrap below it when
+   the column is too narrow for both. */
+.card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
+.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px}
+.card-heading{display:grid;gap:3px;flex:1 1 260px;min-width:0}
+.card-title{display:flex;align-items:center;gap:10px;min-width:0;font-size:var(--fs-md);font-weight:600;color:var(--ink)}
+.card-title>span:not(.card-icon):not(.count){min-width:0;overflow-wrap:anywhere}
+.card-icon{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-3)}
+.card-icon .icon{width:14px;height:14px}
+.card-hint{color:var(--ink-3);font-size:var(--fs-xs);line-height:1.45}
+.card-heading:has(.card-icon) .card-hint{padding-left:34px}
+.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
+.card-actions>.btn-ghost:last-child{margin-right:-8px}
+.card-body{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 16px 16px;min-width:0}
+.card-head+.card-body{border-top:1px solid var(--line)}
+.card-body:empty,.card-body:has(> :only-child:empty){display:none}
+.card-body>.btn-link{justify-self:start}
+.card-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
 .stack{display:grid;gap:10px;min-width:0}
 
+/* List cards: one row per record, divided by hairlines */
+.list-card{overflow:hidden}
+.list-card>.card-body{padding:0;gap:0}
+.row-stack{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
+.row-stack>:is(.work-card,.run-card,.review-card,.record,.role-card,.lazy-row){border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
+.row-stack>:is(.work-card,.run-card,.review-card,.record,.role-card,.lazy-row):first-child,
+.row-stack>.row-label+:is(.work-card,.run-card,.review-card,.record,.lazy-row){border-top:0}
+.row-stack>:is(.run-card,.review-card,.record){padding:12px 16px}
+.row-stack>.run-card[data-status="failed"]{box-shadow:inset 3px 0 0 var(--bad)}
+.row-stack>.empty{margin:14px 16px}
+.row-stack>.note{margin:12px 16px}
+.row-stack>.show-more{margin:6px 16px 14px}
+.row-stack>.row-stack{border-top:1px solid var(--line)}
+.row-stack>.row-label{padding:12px 16px 2px;color:var(--ink-4);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em}
+.row-stack>.row-label:only-child{padding-bottom:12px}
+.row-stack.boxed{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
+.row-stack.boxed>:is(.record){padding:10px 14px}
+.list-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
+.list-foot:empty{display:none}
+.row-stack>.list-foot{padding:8px 16px;border-top:1px solid var(--line)}
+.card-body>.list-foot{padding-top:4px;border-top:1px solid var(--line)}
+.list-foot>.faint{margin-right:auto}
+
+/* Lazy rows: a list summary that reads its exact record when opened */
+.lazy-row{min-width:0}
+.lazy-head{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 16px;list-style:none;cursor:pointer;font-size:var(--fs-sm)}
+.lazy-head::-webkit-details-marker{display:none}
+.lazy-head:hover .lazy-title{color:var(--ink)}
+.lazy-head:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-line)}
+.lazy-title{flex:1;min-width:0;color:var(--ink-2);font-weight:500;overflow-wrap:anywhere}
+.lazy-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;padding:0 16px 14px 40px}
+.lazy-content{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
+[data-reading="true"]>.record-actions,.record[data-reading="true"]{opacity:.7}
+
 /* Disclosure */
 .disclosure{min-width:0;border-top:1px solid var(--line)}
 .disclosure>summary{display:flex;align-items:center;gap:8px;padding:10px 0;list-style:none;cursor:pointer;color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;user-select:none}
@@ -83,15 +129,18 @@ code.id{padding:1px 6px;border-radius:var(--r-xs);background:var(--surface-3);co
 .disclosure-chevron{width:14px;height:14px;color:var(--ink-4);transition:transform var(--t-med) var(--ease)}
 details[open]>summary .disclosure-chevron{transform:rotate(90deg)}
 .disclosure-meta{margin-left:auto;color:var(--ink-4);font-size:var(--fs-xs);font-weight:400}
-.disclosure-body{display:grid;gap:10px;padding:0 0 12px 22px;min-width:0}
-.card-disclosure{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1)}
-.card-disclosure>summary{padding:14px 16px;color:var(--ink);font-weight:600;font-size:var(--fs-md)}
-.card-disclosure>.disclosure-body{padding:0 16px 16px}
+.disclosure-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:0 0 12px 22px;min-width:0}
+.card-disclosure{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
+.card-disclosure>summary{gap:10px;padding:12px 16px;border-radius:var(--r-lg);color:var(--ink);font-weight:600;font-size:var(--fs-md)}
+.card-disclosure>summary .disclosure-chevron{box-sizing:content-box;padding:5px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-3)}
+.card-disclosure[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0}
+.card-disclosure>.disclosure-body{padding:14px 16px 16px}
 
 /* Key/value */
 .kv{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);gap:7px 16px;margin:0;font-size:var(--fs-sm)}
 .kv dt{color:var(--ink-3)}
 .kv dd{margin:0;min-width:0;color:var(--ink);overflow-wrap:anywhere}
+.kv dd code.id{white-space:normal;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
 .kv-compact{gap:3px 12px;font-size:var(--fs-xs)}
 
 /* Prose */

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

@@ -2,7 +2,9 @@
  * LAYOUT — the three-region workspace.
  *   sidebar | center (task details) | divider | dock (session)
  * body.dock-open shows the dock; body.dock-center swaps the dock into the
- * middle so the order becomes sidebar | dock | divider | center.
+ * middle so the order becomes sidebar | dock | divider | center. The sidebar's
+ * own divider overlays its right edge, so it adds no grid column; --sidebar-w
+ * is the default width and a stored preference overrides it inline.
  */
 export const LAYOUT_STYLES = `
 .app{display:grid;height:100vh;height:100dvh;grid-template-rows:minmax(0,1fr);
@@ -12,16 +14,21 @@ body.dock-open .app{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--d
 body.dock-open.dock-center .app{grid-template-areas:"sidebar dock divider center";grid-template-columns:var(--sidebar-w) var(--dock-w) var(--divider-w) minmax(0,1fr)}
 
 /* Sidebar */
-.sidebar{grid-area:sidebar;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);border-right:1px solid var(--line)}
+.sidebar{grid-area:sidebar;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);border-right:1px solid var(--line);container:sidebar/inline-size}
+.sidebar-divider{grid-area:sidebar;justify-self:end;position:relative;z-index:20;width:9px;margin-right:-5px;cursor:col-resize;touch-action:none}
+.sidebar-divider span{position:absolute;top:0;bottom:0;left:3px;width:1px;background:transparent;transition:background var(--t-fast),box-shadow var(--t-fast)}
+.sidebar-divider:hover span,.sidebar-divider:focus-visible span,body.sidebar-resizing .sidebar-divider span{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
+.sidebar-divider:focus-visible{box-shadow:none}
+body.sidebar-resizing{cursor:col-resize;user-select:none}
 .side-head{flex:none;display:flex;align-items:center;gap:10px;height:var(--header-h);padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
 .brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
 .search-field{flex:none;margin:12px 12px 0}
 .attention-bar{flex:none;margin:10px 12px 0}
 .status-tabs{flex:none;margin:10px 0 0;padding:0 12px}
-.task-list{flex:1;min-height:0;overflow-y:auto;padding:6px 8px 12px;scrollbar-gutter:stable}
+.task-list{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 12px;scrollbar-gutter:stable}
 .pager{flex:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid var(--line)}
 .pager .pager-clear{grid-column:1/-1}
-.side-foot{flex:none;display:flex;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
+.side-foot{flex:none;display:flex;align-items:center;gap:4px;padding:10px;border-top:1px solid var(--line)}
 
 /* Center */
 .center{grid-area:center;min-width:0;min-height:0;overflow-y:auto;scrollbar-gutter:stable;background:var(--canvas)}

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

@@ -3,16 +3,22 @@
  *   ≤1200px  narrower sidebar and dock defaults
  *   ≤900px   master–detail: task list OR task page; the dock becomes a
  *            full-screen sheet over the task page
+ * Sidebar container queries adapt its footer to the width the user chose.
  */
 export const RESPONSIVE_STYLES = `
+@container sidebar (max-width:299px){
+  .foot-btn kbd{display:none}
+  .lazy-meta{display:none}
+  .lazy-body{padding-left:16px}
+}
+@container sidebar (max-width:259px){
+  .foot-btn{gap:0;padding:0 9px}
+  .foot-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+}
 @media(max-width:1200px){
   :root{--sidebar-w:264px}
-  .card-grid{grid-template-columns:minmax(0,1fr)}
   .metric-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
 }
-@media(max-width:1040px){
-  body.dock-open .overview-grid{grid-template-columns:minmax(0,1fr)}
-}
 @media(max-width:900px){
   .app,body.dock-open .app,body.dock-open.dock-center .app{grid-template-areas:"main";grid-template-columns:minmax(0,1fr)}
   .sidebar{grid-area:main;border-right:0}
@@ -21,10 +27,9 @@ export const RESPONSIVE_STYLES = `
   body.task-open .center{display:block}
   .back-btn{display:inline-grid}
   .crumbs .crumb,.crumbs .crumb-sep{display:none}
-  .dock-divider{display:none}
+  .dock-divider,.sidebar-divider{display:none}
   .dock{position:fixed;inset:0;z-index:60;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
   #dock-swap{display:none}
-  .overview-grid{grid-template-columns:minmax(0,1fr)}
   .dock-toggle span{display:none}
   .dock-toggle{width:32px;padding:0}
 }
@@ -36,8 +41,13 @@ export const RESPONSIVE_STYLES = `
   .tab{padding:0 12px}
   .field-row{grid-template-columns:minmax(0,1fr)}
   .work-body{padding-left:16px}
+  .card-heading:has(.card-icon) .card-hint{padding-left:0}
+  .role-card>:not(.role-head):not(.role-actions){margin-left:0}
+  .now-card>.card-body{padding:14px 14px 14px 17px}
   .kv{grid-template-columns:minmax(0,1fr)}
   .kv dt{margin-top:4px}
   .foot-btn kbd{display:none}
+  .lazy-meta{display:none}
+  .lazy-body{padding-left:16px}
 }
 `;

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

@@ -23,7 +23,7 @@ export const TOKEN_STYLES = `
   --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;
+  --center-max:880px;--header-h:56px;
   --t-fast:120ms;--t-med:220ms;--ease:cubic-bezier(.2,.8,.2,1);
 }
 :root,[data-theme="sumi"]{

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

@@ -1,6 +1,8 @@
 /*
  * VIEWS — styling for the concrete surfaces: sidebar index, overview, task
- * page (header, tabs, sections, records) and the session dock.
+ * page (header, tabs, panels, records) and the session dock. The overview
+ * and every task tab are a single reading column; nothing pairs cards side by
+ * side.
  */
 export const VIEW_STYLES = `
 /* ---------- Sidebar ---------- */
@@ -25,29 +27,32 @@ export const VIEW_STYLES = `
 .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{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;border-bottom:1px solid var(--line)}
+.tabs-row[data-fade="end"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
+.tabs-row[data-fade="start"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
+.tabs-row[data-fade="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
 .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{margin-top:8px}
+.task-group-head{display:flex;align-items:center;gap:6px;padding:4px 8px 4px;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{position:relative;display:flex;align-items:flex-start;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:var(--r-md);background:transparent;text-align:left;transition:background var(--t-fast)}
+.task-row>.dot{margin-top:5px}
 .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-row[aria-current="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
+.task-body{display:grid;gap:1px;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-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;line-height:1.35}
 .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-count{display:inline-flex;align-items:center;gap:3px;line-height:1;white-space:nowrap}
+.task-count .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}
@@ -59,12 +64,11 @@ export const VIEW_STYLES = `
 .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{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-xs);font-weight:500;min-width:0}
 .foot-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .foot-btn:hover{color:var(--ink);border-color:var(--line-3);background:var(--surface-3)}
 .foot-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
 .foot-btn kbd{margin-left:2px}
-.side-foot .foot-btn:first-child{flex:1}
 .side-foot .icon-btn{margin-left:auto}
 
 /* ---------- Page scaffolding ---------- */
@@ -73,18 +77,12 @@ export const VIEW_STYLES = `
 .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{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
 .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)}
@@ -122,29 +120,30 @@ export const VIEW_STYLES = `
 .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}
+.tab .count.tone-warn{background:var(--warn-soft);color:var(--warn)}
+.tab-panel{display:flex;flex-direction:column;gap:16px;padding-top:20px;min-width:0}
+.tab-panel [id^="detail-"]{scroll-margin-top:calc(var(--header-h) + 60px)}
 
-/* Now card */
-.now-card{border-color:var(--line-2);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
+/* Now banner: the execution status tone as a left stripe and a soft wash */
+.now-card{border-color:var(--line-2);background:linear-gradient(100deg,var(--tone-soft,transparent),transparent 62%),var(--surface);box-shadow:inset 3px 0 0 var(--tone,var(--line-3))}
+.now-card>.card-body{gap:0;padding:16px 18px 16px 20px}
 .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-summary{margin-top:10px;font-size:var(--fs-lg);font-weight:500;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{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);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)}
+.needs-card .card-icon{background:var(--warn-soft);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)}
@@ -160,22 +159,20 @@ export const VIEW_STYLES = `
 .input-form{display:flex;gap:8px}
 .input-form input{flex:1}
 
-/* Decisions, sessions, planning */
+/* Decisions, 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 items (rows of the Work list card) */
+.work-card{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}
+summary.work-head:hover .work-title{color:var(--ink)}
+summary.work-head:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-line)}
 .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}
@@ -187,21 +184,33 @@ summary.work-head::-webkit-details-marker{display:none}
 .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,.run-card,.review-card{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;overflow-wrap:anywhere;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))}
+.record-lead{font-weight:500;overflow-wrap:anywhere}
+.delivery-stack>.sub-head:not(:first-child){margin-top:10px}
+.delivery-project .record-head strong{overflow-wrap:anywhere}
+.check-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--fs-xs)}
+.check-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 8px;min-width:0}
+.check-details{grid-column:2/-1;white-space:pre-wrap;overflow-wrap:anywhere}
 .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-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-content:start;min-width:0;padding:14px 16px}
+.role-card>*{grid-column:1/-1;min-width:0}
+.role-card>.role-head{grid-column:1;grid-row:1}
+.role-card>.role-actions{grid-column:2;grid-row:1;align-self:center}
+.role-card>:not(.role-head):not(.role-actions){margin-left:42px}
 .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}
+.role-actions{display:flex;justify-content:flex-end;margin-right:-8px}
+.role-session{display:grid;gap:3px;min-width:0;font-size:var(--fs-sm)}
+.role-session-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
+.role-session>p{color:var(--ink-2)}
+.card-actions>[data-slot="session-counts"]:empty{display:none}
 
 /* History timeline */
 .timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
@@ -210,13 +219,23 @@ summary.work-head::-webkit-details-marker{display:none}
 .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}
+.kind-run .timeline-mark{color:var(--info);border-color:var(--info-soft);background:var(--info-soft)}
+.kind-question .timeline-mark{color:var(--warn);border-color:var(--warn-soft);background:var(--warn-soft)}
+.timeline-body{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;padding-top:3px;overflow-wrap:anywhere}
 .timeline-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-sm)}
+.timeline-item>.record{align-self:start;padding:4px 0 0;border:0;background:transparent}
+.timeline .lazy-head{align-items:flex-start;padding:2px 0 0;gap:8px}
+.timeline .lazy-head .disclosure-chevron{order:2;margin-top:4px}
+.timeline .lazy-body{padding:10px 0 2px}
+.timeline-summary{flex:1;display:grid;gap:4px;min-width:0}
+.timeline-title,.timeline-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
+.timeline-preview{margin:0}
+.lazy-row[open] .timeline-preview{display:none}
 .timeline-empty{list-style:none}
 .timeline .show-more{margin-left:40px}
 
 /* Evidence */
-.file-list{display:grid;gap:2px}
+.file-list{display:grid;grid-template-columns:minmax(0,1fr);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)}
@@ -236,6 +255,7 @@ summary.work-head::-webkit-details-marker{display:none}
 .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-older{align-self: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}

package/dist/web/webServer.js

@@ -194,7 +194,7 @@ async function handleHttpRequest(request, response, store, dependencies, token,
         }
         return;
     }
-    const surfaceTarget = /^\/api\/tasks\/([^/]+)\/(context|delta|inspect|metadata|messages|control)$/.exec(pathname);
+    const surfaceTarget = /^\/api\/tasks\/([^/]+)\/(context|delta|inspect|list|metadata|messages|control)$/.exec(pathname);
     if (surfaceTarget && dependencies.surface) {
         try {
             let taskId;
@@ -223,6 +223,17 @@ async function handleHttpRequest(request, response, store, dependencies, token,
                     ...(query.has("cursor") ? { cursor: query.get("cursor") } : {})
                 });
             }
+            else if (method === "GET" && action === "list") {
+                const limit = query.get("limit");
+                if (limit !== null && !/^\d{1,3}$/u.test(limit))
+                    throw new WebRequestRejected("Invalid list limit.");
+                value = dependencies.surface.list(taskId, {
+                    store: query.get("store") ?? "",
+                    ...(query.has("status") ? { status: query.get("status") } : {}),
+                    ...(query.has("cursor") ? { cursor: query.get("cursor") } : {}),
+                    ...(limit === null ? {} : { limit: Number(limit) })
+                });
+            }
             else if (method === "POST" && action === "messages") {
                 const body = await readMutationBody(request);
                 if (typeof body !== "object" || body === null || Array.isArray(body)

package/dist/web/webTaskSurface.js

@@ -3,7 +3,7 @@ import { openTaskArtifactRepository } from "../artifacts/taskArtifactRepository.
 import { applyGlobalInputControl } from "../commands/globalRoleCommands.js";
 import { applyTaskInputControl, sendTaskMessageCommand, updateTaskMetadataCommand } from "../commands/taskCommands.js";
 import { runTaskInputCommand } from "../commands/taskInputCommands.js";
-import { inspectTaskContext, readTaskContext, readTaskContextDelta, withContextObservations } from "../context/taskContext.js";
+import { inspectTaskContext, listTaskContext, readTaskContext, readTaskContextDelta, withContextObservations } from "../context/taskContext.js";
 import { BUILTIN_CAPABILITIES } from "../kernel/builtinCapabilities.js";
 import { capabilitySchemaError } from "../kernel/capabilitySchema.js";
 import { recordGlobalInterruptResult, recordGlobalSteerResult } from "../message/globalInterrupt.js";
@@ -248,6 +248,13 @@ export function createWebTaskSurface(store, options = {}, observations = [], hos
         read: async (taskId) => withContextObservations(readTaskContext(store, taskId, environment), observations),
         delta: (taskId, input) => readTaskContextDelta(store, taskId, input, environment),
         inspect: (taskId, input) => inspectTaskContext(store, taskId, input, environment),
+        // The same paged family discovery as `task context list`: summaries and
+        // exact references, never bodies; continuations keep their filters.
+        list: (taskId, input) => listTaskContext(store, taskId, input.store, {
+            ...(input.status === undefined ? {} : { status: input.status }),
+            ...(input.cursor === undefined ? {} : { cursor: input.cursor }),
+            ...(input.limit === undefined ? {} : { limit: input.limit })
+        }, environment),
         update: (taskId, input) => {
             const descriptor = BUILTIN_CAPABILITIES.find((entry) => entry.name === "task.update");
             const error = capabilitySchemaError(descriptor.inputSchema, { taskId, patch: input });

package/docs/agent-result-consumption.md

@@ -65,6 +65,22 @@ silently rerun successful Producers.
 
 ## Review
 
+Capturing a Run-backed WorkItem Candidate freezes its exact source report and
+Candidate identity in the existing immutable Context Snapshot store. Review
+receives a `source-run` pointer with `evidenceOf=<work-item>/<candidate>` and
+expands the original report through `task run context expand`, including all
+content pages. Source, Candidate or report drift refuses a new dispatch; already
+frozen Run Context remains readable. Task-final producer evidence requires an
+exact Candidate head or a committed Integration at the fixed head and Task-main
+target. Earlier attempts sharing a target are not ancestry proof. A later direct
+Task-main repair remains reviewable without a matching producer report: the
+ReviewRound pointer identifies the evidence gap. Attached reports describe their
+named Candidate, not validation of the entire Task head; a Reviewer assesses
+the fixed code and reports missing validation rather than borrowing old success.
+Historical Candidates without this frozen proof remain inspectable, but need
+newly captured delivery evidence before a new Candidate Review; old Snapshots
+are never backfilled.
+
 ReviewRound owns frozen Candidate or Task-head identity, workspace provenance,
 execution topology, exact main Reviewer Run, lifecycle and Core diagnostics.
 Its completed state is structural execution evidence, not a “pass” extracted

package/docs/agent-result-consumption.zh-CN.md

@@ -52,6 +52,19 @@ Review 结果。Producer 从不直接进入 Integration 或验收。重试针对
 
 ## Review
 
+捕获 Run 来源的 WorkItem Candidate 时，会在现有不可变 Context Snapshot 存储中
+冻结其精确原始报告与 Candidate 身份。Review 获得带
+`evidenceOf=<work-item>/<candidate>` 的 `source-run` 指针，通过
+`task run context expand` 读取原文与所有内容分页。来源、Candidate 或报告漂移会
+拒绝新的派发，但已经冻结的 Run Context 仍可读取。Task-final 来源证据需要精确
+匹配 Candidate 提交，或匹配固定 head 与 Task-main 目标的已提交 Integration。
+仅共享目标的历史 attempts 不是血缘证明。Task-main 后续直接修复没有匹配报告时，
+仍可审查，ReviewRound 指针明确提示证据缺口。附带报告只描述其命名的 Candidate，
+不是整个 Task head 已通过验证的证明；Reviewer 应审查固定代码、报告验证缺口，
+不能借用旧成功结论。
+缺少冻结证据的历史 Candidate 仍可诊断；新的 Candidate Review 需要新捕获的交付
+证据，不回填旧 Snapshot。
+
 ReviewRound 拥有冻结的 Candidate 或 Task-head 身份、工作区来源、执行拓扑、精确
 的 main Reviewer Run、生命周期和 Core 诊断。它的 completed 状态是结构性执行证据，
 而不是从报告里提取出来的“通过”。