@spzxg/cli-ui 0.6.5 → 0.6.7

package/src/operator/node/boardWorkspace.ts

@@ -1,12 +1,15 @@
+import type { WorkspaceRefreshOptions } from '../../board/fileWatch';
 import { createWorkspace } from '../../board/workspace';
 import { cloneBoardView } from '../../board/context';
 import { getOperatorBoardBackend } from './boardBackend';
 import { readBoardState } from './boardState';
 import { openOperatorBoard } from './boardInteraction';
+import { refreshOperatorWorkspaceFiles } from './boardEvents';
 /** Host API for the node workspace. Uses the same cloud-facing file API as the board. */
 export function createOperatorWorkspace(taskId:string){
- return createWorkspace({backend:getOperatorBoardBackend(),key:taskId,
+ const workspace=createWorkspace({backend:getOperatorBoardBackend(),key:taskId,
   view:()=>{const view=readBoardState(taskId);return view?.visible?cloneBoardView(view):undefined;},
   context:()=>{const view=readBoardState(taskId);return view?cloneBoardView(view):null;},
   open:path=>openOperatorBoard({kind:'file',taskId,path})});
+ return {...workspace,refresh:(options?:WorkspaceRefreshOptions)=>refreshOperatorWorkspaceFiles(taskId,options)};
 }

package/src/operator/node/composerDraft.ts

@@ -1,5 +1,9 @@
-export type Quote = { id: string; author: string; text: string };
+import type { UploadPhase } from "../../core/documentUpload";
+
+export type Quote = { id: string; author: string; text: string; sourceTaskId?: string };
 export type Attachment = {
+  progress?: number;
+  phase?: UploadPhase; bytes?: number; size?: number;
   key: string; kind: "image" | "file"; name: string; preview: string; path: string;
   status: "uploading" | "ready" | "error"; error?: string;
 };
@@ -15,7 +19,7 @@ export function readDraft(id: string): ComposerDraft {
     const raw = localStorage.getItem(key(id));
     if (raw) {
       const d = JSON.parse(raw) as ComposerDraft;
-      if (typeof d.text === "string" && Array.isArray(d.attachments)) return { ...d, attachments: d.attachments.map((a) => a.status === "uploading" ? { ...a, preview: "", status: "error", error: "上传已中断，请移除后重新添加。" } : a) };
+      if (typeof d.text === "string" && Array.isArray(d.attachments)) return { ...d, attachments: d.attachments.map((a) => a.status === "uploading" ? { ...a, preview: "", status: "error", error: "上传已中断，请重新选择文件。" } : a) };
     }
     return { ...emptyDraft(), text: localStorage.getItem(`orch:draft:${id}`) ?? "" };
   } catch { return emptyDraft(); }

package/src/operator/node/format.ts

@@ -279,9 +279,11 @@ export function splitAttachments(content: string): { text: string; attachments:
   for (const line of content.split("\n")) {
     const m = ATTACHMENT_RE.exec(line.trim());
     const parts = m ? m[2].split(/[\\/]/).filter(Boolean) : [];
-    if (m && parts.length >= 3 && parts[parts.length - 3] === "uploads") {
+    const upload = parts.length >= 3 && parts[parts.length - 3] === "uploads";
+    const managed = parts.length >= 4 && parts[parts.length - 4] === ".workspace" && parts[parts.length - 3] === "attachments";
+    if (m && (upload || managed) && parts.slice(-2).every(part => part !== "." && part !== "..")) {
       const [taskId, file] = parts.slice(-2);
-      attachments.push({ path: m[2], url: `/api/tasks/${taskId}/uploads/${file}`, kind: m[1] === "image" ? "image" : "file", name: file });
+      attachments.push({ path: m[2], url: `/api/tasks/${encodeURIComponent(taskId)}/uploads/${encodeURIComponent(file)}`, kind: m[1] === "image" ? "image" : "file", name: file });
     } else {
       kept.push(line);
     }

package/src/operator/node/liveStream.ts

@@ -45,6 +45,18 @@ const BACKOFF_MS = [500, 1000, 2000, 4000, 8000];
 const PROBE_MS = 30_000;
 
 const subs = new Map<number, Sub>();
+const observers = new Map<string, Set<(data: string) => void>>();
+/** Observe an existing route without opening a connection or server subscription. */
+export function observeLiveMessages(path: string, listener: (data: string) => void): () => void {
+  const key = path.split("?")[0];
+  const listeners = observers.get(key) ?? new Set(); observers.set(key, listeners); listeners.add(listener);
+  return () => { listeners.delete(listener); if (!listeners.size) observers.delete(key); };
+}
+function deliver(s: Sub, data: string) {
+  if (subs.get(s.id) !== s) return;
+  for (const listener of [...observers.get(s.url.split("?")[0]) ?? []]) notifyCallback(listener, data);
+  if (subs.get(s.id) === s) s.h.onMessage(data);
+}
 let nextId = 1;
 let mode: "ws" | "sse" | null = null;
 let ws: WebSocket | null = null;
@@ -91,7 +103,7 @@ function openEventSource(s: Sub) {
   const es = new EventSource(s.url);
   const active = () => subs.get(s.id) === s && s.es === es;
   es.onopen = () => { if (!active()) return; if (s.retry) { clearTimeout(s.retry); s.retry = undefined; } s.fails = 0; s.h.onOpen?.(); };
-  es.onmessage = (event) => { if (active()) s.h.onMessage(event.data); };
+  es.onmessage = (event) => { if (active()) deliver(s, event.data); };
   es.onerror = () => {
     if (!active()) return;
     notifyCallback(s.h.onError, new Error("实时事件连接中断，正在等待恢复"));
@@ -203,7 +215,7 @@ function onFrame(text: string) {
   const nl = text.indexOf("\n");
   if (nl <= 0) return;
   const s = subs.get(Number(text.slice(0, nl)));
-  if (s) s.h.onMessage(text.slice(nl + 1));
+  if (s) deliver(s, text.slice(nl + 1));
 }
 
 function connect() {

package/src/operator/node/protocol/types.ts

@@ -239,9 +239,9 @@ export type StreamEvent =
   | { type: "tool"; id: string; title: string; detail: string; peek?: ToolPeek; diff?: DiffLine[] }
   | { type: "tool_result"; id: string; content: string; isError: boolean; peek?: ToolPeek }
   | { type: "ask"; id: string; questions: AskQuestion[] }
-  | { type: "ask_answered"; id: string; answers: AskAnswers }
+  | { type: "ask_answered"; id: string; answers: AskAnswers; awaiting_input?: 0 | 1 }
   // An input card was raised or settled (the whole card each time; upsert by msgId).
-  | { type: "input"; input: InputRequest }
+  | { type: "input"; input: InputRequest; awaiting_input?: 0 | 1 }
   | { type: "suggested"; title: string }
   | { type: "usage"; usage: TurnUsage }
   | { type: "notice"; content: string } // a quiet, non-error system note (e.g. "caught up to main")

package/src/operator/node/useTaskStream.ts

@@ -149,15 +149,16 @@ export function useTaskStream({ selTask, selProjRef, agentsRef, setTaskRunning,
       // Only drop the flag once every parked ask on this task is answered.
       const open = openAsksRef.current[taskId];
       open?.delete(ev.id);
-      if (!open || open.size === 0) {
-        setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, awaiting_input: 0 } : x)));
-      }
+      const reported = ev.awaiting_input;
+      const awaiting = reported === 0 || reported === 1 ? reported : open?.size ? 1 : 0;
+      setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, awaiting_input: awaiting } : x)));
     } else if (ev.type === "input") {
       // browser_ask_user card raised or settled: the event carries the whole card.
       const data: ToolData = { title: "需要你提供信息", input: ev.input };
       upsertMsg(taskId, { id: ev.msgId ?? `in-${ev.input.id}`, role: "tool", content: JSON.stringify(data), generation: gen });
+      const reported = ev.awaiting_input;
       const waiting = ev.input.status === "pending";
-      setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, awaiting_input: waiting ? 1 : x.awaiting_input && openAsksRef.current[taskId]?.size ? 1 : 0 } : x)));
+      setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, awaiting_input: reported === 0 || reported === 1 ? reported : waiting ? 1 : x.awaiting_input && openAsksRef.current[taskId]?.size ? 1 : 0 } : x)));
     } else if (ev.type === "usage") {
       // Live cumulative spend: add this turn's totals to the task's figure.
       // Context occupancy, by contrast, is the latest turn's INPUT-side
@@ -231,12 +232,14 @@ export function useTaskStream({ selTask, selProjRef, agentsRef, setTaskRunning,
       setOlderByTask(drop);
       for (const t of evicted) { delete openAsksRef.current[t]; delete loadingOlderRef.current[t]; }
     }
+    let active = true;
     const sub = openLive(`/api/tasks/${id}/messages?tail=${SNAPSHOT_TAIL}`, {
       onMessage: (data) => {
+        if (!active) return;
         try { handleStreamEventRef.current(id, JSON.parse(data) as TaskStreamEvent); } catch {}
       },
     });
-    return () => sub.close();
+    return () => { active = false; sub.close(); };
   }, [selTask]);
 
   // Page in the next batch of earlier messages for a task (the transcript calls

package/src/operator.base.css

@@ -606,9 +606,10 @@ button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:n
 /* Wrapper exists so the nav cluster anchors to the transcript's bottom edge —
    i.e. always just above the composer, however tall the composer grows. */
 .transcript-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;}
-.msg-nav{position:absolute;right:18px;bottom:12px;z-index:5;display:flex;flex-direction:column;gap:6px;}
-.msg-nav-btn{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;transition:transform .12s ease,background .12s ease;}
-.msg-nav-btn:hover{background:var(--surface-2);transform:translateY(-1px);}
+.msg-nav{position:absolute;right:14px;bottom:12px;z-index:5;display:flex;flex-direction:column;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.06);}
+.msg-nav-btn{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;background:transparent;color:var(--ink-3);cursor:pointer;transition:background .12s ease;}
+.msg-nav-btn:hover{background:var(--surface-2);color:var(--ink);}
+.msg-nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
 .msg-nav-btn svg{width:16px;height:16px;}
 
 /* ===== workspace split: transcript beside the DIFF/PREVIEW/CONTEXT rail ===== */
@@ -616,9 +617,10 @@ button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:n
    driven by an inline gridTemplateColumns from layout state (resizable); the
    --col-rail value here is only the SSR/fallback default. */
 .sess-split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 0px var(--col-rail);}
-.sess-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line);}
-.sess-rail{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-2);}
-.rail-tabs{flex:0 0 auto;display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);}
+.sess-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line-2);}
+.sess-split>.sess-main + .col-rail.rail-right{border-left:0;}
+.sess-rail{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-2);container-type:inline-size;}
+.rail-tabs{flex:0 0 auto;display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line-2);}
 .rail-tab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-4);background:transparent;border:none;border-bottom:2px solid transparent;padding:14px 13px 12px;cursor:pointer;transition:color .12s;}
 .rail-tab.on{color:var(--ink);border-bottom-color:var(--accent);}
 .rail-tab:not(.on):hover{color:var(--ink-2);}
@@ -671,7 +673,7 @@ button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:n
 .ctxw-desc{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:4px;}
 .ctxw-clear{width:100%;justify-content:center;margin-top:20px;}
 .ctxw-foot{margin-top:12px;font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--ink-4);text-align:center;}
-.sess-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:60px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--surface);}
+.sess-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:60px;padding:11px 18px;border-bottom:1px solid var(--line-2);background:var(--surface);}
 .sess-head .sh-main{min-width:150px;flex:1;}
 .sess-head .crumb{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;}
 .sess-head .crumb .sep{opacity:.5;}
@@ -790,7 +792,7 @@ a.tc-btn{display:inline-flex;align-items:center;text-decoration:none;line-height
 .transcript{flex:1;overflow-y:auto;padding:26px 0 18px;}
 .tw{max-width:760px;margin:0 auto;padding:0 28px;}
 .msg{margin-bottom:22px;}
-.msg .who{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;}
+.msg .who{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--ink-3);margin-bottom:9px;}
 .msg .who .badge{font-size:9px;padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--ink-3);letter-spacing:.04em;}
 .msg .who .msg-time{font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--ink-3);opacity:.75;}
 .msg .who .av{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:10px;}
@@ -806,15 +808,15 @@ a.tc-btn{display:inline-flex;align-items:center;text-decoration:none;line-height
 .msg .who .av.cc.codex{color:var(--ink);}
 .msg .who .av svg{width:11px;height:11px;}
 .msg .who .av.cc svg{width:16px;height:16px;}
-.msg-body{font-size:14px;line-height:1.6;color:var(--ink);}
+.msg-body{font-size:15px;line-height:1.75;color:var(--ink);}
 .msg-body p{margin:0 0 10px;}
 .msg-body p:last-child{margin-bottom:0;}
 .msg-body code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--line-2);padding:1px 5px;border-radius:5px;color:var(--accent-ink);}
 [data-theme="dark"] .msg-body code{color:#E0A07F;}
 .msg-body strong{font-weight:700;}
 
-.msg.user .msg-body{background:var(--accent-soft);border:1px solid rgba(194,96,60,.2);border-radius:var(--r-lg);padding:13px 15px;}
-.msg.user.initial .msg-body{background:var(--surface);border:1px solid var(--accent);box-shadow:var(--sh-1);}
+.msg.user .msg-body{background:var(--surface-2);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;}
+.msg.user.initial .msg-body{background:var(--surface);border-color:var(--line);}
 /* queued follow-up: a dimmed user bubble waiting its turn, with a cancel × */
 .msg.user.queued{opacity:.62;}
 .msg.user.queued .msg-body{background:var(--surface-2);border:1px dashed var(--line-2);position:relative;padding-right:34px;}
@@ -827,7 +829,8 @@ a.tc-btn{display:inline-flex;align-items:center;text-decoration:none;line-height
 
 /* tool call block (expandable) */
 .tool{font-family:var(--mono);font-size:12px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);overflow:hidden;}
-.tool-h{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--ink-2);width:100%;text-align:left;font-family:var(--mono);font-size:12px;}
+.tool-h{display:flex;align-items:center;gap:8px;padding:9px 12px;min-height:38px;color:var(--ink-2);width:100%;text-align:left;font-family:var(--mono);font-size:12px;}
+.tool-h:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}
 .tool-h:hover{background:var(--panel-2);}
 .tool-h .tchev{flex:0 0 auto;color:var(--ink-4);display:inline-flex;transition:transform .14s;}
 .tool-h .tchev svg{width:13px;height:13px;}
@@ -910,16 +913,16 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .md li{margin-bottom:4px;}
 .md li::marker{color:var(--ink-3);}
 .md h1,.md h2,.md h3,.md h4{margin:16px 0 8px;font-weight:700;letter-spacing:-.01em;line-height:1.3;}
-.md h1{font-size:18px;}
-.md h2{font-size:16px;}
-.md h3{font-size:14.5px;}
+.md h1{font-size:20px;}
+.md h2{font-size:18px;}
+.md h3{font-size:16px;}
 .md h4{font-size:13px;}
 .md code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--line-2);padding:1px 5px;border-radius:5px;color:var(--accent-ink);}
 [data-theme="dark"] .md code{color:#E0A07F;}
 .md pre{margin:0 0 12px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;overflow-x:auto;}
 .md pre code{display:block;background:none;border:none;padding:0;color:var(--ink);font-size:12.5px;line-height:1.55;}
-.md blockquote{margin:8px 0;padding:2px 0 2px 14px;border-left:3px solid var(--line-strong);color:var(--ink-2);}
-.md hr{border:none;border-top:1px solid var(--line);margin:14px 0;}
+.md blockquote{margin:12px 0;padding:4px 0 4px 14px;border-left:2px solid var(--line);color:var(--ink-2);}
+.md hr{border:none;border-top:1px solid var(--line-2);margin:14px 0;}
 .md table{border-collapse:collapse;margin:8px 0;font-size:13px;width:100%;}
 .md th,.md td{border:1px solid var(--line-2);padding:6px 10px;text-align:left;}
 .md th{background:var(--surface-2);font-weight:700;}
@@ -973,7 +976,7 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .sbreak .card .ct b{color:var(--ink);}
 
 .session-label{display:flex;align-items:center;gap:9px;margin:0 0 20px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);}
-.session-label .ln{flex:1;height:1px;background:var(--line);}
+.session-label .ln{flex:1;height:1px;background:var(--line-2);}
 
 /* windowed transcript: reveal earlier rows */
 .load-older{display:flex;justify-content:center;margin:0 0 18px;}
@@ -1013,7 +1016,7 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .comp-box{border:1px solid var(--line-strong);border-radius:24px;background:var(--raise);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s;overflow:hidden;}
 .comp-box:focus-within{border-color:var(--ink-4);box-shadow:0 4px 24px rgba(0,0,0,.07);}
 .comp-area{padding:18px 20px 8px;}
-.comp-area textarea{display:block;width:100%;min-width:0;border:none;background:none;resize:none;outline:none;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);max-height:200px;min-height:62px;}
+.comp-area textarea{display:block;width:100%;min-width:0;padding:0;border:none;background:none;resize:none;outline:none;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);min-height:3.2em;max-height:12.8em;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior:contain;}
 .comp-area textarea::placeholder{color:var(--ink-4);}
 .comp-toolbar{display:flex;align-items:center;gap:7px;padding:4px 12px 12px;min-width:0;}
 .comp-add{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;flex:none;color:var(--ink-2);background:transparent;}
@@ -1025,7 +1028,6 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .comp-setting svg{width:14px;height:14px;}
 .comp-setting.elevated{color:var(--amber);}
 .comp-model-name{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
-.comp-reasoning{color:var(--ink-3);font-size:11px;}
 .comp-setting:disabled,.comp-add:disabled{opacity:.5;cursor:default;}
 .send{width:36px;height:36px;flex:none;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;transition:filter .12s,opacity .12s;}
 .send:hover{filter:brightness(1.07);}
@@ -1052,16 +1054,9 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 
 .send-group{display:flex;align-items:center;gap:6px;flex:none;}
 .send svg{width:19px;height:19px;}
-.comp-caption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px;padding:8px 6px 0;font-size:10px;color:var(--ink-4);}
-.comp-caption button{display:flex;align-items:center;gap:4px;background:transparent;color:var(--ink-3);font-size:10px;}
-.comp-caption button:disabled{opacity:.45;cursor:default;}
 .comp-error,.control-error{padding:8px 10px;font-size:12px;line-height:1.5;color:var(--red);overflow-wrap:anywhere;}
 .comp-upload-status{padding:6px 10px;font-size:11px;color:var(--ink-3);}
-.comp-quote{display:flex;align-items:flex-start;gap:10px;margin:12px 14px 0;padding:10px 12px;border-left:3px solid var(--accent);border-radius:5px 12px 12px 5px;background:var(--surface-2);font-size:12px;}
-.comp-quote>div{flex:1;min-width:0;}
-.comp-quote strong{font-weight:500;color:var(--ink-2);}
-.comp-quote p{margin:4px 0 0;color:var(--ink-3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;white-space:pre-wrap;}
-.comp-quote .icon-btn{width:24px;height:24px;flex:none;}
+.comp-quote{margin:12px 14px 0;}
 .hero-controls{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);}
 .hero-controls .comp-model{margin-left:0;}
 .compact-chat{flex:1;}
@@ -1070,7 +1065,8 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .compact-session .sess-head{flex-wrap:wrap;}
 .compact-session .sh-tools{flex-wrap:wrap;}
 .msg-actions{display:flex;margin-top:6px;}
-.msg-actions button{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;background:transparent;font-size:11px;color:var(--ink-4);}
+.msg-actions button{display:flex;align-items:center;gap:5px;min-height:32px;padding:5px 8px;border-radius:6px;background:transparent;font-size:12px;color:var(--ink-3);}
+.msg-actions button svg{width:14px;height:14px;}
 .msg-actions button:hover,.msg-actions button:focus-visible{background:var(--surface-2);color:var(--ink);}
 .msg-body{overflow-wrap:anywhere;min-width:0;}
 button.pop-item{width:100%;text-align:left;background:transparent;color:var(--ink);font:inherit;}
@@ -1084,7 +1080,6 @@ button.pop-item:hover{background:var(--surface-2);}
   .comp-setting{font-size:11px;padding:5px;gap:4px;}
   .comp-model-name{max-width:145px;}
   .comp-area{padding:14px 16px 6px;}
-  .comp-caption{font-size:9px;}
 }
 @container (max-width:310px){
   .comp-control:has(.permission){flex:1;}
@@ -1353,10 +1348,111 @@ button.pop-item:hover{background:var(--surface-2);}
 .pop-item .pi-check svg{width:14px;height:14px;}
 .pop-item .pi-sub{font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:400;}
 .pop-sec{padding:8px 13px 4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
-.pop-custom-model{border-top:1px solid var(--line);padding-bottom:10px;}
+.pop-custom-model{border-top:1px solid var(--line-2);padding-bottom:10px;}
 .pop-custom-row{display:flex;gap:7px;padding:5px 10px;}
 .pop-custom-row input{min-width:260px;flex:1;font-size:11px;}
 .pop-custom-model>.pi-sub{max-width:360px;padding:0 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.run-agent-list{width:260px;max-width:100%;}
+.run-agent-option{min-height:44px;}
+.run-agent-trailing{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ink-3);}
+.run-agent-trailing svg{width:14px;height:14px;}
+.run-settings{width:320px;max-width:100%;}
+.run-settings-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-2);}
+.run-settings-head .run-settings-back{width:auto;font-size:12px;}
+.run-settings-back svg{width:14px;height:14px;}
+.run-settings-field{padding:4px 2px 10px;}
+.run-settings-note{margin:6px 0 0;font-size:11px;line-height:1.5;color:var(--ink-3);overflow-wrap:anywhere;}
+.run-settings .pop-custom-row input{width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;}
+.run-settings .pop-custom-row button{min-height:38px;}
+/* Composer menus share one card treatment without changing task or board menus. */
+.popover.composer-popover{--composer-reasoning:var(--operator);width:348px;padding:8px;border-radius:20px;border-color:var(--line-strong);background:var(--raise);box-shadow:0 12px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.06);}
+[data-theme="light"] .composer-popover{--composer-reasoning:#7c3aed;}
+.composer-menu-heading{padding:8px 10px 10px;font-size:12px;font-weight:500;color:var(--ink-3);}
+.composer-menu-note{margin:0;padding:0 10px 10px;color:var(--ink-3);font-size:11px;line-height:1.5;}
+.composer-popover .composer-option{display:flex;align-items:center;text-align:left;width:100%;min-height:56px;gap:11px;padding:11px 10px;border-radius:12px;font-size:14px;line-height:1.4;}
+.composer-popover .composer-option:hover:not(:disabled),.composer-popover .composer-option[aria-pressed="true"]{background:var(--surface-2);}
+.composer-option-icon{display:grid;place-items:center;flex:none;width:24px;height:26px;color:var(--ink-3);}
+.composer-option-icon svg{width:19px;height:19px;}
+.composer-option-copy{display:block;flex:1;min-width:0;}
+.composer-option-title{display:block;color:var(--ink);font-size:14px;font-weight:500;overflow-wrap:anywhere;}
+.composer-option-sub{display:block;margin-top:3px;color:var(--ink-3);font-size:12px;font-weight:400;line-height:1.45;overflow-wrap:anywhere;}
+.composer-option-trailing{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;color:var(--accent);}
+.composer-option-trailing svg{width:16px;height:16px;}
+.composer-menu-key{color:var(--ink-4);font-size:12px;}
+.composer-popover .pop-sec{padding:8px 10px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;}
+.composer-popover .run-agent-list,.composer-popover .run-settings{width:auto;max-width:none;}
+.composer-popover .run-settings-head{margin:0 2px 10px;padding-bottom:4px;}
+.composer-popover .run-settings-back{min-height:40px;border-radius:10px;font-size:13px;}
+.composer-popover .run-models-back{display:flex;align-items:center;gap:8px;width:auto;min-height:40px;border-radius:10px;font-size:13px;}
+.run-models-back svg{width:14px;height:14px;}
+.run-field-label{display:block;color:var(--ink-3);font-size:12px;font-weight:500;padding:0 8px 8px;}
+.composer-popover .run-model-entry{border:1px solid var(--line);background:var(--surface);}
+.run-model-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.run-model-list{max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain;}
+.run-model-group-title{padding:12px 10px 4px;color:var(--ink-3);font-size:11px;}
+.run-reasoning-card{margin:4px 2px 10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--composer-reasoning) 8%,var(--raise)),var(--raise) 80%);}
+.run-reasoning-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
+.run-reasoning-head .run-field-label{padding:0;}
+.run-reasoning-value{min-width:0;color:var(--composer-reasoning);font-size:18px;font-weight:600;overflow-wrap:anywhere;text-align:right;}
+.run-reasoning-note{margin:8px 0 14px;color:var(--ink-3);font-size:12px;line-height:1.5;}
+.run-reasoning-options{display:flex;flex-wrap:wrap;gap:5px;}
+.run-reasoning-option{flex:1 1 60px;min-height:38px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:var(--raise);color:var(--ink-2);font-size:12px;line-height:1.3;overflow-wrap:anywhere;}
+.run-reasoning-option:hover:not(:disabled){border-color:var(--composer-reasoning);}
+.run-reasoning-option[aria-pressed="true"]{background:var(--composer-reasoning);border-color:transparent;color:var(--raise);font-weight:600;}
+.run-reasoning-option:disabled,.run-reasoning-reset:disabled{opacity:.5;cursor:default;}
+.run-reasoning-reset{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;min-height:36px;margin-top:10px;padding:6px;border-radius:9px;color:var(--ink-3);font-size:12px;}
+.run-reasoning-reset svg{width:14px;height:14px;}
+.run-reasoning-reset:hover:not(:disabled),.run-reasoning-reset[aria-pressed="true"]{color:var(--composer-reasoning);background:color-mix(in srgb,var(--composer-reasoning) 8%,transparent);}
+.run-settings .pop-custom-model{padding-top:8px;}
+.run-settings .pop-custom-model>.composer-menu-heading{display:block;padding-bottom:4px;}
+.run-settings .pop-custom-row input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
+.composer-popover .control-error{margin:4px 2px;border-radius:10px;background:var(--red-soft);}
+.comp-add.on{color:var(--ink);}
+.comp-add.on svg{transform:rotate(45deg);}
+.composer .comp-setting{min-height:38px;border-radius:6px;padding:7px 10px;background:transparent;}
+.composer .comp-add{width:38px;height:38px;border-radius:6px;background:transparent;}
+.composer .comp-setting:hover:not(:disabled),.composer .comp-add:hover:not(:disabled){background:var(--surface-2);}
+.composer .send{width:38px;height:38px;}
+.composer .comp-box{border-radius:26px;border-color:var(--line);box-shadow:0 4px 20px rgba(0,0,0,.035);}
+.composer .comp-box:focus-within{border-color:var(--line-strong);box-shadow:0 6px 24px rgba(0,0,0,.055);}
+.composer .comp-toolbar{gap:6px;padding:6px 12px 12px;}
+.composer .comp-area{padding:18px 20px 12px;}
+.composer .attach-chip.image{width:108px;height:88px;border-radius:12px;}
+.composer .attach-chip.image>img{height:100%;object-fit:cover;}
+.composer .attach-chip .attach-x{width:26px;height:26px;top:4px;right:4px;font-size:16px;}
+.composer .attach-chip.file{border-radius:10px;}
+.composer .attach-row{gap:10px;padding:14px 16px 4px;flex-wrap:nowrap;overflow-x:auto;}
+.composer .attach-row .attach-chip{flex:none;}
+.composer .cli-blocks{max-height:min(30vh,180px);}
+@container(max-width:420px){
+  .composer .comp-area{padding:14px 16px 8px;}
+  .composer .comp-toolbar{gap:4px;padding:6px 10px 10px;}
+  .composer .comp-setting{padding:6px 9px;}
+  .composer .attach-chip.image{width:86px;height:76px;}
+}
+@container(max-width:360px){
+  .composer .comp-toolbar{flex-wrap:nowrap;padding-left:8px;padding-right:8px;}
+  .composer .comp-toolbar>.comp-control{flex:0 0 auto;}
+  .composer .comp-toolbar>.comp-model{flex:0 1 auto;min-width:44px;margin-left:auto;}
+  .composer .comp-setting{font-size:11px;gap:0;padding-left:6px;padding-right:6px;}
+  .composer .comp-setting>svg{display:none;}
+  .composer .comp-model-name{max-width:42px;}
+  .composer .comp-toolbar:not(:has(.send.stop)) .comp-setting{gap:4px;font-size:12px;}
+  .composer .comp-toolbar:not(:has(.send.stop)) .permission>svg:first-child{display:block;width:14px;height:14px;}
+  .composer .comp-toolbar:not(:has(.send.stop)) .comp-model .comp-setting>svg{display:block;width:12px;height:12px;}
+  .composer .comp-foot{flex-wrap:wrap;gap:6px;}
+  .composer .comp-foot>.send-group{margin-left:auto;}
+}
+@media(pointer:coarse){
+  .composer-popover .composer-option{min-height:52px;}
+  .composer .comp-add,.composer .comp-setting,.composer .send{min-width:44px;min-height:44px;}
+  .composer .attach-chip .attach-x{min-width:32px;min-height:32px;}
+}
+@media(prefers-reduced-motion:reduce){.popover.composer-popover{animation:none;}}
+@media(pointer:coarse){
+  .run-settings .pop-custom-row input{min-height:44px;font-size:16px;}
+  .run-settings-back,.run-models-back,.run-settings .pop-custom-row button,.run-reasoning-option,.run-reasoning-reset{min-height:44px;}
+}
 
 /* ⌘K command palette */
 .palette-scrim{position:fixed;inset:0;background:rgba(0,0,0,.38);backdrop-filter:blur(3px);z-index:240;display:flex;align-items:flex-start;justify-content:center;padding-top:13vh;animation:fadein .12s ease;}
@@ -1453,7 +1549,6 @@ button.pop-item:hover{background:var(--surface-2);}
      the home indicator. The keyboard hints are mouse-era noise on a phone. */
   .app.mobile .composer{padding:10px 12px calc(12px + env(safe-area-inset-bottom));}
   .app.mobile .comp-area textarea{font-size:16px;}
-  .app.mobile .comp-caption>span{display:none;}
   .app.mobile .send{width:40px;height:40px;}
 
   /* Ask card options are tap targets — give them room. */
@@ -1659,6 +1754,14 @@ button.pop-item:hover{background:var(--surface-2);}
 .bp-handoff{border:1px solid var(--coral);background:var(--coral-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;line-height:1.6;color:var(--ink);}
 .bp-handoff-sub{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);}
 .bp-viewer{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:var(--sh-2);position:relative;}
+.bp-tabs{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 6px 0;border-bottom:1px solid var(--line-2);background:var(--surface-2);scrollbar-width:thin;}
+.bp-tab{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:72px;max-width:200px;padding:7px 10px;border-radius:6px 6px 0 0;border-bottom:2px solid transparent;color:var(--ink-3);font-size:12px;text-align:left;}
+.bp-tab > span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
+.bp-tab.active{background:var(--panel);border-bottom-color:var(--accent);color:var(--ink);}
+.bp-tab:not(:disabled):hover{background:var(--panel);color:var(--ink);}
+.bp-tab:disabled{cursor:default;}
+.bp-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
+.bp-tab-wait{flex:none;color:var(--accent);}
 .bp-chrome{gap:6px;}
 .bp-nav{width:24px;height:24px;border-radius:4px;color:var(--ink-3);font-size:15px;line-height:1;}
 .bp-nav:not(:disabled):hover{background:var(--surface-2);color:var(--ink);}
@@ -1716,8 +1819,9 @@ button.pop-item:hover{background:var(--surface-2);}
 .sess-head .sh-tools{gap:8px;flex-wrap:nowrap;flex-shrink:0;}
 .session-more{width:32px;height:32px;}
 .session-viewbar{display:flex;align-items:center;gap:16px;min-height:42px;padding:0 22px;border-bottom:1px solid var(--line-2);}
-.session-agent-label{color:var(--ink-3);font-size:12px;}
-.session-branch{margin-left:auto;min-width:0;display:flex;align-items:center;gap:6px;color:var(--ink-4);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.session-origin{display:flex;align-items:center;gap:6px;}
+.session-origin svg{width:14px;height:14px;flex:none;}
+.session-origin span{min-width:0;overflow-wrap:anywhere;}
 .session-viewbar .viewseg{flex-shrink:0;}
 .compact-session .sh-tools{flex-wrap:nowrap;}
 .composer{padding:16px 24px 12px;}
@@ -1725,9 +1829,16 @@ button.pop-item:hover{background:var(--surface-2);}
 .comp-area{padding:18px 20px 10px;}
 .comp-toolbar{padding:4px 14px 12px;}
 .comp-setting{font-size:13px;}
-.comp-caption{font-size:11px;padding-top:9px;}
-.comp-caption button{font-size:11px;}
-.transcript .tw{max-width:800px;}
+/* Transcript and composer share one column; only a wide, isolated chat is capped. */
+[data-chat-layout]{--cli-chat-gutter:16px;--cli-chat-content-max:100%;container:chat-column / inline-size;}
+[data-chat-layout="centered"]{--cli-chat-content-max:50vw;}
+.body[data-chat-sidebars="open"]>.col-session [data-chat-layout="centered"]{--cli-chat-content-max:100%;}
+[data-chat-layout] .transcript>.tw{width:calc(100% - 2 * var(--cli-chat-gutter));max-width:var(--cli-chat-content-max);margin-inline:auto;padding-inline:0;}
+.session [data-chat-layout]>.composer{padding-inline:var(--cli-chat-gutter);padding-inline-end:calc(var(--cli-chat-gutter) + var(--cli-chat-scrollbar,0px));}
+[data-chat-layout]>.composer>.composer-inner{width:100%;max-width:var(--cli-chat-content-max);margin-inline:auto;}
+[data-chat-layout]>.cli-refs,[data-chat-layout]>.cli-queue{width:calc(100% - 2 * var(--cli-chat-gutter) - var(--cli-chat-scrollbar,0px));max-width:var(--cli-chat-content-max);margin-inline:auto;margin-inline-start:max(var(--cli-chat-gutter),calc((100% - var(--cli-chat-scrollbar,0px) - var(--cli-chat-content-max)) / 2));flex-shrink:0;}
+@container chat-column (max-width:900px){[data-chat-layout]>*{--cli-chat-content-max:100%;}}
+@container chat-column (max-width:640px){[data-chat-layout]>*{--cli-chat-gutter:12px;}}
 .task-origin{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-3);padding-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fork-sources{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0;}
 .fork-sources>span{max-width:100%;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;font-size:11px;color:var(--ink-2);overflow-wrap:anywhere;}