@hienlh/ppm 0.17.32 → 0.17.34

package/src/services/slash-discovery/sdk-commands.ts

@@ -0,0 +1,126 @@
+import { invalidateCache } from "./cache.ts";
+import type { SlashItem } from "./types.ts";
+
+/**
+ * Claude's own built-ins (/context, /init, /usage, …) live inside the CLI binary,
+ * so the filesystem scan in skill-loader.ts can never see them. The only way to
+ * enumerate them is to ask a live SDK session, which costs a CLI spawn — hence a
+ * much longer TTL than the filesystem cache.
+ */
+const TTL_MS = 30 * 60 * 1000;
+const FETCH_TIMEOUT_MS = 20_000;
+
+interface CacheEntry {
+  items: SlashItem[];
+  at: number;
+}
+
+const cache = new Map<string, CacheEntry>();
+const inflight = new Map<string, Promise<SlashItem[]>>();
+
+function isFresh(entry: CacheEntry | undefined): entry is CacheEntry {
+  return !!entry && Date.now() - entry.at < TTL_MS;
+}
+
+/**
+ * Keep only the SDK commands nothing else already provides. The SDK reports every
+ * command it knows — including the skills the filesystem scan just found — so
+ * dropping known names leaves exactly the ones that live inside the CLI binary.
+ */
+export function selectSdkOnlyCommands(sdkItems: SlashItem[], knownNames: Iterable<string>): SlashItem[] {
+  const known = new Set(knownNames);
+  return sdkItems.filter((item) => !known.has(item.name));
+}
+
+/** Cached SDK commands, or [] when none were fetched yet. Never spawns. */
+export function getSdkCommands(projectPath: string): SlashItem[] {
+  const entry = cache.get(projectPath);
+  return isFresh(entry) ? entry.items : [];
+}
+
+/** Drop cached SDK commands so the next ensure() re-spawns. */
+export function invalidateSdkCommands(projectPath?: string): void {
+  if (projectPath) cache.delete(projectPath);
+  else cache.clear();
+}
+
+async function fetchFromSdk(projectPath: string): Promise<SlashItem[]> {
+  // Loaded lazily: the CLI (`ppm skills`) uses this module's sync path only and
+  // must not pull in the provider's config/database dependencies.
+  const [{ query }, provider] = await Promise.all([
+    import("@anthropic-ai/claude-agent-sdk"),
+    import("../../providers/claude-agent-sdk.ts"),
+  ]);
+
+  const cliPath = provider.resolveCliExecutablePath();
+
+  // supportedCommands() resolves during the init handshake, but the CLI keeps
+  // running until its input stream ends — so hold the stream open until we're done.
+  let closeInput!: () => void;
+  const inputClosed = new Promise<void>((r) => { closeInput = r; });
+  async function* idleInput(): AsyncGenerator<never, void, undefined> {
+    await inputClosed;
+  }
+
+  const q = query({
+    prompt: idleInput(),
+    options: {
+      cwd: projectPath,
+      ...(provider.needsNodeInterpreter(process.platform, cliPath) && { executable: "node" as const }),
+      ...(cliPath && { pathToClaudeCodeExecutable: cliPath }),
+      settingSources: ["user", "project"],
+      maxTurns: 1,
+    },
+  });
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  try {
+    const commands = await Promise.race([
+      q.supportedCommands(),
+      new Promise<never>((_, reject) => {
+        timer = setTimeout(() => reject(new Error("supportedCommands timed out")), FETCH_TIMEOUT_MS);
+      }),
+    ]);
+    return commands.map((cmd) => ({
+      type: "builtin" as const,
+      name: cmd.name,
+      description: cmd.description ?? "",
+      argumentHint: cmd.argumentHint || undefined,
+      scope: "bundled" as const,
+      category: "session",
+      handler: "sdk" as const,
+    }));
+  } finally {
+    if (timer) clearTimeout(timer);
+    closeInput();
+    try { await q.interrupt?.(); } catch { /* already exiting */ }
+  }
+}
+
+/**
+ * Fetch SDK commands, reusing the cache. Concurrent callers share one spawn.
+ * Failures are cached too — an unauthenticated CLI would otherwise re-spawn on
+ * every picker open; the picker's refresh button clears it.
+ */
+export function ensureSdkCommands(projectPath: string): Promise<SlashItem[]> {
+  const entry = cache.get(projectPath);
+  if (isFresh(entry)) return Promise.resolve(entry.items);
+
+  const existing = inflight.get(projectPath);
+  if (existing) return existing;
+
+  const pending = fetchFromSdk(projectPath)
+    .catch((e: unknown) => {
+      console.warn(`[slash] SDK command discovery failed: ${(e as Error).message}`);
+      return [] as SlashItem[];
+    })
+    .then((items) => {
+      cache.set(projectPath, { items, at: Date.now() });
+      invalidateCache(projectPath); // merged item list is now stale
+      return items;
+    })
+    .finally(() => { inflight.delete(projectPath); });
+
+  inflight.set(projectPath, pending);
+  return pending;
+}

package/src/services/slash-discovery/types.ts

@@ -16,6 +16,9 @@ export type SlashItemType = "skill" | "command" | "builtin" | "agent";
 export type SlashItemScope = "project" | "user" | "bundled";
 export type ItemOrigin = "skills" | "commands" | "agents";
 
+/** Who runs a built-in: PPM server, the web client, or the Claude SDK */
+export type SlashHandler = "ppm" | "sdk" | "client";
+
 export interface SlashItem {
   type: SlashItemType;
   /** Slash name, e.g. "review", "devops/deploy", "ck:research" */
@@ -30,6 +33,8 @@ export interface SlashItem {
   model?: string;
   /** Agent-only: allowed tools (parsed from comma-separated string or YAML list) */
   tools?: string[];
+  /** Built-in only: which layer executes the command */
+  handler?: SlashHandler;
 }
 
 export interface SkillRoot {

package/src/shared/fuzzy-search.ts

@@ -48,9 +48,22 @@ export function scoreFuzzy(query: string, candidate: string): FuzzyScore | null
   return null;
 }
 
+/**
+ * Promotion a recently used item gets, measured in match tiers. One tier lets a
+ * recent "contains" hit edge out a stranger's "prefix" hit, while a two-tier gap
+ * (prefix vs fuzzy) still wins on relevance.
+ *
+ * Only granted when the query matched the item's NAME. Descriptions are prose and
+ * match almost any short query, so boosting those would float every recent item
+ * to the top of every search.
+ */
+const RECENT_TIER_BOOST = 1;
+
 /**
  * Search items by query with fuzzy matching.
- * Recently used items get a rank boost (sorted earlier within same rank tier).
+ * Recently used items are promoted by one match tier and then ordered
+ * most-recent-first, so a filtered list keeps the recency ordering the
+ * unfiltered picker shows.
  * Returns ranked results (best match first), truncated to limit.
  */
 export function searchFuzzy<T extends FuzzySearchable>(
@@ -63,8 +76,10 @@ export function searchFuzzy<T extends FuzzySearchable>(
   // Cap query length to prevent quadratic blowup in Levenshtein
   query = query.slice(0, 50);
 
-  const recentSet = new Set(recentNames);
-  const scored: Array<{ item: T; rank: number; distance: number; recent: boolean }> = [];
+  // Position in recentNames, not a boolean: the caller's list is already ordered
+  // most-recent-first and that order has to survive into the results.
+  const recentRank = new Map(recentNames.map((name, i) => [name, i]));
+  const scored: Array<{ item: T; rank: number; distance: number; recency: number }> = [];
 
   for (const item of items) {
     const nameScore = scoreFuzzy(query, item.name);
@@ -73,13 +88,30 @@ export function searchFuzzy<T extends FuzzySearchable>(
       .filter((s): s is FuzzyScore => s !== null)
       .sort((a, b) => a.rank - b.rank || a.distance - b.distance)[0];
 
-    if (best) scored.push({ item, rank: best.rank, distance: best.distance, recent: recentSet.has(item.name) });
+    if (best) {
+      const recency = recentRank.get(item.name);
+      // "Name reached the winning tier", not "name outscored the description":
+      // a description can happen to match at a smaller offset and would then
+      // silently disqualify a perfectly good name match from the boost.
+      const boosted = recency !== undefined && nameScore?.rank === best.rank;
+      scored.push({
+        item,
+        rank: best.rank - (boosted ? RECENT_TIER_BOOST : 0),
+        distance: best.distance,
+        // Sentinel, not Infinity: Infinity - Infinity is NaN and would silently
+        // neutralise the comparator for every pair of non-recent items.
+        recency: recency ?? recentNames.length,
+      });
+    }
   }
 
+  // Recency outranks distance so it actually takes effect: for "contains" matches
+  // distance is the match offset, which differs per item and previously decided
+  // every comparison before recency was ever consulted.
   scored.sort((a, b) =>
     a.rank - b.rank
+    || a.recency - b.recency
     || a.distance - b.distance
-    || (a.recent === b.recent ? 0 : a.recent ? -1 : 1)
     || a.item.name.localeCompare(b.item.name),
   );
 

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,70 @@
+/**
+ * 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 "[image]";
+  return `[image · ${formatBytes(base64ByteLength(data))}]`;
+}
+
+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-tab.tsx

@@ -227,11 +227,11 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     return () => clearTimeout(t);
   }, [editForking]);
 
-  const handleNewSession = useCallback(() => {
+  const handleNewSession = useCallback((title?: string, clearedFrom?: string) => {
     useTabStore.getState().openTab({
       type: "chat",
-      title: "AI Chat",
-      metadata: { projectName, providerId },
+      title: title || "AI Chat",
+      metadata: { projectName, providerId, ...(clearedFrom && { clearedFrom }) },
       projectId: projectName || null,
       closable: true,
     });
@@ -379,6 +379,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           const session = await api.post<Session>(`${projectUrl(pName)}/chat/sessions`, {
             providerId,
             title: content.slice(0, 50),
+            // Set by /clear — the session only exists now, so persist the lineage here.
+            clearedFrom: metadata?.clearedFrom as string | undefined,
           });
           setSessionId(session.id);
           setProviderId(session.providerId);
@@ -392,12 +394,30 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
       }
       sendMessage(fullContent, { permissionMode, priority });
     },
-    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode],
+    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata],
   );
 
+  // Read through a ref so handleInputSend keeps a stable identity — it is passed to
+  // the memoized MessageInput, and slashItems changes once the picker list loads.
+  const slashItemsRef = useRef(slashItems);
+  slashItemsRef.current = slashItems;
+
   /** Stable wrapper for MessageInput onSend — clears forkDraft + draft and delegates to handleSend */
   const handleInputSend = useCallback(
     (content: string, attachments: ChatAttachment[], priority?: MessagePriority) => {
+      // Client-handled built-ins act on the UI, so they must not reach the SDK.
+      const slash = content.trim().match(/^\/(\S+)(?:\s+([\s\S]+))?$/);
+      if (slash) {
+        const item = slashItemsRef.current.find(
+          (i) => i.handler === "client" && (i.name === slash[1] || i.aliases?.includes(slash[1]!)),
+        );
+        if (item?.name === "clear") {
+          clearDraft();
+          handleNewSession(slash[2]?.trim(), sessionId ?? undefined);
+          return;
+        }
+      }
+
       setForkDraft(undefined);
       clearDraft();
       if (editFork && sessionId && projectName) {
@@ -408,7 +428,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
       }
       handleSend(content, attachments, priority);
     },
-    [handleSend, clearDraft, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments],
+    [handleSend, clearDraft, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments, handleNewSession],
   );
 
   // Past user messages for the composer's ArrowUp/Down recall. Read through a ref

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/slash-command-picker.tsx

@@ -13,6 +13,8 @@ export interface SlashItem {
   aliases?: string[];
   /** Agent-only: model the subagent runs on */
   model?: string;
+  /** Built-in only: which layer executes the command */
+  handler?: "ppm" | "sdk" | "client";
 }
 
 interface SlashCommandPickerProps {

package/src/web/components/chat/tool-cards.tsx

@@ -67,6 +67,9 @@ import type { ChatEvent } from "../../../types/chat";
 import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import { basename } from "@/lib/utils";
+import { isImageExtension } from "../../../shared/image-extensions";
+import { resultHasImagePlaceholder } from "../../../shared/tool-result-content";
+import { ToolImagePreview } from "./tool-image-preview";
 
 /** Extract tool name and input from a ChatEvent */
 function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<string, unknown> } {
@@ -84,6 +87,18 @@ function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<str
   return { toolName, input };
 }
 
+/**
+ * Path of the image a Read call targeted, or null when it is not a displayable image read.
+ * Only absolute paths qualify, matching what useBlobUrl can resolve to the external
+ * raw-file endpoint — and what the Read tool always supplies.
+ */
+function imageReadPath(tool: ChatEvent): string | null {
+  if (tool.type !== "tool_use" || tool.tool !== "Read") return null;
+  const path = (tool.input as Record<string, unknown> | undefined)?.file_path;
+  if (typeof path !== "string" || !/^(\/|[A-Za-z]:[/\\])/.test(path)) return null;
+  return isImageExtension(path) ? path : null;
+}
+
 /** Unified tool card: shows tool-specific summary + expandable details */
 export function ToolCard({
   tool,
@@ -103,7 +118,10 @@ export function ToolCard({
     // a click — unless the edit failed (diff was never applied, so it's noise).
     const t = tool.type === "tool_use" ? tool.tool : (tool as any).tool;
     const failed = result?.type === "tool_result" && !!(result as any).isError;
-    return (t === "Edit" || t === "MultiEdit") && !failed;
+    if ((t === "Edit" || t === "MultiEdit") && !failed) return true;
+    // Same reasoning for reading an image: the thumbnail is the point of the card,
+    // so show it without requiring a click.
+    return !!imageReadPath(tool);
   });
 
   if (tool.type === "error") {
@@ -127,6 +145,10 @@ export function ToolCard({
   // File-mutation tools show their change via the inline diff/content preview — the SDK's
   // "file updated successfully" boilerplate is noise, so suppress it (but keep error output).
   const isFileMutation = ["Edit", "MultiEdit", "Write", "NotebookEdit"].includes(toolName);
+  const imagePath = imageReadPath(tool);
+  // Hide the text output only when the result really carried an image. Extension is not
+  // enough: an SVG or an undecodable format comes back as text that must stay visible.
+  const resultIsImage = hasResult && resultHasImagePlaceholder(String((result as any).output ?? ""));
 
   // Read partial output for streaming Bash/PowerShell tools
   const toolUseId = tool.type === "tool_use" ? (tool as any).toolUseId as string | undefined : undefined;
@@ -194,7 +216,10 @@ export function ToolCard({
           {hasChildren && (
             <SubagentChildren events={children!} projectName={projectName} />
           )}
-          {hasResult && !(isFileMutation && !isError) && (
+          {imagePath && (
+            <ToolImagePreview filePath={imagePath} projectName={projectName ?? ""} />
+          )}
+          {hasResult && !(isFileMutation && !isError) && !(resultIsImage && !isError) && (
             <ToolResultView toolName={toolName} output={(result as any).output} />
           )}
         </div>