@polderlabs/bizar 10.1.0 → 10.2.0

package/bizar-dash/src/server/artifacts-store.mjs

@@ -27,10 +27,22 @@ import {
 import { join, dirname } from 'node:path';
 import { homedir } from 'node:os';
 import { randomBytes } from 'node:crypto';
+import {
+  compileClaudeArtifact,
+  detectKind as detectArtifactKind,
+} from './claude-artifacts.mjs';
 
 const HOME = homedir();
 const GLOBAL_PLANS_DIR = join(HOME, '.config', 'cline', 'artifacts');
 
+const VALID_KINDS = new Set(['mdx', 'claude-html', 'claude-svg', 'claude-react']);
+const ARTIFACT_FILE_BY_KIND = {
+  mdx: 'artifact.mdx',
+  'claude-html': 'artifact.html',
+  'claude-svg': 'artifact.svg',
+  'claude-react': 'artifact.jsx',
+};
+
 // Atomic JSON write: serialize to a sibling temp file, then rename into
 // place. `rename` is atomic on POSIX (same filesystem), so a crash
 // between write and rename never leaves a half-written / corrupt file.
@@ -77,7 +89,7 @@ function emptyCanvas(title = 'Untitled plan') {
   };
 }
 
-function defaultMeta(slug, title) {
+function defaultMeta(slug, title, kind = 'mdx') {
   const now = new Date().toISOString();
   return {
     slug,
@@ -86,11 +98,31 @@ function defaultMeta(slug, title) {
     tags: [],
     description: '',
     author: process.env.USER || 'drb0rk',
+    kind: VALID_KINDS.has(kind) ? kind : 'mdx',
     created: now,
     lastEdited: now,
   };
 }
 
+function readArtifactBody(dir, kind) {
+  // The artifact body file depends on its kind. We always prefer the
+  // kind-specific file (artifact.html / artifact.svg / artifact.jsx / artifact.mdx)
+  // but accept legacy `plan.mdx` for the mdx case so old plans still load.
+  const primary = join(dir, ARTIFACT_FILE_BY_KIND[kind] || 'artifact.mdx');
+  if (existsSync(primary)) return { source: safeReadText(primary), file: primary };
+  if (kind === 'mdx') {
+    const legacy = join(dir, 'plan.mdx');
+    if (existsSync(legacy)) return { source: safeReadText(legacy), file: legacy };
+  }
+  return { source: '', file: primary };
+}
+
+function writeArtifactBody(dir, kind, source) {
+  const file = join(dir, ARTIFACT_FILE_BY_KIND[kind] || 'artifact.mdx');
+  writeFileSync(file, String(source || ''), 'utf8');
+  return file;
+}
+
 export const artifactsStore = {
   GLOBAL_PLANS_DIR,
 
@@ -151,6 +183,7 @@ export const artifactsStore = {
           tags: meta?.tags || [],
           description: meta?.description || '',
           author: meta?.author || null,
+          kind: meta?.kind || 'mdx',
           source: dir === GLOBAL_PLANS_DIR ? 'global' : 'worktree',
           elementCount,
           commentCount,
@@ -172,22 +205,59 @@ export const artifactsStore = {
     if (!dir) return null;
     const meta = safeReadJSON(join(dir, 'meta.json'), null);
     const canvas = safeReadJSON(join(dir, 'plan.json'), null);
-    // v3.20.15 — read `artifact.mdx` (the CLI's source-of-truth name from
-    // cli/artifact.mjs:writePlanFile), with `plan.mdx` as a fallback for
-    // legacy v0 plans that still exist on disk. Without this fallback,
-    // every artifact opened in the dashboard showed empty content even
-    // though `artifact.mdx` was present and correct.
-    const planMdx = safeReadText(join(dir, 'artifact.mdx'))
-      || safeReadText(join(dir, 'plan.mdx'));
+    const kind = meta?.kind || 'mdx';
+    // Read the body file for the resolved kind. For mdx we still honour
+    // the legacy `plan.mdx` fallback (v3.20.15 contract).
+    const { source, file } = readArtifactBody(dir, kind);
     return {
       slug,
       dir,
-      meta: meta || defaultMeta(slug, slug),
+      meta: meta || defaultMeta(slug, slug, kind),
       canvas: canvas || emptyCanvas(meta?.title || slug),
-      planMdx,
+      kind,
+      source,
+      bodyFile: file,
+      // `planMdx` retained for legacy callers; for non-mdx kinds it is the
+      // empty string so existing code paths degrade gracefully.
+      planMdx: kind === 'mdx' ? source : '',
     };
   },
 
+  /**
+   * v10.1.0 — Compile a stored Claude-*-kind artifact into a render-ready
+   * HTML envelope. Returns `{ html, warnings, safeMode, kind, compiledAt }`
+   * suitable for an iframe `srcdoc`. Falls back to returning the raw
+   * `<pre>`-wrapped mdx body when the artifact is still `kind: 'mdx'`
+   * (legacy glyphs). Returns null if the slug does not exist.
+   */
+  compile(slug, projectRoot) {
+    const plan = this.get(slug, projectRoot);
+    if (!plan) return null;
+    const kind = plan.kind || 'mdx';
+    if (kind === 'mdx') {
+      // Legacy MDX glyphs: render as a `<pre>`-wrapped plain text panel so
+      // the dashboard's previewer can keep working without the old block
+      // pipeline.
+      const escaped = String(plan.source || plan.planMdx || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+      const html = [
+        '<!doctype html><html><body style="font-family:ui-monospace,monospace;padding:16px;background:#0b0e14;color:#dde2e8;white-space:pre-wrap;">',
+        escaped,
+        '</body></html>',
+      ].join('');
+      return {
+        kind: 'mdx',
+        html,
+        warnings: [],
+        safeMode: true,
+        compiledAt: new Date().toISOString(),
+      };
+    }
+    return compileClaudeArtifact(plan.source || '', { kind });
+  },
+
   /** Create a new plan. Returns the full plan record. */
   create(slug, body, projectRoot) {
     if (!VALID_SLUG.test(slug || '')) {
@@ -202,19 +272,35 @@ export const artifactsStore = {
       throw err;
     }
     const title = (body && body.title) || slug;
+    const kindRaw = (body && body.kind) || 'mdx';
+    const kind = VALID_KINDS.has(kindRaw) ? kindRaw : 'mdx';
+    const source = (body && typeof body.source === 'string') ? body.source
+      : (kind === 'mdx' && body && typeof body.planMdx === 'string' ? body.planMdx : '');
     const meta = {
-      ...defaultMeta(slug, title),
+      ...defaultMeta(slug, title, kind),
       ...(body || {}),
       slug,
+      kind,
       created: new Date().toISOString(),
       lastEdited: new Date().toISOString(),
     };
     const canvas = emptyCanvas(title);
     this._writePlan(dir, meta, canvas);
-    return { slug, dir, meta, canvas, planMdx: '' };
+    // Persist the artifact body in its kind-specific file so the next
+    // `get()` round-trips it without losing bytes.
+    if (source) writeArtifactBody(dir, kind, source);
+    return {
+      slug,
+      dir,
+      meta,
+      canvas,
+      kind,
+      source,
+      planMdx: kind === 'mdx' ? source : '',
+    };
   },
 
-  /** Update plan metadata (title, status, tags, description). */
+  /** Update plan metadata + (optionally) the artifact body. */
   updateMeta(slug, body, projectRoot) {
     if (!VALID_SLUG.test(slug || '')) return null;
     const dir = this.resolveDir(slug, projectRoot);
@@ -228,10 +314,30 @@ export const artifactsStore = {
       if (valid.includes(body.status)) meta.status = body.status;
     }
     if (typeof body?.author === 'string') meta.author = body.author;
+    if (typeof body?.kind === 'string' && VALID_KINDS.has(body.kind)) meta.kind = body.kind;
     meta.lastEdited = new Date().toISOString();
     const canvas = safeReadJSON(join(dir, 'plan.json'), emptyCanvas(meta.title));
     this._writePlan(dir, meta, canvas);
-    return { slug, dir, meta, canvas, planMdx: safeReadText(join(dir, 'plan.mdx')) };
+    // Source/body update is the central new contract for v10.1.0: the
+    // editor can PATCH the kind and the source in one call and we keep
+    // both in lock-step.
+    let source = '';
+    if (typeof body?.source === 'string') {
+      const next = meta.kind || 'mdx';
+      source = body.source;
+      writeArtifactBody(dir, next, source);
+    } else {
+      source = safeReadText(join(dir, ARTIFACT_FILE_BY_KIND[meta.kind || 'mdx'] || 'artifact.mdx'));
+    }
+    return {
+      slug,
+      dir,
+      meta,
+      canvas,
+      kind: meta.kind || 'mdx',
+      source,
+      planMdx: (meta.kind || 'mdx') === 'mdx' ? source : '',
+    };
   },
 
   /** Delete a plan directory. */

package/bizar-dash/src/server/claude-artifacts.mjs

@@ -0,0 +1,281 @@
+/**
+ * src/server/claude-artifacts.mjs
+ *
+ * v10.1.0 — Claude Artifacts compile + sandbox wrapper.
+ *
+ * Replaces the v3–v9 MDX "glyphs" renderer with the Claude.ai-style
+ * interactive artifact surface. Three supported kinds:
+ *
+ *   claude-html  — static HTML + inline CSS/JS (sandboxed iframe)
+ *   claude-svg   — standalone <svg> document
+ *   claude-react — JSX/TSX source bundled to a UMD module that the
+ *                  iframe loads; the wrapper injects React + ReactDOM
+ *                  from a CDN pinned to v18.x
+ *
+ * The compile output is a self-contained `html` string ready to drop
+ * into an iframe `srcdoc`. Validation is conservative: it scans for
+ * dangerous patterns (script src to non-allowlisted hosts, event
+ * handlers that leak `top`/`parent`, etc.) and refuses to compile
+ * anything that looks like an exfiltration attempt.
+ *
+ * This module does NOT execute user code on the server. The iframe
+ * is the only execution surface. The server only:
+ *   1. Parses the source to confirm it is well-formed.
+ *   2. Wraps it in a sandbox-friendly HTML envelope.
+ *   3. Sanitises obvious exfiltration patterns.
+ */
+
+// ─── Allowlist ───────────────────────────────────────────────────────────────
+
+// Hosts we are willing to load scripts/styles from inside the artifact.
+// Pinned to reduce surprise breakage.
+const ALLOWED_SCRIPT_HOSTS = new Set([
+  'unpkg.com',
+  'cdn.jsdelivr.net',
+  'cdnjs.cloudflare.com',
+  'esm.sh',
+  'cdn.tailwindcss.com',
+]);
+
+const ALLOWED_STYLE_HOSTS = new Set([
+  'unpkg.com',
+  'cdn.jsdelivr.net',
+  'cdnjs.cloudflare.com',
+  'fonts.googleapis.com',
+  'fonts.gstatic.com',
+]);
+
+// DANGEROUS: these patterns inside a Claude artifact mean exfiltration or
+// privilege escalation. They get flagged in `errors[]` and the artifact
+// is rendered in `safe-mode` (scripts stripped, event handlers removed).
+const EXFIL_PATTERNS = [
+  // top.* / parent.* access — breaks out of the sandbox
+  /\b(top|parent)\s*\.\s*[a-zA-Z_]/i,
+  // window.opener hijack
+  /\bwindow\s*\.\s*opener\b/i,
+  // fetch / XHR with literal URL → host we don't trust
+  /\bfetch\s*\(\s*['"`]https?:\/\/(?!(?:localhost|127\.0\.0\.1|unpkg\.com|cdn\.jsdelivr\.net|cdnjs\.cloudflare\.com|esm\.sh))/i,
+  // document.cookie access
+  /\bdocument\s*\.\s*cookie\b/i,
+  // localStorage / sessionStorage exfil
+  /\b(localStorage|sessionStorage)\s*\.\s*(setItem|getItem)\b/i,
+  // <script src="http://evil"> — bare remote script tag
+  /<script[^>]+src\s*=\s*["']https?:\/\/(?!(?:localhost|127\.0\.0\.1|unpkg\.com|cdn\.jsdelivr\.net|cdnjs\.cloudflare\.com|esm\.sh))/i,
+  // inline event handler that runs JS (onclick=, onerror=, ...)
+  /\son\w+\s*=\s*["'][^"']*\beval\s*\(/i,
+  // javascript: URLs
+  /\bhref\s*=\s*["']javascript:/i,
+  // imports from a path the bundler doesn't know
+  /\bimport\s+.*from\s+["'](?!react|react-dom|react-dom\/client)/i,
+];
+
+// ─── Validation ──────────────────────────────────────────────────────────────
+
+/**
+ * Scan a Claude artifact source for exfiltration / escape patterns.
+ * Returns the list of tripped patterns (empty = clean).
+ *
+ * @param {string} src
+ * @returns {Array<{ pattern: string, message: string }>}
+ */
+export function scanForExfil(src) {
+  const hits = [];
+  for (const re of EXFIL_PATTERNS) {
+    const m = re.exec(src);
+    if (m) {
+      hits.push({
+        pattern: re.source.slice(0, 80),
+        message: `potential exfiltration / sandbox escape: ${m[0].slice(0, 80)}`,
+      });
+    }
+  }
+  return hits;
+}
+
+/**
+ * Detect the artifact kind from the source content. Falls back to
+ * 'claude-html' when the user did not supply one.
+ *
+ * Heuristics:
+ *   - bare `<svg ...>` at the root → claude-svg
+ *   - contains `import React` or `export default` → claude-react
+ *   - everything else → claude-html
+ *
+ * @param {string} src
+ * @param {string} [declared]
+ * @returns {'claude-html' | 'claude-svg' | 'claude-react'}
+ */
+export function detectKind(src, declared) {
+  if (declared === 'claude-html' || declared === 'claude-svg' || declared === 'claude-react') {
+    return declared;
+  }
+  const trimmed = (src || '').trim();
+  if (/^<svg[\s>]/i.test(trimmed)) return 'claude-svg';
+  if (/\bimport\s+React\b|\bexport\s+default\b/.test(trimmed)) return 'claude-react';
+  return 'claude-html';
+}
+
+// ─── Sandboxed envelope ──────────────────────────────────────────────────────
+
+/**
+ * Build the iframe-ready HTML envelope. The user source is injected
+ * inside the `<body>` so the iframe owns all rendering.
+ *
+ * The sandbox attribute restricts the iframe to:
+ *   - same-origin scripts (so React can hydrate)
+ *   - no top navigation
+ *   - no popups
+ *   - no form submission
+ *   - no same-origin storage (cookie/storage stays in the iframe only)
+ *
+ * @param {string} body  — the user-authored artifact body
+ * @param {object} [opts]
+ * @param {'claude-html'|'claude-svg'|'claude-react'} [opts.kind]
+ * @param {boolean} [opts.safeMode] — when true, scripts are stripped
+ * @returns {string}  full HTML document string for iframe srcdoc
+ */
+export function buildEnvelope(body, { kind = 'claude-html', safeMode = false } = {}) {
+  const safeBody = safeMode ? stripScripts(body) : body;
+  const head = buildHead(kind, safeMode);
+  return [
+    '<!doctype html>',
+    '<html lang="en">',
+    '<head>',
+    '<meta charset="utf-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1">',
+    head,
+    '</head>',
+    '<body>',
+    safeBody,
+    '</body>',
+    '</html>',
+  ].join('\n');
+}
+
+function buildHead(kind, safeMode) {
+  const scriptBlock = safeMode
+    ? ''
+    : kind === 'claude-react'
+      ? [
+          '<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>',
+          '<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>',
+          '<script src="https://unpkg.com/@babel/standalone@7.24.7/babel.min.js"></script>',
+        ].join('\n')
+      : '';
+  const style = [
+    'html,body{margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif;color:#111;background:#fff;}',
+    'a{color:#0b66c3;}',
+    'img,svg{max-width:100%;height:auto;}',
+  ].join('');
+  return [
+    `<style>${style}</style>`,
+    scriptBlock,
+  ].filter(Boolean).join('\n');
+}
+
+/**
+ * Strip `<script>...</script>` blocks and inline event handlers from
+ * an HTML source. Used when the artifact fails the exfil scan.
+ *
+ * @param {string} html
+ * @returns {string}
+ */
+export function stripScripts(html) {
+  return String(html || '')
+    .replace(/<script\b[\s\S]*?<\/script>/gi, '')
+    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]*)/gi, '');
+}
+
+// ─── Public compile API ──────────────────────────────────────────────────────
+
+/**
+ * Compile a Claude artifact source into a render-ready envelope.
+ * Returns the envelope + a list of warnings (the caller decides
+ * whether to render in safe-mode vs full).
+ *
+ * @param {string} source  raw artifact source
+ * @param {object} [opts]
+ * @param {'claude-html'|'claude-svg'|'claude-react'} [opts.kind]
+ * @returns {{
+ *   kind: 'claude-html'|'claude-svg'|'claude-react',
+ *   html: string,
+ *   warnings: Array<{ message: string }>,
+ *   compiledAt: string,
+ * }}
+ */
+export function compileClaudeArtifact(source, opts = {}) {
+  const src = String(source || '');
+  const kind = detectKind(src, opts.kind);
+  const warnings = scanForExfil(src);
+  const safeMode = warnings.length > 0;
+  const html = buildEnvelope(src, { kind, safeMode });
+  return {
+    kind,
+    html,
+    warnings,
+    safeMode,
+    compiledAt: new Date().toISOString(),
+  };
+}
+
+// ─── Legacy MDX migration helper ─────────────────────────────────────────────
+
+/**
+ * Convert an existing `plan.mdx` / `artifact.mdx` block-list output into
+ * a Claude-React artifact. Used by the migration when an operator
+ * runs `bizar artifacts migrate-glyphs`. Best-effort — if the MDX has
+ * unsupported block types, returns an empty artifact + a warning list.
+ *
+ * @param {{ blocks: Array, frontmatter: Record<string, unknown> }} compiled
+ * @returns {{ source: string, warnings: string[] }}
+ */
+export function mdxBlocksToReact(compiled) {
+  const warnings = [];
+  const lines = [];
+  lines.push('// Auto-generated from legacy MDX. Edit freely.');
+  lines.push('const { useState } = React;');
+  lines.push('');
+  const blocks = Array.isArray(compiled?.blocks) ? compiled.blocks : [];
+  for (const block of blocks) {
+    if (block.type === 'RichText') {
+      const md = String(block.childrenMarkdown || '').replace(/`/g, '\\`').replace(/\$/g, '\\$');
+      lines.push(`function Block_${block.id}() {`);
+      lines.push('  return <pre style={{ whiteSpace: "pre-wrap", fontFamily: "inherit" }}>{`' + md + '`}</pre>;');
+      lines.push('}');
+    } else if (block.type === 'Callout') {
+      const tone = String(block.data?.tone || 'info');
+      lines.push(`function Block_${block.id}() {`);
+      lines.push(`  return <div style={{ padding: 12, borderRadius: 8, background: "var(--callout-${tone}-bg, #eef)" }}>${escapeText(block.childrenMarkdown || '')}</div>;`);
+      lines.push('}');
+    } else if (block.type === 'Stat') {
+      const label = String(block.data?.label || '');
+      const value = String(block.data?.value || '');
+      lines.push(`function Block_${block.id}() {`);
+      lines.push(`  return <div style={{ display: "inline-block", padding: 16 }}><div style={{ fontSize: 12, opacity: 0.7 }}>${escapeText(label)}</div><div style={{ fontSize: 28, fontWeight: 600 }}>${escapeText(value)}</div></div>;`);
+      lines.push('}');
+    } else {
+      warnings.push(`unsupported block type "${block.type}" (id=${block.id}) — skipped in migration`);
+    }
+    lines.push('');
+  }
+  lines.push('export default function App() {');
+  lines.push('  return (');
+  lines.push('    <div style={{ padding: 16 }}>');
+  for (const block of blocks) {
+    if (['RichText', 'Callout', 'Stat'].includes(block.type)) {
+      lines.push(`      <Block_${block.id} />`);
+    }
+  }
+  lines.push('    </div>');
+  lines.push('  );');
+  lines.push('}');
+  return { source: lines.join('\n'), warnings };
+}
+
+function escapeText(s) {
+  return String(s || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}