pmx-canvas 0.7.1 → 0.7.3

package/src/client/theme/global.css

@@ -572,9 +572,23 @@ body,
   box-shadow: 0 4px 24px var(--c-shadow);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
   transition: box-shadow 0.15s ease;
-  contain: layout style paint;
+  contain: layout style;
+}
+
+/* Clip card content, not the connection handles centered on its border. */
+.node-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  contain: paint;
+}
+.group-node > .node-content {
+  display: contents;
 }
 
 .canvas-node:hover {
@@ -610,34 +624,42 @@ body,
 /* ── Connection port handles (drag-to-connect) ───────────── */
 .node-port {
   position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--c-accent);
-  border: 2px solid var(--c-panel);
+  /* The visible dot stays compact; its grab area stays usable at every zoom. */
+  width: calc(32px * var(--node-port-scale, 1));
+  height: calc(32px * var(--node-port-scale, 1));
+  display: grid;
+  place-items: center;
   opacity: 0;
   cursor: crosshair;
   z-index: 10;
-  transition: opacity 0.15s, transform 0.15s;
-  transform: translate(-50%, -50%) scale(0.6);
+  touch-action: none;
+  transition: opacity 0.15s;
   pointer-events: auto;
 }
-.canvas-node:hover .node-port {
+.node-port::after {
+  content: '';
+  width: calc(6px * var(--node-port-scale, 1));
+  height: calc(6px * var(--node-port-scale, 1));
+  border-radius: 50%;
+  background: var(--c-accent);
+  border: calc(2px * var(--node-port-scale, 1)) solid var(--c-panel);
+  box-shadow: 0 0 0 calc(1px * var(--node-port-scale, 1)) var(--c-accent);
+}
+.canvas-node:hover .node-port,
+.canvas-node.selected .node-port,
+.canvas-node:focus-within .node-port {
   opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
 }
-.node-port:hover {
+.node-port:hover::after {
   background: var(--c-accent-hover);
-  transform: translate(-50%, -50%) scale(1.3);
 }
-.node-port-top    { top: 0;   left: 50%; }
-.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%) scale(0.6); }
-.node-port-left   { left: 0;  top: 50%; }
-.node-port-right  { right: 0; top: 50%; transform: translate(50%, -50%) scale(0.6); }
-.canvas-node:hover .node-port-bottom { transform: translate(-50%, 50%) scale(1); }
-.canvas-node:hover .node-port-right  { transform: translate(50%, -50%) scale(1); }
-.node-port-bottom:hover { transform: translate(-50%, 50%) scale(1.3); }
-.node-port-right:hover  { transform: translate(50%, -50%) scale(1.3); }
+/* Bias vertical grab areas outward so they do not steal title/footer clicks. */
+.node-port-top    { top: 0; left: 50%; transform: translate(-50%, -75%); }
+.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 75%); }
+.node-port-top::after { transform: translateY(calc(8px * var(--node-port-scale, 1))); }
+.node-port-bottom::after { transform: translateY(calc(-8px * var(--node-port-scale, 1))); }
+.node-port-left   { left: 0; top: 50%; transform: translate(-50%, -50%); }
+.node-port-right  { right: 0; top: 50%; transform: translate(50%, -50%); }
 
 .canvas-node .node-titlebar {
   display: flex;
@@ -760,6 +782,11 @@ body,
   border-radius: calc(3px * var(--node-chrome-scale, 1));
 }
 
+.canvas-node .node-controls button svg {
+  width: 1em;
+  height: 1em;
+}
+
 .canvas-node .node-controls button:hover {
   background: var(--c-surface-hover);
   color: var(--c-text);
@@ -1466,6 +1493,10 @@ body,
   animation: presence-pulse 1.4s ease-in-out infinite;
 }
 .session-collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   width: 26px;
   height: 26px;
   border: 1px solid transparent;
@@ -1682,8 +1713,9 @@ body,
   }
 }
 .session-section-chevron {
+  display: inline-flex;
+  flex-shrink: 0;
   color: var(--c-muted);
-  font-size: 13px;
   transition: transform 0.15s ease;
 }
 .session-section-chevron.is-open {
@@ -1966,8 +1998,13 @@ body,
   white-space: nowrap;
 }
 .command-bar-chip-unpin {
-  width: 14px;
-  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
   border: none;
   border-radius: 50%;
   background: none;
@@ -1986,6 +2023,7 @@ body,
   color: var(--c-dim);
 }
 .command-bar-composer {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1997,24 +2035,72 @@ body,
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
 }
 .command-bar-target {
-  appearance: none;
-  -webkit-appearance: none;
   max-width: 148px;
-  padding: 4px 18px 4px 8px;
-  border: 1px solid var(--c-line);
-  border-radius: 7px;
-  background: color-mix(in srgb, var(--c-panel) 80%, transparent)
-    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%237a8699' stroke-width='1.4'/%3E%3C/svg%3E")
-    no-repeat right 6px center;
-  color: var(--c-text-soft);
-  font: 12px/1.3 var(--mono);
-  cursor: pointer;
   flex-shrink: 0;
 }
-.command-bar-target:hover,
-.command-bar-target:focus-visible {
-  border-color: var(--c-accent-25);
+.choice-menu {
+  position: relative;
+  min-width: 0;
+}
+.choice-menu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--c-line) 65%, var(--c-muted));
+  border-radius: 8px;
+  background: var(--c-panel-overlay);
   color: var(--c-text);
+  font: 12px/1.35 var(--font);
+  cursor: pointer;
+}
+.choice-menu-trigger > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.choice-menu-trigger svg { flex-shrink: 0; }
+.choice-menu-trigger:hover,
+.choice-menu-trigger[aria-expanded='true'] { border-color: var(--c-accent); }
+.choice-menu-trigger:focus-visible,
+.choice-menu-options button:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+.toolbar-menu.choice-menu-options {
+  top: calc(100% + 6px);
+  left: 0;
+  right: auto;
+  min-width: 100%;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 64px));
+  max-height: min(280px, 40vh);
+  overflow-y: auto;
+  z-index: 20;
+}
+.toolbar-menu.choice-menu-options.opens-above {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+.command-bar-target.choice-menu {
+  position: static;
+}
+.command-bar-target .choice-menu-options {
+  /* Anchor to the composer, not its inset trigger, to clear the session rail. */
+  min-width: min(200px, 100%);
+  max-width: 100%;
+}
+.choice-menu-options .toolbar-menu-item {
+  min-height: 36px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.choice-menu-options button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .command-bar-icon {
@@ -4483,13 +4569,24 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .text-prompt-cancel,
 .text-prompt-confirm {
-  padding: 5px 12px;
+  min-height: 36px;
+  padding: 8px 14px;
   border-radius: 7px;
-  border: 1px solid var(--c-line);
-  background: none;
-  color: var(--c-text-soft);
+  border: 1px solid color-mix(in srgb, var(--c-line) 65%, var(--c-muted));
+  background: var(--c-panel-overlay);
+  color: var(--c-text);
   cursor: pointer;
   font-size: 12px;
+  font-weight: 600;
+}
+.text-prompt-cancel:hover {
+  background: var(--c-accent-10);
+  border-color: var(--c-muted);
+}
+.text-prompt-cancel:focus-visible,
+.text-prompt-confirm:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
 }
 .text-prompt-confirm {
   background: var(--c-accent);
@@ -4509,7 +4606,8 @@ html.is-node-resizing .ext-app-preview-catcher {
   overflow-y: auto;
   color: var(--c-text);
 }
-.feedback-dialog label {
+.feedback-dialog label,
+.feedback-field {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -6896,7 +6994,7 @@ html.is-node-dragging .intent-line-layer {
   align-items: center;
   gap: 6px;
   max-width: 280px;
-  padding: 4px 8px;
+  padding: 6px 8px;
   margin-left: -8px;
   background: none;
   border: 1px solid transparent;
@@ -6914,7 +7012,8 @@ html.is-node-dragging .intent-line-layer {
   white-space: nowrap;
 }
 .board-switcher-caret {
-  font-size: 10px;
+  display: inline-flex;
+  flex-shrink: 0;
   color: var(--c-text-soft);
 }
 .board-switcher-menu {

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

@@ -7,11 +7,14 @@
  * from an inline global injected by the server-side viewer route.
  */
 
-import type { Spec } from '@json-render/core';
-import { AX_SURFACE_EMIT_SOURCE, HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
-import { useEffect } from 'react';
+import { createStateStore, type Spec, type StateStore } from '@json-render/core';
+import {
+  AX_SURFACE_EMIT_SOURCE,
+  HTML_SURFACE_PUSH_SOURCE,
+  JSON_VIEWER_STATE_SOURCE,
+} from '../../shared/ax-surface-protocol.js';
 import { createRoot } from 'react-dom/client';
-import { defineRegistry, JSONUIProvider, Renderer, useStateBinding } from '@json-render/react';
+import { defineRegistry, JSONUIProvider, Renderer } from '@json-render/react';
 import { shadcnComponents } from '@json-render/shadcn';
 import { catalog } from '../catalog';
 import { chartComponents } from '../charts/components';
@@ -106,29 +109,10 @@ declare global {
     __PMX_CANVAS_JSON_RENDER_NODE_ID__?: string;
     __PMX_CANVAS_AX_TOKEN__?: string;
     __PMX_CANVAS_AX_STATE__?: unknown;
+    __PMX_CANVAS_UI_STATE_TOKEN__?: string;
   }
 }
 
-// Read-side AX bridge for json-render: keeps the spec-bound `/ax` state live as
-// the parent canvas pushes nonce-validated `ax-update` messages, so a declarative
-// board ({ "$state": "/ax/workItems" }) reflects the work queue in real time.
-function AxStateSync() {
-  const [, setAx] = useStateBinding<unknown>('ax');
-  useEffect(() => {
-    const token = window.__PMX_CANVAS_AX_TOKEN__;
-    if (!token) return undefined;
-    function onMessage(event: MessageEvent) {
-      const m = event.data as { source?: string; type?: string; token?: string; state?: unknown } | null;
-      if (!m || m.source !== HTML_SURFACE_PUSH_SOURCE || m.type !== 'ax-update' || m.token !== token) return;
-      window.__PMX_CANVAS_AX_STATE__ = m.state;
-      setAx(m.state);
-    }
-    window.addEventListener('message', onMessage);
-    return () => window.removeEventListener('message', onMessage);
-  }, [setAx]);
-  return null;
-}
-
 // AX interaction types a json-render spec can bind actions to. When an action
 // named like one of these fires, we forward it to the parent canvas (which
 // validates + submits through the capability-gated endpoint). Convention-based
@@ -188,7 +172,7 @@ function applyTheme(theme: unknown): void {
   document.documentElement.style.colorScheme = theme === 'light' ? 'light' : 'dark';
 }
 
-function App() {
+function App({ store }: { store: StateStore }) {
   const spec = window.__PMX_CANVAS_JSON_RENDER_SPEC__;
 
   if (!spec) {
@@ -208,11 +192,6 @@ function App() {
     );
   }
 
-  // Seed AX state under a reserved `/ax` key so specs can bind { "$state": "/ax/workItems" }.
-  const axState = window.__PMX_CANVAS_AX_STATE__;
-  const initialState =
-    axState !== undefined && axState !== null ? { ...(spec.state ?? {}), ax: axState } : (spec.state ?? undefined);
-
   // Standalone "Open as site" tab (#65): fill the browser viewport instead of the
   // in-canvas card height. The chart child flex-grows; useChartFrameHeight measures
   // the full viewport in this mode. Embedded/expanded keep the padded min-height box.
@@ -229,13 +208,7 @@ function App() {
     : { minHeight: '100vh', padding: 16, boxSizing: 'border-box' as const };
   return (
     <div style={containerStyle}>
-      <JSONUIProvider
-        registry={registry}
-        initialState={initialState}
-        directives={pmxCanvasDirectives}
-        handlers={buildAxHandlers()}
-      >
-        <AxStateSync />
+      <JSONUIProvider registry={registry} store={store} directives={pmxCanvasDirectives} handlers={buildAxHandlers()}>
         <div style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
           <Renderer spec={spec} registry={registry} loading={false} />
         </div>
@@ -248,5 +221,52 @@ function App() {
 const root = document.getElementById('root');
 if (root) {
   syncPreferredTheme();
-  createRoot(root).render(<App />);
+  const stateToken = window.__PMX_CANVAS_UI_STATE_TOKEN__;
+  let store: StateStore | undefined;
+  const mount = (restored: Record<string, unknown> | null) => {
+    if (store) return;
+    const seed = restored ?? window.__PMX_CANVAS_JSON_RENDER_SPEC__?.state ?? {};
+    const ax = window.__PMX_CANVAS_AX_STATE__;
+    store = createStateStore(ax != null ? { ...seed, ax } : seed);
+    if (stateToken) {
+      // subscribe fires synchronously at the input/action write, not in a React
+      // effect that can be lost on unmount. Never mirror the server-owned /ax.
+      store.subscribe(() => {
+        const { ax: _ax, ...state } = store!.getSnapshot();
+        window.parent.postMessage(
+          {
+            source: JSON_VIEWER_STATE_SOURCE,
+            type: 'snapshot',
+            token: stateToken,
+            nodeId: window.__PMX_CANVAS_JSON_RENDER_NODE_ID__,
+            state,
+          },
+          '*',
+        );
+      });
+    }
+    createRoot(root).render(<App store={store} />);
+  };
+  // Install before document load. The parent supplies a snapshot (or null) in
+  // onLoad; restore BEFORE mounting so watchers don't replay past user actions.
+  // Standalone viewers have no state token and render immediately.
+  window.addEventListener('message', (event: MessageEvent) => {
+    if (event.source !== window.parent) return;
+    const m = event.data as { source?: string; type?: string; token?: string; state?: unknown } | null;
+    if (!m) return;
+    if (m.source === JSON_VIEWER_STATE_SOURCE && m.type === 'restore' && stateToken && m.token === stateToken) {
+      if (m.state === null || (typeof m.state === 'object' && !Array.isArray(m.state)))
+        mount(m.state as Record<string, unknown> | null);
+    }
+    if (
+      m.source === HTML_SURFACE_PUSH_SOURCE &&
+      m.type === 'ax-update' &&
+      window.__PMX_CANVAS_AX_TOKEN__ &&
+      m.token === window.__PMX_CANVAS_AX_TOKEN__
+    ) {
+      window.__PMX_CANVAS_AX_STATE__ = m.state;
+      store?.set('/ax', m.state);
+    }
+  });
+  if (!stateToken) mount(null);
 }

package/src/json-render/server.ts

@@ -979,6 +979,8 @@ export async function buildJsonRenderViewerHtml(options: {
   nodeId?: string;
   axToken?: string;
   axState?: unknown;
+  /** Independent nonce for tab-local runtime state across focus transitions. */
+  stateToken?: string;
   /** Nonce for the content-height reporter so the node can grow to fit the chart. */
   frameToken?: string;
   /** When true, charts render at their natural (intrinsic) height instead of
@@ -995,9 +997,14 @@ export async function buildJsonRenderViewerHtml(options: {
       ...(options.theme ? [`window.__PMX_CANVAS_JSON_RENDER_THEME__ = ${JSON.stringify(options.theme)};`] : []),
       ...(options.display ? [`window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ = ${JSON.stringify(options.display)};`] : []),
       ...(options.devtools ? ['window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ = true;'] : []),
+      ...(options.nodeId
+        ? [`window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`]
+        : []),
+      ...(options.stateToken
+        ? [`window.__PMX_CANVAS_UI_STATE_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.stateToken))};`]
+        : []),
       ...(options.nodeId && options.axToken
         ? [
-            `window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`,
             `window.__PMX_CANVAS_AX_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.axToken))};`,
             // Read-side AX state: seed for initial render + bound under /ax for specs.
             `window.__PMX_CANVAS_AX_STATE__ = ${JSON.stringify(options.axState ?? null).replace(/</g, '\\u003c')};`,

package/src/mcp/server.ts

@@ -797,8 +797,8 @@ export async function startMcpServer(): Promise<void> {
     'canvas://boards',
     {
       description:
-        'The boards in this workspace with their categories, most recently opened first, and which one the ' +
-        'human has open (activeBoardId; null = Home). Your writes go to the open board; ask the human to open another.',
+        'The boards in this workspace with their categories, most recently opened first, and which one is ' +
+        'open (activeBoardId; null = Home). Writes go to the open board; use canvas_board action "open" to switch the shared workbench.',
       mimeType: 'application/json',
     },
     async () => {

package/src/server/agent-presence.ts

@@ -278,10 +278,10 @@ export class AgentPresenceRegistry {
   private attributedKey(input: PresenceTouch): string {
     const own = presenceKey(input.source, input.agentId);
     // Identified writers keep their key; attaches run the twin-merge in touch().
-    if (input.agentId?.trim() || input.attached === true || this.presences.get(own)?.attached) return own;
+    if (input.agentId?.trim() || this.presences.get(own)?.attached) return own;
     // A channel that attach-merged into a session stays that session's — its
-    // writes AND its detach belong to the merged session, however many other
-    // sessions are attached.
+    // writes, repeat attaches AND its detach belong to the merged session,
+    // however many other sessions are attached.
     const alias = this.aliases.get(own);
     if (alias && this.presences.get(alias)?.attached) return alias;
     if (input.attached !== undefined) return own;
@@ -338,15 +338,21 @@ export class AgentPresenceRegistry {
   touch(input: PresenceTouch, now = Date.now()): AgentPresence {
     let key = this.attributedKey(input);
     const own = presenceKey(input.source, input.agentId);
-    if (input.attached === true && !input.agentId?.trim()) {
-      // One agent, two channels: an attach whose label matches an ALREADY
-      // attached session (Copilot's extension presence + its MCP server both
-      // announcing "GitHub Copilot") is the same agent — merge instead of
-      // showing a second session, and remember the alias so this channel's
-      // later writes and detach land on the merged session too.
+    if (input.attached === true && !input.agentId?.trim() && key === own) {
+      // One agent, two channels: a transport attach belongs to the sole
+      // attached host even when the agent gives its task a different label.
+      // With several hosts, only the existing matching-label rule applies.
+      // Keep explicit agentIds separate, and preserve the host's consumer key
+      // so steering still reaches its poller. Browser placeholders are handled
+      // below, where their baseline and adopted-work rules are preserved.
       const label = input.label ?? input.source;
-      const twin = [...this.presences.values()].find(
-        (presence) => presence.attached && presence.sessionId !== own && !presence.agentId && presence.label === label,
+      const attached = [...this.presences.values()].filter((presence) => presence.attached);
+      const twin = attached.find(
+        (presence) =>
+          presence.sessionId !== own &&
+          !presence.agentId &&
+          (presence.label === label ||
+            (TRANSPORT_SOURCES.includes(input.source) && attached.length === 1 && presence.source !== 'browser')),
       );
       if (twin) {
         this.aliases.set(own, twin.sessionId);