@emseepea/create-react-ui-server 0.0.31 → 0.0.33

package/initializer-dist/template/package.json

@@ -15,10 +15,10 @@
     "container:build": "docker build --tag emseepea-server:local ."
   },
   "devDependencies": {
-    "@emseepea/feedback": "0.2.13",
+    "@emseepea/feedback": "0.2.14",
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.11.3",
+    "@emseepea/testing": "0.11.4",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
@@ -31,9 +31,9 @@
   },
   "private": true,
   "dependencies": {
-    "@emseepea/react": "0.2.3",
-    "@emseepea/server": "0.12.0",
-    "@emseepea/tailwind": "0.0.2",
+    "@emseepea/react": "0.2.4",
+    "@emseepea/server": "0.12.1",
+    "@emseepea/tailwind": "0.1.0",
     "react": "19.2.8",
     "react-dom": "19.2.8"
   }

package/initializer-dist/template/src/capabilities/resource.pea-planting-plan-app.ts

@@ -1,38 +1,4 @@
-import { plantingPlanAppResourceUri } from "../ui-shared.js";
-import { defineResource, type AccessPolicy, type CapabilityModuleFactory } from "@emseepea/server";
-import { readFileSync } from "node:fs";
-import { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { ResultApp } from "../mcp-app.js";
+import type { AccessPolicy, CapabilityModuleFactory } from "@emseepea/server";
+import { plantingPlanAppResource } from "../pea-planting-plan-app-resource.js";
 
-const csp = { connectDomains: [], resourceDomains: [] };
-const legacyCsp = { connect_domains: [], resource_domains: [] };
-
-export default ((access) => defineResource({
-  name: "pea-planting-plan-app",
-  ...access,
-  uri: plantingPlanAppResourceUri,
-  title: "Pea planting plan result",
-  description: "An accessible result card for the pea planting-plan preview tool.",
-  mimeType: "text/html;profile=mcp-app",
-  handler: () => ({
-    contents: [{
-      uri: plantingPlanAppResourceUri,
-      mimeType: "text/html;profile=mcp-app",
-      text: appHtml,
-      _meta: {
-        ui: { prefersBorder: true, csp },
-        "openai/widgetPrefersBorder": true,
-        "openai/widgetCSP": legacyCsp,
-      },
-    }],
-  }),
-})) satisfies CapabilityModuleFactory<AccessPolicy>;
-
-const appScript = readFileSync(new URL("../mcp-app-client.js", import.meta.url), "utf8").replaceAll("</script", "<\\/script");
-const appHtml = `<!doctype html><html lang="en"><head><meta charset="utf-8">` +
-  `<meta name="viewport" content="width=device-width, initial-scale=1">` +
-  `<title>Pea planting plan result</title><style>` +
-  `button{min-block-size:24px} :focus-visible{outline:2px solid currentColor;outline-offset:2px}` +
-  `</style></head><body><main id="app">` +
-  `${renderToString(createElement(ResultApp))}</main><script type="module">${appScript}</script></body></html>`;
+export default ((access) => plantingPlanAppResource(access).resource) satisfies CapabilityModuleFactory<AccessPolicy>;

package/initializer-dist/template/src/capabilities/tool.preview-planting-plan.ts

@@ -1,4 +1,5 @@
 import { createPreviewPlantingPlanTool } from "../ui-shared.js";
 import type { AccessPolicy, CapabilityModuleFactory } from "@emseepea/server";
+import { plantingPlanAppResource } from "../pea-planting-plan-app-resource.js";
 
-export default ((access) => createPreviewPlantingPlanTool(access, true)) satisfies CapabilityModuleFactory<AccessPolicy>;
+export default ((access) => createPreviewPlantingPlanTool(access, plantingPlanAppResource(access).toolMetadata)) satisfies CapabilityModuleFactory<AccessPolicy>;

package/initializer-dist/template/src/pea-planting-plan-app-resource.ts

@@ -0,0 +1,28 @@
+import { plantingPlanAppResourceUri } from "./ui-shared.js";
+import { defineMcpAppResource, type AccessPolicy, type McpAppResource } from "@emseepea/server";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ResultApp } from "./mcp-app.js";
+
+const definitions = new WeakMap<AccessPolicy, McpAppResource>();
+
+export function plantingPlanAppResource(access: AccessPolicy): McpAppResource {
+  let definition = definitions.get(access);
+  if (!definition) {
+    definition = defineMcpAppResource({
+      name: "pea-planting-plan-app",
+      ...access,
+      uri: plantingPlanAppResourceUri,
+      title: "Pea planting plan result",
+      description: "An accessible result card for the pea planting-plan preview tool.",
+      language: "en",
+      bodyMarkup: `<main id="app">${renderToString(createElement(ResultApp))}</main>`,
+      styles: "button{min-block-size:24px} :focus-visible{outline:2px solid currentColor;outline-offset:2px}",
+      bundleUrl: new URL("./mcp-app-client.js", import.meta.url),
+      csp: { connectDomains: [], resourceDomains: [] },
+      prefersBorder: true,
+    });
+    definitions.set(access, definition);
+  }
+  return definition;
+}

package/initializer-dist/template/src/ui-shared.tsx

@@ -49,17 +49,14 @@ export function previewPlantingPlan(input: z.output<typeof inputSchema>) {
 
 export function createPreviewPlantingPlanTool(
   access: AccessPolicy = { access: "public" },
-  appResource = false,
+  appResourceMetadata?: Readonly<Record<string, unknown>>,
 ) {
   return defineTool({
     name: "preview-planting-plan",
     ...access,
     title: "Preview a Pea Planting Plan",
     description: "Preview a sample pea planting plan without sending, storing, or changing anything.",
-    ...(appResource ? { _meta: {
-      ui: { resourceUri: plantingPlanAppResourceUri },
-      "openai/outputTemplate": plantingPlanAppResourceUri,
-    } } : {}),
+    ...(appResourceMetadata ? { _meta: appResourceMetadata } : {}),
     inputSchema,
     outputSchema,
     handler: (input) => ({ data: previewPlantingPlan(input) }),

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

@@ -51,6 +51,7 @@ test("publishes the standards-first MCP Apps resource contract", async (t) => {
   assert.equal(resource.mimeType, "text/html;profile=mcp-app");
   const [content] = (await client.readResource({ uri: resource.uri })).contents;
   assert.equal(content.mimeType, "text/html;profile=mcp-app");
+  assert.deepEqual(resource._meta.ui, content._meta.ui);
   assert.deepEqual(content._meta.ui, {
     prefersBorder: true,
     csp: { connectDomains: [], resourceDomains: [] },
@@ -63,6 +64,11 @@ test("publishes the standards-first MCP Apps resource contract", async (t) => {
   assert.match(content.text, /ui\/notifications\/initialized/);
   assert.match(content.text, /ui\/notifications\/tool-result/);
   assert.match(content.text, /ui\/notifications\/tool-cancelled/);
+  assert.match(content.text, /<html lang="en">/);
+  assert.match(content.text, /<title>Pea planting plan result<\/title>/);
+  assert.match(content.text, /<meta name="viewport"/);
+  assert.match(content.text, /<main id="app">/);
+  assert.match(content.text, /<h1>/);
 });
 
 test("the MCP Apps card completes initialization before rendering a result", async (t) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emseepea/create-react-ui-server",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "Create an Em See Pea server with an accessible React form.",
   "license": "MIT",
   "type": "module",
@@ -18,16 +18,16 @@
     "prepack": "npm run build:initializer"
   },
   "devDependencies": {
-    "@emseepea/feedback": "0.2.13",
-    "@emseepea/react": "0.2.3",
-    "@emseepea/server": "0.12.0",
-    "@emseepea/tailwind": "0.0.2",
+    "@emseepea/feedback": "0.2.14",
+    "@emseepea/react": "0.2.4",
+    "@emseepea/server": "0.12.1",
+    "@emseepea/tailwind": "0.1.0",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "@emseepea/example-ui-shared": "0.0.0",
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.11.3",
+    "@emseepea/testing": "0.11.4",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",