egregore-artifacts 0.2.0 → 0.4.0

package/lib/templates/board.js

@@ -0,0 +1,742 @@
+// Board data → React element tree with three views (activity, person, timeline)
+import React from 'react';
+import { ArtifactHeader, SectionCard, ArtifactFooter } from '../components.js';
+import { fonts } from '../tokens.js';
+
+const h = React.createElement;
+
+// ── Priority & Status helpers ──────────────────────────────────
+// All colors resolved as CSS var() strings so dark mode overrides apply.
+
+const PRIORITY_COLORS = {
+  0: 'var(--terracotta)',  // P0 — breaking
+  1: 'var(--green-p1)',    // P1 — this cycle (green)
+  2: 'var(--blue-muted)',  // P2 — next cycle
+  3: 'var(--muted)',       // P3 — parked
+};
+
+const PRIORITY_LABELS = { 0: 'P0', 1: 'P1', 2: 'P2', 3: 'P3' };
+const STATUS_LABELS = { 'todo': 'To Do', 'in-progress': 'In Progress', 'review': 'Review', 'done': 'Done' };
+const STATUS_SIGILS = { 'todo': '□', 'in-progress': '▸', 'review': '◎', 'done': '✓' };
+
+// ── Card component ─────────────────────────────────────────────
+
+function BoardCardEl({ card, showActivity }) {
+  const pColor = PRIORITY_COLORS[card.priority] || 'var(--muted)';
+  const statusBg = card.status === 'done' ? 'var(--success-bg)'
+    : card.status === 'in-progress' ? 'var(--terracotta-chip)'
+    : 'var(--neutral-chip)';
+  const statusFg = card.status === 'done' ? 'var(--success-fg)'
+    : card.status === 'in-progress' ? 'var(--terracotta)'
+    : 'var(--muted)';
+
+  return h('div', {
+    className: 'eg-board-card',
+    'data-card-id': card.id,
+    'data-original-status': card.status,
+    'data-original-priority': card.priority,
+    'data-original-owners': (card.owners || []).join(','),
+    style: {
+      background: 'var(--surface)',
+      border: '1px solid var(--border)',
+      borderLeft: `4px solid ${pColor}`,
+      borderRadius: '8px',
+      padding: '12px 16px',
+      marginBottom: '8px',
+      position: 'relative',
+    },
+  },
+    // Edit toggle (top-right)
+    h('button', {
+      className: 'eg-card-edit-btn',
+      style: {
+        position: 'absolute', top: '8px', right: '8px',
+        background: 'none', border: 'none', cursor: 'pointer',
+        fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)',
+        padding: '2px 6px', borderRadius: '3px',
+      },
+    }, 'edit'),
+    // Title row
+    h('div', { style: { display: 'flex', alignItems: 'baseline', gap: '8px', marginBottom: '6px', paddingRight: '40px' } },
+      h('span', {
+        style: { fontFamily: fonts.mono, fontSize: '11px', color: pColor, fontWeight: 600, flexShrink: 0 },
+      }, PRIORITY_LABELS[card.priority]),
+      h('span', {
+        style: { fontSize: '14px', fontWeight: 500, color: 'var(--black)', flex: 1 },
+      }, card.title),
+    ),
+    // Meta row
+    h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
+      // Status badge
+      h('span', {
+        style: {
+          fontFamily: fonts.mono, fontSize: '11px', padding: '2px 8px',
+          borderRadius: '4px', background: statusBg, color: statusFg,
+        },
+      }, `${STATUS_SIGILS[card.status] || ''} ${STATUS_LABELS[card.status] || card.status}`),
+      // Owners
+      ...(card.owners || []).map((owner, i) =>
+        h('span', {
+          key: `o-${i}`,
+          style: {
+            fontFamily: fonts.mono, fontSize: '11px', color: 'var(--blue-muted)',
+            background: 'var(--blue-chip)', padding: '2px 6px', borderRadius: '3px',
+          },
+        }, owner)
+      ),
+      // Activity badge (for person view)
+      showActivity && card.activity && h('span', {
+        style: { fontFamily: fonts.mono, fontSize: '10px', color: 'var(--muted)' },
+      }, card.subactivity ? `${card.activity} · ${card.subactivity}` : card.activity),
+      // Quest link
+      card.quest && h('span', {
+        style: { fontFamily: fonts.mono, fontSize: '10px', color: 'var(--terracotta)' },
+      }, `→ ${card.quest}`),
+      // Due date
+      card.dueDate && h('span', {
+        style: { fontFamily: fonts.mono, fontSize: '10px', color: 'var(--muted)' },
+      }, `due ${card.dueDate}`),
+    ),
+    // Description
+    card.description && h('p', {
+      style: { fontSize: '13px', color: 'var(--muted)', margin: '6px 0 0', lineHeight: 1.4 },
+    }, card.description),
+    // Inline editor (hidden by default)
+    h('div', {
+      className: 'eg-card-editor',
+      style: {
+        display: 'none', marginTop: '10px', padding: '10px',
+        background: 'var(--neutral-chip)', borderRadius: '6px',
+        fontFamily: fonts.mono, fontSize: '12px',
+      },
+    },
+      h('div', { style: { display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' } },
+        h('label', null,
+          h('span', { style: { color: 'var(--muted)', marginRight: '6px' } }, 'status'),
+          h('select', {
+            className: 'eg-edit-status', 'data-card-id': card.id,
+            defaultValue: card.status,
+            style: { fontFamily: fonts.mono, fontSize: '12px', padding: '2px 4px' },
+          },
+            h('option', { value: 'todo' }, 'todo'),
+            h('option', { value: 'in-progress' }, 'in-progress'),
+            h('option', { value: 'review' }, 'review'),
+            h('option', { value: 'done' }, 'done'),
+          ),
+        ),
+        h('label', null,
+          h('span', { style: { color: 'var(--muted)', marginRight: '6px' } }, 'priority'),
+          h('select', {
+            className: 'eg-edit-priority', 'data-card-id': card.id,
+            defaultValue: String(card.priority),
+            style: { fontFamily: fonts.mono, fontSize: '12px', padding: '2px 4px' },
+          },
+            h('option', { value: '0' }, 'P0'),
+            h('option', { value: '1' }, 'P1'),
+            h('option', { value: '2' }, 'P2'),
+            h('option', { value: '3' }, 'P3'),
+          ),
+        ),
+        h('label', null,
+          h('span', { style: { color: 'var(--muted)', marginRight: '6px' } }, 'owners'),
+          h('input', {
+            className: 'eg-edit-owners', 'data-card-id': card.id,
+            type: 'text',
+            defaultValue: (card.owners || []).join(', '),
+            placeholder: 'comma-separated',
+            style: { fontFamily: fonts.mono, fontSize: '12px', padding: '2px 6px', width: '180px' },
+          }),
+        ),
+      ),
+    ),
+  );
+}
+
+// ── Activity View ──────────────────────────────────────────────
+
+function ActivityView({ activities }) {
+  const sections = [];
+
+  for (const activity of activities) {
+    if (activity.subactivities) {
+      for (const sub of activity.subactivities) {
+        const cards = (sub.cards || []).filter(c => c.status !== 'done');
+        if (cards.length === 0) continue;
+        sections.push(
+          h('div', { key: `${activity.id}-${sub.id}`, style: { marginBottom: '1.5rem' } },
+            h('div', {
+              style: {
+                fontFamily: fonts.mono, fontSize: '12px', textTransform: 'uppercase',
+                letterSpacing: '0.06em', color: 'var(--muted)', marginBottom: '8px', paddingBottom: '4px',
+                borderBottom: '1px solid var(--border)',
+              },
+            }, `${activity.label} · ${sub.label}`),
+            ...cards.sort((a, b) => a.priority - b.priority).map((card, i) =>
+              h(BoardCardEl, { key: i, card, showActivity: false })
+            ),
+          )
+        );
+      }
+    }
+    const cards = (activity.cards || []).filter(c => c.status !== 'done');
+    if (cards.length === 0) continue;
+    sections.push(
+      h('div', { key: activity.id, style: { marginBottom: '1.5rem' } },
+        h('div', {
+          style: {
+            fontFamily: fonts.mono, fontSize: '12px', textTransform: 'uppercase',
+            letterSpacing: '0.06em', color: 'var(--muted)', marginBottom: '8px', paddingBottom: '4px',
+            borderBottom: '1px solid var(--border)',
+          },
+        }, activity.label),
+        ...cards.sort((a, b) => a.priority - b.priority).map((card, i) =>
+          h(BoardCardEl, { key: i, card, showActivity: false })
+        ),
+      )
+    );
+  }
+
+  return h('div', null, ...sections);
+}
+
+// ── Person View ────────────────────────────────────────────────
+
+// ── Priority View ──────────────────────────────────────────────
+
+function PriorityView({ activeCards }) {
+  const groups = [
+    { level: 0, label: 'P0 — Breaking', sub: 'Drop everything' },
+    { level: 1, label: 'P1 — This cycle', sub: 'The working set' },
+    { level: 2, label: 'P2 — Next cycle', sub: 'Scoped, waiting' },
+    { level: 3, label: 'P3 — Parked', sub: 'Captured for later' },
+  ];
+  return h('div', null,
+    ...groups.map(g => {
+      const cards = (activeCards || []).filter(c => c.priority === g.level);
+      if (cards.length === 0) return null;
+      const pColor = PRIORITY_COLORS[g.level];
+      return h('div', { key: g.level, style: { marginBottom: '1.5rem' } },
+        h('div', {
+          style: {
+            display: 'flex', alignItems: 'baseline', gap: '10px',
+            marginBottom: '8px', paddingBottom: '4px',
+            borderBottom: `2px solid ${pColor}`,
+          },
+        },
+          h('span', {
+            style: {
+              fontFamily: fonts.mono, fontSize: '13px', fontWeight: 700,
+              color: pColor, textTransform: 'uppercase', letterSpacing: '0.06em',
+            },
+          }, g.label),
+          h('span', {
+            style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)' },
+          }, `${cards.length} · ${g.sub}`),
+        ),
+        ...cards.map((card, i) => h(BoardCardEl, { key: i, card, showActivity: true })),
+      );
+    }).filter(Boolean),
+  );
+}
+
+// ── Done View ──────────────────────────────────────────────────
+
+function DoneView({ doneCards, weekStart }) {
+  if (!doneCards || doneCards.length === 0) {
+    return h('div', { style: { padding: '2rem', textAlign: 'center', color: 'var(--muted)', fontStyle: 'italic' } },
+      `Nothing done yet this week. The Done tab clears every Monday.`
+    );
+  }
+  const byActivity = {};
+  for (const card of doneCards) {
+    const key = card.subactivity ? `${card.activity} · ${card.subactivity}` : card.activity;
+    if (!byActivity[key]) byActivity[key] = [];
+    byActivity[key].push(card);
+  }
+  return h('div', null,
+    h('div', {
+      style: {
+        fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)',
+        marginBottom: '1rem', padding: '8px 12px', background: 'var(--neutral-chip)',
+        borderRadius: '6px',
+      },
+    }, `Showing ${doneCards.length} done this week (since ${weekStart}). This tab auto-clears every Monday.`),
+    ...Object.entries(byActivity).map(([activityLabel, cards], i) =>
+      h('div', { key: i, style: { marginBottom: '1.5rem' } },
+        h('div', {
+          style: {
+            fontFamily: fonts.mono, fontSize: '12px', textTransform: 'uppercase',
+            letterSpacing: '0.06em', color: 'var(--muted)', marginBottom: '8px', paddingBottom: '4px',
+            borderBottom: '1px solid var(--border)',
+          },
+        }, activityLabel),
+        ...cards.map((card, j) =>
+          h(BoardCardEl, { key: j, card, showActivity: false })
+        ),
+      )
+    ),
+  );
+}
+
+// ── Person View ────────────────────────────────────────────────
+
+function PersonView({ people }) {
+  return h('div', null,
+    ...people.map((person, pi) =>
+      h('div', { key: pi, style: { marginBottom: '1.5rem' } },
+        h('div', {
+          style: {
+            display: 'flex', alignItems: 'baseline', gap: '12px',
+            fontFamily: fonts.mono, fontSize: '12px', textTransform: 'uppercase',
+            letterSpacing: '0.06em', color: 'var(--muted)', marginBottom: '8px', paddingBottom: '4px',
+            borderBottom: '1px solid var(--border)',
+          },
+        },
+          h('span', { style: { color: 'var(--black)', fontWeight: 600 } }, person.name),
+          h('span', null, `${person.stats.total} cards`),
+          person.stats.p0 > 0 && h('span', { style: { color: 'var(--terracotta)' } }, `${person.stats.p0} P0`),
+          person.stats.inProgress > 0 && h('span', null, `${person.stats.inProgress} active`),
+        ),
+        ...person.cards.map((card, ci) =>
+          h(BoardCardEl, { key: ci, card, showActivity: true })
+        ),
+      )
+    ),
+  );
+}
+
+// ── Timeline View ──────────────────────────────────────────────
+
+function shortLabel(title) {
+  // Take first meaningful words, drop filler like "—", stop at 30 chars
+  const cleaned = title.replace(/\s*—\s*.*$/, '').replace(/\s*\+\s*.*$/, '');
+  if (cleaned.length <= 30) return cleaned;
+  const words = cleaned.split(/\s+/);
+  let result = '';
+  for (const w of words) {
+    if ((result + ' ' + w).trim().length > 28) break;
+    result = (result + ' ' + w).trim();
+  }
+  return result || words[0];
+}
+
+function TimelineView({ timeline, allCards }) {
+  if (timeline.length === 0) {
+    return h('p', { style: { color: 'var(--muted)', fontStyle: 'italic' } }, 'No cards with dates set.');
+  }
+
+  // Find date range
+  const dates = timeline.flatMap(c => [c.startDate, c.dueDate].filter(Boolean));
+  const minDate = dates.reduce((a, b) => a < b ? a : b);
+  const maxDate = dates.reduce((a, b) => a > b ? a : b);
+
+  // Snap to week boundaries (Monday)
+  const startRaw = new Date(minDate + 'T00:00:00');
+  const startDay = startRaw.getDay();
+  const mondayOffset = startDay === 0 ? -6 : 1 - startDay;
+  const start = new Date(startRaw.getTime() + mondayOffset * 24 * 60 * 60 * 1000);
+
+  // Ensure at least 2 full weeks
+  const twoWeeksOut = new Date(start.getTime() + 14 * 24 * 60 * 60 * 1000);
+  const endRaw = new Date(maxDate + 'T00:00:00');
+  const effectiveEnd = endRaw > twoWeeksOut ? endRaw : twoWeeksOut;
+  // Snap end to Sunday
+  const endDay = effectiveEnd.getDay();
+  const sundayAdd = endDay === 0 ? 0 : 7 - endDay;
+  const end = new Date(effectiveEnd.getTime() + sundayAdd * 24 * 60 * 60 * 1000);
+  const totalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+
+  const LABEL_WIDTH = '240px';
+  const ROW_HEIGHT = '32px';
+
+  function dayOffset(dateStr) {
+    if (!dateStr) return 0;
+    const d = new Date(dateStr + 'T00:00:00');
+    return Math.max(0, Math.ceil((d - start) / (1000 * 60 * 60 * 24)));
+  }
+
+  function formatDate(d) {
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  }
+
+  // Generate week markers
+  const weeks = [];
+  const cursor = new Date(start.getTime());
+  while (cursor <= end) {
+    weeks.push({
+      label: formatDate(cursor),
+      offset: Math.ceil((cursor - start) / (1000 * 60 * 60 * 24)),
+    });
+    cursor.setDate(cursor.getDate() + 7);
+  }
+
+  // Today marker
+  const today = new Date().toISOString().split('T')[0];
+  const todayOffset = dayOffset(today);
+  const todayPct = (todayOffset / totalDays) * 100;
+
+  return h('div', { style: { width: '100%' } },
+    // Header row: label column + week markers
+    h('div', {
+      style: { display: 'flex', height: '24px', marginBottom: '4px', borderBottom: '1px solid var(--border)' },
+    },
+      // Empty label column
+      h('div', { style: { width: LABEL_WIDTH, flexShrink: 0 } }),
+      // Week header area
+      h('div', { style: { flex: 1, position: 'relative' } },
+        ...weeks.map((w, i) =>
+          h('span', {
+            key: `wh-${i}`,
+            style: {
+              position: 'absolute', left: `${(w.offset / totalDays) * 100}%`,
+              fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)', fontWeight: 500, whiteSpace: 'nowrap',
+            },
+          }, w.label)
+        ),
+        todayPct >= 0 && todayPct <= 100 && h('span', {
+          style: {
+            position: 'absolute', left: `${todayPct}%`, transform: 'translateX(-50%)',
+            fontFamily: fonts.mono, fontSize: '10px', color: 'var(--terracotta)', fontWeight: 700,
+          },
+        }, 'today'),
+      ),
+    ),
+    // Card rows
+    ...timeline.map((card, i) => {
+      const startOff = dayOffset(card.startDate || card.dueDate);
+      const endOff = dayOffset(card.dueDate || card.startDate);
+      const barLeft = (startOff / totalDays) * 100;
+      const barWidth = Math.max(((endOff - startOff) / totalDays) * 100, 2);
+      const pColor = PRIORITY_COLORS[card.priority] || 'var(--muted)';
+      const label = shortLabel(card.title);
+
+      return h('div', {
+        key: i,
+        style: { display: 'flex', alignItems: 'center', height: ROW_HEIGHT, marginBottom: '1px' },
+      },
+        // Left label: priority + short name + owners
+        h('div', {
+          style: {
+            width: LABEL_WIDTH, flexShrink: 0, display: 'flex', alignItems: 'center', gap: '6px',
+            paddingRight: '12px', overflow: 'hidden',
+          },
+        },
+          h('span', {
+            style: { fontFamily: fonts.mono, fontSize: '10px', color: pColor, fontWeight: 700, flexShrink: 0 },
+          }, PRIORITY_LABELS[card.priority]),
+          h('span', {
+            style: {
+              fontSize: '12px', color: 'var(--dark)', whiteSpace: 'nowrap',
+              overflow: 'hidden', textOverflow: 'ellipsis', flex: 1,
+            },
+          }, label),
+          h('span', {
+            style: { fontFamily: fonts.mono, fontSize: '10px', color: 'var(--muted)', flexShrink: 0, whiteSpace: 'nowrap' },
+          }, (card.owners || []).slice(0, 2).join(', ')),
+        ),
+        // Gantt area
+        h('div', { style: { flex: 1, position: 'relative', height: '100%' } },
+          // Week grid lines
+          ...weeks.map((w, wi) =>
+            h('div', {
+              key: `g-${wi}`,
+              style: {
+                position: 'absolute', left: `${(w.offset / totalDays) * 100}%`,
+                top: 0, bottom: 0, width: '1px', background: 'var(--border)', opacity: 0.3,
+              },
+            })
+          ),
+          // Today line
+          todayPct >= 0 && todayPct <= 100 && h('div', {
+            style: {
+              position: 'absolute', left: `${todayPct}%`, top: 0, bottom: 0,
+              width: '2px', background: 'var(--terracotta)', opacity: 0.5, zIndex: 1,
+            },
+          }),
+          // Bar
+          h('div', {
+            style: {
+              position: 'absolute', left: `${barLeft}%`, width: `${barWidth}%`,
+              top: '6px', bottom: '6px', borderRadius: '4px',
+              background: pColor, opacity: card.status === 'done' ? 0.25 : 0.75,
+              minWidth: '6px',
+            },
+          }),
+        ),
+      );
+    }),
+  );
+}
+
+// ── Summary Metrics ────────────────────────────────────────────
+
+function SummaryBar({ summary }) {
+  const { byPriority, byStatus, totalCards } = summary;
+  return h('div', {
+    style: {
+      display: 'flex', gap: '16px', flexWrap: 'wrap', padding: '12px 0',
+      fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)',
+    },
+  },
+    h('span', { style: { fontWeight: 600, color: 'var(--black)' } }, `${totalCards} cards`),
+    byPriority.P0 > 0 && h('span', { style: { color: PRIORITY_COLORS[0] } }, `${byPriority.P0} P0`),
+    byPriority.P1 > 0 && h('span', { style: { color: PRIORITY_COLORS[1] } }, `${byPriority.P1} P1`),
+    byPriority.P2 > 0 && h('span', { style: { color: PRIORITY_COLORS[2] } }, `${byPriority.P2} P2`),
+    byPriority.P3 > 0 && h('span', null, `${byPriority.P3} P3`),
+    h('span', null, '·'),
+    h('span', null, `${byStatus['in-progress']} active`),
+    h('span', null, `${byStatus.todo} to do`),
+    byStatus.review > 0 && h('span', null, `${byStatus.review} in review`),
+    byStatus.done > 0 && h('span', null, `${byStatus.done} done`),
+  );
+}
+
+// ── Tab Switcher (rendered as HTML with inline JS) ─────────────
+
+function ViewTabs({ doneCount }) {
+  const tabs = [
+    { key: 'activity', label: 'Activity' },
+    { key: 'priority', label: 'Priority' },
+    { key: 'person', label: 'Person' },
+    { key: 'timeline', label: 'Timeline' },
+    { key: 'done', label: `Done${doneCount > 0 ? ` (${doneCount})` : ''}` },
+  ];
+  return h('div', {
+    style: {
+      display: 'flex', gap: '4px', marginBottom: '1.5rem',
+      borderBottom: '2px solid var(--border)', paddingBottom: '0',
+    },
+  },
+    ...tabs.map(tab =>
+      h('button', {
+        key: tab.key,
+        className: 'eg-board-tab',
+        'data-view': tab.key,
+        style: {
+          fontFamily: fonts.mono, fontSize: '13px', padding: '8px 16px',
+          background: 'none', border: 'none', borderBottom: '2px solid transparent',
+          marginBottom: '-2px', cursor: 'pointer', color: 'var(--muted)',
+        },
+      }, tab.label)
+    ),
+  );
+}
+
+// ── Main Template ──────────────────────────────────────────────
+
+export function boardTemplate(data) {
+  const sections = [];
+
+  // Header
+  sections.push(
+    h(ArtifactHeader, {
+      key: 'header',
+      title: data.title,
+      type: 'board',
+      date: data.date,
+      author: data.updatedBy,
+      status: 'active',
+      priority: 0,
+      projects: [],
+    })
+  );
+
+  // Summary bar
+  sections.push(h(SummaryBar, { key: 'summary', summary: data.summary }));
+
+  // Tab switcher
+  sections.push(h(ViewTabs, { key: 'tabs', doneCount: (data.doneCards || []).length }));
+
+  // Activity view (default visible)
+  sections.push(
+    h('div', { key: 'view-activity', className: 'eg-board-view', 'data-view': 'activity' },
+      h(ActivityView, { activities: data.activities })
+    )
+  );
+
+  // Priority view (hidden by default)
+  sections.push(
+    h('div', { key: 'view-priority', className: 'eg-board-view', 'data-view': 'priority', style: { display: 'none' } },
+      h(PriorityView, { activeCards: data.activeCards })
+    )
+  );
+
+  // Person view (hidden by default)
+  sections.push(
+    h('div', { key: 'view-person', className: 'eg-board-view', 'data-view': 'person', style: { display: 'none' } },
+      h(PersonView, { people: data.people })
+    )
+  );
+
+  // Timeline view (hidden by default)
+  sections.push(
+    h('div', { key: 'view-timeline', className: 'eg-board-view', 'data-view': 'timeline', style: { display: 'none' } },
+      h(TimelineView, { timeline: data.timeline, allCards: data.allCards })
+    )
+  );
+
+  // Done view (hidden by default)
+  sections.push(
+    h('div', { key: 'view-done', className: 'eg-board-view', 'data-view': 'done', style: { display: 'none' } },
+      h(DoneView, { doneCards: data.doneCards || [], weekStart: data.weekStart })
+    )
+  );
+
+  // Inline script for tab switching
+  sections.push(
+    h('script', {
+      key: 'tabs-script',
+      dangerouslySetInnerHTML: {
+        __html: `
+(function() {
+  var tabs = document.querySelectorAll('.eg-board-tab');
+  var views = document.querySelectorAll('.eg-board-view');
+  function activate(viewName) {
+    tabs.forEach(function(t) {
+      t.style.color = t.dataset.view === viewName ? 'var(--black)' : 'var(--muted)';
+      t.style.borderBottomColor = t.dataset.view === viewName ? 'var(--terracotta)' : 'transparent';
+      t.style.fontWeight = t.dataset.view === viewName ? '600' : '400';
+    });
+    views.forEach(function(v) {
+      v.style.display = v.dataset.view === viewName ? 'block' : 'none';
+    });
+  }
+  tabs.forEach(function(t) { t.addEventListener('click', function() { activate(t.dataset.view); }); });
+  activate('activity');
+})();
+`,
+      },
+    })
+  );
+
+  // Floating "Copy changes" button — live editor output
+  sections.push(
+    h('button', {
+      key: 'copy-changes-btn',
+      id: 'eg-copy-changes-btn',
+      style: {
+        position: 'fixed', bottom: '24px', right: '24px', zIndex: 1000,
+        background: 'var(--terracotta)', color: 'white', border: 'none',
+        borderRadius: '24px', padding: '12px 20px', fontFamily: fonts.mono,
+        fontSize: '13px', fontWeight: 600, cursor: 'pointer',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'none',
+      },
+    }, 'Copy 0 changes')
+  );
+
+  // Interactive editor script — toggle editors, sync across duplicate cards,
+  // track changes, produce paste-back command on click
+  sections.push(
+    h('script', {
+      key: 'editor-script',
+      dangerouslySetInnerHTML: {
+        __html: `
+(function() {
+  var editBtns = document.querySelectorAll('.eg-card-edit-btn');
+  var copyBtn = document.getElementById('eg-copy-changes-btn');
+
+  // Toggle editor — scope to clicked card's parent (each card appears in
+  // multiple views, so global querySelector would target the wrong one)
+  editBtns.forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      var cardEl = btn.closest('.eg-board-card');
+      if (!cardEl) return;
+      var editor = cardEl.querySelector('.eg-card-editor');
+      if (!editor) return;
+      var isOpen = editor.style.display === 'block';
+      editor.style.display = isOpen ? 'none' : 'block';
+      btn.textContent = isOpen ? 'edit' : 'close';
+    });
+  });
+
+  // Sync edits across duplicate card instances (same card in Activity + Priority + Person)
+  function syncEdit(event) {
+    var input = event.target;
+    if (!input.classList) return;
+    var cls = input.className || '';
+    if (!cls.includes('eg-edit-')) return;
+    var cardId = input.dataset.cardId;
+    if (!cardId) return;
+    var className = cls.split(' ').find(function(c){return c.startsWith('eg-edit-');});
+    var selector = '.' + className + '[data-card-id="' + cardId + '"]';
+    document.querySelectorAll(selector).forEach(function(el) {
+      if (el !== input) el.value = input.value;
+    });
+  }
+  document.addEventListener('change', syncEdit);
+  document.addEventListener('input', syncEdit);
+
+  function collectChanges() {
+    var changes = [];
+    var seen = {};
+    document.querySelectorAll('.eg-board-card').forEach(function(card) {
+      var id = card.dataset.cardId;
+      if (seen[id]) return;
+      seen[id] = true;
+      var origStatus = card.dataset.originalStatus;
+      var origPriority = card.dataset.originalPriority;
+      var origOwners = card.dataset.originalOwners;
+      var statusEl = card.querySelector('.eg-edit-status');
+      var priorityEl = card.querySelector('.eg-edit-priority');
+      var ownersEl = card.querySelector('.eg-edit-owners');
+      if (!statusEl) return;
+      var newStatus = statusEl.value;
+      var newPriority = priorityEl.value;
+      var newOwners = ownersEl.value.split(',').map(function(s){return s.trim();}).filter(Boolean).join(',');
+      var cardChange = { id: id, changes: [] };
+      if (newStatus !== origStatus) cardChange.changes.push('status → ' + newStatus);
+      if (newPriority !== origPriority) cardChange.changes.push('priority → P' + newPriority);
+      if (newOwners !== origOwners) cardChange.changes.push('owners → [' + newOwners + ']');
+      if (cardChange.changes.length > 0) changes.push(cardChange);
+    });
+    return changes;
+  }
+
+  function updateCopyBtn() {
+    var changes = collectChanges();
+    if (changes.length === 0) {
+      copyBtn.style.display = 'none';
+      return;
+    }
+    copyBtn.style.display = 'block';
+    var total = changes.reduce(function(n, c) { return n + c.changes.length; }, 0);
+    copyBtn.textContent = 'Copy ' + total + ' change' + (total === 1 ? '' : 's');
+  }
+  document.addEventListener('change', updateCopyBtn);
+  document.addEventListener('input', updateCopyBtn);
+
+  copyBtn.addEventListener('click', function() {
+    var changes = collectChanges();
+    var lines = ['Apply these board changes:', ''];
+    changes.forEach(function(c) {
+      lines.push('- ' + c.id + ':');
+      c.changes.forEach(function(ch) { lines.push('    ' + ch); });
+    });
+    var text = lines.join('\\n');
+    navigator.clipboard.writeText(text).then(function() {
+      var original = copyBtn.textContent;
+      copyBtn.textContent = '✓ Copied — paste in Claude';
+      copyBtn.style.background = '#2e7d32';
+      setTimeout(function() {
+        copyBtn.textContent = original;
+        copyBtn.style.background = 'var(--terracotta)';
+      }, 2000);
+    });
+  });
+})();
+`,
+      },
+    })
+  );
+
+  // Footer
+  sections.push(
+    h(ArtifactFooter, {
+      key: 'footer',
+      generatedAt: new Date().toISOString(),
+      source: 'memory/board/board.json',
+    })
+  );
+
+  return h('div', null, ...sections);
+}