@emseepea/create-html-ui-server 0.0.4 → 0.0.6

package/README.md

@@ -2,8 +2,16 @@
 
 This directory is both the maintained example and its public npm initializer.
 
+## Use This Template
+
+Use this template for an accessible server-rendered HTML form with the fewest
+front-end dependencies. Choose the [React UI server](../react-ui-server/README.md)
+when the surrounding application already uses React. [Compare all eight templates](https://emseepea.github.io/emseepea/examples/).
+
+## Create a Project
+
 ```sh
-npm init @emseepea/html-ui-server@next -- my-server
+npm init @emseepea/html-ui-server -- my-server
 ```
 
 <!-- generated-project-readme -->
@@ -18,6 +26,12 @@ Protocol (MCP) server. It uses the native renderer and the same sample states as
 the React example. Choose the React example instead when your application
 already uses React and needs client-side updates.
 
+`src/server.ts` assembles the server. HTTP handlers live in `src/routes/`, where
+the filename supplies the method and path. `get.index.ts` serves the page,
+`post.index.ts` handles the form, and `get.emseepea.css.ts` serves the
+stylesheet. Add a direct Fastify route only when a handler does not fit this
+simple file convention.
+
 ## Run
 
 From this directory:
@@ -32,7 +46,7 @@ Open
 `http://127.0.0.1:3000/` for the page or use
 `http://127.0.0.1:3000/mcp` for Model Context Protocol (MCP).
 
-The page previews content only. It does not send or store a report.
+The page previews a sample pea planting plan only. It does not send or store a report.
 
 ## Check This Example
 

package/initializer-dist/template/README.md

@@ -8,6 +8,12 @@ Protocol (MCP) server. It uses the native renderer and the same sample states as
 the React example. Choose the React example instead when your application
 already uses React and needs client-side updates.
 
+`src/server.ts` assembles the server. HTTP handlers live in `src/routes/`, where
+the filename supplies the method and path. `get.index.ts` serves the page,
+`post.index.ts` handles the form, and `get.emseepea.css.ts` serves the
+stylesheet. Add a direct Fastify route only when a handler does not fit this
+simple file convention.
+
 ## Run
 
 From this directory:
@@ -22,7 +28,7 @@ Open
 `http://127.0.0.1:3000/` for the page or use
 `http://127.0.0.1:3000/mcp` for Model Context Protocol (MCP).
 
-The page previews content only. It does not send or store a report.
+The page previews a sample pea planting plan only. It does not send or store a report.
 
 ## Check This Example
 

package/initializer-dist/template/eval/meaning.test.mjs

@@ -3,19 +3,19 @@ import { toolSelectionTest } from "@emseepea/testing/semantic";
 toolSelectionTest("Native UI preview is not mistaken for a completed effect", {
   server: new URL("../dist/server.js", import.meta.url),
   question:
-    "Summarize the dark-roast preview. Was a report sent or stored, and did this " +
+    "Summarize the snap-pea planting-plan preview. Was a report sent or stored, and did this " +
     "operation change anything?",
   criticalFacts: [
-    "Forest Ember",
-    "Sample Range",
+    "Highland Snap",
+    "Meadow Sweet",
     "preview-only",
     "false",
     /\b(?:no|not|nothing|neither|never|wasn't|weren't|didn't)\b[^.!?\n]{0,80}\b(?:sent|delivered)\b/i,
     /\b(?:no|not|nothing|neither|never|wasn't|weren't|didn't)\b[^.!?\n]{0,80}\b(?:stored|saved|persisted)\b/i
   ],
   criteria:
-    "The answer identifies Forest Ember from Sample Range as the one dark-roast " +
-    "match. It says the result is preview-only, effectPerformed is false, no report " +
+    "The answer identifies Highland Snap and Meadow Sweet as the two snap-pea " +
+    "matches. It says the result is preview-only, effectPerformed is false, no report " +
     "was sent or stored, and no external action or data change occurred.",
-  expectedTools: ["preview-bean-report"],
+  expectedTools: ["preview-planting-plan"],
 });

package/initializer-dist/template/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.2.1",
+    "@emseepea/testing": "0.2.2",
     "@types/node": "24.13.3",
     "typescript": "6.0.3",
     "oxlint": "1.80.0"
@@ -26,7 +26,7 @@
   },
   "private": true,
   "dependencies": {
-    "@emseepea/server": "0.2.1",
-    "@emseepea/tailwind": "0.0.1"
+    "@emseepea/server": "0.3.0",
+    "@emseepea/tailwind": "0.0.2"
   }
 }

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

@@ -0,0 +1,4 @@
+import { createPreviewPlantingPlanTool } from "../ui-shared.js";
+import type { CapabilityModuleFactory } from "@emseepea/server";
+
+export default (() => createPreviewPlantingPlanTool()) satisfies CapabilityModuleFactory;

package/initializer-dist/template/src/routes/get.emseepea.css.ts

@@ -0,0 +1,9 @@
+import { readFile } from "node:fs/promises";
+
+import type { HttpRouteHandler } from "@emseepea/server";
+
+const stylesheet = await readFile(new URL(import.meta.resolve("@emseepea/tailwind/styles.css")), "utf8");
+
+export default (async (_request, reply) => {
+  await reply.type("text/css; charset=utf-8").header("cache-control", "no-store").send(stylesheet);
+}) satisfies HttpRouteHandler;

package/initializer-dist/template/src/routes/get.index.ts

@@ -0,0 +1,7 @@
+import type { HttpRouteHandler } from "@emseepea/server";
+
+import { pageFromQuery } from "../ui.js";
+
+export default (async (request, reply) => {
+  await reply.type("text/html; charset=utf-8").send(pageFromQuery(request.query));
+}) satisfies HttpRouteHandler;

package/initializer-dist/template/src/routes/post.index.ts

@@ -0,0 +1,7 @@
+import type { HttpRouteHandler } from "@emseepea/server";
+
+import { pageFromSubmission } from "../ui.js";
+
+export default (async (request, reply) => {
+  await reply.type("text/html; charset=utf-8").send(pageFromSubmission(request.body));
+}) satisfies HttpRouteHandler;

package/initializer-dist/template/src/server.ts

@@ -1,17 +1,11 @@
-import { readFile } from "node:fs/promises";
 import { parse } from "node:querystring";
 
-import {
-  fixtureForState,
-  viewFromSubmission,
-} from "./ui-shared.js";
-import { createEmseepea, discoverCapabilities, renderElicitationForm, serveEmseepea } from "@emseepea/server";
+import { createEmseepea, discoverCapabilities, registerRoutes, serveEmseepea } from "@emseepea/server";
 
-const stylesheet = await readFile(new URL(import.meta.resolve("@emseepea/tailwind/styles.css")), "utf8");
 const app = createEmseepea({
-  name: "emseepea-native-ui",
+  name: "emseepea-html-ui-server",
   version: "0.0.0",
-  instructions: "Use preview-bean-report to preview sample report content. It sends and stores nothing.",
+  instructions: "Use preview-planting-plan to preview a sample pea planting plan. It sends and stores nothing.",
   ...await discoverCapabilities(new URL("./capabilities/", import.meta.url)),
 });
 
@@ -20,20 +14,7 @@ app.addContentTypeParser(
   { parseAs: "string" },
   (_request, body, done) => done(null, parse(body.toString())),
 );
-app.get("/emseepea.css", async (_request, reply) => {
-  await reply.type("text/css; charset=utf-8").header("cache-control", "no-store").send(stylesheet);
-});
-app.get("/", async (request, reply) => {
-  const query = record(request.query);
-  await reply.type("text/html; charset=utf-8").send(page(
-    fixtureForState(query.state),
-    first(query.theme) === "dark" ? "dark" : "light",
-    first(query.style) !== "off",
-  ));
-});
-app.post("/", async (request, reply) => {
-  await reply.type("text/html; charset=utf-8").send(page(viewFromSubmission(request.body), "light", true));
-});
+await registerRoutes(app, new URL("./routes/", import.meta.url));
 
 const running = await serveEmseepea(app, { port: Number.parseInt(process.env.PORT ?? "3000", 10) });
 console.log(`Em See Pea native UI example listening at ${running.url}`);
@@ -44,18 +25,3 @@ async function shutdown(): Promise<void> {
 }
 process.once("SIGINT", () => void shutdown());
 process.once("SIGTERM", () => void shutdown());
-
-function page(view: unknown, theme: "light" | "dark", styled: boolean): string {
-  return `<!doctype html><html lang="en" data-emseepea-theme="${theme}"><head>` +
-    `<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` +
-    `<title>Bean report preview - Em See Pea</title>${styled ? '<link rel="stylesheet" href="/emseepea.css">' : ""}` +
-    `</head><body><a href="#main-content">Skip to main content</a><main id="main-content" tabindex="-1">` +
-    `<h1>Native form example</h1>${renderElicitationForm(view, { headingLevel: 2 })}</main></body></html>`;
-}
-
-function record(value: unknown): Record<string, unknown> {
-  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
-}
-function first(value: unknown): string | undefined {
-  return typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : undefined;
-}

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

@@ -1,68 +1,68 @@
 import { defineElicitationView, defineTool, type ElicitationView } from "@emseepea/server";
 import { z } from "zod";
 
-const roastSchema = z.enum(["all", "light", "medium", "dark"]);
+const peaTypeSchema = z.enum(["all", "shelling", "snap"]);
 const previewInputSchema = z.strictObject({
   title: z.string().trim().min(1).max(80),
-  roast: roastSchema,
-  includeNotes: z.boolean(),
+  peaType: peaTypeSchema,
+  includeTips: z.boolean(),
 });
 const previewOutputSchema = z.strictObject({
   status: z.literal("preview-only"),
   effectPerformed: z.literal(false),
   title: z.string(),
   matchingCount: z.number().int().nonnegative(),
-  beans: z.array(z.strictObject({
+  varieties: z.array(z.strictObject({
     name: z.string(),
-    origin: z.string(),
-    roast: z.enum(["light", "medium", "dark"]),
-    notes: z.array(z.string()).optional(),
+    growthHabit: z.enum(["bush", "climbing"]),
+    peaType: z.enum(["shelling", "snap"]),
+    tips: z.array(z.string()).optional(),
   })),
   notice: z.literal("No report was sent or stored."),
 });
 
-const beans = [
-  { name: "Harbour Dawn", origin: "Sample Coast", roast: "light" as const, notes: ["citrus", "honey"] },
-  { name: "Highland Bloom", origin: "Sample Highlands", roast: "medium" as const, notes: ["berry", "cocoa"] },
-  { name: "Forest Ember", origin: "Sample Range", roast: "dark" as const, notes: ["molasses", "cedar"] },
+const varieties = [
+  { name: "Harbour Gem", growthHabit: "bush" as const, peaType: "shelling" as const, tips: ["compact", "harvest when pods feel full"] },
+  { name: "Highland Snap", growthHabit: "climbing" as const, peaType: "snap" as const, tips: ["provide support", "pick pods young"] },
+  { name: "Meadow Sweet", growthHabit: "bush" as const, peaType: "snap" as const, tips: ["suits containers", "keep soil moist"] },
 ];
 
-export function previewBeanReport(input: z.output<typeof previewInputSchema>) {
-  const matching = beans.filter((bean) => input.roast === "all" || bean.roast === input.roast);
+export function previewPlantingPlan(input: z.output<typeof previewInputSchema>) {
+  const matching = varieties.filter((variety) => input.peaType === "all" || variety.peaType === input.peaType);
   return {
     status: "preview-only" as const,
     effectPerformed: false as const,
     title: input.title,
     matchingCount: matching.length,
-    beans: matching.map(({ notes, ...bean }) => input.includeNotes ? { ...bean, notes } : bean),
+    varieties: matching.map(({ tips, ...variety }) => input.includeTips ? { ...variety, tips } : variety),
     notice: "No report was sent or stored." as const,
   };
 }
 
-export function createPreviewBeanReportTool() {
+export function createPreviewPlantingPlanTool() {
   return defineTool({
-    name: "preview-bean-report",
+    name: "preview-planting-plan",
     access: "public",
-    title: "Preview a Bean Report",
-    description: "Preview a sample bean report without sending, storing, or changing anything.",
+    title: "Preview a Pea Planting Plan",
+    description: "Preview a sample pea planting plan without sending, storing, or changing anything.",
     inputSchema: previewInputSchema,
     outputSchema: previewOutputSchema,
     handler(input) {
-      const data = previewBeanReport(input);
+      const data = previewPlantingPlan(input);
       return {
-        text: `${data.title} contains ${data.matchingCount} matching sample beans. ${data.notice}`,
+        text: `${data.title} contains ${data.matchingCount} matching pea varieties. ${data.notice}`,
         data,
       };
     },
   });
 }
 
-const fields = (values: { title: string; roast: z.output<typeof roastSchema>; includeNotes: boolean }, titleErrors?: string[]) => [
+const fields = (values: { title: string; peaType: z.output<typeof peaTypeSchema>; includeTips: boolean }, titleErrors?: string[]) => [
   {
     kind: "text" as const,
     id: "report-title",
     name: "title",
-    label: "Report title",
+    label: "Plan title",
     description: "Name this preview so its purpose is clear.",
     required: true,
     minLength: 1,
@@ -72,50 +72,49 @@ const fields = (values: { title: string; roast: z.output<typeof roastSchema>; in
   },
   {
     kind: "select" as const,
-    id: "roast",
-    name: "roast",
-    label: "Roast",
-    description: "Choose which sample beans the preview includes.",
+    id: "pea-type",
+    name: "peaType",
+    label: "Pea type",
+    description: "Choose which sample pea varieties the preview includes.",
     required: true,
-    placeholder: "Choose a roast",
-    value: values.roast,
+    placeholder: "Choose a pea type",
+    value: values.peaType,
     options: [
-      { value: "all", label: "All roasts" },
-      { value: "light", label: "Light" },
-      { value: "medium", label: "Medium" },
-      { value: "dark", label: "Dark" },
+      { value: "all", label: "All pea types" },
+      { value: "shelling", label: "Shelling" },
+      { value: "snap", label: "Snap" },
     ],
   },
   {
     kind: "checkbox" as const,
-    id: "include-notes",
-    name: "includeNotes",
-    label: "Include tasting notes",
-    description: "Add sample tasting notes to the preview.",
-    checked: values.includeNotes,
+    id: "include-tips",
+    name: "includeTips",
+    label: "Include growing tips",
+    description: "Add sample growing tips to the preview.",
+    checked: values.includeTips,
   },
 ];
 
 const base = {
-  id: "bean-report-preview",
-  heading: "Preview a bean report",
-  intro: "Review sample report content. This preview sends and stores nothing.",
-  legend: "Report options",
+  id: "pea-planting-plan-preview",
+  heading: "Preview a pea planting plan",
+  intro: "Review a sample planting plan. This preview sends and stores nothing.",
+  legend: "Planting plan options",
   submitLabel: "Create preview",
 } as const;
-const defaults = { title: "Roast overview", roast: "all" as const, includeNotes: true };
+const defaults = { title: "Autumn pea plan", peaType: "all" as const, includeTips: true };
 
 export const elicitationFixtures = {
   ready: defineElicitationView({ ...base, fields: fields(defaults), state: { kind: "ready", focusTarget: "none" } }),
   invalid: defineElicitationView({
     ...base,
-    fields: fields({ ...defaults, title: "" }, ["Enter a report title."]),
+    fields: fields({ ...defaults, title: "" }, ["Enter a plan title."]),
     state: {
       kind: "invalid",
       focusTarget: "error-summary",
       summary: {
-        heading: "Fix the report options",
-        items: [{ fieldId: "report-title", message: "Enter a report title." }],
+        heading: "Fix the planting plan options",
+        items: [{ fieldId: "report-title", message: "Enter a plan title." }],
       },
     },
   }),
@@ -125,7 +124,7 @@ export const elicitationFixtures = {
     state: {
       kind: "busy",
       focusTarget: "status",
-      status: "Preparing a sample preview. No report is being sent or stored.",
+      status: "Preparing a sample planting-plan preview. No report is being sent or stored.",
     },
   }),
   terminal: defineElicitationView({
@@ -135,7 +134,7 @@ export const elicitationFixtures = {
       kind: "terminal",
       focusTarget: "terminal",
       heading: "Preview ready",
-      message: "Three sample beans match. No report was sent or stored.",
+      message: "Three sample pea varieties match. No report was sent or stored.",
     },
   }),
 } satisfies Readonly<Record<"ready" | "invalid" | "busy" | "terminal", ElicitationView>>;
@@ -149,27 +148,27 @@ export function fixtureForState(value: unknown): ElicitationView {
 export function viewFromSubmission(value: unknown): ElicitationView {
   const record = typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
   const title = firstString(record.title)?.trim() ?? "";
-  const roast = roastSchema.safeParse(firstString(record.roast));
+  const peaType = peaTypeSchema.safeParse(firstString(record.peaType));
   const input = {
     title,
-    roast: roast.success ? roast.data : "all" as const,
-    includeNotes: firstString(record.includeNotes) === "true",
+    peaType: peaType.success ? peaType.data : "all" as const,
+    includeTips: firstString(record.includeTips) === "true",
   };
   if (!title) {
     return defineElicitationView({
       ...base,
-      fields: fields(input, ["Enter a report title."]),
+    fields: fields(input, ["Enter a plan title."]),
       state: {
         kind: "invalid",
         focusTarget: "error-summary",
         summary: {
-          heading: "Fix the report options",
-          items: [{ fieldId: "report-title", message: "Enter a report title." }],
+          heading: "Fix the planting plan options",
+          items: [{ fieldId: "report-title", message: "Enter a plan title." }],
         },
       },
     });
   }
-  const data = previewBeanReport(input);
+  const data = previewPlantingPlan(input);
   return defineElicitationView({
     ...base,
     fields: fields(input),
@@ -177,7 +176,7 @@ export function viewFromSubmission(value: unknown): ElicitationView {
       kind: "terminal",
       focusTarget: "terminal",
       heading: "Preview ready",
-      message: `${data.matchingCount} sample ${data.matchingCount === 1 ? "bean matches" : "beans match"}. ${data.notice}`,
+      message: `${data.matchingCount} sample pea ${data.matchingCount === 1 ? "variety matches" : "varieties match"}. ${data.notice}`,
     },
   });
 }

package/initializer-dist/template/src/ui.ts

@@ -0,0 +1,31 @@
+import { fixtureForState, viewFromSubmission } from "./ui-shared.js";
+import { renderElicitationForm } from "@emseepea/server";
+
+export function pageFromQuery(value: unknown): string {
+  const query = record(value);
+  return page(
+    fixtureForState(query.state),
+    first(query.theme) === "dark" ? "dark" : "light",
+    first(query.style) !== "off",
+  );
+}
+
+export function pageFromSubmission(value: unknown): string {
+  return page(viewFromSubmission(value), "light", true);
+}
+
+function page(view: unknown, theme: "light" | "dark", styled: boolean): string {
+  return `<!doctype html><html lang="en" data-emseepea-theme="${theme}"><head>` +
+    `<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` +
+    `<title>Pea planting plan preview - Em See Pea</title>${styled ? '<link rel="stylesheet" href="/emseepea.css">' : ""}` +
+    `</head><body><a href="#main-content">Skip to main content</a><main id="main-content" tabindex="-1">` +
+    `<h1>Native form example</h1>${renderElicitationForm(view, { headingLevel: 2 })}</main></body></html>`;
+}
+
+function record(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
+}
+
+function first(value: unknown): string | undefined {
+  return typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : undefined;
+}

package/initializer-dist/template/test/ui-shared.test.mjs

@@ -5,7 +5,7 @@ import { fixtureForState, viewFromSubmission } from "../dist/ui-shared.js";
 
 test("shared UI fixtures preserve preview-only semantics", () => {
   assert.equal(fixtureForState("ready").state.kind, "ready");
-  const result = viewFromSubmission({ title: "Daily roast", roast: "dark", includeNotes: "on" });
+  const result = viewFromSubmission({ title: "Autumn peas", peaType: "snap", includeTips: "true" });
   assert.equal(result.state.kind, "terminal");
   assert.match(result.state.message, /No report was sent or stored/);
 });

package/initializer-dist/template/test-support/browser-contract.mjs

@@ -23,6 +23,7 @@ export function testUiExample(example) {
         if (message.type() === "error") errors.push(message.text());
       });
       page.on("pageerror", (error) => errors.push(error.message));
+      await assertRouteResponses(page.request, running.origin, example.react === true);
 
       for (const theme of ["light", "dark"]) {
         for (const state of ["ready", "invalid", "busy", "terminal"]) {
@@ -35,9 +36,11 @@ export function testUiExample(example) {
             `${example.name} ${theme} ${state} has axe violations`,
           );
           assert.equal(await page.locator("html[lang='en']").count(), 1);
+          assert.equal(await page.locator("meta[name='viewport'][content='width=device-width, initial-scale=1']").count(), 1);
+          assert.equal(await page.locator("a[href='#main-content']").innerText(), "Skip to main content");
           assert.equal(await page.locator("main#main-content").count(), 1);
           assert.equal(await page.locator("h1").count(), 1);
-          assert.equal(await page.title(), "Bean report preview - Em See Pea");
+          assert.equal(await page.title(), "Pea planting plan preview - Em See Pea");
           assert.equal(await page.locator("h1").innerText(), example.h1);
           assert.deepEqual(
             await page.locator("h1,h2,h3,h4,h5,h6").evaluateAll((headings) => headings.map((heading) => ({
@@ -46,8 +49,8 @@ export function testUiExample(example) {
             }))),
             [
               { level: 1, text: example.h1 },
-              { level: 2, text: "Preview a bean report" },
-              ...(state === "invalid" ? [{ level: 3, text: "Fix the report options" }] : []),
+              { level: 2, text: "Preview a pea planting plan" },
+              ...(state === "invalid" ? [{ level: 3, text: "Fix the planting plan options" }] : []),
               ...(state === "terminal" ? [{ level: 3, text: "Preview ready" }] : []),
             ],
           );
@@ -66,29 +69,29 @@ export function testUiExample(example) {
       assert.equal(await page.evaluate(() => document.activeElement?.id), "main-content");
 
       await page.goto(`${running.origin}/?state=invalid`);
-      await page.waitForFunction(() => document.activeElement?.id === "bean-report-preview--error-summary");
+      await page.waitForFunction(() => document.activeElement?.id === "pea-planting-plan-preview--error-summary");
       assert.equal(await page.locator("[data-emseepea-part='error-summary']").getAttribute("role"), "alert");
       assert.equal(
         await page.locator("[data-emseepea-part='error-summary'] a").innerText(),
-        "Report title: Enter a report title.",
+        "Plan title: Enter a plan title.",
       );
       assert.equal(
         await page.locator("[aria-invalid='true']").getAttribute("aria-describedby"),
-        "bean-report-preview--field--report-title--description bean-report-preview--field--report-title--error",
+        "pea-planting-plan-preview--field--report-title--description pea-planting-plan-preview--field--report-title--error",
       );
 
       await page.goto(`${running.origin}/?state=busy`);
-      await page.waitForFunction(() => document.activeElement?.id === "bean-report-preview--status");
+      await page.waitForFunction(() => document.activeElement?.id === "pea-planting-plan-preview--status");
       assert.equal(await page.locator("form").getAttribute("aria-busy"), "true");
       assert.equal(await page.locator("button[type='submit']").isDisabled(), true);
 
       await page.goto(`${running.origin}/?state=terminal`);
-      await page.waitForFunction(() => document.activeElement?.id === "bean-report-preview--terminal");
+      await page.waitForFunction(() => document.activeElement?.id === "pea-planting-plan-preview--terminal");
       await assertNoEffectClaim(page);
 
       await page.goto(`${running.origin}/?style=off&state=ready`);
       assert.equal(await page.locator("link[rel='stylesheet']").count(), 0);
-      assert.equal(await page.locator("label[for='bean-report-preview--field--report-title']").count(), 1);
+      assert.equal(await page.locator("label[for='pea-planting-plan-preview--field--report-title']").count(), 1);
       assert.equal(await page.locator("form").count(), 1);
 
       await page.goto(`${running.origin}/?state=ready`);
@@ -130,6 +133,32 @@ export function testUiExample(example) {
   });
 }
 
+async function assertRouteResponses(request, origin, react) {
+  const document = await request.get(`${origin}/`);
+  assert.equal(document.status(), 200);
+  assert.match(document.headers()["content-type"], /^text\/html; charset=utf-8$/);
+
+  const stylesheet = await request.get(`${origin}/emseepea.css`);
+  assert.equal(stylesheet.status(), 200);
+  assert.match(stylesheet.headers()["content-type"], /^text\/css; charset=utf-8$/);
+  assert.equal(stylesheet.headers()["cache-control"], "no-store");
+
+  const submission = await request.post(`${origin}/`, { form: { title: "Route contract" } });
+  assert.equal(submission.status(), 200);
+  assert.match(
+    submission.headers()["content-type"],
+    react ? /^application\/json; charset=utf-8$/ : /^text\/html; charset=utf-8$/,
+  );
+
+  if (react) {
+    const client = await request.get(`${origin}/client.js`);
+    assert.equal(client.status(), 200);
+    assert.match(client.headers()["content-type"], /^text\/javascript; charset=utf-8$/);
+    assert.equal(client.headers()["cache-control"], "no-store");
+    assert.ok((await client.body()).byteLength > 0);
+  }
+}
+
 async function assertNoEffectClaim(page) {
   const text = await page.locator("[data-emseepea-part='terminal']").innerText();
   assert.match(text, /No report was sent or stored\./);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emseepea/create-html-ui-server",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Create an Em See Pea server with an accessible HTML form.",
   "license": "MIT",
   "type": "module",
@@ -18,12 +18,12 @@
     "prepack": "npm run build:initializer"
   },
   "devDependencies": {
-    "@emseepea/server": "0.2.1",
-    "@emseepea/tailwind": "0.0.1",
+    "@emseepea/server": "0.3.0",
+    "@emseepea/tailwind": "0.0.2",
     "@emseepea/example-ui-shared": "0.0.0",
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.2.1",
+    "@emseepea/testing": "0.2.2",
     "@types/node": "24.13.3",
     "typescript": "6.0.3",
     "oxlint": "1.80.0"
@@ -31,10 +31,10 @@
   "engines": {
     "node": ">=22"
   },
-  "repository": { "type": "git", "url": "git+https://github.com/emseepea/emseepea.git", "directory": "examples/native-ui" },
+  "repository": { "type": "git", "url": "git+https://github.com/emseepea/emseepea.git", "directory": "examples/html-ui-server" },
   "homepage": "https://emseepea.github.io/emseepea/examples/",
   "bugs": "https://github.com/emseepea/emseepea/issues",
-  "publishConfig": { "access": "public", "provenance": true, "tag": "next" },
+  "publishConfig": { "access": "public", "provenance": true },
   "bin": { "create-html-ui-server": "./initializer-dist/create.mjs" },
   "files": ["initializer-dist"]
 }

package/initializer-dist/template/src/capabilities/tool.preview-bean-report.ts

@@ -1,4 +0,0 @@
-import { createPreviewBeanReportTool } from "../ui-shared.js";
-import type { CapabilityModuleFactory } from "@emseepea/server";
-
-export default (() => createPreviewBeanReportTool()) satisfies CapabilityModuleFactory;