@steerable/agent-shell-web 0.6.57 → 0.6.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.57",
+  "version": "0.6.59",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
@@ -45,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-ui": "0.6.57",
-    "@steerable/agent-protocol": "0.6.57"
+    "@steerable/agent-protocol": "0.6.59",
+    "@steerable/agent-ui": "0.6.59"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.57"
+    "@steerable/pack-sdk": "0.6.59"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/AgentSidebar.tsx

@@ -61,6 +61,7 @@
  *   │   今天                          │
  *   │   ...（无项目对话，按日期分组）  │ ← 无项目排在项目分组之后
  *   ├─────────────────────────────────┤
+ *   │ DeepSeek           可用 ↻   │ ← DeepSeek / Kimi 时显示供应商账户余额
  *   │ ⚙ 设置                   v0.2.2 │ ← /settings；右侧是当前版本，检查更新在设置页
  *   └─────────────────────────────────┘
  *
@@ -116,6 +117,7 @@ import {
   SidebarVersionLabel,
   useAppRelease,
 } from "@/components/SidebarRelease";
+import { SidebarAccount } from "@/components/SidebarAccount";
 import { CreateProjectModal } from "@/components/CreateProjectModal";
 import { t } from "@/i18n";
 
@@ -881,7 +883,9 @@ export function AgentSidebar({
     };
   }, [bridge, handleOpenNewChat]);
 
-  // Auto-load next page when the chat scroller approaches the bottom.
+  // Auto-load next page when the chat scroller approaches the bottom. Project
+  // groups need the complete list: otherwise an older project chat outside the
+  // first page makes its project incorrectly render as empty.
   // Throttled by `isLoadingMoreChats` inside the hook.
   useEffect(() => {
     const container = chatScrollRef.current;
@@ -892,7 +896,9 @@ export function AgentSidebar({
       const nearBottom =
         container.scrollTop + container.clientHeight >=
         container.scrollHeight - 60;
-      if (nearBottom) void loadMoreChats();
+      const needsCompleteProjectGroups =
+        showProjectsChrome && projects.length > 0;
+      if (nearBottom || needsCompleteProjectGroups) void loadMoreChats();
     };
     container.addEventListener("scroll", maybeLoadMore, { passive: true });
     const tickId = window.requestAnimationFrame(maybeLoadMore);
@@ -906,6 +912,8 @@ export function AgentSidebar({
     loadMoreChats,
     isRecentsExpanded,
     normalizedChats.length,
+    projects.length,
+    showProjectsChrome,
   ]);
 
   const hasElectron = hasHostBridge();
@@ -1243,6 +1251,7 @@ export function AgentSidebar({
 
       {/* ───── Footer: 设置 ───── */}
       <div className="flex-shrink-0 border-t border-agent-border/40 px-2.5 py-1.5">
+        <SidebarAccount />
         {hasGeneralSettingsChrome() && (
         <button
           type="button"

package/src/components/SidebarAccount.tsx

@@ -0,0 +1,161 @@
+/**
+ * 侧栏底部的供应商账户余额。只在当前模型是 DeepSeek 或 Kimi，
+ * 且本机已经保存了密钥时出现。数字来自供应商余额接口，不是本地估算。
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LuGauge, LuLoaderCircle, LuRefreshCw } from 'react-icons/lu';
+import { t } from '@/i18n';
+import { hasHostBridge } from '@/lib/host-bridge';
+import { getLlmAccount, LLM_SETTINGS_CHANGED_EVENT, type LlmAccount } from '@/lib/local-api';
+
+const POLL_MS = 60_000;
+
+function formatMoney(amount: string, currency: string | null): string {
+  const code = (currency ?? '').toUpperCase();
+  if (code === 'CNY') return `¥${amount}`;
+  if (code === 'USD') return `$${amount}`;
+  return code ? `${code} ${amount}` : amount;
+}
+
+function numericMoney(amount: string | null): number | null {
+  if (amount === null) return null;
+  const value = Number(amount);
+  return Number.isFinite(value) ? value : null;
+}
+
+function breakdown(account: LlmAccount): string {
+  if (account.status !== 'ready') return '';
+  const currency = account.currency;
+  const total = numericMoney(account.total);
+  const granted = numericMoney(account.granted);
+  const toppedUp = numericMoney(account.toppedUp);
+  const hasGrantedBalance = granted !== null && granted > 0;
+  const toppedUpAddsInformation =
+    toppedUp !== null && total !== null && Math.abs(toppedUp - total) > 0.000001;
+  if (!hasGrantedBalance && !toppedUpAddsInformation) return '';
+
+  const parts: string[] = [];
+  if (account.provider === 'deepseek') {
+    if (hasGrantedBalance && account.granted) {
+      parts.push(t('Granted {amount}', { amount: formatMoney(account.granted, currency) }));
+    }
+    if (account.toppedUp) {
+      parts.push(t('Topped up {amount}', { amount: formatMoney(account.toppedUp, currency) }));
+    }
+  } else if (account.provider === 'moonshot') {
+    if (hasGrantedBalance && account.granted) {
+      parts.push(t('Voucher {amount}', { amount: formatMoney(account.granted, currency) }));
+    }
+    if (account.toppedUp) {
+      parts.push(t('Cash {amount}', { amount: formatMoney(account.toppedUp, currency) }));
+    }
+  }
+  return parts.join(' · ');
+}
+
+export function SidebarAccount() {
+  const [account, setAccount] = useState<LlmAccount | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const requestId = useRef(0);
+
+  const load = useCallback(async (refresh: boolean) => {
+    if (!hasHostBridge()) return;
+    const id = ++requestId.current;
+    setRefreshing(true);
+    try {
+      const next = await getLlmAccount(refresh);
+      if (id === requestId.current) setAccount(next);
+    } catch {
+      // 本机接口暂时不可达时保留上一次成功的余额。
+    } finally {
+      if (id === requestId.current) setRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!hasHostBridge()) return;
+    void load(false);
+    const timer = window.setInterval(() => void load(false), POLL_MS);
+    const onFocus = () => void load(false);
+    const onSettings = () => void load(true);
+    window.addEventListener('focus', onFocus);
+    window.addEventListener(LLM_SETTINGS_CHANGED_EVENT, onSettings);
+    return () => {
+      window.clearInterval(timer);
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener(LLM_SETTINGS_CHANGED_EVENT, onSettings);
+    };
+  }, [load]);
+
+  if (!account || (account.status !== 'ready' && account.status !== 'failed')) return null;
+
+  const detail = breakdown(account);
+  const availableLabel = account.available === true
+    ? t('Available')
+    : account.available === false
+      ? t('Unavailable')
+      : null;
+
+  return (
+    <div
+      data-testid="sidebar-account"
+      className="mb-1.5 px-1 py-1"
+      aria-label={t('Account balance')}
+    >
+      <div className="flex items-center gap-1.5">
+        <div className="flex min-w-0 flex-1 items-center gap-1.5 text-[11px] text-agent-foreground">
+          <LuGauge className="h-3 w-3 shrink-0 text-agent-muted-foreground" />
+          <span className="truncate font-medium">{account.label}</span>
+        </div>
+        <button
+          type="button"
+          data-testid="sidebar-account-refresh"
+          title={t('Refresh balance')}
+          aria-label={t('Refresh balance')}
+          disabled={refreshing}
+          onClick={() => void load(true)}
+          className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground/70 transition-colors hover:bg-agent-foreground/10 hover:text-agent-foreground disabled:opacity-50"
+        >
+          {refreshing ? (
+            <LuLoaderCircle className="h-3 w-3 animate-spin" />
+          ) : (
+            <LuRefreshCw className="h-3 w-3" />
+          )}
+        </button>
+      </div>
+      {account.status === 'ready' && account.total ? (
+        <>
+          <div className="mt-1.5 flex items-center justify-between gap-2 px-0.5 text-xs">
+            <span className="shrink-0 text-agent-foreground">{t('Account balance')}</span>
+            <div className="flex min-w-0 items-center justify-end gap-1">
+              <span
+                data-testid="sidebar-account-total"
+                className="truncate font-medium tabular-nums text-agent-foreground"
+              >
+                {formatMoney(account.total, account.currency)}
+              </span>
+              {availableLabel ? (
+                <span
+                  className={`shrink-0 text-[10px] ${account.available ? 'text-emerald-600' : 'text-amber-600'}`}
+                >
+                  {availableLabel}
+                </span>
+              ) : null}
+            </div>
+          </div>
+          {detail ? (
+            <p
+              className="mt-1 truncate px-0.5 text-[9px] leading-none text-agent-muted-foreground"
+              title={detail}
+            >
+              {detail}
+            </p>
+          ) : null}
+        </>
+      ) : (
+        <p className="mt-1 text-[10px] text-agent-muted-foreground">{t('Balance unavailable')}</p>
+      )}
+    </div>
+  );
+}

package/src/components/TerminalView.tsx

@@ -85,6 +85,18 @@ export function TerminalView({
     //   Cmd+V / Ctrl+Shift+V → 从剪贴板读出来 paste 到 PTY
     //   Cmd/Ctrl+A  → 全选
     const isMac = navigator.platform.toUpperCase().includes('MAC');
+    // WKWebView's navigator.clipboard.readText() is empty or prompts; the
+    // desktop host reads the OS pasteboard directly.
+    const pasteFromClipboard = () => {
+      const readText = bridge?.readClipboardText
+        ? () => bridge.readClipboardText!()
+        : () => navigator.clipboard.readText();
+      void readText()
+        .then((text) => {
+          if (text) term.paste(text);
+        })
+        .catch(() => {});
+    };
     term.attachCustomKeyEventHandler((event) => {
       if (event.type !== 'keydown') return true;
       const mod = isMac ? event.metaKey : event.ctrlKey;
@@ -103,12 +115,8 @@ export function TerminalView({
         (isMac && mod && key === 'v') ||
         (!isMac && event.ctrlKey && event.shiftKey && key === 'v')
       ) {
-        void navigator.clipboard
-          .readText()
-          .then((text) => {
-            if (text) term.paste(text);
-          })
-          .catch(() => {});
+        event.preventDefault();
+        pasteFromClipboard();
         return false;
       }
       if (mod && key === 'a' && !event.shiftKey) {
@@ -125,12 +133,7 @@ export function TerminalView({
         void navigator.clipboard.writeText(sel).catch(() => {});
         term.clearSelection();
       } else {
-        void navigator.clipboard
-          .readText()
-          .then((text) => {
-            if (text) term.paste(text);
-          })
-          .catch(() => {});
+        pasteFromClipboard();
       }
     };
     containerRef.current.addEventListener('contextmenu', onContextMenu);

package/src/components/chat/ChatInput.tsx

@@ -85,7 +85,10 @@ export type { ExecPolicy, McpToolItem, SkillItem };
  *   - Compact-mode responsive layout.
  */
 
-const MIN_HEIGHT_PX = 36;
+// Empty field should read as two lines of space. Two lines of text measure
+// 40px (`pt-2` + two 16px line boxes) and still look like one row, so the
+// floor is one line box taller.
+const MIN_HEIGHT_PX = 56;
 const MAX_HEIGHT_PX = 220;
 const MENTION_PATTERN = /(@[^\s@]+)/g;
 const MAX_MENTION_SUGGESTIONS = 8;
@@ -1571,12 +1574,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     };
 
     const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-      if (
-        hostClipboardAvailable() &&
+      // Cmd/Ctrl+V never reaches a paste event when the app menu owns the
+      // shortcut, and WKWebView leaves that event's clipboard empty. Read the
+      // OS pasteboard instead. Match `code` too: with an IME, `key` may not be "v".
+      const pasteShortcut =
         (event.metaKey || event.ctrlKey) &&
         !event.altKey &&
-        event.key.toLowerCase() === 'v'
-      ) {
+        (event.key.toLowerCase() === 'v' || event.key === '\u0016' || event.code === 'KeyV');
+      if (hostClipboardAvailable() && pasteShortcut) {
         event.preventDefault();
         requestHostPaste(event.currentTarget);
         return;

package/src/components/chat/MessageList.tsx

@@ -42,10 +42,9 @@ import type { LlmSpeedSnapshot } from './process-status';
  *   - **No per-chat scroll memory across tabs.** Switching chats remounts
  *     this list (parent passes a new `key`), so we don't need the
  *     `chatScrollMemoryRef` machinery.
- *   - **No sticky user-message group / `--user-msg-h` CSS var.** The cloud
- *     product uses these to keep the user prompt pinned at the top of the
- *     viewport while reading long assistant replies; agent UX defers that
- *     to a later phase.
+ *   - **Sticky user-message group per turn.** Grouped turns pin user prompt
+ *     cards at the top with `sticky top-0 z-10 bg-agent-canvas/95 backdrop-blur-xs`
+ *     until the next turn scrolls into view and naturally pushes it off.
  *   - **No load-more on scroll-up.** Local-backend currently hydrates the
  *     last 200 messages on mount (see `AgentPage.tsx`). Pagination is a
  *     phase-2c follow-up.
@@ -247,41 +246,72 @@ export function MessageList({
     scrollToBottom('auto');
   }, [lastMessageId, lastContentLen, lastTimelineSig, suggestedSig, scrollToBottom]);
 
-  // Group consecutive user messages into turns (方案 A).
-  // A group of 2+ user messages renders as a single connected card with
-  // dividers and "↳ 追加" badges, instead of separate disconnected bubbles.
-  type MessageItem =
-    | { type: 'user-group'; messages: ChatMessage[]; key: string }
-    | { type: 'assistant'; message: ChatMessage; originalIndex: number };
+  // Group consecutive messages into conversation turns.
+  // Each turn has an optional user group (1+ consecutive user messages)
+  // and zero or more subsequent assistant messages.
+  // Grouping into turn containers allows the user prompt to be sticky at
+  // the top of the viewport (`sticky top-0`) while scrolling through long
+  // assistant reasoning/tools/markdown in that turn, until the next turn
+  // scrolls into view and naturally pushes it off.
+  type UserGroupItem = { messages: ChatMessage[]; key: string };
+  type AssistantItem = { message: ChatMessage; originalIndex: number };
+  type ConversationTurn = {
+    key: string;
+    userGroup?: UserGroupItem;
+    assistants: AssistantItem[];
+  };
 
-  const groupedItems = useMemo<MessageItem[]>(() => {
-    const items: MessageItem[] = [];
-    let currentUserGroup: ChatMessage[] = [];
+  const conversationTurns = useMemo<ConversationTurn[]>(() => {
+    const turns: ConversationTurn[] = [];
+    let currentTurn: ConversationTurn | null = null;
+    let pendingUserGroup: ChatMessage[] = [];
 
     for (let i = 0; i < visibleMessages.length; i++) {
       const msg = visibleMessages[i];
       if (msg.role === 'user') {
-        currentUserGroup.push(msg);
+        if (currentTurn && currentTurn.assistants.length > 0) {
+          // Previous turn already has assistant replies; finalize it
+          turns.push(currentTurn);
+          currentTurn = null;
+        }
+        pendingUserGroup.push(msg);
       } else {
-        if (currentUserGroup.length > 0) {
-          items.push({
-            type: 'user-group',
-            messages: currentUserGroup,
-            key: `ug-${currentUserGroup[0].id}`,
-          });
-          currentUserGroup = [];
+        if (!currentTurn) {
+          currentTurn = {
+            key: pendingUserGroup.length > 0
+              ? `turn-${pendingUserGroup[0].id}`
+              : `turn-head-${msg.id}`,
+            userGroup: pendingUserGroup.length > 0
+              ? {
+                  messages: pendingUserGroup,
+                  key: `ug-${pendingUserGroup[0].id}`,
+                }
+              : undefined,
+            assistants: [],
+          };
+          pendingUserGroup = [];
         }
-        items.push({ type: 'assistant', message: msg, originalIndex: i });
+        currentTurn.assistants.push({ message: msg, originalIndex: i });
       }
     }
-    if (currentUserGroup.length > 0) {
-      items.push({
-        type: 'user-group',
-        messages: currentUserGroup,
-        key: `ug-${currentUserGroup[0].id}`,
+
+    if (pendingUserGroup.length > 0) {
+      if (currentTurn) {
+        turns.push(currentTurn);
+      }
+      turns.push({
+        key: `turn-${pendingUserGroup[0].id}`,
+        userGroup: {
+          messages: pendingUserGroup,
+          key: `ug-${pendingUserGroup[0].id}`,
+        },
+        assistants: [],
       });
+    } else if (currentTurn) {
+      turns.push(currentTurn);
     }
-    return items;
+
+    return turns;
   }, [visibleMessages]);
 
   return (
@@ -294,148 +324,154 @@ export function MessageList({
           emptyState ?? null
         ) : (
           <div className="mx-auto w-full max-w-3xl space-y-4">
-            {groupedItems.map((item) => {
-              if (item.type === 'user-group') {
-                if (item.messages.length === 1) {
-                  return (
-                    <UserMessage
-                      key={item.messages[0].id}
-                      message={item.messages[0]}
-                      agents={agents}
-                      chats={chats}
-                    />
-                  );
-                }
-                // Multiple consecutive user messages: render as a unified combined card.
-                return (
-                  <div
-                    key={item.key}
-                    className="group/user-group"
-                    data-message-role="user-group"
-                  >
-                    <div className="flex justify-start">
-                      <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] overflow-hidden rounded-agent-lg border border-agent-border/80 bg-agent-muted/70 shadow-sm">
-                        {item.messages.map((msg, idx) => (
-                          <UserMessage
-                            key={msg.id}
-                            message={msg}
-                            agents={agents}
-                            chats={chats}
-                            isGrouped
-                            isAppended={idx > 0}
-                          />
-                        ))}
+            {conversationTurns.map((turn) => (
+              <div
+                key={turn.key}
+                className="conversation-turn relative space-y-4"
+                data-conversation-turn={turn.key}
+              >
+                {turn.userGroup && (
+                  <div className="sticky top-0 z-10 -mx-3 px-3 py-1 bg-agent-canvas/95 backdrop-blur-xs">
+                    {turn.userGroup.messages.length === 1 ? (
+                      <UserMessage
+                        key={turn.userGroup.messages[0].id}
+                        message={turn.userGroup.messages[0]}
+                        agents={agents}
+                        chats={chats}
+                      />
+                    ) : (
+                      <div
+                        key={turn.userGroup.key}
+                        className="group/user-group"
+                        data-message-role="user-group"
+                      >
+                        <div className="flex justify-start">
+                          <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] overflow-hidden rounded-agent-lg border border-agent-border/80 bg-agent-muted/70 shadow-sm">
+                            {turn.userGroup.messages.map((msg, idx) => (
+                              <UserMessage
+                                key={msg.id}
+                                message={msg}
+                                agents={agents}
+                                chats={chats}
+                                isGrouped
+                                isAppended={idx > 0}
+                              />
+                            ))}
+                          </div>
+                        </div>
                       </div>
-                    </div>
+                    )}
                   </div>
-                );
-              }
+                )}
 
-              const message = item.message;
-              const isLast = item.originalIndex === visibleMessages.length - 1;
-              // Action attribution: prefer the per-message map (set when the
-              // backend's `message_id` event reconciles the stream-time queue
-              // with the DB id). The framework keeps the in-flight assistant's
-              // placeholder id even after the backend emits `message_id`, so
-              // the current page cannot always key by DB id until reload.
-              // Keep showing `currentTurnActions` on the latest assistant turn
-              // after streaming ends; it is cleared when the next turn starts.
-              const persistedActions =
-                executedActionsByMessageId?.[message.id];
-              const isStreamingTail = isStreaming && isLast;
-              const isCurrentTurnTail =
-                isLast && currentTurnActions !== undefined && currentTurnActions.length > 0;
-              const actions = persistedActions
-                ?? (isStreamingTail || isCurrentTurnTail ? currentTurnActions : undefined);
-              const persistedChildren = orchestrationChildrenByMessageId?.[message.id];
-              const isChildrenTail =
-                isLast && currentTurnChildren !== undefined && currentTurnChildren.length > 0;
-              const childList = persistedChildren
-                ?? (isStreamingTail || isChildrenTail ? currentTurnChildren : undefined);
+                {turn.assistants.map((item) => {
+                  const message = item.message;
+                  const isLast = item.originalIndex === visibleMessages.length - 1;
+                  // Action attribution: prefer the per-message map (set when the
+                  // backend's `message_id` event reconciles the stream-time queue
+                  // with the DB id). The framework keeps the in-flight assistant's
+                  // placeholder id even after the backend emits `message_id`, so
+                  // the current page cannot always key by DB id until reload.
+                  // Keep showing `currentTurnActions` on the latest assistant turn
+                  // after streaming ends; it is cleared when the next turn starts.
+                  const persistedActions =
+                    executedActionsByMessageId?.[message.id];
+                  const isStreamingTail = isStreaming && isLast;
+                  const isCurrentTurnTail =
+                    isLast && currentTurnActions !== undefined && currentTurnActions.length > 0;
+                  const actions = persistedActions
+                    ?? (isStreamingTail || isCurrentTurnTail ? currentTurnActions : undefined);
+                  const persistedChildren = orchestrationChildrenByMessageId?.[message.id];
+                  const isChildrenTail =
+                    isLast && currentTurnChildren !== undefined && currentTurnChildren.length > 0;
+                  const childList = persistedChildren
+                    ?? (isStreamingTail || isChildrenTail ? currentTurnChildren : undefined);
 
-              let isPlanMode = false;
-              if (message.messageMetadata) {
-                try {
-                  const meta = JSON.parse(message.messageMetadata);
-                  if (meta?.mode === 'plan') {
+                  let isPlanMode = false;
+                  if (message.messageMetadata) {
+                    try {
+                      const meta = JSON.parse(message.messageMetadata);
+                      if (meta?.mode === 'plan') {
+                        isPlanMode = true;
+                      }
+                    } catch {}
+                  } else if (isStreamingTail && mode === 'plan') {
                     isPlanMode = true;
                   }
-                } catch {}
-              } else if (isStreamingTail && mode === 'plan') {
-                isPlanMode = true;
-              }
 
-              const persistedTimeline = timelineByMessageId?.[message.id];
-              const isCurrentTimelineTail = isLast && currentTurnTimeline !== undefined;
-              const turnTimeline = persistedTimeline
-                ?? (isStreamingTail || isCurrentTimelineTail ? currentTurnTimeline : undefined);
+                  const persistedTimeline = timelineByMessageId?.[message.id];
+                  const isCurrentTimelineTail = isLast && currentTurnTimeline !== undefined;
+                  const turnTimeline = persistedTimeline
+                    ?? (isStreamingTail || isCurrentTimelineTail ? currentTurnTimeline : undefined);
 
-              const persistedTurnFiles = turnFilesByMessageId?.[message.id];
-              const isTurnFilesTail =
-                isLast && currentTurnFiles !== undefined && currentTurnFiles.length > 0;
-              const turnFiles = persistedTurnFiles
-                ?? (isTurnFilesTail ? currentTurnFiles : undefined);
+                  const persistedTurnFiles = turnFilesByMessageId?.[message.id];
+                  const isTurnFilesTail =
+                    isLast && currentTurnFiles !== undefined && currentTurnFiles.length > 0;
+                  const turnFiles = persistedTurnFiles
+                    ?? (isTurnFilesTail ? currentTurnFiles : undefined);
 
-              const metadataJson =
-                typeof message.messageMetadata === 'string'
-                  ? message.messageMetadata
-                  : undefined;
-              let previousUser: ChatMessage | undefined;
-              let previousUserCreatedAt: string | undefined;
-              for (let i = item.originalIndex - 1; i >= 0; i -= 1) {
-                if (visibleMessages[i].role === 'user') {
-                  previousUser = visibleMessages[i];
-                  previousUserCreatedAt = previousUser.createdAt;
-                  break;
-                }
-              }
-              const durationMs = isStreamingTail
-                ? undefined
-                : durationByMessageId?.[message.id]
-                  ?? readPersistedDurationMs(metadataJson)
-                  ?? inferDurationMs(previousUserCreatedAt, message.createdAt);
-              const persistedSpeed = llmSpeedByMessageId?.[message.id];
-              const isSpeedTail = isLast && currentLlmSpeed !== undefined;
-              const llmSpeed =
-                persistedSpeed
-                ?? (isStreamingTail || isSpeedTail ? currentLlmSpeed : undefined);
+                  const metadataJson =
+                    typeof message.messageMetadata === 'string'
+                      ? message.messageMetadata
+                      : undefined;
+                  let previousUser: ChatMessage | undefined;
+                  let previousUserCreatedAt: string | undefined;
+                  for (let i = item.originalIndex - 1; i >= 0; i -= 1) {
+                    if (visibleMessages[i].role === 'user') {
+                      previousUser = visibleMessages[i];
+                      previousUserCreatedAt = previousUser.createdAt;
+                      break;
+                    }
+                  }
+                  const durationMs = isStreamingTail
+                    ? undefined
+                    : durationByMessageId?.[message.id]
+                      ?? readPersistedDurationMs(metadataJson)
+                      ?? inferDurationMs(previousUserCreatedAt, message.createdAt);
+                  const persistedSpeed = llmSpeedByMessageId?.[message.id];
+                  const isSpeedTail = isLast && currentLlmSpeed !== undefined;
+                  const llmSpeed =
+                    persistedSpeed
+                    ?? (isStreamingTail || isSpeedTail ? currentLlmSpeed : undefined);
 
-              return (
-                <div key={message.id}>
-                  <AssistantMessage
-                    message={message}
-                    isStreaming={isStreamingTail}
-                    agents={agents}
-                    chats={chats}
-                    chatId={chatId}
-                    currentAgent={currentAgent}
-                    executedActions={actions}
-                    timeline={turnTimeline}
-                    orchestrationChildren={childList}
-                    previousUser={previousUser}
-                    currentRound={isStreamingTail ? currentRound : undefined}
-                    isPlanMode={isPlanMode}
-                    onRegenerate={onRegenerate}
-                    startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
-                    durationMs={durationMs}
-                    llmSpeed={llmSpeed}
-                    turnFiles={turnFiles}
-                    onShare={message.id === lastAssistantId ? onShare : undefined}
-                    onInspectTask={onInspectTask}
-                  />
-                  {!isStreaming &&
-                  message.id === lastAssistantId &&
-                  suggestedReplies &&
-                  suggestedReplies.length > 0 &&
-                  onSelectSuggestion ? (
-                    <SuggestedReplies
-                      suggestions={suggestedReplies}
-                      onSelect={onSelectSuggestion}
-                    />
-                  ) : null}
-                </div>
-              );
-            })}
+                  return (
+                    <div key={message.id}>
+                      <AssistantMessage
+                        message={message}
+                        isStreaming={isStreamingTail}
+                        agents={agents}
+                        chats={chats}
+                        chatId={chatId}
+                        currentAgent={currentAgent}
+                        executedActions={actions}
+                        timeline={turnTimeline}
+                        orchestrationChildren={childList}
+                        previousUser={previousUser}
+                        currentRound={isStreamingTail ? currentRound : undefined}
+                        isPlanMode={isPlanMode}
+                        onRegenerate={onRegenerate}
+                        startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
+                        durationMs={durationMs}
+                        llmSpeed={llmSpeed}
+                        turnFiles={turnFiles}
+                        onShare={message.id === lastAssistantId ? onShare : undefined}
+                        onInspectTask={onInspectTask}
+                      />
+                      {!isStreaming &&
+                      message.id === lastAssistantId &&
+                      suggestedReplies &&
+                      suggestedReplies.length > 0 &&
+                      onSelectSuggestion ? (
+                        <SuggestedReplies
+                          suggestions={suggestedReplies}
+                          onSelect={onSelectSuggestion}
+                        />
+                      ) : null}
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
             {/* W7-1: 中断提示卡在消息列尾部、与最后一条用户消息同列——
                 视觉上隶属于被截断的那一轮，而非全局横幅。流式期间不显示
                 （进行中的流不是中断）。 */}

package/src/lib/browser-dev-host-mock.ts

@@ -484,6 +484,19 @@ async function request<T>(input: LocalBackendRequestInput): Promise<T> {
     return { success: true, message: 'deleted in browser mock', chatId: deleteChatId } as T;
   }
 
+  if (method === 'GET' && cleanPath === '/api/v2/llm/account') {
+    return {
+      status: 'unsupported',
+      provider: null,
+      label: '',
+      available: null,
+      currency: null,
+      total: null,
+      granted: null,
+      toppedUp: null,
+    } as T;
+  }
+
   throw new Error(`Browser dev mock does not implement ${method} ${path}`);
 }
 

package/src/lib/host-paste.ts

@@ -42,10 +42,7 @@ export function requestHostPaste(target?: HTMLElement | null): void {
   const readText = bridge?.readClipboardText;
   if ((!readClipboard && !readText) || pending) return;
   pending = true;
-  const read = readClipboard
-    ? readClipboard()
-    : readText!().then((text) => ({ text, files: [] as HostClipboardFile[] }));
-  void read
+  void readHostClipboard(readClipboard, readText)
     .then((clip) => {
       if (clip.files.length > 0) insertHostFiles(clip.files, target ?? null);
       if (clip.text) insertHostText(clip.text, target ?? null);
@@ -58,6 +55,30 @@ export function requestHostPaste(target?: HTMLElement | null): void {
     });
 }
 
+/**
+ * Prefer the rich pasteboard (text, files, screenshots). Desktop capabilities
+ * may allow only `host_read_clipboard_text`; a denial of the rich command must
+ * still insert plain text.
+ */
+function readHostClipboard(
+  readClipboard: (() => Promise<HostClipboard>) | undefined,
+  readText: (() => Promise<string>) | undefined,
+): Promise<HostClipboard> {
+  const plain = (): Promise<HostClipboard> => {
+    if (!readText) return Promise.reject(new Error('clipboard text is unavailable'));
+    return readText().then((text) => ({ text, files: [] }));
+  };
+  if (!readClipboard) return plain();
+  return Promise.resolve()
+    .then(() => readClipboard())
+    .catch((error: unknown) => {
+      if (!readText) throw error;
+      return plain().catch(() => {
+        throw error;
+      });
+    });
+}
+
 export function hostClipboardAvailable(): boolean {
   const bridge = getHostBridge();
   return (
@@ -67,13 +88,23 @@ export function hostClipboardAvailable(): boolean {
 
 function isEditable(target: EventTarget | null): target is HTMLElement {
   return (
-    target instanceof HTMLInputElement ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
+    !isTerminalInput(target) &&
+    (target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      (target instanceof HTMLElement && target.isContentEditable))
   );
 }
 
+/**
+ * xterm's hidden textarea. The terminal pastes into its PTY itself; text
+ * written into this textarea never reaches the shell.
+ */
+function isTerminalInput(target: EventTarget | null): boolean {
+  return target instanceof HTMLTextAreaElement && target.closest('.xterm') !== null;
+}
+
 function focusedEditable(): HTMLElement | null {
+  if (isTerminalInput(document.activeElement)) return null;
   if (isEditable(document.activeElement)) return document.activeElement;
   if (lastEditable?.isConnected) return lastEditable;
   return null;

package/src/lib/local-api.ts

@@ -736,6 +736,25 @@ export async function getSidecarSandboxPosture() {
   });
 }
 
+/** 当前 DeepSeek / Kimi 密钥在供应商侧的真实余额。其他厂商为 unsupported。 */
+export interface LlmAccount {
+  status: 'ready' | 'unsupported' | 'missing_key' | 'failed';
+  provider: 'deepseek' | 'moonshot' | null;
+  label: string;
+  available: boolean | null;
+  currency: string | null;
+  total: string | null;
+  granted: string | null;
+  toppedUp: string | null;
+}
+
+export async function getLlmAccount(refresh = false) {
+  return bridge().localBackend.request<LlmAccount>({
+    method: 'GET',
+    path: refresh ? '/api/v2/llm/account?refresh=1' : '/api/v2/llm/account',
+  });
+}
+
 export async function getLlmSettings() {
   return bridge().localBackend.request<LlmSettings>({
     method: 'GET',
@@ -743,12 +762,17 @@ export async function getLlmSettings() {
   });
 }
 
+/** 模型设置保存后通知侧栏重新读取供应商余额。 */
+export const LLM_SETTINGS_CHANGED_EVENT = 'steerable:llm-settings-changed';
+
 export async function setLlmSettings(input: LlmSettings) {
-  return bridge().localBackend.request<LlmSettings>({
+  const saved = await bridge().localBackend.request<LlmSettings>({
     method: 'POST',
     path: '/api/v2/local-settings/llm',
     body: input,
   });
+  window.dispatchEvent(new Event(LLM_SETTINGS_CHANGED_EVENT));
+  return saved;
 }
 
 /* ---------------- LLM link diagnosis ---------------- */

package/src/styles/index.css

@@ -75,26 +75,44 @@ body {
  * ToolExecutionCard header: CJK status labels (已完成 / 失败 / …) wrap at
  * every character when the flex row is squeezed. Keep the trailing status
  * cluster at content width; let the truncated summary take the leftover.
- * Host-side until @steerable/agent-ui ships the same layout classes.
+ *
+ * WKWebView (Tauri) lays out flex items of a <button> in the border box, so
+ * padding-right on that button does not inset 「已完成」. Clear that padding
+ * and inset the status with margin. The card also puts the same inset on an
+ * inner span; these direct-child rules only match the older button markup.
  */
-.steerable-tool-execution > button > span.truncate {
+.steerable-tool-execution span.truncate {
   min-width: 0;
   flex: 1 1 0%;
 }
 
-.steerable-tool-execution > button > span.ml-auto {
+.steerable-tool-execution span.ml-auto {
   flex-shrink: 0;
   white-space: nowrap;
 }
 
-/* 12px 字号下收紧工具行：框架卡默认还是 px-3 py-2。 */
-.steerable-tool-execution > button {
-  gap: 0.375rem;
-  padding: 0.25rem 0.625rem;
+.steerable-tool-execution > div > button.flex-1 {
+  padding-left: 0;
+  padding-right: 0;
+  padding-inline: 0;
+}
+
+.steerable-tool-execution > div > button.flex-1 > span.ml-auto {
+  margin-inline-end: 0.625rem;
+}
+
+.steerable-tool-execution > div > button.flex-1.pl-2\.5 > :first-child {
+  margin-inline-start: 0.625rem;
+}
+
+.steerable-tool-execution > div > button.shrink-0 {
+  padding-left: 0;
+  padding-right: 0;
+  padding-inline: 0;
 }
 
-.steerable-tool-execution > button + div {
-  padding: 0.375rem 0.625rem;
+.steerable-tool-execution > div > button.shrink-0 > svg {
+  margin-inline: 0.625rem;
 }
 
 /*