@dyyz1993/create-agent 1.9.0

package/templates/agent/src/mainview/components/explorer/ExplorerSidebar.tsx

@@ -0,0 +1,221 @@
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Folder, RefreshCw, File, FolderPlus, Pencil, Trash2, Copy } from "lucide-react";
+import type { TreeNode } from "../../types";
+import { readDropItems } from "../../utils/drop-handler";
+import { useExplorerStore } from "../../stores/use-explorer-store";
+import { TreeNodeItem } from "./TreeNodeItem";
+import { ContextMenu, type MenuItem } from "./ContextMenu";
+import { ConfirmDialog } from "./ConfirmDialog";
+import { InlineInput } from "./InlineInput";
+import { PinButton } from "../sidebar/PinButton";
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  node: TreeNode | null;
+}
+
+export function ExplorerSidebar({ hideOuterShell }: { hideOuterShell?: boolean }) {
+  const { t } = useTranslation();
+  const treeNodes = useExplorerStore((s) => s.treeNodes);
+  const currentPath = useExplorerStore((s) => s.currentPath);
+  const selectedPath = useExplorerStore((s) => s.selectedPath);
+  const editingNode = useExplorerStore((s) => s.editingNode);
+  const setCurrentPath = useExplorerStore((s) => s.setCurrentPath);
+  const listRootDir = useExplorerStore((s) => s.listRootDir);
+  const toggleNode = useExplorerStore((s) => s.toggleNode);
+  const openFile = useExplorerStore((s) => s.openFile);
+  const createFile = useExplorerStore((s) => s.createFile);
+  const createDir = useExplorerStore((s) => s.createDir);
+  const renameNode = useExplorerStore((s) => s.renameNode);
+  const deleteNode = useExplorerStore((s) => s.deleteNode);
+  const startEditing = useExplorerStore((s) => s.startEditing);
+  const cancelEditing = useExplorerStore((s) => s.cancelEditing);
+  const importFiles = useExplorerStore((s) => s.importFiles);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<string | null>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, node: TreeNode | null) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY, node });
+  }, []);
+
+  const handleBlankContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, node: null });
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    const entries = await readDropItems(e.dataTransfer);
+    if (entries.length > 0) {
+      try {
+        await importFiles(entries, currentPath);
+      } catch { /* error logged in store */ }
+    }
+  }, [importFiles, currentPath]);
+
+  const buildMenuItems = useCallback((): MenuItem[] => {
+    if (!contextMenu) return [];
+    const node = contextMenu.node;
+
+    if (!node) {
+      return [
+        { label: t("explorer.newFile"), icon: <File className="w-3 h-3" />, onClick: () => startEditing(currentPath, "newFile") },
+        { label: t("explorer.newFolder"), icon: <FolderPlus className="w-3 h-3" />, onClick: () => startEditing(currentPath, "newDir") },
+        { label: t("explorer.refresh"), icon: <RefreshCw className="w-3 h-3" />, onClick: listRootDir, divider: true },
+      ];
+    }
+
+    const items: MenuItem[] = [];
+    if (node.type === "directory") {
+      items.push(
+        { label: t("explorer.newFile"), icon: <File className="w-3 h-3" />, onClick: () => startEditing(node.path, "newFile") },
+        { label: t("explorer.newFolder"), icon: <FolderPlus className="w-3 h-3" />, onClick: () => startEditing(node.path, "newDir") },
+      );
+    }
+    items.push(
+      { label: t("explorer.rename"), icon: <Pencil className="w-3 h-3" />, onClick: () => startEditing(node.path, "rename"), divider: items.length > 0 },
+      { label: t("explorer.delete"), icon: <Trash2 className="w-3 h-3" />, onClick: () => setPendingDelete(node.path), danger: true },
+      { label: t("explorer.copyPath"), icon: <Copy className="w-3 h-3" />, onClick: () => navigator.clipboard.writeText(node.path) },
+    );
+    return items;
+  }, [contextMenu, currentPath, listRootDir, startEditing, t]);
+
+  const handleSubmitEdit = useCallback(
+    (value: string) => {
+      if (!editingNode) return;
+      if (editingNode.type === "rename") {
+        renameNode(editingNode.path, value);
+      } else if (editingNode.type === "newFile") {
+        createFile(editingNode.path, value);
+      } else if (editingNode.type === "newDir") {
+        createDir(editingNode.path, value);
+      }
+    },
+    [editingNode, renameNode, createFile, createDir],
+  );
+
+  const isRootEditing =
+    editingNode &&
+    editingNode.path === currentPath &&
+    (editingNode.type === "newFile" || editingNode.type === "newDir");
+
+  const header = (
+    <div className="px-3 py-2 text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wide border-b border-[var(--color-border-primary)] flex items-center justify-between">
+      <div className="flex items-center gap-1.5">
+        <Folder className="w-3.5 h-3.5" />
+        {t("explorer.title")}
+      </div>
+      <PinButton />
+    </div>
+  );
+
+  const content = (
+    <>
+      {header}
+      <div className="flex-1 overflow-hidden flex flex-col">
+        <div className="flex gap-2 p-2 border-b border-[var(--color-border-primary)]">
+          <input
+            type="text"
+            value={currentPath}
+            onChange={(e) => setCurrentPath(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && listRootDir()}
+            placeholder={t("explorer.pathPlaceholder")}
+            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)] focus:border-[var(--color-accent)] focus:outline-none"
+          />
+          <button
+            onClick={listRootDir}
+            className="px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors"
+            title={t("explorer.listDirectory")}
+          >
+            <RefreshCw className="w-3 h-3" />
+          </button>
+        </div>
+        <div
+          className={`flex-1 overflow-y-auto p-1 transition-colors ${
+            isDragOver ? "bg-[var(--color-accent)]/30 ring-1 ring-inset ring-[var(--color-accent)]/50" : ""
+          }`}
+          onContextMenu={handleBlankContextMenu}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {treeNodes.length === 0 ? (
+            <div className="text-[var(--color-text-placeholder)] text-xs text-center py-4">{t("explorer.emptyHint")}</div>
+          ) : (
+            <ul className="space-y-0.5">
+              {treeNodes.map((node) => (
+                <TreeNodeItem
+                  key={node.path}
+                  node={node}
+                  depth={0}
+                  selectedPath={selectedPath}
+                  editingNode={editingNode}
+                  onToggle={toggleNode}
+                  onOpenFile={openFile}
+                  onContextMenu={handleContextMenu}
+                  onSubmitEdit={handleSubmitEdit}
+                  onCancelEdit={cancelEditing}
+                />
+              ))}
+              {isRootEditing && (
+                <InlineInput
+                  depth={0}
+                  onSubmit={handleSubmitEdit}
+                  onCancel={cancelEditing}
+                />
+              )}
+            </ul>
+          )}
+        </div>
+      </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          items={buildMenuItems()}
+          onClose={() => setContextMenu(null)}
+        />
+      )}
+
+      {pendingDelete && (
+        <ConfirmDialog
+          title={t("explorer.confirmDelete")}
+          message={t("explorer.confirmDeleteMessage", { name: pendingDelete.split("/").pop() })}
+          onConfirm={() => {
+            deleteNode(pendingDelete);
+            setPendingDelete(null);
+          }}
+          onCancel={() => setPendingDelete(null)}
+        />
+      )}
+    </>
+  );
+
+  if (hideOuterShell) {
+    return <div className="flex flex-col flex-1 overflow-hidden">{content}</div>;
+  }
+
+  return (
+    <div className="w-60 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col flex-shrink-0">
+      {content}
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/explorer/InlineInput.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+
+interface InlineInputProps {
+  defaultValue?: string;
+  depth: number;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+export function InlineInput({ defaultValue = "", depth, onSubmit, onCancel }: InlineInputProps) {
+  const ref = useRef<HTMLInputElement>(null);
+  const committed = useRef(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    // Select name part (before extension) if there's a dot
+    const dotIndex = defaultValue.lastIndexOf(".");
+    if (dotIndex > 0) {
+      el.setSelectionRange(0, dotIndex);
+    } else {
+      el.select();
+    }
+  }, [defaultValue]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      const val = ref.current?.value.trim();
+      committed.current = true;
+      if (val) onSubmit(val);
+      else onCancel();
+    } else if (e.key === "Escape") {
+      committed.current = true;
+      onCancel();
+    }
+  };
+
+  const handleBlur = () => {
+    if (!committed.current) onCancel();
+  };
+
+  return (
+    <div style={{ paddingLeft: `${depth * 16 + 24}px` }} className="py-0.5 pr-2">
+      <input
+        ref={ref}
+        type="text"
+        defaultValue={defaultValue}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        className="w-full px-1 py-0.5 text-xs bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)] border border-[var(--color-accent)] rounded outline-none"
+      />
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/explorer/TreeNodeItem.tsx

@@ -0,0 +1,121 @@
+import { memo } from "react";
+import { ChevronRight, ChevronDown } from "lucide-react";
+import type { TreeNode, EditingNode } from "../../types";
+import { getFileIcon } from "../../utils/file-icon";
+import { InlineInput } from "./InlineInput";
+
+interface TreeNodeItemProps {
+  node: TreeNode;
+  depth: number;
+  selectedPath: string | null;
+  editingNode: EditingNode | null;
+  onToggle: (path: string) => void;
+  onOpenFile: (node: TreeNode) => void;
+  onContextMenu: (e: React.MouseEvent, node: TreeNode) => void;
+  onSubmitEdit: (value: string) => void;
+  onCancelEdit: () => void;
+}
+
+function TreeNodeItemInner({
+  node,
+  depth,
+  selectedPath,
+  editingNode,
+  onToggle,
+  onOpenFile,
+  onContextMenu,
+  onSubmitEdit,
+  onCancelEdit,
+}: TreeNodeItemProps) {
+  const isDir = node.type === "directory";
+  const isSelected = selectedPath === node.path;
+  const isRenaming = editingNode?.path === node.path && editingNode.type === "rename";
+  const isAddingChild =
+    isDir &&
+    node.expanded &&
+    editingNode?.path === node.path &&
+    (editingNode.type === "newFile" || editingNode.type === "newDir");
+
+  return (
+    <li>
+      <div
+        className={`flex items-center gap-1.5 px-2 py-0.5 text-xs rounded cursor-pointer transition-colors ${
+          isSelected ? "bg-[var(--color-accent)]/30 text-[var(--color-text-primary)]" : "hover:bg-[var(--color-bg-hover)]"
+        }`}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={() => isDir ? onToggle(node.path) : onOpenFile(node)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu(e, node);
+        }}
+      >
+        {isDir ? (
+          node.expanded ? (
+            <ChevronDown className="w-3 h-3 text-[var(--color-text-placeholder)] shrink-0" />
+          ) : (
+            <ChevronRight className="w-3 h-3 text-[var(--color-text-placeholder)] shrink-0" />
+          )
+        ) : (
+          <span className="w-3 shrink-0" />
+        )}
+        {getFileIcon(node)}
+        {isRenaming ? (
+          <InlineInput
+            defaultValue={node.name}
+            depth={depth}
+            onSubmit={onSubmitEdit}
+            onCancel={onCancelEdit}
+          />
+        ) : (
+          <span className={`truncate ${isDir ? "text-blue-300 font-medium" : "text-[var(--color-text-secondary)]"}`}>
+            {node.name}
+          </span>
+        )}
+      </div>
+      {isDir && node.expanded && node.children && (
+        <ul>
+          {node.children.map((child) => (
+            <TreeNodeItem
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              selectedPath={selectedPath}
+              editingNode={editingNode}
+              onToggle={onToggle}
+              onOpenFile={onOpenFile}
+              onContextMenu={onContextMenu}
+              onSubmitEdit={onSubmitEdit}
+              onCancelEdit={onCancelEdit}
+            />
+          ))}
+          {isAddingChild && (
+            <InlineInput
+              depth={depth + 1}
+              onSubmit={onSubmitEdit}
+              onCancel={onCancelEdit}
+            />
+          )}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export const TreeNodeItem = memo(TreeNodeItemInner, (prev, next) => {
+  // Fast path: same node reference and no editing state change
+  if (
+    prev.node === next.node &&
+    prev.selectedPath === next.selectedPath &&
+    prev.editingNode === next.editingNode &&
+    prev.depth === next.depth &&
+    prev.onToggle === next.onToggle &&
+    prev.onOpenFile === next.onOpenFile &&
+    prev.onContextMenu === next.onContextMenu &&
+    prev.onSubmitEdit === next.onSubmitEdit &&
+    prev.onCancelEdit === next.onCancelEdit
+  ) {
+    return true;
+  }
+  return false;
+});

package/templates/agent/src/mainview/components/explorer/__tests__/ConfirmDialog.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("ConfirmDialog", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render title and message", async () => {
+    const { ConfirmDialog } = await import("../ConfirmDialog");
+    render(<ConfirmDialog title="Delete?" message="Are you sure?" onConfirm={vi.fn()} onCancel={vi.fn()} />);
+    expect(screen.getByText("Delete?")).toBeDefined();
+    expect(screen.getByText("Are you sure?")).toBeDefined();
+  });
+
+  it("should call onConfirm when confirm button clicked", async () => {
+    const onConfirm = vi.fn();
+    const { ConfirmDialog } = await import("../ConfirmDialog");
+    render(<ConfirmDialog title="T" message="M" onConfirm={onConfirm} onCancel={vi.fn()} />);
+    fireEvent.click(screen.getByText("common.delete"));
+    expect(onConfirm).toHaveBeenCalled();
+  });
+
+  it("should call onCancel when cancel button clicked", async () => {
+    const onCancel = vi.fn();
+    const { ConfirmDialog } = await import("../ConfirmDialog");
+    render(<ConfirmDialog title="T" message="M" onConfirm={vi.fn()} onCancel={onCancel} />);
+    fireEvent.click(screen.getByText("common.cancel"));
+    expect(onCancel).toHaveBeenCalled();
+  });
+});

package/templates/agent/src/mainview/components/explorer/__tests__/ContextMenu.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+describe("ContextMenu", () => {
+  afterEach(cleanup);
+
+  it("should render menu items", async () => {
+    const { ContextMenu } = await import("../ContextMenu");
+    const items = [
+      { label: "Open", onClick: vi.fn() },
+      { label: "Delete", onClick: vi.fn(), danger: true },
+    ];
+    render(<ContextMenu x={100} y={100} items={items} onClose={vi.fn()} />);
+    expect(screen.getByText("Open")).toBeDefined();
+    expect(screen.getByText("Delete")).toBeDefined();
+  });
+
+  it("should call item onClick and onClose when item clicked", async () => {
+    const { ContextMenu } = await import("../ContextMenu");
+    const onClick = vi.fn();
+    const onClose = vi.fn();
+    render(<ContextMenu x={0} y={0} items={[{ label: "Click", onClick }]} onClose={onClose} />);
+    fireEvent.click(screen.getByText("Click"));
+    expect(onClick).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should render divider when specified", async () => {
+    const { ContextMenu } = await import("../ContextMenu");
+    const items = [
+      { label: "A", onClick: vi.fn() },
+      { label: "", onClick: vi.fn(), divider: true },
+      { label: "B", onClick: vi.fn() },
+    ];
+    const { container } = render(<ContextMenu x={0} y={0} items={items} onClose={vi.fn()} />);
+    const dividers = container.querySelectorAll(".border-t");
+    expect(dividers.length).toBe(1);
+  });
+
+  it("should render icon when provided", async () => {
+    const { ContextMenu } = await import("../ContextMenu");
+    const items = [
+      { label: "Open", onClick: vi.fn(), icon: <span data-testid="icon">🔍</span> },
+    ];
+    render(<ContextMenu x={0} y={0} items={items} onClose={vi.fn()} />);
+    expect(screen.getByTestId("icon")).toBeDefined();
+  });
+});

package/templates/agent/src/mainview/components/explorer/__tests__/InlineInput.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+describe("InlineInput", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render input with defaultValue", async () => {
+    const { InlineInput } = await import("../InlineInput");
+    render(<InlineInput defaultValue="file.ts" depth={0} onSubmit={vi.fn()} onCancel={vi.fn()} />);
+    const input = screen.getByDisplayValue("file.ts");
+    expect(input).toBeDefined();
+  });
+
+  it("should call onSubmit on Enter", async () => {
+    const onSubmit = vi.fn();
+    const { InlineInput } = await import("../InlineInput");
+    render(<InlineInput defaultValue="name" depth={0} onSubmit={onSubmit} onCancel={vi.fn()} />);
+    fireEvent.keyDown(screen.getByDisplayValue("name"), { key: "Enter" });
+    expect(onSubmit).toHaveBeenCalledWith("name");
+  });
+
+  it("should call onCancel on Escape", async () => {
+    const onCancel = vi.fn();
+    const { InlineInput } = await import("../InlineInput");
+    render(<InlineInput defaultValue="" depth={0} onSubmit={vi.fn()} onCancel={onCancel} />);
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it("should call onCancel on blur", async () => {
+    const onCancel = vi.fn();
+    const { InlineInput } = await import("../InlineInput");
+    render(<InlineInput defaultValue="" depth={0} onSubmit={vi.fn()} onCancel={onCancel} />);
+    fireEvent.blur(screen.getByRole("textbox"));
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it("should apply depth-based padding", async () => {
+    const { InlineInput } = await import("../InlineInput");
+    const { container } = render(<InlineInput depth={2} onSubmit={vi.fn()} onCancel={vi.fn()} />);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.style.paddingLeft).toBe("56px");
+  });
+});

package/templates/agent/src/mainview/components/explorer/__tests__/TreeNodeItem.test.tsx

@@ -0,0 +1,146 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+vi.mock("../../utils/file-icon", () => ({
+  getFileIcon: () => <span data-testid="file-icon" />,
+}));
+
+vi.mock("./InlineInput", () => ({
+  InlineInput: ({ onSubmit }: any) => (
+    <input data-testid="inline-input" onKeyDown={(e: any) => e.key === "Enter" && onSubmit("new")} />
+  ),
+}));
+
+describe("TreeNodeItem", () => {
+  const fileNode = { name: "app.ts", path: "/src/app.ts", type: "file" as const };
+  const dirNode = {
+    name: "src",
+    path: "/src",
+    type: "directory" as const,
+    expanded: false,
+    children: [] as any[],
+  };
+
+  afterEach(cleanup);
+
+  it("should render file name", async () => {
+    const { TreeNodeItem } = await import("../TreeNodeItem");
+    render(
+      <TreeNodeItem
+        node={fileNode}
+        depth={0}
+        selectedPath={null}
+        editingNode={null}
+        onToggle={vi.fn()}
+        onOpenFile={vi.fn()}
+        onContextMenu={vi.fn()}
+        onSubmitEdit={vi.fn()}
+        onCancelEdit={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("app.ts")).toBeDefined();
+  });
+
+  it("should render directory name", async () => {
+    const { TreeNodeItem } = await import("../TreeNodeItem");
+    render(
+      <TreeNodeItem
+        node={dirNode}
+        depth={0}
+        selectedPath={null}
+        editingNode={null}
+        onToggle={vi.fn()}
+        onOpenFile={vi.fn()}
+        onContextMenu={vi.fn()}
+        onSubmitEdit={vi.fn()}
+        onCancelEdit={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("src")).toBeDefined();
+  });
+
+  it("should call onToggle when directory clicked", async () => {
+    const onToggle = vi.fn();
+    const { TreeNodeItem } = await import("../TreeNodeItem");
+    render(
+      <TreeNodeItem
+        node={dirNode}
+        depth={0}
+        selectedPath={null}
+        editingNode={null}
+        onToggle={onToggle}
+        onOpenFile={vi.fn()}
+        onContextMenu={vi.fn()}
+        onSubmitEdit={vi.fn()}
+        onCancelEdit={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByText("src"));
+    expect(onToggle).toHaveBeenCalledWith("/src");
+  });
+
+  it("should call onOpenFile when file clicked", async () => {
+    const onOpenFile = vi.fn();
+    const { TreeNodeItem } = await import("../TreeNodeItem");
+    render(
+      <TreeNodeItem
+        node={fileNode}
+        depth={0}
+        selectedPath={null}
+        editingNode={null}
+        onToggle={vi.fn()}
+        onOpenFile={onOpenFile}
+        onContextMenu={vi.fn()}
+        onSubmitEdit={vi.fn()}
+        onCancelEdit={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByText("app.ts"));
+    expect(onOpenFile).toHaveBeenCalledWith(fileNode);
+  });
+
+  it("should apply selected style when selected", async () => {
+    const { TreeNodeItem } = await import("../TreeNodeItem");
+    const { container } = render(
+      <TreeNodeItem
+        node={fileNode}
+        depth={0}
+        selectedPath="/src/app.ts"
+        editingNode={null}
+        onToggle={vi.fn()}
+        onOpenFile={vi.fn()}
+        onContextMenu={vi.fn()}
+        onSubmitEdit={vi.fn()}
+        onCancelEdit={vi.fn()}
+      />,
+    );
+    const div = container.querySelector(".bg-\\[var\\(--color-accent\\)\\]\\/30");
+    expect(div).toBeDefined();
+  });
+
+  it("should render children when directory is expanded", async () => {
+    const expandedDir = {
+      name: "src",
+      path: "/src",
+      type: "directory" as const,
+      expanded: true,
+      children: [{ name: "index.ts", path: "/src/index.ts", type: "file" as const }],
+    };
+    const { TreeNodeItem } = await import("../TreeNodeItem");
+    render(
+      <TreeNodeItem
+        node={expandedDir}
+        depth={0}
+        selectedPath={null}
+        editingNode={null}
+        onToggle={vi.fn()}
+        onOpenFile={vi.fn()}
+        onContextMenu={vi.fn()}
+        onSubmitEdit={vi.fn()}
+        onCancelEdit={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("index.ts")).toBeDefined();
+  });
+});