@steerable/agent-shell-web 0.6.48 → 0.6.50

package/src/components/ChatHeader.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { LuCheck, LuGitBranch, LuListTodo, LuListTree, LuLoaderCircle } from 'react-icons/lu';
+import { LuCheck, LuDownload, LuGitBranch, LuListTodo, LuListTree, LuLoaderCircle, LuTerminal } from 'react-icons/lu';
 import type { LocalChat, LocalTask } from '@/lib/local-api';
 import {
   activateChatBranch,
@@ -11,6 +11,14 @@ import { SessionTreeModal } from './chat/SessionTreeModal';
 import { TaskPanelModal } from './chat/TaskPanelModal';
 import { actionableTasks, summarizeTasks, type ChatTaskSummary } from './chat/useChatTasks';
 import type { PackChatSlotContribution } from '@/packs/registry';
+import {
+  fetchChatDocument,
+  isPortableEnabled,
+  portableErrorMessage,
+  safeDownloadName,
+  saveJsonFile,
+} from '@/lib/portable';
+import { hostToolChrome } from '@/lib/host-tools';
 
 interface ChatHeaderProps {
   chat: LocalChat | null;
@@ -30,16 +38,17 @@ interface ChatHeaderProps {
   rightPanel?: string | null;
   /** 点击槽位入口：点已打开的关闭，点另一个直接切换。 */
   onToggleChatSlot?: (slotId: string) => void;
+  /** 切换右侧面板（终端、包槽位等）。 */
+  onToggleRightPanel?: (kind: string) => void;
 }
 
 /**
  * ChatHeader — slim title bar above ChatPanel. Shows:
  *   - chat title (完整显示，长标题换行不截断)
  *   - shortened chat id (for support / debugging)
+ *   - 导出 / 分支 / 后台任务 / 包槽位 / 终端 入口
  *
- * Terminal / 场景包调试窗 / 本地模型设置 USED to live here, but per the
- * P1 parity contract (`match_old`) they've been moved to the AgentSidebar
- * bottom strip. 刷新按钮已下线（消息流有 SSE 自动同步）。分享在最后一条
+ * 刷新按钮已下线（消息流有 SSE 自动同步）。分享在最后一条
  * 助手消息的时间戳行，不占标题栏。
  */
 export function ChatHeader({
@@ -50,18 +59,37 @@ export function ChatHeader({
   chatSlots = [],
   rightPanel = null,
   onToggleChatSlot,
+  onToggleRightPanel,
 }: ChatHeaderProps) {
   const [branchMenuOpen, setBranchMenuOpen] = useState(false);
   const [treeModalOpen, setTreeModalOpen] = useState(false);
   const [taskPanelOpen, setTaskPanelOpen] = useState(false);
   const [branches, setBranches] = useState<ChatBranchesResponse | null>(null);
   const [switching, setSwitching] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const [exportError, setExportError] = useState<string | null>(null);
   const [menuBox, setMenuBox] = useState<{ top: number; left: number; width: number } | null>(
     null,
   );
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
 
+  const [isMac, setIsMac] = useState(() => {
+    if (typeof navigator !== 'undefined') {
+      return /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    if (typeof navigator !== 'undefined') {
+      setIsMac(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
+    }
+  }, []);
+
+  const showTerminalChrome = hostToolChrome('terminal');
+  const togglePanel = onToggleRightPanel ?? onToggleChatSlot;
+
   const branchCount = branches ? branches.lineage.length + branches.children.length : 0;
 
   const taskSummary = useMemo(() => summarizeTasks(tasks), [tasks]);
@@ -193,6 +221,30 @@ export function ChatHeader({
           {chat?.title ?? '未选择对话'}
         </span>
       </div>
+      {chat && isPortableEnabled() && (
+        <button
+          type="button"
+          disabled={exporting}
+          onClick={() => {
+            setExporting(true);
+            setExportError(null);
+            void fetchChatDocument(chat.id)
+              .then((doc) => saveJsonFile(safeDownloadName(chat.title, '对话'), doc))
+              .then((saved) => {
+                if (!saved) return;
+              })
+              .catch((err: unknown) => setExportError(portableErrorMessage(err)))
+              .finally(() => setExporting(false));
+          }}
+          className="flex h-7 shrink-0 items-center gap-1 rounded-full px-2 text-xs text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:opacity-60"
+          title={exportError ?? '导出此对话'}
+          aria-label="导出此对话"
+          data-testid="header-export-chat"
+        >
+          <LuDownload className="h-3.5 w-3.5" />
+          {exportError ? '导出失败' : exporting ? '导出中' : '导出'}
+        </button>
+      )}
       {chat && onBranchSwitched && (
         <div className="shrink-0">
           <button
@@ -267,6 +319,24 @@ export function ChatHeader({
             </button>
           );
         })}
+      {chat && showTerminalChrome && (
+        <button
+          type="button"
+          onClick={() => togglePanel?.('terminal')}
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs transition-colors ${
+            rightPanel === 'terminal'
+              ? 'bg-agent-foreground/10 text-agent-foreground'
+              : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground'
+          }`}
+          title={`${rightPanel === 'terminal' ? '关闭' : '打开'}终端面板 (${isMac ? '⌘T' : 'Ctrl+T'})`}
+          aria-label="终端"
+          aria-pressed={rightPanel === 'terminal'}
+          data-action="terminal"
+          data-testid="header-terminal"
+        >
+          <LuTerminal className="h-3.5 w-3.5" />
+        </button>
+      )}
       {chat && taskPanelOpen && (
         <TaskPanelModal
           chatId={chat.id}

package/src/components/chat/ApprovalModal.tsx

@@ -99,6 +99,7 @@ export function ApprovalPromptMenu({
   // 出口没有意义——只给一次性/会话两档，且默认焦点在拒绝（安全默认：
   // 用户能认出 api.github.com，认不出 cdn.jsdelivr.net.evil.com）。
   const isEgress = current.category === 'network_egress';
+  const isSandboxEscalation = current.category === 'sandbox_escalation';
   const egressHost =
     typeof current.arguments.host === 'string' ? current.arguments.host : '';
   const egressPort =
@@ -125,6 +126,8 @@ export function ApprovalPromptMenu({
                     {egressPort !== null ? `:${egressPort}` : ''}
                   </span>
                 </>
+              ) : isSandboxEscalation ? (
+                <>Agent 请求在工作区外执行命令</>
               ) : (
                 <>
                   Agent 请求执行
@@ -153,6 +156,11 @@ export function ApprovalPromptMenu({
               用相似拼写，如 cdn.jsdelivr.net.evil.com）。放行仅对本次会话
               生效；要持久放行请把域名加入设置的出网白名单。
             </p>
+          ) : isSandboxEscalation ? (
+            <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
+              命令已在工作区沙箱中尝试，但被系统拒绝。允许后会仅重试这条原始命令，
+              不再限制它只能写入当前项目或本对话工作区。
+            </p>
           ) : (
             <>
               {current.category !== current.toolName && (

package/src/components/chat/ApprovalPromptProvider.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/lib/electron-bridge';
 
 interface ApprovalPromptContextValue {
+  queue: ApprovalPromptRequest[];
   current: ApprovalPromptRequest | null;
   pendingCount: number;
   decide: (kind: ApprovalDecisionKind) => void;
@@ -78,11 +79,12 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
 
   const value = useMemo(
     () => ({
+      queue,
       current,
       pendingCount: Math.max(0, queue.length - 1),
       decide,
     }),
-    [current, decide, queue.length],
+    [queue, current, decide],
   );
 
   return (
@@ -96,3 +98,16 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
 export function useApprovalPrompt(): ApprovalPromptContextValue | null {
   return useContext(ApprovalPromptContext);
 }
+
+/** 返回存在未处理工具权限审批的会话 ID 集合。 */
+export function usePendingApprovalChatIds(): Set<string> {
+  const context = useContext(ApprovalPromptContext);
+  return useMemo(() => {
+    if (!context) return new Set();
+    const set = new Set<string>();
+    for (const request of context.queue) {
+      if (request.chatId) set.add(request.chatId);
+    }
+    return set;
+  }, [context?.queue]);
+}

package/src/components/chat/AskUserPromptProvider.tsx

@@ -146,3 +146,17 @@ export function useAskUserPrompt(chatId?: string | null): AskUserPromptView | nu
     };
   }, [chatId, context]);
 }
+
+/** 返回存在未处理提问（需要用户回答）的会话 ID 集合。 */
+export function usePendingAskUserChatIds(): Set<string> {
+  const context = useContext(AskUserPromptContext);
+  return useMemo(() => {
+    if (!context) return new Set();
+    const set = new Set<string>();
+    for (const request of context.queue) {
+      if (request.chatId) set.add(request.chatId);
+    }
+    return set;
+  }, [context?.queue]);
+}
+

package/src/components/chat/AssistantMessage.tsx

@@ -441,7 +441,7 @@ export function AssistantMessage({
             回合收尾才有数据，流式期间天然为空。 */}
         {!isStreaming && turnFiles && turnFiles.length > 0 && (
           <div className="mt-2.5 mb-1">
-            <TurnFilesCard files={turnFiles} />
+            <TurnFilesCard files={turnFiles} executedActions={executedActions} />
           </div>
         )}
         <div className="mt-2 flex items-center gap-2 text-[11px] text-agent-muted-foreground/80">

package/src/components/chat/ChatInput.tsx

@@ -33,6 +33,7 @@ import {
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import type { ExecPolicy } from '@/lib/exec-policy';
 import { getWebChatModes, hostToolCapability, settingsChrome } from '@/lib/host-tools';
+import { hostClipboardAvailable, requestHostPaste } from '@/lib/host-paste';
 import type { AttachmentFile } from '@/lib/attachments';
 import type { SteerOutcome } from '@steerable/agent-ui';
 import {
@@ -221,7 +222,6 @@ function mentionChipClassName(ref?: MentionReference): string {
 function getEditableText(element: HTMLDivElement): string {
   return (element.textContent ?? '').replace(/\u00a0/g, ' ');
 }
-
 function isEditorDomEmpty(editor: HTMLDivElement): boolean {
   return getEditableText(editor).length === 0;
 }
@@ -703,6 +703,18 @@ function clipboardFiles(data: DataTransfer | null): File[] {
   return Array.from(data.files ?? []);
 }
 
+function clipboardPlainText(data: DataTransfer | null): string {
+  if (!data) return '';
+  // `text/plain` before any other type: older WebKit clears plain text
+  // if `text/html` is read first.
+  return data.getData('text/plain') || data.getData('text') || '';
+}
+
+function clipboardOf(event: ClipboardEvent<HTMLDivElement>): DataTransfer | null {
+  const native = event.nativeEvent as { clipboardData?: DataTransfer | null };
+  return native.clipboardData ?? event.clipboardData ?? null;
+}
+
 function namePastedImage(file: File, serial: number, now: Date): File {
   if (!file.type.startsWith('image/')) return file;
   if (file.name.trim() && !GENERIC_CLIPBOARD_IMAGE_NAME.test(file.name.trim())) return file;
@@ -802,7 +814,9 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     const pendingCaretOffsetRef = useRef<number | null>(null);
     // Overlay editor + IME: never rewrite textContent/selection while the
     // user is composing. macOS Pinyin otherwise commits the first letter as
-    // Latin instead of starting a marked-text session.
+    // Latin instead of starting a marked-text session. Set only by real
+    // composition events: WKWebView also reports keyCode 229 for committed
+    // keys, with no compositionend to clear a flag guessed from keydown.
     const isComposingRef = useRef(false);
     // Last value we pushed from the editor (or accepted from the parent).
     // While focused, a matching value must not rewrite contenteditable DOM —
@@ -823,6 +837,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 
     const fileInputRef = useRef<HTMLInputElement>(null);
     const pasteSerialRef = useRef(0);
+    const adoptPastedTextRef = useRef<(text: string) => void>(() => {});
     // 工具栏"空间不足时优先隐藏快捷键提示"的测量 refs，见下方 useLayoutEffect。
     const toolbarRowRef = useRef<HTMLDivElement>(null);
     const toolbarLeftRef = useRef<HTMLDivElement>(null);
@@ -1094,9 +1109,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     // or while the focused editor already owns this value.
     useLayoutEffect(() => {
       const editor = editorRef.current;
-      if (!editor || isComposingRef.current || editor.hasAttribute('data-composing')) {
-        return;
-      }
+      if (!editor || isComposingRef.current) return;
+      editor.removeAttribute('data-composing');
       const editorText = getEditableText(editor);
       const focused = document.activeElement === editor;
       const pendingCaretOffset = pendingCaretOffsetRef.current;
@@ -1337,7 +1351,20 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       const { end } = getSelectionOffsets(editor);
       const nextValue = getEditableText(editor);
       lastPushedValueRef.current = nextValue;
-      pendingCaretOffsetRef.current = end;
+      // The browser already rendered this text. Rewrite the DOM only when a
+      // typed token must become a mention chip; any other rewrite detaches the
+      // input method from the text node.
+      const mentionCount = parseMentionSegments(
+        nextValue,
+        mentionReferences,
+        agents,
+        chats,
+        skills,
+        mcpTools,
+      ).filter((segment) => segment.type === 'mention').length;
+      if (mentionCount !== editor.querySelectorAll('[data-mention-chip]').length) {
+        pendingCaretOffsetRef.current = end;
+      }
       onChange(nextValue);
       syncMentionQuery(nextValue, end);
     };
@@ -1365,6 +1392,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       }, 0);
     };
 
+    adoptPastedTextRef.current = replaceSelection;
+
     const handleBeforeInput = (event: FormEvent<HTMLDivElement>) => {
       const native = event.nativeEvent as unknown as InputEvent;
       if (
@@ -1413,16 +1442,34 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         }
         editor.setAttribute('data-composing', 'true');
       };
+      const onHostPaste = (event: Event) => {
+        const text = (event as CustomEvent<string>).detail;
+        if (typeof text !== 'string' || !text) return;
+        event.preventDefault();
+        adoptPastedTextRef.current(text);
+      };
       editor.addEventListener('compositionstart', onCompositionStart, true);
+      editor.addEventListener('hostpaste', onHostPaste);
       return () => {
         editor.removeEventListener('compositionstart', onCompositionStart, true);
+        editor.removeEventListener('hostpaste', onHostPaste);
       };
     }, []);
 
     const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      const data = event.clipboardData;
+      // Read before preventDefault. WebKit clears clipboardData once the paste is canceled.
+      const data = clipboardOf(event);
+      const text = clipboardPlainText(data);
       const pasted = !disabled && allowFileAttach ? clipboardFiles(data) : [];
+      if (!text && pasted.length === 0) {
+        // WKWebView hands the page an empty clipboard; read the OS pasteboard.
+        if (hostClipboardAvailable()) {
+          event.preventDefault();
+          requestHostPaste(event.currentTarget);
+        }
+        return;
+      }
+      event.preventDefault();
       if (pasted.length > 0) {
         const now = new Date();
         addFiles(
@@ -1432,7 +1479,6 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           }),
         );
       }
-      const text = data?.getData('text/plain') ?? '';
       if (text) replaceSelection(text);
     };
 
@@ -1441,33 +1487,21 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     };
 
     const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-      // Honor IME composition (`isComposing` true while Chinese input is mid-
-      // selection) — only intercept on plain key events.
-      // WKWebView reports keyCode 229 for Enter itself. Treating that as IME
-      // composition sticks isComposing and swallows every later Enter, so the
-      // send shortcut never runs. Only non-Enter 229 starts composition.
-      if (event.key !== 'Enter' && (isComposingRef.current || event.nativeEvent.isComposing)) return;
-      if (event.key !== 'Enter' && event.keyCode === 229) {
-        markComposing();
-        return;
-      }
-      // Hide the placeholder on the first letter of an empty editor so it
-      // does not cover IME marked text. Do this even when `isComposing` is
-      // still false (macOS Pinyin first keydown).
       if (
-        !event.metaKey &&
-        !event.ctrlKey &&
+        hostClipboardAvailable() &&
+        (event.metaKey || event.ctrlKey) &&
         !event.altKey &&
-        event.key.length === 1 &&
-        !value
+        event.key.toLowerCase() === 'v'
       ) {
-        editorRef.current?.setAttribute('data-composing', 'true');
-      }
-      // See `compositionEndAtRef` above: treat an Enter that lands right after
-      // `compositionend` as "confirm candidate", not "submit/newline".
-      if (event.key === 'Enter' && Date.now() - compositionEndAtRef.current < 50) {
+        event.preventDefault();
+        requestHostPaste(event.currentTarget);
         return;
       }
+      // Honor IME composition (`isComposing` true while Chinese input is mid-
+      // selection) — only intercept on plain key events. Enter is exempt
+      // because WKWebView reports it with isComposing/keyCode 229 even after
+      // the candidate is committed.
+      if (event.key !== 'Enter' && (isComposingRef.current || event.nativeEvent.isComposing)) return;
 
       if (event.key === 'Backspace' || event.key === 'Delete') {
         const editor = editorRef.current;
@@ -1487,6 +1521,23 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           }
         }
       }
+      // Hide the placeholder on the first letter of an empty editor so it
+      // does not cover IME marked text. Do this even when `isComposing` is
+      // still false (macOS Pinyin first keydown).
+      if (
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.altKey &&
+        event.key.length === 1 &&
+        !value
+      ) {
+        editorRef.current?.setAttribute('data-composing', 'true');
+      }
+      // See `compositionEndAtRef` above: treat an Enter that lands right after
+      // `compositionend` as "confirm candidate", not "submit/newline".
+      if (event.key === 'Enter' && Date.now() - compositionEndAtRef.current < 50) {
+        return;
+      }
 
       if (mentionQuery && mentionSuggestions.length > 0) {
         if (event.key === 'ArrowDown') {

package/src/components/chat/SuggestedReplies.tsx

@@ -20,9 +20,12 @@ export function SuggestedReplies({
       className="mx-auto mt-2.5 flex w-full max-w-[var(--chat-input-box-width)] flex-wrap items-center gap-1.5 px-1 pb-0.5"
       data-testid="suggested-replies"
     >
-      <div className="mr-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-agent-muted-foreground/70 select-none">
+      <div
+        className="mr-0.5 inline-flex items-center select-none"
+        title="建议"
+        aria-label="建议"
+      >
         <LuSparkles className="h-3 w-3 text-agent-muted-foreground/80" />
-        <span>建议回复</span>
       </div>
       {suggestions.map((text) => (
         <button