pmx-canvas 0.2.1 → 0.2.2

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

@@ -28,6 +28,8 @@ import {
 import { fetchAxSurfaceState } from './intent-bridge';
 import { invalidateTokenCache } from '../theme/tokens';
 import { resetAttentionBridge, syncAttentionFromSse } from './attention-bridge';
+import { dissolveIntent, resetIntents, settleIntent, upsertIntent } from './intent-store';
+import type { PmxAxIntent } from '../../shared/ax-intent.js';
 
 let eventSource: EventSource | null = null;
 let savedLayout: Map<string, Partial<CanvasNodeState>> | null = null;
@@ -941,6 +943,32 @@ function handleAxStateChanged(): void {
   }, 150);
 }
 
+// ── Ghost Cursor of Intent ────────────────────────────────────
+function handleAxIntent(data: Record<string, unknown>): void {
+  const intent = data.intent as PmxAxIntent | undefined;
+  // Require a numeric `expiresAt`: the client-side TTL prune backstop
+  // (intent-store) compares `expiresAt <= now`, so a frame missing it would never
+  // be pruned if its `clear` frame were dropped. The server always sets it, so this
+  // only rejects a malformed frame — keeping the backstop's guarantee real.
+  if (
+    !intent
+    || typeof intent.id !== 'string'
+    || typeof intent.kind !== 'string'
+    || typeof intent.expiresAt !== 'number'
+  ) return;
+  upsertIntent(intent);
+}
+
+function handleAxIntentClear(data: Record<string, unknown>): void {
+  const id = typeof data.id === 'string' ? data.id : '';
+  if (!id) return;
+  if (data.settled === true) {
+    settleIntent(id, typeof data.nodeId === 'string' ? data.nodeId : undefined);
+  } else {
+    dissolveIntent(id);
+  }
+}
+
 // ── SSE connection ────────────────────────────────────────────
 /** @internal — exported for testing */
 export const EVENT_HANDLERS: Record<string, (data: Record<string, unknown>) => void> = {
@@ -976,6 +1004,8 @@ export const EVENT_HANDLERS: Record<string, (data: Record<string, unknown>) => v
   'canvas-response-complete': handleCanvasResponseComplete,
   'ax-state-changed': handleAxStateChanged,
   'ax-event-created': handleAxStateChanged,
+  'ax-intent': handleAxIntent,
+  'ax-intent-clear': handleAxIntentClear,
 };
 
 export function connectSSE(): () => void {
@@ -983,6 +1013,7 @@ export function connectSSE(): () => void {
   ensureStatusNode();
   hasInitialServerLayout.value = false;
   resetAttentionBridge();
+  resetIntents();
   if (reconnectTimer) {
     clearTimeout(reconnectTimer);
     reconnectTimer = null;

package/src/client/theme/global.css

@@ -3484,3 +3484,263 @@ button.welcome-hint:hover {
 .image-node-zoom-reset:hover {
   background: var(--c-surface-hover);
 }
+
+/* ── Ghost Cursor of Intent ─────────────────────────────────────
+   Pre-commit presence: faint placeholders for the move the agent is about to
+   make. Lives inside the canvas world transform (positions are world coords).
+   The layer sits above nodes so remove/edit overlays read on top of their
+   target, but is pointer-transparent except the info card + veto control. */
+.intent-layer {
+  display: contents;
+}
+
+.intent-ghost {
+  position: absolute;
+  pointer-events: none;
+  z-index: 100000;
+  transition:
+    left 480ms ease,
+    top 480ms ease,
+    width 480ms ease,
+    height 480ms ease,
+    opacity 180ms ease;
+}
+
+/* create / move destination — a dashed ghost node */
+.intent-ghost-box {
+  border: 1.5px dashed var(--c-accent);
+  border-radius: 10px;
+  background: var(--c-accent-10);
+  box-shadow: 0 0 0 1px var(--c-accent-10), 0 6px 22px var(--c-accent-10);
+  animation: intent-breathe 2.1s ease-in-out infinite;
+  overflow: visible;
+}
+
+.intent-ghost-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  color: var(--c-accent);
+}
+
+.intent-ghost-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--c-accent);
+}
+
+.intent-ghost-badge {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--c-accent);
+  opacity: 0.85;
+}
+
+@keyframes intent-breathe {
+  0%, 100% { box-shadow: 0 0 0 1px var(--c-accent-10), 0 6px 22px var(--c-accent-10); }
+  50%      { box-shadow: 0 0 0 1px var(--c-accent-25), 0 8px 30px var(--c-accent-25); }
+}
+
+/* remove — a red crosshatch tombstone over the target */
+.intent-ghost-remove {
+  border: 1.5px dashed var(--c-danger);
+  border-radius: 10px;
+  background-color: color-mix(in srgb, var(--c-danger) 8%, transparent);
+  background-image: repeating-linear-gradient(
+    45deg,
+    color-mix(in srgb, var(--c-danger) 22%, transparent) 0,
+    color-mix(in srgb, var(--c-danger) 22%, transparent) 2px,
+    transparent 2px,
+    transparent 9px
+  );
+}
+
+/* edit — a shimmer bar over the target */
+.intent-ghost-edit {
+  border: 1.5px dashed var(--c-accent);
+  border-radius: 10px;
+  background: var(--c-accent-10);
+  overflow: visible;
+}
+
+.intent-edit-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 3px;
+  width: 100%;
+  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
+  animation: response-stream-pulse 1.5s ease-in-out infinite;
+}
+
+/* connect — info card anchored at the bezier midpoint */
+.intent-ghost-connect {
+  display: flex;
+  justify-content: center;
+}
+
+/* the info treatment: label + confidence chip, reason, seq, veto */
+.intent-info {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  pointer-events: auto;
+  max-width: 280px;
+}
+
+.intent-ghost-connect .intent-info {
+  position: static;
+  margin-top: 0;
+  align-items: center;
+}
+
+.intent-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  padding: 3px 6px 3px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--c-accent-25);
+  box-shadow: 0 4px 14px var(--c-shadow);
+  color: var(--c-text);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.intent-seq {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--c-accent);
+  color: var(--c-bg);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.intent-chip-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--c-accent);
+}
+
+.intent-chip-label {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+.intent-confidence {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-muted);
+}
+
+.intent-veto {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 2px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--c-muted);
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.intent-veto:hover {
+  background: color-mix(in srgb, var(--c-danger) 18%, transparent);
+  color: var(--c-danger);
+}
+
+.intent-reason {
+  align-self: flex-start;
+  padding: 3px 8px;
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--c-panel-glass) 92%, transparent);
+  border: 1px solid var(--c-line);
+  color: var(--c-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+/* connect bezier + move trail (SVG) */
+.intent-line-layer path {
+  fill: none;
+}
+
+.intent-line-layer {
+  z-index: 99999;
+}
+
+.intent-edge {
+  stroke-width: 2;
+  stroke-dasharray: 6 5;
+  animation: intent-dash 0.9s linear infinite;
+}
+
+.intent-edge.type-flow { stroke: var(--c-accent); }
+.intent-edge.type-depends-on { stroke: var(--c-warn); }
+.intent-edge.type-relation { stroke: var(--c-muted); }
+.intent-edge.type-references { stroke: var(--c-dim); }
+
+.intent-trail {
+  stroke: var(--c-accent);
+  stroke-width: 2;
+  stroke-dasharray: 5 5;
+  animation: intent-dash 0.9s linear infinite;
+}
+
+.intent-arrow-head {
+  fill: var(--c-accent);
+}
+
+@keyframes intent-dash {
+  to { stroke-dashoffset: -22; }
+}
+
+/* settle — the ghost becomes real, then clears */
+.intent-ghost.is-settling {
+  animation: intent-settle 480ms ease forwards;
+}
+
+@keyframes intent-settle {
+  0%   { transform: scale(1); }
+  45%  { transform: scale(1.04); border-style: solid; opacity: 1; }
+  100% { transform: scale(1); opacity: 0; }
+}
+
+/* dissolve — abandoned / vetoed / expired */
+.intent-ghost.is-dissolving {
+  animation: intent-dissolve 320ms ease forwards;
+}
+
+@keyframes intent-dissolve {
+  to { transform: scale(0.96); opacity: 0; filter: blur(2px); }
+}
+
+/* keep ghosts calm while a node is being dragged */
+html.is-node-dragging .intent-ghost,
+html.is-node-dragging .intent-line-layer {
+  opacity: 0.5;
+}

package/src/json-render/charts/components.tsx

@@ -118,6 +118,11 @@ export function useChartFrameHeight(explicitHeight: number | null | undefined, f
   const [autoHeight, setAutoHeight] = useState(fallbackHeight);
   const [autoWidth, setAutoWidth] = useState(0);
 
+  // Standalone "Open as site" tab (#65): fill the full browser viewport — there is no
+  // card chrome below the chart, so drop the ~44px reserve and use a larger floor.
+  const isSite = typeof window !== 'undefined'
+    && (window as { __PMX_CANVAS_JSON_RENDER_DISPLAY__?: string }).__PMX_CANVAS_JSON_RENDER_DISPLAY__ === 'site';
+
   useEffect(() => {
     const frame = frameRef.current;
     if (!frame) return;
@@ -136,7 +141,11 @@ export function useChartFrameHeight(explicitHeight: number | null | undefined, f
       // across node sizes). rect.top already accounts for everything above. With
       // too small a reserve a filled chart spills ~17px past the viewport and the
       // iframe document shows a needless scrollbar.
-      const available = Math.max(220, Math.round(window.innerHeight - rect.top - 44));
+      // Keep the ~44px reserve in BOTH modes — it covers the chart frame's own
+      // non-plot chrome (title + .pmx-chart padding), which exists in site mode too.
+      // Dropping it pushed the frame past the viewport and reintroduced a scrollbar.
+      // Site mode differs only in the floor (300 vs 220) and the fill selection below.
+      const available = Math.max(isSite ? 300 : 220, Math.round(window.innerHeight - rect.top - 44));
       const nextWidth = Math.round(rect.width);
       // Dead-band: ignore sub-threshold churn so a stray re-measure (e.g. a
       // scrollbar toggling) can't ping-pong state and repaint.
@@ -162,9 +171,14 @@ export function useChartFrameHeight(explicitHeight: number | null | undefined, f
   // content-fit (strictSize / user-resized nodes), it fills the frame down as before.
   const fitContent = typeof window !== 'undefined'
     && (window as { __PMX_CANVAS_FIT_CONTENT__?: boolean }).__PMX_CANVAS_FIT_CONTENT__ === true;
-  const height = fitContent
-    ? (typeof explicitHeight === 'number' ? explicitHeight : fallbackHeight)
-    : (typeof explicitHeight === 'number' ? Math.min(explicitHeight, autoHeight) : autoHeight);
+  // Site mode (#65): fill the viewport (autoHeight), ignoring an explicit/configured
+  // chart height that would otherwise cap it to a shallow card. Content-fit is off in
+  // site mode (the server skips it), so site never takes the intrinsic-height branch.
+  const height = isSite
+    ? autoHeight
+    : fitContent
+      ? (typeof explicitHeight === 'number' ? explicitHeight : fallbackHeight)
+      : (typeof explicitHeight === 'number' ? Math.min(explicitHeight, autoHeight) : autoHeight);
   return {
     frameRef,
     height,

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

@@ -180,8 +180,15 @@ function App() {
     ? { ...(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.
+  const isSite = window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ === 'site';
+  const containerStyle = isSite
+    ? { display: 'flex', flexDirection: 'column' as const, height: '100dvh', minHeight: '100dvh', padding: 0, boxSizing: 'border-box' as const }
+    : { minHeight: '100vh', padding: 16, boxSizing: 'border-box' as const };
   return (
-    <div style={{ minHeight: '100vh', padding: 16, boxSizing: 'border-box' }}>
+    <div style={containerStyle}>
       <JSONUIProvider
         registry={registry}
         initialState={initialState}
@@ -189,7 +196,9 @@ function App() {
         handlers={buildAxHandlers()}
       >
         <AxStateSync />
-        <Renderer spec={spec} registry={registry} loading={false} />
+        <div style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
+          <Renderer spec={spec} registry={registry} loading={false} />
+        </div>
         {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? (
           <JsonRenderDevtools position="right" />
         ) : null}

package/src/json-render/server.ts

@@ -940,7 +940,7 @@ export async function buildJsonRenderViewerHtml(options: {
   title: string;
   spec: JsonRenderSpec;
   theme?: 'dark' | 'light' | 'high-contrast';
-  display?: 'expanded';
+  display?: 'expanded' | 'site';
   devtools?: boolean;
   nodeId?: string;
   axToken?: string;