@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/general/src/mainview/components/debug/__tests__/DebugPanel.test.tsx

@@ -0,0 +1,169 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockCallRPC = vi.fn();
+const mockHandleSubscribe = vi.fn();
+const mockHandleUnsubscribe = vi.fn();
+const mockClearDebug = vi.fn();
+const mockSetMethod = vi.fn();
+
+vi.mock("../../../stores/use-app-store", () => ({
+	useAppStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+		selector({
+			method: "system.ping",
+			result: { pong: true },
+			tickEvents: ["tick-1", "tick-2"],
+			tickCount: 2,
+			subscriptionId: null,
+			timerRunning: false,
+			setMethod: mockSetMethod,
+			callRPC: mockCallRPC,
+			handleSubscribe: mockHandleSubscribe,
+			handleUnsubscribe: mockHandleUnsubscribe,
+			clearDebug: mockClearDebug,
+		}),
+}));
+
+vi.mock("../../../stores/use-log-store", () => ({
+	useLogStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+		selector({ logs: ["Connected", "Error: timeout"] }),
+}));
+
+vi.mock("react-i18next", () => ({
+	useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+const localStorageStore: Record<string, string> = {};
+vi.stubGlobal("localStorage", {
+	getItem: (key: string) => localStorageStore[key] ?? null,
+	setItem: (key: string, value: string) => {
+		localStorageStore[key] = String(value);
+	},
+	removeItem: (key: string) => {
+		delete localStorageStore[key];
+	},
+	clear: () => {
+		Object.keys(localStorageStore).forEach((k) => delete localStorageStore[k]);
+	},
+	get length() {
+		return Object.keys(localStorageStore).length;
+	},
+	key: (i: number) => Object.keys(localStorageStore)[i] ?? null,
+});
+
+describe("DebugPanel", () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
+
+	it("should render debug panel title", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("tabs.debug")).toBeDefined();
+	});
+
+	it("should render RPC calls section", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("debug.rpcCalls")).toBeDefined();
+	});
+
+	it("should call clearDebug when clear button is clicked", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		fireEvent.click(screen.getByText("debug.clear"));
+		expect(mockClearDebug).toHaveBeenCalledOnce();
+	});
+
+	it("should collapse panel when collapse button is clicked", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		const collapseBtn = screen.getByTitle("debug.collapsePanel");
+		fireEvent.click(collapseBtn);
+		expect(screen.getByTitle("debug.expandPanel")).toBeDefined();
+		expect(screen.queryByText("debug.rpcCalls")).toBeNull();
+	});
+
+	it("should expand panel when expand button is clicked", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		fireEvent.click(screen.getByTitle("debug.collapsePanel"));
+		expect(screen.getByTitle("debug.expandPanel")).toBeDefined();
+		fireEvent.click(screen.getByTitle("debug.expandPanel"));
+		expect(screen.getByTitle("debug.collapsePanel")).toBeDefined();
+		expect(screen.getByText("debug.rpcCalls")).toBeDefined();
+	});
+
+	it("should persist collapsed state in localStorage", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		fireEvent.click(screen.getByTitle("debug.collapsePanel"));
+		expect(localStorage.getItem("debug-panel-collapsed")).toBe("true");
+	});
+
+	it("should restore collapsed state from localStorage", async () => {
+		localStorage.setItem("debug-panel-collapsed", "true");
+		vi.resetModules();
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByTitle("debug.expandPanel")).toBeDefined();
+		expect(screen.queryByText("debug.rpcCalls")).toBeNull();
+	});
+
+	it("should render subscriptions section", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("debug.subscriptions")).toBeDefined();
+	});
+
+	it("should render logs section", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("debug.logs")).toBeDefined();
+	});
+
+	it("should display method select", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("system.ping")).toBeDefined();
+	});
+
+	it("should call callRPC on call button click", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		fireEvent.click(screen.getByText("debug.call"));
+		expect(mockCallRPC).toHaveBeenCalledWith("");
+	});
+
+	it("should display result JSON", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText(/pong/)).toBeDefined();
+	});
+
+	it("should display log entries", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("Connected")).toBeDefined();
+		expect(screen.getByText("Error: timeout")).toBeDefined();
+	});
+
+	it("should show subscribe button when not subscribed", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("debug.subscribe")).toBeDefined();
+	});
+
+	it("should display tick events", async () => {
+		const { DebugPanel } = await import("../DebugPanel");
+		render(<DebugPanel />);
+		expect(screen.getByText("tick-1")).toBeDefined();
+		expect(screen.getByText("tick-2")).toBeDefined();
+	});
+});

package/templates/general/src/mainview/components/explorer/ConfirmDialog.tsx

@@ -2,51 +2,51 @@ import { useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 interface ConfirmDialogProps {
-  title: string;
-  message: string;
-  onConfirm: () => void;
-  onCancel: () => void;
+	title: string;
+	message: string;
+	onConfirm: () => void;
+	onCancel: () => void;
 }
 
 export function ConfirmDialog({ title, message, onConfirm, onCancel }: ConfirmDialogProps) {
-  const { t } = useTranslation();
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") onCancel();
-    },
-    [onCancel],
-  );
+	const { t } = useTranslation();
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			if (e.key === "Escape") onCancel();
+		},
+		[onCancel]
+	);
 
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [handleKeyDown]);
 
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onCancel();
-      }}
-    >
-      <div className="bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded-lg shadow-2xl p-4 min-w-[300px] max-w-[400px]">
-        <h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-2">{title}</h3>
-        <p className="text-xs text-[var(--color-text-secondary)] mb-4">{message}</p>
-        <div className="flex justify-end gap-2">
-          <button
-            className="px-3 py-1.5 text-xs bg-[var(--color-bg-tertiary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors text-[var(--color-text-secondary)]"
-            onClick={onCancel}
-          >
-            {t("common.cancel")}
-          </button>
-          <button
-            className="px-3 py-1.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors text-white"
-            onClick={onConfirm}
-          >
-            {t("common.delete")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			onClick={(e) => {
+				if (e.target === e.currentTarget) onCancel();
+			}}
+		>
+			<div className="bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded-lg shadow-2xl p-4 min-w-[300px] max-w-[400px]">
+				<h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-2">{title}</h3>
+				<p className="text-xs text-[var(--color-text-secondary)] mb-4">{message}</p>
+				<div className="flex justify-end gap-2">
+					<button
+						className="px-3 py-1.5 text-xs bg-[var(--color-bg-tertiary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors text-[var(--color-text-secondary)]"
+						onClick={onCancel}
+					>
+						{t("common.cancel")}
+					</button>
+					<button
+						className="px-3 py-1.5 text-xs bg-[var(--color-text-error)] hover:opacity-80 rounded transition-colors text-white"
+						onClick={onConfirm}
+					>
+						{t("common.delete")}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
 }

package/templates/general/src/mainview/components/explorer/ContextMenu.tsx

@@ -1,82 +1,87 @@
 import { useEffect, useRef, useCallback } from "react";
 
 export interface MenuItem {
-  label: string;
-  icon?: React.ReactNode;
-  onClick: () => void;
-  danger?: boolean;
-  divider?: boolean;
+	label: string;
+	icon?: React.ReactNode;
+	onClick: () => void;
+	danger?: boolean;
+	divider?: boolean;
 }
 
 interface ContextMenuProps {
-  x: number;
-  y: number;
-  items: MenuItem[];
-  onClose: () => void;
+	x: number;
+	y: number;
+	items: MenuItem[];
+	onClose: () => void;
 }
 
 export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
-  const ref = useRef<HTMLDivElement>(null);
+	const ref = useRef<HTMLDivElement>(null);
 
-  // Adjust position to stay within viewport
-  const adjustedX = useRef(x);
-  const adjustedY = useRef(y);
+	// Adjust position to stay within viewport
+	const adjustedX = useRef(x);
+	const adjustedY = useRef(y);
 
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    if (rect.right > vw) adjustedX.current = Math.max(0, x - rect.width);
-    if (rect.bottom > vh) adjustedY.current = Math.max(0, y - rect.height);
-    el.style.left = `${adjustedX.current}px`;
-    el.style.top = `${adjustedY.current}px`;
-  }, [x, y]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		if (rect.right > vw) adjustedX.current = Math.max(0, x - rect.width);
+		if (rect.bottom > vh) adjustedY.current = Math.max(0, y - rect.height);
+		el.style.left = `${adjustedX.current}px`;
+		el.style.top = `${adjustedY.current}px`;
+	}, [x, y]);
 
-  const handleClickOutside = useCallback((e: MouseEvent) => {
-    if (ref.current && !ref.current.contains(e.target as Node)) {
-      onClose();
-    }
-  }, [onClose]);
+	const handleClickOutside = useCallback(
+		(e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				onClose();
+			}
+		},
+		[onClose]
+	);
 
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleClickOutside, onClose]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleClickOutside, onClose]);
 
-  return (
-    <div
-      ref={ref}
-      className="fixed z-50 min-w-[160px] bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded-md shadow-xl py-1"
-      style={{ left: adjustedX.current, top: adjustedY.current }}
-    >
-      {items.map((item, i) => (
-        <div key={i}>
-          {item.divider && i > 0 && <div className="border-t border-[var(--color-border-secondary)] my-1" />}
-          <button
-            className={`w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors ${
-              item.danger
-                ? "text-red-400 hover:bg-red-900/30"
-                : "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]"
-            }`}
-            onClick={() => {
-              item.onClick();
-              onClose();
-            }}
-          >
-            {item.icon && <span className="w-3.5 shrink-0">{item.icon}</span>}
-            {item.label}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div
+			ref={ref}
+			className="fixed z-50 min-w-[160px] bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded-md shadow-xl py-1"
+			style={{ left: adjustedX.current, top: adjustedY.current }}
+		>
+			{items.map((item, i) => (
+				<div key={i}>
+					{item.divider && i > 0 && (
+						<div className="border-t border-[var(--color-border-secondary)] my-1" />
+					)}
+					<button
+						className={`w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors ${
+							item.danger
+								? "text-[var(--color-text-error)] hover:bg-[var(--color-text-error)]/20"
+								: "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]"
+						}`}
+						onClick={() => {
+							item.onClick();
+							onClose();
+						}}
+					>
+						{item.icon && <span className="w-3.5 shrink-0">{item.icon}</span>}
+						{item.label}
+					</button>
+				</div>
+			))}
+		</div>
+	);
 }

package/templates/general/src/mainview/components/feed/FeedPanel.tsx

@@ -18,7 +18,7 @@ const FILTER_PRESETS: Record<SubEventType, string[]> = {
 const CATEGORY_COLORS: Record<FeedCategory, string> = {
 	tech: "bg-blue-600/30 text-blue-300",
 	news: "bg-amber-600/30 text-amber-300",
-	general: "bg-green-600/30 text-green-300",
+	general: "bg-[var(--color-text-success)]/30 text-[var(--color-text-success)]",
 };
 
 export function FeedPanel() {
@@ -103,6 +103,7 @@ export function FeedPanel() {
 							className="w-24 px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
 						/>
 						<select
+							aria-label={t("feed.newPost")}
 							value={category}
 							onChange={(e) => setCategory(e.target.value as FeedCategory)}
 							className="px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
@@ -141,6 +142,7 @@ export function FeedPanel() {
 					</div>
 					<div className="flex gap-2 items-center">
 						<select
+							aria-label={t("feed.eventStream")}
 							value={activeEventType}
 							onChange={(e) => {
 								setActiveEventType(e.target.value as SubEventType);
@@ -164,14 +166,14 @@ export function FeedPanel() {
 						{!subscribed ? (
 							<button
 								onClick={handleSubscribe}
-								className="px-3 py-1.5 text-xs bg-green-600 hover:bg-green-700 rounded transition-colors whitespace-nowrap"
+								className="px-3 py-1.5 text-xs bg-[var(--color-text-success)] hover:opacity-80 rounded transition-colors whitespace-nowrap"
 							>
 								{t("feed.subscribe")}
 							</button>
 						) : (
 							<button
 								onClick={handleUnsubscribe}
-								className="px-3 py-1.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors whitespace-nowrap"
+								className="px-3 py-1.5 text-xs bg-[var(--color-text-error)] hover:opacity-80 rounded transition-colors whitespace-nowrap"
 							>
 								{t("feed.unsubscribe")}
 							</button>
@@ -203,7 +205,7 @@ export function FeedPanel() {
 								{t("feed.eventStream")}
 							</div>
 							{subscribed && (
-								<span className="px-1.5 py-0.5 bg-green-600/30 text-green-400 rounded text-[10px] animate-pulse">
+								<span className="px-1.5 py-0.5 bg-[var(--color-text-success)]/30 text-[var(--color-text-success)] rounded text-[10px] animate-pulse">
 									{t("feed.live")}
 								</span>
 							)}
@@ -225,7 +227,7 @@ export function FeedPanel() {
 											{new Date(entry.timestamp).toLocaleTimeString()}
 										</span>
 									</div>
-									<pre className="text-cyan-300 mt-0.5 whitespace-pre-wrap break-all">
+									<pre className="text-[var(--color-text-info)] mt-0.5 whitespace-pre-wrap break-all">
 										{JSON.stringify(entry.payload, null, 0)}
 									</pre>
 								</div>

package/templates/general/src/mainview/components/file-preview/FilePreviewOverlay.tsx

@@ -4,52 +4,71 @@ import { formatSize } from "../../utils/file-utils";
 import { VirtualizedCodeView } from "./VirtualizedCodeView";
 
 interface FilePreviewOverlayProps {
-  preview: FilePreview;
-  loading: boolean;
-  onClose: () => void;
+	preview: FilePreview;
+	loading: boolean;
+	onClose: () => void;
+	scrollToLine?: number;
+	onScrolledToLine?: () => void;
 }
 
-export function FilePreviewOverlay({ preview, loading, onClose }: FilePreviewOverlayProps) {
-  return (
-    <div className="absolute inset-0 z-10 bg-[var(--color-bg-primary)]/95 flex flex-col overflow-hidden">
-      <div className="flex items-center justify-between px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
-        <div className="flex items-center gap-2">
-          <FileText className="w-4 h-4 text-[var(--color-text-tertiary)]" />
-          <span className="text-sm font-medium text-[var(--color-text-secondary)]">{preview.name}</span>
-          {preview.size > 0 && (
-            <span className="text-xs text-[var(--color-text-placeholder)]">{formatSize(preview.size)}</span>
-          )}
-          {preview.totalLines != null && (
-            <span className="text-xs text-[var(--color-text-placeholder)]">{preview.totalLines} lines</span>
-          )}
-        </div>
-        <button
-          onClick={onClose}
-          className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] p-1 rounded hover:bg-[var(--color-bg-hover)] transition-colors"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
+export function FilePreviewOverlay({
+	preview,
+	loading,
+	onClose,
+	scrollToLine,
+	onScrolledToLine,
+}: FilePreviewOverlayProps) {
+	return (
+		<div className="absolute inset-0 z-10 bg-[var(--color-bg-primary)]/95 flex flex-col overflow-hidden">
+			<div className="flex items-center justify-between px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
+				<div className="flex items-center gap-2">
+					<FileText className="w-4 h-4 text-[var(--color-text-tertiary)]" />
+					<span className="text-sm font-medium text-[var(--color-text-secondary)]">
+						{preview.name}
+					</span>
+					{preview.size > 0 && (
+						<span className="text-xs text-[var(--color-text-placeholder)]">
+							{formatSize(preview.size)}
+						</span>
+					)}
+					{preview.totalLines != null && (
+						<span className="text-xs text-[var(--color-text-placeholder)]">
+							{preview.totalLines} lines
+						</span>
+					)}
+				</div>
+				<button
+					onClick={onClose}
+					className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] p-1 rounded hover:bg-[var(--color-bg-hover)] transition-colors"
+				>
+					<X className="w-4 h-4" />
+				</button>
+			</div>
 
-      {/* File content — flex-col so VirtualizedCodeView's flex-1 works */}
-      <div className="flex-1 min-h-0 flex flex-col">
-        {loading ? (
-          <div className="flex items-center justify-center h-full text-[var(--color-text-tertiary)] text-sm">
-            <div className="w-5 h-5 border-2 border-[var(--color-text-accent)] border-t-transparent rounded-full animate-spin mr-2" />
-            Loading...
-          </div>
-        ) : preview.isImage && preview.imageUrl ? (
-          <div className="flex items-center justify-center h-full p-4 bg-[#1a1a2e]">
-            <img
-              src={preview.imageUrl}
-              alt={preview.name}
-              className="max-w-full max-h-full object-contain rounded"
-            />
-          </div>
-        ) : preview.content ? (
-          <VirtualizedCodeView code={preview.content} filename={preview.name} />
-        ) : null}
-      </div>
-    </div>
-  );
+			{/* File content — flex-col so VirtualizedCodeView's flex-1 works */}
+			<div className="flex-1 min-h-0 flex flex-col">
+				{loading ? (
+					<div className="flex items-center justify-center h-full text-[var(--color-text-tertiary)] text-sm">
+						<div className="w-5 h-5 border-2 border-[var(--color-text-accent)] border-t-transparent rounded-full animate-spin mr-2" />
+						Loading...
+					</div>
+				) : preview.isImage && preview.imageUrl ? (
+					<div className="flex items-center justify-center h-full p-4 bg-[#1a1a2e]">
+						<img
+							src={preview.imageUrl}
+							alt={preview.name}
+							className="max-w-full max-h-full object-contain rounded"
+						/>
+					</div>
+				) : preview.content ? (
+					<VirtualizedCodeView
+						code={preview.content}
+						filename={preview.name}
+						scrollToLine={scrollToLine}
+						onScrolledToLine={onScrolledToLine}
+					/>
+				) : null}
+			</div>
+		</div>
+	);
 }