Function FileBrowser

src/components/file-browser.tsx:17–183

({ sessionId }: FileBrowserProps)

}

export function FileBrowser({ sessionId }: FileBrowserProps) {
  const [files, setFiles] = useState<FileEntry[]>([]);
  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set(["/workspace/repo"]));
  const [selectedFile, setSelectedFile] = useState<string | null>(null);
  const [fileContent, setFileContent] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadDirectory("/workspace/repo");
  }, [sessionId]);

  const loadDirectory = async (dirPath: string) => {
    try {
      const response = await fetch(
        `/api/container/${sessionId}/files?path=${encodeURIComponent(dirPath)}`
      );

      if (!response.ok) {
        throw new Error("Failed to load directory");
      }

      const entries: FileEntry[] = await response.json();

      // Add entries to files list (avoid duplicates)
      setFiles((prev) => {
        const newFiles = [...prev];
        for (const entry of entries) {
          if (!newFiles.some((f) => f.path === entry.path)) {
            newFiles.push(entry);
          }
        }
        return newFiles;
      });

      setLoading(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load directory");
      setLoading(false);
    }
  };

  const toggleDirectory = async (dirPath: string) => {
    const newExpanded = new Set(expandedDirs);

    if (expandedDirs.has(dirPath)) {
      newExpanded.delete(dirPath);
    } else {
      newExpanded.add(dirPath);
      // Load directory contents if not already loaded
      await loadDirectory(dirPath);
    }

    setExpandedDirs(newExpanded);
  };

  const selectFile = async (filePath: string) => {
    setSelectedFile(filePath);