@spzxg/cli-ui 0.6.7 → 0.6.8

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) {
@@ -249,7 +250,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 +259,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 +283,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 +303,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>}
+            {(!running || !!payload || sending) && <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>}
+            {running && <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>}
           </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

@@ -1029,11 +1029,15 @@ 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{width:44px;height:44px;min-width:44px;min-height:44px;flex:none;padding:0;border-radius:50%;background:var(--accent);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:var(--blue);color:var(--on-accent);}
 .send.stop svg{fill:currentColor;width:15px;height:15px;}
+.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;}}
 /* mid-turn: queue button + stop button sit side by side */
 .send-group{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
 .send svg{width:17px;height:17px;}
@@ -1412,7 +1416,7 @@ button.pop-item:hover{background:var(--surface-2);}
 .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 .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;}
@@ -1549,7 +1553,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;}

package/src/operator.css

@@ -1029,11 +1029,15 @@
 .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{width:44px;height:44px;min-width:44px;min-height:44px;flex:none;padding:0;border-radius:50%;background:var(--accent);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:var(--blue);color:var(--on-accent);}
 .cli-ui .send.stop svg{fill:currentColor;width:15px;height:15px;}
+.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;}}
 /* mid-turn: queue button + stop button sit side by side */
 .cli-ui .send-group{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
 .cli-ui .send svg{width:17px;height:17px;}
@@ -1412,7 +1416,7 @@
 .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;}
+.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;}
@@ -1549,7 +1553,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;}

package/src/styles.css

@@ -54,12 +54,11 @@
 .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{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;}
 .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 .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){
@@ -495,7 +494,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;}