egregore-artifacts 0.3.0 → 0.5.0

package/lib/parsers/board.js

@@ -25,7 +25,29 @@ export function parseBoard(input) {
 
   const today = new Date().toISOString().split('T')[0];
 
-  // Flatten all cards from the hierarchy for person and timeline views
+  // Compute most recent Monday for weekly Done-tab auto-cleanse
+  const now = new Date();
+  const dayOfWeek = now.getDay();
+  const daysSinceMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+  const weekStart = new Date(now);
+  weekStart.setHours(0, 0, 0, 0);
+  weekStart.setDate(weekStart.getDate() - daysSinceMonday);
+  const weekStartStr = weekStart.toISOString().split('T')[0];
+
+  // Auto-archive: filter out done cards completed before this Monday
+  for (const activity of data.activities || []) {
+    const filterStale = (cards) => (cards || []).filter(
+      c => !(c.status === 'done' && c.completedAt && c.completedAt < weekStartStr)
+    );
+    if (activity.cards) activity.cards = filterStale(activity.cards);
+    if (activity.subactivities) {
+      for (const sub of activity.subactivities) {
+        if (sub.cards) sub.cards = filterStale(sub.cards);
+      }
+    }
+  }
+
+  // Flatten all cards from the hierarchy
   const allCards = [];
   for (const activity of data.activities || []) {
     if (activity.subactivities) {
@@ -40,9 +62,13 @@ export function parseBoard(input) {
     }
   }
 
-  // Group by person
+  // Split active vs done for different views
+  const activeCards = allCards.filter(c => c.status !== 'done');
+  const doneCards = allCards.filter(c => c.status === 'done');
+
+  // Group active cards by person
   const personMap = {};
-  for (const card of allCards) {
+  for (const card of activeCards) {
     for (const owner of card.owners || []) {
       if (!personMap[owner]) personMap[owner] = [];
       personMap[owner].push(card);
@@ -66,8 +92,8 @@ export function parseBoard(input) {
     }))
     .sort((a, b) => b.stats.p0 - a.stats.p0 || b.stats.total - a.stats.total);
 
-  // Timeline: cards with dates, sorted by startDate
-  const timeline = allCards
+  // Timeline: active cards with dates, sorted by startDate
+  const timeline = activeCards
     .filter(c => c.startDate || c.dueDate)
     .sort((a, b) => (a.startDate || a.dueDate || '').localeCompare(b.startDate || b.dueDate || ''));
 
@@ -102,6 +128,9 @@ export function parseBoard(input) {
     updatedAt: data.updated,
     activities: data.activities,
     allCards,
+    activeCards,
+    doneCards,
+    weekStart: weekStartStr,
     people,
     timeline,
     summary,

package/lib/parsers/handoff.js

@@ -3,28 +3,36 @@
 // Detects referenced memory files and inlines their content
 import fs from 'node:fs';
 import path from 'node:path';
-import { execSync } from 'node:child_process';
+import { execSync, execFileSync } from 'node:child_process';
 
 export function parseHandoff(input) {
   let content;
   let inputDir = null;
+  let inputPath = null;
 
   if (typeof input === 'string' && (input.endsWith('.md') || input.includes('/'))) {
     if (!fs.existsSync(input)) throw new Error(`File not found: ${input}`);
     content = fs.readFileSync(input, 'utf-8');
     inputDir = path.dirname(input);
+    inputPath = input;
   } else if (typeof input === 'string') {
     content = input;
   } else {
     throw new Error('parseHandoff expects a file path or markdown string');
   }
 
-  const title = extractTitle(content);
-  const meta = extractMeta(content);
-  const sections = extractSections(content);
+  // Resolve graph subgraph first (reads the raw content), then strip the
+  // embedded block so it doesn't leak into section bodies or rendered text.
+  const gitRoot = findGitRoot();
+  const subgraph = resolveSubgraph({ content, inputPath, gitRoot });
+  const cleanContent = content.replace(/<!--\s*subgraph[\s\S]*?-->/g, '').trim();
+
+  const title = extractTitle(cleanContent);
+  const meta = extractMeta(cleanContent);
+  const sections = extractSections(cleanContent);
 
   // Detect referenced files (memory/*.md paths in backticks) and inline them
-  const attachments = extractReferencedFiles(content, inputDir);
+  const attachments = extractReferencedFiles(cleanContent, inputDir);
 
   return {
     title,
@@ -37,6 +45,7 @@ export function parseHandoff(input) {
     entryPoints: extractBullets(sections['Entry Points'] || ''),
     context: sections.Context || null,
     attachments,
+    subgraph,
     // Catch-all for non-standard sections
     extraSections: Object.entries(sections)
       .filter(([k]) => !['Summary', 'Briefing', 'Current State', 'Decisions',
@@ -47,6 +56,141 @@ export function parseHandoff(input) {
   };
 }
 
+// ── Subgraph resolution ────────────────────────────────────────────
+//
+// The subgraph shows the handoff's *graph-only* context — things not already
+// in the markdown header (author/recipients/project). Source priority:
+//   1. Embedded <!-- subgraph ... --> block if present (defensive — we don't
+//      write one today, but a future caller could snapshot manually).
+//   2. Live Cypher query via bin/graph.sh in connected mode.
+// If neither yields real data, the subgraph is null and the template skips
+// the section entirely — no "degraded" placeholder.
+
+function resolveSubgraph({ content, inputPath, gitRoot }) {
+  const embedded = extractEmbeddedSubgraph(content);
+
+  let live = null;
+  if (inputPath && gitRoot && isConnectedMode(gitRoot)) {
+    const sessionId = deriveSessionIdFromPath(inputPath);
+    if (sessionId) live = tryLiveSubgraphQuery(sessionId, gitRoot);
+  }
+
+  const sourced = live || embedded;
+  if (sourced && hasAnySubgraphData(sourced)) return sourced;
+  return null;
+}
+
+function extractEmbeddedSubgraph(content) {
+  const m = content.match(/<!--\s*subgraph\s*([\s\S]*?)-->/);
+  if (!m) return null;
+  try {
+    return JSON.parse(m[1].trim());
+  } catch {
+    return null;
+  }
+}
+
+function hasAnySubgraphData(sg) {
+  if (!sg) return false;
+  return (sg.continues && sg.continues.length)
+    || (sg.implementsHandoff && sg.implementsHandoff.length)
+    || (sg.implementedBy && sg.implementedBy.length)
+    || (sg.quests && sg.quests.length)
+    || (sg.artifacts && sg.artifacts.length)
+    || (sg.prs && sg.prs.length);
+}
+
+function findGitRoot() {
+  try {
+    return execSync('git rev-parse --show-toplevel 2>/dev/null', { encoding: 'utf-8' }).trim();
+  } catch {
+    return null;
+  }
+}
+
+function isConnectedMode(gitRoot) {
+  try {
+    const configPath = path.join(gitRoot, 'egregore.json');
+    if (!fs.existsSync(configPath)) return false;
+    const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+    if (config.mode === 'local') return false;
+    return Boolean(config.api_url) || config.mode === 'connected';
+  } catch {
+    return false;
+  }
+}
+
+function deriveSessionIdFromPath(filePath) {
+  // memory/handoffs/2026-04/22-author-topic.md → 2026-04-22-author-topic
+  const base = path.basename(filePath, '.md');
+  const dir = path.basename(path.dirname(filePath));
+  if (/^\d{4}-\d{2}$/.test(dir)) return `${dir}-${base}`;
+  // Filename already starts with YYYY-MM-DD
+  if (/^\d{4}-\d{2}-\d{2}-/.test(base)) return base;
+  return null;
+}
+
+function tryLiveSubgraphQuery(sessionId, gitRoot) {
+  const cypher = `MATCH (s:Session {id: $sessionId})
+OPTIONAL MATCH (s)-[:IMPLEMENTS]->(prior:Session)
+OPTIONAL MATCH (prior)-[:BY]->(priorAuthor:Person)
+OPTIONAL MATCH (later:Session)-[:IMPLEMENTS]->(s)
+OPTIONAL MATCH (later)-[:BY]->(laterAuthor:Person)
+OPTIONAL MATCH (s)-[:CONTINUES]->(cont:Session)
+OPTIONAL MATCH (cont)-[:BY]->(contAuthor:Person)
+OPTIONAL MATCH (s)-[:ADVANCED|INVOLVES]->(quest:Quest)
+OPTIONAL MATCH (s)-[:HAS_ACTIVITY]->(art:Artifact)
+OPTIONAL MATCH (s)-[:PRODUCED]->(pr:PR)
+RETURN
+  collect(DISTINCT {id:prior.id, topic:prior.topic, author:priorAuthor.name}) AS implementsHandoff,
+  collect(DISTINCT {id:later.id, topic:later.topic, author:laterAuthor.name}) AS implementedBy,
+  collect(DISTINCT {id:cont.id,  topic:cont.topic,  author:contAuthor.name})  AS continues,
+  collect(DISTINCT {id:quest.id, title:quest.title})                          AS quests,
+  collect(DISTINCT {id:art.id, title:art.title, type:art.type, path:art.path}) AS artifacts,
+  collect(DISTINCT {id:pr.id, number:pr.number, title:pr.title, repo:pr.repo}) AS prs`;
+
+  try {
+    const out = execFileSync(
+      'bash',
+      [path.join(gitRoot, 'bin/graph.sh'), 'query', cypher, JSON.stringify({ sessionId })],
+      { encoding: 'utf-8', timeout: 3000, stdio: ['ignore', 'pipe', 'ignore'] }
+    );
+    return parseGraphResponse(out);
+  } catch {
+    return null;
+  }
+}
+
+function parseGraphResponse(raw) {
+  if (!raw || !raw.trim()) return null;
+  let body;
+  try {
+    body = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  const result = body.results?.[0] || body;
+  const fields = result.fields;
+  const row = result.values?.[0];
+  if (!Array.isArray(fields) || !Array.isArray(row)) return null;
+
+  const obj = {};
+  fields.forEach((f, i) => { obj[f] = row[i]; });
+
+  // OPTIONAL MATCH + collect() emits sentinel {id: null, ...} entries — strip.
+  const clean = (list, ...keys) => Array.isArray(list)
+    ? list.filter(x => x && keys.some(k => x[k] != null))
+    : [];
+  return {
+    implementsHandoff: clean(obj.implementsHandoff, 'id'),
+    implementedBy:     clean(obj.implementedBy,     'id'),
+    continues:         clean(obj.continues,         'id'),
+    quests:            clean(obj.quests,            'id', 'title'),
+    artifacts:         clean(obj.artifacts,         'id', 'title', 'path'),
+    prs:               clean(obj.prs,               'id', 'number'),
+  };
+}
+
 function extractReferencedFiles(content, inputDir) {
   const attachments = [];
   // Find backtick-wrapped paths that look like memory files

package/lib/templates/board.js

@@ -31,6 +31,11 @@ function BoardCardEl({ card, showActivity }) {
     : '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)',
@@ -38,10 +43,21 @@ function BoardCardEl({ card, showActivity }) {
       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' } },
+    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]),
@@ -85,6 +101,54 @@ function BoardCardEl({ card, showActivity }) {
     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' },
+          }),
+        ),
+      ),
+    ),
   );
 }
 
@@ -96,7 +160,7 @@ function ActivityView({ activities }) {
   for (const activity of activities) {
     if (activity.subactivities) {
       for (const sub of activity.subactivities) {
-        const cards = sub.cards || [];
+        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' } },
@@ -114,7 +178,7 @@ function ActivityView({ activities }) {
         );
       }
     }
-    const cards = activity.cards || [];
+    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' } },
@@ -137,6 +201,85 @@ function ActivityView({ activities }) {
 
 // ── 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) =>
@@ -350,25 +493,31 @@ function SummaryBar({ summary }) {
 
 // ── Tab Switcher (rendered as HTML with inline JS) ─────────────
 
-function ViewTabs() {
-  // The tabs work via a small inline script injected in the shell
+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',
     },
   },
-    ['Activity', 'Person', 'Timeline'].map(tab =>
+    ...tabs.map(tab =>
       h('button', {
-        key: tab,
+        key: tab.key,
         className: 'eg-board-tab',
-        'data-view': tab.toLowerCase(),
+        '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)
+      }, tab.label)
     ),
   );
 }
@@ -396,7 +545,7 @@ export function boardTemplate(data) {
   sections.push(h(SummaryBar, { key: 'summary', summary: data.summary }));
 
   // Tab switcher
-  sections.push(h(ViewTabs, { key: 'tabs' }));
+  sections.push(h(ViewTabs, { key: 'tabs', doneCount: (data.doneCards || []).length }));
 
   // Activity view (default visible)
   sections.push(
@@ -405,6 +554,13 @@ export function boardTemplate(data) {
     )
   );
 
+  // 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' } },
@@ -419,6 +575,13 @@ export function boardTemplate(data) {
     )
   );
 
+  // 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', {
@@ -446,6 +609,126 @@ export function boardTemplate(data) {
     })
   );
 
+  // 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, {

package/lib/templates/handoff.js

@@ -6,6 +6,7 @@ import {
 } from '../components.js';
 import { renderMarkdownLite } from '../markdown.js';
 import { fonts } from '../tokens.js';
+import { renderSubgraph } from './subgraph.js';
 
 const h = React.createElement;
 
@@ -87,6 +88,16 @@ export function handoffTemplate(handoff) {
     );
   }
 
+  // Subgraph — handoff's neighborhood in the knowledge graph.
+  // Rendered as static SVG; renderSubgraph returns null if there's nothing to show.
+  const subgraphNode = renderSubgraph({
+    subgraph: handoff.subgraph,
+    handoffTopic: handoff.title,
+  });
+  if (subgraphNode) {
+    sections.push(React.cloneElement(subgraphNode, { key: 'subgraph' }));
+  }
+
   // Summary / Briefing
   if (handoff.summary) {
     sections.push(

package/lib/templates/subgraph.js

@@ -0,0 +1,452 @@
+// Handoff subgraph → inline static SVG
+//
+// Shows the graph-only context around a handoff — things the header doesn't
+// already say. Author/recipients/project are in the metadata row above this.
+//
+// Central spine is VERTICAL so the SVG fits comfortably in the ~720px
+// artifact column without scaling down and losing legibility:
+//
+//                [prior session]
+//                  by Oz
+//                    ↓ implements
+//                ┌──────────────┐
+//                │ THIS HANDOFF │
+//                │    Topic     │
+//                └──────────────┘
+//                    ↓ picked up
+//                [later session]
+//                  by Ali
+//
+//   PRODUCED
+//   [PR #603 · egregore]  [harvest · …]  [decision · …]
+//
+//   PART OF         (shown only when quests exist — rare)
+//   [quest · Launch Priorities]  [quest · Activity Wall]
+//
+// Any zone with no data is skipped entirely; if no zones have data, the
+// whole section is skipped (parser returns null upstream).
+//
+// Zero runtime JS. Colors emitted as var(--token) so dark-mode reaches them.
+import React from 'react';
+import { fonts } from '../tokens.js';
+
+const h = React.createElement;
+
+const CHAR_W_SANS_12 = 7.0;
+const CHAR_W_SANS_13 = 7.6;
+const CHAR_W_MONO_10 = 6.0;
+const CHAR_W_MONO_9  = 5.4;
+
+const PILL_H = 34;
+const PILL_PAD_X = 26;
+const PILL_MIN_W = 160;
+const PILL_MAX_W = 360;
+
+const HANDOFF_H = 56;
+const HANDOFF_MIN_W = 220;
+const HANDOFF_MAX_W = 420;
+
+const VERT_EDGE = 42;       // vertical space for an arrow + its label
+const SIDE_PAD = 24;
+const ZONE_GAP = 26;
+const CAPTION_H = 16;
+const CHIP_H = 26;
+const SUB_LINE_H = 14;
+
+const LABEL_TRUNCATE = 50;
+
+export function renderSubgraph({ subgraph, handoffTopic }) {
+  if (!subgraph) return null;
+
+  const {
+    continues = [],
+    implementsHandoff = [],
+    implementedBy = [],
+    quests = [],
+    artifacts = [],
+    prs = [],
+  } = subgraph;
+
+  const priorNode = implementsHandoff[0] || continues[0] || null;
+  const priorLabel = implementsHandoff[0] ? 'implements' : (continues[0] ? 'continues' : null);
+  const priorMore = (implementsHandoff.length + continues.length) - (priorNode ? 1 : 0);
+
+  const laterNode = implementedBy[0] || null;
+  const laterMore = implementedBy.length - (laterNode ? 1 : 0);
+
+  const shownQuests = quests.slice(0, 4);
+  const questOverflow = quests.length - shownQuests.length;
+
+  const outputs = [
+    ...prs.slice(0, 4).map(p => ({
+      label: `PR #${p.number || p.id}${p.repo ? ` · ${p.repo}` : ''}`,
+      tone: 'pr',
+    })),
+    ...artifacts.slice(0, 4).map(a => ({
+      label: `${a.type || 'artifact'} · ${truncate(a.title || a.id || a.path || 'artifact', 32)}`,
+      tone: 'artifact',
+    })),
+  ].slice(0, 6);
+  const outputsOverflow = (prs.length + artifacts.length) - outputs.length;
+
+  const hasQuests = shownQuests.length > 0;
+  const hasLineage = Boolean(priorNode || laterNode);
+  const hasOutputs = outputs.length > 0;
+
+  if (!hasQuests && !hasLineage && !hasOutputs) return null;
+
+  // ── Widths ──────────────────────────────────────────────────────
+  const handoffText = truncate(handoffTopic || 'this handoff', 60);
+  const handoffW = clamp(
+    textW(handoffText, CHAR_W_SANS_13) + PILL_PAD_X + 16,
+    HANDOFF_MIN_W, HANDOFF_MAX_W,
+  );
+
+  const priorText = priorNode ? truncate(priorNode.topic || priorNode.id || '', LABEL_TRUNCATE) : '';
+  const priorW = priorNode ? pillWidth(priorText) : 0;
+
+  const laterText = laterNode ? truncate(laterNode.topic || laterNode.id || '', LABEL_TRUNCATE) : '';
+  const laterW = laterNode ? pillWidth(laterText) : 0;
+
+  // Quests and outputs laid out in horizontal rows with wrap
+  const questRows = packRows(
+    shownQuests.map(q => ({
+      label: `quest · ${truncate(q.title || q.id || 'quest', 32)}`,
+      tone: 'quest',
+      w: chipWidth(`quest · ${truncate(q.title || q.id || 'quest', 32)}`),
+    })),
+    640,
+  );
+  const outputRows = packRows(
+    outputs.map(o => ({ ...o, w: chipWidth(o.label) })),
+    640,
+  );
+
+  // Content width = max of everything
+  const lineageW = Math.max(priorW, handoffW, laterW);
+  const questsMaxRowW = questRows.reduce((m, r) => Math.max(m, rowWidth(r)), 0)
+    + (questOverflow > 0 ? 80 : 0);
+  const outputsMaxRowW = outputRows.reduce((m, r) => Math.max(m, rowWidth(r)), 0)
+    + (outputsOverflow > 0 ? 80 : 0);
+
+  const contentW = Math.max(lineageW, questsMaxRowW, outputsMaxRowW, 420);
+  const VIEW_W = contentW + SIDE_PAD * 2;
+  const CX = VIEW_W / 2;
+
+  // ── Vertical layout ─────────────────────────────────────────────
+  const children = [];
+  let cy = 14;
+
+  // Zone: Lineage (vertical spine)
+  if (hasLineage) {
+    if (priorNode) {
+      const y = cy;
+      const x = CX - priorW / 2;
+      children.push(pill({
+        key: 'prior', x, y, width: priorW,
+        label: priorText, tone: 'neutral',
+      }));
+      if (priorNode.author) {
+        children.push(subLabel({
+          key: 'prior-sub', x: CX, y: y + PILL_H + 12,
+          text: `by ${priorNode.author}`,
+        }));
+      }
+      cy += PILL_H + SUB_LINE_H;
+
+      // Edge from prior to handoff (arrow pointing down, out of prior toward this)
+      const e1 = cy + 2;
+      const e2 = cy + VERT_EDGE - 6;
+      children.push(h('line', {
+        key: 'prior-edge',
+        x1: CX, y1: e1, x2: CX, y2: e2,
+        stroke: 'var(--border)', strokeWidth: 1.5,
+        markerEnd: 'url(#sg-arrow)',
+      }));
+      const lbl = `${priorLabel}${priorMore > 0 ? ` · +${priorMore}` : ''}`;
+      children.push(edgeLabel({
+        key: 'prior-edge-lbl',
+        x: CX + 10, y: (e1 + e2) / 2 + 3,
+        text: lbl, anchor: 'start',
+      }));
+      cy += VERT_EDGE;
+    }
+
+    // THIS HANDOFF
+    const hx = CX - handoffW / 2;
+    const hy = cy;
+    children.push(h('rect', {
+      key: 'main-bg',
+      x: hx, y: hy, width: handoffW, height: HANDOFF_H,
+      rx: 10, ry: 10,
+      fill: 'var(--terracotta-chip)',
+      stroke: 'var(--terracotta)', strokeWidth: 1.5,
+    }));
+    children.push(h('text', {
+      key: 'main-caption',
+      x: CX, y: hy + 17,
+      textAnchor: 'middle',
+      fontFamily: fonts.mono, fontSize: 9,
+      fill: 'var(--terracotta)',
+      letterSpacing: '0.08em',
+    }, 'THIS HANDOFF'));
+    children.push(h('text', {
+      key: 'main-title',
+      x: CX, y: hy + 39,
+      textAnchor: 'middle',
+      fontFamily: fonts.sans, fontSize: 13, fontWeight: 500,
+      fill: 'var(--black)',
+    }, handoffText));
+    cy += HANDOFF_H;
+
+    if (laterNode) {
+      const e1 = cy + 6;
+      const e2 = cy + VERT_EDGE - 2;
+      children.push(h('line', {
+        key: 'later-edge',
+        x1: CX, y1: e1, x2: CX, y2: e2,
+        stroke: 'var(--border)', strokeWidth: 1.5,
+        markerEnd: 'url(#sg-arrow)',
+      }));
+      const lbl = `picked up${laterMore > 0 ? ` · +${laterMore}` : ''}`;
+      children.push(edgeLabel({
+        key: 'later-edge-lbl',
+        x: CX + 10, y: (e1 + e2) / 2 + 3,
+        text: lbl, anchor: 'start',
+      }));
+      cy += VERT_EDGE;
+
+      const y = cy;
+      const x = CX - laterW / 2;
+      children.push(pill({
+        key: 'later', x, y, width: laterW,
+        label: laterText, tone: 'neutral',
+      }));
+      if (laterNode.author) {
+        children.push(subLabel({
+          key: 'later-sub', x: CX, y: y + PILL_H + 12,
+          text: `by ${laterNode.author}`,
+        }));
+      }
+      cy += PILL_H + SUB_LINE_H;
+    }
+
+    cy += ZONE_GAP;
+  }
+
+  // Zone: PRODUCED (before quests — outputs are the everyday signal)
+  if (hasOutputs) {
+    children.push(caption({ key: 'out-cap', x: SIDE_PAD, y: cy + 10, text: 'PRODUCED' }));
+    cy += CAPTION_H;
+    const rows = outputRows;
+    rows.forEach((row, rIdx) => {
+      const rowW = rowWidth(row);
+      let ox = SIDE_PAD + Math.max(0, (contentW - rowW) / 2);
+      if (ox < SIDE_PAD) ox = SIDE_PAD;
+      row.forEach((c, i) => {
+        children.push(chip({
+          key: `o-${rIdx}-${i}`, x: ox, y: cy + CHIP_H,
+          width: c.w, label: c.label, tone: c.tone,
+        }));
+        ox += c.w + 8;
+      });
+      if (rIdx === rows.length - 1 && outputsOverflow > 0) {
+        children.push(h('text', {
+          key: 'o-more',
+          x: ox + 6, y: cy + CHIP_H - 6,
+          fontFamily: fonts.mono, fontSize: 10,
+          fill: 'var(--muted)',
+        }, `+${outputsOverflow} more`));
+      }
+      cy += CHIP_H + 8;
+    });
+    cy += ZONE_GAP;
+  }
+
+  // Zone: PART OF (quests) — last; rare, de-emphasized
+  if (hasQuests) {
+    children.push(caption({ key: 'q-cap', x: SIDE_PAD, y: cy + 10, text: 'PART OF' }));
+    cy += CAPTION_H;
+    const rows = questRows;
+    rows.forEach((row, rIdx) => {
+      const rowW = rowWidth(row);
+      let ox = SIDE_PAD + Math.max(0, (contentW - rowW) / 2);
+      if (ox < SIDE_PAD) ox = SIDE_PAD;
+      row.forEach((c, i) => {
+        children.push(chip({
+          key: `q-${rIdx}-${i}`, x: ox, y: cy + CHIP_H,
+          width: c.w, label: c.label, tone: c.tone,
+        }));
+        ox += c.w + 8;
+      });
+      if (rIdx === rows.length - 1 && questOverflow > 0) {
+        children.push(h('text', {
+          key: 'q-more',
+          x: ox + 6, y: cy + CHIP_H - 6,
+          fontFamily: fonts.mono, fontSize: 10,
+          fill: 'var(--muted)',
+        }, `+${questOverflow} more`));
+      }
+      cy += CHIP_H + 8;
+    });
+  }
+
+  const VIEW_H = cy + 10;
+
+  return h('div', {
+    style: {
+      marginBottom: '2rem',
+      padding: '1rem 0.5rem 0.75rem',
+      borderBottom: '1px solid var(--hairline)',
+    },
+  },
+    h('div', {
+      style: {
+        fontFamily: fonts.mono,
+        fontSize: '11px',
+        textTransform: 'uppercase',
+        letterSpacing: '0.08em',
+        color: 'var(--muted)',
+        marginBottom: '0.75rem',
+        paddingLeft: '0.25rem',
+      },
+    }, 'Subgraph'),
+    h('svg', {
+      viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+      width: '100%',
+      height: 'auto',
+      preserveAspectRatio: 'xMidYMid meet',
+      style: { display: 'block', maxHeight: '520px' },
+      role: 'img',
+      'aria-label': 'Handoff knowledge-graph neighborhood',
+    },
+      h('defs', null,
+        h('marker', {
+          id: 'sg-arrow',
+          viewBox: '0 0 10 10',
+          refX: 9, refY: 5,
+          markerWidth: 7, markerHeight: 7,
+          orient: 'auto-start-reverse',
+        },
+          h('path', { d: 'M0,0 L10,5 L0,10 z', fill: 'var(--border)' })
+        ),
+      ),
+      ...children,
+    ),
+  );
+}
+
+// ── helpers ────────────────────────────────────────────────────────
+
+function pillWidth(label) {
+  return clamp(textW(label, CHAR_W_SANS_12) + PILL_PAD_X, PILL_MIN_W, PILL_MAX_W);
+}
+
+function chipWidth(label) {
+  return Math.max(96, textW(label, CHAR_W_MONO_10) + 20);
+}
+
+function textW(label, perChar) {
+  return Math.ceil((label || '').length * perChar);
+}
+
+function truncate(s, max) {
+  if (!s) return '';
+  if (s.length <= max) return s;
+  return s.slice(0, max - 1) + '…';
+}
+
+function clamp(n, lo, hi) { return Math.max(lo, Math.min(hi, n)); }
+
+// Pack chips into rows that fit within maxW.
+function packRows(items, maxW) {
+  const rows = [[]];
+  let cur = 0;
+  for (const it of items) {
+    if (cur > 0 && cur + it.w + 8 > maxW) {
+      rows.push([it]);
+      cur = it.w;
+    } else {
+      rows[rows.length - 1].push(it);
+      cur += (cur > 0 ? 8 : 0) + it.w;
+    }
+  }
+  return rows;
+}
+
+function rowWidth(row) {
+  if (row.length === 0) return 0;
+  return row.reduce((a, c) => a + c.w, 0) + (row.length - 1) * 8;
+}
+
+function pill({ key, x, y, width, label, tone }) {
+  const styles = {
+    neutral: { fill: 'var(--subtle-fill)', stroke: 'var(--border)', text: 'var(--dark)' },
+    person:  { fill: 'var(--blue-chip)',   stroke: 'var(--blue-muted)', text: 'var(--blue-muted)' },
+  }[tone] || { fill: 'var(--subtle-fill)', stroke: 'var(--border)', text: 'var(--dark)' };
+
+  return h('g', { key },
+    h('rect', {
+      x, y, width, height: PILL_H,
+      rx: PILL_H / 2, ry: PILL_H / 2,
+      fill: styles.fill, stroke: styles.stroke, strokeWidth: 1,
+    }),
+    h('text', {
+      x: x + width / 2,
+      y: y + PILL_H / 2 + 4,
+      textAnchor: 'middle',
+      fontFamily: fonts.sans, fontSize: 13, fontWeight: 500,
+      fill: styles.text,
+    }, label),
+  );
+}
+
+function chip({ key, x, y, width, label, tone }) {
+  const styles = {
+    quest:    { fill: 'var(--terracotta-chip)', text: 'var(--terracotta)' },
+    artifact: { fill: 'var(--blue-chip)',       text: 'var(--blue-muted)' },
+    pr:       { fill: 'var(--subtle-fill)',     text: 'var(--dark)' },
+  }[tone] || { fill: 'var(--subtle-fill)', text: 'var(--muted)' };
+
+  return h('g', { key },
+    h('rect', {
+      x, y: y - CHIP_H + 4, width, height: CHIP_H,
+      rx: 5, ry: 5,
+      fill: styles.fill,
+    }),
+    h('text', {
+      x: x + 10, y: y - CHIP_H / 2 + 8,
+      fontFamily: fonts.mono, fontSize: 11, fontWeight: 500,
+      fill: styles.text,
+    }, label),
+  );
+}
+
+function caption({ key, x, y, text }) {
+  return h('text', {
+    key, x, y,
+    fontFamily: fonts.mono, fontSize: 10,
+    fill: 'var(--muted)',
+    letterSpacing: '0.1em',
+  }, text);
+}
+
+function edgeLabel({ key, x, y, text, anchor = 'start' }) {
+  return h('text', {
+    key, x, y,
+    textAnchor: anchor,
+    fontFamily: fonts.mono, fontSize: 10,
+    fill: 'var(--muted)',
+    letterSpacing: '0.04em',
+  }, text);
+}
+
+function subLabel({ key, x, y, text }) {
+  return h('text', {
+    key, x, y,
+    textAnchor: 'middle',
+    fontFamily: fonts.mono, fontSize: 10,
+    fill: 'var(--muted)',
+    fontStyle: 'italic',
+  }, text);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "egregore-artifacts",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Generate branded HTML artifacts from Egregore data",
   "type": "module",
   "license": "MIT",