@emseepea/create-html-ui-server 0.0.5 → 0.0.7

package/README.md

@@ -26,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:

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:

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

@@ -1,21 +1,28 @@
-import { toolSelectionTest } from "@emseepea/testing/semantic";
+import test from "node:test";
+import {
+  assertResponseContains,
+  assertResponseMeaning,
+  assertToolCalls,
+  createConversation,
+} 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 snap-pea planting-plan preview. Was a report sent or stored, and did this " +
-    "operation change anything?",
-  criticalFacts: [
-    "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 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-planting-plan"],
+test("does not mistake a native UI preview for a completed effect", async (t) => {
+  const chat = await createConversation(t, {
+    server: new URL("../dist/server.js", import.meta.url),
+  });
+  const response = await chat.send(
+    "Preview a plan titled Snap pea plan for snap peas, including growing tips. " +
+    "Summarize the matches and say whether anything was sent, stored, or changed.",
+  );
+
+  assertToolCalls(response, [{
+    name: "preview-planting-plan",
+    arguments: { title: "Snap pea plan", peaType: "snap", includeTips: true },
+  }]);
+  assertResponseContains(response, "Highland Snap");
+  await assertResponseMeaning(response, {
+    expected:
+      "The preview contains Highland Snap and Meadow Sweet. It is preview-only, " +
+      "performed no effect, sent and stored no report, and changed no external data.",
+  });
 });

package/initializer-dist/template/package.json

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

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,13 +1,7 @@
-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-html-ui-server",
   version: "0.0.0",
@@ -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>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/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-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,6 +36,8 @@ 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(), "Pea planting plan preview - Em See Pea");
@@ -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.5",
+  "version": "0.0.7",
   "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.2",
+    "@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.2",
+    "@emseepea/testing": "0.3.0",
     "@types/node": "24.13.3",
     "typescript": "6.0.3",
     "oxlint": "1.80.0"