@spzxg/cli-ui 0.6.7 → 0.6.9

package/src/operator/node/Chat.tsx

@@ -18,6 +18,7 @@ import { BranchHistory, useBranchHistory } from "./BranchHistory";
 import { BranchNavigator } from "./BranchNavigator";
 import type { Quote } from "./composerDraft";
 import type { RunControlProps } from "./RunControls";
+import type { ResolvedChatConfig } from "../../core/config";
 const QUIET_AFTER_MS = 180_000;
 function RunningIndicator({ agent, startedAt, lastActivityRef }: { agent: string | null; startedAt: number | null; lastActivityRef: React.MutableRefObject<number> }) {
   const [now, setNow] = useState(() => Date.now());
@@ -68,6 +69,7 @@ export type ChatProps = {
   running: boolean; blockedBy?: string[]; transcriptLoading?: boolean;
   older?: number; onLoadOlder?: (beforeApply?: () => void) => Promise<boolean>;
   controls: RunControlProps; configBusy: boolean; active?: boolean;
+  composer?: Pick<ResolvedChatConfig["composer"], "show" | "fileUpload">;
   onSelectTask: (id: string) => void; onFork: (text: string, sourceIds: string[], requestId: string) => Promise<boolean>;
   onSend: (text: string) => Promise<boolean>; onStop: () => Promise<boolean>;
   onStart: () => void; onEdit: () => void; onClear: () => void; onSetSendContext: (v: boolean) => void;
@@ -76,7 +78,7 @@ export type ChatProps = {
 };
 export function Chat(props: ChatProps) { return <ChatSession key={props.task.id} {...props} />; }
 function ChatSession({ project, task, tasks, agents, messages, running, transcriptLoading, older=0, onLoadOlder,
-  controls, configBusy, active=true, onSelectTask, onFork, onSend, onStop, onClear, onReconnect, onAnswer, onCancelQueued }: ChatProps) {
+  controls, configBusy, composer, active=true, onSelectTask, onFork, onSend, onStop, onClear, onReconnect, onAnswer, onCancelQueued }: ChatProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   useChatScrollbar(scrollRef, task.id);
   const [quoteRequest, setQuoteRequest] = useState<Quote|null>(null);
@@ -439,6 +441,7 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
     pinned.current=false; setAtBottom(false); flowPositioned.current=true;
   },[active,flow.ready,task.parent_task_id]);
   useEffect(()=>{if(!task.parent_task_id && active) scrollToBottom("auto");},[active,task.id]);
+  const queued = <QueuedMessages scopeKey={task.id} messages={messages.filter(message => message.role === "queued")} onCancel={message => stableCancelQueued(message.id)} attachmentUrl={attachment => `/api/tasks/${encodeURIComponent(attachment.taskId)}/uploads/${encodeURIComponent(attachment.name)}`} renderMessage={message => <MessageView m={message} initial={false} hideWho readOnly />} />;
   return (<FileLinkContext.Provider value={fileScope}>
     <>
       <div className="transcript-wrap">
@@ -508,8 +511,8 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
         )}
       </div>
       </div>
-      <Composer tasks={tasks} onFork={onFork} task={task} agentLabel={agentLabel(agents, task.agent)} disabled={task.started!==1} configBusy={configBusy} running={running} onSend={async text => { const sent = await onSend(text); if (sent && !running) scrollToBottom("auto"); return sent; }} onStop={onStop} onClear={onClear} quoteRequest={quoteRequest} onQuoteHandled={()=>setQuoteRequest(null)} controls={controls}
-        queued={<QueuedMessages scopeKey={task.id} messages={messages.filter(message => message.role === "queued")} onCancel={message => stableCancelQueued(message.id)} attachmentUrl={attachment => `/api/tasks/${encodeURIComponent(attachment.taskId)}/uploads/${encodeURIComponent(attachment.name)}`} renderMessage={message => <MessageView m={message} initial={false} hideWho readOnly />} />} />
+      {composer?.show !== false ? <Composer tasks={tasks} onFork={onFork} task={task} agentLabel={agentLabel(agents, task.agent)} disabled={task.started!==1} configBusy={configBusy} running={running} onSend={async text => { const sent = await onSend(text); if (sent && !running) scrollToBottom("auto"); return sent; }} onStop={onStop} onClear={onClear} quoteRequest={quoteRequest} onQuoteHandled={()=>setQuoteRequest(null)} controls={controls}
+        fileUpload={composer?.fileUpload} queued={queued} /> : queued}
     </></FileLinkContext.Provider>
   );
 

package/src/operator/node/Composer.tsx

@@ -21,12 +21,13 @@ import { acknowledgeDraft, DRAFT_EVENT, isTaskSending, setTaskSending, readDraft
 import { getOperatorBoardBackend } from "./boardBackend";
 import { OperatorBoardContext, openOperatorBoard } from "./boardInteraction";
 
-export function Composer({ task, agentLabel, disabled, running, onSend, onStop, onClear, quoteRequest, onQuoteHandled, controls, configBusy, tasks, onFork, queued }: {
+export function Composer({ task, agentLabel, disabled, running, onSend, onStop, onClear, quoteRequest, onQuoteHandled, controls, configBusy, tasks, onFork, queued, fileUpload = true }: {
   task: TaskRow; agentLabel: string; disabled: boolean; running: boolean;
   tasks: TaskRow[]; onFork: (text: string, sourceIds: string[], requestId: string) => Promise<boolean>;
   onSend: (text: string) => Promise<boolean>; onStop: () => Promise<boolean>; onClear: () => void;
   configBusy: boolean; quoteRequest: Quote | null; onQuoteHandled: () => void; controls: RunControlProps;
   queued?: ReactNode;
+  fileUpload?: boolean;
 }) {
   const boardView=useBoardState(task.id);
   const [draft, setDraft] = useState(() => readDraft(task.id));
@@ -116,7 +117,7 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
   const sharedConfigBusy = useConfigurationBusy(task.id);
   const locked = disabled || sending || configBusy || sharedConfigBusy;
   const startUpload = (key: string, file: File) => {
-    if (!backend.uploadFile || locked || uploads.current.has(key)) return;
+    if (!fileUpload || !backend.uploadFile || locked || uploads.current.has(key)) return;
     const taskId = task.id;
     const preview = draftRef.current.attachments.find(a => a.key === key)?.preview;
     const controller = new AbortController();
@@ -143,7 +144,7 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
     });
   };
   const addFiles = (files: File[]) => {
-    if (locked) return;
+    if (locked || !fileUpload) return;
     setError("");
     if (!backend.uploadFile) { setError("当前服务暂不支持附件上传。"); return; }
     for (const f of files) {
@@ -195,14 +196,15 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
   const pendingFork=sources.length&&draft.forkRequest?.signature===currentSignature?draft.forkRequest:null;
   const payload=pendingFork?pendingFork.payload??ownPayload:ownPayload&&!isClear?appendBoardContext(ownPayload,boardView,task.id):ownPayload;
   const tooLong = payload.length > MAX_MESSAGE_CHARS;
-  const canSend = !!payload && !uploading && !failed && !tooLong && !locked;
+  const canSend = !!payload && !uploading && !failed && !tooLong && !locked && !stopping;
+  const showStop = running && !sending && (stopping || locked || !payload);
   const clear = () => {
     if (running || locked || task.started !== 1) return;
     onClear(); setSlash(false);
     if (draft.text.trim() === "/clear") update((d) => ({ ...d, text: "" }));
   };
   const submit = async () => {
-    if (!canSend || sendingRef.current || isTaskSending(task.id) || isConfigurationBusy(task.id)) return;
+    if (!canSend || stoppingRef.current || sendingRef.current || isTaskSending(task.id) || isConfigurationBusy(task.id)) return;
     if (draft.text.trim() === "/clear" && !draft.attachments.length && !draft.quote) { clear(); return; }
     let submittedDraft = draftRef.current;
     let requestId = "";
@@ -249,7 +251,7 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
       {slash && !running && !locked && "/clear".startsWith(draft.text.trim()) && <div className="slash"><button className="slash-item" onClick={clear}><span className="cmd">/clear</span><span className="cd">保存摘要 · 开启新上下文</span></button></div>}
       {queued}
       <div className={`comp-box${dragging ? " dropping" : ""}`}
-        onDragEnter={(e) => { if (hasFileDrag(e)) { e.preventDefault(); if (!locked) { dragDepth.current++; setDragging(true); } } }}
+        onDragEnter={(e) => { if (hasFileDrag(e)) { e.preventDefault(); if (fileUpload && !locked) { dragDepth.current++; setDragging(true); } } }}
         onDragOver={(e) => { if (hasFileDrag(e)) e.preventDefault(); }}
         onDragLeave={() => { if (dragDepth.current > 0 && --dragDepth.current === 0) setDragging(false); }}
         onDrop={(e) => { if (!hasFileDrag(e)) return; e.preventDefault(); dragDepth.current = 0; setDragging(false); addFiles(Array.from(e.dataTransfer.files)); }}>
@@ -258,7 +260,7 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
         {draft.attachments.some(a => a.status !== "ready") && <div className="composer-upload-list">{draft.attachments.filter(a => a.status !== "ready").map(a => <UploadProgress key={a.key} name={a.name}
           status={a.status === "error" ? "error" : a.phase ?? "queued"} bytes={a.bytes} total={a.size} disabled={locked}
           error={`${a.error || "上传失败，请重试。"}${uploadFiles.current.has(a.key) || a.error?.includes("重新选择文件") ? "" : " 请重新选择文件。"}`}
-          onCancel={() => removeAtt(a.key)} onRemove={() => removeAtt(a.key)} onRetry={uploadFiles.current.has(a.key) ? () => startUpload(a.key, uploadFiles.current.get(a.key)!) : undefined} />)}</div>}
+          onCancel={() => removeAtt(a.key)} onRemove={() => removeAtt(a.key)} onRetry={fileUpload && uploadFiles.current.has(a.key) ? () => startUpload(a.key, uploadFiles.current.get(a.key)!) : undefined} />)}</div>}
         {readyAttachments.length > 0 && <div className="attach-row">{readyAttachments.map((a) => <div key={a.key} className={`attach-chip ${a.kind} ${a.status}`} title={a.name}>
           {a.kind === "image" && a.preview ? <img src={a.preview} alt={a.name} /> : <span className="attach-file">{Icon.clip()} {a.name}</span>}
           <button className="attach-x" disabled={locked} aria-label={`移除 ${a.name}`} onClick={() => removeAtt(a.key)}>×</button>
@@ -282,16 +284,16 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
             const files = Array.from(e.clipboardData.files);
             if (files.length) { e.preventDefault(); addFiles(files); return; }
             const text = e.clipboardData.getData("text/plain");
-            if (text.length > PASTE_ATTACH_THRESHOLD) { e.preventDefault(); addFiles([new File([text], "pasted-text.txt", { type: "text/plain" })]); }
+            if (fileUpload && text.length > PASTE_ATTACH_THRESHOLD) { e.preventDefault(); addFiles([new File([text], "pasted-text.txt", { type: "text/plain" })]); }
           }} /></div>
         <div className="comp-toolbar">
-          <input ref={fileRef} type="file" accept={FILE_UPLOAD_ACCEPT} multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />
-          <div className="comp-control"><button className={`comp-add${addOpen ? " on" : ""}`} disabled={locked} title="附件、派生任务与新上下文" aria-label="添加内容" aria-haspopup="dialog" aria-expanded={addOpen} onClick={(e) => { e.stopPropagation(); setAddOpen(!addOpen); }}>{Icon.plus()}</button>
+          {fileUpload && <input ref={fileRef} type="file" accept={FILE_UPLOAD_ACCEPT} multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />}
+          <div className="comp-control"><button className={`comp-add${addOpen ? " on" : ""}`} disabled={locked} title={fileUpload ? "附件、派生任务与新上下文" : "派生任务与新上下文"} aria-label="添加内容" aria-haspopup="dialog" aria-expanded={addOpen} onClick={(e) => { e.stopPropagation(); setAddOpen(!addOpen); }}>{Icon.plus()}</button>
             {addOpen && <Popover className="composer-popover composer-add-popover" ariaLabel="添加内容" placement="top" align="start" onClose={() => setAddOpen(false)}>
               <div className="composer-menu-heading">添加内容</div>
-              <button className="pop-item composer-option" disabled={locked} onClick={() => { setAddOpen(false); fileRef.current?.click(); }}>
+              {fileUpload && <button className="pop-item composer-option" disabled={locked} onClick={() => { setAddOpen(false); fileRef.current?.click(); }}>
                 <span className="composer-option-icon">{Icon.clip()}</span><span className="composer-option-copy"><span className="composer-option-title">添加附件</span><span className="composer-option-sub">HTML、Markdown 最多 100 MiB，其他文件最多 10 MiB</span></span>
-              </button>
+              </button>}
               <button className="pop-item composer-option" disabled={locked} onClick={openMention}>
                 <span className="composer-option-icon">{Icon.git()}</span><span className="composer-option-copy"><span className="composer-option-title">从已完成任务派生</span><span className="composer-option-sub">带上已完成的任务，在新分支继续工作</span></span><span className="composer-option-trailing composer-menu-key">@</span>
               </button>
@@ -302,8 +304,8 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
           </div>
           <RunControls {...controls} disabled={controls.disabled || sending} />
           <div className="send-group">
-            {(!running || !!payload) && <button className={`send${running ? " queue" : ""}`} disabled={!canSend} aria-busy={sending} aria-label={sources.length ? `派生 ${sources.length} 个分支` : running ? "排队发送" : "发送消息"} title={sending ? "发送中…" : running ? "本轮结束后发送" : "发送消息（Enter）"} onClick={() => void submit()}>{sending ? <span className="spinner" /> : Icon.send()}</button>}
-            {running && <button className="send stop" disabled={stopping} aria-busy={stopping} aria-label="停止当前轮次" title={stopping ? "正在停止…" : "停止当前轮次"} onClick={() => void stop()}>{stopping ? <span className="spinner" /> : Icon.stop()}</button>}
+            {showStop ? <button type="button" className="send stop" disabled={stopping} aria-busy={stopping} aria-label={stopping ? "正在停止" : "停止当前轮次"} title={stopping ? "正在停止…" : "停止当前轮次"} onClick={() => void stop()}>{stopping ? <span className="spinner" /> : Icon.stop()}</button>
+              : <button type="button" className={`send${running ? " queue" : ""}`} disabled={!canSend} aria-busy={sending} aria-label={sending ? "正在发送" : sources.length ? `派生 ${sources.length} 个分支` : running ? "排队发送" : "发送消息"} title={sending ? "发送中…" : running ? "本轮结束后发送" : "发送消息（Enter）"} onClick={() => void submit()}>{sending ? <span className="spinner" /> : Icon.send()}</button>}
           </div>
         </div>
       </div>

package/src/operator/node/SessionView.tsx

@@ -30,6 +30,7 @@ import { ColResize } from "./Layout";
 import { WorkspaceTabs } from "../../ui/WorkspaceTabs";
 import { WorkspaceDrawer, useWorkspaceDrawer } from "../../ui/WorkspaceDrawer";
 import { jget, downloadExport } from "./api";
+import { resolveChatConfig, type CliChatConfig } from "../../core/config";
 
 // Non-blocking banner shown when a reopened task's worktree is behind its base
 // branch. Computed (read-only) on open; the actual git op fires only when the user
@@ -92,8 +93,9 @@ function SyncBanner({ taskId, running, pinned, onResolveWithAI, onSwitchToChat }
 }
 
 export function SessionView(props: Parameters<typeof SessionViewInner>[0]) { return <SessionViewInner key={props.task.id} {...props}/>; }
-function SessionViewInner({ project, task, tasks, onSelectTask, onFork, agents, messages, running, blockedBy, transcriptLoading, older=0, onLoadOlder, onSend, onStart, onStop, onClear, clearConfirming, onConfirmClear, onCancelClear, onEdit, onReconnect, onSetStatus, onSetPriority, onSetModel, onSetAgent, onSetReasoning, onSetPermission, onSetSendContext, onResolveWithAI, onMerged, onPrCreated, onAnswer, onCancelQueued, onBack, mobile, railW, onRailWidth, onRailReset, railCollapsed, onRailCollapse, onRailExpand, board }: {
+function SessionViewInner({ project, task, tasks, onSelectTask, onFork, agents, messages, running, blockedBy, transcriptLoading, older=0, onLoadOlder, onSend, onStart, onStop, onClear, clearConfirming, onConfirmClear, onCancelClear, onEdit, onReconnect, onSetStatus, onSetPriority, onSetModel, onSetAgent, onSetReasoning, onSetPermission, onSetSendContext, onResolveWithAI, onMerged, onPrCreated, onAnswer, onCancelQueued, onBack, mobile, railW, onRailWidth, onRailReset, railCollapsed, onRailCollapse, onRailExpand, board, composer }: {
   board?: OperatorBoardOptions;
+  composer?: CliChatConfig["composer"];
   tasks: TaskRow[]; onSelectTask: (id: string) => void; onFork: (text: string, sourceIds: string[], requestId: string) => Promise<boolean>;
   project: ProjectRow; task: TaskRow; agents: AgentsBundle; messages: Msg[]; running: boolean; blockedBy?: string[]; transcriptLoading?: boolean;
   older?: number; onLoadOlder?: (beforeApply?: () => void) => Promise<boolean>;
@@ -181,7 +183,8 @@ function SessionViewInner({ project, task, tasks, onSelectTask, onFork, agents,
   // Run-control pickers + feature gates come from this task's agent capabilities,
   // never a hardcoded list — so the options always match the agent it runs under.
   const caps = capsFor(agents, task.agent);
-  const controls = { task, caps, agents:agents.agents.map(a=>({id:a.id,label:a.label,disabled:!a.authenticated||a.installed===false})), onSetAgent, defaults: findAgent(agents, task.agent)?.defaults, disabled: running, onSetModel, onSetReasoning, onSetPermission };
+  const composerConfig = resolveChatConfig({ composer }).composer;
+  const controls = { task, caps, agents:agents.agents.map(a=>({id:a.id,label:a.label,disabled:!a.authenticated||a.installed===false})), onSetAgent, defaults: findAgent(agents, task.agent)?.defaults, disabled: running, onSetModel, onSetReasoning, onSetPermission, showAgent: composerConfig.agentSelector, showPermission: composerConfig.executionMode };
   // Usage chip: tokens split into fresh work vs re-read cache (the raw total is
   // mostly cache reads and wildly overstates what ran), and a dollar figure whose
   // presentation follows how this agent is signed in — a subscription login's
@@ -259,7 +262,7 @@ function SessionViewInner({ project, task, tasks, onSelectTask, onFork, agents,
         )}
 
         {!hasSession ? (
-          <><div className="hero-controls"><RunControls {...controls} /></div><TaskHero task={task} project={project} onStart={onStart} onEdit={onEdit} onSetSendContext={onSetSendContext} running={running || configBusy} blockedBy={blockedBy} /></>
+          <>{composerConfig.show && <div className="hero-controls"><RunControls {...controls} /></div>}<TaskHero task={task} project={project} onStart={onStart} onEdit={onEdit} onSetSendContext={onSetSendContext} running={running || configBusy} blockedBy={blockedBy} /></>
         ) : (
           // Keep the chat at the same React position across all widths. Moving
           // it between different parents remounted the composer during resize
@@ -267,7 +270,7 @@ function SessionViewInner({ project, task, tasks, onSelectTask, onFork, agents,
           <div className={tabMode||drawerMode ? "sess-responsive" : "sess-split"} style={tabMode||drawerMode ? undefined : { gridTemplateColumns: `minmax(0,1fr) 0px ${railW}px` }}>
             <div className={`sess-main${tabMode||drawerMode ? " compact-chat" : ""}`} data-chat-layout={tabMode||drawerMode?"centered":"wide"} hidden={tabMode && view !== "chat"}><Chat project={project} task={task} tasks={tasks} agents={agents} messages={messages}
               running={running} blockedBy={blockedBy} transcriptLoading={transcriptLoading} older={older} onLoadOlder={onLoadOlder}
-              controls={controls} configBusy={configBusy} active={!tabMode&&!drawerMode || view === "chat"}
+              controls={controls} configBusy={configBusy} composer={composerConfig} active={!tabMode&&!drawerMode || view === "chat"}
               onSelectTask={onSelectTask} onFork={onFork} onSend={onSend} onStop={onStop}
               onStart={onStart} onEdit={onEdit} onClear={onClear} onSetSendContext={onSetSendContext}
               onReconnect={onReconnect} onAnswer={onAnswer} onCancelQueued={onCancelQueued} /></div>

package/src/operator.base.css

@@ -1021,7 +1021,7 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .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;}
 .comp-add svg{width:22px;height:22px;}
-.comp-add:hover,.comp-setting:hover{background:var(--surface-2);}
+@media(hover:hover) and (pointer:fine){.comp-add:hover,.comp-setting:hover{background:var(--surface-2);}}
 .comp-control{position:relative;min-width:0;}
 .comp-model{margin-left:auto;}
 .comp-setting{display:flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:6px 8px;border-radius:10px;color:var(--ink-2);background:transparent;font-size:12px;white-space:nowrap;}
@@ -1029,14 +1029,19 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .comp-setting.elevated{color:var(--amber);}
 .comp-model-name{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
 .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);}
-.send:disabled{opacity:.35;cursor:default;filter:none;}
-.send.stop{background:var(--blue);color:#fff;}
-.send.stop svg{fill:currentColor;width:15px;height:15px;}
-/* mid-turn: queue button + stop button sit side by side */
+/* A 32px visual circle inside a 44px touch target. */
+.send{width:44px;height:44px;min-width:44px;min-height:44px;flex:none;padding:6px;border-radius:50%;background:var(--accent);background-clip:content-box;color:var(--on-accent);display:grid;place-items:center;transition:filter .12s,opacity .12s,transform .12s;}
+.send:hover:not(:disabled){filter:brightness(1.08);}
+.send:active:not(:disabled){transform:scale(.96);filter:brightness(.94);}
+.send:disabled{opacity:.35;cursor:not-allowed;filter:none;}
+.send[aria-busy="true"]{opacity:.7;cursor:progress;}
+.send.stop{background-color:var(--blue);color:var(--on-accent);}
+.send.stop svg{fill:currentColor;width:20px;height:20px;}
+.send .spinner{width:18px;height:18px;border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;}
+@media(prefers-reduced-motion:reduce){.send{transition:none;}.send .spinner{animation:none;}}
+/* Send, queue and stop share one primary action slot. */
 .send-group{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
-.send svg{width:17px;height:17px;}
+.send svg{width:22px;height:22px;}
 .comp-foot{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line-2);background:var(--surface-2);}
 .comp-foot .hint{font-family:var(--mono);font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px;}
 .comp-foot .hint svg{width:13px;height:13px;}
@@ -1053,7 +1058,6 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 @container (max-width:420px){.comp-foot .hint .kbd{display:none;}.run-sw{max-width:130px;}}
 
 .send-group{display:flex;align-items:center;gap:6px;flex:none;}
-.send svg{width:19px;height:19px;}
 .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{margin:12px 14px 0;}
@@ -1411,8 +1415,8 @@ button.pop-item:hover{background:var(--surface-2);}
 .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;}
+@media(hover:hover) and (pointer:fine){.composer .comp-setting:hover:not(:disabled),.composer .comp-add:hover:not(:disabled){background:var(--surface-2);}}
+.composer .send{width:44px;height:44px;}
 .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;}
@@ -1434,12 +1438,11 @@ button.pop-item:hover{background:var(--surface-2);}
   .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-setting{font-size:12px;gap:4px;padding-left:4px;padding-right:4px;}
+  .composer .comp-setting>svg{flex: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 .permission>svg:first-child{width:14px;height:14px;}
+  .composer .comp-model .comp-setting>svg{width:12px;height:12px;}
   .composer .comp-foot{flex-wrap:wrap;gap:6px;}
   .composer .comp-foot>.send-group{margin-left:auto;}
 }
@@ -1478,7 +1481,6 @@ button.pop-item:hover{background:var(--surface-2);}
 /* generic separators / utility */
 .divider{height:1px;background:var(--line);margin:6px 0;}
 
-.send svg{width:17px;height:17px;}
 .sug-btn svg,.btn-sm svg{width:13px;height:13px;}
 
 /* status label (opt-in via .slabel consumers; hidden by default) */
@@ -1549,7 +1551,7 @@ 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 .send{width:40px;height:40px;}
+  .app.mobile .send{width:44px;height:44px;}
 
   /* Ask card options are tap targets — give them room. */
   .app.mobile .ask-opt{padding:10px 13px;}
@@ -1838,7 +1840,7 @@ button.pop-item:hover{background:var(--surface-2);}
 [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;}}
+@container chat-column (max-width:640px){[data-chat-layout]>*{--cli-chat-gutter:12px;}.session [data-chat-layout]>.composer{padding-inline-end:var(--cli-chat-gutter);}}
 .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;}

package/src/operator.css

@@ -1021,7 +1021,7 @@
 .cli-ui .comp-toolbar{display:flex;align-items:center;gap:7px;padding:4px 12px 12px;min-width:0;}
 .cli-ui .comp-add{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;flex:none;color:var(--ink-2);background:transparent;}
 .cli-ui .comp-add svg{width:22px;height:22px;}
-.cli-ui .comp-add:hover,.cli-ui .comp-setting:hover{background:var(--surface-2);}
+@media(hover:hover) and (pointer:fine){.cli-ui .comp-add:hover,.cli-ui .comp-setting:hover{background:var(--surface-2);}}
 .cli-ui .comp-control{position:relative;min-width:0;}
 .cli-ui .comp-model{margin-left:auto;}
 .cli-ui .comp-setting{display:flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:6px 8px;border-radius:10px;color:var(--ink-2);background:transparent;font-size:12px;white-space:nowrap;}
@@ -1029,14 +1029,19 @@
 .cli-ui .comp-setting.elevated{color:var(--amber);}
 .cli-ui .comp-model-name{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
 .cli-ui .comp-setting:disabled,.cli-ui .comp-add:disabled{opacity:.5;cursor:default;}
-.cli-ui .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;}
-.cli-ui .send:hover{filter:brightness(1.07);}
-.cli-ui .send:disabled{opacity:.35;cursor:default;filter:none;}
-.cli-ui .send.stop{background:var(--blue);color:#fff;}
-.cli-ui .send.stop svg{fill:currentColor;width:15px;height:15px;}
-/* mid-turn: queue button + stop button sit side by side */
+/* A 32px visual circle inside a 44px touch target. */
+.cli-ui .send{width:44px;height:44px;min-width:44px;min-height:44px;flex:none;padding:6px;border-radius:50%;background:var(--accent);background-clip:content-box;color:var(--on-accent);display:grid;place-items:center;transition:filter .12s,opacity .12s,transform .12s;}
+.cli-ui .send:hover:not(:disabled){filter:brightness(1.08);}
+.cli-ui .send:active:not(:disabled){transform:scale(.96);filter:brightness(.94);}
+.cli-ui .send:disabled{opacity:.35;cursor:not-allowed;filter:none;}
+.cli-ui .send[aria-busy="true"]{opacity:.7;cursor:progress;}
+.cli-ui .send.stop{background-color:var(--blue);color:var(--on-accent);}
+.cli-ui .send.stop svg{fill:currentColor;width:20px;height:20px;}
+.cli-ui .send .spinner{width:18px;height:18px;border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;}
+@media(prefers-reduced-motion:reduce){.cli-ui .send{transition:none;}.cli-ui .send .spinner{animation:none;}}
+/* Send, queue and stop share one primary action slot. */
 .cli-ui .send-group{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
-.cli-ui .send svg{width:17px;height:17px;}
+.cli-ui .send svg{width:22px;height:22px;}
 .cli-ui .comp-foot{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line-2);background:var(--surface-2);}
 .cli-ui .comp-foot .hint{font-family:var(--mono);font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px;}
 .cli-ui .comp-foot .hint svg{width:13px;height:13px;}
@@ -1053,7 +1058,6 @@
 @container (max-width:420px){.cli-ui .comp-foot .hint .kbd{display:none;}.cli-ui .run-sw{max-width:130px;}}
 
 .cli-ui .send-group{display:flex;align-items:center;gap:6px;flex:none;}
-.cli-ui .send svg{width:19px;height:19px;}
 .cli-ui .comp-error,.cli-ui .control-error{padding:8px 10px;font-size:12px;line-height:1.5;color:var(--red);overflow-wrap:anywhere;}
 .cli-ui .comp-upload-status{padding:6px 10px;font-size:11px;color:var(--ink-3);}
 .cli-ui .comp-quote{margin:12px 14px 0;}
@@ -1411,8 +1415,8 @@
 .cli-ui .comp-add.on svg{transform:rotate(45deg);}
 .cli-ui .composer .comp-setting{min-height:38px;border-radius:6px;padding:7px 10px;background:transparent;}
 .cli-ui .composer .comp-add{width:38px;height:38px;border-radius:6px;background:transparent;}
-.cli-ui .composer .comp-setting:hover:not(:disabled),.cli-ui .composer .comp-add:hover:not(:disabled){background:var(--surface-2);}
-.cli-ui .composer .send{width:38px;height:38px;}
+@media(hover:hover) and (pointer:fine){.cli-ui .composer .comp-setting:hover:not(:disabled),.cli-ui .composer .comp-add:hover:not(:disabled){background:var(--surface-2);}}
+.cli-ui .composer .send{width:44px;height:44px;}
 .cli-ui .composer .comp-box{border-radius:26px;border-color:var(--line);box-shadow:0 4px 20px rgba(0,0,0,.035);}
 .cli-ui .composer .comp-box:focus-within{border-color:var(--line-strong);box-shadow:0 6px 24px rgba(0,0,0,.055);}
 .cli-ui .composer .comp-toolbar{gap:6px;padding:6px 12px 12px;}
@@ -1434,12 +1438,11 @@
   .cli-ui .composer .comp-toolbar{flex-wrap:nowrap;padding-left:8px;padding-right:8px;}
   .cli-ui .composer .comp-toolbar>.comp-control{flex:0 0 auto;}
   .cli-ui .composer .comp-toolbar>.comp-model{flex:0 1 auto;min-width:44px;margin-left:auto;}
-  .cli-ui .composer .comp-setting{font-size:11px;gap:0;padding-left:6px;padding-right:6px;}
-  .cli-ui .composer .comp-setting>svg{display:none;}
+  .cli-ui .composer .comp-setting{font-size:12px;gap:4px;padding-left:4px;padding-right:4px;}
+  .cli-ui .composer .comp-setting>svg{flex:none;}
   .cli-ui .composer .comp-model-name{max-width:42px;}
-  .cli-ui .composer .comp-toolbar:not(:has(.send.stop)) .comp-setting{gap:4px;font-size:12px;}
-  .cli-ui .composer .comp-toolbar:not(:has(.send.stop)) .permission>svg:first-child{display:block;width:14px;height:14px;}
-  .cli-ui .composer .comp-toolbar:not(:has(.send.stop)) .comp-model .comp-setting>svg{display:block;width:12px;height:12px;}
+  .cli-ui .composer .permission>svg:first-child{width:14px;height:14px;}
+  .cli-ui .composer .comp-model .comp-setting>svg{width:12px;height:12px;}
   .cli-ui .composer .comp-foot{flex-wrap:wrap;gap:6px;}
   .cli-ui .composer .comp-foot>.send-group{margin-left:auto;}
 }
@@ -1478,7 +1481,6 @@
 /* generic separators / utility */
 .cli-ui .divider{height:1px;background:var(--line);margin:6px 0;}
 
-.cli-ui .send svg{width:17px;height:17px;}
 .cli-ui .sug-btn svg,.cli-ui .btn-sm svg{width:13px;height:13px;}
 
 /* status label (opt-in via .slabel consumers; hidden by default) */
@@ -1549,7 +1551,7 @@
      the home indicator. The keyboard hints are mouse-era noise on a phone. */
   .cli-ui .app.mobile .composer{padding:10px 12px calc(12px + env(safe-area-inset-bottom));}
   .cli-ui .app.mobile .comp-area textarea{font-size:16px;}
-  .cli-ui .app.mobile .send{width:40px;height:40px;}
+  .cli-ui .app.mobile .send{width:44px;height:44px;}
 
   /* Ask card options are tap targets — give them room. */
   .cli-ui .app.mobile .ask-opt{padding:10px 13px;}
@@ -1838,7 +1840,7 @@
 .cli-ui [data-chat-layout]>.composer>.composer-inner{width:100%;max-width:var(--cli-chat-content-max);margin-inline:auto;}
 .cli-ui [data-chat-layout]>.cli-refs,.cli-ui [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){.cli-ui [data-chat-layout]>*{--cli-chat-content-max:100%;}}
-@container chat-column (max-width:640px){.cli-ui [data-chat-layout]>*{--cli-chat-gutter:12px;}}
+@container chat-column (max-width:640px){.cli-ui [data-chat-layout]>*{--cli-chat-gutter:12px;}.cli-ui .session [data-chat-layout]>.composer{padding-inline-end:var(--cli-chat-gutter);}}
 .cli-ui .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;}
 .cli-ui .fork-sources{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0;}
 .cli-ui .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;}

package/src/styles.css

@@ -54,12 +54,12 @@
 .cli-ui .cli-export{white-space:nowrap;}
 .cli-ui .comp-area textarea{min-width:0;}
 .cli-ui .comp-foot{gap:8px;padding:8px 10px;background:transparent;border-top:0;flex-wrap:wrap;}
-.cli-ui .cli-attach{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 8px;border-radius:7px;color:var(--ink-3);font-size:12px;}
-.cli-ui .cli-attach:hover{background:var(--surface-2);color:var(--ink);}
-.cli-ui .cli-attach svg{width:15px;height:15px;}
-.cli-ui .send.cli-send{display:inline-flex;justify-content:center;gap:5px;width:auto;min-width:76px;padding:0 12px;font-size:12.5px;font-weight:600;}
-.cli-ui .send.cli-send:disabled{background:var(--surface-2);color:var(--ink-4);box-shadow:none;opacity:1;}
-.cli-ui .cli-export:focus-visible,.cli-ui .cli-attach:focus-visible,.cli-ui .send:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
+.cli-ui .comp-foot>.comp-control{flex:0 0 auto;}
+.cli-ui .cli-attach{display:inline-flex;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:44px;padding:0 8px;border-radius:7px;color:var(--ink-3);font-size:12px;}
+@media(hover:hover) and (pointer:fine){.cli-ui .cli-attach:hover{background:var(--surface-2);color:var(--ink);}}
+.cli-ui .cli-attach svg{width:22px;height:22px;}
+.cli-ui .comp-foot:has(.comp-model)>.spacer{display:none;}
+.cli-ui .cli-export:focus-visible,.cli-ui .cli-attach:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
 .cli-ui .cli-task-control{height:34px;padding:0 10px;white-space:nowrap;}
 .cli-ui .cli-task-control:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
 @container cli-chat (max-width:560px){
@@ -455,19 +455,20 @@ cli-split{display:block;}
 .cli-ui .cli-auto-background pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;}
 
 /* The live queue sits just above the composer; expanded content stays in a viewport-bound card. */
-.cli-ui .cli-queue{flex:none;min-width:0;max-height:154px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 12px -1px;padding:4px 8px 8px;border:1px solid var(--line-strong);border-radius:18px 18px 0 0;background:var(--raise);}
-.cli-ui .cli-queue-row{display:flex;align-items:center;gap:8px;min-width:0;min-height:46px;}
+.cli-ui .cli-queue{flex:none;min-width:0;max-height:154px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 16px -12px;padding:4px 10px 16px;border:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--raise);}
+.cli-ui .cli-queue-row{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;}
 .cli-ui .cli-queue-row+.cli-queue-row{border-top:1px solid var(--line-2);}
 .cli-ui .cli-queue-icon{display:grid;place-items:center;flex:none;width:20px;color:var(--ink-4);}
 .cli-ui .cli-queue-icon svg{width:16px;height:16px;}
 .cli-ui .cli-queue-summary{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:40px;padding:4px 0;text-align:left;color:var(--ink-2);}
 .cli-ui .cli-queue-thumb{flex:none;width:32px;height:32px;object-fit:cover;border:1px solid var(--line);border-radius:7px;}
 .cli-ui .cli-queue-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.5;}
-.cli-ui .cli-queue-state{flex:none;color:var(--ink-4);font-size:10px;white-space:nowrap;}
 .cli-ui .cli-queue-remove,.cli-ui .cli-queue-more{display:grid;place-items:center;flex:none;width:30px;height:34px;border-radius:9px;color:var(--ink-3);}
 .cli-ui .cli-queue-remove svg,.cli-ui .cli-queue-more svg{width:17px;height:17px;}
-.cli-ui .cli-queue-remove:hover,.cli-ui .cli-queue-more:hover{background:var(--surface-2);color:var(--ink);}
-.cli-ui .cli-queue-remove:hover{color:var(--red);}
+@media(hover:hover) and (pointer:fine){
+  .cli-ui .cli-queue-remove:hover,.cli-ui .cli-queue-more:hover{background:var(--surface-2);color:var(--ink);}
+  .cli-ui .cli-queue-remove:hover{color:var(--red);}
+}
 .cli-ui .cli-queue-summary:focus-visible,.cli-ui .cli-queue-remove:focus-visible,.cli-ui .cli-queue-more:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:8px;}
 .cli-ui .cli-queue-popover{width:420px;}
 .cli-ui .cli-queue-detail{max-height:min(44vh,320px);overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;}
@@ -480,11 +481,10 @@ cli-split{display:block;}
 .cli-ui .cli-queue-feedback[role="alert"]{color:var(--red);}
 .cli-ui .session>.cli-queue{width:calc(100% - 48px);max-width:800px;align-self:center;margin:8px 24px 16px;border-radius:16px;}
 @container(max-width:420px){
-  .cli-ui .cli-queue{margin:0 8px -1px;padding:4px 6px 7px;max-height:112px;}
+  .cli-ui .cli-queue{margin:0 10px -12px;padding:4px 6px 16px;max-height:112px;}
   .cli-ui .cli-queue-row{gap:5px;}
-  .cli-ui .cli-queue-state{display:none;}
 }
-@media(pointer:coarse){.cli-ui .cli-queue-remove,.cli-ui .cli-queue-more{width:36px;height:40px;}}
+@media(pointer:coarse){.cli-ui .cli-queue-remove,.cli-ui .cli-queue-more{width:44px;height:44px;}}
 @media(max-height:500px){.cli-ui .cli-queue{max-height:70px;}}
 
 /* Keep controls reachable when a keyboard, split host or landscape view leaves little height. */
@@ -495,7 +495,8 @@ cli-split{display:block;}
   .cli-ui .comp-area textarea,.cli-ui .ask-other,.cli-ui .bp-addr,.cli-ui .bp-dialog-in{font-size:16px;}
   .cli-ui .rail-ftab-x{width:32px;height:36px;opacity:1;}
   .cli-ui .cli-ref-x{width:32px;height:32px;}
-  .cli-ui .cli-fv-btn,.cli-ui .cli-fv-back,.cli-ui .cli-fv-icon,.cli-ui .bp-nav,.cli-ui .cli-attach{min-height:36px;min-width:36px;}
+  .cli-ui .cli-fv-btn,.cli-ui .cli-fv-back,.cli-ui .cli-fv-icon,.cli-ui .bp-nav{min-height:36px;min-width:36px;}
+  .cli-ui .cli-attach{min-height:44px;min-width:44px;}
   .cli-ui .rail-collapse{min-width:36px;min-height:36px;}
   .cli-ui .cli-crumb{min-height:36px;}
   .cli-ui .cli-fv-selq{min-height:40px;}

package/src/ui/QueuedMessages.tsx

@@ -55,7 +55,6 @@ function QueuedMessage({ message, index, onCancel, attachmentUrl, renderMessage
       {thumbnail?.url && <img className="cli-queue-thumb" src={thumbnail.url} alt={thumbnail.attachment.name} loading="lazy" onError={event => { event.currentTarget.hidden = true; }} />}
       <span className="cli-queue-text">{preview.summary}</span>
     </button>
-    <span className="cli-queue-state">排队中</span>
     {onCancel && <button className="cli-queue-remove" title="从队列中移除" aria-label={`移除第 ${index + 1} 条排队消息`} onClick={() => onCancel(message)}>{Icon.x()}</button>}
     <button className="cli-queue-more" title="更多排队消息操作" aria-label={`第 ${index + 1} 条排队消息的更多操作`} aria-expanded={open} aria-haspopup="dialog" onClick={toggle}>{Icon.dots()}</button>
     {open && <Popover className="composer-popover cli-queue-popover" ariaLabel="排队消息内容" placement="top" align="start" returnFocusRef={returnFocusRef} onClose={() => setOpen(false)}>