@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/cowork/src/mainview/lib/network-bus.ts

@@ -0,0 +1,92 @@
+/**
+ * Network Bus — lightweight event emitter for RPC/SSE communication logging.
+ *
+ * The api-client emits events here on every request/response/SSE-event.
+ * The NetworkPanel subscribes to render a live activity feed, giving the
+ * user visibility into the transport layer (solving the "I can't see any
+ * RPC activity" problem with the old silent WebSocket transport).
+ */
+
+export interface NetworkLogEntry {
+	id: string;
+	time: number;
+	kind: "request" | "response" | "event" | "status";
+	label: string;
+	detail?: string;
+}
+
+type NetworkListener = (entry: NetworkLogEntry) => void;
+
+class NetworkBus {
+	private listeners = new Set<NetworkListener>();
+	private entries: NetworkLogEntry[] = [];
+	private maxEntries = 200;
+	private counter = 0;
+
+	subscribe(listener: NetworkListener): () => void {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+
+	getEntries(): NetworkLogEntry[] {
+		return [...this.entries];
+	}
+
+	private emit(entry: Omit<NetworkLogEntry, "id" | "time">): void {
+		const full: NetworkLogEntry = {
+			...entry,
+			id: `net_${++this.counter}`,
+			time: Date.now(),
+		};
+		this.entries.push(full);
+		if (this.entries.length > this.maxEntries) {
+			this.entries.shift();
+		}
+		for (const listener of [...this.listeners]) {
+			listener(full);
+		}
+	}
+
+	emitRequest(method: string, params: unknown): void {
+		const paramSummary = this.summarize(params);
+		this.emit({
+			kind: "request",
+			label: `POST /api/rpc → ${method}`,
+			detail: paramSummary,
+		});
+	}
+
+	emitResponse(method: string, elapsedMs: number): void {
+		this.emit({
+			kind: "response",
+			label: `← ${method}`,
+			detail: `${elapsedMs}ms`,
+		});
+	}
+
+	emitEvent(eventType: string, metadata?: Record<string, unknown>): void {
+		this.emit({
+			kind: "event",
+			label: `← SSE ${eventType}`,
+			detail: metadata ? JSON.stringify(metadata) : undefined,
+		});
+	}
+
+	emitStatus(message: string): void {
+		this.emit({
+			kind: "status",
+			label: message,
+		});
+	}
+
+	private summarize(value: unknown): string {
+		if (value === null || value === undefined) return "";
+		const str = JSON.stringify(value);
+		if (!str) return "";
+		return str.length > 120 ? str.slice(0, 117) + "..." : str;
+	}
+}
+
+export const networkBus = new NetworkBus();

package/templates/cowork/src/mainview/lib/rpc-cache.ts

@@ -0,0 +1,94 @@
+interface CacheEntry<T> {
+  data: T;
+  timestamp: number;
+}
+
+class RpcCache {
+  private cache = new Map<string, CacheEntry<unknown>>();
+  private defaultTTL: number;
+  private pruneTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor(defaultTTL = 2000) {
+    this.defaultTTL = defaultTTL;
+  }
+
+  private key(method: string, params: unknown): string {
+    return `${method}:${JSON.stringify(params)}`;
+  }
+
+  get<T>(method: string, params: unknown, ttl?: number): T | null {
+    const k = this.key(method, params);
+    const entry = this.cache.get(k);
+    if (!entry) return null;
+
+    const effectiveTTL = ttl ?? this.defaultTTL;
+    if (Date.now() - entry.timestamp > effectiveTTL) {
+      this.cache.delete(k);
+      return null;
+    }
+
+    return entry.data as T;
+  }
+
+  set<T>(method: string, params: unknown, data: T): void {
+    const k = this.key(method, params);
+    this.cache.set(k, { data, timestamp: Date.now() });
+    if (!this.pruneTimer) this.startPruneTimer();
+  }
+
+  invalidate(method: string): void {
+    const prefix = `${method}:`;
+    for (const key of this.cache.keys()) {
+      if (key.startsWith(prefix)) {
+        this.cache.delete(key);
+      }
+    }
+  }
+
+  invalidateAll(methods: string[]): void {
+    for (const m of methods) {
+      this.invalidate(m);
+    }
+  }
+
+  clear(): void {
+    this.cache.clear();
+    if (this.pruneTimer) {
+      clearInterval(this.pruneTimer);
+      this.pruneTimer = null;
+    }
+  }
+
+  prune(): void {
+    const threshold = this.defaultTTL * 10;
+    const now = Date.now();
+    for (const [key, entry] of this.cache) {
+      if (now - entry.timestamp > threshold) {
+        this.cache.delete(key);
+      }
+    }
+    if (this.cache.size === 0 && this.pruneTimer) {
+      clearInterval(this.pruneTimer);
+      this.pruneTimer = null;
+    }
+  }
+
+  private startPruneTimer(): void {
+    if (this.pruneTimer) return;
+    this.pruneTimer = setInterval(() => this.prune(), this.defaultTTL * 5);
+  }
+}
+
+export const CACHEABLE_METHODS: Record<string, number> = {
+  "file.listDir": 2000,
+  "file.readFile": 3000,
+  "git.status": 2000,
+  "git.branches": 5000,
+  "git.log": 3000,
+  "git.diff": 3000,
+  "git.commitFiles": 3000,
+  "git.commitFileDiff": 3000,
+  "git.worktreeList": 5000,
+};
+
+export const rpcCache = new RpcCache(2000);

package/templates/cowork/src/mainview/main.tsx

@@ -0,0 +1,18 @@
+import "./lib/i18n";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { apiClient } from "./lib/api-client";
+import "./index.css";
+import App from "./App";
+
+const isElectrobun = typeof window !== "undefined" && !!window.__electrobunBunBridge;
+
+if (isElectrobun) {
+	apiClient.initSyncForDesktop();
+}
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>
+);

package/templates/cowork/src/mainview/stores/__tests__/use-connection-store.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+describe("useConnectionStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should have initial state", async () => {
+    const { useConnectionStore } = await import("../use-connection-store");
+    const state = useConnectionStore.getState();
+    expect(state.mode).toBe("web");
+    expect(state.ready).toBe(false);
+  });
+
+  it("should set ready state", async () => {
+    const { useConnectionStore } = await import("../use-connection-store");
+    useConnectionStore.getState().setReady(true);
+    expect(useConnectionStore.getState().ready).toBe(true);
+  });
+
+  it("should set mode", async () => {
+    const { useConnectionStore } = await import("../use-connection-store");
+    useConnectionStore.getState().setMode("desktop");
+    expect(useConnectionStore.getState().mode).toBe("desktop");
+  });
+});

package/templates/cowork/src/mainview/stores/__tests__/use-locale-store.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+describe("useLocaleStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+    localStorage.clear();
+  });
+
+  it("should default to English", async () => {
+    const { useLocaleStore } = await import("../use-locale-store");
+    expect(useLocaleStore.getState().locale).toBe("en");
+  });
+
+  it("should change locale", async () => {
+    const { useLocaleStore } = await import("../use-locale-store");
+    useLocaleStore.getState().setLocale("zh");
+    expect(useLocaleStore.getState().locale).toBe("zh");
+  });
+
+  it("should persist locale to localStorage", async () => {
+    const { useLocaleStore } = await import("../use-locale-store");
+    useLocaleStore.getState().setLocale("zh");
+    expect(localStorage.getItem("locale")).toBe("zh");
+  });
+
+  it("should restore locale from localStorage", async () => {
+    localStorage.setItem("locale", "zh");
+    vi.resetModules();
+    const { useLocaleStore } = await import("../use-locale-store");
+    expect(useLocaleStore.getState().locale).toBe("zh");
+  });
+});

package/templates/cowork/src/mainview/stores/__tests__/use-log-store.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect, beforeEach } from "vitest";
+
+describe("useLogStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should start with empty logs", async () => {
+    const { useLogStore } = await import("../use-log-store");
+    expect(useLogStore.getState().logs).toEqual([]);
+  });
+
+  it("should add log entries", async () => {
+    const { useLogStore } = await import("../use-log-store");
+    useLogStore.getState().addLog("test message");
+    const logs = useLogStore.getState().logs;
+    expect(logs).toHaveLength(1);
+    expect(logs[0]).toContain("test message");
+  });
+
+  it("should limit log entries", async () => {
+    const { useLogStore } = await import("../use-log-store");
+    for (let i = 0; i < 200; i++) {
+      useLogStore.getState().addLog(`log ${i}`);
+    }
+    expect(useLogStore.getState().logs.length).toBeLessThanOrEqual(100);
+  });
+});

package/templates/cowork/src/mainview/stores/__tests__/use-preview-store.test.ts

@@ -0,0 +1,193 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock apiClient before importing store
+vi.mock('../../lib/api-client', () => ({
+	apiClient: {
+		call: vi.fn(),
+		subscribe: vi.fn().mockResolvedValue('mock-sub-id'),
+		unsubscribe: vi.fn(),
+	},
+}));
+
+vi.mock('../../stores/use-log-store', () => ({
+	useLogStore: {
+		getState: () => ({ addLog: vi.fn() }),
+	},
+}));
+
+describe('usePreviewStore', () => {
+	beforeEach(async () => {
+		vi.resetModules();
+		vi.clearAllMocks();
+		const { apiClient } = await import('../../lib/api-client');
+		(apiClient.call as ReturnType<typeof vi.fn>).mockReset();
+		(apiClient.subscribe as ReturnType<typeof vi.fn>).mockReset().mockResolvedValue('mock-sub-id');
+	});
+
+	it('should have initial idle state', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const state = usePreviewStore.getState();
+		expect(state.currentTab).toBeNull();
+		expect(state.navState).toBe('idle');
+		expect(state.useIframe).toBe(true);
+		expect(state.history).toEqual([]);
+	});
+
+	it('openUrl should prepend http:// if missing', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+		const mockTab = {
+			id: 'tab-1',
+			url: 'http://localhost:5173',
+			title: 'test',
+			state: 'ready',
+			canGoBack: false,
+			canGoForward: false,
+		};
+		(apiClient.call as ReturnType<typeof vi.fn>).mockResolvedValue({
+			tab: mockTab,
+			useIframe: true,
+		});
+
+		await usePreviewStore.getState().openUrl('localhost:5173');
+
+		expect(apiClient.call).toHaveBeenCalledWith('preview.open', {
+			url: 'http://localhost:5173',
+		});
+		expect(usePreviewStore.getState().currentTab?.url).toBe('http://localhost:5173');
+		expect(usePreviewStore.getState().navState).toBe('ready');
+	});
+
+	it('openUrl should not modify URL if already has protocol', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+		const mockTab = {
+			id: 'tab-1',
+			url: 'https://example.com',
+			title: 'test',
+			state: 'ready',
+			canGoBack: false,
+			canGoForward: false,
+		};
+		(apiClient.call as ReturnType<typeof vi.fn>).mockResolvedValue({
+			tab: mockTab,
+			useIframe: true,
+		});
+
+		await usePreviewStore.getState().openUrl('https://example.com');
+
+		expect(apiClient.call).toHaveBeenCalledWith('preview.open', {
+			url: 'https://example.com',
+		});
+	});
+
+	it('openUrl should set error state on failure', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+		(apiClient.call as ReturnType<typeof vi.fn>).mockRejectedValue(new Error('Network error'));
+
+		await usePreviewStore.getState().openUrl('http://localhost:5173');
+
+		expect(usePreviewStore.getState().navState).toBe('error');
+		expect(usePreviewStore.getState().currentTab).toBeNull();
+	});
+
+	it('openUrl should subscribe to navState events', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+		const mockTab = {
+			id: 'tab-1',
+			url: 'http://localhost:5173',
+			title: 'test',
+			state: 'ready',
+			canGoBack: false,
+			canGoForward: false,
+		};
+		(apiClient.call as ReturnType<typeof vi.fn>).mockResolvedValue({
+			tab: mockTab,
+			useIframe: true,
+		});
+
+		await usePreviewStore.getState().openUrl('http://localhost:5173');
+
+		expect(apiClient.subscribe).toHaveBeenCalledWith('preview.navState', expect.any(Function), {});
+	});
+
+	it('navigate should do nothing without currentTab', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+
+		await usePreviewStore.getState().navigate('reload');
+
+		expect(apiClient.call).not.toHaveBeenCalled();
+	});
+
+	it('navigate should call preview.navigate with tabId and action', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+		const mockTab = {
+			id: 'tab-1',
+			url: 'http://localhost:5173',
+			title: 'test',
+			state: 'ready',
+			canGoBack: false,
+			canGoForward: false,
+		};
+		(apiClient.call as ReturnType<typeof vi.fn>).mockResolvedValue({
+			tab: mockTab,
+			useIframe: true,
+		});
+
+		// First open a URL to set currentTab
+		await usePreviewStore.getState().openUrl('http://localhost:5173');
+		(apiClient.call as ReturnType<typeof vi.fn>).mockClear();
+
+		await usePreviewStore.getState().navigate('reload');
+
+		expect(apiClient.call).toHaveBeenCalledWith('preview.navigate', {
+			tabId: 'tab-1',
+			action: 'reload',
+		});
+	});
+
+	it('closeTab should clear currentTab and navState', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+		const mockTab = {
+			id: 'tab-1',
+			url: 'http://localhost:5173',
+			title: 'test',
+			state: 'ready',
+			canGoBack: false,
+			canGoForward: false,
+		};
+		(apiClient.call as ReturnType<typeof vi.fn>).mockResolvedValue({
+			tab: mockTab,
+			useIframe: true,
+		});
+
+		await usePreviewStore.getState().openUrl('http://localhost:5173');
+		expect(usePreviewStore.getState().currentTab).not.toBeNull();
+
+		(apiClient.call as ReturnType<typeof vi.fn>).mockResolvedValue({ ok: true });
+		await usePreviewStore.getState().closeTab();
+
+		expect(usePreviewStore.getState().currentTab).toBeNull();
+		expect(usePreviewStore.getState().navState).toBe('idle');
+	});
+
+	it('loadHistory should populate history from API', async () => {
+		const { usePreviewStore } = await import('../use-preview-store');
+		const { apiClient } = await import('../../lib/api-client');
+		(apiClient.call as ReturnType<typeof vi.fn>).mockResolvedValue({
+			urls: ['http://localhost:5173', 'http://localhost:3000'],
+		});
+
+		await usePreviewStore.getState().loadHistory();
+
+		expect(usePreviewStore.getState().history).toEqual([
+			'http://localhost:5173',
+			'http://localhost:3000',
+		]);
+	});
+});

package/templates/cowork/src/mainview/stores/__tests__/use-sidebar-store.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+describe('useSidebarStore + useRightPanelStore', () => {
+	beforeEach(async () => {
+		vi.resetModules();
+		localStorage.clear();
+	});
+
+	describe('useRightPanelStore.preview (expandedForPreview)', () => {
+		it('initial state should not be expanded for preview', async () => {
+			const { useRightPanelStore } = await import('../use-sidebar-store');
+			const state = useRightPanelStore.getState();
+			expect(state.expandedForPreview).toBe(false);
+			expect(state.widthBeforeExpand).toBeNull();
+		});
+
+		it('openForPreview should set expandedForPreview and snapshot width', async () => {
+			vi.stubGlobal('innerWidth', 1440);
+			const { useRightPanelStore } = await import('../use-sidebar-store');
+			const widthBefore = useRightPanelStore.getState().width;
+
+			useRightPanelStore.getState().openForPreview();
+
+			const state = useRightPanelStore.getState();
+			expect(state.expandedForPreview).toBe(true);
+			// ~40% of 1440 = 576, clamped to [240, 600] → 576
+			expect(state.width).toBe(576);
+			expect(state.widthBeforeExpand).toBe(widthBefore);
+			vi.unstubAllGlobals();
+		});
+
+		it('openForPreview should clamp to max width on narrow viewports', async () => {
+			vi.stubGlobal('innerWidth', 2000);
+			const { useRightPanelStore } = await import('../use-sidebar-store');
+
+			useRightPanelStore.getState().openForPreview();
+
+			// 40% of 2000 = 800, clamped to max 600
+			expect(useRightPanelStore.getState().width).toBe(600);
+			vi.unstubAllGlobals();
+		});
+
+		it('openForPreview should be idempotent when already expanded', async () => {
+			vi.stubGlobal('innerWidth', 1440);
+			const { useRightPanelStore } = await import('../use-sidebar-store');
+			useRightPanelStore.getState().openForPreview();
+
+			// Manually resize after opening
+			useRightPanelStore.getState().setWidth(300);
+			useRightPanelStore.getState().openForPreview(); // second call should no-op
+
+			expect(useRightPanelStore.getState().width).toBe(300);
+			vi.unstubAllGlobals();
+		});
+
+		it('closePreview should restore the width from before expanding', async () => {
+			vi.stubGlobal('innerWidth', 1440);
+			const { useRightPanelStore } = await import('../use-sidebar-store');
+			const widthBefore = useRightPanelStore.getState().width;
+
+			useRightPanelStore.getState().openForPreview();
+			expect(useRightPanelStore.getState().width).not.toBe(widthBefore);
+
+			useRightPanelStore.getState().closePreview();
+
+			const state = useRightPanelStore.getState();
+			expect(state.expandedForPreview).toBe(false);
+			expect(state.width).toBe(widthBefore);
+			expect(state.widthBeforeExpand).toBeNull();
+			vi.unstubAllGlobals();
+		});
+
+		it('closePreview should fall back to default width when no snapshot', async () => {
+			const { useRightPanelStore, RIGHT_PANEL_DEFAULT_WIDTH } =
+				await import('../use-sidebar-store');
+			useRightPanelStore.getState().closePreview();
+			// No prior expand → falls back to default (320)
+			expect(useRightPanelStore.getState().width).toBe(RIGHT_PANEL_DEFAULT_WIDTH);
+		});
+	});
+});

package/templates/cowork/src/mainview/stores/__tests__/use-theme-store.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+describe("useThemeStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+    localStorage.clear();
+    document.documentElement.classList.remove("dark");
+  });
+
+  it("should default to dark theme", async () => {
+    const { useThemeStore } = await import("../use-theme-store");
+    const state = useThemeStore.getState();
+    expect(state.theme).toBe("dark");
+  });
+
+  it("should toggle between light and dark", async () => {
+    const { useThemeStore } = await import("../use-theme-store");
+    const store = useThemeStore.getState();
+
+    expect(store.theme).toBe("dark");
+    store.toggleTheme();
+    expect(useThemeStore.getState().theme).toBe("light");
+
+    useThemeStore.getState().toggleTheme();
+    expect(useThemeStore.getState().theme).toBe("dark");
+  });
+
+  it("should set theme explicitly", async () => {
+    const { useThemeStore } = await import("../use-theme-store");
+    useThemeStore.getState().setTheme("light");
+    expect(useThemeStore.getState().theme).toBe("light");
+  });
+
+  it("should persist theme to localStorage", async () => {
+    const { useThemeStore } = await import("../use-theme-store");
+    useThemeStore.getState().setTheme("light");
+
+    expect(localStorage.getItem("theme")).toBe("light");
+  });
+
+  it("should restore theme from localStorage", async () => {
+    localStorage.setItem("theme", "light");
+
+    vi.resetModules();
+    const { useThemeStore } = await import("../use-theme-store");
+
+    expect(useThemeStore.getState().theme).toBe("light");
+  });
+
+  it("should apply dark class to document element", async () => {
+    const { useThemeStore } = await import("../use-theme-store");
+    useThemeStore.getState().setTheme("dark");
+
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    useThemeStore.getState().setTheme("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+});

package/templates/cowork/src/mainview/stores/message-batcher.ts

@@ -0,0 +1,25 @@
+type Update = { sessionId: string; apply: () => void };
+
+let queue: Update[] = [];
+let rafId: number | null = null;
+
+function flush() {
+  rafId = null;
+  const batch = queue;
+  queue = [];
+  for (const u of batch) u.apply();
+}
+
+export function batchMessageUpdate(sessionId: string, apply: () => void) {
+  queue.push({ sessionId, apply });
+  if (!rafId) {
+    rafId = requestAnimationFrame(flush);
+  }
+}
+
+export function flushNow() {
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+    flush();
+  }
+}