@alexleekt/pi-ask-user-glimpse 0.4.1 → 0.5.0

package/package.json

@@ -1,11 +1,12 @@
 {
     "name": "@alexleekt/pi-ask-user-glimpse",
-    "version": "0.4.1",
-    "description": "Pi extension that replaces ask_user with rich native WebView dialogs via glimpseui and shadcn/ui",
+    "version": "0.5.0",
+    "description": "Ask better questions. Get better answers. Rich native WebView dialogs for the Pi agent.",
     "type": "module",
     "keywords": [
         "pi-package",
         "pi-extension",
+        "pi",
         "glimpseui",
         "ask_user",
         "interactive"
@@ -32,7 +33,6 @@
         "index.ts",
         "constants",
         "tool",
-        "fallback",
         "shared",
         "types",
         "dist",
@@ -42,26 +42,73 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "npm run build:css && npm run build:webview",
-        "build:css": "npx tailwindcss -c ./webview/tailwind.config.js -i ./webview/src/index.css -o ./webview/src/index.generated.css --content './webview/index.html,./webview/src/**/*.{js,ts,jsx,tsx}'",
-        "build:webview": "npx vite build --config ./webview/vite.config.ts",
+        "build": "wireit",
+        "build:css": "wireit",
+        "build:webview": "wireit",
         "typecheck": "tsc --noEmit",
         "check": "npm pack --dry-run",
         "prepack": "npm run build",
         "dev:webview": "npx vite --config ./webview/vite.config.ts",
-        "validate": "npx tsx scripts/validate.ts",
-        "validate:gui": "npx tsx scripts/validate.ts --gui",
-        "test:with-context": "npx tsx scripts/test-with-context.ts"
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:coverage": "vitest run --coverage",
+        "test:e2e": "playwright test",
+        "test:e2e:ui": "playwright test --ui",
+        "validate": "test -f dist/index.html && grep -q 'ASK_USER_PAYLOAD' dist/index.html && echo \"✓ dist/index.html ready\" || echo \"✗ Run npm run build first\"",
+        "validate:gui": "echo \"validate:gui requires manual testing with pi extension load\""
+    },
+    "wireit": {
+        "build": {
+            "dependencies": [
+                "build:css",
+                "build:webview"
+            ]
+        },
+        "build:css": {
+            "command": "npx tailwindcss -c ./webview/tailwind.config.js -i ./webview/src/index.css -o ./webview/src/index.generated.css --content './webview/index.html,./webview/src/**/*.{js,ts,jsx,tsx}'",
+            "files": [
+                "./webview/src/**/*.css",
+                "./webview/src/**/*.{ts,tsx,js,jsx}",
+                "./webview/tailwind.config.js",
+                "./webview/postcss.config.js",
+                "./webview/index.html"
+            ],
+            "output": [
+                "./webview/src/index.generated.css"
+            ]
+        },
+        "build:webview": {
+            "command": "npx vite build --config ./webview/vite.config.ts",
+            "files": [
+                "./webview/src/**/*.{ts,tsx}",
+                "./webview/index.html",
+                "./webview/vite.config.ts",
+                "./webview/tsconfig.json",
+                "./webview/postcss.config.js",
+                "./webview/src/index.generated.css"
+            ],
+            "output": [
+                "./dist/index.html"
+            ],
+            "dependencies": [
+                "build:css"
+            ]
+        }
     },
     "dependencies": {
         "@alexleekt/pi-shared": "^0.1.0",
         "glimpseui": "^0.8.1"
     },
     "devDependencies": {
+        "@playwright/test": "^1.60.0",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.0",
+        "@vitest/coverage-v8": "^4.1.7",
         "autoprefixer": "^10.4.20",
+        "jsdom": "^29.1.1",
         "marked": "^15.0.12",
         "mermaid": "^11.15.0",
         "playwright": "^1.60.0",
@@ -71,7 +118,9 @@
         "tailwindcss": "^3.4.14",
         "typescript": "^5.6.0",
         "vite": "^5.4.0",
-        "vite-plugin-singlefile": "^2.0.0"
+        "vite-plugin-singlefile": "^2.0.0",
+        "vitest": "^4.1.7",
+        "wireit": "^0.14.12"
     },
     "peerDependencies": {
         "@earendil-works/pi-ai": "*",

package/shared/ask-user.ts

@@ -9,6 +9,7 @@
 export interface QuestionOption {
     title: string;
     description?: string;
+    recommended?: boolean;
 }
 
 export interface Question {
@@ -25,6 +26,7 @@ export interface AskUserPayload {
     type: "single-select" | "multi-select" | "questionnaire" | "freeform";
     question: string;
     context?: string;
+    contextFormat?: "markdown" | "html";
     options: QuestionOption[];
     questions?: Question[];
     allowMultiple: boolean;
@@ -42,3 +44,6 @@ export interface QuestionnaireDetail {
     kind: "selection" | "freeform";
     comment?: string;
 }
+
+/** Sentinel title used for the freeform "not listed" option in select dialogs. */
+export const FREEFORM_OPTION_TITLE = "My answer isn't listed above";

package/tool/ask-user.ts

@@ -4,8 +4,12 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { prompt } from "glimpseui";
-import { terminalPrompt } from "../fallback/terminal-prompt.js";
-import type { AnimationLevel, AskUserPayload, Question, ThemeMode } from "../shared/ask-user.js";
+import type {
+    AnimationLevel,
+    AskUserPayload,
+    Question,
+    ThemeMode,
+} from "../shared/ask-user.js";
 import { formatResponse } from "./response-formatter.js";
 
 const _require = createRequire(import.meta.url);
@@ -13,6 +17,9 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 import { STOPWORDS } from "../constants/stopwords.js";
 
+/** Warn once per process when Glimpse is unavailable. */
+let _warnedGlimpseUnavailable = false;
+
 /** Extract a short title from a question by removing stopwords.
  *  Falls back to first 5 words if nothing meaningful remains.
  */
@@ -39,12 +46,17 @@ function summarizeTitle(question: string, maxWords = 3): string {
 
 function resolveWebviewHtml(): string {
     const distPath = join(__dirname, "..", "dist", "index.html");
+    console.log(`[pi-ask-user-glimpse] Loading webview from: ${distPath}`);
     try {
-        return readFileSync(distPath, "utf-8");
+        const html = readFileSync(distPath, "utf-8");
+        const hasNewCode = html.includes('items-center justify-between');
+        console.log(`[pi-ask-user-glimpse] Webview has new code: ${hasNewCode}`);
+        return html;
     } catch {
         // Fallback for development: resolve from package root
         const pkgRoot = dirname(_require.resolve("../package.json"));
         const fallbackPath = join(pkgRoot, "dist", "index.html");
+        console.log(`[pi-ask-user-glimpse] Fallback: ${fallbackPath}`);
         try {
             return readFileSync(fallbackPath, "utf-8");
         } catch (err) {
@@ -62,7 +74,11 @@ function resolveWebviewHtml(): string {
 export interface AskUserParams {
     question: string;
     context?: string;
-    options?: (string | { title: string; description?: string })[];
+    contextFormat?: "markdown" | "html";
+    options?: (
+        | string
+        | { title: string; description?: string; recommended?: boolean }
+    )[];
     questions?: Question[];
     allowMultiple?: boolean;
     allowFreeform?: boolean;
@@ -99,7 +115,11 @@ export async function askUserHandler(
 
     const normalizedOptions = (params.options ?? []).map((opt) => {
         if (typeof opt === "string") return { title: opt };
-        return { title: opt.title, description: opt.description };
+        return {
+            title: opt.title,
+            description: opt.description,
+            recommended: opt.recommended,
+        };
     });
 
     const hasOptions = normalizedOptions.length > 0;
@@ -135,6 +155,7 @@ export async function askUserHandler(
         type: payloadType,
         question,
         context,
+        contextFormat: params.contextFormat,
         options: normalizedOptions,
         questions: params.questions,
         allowMultiple,
@@ -166,17 +187,17 @@ export async function askUserHandler(
             ? `Pi · ${sessionName} · ${questionTitle}`
             : `Pi · ${questionTitle}`;
 
-        const options: Record<string, unknown> = {
+        const windowOptions: Record<string, unknown> = {
             width: 1200,
             height: 900,
             title: title.length > 60 ? `${title.slice(0, 57)}…` : title,
         };
 
         if (params.followCursor) {
-            options.followCursor = true;
+            windowOptions.followCursor = true;
         }
 
-        result = (await prompt(html, options)) as Record<
+        result = (await prompt(html, windowOptions)) as Record<
             string,
             unknown
         > | null;
@@ -190,17 +211,30 @@ export async function askUserHandler(
             });
         }
     } catch (err) {
-        // Glimpse unavailable — fall back to terminal prompt
-        const fallbackResult = await terminalPrompt(
-            payload,
-            ctx.hasUI ? ctx.ui : undefined,
-        );
-        if (fallbackResult === null) {
-            cancelled = true;
-        } else {
-            result = fallbackResult;
+        // Glimpse unavailable — fast-exit and warn once
+        if (!_warnedGlimpseUnavailable) {
+            _warnedGlimpseUnavailable = true;
+            console.warn(
+                "[pi-ask-user-glimpse] Glimpse unavailable — " +
+                    "ask_user will return errors. " +
+                    "Install glimpseui or run in a UI-enabled environment.",
+            );
         }
-        error = err instanceof Error ? err.message : String(err);
+        return {
+            content: [
+                {
+                    type: "text" as const,
+                    text: "No UI available for ask_user dialog. Please ask the user directly in free-form text.",
+                },
+            ],
+            details: {
+                question: params.question,
+                options: normalizedOptions.map((o) => o.title),
+                response: null,
+                cancelled: true,
+                error: "No UI available",
+            },
+        };
     }
 
     return formatResponse(

package/tool/response-formatter.ts

@@ -60,6 +60,7 @@ function buildResponse(
                       };
                   })
                 : [],
+            additionalComments: pickString(result.additionalComments),
         };
     }
 
@@ -79,14 +80,14 @@ function buildResponse(
 
 function responseToText(response: AskResponse): string {
     if (response.kind === "freeform") {
-        return response.text ?? "";
+        return response.text?.trim() || "No response";
     }
     const lines: string[] = [];
     const selections = response.selections ?? [];
     if (selections.length > 0) lines.push(selections.join(", "));
     if (response.comment) lines.push(`Comment: ${response.comment}`);
     if (response.additionalComments) lines.push(`Additional Comments: ${response.additionalComments}`);
-    return lines.join("\n\n");
+    return lines.join("\n\n") || "No response";
 }
 
 export function formatResponse(

package/fallback/terminal-prompt.ts

@@ -1,191 +0,0 @@
-import type { ExtensionUIContext } from "@earendil-works/pi-coding-agent";
-import type { AskUserPayload, Question } from "../shared/ask-user.js";
-
-export async function terminalPrompt(
-    payload: AskUserPayload,
-    ui: ExtensionUIContext | undefined,
-): Promise<Record<string, unknown> | null> {
-    if (!ui) {
-        return null;
-    }
-
-    // Questionnaire mode: structured questions with per-question options
-    if (payload.questions && payload.questions.length > 0) {
-        return questionnaireFallback(
-            payload.questions,
-            payload.allowComment,
-            ui,
-            payload.context,
-        );
-    }
-
-    // Legacy flat options mode
-    return flatOptionsFallback(payload, ui);
-}
-
-type QuestionnaireAnswer = {
-    question: string;
-    answer: string;
-    kind: "selection" | "freeform";
-    comment?: string;
-};
-
-async function questionnaireFallback(
-    questions: Question[],
-    allowComment: boolean,
-    ui: ExtensionUIContext,
-    context?: string,
-): Promise<Record<string, unknown> | null> {
-    const answers: QuestionnaireAnswer[] = [];
-
-    for (const q of questions) {
-        const prompt = context ? `${q.title}\n\nContext: ${context}` : q.title;
-        let answer: string | undefined;
-
-        if (q.options && q.options.length > 0) {
-            const labels = q.options.map((opt, i) => `${i + 1}. ${opt.title}`);
-
-            if (q.allowMultiple) {
-                const selections: string[] = [];
-                while (true) {
-                    const remaining = labels.filter((_, i) => {
-                        const title = q.options?.[i]?.title;
-                        return title ? !selections.includes(title) : false;
-                    });
-                    if (remaining.length === 0) break;
-
-                    const choice = await ui.select(
-                        `${prompt}\nSelected: ${selections.join(", ") || "none"}\nChoose one (or cancel to finish)`,
-                        remaining,
-                    );
-                    if (choice === undefined) break;
-
-                    const idx = labels.indexOf(choice);
-                    const title = q.options[idx]?.title;
-                    if (title && !selections.includes(title)) {
-                        selections.push(title);
-                    }
-                }
-                answer = selections.join(", ");
-            } else {
-                const choice = await ui.select(prompt, labels);
-                if (choice === undefined) return null;
-                const idx = labels.indexOf(choice);
-                answer = q.options[idx]?.title;
-            }
-        } else {
-            answer = await ui.input(
-                prompt + (q.description ? `\n${q.description}` : ""),
-            );
-        }
-
-        if (answer === undefined) return null;
-
-        let comment: string | undefined;
-        if (allowComment) {
-            comment =
-                (await ui.input(
-                    `Comment for "${q.title}" (press Enter to skip):`,
-                )) ?? undefined;
-        }
-
-        answers.push({
-            question: q.title,
-            answer,
-            kind: q.options && q.options.length > 0 ? "selection" : "freeform",
-            comment,
-        });
-    }
-
-    return {
-        kind: "questionnaire",
-        selections: answers.map((a) => `${a.question}: ${a.answer}`),
-        questionnaireDetails: answers,
-    };
-}
-
-async function flatOptionsFallback(
-    payload: AskUserPayload,
-    ui: ExtensionUIContext,
-): Promise<Record<string, unknown> | null> {
-    const {
-        question,
-        context,
-        options,
-        allowMultiple,
-        allowFreeform,
-        allowComment,
-    } = payload;
-
-    const prompt = context ? `${question}\n\nContext: ${context}` : question;
-
-    if (options.length === 0) {
-        const text = await ui.input(prompt);
-        if (text === undefined) return null;
-        return { kind: "freeform", text };
-    }
-    const optionLabels = options.map((opt, i) => `${i + 1}. ${opt.title}`);
-    if (allowFreeform) {
-        optionLabels.push("Other (freeform)");
-    }
-
-    if (allowMultiple) {
-        const selections: string[] = [];
-        while (true) {
-            const remaining = optionLabels.filter(
-                (_, i) => !selections.includes(options[i]?.title ?? ""),
-            );
-            if (remaining.length === 0) break;
-
-            const choice = await ui.select(
-                `${prompt}\nSelected: ${selections.join(", ") || "none"}\nChoose one (or cancel to finish)`,
-                remaining,
-            );
-            if (choice === undefined) break;
-
-            const idx = optionLabels.indexOf(choice);
-            if (idx >= options.length) {
-                const text = await ui.input("Enter your answer:");
-                if (text?.trim()) {
-                    selections.push(`Other: ${text.trim()}`);
-                }
-                continue;
-            }
-            const title = options[idx]?.title;
-            if (title && !selections.includes(title)) {
-                selections.push(title);
-            }
-        }
-
-        let comment: string | undefined;
-        if (allowComment && selections.length > 0) {
-            comment =
-                (await ui.input("Optional comment (press Enter to skip):")) ??
-                undefined;
-        }
-
-        return { kind: "selection", selections, comment };
-    } else {
-        const choice = await ui.select(prompt, optionLabels);
-        if (choice === undefined) return null;
-
-        const idx = optionLabels.indexOf(choice);
-        if (idx >= options.length) {
-            const text = await ui.input("Enter your answer:");
-            if (text === undefined) return null;
-            return { kind: "freeform", text };
-        }
-
-        const title = options[idx]?.title;
-        if (!title) return null;
-
-        let comment: string | undefined;
-        if (allowComment) {
-            comment =
-                (await ui.input("Optional comment (press Enter to skip):")) ??
-                undefined;
-        }
-
-        return { kind: "selection", selections: [title], comment };
-    }
-}