@dyyz1993/create-agent 1.9.0

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

@@ -0,0 +1,176 @@
+import { Send, Play, Square, File, ChevronRight, ChevronDown, Trash2 } from "lucide-react";
+import { useState, useEffect } from "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 [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="Expand Debug Panel"
+          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="flex items-center justify-between px-2 py-1.5 border-b border-[var(--color-border-primary)]">
+        <button
+          onClick={() => setCollapsed(true)}
+          title="Collapse Debug Panel"
+          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="Clear all debug data"
+          className="flex items-center gap-1 text-[11px] text-[var(--color-text-placeholder)] hover:text-red-400 transition-colors"
+        >
+          <Trash2 className="w-3 h-3" />
+          Clear
+        </button>
+      </div>
+      {/* RPC Calls */}
+      <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>
+
+      {/* Subscriptions */}
+      <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-green-400 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]">
+                  {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-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-cyan-400">{ev}</div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Logs */}
+      <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-red-400" : "text-green-400"}>
+              {log}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/general/src/mainview/components/diff/DiffViewerPanel.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { X, Columns2, Rows3 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued";
+import { useGitStore } from "../../stores/use-git-store";
+
+/* Module-level constant: avoids re-creating the styles object on every render */
+const DIFF_STYLES = {
+  variables: {
+    light: {
+      diffViewerBackground: "#111827",
+    },
+    dark: {
+      diffViewerBackground: "#111827",
+      diffViewerColor: "#e5e7eb",
+      addedBackground: "#052e16",
+      addedColor: "#4ade80",
+      removedBackground: "#450a0a",
+      removedColor: "#fca5a5",
+      wordAddedBackground: "#065f46",
+      wordRemovedBackground: "#7f1d1d",
+      addedGutterBackground: "#052e16",
+      removedGutterBackground: "#450a0a",
+      gutterBackground: "#1f2937",
+      gutterColor: "#6b7280",
+      codeFoldGutterBackground: "#1f2937",
+      codeFoldBackground: "#1f2937",
+      emptyLineBackground: "#111827",
+      gutterBackgroundDark: "#1f2937",
+      highlightGutterBackground: "#374151",
+      highlightBackground: "#374151",
+    },
+  },
+  line: {
+    fontSize: "12px",
+    fontFamily: "ui-monospace, SFMono-Regular, monospace",
+    lineHeight: "1.6",
+  },
+  gutter: {
+    fontSize: "12px",
+    fontFamily: "ui-monospace, SFMono-Regular, monospace",
+    minWidth: "40px",
+    padding: "0 8px",
+  },
+} as const;
+
+export function DiffViewerPanel() {
+  const { t } = useTranslation();
+  const currentDiff = useGitStore((s) => s.currentDiff);
+  const loadingDiff = useGitStore((s) => s.loadingDiff);
+  const clearDiff = useGitStore((s) => s.clearDiff);
+  const [splitView, setSplitView] = useState(false);
+
+  if (!currentDiff && !loadingDiff) return null;
+
+  const fileName = currentDiff?.filePath.split("/").pop() || "";
+
+  return (
+    <div className="absolute inset-0 bg-[var(--color-bg-primary)] flex flex-col" style={{ zIndex: 40 }}>
+      <div className="h-9 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center px-3 text-xs flex-shrink-0 gap-2">
+        <span className="text-[var(--color-text-secondary)] font-medium">{fileName}</span>
+        <span className="text-[var(--color-text-placeholder)] truncate text-[10px]">{currentDiff?.filePath}</span>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            onClick={() => setSplitView(false)}
+            className={`p-1 rounded transition-colors ${!splitView ? "bg-[var(--color-bg-active)] text-[var(--color-text-primary)]" : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)]"}`}
+            title={t("diff.lineByLine")}
+          >
+            <Rows3 className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={() => setSplitView(true)}
+            className={`p-1 rounded transition-colors ${splitView ? "bg-[var(--color-bg-active)] text-[var(--color-text-primary)]" : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)]"}`}
+            title={t("diff.sideBySide")}
+          >
+            <Columns2 className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={clearDiff}
+            className="ml-1 text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Diff content */}
+      <div className="flex-1 overflow-auto">
+        {loadingDiff ? (
+          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)]">
+            {t("diff.loading")}
+          </div>
+        ) : currentDiff ? (
+          <ReactDiffViewer
+            oldValue={currentDiff.oldContent}
+            newValue={currentDiff.newContent}
+            splitView={splitView}
+            compareMethod={DiffMethod.LINES}
+            useDarkTheme={true}
+            leftTitle={t("diff.before")}
+            rightTitle={t("diff.after")}
+            styles={DIFF_STYLES}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ConfirmDialogProps {
+  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],
+  );
+
+  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>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useCallback } from "react";
+
+export interface MenuItem {
+  label: string;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+  divider?: boolean;
+}
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  items: MenuItem[];
+  onClose: () => void;
+}
+
+export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // 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]);
+
+  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]);
+
+  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>
+  );
+}

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

@@ -0,0 +1,225 @@
+import { useState, useCallback } from "react";
+import { Folder, RefreshCw, File, FolderPlus, Pencil, Trash2, Copy } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useExplorerStore } from "../../stores/use-explorer-store";
+import { readDropItems } from "../../utils/drop-handler";
+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: import("../../types").TreeNode | null;
+}
+
+interface ExplorerSidebarProps {
+  hideOuterShell?: boolean;
+}
+
+export function ExplorerSidebar({ hideOuterShell }: ExplorerSidebarProps) {
+  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: import("../../types").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]);
+
+  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={(p) => toggleNode(p)}
+                  onOpenFile={(n) => openFile(n)}
+                  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>
+  );
+}