@emseepea/create-react-ui-server 0.0.14 → 0.0.18

package/README.md

@@ -16,6 +16,30 @@ npm init @emseepea/react-ui-server -- my-server
 
 <!-- generated-project-readme -->
 
+## Choose Open or Protected Access
+
+Start open when the catalogue and operations are public.
+
+To protect this template, pass both options to the app factory:
+
+- `access: { access: "protected", requiredScopes: ["peas:read"] }`
+- an `authentication` adapter
+
+Keep `authentication.discovery` as `"public"` unless capability names or
+schemas are sensitive. Use `"protected"` only when each principal should see a
+permission-filtered catalogue. OAuth metadata remains public in both modes.
+
+## Add Observability
+
+The same factory accepts `observability`.
+
+- Use `structuredLogging` for safe structured events.
+- Use `openTelemetry` for traces and metrics.
+
+Adapters receive only redacted framework events. They never receive request
+bodies, arguments, results, tokens, provider claims, or raw errors. See the
+[server API](https://github.com/emseepea/emseepea/tree/main/packages/framework#authentication-and-observability) for the complete configuration.
+
 ## React and Tailwind UI Example
 
 Choose this example when your application already uses React and you want an
@@ -46,6 +70,13 @@ Open
 
 The page previews a sample pea planting plan only. It does not send or store a report.
 
+## Add Feedback
+
+Install `@emseepea/feedback` when this server needs a detailed one-way
+observation or a durable support conversation. Pass its tools through the
+application factory's `additionalTools` option. Choose PostgreSQL, Firestore,
+GitHub Issues, or Zendesk in the [feedback guide](../../packages/feedback/README.md).
+
 ## Check This Example
 
 [Ordinary tests](test/) live in `test/`.

package/initializer-dist/template/README.md

@@ -1,4 +1,28 @@
-# React and Tailwind UI Example
+# Choose Open or Protected Access
+
+Start open when the catalogue and operations are public.
+
+To protect this template, pass both options to the app factory:
+
+- `access: { access: "protected", requiredScopes: ["peas:read"] }`
+- an `authentication` adapter
+
+Keep `authentication.discovery` as `"public"` unless capability names or
+schemas are sensitive. Use `"protected"` only when each principal should see a
+permission-filtered catalogue. OAuth metadata remains public in both modes.
+
+## Add Observability
+
+The same factory accepts `observability`.
+
+- Use `structuredLogging` for safe structured events.
+- Use `openTelemetry` for traces and metrics.
+
+Adapters receive only redacted framework events. They never receive request
+bodies, arguments, results, tokens, provider claims, or raw errors. See the
+[server API](https://github.com/emseepea/emseepea/tree/main/packages/framework#authentication-and-observability) for the complete configuration.
+
+## React and Tailwind UI Example
 
 Choose this example when your application already uses React and you want an
 accessible form without writing Tailwind configuration or component styles.
@@ -28,6 +52,13 @@ Open
 
 The page previews a sample pea planting plan only. It does not send or store a report.
 
+## Add Feedback
+
+Install `@emseepea/feedback` when this server needs a detailed one-way
+observation or a durable support conversation. Pass its tools through the
+application factory's `additionalTools` option. Choose PostgreSQL, Firestore,
+GitHub Issues, or Zendesk in the [feedback guide](../../packages/feedback/README.md).
+
 ## Check This Example
 
 [Ordinary tests](test/) live in `test/`.

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

@@ -1,15 +1,23 @@
 import test from "node:test";
 import {
   assertNoToolCalls,
+  assertNoNegativeFeedback,
   assertResponseContains,
   assertResponseMeaning,
-  assertToolCalls,
+  assertToolCallsWithOptionalFeedback,
   createConversation,
 } from "@emseepea/testing/semantic";
 
+const server = new URL(import.meta.resolve("@emseepea/feedback/testing-server"));
+const environment = {
+  EMSEEPEA_EVAL_APP_MODULE: new URL("../dist/app.js", import.meta.url).href,
+  EMSEEPEA_EVAL_APP_FACTORY: "createReactUiServer",
+};
+
 test("understands an all-varieties React UI preview", async (t) => {
   const chat = await createConversation(t, {
-    server: new URL("../dist/server.js", import.meta.url),
+    server,
+    environment,
   });
 
   // This variant covers all-variety filtering and omitted tips. One exact
@@ -19,7 +27,7 @@ test("understands an all-varieties React UI preview", async (t) => {
     "Summarize the matches and say whether anything was sent, stored, or changed.",
   );
 
-  assertToolCalls(response, [{
+  await assertToolCallsWithOptionalFeedback(response, [{
     name: "preview-planting-plan",
     arguments: { title: "All pea plan", peaType: "all", includeTips: false },
   }]);
@@ -36,4 +44,5 @@ test("understands an all-varieties React UI preview", async (t) => {
   );
   assertNoToolCalls(followUp);
   assertResponseContains(followUp, "3");
+  assertNoNegativeFeedback(response, followUp);
 });

package/initializer-dist/template/package.json

@@ -14,9 +14,10 @@
     "lint": "oxlint src test eval test-support"
   },
   "devDependencies": {
+    "@emseepea/feedback": "0.2.0",
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.5.3",
+    "@emseepea/testing": "0.9.3",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
@@ -29,8 +30,8 @@
   },
   "private": true,
   "dependencies": {
-    "@emseepea/react": "0.0.9",
-    "@emseepea/server": "0.3.3",
+    "@emseepea/react": "0.0.13",
+    "@emseepea/server": "0.6.1",
     "@emseepea/tailwind": "0.0.2",
     "react": "19.2.8",
     "react-dom": "19.2.8"

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

@@ -0,0 +1,30 @@
+import { parse } from "node:querystring";
+import {
+  createEmseepea,
+  discoverCapabilities,
+  registerRoutes,
+  type AccessPolicy,
+  type EmseepeaExtensions,
+} from "@emseepea/server";
+
+export interface ReactUiServerOptions extends EmseepeaExtensions {
+  readonly access?: AccessPolicy;
+}
+
+export async function createReactUiServer(options: ReactUiServerOptions = {}) {
+  const { access = { access: "public" }, ...extensions } = options;
+  const app = createEmseepea({
+    name: "emseepea-react-ui-server",
+    version: "0.0.0",
+    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), access),
+    ...extensions,
+  });
+  app.addContentTypeParser(
+    "application/x-www-form-urlencoded",
+    { parseAs: "string" },
+    (_request, body, done) => done(null, parse(body.toString())),
+  );
+  await registerRoutes(app, new URL("./routes/", import.meta.url));
+  return app;
+}

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

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

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

@@ -1,22 +1,9 @@
-import { parse } from "node:querystring";
+import { serveEmseepea } from "@emseepea/server";
+import { createReactUiServer } from "./app.js";
 
-import { createEmseepea, discoverCapabilities, registerRoutes, serveEmseepea } from "@emseepea/server";
-
-const app = createEmseepea({
-  name: "emseepea-react-ui-server",
-  version: "0.0.0",
-  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)),
+const running = await serveEmseepea(await createReactUiServer(), {
+  port: Number.parseInt(process.env.PORT ?? "3001", 10),
 });
-
-app.addContentTypeParser(
-  "application/x-www-form-urlencoded",
-  { parseAs: "string" },
-  (_request, body, done) => done(null, parse(body.toString())),
-);
-await registerRoutes(app, new URL("./routes/", import.meta.url));
-
-const running = await serveEmseepea(app, { port: Number.parseInt(process.env.PORT ?? "3001", 10) });
 console.log(`Em See Pea React UI example listening at ${running.url}`);
 
 async function shutdown(): Promise<void> {

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

@@ -1,4 +1,9 @@
-import { defineElicitationView, defineTool, type ElicitationView } from "@emseepea/server";
+import {
+  defineElicitationView,
+  defineTool,
+  type AccessPolicy,
+  type ElicitationView,
+} from "@emseepea/server";
 import { z } from "zod";
 
 const peaTypeSchema = z.enum(["all", "shelling", "snap"])
@@ -40,10 +45,10 @@ export function previewPlantingPlan(input: z.output<typeof inputSchema>) {
   };
 }
 
-export function createPreviewPlantingPlanTool() {
+export function createPreviewPlantingPlanTool(access: AccessPolicy = { access: "public" }) {
   return defineTool({
     name: "preview-planting-plan",
-    access: "public",
+    ...access,
     title: "Preview a Pea Planting Plan",
     description: "Preview a sample pea planting plan without sending, storing, or changing anything.",
     inputSchema,

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

@@ -1,7 +1,12 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 
-import { startMcpServer } from "@emseepea/testing";
+import {
+  insecureTestAuthentication,
+  startEmseepea,
+  startMcpServer,
+} from "@emseepea/testing";
+import { createReactUiServer } from "../dist/app.js";
 
 test("describes every planting-plan tool property", async (t) => {
   const running = await startMcpServer(t, new URL("../dist/server.js", import.meta.url));
@@ -29,3 +34,16 @@ test("describes every planting-plan tool property", async (t) => {
   });
   assert.equal(result.content[0].text, JSON.stringify(result.structuredContent));
 });
+
+test("the same UI template composes protected access and observability", async (t) => {
+  const events = [];
+  const permissions = ["plans:preview"];
+  const running = await startEmseepea(t, await createReactUiServer({
+    access: { access: "protected", requiredScopes: permissions },
+    authentication: insecureTestAuthentication(permissions),
+    observability: [{ id: "test-log", emit: (event) => events.push(event) }],
+  }));
+  const client = await running.connect("test-token");
+  assert.deepEqual((await client.listTools()).tools.map(({ name }) => name), ["preview-planting-plan"]);
+  assert.ok(events.some(({ method }) => method === "tools/list"));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emseepea/create-react-ui-server",
-  "version": "0.0.14",
+  "version": "0.0.18",
   "description": "Create an Em See Pea server with an accessible React form.",
   "license": "MIT",
   "type": "module",
@@ -18,15 +18,16 @@
     "prepack": "npm run build:initializer"
   },
   "devDependencies": {
-    "@emseepea/react": "0.0.9",
-    "@emseepea/server": "0.3.3",
+    "@emseepea/feedback": "0.2.0",
+    "@emseepea/react": "0.0.13",
+    "@emseepea/server": "0.6.1",
     "@emseepea/tailwind": "0.0.2",
     "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.5.3",
+    "@emseepea/testing": "0.9.3",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",