@emseepea/create-react-ui-server 0.0.34 → 0.0.36

package/initializer-dist/template/package.json

@@ -18,7 +18,7 @@
     "@emseepea/feedback": "0.2.14",
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.12.0",
+    "@emseepea/testing": "0.13.0",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
@@ -31,7 +31,7 @@
   },
   "private": true,
   "dependencies": {
-    "@emseepea/react": "0.2.4",
+    "@emseepea/react": "0.3.0",
     "@emseepea/server": "0.12.1",
     "@emseepea/tailwind": "0.1.0",
     "react": "19.2.8",

package/initializer-dist/template/src/mcp-app.tsx

@@ -1,6 +1,6 @@
-import { ResultCard, useMcpApp, useMcpTheme } from "@emseepea/react";
+import { ResultCard, useMcpAction, useMcpApp, useMcpTheme, type McpActionLifecycle } from "@emseepea/react";
 import { defineResultView, type ResultView as ResultViewModel } from "@emseepea/server/ui";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 interface PlantingPlanResult {
@@ -17,35 +17,30 @@ interface PlantingPlanResult {
 export function ResultApp() {
   const app = useMcpApp({ name: "Pea planting plan result", version: "1.0.0", parseResult: parsePlantingPlan });
   const theme = useMcpTheme(app.hostContext.theme);
-  const [action, setAction] = useState<"idle" | "sending" | "sent" | "error">("idle");
+  const action = useMcpAction(app);
 
   useEffect(() => {
     document.documentElement.dataset.emseepeaTheme = theme;
   }, [theme]);
 
   const view = resultView(app, action);
-  const act = async () => {
-    if (action !== "idle") return;
-    setAction("sending");
-    try {
-      await app.sendMessage("Show me growing tips for these pea varieties.");
-      setAction("sent");
-    } catch {
-      setAction("error");
-    }
-  };
 
   return (
     <>
       <h1>Pea planting plan result</h1>
-      <ResultCard view={view} headingLevel={2} idPrefix="pea-result" onAction={() => void act()} />
+      <ResultCard
+        view={view}
+        headingLevel={2}
+        idPrefix="pea-result"
+        onAction={({ id }) => void action.send(id, "Show me growing tips for these pea varieties.")}
+      />
     </>
   );
 }
 
 function resultView(
   app: ReturnType<typeof useMcpApp<PlantingPlanResult>>,
-  action: "idle" | "sending" | "sent" | "error",
+  action: McpActionLifecycle,
 ): ResultViewModel {
   const base = {
     id: "pea-planting-plan-result",
@@ -75,13 +70,13 @@ function resultView(
     id: "growing-tips",
     label: "Ask for growing tips",
     accessibleName: "Ask for growing tips for these varieties",
-    disabled: action !== "idle",
+    disabled: action.status !== "idle",
   }];
-  const actionState = action === "sending"
-    ? { kind: "sending" as const, status: "Asking ChatGPT: Show me growing tips for these pea varieties.", focusTarget: "status" as const }
-    : action === "sent"
-      ? { kind: "sent" as const, status: "Asked ChatGPT: Show me growing tips for these pea varieties.", focusTarget: "status" as const }
-      : action === "error"
+  const actionState = action.status === "sending"
+    ? { kind: "sending" as const, status: `Asking ChatGPT: ${action.activePrompt}`, focusTarget: "status" as const }
+    : action.status === "sent"
+      ? { kind: "sent" as const, status: `Asked ChatGPT: ${action.activePrompt}`, focusTarget: "status" as const }
+      : action.status === "error"
         ? { kind: "error" as const, status: "Growing tips could not be requested. Ask in the chat instead.", focusTarget: "status" as const }
         : {
             kind: app.resultRevision > 1 ? "updated" as const : count === 0 ? "empty" as const : "ready" as const,

package/initializer-dist/template/test/server.test.mjs

@@ -82,6 +82,7 @@ test("the MCP Apps card completes initialization before rendering a result", asy
   await page.setContent("<iframe title=\"Pea planting plan result\"></iframe>");
   await page.evaluate(() => {
     window.receivedAppMessages = [];
+    window.pendingAppMessages = [];
     window.addEventListener("message", (event) => {
       window.receivedAppMessages.push(event.data);
       if (event.data?.method === "ui/initialize") {
@@ -105,7 +106,7 @@ test("the MCP Apps card completes initialization before rendering a result", asy
         }, "*");
       }
       if (event.data?.method === "ui/message") {
-        window.pendingAppMessage = { source: event.source, id: event.data.id };
+        window.pendingAppMessages.push({ source: event.source, id: event.data.id });
       }
     });
   });
@@ -160,14 +161,60 @@ test("the MCP Apps card completes initialization before rendering a result", asy
   assert.equal(await frame.locator("html").getAttribute("data-emseepea-theme"), "dark");
   assert.equal(await frame.evaluate((node) => node === document.querySelector("[data-emseepea-part='status']"), statusNode), true);
 
-  await frame.locator("button").press("Enter");
+  await frame.locator("button").evaluate((button) => {
+    button.click();
+    button.click();
+  });
   await status.filter({ hasText: "Asking ChatGPT: Show me growing tips for these pea varieties." }).waitFor();
   assert.equal(await frame.locator("button").isDisabled(), true);
   await page.waitForFunction(() => window.receivedAppMessages.some((message) => message?.method === "ui/message"));
-  const sent = await page.evaluate(() => window.receivedAppMessages.find((message) => message?.method === "ui/message"));
-  assert.equal(sent.params.content[0].text, "Show me growing tips for these pea varieties.");
-  await page.evaluate(() => window.pendingAppMessage.source.postMessage({
-    jsonrpc: "2.0", id: window.pendingAppMessage.id, result: {},
+  const sent = await page.evaluate(() => window.receivedAppMessages.filter((message) => message?.method === "ui/message"));
+  assert.equal(sent.length, 1);
+  assert.equal(sent[0].params.content[0].text, "Show me growing tips for these pea varieties.");
+
+  await page.evaluate(() => document.querySelector("iframe").contentWindow.postMessage({
+    jsonrpc: "2.0", method: "ui/notifications/tool-result", params: { structuredContent: {
+      title: "Autumn peas",
+      matchingCount: 1,
+      varieties: [
+        { name: "Early Onward", growthHabit: "climbing", peaType: "shelling" },
+      ],
+      notice: "No report was sent or stored.",
+    } },
+  }, "*"));
+  await status.filter({ hasText: "Preview updated: 1 sample pea variety matches." }).waitFor();
+  assert.equal(await frame.locator("button").isDisabled(), false);
+  await page.evaluate(() => window.pendingAppMessages[0].source.postMessage({
+    jsonrpc: "2.0", id: window.pendingAppMessages[0].id, result: {},
+  }, "*"));
+  await page.waitForTimeout(50);
+  assert.equal(await status.textContent(), "Preview updated: 1 sample pea variety matches.");
+
+  await frame.locator("button").press("Enter");
+  await page.waitForFunction(() => window.pendingAppMessages.length === 2);
+  await page.evaluate(() => window.pendingAppMessages[1].source.postMessage({
+    jsonrpc: "2.0", id: window.pendingAppMessages[1].id, error: { code: -32603, message: "Rejected" },
+  }, "*"));
+  await status.filter({ hasText: "Growing tips could not be requested. Ask in the chat instead." }).waitFor();
+  assert.equal(await frame.locator("[data-emseepea-part='status']").evaluate((element) => element === document.activeElement), true);
+
+  await page.evaluate(() => document.querySelector("iframe").contentWindow.postMessage({
+    jsonrpc: "2.0", method: "ui/notifications/tool-result", params: { structuredContent: {
+      title: "Winter peas",
+      matchingCount: 1,
+      varieties: [
+        { name: "Meteor", growthHabit: "bush", peaType: "shelling" },
+      ],
+      notice: "No report was sent or stored.",
+    } },
+  }, "*"));
+  await status.filter({ hasText: "Preview updated: 1 sample pea variety matches." }).waitFor();
+  await frame.locator("button").press("Enter");
+  await page.waitForFunction(() => window.pendingAppMessages.length === 3);
+  const finalSent = await page.evaluate(() => window.receivedAppMessages.filter((message) => message?.method === "ui/message").at(-1));
+  assert.equal(finalSent.params.content[0].text, "Show me growing tips for these pea varieties.");
+  await page.evaluate(() => window.pendingAppMessages[2].source.postMessage({
+    jsonrpc: "2.0", id: window.pendingAppMessages[2].id, result: {},
   }, "*"));
   await status.filter({ hasText: "Asked ChatGPT: Show me growing tips for these pea varieties." }).waitFor();
   assert.equal(await frame.locator("[data-emseepea-part='status']").evaluate((element) => element === document.activeElement), true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emseepea/create-react-ui-server",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "Create an Em See Pea server with an accessible React form.",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@emseepea/feedback": "0.2.14",
-    "@emseepea/react": "0.2.4",
+    "@emseepea/react": "0.3.0",
     "@emseepea/server": "0.12.1",
     "@emseepea/tailwind": "0.1.0",
     "react": "19.2.8",
@@ -27,7 +27,7 @@
     "@emseepea/example-ui-shared": "0.0.0",
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.12.0",
+    "@emseepea/testing": "0.13.0",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",