pmx-canvas 0.7.2 → 0.8.0

package/src/shared/agent-presence.ts

@@ -1,7 +1,7 @@
 /**
- * Agent presence — the contract behind every agent surface in the rail chrome
- * (rail-chrome-v2 phase 2). Shared by server and client so the two cannot
- * drift. See design/rail-chrome-v2/PLAN.md, "Phase 2 contract".
+ * Agent presence — the contract behind every agent surface in the rail chrome.
+ * Shared by server and client so the two cannot drift. See
+ * docs/ax-state-contract.md, "Agent presence (contract)".
  *
  * Presence is DERIVED from feeds that already exist (AX activity ingest,
  * agent-originated mutations) plus an explicit set for adapters with richer
@@ -148,15 +148,3 @@ export function agentPhaseLabel(presence: Pick<AgentPresence, 'phase' | 'detail'
       return 'Idle';
   }
 }
-
-/**
- * Stable per-agent identity hue (0-359) from the writer key. Phase colors
- * kept telling the human WHAT an agent is doing while erasing WHO — two
- * thinking agents rendered identically. Identity rides the glyph/border;
- * phase stays on dots and labels.
- */
-export function agentIdentityHue(key: string): number {
-  let hash = 5381;
-  for (let i = 0; i < key.length; i++) hash = ((hash << 5) + hash + key.charCodeAt(i)) | 0;
-  return ((hash % 360) + 360) % 360;
-}

package/src/shared/ax-surface-protocol.ts

@@ -18,6 +18,9 @@ export const AX_SURFACE_ACK_SOURCE = 'pmx-canvas-ax-ack';
 /** Parent→surface pushes (theme updates, live AX state) into html/viewer iframes. */
 export const HTML_SURFACE_PUSH_SOURCE = 'pmx-canvas-html-node';
 
+/** Tab-local JSON viewer state handoff, independent of AX capabilities. */
+export const JSON_VIEWER_STATE_SOURCE = 'pmx-canvas-json-state';
+
 /** Ext-app boot beacon: the iframe's scripts executed (WebKit watchdog liveness). */
 export const EXT_APP_BOOT_BEACON_SOURCE = 'pmx-canvas-ext-app-alive';
 

package/src/shared/canvas-app.ts

@@ -0,0 +1,62 @@
+import { z } from 'zod';
+
+export const CANVAS_APP_URI = 'ui://pmx/canvas';
+// Independent of package version: older builds can share the same version.
+export const CANVAS_APP_WRITE_CONTRACT = 'pmx-embedded-workbench-v4';
+
+const point = z.object({ x: z.number(), y: z.number() });
+export const canvasAppSnapshotSchema = z.object({
+  boardId: z.string().nullable(),
+  boardName: z.string(),
+  boards: z.array(z.object({ id: z.string(), name: z.string() })),
+  // A digest of this projection, not the board's content-delta cursor.
+  revision: z.string(),
+  nodes: z.array(
+    z.object({
+      id: z.string(),
+      type: z.string(),
+      title: z.string(),
+      text: z.string(),
+      contentRevision: z.number().int().nonnegative(),
+      // Only standalone Markdown within the editing limit; never a truncated draft.
+      editableContent: z.string().optional(),
+      position: point,
+      size: z.object({ width: z.number(), height: z.number() }),
+      image: z.string().optional(),
+    }),
+  ),
+  edges: z.array(z.object({ id: z.string(), from: z.string(), to: z.string(), label: z.string() })),
+  pinnedNodeIds: z.array(z.string()),
+});
+
+export type CanvasAppSnapshot = z.infer<typeof canvasAppSnapshotSchema>;
+
+/** Share only curated text, never image bytes or the whole board's contents. */
+export function canvasAppContext(
+  snapshot: Pick<CanvasAppSnapshot, 'boardId' | 'boardName' | 'pinnedNodeIds'> & {
+    nodes: Pick<CanvasAppSnapshot['nodes'][number], 'id' | 'type' | 'title' | 'text' | 'contentRevision'>[];
+  },
+  selectedIds: string[],
+  focusedIds: string[] = [],
+) {
+  const existing = new Set(snapshot.nodes.map((node) => node.id));
+  const selected = new Set(selectedIds.filter((id) => existing.has(id)).slice(0, 20));
+  const pinned = new Set(snapshot.pinnedNodeIds.filter((id) => existing.has(id)).slice(0, 20));
+  const focused = new Set(focusedIds.filter((id) => existing.has(id)).slice(0, 20));
+  return {
+    boardId: snapshot.boardId,
+    boardName: snapshot.boardName,
+    selectedNodeIds: [...selected],
+    focusedNodeIds: [...focused],
+    pinnedNodeIds: [...pinned],
+    nodes: snapshot.nodes
+      .filter((node) => selected.has(node.id) || pinned.has(node.id) || focused.has(node.id))
+      .map((node) => ({
+        id: node.id,
+        type: node.type,
+        title: node.title,
+        contentRevision: node.contentRevision,
+        text: node.text.slice(0, 700),
+      })),
+  };
+}

package/src/shared/themes.ts

@@ -11,8 +11,8 @@
  */
 
 export const CANVAS_THEMES = [
-  'dark',
-  'light',
+  'harbor',
+  'daylight',
   'high-contrast',
   'midnight',
   'sepia',
@@ -28,7 +28,7 @@ export function isCanvasTheme(value: unknown): value is CanvasThemeName {
   return typeof value === 'string' && (CANVAS_THEMES as readonly string[]).includes(value);
 }
 
-export function normalizeCanvasThemeName(value: unknown, fallback: CanvasThemeName = 'dark'): CanvasThemeName {
+export function normalizeCanvasThemeName(value: unknown, fallback: CanvasThemeName = 'harbor'): CanvasThemeName {
   return isCanvasTheme(value) ? value : fallback;
 }
 
@@ -43,8 +43,8 @@ export interface CanvasThemeMeta {
 }
 
 export const CANVAS_THEME_META: Record<CanvasThemeName, CanvasThemeMeta> = {
-  dark: { label: 'Dark', scheme: 'dark', swatchBg: '#081524', swatchAccent: '#4BBCFF' },
-  light: { label: 'Light', scheme: 'light', swatchBg: '#F4EFE6', swatchAccent: '#1A7ABF' },
+  harbor: { label: 'Harbor', scheme: 'dark', swatchBg: '#081524', swatchAccent: '#4BBCFF' },
+  daylight: { label: 'Daylight', scheme: 'light', swatchBg: '#F6F7F9', swatchAccent: '#1A7ABF' },
   'high-contrast': { label: 'High contrast', scheme: 'dark', swatchBg: '#000000', swatchAccent: '#00ffff' },
   midnight: { label: 'Midnight', scheme: 'dark', swatchBg: '#0A0D1C', swatchAccent: '#8B96FF' },
   sepia: { label: 'Sepia', scheme: 'light', swatchBg: '#F2E7D5', swatchAccent: '#B4632C' },

package/src/client/canvas/FocusFieldLayer.tsx

@@ -1,116 +0,0 @@
-import { attentionPrimaryNodeIds, attentionRegions, attentionSecondaryNodeIds } from '../state/attention-store';
-import { nodes } from '../state/canvas-store';
-
-interface Rect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-function getNodeRect(nodeId: string): Rect | null {
-  const node = nodes.value.get(nodeId);
-  if (!node) return null;
-  return {
-    left: node.position.x,
-    top: node.position.y,
-    width: node.size.width,
-    height: node.size.height,
-  };
-}
-
-function getRegionRect(nodeIds: string[]): Rect | null {
-  const rects = nodeIds.map((nodeId) => getNodeRect(nodeId)).filter((rect): rect is Rect => rect !== null);
-  if (rects.length === 0) return null;
-
-  const minLeft = Math.min(...rects.map((rect) => rect.left));
-  const minTop = Math.min(...rects.map((rect) => rect.top));
-  const maxRight = Math.max(...rects.map((rect) => rect.left + rect.width));
-  const maxBottom = Math.max(...rects.map((rect) => rect.top + rect.height));
-  const padX = 54;
-  const padY = 46;
-
-  return {
-    left: minLeft - padX,
-    top: minTop - padY,
-    width: maxRight - minLeft + padX * 2,
-    height: maxBottom - minTop + padY * 2,
-  };
-}
-
-function rectStyle(rect: Rect, radius: number): Record<string, string> {
-  return {
-    left: `${rect.left}px`,
-    top: `${rect.top}px`,
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    borderRadius: `${radius}px`,
-  };
-}
-
-export function FocusFieldLayer() {
-  const primaryNodeIds = Array.from(attentionPrimaryNodeIds.value);
-  const secondaryNodeIds = Array.from(attentionSecondaryNodeIds.value);
-  const regions = attentionRegions.value;
-
-  if (primaryNodeIds.length === 0 && secondaryNodeIds.length === 0) return null;
-
-  // A region that spans (nearly) the whole populated board distinguishes
-  // nothing — pins far apart degrade the glow into a border around
-  // everything. Skip those; the per-node halos still mark the pins.
-  const all = [...nodes.value.values()];
-  const boardArea =
-    all.length > 0
-      ? (Math.max(...all.map((n) => n.position.x + n.size.width)) - Math.min(...all.map((n) => n.position.x))) *
-        (Math.max(...all.map((n) => n.position.y + n.size.height)) - Math.min(...all.map((n) => n.position.y)))
-      : 0;
-
-  return (
-    <div class="attention-field-layer" aria-hidden="true">
-      {regions.map((region) => {
-        const rect = getRegionRect(region.nodeIds);
-        if (!rect) return null;
-        if (boardArea > 0 && rect.width * rect.height >= boardArea * 0.75) return null;
-        return <div key={region.id} class="attention-field-region" style={rectStyle(rect, 42)} />;
-      })}
-      {secondaryNodeIds.map((nodeId) => {
-        const rect = getNodeRect(nodeId);
-        if (!rect) return null;
-        return (
-          <div
-            key={`secondary-${nodeId}`}
-            class="attention-field-node attention-field-secondary"
-            style={rectStyle(
-              {
-                left: rect.left - 18,
-                top: rect.top - 18,
-                width: rect.width + 36,
-                height: rect.height + 36,
-              },
-              28,
-            )}
-          />
-        );
-      })}
-      {primaryNodeIds.map((nodeId) => {
-        const rect = getNodeRect(nodeId);
-        if (!rect) return null;
-        return (
-          <div
-            key={`primary-${nodeId}`}
-            class="attention-field-node attention-field-primary"
-            style={rectStyle(
-              {
-                left: rect.left - 24,
-                top: rect.top - 24,
-                width: rect.width + 48,
-                height: rect.height + 48,
-              },
-              30,
-            )}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/client/canvas/kind-colors.ts

@@ -1,23 +0,0 @@
-import type { CanvasNodeState } from '../types';
-
-/** Kind color per node type, as CSS tokens so every theme keeps its palette. */
-export const KIND_COLOR: Record<CanvasNodeState['type'], string> = {
-  markdown: 'var(--c-accent)',
-  'mcp-app': 'var(--c-ok)',
-  webpage: 'var(--c-warn)',
-  'json-render': 'var(--c-ok)',
-  graph: 'var(--c-purple)',
-  board: 'var(--c-accent)',
-  prompt: 'var(--c-accent)',
-  response: 'var(--c-ok)',
-  status: 'var(--c-warn)',
-  context: 'var(--c-muted)',
-  ledger: 'var(--c-dim)',
-  trace: 'var(--c-purple)',
-  file: 'var(--c-accent)',
-  diff: 'var(--c-ok)',
-  mermaid: 'var(--c-purple)',
-  image: 'var(--c-ok)',
-  html: 'var(--c-warn)',
-  group: 'var(--c-accent)',
-};