pmx-canvas 0.7.3 → 0.8.0

package/docs/RELEASE.md

@@ -11,6 +11,9 @@ single source of truth for the release dance — see also
 
 1. Land all the changes you want in the release on `main` with green CI.
 2. Bump `package.json` `version`.
+   Run `bun run build:plugin` to update the Agent Plugins manifest, canonical adapter runtime
+   pin, and generated plugin copies. Publish that exact npm runtime version before advertising
+   a GitHub plugin release pinned to it.
 3. Add a `## [X.Y.Z]` block to `CHANGELOG.md`.
 4. Commit, push, wait for `test.yml` green.
 5. `git tag -a vX.Y.Z -m "..." && git push origin vX.Y.Z` →
@@ -40,9 +43,10 @@ bun run pack:dry-run        # confirms the tarball shape
 do not call `bun x playwright test` directly; it fails before test
 discovery with a `.esm.preflight` loader error (ERR-20260508-001).
 
-The Playwright run includes the `pane-600` project
-(`tests/e2e/reference-pane.pw.ts`): the reference surface, Chromium at
-600 px. Every node type must paint there or the release does not ship.
+The reference cases (`tests/e2e/reference-pane.pw.ts`) run in three
+Playwright projects, `narrow-600`, `middle-1024` and `wide-1920`: the
+workbench lives anywhere from a narrow side pane to a full window. Every
+node type must paint at all three or the release does not ship.
 Embedded WebKit panes (the Copilot app) stay best-effort.
 
 `bun run test:e2e-cli` starts a local server in a fresh temp workspace

package/docs/agent-plugin.md

@@ -0,0 +1,123 @@
+# PMX Canvas agent plugin
+
+`plugins/pmx-canvas/` is a self-contained [Agent Plugins 1.0](https://agent-plugins.org/)
+package. It contains only PMX Canvas: the portable MCP server configuration and a native
+canvas extension for the GitHub Copilot app. It does not include frame integrations,
+general-purpose skills, or custom agents.
+
+## Client support
+
+| Client | Experience |
+| --- | --- |
+| GitHub Copilot app | PMX MCP tools and the native PMX Canvas side panel |
+| Other Agent Plugins-compatible clients | PMX MCP tools; open the workbench in a browser or the client's browser surface |
+| Clients without Agent Plugins support | Configure the MCP launcher manually using the client's MCP settings |
+
+The native Copilot canvas is **not** a portable capability. Other clients ignore the
+`com.github.copilot/` namespace. Supporting the package format also does not guarantee a
+client has an embedded browser, canvas panel, or host-specific steering adapter.
+
+## Install
+
+The local package can be loaded without changing the user's installed plugins:
+
+```bash
+copilot --plugin-dir /absolute/path/to/pmx-canvas/plugins/pmx-canvas
+```
+
+Once the plugin directory is published in the GitHub repository, install it with:
+
+```bash
+copilot plugin install pskoett/pmx-canvas:plugins/pmx-canvas
+```
+
+In the Copilot app, enable the plugin and start a new project session. Open the **PMX Canvas**
+canvas. Ask the agent to connect PMX to the active project; it calls `canvas_connect_workspace`
+with the project's absolute directory before using board tools. Do not separately install its
+project adapter or configure a second PMX MCP server.
+An existing project adapter can coexist with the plugin canvas. If both declare `pmx-canvas`,
+select the provider explicitly when opening: `plugin:pmx-canvas:pmx-canvas` for this plugin,
+or `project:pmx-canvas` for the project extension. An unqualified open can be ambiguous.
+
+Other clients should install the same plugin directory using their Agent Plugins support.
+For a manual MCP setup, invoke `bun /absolute/path/to/plugin/start-mcp.mjs` from the intended
+project directory. The launcher returns MCP JSON-RPC on stdout; diagnostics go to stderr.
+
+## Connect the workspace
+
+Agent Plugins launches MCP processes from the **plugin installation directory**, not the active
+project. Installing or initializing this plugin therefore does not create a board or start a
+daemon. Before any board operation, the agent calls:
+
+```json
+{
+  "name": "canvas_connect_workspace",
+  "arguments": { "workspaceRoot": "/absolute/path/to/project" }
+}
+```
+
+The result contains `serverUrl` and `workbenchUrl`. Other harnesses can open `workbenchUrl`
+in a browser. Copilot's native panel resolves the same workspace server.
+
+Board tools are advertised from a generated catalog so clients with a fixed initial tool list
+can discover them, but refuse execution until connected. Relative roots and the plugin
+installation directory are rejected. A connected MCP session cannot silently switch projects;
+start a new session for a different workspace.
+
+Clients advertising exactly one standard MCP file root can connect automatically. An explicit
+absolute `PMX_CANVAS_WORKSPACE_ROOT` in the MCP process environment also permits auto-connection.
+Neither `process.cwd()` nor an inherited `PWD` is used to guess the project.
+
+## Runtime and workspace ownership
+
+[Bun](https://bun.sh/) must be installed and available on the host's `PATH`. No globally
+installed `pmx-canvas` executable is required. The first workspace connection downloads the exact package
+version in `runtime.json` using `bun x --bun pmx-canvas@<version>`; it therefore needs npm
+access unless that version is already cached.
+
+Both the native canvas and the MCP launcher use the same resolver. It discovers the
+workspace's daemon port from `.pmx-canvas/daemon-<port>.pid` filenames, checks `/health`
+ownership, and serializes concurrent startup with `.pmx-canvas/plugin-start.lock`.
+The MCP subprocess receives the selected `PMX_CANVAS_URL` and an absolute workspace root.
+A foreign server on the preferred port is never treated as this project's server. Each forwarded
+MCP request rechecks ownership; a server replaced by another workspace is refused.
+
+The adapter uses the session's **working directory**, not Copilot's session-state
+`workspacePath` or the plugin installation directory. Boards remain in the project's
+`.pmx-canvas/canvas.db`.
+
+The daemon belongs to the workspace and stays running when one client closes, so closing
+the native panel cannot break another MCP client. Stop it explicitly from the project:
+
+```bash
+bun x --bun pmx-canvas@<version> serve stop --port=<port>
+```
+
+Use the exact version from `runtime.json` and the port from the panel's `status` action.
+`PMX_CANVAS_PORT` selects a preferred port; `PMX_CANVAS_URL` targets an existing server.
+An explicit URL that fails ownership checks is reported rather than silently replaced.
+
+## Package maintenance
+
+The plugin's adapter copies are generated from `.github/extensions/pmx-canvas/`:
+
+```bash
+bun run build:plugin
+bun test tests/unit/agent-plugin.test.js tests/unit/agent-plugin-mcp.test.ts tests/unit/copilot-runtime.test.js
+```
+
+The build bundles the MCP bootstrap with the existing SDK, generates its initial tool catalog
+through the real MCP `tools/list` API, and copies the canonical adapter and shared resolver into
+the plugin boundary. It pins their runtime to `package.json`'s version. No plugin code
+imports files outside the installed package. `bun run build` also regenerates the plugin,
+and drift tests byte-compare the distributed files against their canonical sources.
+
+The portable root contains `plugin.json`, `mcp.json`, `start-mcp.mjs`, `tools.json`, `runtime.mjs`,
+`runtime.json`, and license notices for the bundled dependencies. Copilot auto-discovers the native adapter at
+`com.github.copilot/extensions/pmx-canvas/extension.mjs`.
+
+The marketplace preview is copied from `docs/screenshot.png` to `assets/preview.png` on each
+plugin build. The manifest's `extensions.com.github.copilot.logo` points to that packaged PNG.
+
+Publishing a repository package does not register it in a curated marketplace or make it
+Featured in the Copilot app. Those are separate submission and review steps.

package/docs/ax-state-contract.md

@@ -71,3 +71,43 @@ record; redo replays `removeNode` inside suppressed recording
 **not** append a second note. Consumers should read `reanchoredIds` /
 `removedReviewIds` against the *current* canvas-bound state, not assume the
 referenced items are still re-anchored.
+
+## Agent presence (contract)
+
+Presence is the shape behind every agent surface in the rail chrome: the agent
+cursor and phase chip, the session panel, the command bar and the external
+steering indicator. It is **derived, in-memory and never persisted** — not a
+fourth partition, and not a second source of truth for work items, gates or
+steering, which stay in the AX state above. The shared shape lives in
+`src/shared/agent-presence.ts` (server and client import the same types and
+constants, so they cannot drift); the registry is `src/server/agent-presence.ts`.
+
+- **Sources.** Agent-originated mutations through `executeOperation` (no
+  workbench marker), `ax.activity.ingest` kinds (`session-start` /
+  `session-end` attach and detach; `tool-start` / `tool-result` / `failure` /
+  `error` drive the phase), and an explicit `ax.presence.set` for adapters with
+  richer hooks (`thinking`, cursor, focus).
+- **Modes.** `sessionActive` = any presence with `attached: true`. No presences →
+  quiet board; live but unattached writers → external steering (passive
+  indicator only); an attached session → the session panel and command bar.
+  Presence cursors render for every live writer regardless.
+- **Phase.** An agent mutation or `tool-start` → `tooling` (detail = op or tool
+  name), settling to `idle` after `PRESENCE_TOOLING_SETTLE_MS`; `thinking` only
+  via the explicit set, settling after `PRESENCE_THINKING_SETTLE_MS`. A cursor
+  update that moves the cursor restarts the settle window of a live explicit
+  `tooling`; a stationary cursor or focus heartbeat does not, and neither
+  extends `thinking`. An idle writer that reported a cursor keeps painting it.
+  An attached session with a pending approval gate reads as `waiting-approval`.
+- **Lifetime.** Unattached writers fade `PRESENCE_ACTIVITY_TTL_MS` after their
+  last write; attached sessions expire after `PRESENCE_ATTACHED_IDLE_TTL_MS`
+  without activity; `session-end` or an explicit `attached: false` removes the
+  presence immediately; at most `MAX_PRESENCES`, oldest evicted. Expiry emits,
+  so clients never run their own ticker.
+- **Transport.** One SSE frame, `agent-presence`, carries the full snapshot on
+  every change, including the last `MAX_ACTIVITY_ENTRIES` agent writes with a
+  one-line summary. `GET /api/canvas/ax/presence` for the connect-time read;
+  `POST /api/canvas/ax/presence` (`canvas_ax_state { action: "set-presence" }`)
+  for explicit updates.
+- **Budget.** `used` = estimated tokens of the `pinned-context.get` payload;
+  `total` = `PMX_CANVAS_CONTEXT_BUDGET_TOKENS` (default
+  `CONTEXT_BUDGET_DEFAULT_TOKENS`).

package/docs/cli.md

@@ -159,12 +159,17 @@ pmx-canvas                            # Start canvas, open browser
 pmx-canvas --demo                     # Start with the showcase demo board
 pmx-canvas --port=8080                # Custom port
 pmx-canvas --no-open                  # Headless (for agents/CI)
-pmx-canvas --theme=light              # dark | light | high-contrast | midnight | sepia | arctic | ember | forest | volt
+pmx-canvas --theme=daylight           # harbor | daylight | high-contrast | midnight | sepia | arctic | ember | forest | volt
 pmx-canvas --mcp                      # Run as MCP server (stdio)
+pmx-canvas --mcp-app                  # Private MCP App preview (stdio; shared active board)
 pmx-canvas --webview-automation       # Start headless Bun.WebView session
 pmx-canvas open                       # Open the current workbench in a browser
 ```
 
+The experimental `--mcp-app` profile has ten assistant tools plus an app-only
+transport for the real PMX workbench, separate from the standard MCP tool set. See
+[private MCP App setup and limitations](mcp.md#private-mcp-app-preview).
+
 ### Daemon mode
 
 Run detached with pid/log tracking instead of holding a terminal:
@@ -223,7 +228,7 @@ content.
 
 ```bash
 pmx-canvas node schema --type json-render --component Table --summary
-pmx-canvas validate                                                      # Layout validation
+pmx-canvas validate                                                      # Layout validation (collisions, groupFrameOverlaps, sizeWarnings)
 pmx-canvas validate spec --type json-render --spec-file ./dashboard.json --summary
 pmx-canvas validate spec --type html-primitive --kind choice-grid --data-json '{"items":[{"title":"A"}]}' --summary
 ```

package/docs/design/AgentContext.dc.html

@@ -0,0 +1,186 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>What the agent did with context</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}
+</style>
+</helmet>
+<div style="width: 1440px; height: 1500px; box-sizing: border-box; padding: 48px 56px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 28px">
+
+<div style="display: flex; gap: 40px; align-items: flex-end">
+<div style="flex: 1">
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">What the agent did with context</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">Two questions, two colours. Every mark has a glyph and a word, so it reads without the colour, and every mark explains itself on hover.</p>
+</div>
+<div style="display: flex; gap: 10px">
+<div style="{{s.rule}} border-color: rgba(75,188,255,0.4)"><span style="{{s.ruleDot}} background: #4BBCFF"></span><span><b style="font-weight: 600; color: #4BBCFF">Blue</b> — what's in context<br><span style="color: #8ea3bd">You or the agent pinned it</span></span></div>
+<div style="{{s.rule}} border-color: rgba(179,136,255,0.4)"><span style="{{s.ruleDot}} background: #B388FF"></span><span><b style="font-weight: 600; color: #B388FF">Violet</b> — what the agent did<br><span style="color: #8ea3bd">Read, created, edited, suggested</span></span></div>
+<div style="{{s.rule}} border-color: rgba(244,197,66,0.4)"><span style="{{s.ruleDot}} background: #f4c542"></span><span><b style="font-weight: 600; color: #f4c542">Amber</b> — needs a look<br><span style="color: #8ea3bd">The agent's copy is out of date</span></span></div>
+</div>
+</div>
+
+<section style="display: flex; flex-direction: column; gap: 12px">
+<h2 style="margin: 0; font-size: 15px; font-weight: 600">The key</h2>
+<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px">
+<sc-for list="{{key}}" as="k" hint-placeholder-count="8">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<div style="position: relative; height: 104px; border-radius: 8px; background: #06111e; padding: 12px; box-sizing: border-box">
+<div style="{{k.node}}">
+<sc-if value="{{k.bar}}" hint-placeholder-val="{{ false }}"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div></sc-if>
+<div style="{{k.head}}">
+<span style="flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{k.title}}</span>
+<sc-if value="{{k.mark}}" hint-placeholder-val="{{ true }}"><span style="{{k.markStyle}}"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="{{k.icon}}"></path></svg>{{k.markText}}</span></sc-if>
+<sc-if value="{{k.pin}}" hint-placeholder-val="{{ false }}"><span style="position: relative; width: 18px; height: 18px; border-radius: 999px; background: #4BBCFF; color: #081524; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg><sc-if value="{{k.byAgent}}" hint-placeholder-val="{{ false }}"><span style="position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 999px; background: #B388FF; border: 2px solid #0f1d31"></span></sc-if></span></sc-if>
+</div>
+<div style="padding: 6px 10px; font-size: 11px; color: #8ea3bd">{{k.meta}}</div>
+<sc-if value="{{k.actions}}" hint-placeholder-val="{{ false }}"><div style="position: absolute; right: 8px; bottom: 6px; display: flex; gap: 4px"><span style="{{s.mini}} background: rgba(179,136,255,0.16); color: #B388FF">Accept</span><span style="{{s.mini}} color: #8ea3bd">Dismiss</span></div></sc-if>
+</div>
+</div>
+<div><div style="font-size: 12px; font-weight: 600">{{k.name}}</div><div style="font-size: 11px; color: #8ea3bd">{{k.desc}}</div></div>
+</div>
+</sc-for>
+</div>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 12px">
+<h2 style="margin: 0; font-size: 15px; font-weight: 600">After a session — the agent-activity lens</h2>
+<div style="display: flex; gap: 24px">
+
+<div style="position: relative; width: 900px; height: 600px; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 24px 24px">
+<svg width="900" height="600" viewBox="0 0 900 600" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
+<path d="M 170 172 C 170 140, 400 160, 400 130" style="stroke: #5FCFC0; stroke-width: 2"></path><path d="M 400 126 L 395.5 135 L 404.5 135 Z" style="fill: #5FCFC0"></path>
+<path d="M 470 172 L 470 130" style="stroke: #E59B6B; stroke-width: 2"></path><path d="M 470 126 L 465.5 135 L 474.5 135 Z" style="fill: #E59B6B"></path>
+<path d="M 640 214 C 600 214, 560 170, 560 130" style="stroke: #B388FF; stroke-width: 2; stroke-dasharray: 6 5"></path><path d="M 560 126 L 555.5 135 L 564.5 135 Z" style="fill: #B388FF"></path>
+</svg>
+<span style="position: absolute; left: 596px; top: 136px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(179,136,255,0.16); color: #B388FF; font-size: 11px; font-weight: 500; line-height: 20px">suggested: supports</span>
+
+<div style="{{sc.node}} left: 360px; top: 40px; border: 1.5px solid #4BBCFF"><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">Raise Pro to $24?</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.eye}}"></path></svg>read</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><span style="{{sc.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg></span></div><div style="{{sc.body}}">question · pinned by you</div></div>
+
+<div style="{{sc.node}} left: 640px; top: 30px; border: 1.5px dashed #B388FF; background: rgba(179,136,255,0.06)"><div style="{{sc.head}}"><span style="{{sc.title}} color: #d9c7ff">Summary: case for $24</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.spark}}"></path></svg>suggested</span></div><div style="{{sc.body}} display: flex; gap: 6px"><span style="{{s.mini}} background: rgba(179,136,255,0.16); color: #B388FF">Accept</span><span style="{{s.mini}} color: #8ea3bd">Dismiss</span></div></div>
+
+<div style="{{sc.node}} left: 60px; top: 172px"><div style="{{sc.head}}"><span style="{{sc.title}}">Churn flat after last raise</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.spark}}"></path></svg>by Claude</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div><div style="{{sc.body}}">finding · created 14:06</div></div>
+
+<div style="{{sc.node}} left: 360px; top: 172px; border: 1.5px solid #4BBCFF"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">SMB is price-sensitive</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.pen}}"></path></svg>edited</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><span style="{{sc.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg></span></div><div style="{{sc.body}}">finding · edited 14:12 · <span style="color: #B388FF">see change</span></div></div>
+
+<div style="{{sc.node}} left: 640px; top: 172px"><div style="{{sc.head}}"><span style="{{sc.title}}">Competitor pricing</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.eye}}"></path></svg>read</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div><div style="{{sc.body}}">webpage · not pinned, read anyway</div></div>
+
+<div style="{{sc.node}} left: 60px; top: 330px; border: 1.5px solid #4BBCFF"><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">Churn by plan</span><span style="{{sc.read}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.eye}}"></path></svg>read</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><span style="{{sc.pin}} position: relative"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg><span style="position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 999px; background: #B388FF; border: 2px solid #0f1d31"></span></span></div><div style="{{sc.body}}">chart · pinned by Claude</div></div>
+
+<div style="{{sc.node}} left: 360px; top: 330px; border: 1.5px solid #4BBCFF"><div style="{{sc.head}} background: rgba(75,188,255,0.10)"><span style="{{sc.title}}">SMB interviews</span><span style="{{sc.read}} background: rgba(244,197,66,0.14); color: #f4c542"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.ic}}"><path d="{{i.warn}}"></path></svg>changed</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><span style="{{sc.pin}}"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.pin}}"></path></svg></span></div><div style="{{sc.body}}">notes · you added 2 calls at 14:15</div></div>
+
+<div style="{{sc.node}} left: 640px; top: 330px; opacity: 0.35"><div style="{{sc.head}}"><span style="{{sc.title}}">Pricing notes</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div><div style="{{sc.body}}">markdown · untouched by the agent</div></div>
+
+
+<div style="position: absolute; left: 60px; top: 424px; width: 300px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 6px; font-size: 11px">
+<span style="font-size: 12px; font-weight: 600; color: #e6eef7">Churn by plan</span>
+<span style="color: #b9c6d6"><span style="color: #B388FF">Pinned by Claude</span> · 14:04 — “the chart the churn finding rests on”</span>
+<span style="color: #b9c6d6"><span style="color: #B388FF">Read 3 times</span> · last 14:11</span>
+</div>
+
+<div style="position: absolute; left: 380px; top: 452px; width: 300px; display: flex; flex-direction: column; gap: 8px">
+<button style="align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: #0f1d31; color: #4BBCFF; font-family: inherit; font-size: 12px; font-weight: 500"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg>4 in context<span style="color: #f4c542">· 1 out of date</span></button>
+</div>
+
+<div style="position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(179,136,255,0.35); background: rgba(10,23,41,0.94)">
+<span style="display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #B388FF"><span style="width: 8px; height: 8px; border-radius: 999px; background: #B388FF"></span>Claude · this session</span>
+<sc-for list="{{lens}}" as="l" hint-placeholder-count="5">
+<span style="display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid #2a4566; font-size: 11px; color: #e6eef7"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: #B388FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="{{l.icon}}"></path></svg>{{l.name}}<span style="color: #6b7d94">{{l.n}}</span></span>
+</sc-for>
+<span style="flex: 1"></span>
+<span style="font-size: 11px; color: #8ea3bd">Untouched nodes dimmed</span>
+<span role="switch" aria-checked="true" aria-label="Agent activity lens" style="width: 32px; height: 18px; border-radius: 999px; background: #B388FF; position: relative"><span style="position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 999px; background: #081524"></span></span>
+</div>
+</div>
+
+<aside style="width: 360px; height: 600px; box-sizing: border-box; padding: 16px; border-radius: 10px; border: 1px solid #1b2c44; background: #0b1828; display: flex; flex-direction: column; gap: 12px; overflow: hidden">
+<div><div style="font-size: 13px; font-weight: 600">What Claude did</div><div style="font-size: 11px; color: #8ea3bd">This session · 14:02–14:20 · saved as a snapshot</div></div>
+<div style="display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(244,197,66,0.10); color: #f4c542; font-size: 11px"><svg width="13" height="13" viewBox="0 0 24 24" style="flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.warn}}"></path></svg><span style="flex: 1">SMB interviews changed after Claude read it.</span><span style="{{s.mini}} background: rgba(244,197,66,0.16)">Tell Claude</span></div>
+<sc-for list="{{activity}}" as="a" hint-placeholder-count="5">
+<div style="display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid #1b2c44">
+<div style="display: flex; align-items: center; gap: 6px"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: #B388FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="{{a.icon}}"></path></svg><span style="font-size: 12px; font-weight: 600; flex: 1">{{a.name}}</span><span style="font-size: 11px; color: #6b7d94">{{a.n}}</span><sc-if value="{{a.action}}" hint-placeholder-val="{{ false }}"><span style="{{s.mini}} color: #e6eef7; border: 1px solid #2a4566">{{a.action}}</span></sc-if></div>
+<div style="font-size: 11px; color: #8ea3bd; padding-left: 19px">{{a.items}}</div>
+</div>
+</sc-for>
+</aside>
+
+</div>
+</section>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1500}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      eye: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5',
+      eyeOff: 'M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3 3.6M6.6 6.6C3.8 8.3 2 12 2 12s3.5 6 10 6a9.6 9.6 0 0 0 4.4-1',
+      spark: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z',
+      pen: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z',
+      warn: 'M12 4l9 16H3zM12 10v4M12 17v.5',
+      pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
+      link: 'M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'
+    };
+    var V = '#B388FF', VA = 'rgba(179,136,255,0.16)';
+    var nodeBase = 'position:relative;height:80px;box-sizing:border-box;overflow:hidden;border-radius:10px;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);';
+    var headBase = 'display:flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 10px;border-bottom:1px solid #1b2c44;';
+    function mark(text, color, bg) { return 'display:flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;color:' + color + ';background:' + bg + ';'; }
+    function k(o) {
+      var pinned = !!o.pin;
+      return {
+        name: o.name, desc: o.desc, title: o.title, meta: o.meta,
+        node: nodeBase + (o.dashed ? 'border:1.5px dashed ' + V + ';background:rgba(179,136,255,0.06);' : pinned ? 'border:1.5px solid #4BBCFF;' : 'border:1px solid #1b2c44;'),
+        head: headBase + (pinned ? 'background:rgba(75,188,255,0.10);' : ''),
+        bar: !!o.bar, pin: pinned, byAgent: !!o.byAgent, actions: !!o.actions,
+        mark: !!o.icon, icon: o.icon || '', markText: o.markText || '',
+        markStyle: o.warn ? mark('', '#f4c542', 'rgba(244,197,66,0.14)') : o.muted ? mark('', '#8ea3bd', '#13243b') : mark('', V, VA)
+      };
+    }
+    var key = [
+      k({ name: 'In context — pinned by you', desc: 'Blue border, tinted header, pin badge.', title: 'Raise Pro to $24?', meta: 'question', pin: true }),
+      k({ name: 'In context — pinned by the agent', desc: 'Same blue, with a violet dot on the pin; hover says why.', title: 'Churn by plan', meta: 'pinned by Claude · 14:04', pin: true, byAgent: true }),
+      k({ name: 'Read by the agent', desc: 'It loaded this into its context, pinned or not.', title: 'Competitor pricing', meta: 'read 14:11', icon: i.eye, markText: 'read' }),
+      k({ name: 'Pinned, not read yet', desc: 'In context, but the agent hasn’t loaded it since you pinned it.', title: 'Pricing notes', meta: 'pinned 14:18', pin: true, icon: i.eyeOff, markText: 'not read', muted: true }),
+      k({ name: 'Created by the agent', desc: 'Its byline stays until you edit the node.', title: 'Churn flat after last raise', meta: 'created 14:06', icon: i.spark, markText: 'by Claude' }),
+      k({ name: 'Edited by the agent', desc: 'Violet bar for the session; “see change” opens the diff and undo.', title: 'SMB is price-sensitive', meta: 'edited 14:12 · see change', bar: true, icon: i.pen, markText: 'edited' }),
+      k({ name: 'Suggested by the agent', desc: 'A node, link or pin it proposes. Nothing changes until you accept.', title: 'Summary: case for $24', meta: '', dashed: true, icon: i.spark, markText: 'suggested', actions: true }),
+      k({ name: 'Agent’s copy is out of date', desc: 'Pinned and read, then changed. Amber, because it’s a real warning.', title: 'SMB interviews', meta: 'you added 2 calls · 14:15', pin: true, icon: i.warn, markText: 'changed since read', warn: true })
+    ];
+    var lens = [
+      { name: 'read', n: 4, icon: i.eye }, { name: 'created', n: 1, icon: i.spark }, { name: 'edited', n: 1, icon: i.pen },
+      { name: 'suggested', n: 2, icon: i.link }, { name: 'pinned', n: 1, icon: i.pin }
+    ];
+    var activity = [
+      { name: 'Read', n: '4', icon: i.eye, items: 'Raise Pro to $24?, Competitor pricing, Churn by plan, SMB interviews', action: '' },
+      { name: 'Pinned', n: '1', icon: i.pin, items: 'Churn by plan — “the chart the churn finding rests on”', action: 'Unpin' },
+      { name: 'Created', n: '1', icon: i.spark, items: 'Churn flat after last raise', action: '' },
+      { name: 'Edited', n: '1', icon: i.pen, items: 'SMB is price-sensitive — rewrote the second paragraph', action: 'Undo' },
+      { name: 'Suggested', n: '2', icon: i.link, items: 'Node “Summary: case for $24”; link Competitor pricing → Raise Pro to $24? (supports)', action: 'Review' }
+    ];
+    var s = {
+      rule: 'display:flex;align-items:flex-start;gap:10px;width:230px;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid;background:#0f1d31;font-size:12px;line-height:1.45;',
+      ruleDot: 'width:12px;height:12px;border-radius:999px;flex-shrink:0;margin-top:3px;',
+      mini: 'height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:500;line-height:20px;'
+    };
+    var sc = {
+      node: 'position:absolute;width:250px;height:84px;box-sizing:border-box;overflow:hidden;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);',
+      head: 'display:flex;align-items:center;gap:6px;height:36px;padding:0 8px 0 10px;border-bottom:1px solid #1b2c44;',
+      title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
+      read: 'display:flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;color:' + V + ';background:' + VA + ';',
+      ic: 'fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;',
+      pin: 'width:18px;height:18px;border-radius:999px;background:#4BBCFF;color:#081524;display:flex;align-items:center;justify-content:center;flex-shrink:0;',
+      body: 'padding:8px 10px;font-size:11px;color:#8ea3bd;'
+    };
+    return { key: key, lens: lens, activity: activity, s: s, sc: sc, i: i };
+  }
+}
+</script>
+</body>
+</html>