@dyyz1993/create-agent 2.1.1 → 2.1.2

package/templates/agent/src/mainview/components/debug/DebugPanel.tsx

@@ -1,120 +1,187 @@
-import { useTranslation } from "react-i18next";
-import { Send, Play, Square, File } from "lucide-react";
-import { useAppStore } from "../../stores/use-app-store";
-import { useLogStore } from "../../stores/use-log-store";
-import type { DemoMethod } from "../../types";
+import { useState, useEffect } from 'react';
+import { Send, Play, Square, File, ChevronRight, ChevronDown, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useAppStore } from '../../stores/use-app-store';
+import { useLogStore } from '../../stores/use-log-store';
+import type { DemoMethod } from '../../types';
+
+const COLLAPSED_KEY = 'debug-panel-collapsed';
+
+function readCollapsed(): boolean {
+	try {
+		return localStorage.getItem(COLLAPSED_KEY) === 'true';
+	} catch {
+		return false;
+	}
+}
 
 export function DebugPanel() {
-  const { t } = useTranslation();
-  const method = useAppStore((s) => s.method);
-  const result = useAppStore((s) => s.result);
-  const logs = useLogStore((s) => s.logs);
-  const tickEvents = useAppStore((s) => s.tickEvents);
-  const tickCount = useAppStore((s) => s.tickCount);
-  const subscriptionId = useAppStore((s) => s.subscriptionId);
-  const timerRunning = useAppStore((s) => s.timerRunning);
-  const setMethod = useAppStore((s) => s.setMethod);
-  const callRPC = useAppStore((s) => s.callRPC);
-  const handleSubscribe = useAppStore((s) => s.handleSubscribe);
-  const handleUnsubscribe = useAppStore((s) => s.handleUnsubscribe);
+	const { t } = useTranslation();
+	const [collapsed, setCollapsed] = useState(readCollapsed);
+
+	useEffect(() => {
+		try {
+			localStorage.setItem(COLLAPSED_KEY, String(collapsed));
+		} catch {
+			/* ignore */
+		}
+	}, [collapsed]);
+
+	const method = useAppStore((s) => s.method);
+	const result = useAppStore((s) => s.result);
+	const logs = useLogStore((s) => s.logs);
+	const tickEvents = useAppStore((s) => s.tickEvents);
+	const tickCount = useAppStore((s) => s.tickCount);
+	const subscriptionId = useAppStore((s) => s.subscriptionId);
+	const timerRunning = useAppStore((s) => s.timerRunning);
+	const setMethod = useAppStore((s) => s.setMethod);
+	const callRPC = useAppStore((s) => s.callRPC);
+	const handleSubscribe = useAppStore((s) => s.handleSubscribe);
+	const handleUnsubscribe = useAppStore((s) => s.handleUnsubscribe);
+	const clearDebug = useAppStore((s) => s.clearDebug);
+
+	if (collapsed) {
+		return (
+			<div className="w-12 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col items-center justify-start pt-2 flex-shrink-0">
+				<button
+					onClick={() => setCollapsed(false)}
+					title={t('debug.expandPanel')}
+					className="w-10 h-6 flex items-center gap-1 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+				>
+					<ChevronRight className="w-3 h-3" />
+					{t('tabs.debug')}
+				</button>
+			</div>
+		);
+	}
 
-  return (
-    <div className="w-72 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-y-auto">
-      <div className="p-3 border-b border-[var(--color-border-primary)]">
-        <div className="flex items-center justify-between mb-2">
-          <h2 className="text-xs font-semibold flex items-center gap-1.5">
-            <Send className="w-3.5 h-3.5 text-[var(--color-text-accent)]" />
-            {t("debug.rpcCalls")}
-          </h2>
-        </div>
-        <div className="flex gap-2 mb-2">
-          <select
-            value={method}
-            onChange={(e) => setMethod(e.target.value as DemoMethod)}
-            className="flex-1 px-2 py-1 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
-          >
-            <option value="system.ping">system.ping</option>
-            <option value="system.hello">system.hello</option>
-            <option value="system.echo">system.echo</option>
-            <option value="chat.send">chat.send</option>
-          </select>
-          <button
-            onClick={() => callRPC("")}
-            className="px-3 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors flex items-center gap-1"
-          >
-            <Play className="w-3 h-3" />
-            {t("debug.call")}
-          </button>
-        </div>
-        {!!result && (
-          <div className="bg-[var(--color-bg-tertiary)] rounded p-2">
-            <pre className="text-[var(--color-text-success)] text-[11px] overflow-x-auto whitespace-pre-wrap">
-              {JSON.stringify(result, null, 2)}
-            </pre>
-          </div>
-        )}
-      </div>
+	return (
+		<div className="w-72 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-y-auto">
+			<div className="flex items-center justify-between px-2 py-1.5 border-b border-[var(--color-border-primary)]">
+				<button
+					onClick={() => setCollapsed(true)}
+					title={t('debug.collapsePanel')}
+					className="flex items-center gap-1 text-[11px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
+				>
+					<ChevronDown className="w-3 h-3" />
+					{t('tabs.debug')}
+				</button>
+				<button
+					onClick={clearDebug}
+					title={t('debug.clearAll')}
+					className="flex items-center gap-1 text-[11px] text-[var(--color-text-placeholder)] hover:text-[var(--color-text-error)] transition-colors"
+				>
+					<Trash2 className="w-3 h-3" />
+					{t('debug.clear')}
+				</button>
+			</div>
+			<div className="p-3 border-b border-[var(--color-border-primary)]">
+				<div className="flex items-center justify-between mb-2">
+					<h2 className="text-xs font-semibold flex items-center gap-1.5">
+						<Send className="w-3.5 h-3.5 text-[var(--color-text-accent)]" />
+						{t('debug.rpcCalls')}
+					</h2>
+				</div>
+				<div className="flex gap-2 mb-2">
+					<select
+						aria-label={t('debug.rpcCalls')}
+						value={method}
+						onChange={(e) => setMethod(e.target.value as DemoMethod)}
+						className="flex-1 px-2 py-1 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
+					>
+						<option value="system.ping">system.ping</option>
+						<option value="system.hello">system.hello</option>
+						<option value="system.echo">system.echo</option>
+						<option value="chat.send">chat.send</option>
+					</select>
+					<button
+						onClick={() => callRPC('')}
+						className="px-3 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors flex items-center gap-1"
+					>
+						<Play className="w-3 h-3" />
+						{t('debug.call')}
+					</button>
+				</div>
+				{!!result && (
+					<div className="bg-[var(--color-bg-tertiary)] rounded p-2">
+						<pre className="text-[var(--color-text-success)] text-[11px] overflow-x-auto whitespace-pre-wrap">
+							{JSON.stringify(result, null, 2)}
+						</pre>
+					</div>
+				)}
+			</div>
 
-      <div className="p-3 border-b border-[var(--color-border-primary)]">
-        <div className="flex items-center justify-between mb-2">
-          <h2 className="text-xs font-semibold flex items-center gap-1.5">
-            {timerRunning ? (
-              <Square className="w-3.5 h-3.5 text-[var(--color-text-success)] fill-green-400" />
-            ) : (
-              <Play className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
-            )}
-            {t("debug.subscriptions")}
-            {timerRunning && (
-              <span className="ml-1 px-1.5 py-0.5 bg-green-600/30 text-green-400 rounded text-[10px]">
-                LIVE
-              </span>
-            )}
-          </h2>
-          <div className="flex gap-2 items-center">
-            <span className="text-[11px] text-[var(--color-text-tertiary)]">
-              {t("debug.events", { count: tickCount })}
-            </span>
-            {!subscriptionId ? (
-              <button
-                onClick={handleSubscribe}
-                className="px-2 py-0.5 text-xs bg-green-600 hover:bg-green-700 rounded transition-colors"
-              >
-                {t("debug.subscribe")}
-              </button>
-            ) : (
-              <button
-                onClick={handleUnsubscribe}
-                className="px-2 py-0.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors"
-              >
-                {t("debug.unsubscribe")}
-              </button>
-            )}
-          </div>
-        </div>
-        <div className="bg-[var(--color-bg-tertiary)] rounded p-2 max-h-32 overflow-y-auto font-mono text-[11px]">
-          {tickEvents.length === 0 ? (
-            <div className="text-[var(--color-text-placeholder)] text-center py-1">{t("debug.noEvents")}</div>
-          ) : (
-            tickEvents.map((ev, i) => (
-              <div key={i} className="text-[var(--color-text-info)]">{ev}</div>
-            ))
-          )}
-        </div>
-      </div>
+			<div className="p-3 border-b border-[var(--color-border-primary)]">
+				<div className="flex items-center justify-between mb-2">
+					<h2 className="text-xs font-semibold flex items-center gap-1.5">
+						{timerRunning ? (
+							<Square className="w-3.5 h-3.5 text-[var(--color-text-success)] fill-[var(--color-text-success)]" />
+						) : (
+							<Play className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
+						)}
+						{t('debug.subscriptions')}
+						{timerRunning && (
+							<span className="ml-1 px-1.5 py-0.5 bg-[var(--color-text-success)]/30 text-[var(--color-text-success)] rounded text-[10px]">
+								{t('feed.live')}
+							</span>
+						)}
+					</h2>
+					<div className="flex gap-2 items-center">
+						<span className="text-[11px] text-[var(--color-text-tertiary)]">
+							{t('debug.events', { count: tickCount })}
+						</span>
+						{!subscriptionId ? (
+							<button
+								onClick={handleSubscribe}
+								className="px-2 py-0.5 text-xs bg-[var(--color-text-success)] hover:opacity-80 rounded transition-colors"
+							>
+								{t('debug.subscribe')}
+							</button>
+						) : (
+							<button
+								onClick={handleUnsubscribe}
+								className="px-2 py-0.5 text-xs bg-[var(--color-text-error)] hover:opacity-80 rounded transition-colors"
+							>
+								{t('debug.unsubscribe')}
+							</button>
+						)}
+					</div>
+				</div>
+				<div className="bg-[var(--color-bg-tertiary)] rounded p-2 max-h-32 overflow-y-auto font-mono text-[11px]">
+					{tickEvents.length === 0 ? (
+						<div className="text-[var(--color-text-placeholder)] text-center py-1">
+							{t('debug.noEvents')}
+						</div>
+					) : (
+						tickEvents.map((ev, i) => (
+							<div key={i} className="text-[var(--color-text-info)]">
+								{ev}
+							</div>
+						))
+					)}
+				</div>
+			</div>
 
-      <div className="p-3 flex flex-col flex-1 min-h-0">
-        <h2 className="text-xs font-semibold mb-2 flex-shrink-0 flex items-center gap-1.5">
-          <File className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
-          {t("debug.logs")}
-        </h2>
-        <div className="flex-1 bg-black rounded p-2 overflow-y-auto font-mono text-[11px]">
-          {logs.map((log, i) => (
-            <div key={i} className={log.includes("Error") ? "text-[var(--color-text-error)]" : "text-[var(--color-text-success)]"}>
-              {log}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+			<div className="p-3 flex flex-col flex-1 min-h-0">
+				<h2 className="text-xs font-semibold mb-2 flex-shrink-0 flex items-center gap-1.5">
+					<File className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
+					{t('debug.logs')}
+				</h2>
+				<div className="flex-1 bg-black rounded p-2 overflow-y-auto font-mono text-[11px]">
+					{logs.map((log, i) => (
+						<div
+							key={i}
+							className={
+								log.includes('Error')
+									? 'text-[var(--color-text-error)]'
+									: 'text-[var(--color-text-success)]'
+							}
+						>
+							{log}
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }

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

@@ -1,102 +1,102 @@
-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 mockCallRPC = vi.fn();
 const mockHandleSubscribe = vi.fn();
 const mockHandleUnsubscribe = vi.fn();
 
-vi.mock("../../../stores/use-app-store", () => ({
-  useAppStore: (selector: any) =>
-    selector({
-      method: "system.ping",
-      result: { pong: true },
-      tickEvents: ["tick-1", "tick-2"],
-      tickCount: 2,
-      subscriptionId: null,
-      timerRunning: false,
-      setMethod: vi.fn(),
-      callRPC: mockCallRPC,
-      handleSubscribe: mockHandleSubscribe,
-      handleUnsubscribe: mockHandleUnsubscribe,
-    }),
+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: vi.fn(),
+			callRPC: mockCallRPC,
+			handleSubscribe: mockHandleSubscribe,
+			handleUnsubscribe: mockHandleUnsubscribe,
+		}),
 }));
 
-vi.mock("../../../stores/use-log-store", () => ({
-  useLogStore: (selector: any) =>
-    selector({ logs: ["Connected", "Error: timeout"] }),
+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 }),
+vi.mock('react-i18next', () => ({
+	useTranslation: () => ({ t: (k: string) => k }),
 }));
 
-describe("DebugPanel", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
+describe('DebugPanel', () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
 
-  it("should render RPC calls section", async () => {
-    const { DebugPanel } = await import("../DebugPanel");
-    render(<DebugPanel />);
-    expect(screen.getByText("debug.rpcCalls")).toBeDefined();
-  });
+	it('should render RPC calls section', async () => {
+		const { DebugPanel } = await import('../DebugPanel');
+		render(<DebugPanel />);
+		expect(screen.getByText('debug.rpcCalls')).toBeDefined();
+	});
 
-  it("should render subscriptions section", async () => {
-    const { DebugPanel } = await import("../DebugPanel");
-    render(<DebugPanel />);
-    expect(screen.getByText("debug.subscriptions")).toBeDefined();
-  });
+	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 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 display method select', async () => {
+		const { DebugPanel } = await import('../DebugPanel');
+		render(<DebugPanel />);
+		expect(screen.getByText('system.ping')).toBeDefined();
+	});
 
-  it("should render call button", async () => {
-    const { DebugPanel } = await import("../DebugPanel");
-    render(<DebugPanel />);
-    expect(screen.getByText("debug.call")).toBeDefined();
-  });
+	it('should render call button', async () => {
+		const { DebugPanel } = await import('../DebugPanel');
+		render(<DebugPanel />);
+		expect(screen.getByText('debug.call')).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 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 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 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 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();
-  });
+	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/agent/src/mainview/components/diff/__tests__/DiffViewerPanel.test.tsx

@@ -1,73 +1,76 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
-import React from "react";
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import React from 'react';
 
 const mockClearDiff = vi.fn();
 
-vi.mock("../../../stores/use-git-store", () => ({
-  useGitStore: (selector: any) =>
-    selector({
-      currentDiff: {
-        filePath: "src/components/App.tsx",
-        oldContent: "old code",
-        newContent: "new code",
-      },
-      loadingDiff: false,
-      clearDiff: mockClearDiff,
-    }),
+vi.mock('../../../stores/use-git-store', () => ({
+	useGitStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+		selector({
+			currentDiff: {
+				filePath: 'src/components/App.tsx',
+				oldContent: 'old code',
+				newContent: 'new code',
+			},
+			loadingDiff: false,
+			clearDiff: mockClearDiff,
+		}),
 }));
 
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (k: string) => k }),
+vi.mock('react-i18next', () => ({
+	useTranslation: () => ({ t: (k: string) => k }),
 }));
 
-vi.mock("react-diff-viewer-continued", () => ({
-  __esModule: true,
-  default: ({ oldValue, newValue }: any) => (
-    <div data-testid="diff-viewer">{oldValue} → {newValue}</div>
-  ),
-  DiffMethod: { LINES: "LINES" },
+vi.mock('react-diff-viewer-continued', () => ({
+	__esModule: true,
+	default: ({ oldValue, newValue }: { oldValue: string; newValue: string }) => (
+		<div data-testid="diff-viewer">
+			{oldValue} → {newValue}
+		</div>
+	),
+	DiffMethod: { LINES: 'LINES' },
 }));
 
-describe("DiffViewerPanel", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
+describe('DiffViewerPanel', () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
 
-  it("should render file name in header", async () => {
-    const { DiffViewerPanel } = await import("../DiffViewerPanel");
-    render(<DiffViewerPanel />);
-    expect(screen.getByText("App.tsx")).toBeDefined();
-  });
+	it('should render file name in header', async () => {
+		const { DiffViewerPanel } = await import('../DiffViewerPanel');
+		render(<DiffViewerPanel />);
+		expect(screen.getByText('App.tsx')).toBeDefined();
+	});
 
-  it("should render full file path", async () => {
-    const { DiffViewerPanel } = await import("../DiffViewerPanel");
-    render(<DiffViewerPanel />);
-    expect(screen.getByText("src/components/App.tsx")).toBeDefined();
-  });
+	it('should render full file path', async () => {
+		const { DiffViewerPanel } = await import('../DiffViewerPanel');
+		render(<DiffViewerPanel />);
+		expect(screen.getByText('src/components/App.tsx')).toBeDefined();
+	});
 
-  it("should render diff viewer content", async () => {
-    const { DiffViewerPanel } = await import("../DiffViewerPanel");
-    render(<DiffViewerPanel />);
-    expect(screen.getByTestId("diff-viewer")).toBeDefined();
-  });
+	it('should render diff viewer content', async () => {
+		const { DiffViewerPanel } = await import('../DiffViewerPanel');
+		render(<DiffViewerPanel />);
+		expect(screen.getByTestId('diff-viewer')).toBeDefined();
+	});
 
-  it("should render view mode toggle buttons", async () => {
-    const { DiffViewerPanel } = await import("../DiffViewerPanel");
-    render(<DiffViewerPanel />);
-    expect(screen.getByTitle("diff.lineByLine")).toBeDefined();
-    expect(screen.getByTitle("diff.sideBySide")).toBeDefined();
-  });
+	it('should render view mode toggle buttons', async () => {
+		const { DiffViewerPanel } = await import('../DiffViewerPanel');
+		render(<DiffViewerPanel />);
+		expect(screen.getByTitle('diff.lineByLine')).toBeDefined();
+		expect(screen.getByTitle('diff.sideBySide')).toBeDefined();
+	});
 
-  it("should return null when no diff and not loading", async () => {
-    vi.resetModules();
-    vi.doMock("../../../stores/use-git-store", () => ({
-      useGitStore: (selector: any) => selector({ currentDiff: null, loadingDiff: false, clearDiff: mockClearDiff }),
-    }));
-    const mod = await import("../DiffViewerPanel");
-    const { container } = render(<mod.DiffViewerPanel />);
-    expect(container.innerHTML).toBe("");
-    vi.resetModules();
-  });
+	it('should return null when no diff and not loading', async () => {
+		vi.resetModules();
+		vi.doMock('../../../stores/use-git-store', () => ({
+			useGitStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+				selector({ currentDiff: null, loadingDiff: false, clearDiff: mockClearDiff }),
+		}));
+		const mod = await import('../DiffViewerPanel');
+		const { container } = render(<mod.DiffViewerPanel />);
+		expect(container.innerHTML).toBe('');
+		vi.resetModules();
+	});
 });