From d587c94f50833b5e4dc2792d48ae47d23f823b06 Mon Sep 17 00:00:00 2001
From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com>
Date: Fri, 3 Jul 2026 11:19:30 +0800
Subject: [PATCH] feat: wire file explorer to real backend API

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/layout/WorkspaceShell.tsx  |  26 ++-
 .../workspace/FileExplorerPanel.tsx           | 206 +++++++++++++-----
 web/src/lib/api/files.ts                      |  64 ++++++
 web/src/lib/store/file-tree-store.ts          |  24 ++
 web/src/lib/store/workspace-ui-store.ts       |   2 +-
 web/src/pages/workspace/WorkspacePage.tsx     |  25 ++-
 web/src/pages/workspace/mock-data.ts          |  74 +------
 7 files changed, 282 insertions(+), 139 deletions(-)
 create mode 100644 web/src/lib/api/files.ts
 create mode 100644 web/src/lib/store/file-tree-store.ts

diff --git a/web/src/components/layout/WorkspaceShell.tsx b/web/src/components/layout/WorkspaceShell.tsx
index 160f92e..fdc8062 100644
--- a/web/src/components/layout/WorkspaceShell.tsx
+++ b/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" />
             </>
diff --git a/web/src/components/workspace/FileExplorerPanel.tsx b/web/src/components/workspace/FileExplorerPanel.tsx
index 809a0c2..d5fcea6 100644
--- a/web/src/components/workspace/FileExplorerPanel.tsx
+++ b/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>
diff --git a/web/src/lib/api/files.ts b/web/src/lib/api/files.ts
new file mode 100644
index 0000000..b4193a2
--- /dev/null
+++ b/web/src/lib/api/files.ts
@@ -0,0 +1,64 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+
+import { apiClient } from "@/lib/api/client";
+
+export interface FileEntry {
+  name: string;
+  path: string;
+  isDir: boolean;
+  size?: number;
+  modTime?: string;
+  language?: string;
+}
+
+const LANGUAGE_BY_EXTENSION: Record<string, string> = {
+  css: "css",
+  go: "go",
+  html: "html",
+  js: "javascript",
+  jsx: "javascript",
+  json: "json",
+  md: "markdown",
+  py: "python",
+  ts: "typescript",
+  tsx: "typescript",
+  yaml: "yaml",
+  yml: "yaml",
+};
+
+export function inferLanguage(name: string): string | undefined {
+  const ext = name.split(".").pop()?.toLowerCase();
+  return ext ? LANGUAGE_BY_EXTENSION[ext] : undefined;
+}
+
+function fileListQueryKey(workspaceId: string, path: string) {
+  return ["workspaces", workspaceId, "files", path || "."] as const;
+}
+
+async function fetchFileList(
+  workspaceId: string,
+  path: string,
+): Promise<FileEntry[]> {
+  const queryPath = path || ".";
+  const url =
+    `/api/workspaces/${encodeURIComponent(workspaceId)}/files?` +
+    new URLSearchParams({ path: queryPath }).toString();
+  const res = await apiClient(url);
+  if (!res.ok) {
+    throw new Error(`Failed to list files: ${res.status}`);
+  }
+  return (await res.json()) as FileEntry[];
+}
+
+export function useFileList(
+  workspaceId: string | null,
+  path: string,
+  enabled = true,
+): UseQueryResult<FileEntry[], Error> {
+  const queryPath = path || ".";
+  return useQuery({
+    queryKey: fileListQueryKey(workspaceId ?? "", queryPath),
+    queryFn: () => fetchFileList(workspaceId!, queryPath),
+    enabled: !!workspaceId && enabled,
+  });
+}
diff --git a/web/src/lib/store/file-tree-store.ts b/web/src/lib/store/file-tree-store.ts
new file mode 100644
index 0000000..7bd6662
--- /dev/null
+++ b/web/src/lib/store/file-tree-store.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+
+interface FileTreeState {
+  expandedPaths: Set<string>;
+  toggleExpanded: (path: string) => void;
+  selectedPath: string | null;
+  setSelectedPath: (path: string | null) => void;
+}
+
+export const useFileTreeStore = create<FileTreeState>((set) => ({
+  expandedPaths: new Set<string>(),
+  toggleExpanded: (path) =>
+    set((state) => {
+      const next = new Set(state.expandedPaths);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return { expandedPaths: next };
+    }),
+  selectedPath: null,
+  setSelectedPath: (path) => set({ selectedPath: path }),
+}));
diff --git a/web/src/lib/store/workspace-ui-store.ts b/web/src/lib/store/workspace-ui-store.ts
index 6a8f2a2..6f04dd8 100644
--- a/web/src/lib/store/workspace-ui-store.ts
+++ b/web/src/lib/store/workspace-ui-store.ts
@@ -12,7 +12,7 @@ interface WorkspaceUiState {
 }
 
 export const useWorkspaceUiStore = create<WorkspaceUiState>((set) => ({
-  activeFilePath: "src/main.tsx",
+  activeFilePath: "",
   terminalVisible: true,
   sidebarCollapsed: false,
   currentWorkspaceId: null,
diff --git a/web/src/pages/workspace/WorkspacePage.tsx b/web/src/pages/workspace/WorkspacePage.tsx
index 93e4ec9..a7a03a4 100644
--- a/web/src/pages/workspace/WorkspacePage.tsx
+++ b/web/src/pages/workspace/WorkspacePage.tsx
@@ -1,6 +1,27 @@
-import { mockWorkspaceFiles } from "@/pages/workspace/mock-data";
+import { useFileList } from "@/lib/api/files";
+import { useWorkspaces } from "@/lib/api/workspaces";
+import { useWorkspaceUiStore } from "@/lib/store/workspace-ui-store";
 import { WorkspaceShell } from "@/components/layout/WorkspaceShell";
 
 export function WorkspacePage() {
-  return <WorkspaceShell files={mockWorkspaceFiles} />;
+  const currentWorkspaceId = useWorkspaceUiStore(
+    (s) => s.currentWorkspaceId,
+  );
+
+  // Keep workspace list fresh for the selector and prime the root file cache.
+  useWorkspaces();
+  useFileList(currentWorkspaceId ?? null, ".");
+
+  if (!currentWorkspaceId) {
+    return (
+      <main className="flex h-full w-full items-center justify-center bg-background text-foreground">
+        <div className="text-center text-sm text-muted-foreground">
+          <p className="font-medium">No workspace selected</p>
+          <p className="mt-1">Select or create a workspace to get started.</p>
+        </div>
+      </main>
+    );
+  }
+
+  return <WorkspaceShell workspaceId={currentWorkspaceId} />;
 }
diff --git a/web/src/pages/workspace/mock-data.ts b/web/src/pages/workspace/mock-data.ts
index b838c99..15d00a8 100644
--- a/web/src/pages/workspace/mock-data.ts
+++ b/web/src/pages/workspace/mock-data.ts
@@ -1,80 +1,8 @@
-export type MockFileNode = {
+export interface MockFileNode {
   name: string;
   path: string;
   kind: "file" | "dir";
   language?: string;
   content?: string;
   children?: MockFileNode[];
-};
-
-const file = (
-  name: string,
-  path: string,
-  language: string,
-  content: string,
-): MockFileNode => ({ name, path, kind: "file", language, content });
-
-const dir = (
-  name: string,
-  path: string,
-  children: MockFileNode[],
-): MockFileNode => ({ name, path, kind: "dir", children });
-
-export const mockWorkspaceFiles: MockFileNode[] = [
-  file("package.json", "package.json", "json", `{
-  "name": "codespace",
-  "version": "0.0.0"
-}
-`),
-  file("README.md", "README.md", "markdown", `# Codespace
-
-A self-hosted development environment.
-`),
-  dir("src", "src", [
-    file(
-      "main.tsx",
-      "src/main.tsx",
-      "typescript",
-      `import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "@/app/App";
-import "@/styles/index.css";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
-`,
-    ),
-  ]),
-  dir("internal", "internal", [
-    dir("api", "internal/api", [
-      file(
-        "router.go",
-        "internal/api/router.go",
-        "go",
-        `package api
-
-// Router is reserved for future backend routes.
-type Router struct{}
-`,
-      ),
-    ]),
-  ]),
-];
-
-/** Depth-first search for a node with the given slash-delimited path. */
-export function findFileByPath(
-  files: MockFileNode[],
-  path: string,
-): MockFileNode | undefined {
-  for (const node of files) {
-    if (node.path === path) return node;
-    if (node.children) {
-      const found = findFileByPath(node.children, path);
-      if (found) return found;
-    }
-  }
-  return undefined;
 }