pmx-canvas 0.7.3 → 0.8.0

package/skills/pmx-canvas/SKILL.md

@@ -20,7 +20,8 @@ At the start of board work, read `canvas://context?consumer=<stable-unique-id>`
 (or `canvas_query { action: "context", consumer: "<stable-unique-id>" }`) before
 falling back to broader resources. The budget is UTF-16 code units, not tokens.
 Use one stable consumer ID per agent/adapter only when durable deltas are wanted;
-omit it for a fresh read. Pins are highest priority. If a source card is clipped,
+omit it for a fresh read. Pins are highest priority, then the cards near each pin
+(reason `near`, title + short summary only). If a source card is clipped or near,
 pull that card explicitly by its returned board/card IDs.
 
 When authoring a board, establish its README without waiting for the human to
@@ -43,7 +44,7 @@ for the authoritative stop, viewport, persistence, reset, group-order, and captu
 
 ## Runtime prerequisites
 
-PMX Canvas 0.7.3 requires **Bun >=1.4.2**, including when installed through npm.
+PMX Canvas 0.8.0 requires **Bun >=1.4.2**, including when installed through npm.
 Check `bun --version` and ensure Bun is on the MCP host's PATH, not just your shell's;
 use an absolute executable path if needed. Install/configure only when requested.
 For pinned installation, MCP configuration, managed services, and disposable verification,
@@ -116,7 +117,8 @@ the served catalog is a startup snapshot. Local mirrors still use `skills sync`
    `canvas_view { action: "fit", nodeIds: [...] }` with exactly the new ids. See
    **In-View Placement & Sizing** below — auto-placement is board-relative, not camera-relative.
 8. **Verify context pins.** Pin with `canvas_pin_nodes` or the browser's **Pin as context**, then
-   read `canvas://pinned-context`.
+   read `canvas://pinned-context`. When you pin, pass a short `reason` — the human sees who pinned a
+   node and why.
 9. **Clean up temporary nodes.** Remove retry/test fixtures and restore the baseline snapshot when
    the task requires leaving the board unchanged.
 
@@ -219,7 +221,7 @@ always authoritative, independent of the installed release version.
 | `canvas_ax_state` | `get`, `set-focus`, `set-policy`, `report-capability`, `presence`, `set-presence` |
 | `canvas_ax_work` | `add`, `update`, `annotate` |
 | `canvas_ax_gate` | `request`, `resolve`, `await` with `approval`, `elicitation`, or `mode` |
-| `canvas_ax_timeline` | `read`, `record-event`, `add-evidence`, `send-steering`, `reads` |
+| `canvas_ax_timeline` | `read`, `record-event`, `add-evidence`, `send-steering`, `reads`, `read-status` |
 | `canvas_ax_delivery` | `claim`, `mark` |
 | `canvas_board` | `list`, `get`, `create`, `create-from`, `open`, `update` |
 | `canvas_snapshot` | `save`, `list`, `restore`, `delete`, `gc`, `diff` |
@@ -303,8 +305,9 @@ reports any node below its floor as an advisory `sizeWarnings` entry — treat a
 as layout work left to do.
 Creation responses may include `sizeAdjustment` (`defaulted`, `clamped-to-minimum`, or
 `fit-to-children`); use its `applied` geometry rather than assuming the request won. Json-render
-validation/creation may also return warnings for form controls whose value is not bound with
-`$bindState`; the panel can render, but edits do not update its runtime state until the binding is fixed.
+validation/creation binds a literal form-control `value` to `state.form` automatically; it still
+warns for `$state` expressions, controls inside a repeat, or a non-object `state.form`, which render
+but do not update runtime state until bound with `$bindState`/`$bindItem`.
 Bound JSON input and dynamic lists are local UI state, not saved canvas data. Focus-mode
 expand/close preserves that state for the same spec in the current tab; an authored spec update,
 board switch or page reload resets it. Persist important edits explicitly through the app's
@@ -456,7 +459,7 @@ Use the visible workbench when the human is actively curating layout:
 - Embedding hosts can open `/workbench?theme=<name>` (or `?theme=auto` to follow the host's
   light/dark appearance) for a session-local default theme that never changes the server-global
   theme other clients see; an explicit pick from the theme menu ends the override. The bundled
-  Copilot extension opens its panel with `?theme=light`.
+  Copilot extension opens its panel with `?theme=daylight`.
 
 After changing files under `src/client/`, rebuild with `bun run build` before manual browser
 verification.

package/skills/pmx-canvas/references/full-reference.md

@@ -128,11 +128,11 @@ pmx-canvas                     # Start and open browser (port 4313)
 pmx-canvas --no-open           # Start without opening browser (for agents)
 pmx-canvas --port=8080         # Custom port
 pmx-canvas --demo              # Start with sample content
-pmx-canvas --theme=light       # Light theme
+pmx-canvas --theme=daylight    # Daylight theme
 pmx-canvas --version           # Print installed version and exit
 ```
 
-`--theme` accepts `dark` (default), `light`, `high-contrast`, `midnight`, `sepia`, `arctic`, `ember`, `forest`, or `volt` (0.4.x; the rail's theme picker lists the same nine). Same value can be set via
+`--theme` accepts `harbor` (default), `daylight`, `high-contrast`, `midnight`, `sepia`, `arctic`, `ember`, `forest`, or `volt` (0.4.x; the rail's theme picker lists the same nine). Same value can be set via
 the `PMX_CANVAS_THEME` environment variable, or picked live from the left tool rail.
 
 Start the canvas once per session, then reuse it. Use `--no-open` when running as an agent — the
@@ -452,7 +452,7 @@ single-purpose tools behind an `action` (and, for `canvas_ax_gate`, a `kind`) di
 | `canvas_ax_state` | `get` · `set-focus` · `set-policy` · `report-capability` · `presence` · `set-presence` | Read AX state; set AX focus; patch tool/prompt policy (the scope fence is human-set, read-only here); report host capability; read / set agent presence (phase, cursor, focus, attached session) |
 | `canvas_ax_work` | `add` · `update` · `annotate` | Canvas-bound work items + review annotations |
 | `canvas_ax_gate` | `request` · `resolve` · `await` × `kind` `approval` \| `elicitation` \| `mode` | Attributed gate lifecycle (request → await → resolve); attribution does not itself grant authority |
-| `canvas_ax_timeline` | `read` · `record-event` · `add-evidence` · `send-steering` · `reads` | The bounded AX diagnostics timeline, and the context read log (`reads`) |
+| `canvas_ax_timeline` | `read` · `record-event` · `add-evidence` · `send-steering` · `reads` · `read-status` | The bounded AX diagnostics timeline, and the context read log (`reads`) |
 | `canvas_ax_delivery` | `claim` · `mark` | Adapterless steering delivery (claim → act → mark) |
 | `canvas_intent` | `signal` · `update` · `clear` | Ghost Cursor of Intent — announce a move before making it |
 
@@ -508,7 +508,7 @@ coming and can veto it mid-thought. Intents are ephemeral presence: never
 persisted, auto-expiring (~8s), never in `canvas_query layout`.
 
 Narrate → linked mutation → automatic settle:
-1. `canvas_intent { action: "signal", kind: "create", position: { x, y }, nodeType: "markdown", label: "Add evidence", reason: "capturing the failing test", confidence: 0.8 }` → returns `intent.id`.
+1. `canvas_intent { action: "signal", kind: "create", nodeType: "markdown", label: "Add evidence", reason: "capturing the failing test", confidence: 0.8 }` → returns `intent.id` and the `position` the canvas chose.
 2. Make the real move and pass that id: `canvas_node { action: "add", intentId: <intent.id>, ... }`.
 3. PMX rejects the mutation if the intent was vetoed or expired; otherwise the
    successful mutation settles the ghost into the resulting node automatically.
@@ -522,9 +522,13 @@ mcp-app) and `canvas_webview` do **not** accept an `intentId` and reject it with
 400 — to telegraph one of those, signal a ghost, then `clear` it (or let it
 expire) and run the open *without* an `intentId`.
 
-Per kind, pass the anchor it renders against: `position` for `create`/`move`,
-`nodeId` for `move`/`edit`/`remove`, `edge: { from, to, type }` for `connect`. The
-payoff is **legibility** — `reason` is shown beneath the ghost.
+Per kind, pass the anchor it renders against: `position` for `move` (optional for
+`create`), `nodeId` for `move`/`edit`/`remove`, `edge: { from, to, type }` for
+`connect`. **Omit `position` on a create unless you know where the node goes:** the
+canvas then forms the ghost where it will auto-place the node, keeps staged ghosts
+from stacking, and lands the linked create on its ghost. Never pass a placeholder
+such as `{ x: 0, y: 0 }`. The payoff is **legibility** — `reason` is shown beneath
+the ghost.
 
 **When to use vs skip.** Signal for adds, removes, and moves of visible nodes;
 connecting nodes; creating groups; layout reorganizations; meaningful title/content

package/skills/pmx-canvas/references/github-copilot-app-adapter.md

@@ -4,6 +4,10 @@ Use this reference when PMX Canvas is running inside the GitHub Copilot app as a
 extension. The adapter is intentionally thin: PMX Canvas remains the state owner, and the extension
 maps Copilot SDK features onto PMX AX primitives.
 
+The [standalone agent plugin](../../../docs/agent-plugin.md) bundles this adapter and PMX's
+MCP launcher. Its native canvas is Copilot-only; other Agent Plugins-compatible clients use
+the portable MCP tools and browser workbench.
+
 ## Adapter Identity
 
 - Extension path: `.github/extensions/pmx-canvas/extension.mjs`
@@ -17,9 +21,9 @@ maps Copilot SDK features onto PMX AX primitives.
    packaged extension directory into the repository:
    `mkdir -p .github/extensions && cp -R node_modules/pmx-canvas/.github/extensions/pmx-canvas .github/extensions/`
 2. Reload Copilot app extensions with `extensions_reload` so `project:pmx-canvas` is registered.
-3. Start or confirm a PMX Canvas daemon for the workspace: `pmx-canvas serve --daemon`
-   and `pmx-canvas serve status`. The adapter can auto-start in many local sessions, but a running
-   daemon is the most reliable setup for fresh agents.
+3. The adapter discovers a matching workspace daemon or starts the pinned package version
+   in `runtime.json` with Bun. It needs Bun on `PATH`, not a global `pmx-canvas` executable.
+   The shared daemon stays running when the extension exits.
 4. Open the canvas with `extensionId: "project:pmx-canvas"`, `canvasId: "pmx-canvas"`, and a stable
    `instanceId`.
 5. If the first `invoke_canvas_action` immediately after `open_canvas` returns
@@ -66,6 +70,8 @@ end it after each task. Explicit agent IDs are reserved for genuinely independen
   The Copilot app webview can leave nested `srcdoc` and `blob:` iframes blank, so PMX should route
   generated frame HTML through `/api/canvas/frame-documents/...` instead.
 - Connects to a matching local PMX server for the current workspace, or starts one when needed.
+- Uses the session's working directory for startup, context, presence, and steering; Copilot's
+  `workspacePath` points to session artifacts and is not the project root.
 - Reads `/api/canvas/ax/context` and injects pinned/focused context from
   `onUserPromptSubmitted`.
 - Exposes adapter actions for status, AX context refresh, AX focus, and explicit session steering.
@@ -137,16 +143,22 @@ All fields are optional:
 }
 ```
 
-Default discovery order:
+Default discovery:
 
-1. `serverUrl` input.
-2. `PMX_CANVAS_URL`.
-3. `PMX_CANVAS_PORT` / `PMX_WEB_CANVAS_PORT` / `4313` on loopback.
-4. Managed server startup for the current workspace when `autoStart` is not `false`.
+1. An explicit `serverUrl` input or `PMX_CANVAS_URL`, without silently choosing another target.
+2. Workspace daemon pid-file ports, the preferred `PMX_CANVAS_PORT` / `PMX_WEB_CANVAS_PORT`,
+   and the normal MCP fallback ports, verified against the workspace's real path.
+3. Serialized daemon startup for the session working directory when `autoStart` is not `false`.
 
 The adapter rejects an unrelated running PMX server unless `allowWorkspaceMismatch` is true,
 including when `serverUrl` is explicit.
 
+To package this adapter in another plugin, copy `extension.mjs`, `steering-delivery.mjs`,
+`runtime.mjs`, and `runtime.json`. For the portable MCP connector, also copy `start-mcp.mjs`,
+`tools.json`, and `THIRD_PARTY_LICENSES.txt`, and invoke `start-mcp.mjs` with Bun. The agent calls
+`canvas_connect_workspace` with its absolute project directory before using board tools;
+plugin initialization must never adopt the installation directory as a project.
+
 If discovery fails, the panel shows a connection page, not a partial workbench. It checks the
 original target automatically; **Check connection** retries immediately and **Start server**
 explicitly allows local startup even if `autoStart` was disabled. After recovery it navigates

package/skills/pmx-canvas/references/installing-pmx-canvas.md

@@ -4,7 +4,7 @@ Use this reference when the `pmx-canvas` skill is installed but the `pmx-canvas`
 
 ## Prerequisites and version
 
-The examples pin **PMX Canvas 0.7.3**, which requires **Bun >=1.4.2** even when
+The examples pin **PMX Canvas 0.8.0**, which requires **Bun >=1.4.2** even when
 installed through npm: the CLI runs through Bun, not Node. Check `bun --version`
 first. If missing or older, follow the [Bun installation instructions](https://bun.sh/docs/installation)
 with the user's authorization. Ensure Bun is on the MCP host's PATH as well as the
@@ -17,11 +17,11 @@ in `SKILL.md`. Do not pair newer checkout guidance with an older runtime unknowi
 ## Install from npm
 
 ```bash
-npm install -g pmx-canvas@0.7.3
+npm install -g pmx-canvas@0.8.0
 pmx-canvas --version
 ```
 
-Without a global install, use `bunx pmx-canvas@0.7.3` in place of `pmx-canvas` in
+Without a global install, use `bunx pmx-canvas@0.8.0` in place of `pmx-canvas` in
 the commands below. Do not use unpinned `bunx pmx-canvas` for a version-specific check.
 
 ## Choose the workspace and target
@@ -91,7 +91,7 @@ discards empty env values, remove `PMX_CANVAS_URL` from its launch environment i
   "mcpServers": {
     "canvas": {
       "command": "bunx",
-      "args": ["pmx-canvas@0.7.3", "--mcp"],
+      "args": ["pmx-canvas@0.8.0", "--mcp"],
       "env": {
         "PMX_CANVAS_WORKSPACE_ROOT": "/absolute/path/to/project",
         "PMX_CANVAS_PORT": "14313",
@@ -135,7 +135,7 @@ Amp executes, not only on the user's laptop. Merge this into that workspace's
   "amp.mcpServers": {
     "canvas": {
       "command": "bunx",
-      "args": ["pmx-canvas@0.7.3", "--mcp"],
+      "args": ["pmx-canvas@0.8.0", "--mcp"],
       "includeTools": ["canvas_*"],
       "env": {
         "PMX_CANVAS_WORKSPACE_ROOT": "/absolute/path/to/project",
@@ -169,7 +169,7 @@ The agent must not run this approval itself or move the command to global settin
 `--mcp-config` to bypass workspace trust. Approval authorizes execution of this MCP
 command; it is not a new Canvas import consent or permission to mutate arbitrary boards.
 After approval, reload MCP connections (`reload_mcp` in Amp) and require `connected`.
-Discover `canvas` tools with `tool_search`; for the full unfiltered 0.7.3 server there
+Discover `canvas` tools with `tool_search`; for the full unfiltered 0.8.0 server there
 are 24 tools. If still absent, inspect the server status, command/PATH and target instead
 of reinstalling blindly. See [Amp MCP documentation](https://ampcode.com/docs/customize/mcp).
 

package/skills/pmx-canvas-testing/SKILL.md

@@ -68,10 +68,11 @@ and check `$?`, then read the file.
 
 - In the product source checkout, Bun tests live under `tests/unit/`.
 - In the product source checkout, Playwright browser smoke lives under `tests/e2e/`.
-- Playwright runs two projects: `desktop` (1440×900, the whole suite) and `pane-600` (600×900,
-  `tests/e2e/reference-pane.pw.ts` only). `pane-600` is the release reference surface: every node
-  type must paint there. A new node type fails its coverage test until it gets a reference case.
-  Run it alone with `bash scripts/run-playwright.sh --project=pane-600`.
+- Playwright runs `desktop` (1440×900, the whole suite except the reference cases) and three
+  reference projects for `tests/e2e/reference-pane.pw.ts`: `narrow-600`, `middle-1024` and
+  `wide-1920`. The workbench lives anywhere from a narrow side pane to a full window, so every
+  node type must paint at all three. A new node type fails its coverage test until it gets a
+  reference case. Run one width alone with `bash scripts/run-playwright.sh --project=narrow-600`.
 - Product CI runs those checkout suites: Bun coverage plus the browser smoke flow.
 - An isolated installed consumer instead tests the package's public transports and host behavior;
   it does not run or depend on the product checkout's source suites.

package/src/cli/commands/copilot.ts

@@ -20,6 +20,11 @@ cmd(
     const sourcePaths = [
       fileURLToPath(new URL('../../../.github/extensions/pmx-canvas/extension.mjs', import.meta.url)),
       fileURLToPath(new URL('../../../.github/extensions/pmx-canvas/steering-delivery.mjs', import.meta.url)),
+      fileURLToPath(new URL('../../../.github/extensions/pmx-canvas/runtime.mjs', import.meta.url)),
+      fileURLToPath(new URL('../../../.github/extensions/pmx-canvas/runtime.json', import.meta.url)),
+      fileURLToPath(new URL('../../../.github/extensions/pmx-canvas/start-mcp.mjs', import.meta.url)),
+      fileURLToPath(new URL('../../../.github/extensions/pmx-canvas/tools.json', import.meta.url)),
+      fileURLToPath(new URL('../../../.github/extensions/pmx-canvas/THIRD_PARTY_LICENSES.txt', import.meta.url)),
     ];
     const missingSource = sourcePaths.find((sourcePath) => !existsSync(sourcePath));
     if (missingSource) {

package/src/cli/commands/view.ts

@@ -179,7 +179,7 @@ cmd(
   [
     'pmx-canvas serve',
     'pmx-canvas serve --port=8080 --no-open',
-    'pmx-canvas serve --demo --theme=light',
+    'pmx-canvas serve --demo --theme=daylight',
     'pmx-canvas --no-open --webview-automation',
   ],
   async (_args) => {

package/src/cli/index.ts

@@ -149,9 +149,10 @@ function commandAfterGlobalTargetFlags(argv: string[]): string {
   return '';
 }
 
-function runMcpServerProcess(): Promise<void> {
+function runMcpServerProcess(app = false): Promise<void> {
   return new Promise((resolvePromise, rejectPromise) => {
-    const child = spawn(process.execPath, ['run', mcpServerEntry], {
+    const entry = app ? resolve(cliDir, '..', 'mcp', 'app-server.ts') : mcpServerEntry;
+    const child = spawn(process.execPath, ['run', entry], {
       stdio: 'inherit',
       env: process.env,
     });
@@ -222,6 +223,9 @@ if (firstArg === 'serve') {
 const routedCommand = commandAfterGlobalTargetFlags(args);
 if (AGENT_COMMANDS.has(routedCommand) && routedCommand !== 'serve') {
   await runAgentCli(args);
+} else if (args.includes('--mcp-app')) {
+  // Private MCP Apps profile: focused tools and a self-contained UI resource.
+  await runMcpServerProcess(true);
 } else if (args.includes('--mcp')) {
   // MCP server mode: stdio transport, auto-starts canvas on first tool call
   await runMcpServerProcess();
@@ -274,7 +278,7 @@ Server options:
   --log-file=PATH  Daemon log file (default: ./.pmx-canvas/daemon-${port}.log)
   --pid-file=PATH  Optional daemon PID file (default: ./.pmx-canvas/daemon-${port}.pid)
   --wait-ms=MS   Health-check wait budget for daemon mode (default: 10000)
-  --theme=THEME  Theme: dark (default), light, high-contrast, midnight, sepia, arctic, ember, forest, volt
+  --theme=THEME  Theme: harbor (default), daylight, high-contrast, midnight, sepia, arctic, ember, forest, volt
   --webview-automation        Start a headless Bun.WebView automation session for /workbench
   --webview-backend=BACKEND   Bun.WebView backend: chrome or webkit
   --webview-width=PX          Automation WebView width (default: 1280)
@@ -283,6 +287,7 @@ Server options:
   --webview-chrome-argv=CSV   Extra Chrome args for Bun.WebView, comma-separated
   --webview-data-dir=PATH     Persist automation browser storage in PATH
   --mcp          Run as MCP server (stdio transport)
+  --mcp-app      Run the private MCP App profile (stdio; shared active board)
   --help, -h     Show this help
 
 Agent CLI (works against running server):

package/src/client/App.tsx

@@ -54,6 +54,7 @@ import {
 import { connectSSE } from './state/sse-bridge';
 import { intents } from './state/intent-store';
 import { sessionActive } from './state/presence-store';
+import { isHostedWorkbench } from './state/workbench-transport';
 import {
   createGroupFromClient,
   removeEdgeFromClient,
@@ -376,7 +377,11 @@ export function App() {
             intents.value.size === 0 && <EmptyState onOpenPalette={() => setPaletteOpen(true)} />
           )}
           {selectedNodeIds.value.size > 0 && <SelectionBar />}
-          {sessionIsActive ? <CommandBar /> : contextPinnedNodeIds.value.size > 0 && <ContextPinBar />}
+          {sessionIsActive && !isHostedWorkbench() ? (
+            <CommandBar />
+          ) : (
+            contextPinnedNodeIds.value.size > 0 && <ContextPinBar />
+          )}
           <SessionReceipt onOpenSnapshots={() => setSnapshotOpen(true)} />
           <TextPrompt />
           <ExportDialog />

package/src/client/canvas/AgentPresenceLayer.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'preact/hooks';
-import { agentIdentityHue, agentPhaseLabel, type AgentPresence } from '../../shared/agent-presence.js';
+import { agentPhaseLabel, type AgentPresence } from '../../shared/agent-presence.js';
 import { nodes, viewport } from '../state/canvas-store';
-import { agentPresences, presenceWorldPosition } from '../state/presence-store';
+import { agentPresences, presenceWorldPosition, writerColor } from '../state/presence-store';
 
 /**
  * Agent presence layer (rail-chrome-v2 phase 3): one cursor + phase chip per
@@ -49,7 +49,7 @@ export function AgentPresenceLayer() {
           data-session-id={presence.sessionId}
           style={{
             transform: `translate(${position.x}px, ${position.y}px)`,
-            '--identity-color': `hsl(${agentIdentityHue(presence.sessionId)} 65% 62%)`,
+            '--identity-color': writerColor(presence.sessionId),
           }}
         >
           <div class="agent-cursor-inner" style={{ transform: `scale(${counterScale})` }}>

package/src/client/canvas/AnnotationLayer.tsx

@@ -23,7 +23,7 @@ export function AnnotationLayer({ annotations }: { annotations: CanvasAnnotation
               y={point.y}
               fill={color}
               font-size={annotation.width}
-              font-family="var(--font)"
+              font-family="var(--font-ui)"
               font-weight="700"
               opacity="0.95"
             >

package/src/client/canvas/CanvasNode.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { mutatingNodeIds, sessionActive } from '../state/presence-store';
-import { attentionPrimaryNodeIds, attentionPulseNodeIds, attentionSecondaryNodeIds } from '../state/attention-store';
+import { attentionPulseNodeIds } from '../state/attention-store';
+import { isAgentPin, NearPinMark, NodeContextMark } from './NodeContextMark';
+import { activityLensNodeIds } from '../state/session-store';
 import {
   activeNodeId,
   activeNeighborNodeIds,
@@ -34,20 +36,9 @@ import {
   ungroupFromClient,
   updateNodeFromClient,
 } from '../state/intent-bridge';
-import { KIND_COLOR } from './kind-colors';
 import { reportHumanGrab, takeOverNode, yieldedNodes } from '../state/human-store';
 import { AxStepControls } from '../nodes/AxStepControls';
-import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
-import {
-  getNodeIcon,
-  IconChevronRight,
-  IconChevronDown,
-  IconClose,
-  IconMore,
-  IconExternalLink,
-  IconExpand,
-  IconSparkle,
-} from '../icons';
+import { getNodeIcon, IconChevronRight, IconClose, IconMore, IconExpand, IconPin } from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 import { AUTO_FIT_TITLEBAR_HEIGHT, computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
@@ -137,8 +128,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const isActive = activeNodeId.value === node.id;
   const isSelected = selectedNodeIds.value.has(node.id);
   const isContextPinned = contextPinnedNodeIds.value.has(node.id);
-  const isAttentionPrimary = attentionPrimaryNodeIds.value.has(node.id);
-  const isAttentionSecondary = !isAttentionPrimary && attentionSecondaryNodeIds.value.has(node.id);
   const isAttentionPulse = attentionPulseNodeIds.value.has(node.id);
   const isNeighbor = !isActive && activeNeighborNodeIds.value.has(node.id);
   const searchSet = searchHighlightIds.value;
@@ -428,8 +417,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isSearchDimmed ? 'search-dimmed' : '',
     isSelected ? 'selected' : '',
     isContextPinned ? 'context-pinned' : '',
-    isAttentionPrimary ? 'attention-focus-primary' : '',
-    isAttentionSecondary ? 'attention-focus-secondary' : '',
     isAttentionPulse ? 'attention-pulse' : '',
     isPinned ? 'pinned' : '',
     isTrace ? 'trace-node' : '',
@@ -437,6 +424,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isGroup ? 'group-node' : '',
     isStrictSize ? 'strict-size' : '',
     isAgentMutating ? 'agent-mutating' : '',
+    activityLensNodeIds.value && !activityLensNodeIds.value.has(node.id) ? 'lens-dimmed' : '',
   ]
     .filter(Boolean)
     .join(' ');
@@ -488,7 +476,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
             <div class="group-chip-name">{title}</div>
             <div class="group-chip-meta">
               {groupKindDots.map((kind) => (
-                <span key={kind} class="group-kind-dot" style={{ background: KIND_COLOR[kind] }} aria-hidden="true" />
+                <span key={kind} class="group-kind-dot" aria-hidden="true" />
               ))}
               <span class="group-chip-count">
                 {groupChildren.length} node{groupChildren.length === 1 ? '' : 's'}
@@ -679,40 +667,16 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 {title}
               </span>
             )}
+            <NearPinMark node={node} pinned={isContextPinned} />
+            <NodeContextMark node={node} pinned={isContextPinned} />
             <div class="node-controls">
               {isPinned && (
                 <span class="pin-indicator" title="Pinned">
                   ⊙
                 </span>
               )}
-              <button
-                type="button"
-                class={`ctx-pin-btn${isContextPinned ? ' ctx-pin-active' : ''}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggleContextPin(node.id);
-                }}
-                title={isContextPinned ? 'Remove from context' : 'Add to context'}
-              >
-                <IconSparkle size={14} />
-              </button>
-              {/* Open as site — full-page standalone view of this node's surface,
-              served from /api/canvas/surface/:id (same document as the canvas
-              iframe). Opens via the system browser so embedded hosts do not trap
-              it in their own webview. */}
-              {canOpenAsSite(node) && (
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    void openNodeAsSite(node);
-                  }}
-                  title="Open as site"
-                >
-                  <IconExternalLink size={14} />
-                </button>
-              )}
-              {/* Expand — opens node as full-viewport overlay for focused work */}
+              {/* Expand and the context pin always show; the rest sit behind ⋯ and ×
+              on hover (docs/design/Chrome.dc.html). */}
               {EXPANDABLE_TYPES.has(node.type) && (
                 <button
                   type="button"
@@ -727,18 +691,37 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               )}
               <button
                 type="button"
+                class={`ctx-pin-btn${isContextPinned ? ' ctx-pin-active' : ''}`}
                 onClick={(e) => {
                   e.stopPropagation();
-                  toggleCollapsed(node.id);
+                  toggleContextPin(node.id);
+                }}
+                title={isContextPinned ? 'Remove from context' : 'Add to context'}
+                aria-label={isContextPinned ? 'Remove from context' : 'Add to context'}
+                aria-pressed={isContextPinned}
+              >
+                <span class="ctx-pin-mark">
+                  <IconPin />
+                  {isContextPinned && isAgentPin(node.id) && <span class="ctx-pin-agent-dot" aria-hidden="true" />}
+                </span>
+              </button>
+              <button
+                type="button"
+                class="node-hover-control"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onContextMenu?.(e, node.id);
                 }}
-                title={node.collapsed ? 'Expand' : 'Collapse'}
+                title="More actions"
+                aria-label="More actions"
               >
-                {node.collapsed ? <IconChevronRight size={14} /> : <IconChevronDown size={14} />}
+                <IconMore size={14} />
               </button>
               {/* Report #64: status nodes get the same remove control as every other
               node type (backend removal + undo/history handle status uniformly). */}
               <button
                 type="button"
+                class="node-hover-control"
                 onClick={(e) => {
                   e.stopPropagation();
                   void removeNodeFromClient(node.id);

package/src/client/canvas/CanvasViewport.tsx

@@ -38,7 +38,6 @@ import {
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
 import type { AnnotationTool, CanvasAnnotation, CanvasNodeState } from '../types';
-import { FocusFieldLayer } from './FocusFieldLayer';
 import { importFiles } from './import-files';
 import { IntentLayer } from './IntentLayer';
 import { AgentPresenceLayer } from './AgentPresenceLayer';
@@ -855,7 +854,6 @@ export function CanvasViewport({
           left: 0,
         }}
       >
-        <FocusFieldLayer />
         <ScopeFenceLayer />
         <IntentLayer />
         <AgentPresenceLayer />

package/src/client/canvas/CommandPalette.tsx

@@ -16,6 +16,7 @@ import { startSession } from '../state/session-store';
 import { TYPE_LABELS, type CanvasNodeState } from '../types';
 import { invalidateTokenCache } from '../theme/tokens';
 import { clearThemeOverride } from '../state/theme-override';
+import { canvasThemeScheme } from '../../shared/themes.js';
 import { getNodeIcon, IconArrange, IconFitAll, IconMinimap, IconMoon, IconNodeMarkdown, IconSteer } from '../icons';
 import { activeBoardId, openBoard } from '../state/boards-store';
 import { requestJson } from '../state/intent-bridge';
@@ -269,11 +270,11 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
         },
       },
       {
-        label: 'Toggle theme (dark/light)',
+        label: 'Toggle theme (Harbor/Daylight)',
         icon: IconMoon,
         iconTone: 'muted',
         action: () => {
-          const next = canvasTheme.value === 'dark' ? 'light' : 'dark';
+          const next = canvasThemeScheme(canvasTheme.value) === 'dark' ? 'daylight' : 'harbor';
           // An explicit pick ends any ?theme= session override, same as the
           // toolbar picker — otherwise the session stays sticky-overridden.
           clearThemeOverride();

package/src/client/canvas/ContextMenu.tsx

@@ -26,6 +26,7 @@ import {
   updateEdgeFromClient,
   updateNodeFromClient,
 } from '../state/intent-bridge';
+import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
 import { askText } from './TextPrompt';
 import { EXPANDABLE_TYPES } from '../types';
 import type { CanvasNodeState } from '../types';
@@ -498,6 +499,16 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     action: () => toggleCollapsed(node.id),
   });
 
+  // Open as site — full-page standalone view of this node's surface, served
+  // from /api/canvas/surface/:id (same document as the canvas iframe). Opens
+  // via the system browser so embedded hosts do not trap it in their webview.
+  if (canOpenAsSite(node)) {
+    items.push({
+      label: 'Open in new tab',
+      action: () => void openNodeAsSite(node),
+    });
+  }
+
   // Context pin — add/remove from the human-curated agent context (report #63).
   // This is the PRIMARY "pin" in PMX's model ("pin nodes to curate context"); it
   // matches the SelectionBar's "Pin as context" and updates the context count + the

package/src/client/canvas/EdgeLayer.tsx

@@ -12,7 +12,7 @@ import type { CanvasEdge, CanvasNodeState } from '../types';
 // ── Edge type visual styles ──────────────────────────────────
 const EDGE_COLORS: Record<CanvasEdge['type'], string> = {
   relation: 'var(--c-muted)',
-  'depends-on': 'var(--c-warn)',
+  'depends-on': 'var(--c-rel-informs)',
   flow: 'var(--c-accent)',
   // --c-dim is a very low-contrast hairline in dark palettes (forest: #5D7566
   // on #0C1712); the dashed style is what distinguishes `references`.