pmx-canvas 0.1.19 → 0.1.20

package/src/cli/agent.ts

@@ -73,6 +73,15 @@ interface CanvasSchemaResponse {
       'line' | 'bar' | 'pie' | 'area' | 'scatter' | 'radar' | 'stacked-bar' | 'composed'
     >;
   };
+  htmlPrimitives?: Array<{
+    kind: string;
+    title: string;
+    description: string;
+    useWhen: string;
+    defaultSize: { width: number; height: number };
+    dataShape: string;
+    example: Record<string, unknown>;
+  }>;
   mcp: {
     tools: string[];
     resources: string[];
@@ -480,6 +489,14 @@ function parseJsonValue(raw: string, label: string, hint: string): unknown {
   }
 }
 
+function parseJsonRecord(raw: string, label: string, hint: string): Record<string, unknown> {
+  const parsed = parseJsonValue(raw, label, hint);
+  if (!isRecord(parsed)) {
+    die(`${label} must be a JSON object.`, hint);
+  }
+  return parsed;
+}
+
 async function readTextInput(
   flags: Record<string, string | true>,
   options: {
@@ -615,6 +632,34 @@ async function buildJsonRenderRequestBody(
   return body;
 }
 
+async function buildHtmlPrimitiveRequestBody(
+  flags: Record<string, string | true>,
+): Promise<Record<string, unknown>> {
+  const hint = 'Use: pmx-canvas html primitive add --kind choice-grid --data-file ./primitive.json --title "Options"';
+  const kind = getStringFlag(flags, 'kind', 'primitive');
+  if (!kind) die('HTML primitives require --kind.', hint);
+  const body: Record<string, unknown> = { type: 'html', primitive: kind };
+  if (typeof flags.title === 'string') body.title = flags.title;
+  const rawData = await readOptionalTextInput(flags, {
+    fileFlags: ['data-file'],
+    valueFlags: ['data-json', 'data'],
+    allowStdin: true,
+    label: 'HTML primitive data',
+    hint,
+  });
+  if (rawData !== undefined) {
+    body.data = parseJsonRecord(rawData, 'HTML primitive data', hint);
+  }
+  applyCommonGeometryFlags(body, flags, {
+    x: 'Use a finite number, e.g. --x 500',
+    y: 'Use a finite number, e.g. --y 300',
+    width: 'Use a positive number, e.g. --width 980',
+    height: 'Use a positive number, e.g. --height 720',
+  });
+  applyStrictSizeFlags(body, flags);
+  return body;
+}
+
 async function buildGraphRequestBody(
   flags: Record<string, string | true>,
   options: { requireData?: boolean; allowStdin?: boolean } = {},
@@ -967,6 +1012,35 @@ function filterJsonRenderSchemaView(
   return flags.summary ? summarizeJsonRenderComponent(component) : component;
 }
 
+function summarizeHtmlPrimitive(primitive: NonNullable<CanvasSchemaResponse['htmlPrimitives']>[number]): Record<string, unknown> {
+  return {
+    kind: primitive.kind,
+    title: primitive.title,
+    description: primitive.description,
+    useWhen: primitive.useWhen,
+    defaultSize: primitive.defaultSize,
+    dataShape: primitive.dataShape,
+  };
+}
+
+function filterHtmlPrimitiveSchemaView(
+  schema: CanvasSchemaResponse,
+  flags: Record<string, string | true>,
+): Record<string, unknown> {
+  const primitives = schema.htmlPrimitives ?? [];
+  const kind = getStringFlag(flags, 'kind', 'primitive');
+  if (!kind) {
+    return {
+      primitives: flags.summary ? primitives.map((entry) => summarizeHtmlPrimitive(entry)) : primitives,
+    };
+  }
+  const primitive = primitives.find((entry) => entry.kind === kind);
+  if (!primitive) {
+    die(`Unknown HTML primitive: ${kind}`, 'Run: pmx-canvas html primitive schema --summary');
+  }
+  return flags.summary ? summarizeHtmlPrimitive(primitive) : primitive;
+}
+
 // ── Commands ─────────────────────────────────────────────────
 
 const COMMANDS: Record<string, { run: (args: string[]) => Promise<void>; help: string; examples: string[] }> = {};
@@ -1028,6 +1102,7 @@ cmd('node add', 'Add a node to the canvas', [
   'pmx-canvas node add --type file --content "src/index.ts"',
   'pmx-canvas node add --type webpage --url "https://example.com/docs"',
   'pmx-canvas node add --type html --title "Widget" --content "<main>Hello</main>"',
+  'pmx-canvas node add --type html --primitive choice-grid --data-file ./options.json --title "Options"',
   'pmx-canvas node add --type markdown --title "Note" --x 100 --y 200',
   'pmx-canvas node add --type json-render --title "Ops Dashboard" --spec-file ./dashboard.json',
   'pmx-canvas node add --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value',
@@ -1055,6 +1130,18 @@ cmd('node add', 'Add a node to the canvas', [
     return;
   }
 
+  if (type === 'html-primitive') {
+    const result = await api('POST', '/api/canvas/node', await buildHtmlPrimitiveRequestBody(flags));
+    output(result);
+    return;
+  }
+
+  if (type === 'html' && getStringFlag(flags, 'primitive', 'kind')) {
+    const result = await api('POST', '/api/canvas/node', await buildHtmlPrimitiveRequestBody(flags));
+    output(result);
+    return;
+  }
+
   if (type === 'mcp-app') {
     die(
       'mcp-app nodes require tool-backed app metadata and cannot be created with generic node add.',
@@ -1136,6 +1223,28 @@ cmd('json-render', 'Show json-render schema and canonical examples', [
   output(filterJsonRenderSchemaView(schema.jsonRender, flags));
 });
 
+cmd('html primitive add', 'Create a reusable sandboxed HTML communication primitive', [
+  'pmx-canvas html primitive add --kind choice-grid --data-file ./options.json --title "Options"',
+  'pmx-canvas html primitive add --kind plan-timeline --data-json \'{"milestones":[{"title":"Ship","detail":"Implement and verify","status":"next"}]}\'',
+  'pmx-canvas html primitive add --kind triage-board --data-file ./tickets.json --strict-size',
+], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('html primitive add');
+  const result = await api('POST', '/api/canvas/node', await buildHtmlPrimitiveRequestBody(flags));
+  output(result);
+});
+
+cmd('html primitive schema', 'Describe reusable HTML communication primitives', [
+  'pmx-canvas html primitive schema --summary',
+  'pmx-canvas html primitive schema --kind choice-grid',
+  'pmx-canvas html primitive schema --kind triage-board --summary',
+], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('html primitive schema');
+  const schema = await loadCanvasSchema();
+  output(filterHtmlPrimitiveSchemaView(schema, flags));
+});
+
 cmd('graph add', 'Add a graph node to the canvas', [
   'pmx-canvas graph add --graph-type bar --data-file ./metrics.json --x-key label --y-key value',
   'pmx-canvas graph add --graphType composed --data \'[{"day":"Mon","visits":10,"conversion":0.4}]\' --xKey day --barKey visits --lineKey conversion',
@@ -1176,6 +1285,7 @@ cmd('node schema', 'Describe server-supported node create schemas and canonical
           rootShape: result.jsonRender.rootShape,
         },
         graph: result.graph,
+        htmlPrimitives: result.htmlPrimitives?.map((entry) => summarizeHtmlPrimitive(entry)) ?? [],
         mcp: result.mcp,
       });
       return;
@@ -1898,19 +2008,31 @@ cmd('validate', 'Validate the current layout for collisions and missing edge end
 cmd('validate spec', 'Validate a json-render spec or graph payload without creating a node', [
   'pmx-canvas validate spec --type json-render --spec-file ./dashboard.json',
   'pmx-canvas validate spec --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value',
+  'pmx-canvas validate spec --type html-primitive --kind choice-grid --data-file ./options.json',
   'pmx-canvas validate spec --type json-render --spec-file ./dashboard.json --summary',
 ], async (args) => {
   const { flags } = parseFlags(args);
   if (flags.help || flags.h) return showCommandHelp('validate spec');
 
   const type = getStringFlag(flags, 'type');
-  if (type !== 'json-render' && type !== 'graph') {
-    die('validate spec requires --type json-render or --type graph.');
+  if (type !== 'json-render' && type !== 'graph' && type !== 'html-primitive') {
+    die('validate spec requires --type json-render, --type graph, or --type html-primitive.');
   }
 
-  const body = type === 'json-render'
-    ? { type, spec: (await buildJsonRenderRequestBody({ ...flags, title: String(flags.title ?? 'Validation') })).spec }
-    : { type, ...(await buildGraphRequestBody(flags)) };
+  let body: Record<string, unknown>;
+  if (type === 'json-render') {
+    body = { type, spec: (await buildJsonRenderRequestBody({ ...flags, title: String(flags.title ?? 'Validation') })).spec };
+  } else if (type === 'html-primitive') {
+    const primitiveBody = await buildHtmlPrimitiveRequestBody(flags);
+    body = {
+      type,
+      kind: primitiveBody.primitive,
+      ...(typeof primitiveBody.title === 'string' ? { title: primitiveBody.title } : {}),
+      ...(isRecord(primitiveBody.data) ? { data: primitiveBody.data } : {}),
+    };
+  } else {
+    body = { type, ...(await buildGraphRequestBody(flags)) };
+  }
 
   const result = await api('POST', '/api/canvas/schema/validate', body) as Record<string, unknown>;
   if (flags.summary) {
@@ -2302,9 +2424,17 @@ function showCommandHelp(name: string): void {
     console.log('  pmx-canvas node add --help --type webpage');
     console.log('  pmx-canvas node add --help --type json-render --component Table');
     console.log('  pmx-canvas node add --help --type graph');
+    console.log('  pmx-canvas html primitive schema --summary');
     console.log('  pmx-canvas node add --help --type webpage --json');
     console.log('  Use --strict-size to keep explicit width/height fixed and scroll overflowing content.');
   }
+  if (name === 'html primitive add' || name === 'html primitive schema') {
+    console.log('\nPrimitive flags:');
+    console.log('  --kind <name>              Run `pmx-canvas html primitive schema --summary` for the full catalog');
+    console.log('  --data-file <path>         JSON object payload for the primitive');
+    console.log('  --data-json, --data <json> Inline JSON object payload');
+    console.log('  --stdin                    Read JSON object payload from stdin');
+  }
   if (name === 'json-render') {
     console.log('\nOptions:');
     console.log('  --schema                  Show json-render catalog schema (default)');
@@ -2319,6 +2449,10 @@ function showCommandHelp(name: string): void {
     console.log('  Use --node-height/--nodeHeight for canvas frame height; use --chart-height for chart content height. --height is kept as a frame-height alias for compatibility.');
     console.log('  Pass --show-legend false to hide legends in compact node layouts.');
   }
+  if (name === 'validate spec') {
+    console.log('\nHTML primitive flags:');
+    console.log('  --type html-primitive --kind <name> --data-file ./payload.json');
+  }
   if (name === 'node schema') {
     console.log('\nFilters:');
     console.log('  --summary                 Show compact schema summaries');
@@ -2328,6 +2462,7 @@ function showCommandHelp(name: string): void {
   if (name === 'validate spec') {
     console.log('\nOutput control:');
     console.log('  --summary                 Return only validation summary metadata');
+    console.log('  For --type html-primitive, pass --kind plus optional --data-file/--data-json.');
   }
   if (name === 'snapshot list') {
     console.log('\nOptions:');
@@ -2415,6 +2550,8 @@ Node commands:
   pmx-canvas node remove <id>         Remove a node
   pmx-canvas json-render              Show json-render schema/examples
   pmx-canvas graph add [options]      Add a graph node
+  pmx-canvas html primitive add        Add an HTML communication primitive
+  pmx-canvas html primitive schema     List HTML primitive kinds and shapes
 
 Edge commands:
   pmx-canvas edge add [options]       Add an edge between nodes
@@ -2488,6 +2625,8 @@ Examples:
   pmx-canvas node add --type web-artifact --title "Dashboard" --app-file ./App.tsx
   pmx-canvas node add --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value
   pmx-canvas graph add --graph-type bar --data-file ./metrics.json --x-key label --y-key value
+  pmx-canvas html primitive add --kind choice-grid --data-file ./options.json --title "Options"
+  pmx-canvas html primitive schema --summary
   pmx-canvas node add --help --type webpage
   pmx-canvas node schema --type json-render
   pmx-canvas node schema --type json-render --component Table --summary
@@ -2534,6 +2673,12 @@ export async function runAgentCli(args: string[]): Promise<void> {
     return;
   }
 
+  const threeWord = `${args[0]} ${args[1] ?? ''} ${args[2] ?? ''}`.trim();
+  if (COMMANDS[threeWord]) {
+    await COMMANDS[threeWord].run(args.slice(3));
+    return;
+  }
+
   // Try two-word command first (e.g., "node add"), then one-word (e.g., "search")
   const twoWord = `${args[0]} ${args[1] ?? ''}`.trim();
   if (COMMANDS[twoWord]) {

package/src/client/App.tsx

@@ -52,6 +52,7 @@ import {
   IconShortcuts,
   IconSnapshot,
   IconSun,
+  IconTextAnnotation,
   IconTrace,
   IconZoomIn,
   IconZoomOut,
@@ -73,7 +74,7 @@ function sendIntent(type: string, payload: Record<string, unknown> = {}): void {
   });
 }
 
-type AnnotationTool = 'pen' | 'eraser' | null;
+type AnnotationTool = 'pen' | 'eraser' | 'text' | null;
 
 function ToolbarHint({
   label,
@@ -115,6 +116,7 @@ function Toolbar({
   annotationTool,
   onToggleAnnotationMode,
   onToggleAnnotationEraser,
+  onToggleTextAnnotation,
 }: {
   minimapVisible: boolean;
   onToggleMinimap: () => void;
@@ -126,6 +128,7 @@ function Toolbar({
   annotationTool: AnnotationTool;
   onToggleAnnotationMode: () => void;
   onToggleAnnotationEraser: () => void;
+  onToggleTextAnnotation: () => void;
 }) {
   const status = connectionStatus.value;
   const hasSynced = hasInitialServerLayout.value;
@@ -316,6 +319,20 @@ function Toolbar({
             <IconEraser />
           </button>
         </ToolbarHint>
+        <ToolbarHint
+          label={annotationTool === 'text' ? 'Stop text annotations' : 'Text annotations'}
+          detail="Click anywhere to type an intent note"
+        >
+          <button
+            type="button"
+            onClick={onToggleTextAnnotation}
+            aria-label={annotationTool === 'text' ? 'Stop text annotations' : 'Text annotations'}
+            aria-pressed={annotationTool === 'text'}
+            style={{ color: annotationTool === 'text' ? 'var(--c-accent)' : undefined }}
+          >
+            <IconTextAnnotation />
+          </button>
+        </ToolbarHint>
 
         <div class="separator" />
 
@@ -392,6 +409,7 @@ export function App() {
   const handleCloseSnapshot = useCallback(() => setSnapshotOpen(false), []);
   const handleToggleAnnotationMode = useCallback(() => setAnnotationTool((tool) => tool === 'pen' ? null : 'pen'), []);
   const handleToggleAnnotationEraser = useCallback(() => setAnnotationTool((tool) => tool === 'eraser' ? null : 'eraser'), []);
+  const handleToggleTextAnnotation = useCallback(() => setAnnotationTool((tool) => tool === 'text' ? null : 'text'), []);
 
   const handleMinimapNavigate = useCallback((x: number, y: number) => {
     animateViewport({ x, y, scale: viewport.value.scale }, 200);
@@ -520,6 +538,7 @@ export function App() {
           annotationTool={annotationTool}
           onToggleAnnotationMode={handleToggleAnnotationMode}
           onToggleAnnotationEraser={handleToggleAnnotationEraser}
+          onToggleTextAnnotation={handleToggleTextAnnotation}
         />
         <div class="hud-right">
           {dockedRight.map((n) => (

package/src/client/canvas/AnnotationLayer.tsx

@@ -11,18 +11,39 @@ export function AnnotationLayer({ annotations }: { annotations: CanvasAnnotation
 
   return (
     <svg class="annotation-layer" aria-hidden="true">
-      {annotations.map((annotation) => (
-        <path
-          key={annotation.id}
-          d={pointsToPath(annotation.points)}
-          fill="none"
-          stroke={annotation.color === 'currentColor' ? 'var(--c-annotation)' : annotation.color}
-          stroke-width={annotation.width}
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          opacity="0.9"
-        />
-      ))}
+      {annotations.map((annotation) => {
+        const color = annotation.color === 'currentColor' ? 'var(--c-annotation)' : annotation.color;
+        if (annotation.type === 'text') {
+          const point = annotation.points[0];
+          if (!point || !annotation.text) return null;
+          return (
+            <text
+              key={annotation.id}
+              x={point.x}
+              y={point.y}
+              fill={color}
+              font-size={annotation.width}
+              font-family="var(--font)"
+              font-weight="700"
+              opacity="0.95"
+            >
+              {annotation.text}
+            </text>
+          );
+        }
+        return (
+          <path
+            key={annotation.id}
+            d={pointsToPath(annotation.points)}
+            fill="none"
+            stroke={color}
+            stroke-width={annotation.width}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            opacity="0.9"
+          />
+        );
+      })}
     </svg>
   );
 }

package/src/client/canvas/CanvasViewport.tsx

@@ -102,6 +102,7 @@ function findAnnotationAtPoint(
       point.y < annotation.bounds.y - pad ||
       point.y > annotation.bounds.y + annotation.bounds.height + pad
     ) continue;
+    if (annotation.type === 'text') return annotation;
     for (let index = 1; index < annotation.points.length; index++) {
       const start = annotation.points[index - 1];
       const end = annotation.points[index];
@@ -122,19 +123,27 @@ interface LassoRect {
 
 interface AnnotationDraft {
   id: string;
-  type: 'freehand';
+  type: 'freehand' | 'text';
   points: Array<{ x: number; y: number }>;
   bounds: { x: number; y: number; width: number; height: number };
   color: string;
   width: number;
+  text?: string;
   createdAt: string;
 }
 
+interface TextAnnotationDraft {
+  x: number;
+  y: number;
+  value: string;
+}
+
 const ANNOTATION_COLOR = 'currentColor';
 const ANNOTATION_WIDTH = 4;
+const TEXT_ANNOTATION_WIDTH = 24;
 const ERASER_HIT_RADIUS = 14;
 
-type AnnotationTool = 'pen' | 'eraser' | null;
+type AnnotationTool = 'pen' | 'eraser' | 'text' | null;
 
 interface CanvasViewportProps {
   onNodeContextMenu?: (e: MouseEvent, nodeId: string) => void;
@@ -233,6 +242,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
   const annotationPoints = useRef<Array<{ x: number; y: number }>>([]);
   const [lasso, setLasso] = useState<LassoRect | null>(null);
   const [draftAnnotation, setDraftAnnotation] = useState<AnnotationDraft | null>(null);
+  const [textDraft, setTextDraftState] = useState<TextAnnotationDraft | null>(null);
+  const textDraftRef = useRef<TextAnnotationDraft | null>(null);
   const [dropActive, setDropActive] = useState(false);
   const dropCounter = useRef(0);
   // Ref mirrors lasso state so pointer handlers always read the latest value
@@ -256,6 +267,11 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
     },
   });
 
+  const setTextDraft = useCallback((next: TextAnnotationDraft | null) => {
+    textDraftRef.current = next;
+    setTextDraftState(next);
+  }, []);
+
   const createWebpageNodes = useCallback(async (urls: string[], centerX: number, centerY: number) => {
     if (urls.length === 0) return;
 
@@ -305,6 +321,23 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         return;
       }
 
+      if (annotationTool === 'text') {
+        const target = e.target instanceof Element ? e.target : null;
+        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        activeNodeId.value = null;
+        clearSelection();
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        setTextDraft({
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+          value: '',
+        });
+        return;
+      }
+
       if (annotationTool === 'pen') {
         const target = e.target instanceof Element ? e.target : null;
         if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
@@ -450,11 +483,32 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
 
   useEffect(() => {
     if (annotationMode) return;
-    if (!isAnnotating.current && !draftAnnotation) return;
+    if (!isAnnotating.current && !draftAnnotation && !textDraft) return;
     isAnnotating.current = false;
     annotationPoints.current = [];
     setDraftAnnotation(null);
-  }, [annotationMode, draftAnnotation]);
+    setTextDraft(null);
+  }, [annotationMode, draftAnnotation, setTextDraft, textDraft]);
+
+  const commitTextDraft = useCallback(() => {
+    const draft = textDraftRef.current;
+    if (!draft) return;
+    const text = draft.value.trim();
+    setTextDraft(null);
+    if (!text) return;
+    const point = { x: draft.x, y: draft.y };
+    void createAnnotationFromClient({
+      type: 'text',
+      points: [point],
+      color: ANNOTATION_COLOR,
+      width: TEXT_ANNOTATION_WIDTH,
+      text,
+    });
+  }, [setTextDraft]);
+
+  useEffect(() => {
+    if (annotationTool !== 'text' && textDraft) setTextDraft(null);
+  }, [annotationTool, setTextDraft, textDraft]);
 
   // ── Drag-to-connect: track cursor in world space, hit-test on drop ──
   useEffect(() => {
@@ -517,8 +571,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
       const wx = (e.clientX - rect.left - v.x) / v.scale;
       const wy = (e.clientY - rect.top - v.y) / v.scale;
       // Offset so node centers on click point
-      const nodeW = 360;
-      const nodeH = 200;
+      const nodeW = 520;
+      const nodeH = 360;
       createNodeFromClient({
         type: 'markdown',
         title: 'New note',
@@ -697,6 +751,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         overflow: 'hidden',
         cursor: annotationTool === 'eraser'
           ? 'cell'
+          : annotationTool === 'text'
+            ? 'text'
           : annotationMode || draggingEdge.value || isLassoing.current
             ? 'crosshair'
             : 'grab',
@@ -737,7 +793,32 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
           </svg>
         )}
       </div>
-      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}`} aria-hidden="true" />}
+      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}${annotationTool === 'text' ? ' text' : ''}`} aria-hidden="true" />}
+      {textDraft && (
+        <input
+          class="annotation-text-input"
+          value={textDraft.value}
+          autoFocus
+          style={{
+            left: `${textDraft.x * v.scale + v.x}px`,
+            top: `${textDraft.y * v.scale + v.y}px`,
+            fontSize: `${TEXT_ANNOTATION_WIDTH * v.scale}px`,
+          }}
+          onInput={(e) => setTextDraft({ ...textDraft, value: (e.target as HTMLInputElement).value })}
+          onBlur={commitTextDraft}
+          onPointerDown={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              commitTextDraft();
+            }
+            if (e.key === 'Escape') {
+              e.preventDefault();
+              setTextDraft(null);
+            }
+          }}
+        />
+      )}
       {lassoStyle && <div class="lasso-rect" style={lassoStyle} />}
       {dropActive && (
         <div class="drop-zone-overlay">

package/src/client/canvas/CommandPalette.tsx

@@ -135,7 +135,7 @@ export function CommandPalette({
 
     // Action items
     const actions: Array<{ label: string; badge: string; action: () => void }> = [
-      { label: 'New note (markdown node)', badge: 'CREATE', action: () => { createNodeFromClient({ type: 'markdown', title: 'New note' }); onClose(); } },
+      { label: 'New note (markdown node)', badge: 'CREATE', action: () => { createNodeFromClient({ type: 'markdown', title: 'New note', width: 520, height: 360 }); onClose(); } },
       { label: 'Fit all nodes', badge: 'VIEW', action: () => { fitAll(window.innerWidth, window.innerHeight); onClose(); } },
       { label: 'Auto-arrange (grid)', badge: 'LAYOUT', action: () => { autoArrange(); onClose(); } },
       { label: 'Auto-arrange (graph-aware)', badge: 'LAYOUT', action: () => { forceDirectedArrange(); onClose(); } },

package/src/client/canvas/ContextMenu.tsx

@@ -319,8 +319,8 @@ function buildCanvasMenuItems(canvasX: number, canvasY: number): MenuItem[] {
     {
       label: 'New note',
       action: () => {
-        const width = 360;
-        const height = 200;
+        const width = 520;
+        const height = 360;
         const position = centeredPosition(canvasX, canvasY, width, height);
         void createNodeFromClient({
           type: 'markdown',

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -122,6 +122,7 @@ export function ExpandedNodeOverlay() {
   const isCtxPinned = nodeId ? contextPinnedNodeIds.value.has(nodeId) : false;
   const hasText = textContent.length > 0;
   const pendingClose = pendingExpandedNodeCloseId.value === nodeId;
+  const isEmbeddedViewer = node.type === 'mcp-app' || node.type === 'webpage' || node.type === 'json-render' || node.type === 'graph';
 
   return (
     <div
@@ -260,9 +261,14 @@ export function ExpandedNodeOverlay() {
             overflow: 'auto',
             padding: '16px',
             minHeight: 0,
+            ...(isEmbeddedViewer ? { display: 'flex', flexDirection: 'column' } : {}),
           }}
         >
-          {renderContent(node, true)}
+          {isEmbeddedViewer ? (
+            <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
+              {renderContent(node, true)}
+            </div>
+          ) : renderContent(node, true)}
         </div>
       </div>
     </div>

package/src/client/icons.tsx

@@ -139,6 +139,19 @@ export function IconEraser(p: IconProps): JSX.Element {
   );
 }
 
+/** Text cursor — canvas text annotation mode */
+export function IconTextAnnotation(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M3 4h10" />
+      <path d="M8 4v8" />
+      <path d="M6 12h4" />
+      <path d="M4.5 4 4 6" />
+      <path d="M11.5 4 12 6" />
+    </Icon>
+  );
+}
+
 /** Camera — snapshots */
 export function IconSnapshot(p: IconProps): JSX.Element {
   return (

package/src/client/nodes/McpAppNode.tsx

@@ -2,11 +2,12 @@ import type { CanvasNodeState } from '../types';
 import { canvasTheme } from '../state/canvas-store';
 import { ExtAppFrame } from './ExtAppFrame';
 
-function withTheme(url: string): string {
+function withViewerParams(url: string, expanded: boolean): string {
   if (!url) return url;
   try {
     const resolved = new URL(url, window.location.origin);
     resolved.searchParams.set('theme', canvasTheme.value === 'light' ? 'light' : 'dark');
+    if (expanded) resolved.searchParams.set('display', 'expanded');
     return resolved.toString();
   } catch {
     return url;
@@ -18,7 +19,7 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
     return <ExtAppFrame node={node} expanded={expanded} />;
   }
 
-  const url = withTheme((node.data.url as string) || '');
+  const url = withViewerParams((node.data.url as string) || '', expanded);
   const sourceServer = (node.data.sourceServer as string) || '';
   const hostMode = (node.data.hostMode as string) || 'hosted';
   const fallbackReason = node.data.fallbackReason as string | undefined;
@@ -54,7 +55,14 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
   }
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        ...(expanded ? { flex: 1, minHeight: 0, width: '100%' } : {}),
+      }}
+    >
       {!trustedDomain && (
         <div
           style={{
@@ -77,7 +85,7 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
         sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
         allow="clipboard-read; clipboard-write"
         loading="lazy"
-        style={{ flex: 1 }}
+        style={{ flex: 1, minHeight: 0, width: '100%' }}
         title={`MCP App: ${sourceServer}`}
       />
     </div>