pmx-canvas 0.1.0

package/src/client/nodes/ResponseNode.tsx

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { renderMarkdown, submitCanvasPrompt } from '../state/intent-bridge';
+import type { CanvasNodeState } from '../types';
+
+/** Strip dangerous HTML from rendered markdown to prevent XSS. */
+function sanitizeHtml(html: string): string {
+  return html
+    .replace(/<script[\s>][\s\S]*?<\/script>/gi, '')
+    .replace(/<iframe[\s>][\s\S]*?<\/iframe>/gi, '')
+    .replace(/<object[\s>][\s\S]*?<\/object>/gi, '')
+    .replace(/<embed[\s>][\s\S]*?(?:\/>|<\/embed>)/gi, '')
+    .replace(/<link[\s>][\s\S]*?(?:\/>|<\/link>)/gi, '')
+    .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+    .replace(/href\s*=\s*"javascript:[^"]*"/gi, 'href="#"')
+    .replace(/href\s*=\s*'javascript:[^']*'/gi, "href='#'");
+}
+
+function RenderedMarkdown({ html }: { html: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.replaceChildren();
+    if (!html) return;
+
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    container.append(template.content.cloneNode(true));
+  }, [html]);
+
+  return <div ref={containerRef} />;
+}
+
+export function ResponseNode({
+  node,
+  expanded = false,
+}: { node: CanvasNodeState; expanded?: boolean }) {
+  const content = (node.data.content as string) || '';
+  const status = (node.data.status as string) || 'streaming';
+  const [rendered, setRendered] = useState('');
+
+  const isStreaming = status === 'streaming';
+  const isComplete = status === 'complete';
+
+  // Re-render markdown when content changes
+  useEffect(() => {
+    if (!content) {
+      setRendered('');
+      return;
+    }
+    let cancelled = false;
+    renderMarkdown(content).then((html) => {
+      if (!cancelled) setRendered(sanitizeHtml(html));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [content]);
+
+  const handleReply = useCallback(() => {
+    submitCanvasPrompt(
+      '',
+      { x: node.position.x, y: node.position.y + node.size.height + 24 },
+      node.id,
+    );
+  }, [node]);
+
+  return (
+    <div
+      class="response-node-inner"
+      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+    >
+      {/* Streaming indicator */}
+      {isStreaming && (
+        <div
+          class="response-streaming-bar"
+          style={{
+            height: '2px',
+            background: 'linear-gradient(90deg, transparent, var(--c-accent), transparent)',
+            animation: 'response-stream-pulse 1.5s ease-in-out infinite',
+            borderRadius: '1px',
+            marginBottom: '4px',
+            flexShrink: 0,
+          }}
+        />
+      )}
+
+      {/* Rendered markdown content */}
+      <div
+        class={expanded ? 'md-reader' : undefined}
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          minHeight: 0,
+          opacity: content ? 1 : 0.4,
+          transition: 'opacity 0.2s ease',
+        }}
+      >
+        {rendered ? (
+          <div class={expanded ? 'md-reader-content' : undefined}>
+            <RenderedMarkdown html={rendered} />
+          </div>
+        ) : (
+          <div style={{ color: 'var(--c-muted)', fontStyle: 'italic', fontSize: '13px' }}>
+            {isStreaming ? 'Waiting for response…' : 'Empty response'}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingTop: '6px',
+          borderTop: '1px solid var(--c-line)',
+          marginTop: '4px',
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{
+            fontSize: '10px',
+            textTransform: 'uppercase',
+            fontWeight: 600,
+            color: isStreaming ? 'var(--c-accent)' : isComplete ? 'var(--c-ok)' : 'var(--c-muted)',
+          }}
+        >
+          {isStreaming ? 'Streaming…' : isComplete ? 'Complete' : status}
+        </span>
+        {isComplete && (
+          <button
+            type="button"
+            onClick={handleReply}
+            style={{
+              padding: '3px 10px',
+              fontSize: '11px',
+              background: 'rgba(70,182,255,0.1)',
+              border: '1px solid rgba(70,182,255,0.3)',
+              borderRadius: 'var(--radius-sm)',
+              color: 'var(--c-accent)',
+              cursor: 'pointer',
+            }}
+          >
+            Reply
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/nodes/StatusNode.tsx

@@ -0,0 +1,84 @@
+import { PHASE_COLORS } from '../theme/tokens';
+import type { CanvasNodeState } from '../types';
+
+export function StatusNode({ node }: { node: CanvasNodeState }) {
+  const phase = (node.data.phase as string) || 'idle';
+  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 phaseColor = PHASE_COLORS[phase] ?? 'var(--c-muted)';
+  const isActive = phase !== 'idle';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '12px' }}>
+      {/* Phase indicator */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <div
+          style={{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            background: phaseColor,
+            boxShadow: isActive ? `0 0 8px ${phaseColor}` : 'none',
+            animation: isActive ? 'pulse 1.5s infinite' : 'none',
+            flexShrink: 0,
+          }}
+        />
+        <span
+          style={{
+            fontWeight: 600,
+            color: phaseColor,
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+          }}
+        >
+          {phase}
+        </span>
+        {detail && (
+          <span
+            style={{
+              color: 'var(--c-muted)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {detail}
+          </span>
+        )}
+      </div>
+
+      {/* Active tool */}
+      {activeTool && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-warn)' }}>
+          <span style={{ fontSize: '10px' }}>⚙</span>
+          <span style={{ fontFamily: 'var(--mono)', fontSize: '11px' }}>{activeTool}</span>
+        </div>
+      )}
+
+      {/* Sub-agent */}
+      {subagent && subagent.state !== 'completed' && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--c-subagent)' }}>
+          <span style={{ fontSize: '10px' }}>⠉</span>
+          <span>{subagent.name}</span>
+          <span style={{ color: 'var(--c-muted)', fontSize: '10px' }}>({subagent.state})</span>
+        </div>
+      )}
+
+      {/* Status message */}
+      {message && (
+        <div
+          style={{
+            color: level === 'warn' ? 'var(--c-warn)' : level === 'error' ? 'var(--c-danger)' : 'var(--c-muted)',
+            lineHeight: 1.4,
+          }}
+        >
+          {message}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/StatusSummary.tsx

@@ -0,0 +1,38 @@
+import { PHASE_COLORS } from '../theme/tokens';
+import type { CanvasNodeState } from '../types';
+
+export function StatusSummary({ node }: { node: CanvasNodeState }) {
+  const phase = (node.data.phase as string) || 'idle';
+  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)';
+  const isActive = phase !== 'idle';
+
+  return (
+    <span style={{ display: 'flex', alignItems: 'center', gap: '6px', flex: 1, minWidth: 0 }}>
+      <span
+        style={{
+          width: '6px',
+          height: '6px',
+          borderRadius: '50%',
+          background: phaseColor,
+          animation: isActive ? 'pulse 1.5s infinite' : 'none',
+          flexShrink: 0,
+        }}
+      />
+      <span
+        style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}
+      >
+        {phase}
+      </span>
+      {activeTool && (
+        <span style={{ color: 'var(--c-warn)', fontSize: '10px', fontFamily: 'var(--mono)' }}>
+          ⚙ {activeTool}
+        </span>
+      )}
+      {subagent && subagent.state !== 'completed' && (
+        <span style={{ color: 'var(--c-subagent)', fontSize: '10px' }}>⠉ {subagent.name}</span>
+      )}
+    </span>
+  );
+}

package/src/client/nodes/TraceNode.tsx

@@ -0,0 +1,120 @@
+import type { CanvasNodeState } from '../types';
+
+const CATEGORY_COLORS: Record<string, string> = {
+  mcp: 'var(--c-accent)',
+  file: 'var(--c-warn)',
+  subagent: 'var(--c-purple)',
+  other: 'var(--c-muted)',
+};
+
+const STATUS_ICONS: Record<string, string> = {
+  running: '⠋',
+  success: '✓',
+  failed: '✕',
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  running: 'var(--c-accent)',
+  success: 'var(--c-ok)',
+  failed: 'var(--c-danger)',
+};
+
+export function TraceNode({ node }: { node: CanvasNodeState }) {
+  const toolName = (node.data.toolName as string) || 'unknown';
+  const category = (node.data.category as string) || 'other';
+  const status = (node.data.status as string) || 'running';
+  const duration = (node.data.duration as string) || '';
+  const resultSummary = (node.data.resultSummary as string) || '';
+  const error = (node.data.error as string) || '';
+
+  const catColor = CATEGORY_COLORS[category] ?? CATEGORY_COLORS.other;
+  const statusIcon = STATUS_ICONS[status] ?? '◌';
+  const statusColor = STATUS_COLORS[status] ?? 'var(--c-muted)';
+  const isRunning = status === 'running';
+
+  // Truncate summary to ~30 chars
+  const summary = error
+    ? error.slice(0, 30)
+    : resultSummary.length > 30
+      ? `${resultSummary.slice(0, 28)}…`
+      : resultSummary;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '0 12px',
+        height: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Status icon */}
+      <span
+        style={{
+          fontSize: '14px',
+          color: statusColor,
+          flexShrink: 0,
+          animation: isRunning ? 'pulse 1.5s infinite' : 'none',
+        }}
+      >
+        {statusIcon}
+      </span>
+
+      {/* Tool name + summary */}
+      <div
+        style={{
+          flex: 1,
+          minWidth: 0,
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            fontFamily: 'var(--mono)',
+            fontSize: '11px',
+            fontWeight: 600,
+            color: catColor,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {toolName}
+        </div>
+        {summary && (
+          <div
+            style={{
+              fontSize: '10px',
+              color: error ? 'var(--c-danger)' : 'var(--c-muted)',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              lineHeight: 1.3,
+            }}
+          >
+            {summary}
+          </div>
+        )}
+      </div>
+
+      {/* Duration badge */}
+      {duration && (
+        <span
+          style={{
+            fontSize: '9px',
+            padding: '1px 5px',
+            borderRadius: '3px',
+            background: 'rgba(255,255,255,0.06)',
+            color: 'var(--c-muted)',
+            flexShrink: 0,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {duration}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/WebpageNode.tsx

@@ -0,0 +1,288 @@
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { refreshWebpageNodeFromClient } from '../state/intent-bridge';
+import type { CanvasNodeState } from '../types';
+
+function formatHost(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+
+function formatFetchedAt(value: string | undefined): string | null {
+  if (!value) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toLocaleString();
+}
+
+export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+  const url = typeof node.data.url === 'string' ? node.data.url : '';
+  const pageTitle = typeof node.data.pageTitle === 'string' ? node.data.pageTitle : '';
+  const description = typeof node.data.description === 'string' ? node.data.description : '';
+  const excerpt = typeof node.data.excerpt === 'string'
+    ? node.data.excerpt
+    : typeof node.data.content === 'string'
+      ? node.data.content
+      : '';
+  const status = typeof node.data.status === 'string' ? node.data.status : 'idle';
+  const error = typeof node.data.error === 'string' ? node.data.error : '';
+  const fetchedAt = formatFetchedAt(typeof node.data.fetchedAt === 'string' ? node.data.fetchedAt : undefined);
+  const statusCode = typeof node.data.statusCode === 'number' ? node.data.statusCode : null;
+  const imageUrl = typeof node.data.imageUrl === 'string' ? node.data.imageUrl : '';
+  const frameBlocked = node.data.frameBlocked === true;
+  const frameBlockedReason = typeof node.data.frameBlockedReason === 'string' ? node.data.frameBlockedReason : '';
+  const [refreshing, setRefreshing] = useState(false);
+  const [showEmbed, setShowEmbed] = useState(expanded);
+
+  useEffect(() => {
+    if (expanded) {
+      setShowEmbed(true);
+    }
+  }, [expanded]);
+
+  const handleRefresh = useCallback(async () => {
+    if (!url || refreshing) return;
+    setRefreshing(true);
+    try {
+      await refreshWebpageNodeFromClient(node.id);
+    } finally {
+      setRefreshing(false);
+    }
+  }, [node.id, refreshing, url]);
+
+  if (!url) {
+    return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No webpage URL set</div>;
+  }
+
+  const statusTone =
+    status === 'ready'
+      ? 'var(--c-ok)'
+      : status === 'error'
+        ? 'var(--c-danger)'
+        : 'var(--c-warn)';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', height: '100%' }}>
+      <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>
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: 'var(--c-accent)', fontSize: '12px', wordBreak: 'break-all', textDecoration: 'none' }}
+          >
+            {url}
+          </a>
+        </div>
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '6px',
+            padding: '4px 8px',
+            borderRadius: '999px',
+            background: 'rgba(255,255,255,0.04)',
+            color: statusTone,
+            fontSize: '11px',
+            textTransform: 'uppercase',
+            letterSpacing: '0.04em',
+            flexShrink: 0,
+          }}
+        >
+          <span style={{ width: '7px', height: '7px', borderRadius: '999px', background: statusTone }} />
+          {status}
+        </div>
+      </div>
+
+      {(description || imageUrl) && (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: imageUrl && expanded ? '160px 1fr' : '1fr',
+            gap: '12px',
+            alignItems: 'start',
+          }}
+        >
+          {imageUrl && expanded && (
+            <img
+              src={imageUrl}
+              alt={pageTitle || 'Webpage preview image'}
+              style={{
+                width: '160px',
+                height: '96px',
+                objectFit: 'cover',
+                borderRadius: '10px',
+                border: '1px solid var(--c-line)',
+                background: 'var(--c-panel-soft)',
+              }}
+            />
+          )}
+          {description && (
+            <p style={{ margin: 0, color: 'var(--c-text-soft)', lineHeight: 1.5, fontSize: expanded ? '14px' : '12px' }}>
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <button
+          type="button"
+          onClick={handleRefresh}
+          disabled={refreshing}
+          style={{
+            border: '1px solid var(--c-line)',
+            background: 'var(--c-panel-soft)',
+            color: 'var(--c-text)',
+            borderRadius: '8px',
+            padding: '6px 10px',
+            cursor: refreshing ? 'progress' : 'pointer',
+            fontSize: '12px',
+          }}
+        >
+          {refreshing || status === 'fetching' ? 'Refreshing…' : 'Refresh'}
+        </button>
+        {expanded && !frameBlocked && (
+          <button
+            type="button"
+            onClick={() => setShowEmbed((current) => !current)}
+            style={{
+              border: '1px solid var(--c-line)',
+              background: 'var(--c-panel-soft)',
+              color: 'var(--c-text)',
+              borderRadius: '8px',
+              padding: '6px 10px',
+              cursor: 'pointer',
+              fontSize: '12px',
+            }}
+          >
+            {showEmbed ? 'Hide live preview' : 'Show live preview'}
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={() => window.open(url, '_blank', 'noopener')}
+          style={{
+            border: '1px solid var(--c-line)',
+            background: 'transparent',
+            color: 'var(--c-accent)',
+            borderRadius: '8px',
+            padding: '6px 10px',
+            cursor: 'pointer',
+            fontSize: '12px',
+          }}
+        >
+          Open in browser
+        </button>
+      </div>
+
+      {expanded && frameBlocked && (
+        <div
+          style={{
+            border: '1px solid var(--c-line)',
+            borderRadius: '12px',
+            overflow: 'hidden',
+            background: 'var(--c-panel-soft)',
+          }}
+        >
+          <div
+            style={{
+              padding: '8px 12px',
+              fontSize: '11px',
+              color: 'var(--c-muted)',
+              borderBottom: '1px solid var(--c-line)',
+              background: 'rgba(255,255,255,0.03)',
+            }}
+          >
+            Live preview unavailable. This site refuses embedding, so PMX Canvas cannot show it inline.
+          </div>
+          <div
+            style={{
+              padding: '20px',
+              color: 'var(--c-text-soft)',
+              lineHeight: 1.6,
+              fontSize: '13px',
+            }}
+          >
+            {frameBlockedReason || 'The remote site blocks iframe embedding.'}
+          </div>
+        </div>
+      )}
+
+      {expanded && showEmbed && !frameBlocked && (
+        <div
+          style={{
+            border: '1px solid var(--c-line)',
+            borderRadius: '12px',
+            overflow: 'hidden',
+            background: 'var(--c-panel-soft)',
+          }}
+        >
+          <div
+            style={{
+              padding: '8px 12px',
+              fontSize: '11px',
+              color: 'var(--c-muted)',
+              borderBottom: '1px solid var(--c-line)',
+              background: 'rgba(255,255,255,0.03)',
+            }}
+          >
+            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"
+            title={pageTitle || (node.data.title as string) || url}
+            src={url}
+            loading="lazy"
+            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>
+      )}
+
+      {(fetchedAt || statusCode !== null) && (
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', color: 'var(--c-muted)', fontSize: '11px' }}>
+          {fetchedAt && <span>Fetched {fetchedAt}</span>}
+          {statusCode !== null && <span>HTTP {statusCode}</span>}
+          {frameBlocked && <span>Preview blocked by site</span>}
+        </div>
+      )}
+
+      {error && <div style={{ color: 'var(--c-danger)', fontSize: '12px', lineHeight: 1.5 }}>{error}</div>}
+
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          overflow: 'auto',
+          border: '1px solid var(--c-line)',
+          borderRadius: '10px',
+          background: 'var(--c-panel-soft)',
+          padding: expanded ? '14px' : '10px',
+        }}
+      >
+        {excerpt ? (
+          <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.55, color: 'var(--c-text)', fontSize: expanded ? '14px' : '12px' }}>
+            {excerpt}
+          </div>
+        ) : (
+          <div style={{ color: 'var(--c-dim)', fontStyle: 'italic' }}>
+            {status === 'error' ? 'No cached page text available.' : 'Waiting for page text...'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}