@spzxg/cli-ui 0.6.8 → 0.6.9

package/dist/cli-ui.js

@@ -1,4 +1,4 @@
-import { C as a, b as i, d as r, e as t, f as o, h as C, i as l, j as n, k as m, m as d, l as u, n as w, o as B, p as f } from "./cli-ui-embed-Be9_d9jB.js";
+import { C as a, b as i, d as r, e as t, f as o, h as C, i as l, j as n, k as m, m as d, l as u, n as w, o as B, p as f } from "./cli-ui-embed-CtZDwP8y.js";
 export {
   a as CliBoard,
   i as CliBrowserView,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spzxg/cli-ui",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "type": "module",
   "description": "相互联动的 CliMsgList、CliChat、CliBoard，支持任务中枢和完整 Operator 工作区。",
   "main": "src/index.ts",

package/src/chat/Composer.tsx

@@ -109,10 +109,11 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   const tooLong = total > MAX_MESSAGE_CHARS;
   const reading = pending.some((p) => p.status === "reading");
   // 运行中不允许排队时，等这一轮结束再发。
-  const canSend = !!message.trim() && !pending.length && !reading && !tooLong && !sending && (!running || options.queue);
+  const canSend = !!message.trim() && !pending.length && !reading && !tooLong && !sending && !stopping && (!running || options.queue);
+  const showStop = running && !!onStop && !sending && (stopping || disabled || !options.queue || !message.trim());
 
   const submit = async () => {
-    if (!canSend || disabled || readComposerDraft(draft).sending) return;
+    if (!canSend || disabled || stopLock.current || readComposerDraft(draft).sending) return;
     const submitted = JSON.stringify([val, blocks]);
     setSending(true);
     setError(null);
@@ -224,12 +225,11 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
                 onClick={async () => { if (controlLock.current) return; controlLock.current = true; setControlling(true); try { await taskControl.onToggle(); } catch (error) { setError(error instanceof Error ? error.message : "执行控制失败，请重试"); } finally { controlLock.current = false; setControlling(false); } }}>
                 {taskControl.paused ? Icon.play() : Icon.pause()}<span>{controlling ? "处理中…" : taskControl.paused ? "继续" : "暂停"}</span>
               </button>}
-              {(!running || (options.queue && (!!message.trim() || sending || !onStop))) && <button type="button" className={`send cli-send${running ? " queue" : ""}`} disabled={disabled || !canSend} aria-busy={sending}
+              {showStop ? stopButton : (!running || options.queue) && <button type="button" className={`send cli-send${running ? " queue" : ""}`} disabled={disabled || !canSend} aria-busy={sending}
                 onClick={() => void submit()} aria-label={sending ? "正在发送" : running ? "排队发送" : "发送消息"}
                 title={sending ? "发送中…" : taskControl?.paused ? "排队发送，继续任务后依次执行" : running ? "排队发送，当前轮次结束后执行" : "发送消息（Enter）"}>
                 {sending ? <span className="spinner" /> : Icon.send()}
               </button>}
-              {stopButton}
             </div>
           </div>
         </div>

package/src/operator/node/Composer.tsx

@@ -196,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 = "";
@@ -303,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 || 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>}
+            {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.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,18 +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: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;}
+/* 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:var(--blue);color:var(--on-accent);}
-.send.stop svg{fill:currentColor;width:15px;height:15px;}
+.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;}}
-/* mid-turn: queue button + stop button sit side by side */
+/* 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;}
@@ -1057,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;}
@@ -1415,7 +1415,7 @@ 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);}
+@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);}
@@ -1438,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;}
 }
@@ -1482,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) */
@@ -1842,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,18 +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: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;}
+/* 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:var(--blue);color:var(--on-accent);}
-.cli-ui .send.stop svg{fill:currentColor;width:15px;height:15px;}
+.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;}}
-/* mid-turn: queue button + stop button sit side by side */
+/* 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;}
@@ -1057,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;}
@@ -1415,7 +1415,7 @@
 .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);}
+@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);}
@@ -1438,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;}
 }
@@ -1482,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) */
@@ -1842,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,8 +54,9 @@
 .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 .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;}
-.cli-ui .cli-attach:hover{background:var(--surface-2);color:var(--ink);}
+@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;}
@@ -454,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;}
@@ -479,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. */

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)}>