@zq-silk/yui 2.2.0 → 2.4.0

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

@@ -0,0 +1,29 @@
+/*
+ * DELIVERY VIEW — the Delivery tab's results: delivery projects and their
+ * check lists, plus evidence files and the artifact viewer.
+ */
+export const DELIVERY_STYLES = `
+/* Delivery results */
+.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}
+
+/* Evidence files */
+.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)}
+.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;grid-template-columns:minmax(0,1fr);min-width:0;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)}
+.record-actions{flex-wrap:wrap}
+.record-actions input{min-width:0;max-width:100%;flex:1 1 180px}
+.composer-wrap .row-stack{overflow-wrap:anywhere;max-height:180px;overflow:auto}
+.composer-wrap input[type=file]{max-width:100%}
+`;

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

@@ -0,0 +1,71 @@
+/*
+ * DOCK VIEW — the Discussion pane: its sub-header, the message feed with day
+ * separators and bubbles, the composer, submission facets and next steps.
+ * The Live session pane is views/terminal; the dock frame is layout/workspace.
+ */
+export const DOCK_STYLES = `
+.dock-head{height:auto;min-height:var(--header-h);padding-top:6px;padding-bottom:6px}
+.dock-head .seg{min-width:0;flex-wrap:wrap}
+.dock-actions{flex-shrink:0}
+.dock-preview{display:flex;flex-direction:column;min-height:0;overflow:auto}
+.dock-preview>.feed-note{text-align:left;padding:0 12px;color:var(--ink-3)}
+.preview-services{flex:none;max-height:40%;overflow:auto}
+.preview-service{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
+.preview-service small{flex-basis:100%;overflow-wrap:anywhere;color:var(--ink-3)}
+.preview-frame{flex:1 0 240px;width:100%;min-height:240px;border:0;background:white}
+/* Feed */
+.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-older{align-self:center}
+#dock-conversation .dock-sub select{min-width:0;max-width:100%;flex:1 1 180px}
+#dock-conversation .feed-note{overflow-wrap:anywhere;margin:4px 12px}
+#dock-conversation .composer-bar{flex-wrap:wrap}
+#dock-conversation .composer-input{width:100%;box-sizing:border-box}
+#dock-conversation .composer-wrap{max-height:60%;overflow-y:auto}
+#dock-conversation .composer-wrap select{min-width:0;max-width:100%;flex:1 1 140px}
+#dock-conversation .composer-wrap pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto}
+.conversation-slash{display:flex;flex-wrap:wrap;gap:4px}
+.conversation-slash:empty{display:none}
+#dock-conversation .feed details{min-width:0;overflow-wrap:anywhere}
+.conversation-requests{flex:0 1 auto;max-height:35%;overflow-y:auto;overflow-wrap:anywhere}
+.conversation-requests h3{font-size:var(--fs-sm);margin:8px 12px}
+.conversation-requests label{display:grid;gap:4px;margin:8px 0}
+.conversation-requests input{min-width:0;width:100%;box-sizing:border-box}
+.conversation-requests .input-card{margin:8px 12px}
+.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)}
+
+/* Messages: Agent and system on the left, the user mirrored on the right */
+.msg{display:flex;gap:10px;max-width:100%;min-width:0}
+.msg-avatar{width:28px;height:28px;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, submission facets and next steps */
+.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)}
+`;

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

@@ -0,0 +1,32 @@
+/*
+ * PAGE VIEW — the centred reading column shared by the overview and the task
+ * page, its heading scaffolding, and the overview's metric strip and rows.
+ * The overview and every task tab are a single column; nothing pairs cards
+ * side by side.
+ */
+export const PAGE_STYLES = `
+.page{max-width:var(--center-max);margin:0 auto;padding:0 var(--gutter) 64px}
+
+/* Page scaffolding */
+.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:36px 0 24px}
+.kicker{color:var(--accent);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
+.page-title{margin-top:6px;font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.025em}
+.page-sub{margin-top:4px;color:var(--ink-3)}
+.page-foot{margin-top:20px;color:var(--ink-4);font-size:var(--fs-xs);text-align:center}
+.sub-head{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--fs-sm);font-weight:600}
+
+/* Overview */
+.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)}
+.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%}
+`;

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

@@ -0,0 +1,70 @@
+/*
+ * RECORDS VIEW — rows rendered inside list cards across the task tabs: work
+ * items, records, runs, reviews, role cards and the history timeline.
+ */
+export const RECORD_STYLES = `
+/* 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}
+.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, reviews */
+.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}
+.record-lead{font-weight:500;overflow-wrap:anywhere}
+.run-role{font-weight:600}
+
+/* Role cards: avatar head and actions on one line, details indented below */
+.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{width:32px;height:32px;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-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}
+.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)}
+.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}
+`;

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

@@ -0,0 +1,26 @@
+export const SETTINGS_STYLES = `
+.settings-body{display:block;overflow:auto;height:auto;min-height:100dvh}
+.settings-page{max-width:1040px;margin:auto;padding:32px 24px 80px;display:grid;gap:22px}
+.settings-page p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6;overflow-wrap:anywhere}
+.settings-header{display:flex;gap:20px;align-items:center}
+.settings-card{padding:22px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);min-width:0}
+.settings-card>summary{font-size:var(--fs-md);font-weight:600;cursor:pointer}
+.settings-card h2{font-size:var(--fs-md);margin-bottom:16px}
+.settings-card[open]>summary{margin-bottom:16px}
+.settings-stack{display:grid;gap:16px;min-width:0}
+.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
+.settings-field{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:8px;min-width:0}
+.settings-field small{color:var(--ink-3);overflow-wrap:anywhere}
+.settings-field small:empty,.settings-field .settings-actions:empty{display:none}
+.settings-field textarea{width:100%;min-height:88px;resize:vertical}
+.settings-field input,.settings-field select{width:100%;min-width:0}
+.settings-field .settings-reset{display:flex;gap:8px;align-items:center;font-size:var(--fs-xs)}
+.settings-reset input{width:auto}
+.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
+.settings-receipt{white-space:pre-wrap;overflow-wrap:anywhere}
+.settings-error{color:var(--bad)!important}
+.settings-observation{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-xs)}
+.settings-search{position:sticky;top:0;background:var(--canvas);padding:12px 0;z-index:1}
+.settings-page input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--accent)}
+@media(max-width:640px){.settings-page{padding:18px 12px 48px}.settings-grid{grid-template-columns:1fr}.settings-card{padding:16px}}
+`;

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

@@ -0,0 +1,74 @@
+/*
+ * SIDEBAR VIEW — the task index: brand and sync state, search, attention
+ * pills, status filter tabs, grouped task rows, the catalog pager and the
+ * footer buttons. Region sizing lives in layout/workspace.
+ */
+export const SIDEBAR_STYLES = `
+/* Brand and sync state */
+.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:700;line-height:1}
+.brand-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 and attention filters */
+.search-field{position:relative;display:flex;align-items:center;flex:none;margin:12px 12px 0}
+.search-field>.icon{position:absolute;left:10px;color:var(--ink-4);pointer-events:none}
+.search-field input{height:34px;padding:0 34px 0 32px;border-radius:var(--r-md);background:var(--surface-2)}
+.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)}
+
+/* Status filter tabs (the strip itself is a ui/controls .tabs-row) */
+.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{left:6px;right:6px;bottom:-3px}
+.status-tab-count{color:var(--ink-4);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
+
+/* Task groups and rows */
+.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: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: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;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-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}
+.list-empty{display:grid;justify-items:center;gap:8px;padding:36px 16px;color:var(--ink-4);font-size:var(--fs-sm);text-align:center}
+.list-empty.is-error{color:var(--bad)}
+
+/* Catalog pager and footer */
+.pager-btn{height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-xs)}
+.pager-btn:hover:not(:disabled){border-color:var(--line-3);color:var(--ink)}
+.pager-btn:disabled{opacity:.4}
+.pager-count{grid-column:2;text-align:center;color:var(--ink-4);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
+.pager-clear{height:28px}
+.foot-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-xs);font-weight:500;min-width:0}
+.foot-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.foot-btn:hover{color:var(--ink);border-color:var(--line-3);background:var(--surface-3)}
+.foot-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
+.foot-btn kbd{margin-left:2px}
+.side-foot .icon-btn{margin-left:auto}
+`;

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

@@ -0,0 +1,80 @@
+/*
+ * TASK VIEW — the task page frame and its Overview tab: the sticky header and
+ * section tabs, the hero, the "now" banner, input requests that need the
+ * user, decisions and planning. Rows inside the other tabs live in
+ * views/records and views/delivery.
+ */
+export const TASK_STYLES = `
+/* Sticky header and tab strip: both bleed through the page gutter and frost
+   the content scrolling beneath them. */
+.task-header,.tabs-wrap{position:sticky;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
+.task-header{top:0;z-index:10}
+.task-bar{display:flex;align-items:center;gap:6px;height:var(--header-h)}
+.back-btn{display:none}
+.crumbs{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-sm)}
+.crumb{padding:3px 6px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--ink-3)}
+.crumb:hover{color:var(--ink);background:var(--surface-3)}
+.crumb-sep{color:var(--ink-4)}
+.crumb-current{color:var(--ink-2);font-size:var(--fs-xs)}
+.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{top:var(--header-h);z-index:9;border-bottom:1px solid var(--line)}
+.tabs{gap:4px}
+.tab{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;height:42px;padding:0 10px;border:0;background:transparent;color:var(--ink-3);font-size:var(--fs-sm);font-weight:500}
+.tab:hover{color:var(--ink)}
+.tab[aria-selected="true"]{color:var(--ink)}
+.tab[aria-selected="true"]::after{left:8px;right:8px;bottom:-1px}
+.tab .icon{color:var(--ink-4)}
+.tab[aria-selected="true"] .icon{color:var(--accent)}
+.tab:focus-visible{box-shadow:inset var(--focus)}
+.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 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);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;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-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)}
+.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, 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}
+.planning-card .kv{font-size:var(--fs-xs)}
+`;

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

@@ -0,0 +1,38 @@
+import { DEFAULT_DARK_THEME } from "../../shared/themes.js";
+const SESSION_TONES = DEFAULT_DARK_THEME.tokens;
+/*
+ * TERMINAL VIEW — the Live session pane. It renders a native terminal, so it
+ * stays dark in every theme: its chrome uses a scoped palette (white alphas
+ * and the default dark theme's status colours) instead of theme tokens.
+ */
+export const TERMINAL_STYLES = `
+.dock-session{background:var(--term-bg);color:#e6e6e8;--chrome-line:rgba(255,255,255,.07);--chrome-ok:${SESSION_TONES.ok};--chrome-info:${SESSION_TONES.info};--chrome-bad:${SESSION_TONES.bad}}
+.dock-session .faint{color:rgba(255,255,255,.4)}
+
+/* Target bar: one chip per attachable Role, then the connection state */
+.session-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border-bottom:1px solid var(--chrome-line)}
+.session-targets{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
+.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}
+.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:var(--chrome-ok);box-shadow:0 0 0 3px rgba(79,209,139,.2)}
+.conn[data-state="readonly"] i{background:var(--chrome-info)}
+.conn[data-state="error"] i{background:var(--chrome-bad)}
+.conn[data-state="error"]{color:#ff9aa5}
+
+/* Terminal host, its empty state and the CLI footer */
+.terminal-host{flex:1;min-height:0;padding:10px 4px 6px 12px;overflow:hidden}
+.terminal-host:empty{display:none}
+.terminal-host .xterm{height:100%}
+.terminal-host .xterm-viewport{background:transparent!important}
+.terminal-empty{flex:1;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;text-align:center;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{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--chrome-line);color:rgba(255,255,255,.45);font-size:var(--fs-2xs)}
+.session-foot code{color:rgba(255,255,255,.8);user-select:all}
+`;

package/dist/web/taskPreviews.js

@@ -0,0 +1,205 @@
+import { createHmac, randomBytes, timingSafeEqual } from "node:crypto";
+import { request as httpRequest } from "node:http";
+import { resolve } from "node:path";
+import { assertHttpPreviewSocket, isHttpPreview, validateHttpPreview } from "../job/httpPreview.js";
+import { requestDurableJobCancel } from "../job/durableJob.js";
+import { webLocalMutation, WebRequestRejected } from "./webMutation.js";
+const MAX_BYTES = 8 * 1024 * 1024;
+const TIMEOUT_MS = 2000;
+/** Only the authenticated Web composition root constructs this surface.
+ * No URL/host/port/cwd is accepted from the browser. Tickets authorize one
+ * live Job's GET/HEAD responses only and expire with this Web listener. */
+export function createTaskPreviews(store, home) {
+    const secret = randomBytes(32);
+    const key = (taskId, jobId) => createHmac("sha256", secret).update(JSON.stringify([taskId, jobId])).digest("base64url");
+    const prefix = (job) => `/preview/${encodeURIComponent(job.taskId)}/${encodeURIComponent(job.id)}/${key(job.taskId, job.id)}/`;
+    const registered = (taskId, jobId) => {
+        const job = store.getDurableJob(taskId, jobId);
+        if (!store.getTask(taskId) || !job || job.taskId !== taskId || !isHttpPreview(job.env)) {
+            throw new WebRequestRejected("Registered Task preview not found.");
+        }
+        validateHttpPreview(job.env, job.steps);
+        return job;
+    };
+    const socket = (job) => {
+        // Derive from exact owned IDs, not a caller path or the displayed locator.
+        if (![job.taskId, job.id].every(id => /^[A-Za-z0-9][A-Za-z0-9_-]*$/.test(id))) {
+            throw new Error("Invalid preview owner.");
+        }
+        const dir = resolve(home, "artifacts", "jobs", job.taskId, job.id);
+        return assertHttpPreviewSocket(dir);
+    };
+    const state = (job) => {
+        if (job.status === "unknown-needs-attention")
+            return "unknown";
+        if (["cancelled", "succeeded"].includes(job.status))
+            return "stopped";
+        if (["failed", "timed-out"].includes(job.status))
+            return "failed";
+        if (job.cancelRequestedAt)
+            return "stopping";
+        const task = store.getTask(job.taskId);
+        if (task?.status !== "active" || task.executionGate.state !== "enabled")
+            return "unavailable";
+        return job.status === "queued" ? "starting" : "running";
+    };
+    const read = async (job, path, method) => {
+        if (state(registered(job.taskId, job.id)) !== "running")
+            throw new Error("Service is no longer available.");
+        const result = await readSocket(socket(job), path, method, prefix(job));
+        if (state(registered(job.taskId, job.id)) !== "running")
+            throw new Error("Service stopped during the request.");
+        return result;
+    };
+    return {
+        async list(taskId) {
+            if (!store.getTask(taskId))
+                throw new WebRequestRejected("Task not found.");
+            const jobs = store.listDurableJobs(taskId).filter(job => isHttpPreview(job.env)).reverse();
+            const services = await Promise.all(jobs.slice(0, 16).map(async (job) => {
+                let current = state(job);
+                let detail = job.result?.unknownReason ?? `Job: ${job.status}`;
+                let status;
+                if (current === "running") {
+                    try {
+                        validateHttpPreview(job.env, job.steps);
+                        const result = await read(job, "/", "GET");
+                        status = result.status;
+                        current = status >= 200 && status < 400 ? "ready" : "failed";
+                        detail = `HTTP ${status} from the registered service.`;
+                    }
+                    catch (error) {
+                        const code = error.code;
+                        const age = Date.now() - Date.parse(job.startedAt ?? job.createdAt);
+                        current = (code === "ENOENT" || code === "ECONNREFUSED") && age < 30_000 ? "starting" : "failed";
+                        detail = error instanceof Error ? error.message : "Service unavailable.";
+                    }
+                }
+                const fresh = state(registered(taskId, job.id));
+                if (!["running", "starting"].includes(fresh))
+                    current = fresh;
+                return {
+                    id: job.id, name: job.steps[0]?.name ?? job.id, owner: job.owner,
+                    state: current, detail, httpStatus: status, readAt: new Date().toISOString(),
+                    ...(current === "ready" ? { url: prefix(job) } : {}),
+                    canStop: job.status === "queued" || job.status === "running",
+                    receipt: job.result ? { outcome: job.result.outcome, terminalAt: job.terminalAt,
+                        evidenceSource: job.result.evidenceSource, artifactsLocator: job.artifactsLocator } : null
+                };
+            }));
+            return { services, total: jobs.length, complete: jobs.length <= 16 };
+        },
+        stop(taskId, jobId) {
+            // HTTP authenticates the local human before entering this transaction.
+            // Reuse the same domain cancellation as CLI; never signal a browser PID.
+            return webLocalMutation(store, tx => {
+                const job = registered(taskId, jobId);
+                const next = requestDurableJobCancel(job, new Date());
+                if (next !== job)
+                    tx.saveDurableJob(taskId, next);
+                return { jobId, status: next.status, cancelRequestedAt: next.cancelRequestedAt,
+                    stopped: ["cancelled", "succeeded", "failed", "timed-out"].includes(next.status) };
+            });
+        },
+        async serve(request, response) {
+            const url = new URL(request.url ?? "/", "http://localhost");
+            const match = /^\/preview\/([A-Za-z0-9_-]+)\/([A-Za-z0-9_-]+)\/([A-Za-z0-9_-]+)\/(.*)$/.exec(url.pathname);
+            const fail = (status, detail) => {
+                response.statusCode = status;
+                response.setHeader("content-type", "text/plain; charset=utf-8");
+                response.end(detail);
+            };
+            if (!match) {
+                fail(403, "Invalid preview ticket.");
+                return;
+            }
+            const [, taskId, jobId, ticket, path] = match;
+            const expected = key(taskId, jobId);
+            if (ticket.length !== expected.length || !timingSafeEqual(Buffer.from(ticket), Buffer.from(expected))) {
+                fail(403, "Invalid preview ticket.");
+                return;
+            }
+            if (request.method !== "GET" && request.method !== "HEAD") {
+                fail(405, "Preview supports GET and HEAD only.");
+                return;
+            }
+            let job;
+            try {
+                job = registered(taskId, jobId);
+                if (state(job) !== "running")
+                    throw new Error("Service is not running; refresh Task preview status.");
+            }
+            catch (error) {
+                fail(409, error.message);
+                return;
+            }
+            try {
+                const result = await read(job, "/" + path + url.search, request.method);
+                const base = prefix(job);
+                // No upstream CSP, cookies, auth, redirects, or CORS escape this boundary.
+                const source = `http://${request.headers.host}${base}`;
+                response.setHeader("content-security-policy", [
+                    "sandbox allow-scripts", "default-src 'none'",
+                    `script-src 'unsafe-inline' ${source}`, `style-src 'unsafe-inline' ${source}`,
+                    `img-src data: ${source}`, `font-src ${source}`, `connect-src ${source}`,
+                    `base-uri ${source}`, "form-action 'none'", "frame-ancestors 'self'"
+                ].join("; "));
+                response.removeHeader("x-frame-options");
+                response.setHeader("access-control-allow-origin", "null");
+                response.setHeader("cross-origin-resource-policy", "cross-origin");
+                response.setHeader("content-type", result.contentType);
+                if (result.location) {
+                    // Only relative redirects are supported. A redirect can never select
+                    // another upstream, even if it names localhost or this control plane.
+                    if (/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(result.location)) {
+                        fail(502, "External/absolute redirects are not supported in preview.");
+                        return;
+                    }
+                    const target = new URL(result.location, "http://preview.invalid/" + path + url.search);
+                    response.setHeader("location", base + target.pathname.slice(1) + target.search + target.hash);
+                }
+                response.statusCode = result.status;
+                response.end(request.method === "HEAD" ? undefined : result.body);
+            }
+            catch (error) {
+                fail(502, `Preview unavailable: ${error.message}`);
+            }
+        }
+    };
+}
+function readSocket(socketPath, path, method, prefix) {
+    return new Promise((resolve, reject) => {
+        const request = httpRequest({
+            socketPath, path, method, agent: false,
+            headers: { host: "preview.local", "accept-encoding": "identity", "x-forwarded-prefix": prefix }
+        });
+        // Absolute deadline also bounds a slowly streaming response.
+        const timer = setTimeout(() => request.destroy(new Error("Service did not respond within 2 seconds.")), TIMEOUT_MS);
+        request.once("error", reject);
+        request.once("close", () => clearTimeout(timer));
+        request.once("response", response => {
+            response.once("error", reject);
+            if (response.headers["content-encoding"] && response.headers["content-encoding"] !== "identity") {
+                response.resume();
+                request.destroy(new Error("Service must honor Accept-Encoding: identity for preview."));
+                return;
+            }
+            const chunks = [];
+            let size = 0;
+            response.on("data", chunk => {
+                size += chunk.length;
+                if (size > MAX_BYTES)
+                    request.destroy(new Error("Preview response exceeds 8 MiB."));
+                else
+                    chunks.push(chunk);
+            });
+            response.once("end", () => resolve({
+                status: response.statusCode ?? 502,
+                contentType: response.headers["content-type"] ?? "application/octet-stream",
+                ...(response.headers.location ? { location: response.headers.location } : {}),
+                body: Buffer.concat(chunks)
+            }));
+        });
+        request.end();
+    });
+}