pmx-canvas 0.3.0 → 0.3.1

package/src/json-render/renderer/index.tsx

@@ -19,7 +19,16 @@ import { tufteChartComponents } from '../charts/tufte-components';
 import { pmxCanvasDirectives } from '../directives';
 import { JsonRenderDevtools } from '@json-render/devtools-react';
 
-type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'info' | 'warning' | 'error' | 'danger';
+type BadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'error'
+  | 'danger';
 type BadgeProps = {
   text: string;
   variant?: BadgeVariant | null;
@@ -30,11 +39,7 @@ function Badge({ props }: { props: BadgeProps }) {
   const variant = props.variant;
   const resolvedVariant = variant ?? 'default';
   return (
-    <span
-      data-slot="badge"
-      data-variant={resolvedVariant}
-      className={`pmx-badge pmx-badge--${resolvedVariant}`}
-    >
+    <span data-slot="badge" data-variant={resolvedVariant} className={`pmx-badge pmx-badge--${resolvedVariant}`}>
       {props.text}
     </span>
   );
@@ -111,9 +116,17 @@ function AxStateSync() {
 // validates + submits through the capability-gated endpoint). Convention-based
 // opt-in: spec authors name the action handler after the AX interaction type.
 const AX_INTERACTION_HANDLER_NAMES = [
-  'ax.event.record', 'ax.steer', 'ax.work.create', 'ax.work.update',
-  'ax.evidence.add', 'ax.approval.request', 'ax.review.add', 'ax.focus.set',
-  'ax.elicitation.request', 'ax.mode.request', 'ax.command.invoke',
+  'ax.event.record',
+  'ax.steer',
+  'ax.work.create',
+  'ax.work.update',
+  'ax.evidence.add',
+  'ax.approval.request',
+  'ax.review.add',
+  'ax.focus.set',
+  'ax.elicitation.request',
+  'ax.mode.request',
+  'ax.command.invoke',
 ] as const;
 
 function buildAxHandlers(): Record<string, (params: Record<string, unknown>) => void> {
@@ -126,12 +139,15 @@ function buildAxHandlers(): Record<string, (params: Record<string, unknown>) =>
   // is no JS surface for a Promise-style ack here, so we don't stamp a correlationId.
   for (const type of AX_INTERACTION_HANDLER_NAMES) {
     handlers[type] = (params: Record<string, unknown>) => {
-      window.parent.postMessage({
-        source: 'pmx-canvas-ax',
-        token,
-        nodeId,
-        interaction: { type, payload: params && typeof params === 'object' ? params : {} },
-      }, '*');
+      window.parent.postMessage(
+        {
+          source: 'pmx-canvas-ax',
+          token,
+          nodeId,
+          interaction: { type, payload: params && typeof params === 'object' ? params : {} },
+        },
+        '*',
+      );
     };
   }
   return handlers;
@@ -176,16 +192,22 @@ function App() {
 
   // Seed AX state under a reserved `/ax` key so specs can bind { "$state": "/ax/workItems" }.
   const axState = window.__PMX_CANVAS_AX_STATE__;
-  const initialState = axState !== undefined && axState !== null
-    ? { ...(spec.state ?? {}), ax: axState }
-    : spec.state ?? undefined;
+  const initialState =
+    axState !== undefined && axState !== null ? { ...(spec.state ?? {}), ax: axState } : (spec.state ?? undefined);
 
   // Standalone "Open as site" tab (#65): fill the browser viewport instead of the
   // in-canvas card height. The chart child flex-grows; useChartFrameHeight measures
   // the full viewport in this mode. Embedded/expanded keep the padded min-height box.
   const isSite = window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ === 'site';
   const containerStyle = isSite
-    ? { display: 'flex', flexDirection: 'column' as const, height: '100dvh', minHeight: '100dvh', padding: 0, boxSizing: 'border-box' as const }
+    ? {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        height: '100dvh',
+        minHeight: '100dvh',
+        padding: 0,
+        boxSizing: 'border-box' as const,
+      }
     : { minHeight: '100vh', padding: 16, boxSizing: 'border-box' as const };
   return (
     <div style={containerStyle}>
@@ -199,9 +221,7 @@ function App() {
         <div style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
           <Renderer spec={spec} registry={registry} loading={false} />
         </div>
-        {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? (
-          <JsonRenderDevtools position="right" />
-        ) : null}
+        {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? <JsonRenderDevtools position="right" /> : null}
       </JSONUIProvider>
     </div>
   );

package/src/json-render/schema.ts

@@ -34,11 +34,13 @@ export const schema = defineSchema(
     builtInActions: [
       {
         name: 'setState',
-        description: 'Update a value in the state model at the given statePath. Params: { statePath: string, value: any }',
+        description:
+          'Update a value in the state model at the given statePath. Params: { statePath: string, value: any }',
       },
       {
         name: 'pushState',
-        description: 'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.',
+        description:
+          'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.',
       },
       {
         name: 'removeState',
@@ -46,7 +48,8 @@ export const schema = defineSchema(
       },
       {
         name: 'validateForm',
-        description: 'Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.',
+        description:
+          'Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.',
       },
     ],
     defaultRules: [

package/src/json-render/server.ts

@@ -212,9 +212,7 @@ async function ensureJsonRenderBundle(): Promise<void> {
   // Avoid live source-vs-dist rebuild checks here because Bun's bundler can stall on
   // the @json-render/shadcn dependency graph during request-time viewer generation.
   const needsBuild =
-    !existsSync(jsPath) ||
-    !existsSync(cssPath) ||
-    process.env.PMX_CANVAS_FORCE_JSON_RENDER_REBUILD === '1';
+    !existsSync(jsPath) || !existsSync(cssPath) || process.env.PMX_CANVAS_FORCE_JSON_RENDER_REBUILD === '1';
 
   if (needsBuild) {
     await rebuildJsonRenderBundle();
@@ -273,7 +271,7 @@ function normalizeItemArray(value: unknown): unknown {
     if (hasString(item)) return { label: item, value: item };
     const record = asRecord(item);
     const label = hasString(record?.label) ? record.label : hasString(record?.text) ? record.text : null;
-    const resolvedValue = hasString(record?.value) ? record.value : label ?? `option-${index + 1}`;
+    const resolvedValue = hasString(record?.value) ? record.value : (label ?? `option-${index + 1}`);
     return {
       label: label ?? resolvedValue,
       value: resolvedValue,
@@ -283,11 +281,7 @@ function normalizeItemArray(value: unknown): unknown {
 
 function normalizeStringMatrix(value: unknown): unknown {
   if (!Array.isArray(value)) return value;
-  return value.map((row) => (
-    Array.isArray(row)
-      ? row.map((cell) => String(cell ?? ''))
-      : [String(row ?? '')]
-  ));
+  return value.map((row) => (Array.isArray(row) ? row.map((cell) => String(cell ?? '')) : [String(row ?? '')]));
 }
 
 function normalizeButtonVariant(value: unknown): unknown {
@@ -347,12 +341,7 @@ function normalizeElementProps(
   const props = (stripNullishDeep(rawProps) as Record<string, unknown> | undefined) ?? {};
 
   for (const key of COERCIBLE_STRING_PROPS) {
-    if (
-      key in props &&
-      typeof props[key] !== 'string' &&
-      props[key] !== undefined &&
-      !isDynamicPropValue(props[key])
-    ) {
+    if (key in props && typeof props[key] !== 'string' && props[key] !== undefined && !isDynamicPropValue(props[key])) {
       props[key] = String(props[key]);
     }
   }
@@ -516,7 +505,9 @@ export function inferJsonRenderNodeTitle(spec: JsonRenderSpec, fallback = 'json-
 export function normalizeAndValidateJsonRenderSpec(spec: unknown): JsonRenderSpec {
   const specRecord = asRecord(normalizeJsonRenderInput(spec));
   if (!specRecord || typeof specRecord.root !== 'string' || !asRecord(specRecord.elements)) {
-    throw new Error('Missing root and elements in spec. Pass a complete {root, elements} document, or a single bare component object with a type field.');
+    throw new Error(
+      'Missing root and elements in spec. Pass a complete {root, elements} document, or a single bare component object with a type field.',
+    );
   }
 
   // Reject an unrecognized $-keyed expression object in any element prop BEFORE
@@ -576,10 +567,7 @@ function collectDataKeys(data: Array<Record<string, unknown>>): Set<string> {
  * as "value") without an explicit valueKey, instead of failing the data-key
  * check on a reasonable guess.
  */
-function firstPresentDataKey(
-  data: Array<Record<string, unknown>>,
-  candidates: string[],
-): string | undefined {
+function firstPresentDataKey(data: Array<Record<string, unknown>>, candidates: string[]): string | undefined {
   const keys = collectDataKeys(data);
   return candidates.find((key) => keys.has(key));
 }
@@ -653,7 +641,9 @@ function assertGraphDataKeys(
   const missing = [...required].filter((key) => !available.has(key));
   if (missing.length === 0) return;
   const availableList = [...available].sort().join(', ') || '(none)';
-  throw new Error(`Graph data key mismatch for ${chartType}: missing ${missing.join(', ')}. Available keys: ${availableList}.`);
+  throw new Error(
+    `Graph data key mismatch for ${chartType}: missing ${missing.join(', ')}. Available keys: ${availableList}.`,
+  );
 }
 
 export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
@@ -685,11 +675,11 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     }
     case 'RadarChart': {
       const axisKey = input.axisKey ?? input.xKey ?? 'axis';
-      const metrics = input.metrics?.length
-        ? input.metrics
-        : inferKeysFromData(input.data, [axisKey]);
+      const metrics = input.metrics?.length ? input.metrics : inferKeysFromData(input.data, [axisKey]);
       if (metrics.length === 0) {
-        throw new Error('RadarChart requires at least one metric key (provide `metrics` or include numeric columns in `data`).');
+        throw new Error(
+          'RadarChart requires at least one metric key (provide `metrics` or include numeric columns in `data`).',
+        );
       }
       chartProps.axisKey = axisKey;
       chartProps.metrics = metrics;
@@ -698,11 +688,11 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     }
     case 'StackedBarChart': {
       const xKey = input.xKey ?? 'label';
-      const series = input.series?.length
-        ? input.series
-        : inferKeysFromData(input.data, [xKey]);
+      const series = input.series?.length ? input.series : inferKeysFromData(input.data, [xKey]);
       if (series.length === 0) {
-        throw new Error('StackedBarChart requires at least one series key (provide `series` or include numeric columns in `data`).');
+        throw new Error(
+          'StackedBarChart requires at least one series key (provide `series` or include numeric columns in `data`).',
+        );
       }
       chartProps.xKey = xKey;
       chartProps.series = series;
@@ -713,9 +703,10 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     case 'ComposedChart': {
       chartProps.xKey = input.xKey ?? 'label';
       chartProps.barKey = input.barKey ?? input.yKey ?? 'value';
-      chartProps.lineKey = input.lineKey
-        ?? inferKeysFromData(input.data, [chartProps.xKey as string, chartProps.barKey as string])[0]
-        ?? 'rate';
+      chartProps.lineKey =
+        input.lineKey ??
+        inferKeysFromData(input.data, [chartProps.xKey as string, chartProps.barKey as string])[0] ??
+        'rate';
       chartProps.barColor = input.barColor ?? null;
       chartProps.lineColor = input.lineColor ?? null;
       chartProps.showLegend = input.showLegend !== false;
@@ -952,7 +943,8 @@ export async function buildJsonRenderViewerHtml(options: {
    *  node grows to it. Off for strictSize / user-resized nodes (they fill-down). */
   fitContent?: boolean;
 }): Promise<string> {
-  const sanitizeAxValue = (v?: string): string => (typeof v === 'string' ? v.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80) : '');
+  const sanitizeAxValue = (v?: string): string =>
+    typeof v === 'string' ? v.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80) : '';
   try {
     await ensureJsonRenderBundle();
     const dir = bundleDir();
@@ -967,12 +959,14 @@ export async function buildJsonRenderViewerHtml(options: {
       ...(options.theme ? [`window.__PMX_CANVAS_JSON_RENDER_THEME__ = ${JSON.stringify(options.theme)};`] : []),
       ...(options.display ? [`window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ = ${JSON.stringify(options.display)};`] : []),
       ...(options.devtools ? ['window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ = true;'] : []),
-      ...(options.nodeId && options.axToken ? [
-        `window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`,
-        `window.__PMX_CANVAS_AX_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.axToken))};`,
-        // Read-side AX state: seed for initial render + bound under /ax for specs.
-        `window.__PMX_CANVAS_AX_STATE__ = ${JSON.stringify(options.axState ?? null).replace(/</g, '\\u003c')};`,
-      ] : []),
+      ...(options.nodeId && options.axToken
+        ? [
+            `window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`,
+            `window.__PMX_CANVAS_AX_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.axToken))};`,
+            // Read-side AX state: seed for initial render + bound under /ax for specs.
+            `window.__PMX_CANVAS_AX_STATE__ = ${JSON.stringify(options.axState ?? null).replace(/</g, '\\u003c')};`,
+          ]
+        : []),
       ...(options.fitContent ? ['window.__PMX_CANVAS_FIT_CONTENT__ = true;'] : []),
       jsBundle,
     ].join('\n');

package/src/mcp/canvas-access.ts

@@ -10,11 +10,7 @@ import {
   type PmxCanvas,
 } from '../server/index.js';
 import type { PmxAxSource } from '../server/ax-state.js';
-import {
-  HttpOperationInvoker,
-  LocalOperationInvoker,
-  type OperationInvoker,
-} from '../server/operations/index.js';
+import { HttpOperationInvoker, LocalOperationInvoker, type OperationInvoker } from '../server/operations/index.js';
 
 // openMcpApp / addDiagram / buildWebArtifact / refreshWebpageNode / addHtmlNode /
 // addHtmlPrimitive CanvasAccess methods + their type aliases removed with the
@@ -66,7 +62,10 @@ export interface CanvasAccess {
   listWorkItems(): Promise<ListWorkItemsResult>;
   listApprovalGates(): Promise<ListApprovalGatesResult>;
   listReviewAnnotations(): Promise<ListReviewAnnotationsResult>;
-  submitAxInteraction(input: SubmitAxInteractionInput, options?: { source?: PmxAxSource }): Promise<SubmitAxInteractionResult>;
+  submitAxInteraction(
+    input: SubmitAxInteractionInput,
+    options?: { source?: PmxAxSource },
+  ): Promise<SubmitAxInteractionResult>;
   getPendingSteering(options?: { consumer?: string; limit?: number }): Promise<GetPendingSteeringResult>;
   listElicitations(): Promise<ListElicitationsResult>;
   listModeRequests(): Promise<ListModeRequestsResult>;
@@ -120,7 +119,10 @@ class LocalCanvasAccess implements CanvasAccess {
     return this.canvas.getAxTimeline(query);
   }
 
-  async submitAxInteraction(input: SubmitAxInteractionInput, options?: { source?: PmxAxSource }): Promise<SubmitAxInteractionResult> {
+  async submitAxInteraction(
+    input: SubmitAxInteractionInput,
+    options?: { source?: PmxAxSource },
+  ): Promise<SubmitAxInteractionResult> {
     return this.canvas.submitAxInteraction(input, { source: options?.source ?? 'mcp' });
   }
 
@@ -213,9 +215,10 @@ class RemoteCanvasAccess implements CanvasAccess {
       }
     }
     if (!response.ok) {
-      const error = parsed && typeof parsed === 'object' && 'error' in parsed
-        ? String((parsed as { error?: unknown }).error)
-        : `HTTP ${response.status}`;
+      const error =
+        parsed && typeof parsed === 'object' && 'error' in parsed
+          ? String((parsed as { error?: unknown }).error)
+          : `HTTP ${response.status}`;
       if (path === '/api/canvas/batch' && parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)) {
         return parsed as T;
       }
@@ -232,7 +235,7 @@ class RemoteCanvasAccess implements CanvasAccess {
     const response = await fetch(`${this.remoteBaseUrl}/api/canvas/node/${encodeURIComponent(id)}?includeBlobs=true`);
     if (response.status === 404) return undefined;
     const text = await response.text();
-    let parsed: unknown = undefined;
+    let parsed: unknown;
     if (text.length > 0) {
       try {
         parsed = JSON.parse(text) as unknown;
@@ -241,9 +244,10 @@ class RemoteCanvasAccess implements CanvasAccess {
       }
     }
     if (!response.ok) {
-      const error = parsed && typeof parsed === 'object' && 'error' in parsed
-        ? String((parsed as { error?: unknown }).error)
-        : `HTTP ${response.status}`;
+      const error =
+        parsed && typeof parsed === 'object' && 'error' in parsed
+          ? String((parsed as { error?: unknown }).error)
+          : `HTTP ${response.status}`;
       throw new Error(error);
     }
     return parsed as CanvasNodeState;
@@ -269,7 +273,10 @@ class RemoteCanvasAccess implements CanvasAccess {
     return await this.requestJson<GetAxTimelineResult>('GET', `/api/canvas/ax/timeline${qs}`);
   }
 
-  async submitAxInteraction(input: SubmitAxInteractionInput, options?: { source?: PmxAxSource }): Promise<SubmitAxInteractionResult> {
+  async submitAxInteraction(
+    input: SubmitAxInteractionInput,
+    options?: { source?: PmxAxSource },
+  ): Promise<SubmitAxInteractionResult> {
     // The interaction endpoint returns its structured outcome (ok/code/error) in
     // the body for both accepted and rejected interactions, so read the body
     // regardless of HTTP status rather than throwing on a denial.
@@ -324,12 +331,18 @@ class RemoteCanvasAccess implements CanvasAccess {
   }
 
   async listApprovalGates(): Promise<ListApprovalGatesResult> {
-    const response = await this.requestJson<{ approvalGates?: ListApprovalGatesResult }>('GET', '/api/canvas/ax/approval');
+    const response = await this.requestJson<{ approvalGates?: ListApprovalGatesResult }>(
+      'GET',
+      '/api/canvas/ax/approval',
+    );
     return response.approvalGates ?? [];
   }
 
   async listReviewAnnotations(): Promise<ListReviewAnnotationsResult> {
-    const response = await this.requestJson<{ reviewAnnotations?: ListReviewAnnotationsResult }>('GET', '/api/canvas/ax/review');
+    const response = await this.requestJson<{ reviewAnnotations?: ListReviewAnnotationsResult }>(
+      'GET',
+      '/api/canvas/ax/review',
+    );
     return response.reviewAnnotations ?? [];
   }
 
@@ -400,7 +413,7 @@ async function readHealth(baseUrl: string): Promise<HealthResponse | null> {
   try {
     const response = await fetch(`${baseUrl}/health`, { signal: AbortSignal.timeout(400) });
     if (!response.ok) return null;
-    return await response.json() as HealthResponse;
+    return (await response.json()) as HealthResponse;
   } catch {
     return null;
   }
@@ -444,7 +457,9 @@ export function shouldAttachToExistingDaemon(
   occupant: { ok?: boolean; workspace?: unknown } | null,
   allowSplit: boolean,
 ): boolean {
-  return !allowSplit && occupant?.ok === true && typeof occupant.workspace === 'string' && occupant.workspace.length > 0;
+  return (
+    !allowSplit && occupant?.ok === true && typeof occupant.workspace === 'string' && occupant.workspace.length > 0
+  );
 }
 
 /**
@@ -550,8 +565,7 @@ export async function createCanvasAccess(): Promise<CanvasAccess> {
   const boundPort = canvas.port;
   if (boundPort !== port) {
     const occupant = await readHealth(occupantBaseUrl);
-    const occupantWorkspace =
-      typeof occupant?.workspace === 'string' ? ` (serving ${occupant.workspace})` : '';
+    const occupantWorkspace = typeof occupant?.workspace === 'string' ? ` (serving ${occupant.workspace})` : '';
     process.stderr.write(
       `[pmx-canvas] preferred port ${port} was in use${occupantWorkspace}; ` +
         `started this canvas on port ${boundPort} instead. To share one canvas, run the daemon ` +