@agimon-ai/doompi-read 0.0.1-alpha.1 → 0.0.1-alpha.10

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.3 and Pi TUI 0.84.3
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-read",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.10",
   "description": "Snapshot-bound hashline read tool for Pi and DoomPi.",
   "keywords": [
     "ai",
@@ -14,10 +14,19 @@
     "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",
+    "web"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -42,22 +51,28 @@
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
     "typebox": "1.3.16",
-    "@agimon-ai/doompi-hashline": "0.0.1-alpha.1",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.29",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.29"
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.38",
+    "@agimon-ai/doompi-hashline": "0.0.1-alpha.10",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.38",
+    "@agimon-ai/doompi-web-components": "0.0.0",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.1"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.84.2",
-    "@earendil-works/pi-tui": "0.84.2",
+    "@earendil-works/pi-coding-agent": "0.84.3",
+    "@earendil-works/pi-tui": "0.84.3",
+    "@tanstack/react-store": "0.11.1",
+    "@tanstack/store": "0.11.1",
     "@types/node": "26.2.0",
+    "@types/react": "19.2.7",
     "@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.3",
+    "@earendil-works/pi-tui": "0.84.3"
   },
   "peerDependenciesMeta": {
     "@earendil-works/pi-coding-agent": {
@@ -70,6 +85,11 @@
   "engines": {
     "node": ">=22.19.0"
   },
+  "doompiWeb": {
+    "pluginId": "read",
+    "channels": [],
+    "client": "./web/index.ts"
+  },
   "pi": {
     "extensions": [
       "./dist/extensions/pi.mjs"
@@ -78,7 +98,7 @@
   "scripts": {
     "build": "tsdown",
     "test": "vitest --run",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p web/tsconfig.json",
     "lint": "oxlint . && oxfmt . --check",
     "fixcode": "oxlint . --fix && oxfmt ."
   }

package/web/HashlineLines.tsx

@@ -0,0 +1,47 @@
+import type { PresentedLine } from './hashlineView.ts';
+
+/**
+ * The anchored body shared by hashline results: a file heading per group, a
+ * right-aligned line-number gutter, and a `>>` marker on grep matches. The
+ * gutter width is a style, not a class, because it follows the widest number.
+ */
+export function HashlineLines({ lines, gutter }: { lines: readonly PresentedLine[]; gutter: number }) {
+  return (
+    <div className="flex flex-col font-mono">
+      {lines.map((line, index) => {
+        if (line.type === 'file') {
+          return (
+            <span key={index} className="mt-1 truncate text-doom-faint first:mt-0">
+              {line.path}
+            </span>
+          );
+        }
+        if (line.type === 'plain') {
+          return (
+            <span key={index} className="whitespace-pre-wrap break-words text-doom-dim">
+              {line.text}
+            </span>
+          );
+        }
+        const { value } = line;
+        return (
+          <span key={index} className="flex gap-2">
+            {value.marker !== undefined ? (
+              <span className={`w-4 shrink-0 ${value.marker === 'match' ? 'text-doom-blue' : 'text-doom-faint'}`}>
+                {value.marker === 'match' ? '>>' : ''}
+              </span>
+            ) : null}
+            <span className="shrink-0 text-right text-doom-faint" style={{ width: `${gutter}ch` }}>
+              {value.line}
+            </span>
+            <span
+              className={`min-w-0 whitespace-pre-wrap break-words ${value.marker === 'match' ? 'text-doom-hi' : 'text-doom-text'}`}
+            >
+              {value.content}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/web/ReadToolMessage.tsx

@@ -0,0 +1,64 @@
+import {
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { readCallView } from './readToolView.ts';
+import { HashlineLines } from './HashlineLines.tsx';
+import { hashlineBody, resultTextLines } from './hashlineView.ts';
+
+/**
+ * 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 }: ToolMessageRenderProps) {
+  const view = readCallView(args);
+  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">
+                <span className="truncate text-doom-text">{view.path}</span>
+                {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 ? null : (
+              <MessageItemBody data-testid="tool-result-read" className="flex flex-col gap-1">
+                <HashlineLines lines={body.shown} gutter={body.gutter} />
+                {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/web/hashlineView.ts

@@ -0,0 +1,138 @@
+import type { ToolResultView } from '@agimon-ai/doompi-web-contracts';
+
+/**
+ * The hashline wire format, parsed the way the TUI's hashlineRendering does:
+ * `@file path#tag` opens a file, `N#abc|content` is an anchored line, and a
+ * `>> ` or three-space prefix marks grep matches and their context. The
+ * patterns are copied from doompi-hashline because a cockpit plugin may only
+ * import its own pure modules and the web contract.
+ */
+const FILE_HEADER_PATTERN = /^@file (.+)#([A-Za-z0-9_-]{8})$/u;
+const TAGGED_LINE_PATTERN = /^(>> | {3})?(\d+)#[a-z]{3}\|(.*)$/u;
+const MATCH_PREFIX = '>> ';
+const CONTEXT_PREFIX = '   ';
+const IMAGE_PLACEHOLDER = '[Image attached]';
+
+export const READ_COLLAPSED_LINES = 10;
+export const GREP_COLLAPSED_LINES = 15;
+
+export type HashlineResultKind = 'read' | 'grep';
+export type TaggedLineMarker = 'match' | 'context';
+
+export interface TaggedLine {
+  readonly line: number;
+  readonly content: string;
+  readonly marker: TaggedLineMarker | undefined;
+}
+
+export type PresentedLine =
+  | { readonly type: 'file'; readonly path: string }
+  | { readonly type: 'tagged'; readonly value: TaggedLine }
+  | { readonly type: 'plain'; readonly text: string };
+
+export interface HashlineBody {
+  readonly shown: readonly PresentedLine[];
+  /** Lines the collapsed view holds back; zero once expanded. */
+  readonly hidden: number;
+  /** The bracketed pagination or compaction note the tool appends after its lines. */
+  readonly notice: string | undefined;
+  /** Widest line number among the shown anchored lines, in characters. */
+  readonly gutter: number;
+}
+
+interface TextBlock {
+  readonly type: string;
+  readonly text?: string;
+}
+
+function isTextBlock(block: unknown): block is TextBlock {
+  return typeof block === 'object' && block !== null && typeof (block as TextBlock).type === 'string';
+}
+
+/**
+ * The result's text as lines: tabs widened, CRLF folded, trailing blanks
+ * dropped. A result with no text but an image block reads as the TUI's
+ * placeholder. The joined `output` stands in when no result view exists.
+ */
+export function resultTextLines(result: ToolResultView | null, output: string): string[] {
+  const blocks = result?.content.filter(isTextBlock) ?? [];
+  const text =
+    result === null ? output : blocks.flatMap((block) => (block.type === 'text' ? [block.text ?? ''] : [])).join('\n');
+  if (text.length === 0) {
+    return blocks.some((block) => block.type === 'image') ? [IMAGE_PLACEHOLDER] : [];
+  }
+  const lines = text.replaceAll('\t', '  ').replaceAll('\r\n', '\n').split('\n');
+  while (lines.at(-1) === '') lines.pop();
+  return lines;
+}
+
+/** Detaches the tool's trailing `[...]` note so the body numbers file content only. */
+export function takeTrailingNotice(lines: string[]): string | undefined {
+  const last = lines.at(-1);
+  if (last === undefined || !last.startsWith('[') || !last.endsWith(']')) return undefined;
+  lines.pop();
+  while (lines.at(-1) === '') lines.pop();
+  return last;
+}
+
+export function parseTaggedLine(value: string): TaggedLine | undefined {
+  const match = TAGGED_LINE_PATTERN.exec(value);
+  const lineText = match?.[2];
+  const content = match?.[3];
+  if (lineText === undefined || content === undefined) return undefined;
+  const line = Number.parseInt(lineText, 10);
+  if (!Number.isSafeInteger(line) || line < 1) return undefined;
+  const prefix = match?.[1];
+  const marker = prefix === MATCH_PREFIX ? 'match' : prefix === CONTEXT_PREFIX ? 'context' : undefined;
+  return { line, content, marker };
+}
+
+export function parseFileHeader(value: string): string | undefined {
+  return FILE_HEADER_PATTERN.exec(value)?.[1];
+}
+
+/**
+ * Lines as the card presents them. A read shows one file, so its header is
+ * dropped; a grep groups anchored matches under each file's path.
+ */
+export function presentHashlineLines(lines: readonly string[], kind: HashlineResultKind): PresentedLine[] {
+  const presented: PresentedLine[] = [];
+  for (const line of lines) {
+    const path = parseFileHeader(line);
+    if (path !== undefined) {
+      if (kind !== 'read') presented.push({ type: 'file', path });
+      continue;
+    }
+    const tagged = parseTaggedLine(line);
+    if (tagged !== undefined) {
+      presented.push({ type: 'tagged', value: tagged });
+      continue;
+    }
+    presented.push({ type: 'plain', text: line });
+  }
+  return presented;
+}
+
+/** The body a card shows for one result, collapsed to the kind's line budget unless expanded. */
+export function hashlineBody(
+  result: ToolResultView | null,
+  output: string,
+  kind: HashlineResultKind,
+  expanded: boolean,
+): HashlineBody {
+  const lines = resultTextLines(result, output);
+  const notice = takeTrailingNotice(lines);
+  const presented = presentHashlineLines(lines, kind);
+  const budget = kind === 'read' ? READ_COLLAPSED_LINES : GREP_COLLAPSED_LINES;
+  const shown = expanded ? presented : presented.slice(0, budget);
+  const gutter = shown.reduce(
+    (widest, line) => (line.type === 'tagged' ? Math.max(widest, String(line.value.line).length) : widest),
+    1,
+  );
+  return { shown, hidden: presented.length - shown.length, notice, gutter };
+}
+
+/** The `key · key` detail list beside a call's primary argument, with absent values dropped. */
+export function compactDetails(values: ReadonlyArray<string | undefined>): string[] {
+  return values.filter((value): value is string => value !== undefined && value.length > 0);
+}

package/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/web/readToolView.ts

@@ -0,0 +1,24 @@
+import { compactDetails } from './hashlineView.ts';
+
+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/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": [".", "../src/types"]
+}