@agimon-ai/doompi-read 0.0.1-alpha.14 → 0.0.1-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-read",
-  "version": "0.0.1-alpha.14",
+  "version": "0.0.1-alpha.15",
   "description": "Snapshot-bound hashline read tool for Pi and DoomPi.",
   "keywords": [
     "ai",
@@ -51,11 +51,11 @@
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
     "typebox": "1.3.16",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.42",
-    "@agimon-ai/doompi-hashline": "0.0.1-alpha.14",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.5",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.3",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.42"
+    "@agimon-ai/doompi-hashline": "0.0.1-alpha.15",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.43",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.43",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.4",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.6"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.84.4",

package/web/ReadToolMessage.tsx

@@ -10,6 +10,20 @@ import { readCallView } from './readToolView.ts';
 import { HashlineLines } from './HashlineLines.tsx';
 import { hashlineBody, resultTextLines } from './hashlineView.ts';
 
+const IMAGE_MIME_TYPES = new Set(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
+
+function resultImages(content: readonly unknown[]): Array<{ data: string; mimeType: string }> {
+  return content.flatMap((block) => {
+    if (typeof block !== 'object' || block === null || Array.isArray(block)) return [];
+    const value = block as Record<string, unknown>;
+    return value.type === 'image' &&
+      typeof value.data === 'string' &&
+      typeof value.mimeType === 'string' &&
+      IMAGE_MIME_TYPES.has(value.mimeType)
+      ? [{ data: value.data, mimeType: value.mimeType }]
+      : [];
+  });
+}
 /**
  * The read tool's timeline item, the web half of its renderCall and
  * renderResult: the call summary in the header and the anchored lines with
@@ -18,6 +32,7 @@ import { hashlineBody, resultTextLines } from './hashlineView.ts';
  */
 export function ReadToolMessage({ args, result, output, running, isError }: ToolMessageRenderProps) {
   const view = readCallView(args);
+  const images = resultImages(result?.content ?? []);
   const collapsed = result === null || isError ? null : hashlineBody(result, output, 'read', false);
   return (
     <MessageItem tone={toolTone({ running, isError })} expandable={collapsed !== null && collapsed.hidden > 0}>
@@ -49,9 +64,28 @@ export function ReadToolMessage({ args, result, output, running, isError }: Tool
                   <MessageItemStatus tone="running">running</MessageItemStatus>
                 </MessageItemBody>
               ) : null
-            ) : body.shown.length === 0 && body.notice === undefined ? null : (
+            ) : body.shown.length === 0 && body.notice === undefined && images.length === 0 ? null : (
               <MessageItemBody data-testid="tool-result-read" className="flex flex-col gap-1">
                 <HashlineLines lines={body.shown} gutter={body.gutter} />
+                {images.map((image, index) => {
+                  const url = `data:${image.mimeType};base64,${image.data}`;
+                  return (
+                    <a
+                      key={`${image.mimeType}:${String(index)}`}
+                      href={url}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="self-start"
+                    >
+                      <img
+                        src={url}
+                        alt={`Read result ${String(index + 1)}`}
+                        data-testid="tool-result-read-image"
+                        className="h-auto max-h-96 max-w-full rounded-md border border-doom-border-soft object-contain"
+                      />
+                    </a>
+                  );
+                })}
                 {body.hidden > 0 ? <MessageItemStatus expands>{body.hidden} more lines</MessageItemStatus> : null}
                 {body.notice !== undefined ? <span className="text-doom-faint">{body.notice}</span> : null}
               </MessageItemBody>