egregore-artifacts 0.3.0 → 0.4.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/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/package.json

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