pmx-canvas 0.10.0 → 0.12.0

package/src/client/nodes/StatusNode.tsx

@@ -1,5 +1,7 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
+import { isWorkCardState } from '../../shared/ax-kinds.js';
+import { WorkCard } from './WorkCard';
 
 export function getStatusDisplayPhase(node: CanvasNodeState): string {
   const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0 ? node.data.phase.trim() : '';
@@ -13,12 +15,23 @@ export function getStatusDisplayPhase(node: CanvasNodeState): string {
 }
 
 export function StatusNode({ node }: { node: CanvasNodeState }) {
+  if (typeof node.data.workItemId === 'string' && node.data.liveWorkAvailable === false) {
+    return (
+      <div class="work-card">
+        <div class="work-card-error">⚠ Task unavailable</div>
+        <div>The linked task is no longer on this board.</div>
+        <div class="work-card-live">Read-only · removing this card does not cancel work.</div>
+      </div>
+    );
+  }
+  if (isWorkCardState(node.data.workState)) return <WorkCard node={node} state={node.data.workState} />;
   const phase = getStatusDisplayPhase(node);
   const detail = (node.data.detail as string) || '';
   const message = (node.data.message as string) || '';
   const level = (node.data.level as string) || 'ok';
   const activeTool = node.data.activeTool as string | null;
   const subagent = node.data.subagent as { state: string; name: string } | undefined;
+  const progress = typeof node.data.progress === 'number' ? Math.max(0, Math.min(100, node.data.progress)) : null;
 
   const phaseColor = PHASE_COLORS[phase] ?? 'var(--c-muted)';
   const isActive = phase !== 'idle';
@@ -33,7 +46,6 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
             height: '8px',
             borderRadius: '50%',
             background: phaseColor,
-            boxShadow: isActive ? `0 0 8px ${phaseColor}` : 'none',
             animation: isActive ? 'pulse 1.5s infinite' : 'none',
             flexShrink: 0,
           }}
@@ -42,11 +54,13 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
           style={{
             fontWeight: 600,
             color: phaseColor,
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
+            fontSize: 'var(--fs-meta)',
+            padding: '2px 8px',
+            borderRadius: 'var(--r-pill)',
+            background: `color-mix(in srgb, ${phaseColor} 12%, transparent)`,
           }}
         >
-          {phase}
+          {phase.charAt(0).toUpperCase() + phase.slice(1)}
         </span>
         {detail && (
           <span
@@ -62,10 +76,23 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
         )}
       </div>
 
+      {progress !== null && (
+        <div
+          class="status-progress"
+          role="progressbar"
+          aria-label="Progress"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={progress}
+        >
+          <div style={{ width: `${progress}%`, background: phaseColor }} />
+        </div>
+      )}
+
       {/* Active tool */}
       {activeTool && (
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-agent)' }}>
-          <span style={{ fontSize: '10px' }}>⚙</span>
+          <span style={{ fontSize: 'var(--fs-meta)' }}>⚙</span>
           <span style={{ fontFamily: 'var(--font-code)', fontSize: '11px' }}>{activeTool}</span>
         </div>
       )}
@@ -73,9 +100,9 @@ export function StatusNode({ node }: { node: CanvasNodeState }) {
       {/* Sub-agent */}
       {subagent && subagent.state !== 'completed' && (
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-subagent)' }}>
-          <span style={{ fontSize: '10px' }}>⠉</span>
+          <span style={{ fontSize: 'var(--fs-meta)' }}>⠉</span>
           <span>{subagent.name}</span>
-          <span style={{ color: 'var(--c-muted)', fontSize: '10px' }}>({subagent.state})</span>
+          <span style={{ color: 'var(--c-muted)', fontSize: 'var(--fs-meta)' }}>({subagent.state})</span>
         </div>
       )}
 

package/src/client/nodes/StatusSummary.tsx

@@ -1,8 +1,19 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
 import { getStatusDisplayPhase } from './StatusNode';
+import { isWorkCardState, WORK_CARD_STATES } from '../../shared/ax-kinds.js';
 
 export function StatusSummary({ node }: { node: CanvasNodeState }) {
+  if (typeof node.data.workItemId === 'string' && node.data.liveWorkAvailable === false)
+    return <span class="work-card-error">⚠ Task unavailable</span>;
+  if (isWorkCardState(node.data.workState)) {
+    const state = WORK_CARD_STATES[node.data.workState];
+    return (
+      <span class={`work-card-state work-card-${node.data.workState}`}>
+        <span aria-hidden="true">{state.glyph}</span> {state.label}
+      </span>
+    );
+  }
   const phase = getStatusDisplayPhase(node);
   const activeTool = node.data.activeTool as string | null;
   const subagent = node.data.subagent as { state: string; name: string } | undefined;
@@ -21,14 +32,16 @@ export function StatusSummary({ node }: { node: CanvasNodeState }) {
           flexShrink: 0,
         }}
       />
-      <span style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}>{phase}</span>
+      <span style={{ color: phaseColor, fontSize: 'var(--fs-meta)', fontWeight: 600 }}>
+        {phase.charAt(0).toUpperCase() + phase.slice(1)}
+      </span>
       {activeTool && (
-        <span style={{ color: 'var(--c-agent)', fontSize: '10px', fontFamily: 'var(--font-code)' }}>
+        <span style={{ color: 'var(--c-agent)', fontSize: 'var(--fs-meta)', fontFamily: 'var(--font-code)' }}>
           ⚙ {activeTool}
         </span>
       )}
       {subagent && subagent.state !== 'completed' && (
-        <span style={{ color: 'var(--c-subagent)', fontSize: '10px' }}>⠉ {subagent.name}</span>
+        <span style={{ color: 'var(--c-subagent)', fontSize: 'var(--fs-meta)' }}>⠉ {subagent.name}</span>
       )}
     </span>
   );

package/src/client/nodes/TraceNode.tsx

@@ -17,7 +17,7 @@ const STATUS_ICONS: Record<string, string> = {
 };
 
 const STATUS_COLORS: Record<string, string> = {
-  running: 'var(--c-accent)',
+  running: 'var(--c-agent)',
   success: 'var(--c-ok)',
   failed: 'var(--c-danger)',
 };
@@ -71,9 +71,9 @@ export function TraceNode({ node }: { node: CanvasNodeState }) {
         <div
           style={{
             fontFamily: 'var(--font-code)',
-            fontSize: '11px',
-            fontWeight: 600,
-            color: catColor,
+            fontSize: 'var(--fs-ui)',
+            fontWeight: 500,
+            color: category === 'subagent' ? catColor : 'var(--c-text)',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
@@ -84,7 +84,7 @@ export function TraceNode({ node }: { node: CanvasNodeState }) {
         {summary && (
           <div
             style={{
-              fontSize: '10px',
+              fontSize: 'var(--fs-meta)',
               color: error ? 'var(--c-danger)' : 'var(--c-muted)',
               whiteSpace: 'nowrap',
               overflow: 'hidden',
@@ -101,10 +101,10 @@ export function TraceNode({ node }: { node: CanvasNodeState }) {
       {duration && (
         <span
           style={{
-            fontSize: '9px',
+            fontSize: 'var(--fs-meta)',
             padding: '1px 5px',
-            borderRadius: '3px',
-            background: 'rgba(255,255,255,0.06)',
+            borderRadius: 'var(--r-control)',
+            background: 'var(--c-surface-hover)',
             color: 'var(--c-muted)',
             flexShrink: 0,
             whiteSpace: 'nowrap',

package/src/client/nodes/ViewerFrame.tsx

@@ -0,0 +1,273 @@
+import type { JSX, RefObject } from 'preact';
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import {
+  HTML_SURFACE_PUSH_SOURCE,
+  readSurfaceNotification,
+  surfaceNotification,
+} from '../../shared/ax-surface-protocol.js';
+
+export const VIEWER_LOAD_DEADLINE_MS = 10_000;
+export type ViewerSource = { src?: string; srcdoc?: string; error?: boolean; retry?: () => void };
+type LoadDocument = (
+  frame: HTMLIFrameElement,
+  signal: AbortSignal,
+) => Promise<boolean | 'cancelled' | undefined> | undefined;
+type Entry = { key: string; source: ViewerSource; attempt: number; load?: LoadDocument };
+type MountFrame = (frame: HTMLIFrameElement, fail: () => void) => () => void;
+
+/** The document acknowledges mounting before its frame-gated paint signal. */
+export function waitForViewerPaint(
+  frame: HTMLIFrameElement,
+  token: string,
+  signal: AbortSignal,
+  jsonRpc = false,
+): Promise<boolean> {
+  if (signal.aborted) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    const finish = (ready: boolean) => {
+      clearTimeout(timer);
+      window.removeEventListener('message', receive);
+      signal.removeEventListener('abort', cancel);
+      resolve(ready);
+    };
+    const cancel = () => finish(false);
+    const receive = (event: MessageEvent) => {
+      const data = (jsonRpc ? readSurfaceNotification(event.data) : event.data) as {
+        source?: string;
+        token?: string;
+        type?: string;
+      } | null;
+      if (event.source !== frame.contentWindow || data?.source !== HTML_SURFACE_PUSH_SOURCE || data?.token !== token)
+        return;
+      if (data.type === 'mounted') {
+        clearTimeout(timer);
+      }
+      if (data.type === 'ready') finish(true);
+    };
+    const timer = setTimeout(cancel, VIEWER_LOAD_DEADLINE_MS);
+    window.addEventListener('message', receive);
+    signal.addEventListener('abort', cancel, { once: true });
+    const message = { source: HTML_SURFACE_PUSH_SOURCE, type: 'check-ready', token };
+    frame.contentWindow?.postMessage(jsonRpc ? surfaceNotification(message) : message, '*');
+  });
+}
+
+/** Bind protocol adapters before document scripts run, once per document. */
+function ViewerDocument({
+  mount,
+  iframeRef,
+  ...attributes
+}: JSX.IntrinsicElements['iframe'] & {
+  mount?: (frame: HTMLIFrameElement) => () => void;
+  iframeRef?: RefObject<HTMLIFrameElement>;
+}) {
+  const frame = useRef<HTMLIFrameElement>(null);
+  useLayoutEffect(() => mount?.(frame.current!), []);
+  useLayoutEffect(() => {
+    if (iframeRef) iframeRef.current = frame.current;
+  }, [iframeRef]);
+  return <iframe {...attributes} ref={frame} />;
+}
+
+/** Preserve the painted document until its replacement restores and paints. */
+export function RefreshingViewerFrame({
+  source,
+  identity = '',
+  iframeRef,
+  onLoad = () => {},
+  onMount,
+  onOpen,
+  onDocumentLoad,
+  title,
+  className = 'mcp-app-frame',
+  sandbox = 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox',
+  allow = '',
+  tabIndex,
+  referrerPolicy,
+}: {
+  source: ViewerSource;
+  identity?: string;
+  iframeRef: RefObject<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMount?: MountFrame;
+  onOpen?: () => void;
+  onDocumentLoad?: LoadDocument;
+  title: string;
+  className?: string;
+  sandbox?: string;
+  allow?: string;
+  tabIndex?: number;
+  referrerPolicy?: JSX.IntrinsicElements['iframe']['referrerPolicy'];
+}) {
+  const documentSource = source.src ?? source.srcdoc ?? '';
+  const sourceKey = documentSource ? `${identity}\0${documentSource}` : '';
+  const [painted, setPainted] = useState<Entry>({ key: sourceKey, source, attempt: 0, load: onDocumentLoad });
+  const [pending, setPending] = useState<Entry | null>(null);
+  const [failure, setFailure] = useState<Entry | null>(null);
+  const [ready, setReady] = useState(false);
+  const promotion = useRef(0);
+  const readiness = useRef(new Map<AbortController, Entry>());
+  const currentEntries = useRef({ painted, pending });
+  currentEntries.current = { painted, pending };
+  const networkTimer = useRef<{ entry: Entry; timer: ReturnType<typeof setTimeout> }>();
+  const loadedEntries = useRef(new WeakSet<Entry>());
+
+  const fail = (entry: Entry) => {
+    const current = currentEntries.current;
+    if (entry === (current.pending ?? current.painted)) setFailure(entry);
+  };
+
+  useLayoutEffect(() => {
+    promotion.current += 1;
+    setFailure(null);
+    if (!sourceKey || sourceKey === painted.key) {
+      setPending(null);
+      return;
+    }
+    if (!painted.key) {
+      setPainted({ key: sourceKey, source, attempt: 0, load: onDocumentLoad });
+      return;
+    }
+    setPending({ key: sourceKey, source, attempt: 0, load: onDocumentLoad });
+  }, [sourceKey, painted.key]);
+
+  useLayoutEffect(() => {
+    // Retry retires an entry without changing its source key. Keep the retained
+    // foreground's first-paint wait, but cancel every removed document's work.
+    for (const [controller, entry] of readiness.current) {
+      if (entry === painted || entry === pending) continue;
+      controller.abort();
+      readiness.current.delete(controller);
+    }
+  }, [painted, pending]);
+
+  useLayoutEffect(() => {
+    const entry = pending ?? painted;
+    if (!entry.key || loadedEntries.current.has(entry)) return;
+    const timer = setTimeout(() => fail(entry), VIEWER_LOAD_DEADLINE_MS);
+    networkTimer.current = { entry, timer };
+    return () => clearTimeout(timer);
+  }, [pending, painted]);
+
+  useEffect(
+    () => () => {
+      promotion.current += 1;
+      for (const controller of readiness.current.keys()) controller.abort();
+      readiness.current.clear();
+    },
+    [],
+  );
+
+  const frame = (entry: Entry, isPending: boolean) =>
+    entry.key && (
+      <ViewerDocument
+        key={`${entry.key}:${entry.attempt}`}
+        iframeRef={isPending ? undefined : iframeRef}
+        mount={onMount ? (frame) => onMount(frame, () => fail(entry)) : undefined}
+        src={entry.source.src}
+        srcdoc={entry.source.srcdoc}
+        class={className}
+        sandbox={sandbox}
+        allow={allow}
+        tabIndex={tabIndex}
+        referrerPolicy={referrerPolicy}
+        inert={isPending}
+        aria-hidden={isPending ? true : undefined}
+        onError={() => fail(entry)}
+        onLoad={async (event) => {
+          loadedEntries.current.add(entry);
+          if (networkTimer.current?.entry === entry) clearTimeout(networkTimer.current.timer);
+          const token = isPending ? ++promotion.current : promotion.current;
+          const loadedFrame = event.currentTarget;
+          const controller = new AbortController();
+          readiness.current.set(controller, entry);
+          const result = entry.load?.(loadedFrame, controller.signal);
+          const loaded = result ? await result : undefined;
+          readiness.current.delete(controller);
+          const current = currentEntries.current;
+          if (
+            (isPending && promotion.current !== token) ||
+            (entry !== current.painted && entry !== current.pending) ||
+            loaded === 'cancelled' ||
+            controller.signal.aborted
+          )
+            return;
+          if (loaded === false) {
+            fail(entry);
+            return;
+          }
+          setFailure((failed) => (failed === entry ? null : failed));
+          if (!isPending) {
+            setReady(true);
+            onLoad();
+            return;
+          }
+          requestAnimationFrame(() =>
+            requestAnimationFrame(() => {
+              if (promotion.current !== token) return;
+              iframeRef.current = loadedFrame;
+              setPainted(entry);
+              setPending(null);
+              setReady(true);
+              onLoad();
+            }),
+          );
+        }}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          border: 0,
+          visibility: 'visible',
+          zIndex: isPending ? 0 : 1,
+          background: 'var(--c-panel)',
+        }}
+        title={title}
+      />
+    );
+
+  return (
+    <div class="mcp-app-frame-stack">
+      {frame(painted, false)}
+      {pending && frame(pending, true)}
+      {!ready && !failure && !source.error && (
+        <div class="viewer-fallback" role="status">
+          Loading viewer…
+        </div>
+      )}
+      {(failure || source.error) && (
+        <div class={`viewer-fallback${ready ? ' viewer-fallback-retained' : ''}`} role="status">
+          <span>Viewer could not load.{ready ? ' Keeping the last view.' : ''}</span>
+          <button
+            type="button"
+            onClick={() => {
+              if (source.error) {
+                source.retry?.();
+                return;
+              }
+              if (!failure) return;
+              const retry = { ...failure, attempt: failure.attempt + 1 };
+              setFailure(null);
+              if (pending) setPending(retry);
+              else setPainted(retry);
+            }}
+          >
+            Retry
+          </button>
+        </div>
+      )}
+      {onOpen && !failure && !source.error && (
+        <button
+          type="button"
+          class="ext-app-preview-catcher"
+          aria-label="Open full view to edit"
+          onClick={(event) => {
+            event.stopPropagation();
+            onOpen();
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/client/nodes/ViewerHost.tsx

@@ -0,0 +1,41 @@
+import type { ComponentChildren } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { expandNode } from '../state/canvas-store';
+import type { CanvasNodeState } from '../types';
+
+// Mount on first approach at any zoom, then retain the document's arbitrary
+// live state. A lifetime cap starves later regions of a populated board.
+export function ViewerHost({ node, children }: { node: CanvasNodeState; children: ComponentChildren }) {
+  const anchor = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    if (!anchor.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry!.isIntersecting) {
+          setMounted(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '200px' },
+    );
+    observer.observe(anchor.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={anchor} class="viewer-host" data-viewer-mounted={mounted}>
+      {mounted ? (
+        children
+      ) : (
+        <div class="viewer-placeholder">
+          <span>{String(node.data.title || node.type)}</span>
+          <button type="button" onClick={() => expandNode(node.id)}>
+            Open viewer
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/WebpageNode.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { refreshWebpageNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
+import { RefreshingViewerFrame } from './ViewerFrame';
 
 function formatHost(url: string): string {
   try {
@@ -35,6 +36,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
   const frameBlockedReason = typeof node.data.frameBlockedReason === 'string' ? node.data.frameBlockedReason : '';
   const [refreshing, setRefreshing] = useState(false);
   const [showEmbed, setShowEmbed] = useState(expanded);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
     if (expanded) {
@@ -63,9 +65,9 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
       <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '12px' }}>
         <div style={{ minWidth: 0, flex: 1 }}>
           <div style={{ fontSize: '12px', color: 'var(--c-muted)' }}>{formatHost(url)}</div>
-          <div style={{ fontSize: expanded ? '18px' : '15px', fontWeight: 700, color: 'var(--c-text)' }}>
-            {pageTitle || (node.data.title as string) || url}
-          </div>
+          {pageTitle && pageTitle !== node.data.title && (
+            <div style={{ fontSize: 'var(--fs-title)', fontWeight: 600, color: 'var(--c-text)' }}>{pageTitle}</div>
+          )}
           <a
             href={url}
             target="_blank"
@@ -82,7 +84,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
             gap: '6px',
             padding: '4px 8px',
             borderRadius: '999px',
-            background: 'rgba(255,255,255,0.04)',
+            background: 'var(--c-panel-soft)',
             color: statusTone,
             fontSize: '11px',
             textTransform: 'uppercase',
@@ -194,7 +196,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
               fontSize: '11px',
               color: 'var(--c-muted)',
               borderBottom: '1px solid var(--c-line)',
-              background: 'rgba(255,255,255,0.03)',
+              background: 'var(--c-panel)',
             }}
           >
             Live preview unavailable. This site refuses embedding, so PMX Canvas cannot show it inline.
@@ -216,9 +218,13 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
         <div
           style={{
             border: '1px solid var(--c-line)',
-            borderRadius: '12px',
+            borderRadius: 'var(--r-control)',
             overflow: 'hidden',
-            background: 'var(--c-panel-soft)',
+            background: 'var(--c-panel)',
+            height: '320px',
+            flexShrink: 0,
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
           <div
@@ -227,26 +233,20 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
               fontSize: '11px',
               color: 'var(--c-muted)',
               borderBottom: '1px solid var(--c-line)',
-              background: 'rgba(255,255,255,0.03)',
+              background: 'var(--c-panel)',
             }}
           >
             Live preview (best effort). If this stays blank, the site likely blocks framing. The cached text snapshot
             below still works.
           </div>
-          <iframe
-            class="webpage-node-iframe"
+          <RefreshingViewerFrame
+            iframeRef={iframeRef}
+            onLoad={() => {}}
+            className="webpage-node-iframe"
             title={pageTitle || (node.data.title as string) || url}
-            src={url}
-            loading="lazy"
+            source={{ src: url }}
             referrerPolicy="no-referrer"
             sandbox="allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts"
-            style={{
-              display: 'block',
-              width: '100%',
-              height: expanded ? '320px' : '180px',
-              border: 'none',
-              background: '#fff',
-            }}
           />
         </div>
       )}
@@ -266,10 +266,8 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
           flex: 1,
           minHeight: 0,
           overflow: 'auto',
-          border: '1px solid var(--c-line)',
-          borderRadius: '10px',
-          background: 'var(--c-panel-soft)',
-          padding: expanded ? '14px' : '10px',
+          borderTop: '1px solid var(--c-line)',
+          paddingTop: '12px',
         }}
       >
         {excerpt ? (