egregore-artifacts 0.2.0 → 0.3.0

package/lib/templates/board.js

@@ -0,0 +1,459 @@
+// 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', {
+    style: {
+      background: 'var(--surface)',
+      border: '1px solid var(--border)',
+      borderLeft: `4px solid ${pColor}`,
+      borderRadius: '8px',
+      padding: '12px 16px',
+      marginBottom: '8px',
+    },
+  },
+    // Title row
+    h('div', { style: { display: 'flex', alignItems: 'baseline', gap: '8px', marginBottom: '6px' } },
+      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),
+  );
+}
+
+// ── 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 || [];
+        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 || [];
+    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 ────────────────────────────────────────────────
+
+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() {
+  // The tabs work via a small inline script injected in the shell
+  return h('div', {
+    style: {
+      display: 'flex', gap: '4px', marginBottom: '1.5rem',
+      borderBottom: '2px solid var(--border)', paddingBottom: '0',
+    },
+  },
+    ['Activity', 'Person', 'Timeline'].map(tab =>
+      h('button', {
+        key: tab,
+        className: 'eg-board-tab',
+        'data-view': tab.toLowerCase(),
+        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)
+    ),
+  );
+}
+
+// ── 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' }));
+
+  // Activity view (default visible)
+  sections.push(
+    h('div', { key: 'view-activity', className: 'eg-board-view', 'data-view': 'activity' },
+      h(ActivityView, { activities: data.activities })
+    )
+  );
+
+  // 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 })
+    )
+  );
+
+  // 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');
+})();
+`,
+      },
+    })
+  );
+
+  // Footer
+  sections.push(
+    h(ArtifactFooter, {
+      key: 'footer',
+      generatedAt: new Date().toISOString(),
+      source: 'memory/board/board.json',
+    })
+  );
+
+  return h('div', null, ...sections);
+}

package/lib/templates/handoff.js

@@ -5,7 +5,7 @@ import {
   TextBlock, ArtifactFooter,
 } from '../components.js';
 import { renderMarkdownLite } from '../markdown.js';
-import { colors, fonts } from '../tokens.js';
+import { fonts } from '../tokens.js';
 
 const h = React.createElement;
 
@@ -38,7 +38,7 @@ export function handoffTemplate(handoff) {
           marginBottom: '1.5rem',
           fontFamily: fonts.mono,
           fontSize: '13px',
-          color: colors.muted,
+          color: 'var(--muted)',
         },
       },
         h('span', null, 'To:'),
@@ -47,9 +47,9 @@ export function handoffTemplate(handoff) {
             key: i,
             style: {
               padding: '2px 10px',
-              background: 'rgba(123, 157, 183, 0.1)',
+              background: 'var(--blue-chip)',
               borderRadius: '50px',
-              color: colors.blueMuted,
+              color: 'var(--blue-muted)',
               fontSize: '12px',
               fontWeight: 500,
             },
@@ -71,14 +71,14 @@ export function handoffTemplate(handoff) {
           marginBottom: '2rem',
           fontFamily: fonts.mono,
           fontSize: '12px',
-          color: colors.muted,
+          color: 'var(--muted)',
         },
       },
         handoff.source && h('span', null, `Source: ${handoff.source}`),
         handoff.branch && h('span', {
           style: {
             padding: '2px 8px',
-            background: 'rgba(59, 45, 33, 0.06)',
+            background: 'var(--subtle-fill)',
             borderRadius: '4px',
             fontFamily: fonts.mono,
           },
@@ -143,7 +143,7 @@ export function handoffTemplate(handoff) {
                 display: 'flex',
                 gap: '12px',
                 padding: '8px 0',
-                borderBottom: i < handoff.nextSteps.length - 1 ? '1px solid rgba(224, 216, 204, 0.5)' : 'none',
+                borderBottom: i < handoff.nextSteps.length - 1 ? '1px solid var(--hairline)' : 'none',
                 fontSize: '15px',
                 lineHeight: 1.5,
               },
@@ -154,8 +154,8 @@ export function handoffTemplate(handoff) {
                   width: '24px',
                   height: '24px',
                   borderRadius: '50%',
-                  background: colors.terracotta,
-                  color: colors.cream,
+                  background: 'var(--terracotta)',
+                  color: 'var(--cream)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',