egregore-artifacts 0.1.0 → 0.3.0

package/lib/registry.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { defineRegistry } from '@json-render/react';
 import { catalog } from './catalog.js';
-import { colors, fonts } from './tokens.js';
+import { fonts } from './tokens.js';
 import { renderMarkdown } from './markdown.js';
 
 const h = React.createElement;
@@ -70,12 +70,12 @@ export const { registry, handlers, executeAction } = defineRegistry(catalog, {
           h('div', {
             key: i,
             style: {
-              background: 'white', border: `1px solid ${colors.border}`,
+              background: 'var(--surface)', border: '1px solid var(--border)',
               borderRadius: '12px', padding: '1.25rem', textAlign: 'center',
             },
           },
-            h('div', { style: { fontSize: '28px', fontFamily: fonts.serif, fontWeight: 400, color: colors.black, lineHeight: 1.2 } }, m.value),
-            h('div', { style: { fontSize: '12px', fontFamily: fonts.mono, color: colors.muted, marginTop: '4px', textTransform: 'uppercase', letterSpacing: '0.04em' } }, m.label),
+            h('div', { style: { fontSize: '28px', fontFamily: fonts.serif, fontWeight: 400, color: 'var(--black)', lineHeight: 1.2 } }, m.value),
+            h('div', { style: { fontSize: '12px', fontFamily: fonts.mono, color: 'var(--muted)', marginTop: '4px', textTransform: 'uppercase', letterSpacing: '0.04em' } }, m.label),
           )
         ),
       ),
@@ -97,7 +97,7 @@ export const { registry, handlers, executeAction } = defineRegistry(catalog, {
             h('span', { className: 'eg-artifact-date' }, a.date),
             h('span', { className: 'eg-artifact-type' }, a.type),
             h('span', { className: 'eg-artifact-title' }, a.title),
-            a.author && h('span', { style: { color: colors.muted, fontSize: '13px', fontFamily: fonts.mono } }, `(${a.author})`),
+            a.author && h('span', { style: { color: 'var(--muted)', fontSize: '13px', fontFamily: fonts.mono } }, `(${a.author})`),
           )
         ),
       ),
@@ -108,7 +108,7 @@ export const { registry, handlers, executeAction } = defineRegistry(catalog, {
           h('div', { key: i, className: 'eg-contributor' },
             h('span', { className: 'eg-contributor-avatar' }, (p.name || '?')[0].toUpperCase()),
             h('span', null, p.name),
-            p.role && h('span', { style: { color: colors.muted, fontSize: '12px' } }, p.role),
+            p.role && h('span', { style: { color: 'var(--muted)', fontSize: '12px' } }, p.role),
           )
         ),
       ),
@@ -121,8 +121,8 @@ export const { registry, handlers, executeAction } = defineRegistry(catalog, {
     NumberedSteps: ({ props }) =>
       h('ol', { style: { listStyle: 'none', padding: 0 } },
         ...props.steps.map((step, i) =>
-          h('li', { key: i, style: { display: 'flex', gap: '12px', padding: '8px 0', borderBottom: i < props.steps.length - 1 ? '1px solid rgba(224, 216, 204, 0.5)' : 'none', fontSize: '15px', lineHeight: 1.5 } },
-            h('span', { style: { flexShrink: 0, width: '24px', height: '24px', borderRadius: '50%', background: colors.terracotta, color: colors.cream, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontFamily: fonts.mono, fontWeight: 600 } }, String(i + 1)),
+          h('li', { key: i, style: { display: 'flex', gap: '12px', padding: '8px 0', borderBottom: i < props.steps.length - 1 ? '1px solid var(--hairline)' : 'none', fontSize: '15px', lineHeight: 1.5 } },
+            h('span', { style: { flexShrink: 0, width: '24px', height: '24px', borderRadius: '50%', background: 'var(--terracotta)', color: 'var(--cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontFamily: fonts.mono, fontWeight: 600 } }, String(i + 1)),
             h('span', null, step),
           )
         ),
@@ -131,11 +131,11 @@ export const { registry, handlers, executeAction } = defineRegistry(catalog, {
     SessionList: ({ props }) =>
       h('div', null,
         ...props.sessions.map((s, i) =>
-          h('div', { key: i, style: { display: 'flex', alignItems: 'baseline', gap: '12px', padding: '6px 0', borderBottom: '1px solid rgba(224, 216, 204, 0.5)', fontSize: '14px' } },
-            h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: colors.muted, minWidth: '72px', flexShrink: 0 } }, s.date),
-            s.by && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.blueMuted, background: 'rgba(123, 157, 183, 0.1)', padding: '1px 6px', borderRadius: '3px', flexShrink: 0 } }, s.by),
-            h('span', { style: { color: colors.black, flex: 1 } }, s.topic),
-            s.handedTo && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.terracotta } }, `→ ${s.handedTo}`),
+          h('div', { key: i, style: { display: 'flex', alignItems: 'baseline', gap: '12px', padding: '6px 0', borderBottom: '1px solid var(--hairline)', fontSize: '14px' } },
+            h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)', minWidth: '72px', flexShrink: 0 } }, s.date),
+            s.by && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--blue-muted)', background: 'var(--blue-chip)', padding: '1px 6px', borderRadius: '3px', flexShrink: 0 } }, s.by),
+            h('span', { style: { color: 'var(--black)', flex: 1 } }, s.topic),
+            s.handedTo && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--terracotta)' } }, `→ ${s.handedTo}`),
           )
         ),
       ),
@@ -146,9 +146,9 @@ export const { registry, handlers, executeAction } = defineRegistry(catalog, {
     Callout: ({ props }) =>
       h('div', {
         style: {
-          background: 'rgba(212, 135, 90, 0.06)', border: '1px solid rgba(212, 135, 90, 0.15)',
+          background: 'var(--terracotta-soft)', border: '1px solid var(--terracotta-hair)',
           borderRadius: '12px', padding: '1.25rem 1.5rem', marginBottom: '1.5rem',
-          fontSize: '15px', lineHeight: 1.6, color: colors.dark,
+          fontSize: '15px', lineHeight: 1.6, color: 'var(--dark)',
         },
       }, renderMarkdown(props.text)),
 

package/lib/shell.js

@@ -7,7 +7,7 @@ function escapeHtml(str) {
 
 export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artifact' } = {}) {
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -32,6 +32,41 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     --font-serif: ${fonts.serif};
     --font-sans: ${fonts.sans};
     --font-mono: ${fonts.mono};
+    /* Semi-transparent fills used by templates (inline styles).
+       Defined as tokens so dark mode can override them. */
+    --surface: #ffffff;
+    --hairline: rgba(224, 216, 204, 0.5);
+    --subtle-fill: rgba(59, 45, 33, 0.06);
+    --terracotta-soft: rgba(212, 135, 90, 0.06);
+    --terracotta-hair: rgba(212, 135, 90, 0.15);
+    --terracotta-chip: rgba(212, 135, 90, 0.1);
+    --blue-chip: rgba(123, 157, 183, 0.1);
+    --neutral-chip: rgba(0, 0, 0, 0.04);
+    --success-bg: #e8f5e9;
+    --success-fg: #2e7d32;
+    --green-p1: #2A7B5B;
+  }
+
+  /* Dark mode overrides */
+  [data-theme="dark"] {
+    --cream: ${colors.darkBg};
+    --black: ${colors.darkText};
+    --dark: ${colors.darkTextSoft};
+    --border: ${colors.darkBorder};
+    --muted: ${colors.darkTextMuted};
+    --warm-gray: ${colors.darkTextDim};
+    --terminal-bg: ${colors.darkBgCode};
+    --surface: ${colors.darkBgCard};
+    --hairline: rgba(255, 255, 255, 0.08);
+    --subtle-fill: rgba(255, 255, 255, 0.04);
+    --terracotta-soft: rgba(212, 135, 90, 0.08);
+    --terracotta-hair: rgba(212, 135, 90, 0.22);
+    --terracotta-chip: rgba(212, 135, 90, 0.14);
+    --blue-chip: rgba(123, 157, 183, 0.16);
+    --neutral-chip: rgba(255, 255, 255, 0.06);
+    --success-bg: rgba(107, 191, 107, 0.12);
+    --success-fg: #9ed9a0;
+    --green-p1: #6BBF6B;
   }
 
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -47,6 +82,7 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
   }
 
   ::selection { background: var(--terracotta); color: var(--cream); }
+  [data-theme="dark"] ::selection { color: ${colors.darkBg}; }
 
   /* Layout */
   .eg-artifact {
@@ -143,12 +179,13 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
 
   /* Card */
   .eg-card {
-    background: white;
+    background: var(--card-bg, white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 1.5rem;
     margin-bottom: 1.25rem;
   }
+  [data-theme="dark"] .eg-card { --card-bg: ${colors.darkBgCard}; }
   .eg-card-title {
     font-family: var(--font-mono);
     font-size: 12px;
@@ -183,7 +220,7 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     align-items: flex-start;
     gap: 10px;
     padding: 8px 0;
-    border-bottom: 1px solid rgba(224, 216, 204, 0.5);
+    border-bottom: 1px solid var(--border);
     font-size: 15px;
     line-height: 1.5;
   }
@@ -212,7 +249,7 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     display: flex;
     gap: 12px;
     padding: 8px 0;
-    border-bottom: 1px solid rgba(224, 216, 204, 0.5);
+    border-bottom: 1px solid var(--border);
     font-size: 14px;
   }
   .eg-artifact-item:last-child { border-bottom: none; }
@@ -246,10 +283,11 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     align-items: center;
     gap: 8px;
     padding: 6px 12px;
-    background: rgba(59, 45, 33, 0.04);
+    background: var(--subtle-bg, rgba(59, 45, 33, 0.04));
     border-radius: 50px;
     font-size: 14px;
   }
+  [data-theme="dark"] .eg-contributor { --subtle-bg: rgba(212, 135, 90, 0.06); }
   .eg-contributor-avatar {
     width: 28px;
     height: 28px;
@@ -292,10 +330,11 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
   .eg-code {
     font-family: var(--font-mono);
     font-size: 13px;
-    background: rgba(59, 45, 33, 0.06);
+    background: var(--code-bg, rgba(59, 45, 33, 0.06));
     padding: 2px 6px;
     border-radius: 4px;
   }
+  [data-theme="dark"] .eg-code { --code-bg: rgba(212, 135, 90, 0.08); color: var(--terracotta); }
 
   /* Footer */
   .eg-footer {
@@ -316,11 +355,65 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
   }
   .eg-footer-sigil { color: var(--terracotta); }
 
-  /* Print */
+  /* Theme toggle */
+  .eg-theme-toggle {
+    position: fixed;
+    top: 1.25rem;
+    right: 1.25rem;
+    width: 36px;
+    height: 36px;
+    border-radius: 50px;
+    border: 1px solid var(--border);
+    background: var(--card-bg, white);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    line-height: 1;
+    transition: background 0.2s, border-color 0.2s, width 0.2s;
+    z-index: 100;
+    padding: 0;
+    gap: 6px;
+    overflow: hidden;
+  }
+  .eg-theme-toggle:hover {
+    border-color: var(--terracotta);
+    width: 92px;
+    padding: 0 12px;
+  }
+  [data-theme="dark"] .eg-theme-toggle { --card-bg: ${colors.darkBgCard}; }
+  .eg-theme-toggle .eg-t-icon { flex-shrink: 0; }
+  .eg-theme-toggle .eg-t-label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--muted);
+    white-space: nowrap;
+    width: 0;
+    overflow: hidden;
+    transition: width 0.2s, opacity 0.2s;
+    opacity: 0;
+  }
+  .eg-theme-toggle:hover .eg-t-label { width: 32px; opacity: 1; }
+
+  /* Print — force light palette regardless of active theme */
   @media print {
-    body { background: white; }
+    :root, [data-theme="dark"] {
+      --cream: #ffffff;
+      --black: #16100B;
+      --dark: #2A2A2A;
+      --border: #E0D8CC;
+      --muted: #8a8578;
+      --surface: #ffffff;
+      --card-bg: #ffffff;
+      --hairline: rgba(224, 216, 204, 0.6);
+      --subtle-fill: rgba(59, 45, 33, 0.04);
+    }
+    body { background: white; color: #16100B; }
     .eg-artifact { padding: 1rem; max-width: none; }
-    .eg-card { break-inside: avoid; }
+    .eg-card { break-inside: avoid; background: #ffffff; }
+    .eg-theme-toggle { display: none; }
   }
 
   /* Mobile */
@@ -329,10 +422,68 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     .eg-title { font-size: 28px; }
     .eg-section-title { font-size: 20px; }
     .eg-meta-row { gap: 10px; }
+    .eg-theme-toggle { top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; font-size: 14px; }
   }
 </style>
+<script>
+  // Theme engine: light / auto / dark
+  // Auto uses OS preference (prefers-color-scheme) + local clock fallback.
+  // No geolocation, no permissions, no API calls.
+  (function() {
+    var MODES = ['light', 'auto', 'dark'];
+    var ICONS = ['\\u2600', '\\u25D0', '\\u263D'];
+    var LABELS = ['light', 'auto', 'dark'];
+
+    function resolveAuto() {
+      // OS-level dark mode (follows sunset schedule if enabled)
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
+      if (window.matchMedia('(prefers-color-scheme: light)').matches) return 'light';
+      // Fallback: local clock — dark between 19:00 and 07:00
+      var h = new Date().getHours();
+      return (h >= 19 || h < 7) ? 'dark' : 'light';
+    }
+
+    function applyTheme(mode) {
+      var resolved = mode === 'auto' ? resolveAuto() : mode;
+      document.documentElement.setAttribute('data-theme', resolved);
+    }
+
+    function updateToggle(mode) {
+      var idx = MODES.indexOf(mode);
+      var btn = document.querySelector('.eg-theme-toggle');
+      if (!btn) return;
+      btn.querySelector('.eg-t-icon').textContent = ICONS[idx];
+      btn.querySelector('.eg-t-label').textContent = LABELS[idx];
+    }
+
+    // Restore before paint
+    var saved = localStorage.getItem('eg-theme-mode') || 'auto';
+    applyTheme(saved);
+
+    // Listen for OS theme changes (e.g. sunset triggers system dark mode)
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
+      if ((localStorage.getItem('eg-theme-mode') || 'auto') === 'auto') applyTheme('auto');
+    });
+
+    window.__egTheme = {
+      cycle: function() {
+        var cur = localStorage.getItem('eg-theme-mode') || 'auto';
+        var next = MODES[(MODES.indexOf(cur) + 1) % 3];
+        localStorage.setItem('eg-theme-mode', next);
+        applyTheme(next);
+        updateToggle(next);
+      },
+      init: function() { updateToggle(saved); }
+    };
+  })();
+</script>
 </head>
 <body>
+<button class="eg-theme-toggle" aria-label="Toggle theme" onclick="__egTheme.cycle()">
+  <span class="eg-t-icon">&#9680;</span>
+  <span class="eg-t-label">auto</span>
+</button>
+<script>__egTheme.init();</script>
 <div class="eg-artifact" data-type="${escapeHtml(type)}">
 ${bodyHtml}
 </div>

package/lib/templates/activity.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {
   ArtifactHeader, SectionCard, ArtifactFooter,
 } from '../components.js';
-import { colors, fonts } from '../tokens.js';
+import { fonts } from '../tokens.js';
 
 const h = React.createElement;
 
@@ -22,18 +22,18 @@ function MetricRow({ metrics }) {
       h('div', {
         key: i,
         style: {
-          background: 'white',
-          border: `1px solid ${colors.border}`,
+          background: 'var(--surface)',
+          border: '1px solid var(--border)',
           borderRadius: '12px',
           padding: '1.25rem',
           textAlign: 'center',
         },
       },
         h('div', {
-          style: { fontSize: '28px', fontFamily: fonts.serif, fontWeight: 400, color: colors.black, lineHeight: 1.2 },
+          style: { fontSize: '28px', fontFamily: fonts.serif, fontWeight: 400, color: 'var(--black)', lineHeight: 1.2 },
         }, m.value),
         h('div', {
-          style: { fontSize: '12px', fontFamily: fonts.mono, color: colors.muted, marginTop: '4px', textTransform: 'uppercase', letterSpacing: '0.04em' },
+          style: { fontSize: '12px', fontFamily: fonts.mono, color: 'var(--muted)', marginTop: '4px', textTransform: 'uppercase', letterSpacing: '0.04em' },
         }, m.label),
       )
     ),
@@ -62,14 +62,14 @@ function TrendsCard({ trends }) {
 
   return h('div', {
     style: {
-      background: 'rgba(212, 135, 90, 0.06)',
-      border: `1px solid rgba(212, 135, 90, 0.15)`,
+      background: 'var(--terracotta-soft)',
+      border: '1px solid var(--terracotta-hair)',
       borderRadius: '12px',
       padding: '1.25rem 1.5rem',
       marginBottom: '1.5rem',
       fontSize: '15px',
       lineHeight: 1.6,
-      color: colors.dark,
+      color: 'var(--dark)',
     },
   },
     ...lines.map((line, i) => h('p', { key: i, style: { margin: '0 0 0.25rem' } }, line)),
@@ -83,39 +83,39 @@ function SessionRow({ date, topic, by, handedTo, muted }) {
       alignItems: 'baseline',
       gap: '12px',
       padding: '6px 0',
-      borderBottom: '1px solid rgba(224, 216, 204, 0.5)',
+      borderBottom: '1px solid var(--hairline)',
       fontSize: '14px',
     },
   },
     h('span', {
-      style: { fontFamily: fonts.mono, fontSize: '12px', color: colors.muted, minWidth: '72px', flexShrink: 0 },
+      style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)', minWidth: '72px', flexShrink: 0 },
     }, date),
     by && h('span', {
-      style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.blueMuted, background: 'rgba(123, 157, 183, 0.1)', padding: '1px 6px', borderRadius: '3px', flexShrink: 0 },
+      style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--blue-muted)', background: 'var(--blue-chip)', padding: '1px 6px', borderRadius: '3px', flexShrink: 0 },
     }, by),
-    h('span', { style: { color: muted ? colors.muted : colors.black, flex: 1, fontStyle: muted ? 'italic' : 'normal' } }, topic),
-    handedTo && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.terracotta } }, `→ ${handedTo}`),
+    h('span', { style: { color: muted ? 'var(--muted)' : 'var(--black)', flex: 1, fontStyle: muted ? 'italic' : 'normal' } }, topic),
+    handedTo && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--terracotta)' } }, `→ ${handedTo}`),
   );
 }
 
 function HandoffItem({ handoff, index }) {
   const statusDot = handoff.status === 'pending'
-    ? h('span', { style: { color: colors.terracotta, fontWeight: 700 } }, '●')
-    : h('span', { style: { color: colors.muted } }, '○');
+    ? h('span', { style: { color: 'var(--terracotta)', fontWeight: 700 } }, '●')
+    : h('span', { style: { color: 'var(--muted)' } }, '○');
 
   return h('div', {
-    style: { padding: '8px 0', borderBottom: '1px solid rgba(224, 216, 204, 0.5)', fontSize: '14px' },
+    style: { padding: '8px 0', borderBottom: '1px solid var(--hairline)', fontSize: '14px' },
   },
     h('div', { style: { display: 'flex', gap: '8px', alignItems: 'baseline' } },
-      h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: colors.muted } }, `[${index + 1}]`),
+      h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)' } }, `[${index + 1}]`),
       statusDot,
-      h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: colors.blueMuted } }, handoff.from),
+      h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--blue-muted)' } }, handoff.from),
       h('span', null, '→ you:'),
       h('span', { style: { fontWeight: 500 } }, handoff.topic),
-      h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.muted } }, `(${handoff.date})`),
+      h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)' } }, `(${handoff.date})`),
     ),
     handoff.summary && h('p', {
-      style: { margin: '4px 0 0 28px', fontSize: '13px', color: colors.muted, lineHeight: 1.4 },
+      style: { margin: '4px 0 0 28px', fontSize: '13px', color: 'var(--muted)', lineHeight: 1.4 },
     }, handoff.summary),
   );
 }
@@ -127,14 +127,14 @@ function QuestRow({ quest }) {
       alignItems: 'center',
       gap: '16px',
       padding: '8px 0',
-      borderBottom: '1px solid rgba(224, 216, 204, 0.5)',
+      borderBottom: '1px solid var(--hairline)',
       fontSize: '14px',
     },
   },
     h('span', { style: { fontWeight: 500, flex: 1, minWidth: 0 } }, quest.name),
-    h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: colors.muted, textAlign: 'right', whiteSpace: 'nowrap' } },
+    h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--muted)', textAlign: 'right', whiteSpace: 'nowrap' } },
       `${quest.artifacts} artifacts`),
-    quest.daysSince > 0 && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.muted, whiteSpace: 'nowrap' } },
+    quest.daysSince > 0 && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)', whiteSpace: 'nowrap' } },
       `· ${quest.daysSince}d ago`),
   );
 }
@@ -194,11 +194,11 @@ export function activityTemplate(data) {
           ...data.pendingQuestions.map((q, i) =>
             h('div', {
               key: i,
-              style: { display: 'flex', gap: '10px', padding: '6px 0', borderBottom: '1px solid rgba(224, 216, 204, 0.5)', fontSize: '14px' },
+              style: { display: 'flex', gap: '10px', padding: '6px 0', borderBottom: '1px solid var(--hairline)', fontSize: '14px' },
             },
-              h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: colors.blueMuted, flexShrink: 0 } }, q.from),
+              h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: 'var(--blue-muted)', flexShrink: 0 } }, q.from),
               h('span', { style: { flex: 1 } }, q.topic),
-              h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.muted } }, q.date),
+              h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)' } }, q.date),
             )
           ),
         ),
@@ -261,9 +261,9 @@ export function activityTemplate(data) {
         style: {
           fontFamily: fonts.mono,
           fontSize: '12px',
-          color: colors.muted,
+          color: 'var(--muted)',
           padding: '1rem 0',
-          borderTop: `1px solid ${colors.border}`,
+          borderTop: '1px solid var(--border)',
           marginTop: '1rem',
         },
       },