ompchamber 1.2.1 → 2.0.0

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"

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

@@ -10,8 +10,8 @@ import { GitChangesList } from '@/client/components/workspace/git-panel/ChangesL
 import { ToastStack } from '@/client/components/common/ToastStack';
 import { useToasts } from '@/client/hooks/ui/toasts';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { resolveRepoForPanel, useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { usePanelRefresh, useFileMutationRefresh } from '@/client/hooks/workspace/panel-refresh';
-import { REPO_DISCOVERY_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 
 interface GitPanelProps {
@@ -22,15 +22,46 @@ interface GitPanelProps {
 }
 
 export function GitPanel({ className = '', enabled = true, rootPath, refreshKey = 0 }: GitPanelProps) {
-  const fetcher = useFetcher<{ changes: GitChange[], branch: string, branches: string[], remoteBranches?: string[], repos: string[], reposPending?: boolean, activeRepo: string, syncCount?: { ahead: number, behind: number } }>();
+  const fetcher = useFetcher<{ changes: GitChange[], branch: string, branches: string[], remoteBranches?: string[], syncCount?: { ahead: number, behind: number } }>();
   const actionFetcher = useFetcher<{ success: boolean, type?: string, data?: any, error?: string }>();
 
-  const [storedActiveRepo, setStoredActiveRepo, activeRepoReady] = useSessionState<string>('git.activeRepo', '.');
-  const activeRepo = fetcher.data?.activeRepo || storedActiveRepo || '.';
+  const { activeRepo: pickedRepo, setActiveRepo, ready: activeRepoReady } = useRepoScope(rootPath, 'git.activeRepo');
+  const { repos, scanning: reposScanning, rescan: refreshRepos } = useRepoList(rootPath, enabled);
+  // When the user has picked nothing and the workspace root is not itself a
+  // repo, git falls back to the first repo discovery found — the same choice
+  // the loader makes for a request that names no repo. Resolving it here rather
+  // than reading it back from the response is what keeps the header label, the
+  // picker's checkmark and the requests describing one repo: the response
+  // arrives a render later, and by then it may belong to a workspace the user
+  // has already left.
+  const activeRepo = resolveRepoForPanel(pickedRepo, repos);
+  const activeRepoRef = useRef(activeRepo);
+  activeRepoRef.current = activeRepo;
+
+  // `root\0repo` — the working tree the panel is showing right now.
+  const scopeRef = useRef('');
+  scopeRef.current = `${rootPath ?? ''}\u0000${activeRepo}`;
+  // The scope the in-flight read was asked for, and the scope the payload
+  // currently in `fetcher.data` was asked for. Only one read is ever in flight
+  // (the fetcher aborts its predecessor), so the former is what the latter
+  // becomes when a new payload arrives.
+  const requestedScopeRef = useRef('');
+  const payloadScopeRef = useRef('');
+  const lastPayloadRef = useRef<unknown>(undefined);
+  if (fetcher.data !== lastPayloadRef.current) {
+    lastPayloadRef.current = fetcher.data;
+    payloadScopeRef.current = requestedScopeRef.current;
+  }
+  // A switch leaves the previous repo's branch, changes and branch list in
+  // `fetcher.data` until the new read lands. Rendering those under the new
+  // repo's header would claim the new working tree is on the old branch with
+  // the old changes, so the payload is used only while it describes the scope
+  // on screen.
+  const data = payloadScopeRef.current === scopeRef.current ? fetcher.data : undefined;
 
   const loadRepo = (repo?: string) => {
     if (!enabled) return;
-    const targetRepo = repo !== undefined ? repo : storedActiveRepo;
+    const targetRepo = repo ?? activeRepoRef.current;
     const params = new URLSearchParams();
     if (rootPath) params.set('root', rootPath);
     if (targetRepo && targetRepo !== '.') params.set('repo', targetRepo);
@@ -39,6 +70,11 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     // numbers describe origin rather than the last fetch.
     params.set('sync', '1');
     params.set('t', String(Date.now()));
+    // Tag the response with the scope it was asked for: a switch leaves the
+    // previous repo's branch, changes and branch list in `fetcher.data` until
+    // the new read lands, and rendering those under the new repo's header
+    // claims the new working tree is on the old branch with the old changes.
+    requestedScopeRef.current = scopeRef.current;
     fetcher.load(`/api/fs/git?${params.toString()}`);
   };
   
@@ -66,70 +102,26 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
 
   const { toasts, pushToast, dismissToast } = useToasts();
 
-  // Background nested-repo discovery polling: the loader returns immediately
-  // with the root status and `reposPending`; we poll the lightweight
-  // `?reposOnly=1` endpoint until the discoverer finishes, then refresh.
-  const [extraRepos, setExtraRepos] = useState<string[] | null>(null);
-  const [pollingRepos, setPollingRepos] = useState(false);
-  const [rescanningRepos, setRescanningRepos] = useState(false);
-
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  // `activeRepo` is a dependency, not just the root: the repo list that
+  // resolves the root-level fallback arrives after the first render, and a
+  // workspace switch re-resolves it to '.'.
   useEffect(() => {
     if (!activeRepoReady) return;
-    loadRepo(storedActiveRepo);
-  }, [refreshKey, rootPath, enabled, activeRepoReady]);
+    loadRepo();
+  }, [refreshKey, rootPath, enabled, activeRepoReady, activeRepo]);
 
   // Auto refresh: keep the change list in step with external mutations
   // (terminal commits, agent edits) that never bump `refreshKey`. `loadRepo`
   // re-reads via `fetcher.load`, whose `t` param busts the cache; a load
   // already in flight is ignored by the loader so polls cannot pile up.
-  usePanelRefresh(() => loadRepo(storedActiveRepo), enabled && activeRepoReady);
+  usePanelRefresh(() => loadRepo(), enabled && activeRepoReady);
   // Agent edits/commits land between poll ticks: re-read right after a
   // file-mutating tool finishes so the change list tracks the AI's work.
-  useFileMutationRefresh(() => loadRepo(storedActiveRepo), enabled && activeRepoReady);
-
-  useEffect(() => {
-    if (fetcher.data?.activeRepo && fetcher.data.activeRepo !== storedActiveRepo) {
-      setStoredActiveRepo(fetcher.data.activeRepo);
-    }
-  }, [fetcher.data?.activeRepo, storedActiveRepo, setStoredActiveRepo]);
-
-  useEffect(() => {
-    if (fetcher.data?.reposPending) setPollingRepos(true);
-  }, [fetcher.data]);
-
-  // A forced rescan may finish before the polling interval kicks in; when that
-  // happens the loader returns the fresh repo list synchronously.
-  useEffect(() => {
-    if (
-      rescanningRepos &&
-      fetcher.data &&
-      !fetcher.data.reposPending &&
-      Array.isArray(fetcher.data.repos)
-    ) {
-      setExtraRepos(fetcher.data.repos);
-      setRescanningRepos(false);
-    }
-  }, [fetcher.data, rescanningRepos]);
-
-  useEffect(() => {
-    if (!pollingRepos) 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)) {
-        setExtraRepos(data.repos);
-        setPollingRepos(false);
-        setRescanningRepos(false);
-        loadRepo(storedActiveRepo);
-      }
-    }, REPO_DISCOVERY_POLL_MS);
-    return () => clearInterval(id);
-  }, [pollingRepos, rootPath, storedActiveRepo]);
+  useFileMutationRefresh(() => loadRepo(), enabled && activeRepoReady);
 
   // Focus input when branch prompt opens
   useEffect(() => {
@@ -146,7 +138,7 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
       } else if (actionFetcher.data.type === 'graph') {
         setViewingOutput({ title: 'Git Graph', data: actionFetcher.data.data || [] });
       } else if (actionFetcher.data.success) {
-        loadRepo(activeRepo);
+        loadRepo();
       } else {
         pushToast(actionFetcher.data.error || 'Git operation failed');
       }
@@ -188,11 +180,10 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     }
   };
 
-  const branch = fetcher.data?.branch || 'main';
-  const branches = fetcher.data?.branches || ['main'];
-  const remoteBranches = fetcher.data?.remoteBranches || [];
-  const repos = extraRepos ?? (fetcher.data?.repos || ['.']);
-  const changes = fetcher.data?.changes || [];
+  const branch = data?.branch || 'main';
+  const branches = data?.branches || ['main'];
+  const remoteBranches = data?.remoteBranches || [];
+  const changes = data?.changes || [];
   const isLoading = fetcher.state === 'loading' || actionFetcher.state !== 'idle';
 
   const stagedChanges = changes.filter(c => {
@@ -200,17 +191,6 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     return status && status[0] !== ' ' && status[0] !== '?';
   });
 
-  const refreshRepos = () => {
-    if (!enabled || pollingRepos || rescanningRepos) return;
-    setExtraRepos(repos);
-    setRescanningRepos(true);
-    const params = new URLSearchParams({ rescan: '1', sync: '1' });
-    if (rootPath) params.set('root', rootPath);
-    if (activeRepo !== '.') params.set('repo', activeRepo);
-    params.set('t', String(Date.now()));
-    fetcher.load(`/api/fs/git?${params.toString()}`);
-  };
-
   if (!enabled) {
     return (
       <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
@@ -276,12 +256,14 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
         repos={repos}
         isLoading={isLoading}
         rootPath={rootPath}
-        reposScanning={pollingRepos || rescanningRepos}
+        reposScanning={reposScanning}
         onSelectRepo={(r) => {
-          setStoredActiveRepo(r);
-          loadRepo(r);
+          // The reload is the scope effect's job: it fires on the resolved
+          // `activeRepo` change, so selecting here would fetch the same repo
+          // twice.
+          if (r !== activeRepo) setActiveRepo(r);
         }}
-        onRefresh={() => loadRepo(activeRepo)}
+        onRefresh={() => loadRepo()}
         onRefreshRepos={refreshRepos}
       />
       
@@ -303,7 +285,7 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
         viewMode={viewMode}
         setViewMode={setViewMode}
         isBusy={isLoading}
-        syncCount={fetcher.data?.syncCount}
+        syncCount={data?.syncCount}
         onSync={() => executeAction('sync')}
       />
 

package/src/client/components/workspace/terminal-panel/Header.tsx

@@ -8,6 +8,11 @@ interface TerminalHeaderProps {
   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. */
+  reposScanning: boolean;
+  onRefreshRepos: () => void;
   /** Working directory the shell actually runs in. */
   cwd?: string;
   shell?: string;
@@ -35,6 +40,9 @@ export function TerminalHeader({
   rootPath,
   activeRepo,
   onSelectRepo,
+  repos,
+  reposScanning,
+  onRefreshRepos,
   cwd,
   shell,
   gitBranch,
@@ -60,7 +68,14 @@ export function TerminalHeader({
           <span>{status === 'exited' && exitCode !== null ? `EXIT ${exitCode}` : STATUS_LABEL[status]}</span>
         </span>
 
-        <GitRepoDropdown rootPath={rootPath} activeRepo={activeRepo} onSelectRepo={onSelectRepo} />
+        <GitRepoDropdown
+          rootPath={rootPath}
+          activeRepo={activeRepo}
+          onSelectRepo={onSelectRepo}
+          repos={repos}
+          scanning={reposScanning}
+          onRefreshRepos={onRefreshRepos}
+        />
 
         <button
           type="button"

package/src/client/components/workspace/terminal-panel/RealtimeXtermView.tsx

@@ -40,7 +40,7 @@ interface RealtimeXtermViewProps {
  */
 export const RealtimeXtermView = forwardRef<RealtimeXtermHandle, RealtimeXtermViewProps>(
   ({ onInput, onBinaryInput, onGridChange, onReady }, ref) => {
-    const { isDark } = useTheme();
+    const { theme } = useTheme();
     const containerRef = useRef<HTMLDivElement>(null);
     const mountRef = useRef<XtermMount | null>(null);
     const [isScrolledUp, setIsScrolledUp] = useState(false);
@@ -53,15 +53,15 @@ export const RealtimeXtermView = forwardRef<RealtimeXtermHandle, RealtimeXtermVi
     gridChangeRef.current = onGridChange;
     const readyRef = useRef(onReady);
     readyRef.current = onReady;
-    const themeRef = useRef(isDark);
-    themeRef.current = isDark;
+    const themeRef = useRef(theme);
+    themeRef.current = theme;
 
     useEffect(() => {
       const term = mountRef.current?.term;
       if (!term) return;
-      term.options.theme = getXtermTheme(isDark);
+      term.options.theme = getXtermTheme(theme);
       term.refresh(0, term.rows - 1);
-    }, [isDark]);
+    }, [theme]);
 
     useImperativeHandle(ref, () => ({
       write(bytes: Uint8Array) {

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

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from 'preact/hooks';
 import { useTerminal } from '@/client/hooks/workspace/terminal';
-import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { useTheme } from '@/client/hooks/ui/theme';
 import { TerminalHeader } from '@/client/components/workspace/terminal-panel/Header';
 import { TerminalQuickActions } from '@/client/components/workspace/terminal-panel/QuickActions';
@@ -18,7 +18,8 @@ const encoder = new TextEncoder();
 export function TerminalPanel({ className = '', enabled = true, rootPath, showHeader = true }: TerminalPanelProps) {
   const xtermRef = useRef<RealtimeXtermHandle>(null);
   const { isDark } = useTheme();
-  const [activeRepo, setActiveRepo] = useSessionState<string>('terminal.activeRepo', '.');
+  const { activeRepo, setActiveRepo } = useRepoScope(rootPath, 'terminal.activeRepo');
+  const { repos, scanning: reposScanning, rescan: rescanRepos } = useRepoList(rootPath, enabled);
   const gridRef = useRef<{ cols: number; rows: number } | null>(null);
 
   const handleOutput = useCallback((bytes: Uint8Array) => {
@@ -105,6 +106,9 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
           rootPath={rootPath}
           activeRepo={activeRepo}
           onSelectRepo={setActiveRepo}
+          repos={repos}
+          reposScanning={reposScanning}
+          onRefreshRepos={rescanRepos}
           cwd={cwd}
           shell={shell}
           gitBranch={systemInfo.gitBranch}

package/src/client/components/workspace/terminal-panel/mount.ts

@@ -71,7 +71,7 @@ export interface XtermMount {
  */
 export async function mountXterm(
   container: HTMLElement,
-  isDark: boolean,
+  themeId: string,
   callbacks: XtermMountCallbacks,
   isCancelled: () => boolean,
 ): Promise<XtermMount | null> {
@@ -93,7 +93,7 @@ export async function mountXterm(
     fontSize: 12,
     lineHeight: 1.25,
     fontFamily: XTERM_FONT_FAMILY,
-    theme: getXtermTheme(isDark),
+    theme: getXtermTheme(themeId),
     // No `convertEol`: the PTY already emits CRLF, and converting a lone LF
     // would re-introduce the line-feed doubling a real terminal avoids.
     scrollback: 10000,

package/src/client/data/theme/terminal.ts

@@ -1,58 +1,56 @@
-export const XTERM_LIGHT_THEME = {
-  background: '#f4f1ea',
-  foreground: '#141310',
-  cursor: '#141310',
-  cursorAccent: '#f4f1ea',
-  selectionBackground: '#ded8ce',
-  selectionForeground: '#141310',
-  black: '#141310',
-  red: '#c8321e',
-  green: '#047857',
-  yellow: '#b45309',
-  blue: '#1d4ed8',
-  magenta: '#9333ea',
-  cyan: '#0284c7',
-  white: '#faf8f3',
-  brightBlack: '#78716c',
-  brightRed: '#dc2626',
-  brightGreen: '#059669',
-  brightYellow: '#d97706',
-  brightBlue: '#2563eb',
-  brightMagenta: '#a855f7',
-  brightCyan: '#0ea5e9',
-  brightWhite: '#292524',
-};
+import { mixHex } from '@/shared/lib/theme/color';
+import { resolveTheme } from '@/shared/lib/theme/catalog';
 
-export const XTERM_DARK_THEME = {
-  background: '#21252b',
-  foreground: '#abb2bf',
-  cursor: '#528bff',
-  cursorAccent: '#21252b',
-  selectionBackground: '#3e4451',
-  selectionForeground: '#abb2bf',
-  black: '#282c34',
-  red: '#e06c75',
-  green: '#98c379',
-  yellow: '#e5c07b',
-  blue: '#61afef',
-  magenta: '#c678dd',
-  cyan: '#56b6c2',
-  white: '#abb2bf',
-  brightBlack: '#5c6370',
-  brightRed: '#e06c75',
-  brightGreen: '#98c379',
-  brightYellow: '#e5c07b',
-  brightBlue: '#61afef',
-  brightMagenta: '#c678dd',
-  brightCyan: '#56b6c2',
-  brightWhite: '#ffffff',
-};
+/**
+ * The terminal palette for a theme, derived from the same eight colors the rest
+ * of the app paints with.
+ *
+ * xterm parses its own colors and understands only literal notations (hex,
+ * `rgb()`, `hsl()`, named) — `color-mix()` is not among them in either the DOM
+ * or the WebGL renderer — so every blend is computed here in hex instead of
+ * being left to CSS. The result follows the active theme rather than a fixed
+ * light/dark pair: a Nord terminal is Nord, and switching themes repaints the
+ * scrollback instead of leaving the previous palette on screen.
+ *
+ * ANSI slots map onto the semantic colors the palette does carry (red=error,
+ * green=success, yellow=warning, blue=info, magenta=accent); `cyan` has no
+ * counterpart, so it is a deterministic mix of info and success, and the
+ * grayscale slots are mixes of ink over canvas. "Bright" variants mix 20% toward
+ * the foreground, which is lighter on a dark theme and darker on a light one —
+ * the direction that increases contrast on both.
+ */
+export function getXtermTheme(themeId: string) {
+  const palette = resolveTheme(themeId);
+  const { canvas, ink } = palette;
 
-export function getXtermTheme(isDark: boolean) {
-  return isDark ? XTERM_DARK_THEME : XTERM_LIGHT_THEME;
-}
+  const towardInk = (color: string) => mixHex(color, ink, 0.2);
+  const grayscale = (ratio: number) => mixHex(canvas, ink, ratio);
 
-export const XTERM_THEME = XTERM_DARK_THEME;
+  return {
+    background: canvas,
+    foreground: ink,
+    cursor: palette.meta,
+    cursorAccent: canvas,
+    selectionBackground: grayscale(0.28),
+    selectionForeground: ink,
+    black: grayscale(0.2),
+    red: palette.error,
+    green: palette.success,
+    yellow: palette.warning,
+    blue: palette.info,
+    magenta: palette.meta,
+    cyan: mixHex(palette.info, palette.success, 0.5),
+    white: grayscale(0.75),
+    brightBlack: grayscale(0.5),
+    brightRed: towardInk(palette.error),
+    brightGreen: towardInk(palette.success),
+    brightYellow: towardInk(palette.warning),
+    brightBlue: towardInk(palette.info),
+    brightMagenta: towardInk(palette.meta),
+    brightCyan: towardInk(mixHex(palette.info, palette.success, 0.5)),
+    brightWhite: grayscale(0.92),
+  };
+}
 
 /**
  * Font stack for the terminal canvas.