pmx-canvas 0.1.14 → 0.1.16

package/src/client/canvas/CanvasViewport.tsx

@@ -8,6 +8,7 @@ import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
 import { GroupNode } from '../nodes/GroupNode';
 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';
@@ -60,6 +61,8 @@ function renderNodeContent(node: CanvasNodeState) {
       return <FileNode node={node} />;
     case 'image':
       return <ImageNode node={node} />;
+    case 'html':
+      return <HtmlNode node={node} />;
     case 'group':
       return <GroupNode node={node} />;
     default:

package/src/client/canvas/ContextPinBar.tsx

@@ -2,10 +2,11 @@ import {
   clearContextPins,
   contextPinnedNodeIds,
 } from '../state/canvas-store';
+import { attentionHistoryOpen } from '../state/attention-store';
 
 export function ContextPinBar() {
   const count = contextPinnedNodeIds.value.size;
-  if (count === 0) return null;
+  if (count === 0 || attentionHistoryOpen.value) return null;
 
   return (
     <div class="context-pin-bar">

package/src/client/canvas/DockedNode.tsx

@@ -2,7 +2,8 @@ import { ContextNode } from '../nodes/ContextNode';
 import { LedgerNode } from '../nodes/LedgerNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { StatusSummary } from '../nodes/StatusSummary';
-import { toggleCollapsed, undockNode } from '../state/canvas-store';
+import { attentionHistoryOpen, closeAttentionHistory } from '../state/attention-store';
+import { getContextPinnedNodes, toggleCollapsed, undockNode } from '../state/canvas-store';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 
@@ -19,20 +20,120 @@ 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 pinnedNodes = getContextPinnedNodes();
+  const count = pinnedNodes.length > 0 ? pinnedNodes.length : 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} pinnedNodes={pinnedNodes} />
+      </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 +158,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/ContextNode.tsx

@@ -1,5 +1,5 @@
 import { openWorkbenchFile } from '../state/intent-bridge';
-import type { CanvasNodeState } from '../types';
+import { TYPE_LABELS, type CanvasNodeState } from '../types';
 
 interface ContextCard {
   key?: string;
@@ -30,6 +30,14 @@ export interface ContextNodeFallbackDisplay {
   path: string;
 }
 
+export interface PinnedContextDisplay {
+  id: string;
+  title: string;
+  summary: string;
+  kind: string;
+  path: string;
+}
+
 export function normalizeContextCardDisplay(card: ContextCard): ContextCardDisplay {
   const title = card.title || card.label || card.key || 'Context';
   const summary = card.summary?.trim() || 'Available in startup context.';
@@ -90,6 +98,24 @@ export function normalizeContextNodeFallback(
   };
 }
 
+export function normalizePinnedContextDisplay(node: CanvasNodeState): PinnedContextDisplay {
+  const title = asTrimmedString(node.data.title) || node.id;
+  const summary =
+    asTrimmedString(node.data.content) ||
+    asTrimmedString(node.data.excerpt) ||
+    asTrimmedString(node.data.description) ||
+    asTrimmedString(node.data.pageTitle) ||
+    '';
+  const path = asTrimmedString(node.data.path) || asTrimmedString(node.data.url);
+  return {
+    id: node.id,
+    title,
+    summary,
+    kind: TYPE_LABELS[node.type] ?? node.type,
+    path,
+  };
+}
+
 function formatTokens(n: number | null): string {
   if (n === null || !Number.isFinite(n) || n < 0) return '0';
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}m`;
@@ -107,9 +133,12 @@ function usageBarColor(utilization: number): string {
 export function ContextNode({
   node,
   expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+  pinnedNodes = [],
+}: { node: CanvasNodeState; expanded?: boolean; pinnedNodes?: CanvasNodeState[] }) {
   const cards = (node.data.cards as ContextCard[]) ?? [];
   const auxTabs = (node.data.auxTabs as Array<{ id: string; url: string; reason?: string }>) ?? [];
+  const pinnedContext = pinnedNodes.map(normalizePinnedContextDisplay);
+  const hasPinnedContext = pinnedContext.length > 0;
   const currentTokens =
     typeof node.data.currentTokens === 'number' ? node.data.currentTokens : null;
   const tokenLimit = typeof node.data.tokenLimit === 'number' ? node.data.tokenLimit : null;
@@ -120,7 +149,9 @@ export function ContextNode({
     utilization !== null ? Math.max(0, Math.min(100, Math.round(utilization * 100))) : null;
   const barColor = usageBarColor(utilization ?? 0);
   const fallback =
-    cards.length === 0 && auxTabs.length === 0 ? normalizeContextNodeFallback(node.data) : null;
+    !hasPinnedContext && cards.length === 0 && auxTabs.length === 0
+      ? normalizeContextNodeFallback(node.data)
+      : null;
 
   const openCard = async (card: ContextCard): Promise<void> => {
     const path = typeof card.path === 'string' ? card.path.trim() : '';
@@ -181,7 +212,98 @@ export function ContextNode({
         </div>
       )}
 
-      {cards.length > 0 && (
+      {hasPinnedContext && (
+        <div>
+          <div
+            style={{
+              fontSize: '10px',
+              fontWeight: 600,
+              color: 'var(--c-muted)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.04em',
+              marginBottom: '6px',
+            }}
+          >
+            Pinned Context ({pinnedContext.length})
+          </div>
+          {pinnedContext.map((display) => (
+            <div
+              key={display.id}
+              style={{
+                padding: '6px 8px',
+                background: 'var(--c-surface-subtle)',
+                borderRadius: '6px',
+                marginBottom: '4px',
+                borderLeft: '2px solid var(--c-accent)',
+              }}
+            >
+              <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '2px' }}>
+                {display.title}
+              </div>
+              {display.summary && (
+                <div
+                  style={{
+                    color: 'var(--c-muted)',
+                    fontSize: '10px',
+                    lineHeight: 1.45,
+                    marginBottom: '4px',
+                    whiteSpace: 'pre-wrap',
+                  }}
+                >
+                  {display.summary}
+                </div>
+              )}
+              <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap', marginTop: '4px' }}>
+                <span
+                  style={{
+                    fontSize: '9px',
+                    padding: '1px 4px',
+                    background: 'var(--c-surface-hover)',
+                    color: 'var(--c-text-soft)',
+                    borderRadius: '3px',
+                    display: 'inline-block',
+                  }}
+                >
+                  {display.kind}
+                </span>
+              </div>
+              {display.path && (
+                <div style={{ marginTop: '6px' }}>
+                  <div
+                    style={{
+                      color: 'var(--c-dim)',
+                      fontSize: '10px',
+                      wordBreak: 'break-all',
+                      marginBottom: '6px',
+                    }}
+                  >
+                    {display.path}
+                  </div>
+                  {display.path.startsWith('/') && (
+                    <button
+                      type="button"
+                      onClick={() => void openWorkbenchFile(display.path)}
+                      style={{
+                        padding: '4px 8px',
+                        fontSize: '10px',
+                        background: 'var(--c-accent-12)',
+                        border: '1px solid var(--c-accent-25)',
+                        borderRadius: '4px',
+                        color: 'var(--c-text-soft)',
+                        cursor: 'pointer',
+                      }}
+                    >
+                      Open in canvas
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!hasPinnedContext && cards.length > 0 && (
         <div>
           <div
             style={{
@@ -305,7 +427,7 @@ export function ContextNode({
         </div>
       )}
 
-      {auxTabs.length > 0 && (
+      {!hasPinnedContext && auxTabs.length > 0 && (
         <div>
           <div
             style={{
@@ -404,7 +526,7 @@ export function ContextNode({
         </div>
       )}
 
-      {!fallback && cards.length === 0 && auxTabs.length === 0 && (
+      {!hasPinnedContext && !fallback && cards.length === 0 && auxTabs.length === 0 && (
         <div style={{ color: 'var(--c-dim)', fontStyle: 'italic' }}>No context loaded</div>
       )}
     </div>

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/nodes/StatusNode.tsx

@@ -1,8 +1,23 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
 
+export function getStatusDisplayPhase(node: CanvasNodeState): string {
+  const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0
+    ? node.data.phase.trim()
+    : '';
+  if (phase) return phase;
+  const content = typeof node.data.content === 'string' && node.data.content.trim().length > 0
+    ? node.data.content.trim()
+    : '';
+  if (content) return content;
+  const status = typeof node.data.status === 'string' && node.data.status.trim().length > 0
+    ? node.data.status.trim()
+    : '';
+  return status || 'idle';
+}
+
 export function StatusNode({ node }: { node: CanvasNodeState }) {
-  const phase = (node.data.phase as string) || 'idle';
+  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';

package/src/client/nodes/StatusSummary.tsx

@@ -1,8 +1,9 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
+import { getStatusDisplayPhase } from './StatusNode';
 
 export function StatusSummary({ node }: { node: CanvasNodeState }) {
-  const phase = (node.data.phase as string) || 'idle';
+  const phase = getStatusDisplayPhase(node);
   const activeTool = node.data.activeTool as string | null;
   const subagent = node.data.subagent as { state: string; name: string } | undefined;
   const phaseColor = PHASE_COLORS[phase] ?? 'var(--c-muted)';