@zq-silk/yui 2.0.0 → 2.2.0

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

@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+export const COMPONENT_STYLES = `
+/* Tones: one semantic colour per tone, used by dots, badges and signals */
+.tone-info{--tone:var(--info);--tone-soft:var(--info-soft)}
+.tone-ok{--tone:var(--ok);--tone-soft:var(--ok-soft)}
+.tone-warn{--tone:var(--warn);--tone-soft:var(--warn-soft)}
+.tone-bad{--tone:var(--bad);--tone-soft:var(--bad-soft)}
+.tone-idle{--tone:var(--idle);--tone-soft:var(--idle-soft)}
+.tone-accent{--tone:var(--accent);--tone-soft:var(--accent-soft)}
+
+/* Buttons */
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
+.btn:hover:not(:disabled){border-color:var(--line-3);background:var(--surface-3)}
+.btn:active:not(:disabled){transform:translateY(1px)}
+.btn:disabled{opacity:.45}
+.btn .icon{width:15px;height:15px}
+.btn-primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:600}
+.btn-primary:hover:not(:disabled){background:var(--accent);border-color:transparent;filter:brightness(1.08)}
+.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
+.btn-ghost:hover:not(:disabled){background:var(--surface-3);border-color:transparent;color:var(--ink)}
+.btn-ghost[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
+.btn-link{height:auto;padding:2px 0;border:0;background:transparent;color:var(--accent);font-weight:500}
+.btn-link:hover:not(:disabled){background:transparent;text-decoration:underline;text-underline-offset:3px}
+.link-btn{justify-self:start;padding:0;border:0;background:none;color:var(--accent);font-size:var(--fs-xs);font-weight:500}
+.link-btn:hover{text-decoration:underline;text-underline-offset:3px}
+.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);transition:background var(--t-fast),color var(--t-fast)}
+.icon-btn:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
+.icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
+.icon-btn:disabled{opacity:.4}
+.icon-btn .icon{width:17px;height:17px}
+
+/* Segmented control */
+.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--sunken);border:1px solid var(--line)}
+.seg-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
+.seg-btn:hover:not(:disabled){color:var(--ink)}
+.seg-btn[aria-selected="true"],.seg-btn[aria-checked="true"]{background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-1),0 0 0 1px var(--line-2)}
+.seg-btn:disabled{opacity:.4}
+.seg-btn .icon{width:15px;height:15px}
+.seg-sm .seg-btn{height:24px;padding:0 9px;font-size:var(--fs-xs)}
+
+/* Badges, dots, chips */
+.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--tone-soft,var(--idle-soft));color:var(--tone,var(--ink-2));font-size:var(--fs-xs);font-weight:600;white-space:nowrap;line-height:1}
+.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
+.dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--tone,var(--idle));box-shadow:0 0 0 3px var(--tone-soft,transparent)}
+.chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-2xs);font-weight:500;white-space:nowrap}
+.chip-strong{color:var(--ink);background:var(--line-2)}
+.chip-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
+code.id{padding:1px 6px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-2xs);white-space:nowrap}
+.when{color:var(--ink-3);font-size:var(--fs-xs);white-space:nowrap}
+.count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-3);font-size:10.5px;font-weight:600;line-height:1}
+.spacer{flex:1}
+.small{font-size:var(--fs-xs)}
+.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-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)}
+.card-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
+.card-column{display:flex;flex-direction:column;gap:14px;min-width:0}
+.stack{display:grid;gap:10px;min-width:0}
+
+/* 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}
+.disclosure>summary::-webkit-details-marker{display:none}
+.disclosure>summary:hover{color:var(--ink)}
+.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}
+
+/* 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-compact{gap:3px 12px;font-size:var(--fs-xs)}
+
+/* Prose */
+.prose-block{display:grid;gap:5px;min-width:0}
+.prose-label{color:var(--ink-3);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
+.prose-block.is-collapsed .md{max-height:180px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
+.callout{padding:10px 12px;border-radius:var(--r-md);background:var(--tone-soft,var(--surface-3));border-left:2px solid var(--tone,var(--line-3))}
+.bullets{margin:0;padding-left:18px;display:grid;gap:3px;font-size:var(--fs-sm);color:var(--ink-2)}
+.checklist{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:var(--fs-sm)}
+.checklist li{display:flex;gap:8px;align-items:flex-start;color:var(--ink-2)}
+.checklist li .icon{margin-top:3px;color:var(--ink-4)}
+.checklist li.is-done .icon{color:var(--ok)}
+
+/* Notes, empty states, receipts */
+.note{padding:8px 11px;border-radius:var(--r-sm);background:var(--tone-soft,var(--surface-3));color:var(--ink-2);font-size:var(--fs-xs);line-height:1.5}
+.note.tone-bad{color:var(--bad)}
+.note.tone-warn{color:var(--ink)}
+.empty{display:flex;align-items:center;gap:10px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--ink-3);font-size:var(--fs-sm)}
+.empty .icon{color:var(--ink-4)}
+.receipt{color:var(--ink-3);font-size:var(--fs-xs);overflow-wrap:anywhere}
+.receipt[data-state="pending"]{color:var(--info)}
+.receipt[data-state="ok"]{color:var(--ok)}
+.receipt[data-state="warn"]{color:var(--warn)}
+.receipt[data-state="bad"]{color:var(--bad)}
+.code-block{margin:0;max-height:360px;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--sunken);color:var(--ink-2);font-size:var(--fs-2xs);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
+.show-more{justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px dashed var(--line-3);border-radius:var(--r-sm);background:transparent;color:var(--ink-3);font-size:var(--fs-xs);font-weight:500}
+.show-more:hover{color:var(--accent);border-color:var(--accent-line)}
+.loading-block{display:flex;align-items:center;gap:10px;padding:32px 8px;color:var(--ink-3)}
+.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-3);border-top-color:var(--accent);animation:spin .8s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* Metrics */
+.metric{display:grid;gap:4px;align-content:start;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
+.metric-label{color:var(--ink-3);font-size:var(--fs-xs)}
+.metric-value{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em;color:var(--tone,var(--ink));font-variant-numeric:tabular-nums;line-height:1.2}
+.metric-note{color:var(--ink-4);font-size:var(--fs-2xs);line-height:1.4}
+.metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
+.usage{display:grid;gap:10px}
+.usage-meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--ink-3);font-size:var(--fs-2xs)}
+
+/* Forms */
+.field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0;font-size:var(--fs-sm)}
+.field>span,.field>legend{color:var(--ink-2);font-size:var(--fs-xs);font-weight:500;padding:0}
+.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
+.form-actions{display:flex;gap:8px;justify-content:flex-end}
+.inline-form{display:grid;gap:8px}
+.inline-row{display:flex;gap:8px}
+.inline-row input{flex:1}
+
+/* Dialogs */
+.dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;overflow:auto;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2)}
+.dialog::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
+.dialog-body{display:grid;gap:16px;padding:20px}
+.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
+.dialog-head h2{font-size:var(--fs-lg)}
+.dialog-sub{margin-top:4px;color:var(--ink-3);font-size:var(--fs-xs)}
+.dialog-actions{display:flex;gap:8px;justify-content:flex-end}
+.settings-dialog{width:min(460px,calc(100vw - 32px))}
+.theme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
+.theme-option{display:grid;gap:8px;padding:8px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);text-align:left;font-size:var(--fs-sm);font-weight:500}
+.theme-option:hover{border-color:var(--line-3)}
+.theme-option[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
+.theme-swatch{display:flex;height:34px;overflow:hidden;border-radius:var(--r-sm);border:1px solid var(--line)}
+.theme-swatch i{flex:2}
+.theme-swatch i[data-part="2"]{flex:1}
+.shortcut-list{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
+.shortcut-list dt{display:flex;gap:3px;align-items:center}
+.shortcut-list dd{margin:0}
+
+/* Toast */
+.toast{position:fixed;left:50%;bottom:24px;z-index:90;max-width:min(520px,calc(100vw - 32px));padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-2);font-size:var(--fs-sm);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity var(--t-med),transform var(--t-med) var(--ease)}
+.toast.show{opacity:1;transform:translate(-50%,0)}
+`;

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

@@ -1,81 +1,60 @@
 /*
- * LAYOUT — geometry and structure only.
- * Grid shells, sticky bars, scrolling regions. Colors live in widgets/cards.
+ * 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. 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 = `
-*{box-sizing:border-box}
-html{min-width:320px;font-family:var(--font-body)}
-body{margin:0;min-width:320px;height:100vh;overflow:hidden;font-size:14px}
-.app-shell{display:grid;grid-template-areas:"sidebar main divider pane";grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0 0;grid-template-rows:100vh;height:100vh;transition:grid-template-columns var(--motion-slow) var(--ease)}
-body.conversation-active .app-shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr) 8px var(--pane-w)}
-body.conversation-active.pane-left .app-shell{grid-template-areas:"sidebar pane divider main";grid-template-columns:var(--sidebar-w) var(--pane-w) 8px minmax(0,1fr)}
-body.terminal-active .app-shell,body.terminal-active.pane-left .app-shell{grid-template-areas:"sidebar main divider pane";grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0 var(--terminal-w)}
-body.pane-resizing .app-shell{transition:none}
-/* Sidebar = persistent work index */
-.sidebar{grid-area:sidebar;display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh;padding:16px 14px 14px}
-.sidebar-brand{display:flex;gap:10px;align-items:center;flex:none;margin-bottom:14px}
-.brand-text{display:grid;gap:3px;min-width:0;flex:1}
-.sidebar .search{flex:none;margin-bottom:10px}
-.filters{display:block;flex:none;margin-bottom:10px}
-.task-list{flex:1;min-height:0;overflow-y:auto;display:grid;gap:3px;align-content:start;margin:0 -4px;padding:2px 4px}
-.task-group{display:grid;gap:7px}
-.task-group-head{display:flex;align-items:baseline;gap:8px;padding:3px 4px 2px}
-.sidebar-foot{flex:none;padding-top:10px;margin-top:8px;display:grid;gap:8px}
-.sidebar-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
-.catalog-pager{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none;padding-top:10px}
-.catalog-pager span{grid-column:1/-1;grid-row:1;text-align:center;font-size:11px;color:var(--muted)}
-.catalog-pager button{min-height:32px;min-width:0;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;font-size:11px;cursor:pointer}
-.catalog-pager button:hover:not(:disabled){border-color:var(--accent)}
-.catalog-pager button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
-.catalog-pager button:disabled{opacity:.45;cursor:default}
-#catalog-attention-reset{grid-column:1/-1}
-/* Main column = top bar + optional section nav + reading surface */
-.main-col{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh;overflow-y:auto;scrollbar-gutter:stable}
-.topbar{position:sticky;top:0;z-index:30;flex:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px max(var(--page-space),calc((100% - 1100px) / 2));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
-.topbar-leading{display:flex;align-items:center;gap:14px;min-width:0}
-.breadcrumb{display:flex;align-items:baseline;gap:8px;min-width:0}
-.crumb-current{margin:0;min-width:0;font-family:var(--font-display);font-weight:600;font-size:clamp(14px,1.3vw,17px);letter-spacing:-.01em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.topbar-actions{display:flex;align-items:center;gap:14px;flex:none}
-.clock{display:grid;justify-items:end;gap:2px;text-align:right;line-height:1.2}
-/* Sticky section navigation, only meaningful while a task is open */
-.detail-tabs{position:sticky;top:var(--topbar-h,44px);z-index:20;flex:none;display:none;gap:0;padding:0 max(var(--page-space),calc((100% - 1100px) / 2));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
-body.detail-active .detail-tabs{display:flex}
-.tab{flex:none;padding:11px 13px;color:var(--muted);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color var(--motion-fast),border-color var(--motion-fast)}
-.tab:hover{color:var(--text)}
-.tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
-.detail{flex:1;min-height:0;padding:16px max(var(--page-space),calc((100% - 1100px) / 2)) 72px;min-width:0}
-.detail:focus-visible{outline:none}
-.anchor{scroll-margin-top:calc(var(--topbar-h,44px) + var(--tabs-h,38px))}
-/* Adjustable discussion panel; the separator belongs to the task view, not Task state. */
-.pane-divider{grid-area:divider;align-self:stretch;width:8px;min-width:0;cursor:col-resize;position:relative;touch-action:none;z-index:31}
-.pane-divider[hidden]{display:none}
-.pane-divider span{position:absolute;inset:0 3px;background:var(--border-strong);transition:background var(--motion-fast)}
-.pane-divider:hover span,.pane-divider:focus-visible span,body.pane-resizing .pane-divider span{background:var(--accent)}
-.pane-divider:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
-.conversation-panel{grid-area:pane;min-width:0;height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
-.conversation-panel[hidden]{display:none}
-.conversation-head{flex:none;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px}
-.conversation-head>div:first-child{min-width:0}
-.conversation-eyebrow{display:block;font-size:10px;line-height:1.4}
-.conversation-head h2{margin:4px 0 0;font-size:16px;font-family:var(--font-display);line-height:1.25}
-.conversation-head-actions{display:flex;gap:4px;align-items:center}
-.conversation-content{display:flex;flex:1;flex-direction:column;min-height:0;padding:14px;gap:14px}
-.conversation-feed{display:flex;flex:1;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding:2px 2px 12px}
-.conversation-item{flex:none;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-2);min-width:0;overflow-wrap:anywhere}
-.conversation-item.is-user{border-color:var(--accent-line);background:var(--accent-soft)}
-.conversation-item-head{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin-bottom:8px}
-.conversation-item-head time{white-space:nowrap}
-.conversation-item .rich-text{font-size:13px}
-.conversation-compose{flex:none;max-height:55%;overflow-y:auto}
-.conversation-compose h3{margin:2px 0;font-size:13px}
-.conversation-compose form{display:grid;gap:9px}
-.conversation-compose textarea{min-height:76px}
-/* Native Session occupies the pane temporarily; it is not the Task message feed. */
-.terminal-panel{grid-area:pane;min-width:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
-.terminal-panel[hidden]{display:none}
-.terminal-head{flex:none;height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px}
-.terminal-head>div{display:flex;align-items:center;gap:12px;min-width:0}
-.terminal-head h2{margin:0}
-.terminal-host{flex:1;min-height:0;padding:8px 10px;overflow:hidden;position:relative}
-.terminal-hint{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;padding:20px}
+.app{display:grid;height:100vh;height:100dvh;grid-template-rows:minmax(0,1fr);
+  grid-template-areas:"sidebar center divider dock";
+  grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0 0}
+body.dock-open .app{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--divider-w) var(--dock-w)}
+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);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: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: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)}
+.center:focus-visible{box-shadow:none}
+.detail{min-height:100%}
+.page{max-width:var(--center-max);margin:0 auto;padding:0 clamp(16px,3vw,40px) 64px}
+
+/* Dock divider */
+.dock-divider{grid-area:divider;position:relative;cursor:col-resize;touch-action:none;background:var(--canvas);z-index:5}
+.dock-divider span{position:absolute;top:0;bottom:0;left:4px;width:1px;background:var(--line-2);transition:background var(--t-fast),box-shadow var(--t-fast)}
+.dock-divider:hover span,.dock-divider:focus-visible span,body.dock-resizing .dock-divider span{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
+.dock-divider:focus-visible{box-shadow:none}
+body.dock-resizing{cursor:col-resize;user-select:none}
+
+/* Dock */
+.dock{grid-area:dock;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
+body.dock-open:not(.dock-center) .dock{border-left:0}
+.dock-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--header-h);padding:0 10px 0 12px;border-bottom:1px solid var(--line)}
+.dock-actions{display:flex;gap:2px}
+.dock-pane{flex:1;min-height:0;display:flex;flex-direction:column}
+.dock-discussion{position:relative}
+.dock-session{background:var(--term-bg)}
+.session-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
+.session-targets{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
+.terminal-host{flex:1;min-height:0;padding:10px 4px 6px 12px;overflow:hidden}
+.terminal-host:empty{display:none}
+.terminal-empty{flex:1;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;text-align:center}
+.session-foot{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.07)}
 `;

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

@@ -1,29 +1,21 @@
 /*
- * MARKDOWN — rendered rich text inside cards.
- * .md is produced by client/markdown.ts (escaped HTML + inline tags only).
- * Also owns the collapse affordances (.md-toggle, .show-more) that long
- * blocks and paged lists share.
+ * MARKDOWN — rendered Agent/user prose. .md is produced by client/markdown.ts
+ * (escaped HTML plus a small set of our own inline and block tags).
  */
 export const MARKDOWN_STYLES = `
-.md{display:grid;gap:6px;font-family:var(--font-body);font-size:12px;line-height:1.6;color:var(--text)}
+.md{display:grid;gap:7px;min-width:0;font-size:var(--fs-sm);line-height:1.62;color:var(--ink);overflow-wrap:anywhere}
 .md p{margin:0}
-.md h4,.md h5,.md h6{margin:4px 0 0;font-family:var(--font-display);font-weight:700;line-height:1.3;color:var(--text)}
-.md h4{font-size:13px}
-.md h5{font-size:12.5px}
-.md h6{font-size:12px}
-.md ul,.md ol{margin:0;padding-left:18px;display:grid;gap:3px}
-.md li{padding-left:2px}
-.md code{font-family:var(--font-mono);font-size:11px;background:var(--bg-3);border:1px solid var(--border);border-radius:4px;padding:0 4px}
-.md pre{margin:0;padding:8px 10px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}
-.md pre code{background:transparent;border:0;padding:0;font-size:11px;line-height:1.5}
-.md a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line)}
-.md a:hover{color:var(--text);border-bottom-color:var(--text)}
-.md.muted,.md .muted{color:var(--muted)}
-/* Collapse: clamp long blocks with a fade, toggle reveals the full text */
-.record-block.is-collapsed .md,
-.execute-io.is-collapsed .md{max-height:200px;overflow:hidden;mask-image:linear-gradient(#000 70%,transparent);-webkit-mask-image:linear-gradient(#000 70%,transparent)}
-.md-toggle{justify-self:start;display:inline-flex;align-items:center;padding:3px 11px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:11px;line-height:1.4;transition:color var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}
-.md-toggle:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
-.show-more{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 13px;color:var(--muted);background:transparent;border:1px dashed var(--border);border-radius:var(--radius);font-family:var(--font-body);font-size:12px;font-weight:600;transition:color var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}
-.show-more:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
+.md h4,.md h5,.md h6{margin:6px 0 0;font-weight:600;line-height:1.35}
+.md h4{font-size:var(--fs-md)}
+.md h5{font-size:var(--fs-sm)}
+.md h6{font-size:var(--fs-sm);color:var(--ink-2)}
+.md ul,.md ol{margin:0;padding-left:20px;display:grid;gap:3px}
+.md li::marker{color:var(--ink-4)}
+.md code{padding:1px 5px;border-radius:var(--r-xs);background:var(--surface-3);font-size:.88em}
+.md pre{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--sunken);overflow-x:auto}
+.md pre code{padding:0;background:transparent;font-size:var(--fs-2xs);line-height:1.55}
+.md a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
+.md a:hover{text-decoration-color:currentColor}
+.md strong{font-weight:600}
+.md.muted{color:var(--ink-2)}
 `;

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

@@ -1,54 +1,51 @@
 /*
  * RESPONSIVE — breakpoints only.
- * Back button is hidden by default; only the narrow master-detail layout
- * reveals it while a task is open.
+ *   ≤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 = `
-.detail-back{display:none}
-@media(max-width:1080px){
-  .metric-value{font-size:27px}
+@container sidebar (max-width:299px){
+  .foot-btn kbd{display:none}
+}
+@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,.card-columns{grid-template-columns:minmax(0,1fr)}
+  .metric-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
+}
+@media(max-width:1040px){
+  body.dock-open .overview-layout{grid-template-columns:minmax(0,1fr)}
 }
 @media(max-width:900px){
-  /* Master-detail: sidebar list by default; selecting a task swaps to detail */
-  body{overflow:auto}
-  .app-shell,body.conversation-active .app-shell,body.conversation-active.pane-left .app-shell,body.terminal-active .app-shell,body.terminal-active.pane-left .app-shell{grid-template-areas:"sidebar" "main";grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;min-height:100vh}
-  .sidebar{height:auto;min-height:100vh;border-right:0;border-bottom:1px solid var(--border)}
-  .task-list{overflow:visible}
-  .main-col{display:none;height:auto;min-height:100vh}
-  body.detail-active .sidebar{display:none}
-  body.detail-active .main-col{display:flex}
-  body.detail-active .detail-back{display:grid}
-  .detail{overflow:visible}
-  .pane-divider{display:none}
-  .conversation-panel{position:fixed;inset:0;z-index:70;height:100dvh;border-left:0}
-  .conversation-feed{min-height:0}
-  .conversation-head-actions #conversation-swap{display:none}
-  body.conversation-active .main-col{display:none}
-  body.conversation-active .conversation-panel{display:flex}
-  .overview-duo{grid-template-columns:1fr}
-  .observability-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
-  /* Terminal panel overlays full-screen instead of occupying a grid column */
-  .terminal-panel{position:fixed;inset:0;z-index:80;height:100dvh;border-left:0}
+  .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}
+  .center{grid-area:main;display:none}
+  body.task-open .sidebar{display:none}
+  body.task-open .center{display:block}
+  .back-btn{display:inline-grid}
+  .crumbs .crumb,.crumbs .crumb-sep{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-layout{grid-template-columns:minmax(0,1fr)}
+  .dock-toggle span{display:none}
+  .dock-toggle{width:32px;padding:0}
 }
 @media(max-width:620px){
-  .command-rail{grid-template-columns:repeat(2,1fr)}
-  .metric{min-height:80px;padding:13px 15px}
-  .metric-value{font-size:26px}
-  /* Keep the topbar on one line: clock and key hints are expendable */
-  .clock{display:none}
-  .topbar{flex-wrap:nowrap;gap:8px;padding:10px 14px}
-  .topbar-leading{flex:1;gap:8px}
-  .breadcrumb .crumb,.breadcrumb .crumb-sep{display:none}
-  .topbar-actions{gap:6px}
-  #conversation-toggle,#operator-terminal,#refresh{width:38px;height:38px;min-width:38px;justify-content:center;padding:0}
-  #conversation-toggle{font-size:0}
-  #conversation-toggle::before{content:"▤";font-size:19px}
-  #operator-terminal .operator-title,#operator-terminal .operator-shortcuts,#refresh span,#refresh kbd{display:none}
-  #operator-terminal::before{content:">_";font-family:var(--font-mono);font-size:15px}
-  #refresh::before{content:"↻";font-size:20px}
-  .detail-tabs{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
-  .record-cols{grid-template-columns:1fr}
-  .observability-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .page-head{padding-top:24px;flex-wrap:wrap}
+  .task-title{font-size:var(--fs-xl)}
+  .tab:not([aria-selected="true"]) span:not(.count){display:none}
+  .tab{padding:0 12px}
+  .field-row{grid-template-columns:minmax(0,1fr)}
+  .work-body{padding-left:16px}
+  .kv{grid-template-columns:minmax(0,1fr)}
+  .kv dt{margin-top:4px}
+  .foot-btn kbd{display:none}
 }
-@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
 `;