@agimon-ai/doompi-plan 0.0.1-alpha.37 → 0.0.1-alpha.38

package/README.md

@@ -14,7 +14,7 @@ tool-level workflow protection rather than a repository permission boundary.
 ## Requirements
 
 - Node.js 22.19.0 or newer
-- Pi 0.84.2
+- Pi 0.84.3
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-plan",
-  "version": "0.0.1-alpha.37",
+  "version": "0.0.1-alpha.38",
   "description": "Reviewable Pi planning mode that removes file-editing tools and persists implementation plans.",
   "keywords": [
     "ai",
@@ -27,6 +27,7 @@
   },
   "files": [
     "dist",
+    "web",
     "llms.txt",
     "src/prompts",
     "README.md",
@@ -86,23 +87,36 @@
   },
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
-    "@agimon-ai/doompi-config": "0.0.1-alpha.37",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.37",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.37"
+    "@agimon-ai/doompi-config": "0.0.1-alpha.38",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.38",
+    "@agimon-ai/doompi-telemetry": "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-coding-agent": "0.84.3",
+    "@tanstack/react-store": "0.11.1",
+    "@tanstack/store": "0.11.1",
     "@types/node": "26.2.0",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@vitest/coverage-v8": "4.1.11",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "typescript": "7.0.2",
     "vitest": "4.1.11"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": "0.84.2"
+    "@earendil-works/pi-coding-agent": "0.84.3"
   },
   "engines": {
     "node": ">=22.19.0"
   },
+  "doompiWeb": {
+    "pluginId": "plan",
+    "channels": [],
+    "client": "./web/index.ts"
+  },
   "pi": {
     "extensions": [
       "./dist/extensions/pi.mjs"
@@ -111,7 +125,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/PlanToolMessage.tsx

@@ -0,0 +1,44 @@
+import {
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageLines,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { planCallSummary, planResultLines } from './planToolRender.ts';
+
+/**
+ * The plan tools' timeline item: the plan action, the issue or decision it
+ * targets, and what the packet carries in the header; the outcome line, with
+ * the recorded evidence or the Fable draft once expanded, in the body.
+ */
+export function PlanToolMessage({ toolName, args, result, running, isError }: ToolMessageRenderProps) {
+  const summary = planCallSummary(toolName, args);
+  const collapsed = planResultLines(toolName, args, result, { expanded: false, isError, isPartial: running });
+  const full = planResultLines(toolName, args, result, { expanded: true, isError, isPartial: running });
+  return (
+    <MessageItem tone={toolTone({ running, isError })} expandable={full.length > collapsed.length}>
+      {({ expanded }) => (
+        <>
+          <MessageItemHeader title={toolName}>
+            <span data-testid={`tool-call-${toolName}`} className="flex min-w-0 flex-1 items-center gap-2">
+              <span className="font-bold text-doom-hi">{summary.action}</span>
+              {summary.detail ? <span className="min-w-0 truncate text-doom-faint">{summary.detail}</span> : null}
+              {summary.metadata.map((value) => (
+                <span key={value} className="shrink-0 text-doom-dim">
+                  · {value}
+                </span>
+              ))}
+            </span>
+          </MessageItemHeader>
+          {(expanded ? full : collapsed).length > 0 ? (
+            <MessageItemBody data-testid={`tool-result-${toolName}`}>
+              <MessageLines lines={expanded ? full : collapsed} />
+            </MessageItemBody>
+          ) : null}
+        </>
+      )}
+    </MessageItem>
+  );
+}

package/web/index.ts

@@ -0,0 +1,26 @@
+import { defineWebPlugin } from '@agimon-ai/doompi-web-contracts';
+import { PlanToolMessage } from './PlanToolMessage.tsx';
+import { PLAN_TOOL_NAMES } from './planToolRender.ts';
+
+/**
+ * This package's cockpit presence: pure metadata. The selection bar renders
+ * the minor-mode entry and folds in what the session reports through the 'plan-mode' footer status.
+ */
+export const webPlugin = defineWebPlugin({
+  id: 'plan',
+  minorModes: [{ name: 'plan', keys: 'p e', statusKey: 'plan-mode', order: 20 }],
+  // The plan tools' timeline cards; the TUI leaves these on Pi's default shell.
+  toolRenderers: [{ tools: [...PLAN_TOOL_NAMES], message: PlanToolMessage }],
+  // The TUI's SPC p e through /minor, which asks for the flavor; the direct
+  // debug (p d) and fable (p f) keys are leader actions the RPC road lacks.
+  leaderBindings: [
+    {
+      id: 'plan.toggle',
+      path: [
+        { key: 'p', label: 'plan', detail: 'read-only planning modes' },
+        { key: 'e', label: 'toggle', detail: 'enter or leave read-only planning' },
+      ],
+      command: 'minor plan',
+    },
+  ],
+});

package/web/planToolRender.ts

@@ -0,0 +1,242 @@
+import type { MessageLine, MessageLineTone } from '@agimon-ai/doompi-web-components';
+import type { ToolResultView } from '@agimon-ai/doompi-web-contracts';
+
+/**
+ * Purpose-first summaries for the plan-mode tools. The TUI leaves these on
+ * Pi's default shell, so the shapes here come straight from the tool
+ * definitions in src/services/planMode.ts: write_plan and complete_plan
+ * report through `details` (written, path, phase, exited), run_fable_plan
+ * carries the broker result, and record_debug_evidence only confirms.
+ */
+
+export const PLAN_TOOL_NAMES = ['record_debug_evidence', 'run_fable_plan', 'write_plan', 'complete_plan'] as const;
+
+/** The toned lines the shared MessageLines draws; the vocabulary is the components package's. */
+export type LineTone = MessageLineTone;
+export type ToolLine = MessageLine;
+
+export interface PlanCallSummary {
+  action: string;
+  detail?: string;
+  metadata: string[];
+}
+
+export interface PlanRenderOptions {
+  expanded: boolean;
+  isError: boolean;
+  isPartial: boolean;
+}
+
+type JsonRecord = Record<string, unknown>;
+
+const COLLAPSED_BODY_LINES = 12;
+const PREVIEW_LENGTH = 72;
+
+const EVIDENCE_LISTS: ReadonlyArray<[key: string, label: string]> = [
+  ['logs', 'log'],
+  ['correlatedTraceEvidence', 'trace'],
+  ['processOutput', 'process output'],
+  ['browserConsoleEvidence', 'console entry'],
+  ['correlationIds', 'correlation id'],
+  ['timestamps', 'timestamp'],
+  ['verifiedFacts', 'verified fact'],
+  ['hypotheses', 'hypothesis'],
+  ['unavailableEvidence', 'unavailable item'],
+];
+
+const PACKET_LISTS: ReadonlyArray<[key: string, label: string]> = [
+  ['goal', 'goal'],
+  ['constraints', 'constraint'],
+  ['decisions', 'decision'],
+  ['verifiedFindings', 'verified finding'],
+  ['inferredFindings', 'inferred finding'],
+  ['unresolvedQuestions', 'open question'],
+];
+
+function asRecord(value: unknown): JsonRecord | undefined {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) ? (value as JsonRecord) : undefined;
+}
+
+function inlineText(value: string): string {
+  let normalized = '';
+  for (const character of value) {
+    const code = character.codePointAt(0) ?? 0;
+    normalized += code <= 31 || code === 127 ? ' ' : character;
+  }
+  return normalized.replace(/\s+/gu, ' ').trim();
+}
+
+function readString(record: JsonRecord | undefined, key: string): string | undefined {
+  const value = record?.[key];
+  return typeof value === 'string' ? inlineText(value) || undefined : undefined;
+}
+
+function readNumber(record: JsonRecord | undefined, key: string): number | undefined {
+  const value = record?.[key];
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function listLength(record: JsonRecord, key: string): number {
+  const value = record[key];
+  return Array.isArray(value) ? value.length : 0;
+}
+
+function plural(count: number, singular: string): string {
+  if (count === 1) return singular;
+  if (singular.endsWith('y')) return `${singular.slice(0, -1)}ies`;
+  return `${singular}s`;
+}
+
+function preview(value: string | undefined): string | undefined {
+  if (!value) return undefined;
+  return value.length > PREVIEW_LENGTH ? `${value.slice(0, PREVIEW_LENGTH - 3)}…` : value;
+}
+
+function countMetadata(args: JsonRecord, lists: ReadonlyArray<[string, string]>): string[] {
+  return lists.flatMap(([key, label]) => {
+    const count = listLength(args, key);
+    return count > 0 ? [`${count} ${plural(count, label)}`] : [];
+  });
+}
+
+function line(text: string, tone: LineTone, extra: Omit<ToolLine, 'text' | 'tone'> = {}): ToolLine {
+  return { text, tone, ...extra };
+}
+
+function outputText(result: ToolResultView | null): string {
+  if (!result) return '';
+  return result.content
+    .flatMap((item) => {
+      const record = asRecord(item);
+      return record?.type === 'text' && typeof record.text === 'string' ? [record.text] : [];
+    })
+    .join('\n');
+}
+
+function bodyLines(text: string, expanded: boolean): ToolLine[] {
+  const all = text
+    .split('\n')
+    .map((entry) => entry.trimEnd())
+    .filter((entry) => entry.length > 0);
+  const shown = expanded ? all : all.slice(0, COLLAPSED_BODY_LINES);
+  const lines = shown.map((entry) => line(entry, 'text'));
+  if (all.length > shown.length) lines.push(line(`… ${all.length - shown.length} more lines`, 'dim'));
+  return lines;
+}
+
+/** The header beside the tool name: what the call is for and how much it carries. */
+export function planCallSummary(toolName: string, args: JsonRecord): PlanCallSummary {
+  if (toolName === 'record_debug_evidence') {
+    const issue = preview(readString(args, 'issue'));
+    return {
+      action: 'record evidence',
+      ...(issue ? { detail: issue } : {}),
+      metadata: countMetadata(args, EVIDENCE_LISTS),
+    };
+  }
+  if (toolName === 'run_fable_plan') {
+    const metadata = countMetadata(args, PACKET_LISTS);
+    if (readString(args, 'currentPlan')) metadata.push('with current plan');
+    return { action: 'fable draft', metadata };
+  }
+  if (toolName === 'write_plan') return { action: 'save plan', metadata: [] };
+  const decision = readString(args, 'decision');
+  return { action: decision ? `decide ${decision}` : 'request approval', metadata: [] };
+}
+
+function evidenceLines(args: JsonRecord, result: ToolResultView | null, options: PlanRenderOptions): ToolLine[] {
+  const recorded = asRecord(result?.details)?.recorded === true;
+  const lines = [
+    recorded
+      ? line('✓ evidence recorded as planning context', 'success')
+      : line(`○ ${inlineText(outputText(result)) || 'not recorded'}`, 'muted'),
+  ];
+  if (!options.expanded) return lines;
+  const fields: ReadonlyArray<[string, string]> = [
+    ['issue', 'issue'],
+    ['expectedBehavior', 'expected'],
+    ['reproductionAttempt', 'reproduction'],
+    ['actualBehavior', 'actual'],
+  ];
+  for (const [key, label] of fields) {
+    const value = readString(args, key);
+    if (value) lines.push(line(`${label} ${value}`, 'text'));
+  }
+  for (const [key, label] of EVIDENCE_LISTS) {
+    const raw = args[key];
+    const items = Array.isArray(raw) ? raw.filter((item): item is string => typeof item === 'string') : [];
+    if (items.length === 0) continue;
+    lines.push(line(plural(items.length, label), 'hi', { bold: true }));
+    lines.push(...items.map((item) => line(inlineText(item), 'text', { indent: true })));
+  }
+  return lines;
+}
+
+function fableLines(result: ToolResultView | null, options: PlanRenderOptions): ToolLine[] {
+  const details = asRecord(result?.details);
+  const text = outputText(result);
+  if (details?.started !== true) {
+    const code = readString(details, 'errorCode');
+    return [line(`○ ${inlineText(text) || 'fable planning did not start'}${code ? ` · ${code}` : ''}`, 'muted')];
+  }
+  const status = readString(details, 'status') ?? 'unknown';
+  const draft = typeof details?.draft === 'string' ? details.draft : undefined;
+  const code = readString(details, 'errorCode');
+  if (!draft) return [line(`✗ fable planning ${status}${code ? ` · ${code}` : ''}`, 'error')];
+  const finished = status === 'completed';
+  return [
+    line(
+      `${finished ? '✓' : '!'} fable draft · ${status}${code ? ` · ${code}` : ''}`,
+      finished ? 'success' : 'warning',
+      {
+        bold: true,
+      },
+    ),
+    ...bodyLines(draft, options.expanded),
+  ];
+}
+
+function writeLines(result: ToolResultView | null, options: PlanRenderOptions): ToolLine[] {
+  const details = asRecord(result?.details);
+  const path = readString(details, 'path');
+  if (options.isPartial) {
+    const phase = readString(details, 'phase') ?? 'checking';
+    return [line(`◐ ${phase}${path ? ` ${path}` : ''}`, 'warning')];
+  }
+  const duration = readNumber(details, 'durationMs');
+  if (details?.written === true) {
+    return [line(`✓ wrote ${path ?? 'the plan'}${duration === undefined ? '' : ` · ${duration}ms`}`, 'success')];
+  }
+  const lines = [line(`○ ${inlineText(outputText(result)) || 'plan not written'}`, 'muted')];
+  if (path) lines.push(line(`path ${path}`, 'dim'));
+  return lines;
+}
+
+function completeLines(result: ToolResultView | null): ToolLine[] {
+  const text = inlineText(outputText(result));
+  if (asRecord(result?.details)?.exited === true) {
+    return [line(`✓ plan mode exited${text ? ` · ${text}` : ''}`, 'success')];
+  }
+  return [line(`○ staying in plan mode${text ? ` · ${text}` : ''}`, 'muted')];
+}
+
+/** The body of a plan tool card: the outcome line, plus the carried detail once expanded. */
+export function planResultLines(
+  toolName: string,
+  args: JsonRecord,
+  result: ToolResultView | null,
+  options: PlanRenderOptions,
+): ToolLine[] {
+  if (options.isError) {
+    const text = inlineText(outputText(result));
+    return [line(`✗ ${text || `${toolName} failed`}`, 'error')];
+  }
+  if (toolName === 'record_debug_evidence') return evidenceLines(args, result, options);
+  if (toolName === 'run_fable_plan') {
+    if (options.isPartial) return [line('◐ drafting with the local Fable broker', 'warning')];
+    return fableLines(result, options);
+  }
+  if (toolName === 'write_plan') return writeLines(result, options);
+  if (options.isPartial) return [line('◐ waiting for the review decision', 'warning')];
+  return completeLines(result);
+}

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", "../tests/web"]
+}