pmx-canvas 0.1.19 → 0.1.21

package/CHANGELOG.md

@@ -3,6 +3,163 @@
 All notable changes to `pmx-canvas` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## [0.1.21] - 2026-05-09
+
+HTML communication maturity pass on top of 0.1.20. Adds a
+`presentation` primitive kind (PowerPoint-style decks with themes),
+turns every html node into a first-class agent context surface with
+semantic sidecars (summary, agent summary, description, slide
+titles, embedded refs), wires a real Present-mode overlay with
+iframe-focused keyboard navigation and a live theme bridge, and
+routes the `pmx-canvas html` subcommand correctly through the agent
+CLI.
+
+### Added
+
+- **New `presentation` HTML primitive kind.** `canvas_add_html_primitive
+  --kind presentation` generates a PowerPoint-style fullscreen deck
+  inside the standard sandboxed `html` node and persists the deck
+  metadata (`presentation: true`, `slideCount`, `slideTitles`,
+  optional `presentationTheme`). Themes: `canvas`, `midnight`,
+  `paper`, `aurora`, or a custom color object with `bg`, `panel`,
+  `surface`, `border`, `text`, `textSecondary`, `textMuted`,
+  `accent`, and `colorScheme`. The MCP canvas now exposes 19 HTML
+  primitives (was 18).
+- **HTML node semantic sidecars.** Every html node can now carry
+  agent-readable metadata that agents see without parsing the
+  iframe payload: `summary`, `agentSummary`, `description`,
+  `presentation`, `slideTitles`, `embeddedNodeIds`, `embeddedUrls`.
+  Same surface lands on CLI (`pmx-canvas node add --type html
+  --summary "..." --agent-summary "..." --description "..."
+  --presentation true --slide-title "..." --embedded-node-id ...`),
+  HTTP `POST /api/canvas/node`, MCP `canvas_add_html_node`, SDK
+  `PmxCanvas.addHtmlNode()`, and `canvas_describe_schema`.
+  `agent-context` and `canvas://pinned-context` now expose this
+  metadata for HTML nodes.
+- **Auto-derived `contentSummary` for html nodes.** When the agent
+  doesn't supply an explicit summary, PMX runs the rendered HTML
+  through a new `summarizeHtmlText()` (in
+  `src/server/html-node-summary.ts`) to extract a bounded plain-
+  text summary that drives search, pinned context, and spatial
+  context. `normalizeHtmlNodeSemanticData()` keeps existing
+  provenance and semantic fields stable across edits.
+- **Browser-side Present mode.** Presentation-marked html nodes
+  surface a Present button in `ExpandedNodeOverlay` that opens a
+  fullscreen overlay with the deck iframe focused. Arrow keys,
+  Page Up/Down, Space, Home, and End are forwarded into the iframe
+  via a token-scoped postMessage bridge, and pressing Escape inside
+  the iframe exits via the same bridge. A live theme bridge
+  re-injects the canvas theme tokens into the iframe whenever the
+  theme changes, so present mode reflects light/dark toggles
+  instantly.
+- **`html-primitives.md` skill reference.** New 132-line authoring
+  guide under `skills/pmx-canvas/references/` covers when to use
+  primitives versus `canvas_add_html_node` versus
+  `canvas_build_web_artifact`, the catalog, and shared design
+  language.
+
+### Changed
+
+- **`canvas_add_html_node` clarifies presentation is opt-in.** The
+  MCP tool description now states explicitly that presentation
+  mode is opt-in (pass `presentation: true` or use the
+  `presentation` primitive) — normal html nodes remain the default
+  for reports, widgets, and bespoke visualizations.
+- **Auto-fit no longer shrinks presentation html nodes.** Like
+  graph and json-render frames, presentation-marked html nodes
+  keep their explicit width and height so decks aren't squeezed
+  by the content-fit pass.
+- **`pmx-canvas html` subcommand routes through the agent CLI.**
+  Same fix as the earlier `fit` and `screenshot` routing issues —
+  `html` is now in the `AGENT_COMMANDS` set in `src/cli/index.ts`
+  so it doesn't get treated as a server-startup invocation.
+
+### Internal
+
+- Regression coverage for: HTML node semantic sidecars persisting
+  through CLI/HTTP/MCP, presentation primitives storing slide
+  metadata and theme metadata (named + custom), agent context
+  exposing html sidecars and presentation metadata, auto-fit
+  excluding presentation html frames, the `html` CLI routing,
+  client-side present-mode behavior (only explicit presentation
+  html nodes can present; theme bridge injected; srcdoc marker
+  distinguishes review vs present mode), live theme update on
+  present-mode iframe (e2e), and present mode focusing iframe
+  keyboard navigation while hiding review hints (e2e).
+
+## [0.1.20] - 2026-05-06
+
+A bigger feature release. Adds 18 reusable HTML communication
+primitives (choice grids, plans, review sheets, system maps, design
+sheets, decks, explainers, status reports, throwaway editors…) so
+agents can stop reaching for long markdown for structured artifacts,
+introduces text annotations alongside the existing pen/eraser, makes
+expanded mcp-app/webpage/json-render/graph viewers stretch to fill
+the overlay, fixes grid arrange to respect grouped children, and
+extracts the project-tour demo to a declarative JSON seed.
+
+### Added
+
+- **`canvas_add_html_primitive` and 18 communication primitives.**
+  A new MCP tool plus CLI `html primitive add` / `html primitive
+  schema` and HTTP `POST /api/canvas/node` with `{type:
+  "html-primitive", kind, data}` (or the alternative `{type:
+  "html", primitive: kind, data}`) generate sandboxed `html` nodes
+  from named primitives: `choice-grid`, `plan-timeline`,
+  `review-sheet`, `pr-writeup`, `system-map`, `code-walkthrough`,
+  `design-sheet`, `component-gallery`, `interaction-prototype`,
+  `flowchart`, `deck`, `illustration-set`, `explainer`,
+  `status-report`, `incident-report`, `triage-board`,
+  `config-editor`, `prompt-tuner`. The MCP canvas now exposes 42
+  tools (was 41). `canvas_describe_schema` adds an `htmlPrimitives`
+  array describing each primitive's data shape.
+- **Text annotations.** The annotation toolbar gains a third tool
+  alongside pen and eraser. Text annotations render as SVG `<text>`
+  using the `--c-annotation` token, persist alongside freehand
+  strokes (`type: 'text'` on `CanvasAnnotation`), and route through
+  the same HTTP create/delete + canvas-state undo/redo paths as the
+  freehand layer.
+- **Declarative demo seed (`src/server/demo-state.json`).** The
+  project-tour demo is now a 28KB JSON snapshot loaded by a small
+  `demo.ts` shim, replacing the 800-line imperative seed. Editing
+  the tour is now a JSON edit, and the unit tests exercise the
+  loader and verify a stable grouped layout.
+- **Install section in the README.** Documents `bunx pmx-canvas`,
+  `bun add -g pmx-canvas`, `bun add pmx-canvas` (for the SDK), and
+  `npm install -g pmx-canvas`, plus the Bun-on-PATH caveat (the
+  CLI uses a `#!/usr/bin/env bun` shebang). (Released as commits
+  `f9449e5`, `fe0843c`.)
+
+### Changed
+
+- **Expanded mcp-app / webpage / json-render / graph viewers
+  stretch to fill the overlay.** `ExpandedNodeOverlay` now wraps
+  embedded viewers in a flex container, json-render and graph
+  viewers receive `?display=expanded` in the URL plus a
+  `window.__PMX_CANVAS_JSON_RENDER_DISPLAY__` global, and a new
+  `useChartFrameHeight()` hook computes available content height
+  dynamically. Expanded charts no longer leave a white band at the
+  bottom of the overlay.
+- **Grid arrange preserves grouped child offsets.** The arrange
+  algorithm in the new shared `auto-arrange.ts` excludes grouped
+  children from translation. Previously the parent group was moved
+  *and* the child was moved relative to it, double-translating the
+  child off-screen. Undo restores the original positions exactly.
+- **CommandPalette gains a "New note" markdown shortcut.** Quick-
+  add a `markdown` node from the palette with the standard
+  520×360 default size.
+
+### Internal
+
+- Regression coverage for: HTML primitive CLI/MCP creation
+  producing searchable html nodes with primitive metadata, text
+  annotation persistence and HTTP create/delete, grid arrange
+  preserving grouped child offsets through the operation and its
+  undo, declarative demo seed loading into a stable grouped layout,
+  graph chart-height absent unless explicitly provided, and
+  expanded graph nodes stretching content to the overlay frame
+  (e2e), plus pen and text annotations starting over nodes (e2e).
+
 ## [0.1.19] - 2026-05-05
 
 Snapshot ergonomics and reference-doc distribution. Adds `before` /
@@ -824,6 +981,8 @@ otherwise have to discover by trial and error.
 - Regression coverage for snapshot flat-`id` aliases on both MCP and
   HTTP surfaces, plus async / top-level-`await` WebView script bodies.
 
+[0.1.21]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.1.21
+[0.1.20]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.1.20
 [0.1.19]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.1.19
 [0.1.18]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.1.18
 [0.1.17]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.1.17

package/Readme.md

@@ -65,7 +65,7 @@ the canvas durable rather than throwaway.
 
 ### 06 / Any agent
 
-Harness-agnostic. Drive the canvas from [MCP](docs/mcp.md) (41 tools,
+Harness-agnostic. Drive the canvas from [MCP](docs/mcp.md) (42 tools,
 8 resources, change notifications), the [CLI](docs/cli.md), the
 [HTTP API](docs/http-api.md), or the [Bun SDK](docs/sdk.md). Works with
 Claude Code, GitHub Copilot CLI, Codex, Cursor, Windsurf, or any agent
@@ -78,22 +78,35 @@ that can spawn an MCP stdio server, call a CLI, or hit an HTTP endpoint.
 The published SDK entrypoint is Bun-first. Node.js consumers should use the
 CLI, MCP server, or HTTP API.
 
+## Install
+
+```bash
+bunx pmx-canvas              # Run without installing (recommended for one-off use)
+bun add -g pmx-canvas        # Install globally — exposes the `pmx-canvas` command
+bun add pmx-canvas           # Install into a project (needed for the Bun SDK)
+npm install -g pmx-canvas    # npm works too — still requires Bun on PATH to run
+```
+
+`pmx-canvas` is Bun-first: the CLI is a TypeScript file with a `#!/usr/bin/env bun`
+shebang, so Bun must be installed even when you fetch the package via npm or pnpm.
+
+To work on the canvas itself, clone the repo — see [Development](#development).
+
 ## Quick start
 
 ### Run the canvas
 
 ```bash
 bunx pmx-canvas              # Start canvas, open browser
-bunx pmx-canvas --demo       # Start with the project-tour demo board
+bunx pmx-canvas --demo       # Start with the saved dashboard demo board
 bunx pmx-canvas --no-open    # Headless (good for daemons / CI)
 bunx pmx-canvas --mcp        # Run as MCP server (stdio)
 bunx pmx-canvas --help       # All commands
 ```
 
 The canvas opens at `http://localhost:4313`. Try `--demo` first — it seeds a
-project tour with grouped markdown, status, file, image, webpage,
-json-render, graph, html, Excalidraw diagram, and MCP App nodes connected by
-labeled edges.
+saved dashboard with grouped OKR notes, graph panels, context pins, and labeled
+edges.
 
 ### Connect your agent (MCP)
 
@@ -143,7 +156,7 @@ the agent can read `canvas://skills` and pull in companion skills
   the three-tier visual matrix (json-render → html → web-artifact)
 - **[CLI reference](docs/cli.md)** — full command surface, daemon mode,
   watch streams, WebView automation
-- **[MCP reference](docs/mcp.md)** — 41 tools, 8 resources, change
+- **[MCP reference](docs/mcp.md)** — 42 tools, 8 resources, change
   notifications, node-type routing
 - **[HTTP API](docs/http-api.md)** — REST endpoints, SSE, batch operations
 - **[Bun SDK](docs/sdk.md)** — `createCanvas()` for TypeScript on Bun

package/dist/canvas/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;
@@ -2405,6 +2438,18 @@ body,
   border-color: var(--c-muted);
 }
 
+.expanded-action-btn.expanded-action-primary {
+  background: var(--c-accent-12);
+  border-color: var(--c-accent-30);
+  color: var(--c-accent);
+}
+
+.expanded-action-btn.expanded-action-primary:hover {
+  background: var(--c-accent-25);
+  border-color: var(--c-accent);
+  color: var(--c-text);
+}
+
 .expanded-action-btn.expanded-action-active {
   background: var(--c-warn-12);
   border-color: var(--c-warn-30);
@@ -2422,6 +2467,82 @@ body,
   padding: 0 4px;
 }
 
+.html-presentation-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10050;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: clamp(12px, 2vw, 28px);
+  background:
+    radial-gradient(circle at top left, var(--c-accent-25), transparent 36rem),
+    rgba(3, 7, 18, 0.96);
+  color: var(--c-text);
+}
+
+.html-presentation-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-shrink: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--c-line);
+  border-radius: 16px;
+  background: var(--c-panel-glass);
+  box-shadow: 0 18px 50px var(--c-shadow-heavy);
+}
+
+.html-presentation-kicker {
+  color: var(--c-accent);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.html-presentation-title {
+  max-width: min(72vw, 900px);
+  overflow: hidden;
+  color: var(--c-text);
+  font-size: 14px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.html-presentation-exit {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--c-line);
+  border-radius: 999px;
+  background: var(--c-panel-soft);
+  color: var(--c-text-soft);
+  cursor: pointer;
+  font: 600 12px/1 var(--font);
+}
+
+.html-presentation-exit:hover {
+  border-color: var(--c-accent);
+  color: var(--c-text);
+}
+
+.html-presentation-stage {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  border-radius: 22px;
+  background: var(--c-bg);
+  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+}
+
+.html-node-frame-presentation {
+  flex: 1;
+  min-height: 0;
+}
+
 /* ── Context pin button on node title bar ────────────────────── */
 .node-controls .ctx-pin-btn {
   color: var(--c-muted);