@steerable/agent-shell-web 0.6.51 → 0.6.53

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,90 @@
+/**
+ * 破坏性操作的二次确认弹窗。点遮罩或按 Esc 取消；确认进行中不关闭。
+ */
+import { useEffect, useId } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  pending?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  testId?: string;
+}
+
+export function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel = '删除',
+  pending = false,
+  onCancel,
+  onConfirm,
+  testId = 'confirm-dialog',
+}: ConfirmDialogProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || pending) return;
+      onCancel();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, pending, onCancel]);
+
+  if (!open || typeof document === 'undefined') return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget && !pending) onCancel();
+      }}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      data-testid={testId}
+    >
+      <div className="w-[380px] max-w-[92vw] rounded-2xl border border-agent-border bg-agent-canvas p-5 shadow-2xl">
+        <h2 id={titleId} className="text-base font-semibold text-agent-foreground">
+          {title}
+        </h2>
+        <p
+          id={descriptionId}
+          className="mt-2 text-sm leading-relaxed text-agent-muted-foreground"
+        >
+          {description}
+        </p>
+        <div className="mt-5 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={pending}
+            autoFocus
+            className="h-9 rounded-full px-4 text-sm text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground disabled:opacity-40"
+            data-testid={`${testId}-cancel`}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={pending}
+            className="h-9 rounded-full bg-agent-destructive px-4 text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-40"
+            data-testid={`${testId}-confirm`}
+          >
+            {pending ? '删除中…' : confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/components/CreateProjectModal.tsx

@@ -1,11 +1,12 @@
 /**
  * 新建 / 编辑项目弹窗（Codex 式）：项目是带名字的容器，可附加多个源文件夹。
- * 家目录由后端建在 Documents/<应用名>/<项目名>/；源文件夹只放宽读取。
+ * 家目录由后端建在 Documents/<应用名>/<项目名>/；源文件夹及其子目录也可读写。
  */
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { LuFolder, LuFolderPlus, LuX } from 'react-icons/lu';
 import { BRAND_NAME } from '@/brand';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
 import { getElectronBridge } from '@/lib/electron-bridge';
 
 export interface ProjectFormValues {
@@ -36,7 +37,7 @@ export function CreateProjectModal({
   const [folderDraft, setFolderDraft] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [deleting, setDeleting] = useState(false);
-  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const initialFoldersKey = (initial?.sourceFolders ?? []).join('\0');
 
@@ -47,14 +48,18 @@ export function CreateProjectModal({
     setFolderDraft('');
     setSubmitting(false);
     setDeleting(false);
-    setConfirmDelete(false);
+    setDeleteConfirmOpen(false);
     setError(null);
+  }, [open, initial?.name, initialFoldersKey]);
+
+  useEffect(() => {
+    if (!open || deleteConfirmOpen) return;
     const onKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') onClose();
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [open, onClose, initial?.name, initialFoldersKey]);
+  }, [open, onClose, deleteConfirmOpen]);
 
   if (!open) return null;
   if (typeof document === 'undefined') return null;
@@ -106,10 +111,6 @@ export function CreateProjectModal({
 
   const handleDelete = async () => {
     if (!onDelete || deleting || submitting) return;
-    if (!confirmDelete) {
-      setConfirmDelete(true);
-      return;
-    }
     setDeleting(true);
     setError(null);
     try {
@@ -118,6 +119,7 @@ export function CreateProjectModal({
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
       setDeleting(false);
+      setDeleteConfirmOpen(false);
     }
   };
 
@@ -170,7 +172,10 @@ export function CreateProjectModal({
           )}
 
           <div>
-            <div className="mb-2 text-sm text-agent-foreground">源文件夹</div>
+            <div className="mb-1 text-sm text-agent-foreground">源文件夹</div>
+            <p className="mb-2 text-[11px] text-agent-muted-foreground">
+              这些目录及其子目录可读写。
+            </p>
             <div className="overflow-hidden rounded-2xl border border-agent-border">
               {sourceFolders.map((folder) => (
                 <div
@@ -232,17 +237,13 @@ export function CreateProjectModal({
           {onDelete && (
             <button
               type="button"
-              onClick={() => void handleDelete()}
+              onClick={() => setDeleteConfirmOpen(true)}
               disabled={deleting || submitting}
-              title={
-                confirmDelete
-                  ? '再次点击确认删除（会话会保留为无项目对话）'
-                  : '删除项目（会话保留为无项目对话）'
-              }
+              title="删除项目（会话保留为无项目对话）"
               className="mr-auto h-9 rounded-full px-3 text-sm text-agent-destructive transition-colors hover:bg-agent-destructive/10 disabled:opacity-40"
               data-testid="edit-project-delete"
             >
-              {confirmDelete ? '再次点击确认删除' : '删除本地项目'}
+              删除本地项目
             </button>
           )}
           <button
@@ -265,6 +266,21 @@ export function CreateProjectModal({
           </button>
         </div>
       </div>
+      {onDelete && (
+        <ConfirmDialog
+          open={deleteConfirmOpen}
+          title="删除项目"
+          description={`确定删除项目「${trimmed || '未命名'}」？会话会保留为无项目对话。`}
+          confirmLabel="删除项目"
+          pending={deleting}
+          onCancel={() => {
+            if (deleting) return;
+            setDeleteConfirmOpen(false);
+          }}
+          onConfirm={() => void handleDelete()}
+          testId="edit-project-delete-dialog"
+        />
+      )}
     </div>,
     document.body,
   );

package/src/components/chat/ApprovalModal.tsx

@@ -158,8 +158,7 @@ export function ApprovalPromptMenu({
             </p>
           ) : isSandboxEscalation ? (
             <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
-              命令已在工作区沙箱中尝试，但被系统拒绝。允许后会仅重试这条原始命令，
-              不再限制它只能写入当前项目或本对话工作区。
+              命令已在工作区沙箱中被拒绝。允许后只重试这条命令，不再限制写入范围。
             </p>
           ) : (
             <>
@@ -169,9 +168,7 @@ export function ApprovalPromptMenu({
                 </p>
               )}
               <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
-                默认在工作区沙箱中执行（只能写入当前项目或本对话工作区）。写入
-                Downloads 等工作区外路径会被系统拒绝；需要时在输入框把沙箱切到「完整权限」后再让
-                Agent 重试。
+                在工作区沙箱中执行，范围外的写入会被拒绝。需要写到外面时，把沙箱切到「完整权限」后再试。
               </p>
             </>
           )}

package/src/components/chat/ApprovalPromptProvider.tsx

@@ -13,9 +13,14 @@ import {
   type ApprovalDecisionKind,
   type ApprovalPromptRequest,
 } from '@/lib/electron-bridge';
+import { bindPromptToActiveChat, promptVisibleInChat } from './prompt-chat-scope';
 
 interface ApprovalPromptContextValue {
   queue: ApprovalPromptRequest[];
+  decide: (requestId: string, kind: ApprovalDecisionKind) => void;
+}
+
+interface ApprovalPromptView {
   current: ApprovalPromptRequest | null;
   pendingCount: number;
   decide: (kind: ApprovalDecisionKind) => void;
@@ -23,7 +28,10 @@ interface ApprovalPromptContextValue {
 
 const ApprovalPromptContext = createContext<ApprovalPromptContextValue | null>(null);
 
-/** Keeps approval prompts alive while the active composer presents them. */
+/**
+ * Keeps approval prompts alive across chat navigation. Each composer
+ * presents only the prompt that belongs to its chat.
+ */
 export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
   const [queue, setQueue] = useState<ApprovalPromptRequest[]>([]);
   const decidedRequestIds = useRef(new Set<string>());
@@ -38,10 +46,12 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
     ) => {
       setQueue((previous) => {
         const known = new Set(previous.map(({ requestId }) => requestId));
-        const additions = requests.filter(
-          ({ requestId }) =>
-            !known.has(requestId) && !decidedRequestIds.current.has(requestId),
-        );
+        const additions = requests
+          .filter(
+            ({ requestId }) =>
+              !known.has(requestId) && !decidedRequestIds.current.has(requestId),
+          )
+          .map(bindPromptToActiveChat);
         if (additions.length === 0) return previous;
         return placement === 'prepend'
           ? [...additions, ...previous]
@@ -65,26 +75,19 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
     };
   }, []);
 
-  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 decide = useCallback((requestId: string, kind: ApprovalDecisionKind) => {
+    const bridge = getElectronBridge();
+    decidedRequestIds.current.add(requestId);
+    setQueue((previous) => previous.filter((request) => request.requestId !== requestId));
+    void bridge?.approval?.decide({ requestId, kind });
+  }, []);
 
   const value = useMemo(
     () => ({
       queue,
-      current,
-      pendingCount: Math.max(0, queue.length - 1),
       decide,
     }),
-    [queue, current, decide],
+    [decide, queue],
   );
 
   return (
@@ -94,9 +97,22 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
   );
 }
 
-/** Returns the approval prompt currently assigned to the chat composer. */
-export function useApprovalPrompt(): ApprovalPromptContextValue | null {
-  return useContext(ApprovalPromptContext);
+/** Returns the approval prompt for this composer’s chat, if one is waiting. */
+export function useApprovalPrompt(chatId?: string | null): ApprovalPromptView | null {
+  const context = useContext(ApprovalPromptContext);
+  return useMemo(() => {
+    if (!context) return null;
+    const mine = context.queue.filter((request) => promptVisibleInChat(request, chatId));
+    const current = mine[0] ?? null;
+    return {
+      current,
+      pendingCount: Math.max(0, mine.length - 1),
+      decide: (kind) => {
+        if (!current) return;
+        context.decide(current.requestId, kind);
+      },
+    };
+  }, [chatId, context]);
 }
 
 /** 返回存在未处理工具权限审批的会话 ID 集合。 */

package/src/components/chat/AskUserPromptProvider.tsx

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from 'react';
 import { getElectronBridge, type AskUserPromptRequest } from '@/lib/electron-bridge';
+import { bindPromptToActiveChat, promptVisibleInChat } from './prompt-chat-scope';
 
 type AnswerValue = string | string[];
 
@@ -23,38 +24,6 @@ interface AskUserPromptView {
   answer: (answers: Record<string, AnswerValue>) => void;
 }
 
-/**
- * Chat id from `#/agent/:chatId` (hash router) or `/agent/:chatId`.
- * The running server build drops `chatId` on the ask-user payload.
- */
-function chatIdFromLocation(location: { pathname: string; hash: string }): string | null {
-  const hashed = location.hash.startsWith('#') ? location.hash.slice(1) : '';
-  const raw = hashed || location.pathname;
-  const match = raw.match(/\/agent\/([^/?#]+)/);
-  if (!match?.[1]) return null;
-  try {
-    return decodeURIComponent(match[1]);
-  } catch {
-    return match[1];
-  }
-}
-
-function bindPromptToActiveChat(request: AskUserPromptRequest): AskUserPromptRequest {
-  if (request.chatId) return request;
-  const chatId = chatIdFromLocation(window.location);
-  if (!chatId) return request;
-  return { ...request, chatId };
-}
-
-/** A prompt with a chat id belongs only to that chat. A prompt without one stays visible so an older request is still answerable. */
-function promptVisibleInChat(
-  request: AskUserPromptRequest,
-  chatId: string | null | undefined,
-): boolean {
-  if (!request.chatId) return !chatId;
-  return request.chatId === chatId;
-}
-
 const AskUserPromptContext = createContext<AskUserPromptContextValue | null>(null);
 
 /**