@steerable/agent-shell-web 0.6.15

package/src/pages/ChatPanelPreviewPage.tsx

@@ -0,0 +1,264 @@
+import { useMemo, useState } from 'react';
+import type { ChatMessage } from '@steerable/agent-protocol';
+import { LocalChatPanel } from '@/components/chat/LocalChatPanel';
+import { ChatHeader } from '@/components/ChatHeader';
+import type { ExecutedAction } from '@/components/chat/ExecutedActionsCard';
+import type { TurnBlock } from '@/components/chat/turn-timeline';
+import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
+
+/**
+ * ChatPanelPreviewPage — dev-only visual harness for `LocalChatPanel`.
+ *
+ * Mounted at `/preview/chat` in dev. Produces deterministic mock chat data so
+ * we can iterate on the message renderer, executed-actions card, copy buttons
+ * etc. without needing local-backend to be wired up.
+ *
+ * Production builds keep the route around (tree-shake'd only when truly dead),
+ * but the dataset is small enough (a few hundred lines of mock content) that
+ * it's not worth gating behind `import.meta.env.DEV`. If we ever need to,
+ * wrap the router entry in `main.tsx` instead of guarding here.
+ */
+
+const MOCK_AGENT: LocalChatAgent = {
+  id: 'agent_local_default',
+  slug: 'local-coder',
+  name: '本地 Coder',
+  icon: '🤖',
+  color: '#0ea5e9',
+  description: '本地代码助手 — 跑 shell / 工具演示 / 简单读写',
+  rolePrompt: null,
+  isBuiltin: true,
+};
+
+const MOCK_CHAT: LocalChat = {
+  id: 'preview-chat',
+  projectId: null,
+  userId: 'preview-user',
+  title: '预览：检查服务连通性 + 跑测试套件',
+  agentId: MOCK_AGENT.id,
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  isPinned: false,
+  systemPrompt: null,
+  pinnedRefs: null,
+};
+
+const MOCK_MESSAGES: ChatMessage[] = [
+  {
+    id: 'm1',
+    role: 'user',
+    content: '帮我看下本地服务是否连通，再跑一下本目录的测试套件。',
+    createdAt: new Date(Date.now() - 1000 * 60 * 5).toISOString(),
+  },
+  {
+    id: 'm2',
+    role: 'assistant',
+    agentId: MOCK_AGENT.id,
+    content: `好的，先检查服务连通性，然后跑测试。
+
+\`\`\`bash
+$ check_connection
+✓ Mock service @ 127.0.0.1:8765 reachable (latency 4ms)
+\`\`\`
+
+连接正常。接下来跑测试套件：
+
+\`\`\`bash
+$ npm test
+PASS  src/components/chat/ChatInput.test.tsx
+PASS  src/components/chat/MessageList.test.tsx
+FAIL  src/components/chat/AssistantMessage.test.tsx
+  ✗ renders agent badge when agentId present (5 ms)
+    Expected color "#0ea5e9", got "#7c3aed"
+
+Tests: 1 failed, 2 passed, 3 total
+\`\`\`
+
+有 1 个失败：\`AssistantMessage\` 的默认 agent 色没有从 props 传过来。建议在
+\`agentInitial\` 之前先 \`a.color ?? '#7c3aed'\`，让 fallback 优先于硬编码。
+
+要我帮你直接改这个文件吗？`,
+    createdAt: new Date(Date.now() - 1000 * 60 * 3).toISOString(),
+  },
+];
+
+const MOCK_ACTIONS: ExecutedAction[] = [
+  {
+    tool: 'check_connection',
+    arguments: { host: '127.0.0.1', port: 8765 },
+    result: { success: true, latencyMs: 4 },
+  },
+  {
+    tool: 'shell_run',
+    arguments: { command: 'npm test', cwd: '/home/me/proj' },
+    result: {
+      success: false,
+      exitCode: 1,
+      stdout: '...test output truncated...',
+      stderr: 'Tests: 1 failed, 2 passed, 3 total',
+    },
+  },
+  {
+    tool: 'fs_read_file',
+    arguments: { path: 'src/components/chat/AssistantMessage.tsx' },
+    result: { success: true, bytes: 4096 },
+  },
+];
+
+const MOCK_TIMELINE: TurnBlock[] = [
+  { type: 'reasoning', content: '先检查服务连通性，再跑测试套件。' },
+  { type: 'tools', actions: [MOCK_ACTIONS[0]] },
+  { type: 'text', content: '连接正常。接下来跑测试套件。' },
+  { type: 'tools', actions: [MOCK_ACTIONS[1]] },
+  { type: 'reasoning', content: '测试失败，读一下失败文件再给建议。' },
+  { type: 'tools', actions: [MOCK_ACTIONS[2]] },
+  { type: 'text', content: MOCK_MESSAGES[1].content ?? '' },
+];
+
+/**
+ * Three scenarios to flip between with the top-right pill buttons:
+ *   • `static`     — finished conversation; verifies copy buttons, action
+ *     cards, markdown rendering on history.
+ *   • `thinking`   — in-flight assistant bubble before any content; verifies
+ *     StreamingStatus's "正在思考..." baseline.
+ *   • `tools-run`  — in-flight bubble, round 2, 2 tools just ran; verifies
+ *     StreamingStatus's "已调用 N 个工具" + "Round N" badge interaction.
+ */
+type PreviewScene = 'static' | 'thinking' | 'tools-run';
+
+const SCENES: { id: PreviewScene; label: string }[] = [
+  { id: 'static', label: '静态历史' },
+  { id: 'thinking', label: '流式 · 空内容' },
+  { id: 'tools-run', label: '流式 · 工具已跑 · round 2' },
+];
+
+export function ChatPanelPreviewPage() {
+  const [scene, setScene] = useState<PreviewScene>('static');
+
+  // Explicit struct type so TS doesn't try to narrow `actionsByMsgId` to the
+  // union of {} | { m2: ... } — both shapes are valid `Record<string, ...>`
+  // but the inferred type rejects each side mutually.
+  interface SceneConfig {
+    messages: ChatMessage[];
+    isStreaming: boolean;
+    actionsByMsgId: Record<string, ExecutedAction[]>;
+    currentTurnActions: ExecutedAction[];
+    timelineByMsgId: Record<string, TurnBlock[]>;
+    currentTurnTimeline?: TurnBlock[];
+    currentTurnStartedAtMs?: number;
+    durationByMessageId?: Record<string, number>;
+    currentRound: number;
+  }
+  const config = useMemo<SceneConfig>(() => {
+    switch (scene) {
+      case 'thinking':
+        return {
+          messages: [
+            MOCK_MESSAGES[0],
+            {
+              id: 'm-streaming',
+              role: 'assistant',
+              agentId: MOCK_AGENT.id,
+              content: '',
+              createdAt: new Date().toISOString(),
+            },
+          ],
+          isStreaming: true,
+          actionsByMsgId: {} as Record<string, ExecutedAction[]>,
+          currentTurnActions: [],
+          timelineByMsgId: {} as Record<string, TurnBlock[]>,
+          currentTurnTimeline: [],
+          currentRound: 1,
+        };
+      case 'tools-run':
+        return {
+          messages: [
+            MOCK_MESSAGES[0],
+            {
+              id: 'm-streaming',
+              role: 'assistant',
+              agentId: MOCK_AGENT.id,
+              content: '',
+              createdAt: new Date().toISOString(),
+            },
+          ],
+          isStreaming: true,
+          actionsByMsgId: {} as Record<string, ExecutedAction[]>,
+          currentTurnActions: MOCK_ACTIONS.slice(0, 2),
+          timelineByMsgId: {} as Record<string, TurnBlock[]>,
+          currentTurnTimeline: [
+            { type: 'reasoning', content: '先检查连通性，再跑测试。' },
+            { type: 'tools', actions: MOCK_ACTIONS.slice(0, 2) },
+          ],
+          currentTurnStartedAtMs: Date.now() - 12_000,
+          currentRound: 2,
+        };
+      case 'static':
+      default:
+        return {
+          messages: MOCK_MESSAGES,
+          isStreaming: false,
+          actionsByMsgId: { m2: MOCK_ACTIONS },
+          currentTurnActions: [],
+          timelineByMsgId: { m2: MOCK_TIMELINE },
+          durationByMessageId: { m2: 83_000 },
+          currentRound: 1,
+        };
+    }
+  }, [scene]);
+
+  return (
+    <div className="flex h-full w-full flex-col bg-agent-muted/30">
+      <div className="flex shrink-0 items-center gap-2 border-b border-agent-border bg-agent-canvas px-3 py-2 text-xs">
+        <span className="text-agent-muted-foreground">
+          /preview/chat (dev harness)
+        </span>
+        <div className="flex gap-1">
+          {SCENES.map((s) => (
+            <button
+              key={s.id}
+              type="button"
+              onClick={() => setScene(s.id)}
+              className={`rounded-full border px-2 py-0.5 text-[11px] transition-colors ${
+                scene === s.id
+                  ? 'border-agent-foreground/40 bg-agent-foreground/10 text-agent-foreground'
+                  : 'border-agent-border bg-agent-canvas text-agent-muted-foreground hover:bg-agent-foreground/5'
+              }`}
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="m-2 flex flex-1 overflow-hidden rounded-agent-lg bg-agent-canvas shadow-sm">
+        <LocalChatPanel
+          messages={config.messages}
+          isStreaming={config.isStreaming}
+          onSubmit={async ({ content }) => {
+            console.log('[preview] submit:', content);
+          }}
+          onCancel={() => {}}
+          className="flex-1"
+          header={
+            <ChatHeader chat={MOCK_CHAT} agent={MOCK_AGENT} />
+          }
+          inputPlaceholder="预览模式 — 输入不会真的发送…"
+          agents={[MOCK_AGENT]}
+          currentAgent={MOCK_AGENT}
+          executedActionsByMessageId={config.actionsByMsgId}
+          currentTurnActions={config.currentTurnActions}
+          timelineByMessageId={config.timelineByMsgId}
+          currentTurnTimeline={config.currentTurnTimeline}
+          currentTurnStartedAtMs={config.currentTurnStartedAtMs}
+          durationByMessageId={config.durationByMessageId}
+          currentRound={config.currentRound}
+          onOpenSettings={() =>
+            console.log('[preview] open llm settings (noop in harness)')
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ChatPanelPreviewPage;

package/src/pages/SettingsPage.test.tsx

@@ -0,0 +1,102 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const { save } = vi.hoisted(() => ({ save: vi.fn(async () => {}) }));
+
+vi.mock('@/lib/electron-bridge', () => ({
+  isElectron: () => true,
+}));
+
+vi.mock('@/components/settings/LlmSettingsPanel', async () => {
+  const react = await import('react');
+  return {
+    LlmSettingsPanel: react.forwardRef(function MockLlm(
+      props: { onSaveUiChange?: (ui: { saving: boolean; savedOk: boolean; loading: boolean }) => void },
+      ref,
+    ) {
+      react.useImperativeHandle(ref, () => ({ save }));
+      react.useEffect(() => {
+        props.onSaveUiChange?.({ saving: false, savedOk: false, loading: false });
+      }, [props.onSaveUiChange]);
+      return <div data-testid="llm-panel" />;
+    }),
+  };
+});
+
+vi.mock('@/components/settings/InsightsSettingsPanel', () => ({
+  InsightsSettingsPanel: () => null,
+}));
+vi.mock('@/components/settings/TelemetrySettingsPanel', () => ({
+  TelemetrySettingsPanel: () => null,
+}));
+vi.mock('@/components/settings/UsagePanel', () => ({
+  UsagePanel: () => null,
+}));
+vi.mock('@/components/settings/WebSearchSettingsPanel', () => ({
+  WebSearchSettingsPanel: () => null,
+}));
+vi.mock('@/components/settings/SecuritySettingsPanel', () => ({
+  SecuritySettingsPanel: () => null,
+}));
+vi.mock('@/components/settings/SkillsSettingsPanel', () => ({
+  SkillsSettingsPanel: () => null,
+}));
+vi.mock('@/components/settings/McpSettingsPanel', () => ({
+  McpSettingsPanel: () => null,
+}));
+vi.mock('@/components/settings/AgentsSettingsPanel', () => ({
+  AgentsSettingsPanel: () => null,
+}));
+
+const { SettingsPage } = await import('./SettingsPage');
+
+function renderSettings(search = '') {
+  return render(
+    <MemoryRouter initialEntries={[`/settings${search}`]}>
+      <SettingsPage />
+    </MemoryRouter>,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  save.mockClear();
+});
+
+describe('SettingsPage header save', () => {
+  it('saves LLM settings from the general settings header', () => {
+    renderSettings();
+    fireEvent.click(screen.getByTestId('settings-header-save'));
+    expect(save).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not show the header save on skills, MCP, or agents pages', () => {
+    const skills = renderSettings('?section=skills');
+    expect(screen.queryByTestId('settings-header-save')).toBeNull();
+    skills.unmount();
+    const mcp = renderSettings('?section=mcp');
+    expect(screen.queryByTestId('settings-header-save')).toBeNull();
+    mcp.unmount();
+    renderSettings('?section=agents');
+    expect(screen.queryByTestId('settings-header-save')).toBeNull();
+  });
+
+  it('orders general sections by how often they are used', () => {
+    renderSettings();
+    expect(screen.getByRole('heading', { name: '帮助改进产品' })).toBeTruthy();
+    expect(
+      [...document.querySelectorAll('[data-testid^="settings-section-"]')].map(
+        (el) => el.getAttribute('data-testid'),
+      ),
+    ).toEqual([
+      'settings-section-llm',
+      'settings-section-web-search',
+      'settings-section-usage',
+      'settings-section-diagnose',
+      'settings-section-security',
+      'settings-section-insights',
+      'settings-section-telemetry',
+    ]);
+  });
+});

package/src/pages/SettingsPage.tsx

@@ -0,0 +1,197 @@
+import { useRef, useState } from 'react';
+import { LuActivity, LuBlocks, LuBot, LuChartBar, LuNetwork, LuPlug, LuSearch, LuSettings, LuShieldCheck } from 'react-icons/lu';
+import { useOutletContext, useSearchParams } from 'react-router-dom';
+import { isElectron } from '@/lib/electron-bridge';
+import { AgentsSettingsPanel } from '@/components/settings/AgentsSettingsPanel';
+import { DiagnoseSettingsPanel } from '@/components/settings/DiagnoseSettingsPanel';
+import { InsightsSettingsPanel } from '@/components/settings/InsightsSettingsPanel';
+import {
+  LlmSettingsPanel,
+  type LlmSaveUi,
+  type LlmSettingsPanelHandle,
+} from '@/components/settings/LlmSettingsPanel';
+import { McpSettingsPanel } from '@/components/settings/McpSettingsPanel';
+import { SecuritySettingsPanel } from '@/components/settings/SecuritySettingsPanel';
+import { SkillsSettingsPanel } from '@/components/settings/SkillsSettingsPanel';
+import { SettingsSaveButton } from '@/components/settings/SettingsSaveButton';
+import { TelemetrySettingsPanel } from '@/components/settings/TelemetrySettingsPanel';
+import { UsagePanel } from '@/components/settings/UsagePanel';
+import { WebSearchSettingsPanel } from '@/components/settings/WebSearchSettingsPanel';
+import { getPackSettingsPanels } from '@/packs/registry';
+import type { AgentOutletContext } from '@/layouts/AgentLayout';
+
+type SettingsSection = 'skills' | 'mcp' | 'agents' | 'general';
+
+function resolveSection(raw: string | null): SettingsSection {
+  if (raw === 'skills' || raw === 'mcp' || raw === 'agents') return raw;
+  return 'general';
+}
+
+/**
+ * `/settings` — 右侧内容区的设置页，按 `?section=` 分成独立页面：
+ *   - `skills`  侧栏「Skill 设置」
+ *   - `mcp`     侧栏「MCP 设置」
+ *   - `agents`  侧栏「智能体管理」
+ *   - 缺省/`general`  侧栏底「设置」（模型 / 搜索 / 用量 / 安全 / 洞察 / 遥测）
+ *
+ * Panel 数据自管理（挂载即拉取），页面本身不持有后端状态。
+ */
+export function SettingsPage() {
+  const [searchParams] = useSearchParams();
+  const section = resolveSection(searchParams.get('section'));
+  const catalog = useOutletContext<AgentOutletContext | null>();
+  const llmPanelRef = useRef<LlmSettingsPanelHandle>(null);
+  const [llmSaveUi, setLlmSaveUi] = useState<LlmSaveUi>({
+    saving: false,
+    savedOk: false,
+    loading: true,
+  });
+
+  const title =
+    section === 'mcp'
+      ? 'MCP 设置'
+      : section === 'skills'
+        ? 'Skill 设置'
+        : section === 'agents'
+          ? '智能体管理'
+          : '设置';
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <header className="flex h-12 flex-shrink-0 items-center justify-between gap-3 border-b border-agent-border px-5">
+        <h1 className="text-sm font-semibold text-agent-foreground">{title}</h1>
+        {section === 'general' && (
+          <SettingsSaveButton
+            testId="settings-header-save"
+            saving={llmSaveUi.saving}
+            savedOk={llmSaveUi.savedOk}
+            disabled={llmSaveUi.saving || llmSaveUi.loading}
+            onClick={() => void llmPanelRef.current?.save()}
+          />
+        )}
+      </header>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-3xl space-y-8 px-6 py-6">
+          {!isElectron() && (
+            <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
+              浏览器预览模式 — 没有 Electron IPC 桥接，部分设置不可用。
+            </p>
+          )}
+
+          {section === 'skills' && (
+            <section className="space-y-3" data-testid="settings-section-skills">
+              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                <LuBlocks className="h-4 w-4 text-agent-muted-foreground" />
+                本地技能
+              </h2>
+              <SkillsSettingsPanel />
+            </section>
+          )}
+
+          {section === 'mcp' && (
+            <section className="space-y-3" data-testid="settings-section-mcp">
+              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                <LuPlug className="h-4 w-4 text-agent-muted-foreground" />
+                MCP 服务
+              </h2>
+              <McpSettingsPanel />
+            </section>
+          )}
+
+          {section === 'agents' && (
+            <section className="space-y-3" data-testid="settings-section-agents">
+              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                <LuBot className="h-4 w-4 text-agent-muted-foreground" />
+                智能体
+              </h2>
+              <AgentsSettingsPanel onCatalogChange={catalog?.refreshAgents} />
+            </section>
+          )}
+
+          {section === 'general' && (
+            <>
+              <section className="space-y-3" data-testid="settings-section-llm">
+                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <LuSettings className="h-4 w-4 text-agent-muted-foreground" />
+                  本地模型设置
+                </h2>
+                <LlmSettingsPanel
+                  ref={llmPanelRef}
+                  showFooterSave={false}
+                  onSaveUiChange={setLlmSaveUi}
+                />
+              </section>
+
+              <section className="space-y-3" data-testid="settings-section-web-search">
+                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <LuSearch className="h-4 w-4 text-agent-muted-foreground" />
+                  网络搜索
+                </h2>
+                <WebSearchSettingsPanel />
+              </section>
+
+              <section className="space-y-3" data-testid="settings-section-usage">
+                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <LuChartBar className="h-4 w-4 text-agent-muted-foreground" />
+                  用量与成本
+                </h2>
+                <UsagePanel />
+              </section>
+
+              <section className="space-y-3" data-testid="settings-section-diagnose">
+                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <LuNetwork className="h-4 w-4 text-agent-muted-foreground" />
+                  链路诊断
+                </h2>
+                <DiagnoseSettingsPanel />
+              </section>
+
+              <section className="space-y-3" data-testid="settings-section-security">
+                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <LuShieldCheck className="h-4 w-4 text-agent-muted-foreground" />
+                  安全
+                </h2>
+                <SecuritySettingsPanel />
+              </section>
+
+              <section className="space-y-3" data-testid="settings-section-insights">
+                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <LuChartBar className="h-4 w-4 text-agent-muted-foreground" />
+                  帮助改进产品
+                </h2>
+                <InsightsSettingsPanel />
+              </section>
+
+              <section className="space-y-3" data-testid="settings-section-telemetry">
+                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <LuActivity className="h-4 w-4 text-agent-muted-foreground" />
+                  遥测(OTLP)
+                </h2>
+                <TelemetrySettingsPanel />
+              </section>
+
+              {/* 场景包设置面板（1.2 起由包渲染层贡献）。
+                  包经 packs/registry 注册，未激活 flavor 的产物里没有包组件。 */}
+              {getPackSettingsPanels().map((panel) => (
+                <section
+                  key={panel.panelId}
+                  className="space-y-3"
+                  data-testid={`settings-section-${panel.panelId}`}
+                >
+                  <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                    {panel.Icon ? (
+                      <panel.Icon className="h-4 w-4 text-agent-muted-foreground" />
+                    ) : null}
+                    {panel.title}
+                  </h2>
+                  <panel.Component />
+                </section>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}