@emseepea/create-react-ui-server 0.0.13 → 0.0.15

package/README.md

@@ -6,7 +6,7 @@ This directory is both the maintained example and its public npm initializer.
 
 Use this template for an accessible form in an application that already uses
 React. Choose the [HTML UI server](../html-ui-server/README.md) when native HTML
-is enough and you want fewer front-end dependencies. [Compare all eight templates](https://emseepea.github.io/emseepea/examples/).
+is enough and you want fewer front-end dependencies. [Compare all templates](https://emseepea.github.io/emseepea/examples/).
 
 ## Create a Project
 
@@ -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

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.

package/initializer-dist/template/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "playwright": "1.62.1",
     "axe-core": "4.13.0",
-    "@emseepea/testing": "0.5.2",
+    "@emseepea/testing": "0.6.1",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
@@ -29,8 +29,8 @@
   },
   "private": true,
   "dependencies": {
-    "@emseepea/react": "0.0.9",
-    "@emseepea/server": "0.3.3",
+    "@emseepea/react": "0.0.10",
+    "@emseepea/server": "0.4.0",
     "@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.13",
+  "version": "0.0.15",
   "description": "Create an Em See Pea server with an accessible React form.",
   "license": "MIT",
   "type": "module",
@@ -18,15 +18,15 @@
     "prepack": "npm run build:initializer"
   },
   "devDependencies": {
-    "@emseepea/react": "0.0.9",
-    "@emseepea/server": "0.3.3",
+    "@emseepea/react": "0.0.10",
+    "@emseepea/server": "0.4.0",
     "@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.2",
+    "@emseepea/testing": "0.6.1",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",