pmx-canvas 0.1.19 → 0.1.20

package/src/client/state/canvas-store.ts

@@ -173,10 +173,18 @@ export function addNode(node: CanvasNodeState): void {
 }
 
 export function updateNode(id: string, patch: Partial<CanvasNodeState>): void {
+  updateNodeWithOptions(id, patch);
+}
+
+function updateNodeWithOptions(
+  id: string,
+  patch: Partial<CanvasNodeState>,
+  options: { skipGroupChildTranslation?: boolean } = {},
+): void {
   const existing = nodes.value.get(id);
   if (!existing) return;
   const next = new Map(nodes.value);
-  if (existing.type === 'group' && patch.position) {
+  if (existing.type === 'group' && patch.position && options.skipGroupChildTranslation !== true) {
     const deltaX = patch.position.x - existing.position.x;
     const deltaY = patch.position.y - existing.position.y;
     if (deltaX !== 0 || deltaY !== 0) {
@@ -272,9 +280,11 @@ export function removeAnnotation(id: string): void {
 }
 
 export async function createAnnotationFromClient(input: {
+  type?: CanvasAnnotation['type'];
   points: CanvasAnnotation['points'];
   color: string;
   width: number;
+  text?: string;
   label?: string;
 }): Promise<{ ok: boolean }> {
   try {
@@ -748,10 +758,10 @@ export function autoArrange(): void {
       updateNode(id, { position });
     }
     for (const [groupId, bounds] of result.groupBounds.entries()) {
-      updateNode(groupId, {
+      updateNodeWithOptions(groupId, {
         position: { x: bounds.x, y: bounds.y },
         size: { width: bounds.width, height: bounds.height },
-      });
+      }, { skipGroupChildTranslation: true });
     }
   });
   persistLayout();
@@ -766,10 +776,10 @@ export function forceDirectedArrange(): void {
       updateNode(id, { position });
     }
     for (const [groupId, bounds] of result.groupBounds.entries()) {
-      updateNode(groupId, {
+      updateNodeWithOptions(groupId, {
         position: { x: bounds.x, y: bounds.y },
         size: { width: bounds.width, height: bounds.height },
-      });
+      }, { skipGroupChildTranslation: true });
     }
   });
   persistLayout();

package/src/client/state/sse-bridge.ts

@@ -388,21 +388,22 @@ function parseCanvasEdge(raw: Record<string, unknown>): CanvasEdge | null {
 
 function parseCanvasAnnotation(raw: Record<string, unknown>): CanvasAnnotation | null {
   if (typeof raw.id !== 'string' || !raw.id) return null;
-  if (raw.type !== 'freehand') return null;
+  if (raw.type !== 'freehand' && raw.type !== 'text') return null;
   if (!Array.isArray(raw.points)) return null;
   const points = raw.points
     .map((point) => parseCanvasPosition(point))
     .filter((point): point is { x: number; y: number } => point !== null);
   const bounds = parseCanvasRect(raw.bounds);
-  if (points.length < 2 || !bounds) return null;
+  if (points.length < (raw.type === 'text' ? 1 : 2) || !bounds) return null;
 
   return {
     id: raw.id,
-    type: 'freehand',
+    type: raw.type,
     points,
     bounds,
     color: typeof raw.color === 'string' ? raw.color : '#f97316',
     width: typeof raw.width === 'number' ? raw.width : 4,
+    ...(typeof raw.text === 'string' ? { text: raw.text } : {}),
     ...(typeof raw.label === 'string' ? { label: raw.label } : {}),
     createdAt: typeof raw.createdAt === 'string' ? raw.createdAt : '',
   };

package/src/client/theme/global.css

@@ -392,6 +392,19 @@ body,
   margin: 0.4em 0;
   color: var(--c-muted);
 }
+
+.canvas-node .node-body ul,
+.canvas-node .node-body ol {
+  margin: 0.4em 0;
+  padding-left: 0.25em;
+  list-style-position: inside;
+}
+
+.canvas-node .node-body li {
+  margin: 0.2em 0;
+  padding-left: 0.15em;
+}
+
 .canvas-node .node-body a {
   color: var(--c-accent);
   text-decoration: none;
@@ -1481,14 +1494,14 @@ body,
   height: 1px;
   overflow: visible;
   pointer-events: none;
-  z-index: 45;
+  z-index: 9000;
 }
 
 .annotation-capture-layer {
   position: absolute;
   inset: 0;
   z-index: 9996;
-  pointer-events: none;
+  pointer-events: auto;
   background: color-mix(in srgb, var(--c-accent) 5%, transparent);
 }
 
@@ -1496,6 +1509,26 @@ body,
   background: color-mix(in srgb, var(--c-danger) 6%, transparent);
 }
 
+.annotation-capture-layer.text {
+  background: color-mix(in srgb, var(--c-annotation) 4%, transparent);
+}
+
+.annotation-text-input {
+  position: absolute;
+  z-index: 9997;
+  min-width: 120px;
+  max-width: min(560px, calc(100% - 24px));
+  padding: 2px 4px;
+  border: 1px solid var(--c-annotation);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--c-bg) 72%, transparent);
+  color: var(--c-annotation);
+  font-family: var(--font);
+  font-weight: 700;
+  line-height: 1.15;
+  outline: none;
+}
+
 /* ── Drop Zone (file drag-and-drop) ─────────────────────────── */
 .drop-zone-overlay {
   position: absolute;

package/src/client/types.ts

@@ -48,11 +48,12 @@ export interface CanvasAnnotationPoint {
 
 export interface CanvasAnnotation {
   id: string;
-  type: 'freehand';
+  type: 'freehand' | 'text';
   points: CanvasAnnotationPoint[];
   bounds: { x: number; y: number; width: number; height: number };
   color: string;
   width: number;
+  text?: string;
   label?: string;
   createdAt: string;
 }

package/src/json-render/charts/components.tsx

@@ -8,7 +8,7 @@
  * a responsive chart inside a styled container.
  */
 
-import type { ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import type { BaseComponentProps } from '@json-render/react';
 import {
   BarChart as RechartsBarChart,
@@ -106,6 +106,40 @@ export const polarChartMargin = { top: 18, right: 40, bottom: 30, left: 40 };
 export const axisTickMargin = 8;
 export const legendMargin = { top: 10 };
 
+export function useChartFrameHeight(explicitHeight: number | null | undefined, fallbackHeight = 300) {
+  const frameRef = useRef<HTMLDivElement>(null);
+  const [autoHeight, setAutoHeight] = useState(fallbackHeight);
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+
+    const updateHeight = () => {
+      const rect = frame.getBoundingClientRect();
+      const doc = document.documentElement;
+      const currentHeight = frame.getBoundingClientRect().height;
+      const overflow = Math.max(0, doc.scrollHeight - doc.clientHeight);
+      const available = overflow > 0 ? currentHeight - overflow : window.innerHeight - rect.top - 24;
+      setAutoHeight(Math.max(220, Math.round(available)));
+    };
+
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(document.documentElement);
+    observer.observe(frame);
+    window.addEventListener('resize', updateHeight);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateHeight);
+    };
+  }, [explicitHeight]);
+
+  return {
+    frameRef,
+    height: typeof explicitHeight === 'number' ? Math.min(explicitHeight, autoHeight) : autoHeight,
+  };
+}
+
 /** Shared wrapper for cartesian charts (Line + Bar). */
 export function CartesianChart({
   props,
@@ -117,12 +151,12 @@ export function CartesianChart({
   className?: string;
 }) {
   const chartData = processChartData(props.data ?? [], props.xKey, props.yKey, props.aggregate);
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className={`pmx-chart${className ? ` ${className}` : ''}`}>
+    <div ref={frameRef} className={`pmx-chart${className ? ` ${className}` : ''}`}>
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         {children(chartData)}
       </ResponsiveContainer>
     </div>
@@ -172,12 +206,12 @@ function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>) {
 
 function ChartPieChart({ props }: BaseComponentProps<PieChartProps>) {
   const data = props.data ?? [];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--pie">
+    <div ref={frameRef} className="pmx-chart pmx-chart--pie">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsPieChart margin={polarChartMargin}>
           <Tooltip contentStyle={tooltipStyle} />
           {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}

package/src/json-render/charts/extra-components.tsx

@@ -40,6 +40,7 @@ import {
   legendMargin,
   polarChartMargin,
   tooltipStyle,
+  useChartFrameHeight,
   type CartesianChartProps,
 } from './components';
 
@@ -89,12 +90,12 @@ interface ScatterChartProps {
 function ChartScatterChart({ props }: BaseComponentProps<ScatterChartProps>) {
   const fill = props.color ?? CHART_COLORS[0];
   const data = props.data ?? [];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--scatter">
+    <div ref={frameRef} className="pmx-chart pmx-chart--scatter">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsScatterChart margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
           <XAxis type="number" dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} name={props.xKey} />
@@ -120,12 +121,12 @@ interface RadarChartProps {
 function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
   const data = props.data ?? [];
   const metrics = (props.metrics ?? []).filter((m) => typeof m === 'string' && m.length > 0);
-  const h = props.height ?? 320;
+  const { frameRef, height } = useChartFrameHeight(props.height, 320);
 
   return (
-    <div className="pmx-chart pmx-chart--radar">
+    <div ref={frameRef} className="pmx-chart pmx-chart--radar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsRadarChart data={data} outerRadius="66%" margin={polarChartMargin}>
           <PolarGrid stroke="var(--border, #e5e5e5)" />
           <PolarAngleAxis dataKey={props.axisKey} tick={axisStyle} />
@@ -166,12 +167,12 @@ function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps
   const chartData = props.aggregate
     ? mergeAggregated(props.data ?? [], props.xKey, series, props.aggregate)
     : props.data ?? [];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--stacked-bar">
+    <div ref={frameRef} className="pmx-chart pmx-chart--stacked-bar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsBarChart data={chartData} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
           <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
@@ -238,12 +239,12 @@ function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>) {
   const data = props.data ?? [];
   const barFill = props.barColor ?? CHART_COLORS[0];
   const lineStroke = props.lineColor ?? CHART_COLORS[3];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--composed">
+    <div ref={frameRef} className="pmx-chart pmx-chart--composed">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsComposedChart data={data} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
           <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />

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

@@ -49,6 +49,7 @@ declare global {
   interface Window {
     __PMX_CANVAS_JSON_RENDER_SPEC__?: Spec & { state?: Record<string, unknown> };
     __PMX_CANVAS_JSON_RENDER_THEME__?: string;
+    __PMX_CANVAS_JSON_RENDER_DISPLAY__?: string;
   }
 }
 

package/src/json-render/server.ts

@@ -511,7 +511,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
 
   const chartProps: Record<string, unknown> = {
     data: input.data,
-    height: input.height ?? 320,
+    ...(typeof input.height === 'number' ? { height: input.height } : {}),
   };
 
   switch (chartType) {
@@ -648,6 +648,7 @@ export async function buildJsonRenderViewerHtml(options: {
   title: string;
   spec: JsonRenderSpec;
   theme?: 'dark' | 'light' | 'high-contrast';
+  display?: 'expanded';
 }): Promise<string> {
   try {
     await ensureJsonRenderBundle();
@@ -661,6 +662,7 @@ export async function buildJsonRenderViewerHtml(options: {
     const boot = [
       `window.__PMX_CANVAS_JSON_RENDER_SPEC__ = ${JSON.stringify(options.spec)};`,
       ...(options.theme ? [`window.__PMX_CANVAS_JSON_RENDER_THEME__ = ${JSON.stringify(options.theme)};`] : []),
+      ...(options.display ? [`window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ = ${JSON.stringify(options.display)};`] : []),
       jsBundle,
     ].join('\n');
     return buildAppHtml({

package/src/mcp/canvas-access.ts

@@ -19,6 +19,8 @@ type AddDiagramInput = Parameters<PmxCanvas['addDiagram']>[0];
 type AddJsonRenderNodeInput = Parameters<PmxCanvas['addJsonRenderNode']>[0];
 type AddJsonRenderNodeResult = ReturnType<PmxCanvas['addJsonRenderNode']>;
 type AddHtmlNodeInput = Parameters<PmxCanvas['addHtmlNode']>[0];
+type AddHtmlPrimitiveInput = Parameters<PmxCanvas['addHtmlPrimitive']>[0];
+type AddHtmlPrimitiveResult = ReturnType<PmxCanvas['addHtmlPrimitive']>;
 type AddGraphNodeInput = Parameters<PmxCanvas['addGraphNode']>[0];
 type AddGraphNodeResult = ReturnType<PmxCanvas['addGraphNode']>;
 type UpdateNodePatch = Parameters<PmxCanvas['updateNode']>[1];
@@ -102,6 +104,7 @@ export interface CanvasAccess {
   addDiagram(input: AddDiagramInput): Promise<OpenMcpAppResult>;
   addJsonRenderNode(input: AddJsonRenderNodeInput): Promise<AddJsonRenderNodeResult>;
   addHtmlNode(input: AddHtmlNodeInput): Promise<string>;
+  addHtmlPrimitive(input: AddHtmlPrimitiveInput): Promise<AddHtmlPrimitiveResult>;
   addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult>;
   buildWebArtifact(input: WebArtifactInput): Promise<WebArtifactResult>;
   updateNode(id: string, patch: UpdateNodePatch): Promise<void>;
@@ -188,6 +191,10 @@ class LocalCanvasAccess implements CanvasAccess {
     return this.canvas.addHtmlNode(input);
   }
 
+  async addHtmlPrimitive(input: AddHtmlPrimitiveInput): Promise<AddHtmlPrimitiveResult> {
+    return this.canvas.addHtmlPrimitive(input);
+  }
+
   async addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult> {
     return this.canvas.addGraphNode(input);
   }
@@ -438,6 +445,22 @@ class RemoteCanvasAccess implements CanvasAccess {
     return await this.requestNodeId('POST', '/api/canvas/node', { type: 'html', ...input });
   }
 
+  async addHtmlPrimitive(input: AddHtmlPrimitiveInput): Promise<AddHtmlPrimitiveResult> {
+    const response = await this.requestJson<{
+      id?: string;
+      node?: { id?: string };
+      primitive?: { kind?: string; title?: string; htmlBytes?: number };
+    }>('POST', '/api/canvas/node', { type: 'html', ...input, primitive: input.kind });
+    const id = typeof response.id === 'string' ? response.id : response.node?.id;
+    if (!id) throw new Error('html primitive response did not include a node id.');
+    return {
+      id,
+      kind: input.kind,
+      title: response.primitive?.title ?? input.title ?? input.kind,
+      htmlBytes: response.primitive?.htmlBytes ?? 0,
+    };
+  }
+
   async addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult> {
     const response = await this.requestJson<GraphNodeResponse>('POST', '/api/canvas/graph', {
       ...input,

package/src/mcp/server.ts

@@ -25,6 +25,8 @@ import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
 import { isAbsolute, relative, resolve } from 'node:path';
 import { z } from 'zod';
 import { canvasState, describeCanvasSchema, validateStructuredCanvasPayload } from '../server/index.js';
+import { isHtmlPrimitiveKind } from '../server/html-primitives.js';
+import type { HtmlPrimitiveKind } from '../server/html-primitives.js';
 import { createCanvasAccess, refreshCanvasAccess, type CanvasAccess } from './canvas-access.js';
 import { serializeNodeForAgentContext } from '../server/agent-context.js';
 import { wrapCanvasAutomationScript } from '../server/server.js';
@@ -56,6 +58,8 @@ const jsonRenderSpecSchema = z.union([
   }).passthrough(),
 ]);
 
+const htmlPrimitiveKindSchema = z.string().refine(isHtmlPrimitiveKind, 'Unknown HTML primitive kind');
+
 function structuredSchemaDescription(): string {
   const routing = describeCanvasSchema().mcp.nodeTypeRouting;
   return Object.entries(routing)
@@ -428,6 +432,46 @@ export async function startMcpServer(): Promise<void> {
     },
   );
 
+  server.tool(
+    'canvas_add_html_primitive',
+    'Create a reusable HTML communication primitive as a normal sandboxed html node. Use this instead of long markdown for side-by-side choices, implementation plans, PR review sheets, module maps, design sheets, component galleries, flowcharts, slide decks, explainers, status reports, and throwaway editors with export/copy paths.',
+    {
+      kind: htmlPrimitiveKindSchema.describe('Primitive kind. Call canvas_describe_schema and read htmlPrimitives for data shapes and examples.'),
+      title: z.string().optional().describe('Node title shown in the canvas titlebar.'),
+      data: z.record(z.string(), z.unknown()).optional().describe('Primitive-specific data payload. See canvas_describe_schema.htmlPrimitives for each shape.'),
+      x: z.number().optional().describe('X position (auto-placed if omitted).'),
+      y: z.number().optional().describe('Y position (auto-placed if omitted).'),
+      width: z.number().optional().describe('Width in pixels (defaults per primitive).'),
+      height: z.number().optional().describe('Height in pixels (defaults per primitive).'),
+      strictSize: z.boolean().optional().describe('Keep explicit width/height fixed; iframe scrolls overflow internally.'),
+      full: z.boolean().optional().describe('Return the full created node payload. Default false returns compact metadata.'),
+      verbose: z.boolean().optional().describe('Alias for full:true.'),
+    },
+    async (input) => {
+      const c = await ensureCanvas();
+      const kind = input.kind as HtmlPrimitiveKind;
+      const result = await c.addHtmlPrimitive({
+        kind,
+        ...(typeof input.title === 'string' ? { title: input.title } : {}),
+        ...(input.data ? { data: input.data } : {}),
+        ...(typeof input.x === 'number' ? { x: input.x } : {}),
+        ...(typeof input.y === 'number' ? { y: input.y } : {}),
+        ...(typeof input.width === 'number' ? { width: input.width } : {}),
+        ...(typeof input.height === 'number' ? { height: input.height } : {}),
+        ...(input.strictSize === true ? { strictSize: true } : {}),
+      });
+      return {
+        content: [{
+          type: 'text',
+          text: JSON.stringify({
+            ...(await createdNodePayload(c, result.id, input)),
+            primitive: { kind: result.kind, title: result.title, htmlBytes: result.htmlBytes },
+          }, null, 2),
+        }],
+      };
+    },
+  );
+
   server.tool(
     'canvas_open_mcp_app',
     'Connect to an external MCP server that declares a ui:// app resource, call the specified tool, and open the resulting MCP App inside a canvas mcp-app node. This is a full external-MCP transport call, not the CLI kind shortcut; use canvas_add_diagram for the built-in Excalidraw preset.',
@@ -543,10 +587,13 @@ export async function startMcpServer(): Promise<void> {
 
   server.tool(
     'canvas_validate_spec',
-    'Validate a json-render spec or graph payload without creating a node. Returns the normalized json-render spec that the server would accept.',
+    'Validate a json-render spec, graph payload, or HTML primitive payload without creating a node. Returns normalized metadata the server would accept.',
     {
-      type: z.enum(['json-render', 'graph']).describe('Structured payload type to validate'),
+      type: z.enum(['json-render', 'graph', 'html-primitive']).describe('Structured payload type to validate'),
       spec: jsonRenderSpecSchema.optional().describe('json-render spec to validate when type="json-render"'),
+      kind: htmlPrimitiveKindSchema.optional().describe('HTML primitive kind when type="html-primitive"'),
+      primitive: htmlPrimitiveKindSchema.optional().describe('Alias for kind when type="html-primitive"'),
+      primitiveData: z.record(z.string(), z.unknown()).optional().describe('HTML primitive data payload when type="html-primitive"'),
       title: z.string().optional().describe('Optional graph title'),
       graphType: z.string().optional().describe('Graph type when type="graph"'),
       data: z.array(z.record(z.string(), z.unknown())).optional().describe('Graph dataset when type="graph"'),
@@ -573,29 +620,38 @@ export async function startMcpServer(): Promise<void> {
               type: 'json-render',
               spec: input.spec,
             })
-          : validateStructuredCanvasPayload({
-              type: 'graph',
-              graph: {
-                title: input.title,
-                graphType: input.graphType ?? 'line',
-                data: input.data ?? [],
-                ...(typeof input.xKey === 'string' ? { xKey: input.xKey } : {}),
-                ...(typeof input.yKey === 'string' ? { yKey: input.yKey } : {}),
-                ...(typeof input.zKey === 'string' ? { zKey: input.zKey } : {}),
-                ...(typeof input.nameKey === 'string' ? { nameKey: input.nameKey } : {}),
-                ...(typeof input.valueKey === 'string' ? { valueKey: input.valueKey } : {}),
-                ...(typeof input.axisKey === 'string' ? { axisKey: input.axisKey } : {}),
-                ...(Array.isArray(input.metrics) ? { metrics: input.metrics } : {}),
-                ...(Array.isArray(input.series) ? { series: input.series } : {}),
-                ...(typeof input.barKey === 'string' ? { barKey: input.barKey } : {}),
-                ...(typeof input.lineKey === 'string' ? { lineKey: input.lineKey } : {}),
-                ...(typeof input.aggregate === 'string' ? { aggregate: input.aggregate } : {}),
-                ...(typeof input.color === 'string' ? { color: input.color } : {}),
-                ...(typeof input.barColor === 'string' ? { barColor: input.barColor } : {}),
-                ...(typeof input.lineColor === 'string' ? { lineColor: input.lineColor } : {}),
-                ...(typeof input.height === 'number' ? { height: input.height } : {}),
-              },
-            });
+          : input.type === 'html-primitive'
+            ? validateStructuredCanvasPayload({
+                type: 'html-primitive',
+                primitive: {
+                  kind: (input.kind ?? input.primitive ?? '') as HtmlPrimitiveKind | '',
+                  ...(typeof input.title === 'string' ? { title: input.title } : {}),
+                  ...(input.primitiveData ? { data: input.primitiveData } : {}),
+                },
+              })
+            : validateStructuredCanvasPayload({
+                type: 'graph',
+                graph: {
+                  title: input.title,
+                  graphType: input.graphType ?? 'line',
+                  data: input.data ?? [],
+                  ...(typeof input.xKey === 'string' ? { xKey: input.xKey } : {}),
+                  ...(typeof input.yKey === 'string' ? { yKey: input.yKey } : {}),
+                  ...(typeof input.zKey === 'string' ? { zKey: input.zKey } : {}),
+                  ...(typeof input.nameKey === 'string' ? { nameKey: input.nameKey } : {}),
+                  ...(typeof input.valueKey === 'string' ? { valueKey: input.valueKey } : {}),
+                  ...(typeof input.axisKey === 'string' ? { axisKey: input.axisKey } : {}),
+                  ...(Array.isArray(input.metrics) ? { metrics: input.metrics } : {}),
+                  ...(Array.isArray(input.series) ? { series: input.series } : {}),
+                  ...(typeof input.barKey === 'string' ? { barKey: input.barKey } : {}),
+                  ...(typeof input.lineKey === 'string' ? { lineKey: input.lineKey } : {}),
+                  ...(typeof input.aggregate === 'string' ? { aggregate: input.aggregate } : {}),
+                  ...(typeof input.color === 'string' ? { color: input.color } : {}),
+                  ...(typeof input.barColor === 'string' ? { barColor: input.barColor } : {}),
+                  ...(typeof input.lineColor === 'string' ? { lineColor: input.lineColor } : {}),
+                  ...(typeof input.height === 'number' ? { height: input.height } : {}),
+                },
+              });
 
         return {
           content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
@@ -736,7 +792,7 @@ export async function startMcpServer(): Promise<void> {
           content: [{
             type: 'text',
             text: JSON.stringify({
-              ...await createdNodePayload(c, result.id),
+              ...(await createdNodePayload(c, result.id)),
               url: result.url,
               spec: result.spec,
             }, null, 2),
@@ -816,7 +872,7 @@ export async function startMcpServer(): Promise<void> {
           content: [{
             type: 'text',
             text: JSON.stringify({
-              ...await createdNodePayload(c, result.id),
+              ...(await createdNodePayload(c, result.id)),
               url: result.url,
               spec: result.spec,
             }, null, 2),

package/src/server/agent-context.ts

@@ -155,6 +155,17 @@ function summarizeWebArtifactData(data: Record<string, unknown>, maxLength: numb
   return parts.length > 0 ? truncateContextText(parts.join('\n'), maxLength) : 'Web artifact node';
 }
 
+function summarizeHtmlPrimitiveData(data: Record<string, unknown>, maxLength: number): string {
+  const parts: string[] = [];
+  const primitive = typeof data.htmlPrimitive === 'string' ? data.htmlPrimitive : '';
+  const description = typeof data.description === 'string' ? data.description : '';
+  const primitiveData = data.primitiveData;
+  if (primitive) parts.push(`HTML primitive: ${primitive}`);
+  if (description) parts.push(description);
+  if (primitiveData !== undefined) parts.push(`Data: ${stringifyContextValue(primitiveData, maxLength)}`);
+  return truncateContextText(parts.join('\n'), maxLength);
+}
+
 function metadataForNode(node: CanvasNodeState): Record<string, unknown> | undefined {
   switch (node.type) {
     case 'webpage': {
@@ -233,6 +244,12 @@ export function summarizeNodeForAgentContext(
       if (graphCfg) return truncateContextText(`Graph: ${JSON.stringify(graphCfg)}`, defaultTextLength);
       return stringifyContextValue(node.data.spec ?? {}, defaultTextLength);
     }
+    case 'html': {
+      if (typeof node.data.htmlPrimitive === 'string') {
+        return summarizeHtmlPrimitiveData(node.data, defaultTextLength);
+      }
+      return stringifyContextValue({ title: node.data.title, description: node.data.description }, defaultTextLength);
+    }
     case 'prompt':
     case 'response': {
       const text = (node.data.text as string) || (node.data.content as string) || '';