egregore-artifacts 0.4.0 → 0.5.0

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/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.4.0",
+  "version": "0.5.0",
   "description": "Generate branded HTML artifacts from Egregore data",
   "type": "module",
   "license": "MIT",