feat: add Files tab for browsing workspace files (#154)

* feat: add Files tab for browsing workspace files

- Add Files tab between Diff and Terminal in header
- Implement hierarchical file tree with expand/collapse
- Add fuzzy search with debouncing and relevance ranking
- Support gitignore filtering via `git check-ignore` (web + desktop)
- Add syntax highlighting for 150+ file types
- Add image preview (SVG, PNG, JPG, etc.)
- Add line numbers, wrap toggle, and copy button
- Desktop: split-pane layout matching DiffView
- Mobile: drill-in navigation with full-width sidebar
- Update help dialog with Cmd+3 shortcut
- Increase header breakpoint to 940px for new tab

* feat: enhance context and session stores to track agent/model/variant choices for historical sessions

* feat: implement line selection and commenting functionality in FilesView

packages/web/src/api/files.ts

@@ -1,50 +1,108 @@
-import type { DirectoryListResult, FileSearchQuery, FileSearchResult, FilesAPI } from '@openchamber/ui/lib/api/types';
+import type {
+  DirectoryListResult,
+  FileSearchQuery,
+  FileSearchResult,
+  FilesAPI,
+} from '@openchamber/ui/lib/api/types';
 
 const normalizePath = (path: string): string => path.replace(/\\/g, '/');
 
+type WebDirectoryEntry = {
+  name?: string;
+  path?: string;
+  isDirectory?: boolean;
+  isFile?: boolean;
+  isSymbolicLink?: boolean;
+};
+
+type WebDirectoryListResponse = {
+  directory?: string;
+  path?: string;
+  entries?: WebDirectoryEntry[];
+};
+
+type WebFileSearchResponse = {
+  root?: string;
+  directory?: string;
+  count?: number;
+  files?: Array<{
+    name?: string;
+    path?: string;
+    relativePath?: string;
+    extension?: string;
+  }>;
+};
+
+const toDirectoryListResult = (fallbackDirectory: string, payload: WebDirectoryListResponse): DirectoryListResult => {
+  const directory = normalizePath(payload?.directory || payload?.path || fallbackDirectory);
+  const entries = Array.isArray(payload?.entries) ? payload.entries : [];
+
+  return {
+    directory,
+    entries: entries
+      .filter((entry): entry is Required<Pick<WebDirectoryEntry, 'name' | 'path'>> & { isDirectory?: boolean } =>
+        Boolean(entry && typeof entry.name === 'string' && typeof entry.path === 'string')
+      )
+      .map((entry) => ({
+        name: entry.name,
+        path: normalizePath(entry.path),
+        isDirectory: Boolean(entry.isDirectory),
+      })),
+  };
+};
+
 export const createWebFilesAPI = (): FilesAPI => ({
   async listDirectory(path: string): Promise<DirectoryListResult> {
     const target = normalizePath(path);
-    const response = await fetch('/api/fs/list', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path: target }),
-    });
+    const params = new URLSearchParams();
+    if (target) {
+      params.set('path', target);
+    }
+
+    const response = await fetch(`/api/fs/list${params.toString() ? `?${params.toString()}` : ''}`);
 
     if (!response.ok) {
       const error = await response.json().catch(() => ({ error: response.statusText }));
-      throw new Error(error.error || 'Failed to list directory');
+      throw new Error((error as { error?: string }).error || 'Failed to list directory');
     }
 
-    return response.json();
+    const result = (await response.json()) as WebDirectoryListResponse;
+    return toDirectoryListResult(target, result);
   },
 
   async search(payload: FileSearchQuery): Promise<FileSearchResult[]> {
-    const response = await fetch('/api/fs/search', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        directory: normalizePath(payload.directory),
-        query: payload.query,
-        maxResults: payload.maxResults,
-      }),
-    });
+    const params = new URLSearchParams();
+
+    const directory = normalizePath(payload.directory);
+    if (directory) {
+      params.set('directory', directory);
+    }
+
+    params.set('q', payload.query);
+
+    if (typeof payload.maxResults === 'number' && Number.isFinite(payload.maxResults)) {
+      params.set('limit', String(payload.maxResults));
+    }
+
+    const response = await fetch(`/api/fs/search?${params.toString()}`);
 
     if (!response.ok) {
       const error = await response.json().catch(() => ({ error: response.statusText }));
-      throw new Error(error.error || 'Failed to search files');
+      throw new Error((error as { error?: string }).error || 'Failed to search files');
     }
 
-    const results = (await response.json()) as unknown;
-    if (!Array.isArray(results)) {
-      return [];
-    }
-    return results
-      .filter((item): item is FileSearchResult => !!item && typeof item === 'object' && typeof (item as { path?: string }).path === 'string')
-      .map((item) => ({
-        path: normalizePath((item as FileSearchResult).path),
-        score: (item as FileSearchResult).score,
-        preview: (item as FileSearchResult).preview,
+    const result = (await response.json()) as WebFileSearchResponse;
+    const files = Array.isArray(result?.files) ? result.files : [];
+
+    return files
+      .filter((file): file is { path: string; relativePath?: string } =>
+        Boolean(file && typeof file.path === 'string')
+      )
+      .map((file) => ({
+        path: normalizePath(file.path),
+        preview: typeof file.relativePath === 'string' && file.relativePath.length > 0
+          ? [normalizePath(file.relativePath)]
+          : undefined,
       }));
   },
 
@@ -58,7 +116,7 @@ export const createWebFilesAPI = (): FilesAPI => ({
 
     if (!response.ok) {
       const error = await response.json().catch(() => ({ error: response.statusText }));
-      throw new Error(error.error || 'Failed to create directory');
+      throw new Error((error as { error?: string }).error || 'Failed to create directory');
     }
 
     const result = await response.json();
@@ -67,4 +125,17 @@ export const createWebFilesAPI = (): FilesAPI => ({
       path: typeof result?.path === 'string' ? normalizePath(result.path) : target,
     };
   },
+
+  async readFile(path: string): Promise<{ content: string; path: string }> {
+    const target = normalizePath(path);
+    const response = await fetch(`/api/fs/read?path=${encodeURIComponent(target)}`);
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error((error as { error?: string }).error || 'Failed to read file');
+    }
+
+    const content = await response.text();
+    return { content, path: target };
+  },
 });