@agimon-ai/doompi-read 0.0.1-alpha.2 → 0.0.1-alpha.21

package/README.md

@@ -15,7 +15,7 @@ people and preserves syntax highlighting. Image reads retain Pi's native attachm
 ## Requirements
 
 - Node.js 22.19.0 or newer
-- Pi 0.84.2 and Pi TUI 0.84.2
+- Pi 0.84.4 and Pi TUI 0.84.4
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-read",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.21",
   "description": "Snapshot-bound hashline read tool for Pi and DoomPi.",
   "keywords": [
     "ai",
@@ -14,10 +14,20 @@
     "read"
   ],
   "homepage": "https://agimon.ai",
+  "bugs": {
+    "url": "https://github.com/AgiFlow/doompi/issues"
+  },
   "license": "MIT",
   "author": "Vuong Ngo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgiFlow/doompi.git",
+    "directory": "packages/default/doompi-read"
+  },
   "files": [
-    "dist"
+    "dist",
+    "src/web",
+    "src/exports/webClient.ts"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -41,23 +51,29 @@
   },
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
-    "typebox": "1.3.16",
-    "@agimon-ai/doompi-hashline": "0.0.1-alpha.2",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.30",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.30"
+    "typebox": "1.3.19",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.48",
+    "@agimon-ai/doompi-hashline": "0.0.1-alpha.20",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.49",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.12",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.9"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.84.2",
-    "@earendil-works/pi-tui": "0.84.2",
-    "@types/node": "26.2.0",
+    "@earendil-works/pi-coding-agent": "0.84.4",
+    "@earendil-works/pi-tui": "0.84.4",
+    "@tanstack/react-store": "0.11.1",
+    "@tanstack/store": "0.11.1",
+    "@types/node": "26.4.0",
+    "@types/react": "19.2.18",
     "@vitest/coverage-v8": "4.1.11",
+    "react": "19.2.8",
     "tsdown": "0.22.14",
     "typescript": "7.0.2",
     "vitest": "4.1.11"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": "0.84.2",
-    "@earendil-works/pi-tui": "0.84.2"
+    "@earendil-works/pi-coding-agent": "0.84.4",
+    "@earendil-works/pi-tui": "0.84.4"
   },
   "peerDependenciesMeta": {
     "@earendil-works/pi-coding-agent": {
@@ -70,6 +86,11 @@
   "engines": {
     "node": ">=22.19.0"
   },
+  "doompiWeb": {
+    "pluginId": "read",
+    "channels": [],
+    "client": "./src/exports/webClient.ts"
+  },
   "pi": {
     "extensions": [
       "./dist/extensions/pi.mjs"
@@ -78,7 +99,7 @@
   "scripts": {
     "build": "tsdown",
     "test": "vitest --run",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p src/web/tsconfig.json",
     "lint": "oxlint . && oxfmt . --check",
     "fixcode": "oxlint . --fix && oxfmt ."
   }

package/src/exports/webClient.ts

@@ -0,0 +1 @@
+export { webPlugin } from '../web/index.ts';

package/src/web/ReadToolMessage.tsx

@@ -0,0 +1,116 @@
+import {
+  HashlineLines,
+  hashlineBody,
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  resultTextLines,
+  ToolPathLink,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { readCallView } from './readToolView.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
+ * a line-number gutter in the body, collapsed to the TUI's budget until the
+ * item expands. A failure shows the tool's message in red instead.
+ */
+export function ReadToolMessage({
+  args,
+  result,
+  output,
+  running,
+  isError,
+  fileTabFor,
+  openTransientTab,
+}: ToolMessageRenderProps) {
+  const view = readCallView(args);
+  const images = resultImages(result?.content ?? []);
+  // A read is the one call whose file the session usually has not changed, so
+  // this is the link that opens it read-only rather than in its history.
+  const tab = fileTabFor(view.path);
+  const collapsed = result === null || isError ? null : hashlineBody(result, output, 'read', false);
+  return (
+    <MessageItem tone={toolTone({ running, isError })} expandable={collapsed !== null && collapsed.hidden > 0}>
+      {({ expanded }) => {
+        const body =
+          result === null || isError ? null : expanded ? hashlineBody(result, output, 'read', true) : collapsed;
+        return (
+          <>
+            <MessageItemHeader title="read">
+              <span data-testid="tool-call-read" className="flex min-w-0 flex-1 items-center gap-2">
+                <ToolPathLink
+                  path={view.path}
+                  {...(tab === undefined ? {} : { onOpen: () => openTransientTab(tab) })}
+                />
+                {view.details.length > 0 ? (
+                  <span className="shrink-0 text-doom-faint">· {view.details.join(' · ')}</span>
+                ) : null}
+              </span>
+            </MessageItemHeader>
+            {isError ? (
+              <MessageItemBody data-testid="tool-result-read" className="flex flex-col">
+                <MessageItemStatus tone="error">failed</MessageItemStatus>
+                {resultTextLines(result, output).map((line, index) => (
+                  <span key={`${String(index)}-${line}`} className="whitespace-pre-wrap break-words text-doom-red">
+                    {line}
+                  </span>
+                ))}
+              </MessageItemBody>
+            ) : body === null ? (
+              running ? (
+                <MessageItemBody data-testid="tool-result-read">
+                  <MessageItemStatus tone="running">running</MessageItemStatus>
+                </MessageItemBody>
+              ) : null
+            ) : body.shown.length === 0 && body.notice === undefined && images.length === 0 ? null : (
+              <MessageItemBody data-testid="tool-result-read" className="flex flex-col gap-1">
+                {/* A read body is one file with no heading of its own, so the
+                    call's path is what names the grammar for it. */}
+                <HashlineLines lines={body.shown} gutter={body.gutter} path={view.path} />
+                {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>
+            )}
+          </>
+        );
+      }}
+    </MessageItem>
+  );
+}

package/src/web/index.ts

@@ -0,0 +1,11 @@
+import { defineWebPlugin } from '@agimon-ai/doompi-web-contracts';
+import { ReadToolMessage } from './ReadToolMessage.tsx';
+
+/**
+ * This package's cockpit presence: the read tool's timeline card, the web
+ * half of the TUI's renderCall and renderResult for hashline reads.
+ */
+export const webPlugin = defineWebPlugin({
+  id: 'read',
+  toolRenderers: [{ tools: ['read'], message: ReadToolMessage }],
+});

package/src/web/readToolView.ts

@@ -0,0 +1,24 @@
+import { compactDetails } from '@agimon-ai/doompi-web-components';
+
+export interface ReadCallView {
+  readonly path: string;
+  /** `from N` and `N lines`, as the TUI's call heading lists them. */
+  readonly details: readonly string[];
+}
+
+function optionalNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+/** What the read call heading shows: the path, then the offset and limit when given. */
+export function readCallView(args: Readonly<Record<string, unknown>>): ReadCallView {
+  const offset = optionalNumber(args.offset);
+  const limit = optionalNumber(args.limit);
+  return {
+    path: typeof args.path === 'string' ? args.path : '',
+    details: compactDetails([
+      offset === undefined ? undefined : `from ${offset}`,
+      limit === undefined ? undefined : `${limit} lines`,
+    ]),
+  };
+}

package/src/web/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"]
+  },
+  "include": [".", "../types", "../exports/webClient.ts"]
+}