@dyyz1993/create-agent 1.9.0

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

@@ -0,0 +1,239 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Rss, Send } from "lucide-react";
+import { apiClient } from "../../lib/api-client";
+import { useLogStore } from "../../stores/use-log-store";
+import { useConnectionStore } from "../../stores/use-connection-store";
+import { useFeedStore, useEventStreamStore, type SubEventType } from "../../stores/use-feed-store";
+import type { FeedCategory } from "../../../shared/modules/feed";
+
+const CATEGORIES: FeedCategory[] = ["tech", "news", "general"];
+const EVENT_TYPES: SubEventType[] = ["feed.update", "chat.message", "timer.tick"];
+const FILTER_PRESETS: Record<SubEventType, string[]> = {
+  "feed.update": ["", '{"category":"tech"}', '{"category":"news"}', '{"author":"alice"}'],
+  "chat.message": ["", '{"role":"user"}', '{"role":"assistant"}'],
+  "timer.tick": ["", '{"channel":"default"}'],
+};
+
+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",
+};
+
+export function FeedPanel() {
+  const { t } = useTranslation();
+  const posts = useFeedStore((s) => s.posts);
+  const author = useFeedStore((s) => s.author);
+  const category = useFeedStore((s) => s.category);
+  const content = useFeedStore((s) => s.content);
+  const loading = useFeedStore((s) => s.loading);
+  const setAuthor = useFeedStore((s) => s.setAuthor);
+  const setCategory = useFeedStore((s) => s.setCategory);
+  const setContent = useFeedStore((s) => s.setContent);
+  const createPost = useFeedStore((s) => s.createPost);
+  const loadPosts = useFeedStore((s) => s.loadPosts);
+  const addPost = useFeedStore((s) => s.addPost);
+  const addLog = useLogStore((s) => s.addLog);
+  const ready = useConnectionStore((s) => s.ready);
+
+  const entries = useEventStreamStore((s) => s.entries);
+  const activeEventType = useEventStreamStore((s) => s.activeEventType);
+  const activeFilter = useEventStreamStore((s) => s.activeFilter);
+  const subscribed = useEventStreamStore((s) => s.subscribed);
+  const setActiveEventType = useEventStreamStore((s) => s.setActiveEventType);
+  const setActiveFilter = useEventStreamStore((s) => s.setActiveFilter);
+  const handleSubscribe = useEventStreamStore((s) => s.handleSubscribe);
+  const handleUnsubscribe = useEventStreamStore((s) => s.handleUnsubscribe);
+
+  useEffect(() => {
+    if (!ready) return;
+
+    let subId: string | null = null;
+
+    const setup = async () => {
+      subId = await apiClient.subscribe("feed.update", (payload) => {
+        addPost(payload as typeof posts[number]);
+      }, {});
+      addLog("Subscribed to feed.update (no filter)");
+
+      await loadPosts();
+    };
+    setup();
+
+    return () => {
+      if (subId) apiClient.unsubscribe(subId);
+    };
+  }, [ready, addLog, loadPosts, addPost]);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
+        <h2 className="text-sm font-semibold flex items-center gap-1.5">
+          <Rss className="w-4 h-4 text-[var(--color-text-accent)]" />
+          {t("feed.title")}
+          {posts.length > 0 && (
+            <span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+              {posts.length}
+            </span>
+          )}
+        </h2>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
+          <div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">{t("feed.newPost")}</div>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={author}
+              onChange={(e) => setAuthor(e.target.value)}
+              placeholder={t("feed.authorPlaceholder")}
+              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
+              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)]"
+            >
+              {CATEGORIES.map((c) => (
+                <option key={c} value={c}>{c}</option>
+              ))}
+            </select>
+          </div>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && createPost()}
+              placeholder={t("feed.postPlaceholder")}
+              className="flex-1 px-3 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"
+            />
+            <button
+              onClick={createPost}
+              disabled={loading || !content.trim()}
+              className="px-3 py-1.5 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 rounded transition-colors flex items-center gap-1"
+            >
+              <Send className="w-3 h-3" />
+              {t("feed.post")}
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
+          <div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">{t("feed.subscribeWithFilter")}</div>
+          <div className="flex gap-2 items-center">
+            <select
+              value={activeEventType}
+              onChange={(e) => {
+                setActiveEventType(e.target.value as SubEventType);
+                setActiveFilter("");
+              }}
+              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)]"
+            >
+              {EVENT_TYPES.map((et) => (
+                <option key={et} value={et}>{et}</option>
+              ))}
+            </select>
+            <input
+              type="text"
+              value={activeFilter}
+              onChange={(e) => setActiveFilter(e.target.value)}
+              placeholder={t("feed.filterPlaceholder")}
+              className="flex-1 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 font-mono"
+            />
+            {!subscribed ? (
+              <button
+                onClick={handleSubscribe}
+                className="px-3 py-1.5 text-xs bg-green-600 hover:bg-green-700 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"
+              >
+                {t("feed.unsubscribe")}
+              </button>
+            )}
+          </div>
+          <div className="flex gap-1 flex-wrap">
+            {FILTER_PRESETS[activeEventType].map((preset) => (
+              <button
+                key={preset}
+                onClick={() => setActiveFilter(preset)}
+                className={`px-2 py-0.5 text-[10px] rounded border transition-colors ${
+                  activeFilter === preset
+                    ? "border-[var(--color-accent)] bg-[var(--color-accent)]/30 text-[var(--color-text-accent)]"
+                    : "border-[var(--color-border-secondary)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]"
+                }`}
+              >
+                {preset || t("feed.noFilter")}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {entries.length > 0 && (
+          <div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">
+                {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">
+                  {t("feed.live")}
+                </span>
+              )}
+            </div>
+            <div className="max-h-48 overflow-y-auto space-y-1">
+              {entries.slice(-20).map((entry) => (
+                <div key={entry.id} className="bg-[var(--color-bg-tertiary)] rounded px-2 py-1.5 text-[11px] font-mono">
+                  <div className="flex items-center gap-2 text-[var(--color-text-tertiary)]">
+                    <span className="text-[var(--color-text-accent)]">{entry.eventType}</span>
+                    <span className="text-[10px]">
+                      {Object.keys(entry.filter).length > 0
+                        ? `filter: ${JSON.stringify(entry.filter)}`
+                        : t("feed.noFilter")}
+                    </span>
+                    <span className="text-[10px] ml-auto">
+                      {new Date(entry.timestamp).toLocaleTimeString()}
+                    </span>
+                  </div>
+                  <pre className="text-cyan-300 mt-0.5 whitespace-pre-wrap break-all">
+                    {JSON.stringify(entry.payload, null, 0)}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {posts.length === 0 ? (
+          <div className="flex items-center justify-center py-8 text-[var(--color-text-placeholder)] text-xs">
+            {t("feed.noPostsYet")}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {posts.slice().reverse().map((post) => (
+              <div key={post.id} className="bg-[var(--color-bg-secondary)] rounded-lg p-3">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xs font-medium text-[var(--color-text-primary)]">{post.author}</span>
+                  <span className={`px-1.5 py-0.5 rounded text-[10px] ${CATEGORY_COLORS[post.category]}`}>
+                    {post.category}
+                  </span>
+                  <span className="text-[10px] text-[var(--color-text-placeholder)] ml-auto">
+                    {new Date(post.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+                <div className="text-xs text-[var(--color-text-secondary)]">{post.content}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/feed/__tests__/FeedPanel.test.tsx

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockCreatePost = vi.fn();
+const mockLoadPosts = vi.fn();
+const mockAddPost = vi.fn();
+const mockAddLog = vi.fn();
+
+vi.mock("../../../stores/use-feed-store", () => ({
+  useFeedStore: (selector: any) =>
+    selector({
+      posts: [
+        { id: "1", author: "alice", category: "tech", content: "Hello world", timestamp: Date.now() },
+      ],
+      author: "",
+      category: "tech",
+      content: "",
+      loading: false,
+      setAuthor: vi.fn(),
+      setCategory: vi.fn(),
+      setContent: vi.fn(),
+      createPost: mockCreatePost,
+      loadPosts: mockLoadPosts,
+      addPost: mockAddPost,
+    }),
+  useEventStreamStore: (selector: any) =>
+    selector({
+      entries: [],
+      activeEventType: "feed.update",
+      activeFilter: "",
+      subscribed: false,
+      setActiveEventType: vi.fn(),
+      setActiveFilter: vi.fn(),
+      handleSubscribe: vi.fn(),
+      handleUnsubscribe: vi.fn(),
+    }),
+}));
+
+vi.mock("../../../stores/use-log-store", () => ({
+  useLogStore: (selector: any) => selector({ addLog: mockAddLog }),
+}));
+
+vi.mock("../../../stores/use-connection-store", () => ({
+  useConnectionStore: (selector: any) => selector({ ready: false }),
+}));
+
+vi.mock("../../../lib/api-client", () => ({
+  apiClient: { subscribe: vi.fn(async () => "sub-1"), unsubscribe: vi.fn() },
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("FeedPanel", () => {
+  afterEach(cleanup);
+
+  it("should render feed title", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    expect(screen.getByText("feed.title")).toBeDefined();
+  });
+
+  it("should render new post section", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    expect(screen.getByText("feed.newPost")).toBeDefined();
+  });
+
+  it("should render subscribe section", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    expect(screen.getByText("feed.subscribeWithFilter")).toBeDefined();
+  });
+
+  it("should display existing posts", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    expect(screen.getByText("Hello world")).toBeDefined();
+    expect(screen.getByText("alice")).toBeDefined();
+  });
+
+  it("should show post count badge", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    expect(screen.getByText("1")).toBeDefined();
+  });
+
+  it("should render author input", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    expect(screen.getByPlaceholderText("feed.authorPlaceholder")).toBeDefined();
+  });
+
+  it("should render post input", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    expect(screen.getByPlaceholderText("feed.postPlaceholder")).toBeDefined();
+  });
+
+  it("should render category select with options", async () => {
+    const { FeedPanel } = await import("../FeedPanel");
+    render(<FeedPanel />);
+    const techOptions = screen.getAllByText("tech");
+    expect(techOptions.length).toBeGreaterThanOrEqual(1);
+  });
+});

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

@@ -0,0 +1,56 @@
+import { FileText, X } from "lucide-react";
+import type { FilePreview } from "../../types";
+import { formatSize } from "../../utils/file-utils";
+import { VirtualizedCodeView } from "./VirtualizedCodeView";
+
+interface FilePreviewOverlayProps {
+  preview: FilePreview;
+  loading: boolean;
+  onClose: () => 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">
+      {/* File header with close button */}
+      <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>
+  );
+}

package/templates/agent/src/mainview/components/file-preview/VirtualizedCodeView.tsx

@@ -0,0 +1,99 @@
+import { useRef, useMemo } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Highlight, themes } from "prism-react-renderer";
+import { getLanguage } from "../../utils/file-utils";
+
+interface VirtualizedCodeViewProps {
+  code: string;
+  filename: string;
+}
+
+/** Lines longer than this skip syntax highlighting (plain text instead) */
+const LONG_LINE_THRESHOLD = 5000;
+
+export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const language = getLanguage(filename);
+  const lines = useMemo(() => code.split("\n"), [code]);
+
+  // Detect minified files: avg line length > 500 chars
+  const avgLineLength = code.length / Math.max(lines.length, 1);
+  const usePlainText = !language || avgLineLength > 500;
+
+  const virtualizer = useVirtualizer({
+    count: lines.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 20,
+    overscan: 20,
+  });
+
+  // --- Plain text path: no Prism tokenization ---
+  if (usePlainText) {
+    return (
+      <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
+        <div
+          style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
+        >
+          {virtualizer.getVirtualItems().map((vr) => (
+            <div
+              key={vr.key}
+              style={{
+                position: "absolute", top: 0, left: 0, width: "100%",
+                height: `${vr.size}px`, transform: `translateY(${vr.start}px)`,
+              }}
+              className="flex text-xs leading-5 font-mono"
+            >
+              <span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+                {vr.index + 1}
+              </span>
+              <span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">{lines[vr.index]}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // --- Highlighted path: tokenize ONCE for the whole file, virtualize rendering ---
+  return (
+    <Highlight theme={themes.nightOwl} code={code} language={language}>
+      {({ tokens, getTokenProps }) => (
+        <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
+          <div
+            style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
+          >
+            {virtualizer.getVirtualItems().map((vr) => {
+              const lineTokens = tokens[vr.index];
+              const lineText = lines[vr.index];
+              const isLongLine = (lineText?.length ?? 0) > LONG_LINE_THRESHOLD;
+
+              return (
+                <div
+                  key={vr.key}
+                  style={{
+                    position: "absolute", top: 0, left: 0, width: "100%",
+                    height: `${vr.size}px`, transform: `translateY(${vr.start}px)`,
+                  }}
+                  className="flex text-xs leading-5 font-mono"
+                >
+                  <span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+                    {vr.index + 1}
+                  </span>
+                  {isLongLine ? (
+                    <span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">{lineText}</span>
+                  ) : (
+                    <span className="flex-1">
+                      {lineTokens.map((token, key) => (
+                        <span key={key} {...getTokenProps({ token })} />
+                      ))}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </Highlight>
+  );
+}

package/templates/agent/src/mainview/components/file-preview/__tests__/FilePreviewOverlay.test.tsx

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockOnClose = vi.fn();
+
+vi.mock("../../../utils/file-utils", () => ({
+  formatSize: (bytes: number) => `${bytes} B`,
+}));
+
+vi.mock("../VirtualizedCodeView", () => ({
+  VirtualizedCodeView: ({ code }: any) => <div data-testid="code-view">{code}</div>,
+}));
+
+describe("FilePreviewOverlay", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render file name", async () => {
+    const { FilePreviewOverlay } = await import("../FilePreviewOverlay");
+    render(
+      <FilePreviewOverlay
+        preview={{ name: "test.ts", path: "/test.ts", size: 100, content: "const x = 1;", isImage: false }}
+        loading={false}
+        onClose={mockOnClose}
+      />,
+    );
+    expect(screen.getByText("test.ts")).toBeDefined();
+  });
+
+  it("should render file size", async () => {
+    const { FilePreviewOverlay } = await import("../FilePreviewOverlay");
+    const { container } = render(
+      <FilePreviewOverlay
+        preview={{ name: "test.ts", path: "/test.ts", size: 1024, content: "code", isImage: false }}
+        loading={false}
+        onClose={mockOnClose}
+      />,
+    );
+    expect(container.textContent).toContain("1024 B");
+  });
+
+  it("should render code view when not loading", async () => {
+    const { FilePreviewOverlay } = await import("../FilePreviewOverlay");
+    render(
+      <FilePreviewOverlay
+        preview={{ name: "test.ts", path: "/test.ts", size: 0, content: "const x = 1;", isImage: false }}
+        loading={false}
+        onClose={mockOnClose}
+      />,
+    );
+    expect(screen.getByTestId("code-view")).toBeDefined();
+  });
+
+  it("should show loading spinner when loading", async () => {
+    const { FilePreviewOverlay } = await import("../FilePreviewOverlay");
+    render(
+      <FilePreviewOverlay
+        preview={{ name: "test.ts", path: "/test.ts", size: 0, content: "", isImage: false }}
+        loading={true}
+        onClose={mockOnClose}
+      />,
+    );
+    expect(screen.getByText("Loading...")).toBeDefined();
+  });
+
+  it("should call onClose when close button clicked", async () => {
+    const { FilePreviewOverlay } = await import("../FilePreviewOverlay");
+    const { container } = render(
+      <FilePreviewOverlay
+        preview={{ name: "test.ts", path: "/test.ts", size: 0, content: "code", isImage: false }}
+        loading={false}
+        onClose={mockOnClose}
+      />,
+    );
+    const btn = container.querySelector("button");
+    fireEvent.click(btn!);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it("should render image when isImage is true", async () => {
+    const { FilePreviewOverlay } = await import("../FilePreviewOverlay");
+    render(
+      <FilePreviewOverlay
+        preview={{ name: "photo.png", path: "/photo.png", size: 5000, content: "", isImage: true, imageUrl: "http://img.png" }}
+        loading={false}
+        onClose={mockOnClose}
+      />,
+    );
+    const img = screen.getByRole("img");
+    expect(img).toBeDefined();
+    expect(img.getAttribute("alt")).toBe("photo.png");
+  });
+});

package/templates/agent/src/mainview/components/file-preview/__tests__/VirtualizedCodeView.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+vi.mock("../../utils/file-utils", () => ({
+  getLanguage: (filename: string) => {
+    if (filename.endsWith(".ts")) return "typescript";
+    return "";
+  },
+}));
+
+vi.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: ({ count }: any) => ({
+    getTotalSize: () => count * 20,
+    getVirtualItems: () =>
+      Array.from({ length: Math.min(count, 3) }, (_, i) => ({
+        key: i,
+        index: i,
+        start: i * 20,
+        size: 20,
+      })),
+  }),
+}));
+
+vi.mock("prism-react-renderer", () => ({
+  Highlight: ({ children, code }: any) =>
+    children({
+      tokens: code.split("\n").map((line: string) => [{ content: line }]),
+      getTokenProps: ({ token }: any) => ({ children: token.content }),
+    }),
+  themes: { nightOwl: {} },
+}));
+
+describe("VirtualizedCodeView", () => {
+  afterEach(cleanup);
+
+  it("should render code lines", async () => {
+    const { VirtualizedCodeView } = await import("../VirtualizedCodeView");
+    const { container } = render(<VirtualizedCodeView code="line1\nline2\nline3" filename="test.ts" />);
+    expect(container.textContent).toContain("line1");
+    expect(container.textContent).toContain("line2");
+    expect(container.textContent).toContain("line3");
+  });
+
+  it("should render line numbers", async () => {
+    const { VirtualizedCodeView } = await import("../VirtualizedCodeView");
+    const { container } = render(<VirtualizedCodeView code="hello\nworld" filename="readme.xyz" />);
+    expect(container.textContent).toContain("1");
+    expect(container.textContent).toContain("hello");
+    expect(container.textContent).toContain("world");
+  });
+
+  it("should use plain text for unknown extensions", async () => {
+    const { VirtualizedCodeView } = await import("../VirtualizedCodeView");
+    render(<VirtualizedCodeView code="data" filename="readme.xyz" />);
+    expect(screen.getByText("data")).toBeDefined();
+  });
+});