@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/views/Artifacts.tsx

@@ -1,1494 +0,0 @@
-// src/views/Artifacts.tsx — v3.1.0 artifact editor with fullscreen canvas + floating controls.
-import React from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { GlyphRenderer } from './glyphs/GlyphRenderer';
-import {
-  ArrowLeft,
-  Map as MapIcon,
-  Plus,
-  RefreshCw,
-  Settings as SettingsIcon,
-  MessageCircle,
-  MessageSquare,
-  Maximize2,
-  Minimize2,
-  X,
-  Trash2,
-  Pencil,
-  Link2,
-  Send,
-  Check,
-  Circle,
-  StopCircle,
-  AlertCircle,
-  HelpCircle,
-  CheckSquare,
-  StickyNote,
-  ChevronRight,
-  Search,
-  Activity,
-  Filter,
-  Archive,
-  ArchiveRestore,
-  Copy,
-  ArrowUp,
-  ArrowDown,
-  Layers,
-} from 'lucide-react';
-import { Button } from '../components/Button';
-import { Card, CardTitle, CardMeta } from '../components/Card';
-import { EmptyState } from '../components/EmptyState';
-import { Spinner } from '../components/Spinner';
-import { StatusBadge } from '../components/StatusBadge';
-import { useToast } from '../components/Toast';
-import { useModal } from '../components/Modal';
-import { CanvasContextMenu, type ContextMenuState } from '../components/CanvasContextMenu';
-import { api } from '../lib/api';
-import { cn, formatRelative, truncate } from '../lib/utils';
-import { logger } from '../lib/logger';
-import type {
-  Canvas,
-  CanvasComment,
-  CanvasConnection,
-  CanvasElement,
-  Artifact,
-  Settings,
-  Snapshot,
-} from '../lib/types';
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-const ELEMENT_TYPES = [
-  { id: 'task', label: 'Task', color: 'var(--info)', Icon: CheckSquare },
-  { id: 'note', label: 'Note', color: 'var(--text-dim)', Icon: StickyNote },
-  { id: 'decision', label: 'Decision', color: 'var(--accent)', Icon: Check },
-  { id: 'question', label: 'Question', color: 'var(--warning)', Icon: HelpCircle },
-];
-
-const PLAN_STATUSES = ['draft', 'approved', 'in-progress', 'done', 'rejected', 'archived'];
-
-function planStatusKind(status: string): 'success' | 'info' | 'error' | 'accent' | 'neutral' | 'warning' {
-  switch (status) {
-    case 'approved':
-    case 'done':
-      return 'success';
-    case 'in-progress':
-    case 'doing':
-      return 'info';
-    case 'rejected':
-      return 'error';
-    case 'archived':
-      return 'warning';
-    case 'draft':
-    default:
-      return 'neutral';
-  }
-}
-
-function elementColor(type: string): string {
-  return ELEMENT_TYPES.find((t) => t.id === type)?.color || 'var(--text-dim)';
-}
-
-function ElementIcon({ type, size = 12 }: { type: string; size?: number }) {
-  const def = ELEMENT_TYPES.find((t) => t.id === type) || ELEMENT_TYPES[1];
-  const Icon = def.Icon;
-  return <Icon size={size} style={{ color: def.color }} />;
-}
-
-// ── List view ──────────────────────────────────────────────────────────
-
-export function Artifacts({ snapshot, refreshSnapshot }: Props) {
-  const toast = useToast();
-  const [artifacts, setPlans] = useState<Artifact[]>(snapshot.artifacts || []);
-  const [loading, setLoading] = useState(!snapshot.artifacts);
-  const [activeSlug, setActiveSlug] = useState<string | null>(null);
-  const [filter, setFilter] = useState('');
-  const [showArchived, setShowArchived] = useState(false);
-
-  useEffect(() => {
-    if (snapshot.artifacts) {
-      setPlans(snapshot.artifacts);
-      setLoading(false);
-    }
-  }, [snapshot.artifacts]);
-
-  const reload = async () => {
-    try {
-      const d = await api.get<{ artifacts: Artifact[] }>('/artifacts');
-      setPlans(d.artifacts || []);
-      setLoading(false);
-    } catch (err) {
-      toast.error(`Artifacts load failed: ${(err as Error).message}`);
-      setLoading(false);
-    }
-  };
-
-  const filtered = useMemo(() => {
-    let out = artifacts;
-    if (filter) {
-      const q = filter.toLowerCase();
-      out = out.filter(
-        (p) =>
-          (p.slug || '').toLowerCase().includes(q) ||
-          (p.title || '').toLowerCase().includes(q),
-      );
-    }
-    if (!showArchived) {
-      out = out.filter((p) => p.status !== 'archived');
-    }
-    return out;
-  }, [artifacts, filter, showArchived]);
-
-  const onCreate = async (slug: string, title?: string) => {
-    try {
-      const artifact = await api.post<{ slug: string }>('/artifacts', { slug, title });
-      toast.success(`Artifact "${artifact.slug}" created.`);
-      setActiveSlug(artifact.slug);
-      await reload();
-    } catch (err) {
-      toast.error(`Create failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onDelete = async (slug: string) => {
-    if (!confirm(`Delete artifact "${slug}"? This removes the directory permanently.`)) return;
-    try {
-      await api.del(`/artifacts/${encodeURIComponent(slug)}`);
-      toast.success('Artifact deleted.');
-      if (activeSlug === slug) setActiveSlug(null);
-      await reload();
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  if (activeSlug) {
-    // v3.21.0 — Use the new GlyphRenderer (agent-native-style MDX renderer)
-    // instead of the hand-rolled PlanEditor canvas. Toggle available via the
-    // "Use MDX" button in the header (TODO: surface this once stable).
-    return (
-      <div className="artifact-glyph-overlay">
-        <div className="artifact-glyph-toolbar">
-          <Button variant="ghost" onClick={() => { setActiveSlug(null); reload(); }}>
-            <ArrowLeft size={14} /> Back to artifacts
-          </Button>
-        </div>
-        <GlyphRenderer
-          slug={activeSlug}
-          onClose={() => { setActiveSlug(null); reload(); }}
-          onCommentAdded={() => reload()}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="view view-artifacts">
-      <header className="view-header">
-        <div className="view-header-text">
-          <h2 className="view-title">
-            <MapIcon size={18} /> Glyphs ({artifacts.length})
-          </h2>
-          <p className="view-subtitle">
-            Visual artifacts with elements, connections, and threaded comments.
-          </p>
-        </div>
-        <div className="view-actions">
-          <div className="search-input">
-            <Search size={14} aria-hidden />
-            <label htmlFor="artifacts-search" className="sr-only">Search artifacts</label>
-            <input
-              id="artifacts-search"
-              className="input"
-              type="text"
-              placeholder="Search…"
-              value={filter}
-              onChange={(e) => setFilter(e.target.value)}
-              aria-label="Search artifacts"
-            />
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setShowArchived((v) => !v)}
-            title={showArchived ? 'Hide archived' : 'Show archived'}
-          >
-            {showArchived ? <ArchiveRestore size={14} /> : <Archive size={14} />}
-            {showArchived ? 'Hide archived' : 'Show archived'}
-          </Button>
-          <Button variant="secondary" size="sm" onClick={reload}>
-            <RefreshCw size={14} /> Refresh
-          </Button>
-        </div>
-      </header>
-
-      <NewPlanCard onCreate={onCreate} />
-
-      {loading ? (
-        <div className="view-loading">
-          <Spinner size="lg" />
-        </div>
-      ) : filtered.length === 0 ? (
-        <EmptyState
-          icon={<MapIcon size={32} />}
-          title={showArchived ? 'No artifacts' : 'No artifacts yet'}
-          message={
-            showArchived
-              ? 'No artifacts match your filter (try Show archived off).'
-              : 'Create one above to get started.'
-          }
-        />
-      ) : (
-        <div className="artifacts-grid">
-          {filtered.map((p) => (
-            <PlanCard
-              key={p.slug}
-              artifact={p}
-              onOpen={() => setActiveSlug(p.slug)}
-              onDelete={() => onDelete(p.slug)}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function NewPlanCard({ onCreate }: { onCreate: (slug: string, title?: string) => void }) {
-  const [slug, setSlug] = useState('');
-  const [title, setTitle] = useState('');
-  return (
-    <Card className="new-artifact">
-      <CardTitle>
-        <Plus size={14} /> New artifact
-      </CardTitle>
-      <CardMeta>Slug must be lowercase, may contain hyphens, 1–64 chars.</CardMeta>
-      <form
-        className="new-artifact-form"
-        onSubmit={(e) => {
-          e.preventDefault();
-          if (!slug.trim()) return;
-          onCreate(slug.trim(), title.trim() || undefined);
-          setSlug('');
-          setTitle('');
-        }}
-      >
-        <label htmlFor="new-artifact-slug" className="sr-only">Artifact slug</label>
-        <input
-          id="new-artifact-slug"
-          className="input"
-          type="text"
-          placeholder="slug (e.g. dashboard-v3.1)"
-          pattern="[a-z0-9][a-z0-9-]{0,63}"
-          required
-          value={slug}
-          onChange={(e) => setSlug(e.target.value)}
-          aria-label="Artifact slug"
-        />
-        <label htmlFor="new-artifact-title" className="sr-only">Artifact title</label>
-        <input
-          id="new-artifact-title"
-          className="input"
-          type="text"
-          placeholder="Title (optional)"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-        />
-        <Button variant="primary" type="submit">
-          Create
-        </Button>
-      </form>
-    </Card>
-  );
-}
-
-function PlanCard({
-  artifact,
-  onOpen,
-  onDelete,
-}: {
-  artifact: Artifact;
-  onOpen: () => void;
-  onDelete: () => void;
-}) {
-  const kind = planStatusKind(artifact.status || 'draft');
-  return (
-    <Card
-      variant="elevated"
-      interactive
-      className="artifact-card"
-      onClick={onOpen}
-    >
-      <div className="artifact-card-head">
-        <div className="artifact-card-title">{artifact.title || artifact.slug}</div>
-        <StatusBadge kind={kind}>{artifact.status || 'draft'}</StatusBadge>
-      </div>
-      <div className="artifact-card-slug mono">{artifact.slug} · {artifact.source}</div>
-      <div className="artifact-card-meta">
-        {artifact.elementCount != null && <span>{artifact.elementCount} elements</span>}
-        {artifact.commentCount != null && <span> · {artifact.commentCount} comments</span>}
-        <span> · edited {formatRelative(artifact.mtime)}</span>
-      </div>
-      <div className="artifact-card-actions">
-        <Button variant="primary" size="sm" onClick={(e) => { e.stopPropagation(); onOpen(); }}>
-          Open
-          <ChevronRight size={12} />
-        </Button>
-        <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onDelete(); }}>
-          <Trash2 size={12} /> Delete
-        </Button>
-      </div>
-    </Card>
-  );
-}
-
-// ── Artifact editor (fullscreen) ──────────────────────────────────────────
-
-function PlanEditor({
-  slug,
-  onBack,
-  onDelete,
-}: {
-  slug: string;
-  onBack: () => void;
-  onDelete: () => void;
-}) {
-  const toast = useToast();
-  const modal = useModal();
-  const [canvas, setCanvas] = useState<Canvas | null>(null);
-  const [meta, setMeta] = useState<{ title: string; status: string; tags: string[]; description?: string } | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [selectedElId, setSelectedElId] = useState<string | null>(null);
-  const [fullscreen, setFullscreen] = useState(false);
-  const [showComments, setShowComments] = useState(true);
-  const [contextMenu, setContextMenu] = useState<ContextMenuState>(null);
-  const [contextMenuWorldPos, setContextMenuWorldPos] = useState<{ x: number; y: number } | null>(null);
-  // v3.7.0 — Element-specific right-click context menu
-  const [elementContextMenu, setElementContextMenu] = useState<ContextMenuState>(null);
-
-  const moveElementLocally = (id: string, x: number, y: number) => {
-    setCanvas((cur) => {
-      if (!cur) return cur;
-      return {
-        ...cur,
-        elements: cur.elements.map((el) => (el.id === id ? { ...el, x, y } : el)),
-      };
-    });
-  };
-
-  const reload = async () => {
-    setLoading(true);
-    try {
-      const artifact = await api.get<{ meta: { title: string; status: string; tags: string[]; description?: string }; canvas: Canvas }>(
-        `/artifacts/${encodeURIComponent(slug)}`,
-      );
-      setCanvas(artifact.canvas);
-      setMeta(artifact.meta);
-    } catch (err) {
-      toast.error(`Could not load artifact: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    setSelectedElId(null);
-    reload();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [slug]);
-
-  // Issue 3 fix — wire fullscreen state to browser Fullscreen API
-  useEffect(() => {
-    if (!fullscreen) {
-      if (document.fullscreenElement) {
-        document.exitFullscreen().catch(() => {});
-      }
-      return;
-    }
-    // Sync state when user exits via ESC key — before entering, so we don't
-    // double-set on the way in
-    const onFullscreenChange = () => {
-      if (!document.fullscreenElement) setFullscreen(false);
-    };
-    document.addEventListener('fullscreenchange', onFullscreenChange);
-    // Attempt to enter fullscreen (fails silently if unsupported or blocked)
-    document.documentElement.requestFullscreen().catch(() => {});
-    return () => {
-      document.removeEventListener('fullscreenchange', onFullscreenChange);
-      if (document.fullscreenElement) {
-        document.exitFullscreen().catch(() => {});
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fullscreen]);
-
-  const totalComments = canvas?.comments.length ?? 0;
-
-  const addElement = async (body: { type: string; title: string; content: string; x: number; y: number }, position?: { x: number; y: number }) => {
-    try {
-      const payload = position ? { ...body, x: position.x, y: position.y } : body;
-      await api.post(`/artifacts/${encodeURIComponent(slug)}/elements`, payload);
-      await reload();
-      toast.success('Element added.');
-    } catch (err) {
-      toast.error(`Add element failed: ${(err as Error).message}`);
-    }
-  };
-
-  const updateElement = async (id: string, body: Partial<CanvasElement>) => {
-    try {
-      await api.put(`/artifacts/${encodeURIComponent(slug)}/elements/${encodeURIComponent(id)}`, body);
-      await reload();
-    } catch (err) {
-      toast.error(`Update failed: ${(err as Error).message}`);
-    }
-  };
-
-  const deleteElement = async (id: string) => {
-    try {
-      await api.del(`/artifacts/${encodeURIComponent(slug)}/elements/${encodeURIComponent(id)}`);
-      if (selectedElId === id) setSelectedElId(null);
-      await reload();
-      toast.success('Element deleted.');
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  // v3.7.0 — Duplicate an element with a small position offset
-  const duplicateElement = async (id: string) => {
-    const el = canvas?.elements.find((e) => e.id === id);
-    if (!el) return;
-    try {
-      await api.post(`/artifacts/${encodeURIComponent(slug)}/elements`, {
-        type: el.type,
-        title: el.title ? `${el.title} (copy)` : 'Untitled',
-        content: el.content || '',
-        x: (el.x || 0) + 24,
-        y: (el.y || 0) + 24,
-      });
-      await reload();
-      toast.success('Element duplicated.');
-    } catch (err) {
-      toast.error(`Duplicate failed: ${(err as Error).message}`);
-    }
-  };
-
-  // v3.7.0 — Change element type
-  const changeElementType = async (id: string, newType: string) => {
-    try {
-      await api.put(`/artifacts/${encodeURIComponent(slug)}/elements/${encodeURIComponent(id)}`, { type: newType });
-      await reload();
-      toast.success(`Type changed to ${newType}.`);
-    } catch (err) {
-      toast.error(`Change type failed: ${(err as Error).message}`);
-    }
-  };
-
-  const addConnection = async (from: string, to: string, label?: string) => {
-    try {
-      await api.post(`/artifacts/${encodeURIComponent(slug)}/connections`, { from, to, label });
-      await reload();
-      toast.success('Connection added.');
-    } catch (err) {
-      toast.error(`Connection failed: ${(err as Error).message}`);
-    }
-  };
-
-  const deleteConnection = async (id: string) => {
-    try {
-      await api.del(`/artifacts/${encodeURIComponent(slug)}/connections/${encodeURIComponent(id)}`);
-      await reload();
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  const addComment = async (text: string, elementId: string | null, worldPos?: { x: number; y: number }) => {
-    try {
-      const path = elementId
-        ? `/artifacts/${encodeURIComponent(slug)}/elements/${encodeURIComponent(elementId)}/comments`
-        : `/artifacts/${encodeURIComponent(slug)}/comments`;
-      const body: { text: string; elementId: string | null; x?: number; y?: number } = { text, elementId };
-      if (worldPos) { body.x = worldPos.x; body.y = worldPos.y; }
-      await api.post(path, body);
-      await reload();
-      toast.success('Comment added.');
-    } catch (err) {
-      toast.error(`Comment failed: ${(err as Error).message}`);
-    }
-  };
-
-  const deleteComment = async (cid: string) => {
-    try {
-      await api.del(`/artifacts/${encodeURIComponent(slug)}/comments/${encodeURIComponent(cid)}`);
-      await reload();
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  const updatePositions = async (positions: { id: string; x: number; y: number }[]) => {
-    try {
-      await api.put(`/artifacts/${encodeURIComponent(slug)}/position`, { positions });
-    } catch (err) {
-      // non-fatal
-      logger.warn('Position update failed', err);
-    }
-  };
-
-  const onConfigure = () => {
-    if (!meta) return;
-    let titleEl: HTMLInputElement | null = null;
-    let descEl: HTMLTextAreaElement | null = null;
-    let tagsEl: HTMLInputElement | null = null;
-    let statusEl: HTMLSelectElement | null = null;
-    modal.open({
-      title: 'Configure artifact',
-      width: 560,
-      children: (
-        <div className="artifact-config-form">
-          <label className="field-label" htmlFor="artifact-cfg-title">Title</label>
-          <input id="artifact-cfg-title" ref={(el) => { titleEl = el; }} className="input" type="text" defaultValue={meta.title} />
-          <label className="field-label" htmlFor="artifact-cfg-desc">Description (markdown)</label>
-          <textarea id="artifact-cfg-desc" ref={(el) => { descEl = el; }} className="textarea" rows={3} defaultValue={meta.description || ''} />
-          <label className="field-label" htmlFor="artifact-cfg-tags">Tags (comma-separated)</label>
-          <input id="artifact-cfg-tags" ref={(el) => { tagsEl = el; }} className="input" type="text" defaultValue={(meta.tags || []).join(', ')} />
-          <label className="field-label" htmlFor="artifact-cfg-status">Status</label>
-          <select id="artifact-cfg-status" ref={(el) => { statusEl = el; }} className="select" defaultValue={meta.status}>
-            {PLAN_STATUSES.map((s) => (
-              <option key={s} value={s}>{s}</option>
-            ))}
-          </select>
-        </div>
-      ),
-      footer: (
-        <div className="modal-footer-actions">
-          <Button variant="ghost" onClick={() => modal.close()}>Cancel</Button>
-          <Button
-            variant="primary"
-            onClick={async () => {
-              try {
-                const tags = (tagsEl?.value || '').split(',').map((t) => t.trim()).filter(Boolean);
-                await api.put(`/artifacts/${encodeURIComponent(slug)}`, {
-                  title: (titleEl?.value || '').trim() || meta.title,
-                  description: descEl?.value || '',
-                  tags,
-                  status: statusEl?.value || meta.status,
-                });
-                await reload();
-                toast.success('Artifact updated.');
-                modal.close();
-              } catch (err) {
-                toast.error(`Save failed: ${(err as Error).message}`);
-              }
-            }}
-          >
-            Save
-          </Button>
-        </div>
-      ),
-    });
-  };
-
-  const onAddElement = (worldPos?: { x: number; y: number }) => {
-    let typeEl: HTMLSelectElement | null = null;
-    let titleEl: HTMLInputElement | null = null;
-    let contentEl: HTMLTextAreaElement | null = null;
-    modal.open({
-      title: 'Add element',
-      width: 520,
-      children: (
-        <div className="artifact-element-form">
-          <label className="field-label" htmlFor="artifact-elem-type">Type</label>
-          <select id="artifact-elem-type" ref={(el) => { typeEl = el; }} className="select" defaultValue="task">
-            {ELEMENT_TYPES.map((t) => (
-              <option key={t.id} value={t.id}>{t.label}</option>
-            ))}
-          </select>
-          <label className="field-label" htmlFor="artifact-elem-title">Title</label>
-          <input id="artifact-elem-title" ref={(el) => { titleEl = el; }} className="input" type="text" placeholder="Element title" autoFocus />
-          <label className="field-label" htmlFor="artifact-elem-content">Content (markdown)</label>
-          <textarea id="artifact-elem-content" ref={(el) => { contentEl = el; }} className="textarea" rows={4} placeholder="Description…" />
-        </div>
-      ),
-      footer: (
-        <div className="modal-footer-actions">
-          <Button variant="ghost" onClick={() => modal.close()}>Cancel</Button>
-          <Button
-            variant="primary"
-            onClick={async (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              if (worldPos) {
-                await addElement({
-                  type: typeEl?.value || 'note',
-                  title: (titleEl?.value || 'Untitled').trim(),
-                  content: contentEl?.value || '',
-                  x: worldPos.x,
-                  y: worldPos.y,
-                });
-              } else {
-                const maxX = (canvas?.elements || []).reduce((acc, el) => Math.max(acc, el.x || 0), 0);
-                const maxY = (canvas?.elements || []).reduce((acc, el) => Math.max(acc, el.y || 0), 0);
-                await addElement({
-                  type: typeEl?.value || 'note',
-                  title: (titleEl?.value || 'Untitled').trim(),
-                  content: contentEl?.value || '',
-                  x: 80 + Math.min(maxX + 40, 200),
-                  y: 80 + Math.min(maxY + 40, 200),
-                });
-              }
-              modal.close();
-            }}
-          >
-            <Plus size={12} /> Add
-          </Button>
-        </div>
-      ),
-    });
-  };
-
-  const onCanvasComment = (worldPos?: { x: number; y: number }) => {
-    let textEl: HTMLTextAreaElement | null = null;
-    modal.open({
-      title: 'Add canvas comment',
-      width: 480,
-      children: (
-        <div>
-          <label className="field-label" htmlFor="canvas-comment">Comment</label>
-          <textarea id="canvas-comment" ref={(el) => { textEl = el; }} className="textarea" rows={4} placeholder="Comment for the whole artifact…" autoFocus />
-        </div>
-      ),
-      footer: (
-        <div className="modal-footer-actions">
-          <Button variant="ghost" onClick={() => modal.close()}>Cancel</Button>
-          <Button
-            variant="primary"
-            onClick={async (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              const text = (textEl?.value || '').trim();
-              if (!text) return;
-              await addComment(text, null, worldPos);
-              modal.close();
-            }}
-          >
-            <Send size={12} /> Post
-          </Button>
-        </div>
-      ),
-    });
-  };
-
-  if (loading || !canvas || !meta) {
-    return (
-      <div className="view view-artifacts view-artifacts-fullscreen">
-        <PlanEditorHeader
-          slug={slug}
-          meta={meta || { title: slug, status: 'draft', tags: [] }}
-          counts={{ elements: 0, comments: 0 }}
-          onBack={onBack}
-          onConfigure={() => undefined}
-          onAddElement={() => undefined}
-          onCanvasComment={() => undefined}
-          onRefresh={reload}
-          onDelete={onDelete}
-          fullscreen={fullscreen}
-          setFullscreen={setFullscreen}
-        />
-        <div className="view-loading" style={{ flex: 1 }}>
-          <Spinner size="lg" />
-          <p>Loading canvas…</p>
-        </div>
-      </div>
-    );
-  }
-
-  const visibleComments = selectedElId
-    ? canvas.comments.filter((c) => c.elementId === selectedElId)
-    : canvas.comments;
-
-  return (
-    <div className={cn('view view-artifacts view-artifacts-fullscreen', !fullscreen && 'view-artifacts-embedded')}>
-      {!fullscreen && (
-        <PlanEditorHeader
-          slug={slug}
-          meta={meta}
-          counts={{ elements: canvas.elements.length, comments: totalComments }}
-          onBack={onBack}
-          onConfigure={onConfigure}
-          onAddElement={onAddElement}
-          onCanvasComment={onCanvasComment}
-          onRefresh={reload}
-          onDelete={onDelete}
-          fullscreen={fullscreen}
-          setFullscreen={setFullscreen}
-        />
-      )}
-
-        <div className="artifacts-body">
-          {/* Canvas wrapper with floating controls */}
-          <div className="artifact-canvas-wrapper">
-            {fullscreen && (
-            <div className="artifact-canvas-floating-controls">
-            <Button variant="ghost" size="sm" onClick={onBack} title="Back to artifacts list">
-              <ArrowLeft size={14} /> Back
-            </Button>
-            <h3>{meta?.title || slug}</h3>
-            {meta && <StatusBadge kind={planStatusKind(meta.status)}>{meta.status}</StatusBadge>}
-            <Button variant="secondary" size="sm" onClick={() => onAddElement()}>
-              <Plus size={14} /> Element
-            </Button>
-            <Button variant="secondary" size="sm" onClick={() => onCanvasComment()}>
-              <MessageCircle size={14} /> Comment
-            </Button>
-            <Button variant="ghost" size="sm" onClick={onConfigure} title="Configure artifact" aria-label="Configure artifact">
-              <SettingsIcon size={14} />
-            </Button>
-            </div>
-            )}
-
-          <CanvasViewport
-            canvas={canvas}
-            selectedElId={selectedElId}
-            onSelect={setSelectedElId}
-            onMoveElement={moveElementLocally}
-            onMoveEnd={updatePositions}
-            onDeleteElement={deleteElement}
-            onConnect={(from, to) => addConnection(from, to)}
-            onDeleteConnection={deleteConnection}
-            onEditElement={(el) => editElementInline(modal, slug, el, updateElement, toast)}
-            onContextMenu={(e, worldPos) => {
-              e.preventDefault();
-              setElementContextMenu(null);
-              setContextMenuWorldPos(worldPos);
-              setContextMenu({
-                x: e.clientX,
-                y: e.clientY,
-                items: [
-                  { label: 'Add element', icon: Plus, onClick: () => onAddElement(worldPos) },
-                  { label: 'Add comment', icon: MessageSquare, onClick: () => onCanvasComment(worldPos) },
-                  { type: 'separator' },
-                  { label: 'Configure artifact', icon: SettingsIcon, onClick: onConfigure },
-                  { label: 'Delete artifact', icon: Trash2, onClick: onDelete },
-                ],
-              });
-            }}
-            onElementContextMenu={(e, elementId, _worldPos) => {
-              const el = canvas?.elements.find((x) => x.id === elementId);
-              if (!el) return;
-              setContextMenu(null);
-              setElementContextMenu({
-                x: e.clientX,
-                y: e.clientY,
-                items: [
-                  { label: 'Edit', icon: Pencil, onClick: () => { editElementInline(modal, slug, el, updateElement, toast); } },
-                  { label: 'Duplicate', icon: Copy, onClick: () => duplicateElement(elementId) },
-                  { type: 'separator' },
-                  { label: 'Change type', icon: Layers, onClick: () => {
-                    // Cycle through types: task -> note -> decision -> question -> task
-                    const types = ['task', 'note', 'decision', 'question'];
-                    const currentIdx = types.indexOf(el.type);
-                    const nextType = types[(currentIdx + 1) % types.length];
-                    changeElementType(elementId, nextType);
-                  }},
-                  { type: 'separator' },
-                  { label: `Delete`, icon: Trash2, onClick: () => { if (confirm(`Delete "${el.title || el.type}"?`)) deleteElement(elementId); } },
-                ],
-              });
-            }}
-          />
-
-          {/* Canvas-level context menu */}
-          <CanvasContextMenu menu={contextMenu} onClose={() => setContextMenu(null)} />
-          {/* Element-level context menu */}
-          <CanvasContextMenu menu={elementContextMenu} onClose={() => setElementContextMenu(null)} />
-        </div>
-
-        {showComments && (
-          <CommentsPanel
-            slug={slug}
-            comments={visibleComments}
-            selectedElId={selectedElId}
-            onAdd={(text) => addComment(text, selectedElId)}
-            onDelete={deleteComment}
-            onClose={() => {
-              setShowComments(false);
-              setSelectedElId(null);
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function PlanEditorHeader({
-  slug,
-  meta,
-  counts,
-  onBack,
-  onConfigure,
-  onAddElement,
-  onCanvasComment,
-  onRefresh,
-  onDelete,
-  fullscreen,
-  setFullscreen,
-}: {
-  slug: string;
-  meta: { title: string; status: string; tags: string[] };
-  counts: { elements: number; comments: number };
-  onBack: () => void;
-  onConfigure: () => void;
-  onAddElement: () => void;
-  onCanvasComment: () => void;
-  onRefresh: () => void;
-  onDelete: () => void;
-  fullscreen: boolean;
-  setFullscreen: (v: boolean) => void;
-}) {
-  const kind = planStatusKind(meta.status);
-  return (
-    <header className="artifacts-editor-bar">
-      <div className="artifacts-editor-bar-left">
-        <Button variant="ghost" size="sm" onClick={onBack} title="Back to artifacts list">
-          <ArrowLeft size={14} /> Back
-        </Button>
-        <div className="artifacts-editor-meta">
-          <span className="artifacts-editor-title">{meta.title || slug}</span>
-          <span className="artifacts-editor-slug mono">{slug}</span>
-          <StatusBadge kind={kind}>{meta.status}</StatusBadge>
-        </div>
-      </div>
-      <div className="artifacts-editor-bar-right">
-        <span className="muted text-sm">
-          {counts.elements} element{counts.elements === 1 ? '' : 's'} · {counts.comments} comment{counts.comments === 1 ? '' : 's'}
-        </span>
-        <Button variant="secondary" size="sm" onClick={onAddElement}>
-          <Plus size={14} /> Element
-        </Button>
-        <Button variant="secondary" size="sm" onClick={onCanvasComment}>
-          <MessageCircle size={14} /> Comment
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onConfigure} title="Configure artifact" aria-label="Configure artifact">
-          <SettingsIcon size={14} />
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onRefresh} title="Refresh canvas" aria-label="Refresh canvas">
-          <RefreshCw size={14} />
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => setFullscreen(!fullscreen)}
-          title={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-          aria-label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-        >
-          {fullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onDelete} title="Delete artifact" aria-label="Delete artifact">
-          <Trash2 size={14} />
-        </Button>
-      </div>
-    </header>
-  );
-}
-
-function editElementInline(
-  modal: ReturnType<typeof useModal>,
-  slug: string,
-  el: CanvasElement,
-  updateElement: (id: string, body: Partial<CanvasElement>) => Promise<void>,
-  toast: ReturnType<typeof useToast>,
-) {
-  let typeEl: HTMLSelectElement | null = null;
-  let titleEl: HTMLInputElement | null = null;
-  let contentEl: HTMLTextAreaElement | null = null;
-  let statusEl: HTMLInputElement | null = null;
-  modal.open({
-    title: `Edit ${el.title || el.type}`,
-    width: 520,
-    children: (
-      <div className="artifact-element-form">
-        <label className="field-label" htmlFor="elem-edit-type">Type</label>
-        <select id="elem-edit-type" ref={(el2) => { typeEl = el2; }} className="select" defaultValue={el.type}>
-          {ELEMENT_TYPES.map((t) => (
-            <option key={t.id} value={t.id}>{t.label}</option>
-          ))}
-        </select>
-        <label className="field-label" htmlFor="elem-edit-title">Title</label>
-        <input id="elem-edit-title" ref={(el2) => { titleEl = el2; }} className="input" type="text" defaultValue={el.title} />
-        <label className="field-label" htmlFor="elem-edit-status">Status</label>
-        <input id="elem-edit-status" ref={(el2) => { statusEl = el2; }} className="input" type="text" defaultValue={el.status} placeholder="open / done / blocked …" />
-        <label className="field-label" htmlFor="elem-edit-content">Content (markdown)</label>
-        <textarea id="elem-edit-content" ref={(el2) => { contentEl = el2; }} className="textarea" rows={5} defaultValue={el.content} />
-      </div>
-    ),
-    footer: (
-      <div className="modal-footer-actions">
-        <Button variant="ghost" onClick={() => modal.close()}>Cancel</Button>
-        <Button
-          variant="primary"
-          onClick={async () => {
-            try {
-              await updateElement(el.id, {
-                type: typeEl?.value || el.type,
-                title: titleEl?.value ?? el.title,
-                content: contentEl?.value ?? el.content,
-                status: statusEl?.value || el.status,
-              });
-              toast.success('Element saved.');
-              modal.close();
-            } catch (err) {
-              toast.error(`Save failed: ${(err as Error).message}`);
-            }
-          }}
-        >
-          Save
-        </Button>
-      </div>
-    ),
-  });
-}
-
-// ── Canvas viewport ───────────────────────────────────────────────────
-
-type ViewportProps = {
-  canvas: Canvas;
-  selectedElId: string | null;
-  onSelect: (id: string | null) => void;
-  onMoveElement: (id: string, x: number, y: number) => void;
-  onMoveEnd: (positions: { id: string; x: number; y: number }[]) => void;
-  onDeleteElement: (id: string) => void;
-  onConnect: (from: string, to: string) => void;
-  onDeleteConnection: (id: string) => void;
-  onEditElement: (el: CanvasElement) => void;
-  onContextMenu?: (e: React.MouseEvent, worldPos: { x: number; y: number }) => void;
-  // v3.7.0 — Element-specific context menu (right-click on an element)
-  onElementContextMenu?: (e: React.MouseEvent, elementId: string, worldPos: { x: number; y: number }) => void;
-  fitToView?: () => void;
-};
-
-function CanvasViewport({
-  canvas,
-  selectedElId,
-  onSelect,
-  onMoveElement,
-  onMoveEnd,
-  onDeleteElement,
-  onConnect,
-  onDeleteConnection,
-  onEditElement,
-  onContextMenu,
-  onElementContextMenu,
-}: ViewportProps) {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const innerRef = useRef<HTMLDivElement>(null);
-  const elementsRef = useRef(canvas.elements);
-  const stateRef = useRef({
-    panning: false,
-    startX: 0,
-    startY: 0,
-    ox: canvas.viewport.x || 0,
-    oy: canvas.viewport.y || 0,
-    scale: canvas.viewport.zoom || 1,
-    dragging: null as null | { id: string; offsetX: number; offsetY: number; moved: boolean; origX: number; origY: number },
-    connecting: null as null | { fromId: string; x: number; y: number },
-  });
-
-  useEffect(() => {
-    elementsRef.current = canvas.elements;
-  }, [canvas.elements]);
-
-  useEffect(() => {
-    const root = rootRef.current;
-    const inner = innerRef.current;
-    if (!root || !inner) return undefined;
-    const apply = () => {
-      const s = stateRef.current;
-      inner.style.transform = `translate(${s.ox}px, ${s.oy}px) scale(${s.scale})`;
-    };
-    apply();
-
-    const screenToWorld = (clientX: number, clientY: number) => {
-      const rect = inner.getBoundingClientRect();
-      const s = stateRef.current;
-      // rect.left/rect.top is the *post-transform* top-left; account for scale
-      const x = (clientX - rect.left) / s.scale;
-      const y = (clientY - rect.top) / s.scale;
-      return { x, y };
-    };
-
-    const onMouseDown = (e: MouseEvent) => {
-      if (e.button === 2) return;
-      const t = e.target as HTMLElement;
-      if (
-        t === root ||
-        t.classList.contains('canvas-grid-bg') ||
-        t.classList.contains('canvas-inner')
-      ) {
-        stateRef.current.panning = true;
-        stateRef.current.startX = e.clientX - stateRef.current.ox;
-        stateRef.current.startY = e.clientY - stateRef.current.oy;
-        root.style.cursor = 'grabbing';
-        return;
-      }
-      const elCard = t.closest('.canvas-element') as HTMLElement | null;
-      if (elCard) {
-        const id = elCard.dataset.elementId;
-        if (!id) return;
-        const headerHit = !!t.closest('.canvas-element-head');
-        const handleHit = !!t.closest('.canvas-element-handle');
-        if (headerHit || handleHit) {
-          const world = screenToWorld(e.clientX, e.clientY);
-          const el = elementsRef.current.find((x) => x.id === id);
-          if (!el) return;
-          stateRef.current.dragging = {
-            id,
-            offsetX: world.x - (el.x || 0),
-            offsetY: world.y - (el.y || 0),
-            moved: false,
-            origX: el.x || 0,
-            origY: el.y || 0,
-          };
-          onSelect(id);
-          e.preventDefault();
-        }
-      }
-    };
-    const onMouseMove = (e: MouseEvent) => {
-      const s = stateRef.current;
-      if (s.panning) {
-        s.ox = e.clientX - s.startX;
-        s.oy = e.clientY - s.startY;
-        apply();
-        return;
-      }
-      if (s.dragging) {
-        const world = screenToWorld(e.clientX, e.clientY);
-        const newX = Math.max(0, world.x - s.dragging.offsetX);
-        const newY = Math.max(0, world.y - s.dragging.offsetY);
-        if (!s.dragging.moved) {
-          const dx = Math.abs(newX - s.dragging.origX);
-          const dy = Math.abs(newY - s.dragging.origY);
-          if (dx < 2 && dy < 2) return;
-        }
-        s.dragging.moved = true;
-        onMoveElement(s.dragging.id, newX, newY);
-        return;
-      }
-      if (s.connecting) {
-        const inner2 = innerRef.current;
-        if (!inner2) return;
-        const world = screenToWorld(e.clientX, e.clientY);
-        s.connecting.x = world.x;
-        s.connecting.y = world.y;
-        // Trigger a custom event so the connecting SVG re-renders.
-        inner2.dispatchEvent(new CustomEvent('canvas-move', { detail: { x: world.x, y: world.y } }));
-      }
-    };
-    const onMouseUp = () => {
-      const s = stateRef.current;
-      if (s.panning) {
-        s.panning = false;
-        root.style.cursor = '';
-      }
-      if (s.dragging) {
-        if (s.dragging.moved) {
-          const el = elementsRef.current.find((x) => x.id === s.dragging?.id);
-          if (el) {
-            onMoveEnd([{ id: el.id, x: el.x || 0, y: el.y || 0 }]);
-          }
-        }
-        s.dragging = null;
-      }
-      if (s.connecting) {
-        s.connecting = null;
-        innerRef.current?.dispatchEvent(new CustomEvent('canvas-move', { detail: { x: 0, y: 0 } }));
-      }
-    };
-    const onWheel = (e: WheelEvent) => {
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? 0.9 : 1.1;
-      const next = Math.min(
-        Math.max(stateRef.current.scale * delta, 0.25),
-        2.5,
-      );
-      stateRef.current.scale = next;
-      apply();
-    };
-    root.addEventListener('mousedown', onMouseDown);
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
-    root.addEventListener('wheel', onWheel, { passive: false });
-    return () => {
-      root.removeEventListener('mousedown', onMouseDown);
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
-      root.removeEventListener('wheel', onWheel);
-    };
-  }, [onMoveElement, onMoveEnd, onSelect]);
-
-  const fitToView = () => {
-    if (!rootRef.current || canvas.elements.length === 0) {
-      stateRef.current.ox = 0;
-      stateRef.current.oy = 0;
-      stateRef.current.scale = 1;
-      const inner = innerRef.current;
-      if (inner) {
-        inner.style.transform = `translate(0px, 0px) scale(1)`;
-      }
-      return;
-    }
-    const bbox = canvas.elements.reduce(
-      (acc, el) => {
-        const ex = el.x || 0;
-        const ey = el.y || 0;
-        const ex2 = ex + (el.width || 240);
-        const ey2 = ey + (el.height || 120);
-        return {
-          minX: Math.min(acc.minX, ex),
-          minY: Math.min(acc.minY, ey),
-          maxX: Math.max(acc.maxX, ex2),
-          maxY: Math.max(acc.maxY, ey2),
-        };
-      },
-      { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
-    );
-    const pad = 80;
-    const root = rootRef.current;
-    const w = root.clientWidth - pad * 2;
-    const h = root.clientHeight - pad * 2;
-    const bw = bbox.maxX - bbox.minX;
-    const bh = bbox.maxY - bbox.minY;
-    const scale = Math.min(w / Math.max(bw, 1), h / Math.max(bh, 1), 1.5);
-    const ox = -bbox.minX * scale + pad;
-    const oy = -bbox.minY * scale + pad;
-    stateRef.current.ox = ox;
-    stateRef.current.oy = oy;
-    stateRef.current.scale = scale;
-    const inner = innerRef.current;
-    if (inner) {
-      inner.style.transform = `translate(${ox}px, ${oy}px) scale(${scale})`;
-    }
-  };
-
-  return (
-    <div className="artifacts-canvas-wrap">
-      <div className="canvas-toolbar">
-        <button type="button" className="icon-btn" title="Fit to view" aria-label="Fit canvas to view" onClick={fitToView}>
-          <Maximize2 size={14} />
-        </button>
-        <button
-          type="button"
-          className="icon-btn"
-          title="Reset zoom"
-          aria-label="Reset canvas zoom"
-          onClick={() => {
-            stateRef.current.ox = 0;
-            stateRef.current.oy = 0;
-            stateRef.current.scale = 1;
-            const inner = innerRef.current;
-            if (inner) inner.style.transform = 'translate(0px, 0px) scale(1)';
-          }}
-        >
-          <Circle size={14} />
-        </button>
-        <span className="muted text-sm" style={{ marginLeft: 'auto' }}>
-          Pan: drag empty · Zoom: scroll · Drag element header to move · Double-click to edit · Right-click element for actions
-        </span>
-      </div>
-      <div className="canvas-root" ref={rootRef} onContextMenu={(e) => {
-        e.preventDefault();
-        const rect = innerRef.current?.getBoundingClientRect();
-        const s = stateRef.current;
-        if (!rect) return;
-        const worldPos = { x: (e.clientX - rect.left) / s.scale, y: (e.clientY - rect.top) / s.scale };
-        onContextMenu?.(e, worldPos);
-      }}>
-        <div className="canvas-grid-bg" />
-        <div className="canvas-inner" ref={innerRef}>
-          {canvas.elements.length === 0 ? (
-            <div className="canvas-empty">
-              <EmptyState
-                icon={<MapIcon size={32} />}
-                title="No elements yet"
-                message="Add an element from the toolbar above to get started."
-              />
-            </div>
-          ) : (
-            <>
-              <ConnectionsLayer
-                canvas={canvas}
-                onDeleteConnection={onDeleteConnection}
-              />
-              {canvas.elements.map((el) => (
-                <CanvasElementView
-                  key={el.id}
-                  element={el}
-                  selected={selectedElId === el.id}
-                  commentCount={canvas.comments.filter((c) => c.elementId === el.id).length}
-                  onSelect={() => onSelect(el.id)}
-                  onEdit={() => onEditElement(el)}
-                  onDelete={() => onDeleteElement(el.id)}
-                   onContextMenu={onElementContextMenu ? (e) => {
-                     e.preventDefault();
-                     e.stopPropagation();
-                     const rect = innerRef.current?.getBoundingClientRect();
-                     if (!rect) return;
-                    const s = stateRef.current;
-                    const worldPos = { x: (e.clientX - rect.left) / s.scale, y: (e.clientY - rect.top) / s.scale };
-                    onElementContextMenu(e, el.id, worldPos);
-                  } : undefined}
-                />
-              ))}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function CanvasElementView({
-  element,
-  selected,
-  commentCount,
-  onSelect,
-  onEdit,
-  onDelete,
-  onContextMenu,
-}: {
-  element: CanvasElement;
-  selected: boolean;
-  commentCount: number;
-  onSelect: () => void;
-  onEdit: () => void;
-  onDelete: () => void;
-  onContextMenu?: (e: React.MouseEvent) => void;
-}) {
-  const x = element.x || 0;
-  const y = element.y || 0;
-  const w = element.width || 240;
-  const h = element.height || 120;
-  const color = elementColor(element.type);
-  return (
-    <div
-      className={cn('canvas-element', selected && 'canvas-element-selected')}
-      data-element-id={element.id}
-      style={{
-        left: x,
-        top: y,
-        width: w,
-        minHeight: h,
-        borderColor: color,
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-        onSelect();
-      }}
-      onDoubleClick={(e) => {
-        e.stopPropagation();
-        onEdit();
-      }}
-      onContextMenu={(e) => {
-        if (onContextMenu) {
-          e.stopPropagation();
-          onContextMenu(e);
-        } else {
-          e.preventDefault();
-          if (confirm(`Delete element "${element.title || element.type}"?`)) {
-            onDelete();
-          }
-        }
-      }}
-    >
-      <div className="canvas-element-head" style={{ background: `color-mix(in srgb, ${color} 12%, transparent)` }}>
-        <div className="canvas-element-type">
-          <ElementIcon type={element.type} size={12} />
-          <span style={{ color }}>{element.type}</span>
-        </div>
-        <div className="canvas-element-actions">
-          {commentCount > 0 && (
-            <span className="canvas-element-badge" title={`${commentCount} comments`}>
-              <MessageCircle size={10} />
-              {commentCount}
-            </span>
-          )}
-          <button type="button" className="canvas-element-handle" title="Drag to move" aria-label="Drag">
-            ⋮⋮
-          </button>
-        </div>
-      </div>
-      <div className="canvas-element-title">{element.title || 'Untitled'}</div>
-      {element.content && (
-        <div className="canvas-element-content">{truncate(element.content, 240)}</div>
-      )}
-      {element.status && element.status !== 'open' && (
-        <div className="canvas-element-status">
-          <StatusBadge kind={element.status === 'done' ? 'success' : element.status === 'blocked' ? 'error' : 'info'}>
-            {element.status}
-          </StatusBadge>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ConnectionsLayer({
-  canvas,
-  onDeleteConnection,
-}: {
-  canvas: Canvas;
-  onDeleteConnection: (id: string) => void;
-}) {
-  if (canvas.connections.length === 0) return null;
-  const els = canvas.elements;
-  // Compute bounding box
-  const bbox = els.reduce(
-    (acc, el) => {
-      const ex = el.x || 0;
-      const ey = el.y || 0;
-      const ex2 = ex + (el.width || 240);
-      const ey2 = ey + (el.height || 120);
-      return {
-        minX: Math.min(acc.minX, ex),
-        minY: Math.min(acc.minY, ey),
-        maxX: Math.max(acc.maxX, ex2),
-        maxY: Math.max(acc.maxY, ey2),
-      };
-    },
-    { minX: 0, minY: 0, maxX: 0, maxY: 0 },
-  );
-  const pad = 80;
-  const w = bbox.maxX - bbox.minX + pad * 2;
-  const h = bbox.maxY - bbox.minY + pad * 2;
-  const ox = -bbox.minX + pad;
-  const oy = -bbox.minY + pad;
-  return (
-    <svg
-      className="canvas-connections"
-      width={w}
-      height={h}
-      style={{ left: bbox.minX - pad, top: bbox.minY - pad }}
-    >
-      <defs>
-        <marker id="artifact-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
-          <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
-        </marker>
-      </defs>
-      {canvas.connections.map((c) => {
-        const from = els.find((e) => e.id === c.from || e.id === c.fromElementId);
-        const to = els.find((e) => e.id === c.to || e.id === c.toElementId);
-        if (!from || !to) return null;
-        const x1 = ox + (from.x || 0) + (from.width || 240) / 2;
-        const y1 = oy + (from.y || 0) + (from.height || 120);
-        const x2 = ox + (to.x || 0) + (to.width || 240) / 2;
-        const y2 = oy + (to.y || 0);
-        const midX = (x1 + x2) / 2;
-        const midY = (y1 + y2) / 2;
-        return (
-          <g key={c.id} className="canvas-connection" onClick={() => onDeleteConnection(c.id)}>
-            <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--accent)" strokeWidth={1.5} markerEnd="url(#artifact-arrow)" />
-            {c.label && (
-              <text x={midX} y={midY} className="canvas-connection-label" textAnchor="middle">
-                {c.label}
-              </text>
-            )}
-          </g>
-        );
-      })}
-    </svg>
-  );
-}
-
-// ── Comments panel ────────────────────────────────────────────────────
-
-function CommentsPanel({
-  slug,
-  comments,
-  selectedElId,
-  onAdd,
-  onDelete,
-  onClose,
-}: {
-  slug: string;
-  comments: CanvasComment[];
-  selectedElId: string | null;
-  onAdd: (text: string) => void;
-  onDelete: (cid: string) => void;
-  onClose: () => void;
-}) {
-  const [text, setText] = useState('');
-  return (
-    <aside className="artifacts-comments-panel">
-      <header className="artifacts-comments-panel-head">
-        <h3 className="card-title">
-          <MessageCircle size={14} />
-          {selectedElId ? 'Element comments' : 'Canvas comments'}
-        </h3>
-        <button type="button" className="icon-btn" onClick={onClose} title="Close panel" aria-label="Close">
-          <X size={14} />
-        </button>
-      </header>
-      <div className="artifacts-comments-panel-list">
-        {comments.length === 0 ? (
-          <p className="muted text-sm" style={{ padding: 'var(--space-4)' }}>
-            {selectedElId ? 'No comments on this element yet.' : 'No comments on this artifact yet.'}
-          </p>
-        ) : (
-          comments.map((c) => (
-            <div key={c.id} className="artifact-comment">
-              <div className="artifact-comment-head">
-                <span className="artifact-comment-author mono">{c.author}</span>
-                <span className="artifact-comment-time tabular-nums muted">{formatRelative(c.created)}</span>
-                <button
-                  type="button"
-                  className="icon-btn icon-btn-danger"
-                  aria-label="Delete comment"
-                  onClick={() => onDelete(c.id)}
-                  title="Delete"
-                >
-                  <Trash2 size={10} />
-                </button>
-              </div>
-              <div className="artifact-comment-text">{c.text}</div>
-            </div>
-          ))
-        )}
-      </div>
-      <form
-        className="artifacts-comments-panel-form"
-        onSubmit={(e) => {
-          e.preventDefault();
-          if (!text.trim()) return;
-          onAdd(text.trim());
-          setText('');
-        }}
-      >
-        <label htmlFor="artifacts-comment-input" className="sr-only">
-          {selectedElId ? 'Add a comment to this element' : 'Add a canvas comment'}
-        </label>
-        <textarea
-          id="artifacts-comment-input"
-          className="textarea"
-          rows={2}
-          placeholder={selectedElId ? 'Add a comment to this element…' : 'Add a canvas comment…'}
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          aria-label={selectedElId ? 'Add a comment to this element' : 'Add a canvas comment'}
-        />
-        <Button variant="primary" size="sm" type="submit" disabled={!text.trim()}>
-          <Send size={12} /> Post
-        </Button>
-      </form>
-    </aside>
-  );
-}