ompchamber 0.3.0

package/src/client/hooks/chat/timeline/session-title.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Navbar session-title state for the chamber. Owns the optimistic rename
+ * override so the header updates live — the sidebar dispatches
+ * `omp:session-renamed` after a successful rename, no session refetch needed.
+ */
+
+import { useEffect, useState } from 'preact/hooks';
+import { isPendingSessionId, pendingSessionTitle } from '@/shared/lib/omp/session/default-title';
+
+/** Navbar session title: timestamped default while a "new-…" session is pending;
+ *  a rename event overrides until the session's own metadata arrives. */
+export function useSessionTitle(
+  sessionId: string | null,
+  serverTitle: string | null | undefined,
+  onSessionTitle?: (title: string | null) => void,
+): void {
+  const [renamedTitle, setRenamedTitle] = useState<string | null>(null);
+  // Drop the optimistic override when the user switches sessions.
+  useEffect(() => { setRenamedTitle(null); }, [sessionId]);
+  // Sidebar dispatches `omp:session-renamed` (detail { sessionId, title }) after
+  // a successful PATCH so the header updates without refetching the session.
+  useEffect(() => {
+    const onRenamed = (event: Event) => {
+      const detail = (event as CustomEvent<{ sessionId?: string; title?: string }>).detail;
+      if (!detail?.sessionId || !detail.title || String(detail.sessionId) !== String(sessionId)) return;
+      setRenamedTitle(detail.title);
+    };
+    window.addEventListener('omp:session-renamed', onRenamed);
+    return () => window.removeEventListener('omp:session-renamed', onRenamed);
+  }, [sessionId]);
+  useEffect(() => {
+    const pending = isPendingSessionId(sessionId) ? pendingSessionTitle(sessionId) : null;
+    onSessionTitle?.(pending ?? renamedTitle ?? serverTitle ?? null);
+  }, [sessionId, serverTitle, renamedTitle, onSessionTitle]);
+}

package/src/client/hooks/chat/timeline/subagent-view.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Subagent transcript navigation for the chat timeline: which transcript is
+ * open, how a roster click opens one, and how the `?subagent=<id>` deep link is
+ * restored after a reload.
+ *
+ * The view is URL-addressable so a reload keeps it, but the SubagentInfo body
+ * only lives in state — a deep-linked or hydrated entry is therefore
+ * reconstructed from the history route, where a finished subagent is always
+ * recoverable. Extracted from ChatTimeline so that component stays under the
+ * repo's per-file size ceiling.
+ */
+
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { isRecord } from '@/shared/lib/util/guards';
+import { historyEntryToSubagentInfo } from '@/shared/lib/omp/subagent/history/client';
+import type { SubagentHistoryEntry, SubagentInfo } from '@/shared/types';
+
+export interface SubagentViewState {
+  /** Transcript currently open, or null for the main timeline. */
+  activeSubagent: SubagentInfo | null;
+  /** Back paths (banner button / Escape): clears state and the URL param. */
+  back: () => void;
+}
+
+export function useSubagentView(
+  sessionId: string | null,
+  urlSubagentId: string | null,
+  setSearchParams: (fn: (prev: URLSearchParams) => URLSearchParams, opts?: { replace?: boolean }) => void,
+): SubagentViewState {
+  const [activeSubagent, setActiveSubagent] = useState<SubagentInfo | null>(null);
+
+  // Roster clicks open the transcript; when the row belongs to another
+  // session, the same update navigates there — a click must never be a no-op.
+  useEffect(() => {
+    const handleViewSubagentEvent = (e: Event) => {
+      const detail = (e as CustomEvent<{ sessionId?: string; subagent?: SubagentInfo }>).detail;
+      const subagent = detail?.subagent;
+      const detailSessionId = detail?.sessionId;
+      if (!subagent || !detailSessionId) return;
+      setActiveSubagent(subagent);
+      setSearchParams(prev => {
+        if (prev.get('sessionId') === detailSessionId && prev.get('subagent') === subagent.id) return prev;
+        prev.set('sessionId', detailSessionId);
+        prev.set('subagent', subagent.id);
+        return prev;
+      }, { replace: false });
+    };
+    window.addEventListener('omp:view-subagent', handleViewSubagentEvent);
+    return () => window.removeEventListener('omp:view-subagent', handleViewSubagentEvent);
+  }, [setSearchParams]);
+
+  // The ?subagent param drives the view: absent → main timeline (covers
+  // session switches and back navigation); present → the transcript.
+  useEffect(() => {
+    if (!urlSubagentId) {
+      setActiveSubagent(null);
+      return;
+    }
+    if (activeSubagent?.id === urlSubagentId) return;
+    if (!sessionId) return;
+    let cancelled = false;
+    fetch(`/api/sessions/${encodeURIComponent(sessionId)}/subagents`)
+      .then(res => (res.ok ? res.json() : null))
+      .then((body: { subagents?: unknown[] } | null) => {
+        if (cancelled || !body?.subagents) return;
+        const entry = body.subagents.find(s => isRecord(s) && s.id === urlSubagentId);
+        if (!entry) return;
+        setActiveSubagent(historyEntryToSubagentInfo(entry as SubagentHistoryEntry));
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+    // activeSubagent is intentionally not a dep: the guard above only needs
+    // the current render's value.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId, urlSubagentId]);
+
+  const back = useCallback(() => {
+    setActiveSubagent(null);
+    setSearchParams(prev => {
+      if (!prev.has('subagent')) return prev;
+      prev.delete('subagent');
+      return prev;
+    }, { replace: true });
+  }, [setSearchParams]);
+
+  return { activeSubagent, back };
+}

package/src/client/hooks/chat/timeline/undo-confirmation.ts

@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'preact/hooks';
+
+interface PendingUndo {
+  id: string;
+  content: string;
+}
+
+/** Own the confirmation gate between a message-footer click and undo, holding
+ *  the modal open (and exposing a loading state) until the undo succeeds. */
+export function useUndoConfirmation(onUndo: (id: string, content: string) => Promise<boolean>) {
+  const [pendingUndo, setPendingUndo] = useState<PendingUndo | null>(null);
+  const [undoing, setUndoing] = useState(false);
+
+  const requestUndo = useCallback((id: string, content?: string) => {
+    setPendingUndo({ id, content: content ?? '' });
+  }, []);
+  const closeUndoConfirm = useCallback(() => setPendingUndo(null), []);
+  const confirmUndo = useCallback(async () => {
+    if (!pendingUndo || undoing) return;
+    setUndoing(true);
+    const ok = await onUndo(pendingUndo.id, pendingUndo.content);
+    // On success the timeline already reflects the rewind — close the modal.
+    // On failure keep it open so the user can retry or cancel.
+    if (ok) setPendingUndo(null);
+    setUndoing(false);
+  }, [onUndo, pendingUndo, undoing]);
+
+  return { pendingUndo, undoing, requestUndo, closeUndoConfirm, confirmUndo };
+}

package/src/client/hooks/editor/use-file-editor.ts

@@ -0,0 +1,302 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
+
+export type FileEditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+
+/** The single file a code surface is editing; `id` keys the in-memory cache. */
+export interface FileEditorTarget {
+  id?: number | string;
+  name: string;
+  path?: string;
+  content?: string;
+  root?: string;
+  repo?: string;
+}
+
+export interface UseFileEditorOptions {
+  /** Content substituted when a read fails (desktop). Omit to report the failure (mobile). */
+  fallback?: (name: string) => string;
+  /** Surface read failures through `loadError` instead of silently substituting `fallback`. */
+  reportLoadError?: boolean;
+  /** Flush a pending debounced write on unmount so closing the editor cannot drop an edit. */
+  flushOnUnmount?: boolean;
+  /** Mark a failed write as `'error'`; otherwise the status returns to `'idle'`. */
+  reportSaveError?: boolean;
+  /** Blob MIME type for downloads. */
+  downloadMimeType?: string;
+  /** Fired after a write lands, so workspace panels can refresh. */
+  onFileSaved?: () => void;
+}
+
+export interface UseFileEditorResult {
+  content: string;
+  onChange: (next: string) => void;
+  isLoading: boolean;
+  loadError: string | null;
+  saveStatus: FileEditorSaveStatus;
+  copied: boolean;
+  isDirty: boolean;
+  language: string;
+  saveNow: () => void;
+  copy: () => void;
+  download: () => void;
+  /** Forget cached content for the active file and read it again. */
+  reload: () => void;
+  /** Forget all cached content (e.g. a workspace refresh). */
+  reset: () => void;
+  /** Drop cached content for files no longer open. */
+  retain: (ids: Array<number | string>) => void;
+}
+
+function targetKey(target: FileEditorTarget): string {
+  return String(target.id ?? target.path ?? target.name);
+}
+
+/**
+ * Owns the file-editing contract shared by the desktop editor and the phone's
+ * full-screen editor: read, debounced FormData save, copy, download, dirty
+ * tracking, and language resolution. Content is cached per file key so
+ * switching tabs does not re-read a file whose edits are still in memory.
+ */
+export function useFileEditor(
+  target: FileEditorTarget | null,
+  options: UseFileEditorOptions = {},
+): UseFileEditorResult {
+  const {
+    fallback,
+    reportLoadError = false,
+    flushOnUnmount = false,
+    reportSaveError = false,
+    downloadMimeType = 'text/plain',
+    onFileSaved,
+  } = options;
+
+  const [contents, setContents] = useState<Record<string, string>>({});
+  const [baselines, setBaselines] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [saveStatus, setSaveStatus] = useState<FileEditorSaveStatus>('idle');
+  const [copied, setCopied] = useState(false);
+
+  const key = target ? targetKey(target) : '';
+  const content = target ? (contents[key] ?? target.content ?? '') : '';
+  const isDirty = content !== (baselines[key] ?? content);
+
+  // Keys whose read has been requested or served, so a re-render cannot fire a
+  // duplicate fetch while the first one is still in flight.
+  const loadedRef = useRef<Set<string>>(new Set());
+  const pendingRef = useRef<{ timer: number; file: FileEditorTarget; content: string } | null>(null);
+
+  const remember = useCallback((fileKey: string, text: string) => {
+    setContents((prev) => ({ ...prev, [fileKey]: text }));
+    setBaselines((prev) => ({ ...prev, [fileKey]: text }));
+  }, []);
+
+  const persist = useCallback(
+    async (file: FileEditorTarget, text: string) => {
+      if (!file.path) return;
+      setSaveStatus('saving');
+      const formData = new FormData();
+      formData.append('actionType', 'save');
+      formData.append('path', file.path);
+      formData.append('content', text);
+      if (file.root) formData.append('root', file.root);
+      if (file.repo && file.repo !== '.') formData.append('repo', file.repo);
+      try {
+        const res = await fetch('/api/fs/action', { method: 'POST', body: formData });
+        const data = await res.json().catch(() => null);
+        if (res.ok && data?.success) {
+          setSaveStatus('saved');
+          setBaselines((prev) => ({ ...prev, [targetKey(file)]: text }));
+          onFileSaved?.();
+        } else {
+          setSaveStatus(reportSaveError ? 'error' : 'idle');
+        }
+      } catch {
+        setSaveStatus(reportSaveError ? 'error' : 'idle');
+      }
+    },
+    [onFileSaved, reportSaveError],
+  );
+
+  const persistRef = useRef(persist);
+  persistRef.current = persist;
+
+  // Read the active file once per key. A cancelled guard keeps a late response
+  // from a previous file from overwriting the one now on screen.
+  useEffect(() => {
+    if (!target) return;
+    const fileKey = targetKey(target);
+    if (loadedRef.current.has(fileKey)) return;
+    loadedRef.current.add(fileKey);
+
+    if (target.content !== undefined) {
+      remember(fileKey, target.content);
+      setLoadError(null);
+      return;
+    }
+
+    if (!target.path) {
+      if (reportLoadError) {
+        setLoadError('No file path supplied for this attachment.');
+        return;
+      }
+      remember(fileKey, fallback ? fallback(target.name) : '');
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+    setLoadError(null);
+    const params = new URLSearchParams({ path: target.path });
+    if (target.root) params.set('root', target.root);
+    if (target.repo && target.repo !== '.') params.set('repo', target.repo);
+    fetch(`/api/fs/read?${params.toString()}`)
+      .then(async (res) => {
+        const data = await res.json().catch(() => null);
+        if (reportLoadError) {
+          if (!res.ok || !data || typeof data.content !== 'string') {
+            throw new Error((data as { error?: string } | null)?.error || `HTTP ${res.status}`);
+          }
+          return data.content as string;
+        }
+        return typeof data?.content === 'string' ? (data.content as string) : null;
+      })
+      .then((text) => {
+        if (cancelled) return;
+        remember(fileKey, text ?? (fallback ? fallback(target.name) : ''));
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        if (reportLoadError) {
+          remember(fileKey, '');
+          setLoadError(err instanceof Error ? err.message : 'Failed to read file');
+        } else {
+          remember(fileKey, fallback ? fallback(target.name) : '');
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [key, target, fallback, reportLoadError, remember]);
+
+  useEffect(() => {
+    if (saveStatus !== 'saved') return;
+    const timer = window.setTimeout(() => setSaveStatus('idle'), 1500);
+    return () => window.clearTimeout(timer);
+  }, [saveStatus]);
+
+  const onChange = useCallback(
+    (next: string) => {
+      if (!target) return;
+      const fileKey = targetKey(target);
+      setContents((prev) => ({ ...prev, [fileKey]: next }));
+      if (!target.path) return;
+      if (pendingRef.current) window.clearTimeout(pendingRef.current.timer);
+      const timer = window.setTimeout(() => {
+        pendingRef.current = null;
+        void persistRef.current(target, next);
+      }, 800);
+      pendingRef.current = { timer, file: target, content: next };
+    },
+    [target],
+  );
+
+  const saveNow = useCallback(() => {
+    if (!target) return;
+    const text = contents[targetKey(target)];
+    if (text === undefined) return;
+    if (pendingRef.current) {
+      window.clearTimeout(pendingRef.current.timer);
+      pendingRef.current = null;
+    }
+    void persistRef.current(target, text);
+  }, [target, contents]);
+
+  const copy = useCallback(() => {
+    if (!target || !navigator.clipboard) return;
+    navigator.clipboard
+      .writeText(contents[targetKey(target)] ?? '')
+      .then(() => {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      })
+      .catch(() => {});
+  }, [target, contents]);
+
+  const download = useCallback(() => {
+    if (!target) return;
+    const blob = new Blob([contents[targetKey(target)] ?? ''], { type: downloadMimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = target.name;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [target, contents, downloadMimeType]);
+
+  const reload = useCallback(() => {
+    if (!key) return;
+    loadedRef.current.delete(key);
+    setContents((prev) => {
+      if (prev[key] === undefined) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, [key]);
+
+  const reset = useCallback(() => {
+    loadedRef.current.clear();
+    setContents({});
+    setBaselines({});
+  }, []);
+
+  const retain = useCallback((ids: Array<number | string>) => {
+    const keep = new Set(ids.map(String));
+    for (const loaded of Array.from(loadedRef.current)) {
+      if (!keep.has(loaded)) loadedRef.current.delete(loaded);
+    }
+    setContents((prev) => {
+      const keys = Object.keys(prev);
+      if (keys.every((k) => keep.has(k))) return prev;
+      const next: Record<string, string> = {};
+      for (const k of keys) {
+        if (keep.has(k)) next[k] = prev[k];
+      }
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!flushOnUnmount) return;
+    return () => {
+      const pending = pendingRef.current;
+      if (!pending) return;
+      window.clearTimeout(pending.timer);
+      pendingRef.current = null;
+      void persistRef.current(pending.file, pending.content);
+    };
+  }, [flushOnUnmount]);
+
+  return {
+    content,
+    onChange,
+    isLoading,
+    loadError,
+    saveStatus,
+    copied,
+    isDirty,
+    language: target ? getLanguageFromPath(target.name) : 'javascript',
+    saveNow,
+    copy,
+    download,
+    reload,
+    reset,
+    retain,
+  };
+}

package/src/client/hooks/models/use-model-names.ts

@@ -0,0 +1,17 @@
+import type { ModelsResponse } from '@/shared/lib/models/client';
+import { useModelsCatalog } from '@/client/hooks/models/use-models-catalog';
+
+/** id → display-name map from the catalog's `modelList`; undefined on an empty list. */
+export function selectModelNames(data: ModelsResponse): Record<string, string> | undefined {
+  if (!data.modelList?.length) return undefined;
+  return Object.fromEntries(data.modelList.map((m): [string, string] => [m.id, m.name || m.id]));
+}
+
+/**
+ * Live id → display-name map from the shared /api/models catalog (same source
+ * as the composer), so footers can show "DeepSeek V4 Flash" instead of
+ * "deepseek-v4-flash". Falls back to the raw id for unknown models.
+ */
+export function useModelNames(): Record<string, string> {
+  return useModelsCatalog(selectModelNames) ?? {};
+}

package/src/client/hooks/models/use-models-catalog.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { ModelsResponse } from '@/shared/lib/models/client';
+import { fetchModelsData, subscribeModelsUpdated } from '@/shared/lib/models/client';
+
+/**
+ * Live projection of the shared `/api/models` catalog: fetches once, then
+ * re-projects on every `omp:models-updated` broadcast, so a picker's display
+ * names stay in step with the composer without each consumer re-implementing
+ * the fetch/subscribe/`active` dance.
+ *
+ * `selector` maps the raw catalog to the value a consumer needs (model names,
+ * provider names, ...). Returning `undefined` leaves the previous value in
+ * place — callers use that to ignore a payload that carries no data (e.g. an
+ * empty model list) rather than clearing a good map. The selector is read
+ * through a ref so an inline arrow does not re-arm the subscription.
+ */
+export function useModelsCatalog<T>(selector: (data: ModelsResponse) => T | undefined): T | undefined {
+  const [value, setValue] = useState<T | undefined>(undefined);
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+
+  useEffect(() => {
+    let active = true;
+
+    const sync = async () => {
+      try {
+        const data = await fetchModelsData();
+        if (!active) return;
+        const next = selectorRef.current(data);
+        if (next !== undefined) setValue(next);
+      } catch {
+        // A failed refresh keeps the last good value.
+      }
+    };
+
+    void sync();
+    const unsubscribe = subscribeModelsUpdated(sync);
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, []);
+
+  return value;
+}

package/src/client/hooks/models/use-provider-names.ts

@@ -0,0 +1,18 @@
+import type { ModelsResponse } from '@/shared/lib/models/client';
+import { providerNamesFromConnected } from '@/shared/lib/models/provider-label';
+import { useModelsCatalog } from '@/client/hooks/models/use-models-catalog';
+
+/** slug → display-name map from `connectedProviders` ({} when none connected). */
+export function selectProviderNames(data: ModelsResponse): Record<string, string> {
+  return providerNamesFromConnected(data.connectedProviders);
+}
+
+/**
+ * Live provider-slug → display-name map from the shared /api/models catalog
+ * (`connectedProviders`), so UI can show "Kenari" instead of the raw `kenari`
+ * slug. Pairs with `providerLabel()` for lookups. Returns an empty map while
+ * loading, in MOCK mode, or when the catalog has no `connectedProviders`.
+ */
+export function useProviderNames(): Record<string, string> {
+  return useModelsCatalog(selectProviderNames) ?? {};
+}