@plitzi/sdk-server 0.32.17 → 0.32.19

package/dist/src/modules/mcp/tools/screenshot.d.ts

@@ -11,6 +11,24 @@ export declare const screenshotShape: {
             before: "before";
             after: "after";
         }>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"repeatElement">;
+        pageRef: z.ZodString;
+        ref: z.ZodString;
+        elementType: z.ZodOptional<z.ZodString>;
+        label: z.ZodOptional<z.ZodString>;
+        style: z.ZodOptional<z.ZodObject<{
+            base: z.ZodOptional<z.ZodArray<z.ZodString>>;
+            slots: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString>>>;
+        }, z.core.$strip>>;
+        parentRef: z.ZodOptional<z.ZodString>;
+        position: z.ZodOptional<z.ZodEnum<{
+            inside: "inside";
+            before: "before";
+            after: "after";
+        }>>;
+        template: z.ZodType<import('./operations/schema').TemplateElement, unknown, z.core.$ZodTypeInternals<import('./operations/schema').TemplateElement, unknown>>;
+        items: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, z.core.$strip>, z.ZodObject<{
         type: z.ZodLiteral<"patchElement">;
         pageRef: z.ZodString;
@@ -223,6 +241,38 @@ export declare const screenshotShape: {
         }, z.core.$strip>>>;
         type: z.ZodLiteral<"upsertDefinition">;
         ref: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"upsertDefinitions">;
+        definitions: z.ZodRecord<z.ZodString, z.ZodObject<{
+            desktop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+            tablet: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+            mobile: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+            states: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                desktop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                tablet: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                mobile: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+            }, z.core.$strip>>>;
+            variants: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                desktop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                tablet: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                mobile: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+            }, z.core.$strip>>>;
+            slots: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                desktop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                tablet: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                mobile: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                states: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                    desktop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                    tablet: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                    mobile: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                }, z.core.$strip>>>;
+                variants: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                    desktop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                    tablet: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                    mobile: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>>;
+                }, z.core.$strip>>>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>, z.ZodObject<{
         desktop: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodNull]>>>;
         tablet: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodNull]>>>;

package/dist/src/modules/mcp/tools/shared/expandOperations.d.ts

@@ -0,0 +1,13 @@
+import { ValidationError } from '../../types';
+import { Operation } from '../operations';
+/** Rewrites the sugar ops into the vocabulary the rest of the pipeline knows, BEFORE validation — today that is
+ *  `repeatElement`, which stands for the `upsertElement` its template + rows expand to. Everything downstream
+ *  (validator, dispatch, audit, versions) therefore stays unaware of it, and a row that renders a bad element is
+ *  reported by the ordinary element checks.
+ *
+ *  One op in, one op out: the indices the agent sent are the indices every error path names, so `operations[3]`
+ *  still means the fourth operation it wrote. */
+export declare const expandOperations: (ops: Operation[]) => {
+    operations: Operation[];
+    errors: ValidationError[];
+};

package/dist/src/modules/mcp/tools/shared/tool.d.ts

@@ -39,6 +39,11 @@ export interface ToolSpec<Shape extends ZodRawShape> {
      *  iframe, receiving the tool result). Registered as the tool's `_meta.ui` — see registerAppTool. */
     ui?: McpUiToolMeta;
     run: (input: z.infer<ZodObject<Shape>>, ctx: ToolContext) => unknown;
+    /** What the tool still does on a connection that carries NO space (a guest / widgets-only grant): it keeps only
+     *  the part that needs none — plitzi_read serves the public documents and says so for the rest. A tool that
+     *  defines this stays advertised there; one that does not is not registered at all, so the agent never calls
+     *  something that cannot work. */
+    runPublic?: (input: z.infer<ZodObject<Shape>>, env: Env) => unknown;
 }
 /** What the registry holds and the hosts register from: the same metadata plus a type-erased `execute` that
  *  validates raw args against the shape and delegates to the typed `run`. Produced by `defineTool`. */
@@ -52,6 +57,9 @@ export interface ToolDef {
     spaceless?: boolean;
     ui?: McpUiToolMeta;
     execute: (args: unknown, ctx: ToolContext) => unknown;
+    /** Present when the tool degrades to a space-less connection (see ToolSpec.runPublic); its absence is what tells
+     *  the host not to advertise the tool there. */
+    executePublic?: (args: unknown, env: Env) => unknown;
 }
 /** Author a tool: give it its metadata, its input shape and a typed `run`. The returned descriptor parses the
  *  raw args against the shape before handing them to `run`, so `run` is fully typed and no cast is needed.

package/dist/src/modules/mcp/tools/validate.d.ts

@@ -12,6 +12,24 @@ export declare const validateShape: {
             before: "before";
             after: "after";
         }>>;
+    }, import('zod/v4/core').$strip>, import('zod').ZodObject<{
+        type: import('zod').ZodLiteral<"repeatElement">;
+        pageRef: import('zod').ZodString;
+        ref: import('zod').ZodString;
+        elementType: import('zod').ZodOptional<import('zod').ZodString>;
+        label: import('zod').ZodOptional<import('zod').ZodString>;
+        style: import('zod').ZodOptional<import('zod').ZodObject<{
+            base: import('zod').ZodOptional<import('zod').ZodArray<import('zod').ZodString>>;
+            slots: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodArray<import('zod').ZodString>>>;
+        }, import('zod/v4/core').$strip>>;
+        parentRef: import('zod').ZodOptional<import('zod').ZodString>;
+        position: import('zod').ZodOptional<import('zod').ZodEnum<{
+            inside: "inside";
+            before: "before";
+            after: "after";
+        }>>;
+        template: import('zod').ZodType<import('./operations/schema').TemplateElement, unknown, import('zod/v4/core').$ZodTypeInternals<import('./operations/schema').TemplateElement, unknown>>;
+        items: import('zod').ZodArray<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnknown>>;
     }, import('zod/v4/core').$strip>, import('zod').ZodObject<{
         type: import('zod').ZodLiteral<"patchElement">;
         pageRef: import('zod').ZodString;
@@ -224,6 +242,38 @@ export declare const validateShape: {
         }, import('zod/v4/core').$strip>>>;
         type: import('zod').ZodLiteral<"upsertDefinition">;
         ref: import('zod').ZodString;
+    }, import('zod/v4/core').$strip>, import('zod').ZodObject<{
+        type: import('zod').ZodLiteral<"upsertDefinitions">;
+        definitions: import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodObject<{
+            desktop: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+            tablet: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+            mobile: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+            states: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodObject<{
+                desktop: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                tablet: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                mobile: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+            }, import('zod/v4/core').$strip>>>;
+            variants: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodObject<{
+                desktop: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                tablet: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                mobile: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+            }, import('zod/v4/core').$strip>>>;
+            slots: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodObject<{
+                desktop: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                tablet: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                mobile: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                states: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodObject<{
+                    desktop: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                    tablet: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                    mobile: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                }, import('zod/v4/core').$strip>>>;
+                variants: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodObject<{
+                    desktop: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                    tablet: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                    mobile: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber]>>>;
+                }, import('zod/v4/core').$strip>>>;
+            }, import('zod/v4/core').$strip>>>;
+        }, import('zod/v4/core').$strip>>;
     }, import('zod/v4/core').$strip>, import('zod').ZodObject<{
         desktop: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber, import('zod').ZodNull]>>>;
         tablet: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnion<readonly [import('zod').ZodString, import('zod').ZodNumber, import('zod').ZodNull]>>>;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@plitzi/sdk-server",
-  "version": "0.32.17",
+  "version": "0.32.19",
   "license": "AGPL-3.0",
   "files": [
-    "dist"
+    "dist",
+    "skills"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -29,9 +30,9 @@
   "dependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.5",
     "@modelcontextprotocol/sdk": "^1.30.0",
-    "@plitzi/plitzi-sdk": "0.32.17",
-    "@plitzi/sdk-schema": "0.32.17",
-    "@plitzi/sdk-shared": "0.32.17",
+    "@plitzi/plitzi-sdk": "0.32.19",
+    "@plitzi/sdk-schema": "0.32.19",
+    "@plitzi/sdk-shared": "0.32.19",
     "ejs": "^6.0.1",
     "esbuild": "^0.28.1",
     "zod": "^4.4.3"

package/skills/plitzi-render/SKILL.md

@@ -0,0 +1,170 @@
+---
+name: plitzi-render
+description: >-
+  Show answers as a rendered visual widget instead of plain text, using the Plitzi MCP's plitzi_render tool.
+  Use whenever the reply is naturally visual or structured — a recipe, a comparison, pricing tiers, a profile,
+  a menu, steps/checklist, a product card, a dashboard-like summary — or whenever the user asks to design,
+  build, show, or "make it look nice". Requires the Plitzi MCP server (the plitzi_render tool) to be connected.
+---
+
+# Rendering answers as Plitzi widgets
+
+`plitzi_render` renders a small, self-contained UI widget the user can SEE. It runs the Plitzi SDK offline — no
+backend, no account, no space, so it works even on a connection with no credentials. Prefer **showing** a widget
+over a long text answer whenever the content is naturally visual.
+
+## When to reach for it
+
+- **Something to design or build**: a card, hero, banner, form, pricing table — anything the user asks you to
+  "create / design / build / show / make look nice".
+- **A naturally visual answer**: a recipe → a card with photo + ingredients; a comparison → side-by-side tiles;
+  steps → a checklist; a product, place or person → a profile card; options → a tiled menu.
+
+Keep writing plain text when the answer is genuinely textual — an explanation, code, a discussion. One good widget
+beats a wall of text, but a widget wrapping a paragraph helps no one.
+
+## Before the first call
+
+Read the MCP resource **`plitzi://render/guide`** once per conversation. It is the authoritative authoring model:
+every operation, the element types and their props, the styling system, worked examples. `plitzi://render/types`
+lists every element type with its description. Don't reconstruct the schema from memory — read the guide.
+
+## The shape of a good call
+
+Everything the widget needs travels in ONE call, as `operations`. Three ops carry almost every widget:
+
+- **`upsertDefinitions`** — declare ALL the CSS classes at once, one class per *look* (not per property).
+- **`upsertElement`** — build the whole tree in a single op, nesting with `children` under `pageRef: "render"`.
+- **`repeatElement`** — the moment two siblings differ only in data, write the row ONCE as a template with
+  `{{item.field}}` placeholders and pass `items`. Rows come out numbered (`tile-1`, `tile-2`…). A list inside each
+  row is the same op: give a template node `repeat: { items: "{{item.<field>}}", template: … }`.
+
+```json
+{
+  "operations": [
+    {
+      "type": "upsertDefinitions",
+      "definitions": {
+        "panel": {
+          "desktop": {
+            "display": "flex",
+            "flex-direction": "column",
+            "gap": "12px",
+            "padding": "16px",
+            "min-width": "0",
+            "color": "var(--color-text-primary, light-dark(#0f172a, #e8eaed))"
+          }
+        },
+        "row": {
+          "desktop": { "display": "flex", "flex-wrap": "wrap", "gap": "12px", "min-width": "0" },
+          "mobile": { "flex-direction": "column" }
+        },
+        "tile": {
+          "desktop": {
+            "flex": "1 1 0%",
+            "min-width": "160px",
+            "padding": "12px",
+            "border-radius": "10px",
+            "border": "1px solid var(--color-border-primary, light-dark(#e2e8f0, #333a48))",
+            "background-color": "var(--color-background-secondary, light-dark(#ffffff, #1f2430))"
+          }
+        },
+        "tile-title": { "desktop": { "margin": "0", "font-size": "15px" } },
+        "tile-price": { "desktop": { "margin": "0", "font-size": "13px", "opacity": "0.75" } }
+      }
+    },
+    {
+      "type": "upsertElement",
+      "pageRef": "render",
+      "element": {
+        "ref": "panel",
+        "type": "container",
+        "style": { "base": ["panel"] },
+        "children": [{ "ref": "title", "type": "heading", "subType": "h3", "props": { "content": "Plans" } }]
+      }
+    },
+    {
+      "type": "repeatElement",
+      "pageRef": "render",
+      "parentRef": "panel",
+      "ref": "plans",
+      "style": { "base": ["row"] },
+      "template": {
+        "ref": "tile",
+        "type": "container",
+        "style": { "base": ["tile"] },
+        "children": [
+          {
+            "ref": "name",
+            "type": "heading",
+            "subType": "h4",
+            "props": { "content": "{{item.name}}" },
+            "style": { "base": ["tile-title"] }
+          },
+          {
+            "ref": "price",
+            "type": "paragraph",
+            "props": { "content": "{{item.price}}" },
+            "style": { "base": ["tile-price"] }
+          }
+        ]
+      },
+      "items": [
+        { "name": "Starter", "price": "$0 / month" },
+        { "name": "Team", "price": "$19 / month" },
+        { "name": "Business", "price": "$49 / month" }
+      ]
+    }
+  ]
+}
+```
+
+## The five things that decide whether it looks good
+
+1. **Width is free, height is scarce.** The widget renders in a side panel. A plain container stacks its children
+   vertically — that is the tall, half-empty default to avoid. Put peers (metrics, plans, options, image + text) in
+   a wrapping row (`display:flex` + `flex-wrap:wrap`, children `flex:1 1 0%` with a `min-width` as the wrap
+   threshold) or a grid with `grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))`. Stack only what reads in
+   order: heading over paragraph, forms, steps, prose.
+2. **The host may be in dark mode.** Never hardcode a light palette. Take colours from the host variables with a
+   `light-dark()` fallback, and always set `color` wherever you set `background-color`.
+3. **Watch the SDK defaults.** Every container has `min-width`/`min-height: 50px` — set them to `0` for rails,
+   dividers, dots and any flex child that must shrink. Headings and paragraphs keep the browser's margins; zero
+   them and space with the parent's `gap`.
+4. **Never hand-draw a scene in a `data:` URI.** An inline SVG illustration costs more tokens than the entire rest
+   of the widget. Use an `https` image, a flat colour, or a CSS gradient.
+5. **Write CSS plainly.** Kebab-case properties, shorthands welcome (`padding: 8px 16px`, `border: 1px solid red`,
+   `font: bold 16px/1.5 Arial`) — they are expanded and stored as longhands, so a breakpoint or state can override
+   one property on its own.
+
+## Iterating on a widget you already rendered
+
+Every render answers with a **`renderId`**. To change that widget, do NOT rebuild it: call again with
+`patch: true`, that `renderId`, and only the operations that differ (`patchElement`, `patchDefinition`,
+`deleteElement`, a new `repeatElement`). Address rows by the refs you already know (`tile-1`, `tile-2`). The widget
+merges the delta into the batch it was built from and reports back what it applied, errors included.
+
+Patch **only** to modify that widget. A different subject, or a different kind of widget, is a fresh render with no
+`patch` — the delta is merged into the previous batch, so patching a new idea leaves the user looking at both at
+once. Rebuilding when you could have patched only costs tokens; patching when you should have rebuilt costs the
+user a wrong widget.
+
+If the answer says the widget could not be recovered (a surface that renders no widgets, a host that keeps no
+storage, a conversation resumed elsewhere), send the whole batch again without `patch`.
+
+## When a call fails
+
+`plitzi_render` answers with `rendered: false` and `errors: [{ path, message, hint }]`, plus `warnings` for smaller
+issues. The `path` names the operation, so fix that one and call again — you never lose the rest of the batch. An
+unknown prop comes back as a warning naming the right one, so probing is safe.
+
+## After it renders
+
+The widget is shown to the user; you get a compact summary. Don't re-describe what they can already see — a short
+caption or a follow-up question is enough.
+
+## Going further
+
+Widgets can be data-driven and interactive, not only static: an `apiContainer` fetches at runtime, `upsertBinding`
+wires that data into elements, and `upsertInteractionFlow` makes them react to clicks. See the "Data &
+interactivity" section of `plitzi://render/guide`.

package/dist/modules/mcp/apps/render/view.tsx

@@ -1,108 +0,0 @@
-/* eslint-disable react-refresh/only-export-components -- one bundled entry: components cannot move out. */
-import { useApp, useHostStyles } from '@modelcontextprotocol/ext-apps/react';
-import PlitziSdk from '@plitzi/plitzi-sdk';
-import { Component, useEffect, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import type { McpUiHostContext } from '@modelcontextprotocol/ext-apps';
-import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
-import type { OfflineDataRaw } from '@plitzi/sdk-shared';
-import type { ReactNode } from 'react';
-
-/** The view for plitzi_render: the entry the server bundles (React, the MCP Apps runtime and the Plitzi SDK
- *  included) and inlines in the shared ui:// page shell — which is what lets it run in a sandbox that can fetch
- *  nothing. It mounts on `#app`, the shell's root. */
-
-const panelStyle = { padding: 16, font: '13px/1.5 system-ui, sans-serif', color: '#b91c1c' } as const;
-
-// Every failure ends up here: an iframe left on its placeholder would hide the reason in the sandbox's console.
-const ErrorPanel = ({ title, details }: { title: string; details: string }) => (
-  <div style={panelStyle}>
-    <strong>{title}</strong>
-    <pre style={{ margin: '8px 0 0', whiteSpace: 'pre-wrap', color: '#7f1d1d', fontSize: 12 }}>{details}</pre>
-  </div>
-);
-
-class RenderBoundary extends Component<{ children: ReactNode }, { error?: Error }> {
-  state: { error?: Error } = {};
-
-  static getDerivedStateFromError(error: Error) {
-    return { error };
-  }
-
-  render() {
-    if (this.state.error) {
-      return <ErrorPanel title="Widget failed to render" details={this.state.error.message} />;
-    }
-
-    return this.props.children;
-  }
-}
-
-const RenderApp = () => {
-  const [result, setResult] = useState<CallToolResult | null>(null);
-  const [cancelled, setCancelled] = useState<string | undefined>(undefined);
-  const [context, setContext] = useState<McpUiHostContext | undefined>(undefined);
-
-  // useApp creates the App, runs onAppCreated so every handler is in place BEFORE the handshake, and connects.
-  const { app, error } = useApp({
-    appInfo: { name: 'Plitzi Widget', version: '1.0.0' },
-    capabilities: {},
-    onAppCreated: instance => {
-      instance.ontoolresult = setResult;
-      instance.ontoolcancelled = params => setCancelled(params.reason ?? 'The host cancelled the render.');
-      instance.onhostcontextchanged = params => setContext(previous => ({ ...previous, ...params }));
-      instance.onteardown = () => ({});
-    }
-  });
-
-  // The context the host sent in its initialize result predates any change notification.
-  useEffect(() => {
-    if (app) {
-      setContext(app.getHostContext());
-    }
-  }, [app]);
-
-  useHostStyles(app, context);
-
-  const failure = error?.message ?? cancelled;
-  if (failure) {
-    return <ErrorPanel title="Could not render the widget" details={failure} />;
-  }
-
-  // Still connecting, or connected and waiting for the result: the page's CSS placeholder covers both.
-  if (!result) {
-    return null;
-  }
-
-  // The payload rides in structuredContent, which the protocol types as unknown-valued; plitzi_render is the one
-  // guaranteeing the shape, and the SDK validates it again when it renders.
-  const offlineData = result.structuredContent?.offlineData as OfflineDataRaw | undefined;
-  if (!offlineData) {
-    // A failed render answers with its (already compact) reasons as the tool's JSON text summary.
-    const text = result.content.find(entry => entry.type === 'text');
-
-    return <ErrorPanel title="Render failed" details={text?.text ?? 'The tool returned no widget data.'} />;
-  }
-
-  const insets = context?.safeAreaInsets;
-
-  return (
-    <div
-      style={{
-        padding: `${insets?.top ?? 0}px ${insets?.right ?? 0}px ${insets?.bottom ?? 0}px ${insets?.left ?? 0}px`
-      }}
-    >
-      <RenderBoundary>
-        <PlitziSdk offlineData={offlineData} offlineMode environment="main" renderMode="raw" />
-      </RenderBoundary>
-    </div>
-  );
-};
-
-const root = document.getElementById('app');
-if (root) {
-  // The SDK styles its tree from this container class down.
-  root.className = 'plitzi-root-container';
-  createRoot(root).render(<RenderApp />);
-}