pmx-canvas 0.4.8 → 0.5.0

package/src/client/state/iframe-mode.ts

@@ -4,12 +4,15 @@
  * When the canvas page itself runs inside an iframe (ampcode.com embeds the
  * portal URL on *.onamp.dev), Chrome refuses to load child iframes from `src`
  * URLs — even same-origin relative ones — leaving every iframe-backed node a
- * gray "refused to connect" placeholder. Inline documents (`srcdoc`) still
- * render. This module probes the real behavior once per boot: a hidden 1px
- * iframe navigates to the tiny /api/canvas/iframe-probe document; if `load`
- * fires the host is normal (`src` mode), otherwise same-origin surfaces fall
- * back to fetch() + `srcdoc` (see nodes/use-surface-frame.ts and
- * nodes/iframe-document-url.ts).
+ * gray "refused to connect" placeholder. Some TOP-LEVEL hosts (the Claude
+ * Code desktop browser) block sub-frame requests the same way. Inline
+ * documents (`srcdoc`) still render. This module probes the real behavior
+ * once per boot: a hidden 1px iframe navigates to the tiny
+ * /api/canvas/iframe-probe document, which posts a handshake message back —
+ * `load` alone is no signal, because blocked frames fire it on their error
+ * page. Embedded pages block on the probe; top-level pages default to `src`
+ * and self-heal to fetch() + `srcdoc` when the background probe fails (see
+ * nodes/use-surface-frame.ts and nodes/iframe-document-url.ts).
  *
  * `src` stays the default everywhere it works: URL-loaded surfaces keep real
  * document URLs, and the frame-document transport exists precisely because
@@ -19,6 +22,7 @@
  * Force a mode with `?iframe-mode=srcdoc` (or `=src`) for debugging.
  */
 import { signal } from '@preact/signals';
+import { IFRAME_PROBE_MESSAGE_SOURCE } from '../../shared/iframe-probe.js';
 
 export type IframeMode = 'src' | 'srcdoc';
 
@@ -48,11 +52,22 @@ export function probeSrcIframes(timeoutMs = PROBE_TIMEOUT_MS): Promise<boolean>
     test.setAttribute('sandbox', 'allow-scripts');
     const done = (ok: boolean) => {
       window.clearTimeout(timer);
+      window.removeEventListener('message', onMessage);
       test.remove();
       resolve(ok);
     };
+    // `load` proves nothing: a host that blocks the request (the Claude Code
+    // desktop browser cancels sub-frame loads with ERR_BLOCKED_BY_CLIENT)
+    // still fires `load` on the error page it commits. Only the probe
+    // document executing and posting its handshake back proves src works —
+    // and only from OUR frame, so a surface iframe cannot spoof the probe.
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== test.contentWindow) return;
+      if ((event.data as { source?: unknown } | null)?.source !== IFRAME_PROBE_MESSAGE_SOURCE) return;
+      done(true);
+    };
     const timer = window.setTimeout(() => done(false), timeoutMs);
-    test.addEventListener('load', () => done(true));
+    window.addEventListener('message', onMessage);
     test.addEventListener('error', () => done(false));
     test.src = IFRAME_PROBE_PATH;
     (document.body ?? document.documentElement).appendChild(test);
@@ -87,7 +102,9 @@ function isAmpOrbHost(): boolean {
  * normal path pays zero probe latency before surfaces mount. Only embedded
  * documents run the probe (`embedded` is overridable for tests).
  */
-export function resolveIframeMode(opts: { embedded?: boolean; ampOrb?: boolean } = {}): Promise<IframeMode> {
+export function resolveIframeMode(
+  opts: { embedded?: boolean; ampOrb?: boolean; probeTimeoutMs?: number } = {},
+): Promise<IframeMode> {
   if (iframeMode.value) return Promise.resolve(iframeMode.value);
   if (pending) return pending;
   const forced = forcedIframeMode();
@@ -96,14 +113,21 @@ export function resolveIframeMode(opts: { embedded?: boolean; ampOrb?: boolean }
     return Promise.resolve(forced);
   }
   if (!(opts.embedded ?? isEmbeddedDocument())) {
+    // Top-level pages default to src with zero latency — but some top-level
+    // hosts (the Claude Code desktop browser) block sub-frame requests
+    // outright, so verify in the background and self-heal: surfaces read the
+    // signal and re-render into fetch()+srcdoc when it flips.
     iframeMode.value = 'src';
+    void probeSrcIframes(opts.probeTimeoutMs).then((srcWorks) => {
+      if (!srcWorks && iframeMode.value === 'src') iframeMode.value = 'srcdoc';
+    });
     return Promise.resolve('src');
   }
   if (opts.ampOrb ?? isAmpOrbHost()) {
     iframeMode.value = 'srcdoc';
     return Promise.resolve('srcdoc');
   }
-  pending = probeSrcIframes().then((srcWorks) => {
+  pending = probeSrcIframes(opts.probeTimeoutMs).then((srcWorks) => {
     const mode: IframeMode = srcWorks ? 'src' : 'srcdoc';
     iframeMode.value = mode;
     return mode;

package/src/client/state/intent-bridge.ts

@@ -1,17 +1,41 @@
+import { canvasArea } from '../canvas/canvas-area';
+import type { AgentPresenceSnapshot } from '../../shared/agent-presence.js';
 function logRequestError(action: string, error: unknown): void {
   console.error(`[intent-bridge] ${action} failed`, error);
 }
 
+/**
+ * Per-tab identity: an AGENT driving the workbench UI from its own pane opens
+ * `/workbench?agent=<key>` and every write from that tab is booked as that
+ * agent — before this, UI-driven agent tests carried the human marker and the
+ * human was told "you rejected a gate" they never saw (0.5.0 readiness).
+ */
+export const tabAgentKey: string | null = (() => {
+  try {
+    const value = new URLSearchParams(window.location.search).get('agent')?.trim();
+    return value ? value.slice(0, 64) : null;
+  } catch {
+    return null;
+  }
+})();
+
 /**
  * Every workbench-originated request carries this marker so the server never
  * synthesizes an auto-ghost for it — a human dragging or editing in the
- * browser is not agent activity (the ghost cursor shows AGENT moves).
+ * browser is not agent activity (the ghost cursor shows AGENT moves). A tab
+ * opened with `?agent=<key>` identifies as that agent instead.
  */
 function withWorkbenchMarker(init?: RequestInit): RequestInit {
-  return { ...init, headers: { ...(init?.headers as Record<string, string> | undefined), 'X-PMX-Workbench': '1' } };
+  const headers = { ...(init?.headers as Record<string, string> | undefined) };
+  if (tabAgentKey) {
+    headers['x-pmx-source'] = tabAgentKey;
+  } else {
+    headers['X-PMX-Workbench'] = '1';
+  }
+  return { ...init, headers };
 }
 
-async function requestJson<T>(action: string, url: string, fallback: T, init?: RequestInit): Promise<T> {
+export async function requestJson<T>(action: string, url: string, fallback: T, init?: RequestInit): Promise<T> {
   try {
     const res = await fetch(url, withWorkbenchMarker(init));
     return (await res.json()) as T;
@@ -21,7 +45,7 @@ async function requestJson<T>(action: string, url: string, fallback: T, init?: R
   }
 }
 
-async function requestOk(action: string, url: string, init?: RequestInit): Promise<{ ok: boolean }> {
+export async function requestOk(action: string, url: string, init?: RequestInit): Promise<{ ok: boolean }> {
   try {
     const res = await fetch(url, withWorkbenchMarker(init));
     return { ok: res.ok };
@@ -31,7 +55,7 @@ async function requestOk(action: string, url: string, init?: RequestInit): Promi
   }
 }
 
-async function requestBestEffort(action: string, url: string, init?: RequestInit): Promise<void> {
+export async function requestBestEffort(action: string, url: string, init?: RequestInit): Promise<void> {
   try {
     await fetch(url, withWorkbenchMarker(init));
   } catch (error) {
@@ -200,7 +224,6 @@ export async function pushCanvasUpdate(
     position?: { x: number; y: number };
     size?: { width: number; height: number };
     collapsed?: boolean;
-    dockPosition?: 'left' | 'right' | null;
   }>,
   options: { recordHistory?: boolean } = {},
 ): Promise<void> {
@@ -260,10 +283,11 @@ export async function updateNodeFromClient(
     size?: { width: number; height: number };
     collapsed?: boolean;
     pinned?: boolean;
-    dockPosition?: 'left' | 'right' | null;
     title?: string;
     content?: string;
     data?: Record<string, unknown>;
+    /** Groups: replace the membership list (positions preserved). */
+    children?: string[];
   },
 ): Promise<{ ok: boolean; id?: string }> {
   return requestJson(
@@ -331,6 +355,11 @@ export async function fetchAxSurfaceState(): Promise<unknown> {
   return requestJson<unknown>('fetchAxSurfaceState', '/api/canvas/ax/surface-snapshot', null);
 }
 
+/** Connect-time agent-presence read; live updates arrive as `agent-presence` SSE frames. */
+export async function fetchAgentPresence(): Promise<Partial<AgentPresenceSnapshot> | null> {
+  return requestJson<Partial<AgentPresenceSnapshot> | null>('fetchAgentPresence', '/api/canvas/ax/presence', null);
+}
+
 /** Ask the server to open a node's surface in the system browser. */
 export async function openNodeInSystemBrowserRequest(
   nodeId: string,
@@ -390,8 +419,11 @@ export async function updateViewportFromClient(
  */
 function clientWindowSize(): { clientWidth: number; clientHeight: number } | Record<string, never> {
   if (typeof window === 'undefined') return {};
-  const clientWidth = window.innerWidth;
-  const clientHeight = window.innerHeight;
+  // The CANVAS REGION, not the window — with the rail + top-bar shell a
+  // window-sized fit would hide nodes under the chrome.
+  const area = canvasArea();
+  const clientWidth = Math.round(area.width);
+  const clientHeight = Math.round(area.height);
   if (!clientWidth || !clientHeight) return {};
   return { clientWidth, clientHeight };
 }
@@ -438,8 +470,12 @@ export async function createGroupFromClient(opts: {
   );
 }
 
-/** Add nodes to an existing group. */
-export async function addToGroupFromClient(groupId: string, childIds: string[]): Promise<{ ok: boolean }> {
+/** Add nodes to an existing group; `childLayout` packs the children (the header's auto-arrange). */
+export async function addToGroupFromClient(
+  groupId: string,
+  childIds: string[],
+  childLayout?: 'grid' | 'column' | 'flow',
+): Promise<{ ok: boolean }> {
   return requestJson(
     'addToGroupFromClient',
     '/api/canvas/group/add',
@@ -447,12 +483,21 @@ export async function addToGroupFromClient(groupId: string, childIds: string[]):
     {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ groupId, childIds }),
+      body: JSON.stringify({ groupId, childIds, ...(childLayout ? { childLayout } : {}) }),
     },
   );
 }
 
-/** Ungroup all children from a group. */
+/** Replace a group's membership (positions preserved) — how a single child leaves. */
+export async function setGroupChildrenFromClient(groupId: string, children: string[]): Promise<{ ok: boolean }> {
+  return updateNodeFromClient(groupId, { children });
+}
+
+/**
+ * Ungroup = dissolve (children released, frame removed). The SAME server op
+ * an agent's `canvas_group { action: "ungroup" }` runs, so both sides get the
+ * identical board and one undo step.
+ */
 export async function ungroupFromClient(groupId: string): Promise<{ ok: boolean }> {
   return requestJson(
     'ungroupFromClient',
@@ -501,6 +546,23 @@ export async function deleteSnapshot(id: string): Promise<{ ok: boolean }> {
   return requestJson('deleteSnapshot', `/api/canvas/snapshots/${id}`, { ok: false }, { method: 'DELETE' });
 }
 
+/** Patch an edge in place (label/type/style/animated) via the server. */
+export async function updateEdgeFromClient(
+  edgeId: string,
+  patch: { label?: string; type?: string; style?: string; animated?: boolean },
+): Promise<{ ok: boolean }> {
+  return requestJson(
+    'updateEdgeFromClient',
+    `/api/canvas/edge/${encodeURIComponent(edgeId)}`,
+    { ok: false },
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    },
+  );
+}
+
 /** Remove a canvas edge via the server. */
 export async function removeEdgeFromClient(edgeId: string): Promise<{ ok: boolean }> {
   return requestJson(

package/src/client/state/node-factory.ts

@@ -13,12 +13,8 @@ import type { CanvasNodeState } from '../types';
 //   /api/canvas/node) and get the SERVER's `defaultNodeSize`
 //   (src/server/operations/ops/nodes.ts), which differs from this table for
 //   most types (e.g. its fallback is 360x200). The server half of H5
-//   (`syncEventToCanvasState`, `ensureDefaultDockedNodes`) is deliberately
-//   deferred — do not "fix" that mismatch from this file.
-// - The server seeds `status-main`/`context-main` docked AND collapsed
-//   (`ensureDefaultDockedNodes` in src/server/server.ts); the SSE bridge
-//   creates the same ids expanded, with `context-main` undocked. Client
-//   behavior is preserved as-is.
+//   (`syncEventToCanvasState`) is deliberately deferred — do not "fix" that
+//   mismatch from this file.
 // - sse-bridge's prompt literal hardcoded `height: 400` beside a table entry
 //   of the same value; both now read the table (no rendering change).
 
@@ -56,7 +52,6 @@ export function makeNodeState(
   options: {
     position?: { x: number; y: number };
     size?: { width: number; height: number };
-    dockPosition?: 'left' | 'right' | null;
   } = {},
 ): CanvasNodeState {
   const defaults = DEFAULT_POSITIONS[type];
@@ -68,7 +63,6 @@ export function makeNodeState(
     zIndex: type === 'status' ? 0 : 1,
     collapsed: false,
     pinned: false,
-    dockPosition: options.dockPosition ?? null,
     data,
   };
 }

package/src/client/state/presence-store.ts

@@ -0,0 +1,168 @@
+import { computed, signal } from '@preact/signals';
+import type { PmxAxIntent } from '../../shared/ax-intent.js';
+import { intents } from './intent-store';
+import {
+  HUMAN_STARTED_SESSION_LABEL,
+  type AgentActivityEntry,
+  type AgentPresence,
+  type AgentPresenceSnapshot,
+  CONTEXT_BUDGET_DEFAULT_TOKENS,
+  type ContextBudget,
+  externalWriters,
+  isSessionActive,
+} from '../../shared/agent-presence.js';
+
+/**
+ * Agent presence (rail-chrome-v2 phase 2). Fed by the server's `agent-presence`
+ * SSE snapshot (every change, including TTL expiry) and the connect-time read,
+ * so this store never runs its own expiry ticker.
+ *
+ * `sessionActive` is the ONE selector every agent surface reads — the session
+ * panel, command bar, presence layer, and top-bar chip all mount on it.
+ */
+export const agentPresences = signal<AgentPresence[]>([]);
+export const contextBudget = signal<ContextBudget>({ used: 0, total: CONTEXT_BUDGET_DEFAULT_TOKENS });
+/** Recent agent writes, newest first — the External Steering activity feed. */
+export const agentActivity = signal<AgentActivityEntry[]>([]);
+
+/** External Steering chrome (phase 6): the feed popover and the writers sheet. */
+export const activityFeedOpen = signal(false);
+export const writersSheetOpen = signal(false);
+/** Feed filter: a writer's sessionId, or null for all. */
+export const activityFilter = signal<string | null>(null);
+
+/**
+ * Per-writer identity colors from the accent set, agent-violet first,
+ * assigned in order of first appearance and stable for the page's life — a
+ * writer that fades and returns keeps its color.
+ */
+const WRITER_PALETTE = ['var(--c-purple)', 'var(--c-accent)', 'var(--c-ok)', 'var(--c-warn)', 'var(--c-danger)'];
+const writerColors = new Map<string, string>();
+export function writerColor(sessionId: string): string {
+  const known = writerColors.get(sessionId);
+  if (known) return known;
+  const color = WRITER_PALETTE[writerColors.size % WRITER_PALETTE.length]!;
+  writerColors.set(sessionId, color);
+  return color;
+}
+
+/** Avatar initial: first letter of the label, upper-cased. */
+export function writerInitial(label: string): string {
+  const first = label
+    .trim()
+    .replace(/^[^a-z0-9]+/i, '')
+    .charAt(0);
+  return (first || label.trim().charAt(0) || '?').toUpperCase();
+}
+
+/** Compact relative age for feed rows and the writers sheet: now · 12s · 4m · 2h. */
+export function relativeAge(iso: string, now = Date.now()): string {
+  const ms = now - Date.parse(iso);
+  if (!Number.isFinite(ms) || ms < 5_000) return 'now';
+  if (ms < 60_000) return `${Math.floor(ms / 1000)}s`;
+  if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m`;
+  return `${Math.floor(ms / 3_600_000)}h`;
+}
+
+/** Master gate for every agent surface: an attached session exists. */
+export const sessionActive = computed(() => isSessionActive(agentPresences.value));
+
+/** Live writers with no attached session — the External Steering mode. */
+export const externalWriterPresences = computed(() => externalWriters(agentPresences.value));
+
+/**
+ * Connected agents the human can ADDRESS from the composer: every live
+ * presence (attached sessions first). `label` is the display name; `value` is
+ * the CONSUMER key the steer must be targeted at — the identity the agent
+ * claims deliveries with. For an adapter session that is its source key
+ * (Copilot attaches as source "copilot" labelled "GitHub Copilot"); for an
+ * adopted human-started session the sessionId is "browser", so the writer's
+ * label IS its consumer key. Addressing the display label instead would
+ * produce steering nobody can ever claim. The un-adopted placeholder is
+ * excluded: no consumer will ever claim as "Agent session".
+ */
+export const steerableAgents = computed(() => {
+  const seen = new Set<string>();
+  return (
+    [...agentPresences.value]
+      .filter((presence) => presence.label !== HUMAN_STARTED_SESSION_LABEL)
+      .sort((a, b) => Number(b.attached) - Number(a.attached))
+      // The picker is the connected-writer ROSTER: every live writer is listed,
+      // but only those a steer can actually REACH are selectable — attached
+      // sessions, or external writers whose consumer key has claimed
+      // deliveries. A one-shot writer (curl, the CLI under Codex) is presence
+      // without an inbox: shown, disabled, with the reason.
+      .map((presence) => ({
+        value: presence.sessionId === 'browser' ? presence.label : presence.sessionId,
+        label: presence.label,
+        attached: presence.attached,
+        steerable: presence.attached || presence.steerable === true,
+        pendingSteers: presence.pendingSteers ?? 0,
+        // Proof-of-polling: its consumer key claimed the queue within the last
+        // 5 minutes. Attached ≠ polling — a desktop session can look steerable
+        // while nothing reads its inbox (round-2 Codex finding).
+        polling: presence.lastClaimAt !== undefined && Date.now() - Date.parse(presence.lastClaimAt) < 5 * 60_000,
+      }))
+      .filter((agent) => (seen.has(agent.value) ? false : (seen.add(agent.value), true)))
+  );
+});
+
+/** The attached session's presence (first if several hosts attached). */
+/** Every attached session, in presence order — the top bar shows one chip each. */
+export const attachedSessions = computed<AgentPresence[]>(() =>
+  agentPresences.value.filter((presence) => presence.attached),
+);
+
+export const activeSession = computed<AgentPresence | null>(
+  () => agentPresences.value.find((presence) => presence.attached) ?? null,
+);
+
+/**
+ * Nodes an agent is mutating RIGHT NOW — drives the shimmer. Derived from the
+ * intent store's in-flight ghosts (move / edit / remove target an existing
+ * node) rather than a parallel source; gated on `sessionActive` at the use
+ * site so the quiet board never shimmers.
+ */
+export function mutatingNodeIdsFrom(intentList: Iterable<Pick<PmxAxIntent, 'kind' | 'nodeId'>>): Set<string> {
+  const ids = new Set<string>();
+  for (const intent of intentList) {
+    if (intent.nodeId && intent.kind !== 'create') ids.add(intent.nodeId);
+  }
+  return ids;
+}
+
+export const mutatingNodeIds = computed(() => mutatingNodeIdsFrom(intents.value.values()));
+
+/**
+ * Where a presence's cursor sits in WORLD coordinates: an explicit cursor
+ * wins; otherwise the node the agent last touched (anchored near its title
+ * bar's right end, like a collaborator hovering the node); otherwise null.
+ */
+export function presenceWorldPosition(
+  presence: Pick<AgentPresence, 'cursor' | 'focusNodeId'>,
+  nodeById: (id: string) => { position: { x: number; y: number }; size: { width: number } } | undefined,
+): { x: number; y: number } | null {
+  if (presence.cursor) return { x: presence.cursor.x, y: presence.cursor.y };
+  if (!presence.focusNodeId) return null;
+  const node = nodeById(presence.focusNodeId);
+  if (!node) return null;
+  return { x: node.position.x + Math.max(24, node.size.width - 28), y: node.position.y + 16 };
+}
+
+export function applyPresenceSnapshot(snapshot: Partial<AgentPresenceSnapshot> | null | undefined): void {
+  if (!snapshot) return;
+  if (Array.isArray(snapshot.presences)) agentPresences.value = snapshot.presences;
+  if (snapshot.budget && Number.isFinite(snapshot.budget.used) && Number.isFinite(snapshot.budget.total)) {
+    contextBudget.value = { used: snapshot.budget.used, total: snapshot.budget.total };
+  }
+  if (Array.isArray(snapshot.activity)) agentActivity.value = snapshot.activity;
+}
+
+export function resetPresence(): void {
+  agentPresences.value = [];
+  contextBudget.value = { used: 0, total: CONTEXT_BUDGET_DEFAULT_TOKENS };
+  agentActivity.value = [];
+  activityFeedOpen.value = false;
+  writersSheetOpen.value = false;
+  activityFilter.value = null;
+}