ompchamber 1.0.0 → 1.2.0

package/src/client/hooks/chat/timeline/user-turns.ts

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Full-history user-turn index for the timeline jump rail.
+ *
+ * The timeline mounts a window of a long session (newest 120 messages plus
+ * whatever "Load earlier messages" paged in), so a rail built from the mounted
+ * rows lists only that fraction — the bug this hook exists to fix. The index
+ * comes from `/api/chat/:id/turns`, which walks the whole session with the same
+ * id/merge pipeline as the timeline, so a rail tick always resolves to a row
+ * the timeline can actually reach by paging.
+ *
+ * Live rows the committed history does not carry yet (an optimistic send in
+ * flight) are appended with `index: -1` — they are on screen already, and
+ * dropping them would make the rail lag one turn behind the composer.
+ */
+
+import { useEffect, useMemo, useState } from 'preact/hooks';
+import { TURN_PREVIEW_CHARS } from '@/shared/lib/chat/timeline/turns';
+import type { ChatMessageData, UserTurnRef } from '@/shared/types';
+
+/** Appended live rows are already mounted; the jump reads this as "no paging
+ *  needed" rather than as a position in the committed list. */
+const LIVE_TURN_INDEX = -1;
+
+export interface UserTurnsState {
+  /** Every user turn of the session, oldest first. */
+  turns: UserTurnRef[];
+  /** A jump is walking history to reach the clicked turn. */
+  jumping: boolean;
+  /** Resolve a turn's row and bring it into view; false when unreachable. */
+  jumpToTurn: (id: string, index: number) => Promise<boolean>;
+}
+
+export interface UseUserTurnsDeps {
+  sessionId: string | null;
+  /** Mounted timeline: its user rows are merged into the index so a just-sent
+   *  turn is on the rail before the committed history carries it — and they
+   *  ARE the index until the fetch lands, so the rail is never blank on a
+   *  session that already shows turns. */
+  messages: ChatMessageData[];
+  /** Pages history until the turn's row is mounted (session-pagination). */
+  jumpToTurn: (id: string, index: number) => Promise<boolean>;
+}
+
+/** How long a jump waits for the row it paged in to commit. A single prepend
+ *  can add hundreds of rows, so this is wall-clock bounded rather than
+ *  frame-counted — 30 frames is not enough to lay out a large window. */
+const ROW_COMMIT_TIMEOUT_MS = 3000;
+
+/** Wait for a row the paging walk just requested to commit, then center it.
+ *  The prepend and the jump's own scroll are separate commits: the walk
+ *  resolves before the DOM has the node, so this polls until it appears
+ *  instead of scrolling to a row that does not exist yet. */
+function scrollToRow(id: string, deadline = Date.now() + ROW_COMMIT_TIMEOUT_MS): void {
+  const el = document.getElementById(id);
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    return;
+  }
+  if (Date.now() >= deadline) return;
+  requestAnimationFrame(() => scrollToRow(id, deadline));
+}
+
+export function useUserTurns(deps: UseUserTurnsDeps): UserTurnsState {
+  const { sessionId, messages, jumpToTurn } = deps;
+  const [indexed, setIndexed] = useState<UserTurnRef[] | null>(null);
+  const [jumping, setJumping] = useState(false);
+
+  // Mounted user rows, as rail entries. `index: -1` says "already on screen" —
+  // true by construction here, and true for the mounted rows the full index
+  // does not carry yet (a live send, a turn committed after the fetch).
+  const mountedTurns = useMemo(() => {
+    const rows: UserTurnRef[] = [];
+    for (const message of messages) {
+      if (message.role !== 'user') continue;
+      rows.push({
+        id: message.id,
+        index: LIVE_TURN_INDEX,
+        preview: (message.content ?? '').slice(0, TURN_PREVIEW_CHARS),
+        date: message.date,
+        timestamp: message.timestamp,
+      });
+    }
+    return rows;
+  }, [messages]);
+
+  // The last mounted user row id is the cheapest "the committed history moved"
+  // signal: a send, a commit reconciliation, or an undo/rewind changes it,
+  // while paging older windows does not — so the index refetches exactly when
+  // its content can have gone stale.
+  const lastUserId = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+      if (messages[i]?.role === 'user') return messages[i].id;
+    }
+    return '';
+  }, [messages]);
+
+  useEffect(() => {
+    if (!sessionId || sessionId.startsWith('new-')) {
+      setIndexed(null);
+      return;
+    }
+    let active = true;
+    fetch(`/api/chat/${encodeURIComponent(sessionId)}/turns`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: { turns?: UserTurnRef[] } | null) => {
+        if (!active || !data || !Array.isArray(data.turns)) return;
+        setIndexed(data.turns);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [sessionId, lastUserId]);
+
+  const turns = useMemo(() => {
+    // Until the index lands the mounted rows ARE the rail: a session that
+    // already shows turns never renders an empty rail.
+    if (!indexed) return mountedTurns;
+    const known = new Set(indexed.map((turn) => turn.id));
+    // Rows the index does not carry yet (a live send, a turn committed after
+    // the fetch) are already mounted, so they belong on the rail too.
+    const extra = mountedTurns.filter((turn) => !known.has(turn.id));
+    return extra.length > 0 ? [...indexed, ...extra] : indexed;
+  }, [indexed, mountedTurns]);
+
+  const jump = async (id: string, index: number): Promise<boolean> => {
+    // A row with no committed position is mounted by definition, and so is one
+    // inside the loaded window — both only need the scroll below.
+    if (index < 0) {
+      scrollToRow(id);
+      return true;
+    }
+    setJumping(true);
+    try {
+      const reached = await jumpToTurn(id, index);
+      if (reached) scrollToRow(id);
+      return reached;
+    } finally {
+      setJumping(false);
+    }
+  };
+
+  return { turns, jumping, jumpToTurn: jump };
+}

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Browser file actions shared by the editor surfaces. `saveBlob` is the one
+ * place that builds and clicks the download anchor, so the text path (a Blob
+ * over the buffer) and the image path (a Blob over the fetched bytes) cannot
+ * drift apart — the image case has no text buffer at all, which is why it
+ * needs the URL variant.
+ */
+
+/** Hand `blob` to the browser as a download named `name`. */
+export function saveBlob(blob: Blob, name: string): void {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = name;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Download a URL's bytes under `name`. Used for images, whose content never
+ * reaches the editor buffer — the file is fetched at download time so a large
+ * picture is never held in memory just because its tab is open.
+ */
+export async function downloadUrl(url: string, name: string): Promise<void> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  saveBlob(await res.blob(), name);
+}
+
+/**
+ * Put an image on the clipboard as a picture, not as a filename. The async
+ * clipboard API is only reachable over HTTPS/localhost and requires the image
+ * MIME to be in the browser's clipboard allow-list here — both fail by
+ * rejecting, which is the caller's signal that nothing was copied.
+ */
+export async function copyImageToClipboard(url: string): Promise<void> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const blob = await res.blob();
+  if (typeof ClipboardItem === 'undefined' || !navigator.clipboard?.write) {
+    throw new Error('Image clipboard unavailable');
+  }
+  await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+}

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

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
+import { getImageMimeType } from '@/shared/lib/fs/file-kind';
+import { buildFsRawUrl } from '@/shared/lib/fs/paths';
+import { useFileTransfer } from '@/client/hooks/editor/use-file-transfer';
 
 export type FileEditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
 
@@ -37,6 +40,10 @@ export interface UseFileEditorResult {
   copied: boolean;
   isDirty: boolean;
   language: string;
+  /** True for raster images: the surface renders `imageUrl`, not `content`. */
+  isImage: boolean;
+  /** Raw-byte URL of the active image (cache-busted per revision), else null. */
+  imageUrl: string | null;
   saveNow: () => void;
   copy: () => void;
   download: () => void;
@@ -78,7 +85,6 @@ export function useFileEditor(
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [saveStatus, setSaveStatus] = useState<FileEditorSaveStatus>('idle');
-  const [copied, setCopied] = useState(false);
   /** Bumped by `reset()` to re-run the read effect for the active file. */
   const [revision, setRevision] = useState(0);
 
@@ -86,6 +92,15 @@ export function useFileEditor(
   const content = target ? (contents[key] ?? target.content ?? '') : '';
   const isDirty = content !== (baselines[key] ?? content);
 
+  // Extension-keyed, matching the server's own classification: an image tab
+  // never reads a text buffer and never writes one back. A target without a
+  // path has no bytes to serve, and one that already carries inline `content`
+  // (an attachment chip) has its text in hand — both stay on the text path.
+  const imageTarget =
+    target?.path && target.content === undefined && getImageMimeType(target.path) ? target.path : null;
+  const isImage = imageTarget !== null;
+  const imageUrl = imageTarget ? `${buildFsRawUrl({ ...target, path: imageTarget })}&v=${revision}` : null;
+
   // 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());
@@ -142,6 +157,15 @@ export function useFileEditor(
     if (loadedRef.current.has(fileKey)) return;
     loadedRef.current.add(fileKey);
 
+    // An image has no text to read: the surface points an <img> at the raw
+    // bytes. Fetching here would only decode them into replacement characters
+    // and paint mojibake, so the key is marked loaded and left bufferless.
+    if (isImage) {
+      setLoadError(null);
+      setIsLoading(false);
+      return;
+    }
+
     if (target.content !== undefined) {
       remember(fileKey, target.content);
       setLoadError(null);
@@ -207,7 +231,7 @@ export function useFileEditor(
     return () => {
       cancelled = true;
     };
-  }, [key, target, fallback, reportLoadError, remember, revision]);
+  }, [key, target, fallback, reportLoadError, remember, revision, isImage]);
 
   useEffect(() => {
     if (saveStatus !== 'saved') return;
@@ -217,7 +241,7 @@ export function useFileEditor(
 
   const onChange = useCallback(
     (next: string) => {
-      if (!target) return;
+      if (!target || isImage) return;
       const fileKey = targetKey(target);
       setContents((prev) => ({ ...prev, [fileKey]: next }));
       if (!target.path) return;
@@ -228,11 +252,11 @@ export function useFileEditor(
       }, 800);
       pendingRef.current = { timer, file: target, content: next };
     },
-    [target],
+    [target, isImage],
   );
 
   const saveNow = useCallback(() => {
-    if (!target) return;
+    if (!target || isImage) return;
     const text = contents[targetKey(target)];
     if (text === undefined) return;
     if (pendingRef.current) {
@@ -240,29 +264,14 @@ export function useFileEditor(
       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]);
+  }, [target, contents, isImage]);
 
-  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 { copied, copy, download } = useFileTransfer({
+    target,
+    content,
+    imageUrl,
+    downloadMimeType,
+  });
 
   const reset = useCallback(() => {
     // Invalidate every key, then let the read effect refetch the active one.
@@ -309,6 +318,8 @@ export function useFileEditor(
     copied,
     isDirty,
     language: target ? getLanguageFromPath(target.name) : 'javascript',
+    isImage,
+    imageUrl,
     saveNow,
     copy,
     download,

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Getting bytes *out* of an editor tab: copy to the clipboard and download.
+ *
+ * Split from `useFileEditor` because the two paths genuinely differ by kind —
+ * text is copied from the in-memory buffer and written to a Blob, an image has
+ * no buffer at all and is fetched at the moment of the action — and because
+ * that difference was pushing the editor hook past the file ceiling.
+ */
+
+import { useCallback, useState } from 'preact/hooks';
+import { copyImageToClipboard, downloadUrl, saveBlob } from '@/client/hooks/editor/file-actions';
+
+interface FileTransferTarget {
+  name: string;
+  path?: string;
+}
+
+interface UseFileTransferOptions {
+  /** The active file, or null when the surface has no tab. */
+  target: FileTransferTarget | null;
+  /** Current text buffer for `target`; ignored for images. */
+  content: string;
+  /** Raw-byte URL of the active image, else null. */
+  imageUrl: string | null;
+  /** MIME type used for the text Blob. */
+  downloadMimeType: string;
+}
+
+export interface UseFileTransferResult {
+  /** True for the 1.5s after a successful copy, so the button can confirm it. */
+  copied: boolean;
+  copy: () => void;
+  download: () => void;
+}
+
+export function useFileTransfer({
+  target,
+  content,
+  imageUrl,
+  downloadMimeType,
+}: UseFileTransferOptions): UseFileTransferResult {
+  const [copied, setCopied] = useState(false);
+
+  /** Confirmation flash shared by both copy paths. */
+  const flashCopied = useCallback(() => {
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  }, []);
+
+  const copy = useCallback(() => {
+    if (!target) return;
+    // An image goes to the clipboard as a picture; a text file as its text.
+    if (imageUrl) {
+      void copyImageToClipboard(imageUrl).then(flashCopied).catch(() => {});
+      return;
+    }
+    if (!navigator.clipboard) return;
+    navigator.clipboard.writeText(content).then(flashCopied).catch(() => {});
+  }, [target, content, imageUrl, flashCopied]);
+
+  const download = useCallback(() => {
+    if (!target) return;
+    // An image's bytes are fetched at download time, so a large picture costs
+    // nothing while its tab merely sits open.
+    if (imageUrl) {
+      void downloadUrl(imageUrl, target.name).catch(() => {});
+      return;
+    }
+    saveBlob(new Blob([content], { type: downloadMimeType }), target.name);
+  }, [target, content, downloadMimeType, imageUrl]);
+
+  return { copied, copy, download };
+}

package/src/client/hooks/workspace/available-width.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'preact/hooks';
+import type { RefObject } from 'preact';
+
+/**
+ * Measure an element's content width and keep it current.
+ *
+ * Panel widths are stored as a share of the group's available area, so the
+ * group has to report that area before any fraction can become pixels. Returns
+ * `null` until the first measurement — callers must treat that as "unknown",
+ * not as zero, or a panel would collapse on its first render.
+ *
+ * `ResizeObserver` is not optional here: the width changes on a window resize,
+ * on a devtools dock, and on a sibling panel being toggled, and none of those
+ * are `window` events.
+ */
+export function useAvailableWidth(ref: RefObject<HTMLElement | null>): number | null {
+  const [available, setAvailable] = useState<number | null>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === 'undefined') return;
+
+    const observer = new ResizeObserver(() => {
+      setAvailable(element.clientWidth || null);
+    });
+    observer.observe(element);
+    setAvailable(element.clientWidth || null);
+
+    return () => observer.disconnect();
+  }, [ref]);
+
+  return available;
+}

package/src/client/hooks/workspace/panel-widths.ts

@@ -1,59 +1,56 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import type { RefObject } from 'preact/compat';
-import { mergePanelWidths, normalizePanelWidths, type PanelWidths } from '@/shared/lib/workspace/panel-widths';
+import { useCallback, useMemo } from 'preact/hooks';
+import {
+  mergePanelWidths,
+  normalizePanelWidths,
+  type PanelWidths,
+} from '@/shared/lib/workspace/panel-widths';
 import type { RightPanelType } from '@/shared/lib/workspace/right-panels';
-import { writeSetting } from '@/shared/lib/settings/client';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
 
-/** A drag commits once, after the pointer is released; this only coalesces. */
-const PERSIST_DEBOUNCE_MS = 500;
+/** Session-state key holding this session's own per-panel widths. */
+const PANEL_WIDTHS_KEY = 'layout.panelWidths';
 
 interface PanelWidthsResult {
   widths: PanelWidths;
-  /** Live widths, for imperative restores that cannot wait on a re-render. */
-  widthsRef: RefObject<PanelWidths>;
-  /** Fold measured panel widths in and persist the merged map. */
+  /** Fold measured panel widths into this session's map. */
   commitWidths: (patch: PanelWidths) => void;
 }
 
 /**
- * Owns the desktop layout's per-panel width map: restored from
- * `app_settings.desktopLayoutSizes`, kept in a ref for resize handlers, and
- * written back (debounced) whenever a panel is resized. One writer for both
- * resizable groups, so neither clobbers the other's widths.
+ * Owns the desktop layout's per-panel width map.
+ *
+ * Widths are **per session**: they live in `session_ui_state` under
+ * `layout.panelWidths`, next to the rest of a session's layout state
+ * (`layout.activeRightPanel`, `layout.showRightPanel`, `layout.openedFiles`), so
+ * switching sessions brings back the layout that session was left in.
+ *
+ * `app_settings.desktopLayoutSizes` is the **seed**: a session that has never
+ * been resized reads it, which is what keeps an existing user's layout across
+ * the upgrade instead of resetting everyone to the defaults. Once a panel is
+ * dragged, the session stores its own map and the seed is no longer consulted
+ * for that session.
+ *
+ * There is deliberately no px→fraction rewrite pass here. Converting a legacy
+ * pixel value is done when a width is *read* (`resolvePanelWidth`), because a
+ * write would have to run before this session's own blob has loaded and would
+ * therefore overwrite it with the seed.
  */
 export function usePanelWidths(
   appSettings: Record<string, any>,
   legacyView: RightPanelType,
 ): PanelWidthsResult {
-  const [widths, setWidths] = useState<PanelWidths>(() =>
-    normalizePanelWidths(appSettings.desktopLayoutSizes, legacyView),
+  const seed = useMemo(
+    () => normalizePanelWidths(appSettings.desktopLayoutSizes, legacyView),
+    [appSettings.desktopLayoutSizes, legacyView],
   );
-  const widthsRef = useRef<PanelWidths>(widths);
-  // Set while a debounced write is pending, which is also the flush condition.
-  const timerRef = useRef<number | undefined>(undefined);
-
-  const saveNow = useCallback(() => {
-    clearTimeout(timerRef.current);
-    timerRef.current = undefined;
-    writeSetting('desktopLayoutSizes', widthsRef.current);
-  }, []);
+  const [widths, setWidths] = useSessionState<PanelWidths>(PANEL_WIDTHS_KEY, seed);
 
   const commitWidths = useCallback(
     (patch: PanelWidths) => {
-      const next = mergePanelWidths(widthsRef.current, patch);
-      widthsRef.current = next;
-      setWidths(next);
-      clearTimeout(timerRef.current);
-      timerRef.current = window.setTimeout(saveNow, PERSIST_DEBOUNCE_MS);
+      setWidths((prev) => mergePanelWidths(prev, patch));
     },
-    [saveNow],
+    [setWidths],
   );
 
-  // The mobile layout unmounts this hook; flush instead of dropping the width
-  // the user just dragged.
-  useEffect(() => () => {
-    if (timerRef.current !== undefined) saveNow();
-  }, [saveNow]);
-
-  return { widths, widthsRef, commitWidths };
+  return { widths, commitWidths };
 }

package/src/client/tailwind.css

@@ -358,6 +358,28 @@
   max-width: none !important;
 }
 
+/* Image viewer surface (`common/image-viewer/`): the stage is the pan surface,
+   the canvas carries the zoom/pan transform so the picture keeps its natural
+   pixel size and never reflows while it is being zoomed. The checkerboard sits
+   behind the canvas so a transparent PNG reads as transparent instead of
+   looking like a white file. */
+.image-stage {
+  touch-action: none;
+  overscroll-behavior: contain;
+  background-color: var(--theme-canvas);
+  background-image:
+    linear-gradient(45deg, color-mix(in srgb, var(--theme-ink) 6%, transparent) 25%, transparent 25%),
+    linear-gradient(-45deg, color-mix(in srgb, var(--theme-ink) 6%, transparent) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--theme-ink) 6%, transparent) 75%),
+    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--theme-ink) 6%, transparent) 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+.image-canvas {
+  transform-origin: center center;
+  will-change: transform;
+}
+
 /* PWA Window Controls Overlay and Native Titlebar Styling */
 .titlebar-drag-region {
   -webkit-app-region: drag;