pmx-canvas 0.1.29 → 0.1.31

package/src/client/theme/global.css

@@ -56,6 +56,10 @@
   --mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
   --radius: 10px;
   --radius-sm: 6px;
+  /* Shared height for the top HUD row so the toolbar and the collapsed docked
+     status/context widgets that flank it line up to the same height. Matches the
+     toolbar's natural content height (icon buttons at 6px padding). */
+  --hud-bar-height: 44px;
 }
 
 :root[data-theme="light"] {
@@ -481,6 +485,8 @@ body,
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
+  min-height: var(--hud-bar-height);
+  box-sizing: border-box;
   background: var(--c-panel-glass);
   backdrop-filter: blur(12px);
   border: 1px solid var(--c-line);
@@ -1409,6 +1415,38 @@ html.is-node-resizing .ext-app-preview-catcher {
   max-width: 320px;
 }
 
+/* Collapsed docked widget = a single menu-height pill that flanks the toolbar.
+   Pinned to the same height as .canvas-toolbar so the top HUD row reads as one
+   continuous bar (status on the left, context on the right). */
+.docked-node--collapsed {
+  height: var(--hud-bar-height);
+  box-sizing: border-box;
+  justify-content: center;
+  width: auto;
+  /* Reset the base .docked-node min-width so the collapsed pill hugs its content
+     (badge + count + controls) instead of stretching to a 200px bar. */
+  min-width: 0;
+}
+.docked-node--collapsed .docked-node-header {
+  height: 100%;
+  padding: 0 10px;
+  border-bottom: none;
+}
+.docked-node-count {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  background: var(--c-accent);
+  color: var(--c-contrast-fg);
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
 .docked-node-header {
   display: flex;
   align-items: center;
@@ -1473,6 +1511,19 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
 }
 
+/* Promote canvas iframes to their own GPU compositing layer. An iframe embedded
+   in the zoom/pan-transformed canvas — especially near the heavy backdrop-filter
+   blur used across the chrome and behind group frames — can intermittently paint
+   blank until a resize/zoom forces a repaint (reported for grouped HTML nodes;
+   the same class of compositor glitch as the earlier Excalidraw flicker). A no-op
+   3D transform forces a stable layer so the iframe keeps painting through
+   surrounding layout/stacking changes. */
+.mcp-app-frame,
+.html-node-frame {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
 /* ── Prompt nodes ──────────────────────────────────────────── */
 .canvas-node:has(.prompt-node-inner) {
   border-color: var(--c-accent-30);
@@ -1935,62 +1986,6 @@ html.is-node-resizing .ext-app-preview-catcher {
   max-width: 200px;
 }
 
-/* Context dock — collapsed pill mirrors Updates pill, sits above it */
-.context-dock-tab {
-  position: fixed;
-  top: 92px;
-  right: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px 8px 14px;
-  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
-  backdrop-filter: blur(16px);
-  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
-  border-right: 0;
-  border-radius: 14px 0 0 14px;
-  box-shadow: 0 12px 36px var(--c-shadow);
-  color: var(--c-text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  z-index: 60;
-}
-
-.context-dock-tab:hover {
-  border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-line) 60%);
-  color: var(--c-accent);
-}
-
-.context-dock-tab svg {
-  display: block;
-  color: var(--c-accent);
-  flex-shrink: 0;
-}
-
-.context-dock-tab-label {
-  white-space: nowrap;
-}
-
-.context-dock-tab-badge {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9px;
-  background: var(--c-accent);
-  color: var(--c-contrast-fg);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0;
-  text-transform: none;
-}
-
 /* Context dock — expanded panel anchored top-right edge.
    Mutually exclusive with the Updates panel (see DockedNode.tsx and
    AttentionHistory.tsx) — opening one collapses the other, so they can both

package/src/client/theme/surface-theme.css

@@ -0,0 +1,142 @@
+/*
+ * surface-theme.css — canonical theme token layer for embedded HTML surfaces.
+ *
+ * This is the same token set HtmlNode used to inline via buildThemeStyleBlock(),
+ * but expressed as a static, same-origin stylesheet so the server can serve a
+ * node's HTML surface (/api/canvas/surface/:nodeId) as a real standalone
+ * document. Sandboxed (opaque-origin) surface documents can still load this
+ * same-origin stylesheet, and live theme switching works by toggling the
+ * <html data-theme="..."> attribute — every theme block lives here.
+ *
+ * Tokens are written as LITERAL values per theme (not var() indirection) so that
+ * authored HTML reading them via getComputedStyle().getPropertyValue('--color-*')
+ * gets a resolved color, matching the previous inlined-style behavior.
+ *
+ * Core --c-* values MUST stay in sync with src/client/theme/global.css, and each
+ * --color-* alias mirrors its core token. Both are guarded by
+ * tests/unit/surface-theme-tokens.test.ts — update them together.
+ */
+
+:root {
+  /* ── Core palette (dark · ink + cyan) ────────────────────── */
+  --c-bg: #081524;
+  --c-panel: #0f1d31;
+  --c-panel-soft: #0a1729;
+  --c-line: #1b2c44;
+  --c-text: #e6eef7;
+  --c-text-soft: #c7d3ea;
+  --c-muted: #8ea3bd;
+  --c-dim: #5c6b80;
+  --c-accent: #4BBCFF;
+  --c-ok: #2fd07f;
+  --c-warn: #f4c542;
+  --c-warn-alt: #FFB300;
+  --c-danger: #ff6a7f;
+  --c-purple: #b07aff;
+
+  /* Common aliases authored HTML might use. */
+  --color-bg: #081524;
+  --color-panel: #0f1d31;
+  --color-surface: #0a1729;
+  --color-border: #1b2c44;
+  --color-text: #e6eef7;
+  --color-text-primary: #e6eef7;
+  --color-text-secondary: #c7d3ea;
+  --color-text-muted: #8ea3bd;
+  --color-text-dim: #5c6b80;
+  --color-accent: #4BBCFF;
+  --color-success: #2fd07f;
+  --color-warning: #f4c542;
+  --color-danger: #ff6a7f;
+
+  --font: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
+  --mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  --font-sans: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+
+  color-scheme: dark light;
+}
+
+:root[data-theme="light"] {
+  /* ── Core palette (light · paper + ink) ──────────────────── */
+  --c-bg: #F4EFE6;
+  --c-panel: #EFE7D4;
+  --c-panel-soft: #ECE4D0;
+  --c-line: #D6CBB4;
+  --c-text: #081524;
+  --c-text-soft: #3d4d63;
+  --c-muted: #5c6b80;
+  --c-dim: #8794a6;
+  --c-accent: #1A7ABF;
+  --c-ok: #1a9f55;
+  --c-warn: #c89b2a;
+  --c-warn-alt: #b8860b;
+  --c-danger: #d32f2f;
+  --c-purple: #7c4dff;
+
+  --color-bg: #F4EFE6;
+  --color-panel: #EFE7D4;
+  --color-surface: #ECE4D0;
+  --color-border: #D6CBB4;
+  --color-text: #081524;
+  --color-text-primary: #081524;
+  --color-text-secondary: #3d4d63;
+  --color-text-muted: #5c6b80;
+  --color-text-dim: #8794a6;
+  --color-accent: #1A7ABF;
+  --color-success: #1a9f55;
+  --color-warning: #c89b2a;
+  --color-danger: #d32f2f;
+}
+
+:root[data-theme="high-contrast"] {
+  /* ── Core palette (high-contrast) ────────────────────────── */
+  --c-bg: #000000;
+  --c-panel: #0a0a0a;
+  --c-panel-soft: #0a0a0a;
+  --c-line: #ffffff;
+  --c-text: #ffffff;
+  --c-text-soft: #dddddd;
+  --c-muted: #aaaaaa;
+  --c-dim: #888888;
+  --c-accent: #00ffff;
+  --c-ok: #00ff00;
+  --c-warn: #ffff00;
+  --c-warn-alt: #ffcc00;
+  --c-danger: #ff0000;
+  --c-purple: #e040fb;
+
+  --color-bg: #000000;
+  --color-panel: #0a0a0a;
+  --color-surface: #0a0a0a;
+  --color-border: #ffffff;
+  --color-text: #ffffff;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #dddddd;
+  --color-text-muted: #aaaaaa;
+  --color-text-dim: #888888;
+  --color-accent: #00ffff;
+  --color-success: #00ff00;
+  --color-warning: #ffff00;
+  --color-danger: #ff0000;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--c-bg);
+  color: var(--c-text);
+  font-family: var(--font, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+body {
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+a {
+  color: var(--c-accent);
+}

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

@@ -79,9 +79,39 @@ declare global {
     __PMX_CANVAS_JSON_RENDER_THEME__?: string;
     __PMX_CANVAS_JSON_RENDER_DISPLAY__?: string;
     __PMX_CANVAS_JSON_RENDER_DEVTOOLS__?: boolean;
+    __PMX_CANVAS_JSON_RENDER_NODE_ID__?: string;
+    __PMX_CANVAS_AX_TOKEN__?: string;
   }
 }
 
+// AX interaction types a json-render spec can bind actions to. When an action
+// named like one of these fires, we forward it to the parent canvas (which
+// 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',
+] as const;
+
+function buildAxHandlers(): Record<string, (params: Record<string, unknown>) => void> {
+  const nodeId = window.__PMX_CANVAS_JSON_RENDER_NODE_ID__;
+  const token = window.__PMX_CANVAS_AX_TOKEN__;
+  const handlers: Record<string, (params: Record<string, unknown>) => void> = {};
+  if (!nodeId || !token) return handlers;
+  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 : {} },
+      }, '*');
+    };
+  }
+  return handlers;
+}
+
 function syncPreferredTheme(): void {
   const forced = window.__PMX_CANVAS_JSON_RENDER_THEME__;
   if (forced) {
@@ -125,6 +155,7 @@ function App() {
         registry={registry}
         initialState={spec.state ?? undefined}
         directives={pmxCanvasDirectives}
+        handlers={buildAxHandlers()}
       >
         <Renderer spec={spec} registry={registry} loading={false} />
         {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? (

package/src/json-render/schema.ts

@@ -10,6 +10,10 @@ export const schema = defineSchema(
           props: s.propsOf('catalog.components'),
           children: s.array(s.string()),
           visible: s.any(),
+          // Event→action bindings (on.press, on.change, …). Preserved through
+          // validation so spec authors can wire actions — including the ax.*
+          // handlers the viewer forwards to the canvas AX bridge.
+          on: s.any(),
         }),
       ),
     }),

package/src/json-render/server.ts

@@ -459,6 +459,7 @@ function normalizeSpec(spec: Record<string, unknown>): Record<string, unknown> {
       resolvedType !== element.type ||
       JSON.stringify(normalizedProps) !== JSON.stringify(rawProps) ||
       !('visible' in element) ||
+      !('on' in element) ||
       !Array.isArray(element.children) ||
       normalizedChildren.length !== element.children.length;
 
@@ -468,6 +469,10 @@ function normalizeSpec(spec: Record<string, unknown>): Record<string, unknown> {
           type: resolvedType,
           props: normalizedProps,
           visible: 'visible' in element ? element.visible : true,
+          // The schema requires `on` (event→action bindings); default to an
+          // empty bindings object when absent so specs without any actions
+          // still validate (most elements have no `on`). Mirrors `visible`.
+          on: 'on' in element ? element.on : {},
           children: normalizedChildren,
         }
       : rawElement;
@@ -491,6 +496,7 @@ function normalizeJsonRenderInput(spec: unknown): unknown {
       root: {
         ...specRecord,
         visible: 'visible' in specRecord ? specRecord.visible : true,
+        on: 'on' in specRecord ? specRecord.on : {},
         children: Array.isArray(specRecord.children)
           ? specRecord.children.filter((child: unknown) => typeof child === 'string')
           : [],
@@ -935,7 +941,10 @@ export async function buildJsonRenderViewerHtml(options: {
   theme?: 'dark' | 'light' | 'high-contrast';
   display?: 'expanded';
   devtools?: boolean;
+  nodeId?: string;
+  axToken?: string;
 }): Promise<string> {
+  const sanitizeAxValue = (v?: string): string => (typeof v === 'string' ? v.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80) : '');
   try {
     await ensureJsonRenderBundle();
     const dir = bundleDir();
@@ -950,6 +959,10 @@ 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))};`,
+      ] : []),
       jsBundle,
     ].join('\n');
     return buildAppHtml({

package/src/mcp/canvas-access.ts

@@ -40,6 +40,22 @@ type SetAxFocusResult = ReturnType<PmxCanvas['setAxFocus']>;
 type RecordAxEventInput = Parameters<PmxCanvas['recordAxEvent']>[0];
 type RecordAxEventResult = ReturnType<PmxCanvas['recordAxEvent']>;
 type SendSteeringResult = ReturnType<PmxCanvas['sendSteering']>;
+type SubmitAxInteractionInput = Parameters<PmxCanvas['submitAxInteraction']>[0];
+type SubmitAxInteractionResult = ReturnType<PmxCanvas['submitAxInteraction']>;
+type GetPendingSteeringResult = ReturnType<PmxCanvas['getPendingSteering']>;
+type ListElicitationsResult = ReturnType<PmxCanvas['listElicitations']>;
+type RequestElicitationInput = Parameters<PmxCanvas['requestElicitation']>[0];
+type RequestElicitationResult = ReturnType<PmxCanvas['requestElicitation']>;
+type RespondElicitationResult = ReturnType<PmxCanvas['respondElicitation']>;
+type ListModeRequestsResult = ReturnType<PmxCanvas['listModeRequests']>;
+type RequestModeInput = Parameters<PmxCanvas['requestMode']>[0];
+type RequestModeResult = ReturnType<PmxCanvas['requestMode']>;
+type ResolveModeRequestResult = ReturnType<PmxCanvas['resolveModeRequest']>;
+type GetCommandRegistryResult = ReturnType<PmxCanvas['getCommandRegistry']>;
+type InvokeCommandResult = ReturnType<PmxCanvas['invokeCommand']>;
+type GetPolicyResult = ReturnType<PmxCanvas['getPolicy']>;
+type SetPolicyInput = Parameters<PmxCanvas['setPolicy']>[0];
+type SetPolicyResult = ReturnType<PmxCanvas['setPolicy']>;
 type GetAxTimelineQuery = Parameters<PmxCanvas['getAxTimeline']>[0];
 type GetAxTimelineResult = ReturnType<PmxCanvas['getAxTimeline']>;
 type AddWorkItemInput = Parameters<PmxCanvas['addWorkItem']>[0];
@@ -166,6 +182,19 @@ export interface CanvasAccess {
   listReviewAnnotations(): Promise<ListReviewAnnotationsResult>;
   getHostCapability(): Promise<GetHostCapabilityResult>;
   reportHostCapability(input: unknown, options?: { source?: PmxAxSource }): Promise<ReportHostCapabilityResult>;
+  submitAxInteraction(input: SubmitAxInteractionInput, options?: { source?: PmxAxSource }): Promise<SubmitAxInteractionResult>;
+  getPendingSteering(options?: { consumer?: string; limit?: number }): Promise<GetPendingSteeringResult>;
+  markSteeringDelivered(id: string): Promise<boolean>;
+  listElicitations(): Promise<ListElicitationsResult>;
+  requestElicitation(input: RequestElicitationInput, options?: { source?: PmxAxSource }): Promise<RequestElicitationResult>;
+  respondElicitation(id: string, response: Record<string, unknown>, options?: { source?: PmxAxSource }): Promise<RespondElicitationResult>;
+  listModeRequests(): Promise<ListModeRequestsResult>;
+  requestMode(input: RequestModeInput, options?: { source?: PmxAxSource }): Promise<RequestModeResult>;
+  resolveModeRequest(id: string, decision: 'approved' | 'rejected', options?: { resolution?: string; source?: PmxAxSource }): Promise<ResolveModeRequestResult>;
+  getCommandRegistry(): Promise<GetCommandRegistryResult>;
+  invokeCommand(name: string, args?: Record<string, unknown> | null, options?: { source?: PmxAxSource }): Promise<InvokeCommandResult>;
+  getPolicy(): Promise<GetPolicyResult>;
+  setPolicy(patch: SetPolicyInput, options?: { source?: PmxAxSource }): Promise<SetPolicyResult>;
   clear(): Promise<void>;
   search(query: string): Promise<SearchResult>;
   undo(): Promise<UndoRedoResult>;
@@ -242,7 +271,9 @@ class LocalCanvasAccess implements CanvasAccess {
   }
 
   async addHtmlNode(input: AddHtmlNodeInput): Promise<string> {
-    return this.canvas.addHtmlNode(input);
+    // PmxCanvas.addHtmlNode returns the created node; the CanvasAccess contract
+    // is a bare id string, so extract it (mirrors addNode above).
+    return this.canvas.addHtmlNode(input).id;
   }
 
   async addHtmlPrimitive(input: AddHtmlPrimitiveInput): Promise<AddHtmlPrimitiveResult> {
@@ -329,6 +360,58 @@ class LocalCanvasAccess implements CanvasAccess {
     return this.canvas.addWorkItem(input, { source: options?.source ?? 'mcp' });
   }
 
+  async submitAxInteraction(input: SubmitAxInteractionInput, options?: { source?: PmxAxSource }): Promise<SubmitAxInteractionResult> {
+    return this.canvas.submitAxInteraction(input, { source: options?.source ?? 'mcp' });
+  }
+
+  async getPendingSteering(options?: { consumer?: string; limit?: number }): Promise<GetPendingSteeringResult> {
+    return this.canvas.getPendingSteering(options);
+  }
+
+  async markSteeringDelivered(id: string): Promise<boolean> {
+    return this.canvas.markSteeringDelivered(id);
+  }
+
+  async listElicitations(): Promise<ListElicitationsResult> {
+    return this.canvas.listElicitations();
+  }
+
+  async requestElicitation(input: RequestElicitationInput, options?: { source?: PmxAxSource }): Promise<RequestElicitationResult> {
+    return this.canvas.requestElicitation(input, { source: options?.source ?? 'mcp' });
+  }
+
+  async respondElicitation(id: string, response: Record<string, unknown>, options?: { source?: PmxAxSource }): Promise<RespondElicitationResult> {
+    return this.canvas.respondElicitation(id, response, { source: options?.source ?? 'mcp' });
+  }
+
+  async listModeRequests(): Promise<ListModeRequestsResult> {
+    return this.canvas.listModeRequests();
+  }
+
+  async requestMode(input: RequestModeInput, options?: { source?: PmxAxSource }): Promise<RequestModeResult> {
+    return this.canvas.requestMode(input, { source: options?.source ?? 'mcp' });
+  }
+
+  async resolveModeRequest(id: string, decision: 'approved' | 'rejected', options?: { resolution?: string; source?: PmxAxSource }): Promise<ResolveModeRequestResult> {
+    return this.canvas.resolveModeRequest(id, decision, { ...(options ?? {}), source: options?.source ?? 'mcp' });
+  }
+
+  async getCommandRegistry(): Promise<GetCommandRegistryResult> {
+    return this.canvas.getCommandRegistry();
+  }
+
+  async invokeCommand(name: string, args?: Record<string, unknown> | null, options?: { source?: PmxAxSource }): Promise<InvokeCommandResult> {
+    return this.canvas.invokeCommand(name, args ?? null, { source: options?.source ?? 'mcp' });
+  }
+
+  async getPolicy(): Promise<GetPolicyResult> {
+    return this.canvas.getPolicy();
+  }
+
+  async setPolicy(patch: SetPolicyInput, options?: { source?: PmxAxSource }): Promise<SetPolicyResult> {
+    return this.canvas.setPolicy(patch, { source: options?.source ?? 'mcp' });
+  }
+
   async updateWorkItem(id: string, patch: UpdateWorkItemPatch, options?: { source?: PmxAxSource }): Promise<UpdateWorkItemResult> {
     return this.canvas.updateWorkItem(id, patch, { source: options?.source ?? 'mcp' });
   }
@@ -790,6 +873,120 @@ class RemoteCanvasAccess implements CanvasAccess {
     return response.workItem;
   }
 
+  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.
+    const response = await fetch(`${this.remoteBaseUrl}/api/canvas/ax/interaction`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ...input, source: options?.source ?? 'mcp' }),
+    });
+    const body = await response.json().catch(() => null);
+    if (body && typeof body === 'object') return body as SubmitAxInteractionResult;
+    throw new Error(`Remote canvas interaction failed with HTTP ${response.status}`);
+  }
+
+  async getPendingSteering(options?: { consumer?: string; limit?: number }): Promise<GetPendingSteeringResult> {
+    const params = new URLSearchParams();
+    if (options?.consumer) params.set('consumer', options.consumer);
+    if (options?.limit) params.set('limit', String(options.limit));
+    const qs = params.toString();
+    const response = await this.requestJson<{ pending?: GetPendingSteeringResult }>(
+      'GET',
+      `/api/canvas/ax/delivery/pending${qs ? `?${qs}` : ''}`,
+    );
+    return response.pending ?? [];
+  }
+
+  async markSteeringDelivered(id: string): Promise<boolean> {
+    const response = await this.requestJson<{ delivered?: boolean }>(
+      'POST',
+      `/api/canvas/ax/delivery/${encodeURIComponent(id)}/mark`,
+      {},
+    );
+    return response.delivered ?? false;
+  }
+
+  async listElicitations(): Promise<ListElicitationsResult> {
+    const r = await this.requestJson<{ elicitations?: ListElicitationsResult }>('GET', '/api/canvas/ax/elicitation');
+    return r.elicitations ?? [];
+  }
+
+  async requestElicitation(input: RequestElicitationInput, options?: { source?: PmxAxSource }): Promise<RequestElicitationResult> {
+    const r = await this.requestJson<{ elicitation?: RequestElicitationResult }>('POST', '/api/canvas/ax/elicitation', {
+      ...input,
+      source: options?.source ?? 'mcp',
+    });
+    if (!r.elicitation) throw new Error('Remote canvas did not return an elicitation.');
+    return r.elicitation;
+  }
+
+  async respondElicitation(id: string, response: Record<string, unknown>, options?: { source?: PmxAxSource }): Promise<RespondElicitationResult> {
+    const res = await fetch(`${this.remoteBaseUrl}/api/canvas/ax/elicitation/${encodeURIComponent(id)}/respond`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ response, source: options?.source ?? 'mcp' }),
+    });
+    if (res.status === 404) return null;
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return (await res.json() as { elicitation?: RespondElicitationResult }).elicitation ?? null;
+  }
+
+  async listModeRequests(): Promise<ListModeRequestsResult> {
+    const r = await this.requestJson<{ modeRequests?: ListModeRequestsResult }>('GET', '/api/canvas/ax/mode');
+    return r.modeRequests ?? [];
+  }
+
+  async requestMode(input: RequestModeInput, options?: { source?: PmxAxSource }): Promise<RequestModeResult> {
+    const r = await this.requestJson<{ modeRequest?: RequestModeResult }>('POST', '/api/canvas/ax/mode', {
+      ...input,
+      source: options?.source ?? 'mcp',
+    });
+    if (!r.modeRequest) throw new Error('Remote canvas did not return a mode request.');
+    return r.modeRequest;
+  }
+
+  async resolveModeRequest(id: string, decision: 'approved' | 'rejected', options?: { resolution?: string; source?: PmxAxSource }): Promise<ResolveModeRequestResult> {
+    const res = await fetch(`${this.remoteBaseUrl}/api/canvas/ax/mode/${encodeURIComponent(id)}/resolve`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ decision, ...(options?.resolution ? { resolution: options.resolution } : {}), source: options?.source ?? 'mcp' }),
+    });
+    if (res.status === 404) return null;
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return (await res.json() as { modeRequest?: ResolveModeRequestResult }).modeRequest ?? null;
+  }
+
+  async getCommandRegistry(): Promise<GetCommandRegistryResult> {
+    const r = await this.requestJson<{ commands?: GetCommandRegistryResult }>('GET', '/api/canvas/ax/command');
+    return r.commands ?? [];
+  }
+
+  async invokeCommand(name: string, args?: Record<string, unknown> | null, options?: { source?: PmxAxSource }): Promise<InvokeCommandResult> {
+    const r = await this.requestJson<{ event?: InvokeCommandResult }>('POST', '/api/canvas/ax/command', {
+      name,
+      ...(args ? { args } : {}),
+      source: options?.source ?? 'mcp',
+    });
+    return r.event ?? null;
+  }
+
+  async getPolicy(): Promise<GetPolicyResult> {
+    const r = await this.requestJson<{ policy?: GetPolicyResult }>('GET', '/api/canvas/ax/policy');
+    if (!r.policy) throw new Error('Remote canvas did not return a policy.');
+    return r.policy;
+  }
+
+  async setPolicy(patch: SetPolicyInput, options?: { source?: PmxAxSource }): Promise<SetPolicyResult> {
+    const r = await this.requestJson<{ policy?: SetPolicyResult }>('POST', '/api/canvas/ax/policy', {
+      ...patch,
+      source: options?.source ?? 'mcp',
+    });
+    if (!r.policy) throw new Error('Remote canvas did not return a policy.');
+    return r.policy;
+  }
+
   async updateWorkItem(id: string, patch: UpdateWorkItemPatch, options?: { source?: PmxAxSource }): Promise<UpdateWorkItemResult> {
     const response = await fetch(`${this.remoteBaseUrl}/api/canvas/ax/work/${encodeURIComponent(id)}`, {
       method: 'PATCH',