@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/cowork/src/mainview/components/sidebar/TaskSidebar.tsx

@@ -0,0 +1,211 @@
+/**
+ * 任务侧栏 — 所有 Tab 共享同一套任务列表
+ *
+ * V4：Chat / Code / Cowork 三个 Tab 的左侧面板完全一致，
+ * 都显示 New task 按钮 + 任务列表 + 状态色标签。
+ * Tab 仅影响中间/右侧内容，左侧保持统一。
+ */
+import { useEffect } from 'react';
+import {
+	Plus,
+	Circle,
+	CheckCircle2,
+	AlertCircle,
+	Clock,
+	Loader2,
+	type LucideIcon,
+} from 'lucide-react';
+import { useTaskStore, type TaskStatus } from '../../stores/use-task-store';
+import { useViewStore, type CenterTab } from '../../stores/use-view-store';
+
+const STATUS_CONFIG: Record<
+	TaskStatus,
+	{ icon: LucideIcon; color: string; bg: string; label: string }
+> = {
+	queued: {
+		icon: Clock,
+		color: 'text-slate-400',
+		bg: 'bg-slate-100 dark:bg-slate-700/50',
+		label: 'Queued',
+	},
+	analyzing: {
+		icon: Loader2,
+		color: 'text-blue-500',
+		bg: 'bg-blue-100 dark:bg-blue-900/30',
+		label: 'Analyzing',
+	},
+	executing: {
+		icon: Loader2,
+		color: 'text-indigo-500',
+		bg: 'bg-indigo-100 dark:bg-indigo-900/30',
+		label: 'Executing',
+	},
+	waiting_input: {
+		icon: AlertCircle,
+		color: 'text-amber-500',
+		bg: 'bg-amber-100 dark:bg-amber-900/30',
+		label: 'Waiting',
+	},
+	review: {
+		icon: Circle,
+		color: 'text-purple-500',
+		bg: 'bg-purple-100 dark:bg-purple-900/30',
+		label: 'Review',
+	},
+	completed: {
+		icon: CheckCircle2,
+		color: 'text-green-600',
+		bg: 'bg-green-100 dark:bg-green-900/30',
+		label: 'Done',
+	},
+	failed: {
+		icon: AlertCircle,
+		color: 'text-red-500',
+		bg: 'bg-red-100 dark:bg-red-900/30',
+		label: 'Failed',
+	},
+};
+
+interface TaskSidebarProps {
+	collapsed?: boolean;
+}
+
+export function TaskSidebar({ collapsed }: TaskSidebarProps) {
+	const tasks = useTaskStore((s) => s.tasks);
+	const currentTaskId = useTaskStore((s) => s.currentTaskId);
+	const fetchTasks = useTaskStore((s) => s.fetchTasks);
+	const createTask = useTaskStore((s) => s.createTask);
+	const selectTask = useTaskStore((s) => s.selectTask);
+
+	const centerTab = useViewStore((s) => s.centerTab);
+	const setCenterTab = useViewStore((s) => s.setCenterTab);
+
+	useEffect(() => {
+		fetchTasks();
+	}, []);
+
+	// ── 图标条模式 ──
+	if (collapsed) {
+		return (
+			<div className="py-2 px-1.5 flex flex-col items-center gap-1">
+				<button
+					onClick={() => createTask('新任务')}
+					title="新建任务"
+					className="w-9 h-9 flex items-center justify-center rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800/40 active:scale-95 transition-all"
+				>
+					<Plus className="w-4 h-4" />
+				</button>
+				<div className="w-5 h-px bg-[var(--color-border-secondary)] my-1" />
+				{tasks.slice(0, 8).map((t) => {
+					const cfg = STATUS_CONFIG[t.status] ?? STATUS_CONFIG.queued;
+					const Icon = cfg.icon;
+					return (
+						<button
+							key={t.id}
+							onClick={() => selectTask(t.id)}
+							title={t.title}
+							className={`w-9 h-9 flex items-center justify-center rounded-lg transition-all active:scale-95 ${
+								t.id === currentTaskId
+									? 'bg-[var(--color-bg-active)]'
+									: 'hover:bg-[var(--color-bg-hover)]'
+							}`}
+						>
+							<Icon
+								className={`w-4 h-4 ${cfg.color} ${t.status === 'executing' || t.status === 'analyzing' ? 'animate-spin' : ''}`}
+							/>
+						</button>
+					);
+				})}
+			</div>
+		);
+	}
+
+	// ── 完整模式（三个 Tab 共享同一套任务列表） ──
+	return (
+		<div className="flex flex-col h-full">
+			{/* Tab 切换 */}
+			<div className="flex items-center gap-1 px-3 py-2.5 border-b border-[var(--color-border-secondary)]">
+				{(['chat', 'code', 'cowork'] as CenterTab[]).map((tab) => (
+					<button
+						key={tab}
+						onClick={() => setCenterTab(tab)}
+						className={`flex-1 px-3 py-1.5 text-[13px] font-medium rounded-lg transition-all ${
+							centerTab === tab
+								? 'bg-[var(--color-bg-active)] text-[var(--color-text-primary)]'
+								: 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
+						}`}
+					>
+						{tab === 'chat' ? 'Chat' : tab === 'code' ? 'Code' : 'Cowork'}
+					</button>
+				))}
+			</div>
+
+			{/* New task 按钮（三个 Tab 共享） */}
+			<div className="px-3 pt-3 pb-2">
+				<button
+					onClick={() => createTask('新任务')}
+					className="w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] text-[var(--color-text-primary)] hover:border-[var(--color-text-accent)] hover:shadow-sm transition-all text-[13px] font-medium"
+				>
+					<Plus className="w-4 h-4 text-[var(--color-text-accent)]" />
+					New task
+				</button>
+			</div>
+
+			{/* 任务列表（三个 Tab 共享） */}
+			<div className="flex-1 overflow-auto px-2 pt-2 space-y-1">
+				{tasks.map((task) => {
+					const cfg = STATUS_CONFIG[task.status] ?? STATUS_CONFIG.queued;
+					const Icon = cfg.icon;
+					const isActive = task.id === currentTaskId;
+					return (
+						<button
+							key={task.id}
+							onClick={() => selectTask(task.id)}
+							className={`w-full text-left px-3 py-2.5 rounded-lg transition-all ${
+								isActive ? 'bg-[var(--color-bg-active)]' : 'hover:bg-[var(--color-bg-hover)]'
+							}`}
+						>
+							<div className="flex items-start gap-2.5">
+								<div
+									className={`w-6 h-6 rounded-md flex items-center justify-center flex-shrink-0 mt-0.5 ${cfg.bg}`}
+								>
+									<Icon
+										className={`w-3.5 h-3.5 ${cfg.color} ${task.status === 'executing' || task.status === 'analyzing' ? 'animate-spin' : ''}`}
+									/>
+								</div>
+								<div className="flex-1 min-w-0">
+									<div
+										className={`text-[13px] leading-snug truncate ${isActive ? 'font-medium text-[var(--color-text-primary)]' : 'text-[var(--color-text-secondary)]'}`}
+									>
+										{task.title}
+									</div>
+									<div className="flex items-center gap-1.5 mt-1">
+										<span className={`text-[11px] font-medium ${cfg.color}`}>{cfg.label}</span>
+										{task.progress?.steps && (
+											<span className="text-[11px] text-[var(--color-text-tertiary)]">
+												· {task.progress.steps.filter((s) => s.status === 'done').length}/
+												{task.progress.steps.length}
+											</span>
+										)}
+									</div>
+								</div>
+							</div>
+						</button>
+					);
+				})}
+				{tasks.length === 0 && (
+					<div className="px-3 py-8 text-center">
+						<p className="text-sm text-[var(--color-text-tertiary)]">暂无任务</p>
+					</div>
+				)}
+			</div>
+
+			{/* 底部提示 */}
+			<div className="px-3 py-2.5 border-t border-[var(--color-border-secondary)]">
+				<p className="text-[11px] text-[var(--color-text-tertiary)] leading-relaxed">
+					These tasks run locally and aren't synced across devices
+				</p>
+			</div>
+		</div>
+	);
+}

package/templates/cowork/src/mainview/components/topbar/TopBar.tsx

@@ -0,0 +1,86 @@
+/**
+ * 顶栏 — 侧栏 toggle + Logo + 右栏 toggle + 用户头像
+ */
+import { PanelLeft, PanelLeftOpen, PanelRight, PanelRightOpen } from 'lucide-react';
+import { useSidebarStore, useRightPanelStore } from '../../stores/use-sidebar-store';
+import { useViewStore } from '../../stores/use-view-store';
+
+export function TopBar() {
+	// 左栏
+	const sbSidebarMode = useSidebarStore((s) => s.sidebarMode);
+	const sbCycleMode = useSidebarStore((s) => s.cycleSidebarMode);
+	const sbDrawerOpen = useSidebarStore((s) => s.drawerOpen);
+	const sbSetDrawerOpen = useSidebarStore((s) => s.setDrawerOpen);
+	const sbBreakpoint = useSidebarStore((s) => s.breakpoint);
+	const sidebarActive = sbSidebarMode !== 'hidden' || sbDrawerOpen;
+
+	// 右栏
+	const rpMode = useRightPanelStore((s) => s.mode);
+	const rpToggle = useRightPanelStore((s) => s.toggleMode);
+	const centerTab = useViewStore((s) => s.centerTab);
+	const rightPanelToggleable = centerTab !== 'chat' && sbBreakpoint !== 'mobile';
+
+	const handleSidebarToggle = (): void => {
+		if (sbBreakpoint === 'mobile' || sbBreakpoint === 'tablet') {
+			sbSetDrawerOpen(!sbDrawerOpen);
+		} else {
+			sbCycleMode();
+		}
+	};
+
+	return (
+		<div className="h-11 flex items-center justify-between px-3 bg-[var(--color-bg-primary)] border-b border-[var(--color-border-secondary)] flex-shrink-0 z-10">
+			<div className="flex items-center gap-2.5">
+				{/* 左栏 toggle */}
+				<button
+					onClick={handleSidebarToggle}
+					title={sbSidebarMode === 'hidden' && !sbDrawerOpen ? '展开侧栏' : '收起侧栏'}
+					className={`p-1.5 rounded-lg transition-colors ${
+						sidebarActive
+							? 'text-[var(--color-text-accent)] bg-[var(--color-accent)]/10'
+							: 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
+					}`}
+				>
+					{sbSidebarMode === 'hidden' && !sbDrawerOpen ? (
+						<PanelLeftOpen className="w-[18px] h-[18px]" />
+					) : (
+						<PanelLeft className="w-[18px] h-[18px]" />
+					)}
+				</button>
+
+				<div className="flex items-center gap-1.5">
+					<div className="w-6 h-6 rounded-md bg-gradient-to-br from-orange-400 to-rose-500 flex items-center justify-center">
+						<span className="text-white text-xs font-bold">C</span>
+					</div>
+					<span className="text-sm font-semibold text-[var(--color-text-primary)]">Cowork</span>
+				</div>
+			</div>
+
+			{/* 右侧 */}
+			<div className="flex items-center gap-2">
+				{/* 右栏 toggle（Chat 模式下隐藏） */}
+				{rightPanelToggleable && (
+					<button
+						onClick={rpToggle}
+						title={rpMode === 'full' ? '收起右侧面板' : '展开右侧面板'}
+						className={`p-1.5 rounded-lg transition-colors ${
+							rpMode === 'full'
+								? 'text-[var(--color-text-accent)] bg-[var(--color-accent)]/10'
+								: 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
+						}`}
+					>
+						{rpMode === 'hidden' ? (
+							<PanelRightOpen className="w-[18px] h-[18px]" />
+						) : (
+							<PanelRight className="w-[18px] h-[18px]" />
+						)}
+					</button>
+				)}
+
+				<div className="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-xs font-semibold">
+					SW
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/cowork/src/mainview/global.d.ts

@@ -0,0 +1,13 @@
+declare global {
+  interface Window {
+    __electrobun?: {
+      receiveMessageFromBun: (msg: unknown) => void;
+    };
+    __electrobunBunBridge?: {
+      postMessage: (msg: string) => void;
+    };
+    /** Desktop IPC receiver: Bun calls this via executeJavascript */
+    __piAgentIPC?: (msg: unknown) => void;
+  }
+}
+export {};

package/templates/cowork/src/mainview/hooks/__tests__/use-breakpoint.test.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+
+const mockSetBreakpoint = vi.fn();
+const mockSetRightMode = vi.fn();
+
+vi.mock('../../stores/use-sidebar-store', () => ({
+	useSidebarStore: {
+		getState: () => ({
+			breakpoint: 'desktop',
+			_setBreakpoint: mockSetBreakpoint,
+		}),
+	},
+	useRightPanelStore: {
+		getState: () => ({
+			mode: 'full',
+			setMode: mockSetRightMode,
+		}),
+	},
+}));
+
+describe('useBreakpointSync', () => {
+	let observerCallback: ResizeObserverCallback;
+	let mockObserve: ReturnType<typeof vi.fn>;
+	let mockDisconnect: ReturnType<typeof vi.fn>;
+
+	beforeEach(() => {
+		vi.resetModules();
+		vi.clearAllMocks();
+
+		mockObserve = vi.fn();
+		mockDisconnect = vi.fn();
+
+		class MockResizeObserver {
+			constructor(cb: ResizeObserverCallback) {
+				observerCallback = cb;
+			}
+			observe = mockObserve;
+			disconnect = mockDisconnect;
+			unobserve = vi.fn();
+		}
+		globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+	});
+
+	it('should create ResizeObserver and observe documentElement', async () => {
+		const { useBreakpointSync } = await import('../../hooks/use-breakpoint');
+		renderHook(() => useBreakpointSync());
+		expect(mockObserve).toHaveBeenCalledWith(document.documentElement);
+	});
+
+	it('should set mobile breakpoint for width < 768', async () => {
+		const { useBreakpointSync } = await import('../../hooks/use-breakpoint');
+		renderHook(() => useBreakpointSync());
+
+		act(() => {
+			observerCallback(
+				[
+					{
+						target: document.documentElement,
+						contentRect: { width: 500, height: 800 } as DOMRectReadOnly,
+						borderBoxSize: [] as unknown,
+						contentBoxSize: [] as unknown,
+					},
+				],
+				{} as ResizeObserver,
+			);
+		});
+
+		await new Promise((r) => setTimeout(r, 200));
+		expect(mockSetBreakpoint).toHaveBeenCalledWith('mobile');
+	});
+
+	it('should set tablet breakpoint for 768 <= width < 1024', async () => {
+		const { useBreakpointSync } = await import('../../hooks/use-breakpoint');
+		renderHook(() => useBreakpointSync());
+
+		act(() => {
+			observerCallback(
+				[
+					{
+						target: document.documentElement,
+						contentRect: { width: 900, height: 600 } as DOMRectReadOnly,
+						borderBoxSize: [] as unknown,
+						contentBoxSize: [] as unknown,
+					},
+				],
+				{} as ResizeObserver,
+			);
+		});
+
+		await new Promise((r) => setTimeout(r, 200));
+		expect(mockSetBreakpoint).toHaveBeenCalledWith('tablet');
+	});
+
+	it('should set wide breakpoint for width >= 1280', async () => {
+		const { useBreakpointSync } = await import('../../hooks/use-breakpoint');
+		renderHook(() => useBreakpointSync());
+
+		act(() => {
+			observerCallback(
+				[
+					{
+						target: document.documentElement,
+						contentRect: { width: 1400, height: 900 } as DOMRectReadOnly,
+						borderBoxSize: [] as unknown,
+						contentBoxSize: [] as unknown,
+					},
+				],
+				{} as ResizeObserver,
+			);
+		});
+
+		await new Promise((r) => setTimeout(r, 200));
+		expect(mockSetBreakpoint).toHaveBeenCalledWith('wide');
+	});
+
+	it('should disconnect observer on unmount', async () => {
+		const { useBreakpointSync } = await import('../../hooks/use-breakpoint');
+		const { unmount } = renderHook(() => useBreakpointSync());
+		unmount();
+		expect(mockDisconnect).toHaveBeenCalled();
+	});
+});

package/templates/cowork/src/mainview/hooks/use-breakpoint.ts

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useSidebarStore, useRightPanelStore, type Breakpoint } from '../stores/use-sidebar-store';
+
+function getBreakpoint(width: number): Breakpoint {
+	if (width < 768) return 'mobile';
+	if (width < 1024) return 'tablet';
+	if (width < 1280) return 'desktop';
+	return 'wide';
+}
+
+/**
+ * 单一 ResizeObserver，同步 breakpoint 到 store。
+ *
+ * 仅在断点**变化**时调整面板，不覆盖用户的 sidebarMode/rightPanelMode 手动设置。
+ */
+export function useBreakpointSync() {
+	useEffect(() => {
+		const applyBreakpoint = (bp: Breakpoint): void => {
+			const rp = useRightPanelStore.getState();
+
+			// 移动端/平板自动收起右栏
+			if (bp === 'mobile' || bp === 'tablet') {
+				if (rp.mode !== 'hidden') rp.setMode('hidden');
+			}
+		};
+
+		let timer: ReturnType<typeof setTimeout>;
+		const obs = new ResizeObserver((entries) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				for (const entry of entries) {
+					const bp = getBreakpoint(entry.contentRect.width);
+					const current = useSidebarStore.getState().breakpoint;
+					if (bp !== current) {
+						useSidebarStore.getState()._setBreakpoint(bp);
+						applyBreakpoint(bp);
+					}
+				}
+			}, 150);
+		});
+		obs.observe(document.documentElement);
+
+		// 初始也应用一次
+		const initBp = getBreakpoint(document.documentElement.clientWidth);
+		useSidebarStore.getState()._setBreakpoint(initBp);
+		applyBreakpoint(initBp);
+
+		return () => {
+			clearTimeout(timer);
+			obs.disconnect();
+		};
+	}, []);
+}

package/templates/cowork/src/mainview/hooks/use-rpc-init.ts

@@ -0,0 +1,26 @@
+/**
+ * RPC 初始化 Hook — 建立连接 + 加载初始数据
+ */
+import { useEffect } from "react";
+import { useConnectionStore } from "../stores/use-connection-store";
+import { useTaskStore } from "../stores/use-task-store";
+import { useContextStore } from "../stores/use-context-store";
+import { useOutputStore } from "../stores/use-output-store";
+
+export function useRpcInit() {
+	const ready = useConnectionStore((s) => s.ready);
+	const initializeConnection = useConnectionStore((s) => s.initializeConnection);
+
+	// 初始化连接
+	useEffect(() => {
+		initializeConnection();
+	}, [initializeConnection]);
+
+	// 连接就绪后加载数据
+	useEffect(() => {
+		if (!ready) return;
+		useTaskStore.getState().fetchTasks();
+		useContextStore.getState().fetchAll();
+		useOutputStore.getState().fetchOutputs();
+	}, [ready]);
+}

package/templates/cowork/src/mainview/hooks/use-sidebar-resize.ts

@@ -0,0 +1,40 @@
+import { useCallback, useRef } from "react";
+import { useSidebarStore } from "../stores/use-sidebar-store";
+
+export function useSidebarResize() {
+  const sidebarWidth = useSidebarStore((s) => s.sidebarWidth);
+  const setSidebarWidth = useSidebarStore((s) => s.setSidebarWidth);
+
+  const resizingRef = useRef(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      resizingRef.current = true;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+
+      const onMove = (ev: MouseEvent) => {
+        if (!resizingRef.current) return;
+        const delta = ev.clientX - startXRef.current;
+        setSidebarWidth(startWidthRef.current + delta);
+      };
+      const onUp = () => {
+        resizingRef.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [sidebarWidth, setSidebarWidth]
+  );
+
+  return { sidebarWidth, handleResizeStart };
+}

package/templates/cowork/src/mainview/index.css

@@ -0,0 +1,89 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+	--color-bg-primary: #ffffff;
+	--color-bg-secondary: #f9fafb;
+	--color-bg-tertiary: #f3f4f6;
+	--color-bg-input: #f9fafb;
+	--color-bg-hover: #f3f4f6;
+	--color-bg-active: #eef2ff;
+	--color-bg-sidebar: #f9fafb;
+	--color-bg-panel: #f9fafb;
+	--color-bg-overlay: rgba(0, 0, 0, 0.4);
+
+	--color-text-primary: #111827;
+	--color-text-secondary: #4b5563;
+	--color-text-tertiary: #9ca3af;
+	--color-text-placeholder: #6b7280;
+	--color-text-accent: #4f46e5;
+	--color-text-success: #16a34a;
+	--color-text-error: #dc2626;
+	--color-text-info: #0891b2;
+
+	--color-border-primary: #e5e7eb;
+	--color-border-secondary: #f3f4f6;
+
+	--color-accent: #4f46e5;
+	--color-accent-hover: #4338ca;
+
+	--color-badge-bg: #eef2ff;
+	--color-badge-text: #3730a3;
+
+	/* Cowork 专用色 */
+	--color-cowork-instruction-bg: #faf7f0;
+
+	/* 阴影 */
+	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+	--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
+	--shadow-popover: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+}
+
+.dark {
+	--color-bg-primary: #0f172a;
+	--color-bg-secondary: #1e293b;
+	--color-bg-tertiary: #334155;
+	--color-bg-input: #1e293b;
+	--color-bg-hover: #334155;
+	--color-bg-active: #312e81;
+	--color-bg-sidebar: #1e293b;
+	--color-bg-panel: #1e293b;
+	--color-bg-overlay: rgba(0, 0, 0, 0.6);
+
+	--color-text-primary: #f1f5f9;
+	--color-text-secondary: #cbd5e1;
+	--color-text-tertiary: #64748b;
+	--color-text-placeholder: #94a3b8;
+	--color-text-accent: #818cf8;
+	--color-text-success: #4ade80;
+	--color-text-error: #f87171;
+	--color-text-info: #22d3ee;
+
+	--color-border-primary: #334155;
+	--color-border-secondary: #1e293b;
+
+	--color-accent: #6366f1;
+	--color-accent-hover: #4f46e5;
+
+	--color-badge-bg: #312e81;
+	--color-badge-text: #a5b4fc;
+
+	/* Cowork 专用色 */
+	--color-cowork-instruction-bg: #292524;
+
+	/* 阴影 */
+	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+	--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+	--shadow-popover: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+}
+
+/* 侧边栏宽度过渡动画（三态折叠切换时平滑） */
+.sidebar-container {
+	transition: width 200ms ease;
+}
+
+/* 拖拽 resize 时禁用动画，保证跟手 */
+.sidebar-container.dragging {
+	transition: none;
+}

package/templates/cowork/src/mainview/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Browser Agent</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>