@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/cowork/src/mainview/components/common/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+vi.mock("../../../lib/i18n", () => ({
+  default: {
+    isInitialized: true,
+    language: "en",
+    changeLanguage: vi.fn(),
+    t: (key: string) => key,
+    getResource: vi.fn(),
+  },
+  supportedLocales: ["en", "zh"],
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: "en", changeLanguage: vi.fn() },
+  }),
+  initReactI18next: { type: "3rdParty", init: vi.fn() },
+}));
+
+describe("ErrorBoundary", () => {
+  it("should render children when no error", async () => {
+    const { ErrorBoundary } = await import("../ErrorBoundary");
+    render(
+      <ErrorBoundary>
+        <div>Normal content</div>
+      </ErrorBoundary>
+    );
+    expect(screen.getByText("Normal content")).toBeDefined();
+  });
+
+  it("should render fallback UI when child throws", async () => {
+    const { ErrorBoundary } = await import("../ErrorBoundary");
+
+    const ThrowingComponent = () => {
+      throw new Error("Test error");
+    };
+
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary>
+        <ThrowingComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText(/something went wrong/i)).toBeDefined();
+
+    spy.mockRestore();
+  });
+
+  it("should show retry button in error state", async () => {
+    const { ErrorBoundary } = await import("../ErrorBoundary");
+
+    const ThrowingComponent = () => {
+      throw new Error("Test error");
+    };
+
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary>
+        <ThrowingComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByRole("button", { name: /retry/i })).toBeDefined();
+
+    spy.mockRestore();
+  });
+});

package/templates/cowork/src/mainview/components/common/__tests__/LanguageSwitcher.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockSetLocale = vi.fn();
+
+vi.mock("../../stores/use-locale-store", () => ({
+  useLocaleStore: (selector: (s: any) => any) =>
+    selector({ locale: "en", setLocale: mockSetLocale }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+describe("LanguageSwitcher", () => {
+  afterEach(cleanup);
+
+  it("should render a button", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should show '中' when locale is en", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByText("中")).toBeInTheDocument();
+  });
+
+  it("should have title 切换到中文 for en locale", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByRole("button")).toHaveAttribute("title", "切换到中文");
+  });
+
+  it("should display locale-specific text content", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    const button = screen.getByRole("button");
+    expect(button.textContent).toBe("中");
+    expect(button.className).toContain("rounded");
+  });
+});

package/templates/cowork/src/mainview/components/common/__tests__/ThemeToggle.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockToggle = vi.fn();
+
+vi.mock("../../stores/use-theme-store", () => ({
+  useThemeStore: (selector: (s: any) => any) =>
+    selector({ theme: "dark", toggleTheme: mockToggle }),
+}));
+
+describe("ThemeToggle", () => {
+  afterEach(cleanup);
+
+  it("should render a button", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should show sun icon for dark theme", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    const { container } = render(<ThemeToggle />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg!.getAttribute("class")).toContain("text-yellow-400");
+  });
+
+  it("should have title Switch to light mode for dark theme", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button")).toHaveAttribute("title", "Switch to light mode");
+  });
+
+  it("should render SVG element inside button", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    const { container } = render(<ThemeToggle />);
+    const button = container.querySelector("button");
+    expect(button!.querySelector("svg")).toBeInTheDocument();
+  });
+});

package/templates/cowork/src/mainview/components/dev/NetworkPanel.tsx

@@ -0,0 +1,155 @@
+/**
+ * Network Panel — live RPC/SSE communication feed.
+ *
+ * - NetworkToggleButton: goes in the TopBar (icon with activity badge).
+ * - NetworkDrawer: rendered in AppLayout, shows the live log feed.
+ *
+ * Data comes from the networkBus (populated by api-client). Solves the
+ * "I can't see any network activity" problem with the old silent WebSocket.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { Activity, ChevronDown, Trash2 } from "lucide-react";
+import { networkBus, type NetworkLogEntry } from "../../lib/network-bus";
+import { useNetworkPanelStore } from "../../stores/use-network-panel-store";
+
+const KIND_STYLES: Record<NetworkLogEntry["kind"], { color: string; icon: string }> = {
+	request: { color: "var(--color-text-accent)", icon: "→" },
+	response: { color: "var(--color-text-success)", icon: "←" },
+	event: { color: "var(--color-text-secondary)", icon: "⚡" },
+	status: { color: "var(--color-text-tertiary)", icon: "•" },
+};
+
+function formatTime(ts: number): string {
+	const d = new Date(ts);
+	return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}.${String(d.getMilliseconds()).padStart(3, "0").slice(0, 2)}`;
+}
+
+/** Toggle button — place in TopBar */
+export function NetworkToggleButton() {
+	const open = useNetworkPanelStore((s) => s.open);
+	const toggle = useNetworkPanelStore((s) => s.toggle);
+	const [count, setCount] = useState(0);
+
+	useEffect(() => {
+		setCount(networkBus.getEntries().length);
+		const unsub = networkBus.subscribe(() => {
+			setCount((c) => c + 1);
+		});
+		return unsub;
+	}, []);
+
+	return (
+		<button
+			onClick={toggle}
+			title="网络通讯面板"
+			className={`relative text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] transition-colors p-1 rounded hover:bg-[var(--color-bg-hover)] ${
+				open ? "text-[var(--color-text-accent)] bg-[var(--color-bg-hover)]" : ""
+			}`}
+		>
+			<Activity className="w-4 h-4" />
+			{count > 0 && !open && (
+				<span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-[var(--color-accent)] animate-pulse" />
+			)}
+		</button>
+	);
+}
+
+/** Drawer — place in AppLayout bottom */
+export function NetworkDrawer() {
+	const open = useNetworkPanelStore((s) => s.open);
+	const setOpen = useNetworkPanelStore((s) => s.setOpen);
+	const [entries, setEntries] = useState<NetworkLogEntry[]>([]);
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const autoScroll = useRef(true);
+
+	useEffect(() => {
+		setEntries(networkBus.getEntries());
+		const unsub = networkBus.subscribe((entry) => {
+			setEntries((prev) => [...prev.slice(-199), entry]);
+		});
+		return unsub;
+	}, []);
+
+	useEffect(() => {
+		if (!open || !autoScroll.current || !scrollRef.current) return;
+		scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+	}, [entries, open]);
+
+	const handleScroll = (): void => {
+		if (!scrollRef.current) return;
+		const el = scrollRef.current;
+		autoScroll.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+	};
+
+	if (!open) return null;
+
+	return (
+		<div className="h-56 bg-[var(--color-bg-sidebar)] border-t border-[var(--color-border-primary)] flex flex-col z-30 shadow-lg flex-shrink-0">
+			{/* Header */}
+			<div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--color-border-primary)] bg-[var(--color-bg-secondary)]">
+				<div className="flex items-center gap-2 text-xs font-medium">
+					<Activity className="w-3 h-3 text-[var(--color-text-accent)]" />
+					<span>网络通讯 ({entries.length})</span>
+					<span className="text-[var(--color-text-tertiary)] font-normal ml-2">
+						POST /api/rpc · SSE /api/events
+					</span>
+				</div>
+				<div className="flex items-center gap-1">
+					<button
+						onClick={() => setEntries([])}
+						title="清空"
+						className="text-[var(--color-text-placeholder)] hover:text-[var(--color-text-error)] p-1"
+					>
+						<Trash2 className="w-3 h-3" />
+					</button>
+					<button
+						onClick={() => setOpen(false)}
+						title="收起"
+						className="text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] p-1"
+					>
+						<ChevronDown className="w-3 h-3" />
+					</button>
+				</div>
+			</div>
+
+			{/* Entries */}
+			<div
+				ref={scrollRef}
+				onScroll={handleScroll}
+				className="flex-1 overflow-auto font-mono text-[11px] leading-relaxed"
+			>
+				{entries.length === 0 ? (
+					<div className="text-center text-[var(--color-text-tertiary)] py-8">
+						等待通讯…发送消息后会在这里看到 RPC 请求和 SSE 事件
+					</div>
+				) : (
+					entries.map((entry) => {
+						const style = KIND_STYLES[entry.kind];
+						return (
+							<div
+								key={entry.id}
+								className="flex items-start gap-2 px-3 py-0.5 hover:bg-[var(--color-bg-hover)] border-b border-[var(--color-border-secondary)]"
+							>
+								<span className="text-[var(--color-text-tertiary)] flex-shrink-0">
+									{formatTime(entry.time)}
+								</span>
+								<span style={{ color: style.color }} className="flex-shrink-0 w-4">
+									{style.icon}
+								</span>
+								<span className="text-[var(--color-text-primary)] break-all">
+									{entry.label}
+									{entry.detail && (
+										<span className="text-[var(--color-text-tertiary)] ml-1">
+											{entry.detail}
+										</span>
+									)}
+								</span>
+							</div>
+						);
+					})
+				)}
+			</div>
+		</div>
+	);
+}

package/templates/cowork/src/mainview/components/layout/AppLayout.tsx

@@ -0,0 +1,216 @@
+/**
+ * Cowork — 响应式三栏布局
+ *
+ * 核心设计：
+ * - 中间区域永远是聊天内容（所有 Tab 共享）
+ * - 左栏：任务列表（三态折叠 full/icon/hidden）
+ * - 右栏：点击聊天中的 localhost 链接后自动展开浏览器预览（~40%）；
+ *   未预览时，按 Tab 切换内容（Cowork=Progress+Artifacts+Context / Code=Preview）
+ */
+import { useTranslation } from 'react-i18next';
+import { PanelLeftClose } from 'lucide-react';
+import { TopBar } from '../topbar/TopBar';
+import { TaskSidebar } from '../sidebar/TaskSidebar';
+import { TaskChat } from '../chat/TaskChat';
+import { ProgressPanel } from '../right/ProgressPanel';
+import { ArtifactsPanel } from '../right/ArtifactsPanel';
+import { ContextPanel } from '../right/ContextPanel';
+import { PreviewBlock } from '../right/PreviewBlock';
+import { NetworkDrawer } from '../dev/NetworkPanel';
+import { useSidebarStore, SIDEBAR_ICON_WIDTH } from '../../stores/use-sidebar-store';
+import { useRightPanelStore } from '../../stores/use-sidebar-store';
+import { useViewStore } from '../../stores/use-view-store';
+
+interface AppLayoutProps {
+	sidebarWidth: number;
+	handleResizeStart: (e: React.MouseEvent) => void;
+}
+
+export function AppLayout({ sidebarWidth, handleResizeStart }: AppLayoutProps) {
+	useTranslation();
+
+	// 左栏状态
+	const sbBreakpoint = useSidebarStore((s) => s.breakpoint);
+	const sbSidebarMode = useSidebarStore((s) => s.sidebarMode);
+	const sbDrawerOpen = useSidebarStore((s) => s.drawerOpen);
+	const sbSetDrawerOpen = useSidebarStore((s) => s.setDrawerOpen);
+
+	// 右栏状态
+	const rpWidth = useRightPanelStore((s) => s.width);
+	const rpMode = useRightPanelStore((s) => s.mode);
+	const rpSetWidth = useRightPanelStore((s) => s.setWidth);
+	const rpExpandedForPreview = useRightPanelStore((s) => s.expandedForPreview);
+	const rpClosePreview = useRightPanelStore((s) => s.closePreview);
+
+	// 视图 Tab
+	const centerTab = useViewStore((s) => s.centerTab);
+
+	// 左栏派生
+	const sidebarInLayout =
+		(sbSidebarMode === 'full' || sbSidebarMode === 'icon') && sbBreakpoint !== 'mobile';
+	const sidebarDrawer = sbDrawerOpen && !sidebarInLayout;
+	const effectiveSidebarWidth = sbSidebarMode === 'icon' ? SIDEBAR_ICON_WIDTH : sidebarWidth;
+	const isSidebarCollapsed = sbSidebarMode === 'icon';
+
+	// 右栏可见性：
+	// - 预览态（点击聊天链接）优先级最高，所有 Tab 下都展开
+	// - 否则 Chat 自动隐藏，其他 Tab 看 rpMode
+	const rightPanelVisible =
+		rpExpandedForPreview ||
+		(rpMode === 'full' && centerTab !== 'chat' && sbBreakpoint !== 'mobile');
+
+	// 右栏拖拽
+	const handleRightResizeStart = (e: React.MouseEvent) => {
+		e.preventDefault();
+		const startX = e.clientX;
+		const startWidth = rpWidth;
+		document.body.style.cursor = 'col-resize';
+		document.body.style.userSelect = 'none';
+
+		const onMove = (ev: MouseEvent) => {
+			// 右栏在右侧，拖拽方向相反（往左拖 = 加宽）
+			const delta = startX - ev.clientX;
+			rpSetWidth(startWidth + delta);
+		};
+		const onUp = () => {
+			document.body.style.cursor = '';
+			document.body.style.userSelect = '';
+			window.removeEventListener('mousemove', onMove);
+			window.removeEventListener('mouseup', onUp);
+		};
+		window.addEventListener('mousemove', onMove);
+		window.addEventListener('mouseup', onUp);
+	};
+
+	return (
+		<div className="h-screen bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] flex flex-col overflow-hidden">
+			<TopBar />
+
+			<div className="flex-1 flex overflow-hidden relative">
+				{/* ── 左：任务侧栏 ── */}
+				{sidebarInLayout ? (
+					<div
+						className="sidebar-container bg-[var(--color-bg-sidebar)] border-r border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-hidden relative"
+						style={{ width: effectiveSidebarWidth }}
+					>
+						<SidebarInner handleResizeStart={handleResizeStart} isCollapsed={isSidebarCollapsed} />
+					</div>
+				) : sidebarDrawer ? (
+					<>
+						<div
+							className="absolute inset-0 bg-black/40 z-20"
+							onClick={() => sbSetDrawerOpen(false)}
+						/>
+						<div
+							className="absolute top-0 left-0 bottom-0 bg-[var(--color-bg-sidebar)] border-r border-[var(--color-border-primary)] flex flex-col z-30 shadow-xl"
+							style={{ width: sidebarWidth }}
+						>
+							<SidebarInner isCollapsed={false} showClose onClose={() => sbSetDrawerOpen(false)} />
+						</div>
+					</>
+				) : null}
+
+				{/* ── 中：聊天（所有 Tab 共享） ── */}
+				<div className="flex-1 flex flex-col overflow-hidden min-w-0">
+					<TaskChat />
+				</div>
+
+				{/* ── 右：预览态优先，否则按 Tab 切换 ── */}
+				{rightPanelVisible && (
+					<div
+						className="bg-[var(--color-bg-panel)] border-l border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-hidden relative"
+						style={{ width: rpWidth }}
+					>
+						{/* 预览态：点击聊天链接触发，PreviewBlock 自带标题栏+关闭（onClose=closePreview） */}
+						{rpExpandedForPreview ? (
+							<div className="flex-1 flex flex-col overflow-hidden">
+								<PreviewBlock onClose={rpClosePreview} />
+							</div>
+						) : (
+							<>
+								{centerTab === 'cowork' && (
+									<div className="flex-1 overflow-auto">
+										<ProgressPanel />
+										<ArtifactsPanel />
+										<ContextPanel />
+									</div>
+								)}
+								{centerTab === 'code' && (
+									<div className="flex-1 flex flex-col overflow-hidden">
+										<PreviewBlock />
+									</div>
+								)}
+							</>
+						)}
+
+						{/* 右栏拖拽条 */}
+						<div
+							className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-[var(--color-accent)]/50 active:bg-[var(--color-accent)] transition-colors z-10 group"
+							onMouseDown={handleRightResizeStart}
+							style={{ width: 4, marginLeft: -4 }}
+						>
+							<div className="absolute inset-y-0 left-1/2 w-0.5 bg-[var(--color-border-primary)] group-hover:bg-[var(--color-text-accent)] transition-colors -translate-x-1/2" />
+						</div>
+					</div>
+				)}
+
+				{/* 右栏收起时的展开按钮（预览态不显示） */}
+				{!rightPanelVisible &&
+					!rpExpandedForPreview &&
+					centerTab !== 'chat' &&
+					sbBreakpoint !== 'mobile' && (
+						<button
+							onClick={() => useRightPanelStore.getState().setMode('full')}
+							title="展开右侧面板"
+							className="absolute top-1/2 right-0 -translate-y-1/2 z-10 px-1 py-4 bg-[var(--color-bg-panel)] border border-r-0 border-[var(--color-border-primary)] rounded-l-lg hover:bg-[var(--color-bg-hover)] transition-colors"
+						>
+							<span className="text-[var(--color-text-tertiary)] text-xs">◀</span>
+						</button>
+					)}
+			</div>
+
+			<NetworkDrawer />
+		</div>
+	);
+}
+
+// ===== 侧栏内容 =====
+function SidebarInner({
+	handleResizeStart,
+	isCollapsed,
+	showClose,
+	onClose,
+}: {
+	handleResizeStart?: (e: React.MouseEvent) => void;
+	isCollapsed: boolean;
+	showClose?: boolean;
+	onClose?: () => void;
+}) {
+	return (
+		<>
+			{showClose && (
+				<div className="flex items-center justify-end px-2 py-1.5 border-b border-[var(--color-border-secondary)]">
+					<button
+						onClick={onClose}
+						title="关闭"
+						className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] p-1"
+					>
+						<PanelLeftClose className="w-4 h-4" />
+					</button>
+				</div>
+			)}
+
+			{isCollapsed ? <TaskSidebar collapsed /> : <TaskSidebar />}
+
+			{!showClose && !isCollapsed && handleResizeStart && (
+				<div
+					className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-[var(--color-accent)]/50 active:bg-[var(--color-accent)] transition-colors z-10 group"
+					onMouseDown={handleResizeStart}
+					style={{ width: 4, marginRight: -4 }}
+				>
+					<div className="absolute inset-y-0 left-1/2 w-0.5 bg-[var(--color-border-primary)] group-hover:bg-[var(--color-text-accent)] transition-colors -translate-x-1/2" />
+				</div>
+			)}
+		</>
+	);
+}

package/templates/cowork/src/mainview/components/right/ArtifactsPanel.tsx

@@ -0,0 +1,54 @@
+/**
+ * 产出物面板 — Artifacts 列表
+ */
+import { useEffect } from 'react';
+import { FileText, ChevronDown, ChevronRight } from 'lucide-react';
+import { useOutputStore } from '../../stores/use-output-store';
+import { useViewStore } from '../../stores/use-view-store';
+
+export function ArtifactsPanel() {
+	const outputs = useOutputStore((s) => s.outputs);
+	const fetchOutputs = useOutputStore((s) => s.fetchOutputs);
+
+	const collapsed = useViewStore((s) => s.rightPanelCollapsed['artifacts']);
+	const toggle = useViewStore((s) => s.toggleRightPanel);
+
+	useEffect(() => {
+		fetchOutputs();
+	}, []);
+
+	return (
+		<div className="border-b border-[var(--color-border-secondary)]">
+			<button
+				onClick={() => toggle('artifacts')}
+				className="w-full flex items-center gap-1.5 px-4 py-3 text-sm font-semibold text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors"
+			>
+				{collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+				Artifacts
+			</button>
+			{!collapsed && (
+				<div className="px-3 pb-3 space-y-0.5">
+					{outputs.length === 0 ? (
+						<p className="text-xs text-[var(--color-text-tertiary)] px-3">No artifacts yet.</p>
+					) : (
+						outputs.map((output) => (
+							<div
+								key={output.id}
+								className="flex items-center gap-2 px-2.5 py-2 rounded-lg hover:bg-[var(--color-bg-hover)] transition-colors cursor-pointer"
+							>
+								<div className="w-7 h-7 rounded-md bg-[var(--color-bg-tertiary)] flex items-center justify-center flex-shrink-0">
+									<FileText className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
+								</div>
+								<div className="flex-1 min-w-0">
+									<div className="text-sm text-[var(--color-text-secondary)] truncate">
+										{output.name}
+									</div>
+								</div>
+							</div>
+						))
+					)}
+				</div>
+			)}
+		</div>
+	);
+}