ompchamber 0.3.0

package/src/client/components/workspace/file-explorer/GitRepoDropdown.tsx

@@ -0,0 +1,143 @@
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { Check, ChevronDown, FolderGit2, RotateCcw, Search } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { REPO_DISCOVERY_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
+
+interface GitRepoDropdownProps {
+  rootPath?: string;
+  activeRepo: string;
+  onSelectRepo: (repo: string) => void;
+}
+
+function workspaceFolderName(rootPath?: string): string {
+  if (!rootPath) return 'workspace root';
+  const parts = rootPath.replace(/\\/g, '/').split('/').filter(Boolean);
+  return parts.length > 0 ? parts[parts.length - 1] : 'workspace root';
+}
+
+export function GitRepoDropdown({ rootPath, activeRepo, onSelectRepo }: GitRepoDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const [repos, setRepos] = useState<string[]>(['.']);
+  const [scanning, setScanning] = useState(false);
+  const [query, setQuery] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+  const rootLabel = workspaceFolderName(rootPath);
+
+  const label = (r: string) => (r === '.' ? rootLabel : r);
+
+  const fetchRepos = async (rescan = false) => {
+    const params = new URLSearchParams({ reposOnly: '1' });
+    if (rootPath) params.set('root', rootPath);
+    if (rescan) params.set('rescan', '1');
+    params.set('t', String(Date.now()));
+    const data = await fetch(`/api/fs/git?${params.toString()}`).then(r => r.json()).catch(() => null);
+    if (data && Array.isArray(data.repos)) {
+      setRepos(data.repos);
+      if (data.reposPending) {
+        setScanning(true);
+      } else {
+        setScanning(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    void fetchRepos();
+  }, [open, rootPath]);
+
+  useEffect(() => {
+    if (!scanning) return;
+    const params = new URLSearchParams({ reposOnly: '1' });
+    if (rootPath) params.set('root', rootPath);
+    const id = setInterval(async () => {
+      const data = await fetch(`/api/fs/git?${params.toString()}`).then(r => r.json()).catch(() => null);
+      if (data && !data.reposPending && Array.isArray(data.repos)) {
+        setRepos(data.repos);
+        setScanning(false);
+      }
+    }, REPO_DISCOVERY_POLL_MS);
+    return () => clearInterval(id);
+  }, [scanning, rootPath]);
+
+  useOnClickOutside(ref, () => setOpen(false));
+
+  const filteredRepos = repos.filter(r => {
+    if (!query.trim()) return true;
+    return label(r).toLowerCase().includes(query.toLowerCase());
+  });
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        title="Switch git project"
+        className="flex items-center space-x-1.5 hover:bg-ink/5 px-2 py-1 rounded transition-colors text-xs text-ink/80 font-medium"
+      >
+        <FolderGit2 size={12} className="text-ink/60" />
+        <span className="truncate max-w-[110px]">{activeRepo === '.' ? rootLabel : activeRepo.split('/').pop()}</span>
+        <ChevronDown size={12} className="text-ink/40" />
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1 w-52 bg-paper border border-ink/20 rounded-md shadow-lg z-50 flex flex-col overflow-hidden text-xs">
+          <div className="px-2 py-1.5 border-b border-ink/10 flex items-center space-x-1.5">
+            <Search size={11} className="text-ink/40 flex-shrink-0" />
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.currentTarget.value)}
+              placeholder="Search repos..."
+              title="Search repositories"
+              className="w-full bg-transparent outline-none text-xs text-ink placeholder-ink/40"
+              autoFocus
+            />
+            {query && (
+              <button
+                type="button"
+                onClick={() => setQuery('')}
+                title="Clear search"
+                className="text-ink/40 hover:text-ink flex-shrink-0"
+              >
+                ×
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => void fetchRepos(true)}
+              title="Refresh nested repos"
+              disabled={scanning}
+              className="text-ink/40 hover:text-ink flex-shrink-0 transition-colors disabled:opacity-40 disabled:hover:text-ink/40"
+            >
+              <RotateCcw size={11} className={scanning ? 'animate-spin' : ''} />
+            </button>
+          </div>
+          <div className="max-h-48 scrollbar-overlay-container scrollbar-overlay-static py-1">
+            {filteredRepos.length === 0 ? (
+              <div className="px-3 py-2 text-ink/40 italic">No repos found</div>
+            ) : (
+              filteredRepos.map(r => (
+                <button
+                  key={r}
+                  type="button"
+                  onClick={() => {
+                    onSelectRepo(r);
+                    setOpen(false);
+                    setQuery('');
+                  }}
+                  title={label(r)}
+                  className="w-full text-left px-3 py-2 hover:bg-ink/5 flex items-center justify-between transition-colors"
+                >
+                  <span className="truncate">{label(r)}</span>
+                  {activeRepo === r && <Check size={12} className="text-ink" />}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/file-explorer/Modals.tsx

@@ -0,0 +1,236 @@
+import { createPortal } from 'preact/compat';
+import type { FormEvent, RefObject } from 'preact/compat';
+import { Copy, Edit2, ExternalLink, Eye, GitCompare, History, RefreshCw, Trash2, X } from 'lucide-preact';
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  isFolder: boolean;
+  hasGitStatus?: boolean;
+  onAction: (actionType: string) => void;
+  menuRef?: RefObject<HTMLDivElement>;
+}
+
+export function FileContextMenu({ x, y, isFolder, hasGitStatus, onAction, menuRef }: ContextMenuProps) {
+  const menuWidth = 190;
+  const menuHeight = isFolder ? 220 : hasGitStatus ? 285 : 255;
+  
+  const posX = typeof window !== 'undefined' ? Math.max(10, Math.min(x, window.innerWidth - menuWidth - 12)) : x;
+  const posY = typeof window !== 'undefined' ? Math.max(10, Math.min(y, window.innerHeight - menuHeight - 12)) : y;
+
+  return createPortal(
+    <div 
+      className="fixed inset-0 z-50 bg-ink/20"
+      onClick={() => onAction('close')}
+      onContextMenu={(e) => { e.preventDefault(); onAction('close'); }}
+    >
+      <div 
+        ref={menuRef}
+        className="fixed z-50 bg-paper border border-ink/15 shadow-2xl rounded-lg py-1 min-w-[185px] text-xs text-ink font-sans"
+        style={{ top: posY, left: posX }}
+        onClick={e => e.stopPropagation()}
+      >
+        {!isFolder && (
+          <>
+            <button onClick={() => onAction('view')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
+              <Eye size={13} className="text-ink/60" />
+              <span>View</span>
+            </button>
+            {hasGitStatus && (
+              <button onClick={() => onAction('diff')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors text-ink">
+                <GitCompare size={13} className="text-warning" />
+                <span className="font-medium">Open in Diff Panel</span>
+              </button>
+            )}
+          </>
+        )}
+        <button onClick={() => onAction('explorer')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
+          <ExternalLink size={13} className="text-ink/60" />
+          <span>Go to Explorer</span>
+        </button>
+        <div className="my-1 border-t border-ink/10"></div>
+        <button onClick={() => onAction('copy_path')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
+          <Copy size={13} className="text-ink/60" />
+          <span>Copy Path</span>
+        </button>
+        <button onClick={() => onAction('copy_relative')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
+          <Copy size={13} className="text-ink/60" />
+          <span>Copy Relative Path</span>
+        </button>
+        <div className="my-1 border-t border-ink/10"></div>
+        <button onClick={() => onAction('history')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
+          <History size={13} className="text-ink/60" />
+          <span>Show Git History</span>
+        </button>
+        <div className="my-1 border-t border-ink/10"></div>
+        <button onClick={() => onAction('rename')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
+          <Edit2 size={13} className="text-ink/60" />
+          <span>Rename</span>
+        </button>
+        <button onClick={() => onAction('delete')} className="w-full text-left px-3 py-1.5 hover:bg-error/10 text-error flex items-center space-x-2 transition-colors">
+          <Trash2 size={13} className="text-error" />
+          <span>Delete</span>
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+interface DeleteModalProps {
+  fileName: string;
+  isFolder: boolean;
+  isLoading: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function FileDeleteModal({ fileName, isFolder, isLoading, onCancel, onConfirm }: DeleteModalProps) {
+  return createPortal(
+    <div className="fixed inset-0 bg-ink/20 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+      <div className="bg-paper rounded shadow-xl p-4 w-full max-w-sm border border-ink/10 font-sans">
+        <h3 className="font-semibold text-ink mb-2 text-sm">Delete {isFolder ? 'Folder' : 'File'}</h3>
+        <p className="text-xs text-ink/70 mb-4">Are you sure you want to delete <span className="font-mono bg-canvas px-1 rounded">{fileName}</span>? This action cannot be undone.</p>
+        <div className="flex justify-end space-x-2">
+          <button 
+            onClick={onCancel}
+            className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors"
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button 
+            onClick={onConfirm}
+            className="px-3 py-1.5 text-xs bg-error text-white rounded hover:bg-error/90 transition-colors flex items-center"
+            disabled={isLoading}
+          >
+            {isLoading ? 'Deleting...' : 'Delete'}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+interface RenameModalProps {
+  isFolder: boolean;
+  renameValue: string;
+  originalPath: string;
+  isLoading: boolean;
+  onChange: (value: string) => void;
+  onCancel: () => void;
+  onSubmit: (e: FormEvent) => void;
+}
+
+export function FileRenameModal({ isFolder, renameValue, originalPath, isLoading, onChange, onCancel, onSubmit }: RenameModalProps) {
+  return createPortal(
+    <div className="fixed inset-0 bg-ink/20 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+      <form onSubmit={onSubmit} className="bg-paper rounded shadow-xl p-4 w-full max-w-sm border border-ink/10 font-sans">
+        <h3 className="font-semibold text-ink mb-3 text-sm">Rename {isFolder ? 'Folder' : 'File'}</h3>
+        <input 
+          autoFocus
+          type="text" 
+          value={renameValue}
+          onChange={e => onChange(e.currentTarget.value)}
+          className="w-full bg-paper border border-ink/20 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:border-ink mb-4"
+        />
+        <div className="flex justify-end space-x-2">
+          <button 
+            type="button"
+            onClick={onCancel}
+            className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors"
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button 
+            type="submit"
+            className="px-3 py-1.5 text-xs bg-ink text-canvas rounded hover:bg-ink/90 transition-colors flex items-center"
+            disabled={isLoading || !renameValue.trim() || renameValue === originalPath}
+          >
+            {isLoading ? 'Renaming...' : 'Rename'}
+          </button>
+        </div>
+      </form>
+    </div>,
+    document.body
+  );
+}
+
+interface HistoryModalProps {
+  filePath: string;
+  fetcherState: string;
+  fetcherData: any;
+  onClose: () => void;
+}
+
+export function FileHistoryModal({ filePath, fetcherState, fetcherData, onClose }: HistoryModalProps) {
+  return createPortal(
+    <div className="fixed inset-0 bg-ink/20 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+      <div className="bg-paper rounded-lg shadow-xl w-full max-w-4xl border border-ink/10 flex flex-col max-h-[85vh]">
+        <div className="flex items-center justify-between p-4 border-b border-ink/10">
+          <h3 className="text-sm font-semibold text-ink flex items-center space-x-2">
+            <History size={16} className="text-ink/60" />
+            <span>Git History: <span className="font-mono font-normal opacity-80">{filePath}</span></span>
+          </h3>
+          <button 
+            onClick={onClose}
+            className="p-1 hover:bg-ink/5 rounded text-ink/60 transition-colors"
+          >
+            <X size={14} />
+          </button>
+        </div>
+        
+        <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static bg-paper p-2">
+          {fetcherState === 'idle' ? (
+            fetcherData?.type === 'history' ? (
+              fetcherData.data.length > 0 ? (
+                <table className="w-full text-left border-collapse text-[11px]">
+                  <thead className="bg-canvas sticky top-0 z-10 border-b border-ink/10">
+                    <tr>
+                      <th className="px-3 py-2 font-semibold text-ink/70 rounded-tl">Description</th>
+                      <th className="px-3 py-2 font-semibold text-ink/70 w-32">Date</th>
+                      <th className="px-3 py-2 font-semibold text-ink/70 w-32">Author</th>
+                      <th className="px-3 py-2 font-semibold text-ink/70 w-24 text-right rounded-tr">Commit</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-ink/5">
+                    {fetcherData.data.map((row: any, i: number) => (
+                      <tr key={i} className="hover:bg-ink/[0.03] transition-colors group bg-paper">
+                        <td className="px-3 py-2 text-ink">
+                          {row.message ? <span className="font-medium text-ink/90 group-hover:text-ink">{row.message}</span> : null}
+                        </td>
+                        <td className="px-3 py-2 text-ink/60 whitespace-nowrap font-mono text-[10.5px]">
+                          {row.time}
+                        </td>
+                        <td className="px-3 py-2 text-ink/70 whitespace-nowrap truncate max-w-[120px]">
+                          {row.author}
+                        </td>
+                        <td className="px-3 py-2 text-right">
+                          {row.hash ? <span className="font-mono text-ink/50 group-hover:text-ink font-semibold transition-colors bg-canvas px-1.5 py-0.5 rounded border border-ink/10">{row.hash}</span> : null}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ) : (
+                <div className="p-8 text-center text-ink/40 font-mono text-xs">No commit history found for this file.</div>
+              )
+            ) : fetcherData?.error ? (
+              <div className="p-8 text-center text-error font-mono text-xs">{fetcherData.error}</div>
+            ) : (
+              <div className="p-8 text-center text-ink/40 font-mono text-xs">Loading history...</div>
+            )
+          ) : (
+            <div className="p-8 text-center text-ink/40 font-mono text-xs flex items-center justify-center space-x-2">
+              <RefreshCw size={14} className="animate-spin" />
+              <span>Loading history...</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/client/components/workspace/file-explorer/TreeItem.tsx

@@ -0,0 +1,289 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { FormEvent } from 'preact/compat';
+import { ChevronDown, ChevronRight } from 'lucide-preact';
+import { useFetcher } from '@/client/lib/router/fetcher';
+import { FileIcon } from '@/client/components/common/file-icon';
+import { FileContextMenu, FileDeleteModal, FileHistoryModal, FileRenameModal } from '@/client/components/workspace/file-explorer/Modals';
+import { getGitStatusInfo, type FolderGitStatusInfo } from '@/shared/lib/fs/git-status';
+import type { GitChange } from '@/shared/types/git';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+interface FileTreeItemProps {
+  file: any;
+  rootPath?: string;
+  repo?: string;
+  onLoadChildren?: (path: string) => Promise<void>;
+  onOpenFile?: (file: any) => void;
+  onActionComplete: () => void;
+  expandedPaths?: Set<string>;
+  onToggleFolder?: (path: string, open: boolean) => void;
+  gitFileMap?: Map<string, GitChange>;
+  gitFolderMap?: Map<string, FolderGitStatusInfo>;
+}
+
+export function FileTreeItem({
+  file,
+  rootPath,
+  repo,
+  onLoadChildren,
+  onOpenFile,
+  onActionComplete,
+  expandedPaths,
+  onToggleFolder,
+  gitFileMap,
+  gitFolderMap,
+}: FileTreeItemProps) {
+  const isFolder = file.type === 'folder';
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoadingChildren, setIsLoadingChildren] = useState(false);
+  const actionFetcher = useFetcher<any>();
+  const [mounted, setMounted] = useState(false);
+
+  const [contextMenu, setContextMenu] = useState<{ x: number, y: number } | null>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const [showRenameModal, setShowRenameModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showHistoryModal, setShowHistoryModal] = useState(false);
+  const [renameValue, setRenameValue] = useState(file.path);
+
+  const children = Array.isArray(file.children) ? file.children : [];
+
+  const normalizedPath = (file.path || '').replace(/^\/+/, '');
+  const gitChange = !isFolder ? (gitFileMap?.get(normalizedPath) || gitFileMap?.get(file.path)) : undefined;
+  const gitStatusInfo = gitChange ? getGitStatusInfo(gitChange.status, gitChange.staged) : null;
+  const folderStatus = isFolder ? (gitFolderMap?.get(normalizedPath) || gitFolderMap?.get(file.path)) : null;
+  const hasGitStatus = Boolean(gitStatusInfo);
+
+  const isExpanded = expandedPaths ? expandedPaths.has(file.path) : isOpen;
+  const actualIsOpen = file.forceExpanded !== undefined ? file.forceExpanded : isExpanded;
+
+  useEffect(() => { setMounted(true); }, []);
+
+  useEffect(() => {
+    if (isFolder && expandedPaths) {
+      setIsOpen(expandedPaths.has(file.path));
+    }
+  }, [expandedPaths, file.path, isFolder]);
+
+  useEffect(() => {
+    if (isFolder && actualIsOpen && (!file.children || file.children.length === 0) && onLoadChildren && !isLoadingChildren) {
+      setIsLoadingChildren(true);
+      Promise.resolve(onLoadChildren(file.path)).finally(() => setIsLoadingChildren(false));
+    }
+  }, [isFolder, actualIsOpen, file.children, file.path, onLoadChildren]);
+
+  useOnClickOutside(contextMenuRef, () => setContextMenu(null));
+
+  useEffect(() => {
+    if (actionFetcher.state === 'idle' && actionFetcher.data) {
+      if (actionFetcher.data.success) {
+        if (!actionFetcher.data.type) {
+          setShowRenameModal(false);
+          setShowDeleteModal(false);
+          onActionComplete();
+        }
+      }
+    }
+  }, [actionFetcher.state, actionFetcher.data]);
+
+  const handleToggle = (e: globalThis.MouseEvent) => {
+    e.stopPropagation();
+    if (isFolder) {
+      const next = !actualIsOpen;
+      setIsOpen(next);
+      if (file.forceExpanded !== undefined) {
+        file.forceExpanded = undefined;
+      }
+      onToggleFolder?.(file.path, next);
+      if (next && onLoadChildren && (!file.children || file.children.length === 0)) {
+        setIsLoadingChildren(true);
+        Promise.resolve(onLoadChildren(file.path)).finally(() => setIsLoadingChildren(false));
+      }
+    } else {
+      if (onOpenFile) {
+        onOpenFile({
+          ...file,
+          root: rootPath,
+          repo: repo || '.',
+        });
+      }
+    }
+  };
+
+  const handleContextMenu = (e: globalThis.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY });
+  };
+
+  const submitAction = (formData: FormData) => {
+    if (repo && repo !== '.') formData.append('repo', repo);
+    if (rootPath) formData.append('root', rootPath);
+    actionFetcher.submit(formData, { method: 'post', action: '/api/fs/action' });
+  };
+
+  const handleAction = (actionType: string) => {
+    setContextMenu(null);
+    if (actionType === 'view') {
+      if (onOpenFile) {
+        onOpenFile({
+          ...file,
+          root: rootPath,
+          repo: repo || '.',
+        });
+      }
+    } else if (actionType === 'diff') {
+      window.dispatchEvent(new CustomEvent('omp:open-diff', {
+        detail: {
+          file: file.path,
+          staged: gitChange?.staged || (gitChange?.status && gitChange.status[0] !== ' ' && gitChange.status[0] !== '?'),
+          status: gitStatusInfo?.charStatus || 'M',
+          repo: repo || '.',
+          root: rootPath,
+        }
+      }));
+    } else if (actionType === 'explorer') {
+      const fd = new FormData();
+      fd.append('actionType', 'open_explorer');
+      fd.append('path', file.path);
+      submitAction(fd);
+    } else if (actionType === 'copy_path') {
+      navigator.clipboard.writeText('/app/applet/examples/' + file.path);
+    } else if (actionType === 'copy_relative') {
+      navigator.clipboard.writeText(file.path);
+    } else if (actionType === 'history') {
+      setShowHistoryModal(true);
+      const fd = new FormData();
+      fd.append('actionType', 'git_history');
+      fd.append('path', file.path);
+      submitAction(fd);
+    } else if (actionType === 'rename') {
+      setRenameValue(file.path);
+      setShowRenameModal(true);
+    } else if (actionType === 'delete') {
+      setShowDeleteModal(true);
+    }
+  };
+
+  const submitRename = (e: FormEvent) => {
+    e.preventDefault();
+    const fd = new FormData();
+    fd.append('actionType', 'rename');
+    fd.append('path', file.path);
+    fd.append('newPath', renameValue);
+    submitAction(fd);
+  };
+
+  const submitDelete = () => {
+    const fd = new FormData();
+    fd.append('actionType', 'delete');
+    fd.append('path', file.path);
+    submitAction(fd);
+  };
+
+  return (
+    <div>
+      <div
+        className="flex items-center space-x-1.5 py-1 px-2 hover:bg-ink/5 cursor-pointer rounded group"
+        onClick={handleToggle}
+        onContextMenu={handleContextMenu}
+      >
+        {isFolder ? (
+          actualIsOpen ? <ChevronDown size={12} className="flex-shrink-0 text-ink/40" /> : <ChevronRight size={12} className="flex-shrink-0 text-ink/40" />
+        ) : (
+          <span className="w-3 flex-shrink-0"></span>
+        )}
+
+        <FileIcon name={file.name} isFolder={isFolder} isOpen={actualIsOpen} size={12} className="flex-shrink-0" />
+        <span className={`truncate min-w-0 flex-1 ${gitStatusInfo ? gitStatusInfo.colorClass : folderStatus ? folderStatus.colorClass : ''}`}>
+          {file.name}
+        </span>
+
+        {gitStatusInfo && (
+          <span
+            className={`font-mono text-[9px] font-bold px-1 rounded flex-shrink-0 ${gitStatusInfo.colorClass}`}
+            title={`Git: ${gitStatusInfo.label}`}
+          >
+            {gitStatusInfo.charStatus}
+          </span>
+        )}
+
+        {folderStatus && (
+          <span
+            className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+              folderStatus.hasDeleted ? 'bg-error' :
+              folderStatus.hasModified || folderStatus.hasStaged ? 'bg-info' : 'bg-success'
+            }`}
+            title={`${folderStatus.count} changed file${folderStatus.count > 1 ? 's' : ''}`}
+          />
+        )}
+      </div>
+
+      {actualIsOpen && isLoadingChildren && (
+        <div className="ml-3 border-l border-ink/10 pl-3 py-0.5 text-[10px] text-ink/30">Loading…</div>
+      )}
+
+      {actualIsOpen && !isLoadingChildren && children.length > 0 && (
+        <div className="ml-3 border-l border-ink/10 pl-1">
+          {children.map((child: any) => (
+            <FileTreeItem
+              key={child.id}
+              file={child}
+              rootPath={rootPath}
+              repo={repo}
+              onLoadChildren={onLoadChildren}
+              onOpenFile={onOpenFile}
+              onActionComplete={onActionComplete}
+              expandedPaths={expandedPaths}
+              onToggleFolder={onToggleFolder}
+              gitFileMap={gitFileMap}
+              gitFolderMap={gitFolderMap}
+            />
+          ))}
+        </div>
+      )}
+
+      {mounted && contextMenu && (
+        <FileContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          isFolder={isFolder}
+          hasGitStatus={hasGitStatus}
+          onAction={handleAction}
+        />
+      )}
+
+      {mounted && showDeleteModal && (
+        <FileDeleteModal
+          fileName={file.name}
+          isFolder={isFolder}
+          isLoading={actionFetcher.state !== 'idle'}
+          onCancel={() => setShowDeleteModal(false)}
+          onConfirm={submitDelete}
+        />
+      )}
+
+      {mounted && showRenameModal && (
+        <FileRenameModal
+          isFolder={isFolder}
+          renameValue={renameValue}
+          originalPath={file.path}
+          isLoading={actionFetcher.state !== 'idle'}
+          onChange={setRenameValue}
+          onCancel={() => setShowRenameModal(false)}
+          onSubmit={submitRename}
+        />
+      )}
+
+      {mounted && showHistoryModal && (
+        <FileHistoryModal
+          filePath={file.path}
+          fetcherState={actionFetcher.state}
+          fetcherData={actionFetcher.data}
+          onClose={() => setShowHistoryModal(false)}
+        />
+      )}
+    </div>
+  );
+}
+