feat: wire file explorer to real backend API

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/components/layout/WorkspaceShell.tsx

@@ -8,23 +8,33 @@ import { TerminalPanel } from "@/components/terminal/TerminalPanel";
 import { FileExplorerPanel } from "@/components/workspace/FileExplorerPanel";
 import { StatusBar } from "@/components/workspace/StatusBar";
 import { WorkspaceSelector } from "@/components/workspace/WorkspaceSelector";
+import { inferLanguage } from "@/lib/api/files";
 import { useWorkspaceUiStore } from "@/lib/store/workspace-ui-store";
-import {
-  findFileByPath,
-  type MockFileNode,
-} from "@/pages/workspace/mock-data";
+import type { MockFileNode } from "@/pages/workspace/mock-data";
 
 interface WorkspaceShellProps {
-  files: MockFileNode[];
+  workspaceId: string;
 }
 
-export function WorkspaceShell({ files }: WorkspaceShellProps) {
+function fileNodeFromPath(path: string): MockFileNode {
+  const name = path.split("/").pop() ?? path;
+  return {
+    name,
+    path,
+    kind: "file",
+    language: inferLanguage(name),
+  };
+}
+
+export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
   const activeFilePath = useWorkspaceUiStore((s) => s.activeFilePath);
   const sidebarCollapsed = useWorkspaceUiStore((s) => s.sidebarCollapsed);
   const terminalVisible = useWorkspaceUiStore((s) => s.terminalVisible);
   const toggleSidebar = useWorkspaceUiStore((s) => s.toggleSidebar);
   const toggleTerminal = useWorkspaceUiStore((s) => s.toggleTerminal);
-  const activeFile = findFileByPath(files, activeFilePath);
+  const activeFile = activeFilePath
+    ? fileNodeFromPath(activeFilePath)
+    : undefined;
 
   return (
     <div className="flex h-full w-full flex-col bg-background text-foreground">
@@ -65,7 +75,7 @@ export function WorkspaceShell({ files }: WorkspaceShellProps) {
           {!sidebarCollapsed && (
             <>
               <Panel defaultSize={18} minSize={12} maxSize={30}>
-                <FileExplorerPanel files={files} />
+                <FileExplorerPanel workspaceId={workspaceId} />
               </Panel>
               <PanelResizeHandle className="w-1 bg-border transition-colors hover:bg-accent" />
             </>

web/src/components/workspace/FileExplorerPanel.tsx

@@ -1,78 +1,155 @@
 import { ChevronRight, FileCode2, Folder } from "lucide-react";
+import type { ReactNode } from "react";
 
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useFileList, type FileEntry } from "@/lib/api/files";
+import { useFileTreeStore } from "@/lib/store/file-tree-store";
 import { useWorkspaceUiStore } from "@/lib/store/workspace-ui-store";
 import { cn } from "@/lib/utils";
-import type { MockFileNode } from "@/pages/workspace/mock-data";
 
 interface FileExplorerPanelProps {
-  files: MockFileNode[];
+  workspaceId: string | null;
 }
 
-interface FileTreeNodeProps {
-  node: MockFileNode;
+interface FileTreeDirectoryProps {
+  workspaceId: string;
+  entry: FileEntry;
   depth: number;
-  activeFilePath: string;
   onSelectFile: (path: string) => void;
 }
 
-function FileTreeNode({
-  node,
-  depth,
-  activeFilePath,
-  onSelectFile,
-}: FileTreeNodeProps) {
-  const isFile = node.kind === "file";
-  const isActive = isFile && node.path === activeFilePath;
+interface FileTreeFileProps {
+  entry: FileEntry;
+  depth: number;
+  onSelectFile: (path: string) => void;
+}
+
+function FileTreeFile({ entry, depth, onSelectFile }: FileTreeFileProps) {
+  const selectedPath = useFileTreeStore((s) => s.selectedPath);
+  const isSelected = selectedPath === entry.path;
   const paddingLeft = `${depth * 0.875 + 0.75}rem`;
 
   return (
     <li>
       <button
         type="button"
-        disabled={!isFile}
-        onClick={() => isFile && onSelectFile(node.path)}
+        onClick={() => onSelectFile(entry.path)}
         className={cn(
-          "flex h-7 w-full items-center gap-1.5 truncate px-2 text-left text-xs text-muted-foreground transition-colors",
-          isFile && "hover:bg-accent hover:text-accent-foreground",
-          !isFile && "cursor-default text-foreground",
-          isActive && "bg-accent text-accent-foreground",
+          "flex h-7 w-full items-center gap-1.5 truncate px-2 text-left text-xs transition-colors",
+          "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          isSelected && "bg-accent text-accent-foreground",
         )}
         style={{ paddingLeft }}
       >
-        {isFile ? (
-          <FileCode2 className="size-3.5 shrink-0" aria-hidden="true" />
-        ) : (
-          <>
-            <ChevronRight
-              className="size-3 shrink-0 rotate-90"
-              aria-hidden="true"
-            />
-            <Folder className="size-3.5 shrink-0" aria-hidden="true" />
-          </>
-        )}
-        <span className="truncate">{node.name}</span>
+        <FileCode2 className="size-3.5 shrink-0" aria-hidden="true" />
+        <span className="truncate">{entry.name}</span>
       </button>
-      {node.children?.length ? (
-        <ul>
-          {node.children.map((child) => (
-            <FileTreeNode
-              key={child.path}
-              node={child}
-              depth={depth + 1}
-              activeFilePath={activeFilePath}
-              onSelectFile={onSelectFile}
-            />
-          ))}
-        </ul>
-      ) : null}
     </li>
   );
 }
 
-export function FileExplorerPanel({ files }: FileExplorerPanelProps) {
-  const activeFilePath = useWorkspaceUiStore((s) => s.activeFilePath);
+function FileTreeDirectory({
+  workspaceId,
+  entry,
+  depth,
+  onSelectFile,
+}: FileTreeDirectoryProps) {
+  const expanded = useFileTreeStore((s) => s.expandedPaths.has(entry.path));
+  const toggleExpanded = useFileTreeStore((s) => s.toggleExpanded);
+  const { data, isLoading, error } = useFileList(
+    workspaceId,
+    entry.path,
+    expanded,
+  );
+  const paddingLeft = `${depth * 0.875 + 0.75}rem`;
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => toggleExpanded(entry.path)}
+        className={cn(
+          "flex h-7 w-full items-center gap-1.5 truncate px-2 text-left text-xs transition-colors",
+          "text-foreground hover:bg-accent hover:text-accent-foreground",
+        )}
+        style={{ paddingLeft }}
+      >
+        <ChevronRight
+          className={cn(
+            "size-3 shrink-0 transition-transform",
+            expanded && "rotate-90",
+          )}
+          aria-hidden="true"
+        />
+        <Folder className="size-3.5 shrink-0" aria-hidden="true" />
+        <span className="truncate">{entry.name}</span>
+      </button>
+      {expanded && (
+        <ul>
+          {isLoading && (
+            <li className="px-3 py-1 text-xs text-muted-foreground">
+              Loading…
+            </li>
+          )}
+          {error && (
+            <li className="px-3 py-1 text-xs text-destructive">
+              {error.message}
+            </li>
+          )}
+          {data?.map((child) =>
+            child.isDir ? (
+              <FileTreeDirectory
+                key={child.path}
+                workspaceId={workspaceId}
+                entry={child}
+                depth={depth + 1}
+                onSelectFile={onSelectFile}
+              />
+            ) : (
+              <FileTreeFile
+                key={child.path}
+                entry={child}
+                depth={depth + 1}
+                onSelectFile={onSelectFile}
+              />
+            ),
+          )}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+function EmptyState({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center px-4 text-center text-xs text-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+export function FileExplorerPanel({ workspaceId }: FileExplorerPanelProps) {
   const setActiveFilePath = useWorkspaceUiStore((s) => s.setActiveFilePath);
+  const setSelectedPath = useFileTreeStore((s) => s.setSelectedPath);
+  const { data, isLoading, error } = useFileList(workspaceId, ".");
+
+  const onSelectFile = (path: string) => {
+    setSelectedPath(path);
+    setActiveFilePath(path);
+  };
+
+  if (!workspaceId) {
+    return (
+      <aside className="flex h-full min-h-0 flex-col bg-sidebar text-sidebar-foreground">
+        <div className="flex h-9 shrink-0 items-center border-b border-sidebar-border px-3 text-[11px] font-semibold uppercase text-muted-foreground">
+          Explorer
+        </div>
+        <EmptyState>
+          <p>No workspace selected</p>
+        </EmptyState>
+      </aside>
+    );
+  }
 
   return (
     <aside className="flex h-full min-h-0 flex-col bg-sidebar text-sidebar-foreground">
@@ -82,15 +159,34 @@ export function FileExplorerPanel({ files }: FileExplorerPanelProps) {
       <ScrollArea className="min-h-0 flex-1">
         <nav className="py-2" aria-label="Workspace files">
           <ul>
-            {files.map((node) => (
-              <FileTreeNode
-                key={node.path}
-                node={node}
-                depth={0}
-                activeFilePath={activeFilePath}
-                onSelectFile={setActiveFilePath}
-              />
-            ))}
+            {isLoading && (
+              <li className="px-3 py-2 text-xs text-muted-foreground">
+                Loading files…
+              </li>
+            )}
+            {error && (
+              <li className="px-3 py-2 text-xs text-destructive">
+                {error.message}
+              </li>
+            )}
+            {data?.map((entry) =>
+              entry.isDir ? (
+                <FileTreeDirectory
+                  key={entry.path}
+                  workspaceId={workspaceId}
+                  entry={entry}
+                  depth={0}
+                  onSelectFile={onSelectFile}
+                />
+              ) : (
+                <FileTreeFile
+                  key={entry.path}
+                  entry={entry}
+                  depth={0}
+                  onSelectFile={onSelectFile}
+                />
+              ),
+            )}
           </ul>
         </nav>
       </ScrollArea>