feat(web): add Agent Studio workspace UI

apps/web/tests/app-shell.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { App } from "../src/App.js";
+import { createInitialHarnessState, type HarnessClientState } from "../src/store/reducer.js";
+
+function makeStore() {
+  const sendMessage = vi.fn().mockResolvedValue({ runId: "run_1" });
+  const state: HarnessClientState = {
+    ...createInitialHarnessState(),
+    sessionId: "ses_test",
+    connection: "open",
+    skills: [{
+      name: "ads-analysis",
+      description: "分析广告投放指标",
+      source: "project",
+      filePath: ".agents/skills/ads-analysis/SKILL.md",
+      diagnostics: [],
+    }],
+  };
+  return {
+    getSnapshot: () => state,
+    subscribe: () => () => undefined,
+    sendMessage,
+    cancel: vi.fn().mockResolvedValue({ cancelled: false }),
+    start: vi.fn().mockResolvedValue(undefined),
+    getModelConfig: vi.fn().mockResolvedValue({
+      modelConfig: { configured: true, source: "environment", providerId: "openai", api: "openai-responses", modelId: "gpt-test", supportsImages: true },
+    }),
+  };
+}
+
+describe("App", () => {
+  it("renders the three primary work areas", () => {
+    render(<App store={makeStore()} autoStart={false} modelConfigured />);
+    expect(screen.getByRole("region", { name: "Skills Catalog" })).toBeVisible();
+    expect(screen.getByRole("main", { name: "Streaming Chat" })).toBeVisible();
+    expect(screen.getByRole("region", { name: "Event Timeline" })).toBeVisible();
+  });
+
+  it("fills but does not send the demo prompt", async () => {
+    const user = userEvent.setup();
+    const store = makeStore();
+    render(<App store={store} autoStart={false} modelConfigured />);
+
+    await user.click(screen.getByRole("button", { name: "填入演示任务" }));
+
+    expect(screen.getByRole<HTMLTextAreaElement>("textbox").value).toContain("demo-account");
+    expect(store.sendMessage).not.toHaveBeenCalled();
+  });
+
+  it("disables sending and points to settings when the model is missing", () => {
+    render(<App store={makeStore()} autoStart={false} modelConfigured={false} />);
+    expect(screen.getByRole("button", { name: "发送消息" })).toBeDisabled();
+    expect(screen.getByText("请先配置模型连接")).toBeVisible();
+  });
+});

apps/web/tests/setup.ts

@@ -0,0 +1,13 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(cleanup);
+
+class TestResizeObserver implements ResizeObserver {
+  public readonly observe = () => undefined;
+  public readonly unobserve = () => undefined;
+  public readonly disconnect = () => undefined;
+}
+
+globalThis.ResizeObserver = TestResizeObserver;

apps/web/tests/states.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { describe, expect, it } from "vitest";
+import { StateView } from "../src/components/common/StateView.js";
+
+describe("StateView", () => {
+  it.each([
+    ["loading", "正在建立训练会话"],
+    ["reconnecting", "事件流正在重连"],
+    ["busy", "Agent 正在运行"],
+    ["approval", "等待工具审批"],
+    ["error", "会话启动失败"],
+  ] as const)("renders the %s state", (kind, label) => {
+    render(<StateView kind={kind} title={label} />);
+    expect(screen.getByText(label)).toBeVisible();
+  });
+});