@steerable/agent-shell-web 0.6.15

package/src/components/settings/ModelIdCombobox.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { LuChevronDown } from 'react-icons/lu';
+import { ModelCapabilityChips } from '@/components/settings/ModelCapabilityChips';
+import type { ModelPickerRow } from '@/components/settings/llm-vendors';
+
+interface ModelIdComboboxProps {
+  value: string;
+  options: Array<string | ModelPickerRow>;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}
+
+interface MenuBox {
+  top: number;
+  left: number;
+  width: number;
+}
+
+function toRow(option: string | ModelPickerRow): ModelPickerRow {
+  return typeof option === 'string' ? { id: option, entry: null } : option;
+}
+
+/**
+ * 可手填的模型 id 选择器。不用原生 datalist：Electron / 滚动容器里
+ * 系统建议层会相对输入框错位，也无法跟主题对齐。
+ */
+export function ModelIdCombobox({
+  value,
+  options,
+  placeholder,
+  onChange,
+}: ModelIdComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
+  const [menuBox, setMenuBox] = useState<MenuBox | null>(null);
+
+  const rows = useMemo(() => options.map(toRow), [options]);
+
+  const visible = useMemo(() => {
+    const q = value.trim().toLowerCase();
+    if (!q || rows.some((row) => row.id === value)) return rows;
+    return rows.filter((row) => {
+      if (row.id.toLowerCase().includes(q)) return true;
+      const name = entryName(row);
+      return name != null && name.toLowerCase().includes(q);
+    });
+  }, [rows, value]);
+
+  const syncMenuBox = () => {
+    const el = rootRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setMenuBox({ top: r.bottom + 4, left: r.left, width: r.width });
+  };
+
+  const show = () => {
+    setOpen(true);
+    syncMenuBox();
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    syncMenuBox();
+    const onLayout = () => syncMenuBox();
+    window.addEventListener('resize', onLayout);
+    document.addEventListener('scroll', onLayout, true);
+    return () => {
+      window.removeEventListener('resize', onLayout);
+      document.removeEventListener('scroll', onLayout, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (rootRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      window.removeEventListener('keydown', onKey, true);
+    };
+  }, [open]);
+
+  const menu =
+    open && visible.length > 0 && menuBox && typeof document !== 'undefined'
+      ? createPortal(
+          <ul
+            ref={menuRef}
+            role="listbox"
+            data-testid="llm-model-options"
+            style={{ top: menuBox.top, left: menuBox.left, width: menuBox.width }}
+            className="fixed z-[200] max-h-72 overflow-y-auto rounded-agent-md border border-agent-border bg-agent-canvas py-1 shadow-lg"
+          >
+            {visible.map((row) => {
+              const selected = row.id === value;
+              const name = entryName(row);
+              return (
+                <li key={row.id}>
+                  <button
+                    type="button"
+                    role="option"
+                    aria-label={row.id}
+                    aria-selected={selected}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={() => {
+                      onChange(row.id);
+                      setOpen(false);
+                    }}
+                    className={[
+                      'flex w-full flex-col gap-1 px-3 py-1.5 text-left text-sm',
+                      selected
+                        ? 'bg-agent-foreground/10 text-agent-foreground'
+                        : 'text-agent-foreground hover:bg-agent-foreground/5',
+                    ].join(' ')}
+                  >
+                    <span className="truncate">{row.id}</span>
+                    {(name || row.entry) && (
+                      <span className="flex min-w-0 flex-wrap items-center gap-1">
+                        {name ? (
+                          <span className="truncate text-[11px] text-agent-muted-foreground">
+                            {name}
+                          </span>
+                        ) : null}
+                        <ModelCapabilityChips entry={row.entry} />
+                      </span>
+                    )}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <div ref={rootRef} className="relative">
+      <input
+        type="text"
+        data-testid="llm-model-input"
+        value={value}
+        autoComplete="off"
+        spellCheck={false}
+        onChange={(event) => {
+          onChange(event.target.value);
+          show();
+        }}
+        onFocus={show}
+        placeholder={placeholder}
+        className="h-9 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 pr-8 text-sm text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+      />
+      <button
+        type="button"
+        tabIndex={-1}
+        aria-label="打开模型列表"
+        onClick={() => {
+          if (open) setOpen(false);
+          else show();
+        }}
+        className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-agent-muted-foreground hover:text-agent-foreground"
+      >
+        <LuChevronDown className="h-4 w-4" />
+      </button>
+      {menu}
+    </div>
+  );
+}
+
+function entryName(row: ModelPickerRow): string | null {
+  const name = row.entry?.name?.trim();
+  if (!name || name === row.id) return null;
+  return name;
+}

package/src/components/settings/SecuritySettingsPanel.test.tsx

@@ -0,0 +1,122 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { SidecarSandboxPosture } from '@/lib/local-api';
+
+// 沙箱诚实告知的渲染层锁定：收容失败必须说出「无法收容、已拒绝启动」，
+// 而不是谎称进程仍在无隔离运行。posture/API 那一层由
+// tests/sidecar/supervisor-sandbox.test.ts 与 sandbox-posture.e2e.test.ts 覆盖；
+// 这里只管「用户看不看得见」。
+
+const getSidecarSandboxPosture = vi.fn();
+
+vi.mock('@/lib/electron-bridge', () => ({ isElectron: () => true }));
+vi.mock('@/lib/local-api', () => ({
+  getSidecarSandboxPosture: () => getSidecarSandboxPosture(),
+}));
+
+const { SecuritySettingsPanel } = await import('./SecuritySettingsPanel');
+
+function posture(over: Partial<SidecarSandboxPosture>): SidecarSandboxPosture {
+  return { backend: 'none', enforcement: 'none', reason: 'platform_unsupported', ...over };
+}
+
+beforeEach(() => {
+  getSidecarSandboxPosture.mockReset();
+});
+
+afterEach(cleanup);
+
+describe('SecuritySettingsPanel — layer-1 态势披露', () => {
+  it.each([
+    ['platform_unsupported', '当前平台没有可用的进程沙箱后端'],
+    ['seatbelt_missing', '未找到 /usr/bin/sandbox-exec'],
+    ['profile_failed', '沙箱配置（Seatbelt profile）生成失败'],
+    ['wrap_failed', 'Linux 进程沙箱'],
+    ['helper_missing', '未找到 win-spawn-helper.exe'],
+  ] as const)('收容失败 %s：告知已拒绝启动，不谎称仍在跑', async (reason, detail) => {
+    getSidecarSandboxPosture.mockResolvedValue({ posture: posture({ reason }) });
+    render(<SecuritySettingsPanel />);
+
+    const headline = await screen.findByText(/无法收容、已拒绝启动 —/);
+    expect(headline.textContent).toContain(detail);
+    expect(screen.getByText(/没有启动/)).toBeTruthy();
+    expect(screen.queryByText(/未沙箱 —/)).toBeNull();
+    expect(screen.getByText(/STEERABLE_SIDECAR_SANDBOX=0/)).toBeTruthy();
+  });
+
+  it('手动关闭中性展示，不冒充告警也不谎称已隔离', async () => {
+    getSidecarSandboxPosture.mockResolvedValue({
+      posture: posture({ reason: 'disabled_by_env' }),
+    });
+    render(<SecuritySettingsPanel />);
+
+    expect((await screen.findByText(/已手动关闭 —/)).textContent).toContain(
+      'STEERABLE_SIDECAR_SANDBOX=0',
+    );
+    expect(screen.queryByText(/无法收容、已拒绝启动 —/)).toBeNull();
+    expect(screen.getByText(/无操作系统隔离运行/)).toBeTruthy();
+  });
+
+  it('Seatbelt 生效时记为「部分」，不谎称完全强制', async () => {
+    getSidecarSandboxPosture.mockResolvedValue({
+      posture: posture({ backend: 'seatbelt', enforcement: 'partial', reason: 'active' }),
+    });
+    render(<SecuritySettingsPanel />);
+
+    expect(await screen.findByText(/Seatbelt · 部分强制/)).toBeTruthy();
+    expect(screen.getByText(/不识别主机名/)).toBeTruthy();
+    expect(screen.queryByText(/无法收容、已拒绝启动 —/)).toBeNull();
+  });
+
+  it('bwrap 生效时记为部分强制', async () => {
+    getSidecarSandboxPosture.mockResolvedValue({
+      posture: posture({ backend: 'bwrap', enforcement: 'partial', reason: 'active' }),
+    });
+    render(<SecuritySettingsPanel />);
+    expect(await screen.findByText(/bwrap · 部分强制/)).toBeTruthy();
+  });
+
+  it('sidecar 未就绪时不冒充任何一种姿态', async () => {
+    getSidecarSandboxPosture.mockRejectedValue(new Error('503'));
+    render(<SecuritySettingsPanel />);
+
+    expect(await screen.findByText(/sidecar 未就绪/)).toBeTruthy();
+    expect(screen.queryByText(/无法收容、已拒绝启动 —/)).toBeNull();
+    expect(screen.queryByText(/部分强制/)).toBeNull();
+  });
+
+  it('出网退回端口级时披露原因（此前只有主进程日志可见）', async () => {
+    getSidecarSandboxPosture.mockResolvedValue({
+      posture: posture({ backend: 'seatbelt', enforcement: 'partial', reason: 'active' }),
+      egress: {
+        mode: 'port-only-fallback',
+        reason: '检测到系统/环境代理（127.0.0.1:7890），按主机管控已退回端口级',
+      },
+    });
+    render(<SecuritySettingsPanel />);
+
+    expect(await screen.findByText(/已退回端口级/)).toBeTruthy();
+    expect(screen.getByText(/127\.0\.0\.1:7890/)).toBeTruthy();
+  });
+
+  it('按主机代理生效时说明逐项放行语义', async () => {
+    getSidecarSandboxPosture.mockResolvedValue({
+      posture: posture({ backend: 'seatbelt', enforcement: 'partial', reason: 'active' }),
+      egress: { mode: 'per-host-proxy', reason: null },
+    });
+    render(<SecuritySettingsPanel />);
+
+    expect(await screen.findByText(/按主机白名单代理生效中/)).toBeTruthy();
+    expect(screen.getByText(/逐项放行/)).toBeTruthy();
+  });
+
+  it('无 egress 字段（旧后端）时不渲染出网行', async () => {
+    getSidecarSandboxPosture.mockResolvedValue({
+      posture: posture({ backend: 'seatbelt', enforcement: 'partial', reason: 'active' }),
+    });
+    render(<SecuritySettingsPanel />);
+
+    await screen.findByText(/Seatbelt · 部分强制/);
+    expect(screen.queryByText(/出网管控/)).toBeNull();
+  });
+});

package/src/components/settings/SecuritySettingsPanel.tsx

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useState } from 'react';
+import { LuLoaderCircle, LuShieldCheck } from 'react-icons/lu';
+import { isElectron } from '@/lib/electron-bridge';
+import {
+  getSidecarSandboxPosture,
+  type EgressPosture,
+  type SidecarSandboxPosture,
+} from '@/lib/local-api';
+
+/**
+ * SecuritySettingsPanel — W4-3 layer-1（sidecar 进程沙箱）态势的持久披露。
+ *
+ * sidecar 进程持有服务商 API 密钥并接收不可信工具输出。收容失败时主进程
+ * 拒绝启动（不是裸跑），态势记在 supervisor / lastSpawnRefusal 上
+ * （GET /api/v2/sidecar/sandbox-posture）。手动关闭（sandbox:false /
+ * STEERABLE_SIDECAR_SANDBOX=0）中性展示；收容失败告知「无法收容、已拒绝启动」。
+ * layer-3（每次命令的沙箱）披露在工具卡片，不在此重复。
+ *
+ * 数据自管理：挂载拉一次，走 local-backend REST，无专用 IPC channel。
+ */
+
+type PostureReason = SidecarSandboxPosture['reason'];
+
+/** 收容失败、已拒绝启动（告警行首句）。 */
+const REFUSED_REASON_TEXT: Partial<Record<PostureReason, string>> = {
+  platform_unsupported: '当前平台没有可用的进程沙箱后端',
+  seatbelt_missing: '未找到 /usr/bin/sandbox-exec',
+  profile_failed: '沙箱配置（Seatbelt profile）生成失败',
+  wrap_failed: 'Linux 进程沙箱（bwrap / Landlock）未能包住 sidecar',
+  helper_missing: '未找到 win-spawn-helper.exe',
+};
+
+/** 手动关闭原因的中文说明（中性行，不告警）。 */
+const OPT_OUT_REASON_TEXT: Partial<Record<PostureReason, string>> = {
+  disabled_by_option: '已通过 sandbox: false 关闭',
+  disabled_by_env: '已通过 STEERABLE_SIDECAR_SANDBOX=0 关闭',
+};
+
+function activeHeadline(backend: SidecarSandboxPosture['backend']): string {
+  switch (backend) {
+    case 'seatbelt':
+      return 'Seatbelt · 部分强制';
+    case 'bwrap':
+      return 'bwrap · 部分强制';
+    case 'landlock':
+      return 'Landlock · 部分强制';
+    case 'windows-restricted-token':
+      return 'Windows 受限令牌 · 部分强制';
+    case 'none':
+      return '未沙箱';
+  }
+}
+
+function activeBody(backend: SidecarSandboxPosture['backend']): string {
+  switch (backend) {
+    case 'seatbelt':
+      return 'sidecar 进程在 macOS Seatbelt 下运行：写入限制在 ~/.steerable 与临时目录。远程主机的出站网络只能按端口限制（Seatbelt 不识别主机名），故记为「部分」而非「完全」。';
+    case 'bwrap':
+      return 'sidecar 进程在 bubblewrap 下运行：写入限制在 ~/.steerable 与临时目录。出站网络保持开启（sidecar 要访问 LLM），故记为「部分」。';
+    case 'landlock':
+      return 'sidecar 进程在 Linux Landlock 下运行：写入限制在 ~/.steerable 与临时目录。出站网络保持开启（sidecar 要访问 LLM），故记为「部分」。';
+    case 'windows-restricted-token':
+      return 'sidecar 进程在 Windows 受限令牌 + Job Object 下运行：写入限制在 ~/.steerable。网络策略未由 helper 强制（无 WFP），故记为「部分」。';
+    case 'none':
+      return '';
+  }
+}
+
+/** 出网管控态势行（W-egress-posture）：退回分支此前只有主进程日志可见。 */
+function EgressPostureRow({ egress }: { egress: EgressPosture }) {
+  if (egress.mode === 'per-host-proxy') {
+    return (
+      <p className="text-[11px] text-agent-muted-foreground">
+        出网管控：按主机白名单代理生效中；白名单外的请求会请你逐项放行（仅本次会话有效）。
+      </p>
+    );
+  }
+  if (egress.mode === 'disabled') {
+    return (
+      <p className="text-[11px] text-agent-muted-foreground">
+        出网管控：已关闭{egress.reason ? ` — ${egress.reason}` : ''}。
+      </p>
+    );
+  }
+  return (
+    <p className="text-[11px] text-amber-600 dark:text-amber-400">
+      出网管控：已退回端口级（较弱的管控粒度）{egress.reason ? ` — ${egress.reason}` : ''}。
+    </p>
+  );
+}
+
+export function SecuritySettingsPanel() {
+  const [posture, setPosture] = useState<SidecarSandboxPosture | null>(null);
+  const [egress, setEgress] = useState<EgressPosture | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [unavailable, setUnavailable] = useState<string | null>(null);
+
+  const fetchPosture = useCallback(async () => {
+    if (!isElectron()) return;
+    setLoading(true);
+    setUnavailable(null);
+    try {
+      const res = await getSidecarSandboxPosture();
+      setPosture(res.posture ?? null);
+      setEgress(res.egress ?? null);
+      if (!res.posture) setUnavailable('无法读取沙箱状态');
+    } catch {
+      // 503 = sidecar 未就绪且没有收容失败记录。
+      setPosture(null);
+      setEgress(null);
+      setUnavailable('sidecar 未就绪 — 无法读取沙箱状态');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchPosture();
+  }, [fetchPosture]);
+
+  const refusedReason = posture ? REFUSED_REASON_TEXT[posture.reason] : undefined;
+  const optOutReason = posture ? OPT_OUT_REASON_TEXT[posture.reason] : undefined;
+
+  return (
+    <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-3">
+      <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
+        <LuShieldCheck className="h-3.5 w-3.5 text-agent-muted-foreground" />
+        Sidecar 进程沙箱
+      </h4>
+
+      {!isElectron() ? (
+        <p className="text-[11px] text-agent-muted-foreground">需要在桌面客户端中打开</p>
+      ) : loading ? (
+        <div className="flex items-center gap-2 py-2 text-xs text-agent-muted-foreground">
+          <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
+          读取沙箱状态...
+        </div>
+      ) : unavailable ? (
+        <p className="text-[11px] text-agent-muted-foreground">{unavailable}</p>
+      ) : posture && refusedReason ? (
+        <div className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive space-y-1.5">
+          <p className="font-medium">无法收容、已拒绝启动 — {refusedReason}。</p>
+          <p>
+            持有服务商 API 密钥的 sidecar 进程没有启动，因此也没有在无隔离状态下运行。
+            唯一裸跑入口是显式设置 STEERABLE_SIDECAR_SANDBOX=0。
+          </p>
+          <p>
+            如需隔离，请安装对应平台的收容后端（macOS Seatbelt、Linux bwrap/Landlock、Windows
+            win-spawn-helper），或将本应用运行在容器内。
+          </p>
+        </div>
+      ) : posture && optOutReason ? (
+        <div className="rounded-agent-md border border-agent-border/60 bg-agent-canvas p-2.5 text-xs text-agent-muted-foreground space-y-1.5">
+          <p className="font-medium text-agent-foreground">已手动关闭 — {optOutReason}。</p>
+          <p>
+            sidecar 进程（持有服务商 API 密钥）无操作系统隔离运行。如需恢复，移除该设置并重启应用。
+          </p>
+        </div>
+      ) : posture ? (
+        <div className="rounded-agent-md border border-agent-border/60 bg-agent-canvas p-2.5 text-xs text-agent-muted-foreground space-y-1.5">
+          <p className="font-medium text-agent-foreground">{activeHeadline(posture.backend)}</p>
+          <p>{activeBody(posture.backend)}</p>
+        </div>
+      ) : null}
+
+      {egress && <EgressPostureRow egress={egress} />}
+    </div>
+  );
+}

package/src/components/settings/SettingsSaveButton.tsx

@@ -0,0 +1,35 @@
+import { LuCheck, LuLoaderCircle } from 'react-icons/lu';
+
+interface SettingsSaveButtonProps {
+  saving: boolean;
+  savedOk: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  testId?: string;
+}
+
+/** 设置页标题栏 / 本地模型表单共用的保存按钮。 */
+export function SettingsSaveButton({
+  saving,
+  savedOk,
+  disabled,
+  onClick,
+  testId,
+}: SettingsSaveButtonProps) {
+  return (
+    <button
+      type="button"
+      data-testid={testId}
+      onClick={onClick}
+      disabled={disabled}
+      className="flex h-8 items-center gap-1.5 rounded-full bg-agent-foreground px-5 text-xs font-medium text-agent-canvas transition-all hover:opacity-90 disabled:opacity-50"
+    >
+      {saving ? (
+        <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
+      ) : savedOk ? (
+        <LuCheck className="h-3.5 w-3.5" />
+      ) : null}
+      保存
+    </button>
+  );
+}

package/src/components/settings/SkillsSettingsPanel.test.tsx

@@ -0,0 +1,62 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const request = vi.fn();
+
+vi.mock('@/lib/electron-bridge', () => ({
+  isElectron: () => true,
+  getElectronBridge: () => ({
+    localBackend: { request },
+    local: {},
+  }),
+}));
+
+const { SkillsSettingsPanel } = await import('./SkillsSettingsPanel');
+
+beforeEach(() => {
+  request.mockReset();
+});
+
+afterEach(cleanup);
+
+describe('SkillsSettingsPanel', () => {
+  it('shows a 工作区 badge and hides uninstall for workspace skills', async () => {
+    request.mockResolvedValue({
+      skills: [
+        {
+          name: 'compute-recursion',
+          displayName: '递归函数计算',
+          description: '算递推第 n 项',
+          origin: 'workspace',
+          isBuiltin: false,
+          layer: 'catalog',
+          modelInvocable: false,
+        },
+      ],
+    });
+    render(<SkillsSettingsPanel />);
+    const row = await screen.findByTestId('skill-row-compute-recursion');
+    expect(row.textContent).toContain('工作区');
+    expect(row.textContent).not.toContain('内置');
+    expect(screen.queryByTestId('skill-uninstall-compute-recursion')).toBeNull();
+  });
+
+  it('keeps uninstall on imported user skills', async () => {
+    request.mockResolvedValue({
+      skills: [
+        {
+          name: 'frontend-design',
+          displayName: '',
+          description: 'UI skill',
+          origin: 'user',
+          isBuiltin: false,
+          layer: 'catalog',
+          modelInvocable: true,
+        },
+      ],
+    });
+    render(<SkillsSettingsPanel />);
+    await screen.findByTestId('skill-row-frontend-design');
+    expect(screen.getByTestId('skill-uninstall-frontend-design')).toBeTruthy();
+  });
+});