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

package/README.md

@@ -13,7 +13,7 @@ compatible hashline producer. Stale or ambiguous mutations fail before any file
 ## 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-edit",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.21",
   "description": "Snapshot-bound hashline edit tool for Pi and DoomPi.",
   "keywords": [
     "ai",
@@ -13,10 +13,20 @@
     "pi-package"
   ],
   "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-edit"
+  },
   "files": [
-    "dist"
+    "dist",
+    "src/web",
+    "src/exports/webClient.ts"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,23 +50,29 @@
   },
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
-    "typebox": "1.3.16",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.30",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.30",
-    "@agimon-ai/doompi-hashline": "0.0.1-alpha.2"
+    "typebox": "1.3.19",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.48",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.49",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.12",
+    "@agimon-ai/doompi-hashline": "0.0.1-alpha.20",
+    "@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": {
@@ -69,6 +85,11 @@
   "engines": {
     "node": ">=22.19.0"
   },
+  "doompiWeb": {
+    "pluginId": "edit",
+    "channels": [],
+    "client": "./src/exports/webClient.ts"
+  },
   "pi": {
     "extensions": [
       "./dist/extensions/pi.mjs"
@@ -77,7 +98,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/EditToolMessage.tsx

@@ -0,0 +1,120 @@
+import {
+  collapseLines,
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  SyntaxLine,
+  ToolPathLink,
+  toolTone,
+  useSyntaxLines,
+} from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { type DiffRow, editCallView, editResultView, resultTextLines } from './editToolView.ts';
+
+/** Diff rows shown until the item expands; about what the old scroll box held. */
+const COLLAPSED_ROWS = 24;
+
+// Doom carries a diff on the background the way Magit does: a green wash on
+// added rows, a red wash on removed ones, and the foreground left to the text.
+const ROW_TONE: Readonly<Record<DiffRow['marker'], string>> = {
+  '+': 'bg-doom-tint-green text-doom-green',
+  '-': 'bg-doom-tint-red text-doom-red',
+  ' ': 'text-doom-dim',
+};
+
+/**
+ * The banded rows, and the grammar over them.
+ *
+ * Its own component because the colours come from a hook, and the body that
+ * renders these rows is chosen inside a render prop. The rows are parsed as
+ * one document: a diff is not a file, so a replaced line is seen twice and a
+ * split string can colour oddly, which costs a token here and there and never
+ * costs the reader the text. The `+` and `-` wash stays underneath, so what
+ * changed is still legible when the grammar has coloured the foreground.
+ */
+function DiffRows({ rows, gutter, path }: { rows: readonly DiffRow[]; gutter: number; path: string }) {
+  const spans = useSyntaxLines(rows.map((row) => row.content).join('\n'), { path });
+  return (
+    <>
+      {rows.map((row, index) => (
+        <span key={`${String(index)}-${row.lineNumber}`} className={`flex gap-2 ${ROW_TONE[row.marker]}`}>
+          <span className="shrink-0 text-right text-doom-faint" style={{ width: `${String(gutter)}ch` }}>
+            {row.lineNumber}
+          </span>
+          <span className="w-2 shrink-0">{row.marker === ' ' ? '' : row.marker}</span>
+          <SyntaxLine spans={spans?.[index]} text={row.content} className="min-w-0 whitespace-pre-wrap break-words" />
+        </span>
+      ))}
+    </>
+  );
+}
+
+/**
+ * The edit tool's timeline item: `path · N ranges` in the header; the display
+ * diff from the result's details, banded by row, in the body. A successful
+ * edit whose details never arrived shows nothing, and a failed one shows the
+ * tool's message in red.
+ */
+export function EditToolMessage({
+  args,
+  result,
+  output,
+  running,
+  isError,
+  fileTabFor,
+  openTransientTab,
+}: ToolMessageRenderProps) {
+  const call = editCallView(args);
+  const view = result === null || isError ? undefined : editResultView(result);
+  // The file this edit lands in, opened from the header rather than found
+  // again in a file list; plain text when nothing installed can show it.
+  const tab = fileTabFor(call.path);
+  return (
+    <MessageItem
+      tone={toolTone({ running, isError })}
+      expandable={view !== undefined && view.rows.length > COLLAPSED_ROWS}
+    >
+      {({ expanded }) => (
+        <>
+          <MessageItemHeader title="edit">
+            <span data-testid="tool-call-edit" className="flex min-w-0 flex-1 items-center gap-2">
+              <ToolPathLink path={call.path} {...(tab === undefined ? {} : { onOpen: () => openTransientTab(tab) })} />
+              <span className="shrink-0 text-doom-faint">· {call.ranges}</span>
+            </span>
+          </MessageItemHeader>
+          {isError ? (
+            <MessageItemBody data-testid="tool-result-edit" 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>
+          ) : view === undefined ? (
+            running ? (
+              <MessageItemBody data-testid="tool-result-edit">
+                <MessageItemStatus tone="running">running</MessageItemStatus>
+              </MessageItemBody>
+            ) : null
+          ) : (
+            (() => {
+              const { shown, hidden } = collapseLines(view.rows, COLLAPSED_ROWS, expanded);
+              return (
+                <MessageItemBody data-testid="tool-result-edit" className="flex flex-col font-mono">
+                  <DiffRows rows={shown} gutter={view.gutter} path={call.path} />
+                  {hidden > 0 ? (
+                    <MessageItemStatus expands className="pt-1">
+                      {hidden} more rows
+                    </MessageItemStatus>
+                  ) : null}
+                </MessageItemBody>
+              );
+            })()
+          )}
+        </>
+      )}
+    </MessageItem>
+  );
+}

package/src/web/editToolView.ts

@@ -0,0 +1,75 @@
+import type { ToolResultView } from '@agimon-ai/doompi-web-contracts';
+
+/** Pi emits `+12 text`, `-12 text`, ` 12 text`, and a blank-numbered ` ... ` elision between hunks. */
+const DIFF_ROW_PATTERN = /^([+\- ])( *\d*) (.*)$/u;
+const CONTEXT_MARKER = ' ';
+
+export type DiffMarker = '+' | '-' | typeof CONTEXT_MARKER;
+
+export interface DiffRow {
+  readonly marker: DiffMarker;
+  readonly lineNumber: string;
+  readonly content: string;
+}
+
+export interface EditCallView {
+  readonly path: string;
+  /** `N range` or `N ranges`, the count the TUI's call heading shows. */
+  readonly ranges: string;
+}
+
+export interface EditResultView {
+  readonly rows: readonly DiffRow[];
+  /** Widest line number among the rows, in characters, sizing the gutter. */
+  readonly gutter: number;
+}
+
+/** What the edit call heading shows: the path and how many ranges the call touches. */
+export function editCallView(args: Readonly<Record<string, unknown>>): EditCallView {
+  const count = Array.isArray(args.edits) ? args.edits.length : 0;
+  return {
+    path: typeof args.path === 'string' ? args.path : '',
+    ranges: `${count} ${count === 1 ? 'range' : 'ranges'}`,
+  };
+}
+
+function toDiffMarker(value: string | undefined): DiffMarker {
+  return value === '+' || value === '-' ? value : CONTEXT_MARKER;
+}
+
+/** Pi's display diff as rows; a line that is not a diff row reads as unnumbered context. */
+export function parseDiffRows(diff: string): DiffRow[] {
+  return diff.split('\n').map((line) => {
+    const expanded = line.replaceAll('\t', '  ');
+    const match = DIFF_ROW_PATTERN.exec(expanded);
+    if (!match) return { marker: CONTEXT_MARKER, lineNumber: '', content: expanded };
+    return { marker: toDiffMarker(match[1]), lineNumber: (match[2] ?? '').trim(), content: match[3] ?? '' };
+  });
+}
+
+/** The diff a successful edit carries in its details; undefined when the details never arrived. */
+export function editResultView(result: ToolResultView | null): EditResultView | undefined {
+  const details = result?.details;
+  if (typeof details !== 'object' || details === null) return undefined;
+  const diff = (details as { diff?: unknown }).diff;
+  if (typeof diff !== 'string' || diff.length === 0) return undefined;
+  const rows = parseDiffRows(diff);
+  return { rows, gutter: rows.reduce((widest, row) => Math.max(widest, row.lineNumber.length), 1) };
+}
+
+/** The result's text lines, for the error case where the diff never happened. */
+export function resultTextLines(result: ToolResultView | null, output: string): string[] {
+  const text =
+    result === null
+      ? output
+      : result.content
+          .flatMap((block) => {
+            const record =
+              typeof block === 'object' && block !== null ? (block as { type?: unknown; text?: unknown }) : {};
+            return record.type === 'text' && typeof record.text === 'string' ? [record.text] : [];
+          })
+          .join('\n');
+  const lines = text.replaceAll('\t', '  ').replaceAll('\r\n', '\n').split('\n');
+  while (lines.at(-1) === '') lines.pop();
+  return lines;
+}

package/src/web/index.ts

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

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"]
+}