ompchamber 1.2.1 → 2.0.1

package/src/client/components/workspace/diff-panel/UnifiedView.tsx

@@ -38,80 +38,85 @@ export function UnifiedView({ lines, language }: UnifiedViewProps) {
 
   return (
     <div className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface">
-      <table className="w-max min-w-full border-collapse">
-        <tbody>
-          {lines.map((line, idx) => {
-            if (line.type === 'meta') {
-              return (
-                <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
-                  <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                  <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                  <td className="py-1 px-3 text-[11px] font-semibold text-meta font-mono tracking-tight">{line.text}</td>
-                </tr>
-              );
-            }
+      {/* The room under the last row belongs to the content, not the scroller:
+          a scroll container's own bottom padding is not part of its scrollable
+          overflow, so the padding has to sit inside it to have any effect. */}
+      <div className="pb-4">
+        <table className="w-max min-w-full border-collapse">
+          <tbody>
+            {lines.map((line, idx) => {
+              if (line.type === 'meta') {
+                return (
+                  <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
+                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
+                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
+                    <td className="py-1 px-3 text-[11px] font-semibold text-meta font-mono tracking-tight">{line.text}</td>
+                  </tr>
+                );
+              }
 
-            const isAdd = line.type === 'add';
-            const isDel = line.type === 'del';
+              const isAdd = line.type === 'add';
+              const isDel = line.type === 'del';
 
-            return (
-              <tr
-                key={idx}
-                className={`transition-colors group ${
-                  isAdd
-                    ? 'bg-success/10 hover:bg-success/15'
-                    : isDel
-                    ? 'bg-error/10 hover:bg-error/15'
-                    : 'hover:bg-ink/[0.03]'
-                }`}
-              >
-                {/* Old line number */}
-                <td
-                  className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                    isDel
-                      ? 'bg-error/15 text-error font-semibold'
-                      : isAdd
-                      ? 'bg-success/15 text-success/70'
-                      : 'bg-canvas/50 text-ink/40'
-                  }`}
-                >
-                  {line.oldLineNumber || ''}
-                </td>
-
-                {/* New line number */}
-                <td
-                  className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+              return (
+                <tr
+                  key={idx}
+                  className={`transition-colors group ${
                     isAdd
-                      ? 'bg-success/15 text-success font-semibold'
+                      ? 'bg-success/10 hover:bg-success/15'
                       : isDel
-                      ? 'bg-error/15 text-error/70'
-                      : 'bg-canvas/50 text-ink/40'
+                      ? 'bg-error/10 hover:bg-error/15'
+                      : 'hover:bg-ink/[0.03]'
                   }`}
                 >
-                  {line.newLineNumber || ''}
-                </td>
+                  {/* Old line number */}
+                  <td
+                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+                      isDel
+                        ? 'bg-error/15 text-error font-semibold'
+                        : isAdd
+                        ? 'bg-success/15 text-success/70'
+                        : 'bg-canvas/50 text-ink/40'
+                    }`}
+                  >
+                    {line.oldLineNumber || ''}
+                  </td>
 
-                {/* Change prefix & code text */}
-                <td className="py-0.5 px-3 whitespace-pre text-ink pr-6">
-                  <span
-                    className={`inline-block w-4 text-center select-none font-bold ${
-                      isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'
+                  {/* New line number */}
+                  <td
+                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+                      isAdd
+                        ? 'bg-success/15 text-success font-semibold'
+                        : isDel
+                        ? 'bg-error/15 text-error/70'
+                        : 'bg-canvas/50 text-ink/40'
                     }`}
                   >
-                    {isAdd ? '+' : isDel ? '-' : ' '}
-                  </span>
-                  <span
-                    className="shiki"
-                    dangerouslySetInnerHTML={{
-                      __html: line.text ? htmlByIndex[idx] || '&nbsp;' : '&nbsp;',
-                    }}
-                  />
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                    {line.newLineNumber || ''}
+                  </td>
+
+                  {/* Change prefix & code text */}
+                  <td className="py-0.5 px-3 whitespace-pre text-ink pr-6">
+                    <span
+                      className={`inline-block w-4 text-center select-none font-bold ${
+                        isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'
+                      }`}
+                    >
+                      {isAdd ? '+' : isDel ? '-' : ' '}
+                    </span>
+                    <span
+                      className="shiki"
+                      dangerouslySetInnerHTML={{
+                        __html: line.text ? htmlByIndex[idx] || '&nbsp;' : '&nbsp;',
+                      }}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

package/src/client/components/workspace/diff-panel/index.tsx

@@ -135,7 +135,14 @@ export function DiffPanel({
   };
 
   return (
-    <div className={`flex flex-col h-full bg-paper select-text relative font-sans ${className}`}>
+    // The panel fills, it does not size itself: the caller owns the height
+    // (`flex-1` in the editor's column, `h-full` in the mobile overlay). A
+    // hardcoded `h-full` here resolves against the whole editor column rather
+    // than the space left under the tabs, so the panel began below the tabs
+    // *and* stood the full column tall — its bottom, the toolbar's height,
+    // hung past the panel edge and was clipped for good, since the scroll
+    // range ends below the visible area.
+    <div className={`flex flex-col min-h-0 bg-paper select-text relative font-sans ${className}`}>
       {/* Top Diff Toolbar */}
       <DiffToolbar
         filePath={filePath}

package/src/client/components/workspace/editor/index.tsx

@@ -154,8 +154,17 @@ export function Editor({
             ) : (
               <div onScroll={handleScroll} className={`flex-1 overflow-auto bg-paper flex ${scrollbarFadeClass(isScrolling)}`}>
                 {(isMd && isPreview) ? (
-                  <div className="p-6 prose prose-sm max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
-                    <MarkdownRenderer content={currentContent} />
+                  // No `prose` wrapper: markdown is styled by `.prose-content`
+                  // alone (the same system the chat timeline uses). The
+                  // typography plugin fought it — `.prose img` added 2em
+                  // vertical margins that ballooned a badge row into its own
+                  // line box, and `--tw-prose-*` colors ignored the theme.
+                  <div className="p-6 max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
+                    <MarkdownRenderer
+                      content={currentContent}
+                      document
+                      scope={{ path: activeFile.path, root: activeFile.root, repo: activeFile.repo }}
+                    />
                   </div>
                 ) : (
                   <CodeSurface
@@ -184,6 +193,13 @@ export function Editor({
                       fontSize: zoomLevel,
                       lineHeight: 1.5,
                       minHeight: '100%',
+                      // Breathing room under the last line. It has to live on the
+                      // surface, not on the scroll container: a scroll container's
+                      // own bottom padding is not part of its scrollable overflow,
+                      // so `pb-*` on the scroller left the last line flush with the
+                      // panel's edge (measured: padding-bottom 32px did not change
+                      // scrollHeight by a single pixel).
+                      paddingBottom: 16,
                     }}
                   />
                 )}

package/src/client/components/workspace/file-explorer/GitRepoDropdown.tsx

@@ -1,13 +1,17 @@
 
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { Check, ChevronDown, FolderGit2, RotateCcw, Search } from 'lucide-preact';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
-import { REPO_DISCOVERY_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
 
 interface GitRepoDropdownProps {
   rootPath?: string;
   activeRepo: string;
   onSelectRepo: (repo: string) => void;
+  /** Discovered repos of the active root; the panel owns discovery. */
+  repos: string[];
+  /** Discovery or a forced rescan is in flight. */
+  scanning: boolean;
+  onRefreshRepos: () => void;
 }
 
 function workspaceFolderName(rootPath?: string): string {
@@ -16,51 +20,21 @@ function workspaceFolderName(rootPath?: string): string {
   return parts.length > 0 ? parts[parts.length - 1] : 'workspace root';
 }
 
-export function GitRepoDropdown({ rootPath, activeRepo, onSelectRepo }: GitRepoDropdownProps) {
+export function GitRepoDropdown({
+  rootPath,
+  activeRepo,
+  onSelectRepo,
+  repos,
+  scanning,
+  onRefreshRepos,
+}: GitRepoDropdownProps) {
   const [open, setOpen] = useState(false);
-  const [repos, setRepos] = useState<string[]>(['.']);
-  const [scanning, setScanning] = useState(false);
   const [query, setQuery] = useState('');
   const ref = useRef<HTMLDivElement>(null);
   const rootLabel = workspaceFolderName(rootPath);
 
   const label = (r: string) => (r === '.' ? rootLabel : r);
 
-  const fetchRepos = async (rescan = false) => {
-    const params = new URLSearchParams({ reposOnly: '1' });
-    if (rootPath) params.set('root', rootPath);
-    if (rescan) params.set('rescan', '1');
-    params.set('t', String(Date.now()));
-    const data = await fetch(`/api/fs/git?${params.toString()}`).then(r => r.json()).catch(() => null);
-    if (data && Array.isArray(data.repos)) {
-      setRepos(data.repos);
-      if (data.reposPending) {
-        setScanning(true);
-      } else {
-        setScanning(false);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (!open) return;
-    void fetchRepos();
-  }, [open, rootPath]);
-
-  useEffect(() => {
-    if (!scanning) return;
-    const params = new URLSearchParams({ reposOnly: '1' });
-    if (rootPath) params.set('root', rootPath);
-    const id = setInterval(async () => {
-      const data = await fetch(`/api/fs/git?${params.toString()}`).then(r => r.json()).catch(() => null);
-      if (data && !data.reposPending && Array.isArray(data.repos)) {
-        setRepos(data.repos);
-        setScanning(false);
-      }
-    }, REPO_DISCOVERY_POLL_MS);
-    return () => clearInterval(id);
-  }, [scanning, rootPath]);
-
   useOnClickOutside(ref, () => setOpen(false));
 
   const filteredRepos = repos.filter(r => {
@@ -106,7 +80,7 @@ export function GitRepoDropdown({ rootPath, activeRepo, onSelectRepo }: GitRepoD
             )}
             <button
               type="button"
-              onClick={() => void fetchRepos(true)}
+              onClick={onRefreshRepos}
               title="Refresh nested repos"
               disabled={scanning}
               className="text-ink/40 hover:text-ink flex-shrink-0 transition-colors disabled:opacity-40 disabled:hover:text-ink/40"

package/src/client/components/workspace/file-explorer/index.tsx

@@ -1,28 +1,71 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { RefreshCw, Search } from 'lucide-preact';
+import type { FsNode } from '@/shared/types';
 import { rehydrateTree, setChildrenAt } from '@/shared/lib/fs/file-tree';
+import { isRecord } from '@/shared/lib/util/guards';
 import { GitRepoDropdown } from '@/client/components/workspace/file-explorer/GitRepoDropdown';
 import { FileTreeItem } from '@/client/components/workspace/file-explorer/TreeItem';
 import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
+import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { usePanelRefresh, useFileMutationRefresh } from '@/client/hooks/workspace/panel-refresh';
 
+/**
+ * The listing on screen, tagged with the `root\0repo` scope it was read for.
+ *
+ * Tagging it is what makes a workspace switch instant and complete: the panel
+ * renders an empty tree until the new root's listing lands, instead of showing
+ * the previous workspace's files under the new workspace's header. It also
+ * covers what a plain "reset on switch" effect cannot — the children loaded on
+ * demand and the expansion set are keyed by paths RELATIVE to the listed root,
+ * so `src/` in one workspace would rehydrate into `src/` in the next.
+ */
+interface Listing {
+  scope: string;
+  files: FsNode[];
+  /** Absolute base dir reported by `/api/fs/dir`; Copy Path anchors on it. */
+  root: string;
+}
+
+const EMPTY_LISTING: Listing = { scope: '', files: [], root: '' };
+
+/** Directory listing payload from `/api/fs/dir`, validated field by field. */
+function readDirPayload(data: unknown): { files: FsNode[]; root: string } {
+  if (!isRecord(data)) return { files: [], root: '' };
+  return {
+    files: Array.isArray(data.files) ? data.files.filter((f): f is FsNode => isRecord(f)) : [],
+    root: typeof data.root === 'string' ? data.root : '',
+  };
+}
+
 export function FileExplorer({ className = '', enabled = true, rootPath, onOpenFile, refreshKey = 0, onRefresh }: { className?: string, enabled?: boolean, rootPath?: string, onOpenFile?: (file: any) => void, refreshKey?: number, onRefresh?: () => void }) {
-  const [tree, setTree] = useState<any[]>([]);
-  // Absolute base dir reported by `/api/fs/dir` for the current listing — the
-  // workspace root, or the selected nested repo. Copy Path anchors on it
-  // because the client's `rootPath` may be rejected/unset.
-  const [listingRoot, setListingRoot] = useState('');
+  const [listing, setListing] = useState<Listing>(EMPTY_LISTING);
   const [searchQuery, setSearchQuery] = useSessionState<string>('files.searchQuery', '');
   const [isLoading, setIsLoading] = useState(false);
   const [storedExpandedPaths, setStoredExpandedPaths, expandedPathsReady] = useSessionState<string[]>('files.expandedPaths', []);
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set(storedExpandedPaths));
-  const childrenCacheRef = useRef<Record<string, any[]>>({});
-  const [activeRepo, setActiveRepo] = useSessionState<string>('files.activeRepo', '.');
+  const childrenCacheRef = useRef<Record<string, FsNode[]>>({});
+  const { activeRepo, setActiveRepo } = useRepoScope(rootPath, 'files.activeRepo');
+  const { repos, scanning: reposScanning, rescan: rescanRepos } = useRepoList(rootPath, enabled);
   const { isScrolling, handleScroll } = useScrollbarFade();
   const { fileMap: gitFileMap, folderMap: gitFolderMap, refreshGitStatus } = useGitStatus(rootPath, activeRepo, refreshKey, enabled);
 
+  // The scope every request and every cached child path below belongs to. A
+  // change to it means the previous workspace's or repo's entries are not this
+  // one's, so nothing read under the old value may be rendered.
+  const scope = `${rootPath ?? ''}\u0000${activeRepo}`;
+  const scopeRef = useRef(scope);
+  scopeRef.current = scope;
+  // The scope of the listing on screen, read outside the render closure so the
+  // async loaders can tell a superseded tree from the current one.
+  const listedScopeRef = useRef(EMPTY_LISTING.scope);
+
+  const commitListing = (next: Listing) => {
+    listedScopeRef.current = next.scope;
+    setListing(next);
+  };
+
   useEffect(() => {
     if (!expandedPathsReady) return;
     setExpandedPaths(prev => {
@@ -43,14 +86,23 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
 
   const loadFiles = (opts?: { silent?: boolean }) => {
     if (!enabled) return;
+    const requested = scopeRef.current;
     if (!opts?.silent) setIsLoading(true);
     fetch(listUrl())
       .then(r => r.json())
       .then(data => {
-        if (typeof data.root === 'string') setListingRoot(data.root);
-        if (Array.isArray(data.files)) {
-          setTree(rehydrateTree(data.files, childrenCacheRef.current, expandedPaths));
-        }
+        // A read that was superseded by a workspace switch describes a tree
+        // this panel is no longer showing.
+        if (scopeRef.current !== requested) return;
+        // Children cached under the previous tree are keyed by paths relative
+        // to a root that is not this one: drop them before rehydrating.
+        if (listedScopeRef.current !== requested) childrenCacheRef.current = {};
+        const payload = readDirPayload(data);
+        commitListing({
+          scope: requested,
+          files: rehydrateTree(payload.files, childrenCacheRef.current),
+          root: payload.root,
+        });
       })
       .catch(() => {})
       .finally(() => {
@@ -85,13 +137,17 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     // so a freshly listed row never renders bare next to a status map that
     // still predates its change (the panel poll alone can lag a fresh edit).
     refreshGitStatus();
+    const requested = scopeRef.current;
     return fetch(listUrl(path))
       .then(r => r.json())
       .then(data => {
-        if (Array.isArray(data.files)) {
-          childrenCacheRef.current[path] = data.files;
-          setTree(prev => setChildrenAt(prev, path, data.files));
-        }
+        if (scopeRef.current !== requested) return;
+        const payload = readDirPayload(data);
+        if (payload.files.length === 0 && payload.root === '') return;
+        childrenCacheRef.current[path] = payload.files;
+        setListing(prev => prev.scope === requested
+          ? { ...prev, files: setChildrenAt(prev.files, path, payload.files) }
+          : prev);
       })
       .catch(() => {});
   };
@@ -106,6 +162,10 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
 
   const handleSelectRepo = (repo: string) => {
     if (repo === activeRepo) return;
+    // The expansion set holds paths relative to the repo that was listed, so a
+    // repo switch starts from a collapsed tree. (A workspace switch needs no
+    // equivalent: the listing is re-read under the new root, and the session's
+    // own expansion set is restored with the session.)
     childrenCacheRef.current = {};
     setExpandedPaths(new Set());
     setStoredExpandedPaths([]);
@@ -120,6 +180,9 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     );
   }
 
+  const tree = listing.scope === scope ? listing.files : [];
+  const listingRoot = listing.scope === scope ? listing.root : '';
+
   const getFilteredFiles = () => {
     if (!searchQuery.trim()) return tree;
 
@@ -158,7 +221,14 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     <div className={`flex flex-col h-full bg-paper ${className}`}>
       <div className="p-3 border-b border-ink/10 flex flex-col space-y-2">
         <div className="flex items-center justify-between">
-          <GitRepoDropdown rootPath={rootPath} activeRepo={activeRepo} onSelectRepo={handleSelectRepo} />
+          <GitRepoDropdown
+            rootPath={rootPath}
+            activeRepo={activeRepo}
+            onSelectRepo={handleSelectRepo}
+            repos={repos}
+            scanning={reposScanning}
+            onRefreshRepos={rescanRepos}
+          />
           <button
             onClick={refresh}
             className="p-1.5 text-ink/40 hover:text-ink hover:bg-ink/5 rounded transition-colors"