ompchamber 0.3.0

package/src/client/hooks/ui/window-event.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+/**
+ * Event-listener hooks. Each subscribes once per event type and always calls
+ * the latest handler through a ref, so an inline closure does not tear the
+ * listener down and re-add it on every render.
+ */
+
+type EventTargetLike = Window | Document;
+
+function useEventListener<E extends Event>(
+  target: EventTargetLike,
+  type: string,
+  handler: (event: E) => void,
+  options?: AddEventListenerOptions | boolean,
+) {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => {
+    const listener = (event: Event) => handlerRef.current(event as E);
+    target.addEventListener(type, listener, options);
+    return () => target.removeEventListener(type, listener, options);
+  }, [target, type, options]);
+}
+
+/** Subscribe a `window` listener; the latest handler is always invoked. */
+export function useWindowEvent<K extends keyof WindowEventMap>(
+  type: K,
+  handler: (event: WindowEventMap[K]) => void,
+  options?: AddEventListenerOptions | boolean,
+) {
+  useEventListener<WindowEventMap[K]>(window, type, handler, options);
+}
+
+/** Subscribe a `document` listener; the latest handler is always invoked. */
+export function useDocumentEvent<K extends keyof DocumentEventMap>(
+  type: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  options?: AddEventListenerOptions | boolean,
+) {
+  useEventListener<DocumentEventMap[K]>(document, type, handler, options);
+}
+
+/** Subscribe to a custom `omp:*` window event. */
+export function useChamberEvent(
+  name: string,
+  handler: (event: Event) => void,
+  options?: AddEventListenerOptions | boolean,
+) {
+  useEventListener<Event>(window, name, handler, options);
+}

package/src/client/hooks/workspace/commit-interactions.ts

@@ -0,0 +1,111 @@
+import { useCallback, useState } from 'preact/hooks';
+import type { GitCommit, GitCommitFile } from '@/shared/types/git';
+
+interface UseCommitInteractionsOptions {
+  onExecuteAction?: (actionType: string, file?: string, extra?: Record<string, string>) => void;
+  rootPath?: string;
+  activeRepo?: string;
+}
+
+export function useCommitInteractions({
+  onExecuteAction,
+  rootPath,
+  activeRepo,
+}: UseCommitInteractionsOptions) {
+  const [fileDiffs, setFileDiffs] = useState<Record<string, string>>({});
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+  const [loadingFiles, setLoadingFiles] = useState<Set<string>>(new Set());
+
+  const handleToggleFile = useCallback(
+    async (commitHash: string, file: GitCommitFile) => {
+      const diffKey = `${commitHash}:${file.file}`;
+      const wasExpanded = expandedFiles.has(diffKey);
+      const willExpand = !wasExpanded;
+
+      setExpandedFiles((prev) => {
+        const next = new Set(prev);
+        if (next.has(diffKey)) {
+          next.delete(diffKey);
+        } else {
+          next.add(diffKey);
+        }
+        return next;
+      });
+
+      if (willExpand && fileDiffs[diffKey] === undefined && !file.diff) {
+        setLoadingFiles((prev) => new Set(prev).add(diffKey));
+        try {
+          const formData = new FormData();
+          formData.set('actionType', 'commit_diff');
+          formData.set('hash', commitHash);
+          formData.set('file', file.file);
+          if (rootPath) formData.set('root', rootPath);
+          if (activeRepo && activeRepo !== '.') formData.set('repo', activeRepo);
+
+          const res = await fetch('/api/fs/git', { method: 'POST', body: formData });
+          const json = await res.json();
+          if (json && typeof json.diff === 'string') {
+            setFileDiffs((prev) => ({ ...prev, [diffKey]: json.diff }));
+          } else if (json && json.error) {
+            setFileDiffs((prev) => ({ ...prev, [diffKey]: `// Error: ${json.error}` }));
+          }
+        } catch (err: any) {
+          console.error('Failed to load file diff:', err);
+          setFileDiffs((prev) => ({ ...prev, [diffKey]: `// Error loading diff: ${err?.message || 'Network error'}` }));
+        } finally {
+          setLoadingFiles((prev) => {
+            const next = new Set(prev);
+            next.delete(diffKey);
+            return next;
+          });
+        }
+      }
+    },
+    [expandedFiles, fileDiffs, rootPath, activeRepo]
+  );
+
+  const handleCommitAction = useCallback(
+    (action: string, commit: GitCommit) => {
+      if (!onExecuteAction) return;
+
+      if (action === 'checkout') {
+        onExecuteAction('checkout', undefined, { branch: commit.hash });
+      } else if (action === 'create_branch_here') {
+        const name = window.prompt(`Create new branch at commit ${commit.shortHash}:`, `branch-${commit.shortHash}`);
+        if (name?.trim()) {
+          onExecuteAction('create_branch', undefined, { branch: name.trim() });
+        }
+      } else if (action === 'cherry_pick') {
+        if (window.confirm(`Cherry-pick commit ${commit.shortHash} onto current branch?`)) {
+          onExecuteAction('cherry_pick', undefined, { hash: commit.hash });
+        }
+      } else if (action === 'revert') {
+        if (window.confirm(`Revert commit ${commit.shortHash}?`)) {
+          onExecuteAction('revert_commit', undefined, { hash: commit.hash });
+        }
+      } else if (action === 'reset') {
+        const mode = window.prompt(`Reset current branch to ${commit.shortHash} (soft, mixed, hard):`, 'soft');
+        if (mode && ['soft', 'mixed', 'hard'].includes(mode.toLowerCase())) {
+          onExecuteAction('reset_commit', undefined, { hash: commit.hash, mode: mode.toLowerCase() });
+        }
+      } else if (action === 'merge') {
+        if (window.confirm(`Merge commit ${commit.shortHash} into current branch?`)) {
+          onExecuteAction('merge_commit', undefined, { hash: commit.hash });
+        }
+      } else if (action === 'rebase') {
+        if (window.confirm(`Rebase current branch onto commit ${commit.shortHash}?`)) {
+          onExecuteAction('rebase_commit', undefined, { hash: commit.hash });
+        }
+      }
+    },
+    [onExecuteAction]
+  );
+
+  return {
+    fileDiffs,
+    expandedFiles,
+    loadingFiles,
+    handleToggleFile,
+    handleCommitAction,
+  };
+}

package/src/client/hooks/workspace/commit-pagination.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import type { GitCommit } from '@/shared/types/git';
+import { SAMPLE_GIT_COMMITS } from '@/client/data/mock/git-commits';
+
+interface UseCommitPaginationOptions {
+  output: { title: string; data: any[]; hasMore?: boolean; total?: number } | null;
+  isGraphMode: boolean;
+  rootPath?: string;
+  activeRepo?: string;
+}
+
+export function useCommitPagination({
+  output,
+  isGraphMode,
+  rootPath,
+  activeRepo,
+}: UseCommitPaginationOptions) {
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState<boolean>(output?.hasMore ?? (output?.data?.length === 50));
+  const [totalCount, setTotalCount] = useState<number | undefined>(output?.total);
+
+  // Normalize incoming commits or fallback to sample commits
+  const initialCommits: GitCommit[] = useMemo(() => {
+    const raw = output?.data || [];
+    if (raw.length === 0) return SAMPLE_GIT_COMMITS;
+
+    if (raw[0] && typeof raw[0] === 'object' && ('hash' in raw[0] || 'shortHash' in raw[0])) {
+      return raw.map((c: any) => ({
+        hash: c.hash || c.shortHash || 'unknown',
+        shortHash: c.shortHash || (c.hash ? c.hash.slice(0, 8) : 'unknown'),
+        author: c.author || 'Unknown',
+        date: c.date || c.time || '',
+        message: c.message || '',
+        parents: Array.isArray(c.parents) ? c.parents : [],
+        refs: Array.isArray(c.refs) ? c.refs : [],
+        files: Array.isArray(c.files) ? c.files : [],
+        lane: typeof c.lane === 'number' ? c.lane : undefined,
+      }));
+    }
+
+    return SAMPLE_GIT_COMMITS;
+  }, [output?.data]);
+
+  const [commits, setCommits] = useState<GitCommit[]>(initialCommits);
+
+  useEffect(() => {
+    setCommits(initialCommits);
+    setHasMore(output?.hasMore ?? (output?.data?.length === 50));
+    if (typeof output?.total === 'number') setTotalCount(output.total);
+  }, [initialCommits, output?.hasMore, output?.data?.length, output?.total]);
+
+  // Load more commits (lazy loading)
+  const handleLoadMore = useCallback(async () => {
+    if (isLoadingMore || !hasMore) return;
+    setIsLoadingMore(true);
+    try {
+      const formData = new FormData();
+      formData.set('actionType', isGraphMode ? 'graph' : 'history');
+      formData.set('limit', '50');
+      formData.set('skip', String(commits.length));
+      if (rootPath) formData.set('root', rootPath);
+      if (activeRepo) formData.set('repo', activeRepo);
+
+      const res = await fetch('/api/fs/git', { method: 'POST', body: formData });
+      const json = await res.json();
+
+      if (json.success && Array.isArray(json.data)) {
+        const nextBatch: GitCommit[] = json.data.map((c: any) => ({
+          hash: c.hash || c.shortHash || 'unknown',
+          shortHash: c.shortHash || (c.hash ? c.hash.slice(0, 8) : 'unknown'),
+          author: c.author || 'Unknown',
+          date: c.date || c.time || '',
+          message: c.message || '',
+          parents: Array.isArray(c.parents) ? c.parents : [],
+          refs: Array.isArray(c.refs) ? c.refs : [],
+          files: Array.isArray(c.files) ? c.files : [],
+          lane: typeof c.lane === 'number' ? c.lane : undefined,
+        }));
+
+        setCommits((prev) => {
+          const existing = new Set(prev.map((c) => c.hash));
+          const fresh = nextBatch.filter((c) => !existing.has(c.hash));
+          return [...prev, ...fresh];
+        });
+
+        setHasMore(Boolean(json.hasMore ?? (nextBatch.length === 50)));
+        if (typeof json.total === 'number') setTotalCount(json.total);
+      } else {
+        setHasMore(false);
+      }
+    } catch (err) {
+      console.error('Failed to load more commits:', err);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [isLoadingMore, hasMore, isGraphMode, commits.length, rootPath, activeRepo]);
+
+  return {
+    commits,
+    setCommits,
+    hasMore,
+    totalCount,
+    isLoadingMore,
+    handleLoadMore,
+  };
+}

package/src/client/hooks/workspace/file-tabs.ts

@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useRef } from 'preact/hooks';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
+import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import type { OpenedFile } from '@/shared/types/fs';
+
+export function useFileTabs(
+  activeProjectPath: string | null,
+  sessionId: string,
+  onOpenTab?: () => void
+) {
+  const [openedFiles, setOpenedFiles] = useSessionState<OpenedFile[]>('layout.openedFiles', []);
+  const [activeFileId, setActiveFileId] = useSessionState<number | string | null>('layout.activeFileId', null);
+
+  const activeRootRef = useRef<string | null | undefined>(undefined);
+  const { ready: layoutReady } = useSessionStateContext();
+  const wipedRootRef = useRef<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    if (activeRootRef.current === activeProjectPath) return;
+    activeRootRef.current = activeProjectPath;
+    if (!layoutReady || wipedRootRef.current === activeProjectPath) return;
+    wipedRootRef.current = activeProjectPath;
+    setOpenedFiles([]);
+    setActiveFileId(null);
+  }, [activeProjectPath, sessionId, layoutReady, setOpenedFiles, setActiveFileId]);
+
+  const handleOpenFile = useCallback((file: any) => {
+    const fileEntry: OpenedFile = {
+      ...file,
+      root: file.root ?? activeProjectPath ?? undefined,
+    };
+    setOpenedFiles(prev => {
+      const existing = prev.find(
+        f => f.id === fileEntry.id || (!f.isDiff && f.path && fileEntry.path && f.path === fileEntry.path)
+      );
+      if (existing) {
+        setActiveFileId(existing.id);
+        return prev;
+      }
+      return [...prev, fileEntry];
+    });
+    setActiveFileId(fileEntry.id);
+    onOpenTab?.();
+  }, [activeProjectPath, onOpenTab, setOpenedFiles, setActiveFileId]);
+
+  const handleOpenDiff = useCallback((diffInfo: {
+    file: string;
+    staged?: boolean;
+    status?: string;
+    repo?: string;
+    root?: string;
+  }) => {
+    const rawPath = diffInfo.file.replace(/^\/+/, '');
+    const fileName = rawPath.split('/').pop() || rawPath;
+    const isStaged = Boolean(diffInfo.staged);
+    const diffId = `diff-${isStaged ? 'staged' : 'working'}-${rawPath}`;
+
+    const diffEntry: OpenedFile = {
+      id: diffId,
+      name: `${fileName} (Diff)`,
+      path: rawPath,
+      isDiff: true,
+      diffStatus: diffInfo.status || 'M',
+      diffStaged: isStaged,
+      repo: diffInfo.repo || '.',
+      root: diffInfo.root ?? activeProjectPath ?? undefined,
+    };
+
+    setOpenedFiles(prev => {
+      const existing = prev.find(
+        f => f.id === diffId || (f.isDiff && f.path === rawPath && f.diffStaged === isStaged)
+      );
+      if (existing) {
+        setActiveFileId(existing.id);
+        return prev;
+      }
+      return [...prev, diffEntry];
+    });
+    setActiveFileId(diffId);
+    onOpenTab?.();
+  }, [activeProjectPath, onOpenTab, setOpenedFiles, setActiveFileId]);
+
+  const handleCloseFile = useCallback((id: number | string) => {
+    setOpenedFiles(prev => {
+      const next = prev.filter(f => f.id !== id);
+      if (activeFileId === id) {
+        setActiveFileId(next.length > 0 ? next[next.length - 1].id : null);
+      }
+      return next;
+    });
+  }, [activeFileId, setOpenedFiles, setActiveFileId]);
+
+  // Global listeners for omp:open-file and omp:open-diff
+  useChamberEvent('omp:open-file', (e) => {
+    const customEvent = e as CustomEvent<{ path: string; name?: string; id?: number; content?: string }>;
+    if (!customEvent.detail || !customEvent.detail.path) return;
+
+    const rawPath = customEvent.detail.path.replace(/^\/+/, '');
+    const name = customEvent.detail.name || rawPath.split('/').pop() || 'file';
+    let hash = 0;
+    for (let i = 0; i < rawPath.length; i++) {
+      hash = (hash << 5) - hash + rawPath.charCodeAt(i);
+      hash |= 0;
+    }
+    const id = customEvent.detail.id || Math.abs(hash) || Date.now();
+
+    handleOpenFile({
+      id,
+      name,
+      path: rawPath,
+      content: customEvent.detail.content,
+    });
+  });
+
+  useChamberEvent('omp:open-diff', (e) => {
+    const customEvent = e as CustomEvent<{
+      file: string;
+      staged?: boolean;
+      status?: string;
+      repo?: string;
+      root?: string;
+    }>;
+    if (!customEvent.detail || !customEvent.detail.file) return;
+    handleOpenDiff(customEvent.detail);
+  });
+
+  return {
+    openedFiles,
+    activeFileId,
+    setActiveFileId,
+    handleOpenFile,
+    handleOpenDiff,
+    handleCloseFile,
+  };
+}

package/src/client/hooks/workspace/git-status.ts

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { GitChange } from '@/shared/types/git';
+import { buildGitStatusMaps } from '@/shared/lib/fs/git-status';
+import { useVisibilityRefresh } from '@/client/hooks/ui/visibility-refresh';
+import { useChamberEvent, useDocumentEvent, useWindowEvent } from '@/client/hooks/ui/window-event';
+import { GIT_STATUS_EVENT_THROTTLE_MS } from '@/shared/lib/workspace/refresh-cadence';
+
+export function useGitStatus(
+  rootPath?: string,
+  activeRepo: string = '.',
+  refreshKey: number = 0,
+  enabled: boolean = true,
+  pollMs: number = 0
+) {
+  const [changes, setChanges] = useState<GitChange[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadGitStatus = useCallback(() => {
+    if (!enabled) return;
+    setIsLoading(true);
+    const params = new URLSearchParams();
+    if (rootPath) params.set('root', rootPath);
+    if (activeRepo && activeRepo !== '.') params.set('repo', activeRepo);
+    params.set('t', String(Date.now()));
+
+    fetch(`/api/fs/git?${params.toString()}`)
+      .then(r => r.json())
+      .then(data => {
+        if (Array.isArray(data.changes)) {
+          setChanges(data.changes);
+        } else {
+          setChanges([]);
+        }
+      })
+      .catch(() => setChanges([]))
+      .finally(() => setIsLoading(false));
+  }, [enabled, rootPath, activeRepo]);
+
+  useEffect(() => {
+    loadGitStatus();
+  }, [loadGitStatus, refreshKey]);
+
+  // Optional background polling so indicators stay fresh after external
+  // actions (terminal commits, agent edits) that never bump `refreshKey`.
+  // Ticks pause while the document is hidden and re-check on visibility —
+  // a background tab cannot show the dot, so the poll would be wasted wakeups.
+  useVisibilityRefresh(loadGitStatus, { enabled, intervalMs: pollMs });
+
+  // Re-check when the tab regains focus (covers most post-commit cases).
+  useWindowEvent('focus', () => {
+    if (enabled) loadGitStatus();
+  });
+  useDocumentEvent('visibilitychange', () => {
+    if (enabled) loadGitStatus();
+  });
+
+  // An agent run rewrites the working tree, and a workspace binding change
+  // re-roots it — both are worth a re-read without waiting out the poll.
+  // Coalesced through one trailing timer: a run emits `omp:session-updated`
+  // more than once and every instance of this hook listens, so firing per event
+  // would spawn several `git status` processes for a single run.
+  const eventTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const scheduleEventRefresh = useCallback(() => {
+    if (!enabled || eventTimerRef.current !== undefined) return;
+    eventTimerRef.current = setTimeout(() => {
+      eventTimerRef.current = undefined;
+      loadGitStatus();
+    }, GIT_STATUS_EVENT_THROTTLE_MS);
+  }, [enabled, loadGitStatus]);
+
+  useEffect(() => () => {
+    if (eventTimerRef.current !== undefined) clearTimeout(eventTimerRef.current);
+  }, []);
+
+  useChamberEvent('omp:session-updated', scheduleEventRefresh);
+  useChamberEvent('omp:workspace-updated', scheduleEventRefresh);
+
+  const { fileMap, folderMap } = useMemo(() => {
+    return buildGitStatusMaps(changes);
+  }, [changes]);
+
+  return {
+    changes,
+    fileMap,
+    folderMap,
+    isLoading,
+    refreshGitStatus: loadGitStatus,
+  };
+}

package/src/client/hooks/workspace/git-tree.ts

@@ -0,0 +1,146 @@
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks';
+import type { GitChange, GitTreeNode } from '@/shared/types';
+import { useSessionState, useSessionStateSnapshot } from '@/client/hooks/workspace/session-state';
+
+export function buildGitTree(changes: GitChange[]): GitTreeNode[] {
+  const root: GitTreeNode = {
+    id: '',
+    name: '',
+    path: '',
+    type: 'folder',
+    children: [],
+    changeCount: 0,
+  };
+
+  for (const change of changes) {
+    const cleanPath = change.file.replace(/^[./]+/, '');
+    const isExplicitDir = cleanPath.endsWith('/');
+    const parts = cleanPath.replace(/\/$/, '').split('/').filter(Boolean);
+
+    let current = root;
+    let accumulatedPath = '';
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      accumulatedPath = accumulatedPath ? `${accumulatedPath}/${part}` : part;
+      const isLast = i === parts.length - 1;
+      const isFile = isLast && !isExplicitDir;
+
+      if (isFile) {
+        current.children.push({
+          id: accumulatedPath,
+          name: part,
+          path: accumulatedPath,
+          type: 'file',
+          change,
+          children: [],
+          changeCount: 1,
+        });
+      } else {
+        let folder = current.children.find(
+          c => c.type === 'folder' && c.name === part
+        );
+        if (!folder) {
+          folder = {
+            id: accumulatedPath,
+            name: part,
+            path: accumulatedPath,
+            type: 'folder',
+            children: [],
+            changeCount: 0,
+            change: isLast && isExplicitDir ? change : undefined,
+          };
+          current.children.push(folder);
+        }
+        current = folder;
+      }
+    }
+  }
+
+  function calculateAndSort(node: GitTreeNode): number {
+    if (node.type === 'file') return 1;
+
+    let total = node.change ? 1 : 0;
+    for (const child of node.children) {
+      total += calculateAndSort(child);
+    }
+    node.changeCount = total;
+
+    node.children.sort((a, b) => {
+      if (a.type === 'folder' && b.type === 'file') return -1;
+      if (a.type === 'file' && b.type === 'folder') return 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    return total;
+  }
+
+  calculateAndSort(root);
+  return root.children;
+}
+
+export function useGitTree(changes: GitChange[]) {
+  const { sessionId, ready, read } = useSessionStateSnapshot();
+  const tree = useMemo(() => buildGitTree(changes), [changes]);
+
+  // Collect all folder IDs
+  const allFolderIds = useMemo(() => {
+    const ids = new Set<string>();
+    function collect(nodes: GitTreeNode[]) {
+      for (const node of nodes) {
+        if (node.type === 'folder') {
+          ids.add(node.id);
+          if (node.children && node.children.length > 0) {
+            collect(node.children);
+          }
+        }
+      }
+    }
+    collect(tree);
+    return ids;
+  }, [tree]);
+
+  // Persisted per-session expansion. A `Set` does not survive JSON, so the
+  // stored value is a string[] and the Set is derived for O(1) lookups.
+  const [expandedFolderList, setExpandedFolders] = useSessionState<string[]>('git.expandedFolders', []);
+  const expandedFolders = useMemo(() => new Set(expandedFolderList), [expandedFolderList]);
+
+  // One auto-expand pass per session: when the session carries no stored
+  // selection (or a stored empty one) every folder opens; a restored non-empty
+  // selection wins. `read` inspects the hydrated blob directly so the previous
+  // session's value never leaks into a fresh one during the restore render.
+  const seededSessionRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!ready || seededSessionRef.current === sessionId) return;
+    if (allFolderIds.size === 0) return;
+    seededSessionRef.current = sessionId;
+    if (read<string[]>('git.expandedFolders', []).length > 0) return;
+    setExpandedFolders(Array.from(allFolderIds));
+  }, [ready, sessionId, allFolderIds, read, setExpandedFolders]);
+
+  const toggleFolder = useCallback((folderId: string) => {
+    setExpandedFolders(prev => {
+      const next = new Set(prev);
+      if (next.has(folderId)) {
+        next.delete(folderId);
+      } else {
+        next.add(folderId);
+      }
+      return Array.from(next);
+    });
+  }, [setExpandedFolders]);
+
+  const isFolderOpen = useCallback(
+    (folderId: string) => expandedFolders.has(folderId),
+    [expandedFolders]
+  );
+
+  return {
+    tree,
+    expandedFolders,
+    toggleFolder,
+    isFolderOpen,
+    expandAll: () => setExpandedFolders(Array.from(allFolderIds)),
+    collapseAll: () => setExpandedFolders([]),
+  };
+}