GitStatus improvements

client/src/App.tsx

@@ -436,6 +436,12 @@ function App() {
             onBackToBrowser={handleBackToBrowser}
             onOpenGitDiff={openGitDiffPage}
             onOpenFile={openFilePage}
+            onNavigateToDirectory={(path) => {
+              window.history.pushState({ page: "list" }, "", "/");
+              setRoute({ page: "list" });
+              resetFileViewer();
+              setCurrentDirectory(path);
+            }}
           />
         ) : isGitDiffRoute ? (
           <GitDiff onBackToBrowser={handleBackToBrowser} />

client/src/components/GitStatus.tsx

@@ -6,18 +6,21 @@ import type {
   StageAllResponse,
 } from "@shared/git";
 import type { ErrorResponse } from "@shared/http";
+import type { FileListItem } from "@shared/files";
 import Toolbar from "@/components/Toolbar";
 
 type GitStatusProps = {
   onBackToBrowser: () => void;
   onOpenGitDiff: () => void;
   onOpenFile: (path: string) => void;
+  onNavigateToDirectory: (path: string) => void;
 };
 
 const GitStatus = ({
   onBackToBrowser,
   onOpenGitDiff,
   onOpenFile,
+  onNavigateToDirectory,
 }: GitStatusProps) => {
   const [status, setStatus] = useState<GitStatusResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -157,9 +160,21 @@ const GitStatus = ({
     }
   };
 
-  const renderFileList = (files: string[], title: string, color: string) => {
+  const renderFileList = (
+    files: FileListItem[],
+    title: string,
+    color: string,
+  ) => {
     if (files.length === 0) return null;
 
+    const handleItemClick = (item: FileListItem) => {
+      if (item.kind === "directory") {
+        onNavigateToDirectory(item.path);
+      } else {
+        onOpenFile(item.path);
+      }
+    };
+
     return (
       <div className="rounded border border-slate-800 bg-slate-900/60 p-4">
         <h3
@@ -168,16 +183,16 @@ const GitStatus = ({
           {title} ({files.length})
         </h3>
         <ul className="space-y-1">
-          {files.map((file, index) => (
+          {files.map((item, index) => (
             <li
-              key={`${file}-${index}`}
+              key={`${item.path}-${index}`}
               className="font-mono text-sm text-slate-300"
             >
               <button
-                onClick={() => onOpenFile(file)}
+                onClick={() => handleItemClick(item)}
                 className="w-full cursor-pointer truncate text-left underline hover:text-sky-400 focus:text-sky-400 focus:outline-none"
               >
-                {file}
+                {item.kind === "directory" ? `${item.path}/` : item.path}
               </button>
             </li>
           ))}
@@ -265,16 +280,20 @@ const GitStatus = ({
                   Unstaged ({status.unstaged.length})
                 </h3>
                 <ul className="space-y-1">
-                  {status.unstaged.map((file, index) => (
+                  {status.unstaged.map((item, index) => (
                     <li
-                      key={`${file}-${index}`}
+                      key={`${item.path}-${index}`}
                       className="font-mono text-sm text-slate-300"
                     >
                       <button
-                        onClick={() => onOpenFile(file)}
+                        onClick={() =>
+                          item.kind === "directory"
+                            ? onNavigateToDirectory(item.path)
+                            : onOpenFile(item.path)
+                        }
                         className="w-full cursor-pointer truncate text-left underline hover:text-sky-400 focus:text-sky-400 focus:outline-none"
                       >
-                        {file}
+                        {item.kind === "directory" ? `${item.path}/` : item.path}
                       </button>
                     </li>
                   ))}

server/services/gitService.ts

@@ -1,10 +1,36 @@
 import type { GitStatusResponse, GitDiffResponse } from "../../shared/git";
+import type { FileListItem } from "../../shared/files";
 import { exec } from "child_process";
 import { promisify } from "util";
 import { resolveFromRoot } from "../utils/paths";
+import { stat } from "fs/promises";
+import { join } from "path";
 
 const execAsync = promisify(exec);
 
+/**
+ * Helper function to convert a file path to a FileListItem by checking if it's a file or directory
+ */
+const pathToFileListItem = async (
+  filePath: string,
+  projectRoot: string,
+): Promise<FileListItem> => {
+  try {
+    const fullPath = join(projectRoot, filePath);
+    const stats = await stat(fullPath);
+    return {
+      path: filePath,
+      kind: stats.isDirectory() ? "directory" : "file",
+    };
+  } catch {
+    // If we can't stat the file, assume it's a file
+    return {
+      path: filePath,
+      kind: "file",
+    };
+  }
+};
+
 /**
  * Gets the current git status including branch, ahead/behind, and file statuses
  */
@@ -39,9 +65,9 @@ export const getGitStatus = async (): Promise<GitStatusResponse> => {
       cwd: projectRoot,
     });
 
-    const staged: string[] = [];
-    const unstaged: string[] = [];
-    const untracked: string[] = [];
+    const stagedPaths: string[] = [];
+    const unstagedPaths: string[] = [];
+    const untrackedPaths: string[] = [];
 
     const lines = statusOutput.split("\n").filter((line) => line.length > 0);
     for (const line of lines) {
@@ -53,17 +79,28 @@ export const getGitStatus = async (): Promise<GitStatusResponse> => {
       const unstagedStatus = status[1];
 
       if (stagedStatus === "?" && unstagedStatus === "?") {
-        untracked.push(filePath);
+        untrackedPaths.push(filePath);
       } else {
         if (stagedStatus !== " " && stagedStatus !== "?") {
-          staged.push(filePath);
+          stagedPaths.push(filePath);
         }
         if (unstagedStatus !== " " && unstagedStatus !== "?") {
-          unstaged.push(filePath);
+          unstagedPaths.push(filePath);
         }
       }
     }
 
+    // Convert paths to FileListItems with kind information
+    const staged = await Promise.all(
+      stagedPaths.map((path) => pathToFileListItem(path, projectRoot)),
+    );
+    const unstaged = await Promise.all(
+      unstagedPaths.map((path) => pathToFileListItem(path, projectRoot)),
+    );
+    const untracked = await Promise.all(
+      untrackedPaths.map((path) => pathToFileListItem(path, projectRoot)),
+    );
+
     return {
       branch,
       ahead,

shared/git.ts

@@ -1,12 +1,13 @@
 import type { SuccessResponse, TextRequest } from "./http";
+import type { FileListItem } from "./files";
 
 export interface GitStatusResponse {
   branch: string;
   ahead: number;
   behind: number;
-  staged: string[];
-  unstaged: string[];
-  untracked: string[];
+  staged: FileListItem[];
+  unstaged: FileListItem[];
+  untracked: FileListItem[];
 }
 
 export interface GitDiffResponse {