@agimon-ai/doompi-user-feedback 0.0.1-alpha.26 → 0.0.1-alpha.28

package/README.md

@@ -13,7 +13,7 @@ guess.
 ## 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-user-feedback",
-  "version": "0.0.1-alpha.26",
+  "version": "0.0.1-alpha.28",
   "description": "Structured user questions with interactive and autonomous Voice handoff for Pi agents.",
   "keywords": [
     "ai",
@@ -27,6 +27,7 @@
   },
   "files": [
     "dist",
+    "web",
     "README.md",
     "LICENSE",
     "package.json"
@@ -54,21 +55,27 @@
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
     "typebox": "1.3.16",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.37",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.37"
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.2",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.39",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.39",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.0"
   },
   "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": {
@@ -81,6 +88,11 @@
   "engines": {
     "node": ">=22.19.0"
   },
+  "doompiWeb": {
+    "pluginId": "ask-user",
+    "channels": [],
+    "client": "./web/index.ts"
+  },
   "pi": {
     "extensions": [
       "./dist/extensions/pi.mjs"
@@ -89,7 +101,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/AskUserQuestionToolMessage.tsx

@@ -0,0 +1,85 @@
+import {
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import { askCallSummary, askResultView } from './askUserText.ts';
+
+/** The answered list, or the outcome that stood in for it. */
+function AskUserQuestionBody({ result, output, running, isError }: ToolMessageRenderProps) {
+  if (running) {
+    return (
+      <MessageItemBody data-testid="tool-result-ask_user_question">
+        <MessageItemStatus tone="running">waiting for the user</MessageItemStatus>
+      </MessageItemBody>
+    );
+  }
+  const view = askResultView(result?.details, output);
+  if (view.kind === 'cancelled') {
+    return (
+      <MessageItemBody data-testid="tool-result-ask_user_question">
+        <MessageItemStatus tone="running">cancelled</MessageItemStatus>
+      </MessageItemBody>
+    );
+  }
+  if (view.kind === 'voice') {
+    return (
+      <MessageItemBody data-testid="tool-result-ask_user_question">
+        <pre className="whitespace-pre-wrap break-words text-doom-dim">{view.prompt}</pre>
+      </MessageItemBody>
+    );
+  }
+  if (view.kind === 'text') {
+    return (
+      <MessageItemBody data-testid="tool-result-ask_user_question">
+        {view.text ? (
+          <pre className={`whitespace-pre-wrap break-words ${isError ? 'text-doom-red' : 'text-doom-dim'}`}>
+            {view.text}
+          </pre>
+        ) : (
+          <MessageItemStatus tone={isError ? 'error' : 'ok'}>{isError ? 'failed' : 'submitted'}</MessageItemStatus>
+        )}
+      </MessageItemBody>
+    );
+  }
+  return (
+    <MessageItemBody data-testid="tool-result-ask_user_question">
+      {view.answers.length === 0 ? (
+        <MessageItemStatus tone="ok">submitted</MessageItemStatus>
+      ) : (
+        <ul className="flex flex-col gap-1">
+          {view.answers.map((answer, index) => (
+            <li key={`${String(index)}-${answer.question}`} className="break-words">
+              <span className="text-doom-green">✓</span> <span className="text-doom-cyan">{answer.question}</span>:{' '}
+              <span className="text-doom-dim">{answer.answer}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </MessageItemBody>
+  );
+}
+
+/**
+ * The ask_user_question tool's timeline item: "N question(s) (headers)" in
+ * the header, the web half of the TUI renderCall, and the answered list or
+ * the outcome that stood in for it in the body. The live questionnaire
+ * arrives as an extension-UI dialog; this is the transcript record.
+ */
+export function AskUserQuestionToolMessage(props: ToolMessageRenderProps) {
+  const summary = askCallSummary(props.args);
+  return (
+    <MessageItem tone={toolTone({ running: props.running, isError: props.isError })}>
+      <MessageItemHeader title="ask_user_question">
+        <span data-testid="tool-call-ask_user_question" className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="text-doom-hi">{summary.count}</span>
+          {summary.headers ? <span className="min-w-0 truncate text-doom-faint">({summary.headers})</span> : null}
+        </span>
+      </MessageItemHeader>
+      <AskUserQuestionBody {...props} />
+    </MessageItem>
+  );
+}

package/web/askUserText.ts

@@ -0,0 +1,65 @@
+/**
+ * Pure text shaping for the ask_user_question card, apart from React so the
+ * unit suite covers it without a DOM. Args and details are wire JSON; the
+ * shapes narrowed here mirror src/types/questionnaire.ts, which this browser
+ * module may not import at runtime.
+ */
+
+type Args = Readonly<Record<string, unknown>>;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function asString(value: unknown): string {
+  return typeof value === 'string' ? value : '';
+}
+
+export interface AskCallSummary {
+  /** "N question(s)", the TUI heading's purpose. */
+  count: string;
+  /** The question headers, comma separated; empty when none carry one. */
+  headers: string;
+}
+
+/** The call header: how many questions, and their headers in parentheses. */
+export function askCallSummary(args: Args): AskCallSummary {
+  const questions = Array.isArray(args.questions) ? args.questions.filter(isRecord) : [];
+  const headers = questions.map((question) => asString(question.header)).filter(Boolean);
+  return {
+    count: `${questions.length} question${questions.length === 1 ? '' : 's'}`,
+    headers: headers.join(', '),
+  };
+}
+
+export interface AnsweredQuestion {
+  question: string;
+  answer: string;
+}
+
+export type AskResultView =
+  | { kind: 'cancelled' }
+  | { kind: 'voice'; prompt: string }
+  | { kind: 'answers'; answers: AnsweredQuestion[] }
+  | { kind: 'text'; text: string };
+
+/**
+ * The result body the TUI's renderResult chooses: a cancelled glyph, the
+ * voice prompt when the questionnaire was handed to voice, the answered
+ * list, or the raw text when the tool attached no details (an error path).
+ */
+export function askResultView(details: unknown, output: string): AskResultView {
+  if (!isRecord(details) || !Array.isArray(details.answers)) return { kind: 'text', text: output };
+  if (details.cancelled === true) return { kind: 'cancelled' };
+  if (details.delivery === 'voice' && typeof details.voicePrompt === 'string') {
+    return { kind: 'voice', prompt: details.voicePrompt };
+  }
+  const answers = details.answers.filter(isRecord).map((answer) => ({
+    question: asString(answer.question),
+    answer:
+      answer.kind === 'multi'
+        ? (Array.isArray(answer.selected) ? answer.selected : []).filter((v) => typeof v === 'string').join(', ')
+        : asString(answer.answer),
+  }));
+  return { kind: 'answers', answers };
+}

package/web/index.ts

@@ -0,0 +1,13 @@
+import { defineWebPlugin } from '@agimon-ai/doompi-web-contracts';
+import { AskUserQuestionToolMessage } from './AskUserQuestionToolMessage.tsx';
+
+/**
+ * This package's cockpit presence: the timeline card for ask_user_question,
+ * the web half of the TUI's renderCall and renderResult. The questionnaire
+ * itself reaches the cockpit as an extension UI dialog; this card is its
+ * record in the transcript.
+ */
+export const webPlugin = defineWebPlugin({
+  id: 'ask-user',
+  toolRenderers: [{ tools: ['ask_user_question'], message: AskUserQuestionToolMessage }],
+});

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