egregore-artifacts 0.1.0

package/bin/cli.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+import { generateArtifact, openArtifact } from '../lib/index.js';
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const [,, type, filePath] = process.argv;
+
+if (!type) {
+  console.error('Usage: egregore-artifacts <type> [file]');
+  console.error('');
+  console.error('Types: quest, handoff, activity');
+  console.error('');
+  console.error('Examples:');
+  console.error('  egregore-artifacts quest memory/quests/artifact-generation.md');
+  console.error('  egregore-artifacts handoff memory/handoffs/2026-03/31-cem-oss-security-audit.md');
+  console.error('  egregore-artifacts activity   (runs bin/activity-data.sh live)');
+  process.exit(1);
+}
+
+if (!filePath && type !== 'activity') {
+  console.error(`✗ Missing file path for type "${type}"`);
+  process.exit(1);
+}
+
+// Resolve file path relative to git repo root (not cwd)
+function resolveFile(fp) {
+  if (!fp) return fp;
+
+  // Already absolute and exists
+  if (path.isAbsolute(fp) && fs.existsSync(fp)) return fp;
+
+  // Relative to cwd
+  if (fs.existsSync(fp)) return path.resolve(fp);
+
+  // Relative to git repo root
+  try {
+    const root = execSync('git rev-parse --show-toplevel 2>/dev/null', { encoding: 'utf-8' }).trim();
+    const fromRoot = path.join(root, fp);
+    if (fs.existsSync(fromRoot)) return fromRoot;
+  } catch {}
+
+  console.error(`✗ File not found: ${fp}`);
+  console.error('  Checked: cwd and git repo root');
+  process.exit(1);
+}
+
+try {
+  const input = type === 'activity' ? (filePath || 'live') : resolveFile(filePath);
+  const html = await generateArtifact(type, input);
+  const slug = filePath ? filePath.split('/').pop().replace('.md', '') : new Date().toISOString().split('T')[0];
+  const outputPath = await openArtifact(html, `${type}-${slug}`);
+  console.log(`✓ Artifact generated: ${outputPath}`);
+  console.log('  Opening in browser...');
+} catch (err) {
+  console.error(`✗ ${err.message}`);
+  process.exit(1);
+}

package/lib/catalog.js

@@ -0,0 +1,134 @@
+// Egregore component catalog for json-render
+// Defines what components Claude can use when generating artifact specs
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/react';
+import { z } from 'zod';
+
+export const catalog = defineCatalog(schema, {
+  components: {
+    // ── Layout ────────────────────────────────────────────────
+    Page: {
+      props: z.object({
+        title: z.string().describe('Artifact title'),
+        type: z.enum(['quest', 'handoff', 'activity', 'report', 'graph']).describe('Artifact type'),
+        date: z.string().nullable().describe('Date string'),
+        author: z.string().nullable().describe('Author name'),
+        status: z.enum(['active', 'paused', 'completed', 'blocked']).nullable(),
+        priority: z.number().nullable().describe('0=none, 1=low, 2=medium, 3=high'),
+        projects: z.array(z.string()).describe('Related project tags'),
+      }),
+      slots: { default: {} },
+      description: 'Top-level artifact page with branded header, metadata row, and footer. Wrap all content in this.',
+    },
+
+    Section: {
+      props: z.object({
+        label: z.string().describe('Section label shown as uppercase mono heading'),
+      }),
+      slots: { default: {} },
+      description: 'A white card container with a label. Use for grouping related content.',
+    },
+
+    // ── Text ─────────────────────────────────────────────────
+    Prose: {
+      props: z.object({
+        text: z.string().describe('Markdown text — supports **bold**, `code`, [links](url), ### headings, tables'),
+        variant: z.enum(['lead', 'body']).default('body').describe('lead = larger text for key questions/summaries'),
+      }),
+      description: 'Markdown-rendered text block. Use for any prose content.',
+    },
+
+    // ── Data Display ─────────────────────────────────────────
+    MetricGrid: {
+      props: z.object({
+        metrics: z.array(z.object({
+          label: z.string(),
+          value: z.string(),
+        })).describe('Array of label/value pairs. Max 4.'),
+      }),
+      description: 'Horizontal grid of metric cards with large serif values and mono labels.',
+    },
+
+    ThreadList: {
+      props: z.object({
+        threads: z.array(z.object({
+          text: z.string(),
+          done: z.boolean(),
+        })),
+      }),
+      description: 'Checklist of threads/tasks with branded checkboxes.',
+    },
+
+    ArtifactList: {
+      props: z.object({
+        artifacts: z.array(z.object({
+          date: z.string(),
+          type: z.string(),
+          title: z.string(),
+          author: z.string().nullable(),
+        })),
+      }),
+      description: 'Timestamped list of linked artifacts with type badges.',
+    },
+
+    PersonRow: {
+      props: z.object({
+        people: z.array(z.object({
+          name: z.string(),
+          role: z.string().nullable(),
+        })),
+      }),
+      description: 'Horizontal row of people with avatar initials.',
+    },
+
+    BulletList: {
+      props: z.object({
+        items: z.array(z.string()),
+      }),
+      description: 'Styled bullet list with terracotta dots.',
+    },
+
+    NumberedSteps: {
+      props: z.object({
+        steps: z.array(z.string()),
+      }),
+      description: 'Ordered list with terracotta numbered circles.',
+    },
+
+    SessionList: {
+      props: z.object({
+        sessions: z.array(z.object({
+          date: z.string(),
+          topic: z.string(),
+          by: z.string().nullable(),
+          handedTo: z.string().nullable(),
+        })),
+      }),
+      description: 'List of sessions with date, author badge, topic, and handoff indicator.',
+    },
+
+    StatusBadge: {
+      props: z.object({
+        status: z.enum(['active', 'paused', 'completed', 'blocked']),
+      }),
+      description: 'Colored status pill.',
+    },
+
+    Callout: {
+      props: z.object({
+        text: z.string().describe('Callout text content'),
+      }),
+      description: 'Highlighted callout box with terracotta border. Use for summaries, trends, key insights.',
+    },
+
+    Divider: {
+      props: z.object({}),
+      description: 'Horizontal divider line.',
+    },
+  },
+});
+
+// Generate the system prompt that constrains Claude to this catalog
+export async function getCatalogPrompt() {
+  return catalog.prompt();
+}

package/lib/components.js

@@ -0,0 +1,144 @@
+// Branded Egregore React components — no JSX, uses React.createElement
+import React from 'react';
+import { colors, fonts, typography } from './tokens.js';
+import { renderMarkdown } from './markdown.js';
+
+const h = React.createElement;
+
+// ── ArtifactHeader ──────────────────────────────────────────────
+
+export function ArtifactHeader({ title, type, date, author, status, priority, projects }) {
+  const statusClass = `eg-badge eg-badge-${status || 'active'}`;
+  const priorityLabels = { 1: 'low', 2: 'medium', 3: 'high' };
+
+  return h('header', { className: 'eg-header' },
+    h('div', { className: 'eg-header-top' },
+      h('span', { className: 'eg-sigil' }, '✦'),
+      h('span', { className: 'eg-org-label' }, `egregore · ${type}`),
+    ),
+    h('h1', { className: 'eg-title' }, title),
+    h('div', { className: 'eg-meta-row' },
+      status && h('span', { className: statusClass }, status),
+      priority > 0 && h('span', { className: 'eg-badge eg-badge-priority' },
+        `↑ ${priorityLabels[priority] || 'p' + priority}`
+      ),
+      ...(projects || []).map((p, i) =>
+        h('span', { key: `proj-${i}`, className: 'eg-badge eg-badge-outline' }, p)
+      ),
+      author && h('span', null, `by ${author}`),
+      date && h('span', null, date),
+    ),
+  );
+}
+
+// ── SectionCard ─────────────────────────────────────────────────
+
+export function SectionCard({ label, children }) {
+  return h('div', { className: 'eg-card' },
+    label && h('div', { className: 'eg-card-title' }, label),
+    children,
+  );
+}
+
+// ── StatusBadge ─────────────────────────────────────────────────
+
+export function StatusBadge({ status }) {
+  return h('span', { className: `eg-badge eg-badge-${status}` }, status);
+}
+
+// ── ThreadList ──────────────────────────────────────────────────
+
+export function ThreadList({ threads }) {
+  if (!threads || threads.length === 0) return null;
+
+  return h('ul', { className: 'eg-thread-list' },
+    ...threads.map((thread, i) =>
+      h('li', { key: i, className: 'eg-thread-item' },
+        h('span', {
+          className: thread.done ? 'eg-checkbox eg-checkbox-done' : 'eg-checkbox'
+        }),
+        h('span', { className: thread.done ? 'eg-thread-done' : undefined }, thread.text),
+      )
+    ),
+  );
+}
+
+// ── ArtifactList ────────────────────────────────────────────────
+
+export function ArtifactList({ artifacts }) {
+  if (!artifacts || artifacts.length === 0) return null;
+
+  return h('div', null,
+    ...artifacts.map((a, i) =>
+      h('div', { key: i, className: 'eg-artifact-item' },
+        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})`),
+      )
+    ),
+  );
+}
+
+// ── ContributorRow ──────────────────────────────────────────────
+
+export function ContributorRow({ contributors }) {
+  if (!contributors || contributors.length === 0) return null;
+
+  return h('div', { className: 'eg-contributors' },
+    ...contributors.map((c, i) =>
+      h('div', { key: i, className: 'eg-contributor' },
+        h('span', { className: 'eg-contributor-avatar' },
+          (c.name || '?')[0].toUpperCase()
+        ),
+        h('span', null, c.name),
+        c.role && h('span', { style: { color: colors.muted, fontSize: '12px' } }, c.role),
+      )
+    ),
+  );
+}
+
+// ── BulletList ──────────────────────────────────────────────────
+
+export function BulletList({ items }) {
+  if (!items || items.length === 0) return null;
+
+  return h('ul', { className: 'eg-bullet-list' },
+    ...items.map((item, i) =>
+      h('li', { key: i }, item)
+    ),
+  );
+}
+
+// ── TextBlock ───────────────────────────────────────────────────
+
+export function TextBlock({ text, variant }) {
+  const className = variant === 'lead' ? 'eg-lead' : 'eg-body';
+  return h('div', { className }, renderMarkdown(text));
+}
+
+// ── SectionDivider ──────────────────────────────────────────────
+
+export function SectionDivider() {
+  return h('div', { className: 'eg-section-divider' });
+}
+
+// ── ArtifactFooter ──────────────────────────────────────────────
+
+export function ArtifactFooter({ generatedAt, source }) {
+  const dateStr = new Date(generatedAt).toLocaleDateString('en-US', {
+    year: 'numeric', month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  });
+
+  return h('footer', { className: 'eg-footer' },
+    h('div', { className: 'eg-footer-brand' },
+      h('span', { className: 'eg-footer-sigil' }, '✦'),
+      h('span', null, 'egregore'),
+    ),
+    h('div', null,
+      source && h('span', null, `${source} · `),
+      h('span', null, dateStr),
+    ),
+  );
+}

package/lib/index.js

@@ -0,0 +1,51 @@
+// Public API for egregore-artifacts
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { renderToHtml, renderSpecToHtml } from './render.js';
+import { parseQuest } from './parsers/quest.js';
+import { parseHandoff } from './parsers/handoff.js';
+import { parseActivity } from './parsers/activity.js';
+import { questTemplate } from './templates/quest.js';
+import { handoffTemplate } from './templates/handoff.js';
+import { activityTemplate } from './templates/activity.js';
+import { openInBrowser } from './open.js';
+
+const PARSERS = { quest: parseQuest, handoff: parseHandoff, activity: parseActivity };
+const TEMPLATES = { quest: questTemplate, handoff: handoffTemplate, activity: activityTemplate };
+
+export async function generateArtifact(type, input) {
+  const template = TEMPLATES[type];
+  if (!template) throw new Error(`Unknown artifact type: ${type}. Available: ${Object.keys(TEMPLATES).join(', ')}`);
+
+  // Input can be a file path or pre-parsed data object
+  let data;
+  if (typeof input === 'string') {
+    const parser = PARSERS[type];
+    data = parser(input);
+  } else {
+    data = input;
+  }
+
+  const element = template(data);
+  return renderToHtml(element, { title: data.title || 'Untitled', type });
+}
+
+export async function openArtifact(html, title = 'Egregore Artifact') {
+  const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 50);
+  const tmpDir = path.join(os.tmpdir(), 'egregore-artifacts');
+  fs.mkdirSync(tmpDir, { recursive: true });
+
+  const filePath = path.join(tmpDir, `${slug}-${Date.now()}.html`);
+  fs.writeFileSync(filePath, html);
+  openInBrowser(filePath);
+
+  return filePath;
+}
+
+export { parseQuest } from './parsers/quest.js';
+export { parseHandoff } from './parsers/handoff.js';
+export { renderSpecToHtml } from './render.js';
+export { catalog, getCatalogPrompt } from './catalog.js';
+export { registry } from './registry.js';
+export * as tokens from './tokens.js';