@hienlh/ppm 0.17.33 → 0.17.36

package/src/services/transcript-images.ts

@@ -0,0 +1,174 @@
+import { readImageDimensions } from "./image-dimensions.ts";
+import { base64ByteLength, imagePlaceholderText } from "../shared/tool-result-content.ts";
+
+/**
+ * Auditing and removal of image payloads inside a Claude Code session transcript.
+ *
+ * A transcript is replayed in full on every resume, so each image it carries is re-sent for
+ * the rest of the session's life. Past a few images the API refuses any that exceed
+ * MANY_IMAGE_DIMENSION_LIMIT on a side and reports that it removed them — so those payloads
+ * cost bandwidth and produce an error while contributing nothing to the model's context.
+ *
+ * Only images inside tool results are touched. An image the user attached to a message may
+ * no longer exist anywhere else, whereas a tool result can be produced again by re-reading
+ * the file it came from.
+ *
+ * The payload lives at `message.content[].content[]`. A record also carries an image-shaped
+ * echo at the top-level `toolUseResult` field, but that one holds no base64 and is not part
+ * of an API request, so it is left as the CLI wrote it.
+ */
+
+/** Per-image dimension cap the API applies once a request carries several images. */
+export const MANY_IMAGE_DIMENSION_LIMIT = 2000;
+
+/** Base64 characters decoded to inspect a header — a JPEG frame can sit behind EXIF. */
+const HEADER_CHARS = 4096;
+
+export type StripMode = "oversized" | "all";
+
+export interface TranscriptImageAudit {
+  /** Images found in tool results. */
+  total: number;
+  /** How many exceed the dimension cap and are therefore already being dropped. */
+  oversized: number;
+  /** Decoded size of all of them. */
+  bytes: number;
+  /** Decoded size of the oversized ones. */
+  oversizedBytes: number;
+  /** Longest side seen, or 0 when no dimensions could be read. */
+  largestSide: number;
+}
+
+export interface StripResult {
+  text: string;
+  removed: number;
+  bytesFreed: number;
+}
+
+interface ImageBlock {
+  source?: { data?: unknown };
+}
+
+type Visitor = (image: ImageBlock, replace: (block: unknown) => void) => void;
+
+function isImageBlock(value: unknown): value is ImageBlock {
+  return !!value && typeof value === "object" && (value as { type?: unknown }).type === "image";
+}
+
+/** Walk a tool result's content, offering each image block and a way to replace it. */
+function visitImages(node: unknown, visit: Visitor): void {
+  if (!node || typeof node !== "object") return;
+  if (Array.isArray(node)) {
+    for (let i = 0; i < node.length; i++) {
+      const child = node[i];
+      if (isImageBlock(child)) {
+        visit(child, (block) => {
+          node[i] = block;
+        });
+      } else {
+        visitImages(child, visit);
+      }
+    }
+    return;
+  }
+  for (const value of Object.values(node)) visitImages(value, visit);
+}
+
+/** Images carried by tool results only — attachments on user messages are left alone. */
+function visitToolResultImages(record: unknown, visit: Visitor): void {
+  const content = (record as { message?: { content?: unknown } } | null)?.message?.content;
+  if (!Array.isArray(content)) return;
+  for (const block of content) {
+    if ((block as { type?: unknown } | null)?.type !== "tool_result") continue;
+    visitImages((block as { content?: unknown }).content, visit);
+  }
+}
+
+function imageData(image: ImageBlock): string {
+  const data = image.source?.data;
+  return typeof data === "string" ? data : "";
+}
+
+/** Longest side in pixels, or 0 when the format or header could not be read. */
+function longestSide(data: string): number {
+  if (!data) return 0;
+  const slice = data.slice(0, HEADER_CHARS);
+  // Base64 decodes in four-character groups; a partial group would corrupt the tail.
+  const whole = slice.slice(0, slice.length - (slice.length % 4));
+  const size = readImageDimensions(Buffer.from(whole, "base64"));
+  return size ? Math.max(size.w, size.h) : 0;
+}
+
+export function auditTranscriptImages(text: string): TranscriptImageAudit {
+  const audit: TranscriptImageAudit = {
+    total: 0,
+    oversized: 0,
+    bytes: 0,
+    oversizedBytes: 0,
+    largestSide: 0,
+  };
+
+  for (const line of text.split("\n")) {
+    if (!line) continue;
+    let record: unknown;
+    try {
+      record = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    visitToolResultImages(record, (image) => {
+      const data = imageData(image);
+      const bytes = base64ByteLength(data);
+      const side = longestSide(data);
+      audit.total++;
+      audit.bytes += bytes;
+      if (side > audit.largestSide) audit.largestSide = side;
+      if (side > MANY_IMAGE_DIMENSION_LIMIT) {
+        audit.oversized++;
+        audit.oversizedBytes += bytes;
+      }
+    });
+  }
+
+  return audit;
+}
+
+/**
+ * Replace image payloads with the standard placeholder text.
+ *
+ * `oversized` leaves an image whose dimensions cannot be read, since removing something
+ * that may well be within the cap would lose context for no benefit.
+ */
+export function stripTranscriptImages(text: string, mode: StripMode): StripResult {
+  let removed = 0;
+  let bytesFreed = 0;
+  let changed = false;
+
+  const lines = text.split("\n").map((line) => {
+    if (!line) return line;
+    let record: unknown;
+    try {
+      record = JSON.parse(line);
+    } catch {
+      // A line that does not parse is left byte-for-byte as it was found.
+      return line;
+    }
+
+    let touched = false;
+    visitToolResultImages(record, (image, replace) => {
+      const data = imageData(image);
+      if (mode === "oversized" && longestSide(data) <= MANY_IMAGE_DIMENSION_LIMIT) return;
+      const bytes = base64ByteLength(data);
+      replace({ type: "text", text: imagePlaceholderText(bytes || undefined) });
+      removed++;
+      bytesFreed += bytes;
+      touched = true;
+    });
+
+    if (!touched) return line;
+    changed = true;
+    return JSON.stringify(record);
+  });
+
+  return { text: changed ? lines.join("\n") : text, removed, bytesFreed };
+}

package/src/shared/image-extensions.ts

@@ -0,0 +1,19 @@
+/**
+ * Image file extensions, shared by the raw-file route and the chat image renderer so the
+ * server never refuses a path the UI is about to render (or the reverse).
+ *
+ * SVG is deliberately absent. The raw-file route serves files inline with their real
+ * Content-Type and accepts a `?token=` query parameter, so an SVG streamed from an arbitrary
+ * path could execute script in the app's own origin. `Read` also returns SVG as text, so
+ * there is nothing to display anyway.
+ */
+const IMAGE_EXTENSIONS = new Set([
+  ".png", ".jpg", ".jpeg", ".gif", ".webp", ".bmp", ".avif", ".ico",
+]);
+
+/** Check whether a path names an image file, by extension. */
+export function isImageExtension(path: string): boolean {
+  const dot = path.lastIndexOf(".");
+  if (dot === -1) return false;
+  return IMAGE_EXTENSIONS.has(path.slice(dot).toLowerCase());
+}

package/src/shared/tool-result-content.ts

@@ -0,0 +1,81 @@
+/**
+ * Serialization of a tool_result `content` value for transport to the chat UI.
+ *
+ * Tools that read images return base64 content blocks. Stringifying those verbatim sends
+ * ~1.37 bytes of text per image byte over the websocket, into the replay buffer, and on into
+ * the DOM, where nothing truncates it. Swap image blocks for a short placeholder instead.
+ */
+
+/** Rewrite image blocks to placeholders, then stringify. Non-image input is untouched. */
+export function stringifyToolResultContent(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return JSON.stringify(content) ?? "";
+
+  let hasImage = false;
+  const rewritten = content.map((block) => {
+    if (!isImageBlock(block)) return block;
+    hasImage = true;
+    return { type: "text", text: imagePlaceholder(block) };
+  });
+
+  // Only rebuild when an image was actually present, so consumers that parse the block
+  // array (e.g. the Agent/Task result renderer) see a byte-identical string otherwise.
+  return JSON.stringify(hasImage ? rewritten : content) ?? "";
+}
+
+function isImageBlock(block: unknown): block is { source?: { data?: unknown } } {
+  return !!block && typeof block === "object" && (block as { type?: unknown }).type === "image";
+}
+
+function imagePlaceholder(block: { source?: { data?: unknown } }): string {
+  const data = block.source?.data;
+  if (typeof data !== "string" || data.length === 0) return imagePlaceholderText();
+  return imagePlaceholderText(base64ByteLength(data));
+}
+
+/**
+ * The exact text that stands in for an image block.
+ *
+ * Anything that removes an image from a transcript must use this, so that
+ * `resultHasImagePlaceholder` still recognises the result as having carried an image and the
+ * chat card keeps hiding the textual output in favour of the rendered file.
+ */
+export function imagePlaceholderText(bytes?: number): string {
+  return bytes == null ? "[image]" : `[image · ${formatBytes(bytes)}]`;
+}
+
+export function base64ByteLength(data: string): number {
+  const padding = data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0;
+  return Math.max(0, Math.floor((data.length * 3) / 4) - padding);
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
+  return `${bytes}B`;
+}
+
+/** A whole text block that is exactly a placeholder this module produced. */
+const PLACEHOLDER_BLOCK = /^\[image(?: · [\d.]+(?:B|KB|MB))?\]$/;
+
+/**
+ * Whether a serialized tool result actually carried an image.
+ *
+ * A file extension cannot answer this: SVG comes back as text, and formats the API cannot
+ * decode come back as text or as an error. Callers that hide textual output in favour of a
+ * rendered image must key off the real result rather than the requested path.
+ */
+export function resultHasImagePlaceholder(output: string): boolean {
+  if (!output.startsWith("[")) return false;
+  let blocks: unknown;
+  try {
+    blocks = JSON.parse(output);
+  } catch {
+    return false;
+  }
+  if (!Array.isArray(blocks)) return false;
+  return blocks.some((block) => {
+    const b = block as { type?: unknown; text?: unknown } | null;
+    return b?.type === "text" && typeof b.text === "string" && PLACEHOLDER_BLOCK.test(b.text);
+  });
+}

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,23 +1,19 @@
 import { useState, useEffect, useCallback, useRef, type MouseEvent } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Circle, Bug, ClipboardCheck, Copy, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Circle, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
-import { Button } from "@/components/ui/button";
-import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useTabStore } from "@/stores/tab-store";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "@/components/settings/ai-settings-section";
 import { TagSettingsSection } from "@/components/settings/tag-settings-section";
 import { SessionContextMenu } from "./session-context-menu";
+import { SessionDebugButton } from "./session-debug-dialog";
 import { UsageDetailPanel } from "./usage-badge";
 import { CodexUsagePanel } from "./codex-usage-panel";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
 import { formatRelativeDate } from "@/lib/format-date";
-import { copyToClipboard } from "@/lib/clipboard";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
@@ -64,103 +60,6 @@ function pctColor(pct: number): string {
   return "text-success";
 }
 
-/** Live render weight of the currently open transcript (this button sits in the
- *  active session's toolbar, so the visible chat scroller IS this session). */
-function gatherRenderStats(): string[] {
-  let scroller: HTMLElement | null = null;
-  for (const el of document.querySelectorAll<HTMLElement>(".overflow-y-auto")) {
-    if (el.clientHeight < 100 || !el.querySelector("[data-msg-index]")) continue;
-    if (!scroller || el.scrollHeight > scroller.scrollHeight) scroller = el;
-  }
-  const lines: string[] = [];
-  if (scroller) {
-    lines.push(`Rendered messages: ${scroller.querySelectorAll("[data-msg-index]").length}`);
-    lines.push(`Transcript DOM nodes: ${scroller.querySelectorAll("*").length}`);
-    lines.push(`Transcript height: ${Math.round(scroller.scrollHeight)}px`);
-  }
-  // Chrome-only; page-wide (not just the transcript) but the best in-app proxy.
-  const mem = (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory;
-  if (mem) lines.push(`JS heap (page): ${(mem.usedJSHeapSize / 1048576).toFixed(1)} MB`);
-  return lines;
-}
-
-const fmtMB = (bytes: number) => `${(bytes / 1048576).toFixed(2)} MB`;
-
-function DebugCopyButton({ sessionId, projectName }: { sessionId: string; projectName: string }) {
-  const [open, setOpen] = useState(false);
-  const [info, setInfo] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
-  const isMobile = useIsMobile();
-
-  const openPopup = () => {
-    setOpen(true);
-    setCopied(false);
-    setInfo(null);
-    api.get<{ ppmSessionId: string; sdkSessionId: string; jsonlPath: string | null; projectPath: string; jsonlSizeBytes: number | null; jsonlLines: number | null }>(
-      `${projectUrl(projectName)}/chat/sessions/${sessionId}/debug?project=${encodeURIComponent(projectName)}`,
-    ).then((data) => {
-      const weight = data.jsonlSizeBytes != null
-        ? ` (${fmtMB(data.jsonlSizeBytes)}${data.jsonlLines != null ? `, ${data.jsonlLines} records` : ""})`
-        : "";
-      setInfo([
-        `PPM Session: ${data.ppmSessionId}`,
-        `SDK Session: ${data.sdkSessionId}`,
-        data.jsonlPath ? `JSONL: ${data.jsonlPath}${weight}` : `JSONL: not found`,
-        data.projectPath ? `Project: ${data.projectPath}` : null,
-        ...gatherRenderStats(),
-      ].filter(Boolean).join("\n"));
-    }).catch(() => setInfo("Failed to load debug info"));
-  };
-
-  const copy = () => {
-    if (!info) return;
-    copyToClipboard(info).then((ok) => {
-      if (!ok) return;
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  };
-
-  const body = (
-    <div className="flex flex-col gap-3">
-      <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
-        <Bug className="size-4 text-primary" />
-        Session debug info
-      </h2>
-      <pre className="max-h-[50vh] overflow-y-auto whitespace-pre-wrap break-all rounded-md border border-border bg-surface p-2.5 font-mono text-[11px] leading-relaxed text-text-secondary select-text">
-        {info ?? "Loading..."}
-      </pre>
-      <Button size="sm" onClick={copy} disabled={!info} className="w-full">
-        {copied ? <><ClipboardCheck className="size-3.5" /> Copied!</> : <><Copy className="size-3.5" /> Copy</>}
-      </Button>
-    </div>
-  );
-
-  return (
-    <>
-      <button
-        onClick={openPopup}
-        className="p-1 rounded text-text-subtle hover:text-text-secondary hover:bg-surface-elevated transition-colors"
-        title="Session debug info"
-      >
-        <Bug className="size-3" />
-      </button>
-      {isMobile ? (
-        <BottomSheet open={open} onClose={() => setOpen(false)} className="popover-solid">
-          <div className="px-4 pb-4 pt-1">{body}</div>
-        </BottomSheet>
-      ) : (
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogTitle className="sr-only">Session debug info</DialogTitle>
-            {body}
-          </DialogContent>
-        </Dialog>
-      )}
-    </>
-  );
-}
-
 export function ChatHistoryBar({
   projectName, usageInfo, usageLoading, refreshUsage, lastFetchedAt,
   sessionId, providerId, onSelectSession, onBugReport, isConnected, onReload,
@@ -477,7 +376,7 @@ export function ChatHistoryBar({
 
         {/* Debug info — copy session IDs + JSONL path */}
         {sessionId && (
-          <DebugCopyButton sessionId={sessionId} projectName={projectName} />
+          <SessionDebugButton sessionId={sessionId} projectName={projectName} />
         )}
 
         {/* Reload messages + connection status */}

package/src/web/components/chat/image-preview-geometry.ts

@@ -0,0 +1,83 @@
+/**
+ * Geometry and formatting for the Read-tool image result panel.
+ *
+ * The tile's aspect ratio follows the image so nothing is cropped, but only within a
+ * clamp: very tall captures would become unreadable slivers, and panoramas would waste
+ * the width they could use.
+ */
+
+export const TILE_MIN_RATIO = 0.62;
+export const TILE_MAX_RATIO = 2.4;
+
+/**
+ * Tile width in px; the narrow value applies under a 470px container.
+ *
+ * The rendered widths come from Tailwind classes in tool-image-preview.tsx, which cannot
+ * read these constants — change both together. Layout is computed at the wide width, and
+ * a native-size image that no longer fits the narrow tile is capped by the box rather than
+ * overflowing it, so the two staying in sync only affects which images read as native.
+ */
+export const TILE_WIDTH = 132;
+export const TILE_WIDTH_NARROW = 64;
+
+export interface NaturalSize {
+  w: number;
+  h: number;
+}
+
+export type ImageFit =
+  /** Box matches the image, so cover crops nothing. */
+  | "cover"
+  /** Taller than the clamp: fit inside the box on the checkerboard. */
+  | "contain"
+  /** Smaller than the box: native size, centered, never upscaled. */
+  | "native";
+
+export interface PreviewLayout {
+  /** `band` drops the two-column split for panoramas. */
+  variant: "split" | "band";
+  /** width / height of the rendered box. */
+  aspect: number;
+  fit: ImageFit;
+}
+
+export function previewLayout(natural: NaturalSize, tileWidth: number): PreviewLayout {
+  const ratio = natural.w / natural.h;
+
+  if (ratio > TILE_MAX_RATIO) {
+    return { variant: "band", aspect: ratio, fit: "contain" };
+  }
+
+  const aspect = Math.max(TILE_MIN_RATIO, ratio);
+  const boxHeight = tileWidth / aspect;
+  if (natural.w < tileWidth && natural.h < boxHeight) {
+    return { variant: "split", aspect, fit: "native" };
+  }
+
+  return { variant: "split", aspect, fit: ratio < TILE_MIN_RATIO ? "contain" : "cover" };
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${bytes} B`;
+}
+
+export function dimensionsLabel(natural: NaturalSize, fit: ImageFit): string {
+  const base = `${natural.w} × ${natural.h} px`;
+  return fit === "native" ? `${base} · shown 1:1` : base;
+}
+
+/**
+ * Natural sizes survive unmount so a card that scrolls out and back does not resolve
+ * its height a second time — a late height change mid-transcript jumps the scroll.
+ */
+const naturalSizes = new Map<string, NaturalSize>();
+
+export function getCachedNatural(path: string): NaturalSize | undefined {
+  return naturalSizes.get(path);
+}
+
+export function cacheNatural(path: string, size: NaturalSize): void {
+  naturalSizes.set(path, size);
+}

package/src/web/components/chat/image-preview-states.tsx

@@ -0,0 +1,51 @@
+import { Fragment, type ReactNode } from "react";
+import { AlertCircle } from "lucide-react";
+
+/** Metadata label styling, shared with the loaded panel so the skeleton lines up. */
+const LABEL = "text-[var(--img-meta-label)] @max-[470px]:hidden";
+
+/** Widths that keep the placeholder bars from looking like a uniform block. */
+const BAR_WIDTHS = ["60%", "45%", "80%"];
+
+/**
+ * Loading state for the image panel.
+ *
+ * Occupies the same box as the loaded panel — same tile ratio, same three metadata rows,
+ * same action row — so the transcript does not shift under the reader when the image lands.
+ * `aspect` should come from the cached natural size when the file has been seen before.
+ */
+export function ImagePreviewSkeleton({ aspect, actions }: { aspect: number; actions: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[132px_1fr] items-start gap-[14px] overflow-hidden rounded-lg border border-border bg-panel p-[14px] @max-[470px]:grid-cols-[64px_1fr] @max-[470px]:gap-[11px] @max-[470px]:p-[11px]">
+      <div className="img-skeleton rounded-lg" style={{ aspectRatio: aspect }} />
+      <div className="flex min-w-0 flex-col gap-[9px]">
+        <div className="img-skeleton h-[13px] w-2/5 rounded @max-[470px]:hidden" />
+        {/* Labels stay as text so only the values arrive later — the row keeps its box. */}
+        <dl className="grid grid-cols-[auto_1fr] gap-x-[14px] gap-y-[4px] font-mono text-[11.5px] @max-[470px]:grid-cols-[1fr]">
+          {["dimensions", "size", "path"].map((label, i) => (
+            <Fragment key={label}>
+              <dt className={LABEL}>{label}</dt>
+              <dd className="flex items-center">
+                <span className="img-skeleton h-[11px] rounded" style={{ width: BAR_WIDTHS[i] }} />
+              </dd>
+            </Fragment>
+          ))}
+        </dl>
+        {actions}
+      </div>
+    </div>
+  );
+}
+
+/** Failure state: a compact chip, since there is nothing to show and no space to justify. */
+export function ImagePreviewFailure({ code, onRetry }: { code?: string; onRetry: () => void }) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-border bg-panel px-2.5 py-2 font-mono text-[12px] text-text-2">
+      <AlertCircle className="size-3 shrink-0" />
+      <span className="truncate">preview unavailable{code ? ` · ${code}` : ""}</span>
+      <button type="button" onClick={onRetry} className="ml-auto shrink-0 text-accent">
+        retry
+      </button>
+    </div>
+  );
+}

package/src/web/components/chat/message-list.tsx

@@ -57,6 +57,7 @@ import { useTabStore } from "@/stores/tab-store";
 import { api } from "@/lib/api-client";
 import { useProjectStore } from "@/stores/project-store";
 import { useImageOverlay } from "@/stores/image-overlay-store";
+import { collectGallery, GALLERY_ITEM_ATTR, GALLERY_ROOT_ATTR } from "@/lib/image-gallery";
 
 interface MessageListProps {
   messages: ChatMessage[];
@@ -359,6 +360,7 @@ export function MessageList({
       )}
       <div
         ref={setScrollRef}
+        {...{ [GALLERY_ROOT_ATTR]: "" }}
         className="flex-1 overflow-y-auto overflow-x-hidden [overflow-anchor:none]"
         style={{ WebkitOverflowScrolling: "touch", overscrollBehavior: "contain" }}
       >
@@ -981,11 +983,16 @@ function AuthImage({ src, alt }: { src: string; alt: string }) {
   }
 
   return (
-    <button type="button" onClick={() => openOverlay(blobUrl, alt)} className="block text-left">
+    <button
+      type="button"
+      onClick={(e) => openOverlay(blobUrl, alt, collectGallery(e.currentTarget))}
+      className="block text-left"
+    >
       <img
         src={blobUrl}
         alt={alt}
         style={box}
+        {...{ [GALLERY_ITEM_ATTR]: "" }}
         onLoad={(e) => {
           const el = e.currentTarget;
           const c = imageBlobCache.get(src);
@@ -1007,11 +1014,11 @@ function AuthImageThumbnail({ filePath, projectName }: { filePath: string; proje
   return (
     <button
       type="button"
-      onClick={() => blobUrl && openOverlay(blobUrl, name)}
+      onClick={(e) => blobUrl && openOverlay(blobUrl, name, collectGallery(e.currentTarget))}
       className="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5 text-[11px] text-text-secondary hover:bg-surface transition-colors cursor-pointer"
     >
       {blobUrl ? (
-        <img src={blobUrl} alt={name} className="size-4 rounded-sm object-cover shrink-0" />
+        <img src={blobUrl} alt={name} {...{ [GALLERY_ITEM_ATTR]: "" }} className="size-4 rounded-sm object-cover shrink-0" />
       ) : error ? (
         <ImageIcon className="size-3 shrink-0" />
       ) : (