pmx-canvas 0.1.14 → 0.1.15

package/src/client/canvas/DockedNode.tsx

@@ -2,6 +2,7 @@ import { ContextNode } from '../nodes/ContextNode';
 import { LedgerNode } from '../nodes/LedgerNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { StatusSummary } from '../nodes/StatusSummary';
+import { attentionHistoryOpen, closeAttentionHistory } from '../state/attention-store';
 import { toggleCollapsed, undockNode } from '../state/canvas-store';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
@@ -19,20 +20,119 @@ function renderDockedContent(node: CanvasNodeState) {
   }
 }
 
+function getContextItemCount(node: CanvasNodeState): number {
+  const cards = Array.isArray(node.data.cards) ? (node.data.cards as unknown[]) : [];
+  const auxTabs = Array.isArray(node.data.auxTabs) ? (node.data.auxTabs as unknown[]) : [];
+  return cards.length + auxTabs.length;
+}
+
+function ContextDockedNode({ node }: { node: CanvasNodeState }) {
+  const count = getContextItemCount(node);
+  const hasItems = count > 0;
+  const collapsed = node.collapsed === true;
+
+  const expand = () => {
+    // Mutual exclusion with the Updates panel — only one side panel open at a
+    // time. They share the same right-edge anchor, so opening both at once
+    // would visually collide.
+    closeAttentionHistory();
+    toggleCollapsed(node.id);
+  };
+
+  // Hide the collapsed Context pill while the Updates side panel is open.
+  // Mutual exclusion guarantees both panels can't be expanded simultaneously,
+  // but the pill itself would otherwise sit beneath/beside the Updates panel
+  // at the same right edge — better to hide until Updates is closed.
+  if (collapsed && attentionHistoryOpen.value) return null;
+
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        class="context-dock-tab"
+        data-docked-node="true"
+        onClick={expand}
+        aria-label={hasItems ? `Context — ${count} item${count === 1 ? '' : 's'}` : 'Context'}
+        title={hasItems ? `${count} item${count === 1 ? '' : 's'} in agent context` : 'Agent context'}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+          <line x1="1.5" y1="6" x2="14.5" y2="6" />
+          <circle cx="4" cy="4.25" r="0.6" fill="currentColor" stroke="none" />
+        </svg>
+        <span class="context-dock-tab-label">Context</span>
+        {hasItems && (
+          <span class="context-dock-tab-badge" aria-hidden="true">
+            {count > 99 ? '99+' : count}
+          </span>
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <aside class="context-dock-panel" data-docked-node="true" aria-label="Agent context">
+      <div class="context-dock-header">
+        <div class="context-dock-header-text">
+          <span class="context-dock-title">Context</span>
+          <span class="context-dock-subtitle">
+            {hasItems ? `${count} item${count === 1 ? '' : 's'} in agent context` : 'Active agent context'}
+          </span>
+        </div>
+        <div class="context-dock-controls">
+          <button
+            type="button"
+            class="context-dock-icon-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              undockNode(node.id);
+            }}
+            aria-label="Undock to canvas"
+            title="Undock to canvas"
+          >
+            {'\u2299'}
+          </button>
+          <button
+            type="button"
+            class="context-dock-icon-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleCollapsed(node.id);
+            }}
+            aria-label="Collapse context panel"
+            title="Collapse"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+      <div class="context-dock-body">
+        <ContextNode node={node} />
+      </div>
+    </aside>
+  );
+}
+
 export function DockedNode({ node }: { node: CanvasNodeState }) {
+  if (node.type === 'context') {
+    return <ContextDockedNode node={node} />;
+  }
+
   return (
-    <div class="docked-node">
+    <div class="docked-node" data-docked-node="true">
       <div class="docked-node-header">
         <span class="node-type-badge">{TYPE_LABELS[node.type] ?? node.type}</span>
         {node.type === 'status' && node.collapsed && <StatusSummary node={node} />}
-        {node.type === 'context' && node.collapsed && (
-          <span style={{ fontSize: '11px', color: 'var(--c-muted)' }}>
-            Active Agent Context
-            {typeof node.data.utilization === 'number' && (
-              <> · {Math.round(Number(node.data.utilization) * 100)}%</>
-            )}
-          </span>
-        )}
         <div class="docked-node-controls">
           <button
             type="button"
@@ -57,9 +157,7 @@ export function DockedNode({ node }: { node: CanvasNodeState }) {
         </div>
       </div>
       {!node.collapsed && (
-        <div class={`docked-node-body${node.type === 'context' ? ' context-body' : ''}`}>
-          {renderDockedContent(node)}
-        </div>
+        <div class="docked-node-body">{renderDockedContent(node)}</div>
       )}
     </div>
   );

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -7,6 +7,7 @@ import { McpAppNode } from '../nodes/McpAppNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
 import { WebpageNode } from '../nodes/WebpageNode';
+import { HtmlNode } from '../nodes/HtmlNode';
 import { PromptNode } from '../nodes/PromptNode';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
@@ -49,6 +50,8 @@ function renderContent(node: CanvasNodeState, expanded: boolean) {
       return <FileNode node={node} expanded={expanded} />;
     case 'image':
       return <ImageNode node={node} expanded={expanded} />;
+    case 'html':
+      return <HtmlNode node={node} expanded={expanded} />;
     default:
       return <div>Unknown node type</div>;
   }
@@ -63,6 +66,8 @@ function getNodeTextContent(node: CanvasNodeState): string {
       return (node.data.fileContent as string) || '';
     case 'webpage':
       return (node.data.content as string) || '';
+    case 'html':
+      return (node.data.html as string) || (node.data.content as string) || '';
     case 'json-render':
     case 'graph':
       return JSON.stringify(node.data.spec ?? node.data.graphConfig ?? {}, null, 2);

package/src/client/canvas/Minimap.tsx

@@ -37,6 +37,7 @@ function getNodeColors(): Record<CanvasNodeState['type'], string> {
     trace: t.purple,
     file: t.accent,
     image: t.ok,
+    html: t.warn,
     group: t.dim,
   };
 }

package/src/client/icons.tsx

@@ -419,6 +419,7 @@ export function getNodeIcon(type: string): (p: IconProps) => JSX.Element {
     case 'ext-app': return IconNodeExtApp;
     case 'json-render': return IconNodeJsonRender;
     case 'graph': return IconNodeGraph;
+    case 'html': return IconNodeWebpage;
     default: return IconNodeMarkdown;
   }
 }

package/src/client/nodes/HtmlNode.tsx

@@ -0,0 +1,151 @@
+import { useMemo } from 'preact/hooks';
+import { getCanvasTokens } from '../theme/tokens';
+import type { CanvasNodeState } from '../types';
+
+/**
+ * Strip characters that could break out of a CSS custom-property value context
+ * before interpolating into a `<style>` block. The expected token shape is a
+ * CSS color (`#abc`, `rgb(...)`) or font-family list, neither of which needs
+ * `<`, `>`, `{`, `}`, `;`, or backticks. Defense-in-depth against a future
+ * scenario where theme tokens become runtime-editable.
+ */
+function sanitizeCssTokenValue(value: string): string {
+  return value.replace(/[<>{};`\\]/g, '').trim();
+}
+
+/**
+ * Build a `<style>` block that exposes canvas theme tokens to the iframe under
+ * both the canonical `--c-*` names and common `--color-*` aliases. Also sets
+ * sensible body defaults (font, bg, color) so authored HTML inherits the look.
+ */
+function buildThemeStyleBlock(): string {
+  const raw = getCanvasTokens();
+  const t = {
+    bg: sanitizeCssTokenValue(raw.bg),
+    panel: sanitizeCssTokenValue(raw.panel),
+    panelSoft: sanitizeCssTokenValue(raw.panelSoft),
+    line: sanitizeCssTokenValue(raw.line),
+    text: sanitizeCssTokenValue(raw.text),
+    textSoft: sanitizeCssTokenValue(raw.textSoft),
+    muted: sanitizeCssTokenValue(raw.muted),
+    dim: sanitizeCssTokenValue(raw.dim),
+    accent: sanitizeCssTokenValue(raw.accent),
+    ok: sanitizeCssTokenValue(raw.ok),
+    warn: sanitizeCssTokenValue(raw.warn),
+    warnAlt: sanitizeCssTokenValue(raw.warnAlt),
+    danger: sanitizeCssTokenValue(raw.danger),
+    purple: sanitizeCssTokenValue(raw.purple),
+    font: sanitizeCssTokenValue(raw.font),
+    mono: sanitizeCssTokenValue(raw.mono),
+  };
+  return `
+    :root {
+      --c-bg: ${t.bg};
+      --c-panel: ${t.panel};
+      --c-panel-soft: ${t.panelSoft};
+      --c-line: ${t.line};
+      --c-text: ${t.text};
+      --c-text-soft: ${t.textSoft};
+      --c-muted: ${t.muted};
+      --c-dim: ${t.dim};
+      --c-accent: ${t.accent};
+      --c-ok: ${t.ok};
+      --c-warn: ${t.warn};
+      --c-warn-alt: ${t.warnAlt};
+      --c-danger: ${t.danger};
+      --c-purple: ${t.purple};
+
+      /* Common aliases authored HTML might use. */
+      --color-bg: ${t.bg};
+      --color-panel: ${t.panel};
+      --color-surface: ${t.panelSoft};
+      --color-border: ${t.line};
+      --color-text: ${t.text};
+      --color-text-primary: ${t.text};
+      --color-text-secondary: ${t.textSoft};
+      --color-text-muted: ${t.muted};
+      --color-text-dim: ${t.dim};
+      --color-accent: ${t.accent};
+      --color-success: ${t.ok};
+      --color-warning: ${t.warn};
+      --color-danger: ${t.danger};
+
+      --font: ${t.font};
+      --font-sans: ${t.font};
+      --font-mono: ${t.mono};
+
+      color-scheme: dark light;
+    }
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: ${t.bg};
+      color: ${t.text};
+      font-family: ${t.font || 'system-ui, sans-serif'};
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    body { padding: 16px; box-sizing: border-box; }
+    a { color: ${t.accent}; }
+  `;
+}
+
+/**
+ * Inject the theme style block into the user-supplied HTML. If the document has
+ * a `<head>`, inject at the top of head; otherwise wrap the content in a full
+ * document. Returns a complete HTML string suitable for `srcdoc`.
+ */
+function buildSrcDoc(userHtml: string): string {
+  const styleBlock = `<style data-pmx-canvas-theme>${buildThemeStyleBlock()}</style>`;
+  const trimmed = userHtml.trim();
+  const isFullDoc = /<html[\s>]/i.test(trimmed);
+  if (isFullDoc) {
+    if (/<head[\s>]/i.test(trimmed)) {
+      return trimmed.replace(/<head([^>]*)>/i, `<head$1>${styleBlock}`);
+    }
+    // Has <html> but no <head> — inject one.
+    return trimmed.replace(/<html([^>]*)>/i, `<html$1><head>${styleBlock}</head>`);
+  }
+  // Fragment — wrap in full document.
+  return `<!doctype html><html><head><meta charset="utf-8">${styleBlock}</head><body>${userHtml}</body></html>`;
+}
+
+export function HtmlNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+  const html = typeof node.data.html === 'string'
+    ? node.data.html
+    : typeof node.data.content === 'string'
+      ? node.data.content
+      : '';
+  const srcDoc = useMemo(() => (html ? buildSrcDoc(html) : ''), [html]);
+
+  if (!html) {
+    return (
+      <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>
+        No HTML content set
+      </div>
+    );
+  }
+
+  // SECURITY: sandbox is intentionally `allow-scripts` ONLY. Do NOT add
+  // `allow-same-origin` (would grant the iframe access to parent localStorage
+  // and credentialed requests to the canvas origin), `allow-top-navigation`
+  // (would let scripts redirect the parent window), or `allow-forms` (would
+  // let the iframe POST back to the host). The whole html-node tier assumes
+  // arbitrary author code runs inside this exact sandbox.
+  return (
+    <iframe
+      title={typeof node.data.title === 'string' ? node.data.title : 'HTML node'}
+      sandbox="allow-scripts"
+      srcdoc={srcDoc}
+      style={{
+        width: '100%',
+        height: '100%',
+        minHeight: expanded ? '70vh' : '300px',
+        border: 'none',
+        background: 'var(--c-bg)',
+        borderRadius: '6px',
+        display: 'block',
+      }}
+    />
+  );
+}

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

@@ -277,6 +277,28 @@ export function toggleCollapsed(id: string): void {
   updateNode(id, { collapsed: !existing.collapsed });
 }
 
+// Collapse every docked context node. Used to enforce mutual exclusion between
+// the Context side panel and the Updates side panel (they share the same
+// right-edge anchor and would otherwise visually collide).
+export function collapseDockedContextNodes(): void {
+  for (const node of nodes.value.values()) {
+    if (node.type === 'context' && node.dockPosition === 'right' && !node.collapsed) {
+      updateNode(node.id, { collapsed: true });
+    }
+  }
+}
+
+// True iff at least one docked context node is currently expanded. Used by the
+// Updates pill to hide itself while the Context panel is open.
+export const hasOpenDockedContextPanel = computed(() => {
+  for (const node of nodes.value.values()) {
+    if (node.type === 'context' && node.dockPosition === 'right' && !node.collapsed) {
+      return true;
+    }
+  }
+  return false;
+});
+
 export function dockNode(id: string, position: 'left' | 'right'): void {
   const existing = nodes.value.get(id);
   if (!existing) return;
@@ -411,7 +433,7 @@ export function cancelViewportAnimation(): void {
 // ── Persistence ───────────────────────────────────────────────
 const STORAGE_KEY = 'pmx-canvas-layout';
 
-export function persistLayout(): void {
+export function persistLayout(options: { recordHistory?: boolean } = {}): void {
   try {
     const allNodes = Array.from(nodes.value.values());
     const nodeUpdates = allNodes.map((n) => ({
@@ -444,7 +466,7 @@ export function persistLayout(): void {
       contextPinnedNodeIds: Array.from(contextPinnedNodeIds.value),
     };
     localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
-    void pushCanvasUpdate(nodeUpdates);
+    void pushCanvasUpdate(nodeUpdates, options);
   } catch (error) {
     logCanvasStoreError('persistLayout', error);
   }

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

@@ -101,7 +101,7 @@ export async function openWorkbenchFile(path: string): Promise<{ ok: boolean }>
 
 /** Fetch canvas state from server. */
 export async function fetchCanvasState(): Promise<Record<string, unknown>> {
-  return requestJson('fetchCanvasState', '/api/canvas/state', {});
+  return requestJson('fetchCanvasState', '/api/canvas/state?includeBlobs=true', {});
 }
 
 /** Fetch available slash commands for prompt completion. */
@@ -148,11 +148,12 @@ export async function pushCanvasUpdate(
     collapsed?: boolean;
     dockPosition?: 'left' | 'right' | null;
   }>,
+  options: { recordHistory?: boolean } = {},
 ): Promise<void> {
   await requestBestEffort('pushCanvasUpdate', '/api/canvas/update', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ updates }),
+    body: JSON.stringify({ updates, ...(options.recordHistory === false ? { recordHistory: false } : {}) }),
   });
 }
 
@@ -286,7 +287,7 @@ export interface CanvasSnapshotInfo {
 }
 
 export async function listSnapshots(): Promise<CanvasSnapshotInfo[]> {
-  return requestJson<CanvasSnapshotInfo[]>('listSnapshots', '/api/canvas/snapshots', []);
+  return requestJson<CanvasSnapshotInfo[]>('listSnapshots', '/api/canvas/snapshots?all=true', []);
 }
 
 export async function saveSnapshot(name: string): Promise<{ ok: boolean; snapshot?: CanvasSnapshotInfo }> {

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

@@ -83,6 +83,7 @@ const DEFAULT_POSITIONS: Record<
   trace: { x: 40, y: 900, w: 200, h: 56 },
   file: { x: 380, y: 80, w: 720, h: 600 },
   image: { x: 380, y: 80, w: 720, h: 520 },
+  html: { x: 380, y: 80, w: 720, h: 640 },
   group: { x: 220, y: 60, w: 840, h: 560 },
   prompt: { x: 380, y: 1260, w: 520, h: 400 },
   response: { x: 380, y: 1480, w: 720, h: 400 },

package/src/client/theme/global.css

@@ -1844,6 +1844,147 @@ body,
   max-width: 200px;
 }
 
+/* Context dock — collapsed pill mirrors Updates pill, sits above it */
+.context-dock-tab {
+  position: fixed;
+  top: 92px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px 8px 14px;
+  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
+  backdrop-filter: blur(16px);
+  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
+  border-right: 0;
+  border-radius: 14px 0 0 14px;
+  box-shadow: 0 12px 36px var(--c-shadow);
+  color: var(--c-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  z-index: 60;
+}
+
+.context-dock-tab:hover {
+  border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-line) 60%);
+  color: var(--c-accent);
+}
+
+.context-dock-tab svg {
+  display: block;
+  color: var(--c-accent);
+  flex-shrink: 0;
+}
+
+.context-dock-tab-label {
+  white-space: nowrap;
+}
+
+.context-dock-tab-badge {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  background: var(--c-accent);
+  color: var(--c-contrast-fg);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+/* Context dock — expanded panel anchored top-right edge.
+   Mutually exclusive with the Updates panel (see DockedNode.tsx and
+   AttentionHistory.tsx) — opening one collapses the other, so they can both
+   share the same right: 18px anchor without overlapping. */
+.context-dock-panel {
+  position: fixed;
+  top: 92px;
+  right: 18px;
+  width: min(360px, calc(100vw - 24px));
+  max-height: calc(100vh - 110px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
+  backdrop-filter: blur(16px);
+  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
+  border-radius: 18px;
+  box-shadow: 0 14px 36px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-accent) 8%, transparent);
+  z-index: 10001;
+  overflow: hidden;
+}
+
+.context-dock-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 2px 4px;
+  flex-shrink: 0;
+}
+
+.context-dock-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.context-dock-title {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text);
+}
+
+.context-dock-subtitle {
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.context-dock-controls {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.context-dock-icon-button {
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--c-dim);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 0;
+}
+
+.context-dock-icon-button:hover {
+  color: var(--c-text);
+  background: var(--c-surface-hover);
+}
+
+.context-dock-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
 .attention-history {
   position: fixed;
   top: 146px;

package/src/client/types.ts

@@ -20,6 +20,7 @@ export interface CanvasNodeState {
     | 'trace'
     | 'file'
     | 'image'
+    | 'html'
     | 'group';
   position: { x: number; y: number };
   size: { width: number; height: number };
@@ -58,6 +59,7 @@ export const TYPE_LABELS: Record<CanvasNodeState['type'], string> = {
   trace: 'TRACE',
   file: 'FILE',
   image: 'IMG',
+  html: 'HTML',
   group: 'GROUP',
 };
 
@@ -72,6 +74,7 @@ export const EXPANDABLE_TYPES = new Set<CanvasNodeState['type']>([
   'ledger',
   'file',
   'image',
+  'html',
 ]);
 
 export const EXCALIDRAW_SERVER_NAME = 'Excalidraw';