fix(code-viewer): lazy-load file tree, allow in-root symlinks, auto-refresh git status

- File tree lazy-loads children on expand (root depth=1, subdirs on first expand)
- Search triggers one-time deep load so matches include unexpanded dirs
- Removed all filtering from /file-tree so node_modules and dotfiles appear
- Replaced hard symlink rejection with realpath containment check on /download,
  /file-raw, /file-content — in-root symlinks now resolve, only escapes are blocked
- Fix CodePanel stretch: rows no longer spread to viewport height on short files
- GitChanges auto-refreshes every 3s while visible + on window focus/visibility

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

docs/api.md

@@ -313,7 +313,7 @@ Download a file from within a session's working directory.
 **Response (403):**
 
 ```json
-{ "error": "Symbolic links are not allowed" }
+{ "error": "Symlink target is outside session directory" }
 ```
 
 **Response (404):**
@@ -379,7 +379,7 @@ Get the text content of a file. Used for in-browser file preview (e.g., markdown
 **Response (403):**
 
 ```json
-{ "error": "Symbolic links are not allowed" }
+{ "error": "Symlink target is outside session directory" }
 ```
 
 **Response (404):**
@@ -431,7 +431,7 @@ Serve a file inline from a session's working directory. Unlike the `/download` e
 **Response (403):**
 
 ```json
-{ "error": "Symbolic links are not allowed" }
+{ "error": "Symlink target is outside session directory" }
 ```
 
 **Response (404):**

src/frontend/src/components/CodeViewer/CodePanel.module.css

@@ -8,6 +8,7 @@
 .container {
   display: flex;
   flex: 1;
+  align-items: flex-start;
   overflow: auto;
   background: var(--bg);
   font-family: 'Menlo', 'Monaco', 'Courier New', monospace;

src/frontend/src/components/CodeViewer/CodeViewer.tsx

@@ -28,6 +28,11 @@ export default function CodeViewer({ sessionId, onClose, initialView }: CodeView
   const {
     fileTree,
     setFileTree,
+    mergeChildren,
+    markDirLoaded,
+    loadedDirs,
+    deepLoaded,
+    setDeepLoaded,
     openFiles,
     activeFilePath,
     expandedDirs,
@@ -111,13 +116,13 @@ export default function CodeViewer({ sessionId, onClose, initialView }: CodeView
     };
   }, [blameEnabled, activeFilePath, sessionId, setGitBlame]);
 
-  // Load file tree on mount
+  // Load root file tree on mount (lazy — just depth=1).
   useEffect(() => {
     let cancelled = false;
     setTreeLoading(true);
     setTreeError(null);
 
-    fetchFileTree(sessionId)
+    fetchFileTree(sessionId, 1)
       .then(({ tree }) => {
         if (!cancelled) {
           setFileTree(tree);
@@ -136,6 +141,45 @@ export default function CodeViewer({ sessionId, onClose, initialView }: CodeView
     };
   }, [sessionId, setFileTree]);
 
+  // Lazy-load children of a directory when the user expands it for the first time.
+  const handleToggleDir = useCallback(
+    (dirPath: string) => {
+      const wasExpanded = expandedDirs.has(dirPath);
+      toggleDir(dirPath);
+      if (wasExpanded) return; // collapsing — nothing to fetch
+      if (loadedDirs.has(dirPath) || deepLoaded) return;
+
+      // Mark as loaded optimistically to prevent duplicate requests.
+      markDirLoaded(dirPath);
+      fetchFileTree(sessionId, 1, dirPath)
+        .then(({ tree }) => {
+          mergeChildren(dirPath, tree);
+        })
+        .catch(() => {
+          // Silent: user can retry by collapsing + re-expanding.
+        });
+    },
+    [sessionId, expandedDirs, loadedDirs, deepLoaded, toggleDir, markDirLoaded, mergeChildren],
+  );
+
+  // When the user starts searching, fetch a deep tree once so search can find files
+  // inside directories the user hasn't expanded yet.
+  const handleSearchQueryChange = useCallback(
+    (query: string) => {
+      if (!query.trim() || deepLoaded) return;
+      setDeepLoaded(true);
+      fetchFileTree(sessionId, 5)
+        .then(({ tree }) => {
+          setFileTree(tree);
+          setDeepLoaded(true);
+        })
+        .catch(() => {
+          setDeepLoaded(false); // allow retry
+        });
+    },
+    [sessionId, deepLoaded, setFileTree, setDeepLoaded],
+  );
+
   const handleFileSelect = useCallback(
     async (filePath: string) => {
       if (openFiles.has(filePath)) {
@@ -335,7 +379,8 @@ export default function CodeViewer({ sessionId, onClose, initialView }: CodeView
               expandedDirs={expandedDirs}
               activeFilePath={activeFilePath}
               onFileSelect={handleFileSelect}
-              onToggleDir={toggleDir}
+              onToggleDir={handleToggleDir}
+              onSearchQueryChange={handleSearchQueryChange}
               loading={treeLoading}
             />
           ) : (

src/frontend/src/components/CodeViewer/FileExplorer.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import { useState, useMemo, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { type FileTreeNode } from '@/stores/codeViewerStore';
 import { getFileIconUrl } from './fileIcons';
 import styles from './FileExplorer.module.css';
@@ -13,6 +13,7 @@ interface FileExplorerProps {
   activeFilePath: string | null;
   onFileSelect: (path: string) => void;
   onToggleDir: (path: string) => void;
+  onSearchQueryChange?: (query: string) => void;
   loading?: boolean;
 }
 
@@ -120,7 +121,7 @@ function SearchResults({
 }
 
 const FileExplorer = forwardRef<FileExplorerHandle, FileExplorerProps>(function FileExplorer(
-  { tree, expandedDirs, activeFilePath, onFileSelect, onToggleDir, loading },
+  { tree, expandedDirs, activeFilePath, onFileSelect, onToggleDir, onSearchQueryChange, loading },
   ref,
 ) {
   const [search, setSearch] = useState('');
@@ -132,6 +133,10 @@ const FileExplorer = forwardRef<FileExplorerHandle, FileExplorerProps>(function
     },
   }));
 
+  useEffect(() => {
+    onSearchQueryChange?.(search);
+  }, [search, onSearchQueryChange]);
+
   const allFiles = useMemo(() => {
     if (!tree) return [];
     const files: FileTreeNode[] = [];

src/frontend/src/components/CodeViewer/GitChanges.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCodeViewerStore } from '@/stores/codeViewerStore';
 import { fetchGitStatus, fetchGitDiff } from '@/services/api';
 import styles from './GitChanges.module.css';
@@ -43,26 +43,72 @@ export default function GitChanges({ sessionId }: GitChangesProps) {
   const { gitStatus, setGitStatus, setGitDiff, setDiffFile, diffFile } = useCodeViewerStore();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const inFlightRef = useRef(false);
 
-  const loadStatus = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const status = await fetchGitStatus(sessionId);
-      setGitStatus(status);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load git status');
-    } finally {
-      setLoading(false);
-    }
-  }, [sessionId, setGitStatus]);
+  const loadStatus = useCallback(
+    async (showSpinner = true) => {
+      if (inFlightRef.current) return;
+      inFlightRef.current = true;
+      if (showSpinner) setLoading(true);
+      try {
+        const status = await fetchGitStatus(sessionId);
+        setGitStatus(status);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load git status');
+      } finally {
+        if (showSpinner) setLoading(false);
+        inFlightRef.current = false;
+      }
+    },
+    [sessionId, setGitStatus],
+  );
 
   useEffect(() => {
     if (!gitStatus) {
       loadStatus();
     }
   }, [gitStatus, loadStatus]);
 
+  useEffect(() => {
+    const POLL_MS = 3000;
+    let timer: ReturnType<typeof setInterval> | null = null;
+
+    const start = () => {
+      if (timer) return;
+      timer = setInterval(() => {
+        if (document.visibilityState === 'visible') {
+          loadStatus(false);
+        }
+      }, POLL_MS);
+    };
+    const stop = () => {
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        loadStatus(false);
+        start();
+      } else {
+        stop();
+      }
+    };
+    const onFocus = () => loadStatus(false);
+
+    if (document.visibilityState === 'visible') start();
+    document.addEventListener('visibilitychange', onVisibility);
+    window.addEventListener('focus', onFocus);
+
+    return () => {
+      stop();
+      document.removeEventListener('visibilitychange', onVisibility);
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [loadStatus]);
+
   const handleFileClick = useCallback(
     async (path: string, staged: boolean, untracked: boolean) => {
       setDiffFile(path);
@@ -181,7 +227,7 @@ export default function GitChanges({ sessionId }: GitChangesProps) {
         </span>
         <button
           className={styles.refreshBtn}
-          onClick={loadStatus}
+          onClick={() => loadStatus(true)}
           disabled={loading}
           title="Refresh git status"
           aria-label="Refresh git status"

src/frontend/src/components/FolderBrowser/FolderBrowser.module.css

@@ -6,6 +6,32 @@
   overflow: hidden;
 }
 
+.pathInput {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.55rem 0.7rem;
+  font-size: 0.9rem;
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 0.4rem;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  /* Larger tap target on touch devices */
+  min-height: 2.5rem;
+}
+
+.pathInput:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.pathInput::placeholder {
+  color: var(--text-muted);
+}
+
 .breadcrumb {
   display: flex;
   align-items: center;