@steerable/agent-shell-web 0.6.15

package/src/components/TerminalView.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useRef, useState } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { LuListTodo } from 'react-icons/lu';
+import '@xterm/xterm/css/xterm.css';
+import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
+import { getElectronBridge } from '@/lib/electron-bridge';
+import { BRAND_NAME } from '@/brand';
+
+/**
+ * Renders an xterm.js terminal wired up to the main-process PTY via the
+ * `terminal.*` bridge. Ported from `deeppath/apps/web/src/app/agent/terminal/
+ * TerminalView.tsx`, with these adaptations:
+ *
+ *   - `window.electron` direct access → `getElectronBridge()` helper so the
+ *     "no bridge" path is type-safe.
+ *   - Removed `'use client'` directive (not a Next.js project).
+ *   - Container is `h-full` instead of `h-screen` so the component is
+ *     embeddable in any parent — currently the embedded `TerminalPanel`
+ *     inside AgentLayout's split view.
+ *   - Optional `onClose` renders a header close button (panel chrome).
+ *   - Header chrome comes from the shared `DockPanelHeader`, so switching
+ *     between terminal and 后台推理 doesn't shift the title bar.
+ *
+ * No business logic changes: same xterm config, same Cmd+C/V handling,
+ * same context-menu copy-paste, same resize observer.
+ */
+export function TerminalView({
+  onClose,
+  onShowTaskProcess,
+  taskProcessTitle,
+}: {
+  onClose?: () => void;
+  /** 缺省时不渲染「后台任务」按钮（本次会话还没看过任何任务）。 */
+  onShowTaskProcess?: () => void;
+  /** 记住的那个任务的标题，只用于按钮 tooltip。 */
+  taskProcessTitle?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const sessionIdRef = useRef<string | null>(null);
+  const [status, setStatus] = useState<'starting' | 'ready' | 'error'>('starting');
+  const [statusMsg, setStatusMsg] = useState<string>('');
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const bridge = getElectronBridge();
+    const terminal = bridge?.terminal;
+    if (!terminal) {
+      setStatus('error');
+      setStatusMsg('window.electron.terminal 不可用');
+      return;
+    }
+
+    const term = new Terminal({
+      fontFamily:
+        'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      fontSize: 13,
+      lineHeight: 1.2,
+      cursorBlink: true,
+      cursorStyle: 'bar',
+      convertEol: true,
+      scrollback: 5000,
+      // macOS 上让 Option 当 Meta（习惯用 alt+f/b 在词间跳转）
+      macOptionIsMeta: true,
+      // 鼠标右键弹系统菜单时会偷走 selection，关掉
+      rightClickSelectsWord: true,
+      theme: {
+        background: '#0b0b0c',
+        foreground: '#e6e6e6',
+        cursor: '#e6e6e6',
+        selectionBackground: '#3a3d41',
+      },
+      allowProposedApi: true,
+    });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.loadAddon(new WebLinksAddon());
+    term.open(containerRef.current);
+    fit.fit();
+
+    // xterm 渲染在 canvas 上，应用菜单的 copy/paste role 抓不到选区。自己拦截：
+    //   Cmd/Ctrl+C  → 有选区就复制，否则放行（让 xterm 走默认 ^C 发 SIGINT）
+    //   Cmd+V / Ctrl+Shift+V → 从剪贴板读出来 paste 到 PTY
+    //   Cmd/Ctrl+A  → 全选
+    const isMac = navigator.platform.toUpperCase().includes('MAC');
+    term.attachCustomKeyEventHandler((event) => {
+      if (event.type !== 'keydown') return true;
+      const mod = isMac ? event.metaKey : event.ctrlKey;
+      const key = event.key.toLowerCase();
+
+      if (mod && key === 'c') {
+        const sel = term.getSelection();
+        if (sel) {
+          void navigator.clipboard.writeText(sel).catch(() => {});
+          term.clearSelection();
+          return false;
+        }
+        return true;
+      }
+      if (
+        (isMac && mod && key === 'v') ||
+        (!isMac && event.ctrlKey && event.shiftKey && key === 'v')
+      ) {
+        void navigator.clipboard
+          .readText()
+          .then((text) => {
+            if (text) term.paste(text);
+          })
+          .catch(() => {});
+        return false;
+      }
+      if (mod && key === 'a' && !event.shiftKey) {
+        term.selectAll();
+        return false;
+      }
+      return true;
+    });
+
+    const onContextMenu = (e: MouseEvent) => {
+      e.preventDefault();
+      const sel = term.getSelection();
+      if (sel) {
+        void navigator.clipboard.writeText(sel).catch(() => {});
+        term.clearSelection();
+      } else {
+        void navigator.clipboard
+          .readText()
+          .then((text) => {
+            if (text) term.paste(text);
+          })
+          .catch(() => {});
+      }
+    };
+    containerRef.current.addEventListener('contextmenu', onContextMenu);
+
+    let cancelled = false;
+    const offData = terminal.onData(({ sessionId, chunk }) => {
+      if (sessionIdRef.current && sessionId === sessionIdRef.current) {
+        term.write(chunk);
+      }
+    });
+    const offExit = terminal.onExit(({ sessionId, code }) => {
+      if (sessionIdRef.current === sessionId) {
+        term.writeln(`\r\n\x1b[33m[process exited with code ${code}]\x1b[0m`);
+      }
+    });
+
+    (async () => {
+      try {
+        const dims = fit.proposeDimensions();
+        const session = await terminal.ensure({
+          cols: dims?.cols,
+          rows: dims?.rows,
+        });
+        if (cancelled) return;
+        sessionIdRef.current = session.id;
+        setStatus('ready');
+        term.writeln(
+          `\x1b[90m[agent-shell] ${session.shell} pid=${session.pid} cwd=${session.cwd}\x1b[0m`,
+        );
+      } catch (err) {
+        setStatus('error');
+        setStatusMsg(err instanceof Error ? err.message : String(err));
+      }
+    })();
+
+    const inputDisposable = term.onData((data) => {
+      if (sessionIdRef.current) {
+        void terminal.write(sessionIdRef.current, data);
+      }
+    });
+
+    const handleResize = () => {
+      try {
+        fit.fit();
+        if (sessionIdRef.current) {
+          void terminal.resize(sessionIdRef.current, term.cols, term.rows);
+        }
+      } catch {
+        // ignore
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    const ro = new ResizeObserver(handleResize);
+    ro.observe(containerRef.current);
+
+    const containerEl = containerRef.current;
+    return () => {
+      cancelled = true;
+      window.removeEventListener('resize', handleResize);
+      containerEl?.removeEventListener('contextmenu', onContextMenu);
+      ro.disconnect();
+      offData?.();
+      offExit?.();
+      inputDisposable.dispose();
+      term.dispose();
+    };
+  }, []);
+
+  const statusLabel =
+    status === 'starting' ? '启动中…' : status === 'ready' ? '在线' : `错误：${statusMsg}`;
+
+  return (
+    <div className="flex h-full w-full flex-col bg-[#0b0b0c]">
+      <DockPanelHeader
+        title={`${BRAND_NAME} · 终端 · ${statusLabel}`}
+        onClose={onClose}
+        closeLabel="关闭终端面板"
+        actions={
+          onShowTaskProcess && (
+            <DockHeaderButton
+              icon={<LuListTodo className="h-3 w-3" />}
+              label="后台任务"
+              title={
+                taskProcessTitle
+                  ? `切换到后台推理：${taskProcessTitle}`
+                  : '切换到后台推理'
+              }
+              onClick={onShowTaskProcess}
+            />
+          )
+        }
+      />
+      <div ref={containerRef} className="flex-1 overflow-hidden p-2" />
+    </div>
+  );
+}

package/src/components/chat/ApprovalModal.test.tsx

@@ -0,0 +1,83 @@
+/**
+ * ApprovalModalHost 的网络出口（network_egress）分支契约（W-egress-ask）：
+ *   - category=network_egress 的请示以「请求访问外网」标题 + host:port
+ *     展示，并带仿冒域名警示；
+ *   - 「始终」变体对网络出口隐藏（代理白名单是会话寿命的进程级状态，
+ *     持久放行要走设置的出网白名单，不是这个模态）；
+ *   - 普通工具调用的 7 变体行为不回归。
+ */
+import { act, cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { ApprovalPromptRequest } from '@/lib/electron-bridge';
+import { ApprovalModalHost } from './ApprovalModal';
+
+afterEach(() => {
+  cleanup();
+  delete (window as { electron?: unknown }).electron;
+});
+
+function installBridge() {
+  const listeners = new Set<(request: ApprovalPromptRequest) => void>();
+  const decide = vi.fn().mockResolvedValue(undefined);
+  (window as { electron?: unknown }).electron = {
+    approval: {
+      onRequest: (callback: (request: ApprovalPromptRequest) => void) => {
+        listeners.add(callback);
+        return () => listeners.delete(callback);
+      },
+      decide,
+    },
+  };
+  return {
+    decide,
+    emit: (request: ApprovalPromptRequest) => {
+      for (const callback of Array.from(listeners)) callback(request);
+    },
+  };
+}
+
+const EGRESS_REQUEST: ApprovalPromptRequest = {
+  requestId: 'req-egress',
+  toolName: 'network_egress',
+  arguments: { host: 'cdn.example.com', port: 443, url: 'https://cdn.example.com/x.js' },
+  mode: 'other',
+  category: 'network_egress',
+  round: 0,
+};
+
+const SHELL_REQUEST: ApprovalPromptRequest = {
+  requestId: 'req-shell',
+  toolName: 'bash',
+  arguments: { command: 'rm -rf /tmp/x' },
+  mode: 'destructive',
+  category: 'bash',
+  round: 0,
+};
+
+describe('ApprovalModalHost 网络出口分支（W-egress-ask）', () => {
+  it('以 host:port 标题 + 仿冒警示展示，并隐藏「始终」变体', () => {
+    const bridge = installBridge();
+    render(<ApprovalModalHost />);
+    act(() => bridge.emit(EGRESS_REQUEST));
+
+    expect(screen.getByText('Agent 请求访问外网')).toBeTruthy();
+    expect(screen.getByText('cdn.example.com:443')).toBeTruthy();
+    expect(screen.getByText(/仿冒域名/)).toBeTruthy();
+    // 会话档保留，「始终」档隐藏。
+    expect(screen.getByText('允许一次')).toBeTruthy();
+    expect(screen.getByText('本次会话允许')).toBeTruthy();
+    expect(screen.queryByText('始终允许')).toBeNull();
+    expect(screen.queryByText('始终拒绝')).toBeNull();
+  });
+
+  it('普通工具调用的 7 变体不回归', () => {
+    const bridge = installBridge();
+    render(<ApprovalModalHost />);
+    act(() => bridge.emit(SHELL_REQUEST));
+
+    expect(screen.getByText('Agent 请求执行')).toBeTruthy();
+    expect(screen.getByText('始终允许')).toBeTruthy();
+    expect(screen.getByText('始终拒绝')).toBeTruthy();
+    expect(screen.getByText(/工作区沙箱/)).toBeTruthy();
+  });
+});

package/src/components/chat/ApprovalModal.tsx

@@ -0,0 +1,229 @@
+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 半侧。
+ *
+ * 挂载一次（AgentPage），订阅主进程广播的 `approval:request`，弹出模态
+ * 让用户对工具调用做 7 变体决策（允许/拒绝 × 一次性/会话/持久 + 中止）。
+ * 决定经 `approval:decide` IPC 回到主进程，再应答 sidecar 的反向调用。
+ *
+ * 持久化语义（与框架 ApprovalExecutor 对齐）：
+ *   - 一次性：只作用于本次调用，不缓存。
+ *   - 会话：按 category（默认=工具名）缓存在本 chat 的会话级 cache。
+ *   - 持久：写入 ~/.steerable/approvals.json，跨会话生效。
+ *
+ * 队列为 FIFO：模型一批并发多个工具调用时逐个请示（sidecar 串行等待
+ * 每个应答）。组件卸载/无窗口时主进程 fail-closed 为 deny_once。
+ */
+
+const MODE_LABEL: Record<string, string> = {
+  read: '只读',
+  safe_write: '写入',
+  destructive: '危险',
+  other: '其他',
+};
+
+function summarizeArguments(args: Record<string, unknown>): string {
+  // 'url' 必须在前列：批准一次 web_fetch 就是批准一次出网请求，
+  // 用户必须看清目标地址（W5-2）。
+  for (const key of ['url', 'command', 'cmd', 'path', 'file', 'target', 'query', 'content']) {
+    const v = args[key];
+    if (typeof v === 'string' && v.length > 0) {
+      return v.length > 300 ? `${v.slice(0, 300)}…` : v;
+    }
+  }
+  const json = JSON.stringify(args);
+  return json.length > 300 ? `${json.slice(0, 300)}…` : json;
+}
+
+interface DecisionButton {
+  kind: ApprovalDecisionKind;
+  label: string;
+  tone: 'allow' | 'deny' | 'abort';
+}
+
+const ALLOW_BUTTONS: DecisionButton[] = [
+  { kind: 'allow_once', label: '允许一次', tone: 'allow' },
+  { kind: 'allow_for_session', label: '本次会话允许', tone: 'allow' },
+  { kind: 'allow_always', label: '始终允许', tone: 'allow' },
+];
+
+const DENY_BUTTONS: DecisionButton[] = [
+  { kind: 'deny_once', label: '拒绝一次', tone: 'deny' },
+  { kind: 'deny_for_session', label: '本次会话拒绝', tone: 'deny' },
+  { kind: 'deny_always', label: '始终拒绝', tone: 'deny' },
+];
+
+function DecisionRow({
+  buttons,
+  onPick,
+}: {
+  buttons: DecisionButton[];
+  onPick: (kind: ApprovalDecisionKind) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {buttons.map((b) => (
+        <button
+          key={b.kind}
+          type="button"
+          data-testid={`approval-${b.kind}`}
+          onClick={() => onPick(b.kind)}
+          className={
+            b.tone === 'allow'
+              ? 'rounded-agent-md bg-agent-foreground px-3 py-1.5 text-xs font-medium text-agent-canvas transition hover:opacity-90'
+              : 'rounded-agent-md border border-agent-border px-3 py-1.5 text-xs font-medium text-agent-foreground transition hover:bg-agent-muted'
+          }
+        >
+          {b.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+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 });
+  };
+
+  const destructive = current.mode === 'destructive';
+  // 网络出口拓宽（W-egress-ask）：sidecar 的 web 工具被 egress 代理 403
+  // 后发起。白名单是代理进程级的（会话寿命），所以「始终」变体对网络
+  // 出口没有意义——只给一次性/会话两档，且默认焦点在拒绝（安全默认：
+  // 用户能认出 api.github.com，认不出 cdn.jsdelivr.net.evil.com）。
+  const isEgress = current.category === 'network_egress';
+  const egressHost =
+    typeof current.arguments.host === 'string' ? current.arguments.host : '';
+  const egressPort =
+    typeof current.arguments.port === 'number' ? current.arguments.port : null;
+
+  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"
+    >
+      <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" />
+          ) : (
+            <LuShieldAlert className="h-4 w-4 shrink-0 text-amber-500" />
+          )}
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium text-agent-foreground">
+              {isEgress ? (
+                <>
+                  Agent 请求访问外网
+                  <span className="mx-1 font-mono">
+                    {egressHost}
+                    {egressPort !== null ? `:${egressPort}` : ''}
+                  </span>
+                </>
+              ) : (
+                <>
+                  Agent 请求执行
+                  <span className="mx-1 font-mono">{current.toolName}</span>
+                  <span className="text-agent-muted-foreground">
+                    （{MODE_LABEL[current.mode] ?? current.mode}操作）
+                  </span>
+                </>
+              )}
+            </div>
+            {queue.length > 1 && (
+              <div className="mt-0.5 text-[11px] text-agent-muted-foreground">
+                还有 {queue.length - 1} 个待审批
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="max-h-48 overflow-auto px-4 py-3">
+          <pre className="whitespace-pre-wrap break-all rounded-agent-md bg-agent-muted/50 px-3 py-2 font-mono text-xs text-agent-foreground">
+            {summarizeArguments(current.arguments)}
+          </pre>
+            {isEgress ? (
+            <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
+              该域名不在出网白名单内。放行前请核对完整域名拼写（仿冒域名常
+              用相似拼写，如 cdn.jsdelivr.net.evil.com）。放行仅对本次会话
+              生效；要持久放行请把域名加入设置的出网白名单。
+            </p>
+          ) : (
+            <>
+              {current.category !== current.toolName && (
+                <p className="mt-2 text-[11px] text-agent-muted-foreground">
+                  持久化类别：{current.category}（会话/始终决定对该类别所有调用生效）
+                </p>
+              )}
+              <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
+                默认在工作区沙箱中执行（只能写入当前项目）。写入 Downloads
+                等项目外路径会被系统拒绝；需要时在输入框把沙箱切到「完整权限」后再让
+                Agent 重试。
+              </p>
+            </>
+          )}
+        </div>
+
+        <div className="space-y-2 border-t border-agent-border px-4 py-3">
+          <DecisionRow
+            buttons={
+              isEgress
+                ? ALLOW_BUTTONS.filter((b) => b.kind !== 'allow_always')
+                : ALLOW_BUTTONS
+            }
+            onPick={decide}
+          />
+          <div className="flex items-center justify-between gap-2">
+            <DecisionRow
+              buttons={
+                isEgress
+                  ? DENY_BUTTONS.filter((b) => b.kind !== 'deny_always')
+                  : DENY_BUTTONS
+              }
+              onPick={decide}
+            />
+            <button
+              type="button"
+              onClick={() => decide('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"
+            >
+              中止本轮
+            </button>
+          </div>
+          <p className="text-[11px] leading-relaxed text-agent-muted-foreground">
+            {isEgress
+              ? '「会话」决定在本对话内记住（代理进程退出即失效）。不操作约 3 分钟后按拒绝处理。'
+              : '「会话」决定在本对话内记住；「始终」决定写入本机 ~/.steerable/approvals.json，跨对话生效。不操作约 2 分钟后按拒绝处理。'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ApprovalModalHost;