@steerable/agent-shell-web 0.6.19 → 0.6.21

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.19",
+  "version": "0.6.21",
   "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/ + vite.base.ts), not a build artifact.",
+  "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",
   "homepage": "https://steerableframework.com/",
   "repository": {
@@ -14,13 +14,19 @@
     "url": "https://github.com/pathlyapp/steerable-framework/issues"
   },
   "exports": {
-    "./vite.base": "./vite.base.ts",
+    "./vite.base": {
+      "types": "./vite.base.d.ts",
+      "default": "./vite.base.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
     "public",
-    "vite.base.ts",
+    "vite.base.js",
+    "vite.base.d.ts",
     "README.md"
   ],
   "publishConfig": {
@@ -39,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.19",
-    "@steerable/agent-ui": "0.6.19"
+    "@steerable/agent-ui": "0.6.21",
+    "@steerable/agent-protocol": "0.6.21"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -53,11 +59,12 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.19"
+    "@steerable/pack-sdk": "0.6.21"
   },
   "scripts": {
     "gen": "echo agent-shell-web",
-    "build": "tsc --noEmit",
+    "build": "tsc --noEmit && npm run build:vite-base",
+    "build:vite-base": "tsc vite.base.ts --module esnext --target es2022 --moduleResolution bundler --declaration --skipLibCheck --outDir .",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "lint": "tsc --noEmit",

package/src/components/chat/ApprovalModal.tsx

@@ -1,25 +1,21 @@
-import { useEffect, useState } from 'react';
 import { LuShieldAlert, LuTriangleAlert } from 'react-icons/lu';
 import {
-  getElectronBridge,
   type ApprovalDecisionKind,
   type ApprovalPromptRequest,
 } from '@/lib/electron-bridge';
 
 /**
- * ApprovalModalHost — W4-1 审批代数的 Electron UI 半侧。
+ * ApprovalPromptMenu — W4-1 审批代数的输入区 UI。
  *
- * 挂载一次（AgentPage），订阅主进程广播的 `approval:request`，弹出模态
- * 让用户对工具调用做 7 变体决策（允许/拒绝 × 一次性/会话/持久 + 中止）。
- * 决定经 `approval:decide` IPC 回到主进程，再应答 sidecar 的反向调用。
+ * 由 ApprovalPromptProvider 提供当前请求，在普通输入框的位置让用户对
+ * 工具调用做 7 变体决策（允许/拒绝 × 一次性/会话/持久 + 中止）。
  *
  * 持久化语义（与框架 ApprovalExecutor 对齐）：
  *   - 一次性：只作用于本次调用，不缓存。
  *   - 会话：按 category（默认=工具名）缓存在本 chat 的会话级 cache。
  *   - 持久：写入 ~/.steerable/approvals.json，跨会话生效。
  *
- * 队列为 FIFO：模型一批并发多个工具调用时逐个请示（sidecar 串行等待
- * 每个应答）。组件卸载/无窗口时主进程 fail-closed 为 deny_once。
+ * 请求队列及刷新恢复由 Provider 管理。
  */
 
 const MODE_LABEL: Record<string, string> = {
@@ -88,26 +84,15 @@ function DecisionRow({
   );
 }
 
-export function ApprovalModalHost() {
-  const [queue, setQueue] = useState<ApprovalPromptRequest[]>([]);
-
-  useEffect(() => {
-    const bridge = getElectronBridge();
-    if (!bridge?.approval) return;
-    return bridge.approval.onRequest((request) => {
-      setQueue((prev) => [...prev, request]);
-    });
-  }, []);
-
-  const current = queue[0] ?? null;
-  if (!current) return null;
-
-  const decide = (kind: ApprovalDecisionKind) => {
-    const bridge = getElectronBridge();
-    setQueue((prev) => prev.slice(1));
-    void bridge?.approval?.decide({ requestId: current.requestId, kind });
-  };
-
+export function ApprovalPromptMenu({
+  request: current,
+  pendingCount,
+  onDecide,
+}: {
+  request: ApprovalPromptRequest;
+  pendingCount: number;
+  onDecide: (kind: ApprovalDecisionKind) => void;
+}) {
   const destructive = current.mode === 'destructive';
   // 网络出口拓宽（W-egress-ask）：sidecar 的 web 工具被 egress 代理 403
   // 后发起。白名单是代理进程级的（会话寿命），所以「始终」变体对网络
@@ -121,13 +106,9 @@ export function ApprovalModalHost() {
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
-      role="dialog"
-      aria-modal="true"
-      aria-label="工具调用审批"
-      data-testid="approval-dialog"
+      className="overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas text-sm text-agent-foreground shadow-xl"
+      data-testid="approval-composer"
     >
-      <div className="w-full max-w-lg rounded-agent-lg border border-agent-border bg-agent-canvas shadow-xl">
         <div className="flex items-center gap-2 border-b border-agent-border px-4 py-3">
           {destructive ? (
             <LuTriangleAlert className="h-4 w-4 shrink-0 text-agent-destructive" />
@@ -154,9 +135,9 @@ export function ApprovalModalHost() {
                 </>
               )}
             </div>
-            {queue.length > 1 && (
+            {pendingCount > 0 && (
               <div className="mt-0.5 text-[11px] text-agent-muted-foreground">
-                还有 {queue.length - 1} 个待审批
+                还有 {pendingCount} 个待审批
               </div>
             )}
           </div>
@@ -195,7 +176,7 @@ export function ApprovalModalHost() {
                 ? ALLOW_BUTTONS.filter((b) => b.kind !== 'allow_always')
                 : ALLOW_BUTTONS
             }
-            onPick={decide}
+            onPick={onDecide}
           />
           <div className="flex items-center justify-between gap-2">
             <DecisionRow
@@ -204,11 +185,11 @@ export function ApprovalModalHost() {
                   ? DENY_BUTTONS.filter((b) => b.kind !== 'deny_always')
                   : DENY_BUTTONS
               }
-              onPick={decide}
+              onPick={onDecide}
             />
             <button
               type="button"
-              onClick={() => decide('abort')}
+              onClick={() => onDecide('abort')}
               className="shrink-0 rounded-agent-md bg-agent-destructive px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
               data-testid="approval-abort"
             >
@@ -221,9 +202,8 @@ export function ApprovalModalHost() {
               : '「会话」决定在本对话内记住；「始终」决定写入本机 ~/.steerable/approvals.json，跨对话生效。不操作约 2 分钟后按拒绝处理。'}
           </p>
         </div>
-      </div>
     </div>
   );
 }
 
-export default ApprovalModalHost;
+export default ApprovalPromptMenu;

package/src/components/chat/ApprovalPromptProvider.tsx

@@ -0,0 +1,98 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  getElectronBridge,
+  type ApprovalDecisionKind,
+  type ApprovalPromptRequest,
+} from '@/lib/electron-bridge';
+
+interface ApprovalPromptContextValue {
+  current: ApprovalPromptRequest | null;
+  pendingCount: number;
+  decide: (kind: ApprovalDecisionKind) => void;
+}
+
+const ApprovalPromptContext = createContext<ApprovalPromptContextValue | null>(null);
+
+/** Keeps approval prompts alive while the active composer presents them. */
+export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
+  const [queue, setQueue] = useState<ApprovalPromptRequest[]>([]);
+  const decidedRequestIds = useRef(new Set<string>());
+
+  useEffect(() => {
+    const bridge = getElectronBridge();
+    if (!bridge?.approval) return;
+    let active = true;
+    const addRequests = (
+      requests: ApprovalPromptRequest[],
+      placement: 'append' | 'prepend' = 'append',
+    ) => {
+      setQueue((previous) => {
+        const known = new Set(previous.map(({ requestId }) => requestId));
+        const additions = requests.filter(
+          ({ requestId }) =>
+            !known.has(requestId) && !decidedRequestIds.current.has(requestId),
+        );
+        if (additions.length === 0) return previous;
+        return placement === 'prepend'
+          ? [...additions, ...previous]
+          : [...previous, ...additions];
+      });
+    };
+    const unsubscribe = bridge.approval.onRequest((request) => {
+      addRequests([request]);
+    });
+    void bridge.approval
+      .pending()
+      .then((requests) => {
+        if (active) addRequests(requests, 'prepend');
+      })
+      .catch((error) => {
+        console.error('恢复待审批请求失败:', error);
+      });
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, []);
+
+  const current = queue[0] ?? null;
+  const decide = useCallback(
+    (kind: ApprovalDecisionKind) => {
+      if (!current) return;
+      const bridge = getElectronBridge();
+      decidedRequestIds.current.add(current.requestId);
+      setQueue((previous) => previous.slice(1));
+      void bridge?.approval?.decide({ requestId: current.requestId, kind });
+    },
+    [current],
+  );
+
+  const value = useMemo(
+    () => ({
+      current,
+      pendingCount: Math.max(0, queue.length - 1),
+      decide,
+    }),
+    [current, decide, queue.length],
+  );
+
+  return (
+    <ApprovalPromptContext.Provider value={value}>
+      {children}
+    </ApprovalPromptContext.Provider>
+  );
+}
+
+/** Returns the approval prompt currently assigned to the chat composer. */
+export function useApprovalPrompt(): ApprovalPromptContextValue | null {
+  return useContext(ApprovalPromptContext);
+}

package/src/components/chat/AskUserPromptProvider.tsx

@@ -0,0 +1,99 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { getElectronBridge, type AskUserPromptRequest } from '@/lib/electron-bridge';
+
+type AnswerValue = string | string[];
+
+interface AskUserPromptContextValue {
+  current: AskUserPromptRequest | null;
+  pendingCount: number;
+  answer: (answers: Record<string, AnswerValue>) => void;
+}
+
+const AskUserPromptContext = createContext<AskUserPromptContextValue | null>(null);
+
+/**
+ * Keeps structured user prompts alive across chat navigation while allowing
+ * the active composer to present the current prompt.
+ */
+export function AskUserPromptProvider({ children }: { children: ReactNode }) {
+  const [queue, setQueue] = useState<AskUserPromptRequest[]>([]);
+  const answeredRequestIds = useRef(new Set<string>());
+
+  useEffect(() => {
+    const bridge = getElectronBridge();
+    if (!bridge?.askUser) return;
+    let active = true;
+    const addRequests = (
+      requests: AskUserPromptRequest[],
+      placement: 'append' | 'prepend' = 'append',
+    ) => {
+      setQueue((previous) => {
+        const known = new Set(previous.map(({ requestId }) => requestId));
+        const additions = requests.filter(
+          ({ requestId }) =>
+            !known.has(requestId) && !answeredRequestIds.current.has(requestId),
+        );
+        if (additions.length === 0) return previous;
+        return placement === 'prepend'
+          ? [...additions, ...previous]
+          : [...previous, ...additions];
+      });
+    };
+    const unsubscribe = bridge.askUser.onRequest((request) => {
+      addRequests([request]);
+    });
+    void bridge.askUser
+      .pending()
+      .then((requests) => {
+        if (active) addRequests(requests, 'prepend');
+      })
+      .catch((error) => {
+        console.error('恢复待回答问题失败:', error);
+      });
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, []);
+
+  const current = queue[0] ?? null;
+  const answer = useCallback(
+    (answers: Record<string, AnswerValue>) => {
+      if (!current) return;
+      const bridge = getElectronBridge();
+      answeredRequestIds.current.add(current.requestId);
+      setQueue((previous) => previous.slice(1));
+      void bridge?.askUser?.answer({ requestId: current.requestId, answers });
+    },
+    [current],
+  );
+
+  const value = useMemo(
+    () => ({
+      current,
+      pendingCount: Math.max(0, queue.length - 1),
+      answer,
+    }),
+    [answer, current, queue.length],
+  );
+
+  return (
+    <AskUserPromptContext.Provider value={value}>
+      {children}
+    </AskUserPromptContext.Provider>
+  );
+}
+
+/** Returns the structured prompt currently assigned to the chat composer. */
+export function useAskUserPrompt(): AskUserPromptContextValue | null {
+  return useContext(AskUserPromptContext);
+}

package/src/components/chat/AssistantMessage.tsx

@@ -11,6 +11,8 @@ import { getFriendlyDate } from './timestamp';
 import { useCopy } from './useCopy';
 import type { TurnBlock } from './turn-timeline';
 import { TurnProcessGroup } from './TurnProcessGroup';
+import { TurnFilesCard } from './TurnFilesCard';
+import type { TurnFile } from './turn-files';
 
 /**
  * AssistantMessage — Tier-1 port of `deeppath`'s assistant-bubble.
@@ -55,6 +57,11 @@ interface AssistantMessageProps {
    */
   agents: LocalChatAgent[];
   chats?: LocalChat[];
+  /**
+   * 当前对话。正文行内代码里的路径按它绑定的项目根解析相对路径后，
+   * 确认存在的会变成可点击（见 FilePathCode）。
+   */
+  chatId?: string | null;
   /** Active chat-level agent — used as a fallback during streaming. */
   currentAgent: LocalChatAgent | null;
   /**
@@ -91,6 +98,12 @@ interface AssistantMessageProps {
   startedAtMs?: number;
   /** Frozen wall-clock of a finished turn. */
   durationMs?: number;
+  /**
+   * 本回合产生/修改的文件列表（local-backend 回合收尾时收集，经
+   * `turn_files` SSE + messageMetadata.turnFiles 持久化）。渲染在回答
+   * 气泡之下，点击用系统默认应用打开。空/undefined = 不渲染。
+   */
+  turnFiles?: TurnFile[];
   /**
    * 分享当前对话（截图复制到剪贴板）。只传给最近一条助手消息，画在时间戳
    * 行上，跟复制 / 重新生成同一排。
@@ -198,6 +211,7 @@ export function AssistantMessage({
   isStreaming,
   agents,
   chats = [],
+  chatId = null,
   currentAgent,
   executedActions,
   timeline,
@@ -207,6 +221,7 @@ export function AssistantMessage({
   onRegenerate,
   startedAtMs,
   durationMs,
+  turnFiles,
   onShare,
 }: AssistantMessageProps) {
   const content = message.content || '';
@@ -263,6 +278,7 @@ export function AssistantMessage({
             durationMs={durationMs}
             agents={agents}
             chats={chats}
+            chatId={chatId}
             emptyFallback={
               failure ? (
                 <TurnErrorBubble reason={failure.reason} />
@@ -290,7 +306,7 @@ export function AssistantMessage({
             renderAnswer={(block, isLast) => (
               <div className={bubbleClass(isPlanMode)}>
                 <div className="markdown-content text-sm leading-relaxed text-agent-foreground">
-                  <Markdown agents={agents} chats={chats}>{block.content}</Markdown>
+                  <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
                 </div>
                 {isStreaming && isLast && <StreamingCursor />}
               </div>
@@ -312,7 +328,7 @@ export function AssistantMessage({
             {displayContent ? (
               <div className={bubbleClass(isPlanMode)}>
                 <div className="markdown-content text-sm leading-relaxed text-agent-foreground">
-                  <Markdown agents={agents} chats={chats}>{displayContent}</Markdown>
+                  <Markdown agents={agents} chats={chats} chatId={chatId}>{displayContent}</Markdown>
                 </div>
                 {isStreaming && <StreamingCursor />}
               </div>
@@ -338,6 +354,13 @@ export function AssistantMessage({
             ) : null}
           </>
         )}
+        {/* 回合产物文件列表：钉在回答之下、时间戳行之上（Codex 式收尾）。
+            回合收尾才有数据，流式期间天然为空。 */}
+        {!isStreaming && turnFiles && turnFiles.length > 0 && (
+          <div className="mt-1.5">
+            <TurnFilesCard files={turnFiles} />
+          </div>
+        )}
         <div className="mt-1 flex items-center gap-2 text-[11px] text-agent-muted-foreground">
           <span>
             {message.createdAt