@dyyz1993/create-agent 2.1.1 → 2.1.3

package/templates/agent/src/mainview/components/todo/TodoPanel.tsx

@@ -1,21 +1,21 @@
-import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Plus, Trash2, Circle, Clock, CheckCircle2, ListTodo } from "lucide-react";
-import { useTodoStore } from "../../stores/use-todo-store";
-import type { TodoStatus } from "@shared/modules/todo";
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Plus, Trash2, Circle, Clock, CheckCircle2, ListTodo } from 'lucide-react';
+import { useTodoStore } from '../../stores/use-todo-store';
+import type { TodoStatus } from '@shared/modules/todo';
 
 const nextStatus: Record<TodoStatus, TodoStatus> = {
-	pending: "in_progress",
-	in_progress: "completed",
-	completed: "pending",
+	pending: 'in_progress',
+	in_progress: 'completed',
+	completed: 'pending',
 };
 
-const statusFlow = ["pending", "in_progress", "completed"] as const;
+const statusFlow = ['pending', 'in_progress', 'completed'] as const;
 
 export function TodoPanel() {
 	const { t } = useTranslation();
 	const [showInput, setShowInput] = useState(false);
-	const [input, setInput] = useState("");
+	const [input, setInput] = useState('');
 	const items = useTodoStore((s) => s.items);
 	const fetchItems = useTodoStore((s) => s.fetchItems);
 	const addItem = useTodoStore((s) => s.addItem);
@@ -29,13 +29,13 @@ export function TodoPanel() {
 	const handleAdd = () => {
 		if (!input.trim()) return;
 		addItem(input.trim());
-		setInput("");
+		setInput('');
 		setShowInput(false);
 	};
 
 	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === "Enter") handleAdd();
-		if (e.key === "Escape") setShowInput(false);
+		if (e.key === 'Enter') handleAdd();
+		if (e.key === 'Escape') setShowInput(false);
 	};
 
 	const statusConfig: Record<
@@ -44,34 +44,34 @@ export function TodoPanel() {
 	> = {
 		pending: {
 			icon: Circle,
-			color: "text-gray-400",
-			label: t("todo.statusPending"),
-			circleColor: "border-gray-500",
+			color: 'text-[var(--color-text-tertiary)]',
+			label: t('todo.statusPending'),
+			circleColor: 'border-[var(--color-border-primary)]',
 		},
 		in_progress: {
 			icon: Clock,
-			color: "text-yellow-400",
-			label: t("todo.statusInProgress"),
-			circleColor: "border-yellow-400 bg-yellow-400/20",
+			color: 'text-yellow-400',
+			label: t('todo.statusInProgress'),
+			circleColor: 'border-yellow-400 bg-yellow-400/20',
 		},
 		completed: {
 			icon: CheckCircle2,
-			color: "text-green-400",
-			label: t("todo.statusCompleted"),
-			circleColor: "border-green-400 bg-green-400/20",
+			color: 'text-[var(--color-text-success)]',
+			label: t('todo.statusCompleted'),
+			circleColor: 'border-[var(--color-text-success)] bg-[var(--color-text-success)]/20',
 		},
 	};
 
 	return (
 		<div className="flex flex-col h-full">
 			<div className="p-3 border-b border-[var(--color-border-primary)] flex items-center justify-between">
-				<span className="text-sm text-[var(--color-text-secondary)]">{t("todo.title")}</span>
+				<span className="text-sm text-[var(--color-text-secondary)]">{t('todo.title')}</span>
 				<button
 					onClick={() => setShowInput(!showInput)}
 					className="flex items-center gap-1 px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded text-[var(--color-text-primary)]"
 				>
 					<Plus className="w-3 h-3" />
-					{t("todo.add")}
+					{t('todo.add')}
 				</button>
 			</div>
 
@@ -82,26 +82,26 @@ export function TodoPanel() {
 						value={input}
 						onChange={(e) => setInput(e.target.value)}
 						onKeyDown={handleKeyDown}
-						placeholder={t("todo.placeholder")}
+						placeholder={t('todo.placeholder')}
 						autoFocus
 						className="flex-1 bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] px-3 py-1.5 rounded text-sm border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
 					/>
 					<button
 						onClick={handleAdd}
 						disabled={!input.trim()}
-						className="px-3 py-1 text-xs bg-green-600 hover:bg-green-500 disabled:opacity-40 rounded text-white"
+						className="px-3 py-1 text-xs bg-[var(--color-text-success)] hover:opacity-80 disabled:opacity-40 rounded text-white"
 					>
-						{t("todo.save")}
+						{t('todo.save')}
 					</button>
 				</div>
 			)}
 
 			<div className="flex-1 overflow-auto p-3">
 				{items.length === 0 ? (
-					<div className="flex flex-col items-center justify-center h-full text-gray-600">
+					<div className="flex flex-col items-center justify-center h-full text-[var(--color-text-tertiary)]">
 						<ListTodo className="w-12 h-12 mb-3 opacity-30" />
-						<span className="text-sm">{t("todo.empty")}</span>
-						<span className="text-xs mt-1">{t("todo.emptyHint")}</span>
+						<span className="text-sm">{t('todo.empty')}</span>
+						<span className="text-xs mt-1">{t('todo.emptyHint')}</span>
 					</div>
 				) : (
 					<div className="space-y-2.5">
@@ -123,27 +123,29 @@ export function TodoPanel() {
 										<div className="flex-1 min-w-0">
 											<p
 												className={`text-sm leading-relaxed ${
-													item.status === "completed"
-														? "text-[var(--color-text-placeholder)] line-through"
-														: "text-[var(--color-text-secondary)]"
+													item.status === 'completed'
+														? 'text-[var(--color-text-placeholder)] line-through'
+														: 'text-[var(--color-text-secondary)]'
 												}`}
 											>
 												{item.content}
 											</p>
 											<div className="flex items-center gap-1.5 mt-2 text-[11px] text-[var(--color-text-placeholder)]">
-												<span>{t("todo.status")}</span>
+												<span>{t('todo.status')}</span>
 												{statusFlow.map((s) => {
 													const sc = statusConfig[s]!;
 													const isActive = s === item.status;
 													return (
 														<span
 															key={s}
-															className={`inline-flex items-center gap-0.5 ${isActive ? sc.color + " font-medium" : ""}`}
+															className={`inline-flex items-center gap-0.5 ${isActive ? sc.color + ' font-medium' : ''}`}
 														>
 															{isActive && <sc.icon className="w-2.5 h-2.5" />}
 															{sc.label}
-															{s !== "completed" && (
-																<span className="text-gray-700 mx-0.5">&rarr;</span>
+															{s !== 'completed' && (
+																<span className="text-[var(--color-text-placeholder)] mx-0.5">
+																	&rarr;
+																</span>
 															)}
 														</span>
 													);
@@ -152,7 +154,7 @@ export function TodoPanel() {
 										</div>
 										<button
 											onClick={() => removeItem(item.id)}
-											className="text-gray-600 hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 self-start mt-0.5"
+											className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 self-start mt-0.5"
 										>
 											<Trash2 className="w-3.5 h-3.5" />
 										</button>

package/templates/agent/src/mainview/components/todo/__tests__/TodoPanel.test.tsx

@@ -1,91 +1,91 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import React from "react";
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import React from 'react';
 
 const mockAddItem = vi.fn();
 const mockUpdateItem = vi.fn();
 const mockRemoveItem = vi.fn();
 const mockFetchItems = vi.fn();
 
-vi.mock("../../../stores/use-todo-store", () => ({
-  useTodoStore: (selector: any) =>
-    selector({
-      items: [
-        { id: "1", content: "Buy milk", status: "pending" },
-        { id: "2", content: "Write code", status: "completed" },
-      ],
-      fetchItems: mockFetchItems,
-      addItem: mockAddItem,
-      updateItem: mockUpdateItem,
-      removeItem: mockRemoveItem,
-    }),
+vi.mock('../../../stores/use-todo-store', () => ({
+	useTodoStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+		selector({
+			items: [
+				{ id: '1', content: 'Buy milk', status: 'pending' },
+				{ id: '2', content: 'Write code', status: 'completed' },
+			],
+			fetchItems: mockFetchItems,
+			addItem: mockAddItem,
+			updateItem: mockUpdateItem,
+			removeItem: mockRemoveItem,
+		}),
 }));
 
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (k: string) => k }),
+vi.mock('react-i18next', () => ({
+	useTranslation: () => ({ t: (k: string) => k }),
 }));
 
-describe("TodoPanel", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
+describe('TodoPanel', () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
 
-  it("should render todo title", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(screen.getByText("todo.title")).toBeDefined();
-  });
+	it('should render todo title', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(screen.getByText('todo.title')).toBeDefined();
+	});
 
-  it("should render add button", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(screen.getByText("todo.add")).toBeDefined();
-  });
+	it('should render add button', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(screen.getByText('todo.add')).toBeDefined();
+	});
 
-  it("should display todo items", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(screen.getByText("Buy milk")).toBeDefined();
-    expect(screen.getByText("Write code")).toBeDefined();
-  });
+	it('should display todo items', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(screen.getByText('Buy milk')).toBeDefined();
+		expect(screen.getByText('Write code')).toBeDefined();
+	});
 
-  it("should call fetchItems on mount", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(mockFetchItems).toHaveBeenCalled();
-  });
+	it('should call fetchItems on mount', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(mockFetchItems).toHaveBeenCalled();
+	});
 
-  it("should show input when add button is clicked", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    fireEvent.click(screen.getByText("todo.add"));
-    expect(screen.getByPlaceholderText("todo.placeholder")).toBeDefined();
-  });
+	it('should show input when add button is clicked', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		fireEvent.click(screen.getByText('todo.add'));
+		expect(screen.getByPlaceholderText('todo.placeholder')).toBeDefined();
+	});
 
-  it("should call addItem on input submit", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    fireEvent.click(screen.getByText("todo.add"));
-    const input = screen.getByPlaceholderText("todo.placeholder");
-    fireEvent.change(input, { target: { value: "New task" } });
-    fireEvent.click(screen.getByText("todo.save"));
-    expect(mockAddItem).toHaveBeenCalledWith("New task");
-  });
+	it('should call addItem on input submit', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		fireEvent.click(screen.getByText('todo.add'));
+		const input = screen.getByPlaceholderText('todo.placeholder');
+		fireEvent.change(input, { target: { value: 'New task' } });
+		fireEvent.click(screen.getByText('todo.save'));
+		expect(mockAddItem).toHaveBeenCalledWith('New task');
+	});
 
-  it("should hide input on Escape", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    fireEvent.click(screen.getByText("todo.add"));
-    const input = screen.getByPlaceholderText("todo.placeholder");
-    fireEvent.keyDown(input, { key: "Escape" });
-    expect(screen.queryByPlaceholderText("todo.placeholder")).toBeNull();
-  });
+	it('should hide input on Escape', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		fireEvent.click(screen.getByText('todo.add'));
+		const input = screen.getByPlaceholderText('todo.placeholder');
+		fireEvent.keyDown(input, { key: 'Escape' });
+		expect(screen.queryByPlaceholderText('todo.placeholder')).toBeNull();
+	});
 
-  it("should render status indicators for each item", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    const _container = render(<TodoPanel />);
-    const statusTexts = screen.getAllByText("todo.status");
-    expect(statusTexts.length).toBeGreaterThan(0);
-  });
+	it('should render status indicators for each item', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		const _container = render(<TodoPanel />);
+		const statusTexts = screen.getAllByText('todo.status');
+		expect(statusTexts.length).toBeGreaterThan(0);
+	});
 });

package/templates/agent/src/mainview/lib/api-client.ts

@@ -1,13 +1,22 @@
-import { createTypedClient, WebSocketTransport, IPCTransport } from "@dyyz1993/rpc-core";
+import { createTypedClient, WebSocketTransport, IPCTransport } from '@dyyz1993/rpc-core';
 import type {
 	TypedClient,
 	MethodParams,
 	MethodResult,
 	EventPayload,
 	EventMetadata,
-} from "@dyyz1993/rpc-core";
-import type { RPCMethods, RPCEvents } from "../../shared/rpc-schema";
-import { rpcCache, CACHEABLE_METHODS } from "./rpc-cache";
+} from '@dyyz1993/rpc-core';
+import type { RPCMethods, RPCEvents } from '../../shared/rpc-schema';
+
+/** Keep the subscribe filter as strict as the typed client's (metadata keys). */
+type SubscribeFilter<K extends keyof RPCEvents = keyof RPCEvents> = RPCEvents[K] extends {
+	metadata: infer M;
+}
+	? Partial<M>
+	: RPCEvents[K] extends { metadata?: infer M }
+		? Partial<NonNullable<M>>
+		: Record<string, unknown>;
+import { rpcCache, CACHEABLE_METHODS } from './rpc-cache';
 
 /**
  * Token 来源优先级：
@@ -16,13 +25,13 @@ import { rpcCache, CACHEABLE_METHODS } from "./rpc-cache";
  * 3. 默认值（开发用）
  */
 function resolveAuthToken(): string {
-	if (typeof window !== "undefined") {
-		const fromQuery = new URLSearchParams(window.location.search).get("token");
+	if (typeof window !== 'undefined') {
+		const fromQuery = new URLSearchParams(window.location.search).get('token');
 		if (fromQuery) return fromQuery;
-		const fromStorage = localStorage.getItem("rpc-auth-token");
+		const fromStorage = localStorage.getItem('rpc-auth-token');
 		if (fromStorage) return fromStorage;
 	}
-	return "pi-agent-template-token";
+	return 'pi-agent-template-token';
 }
 
 const AUTH_TOKEN = resolveAuthToken();
@@ -30,7 +39,7 @@ const AUTH_TOKEN = resolveAuthToken();
 class APIClientImpl {
 	private client: TypedClient<RPCMethods, RPCEvents> | null = null;
 	private initPromise: Promise<void> | null = null;
-	private _transport: "ipc" | "websocket" = "websocket";
+	private _transport: 'ipc' | 'websocket' = 'websocket';
 	private _baseUrl: string | null = null;
 	private wsTransport: WebSocketTransport | null = null;
 
@@ -41,7 +50,7 @@ class APIClientImpl {
 		if (this.client) return;
 
 		const ipcTransport = new IPCTransport();
-		this._transport = "ipc";
+		this._transport = 'ipc';
 		this._baseUrl = null;
 		this.client = createTypedClient<RPCMethods, RPCEvents>(ipcTransport);
 		this.setupElectrobunBridge(ipcTransport);
@@ -52,7 +61,7 @@ class APIClientImpl {
 	 */
 	async initialize(): Promise<void> {
 		// 已连接且 transport 正常 → 直接返回
-		if (this.client && (this._transport === "ipc" || this.wsTransport?.isConnected())) {
+		if (this.client && (this._transport === 'ipc' || this.wsTransport?.isConnected())) {
 			return;
 		}
 
@@ -69,11 +78,11 @@ class APIClientImpl {
 		this.initPromise = (async () => {
 			const env = this.detectEnvironment();
 
-			if (env === "electrobun") {
+			if (env === 'electrobun') {
 				// 不应走到这里，桌面端应通过 initSyncForDesktop() 初始化
 				this.initSyncForDesktop();
 			} else {
-				this._transport = "websocket";
+				this._transport = 'websocket';
 				const wsUrl = this.getWebSocketUrl();
 				this.wsTransport = new WebSocketTransport({
 					url: wsUrl,
@@ -91,19 +100,19 @@ class APIClientImpl {
 		return this.initPromise;
 	}
 
-	private detectEnvironment(): "electrobun" | "browser" {
-		if (typeof window === "undefined") return "browser";
-		if (window.__electrobunBunBridge) return "electrobun";
-		return "browser";
+	private detectEnvironment(): 'electrobun' | 'browser' {
+		if (typeof window === 'undefined') return 'browser';
+		if (window.__electrobunBunBridge) return 'electrobun';
+		return 'browser';
 	}
 
 	private getWebSocketUrl(): string {
-		if (typeof window === "undefined") return `ws://localhost:3100?token=${AUTH_TOKEN}`;
+		if (typeof window === 'undefined') return `ws://localhost:3100?token=${AUTH_TOKEN}`;
 		const customUrl =
-			new URLSearchParams(window.location.search).get("ws") ||
-			localStorage.getItem("rpc-websocket-url");
+			new URLSearchParams(window.location.search).get('ws') ||
+			localStorage.getItem('rpc-websocket-url');
 		if (customUrl)
-			return customUrl.includes("token=") ? customUrl : `${customUrl}?token=${AUTH_TOKEN}`;
+			return customUrl.includes('token=') ? customUrl : `${customUrl}?token=${AUTH_TOKEN}`;
 		return `ws://${window.location.host}/ws?token=${AUTH_TOKEN}`;
 	}
 
@@ -113,7 +122,7 @@ class APIClientImpl {
 	 * - Browser → Bun: 通过 __electrobunBunBridge.postMessage 发送 Electrobun 消息格式
 	 */
 	private setupElectrobunBridge(ipcTransport: IPCTransport): void {
-		if (typeof window === "undefined") return;
+		if (typeof window === 'undefined') return;
 
 		const win = window;
 
@@ -129,8 +138,8 @@ class APIClientImpl {
 			ipcTransport.send = async (message: unknown) => {
 				// 包装成 Electrobun message packet，bun 端 defineRPC 注册了 "rpc-message" handler
 				const electrobunPacket = {
-					type: "message",
-					id: "rpc-message",
+					type: 'message',
+					id: 'rpc-message',
 					payload: JSON.stringify(message),
 				};
 				bridge.postMessage(JSON.stringify(electrobunPacket));
@@ -138,7 +147,7 @@ class APIClientImpl {
 		}
 	}
 
-	getTransport(): "ipc" | "websocket" {
+	getTransport(): 'ipc' | 'websocket' {
 		return this._transport;
 	}
 
@@ -154,7 +163,7 @@ class APIClientImpl {
 
 	async call<K extends keyof RPCMethods>(
 		method: K,
-		params: MethodParams<RPCMethods, K>
+		params: MethodParams<RPCMethods, K>,
 	): Promise<MethodResult<RPCMethods, K>> {
 		const methodStr = method as string;
 		const ttl = CACHEABLE_METHODS[methodStr];
@@ -176,7 +185,7 @@ class APIClientImpl {
 	async subscribe<K extends keyof RPCEvents>(
 		eventType: K,
 		handler: (payload: EventPayload<RPCEvents[K]>, metadata: EventMetadata<RPCEvents[K]>) => void,
-		filter?: Record<string, unknown>
+		filter?: SubscribeFilter<K>,
 	): Promise<string> {
 		await this.initialize();
 		return this.client!.subscribe(eventType, handler, filter);