@steerable/agent-shell-web 0.6.20 → 0.6.22

package/README.md

@@ -17,4 +17,10 @@ bundle; there is no prebuilt `dist/` here. See
 [`docs/spec/architecture.md`](https://github.com/pathlyapp/steerable-framework/blob/develop/docs/spec/architecture.md)
 for the tier model.
 
+Products that require authentication can register an `AppShellGate` from
+`@steerable/agent-shell-web/auth/gate` before calling `bootstrap()`. An
+enabled gate renders before the application router and calls
+`onAuthenticated` to continue normal bootstrap. With no gate, or a disabled
+gate, startup is unchanged.
+
 License: Apache-2.0.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.20",
+  "version": "0.6.22",
   "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",
@@ -14,6 +14,7 @@
     "url": "https://github.com/pathlyapp/steerable-framework/issues"
   },
   "exports": {
+    "./auth/gate": "./src/auth/gate.ts",
     "./vite.base": {
       "types": "./vite.base.d.ts",
       "default": "./vite.base.js"
@@ -45,8 +46,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-ui": "0.6.20",
-    "@steerable/agent-protocol": "0.6.20"
+    "@steerable/agent-ui": "0.6.22",
+    "@steerable/agent-protocol": "0.6.22"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +60,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.20"
+    "@steerable/pack-sdk": "0.6.22"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/auth/gate.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react';
+
+/**
+ * Optional product-provided gate rendered before the application router.
+ */
+export interface AppShellGate {
+  /** Allows one product entry to disable its gate for unsupported runtimes. */
+  enabled(): boolean;
+  /** Renders authentication UI and resumes bootstrap through the callback. */
+  Component: ComponentType<{ onAuthenticated: () => void }>;
+}
+
+let registeredGate: AppShellGate | null = null;
+
+/** Registers the app-shell gate before calling `bootstrap()`. */
+export function registerAppShellGate(gate: AppShellGate): void {
+  if (registeredGate) {
+    throw new Error('[app-shell-gate] a gate is already registered');
+  }
+  registeredGate = gate;
+}
+
+/** Returns the product-provided gate, if one was registered. */
+export function getAppShellGate(): AppShellGate | null {
+  return registeredGate;
+}

package/src/components/ChatHeader.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { LuCheck, LuGitBranch, LuListTodo, LuListTree, LuLoaderCircle } from 'react-icons/lu';
-import type { LocalChat, LocalChatAgent, LocalTask } from '@/lib/local-api';
+import type { LocalChat, LocalTask } from '@/lib/local-api';
 import {
   activateChatBranch,
   getChatBranches,
@@ -13,7 +13,6 @@ import { actionableTasks, summarizeTasks, type ChatTaskSummary } from './chat/us
 
 interface ChatHeaderProps {
   chat: LocalChat | null;
-  agent: LocalChatAgent | null;
   /**
    * W1.2.1: called after the active branch switches — the page re-hydrates
    * the message list from the re-projected store. When provided (and the
@@ -29,8 +28,6 @@ interface ChatHeaderProps {
 /**
  * ChatHeader — slim title bar above ChatPanel. Shows:
  *   - chat title (完整显示，长标题换行不截断)
- *   - bound agent name + icon (read-only here; switching is done from the
- *     sidebar's expert team list)
  *   - shortened chat id (for support / debugging)
  *
  * Terminal / 场景包调试窗 / 本地模型设置 USED to live here, but per the
@@ -40,7 +37,6 @@ interface ChatHeaderProps {
  */
 export function ChatHeader({
   chat,
-  agent,
   onBranchSwitched,
   onInspectTask,
   tasks = [],
@@ -186,18 +182,6 @@ export function ChatHeader({
         >
           {chat?.title ?? '未选择对话'}
         </span>
-        <span className="shrink-0 text-xs text-agent-muted-foreground">
-          {agent ? (
-            <>
-              <span className="mr-0.5">{agent.icon || '🤖'}</span>
-              {agent.name}
-            </>
-          ) : chat?.agentId ? (
-            <span className="font-mono">{chat.agentId}</span>
-          ) : (
-            <span className="italic">no agent</span>
-          )}
-        </span>
         {chat && (
           <span className="hidden shrink-0 font-mono text-[10px] text-agent-muted-foreground/70 md:inline">
             {shortenId(chat.id)}

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