@agimon-ai/doompi-ui 0.0.1-alpha.37 → 0.0.1-alpha.39

package/README.md

@@ -10,8 +10,8 @@ core. Extension authors can depend on its public contracts without adopting the
 ## Requirements
 
 - Node.js 22.19.0 or newer
-- Pi 0.84.2
-- Pi TUI 0.84.2
+- Pi 0.84.3
+- Pi TUI 0.84.3
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-ui",
-  "version": "0.0.1-alpha.37",
+  "version": "0.0.1-alpha.39",
   "description": "Leader-key menus, themes, and TUI components for DoomPi and Pi extensions.",
   "keywords": [
     "ai",
@@ -27,6 +27,7 @@
   },
   "files": [
     "dist",
+    "web",
     "themes"
   ],
   "type": "module",
@@ -168,26 +169,37 @@
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
     "yaml": "2.9.0",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.37",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.37",
-    "@agimon-ai/doompi-hashline": "0.0.1-alpha.9"
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.39",
+    "@agimon-ai/doompi-hashline": "0.0.1-alpha.11",
+    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.39",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.0",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.2"
   },
   "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"
   },
   "engines": {
     "node": ">=22.19.0"
   },
+  "doompiWeb": {
+    "pluginId": "builtin-tools",
+    "channels": [],
+    "client": "./web/index.ts"
+  },
   "pi": {
     "extensions": [
       "./dist/extensions/pi.mjs"
@@ -196,7 +208,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/FindToolMessage.tsx

@@ -0,0 +1,32 @@
+import { MessageItem, MessageItemHeader, toolTone } from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { findCallView } from './builtinToolView.ts';
+import { ListingBody, listingExpandable } from './ListingBody.tsx';
+
+const LIMIT_KEY = 'resultLimitReached';
+const LIMIT_UNIT = 'results';
+
+/** The find tool's timeline item: `pattern · path · N results` over Pi's listing lines. */
+export function FindToolMessage(props: ToolMessageRenderProps) {
+  const view = findCallView(props.args);
+  return (
+    <MessageItem
+      tone={toolTone({ running: props.running, isError: props.isError })}
+      expandable={listingExpandable(props, LIMIT_KEY, LIMIT_UNIT)}
+    >
+      {({ expanded }) => (
+        <>
+          <MessageItemHeader title="find">
+            <span data-testid="tool-call-find" className="flex min-w-0 flex-1 items-center gap-2">
+              <span className="truncate text-doom-text">{view.primary}</span>
+              {view.details.length > 0 ? (
+                <span className="shrink-0 text-doom-faint">· {view.details.join(' · ')}</span>
+              ) : null}
+            </span>
+          </MessageItemHeader>
+          <ListingBody tool="find" limitKey={LIMIT_KEY} limitUnit={LIMIT_UNIT} expanded={expanded} props={props} />
+        </>
+      )}
+    </MessageItem>
+  );
+}

package/web/ListingBody.tsx

@@ -0,0 +1,57 @@
+import { MessageItemBody, MessageItemStatus } from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { listResultView, resultText } from './builtinToolView.ts';
+
+/**
+ * The body shared by find and ls: Pi's listing lines, collapsed to twenty
+ * until the item expands, with the limit warning its details carry.
+ */
+export function ListingBody({
+  tool,
+  limitKey,
+  limitUnit,
+  expanded,
+  props,
+}: {
+  tool: string;
+  limitKey: string;
+  limitUnit: string;
+  expanded: boolean;
+  props: ToolMessageRenderProps;
+}) {
+  const { result, output, running, isError } = props;
+  if (isError) {
+    return (
+      <MessageItemBody data-testid={`tool-result-${tool}`} className="flex flex-col">
+        <MessageItemStatus tone="error">failed</MessageItemStatus>
+        <span className="whitespace-pre-wrap break-words text-doom-red">{resultText(result, output)}</span>
+      </MessageItemBody>
+    );
+  }
+  if (result === null) {
+    return running ? (
+      <MessageItemBody data-testid={`tool-result-${tool}`}>
+        <MessageItemStatus tone="running">running</MessageItemStatus>
+      </MessageItemBody>
+    ) : null;
+  }
+  const view = listResultView(result, output, expanded, limitKey, limitUnit);
+  if (view.lines.length === 0 && view.truncated === undefined) return null;
+  return (
+    <MessageItemBody data-testid={`tool-result-${tool}`} className="flex flex-col font-mono">
+      {view.lines.map((line, index) => (
+        <span key={`${String(index)}-${line}`} className="whitespace-pre-wrap break-words text-doom-text">
+          {line}
+        </span>
+      ))}
+      {view.hidden > 0 ? <MessageItemStatus expands>{view.hidden} more lines</MessageItemStatus> : null}
+      {view.truncated !== undefined ? <span className="text-doom-yellow">{view.truncated}</span> : null}
+    </MessageItemBody>
+  );
+}
+
+/** Whether the listing hides lines while collapsed, so the item can offer its toggle. */
+export function listingExpandable(props: ToolMessageRenderProps, limitKey: string, limitUnit: string): boolean {
+  if (props.result === null || props.isError) return false;
+  return listResultView(props.result, props.output, false, limitKey, limitUnit).hidden > 0;
+}

package/web/LsToolMessage.tsx

@@ -0,0 +1,32 @@
+import { MessageItem, MessageItemHeader, toolTone } from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { lsCallView } from './builtinToolView.ts';
+import { ListingBody, listingExpandable } from './ListingBody.tsx';
+
+const LIMIT_KEY = 'entryLimitReached';
+const LIMIT_UNIT = 'entries';
+
+/** The ls tool's timeline item: `path · N entries` over Pi's listing lines. */
+export function LsToolMessage(props: ToolMessageRenderProps) {
+  const view = lsCallView(props.args);
+  return (
+    <MessageItem
+      tone={toolTone({ running: props.running, isError: props.isError })}
+      expandable={listingExpandable(props, LIMIT_KEY, LIMIT_UNIT)}
+    >
+      {({ expanded }) => (
+        <>
+          <MessageItemHeader title="ls">
+            <span data-testid="tool-call-ls" className="flex min-w-0 flex-1 items-center gap-2">
+              <span className="truncate text-doom-text">{view.primary}</span>
+              {view.details.length > 0 ? (
+                <span className="shrink-0 text-doom-faint">· {view.details.join(' · ')}</span>
+              ) : null}
+            </span>
+          </MessageItemHeader>
+          <ListingBody tool="ls" limitKey={LIMIT_KEY} limitUnit={LIMIT_UNIT} expanded={expanded} props={props} />
+        </>
+      )}
+    </MessageItem>
+  );
+}

package/web/WriteToolMessage.tsx

@@ -0,0 +1,61 @@
+import {
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { resultText, writeCallView } from './builtinToolView.ts';
+
+/**
+ * The write tool's timeline item: `path · N chars` in the header. Pi's write
+ * result is silent on success, so the body shows the numbered preview the
+ * TUI folds into its call: ten lines, or all of them once the item expands.
+ * A failure shows the tool's message in red instead.
+ */
+export function WriteToolMessage({ args, result, output, running, isError }: ToolMessageRenderProps) {
+  const collapsed = writeCallView(args, false);
+  return (
+    <MessageItem tone={toolTone({ running, isError })} expandable={collapsed.hidden > 0}>
+      {({ expanded }) => {
+        const view = expanded ? writeCallView(args, true) : collapsed;
+        return (
+          <>
+            <MessageItemHeader title="write">
+              <span data-testid="tool-call-write" className="flex min-w-0 flex-1 items-center gap-2">
+                <span className="truncate text-doom-text">{view.path}</span>
+                <span className="shrink-0 text-doom-faint">· {view.size}</span>
+              </span>
+            </MessageItemHeader>
+            {isError ? (
+              <MessageItemBody data-testid="tool-result-write" className="flex flex-col">
+                <MessageItemStatus tone="error">failed</MessageItemStatus>
+                <span className="whitespace-pre-wrap break-words text-doom-red">{resultText(result, output)}</span>
+              </MessageItemBody>
+            ) : view.preview.length === 0 ? (
+              running ? (
+                <MessageItemBody data-testid="tool-result-write">
+                  <MessageItemStatus tone="running">running</MessageItemStatus>
+                </MessageItemBody>
+              ) : null
+            ) : (
+              <MessageItemBody data-testid="tool-result-write" className="flex flex-col font-mono">
+                {view.preview.map((line) => (
+                  <span key={line.number} className="flex gap-2">
+                    <span className="shrink-0 text-right text-doom-faint" style={{ width: `${String(view.gutter)}ch` }}>
+                      {line.number}
+                    </span>
+                    <span className="min-w-0 whitespace-pre-wrap break-words text-doom-text">{line.text}</span>
+                  </span>
+                ))}
+                {view.hidden > 0 ? <MessageItemStatus expands>{view.hidden} more lines</MessageItemStatus> : null}
+                {running ? <MessageItemStatus tone="running">running</MessageItemStatus> : null}
+              </MessageItemBody>
+            )}
+          </>
+        );
+      }}
+    </MessageItem>
+  );
+}

package/web/builtinToolView.ts

@@ -0,0 +1,127 @@
+import type { ToolResultView } from '@agimon-ai/doompi-web-contracts';
+
+/** The TUI's collapsed budgets: ten preview lines for a write, twenty for a listing. */
+export const WRITE_COLLAPSED_LINES = 10;
+export const LIST_COLLAPSED_LINES = 20;
+/** Pi's default output cap, the size its truncation warning names when details omit one. */
+const DEFAULT_MAX_BYTES = 50 * 1024;
+const KIBIBYTE = 1024;
+
+export interface NumberedLine {
+  readonly number: number;
+  readonly text: string;
+}
+
+export interface WriteCallView {
+  readonly path: string;
+  /** `N chars`, the size the TUI's call heading shows. */
+  readonly size: string;
+  readonly preview: readonly NumberedLine[];
+  readonly hidden: number;
+  /** Widest shown line number, in characters. */
+  readonly gutter: number;
+}
+
+export interface SearchCallView {
+  readonly primary: string;
+  readonly details: readonly string[];
+}
+
+export interface ListResultView {
+  readonly lines: readonly string[];
+  readonly hidden: number;
+  /** Pi's `[Truncated: ...]` warning, when the listing hit a limit. */
+  readonly truncated: string | undefined;
+}
+
+function compactDetails(values: ReadonlyArray<string | undefined>): string[] {
+  return values.filter((value): value is string => value !== undefined && value.length > 0);
+}
+
+function optionalCount(value: unknown, unit: string): string | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? `${value} ${unit}` : undefined;
+}
+
+function pathOrDot(value: unknown): string {
+  return typeof value === 'string' && value.length > 0 ? value : '.';
+}
+
+/** Pi's size formatter, so the web warning names the same figure the TUI does. */
+export function formatSize(bytes: number): string {
+  if (bytes < KIBIBYTE) return `${bytes}B`;
+  if (bytes < KIBIBYTE * KIBIBYTE) return `${(bytes / KIBIBYTE).toFixed(1)}KB`;
+  return `${(bytes / (KIBIBYTE * KIBIBYTE)).toFixed(1)}MB`;
+}
+
+/** What the write call shows: the path, the content size, and a numbered preview of the file. */
+export function writeCallView(args: Readonly<Record<string, unknown>>, expanded: boolean): WriteCallView {
+  const content = typeof args.content === 'string' ? args.content : '';
+  const path = typeof args.path === 'string' ? args.path : '';
+  const size = `${content.length.toLocaleString('en-US')} chars`;
+  if (content.length === 0) return { path, size, preview: [], hidden: 0, gutter: 1 };
+  const lines = content.replaceAll('\t', '  ').replaceAll('\r\n', '\n').split('\n');
+  while (lines.at(-1) === '') lines.pop();
+  const visible = expanded ? lines : lines.slice(0, WRITE_COLLAPSED_LINES);
+  const preview = visible.map((text, index) => ({ number: index + 1, text }));
+  return { path, size, preview, hidden: lines.length - visible.length, gutter: String(visible.length).length };
+}
+
+/** `pattern · path · N results`, as the find call heading lists them. */
+export function findCallView(args: Readonly<Record<string, unknown>>): SearchCallView {
+  return {
+    primary: typeof args.pattern === 'string' ? args.pattern : '',
+    details: compactDetails([pathOrDot(args.path), optionalCount(args.limit, 'results')]),
+  };
+}
+
+/** `path · N entries`, as the ls call heading lists them. */
+export function lsCallView(args: Readonly<Record<string, unknown>>): SearchCallView {
+  return { primary: pathOrDot(args.path), details: compactDetails([optionalCount(args.limit, 'entries')]) };
+}
+
+/** The result's text, from its blocks when the view exists and from the joined output otherwise. */
+export function resultText(result: ToolResultView | null, output: string): string {
+  if (result === null) return output;
+  return 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');
+}
+
+/**
+ * A find or ls listing the way Pi's own renderer shows it: the lines,
+ * collapsed to twenty, and the limit warning its details carry. `limitKey`
+ * names the per-tool counter (resultLimitReached, entryLimitReached).
+ */
+export function listResultView(
+  result: ToolResultView | null,
+  output: string,
+  expanded: boolean,
+  limitKey: string,
+  limitUnit: string,
+): ListResultView {
+  const text = resultText(result, output).trim();
+  const all = text.length === 0 ? [] : text.split('\n');
+  const lines = expanded ? all : all.slice(0, LIST_COLLAPSED_LINES);
+  const details =
+    typeof result?.details === 'object' && result.details !== null ? (result.details as Record<string, unknown>) : {};
+  const limit = details[limitKey];
+  const truncation =
+    typeof details.truncation === 'object' && details.truncation !== null
+      ? (details.truncation as Record<string, unknown>)
+      : undefined;
+  const warnings: string[] = [];
+  if (typeof limit === 'number' && limit > 0) warnings.push(`${limit} ${limitUnit} limit`);
+  if (truncation?.truncated === true) {
+    warnings.push(
+      `${formatSize(typeof truncation.maxBytes === 'number' ? truncation.maxBytes : DEFAULT_MAX_BYTES)} limit`,
+    );
+  }
+  return {
+    lines,
+    hidden: all.length - lines.length,
+    truncated: warnings.length > 0 ? `[Truncated: ${warnings.join(', ')}]` : undefined,
+  };
+}

package/web/index.ts

@@ -0,0 +1,19 @@
+import { defineWebPlugin } from '@agimon-ai/doompi-web-contracts';
+import { FindToolMessage } from './FindToolMessage.tsx';
+import { LsToolMessage } from './LsToolMessage.tsx';
+import { WriteToolMessage } from './WriteToolMessage.tsx';
+
+/**
+ * This package's cockpit presence: timeline cards for the Pi builtins whose
+ * UI this package re-registers and no default package replaces. read, edit,
+ * and grep belong to doompi-read, doompi-edit, and doompi-grep, which claim
+ * them with their own cards.
+ */
+export const webPlugin = defineWebPlugin({
+  id: 'builtin-tools',
+  toolRenderers: [
+    { tools: ['write'], message: WriteToolMessage },
+    { tools: ['find'], message: FindToolMessage },
+    { tools: ['ls'], message: LsToolMessage },
+  ],
+});

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