ompchamber 0.3.0

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

@@ -0,0 +1,193 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { RefreshCw, Search } from 'lucide-preact';
+import { rehydrateTree, setChildrenAt } from '@/shared/lib/fs/file-tree';
+import { GitRepoDropdown } from '@/client/components/workspace/file-explorer/GitRepoDropdown';
+import { FileTreeItem } from '@/client/components/workspace/file-explorer/TreeItem';
+import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useGitStatus } from '@/client/hooks/workspace/git-status';
+import { usePanelRefresh, useFileMutationRefresh } from '@/client/hooks/workspace/panel-refresh';
+
+export function FileExplorer({ className = '', enabled = true, rootPath, onOpenFile, refreshKey = 0, onRefresh }: { className?: string, enabled?: boolean, rootPath?: string, onOpenFile?: (file: any) => void, refreshKey?: number, onRefresh?: () => void }) {
+  const [tree, setTree] = useState<any[]>([]);
+  const [searchQuery, setSearchQuery] = useSessionState<string>('files.searchQuery', '');
+  const [isLoading, setIsLoading] = useState(false);
+  const [storedExpandedPaths, setStoredExpandedPaths, expandedPathsReady] = useSessionState<string[]>('files.expandedPaths', []);
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set(storedExpandedPaths));
+  const childrenCacheRef = useRef<Record<string, any[]>>({});
+  const [activeRepo, setActiveRepo] = useSessionState<string>('files.activeRepo', '.');
+  const { isScrolling, handleScroll } = useScrollbarFade();
+  const { fileMap: gitFileMap, folderMap: gitFolderMap, refreshGitStatus } = useGitStatus(rootPath, activeRepo, refreshKey, enabled);
+
+  useEffect(() => {
+    if (!expandedPathsReady) return;
+    setExpandedPaths(prev => {
+      const next = new Set(storedExpandedPaths);
+      if (prev.size === next.size && Array.from(next).every(path => prev.has(path))) return prev;
+      return next;
+    });
+  }, [expandedPathsReady, storedExpandedPaths]);
+
+  const listUrl = (path?: string) => {
+    const params = new URLSearchParams();
+    if (rootPath) params.set('root', rootPath);
+    if (activeRepo && activeRepo !== '.') params.set('repo', activeRepo);
+    if (path) params.set('path', path);
+    params.set('t', String(Date.now()));
+    return `/api/fs/dir?${params.toString()}`;
+  };
+
+  const loadFiles = (opts?: { silent?: boolean }) => {
+    if (!enabled) return;
+    if (!opts?.silent) setIsLoading(true);
+    fetch(listUrl())
+      .then(r => r.json())
+      .then(data => {
+        if (Array.isArray(data.files)) {
+          setTree(rehydrateTree(data.files, childrenCacheRef.current, expandedPaths));
+        }
+      })
+      .catch(() => {})
+      .finally(() => {
+        if (!opts?.silent) setIsLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (!expandedPathsReady) return;
+    loadFiles();
+  }, [refreshKey, rootPath, enabled, activeRepo, expandedPathsReady]);
+
+  // Auto refresh: re-read the directory tree on a cadence so external changes
+  // (terminal output, agent edits) surface without a manual refresh. Silent —
+  // the loading spinner stays reserved for the user's own refresh button.
+  usePanelRefresh(() => loadFiles({ silent: true }), enabled && expandedPathsReady);
+  // AI edits land between poll ticks: re-read right after a file-mutating tool
+  // (edit / write / ast_edit / bash) finishes, not up to 2s later.
+  useFileMutationRefresh(() => loadFiles({ silent: true }), enabled && expandedPathsReady);
+
+  const loadChildren = (path: string) => {
+    return fetch(listUrl(path))
+      .then(r => r.json())
+      .then(data => {
+        if (Array.isArray(data.files)) {
+          childrenCacheRef.current[path] = data.files;
+          setTree(prev => setChildrenAt(prev, path, data.files));
+        }
+      })
+      .catch(() => {});
+  };
+
+  const handleToggleFolder = (path: string, open: boolean) => {
+    const next = new Set(expandedPaths);
+    if (open) next.add(path);
+    else next.delete(path);
+    setExpandedPaths(next);
+    setStoredExpandedPaths(Array.from(next));
+  };
+
+  const handleSelectRepo = (repo: string) => {
+    if (repo === activeRepo) return;
+    childrenCacheRef.current = {};
+    setExpandedPaths(new Set());
+    setStoredExpandedPaths([]);
+    setActiveRepo(repo);
+  };
+
+  if (!enabled) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">No session selected</span>
+      </div>
+    );
+  }
+
+  const getFilteredFiles = () => {
+    if (!searchQuery.trim()) return tree;
+
+    const lowerQuery = searchQuery.toLowerCase();
+
+    const filterNode = (node: any): any => {
+      const isMatch = node.name.toLowerCase().includes(lowerQuery);
+
+      if (node.type === 'folder') {
+        const filteredChildren = (node.children || []).map(filterNode).filter(Boolean);
+
+        if (isMatch || filteredChildren.length > 0) {
+          return {
+            ...node,
+            children: isMatch && filteredChildren.length === 0 ? node.children : filteredChildren,
+            forceExpanded: true
+          };
+        }
+        return null;
+      }
+
+      return isMatch ? node : null;
+    };
+
+    return tree.map(filterNode).filter(Boolean);
+  };
+
+  const files = getFilteredFiles();
+  const refresh = () => {
+    refreshGitStatus();
+    if (onRefresh) onRefresh();
+    else loadFiles();
+  };
+
+  return (
+    <div className={`flex flex-col h-full bg-paper ${className}`}>
+      <div className="p-3 border-b border-ink/10 flex flex-col space-y-2">
+        <div className="flex items-center justify-between">
+          <GitRepoDropdown rootPath={rootPath} activeRepo={activeRepo} onSelectRepo={handleSelectRepo} />
+          <button
+            onClick={refresh}
+            className="p-1.5 text-ink/40 hover:text-ink hover:bg-ink/5 rounded transition-colors"
+            title="Refresh"
+          >
+            <RefreshCw size={14} className={isLoading ? 'animate-spin' : ''} />
+          </button>
+        </div>
+        <div className="relative">
+          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink/40" />
+          <input
+            type="text"
+            placeholder="Search files..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.currentTarget.value)}
+            className="w-full bg-canvas border border-ink/20 rounded pl-8 pr-3 py-1.5 text-xs focus:outline-none focus:border-ink transition-colors text-ink placeholder-ink/40"
+          />
+        </div>
+      </div>
+
+      <div className={`flex-1 scrollbar-overlay-container p-2 font-mono text-[11px] text-ink/80 ${scrollbarFadeClass(isScrolling)}`} onContextMenu={(e) => e.preventDefault()} onScroll={handleScroll}>
+        {isLoading && files.length === 0 ? (
+          <div className="p-4 text-center text-ink/40">
+            Loading files...
+          </div>
+        ) : files.length === 0 ? (
+          <div className="p-4 text-center text-ink/40">
+            No files found
+          </div>
+        ) : (
+          files.map(file => (
+            <FileTreeItem
+              key={file.id}
+              file={file}
+              rootPath={rootPath}
+              repo={activeRepo}
+              onLoadChildren={loadChildren}
+              onOpenFile={onOpenFile}
+              onActionComplete={refresh}
+              expandedPaths={expandedPaths}
+              onToggleFolder={handleToggleFolder}
+              gitFileMap={gitFileMap}
+              gitFolderMap={gitFolderMap}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/BranchToolbar.tsx

@@ -0,0 +1,188 @@
+import type { RefObject } from 'preact/compat';
+import { Check, ChevronDown, FolderTree, GitBranch, GitMerge, History, List, MoreHorizontal, Plus, RefreshCw } from 'lucide-preact';
+
+interface GitBranchToolbarProps {
+  branchRef: RefObject<HTMLDivElement>;
+  showBranchMenu: boolean;
+  setShowBranchMenu: (show: boolean) => void;
+  branch: string;
+  branches: string[];
+  remoteBranches: string[];
+  onCheckout: (branch: string) => void;
+  onOpenBranchPrompt: () => void;
+  optionsRef: RefObject<HTMLDivElement>;
+  showOptions: boolean;
+  setShowOptions: (show: boolean) => void;
+  onHistory: () => void;
+  onGraph: () => void;
+  viewMode: 'flat' | 'tree';
+  setViewMode: (mode: 'flat' | 'tree') => void;
+  isBusy?: boolean;
+  syncCount?: { ahead: number; behind: number };
+  onSync: () => void;
+}
+
+export function GitBranchToolbar({
+  branchRef,
+  showBranchMenu,
+  setShowBranchMenu,
+  branch,
+  branches,
+  remoteBranches,
+  onCheckout,
+  onOpenBranchPrompt,
+  optionsRef,
+  showOptions,
+  setShowOptions,
+  onHistory,
+  onGraph,
+  viewMode,
+  setViewMode,
+  isBusy = false,
+  syncCount = { ahead: 0, behind: 0 },
+  onSync
+}: GitBranchToolbarProps) {
+  return (
+    <div className="p-3 border-b border-ink/10 bg-canvas/50 flex items-center justify-between">
+      <div className="relative" ref={branchRef}>
+        <button 
+          onClick={() => setShowBranchMenu(!showBranchMenu)}
+          className="flex items-center space-x-1.5 hover:bg-ink/5 px-2 py-1 -ml-2 rounded transition-colors text-[11px] text-ink/80 font-medium"
+        >
+          <GitBranch size={12} className="text-ink/60" />
+          <span className="truncate max-w-[140px]">{branch}</span>
+          <ChevronDown size={12} className="text-ink/40" />
+        </button>
+        
+        {showBranchMenu && (
+          <div className="absolute top-full left-0 mt-1 w-48 bg-paper border border-ink/20 rounded-md shadow-lg z-50 flex flex-col overflow-hidden text-xs">
+            <div className="max-h-48 scrollbar-overlay-container scrollbar-overlay-static py-1">
+              {branches.length > 0 && (
+                <>
+                  <div className="px-3 py-1 text-[9px] uppercase tracking-wider text-ink/40 font-semibold">Local</div>
+                  {branches.map(b => (
+                    <button 
+                      key={b}
+                      onClick={() => { 
+                        onCheckout(b);
+                        setShowBranchMenu(false); 
+                      }}
+                      className="w-full text-left px-3 py-2 hover:bg-ink/5 flex items-center justify-between transition-colors"
+                    >
+                      <span className="truncate">{b}</span>
+                      {branch === b && <Check size={12} className="text-ink" />}
+                    </button>
+                  ))}
+                </>
+              )}
+              {remoteBranches.length > 0 && (
+                <>
+                  <div className="px-3 py-1 text-[9px] uppercase tracking-wider text-ink/40 font-semibold">Remote</div>
+                  {remoteBranches.map(b => (
+                    <button 
+                      key={b}
+                      onClick={() => { 
+                        onCheckout(b);
+                        setShowBranchMenu(false); 
+                      }}
+                      className="w-full text-left px-3 py-2 hover:bg-ink/5 flex items-center justify-between transition-colors"
+                    >
+                      <span className="truncate">{b}</span>
+                      {branch === b && <Check size={12} className="text-ink" />}
+                    </button>
+                  ))}
+                </>
+              )}
+              <div className="w-full h-px bg-ink/10 my-1" />
+              <button 
+                onClick={() => { 
+                  onOpenBranchPrompt();
+                  setShowBranchMenu(false); 
+                }}
+                className="w-full text-left px-3 py-2 hover:bg-ink/5 flex items-center space-x-2 transition-colors text-ink/80 italic"
+              >
+                <Plus size={12} />
+                <span>Create new branch...</span>
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center space-x-2 text-ink/40 relative" ref={optionsRef}>
+        <button
+          type="button"
+          onClick={onSync}
+          disabled={isBusy || (syncCount.ahead === 0 && syncCount.behind === 0)}
+          title={
+            syncCount.ahead > 0 && syncCount.behind > 0
+              ? `Pull ${syncCount.behind} then push ${syncCount.ahead} commit(s)`
+              : syncCount.ahead > 0
+                ? `Push ${syncCount.ahead} commit(s)`
+                : syncCount.behind > 0
+                  ? `Pull ${syncCount.behind} commit(s)`
+                  : 'Up to date'
+          }
+          className="flex items-center gap-1 p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          <RefreshCw size={13} />
+          <span className="font-mono tabular-nums text-[10px]">↑{syncCount.ahead} ↓{syncCount.behind}</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={onHistory} 
+          title="Commit History"
+          className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
+        >
+          <History size={13} />
+        </button>
+
+        <button
+          type="button"
+          onClick={onGraph} 
+          title="Git Graph"
+          className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
+        >
+          <GitMerge size={13} />
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setShowOptions(!showOptions)} 
+          title="View Options"
+          className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
+        >
+          <MoreHorizontal size={13} />
+        </button>
+        
+        {showOptions && (
+          <div className="absolute right-0 top-full mt-1 w-36 bg-paper border border-ink/15 rounded-md shadow-lg z-50 py-1 font-mono text-xs">
+            <button 
+              type="button"
+              onClick={() => { setViewMode('flat'); setShowOptions(false); }}
+              className="w-full px-3 py-1.5 text-left text-ink hover:bg-ink/5 flex items-center justify-between transition-colors"
+            >
+              <div className="flex items-center space-x-1.5">
+                <List size={12} className="text-ink/60" />
+                <span>View as List</span>
+              </div>
+              {viewMode === 'flat' && <Check size={12} className="text-ink" />}
+            </button>
+            <button 
+              type="button"
+              onClick={() => { setViewMode('tree'); setShowOptions(false); }}
+              className="w-full px-3 py-1.5 text-left text-ink hover:bg-ink/5 flex items-center justify-between transition-colors"
+            >
+              <div className="flex items-center space-x-1.5">
+                <FolderTree size={12} className="text-ink/60" />
+                <span>View as Tree</span>
+              </div>
+              {viewMode === 'tree' && <Check size={12} className="text-ink" />}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/ChangesList.tsx

@@ -0,0 +1,168 @@
+import { Minus, Plus, Undo2 } from 'lucide-preact';
+import type { GitChange } from '@/shared/types';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { GitFileItem } from '@/client/components/workspace/git-panel/FileItem';
+import { GitTreeView } from '@/client/components/workspace/git-panel/TreeView';
+
+interface GitChangesListProps {
+  changes: GitChange[];
+  isLoading: boolean;
+  viewMode: 'flat' | 'tree';
+  repo?: string;
+  rootPath?: string;
+  onAction: (actionType: string, file?: string) => void;
+}
+
+export function GitChangesList({ changes, isLoading, viewMode, repo, rootPath, onAction }: GitChangesListProps) {
+  const [stagedExpanded, setStagedExpanded] = useSessionState<boolean>('git.stagedExpanded', true);
+  const [unstagedExpanded, setUnstagedExpanded] = useSessionState<boolean>('git.unstagedExpanded', true);
+
+  const stagedChanges = changes.filter(c => {
+    const status = c.status;
+    return status && status[0] !== ' ' && status[0] !== '?';
+  });
+
+  const unstagedChanges = changes.filter(c => {
+    const status = c.status;
+    return (status && status[1] !== ' ' && status[1] !== '?') || status === '??';
+  });
+
+  if (isLoading && changes.length === 0) {
+    return (
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static font-mono text-[11px] text-ink/80">
+        <div className="p-4 text-center text-ink/40 italic">Loading...</div>
+      </div>
+    );
+  }
+
+  if (changes.length === 0) {
+    return (
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static font-mono text-[11px] text-ink/80">
+        <div className="p-4 text-center text-ink/40 italic">No changes found.</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static font-mono text-[11px] text-ink/80">
+      <div className="py-1">
+        {stagedChanges.length > 0 && (
+          <div className="mb-2">
+            <div
+              className="flex items-center justify-between px-3 py-1 group hover:bg-ink/5 cursor-pointer transition-colors"
+              onClick={() => setStagedExpanded(!stagedExpanded)}
+            >
+              <div className="flex items-center space-x-1 font-semibold text-ink text-xs">
+                <span className="w-3 text-center">{stagedExpanded ? '▾' : '▸'}</span>
+                <span>Staged Changes</span>
+                <span className="text-ink/40 font-normal ml-1 border border-ink/20 rounded-full px-1.5 text-[9px] bg-paper">
+                  {stagedChanges.length}
+                </span>
+              </div>
+              <div className="opacity-0 group-hover:opacity-100 flex items-center space-x-1 text-ink/40 flex-shrink-0">
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAction('unstage_all');
+                  }}
+                  title="Unstage All Changes"
+                  className="w-5 h-5 flex items-center justify-center rounded hover:text-ink hover:bg-ink/10 cursor-pointer transition-colors"
+                >
+                  <Minus size={12} />
+                </button>
+              </div>
+            </div>
+
+            {stagedExpanded && (
+              viewMode === 'tree' ? (
+                <GitTreeView
+                  changes={stagedChanges}
+                  isStaged={true}
+                  repo={repo}
+                  rootPath={rootPath}
+                  onAction={onAction}
+                />
+              ) : (
+                stagedChanges.map(c => (
+                  <GitFileItem
+                    key={c.file + 'staged'}
+                    change={c}
+                    isStaged={true}
+                    repo={repo}
+                    rootPath={rootPath}
+                    onAction={onAction}
+                  />
+                ))
+              )
+            )}
+          </div>
+        )}
+
+        {unstagedChanges.length > 0 && (
+          <div>
+            <div
+              className="flex items-center justify-between px-3 py-1 group hover:bg-ink/5 cursor-pointer transition-colors"
+              onClick={() => setUnstagedExpanded(!unstagedExpanded)}
+            >
+              <div className="flex items-center space-x-1 font-semibold text-ink text-xs">
+                <span className="w-3 text-center">{unstagedExpanded ? '▾' : '▸'}</span>
+                <span>Changes</span>
+                <span className="text-ink/40 font-normal ml-1 border border-ink/20 rounded-full px-1.5 text-[9px] bg-paper">
+                  {unstagedChanges.length}
+                </span>
+              </div>
+              <div className="opacity-0 group-hover:opacity-100 flex items-center space-x-1 text-ink/40 flex-shrink-0">
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAction('revert_all');
+                  }}
+                  title="Discard All Changes"
+                  className="w-5 h-5 flex items-center justify-center rounded hover:text-error hover:bg-error/10 cursor-pointer transition-colors"
+                >
+                  <Undo2 size={12} />
+                </button>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAction('stage_all');
+                  }}
+                  title="Stage All Changes"
+                  className="w-5 h-5 flex items-center justify-center rounded hover:text-ink hover:bg-ink/10 cursor-pointer transition-colors"
+                >
+                  <Plus size={12} />
+                </button>
+              </div>
+            </div>
+
+            {unstagedExpanded && (
+              viewMode === 'tree' ? (
+                <GitTreeView
+                  changes={unstagedChanges}
+                  isStaged={false}
+                  repo={repo}
+                  rootPath={rootPath}
+                  onAction={onAction}
+                />
+              ) : (
+                unstagedChanges.map(c => (
+                  <GitFileItem
+                    key={c.file + 'unstaged'}
+                    change={c}
+                    isStaged={false}
+                    repo={repo}
+                    rootPath={rootPath}
+                    onAction={onAction}
+                  />
+                ))
+              )
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/CommitBox.tsx

@@ -0,0 +1,48 @@
+import { Check } from 'lucide-preact';
+
+interface GitCommitBoxProps {
+  message: string;
+  hasStagedChanges: boolean;
+  isBusy?: boolean;
+  onChangeMessage: (value: string) => void;
+  onCommit: () => void;
+}
+
+export function GitCommitBox({
+  message,
+  hasStagedChanges,
+  isBusy = false,
+  onChangeMessage,
+  onCommit,
+}: GitCommitBoxProps) {
+  const canCommit = hasStagedChanges && message.trim().length > 0 && !isBusy;
+
+  return (
+    <div className="border-t border-ink/10 bg-canvas/50 p-3 flex flex-col gap-2">
+      <textarea
+        value={message}
+        onChange={(e) => onChangeMessage(e.currentTarget.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && canCommit) {
+            e.preventDefault();
+            onCommit();
+          }
+        }}
+        placeholder="Commit message (⌘/Ctrl+Enter to commit)"
+        rows={5}
+        className="w-full resize-y min-h-[100px] max-h-[200px] bg-paper border border-ink/20 rounded px-2.5 py-1.5 text-xs text-ink placeholder-ink/40 focus:outline-none focus:border-ink/40 transition-colors font-mono"
+      />
+
+      <button
+        type="button"
+        onClick={onCommit}
+        disabled={!canCommit}
+        title={hasStagedChanges ? 'Commit staged changes' : 'Stage changes first'}
+        className="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded bg-ink text-canvas hover:bg-ink/90 transition-colors cursor-pointer text-xs font-medium disabled:opacity-40 disabled:cursor-not-allowed"
+      >
+        <Check size={12} />
+        Commit
+      </button>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/FileItem.tsx

@@ -0,0 +1,91 @@
+import { Minus, Plus, Undo2 } from 'lucide-preact';
+import { FileIcon } from '@/client/components/common/file-icon';
+import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
+import type { GitChange } from '@/shared/types';
+
+interface GitFileItemProps {
+  change: GitChange;
+  isStaged: boolean;
+  viewMode?: 'flat' | 'tree';
+  repo?: string;
+  rootPath?: string;
+  onAction: (actionType: string, file?: string) => void;
+}
+
+export function GitFileItem({ change, isStaged, repo, rootPath, onAction }: GitFileItemProps) {
+  const statusInfo = getGitStatusInfo(change.status, isStaged);
+  const charStatus = statusInfo.charStatus;
+  const colorClass = statusInfo.colorClass;
+
+  const parts = change.file.split('/');
+  const fileName = parts.pop() || change.file;
+  const dirPath = parts.length > 0 ? parts.join('/') : '';
+
+  const handleOpenDiff = () => {
+    window.dispatchEvent(new CustomEvent('omp:open-diff', {
+      detail: {
+        file: change.file,
+        staged: isStaged,
+        status: charStatus,
+        repo: repo || '.',
+        root: rootPath,
+      }
+    }));
+  };
+
+  return (
+    <div 
+      className="flex items-center justify-between px-3 py-1 hover:bg-ink/5 cursor-pointer group text-[11px] transition-colors"
+      onClick={handleOpenDiff}
+    >
+      <div className="flex items-center space-x-1.5 flex-1 min-w-0 pr-2">
+        <span className={`font-bold font-mono text-[9px] w-3 flex-shrink-0 text-center ${colorClass}`} title={`Status: ${statusInfo.label}`}>
+          {charStatus}
+        </span>
+        <FileIcon name={fileName} size={12} className="flex-shrink-0" />
+        <span className={`truncate ${colorClass}`} title={change.file}>
+          {fileName}
+        </span>
+        {dirPath && (
+          <span className="text-[9px] text-ink/40 truncate ml-1">
+            {dirPath}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0">
+        <div className="flex items-center opacity-0 group-hover:opacity-100 space-x-1">
+          {!isStaged && (
+            <>
+              <button 
+                type="button" 
+                onClick={() => onAction('revert', change.file)} 
+                title="Discard Changes" 
+                className="w-5 h-5 flex items-center justify-center rounded hover:text-error hover:bg-error/10 cursor-pointer transition-colors"
+              >
+                <Undo2 size={11} />
+              </button>
+              <button 
+                type="button" 
+                onClick={() => onAction('stage', change.file)} 
+                title="Stage Changes" 
+                className="w-5 h-5 flex items-center justify-center rounded hover:text-ink hover:bg-ink/10 cursor-pointer transition-colors"
+              >
+                <Plus size={11} />
+              </button>
+            </>
+          )}
+          {isStaged && (
+            <button 
+              type="button" 
+              onClick={() => onAction('unstage', change.file)} 
+              title="Unstage Changes" 
+              className="w-5 h-5 flex items-center justify-center rounded hover:text-ink hover:bg-ink/10 cursor-pointer transition-colors"
+            >
+              <Minus size={11} />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}