heyiam 0.2.28 → 0.3.0

package/dist/render/templates.js

@@ -0,0 +1,90 @@
+/**
+ * Template registry for heyi.am project/session rendering.
+ *
+ * Built-in templates ship with the CLI. Custom user templates
+ * can live in ~/.config/heyiam/templates/{name}/ (Phase 2).
+ */
+import { readFileSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = resolve(__dirname, 'templates');
+export const BUILT_IN_TEMPLATES = [
+    // Original 5
+    { name: 'editorial', label: 'Editorial', description: 'Classic light theme with card-based layout', accent: '#084471', mode: 'light', tags: [] },
+    { name: 'kinetic', label: 'Kinetic', description: 'Matches the heyi.am landing page — orange accent, section tags, narrative cards', accent: '#f97316', mode: 'dark', tags: ['animated'] },
+    { name: 'terminal', label: 'Terminal', description: 'Green-on-black terminal aesthetic with ASCII elements', accent: '#4ade80', mode: 'dark', tags: ['minimal'] },
+    { name: 'minimal', label: 'Typography', description: 'Ultra-clean light mode with serif typography', accent: '#1c1917', mode: 'light', tags: ['minimal'] },
+    { name: 'showcase', label: 'Showcase', description: 'Cinematic scroll animations with animated charts and stat counters', accent: '#818cf8', mode: 'dark', tags: ['animated'] },
+    // New templates
+    { name: 'parallax', label: 'Parallax', description: 'Fixed floating headshot with full-page parallax — content scrolls around the photo', accent: '#60a5fa', mode: 'dark', tags: ['animated'] },
+    { name: 'blueprint', label: 'Blueprint', description: 'Engineering schematic with SVG connector lines, grid background, and dimension annotations', accent: '#64748b', mode: 'light', tags: ['animated'] },
+    { name: 'radar', label: 'Radar', description: 'HUD cockpit with radar navigation widget and cyan-tinted luminous elements', accent: '#22d3ee', mode: 'dark', tags: ['animated', 'data-dense'] },
+    { name: 'strata', label: 'Strata', description: 'Depth-based parallax with overlapping card layers and warm amber palette', accent: '#d97706', mode: 'light', tags: ['animated'] },
+    { name: 'noir', label: 'Noir', description: 'Pure monochrome — black, white, gray only with bold typography and film noir drama', accent: '#e5e5e5', mode: 'dark', tags: ['minimal'] },
+    { name: 'verdant', label: 'Verdant', description: 'Nature-inspired with warm earthy palette, leaf motifs, and organic rounded shapes', accent: '#15803d', mode: 'light', tags: [] },
+    { name: 'neon', label: 'Neon', description: 'Synthwave aesthetic with pink and cyan dual accent and tasteful neon glow effects', accent: '#f472b6', mode: 'dark', tags: ['animated'] },
+    { name: 'paper', label: 'Paper', description: 'Newspaper print aesthetic with multi-column layout, drop caps, and serif typography', accent: '#1a1a1a', mode: 'light', tags: ['minimal'] },
+    { name: 'cosmos', label: 'Cosmos', description: 'Starfield background with gold accent and constellation SVG lines connecting elements', accent: '#fbbf24', mode: 'dark', tags: ['animated'] },
+    { name: 'bauhaus', label: 'Bauhaus', description: 'De Stijl geometric shapes in red, blue, yellow with thick borders and asymmetric grids', accent: '#dc2626', mode: 'light', tags: ['animated'] },
+    { name: 'mono', label: 'Mono', description: '100% monospace terminal — green on black, ASCII bar charts, git-log phases, typing animation', accent: '#4ade80', mode: 'dark', tags: ['minimal', 'data-dense'] },
+    { name: 'glacier', label: 'Glacier', description: 'Frosted glassmorphism with backdrop blur cards, cool blue palette, and soft shadows', accent: '#38bdf8', mode: 'light', tags: ['animated'] },
+    { name: 'ember', label: 'Ember', description: 'Warm dark theme with orange-to-red fire gradient accents and ember glow on stats', accent: '#f97316', mode: 'dark', tags: ['animated'] },
+    { name: 'zen', label: 'Zen', description: 'Japanese minimalism — maximum whitespace, no cards, thin rules, serif display, 640px column', accent: '#78716c', mode: 'light', tags: ['minimal'] },
+    { name: 'circuit', label: 'Circuit', description: 'PCB aesthetic with circuit trace patterns, component pads, and lime green accent', accent: '#a3e635', mode: 'dark', tags: ['animated'] },
+    { name: 'parchment', label: 'Parchment', description: 'Old book aesthetic with all-serif typography, sepia palette, drop caps, and colophon footer', accent: '#92400e', mode: 'light', tags: ['minimal'] },
+    { name: 'aurora', label: 'Aurora', description: 'Northern lights gradient header that slowly shifts — restrained dark with teal magic', accent: '#2dd4bf', mode: 'dark', tags: ['animated'] },
+    { name: 'grid', label: 'Grid', description: 'Bento dashboard layout with mixed-size CSS grid cells like iOS widgets', accent: '#6366f1', mode: 'light', tags: ['data-dense'] },
+    { name: 'obsidian', label: 'Obsidian', description: 'Deep black with purple gem accent and hover shimmer like light catching a gemstone', accent: '#a855f7', mode: 'dark', tags: ['animated'] },
+    { name: 'chalk', label: 'Chalk', description: 'Whiteboard aesthetic with handwritten display font, sketch-style borders, and annotation arrows', accent: '#334155', mode: 'light', tags: [] },
+    { name: 'signal', label: 'Signal', description: 'Mission control dashboard — dense data tables, status badges, and fast-updating metrics', accent: '#ef4444', mode: 'dark', tags: ['data-dense'] },
+    { name: 'canvas', label: 'Canvas', description: 'Art gallery with extreme whitespace, full-bleed images, and large airy typography', accent: '#fb7185', mode: 'light', tags: ['minimal'] },
+    { name: 'meridian', label: 'Meridian', description: 'Topographic map aesthetic with contour line patterns and elevation-style charts', accent: '#34d399', mode: 'dark', tags: ['animated'] },
+    { name: 'carbon', label: 'Carbon', description: 'Brushed metal industrial — diagonal stripe texture, silver chrome palette, no color', accent: '#94a3b8', mode: 'dark', tags: ['minimal'] },
+    { name: 'daylight', label: 'Daylight', description: 'Bright and airy with soft blue shadows, sky blue accent, and friendly rounded shapes', accent: '#0ea5e9', mode: 'light', tags: ['animated'] },
+];
+const BUILT_IN_NAMES = new Set(BUILT_IN_TEMPLATES.map((t) => t.name));
+export const DEFAULT_TEMPLATE = 'editorial';
+export function isValidTemplate(name) {
+    return BUILT_IN_NAMES.has(name);
+}
+/**
+ * Resolve which template to use.
+ * Priority: project override → user default → 'editorial'
+ */
+export function resolveTemplate(projectTemplate, userDefault) {
+    if (projectTemplate && isValidTemplate(projectTemplate))
+        return projectTemplate;
+    if (userDefault && isValidTemplate(userDefault))
+        return userDefault;
+    return DEFAULT_TEMPLATE;
+}
+/**
+ * Load concatenated CSS for a template (base + template-specific).
+ * Used by export.ts for standalone HTML and by preview.
+ */
+const cssCache = new Map();
+export function getTemplateCss(templateName) {
+    const name = isValidTemplate(templateName) ? templateName : DEFAULT_TEMPLATE;
+    const cached = cssCache.get(name);
+    if (cached !== undefined)
+        return cached;
+    let css = '';
+    try {
+        css = readFileSync(resolve(TEMPLATES_DIR, 'styles.css'), 'utf-8');
+    }
+    catch { /* empty */ }
+    try {
+        const templateCss = readFileSync(resolve(TEMPLATES_DIR, name, 'styles.css'), 'utf-8');
+        css += '\n\n/* === ' + name + ' template styles === */\n' + templateCss;
+    }
+    catch { /* no template-specific CSS — fine */ }
+    cssCache.set(name, css);
+    return css;
+}
+export function getTemplateNames() {
+    return BUILT_IN_TEMPLATES.map((t) => t.name);
+}
+export function getTemplateInfo(name) {
+    return BUILT_IN_TEMPLATES.find((t) => t.name === name);
+}

package/dist/routes/context.js

@@ -3,12 +3,12 @@
  * Created during the server.ts refactor to avoid circular dependencies.
  */
 import path from 'node:path';
-import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { listSessions, parseSession } from '../parsers/index.js';
 import { bridgeToAnalyzer, mergeActiveIntervals, sumIntervalMs } from '../bridge.js';
 import { analyzeSession } from '../analyzer.js';
 import { loadEnhancedData, loadProjectEnhanceResult, getUploadedState, } from '../settings.js';
+import { getTemplateCss } from '../render/templates.js';
 import { archiveSessionFiles } from '../archive.js';
 import { getDatabase, openDatabase, getSessionStats as dbGetSessionStats, getSessionCount, getAllSessionMetas, getAllProjectStats, getSessionsByProject, getProjectUuid, } from '../db.js';
 import { ensureSessionIndexed, displayNameFromDir } from '../sync.js';
@@ -39,7 +39,16 @@ function computeMergedDurationFromDb(db, projectDir, naiveSumMinutes) {
     return mergedMinutes > 0 ? mergedMinutes : naiveSumMinutes;
 }
 import { escapeHtml } from '../format-utils.js';
-export { escapeHtml };
+/** Look up a project by name or dirName, sending 404 if not found. Returns null on miss. */
+export async function requireProject(ctx, projectParam, res) {
+    const projects = await ctx.getProjects();
+    const proj = projects.find((p) => p.name === projectParam || p.dirName === projectParam);
+    if (!proj) {
+        res.status(404).json({ error: { code: 'PROJECT_NOT_FOUND', message: 'Project not found' } });
+        return null;
+    }
+    return proj;
+}
 /**
  * Build an agent summary from child session metas. Returns null when
  * there are no children (or none produce valid stats).
@@ -466,13 +475,9 @@ export function createRouteContext(sessionsBasePath, dbPath) {
         };
     }
     // ── buildPreviewPage ─────────────────────────────────────
-    function buildPreviewPage(title, bodyHtml, banner) {
-        const renderCssPath = path.resolve(__dirname, '..', 'render', 'templates', 'styles.css');
-        let inlineCss = '';
-        try {
-            inlineCss = readFileSync(renderCssPath, 'utf-8');
-        }
-        catch { /* */ }
+    function buildPreviewPage(title, bodyHtml, banner, templateName) {
+        // Load full template CSS (base + template-specific) via the same path as the React embed
+        const inlineCss = getTemplateCss(templateName || 'editorial');
         const cssTag = `<style>${inlineCss}\n/* Preview override */\nbody { overflow: auto !important; min-height: auto !important; }\n#root { min-height: auto !important; }</style>`;
         const bannerHtml = banner
             ? `<div style="background: var(--primary, #084471); color: white; text-align: center; padding: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.05em;">${escapeHtml(banner)}</div>`
@@ -486,7 +491,7 @@ export function createRouteContext(sessionsBasePath, dbPath) {
   <title>${escapeHtml(title)} — Preview</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Newsreader:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet" />
   ${cssTag}
 </head>
 <body>

package/dist/routes/enhance.js

@@ -3,6 +3,8 @@ import { getProvider } from '../llm/index.js';
 import { triageSessions } from '../llm/triage.js';
 import { enhanceProject, refineNarrative } from '../llm/project-enhance.js';
 import { getAnthropicApiKey, saveEnhancedData, loadEnhancedData, deleteEnhancedData, loadFreshProjectEnhanceResult, saveProjectEnhanceResult, loadProjectEnhanceResult, buildProjectFingerprint, getUploadedState, } from '../settings.js';
+import { requireProject } from './context.js';
+import { startSSE } from './sse.js';
 export function createEnhanceRouter(ctx) {
     const router = Router();
     // Triage endpoint -- AI selects which sessions are worth showcasing (SSE stream)
@@ -11,21 +13,11 @@ export function createEnhanceRouter(ctx) {
             res.status(400).json({ error: { code: 'NO_API_KEY', message: 'No Anthropic API key configured. Add one in Settings or set ANTHROPIC_API_KEY.' } });
             return;
         }
-        const { project } = req.params;
-        const projects = await ctx.getProjects();
-        const proj = projects.find((p) => p.name === project || p.dirName === project);
-        if (!proj) {
-            res.status(404).json({ error: { code: 'PROJECT_NOT_FOUND', message: 'Project not found' } });
+        const project = String(req.params.project);
+        const proj = await requireProject(ctx, project, res);
+        if (!proj)
             return;
-        }
-        res.writeHead(200, {
-            'Content-Type': 'text/event-stream',
-            'Cache-Control': 'no-cache',
-            Connection: 'keep-alive',
-        });
-        const send = (event) => {
-            res.write(`data: ${JSON.stringify(event)}\n\n`);
-        };
+        const send = startSSE(res);
         try {
             const total = proj.sessions.length;
             const sessionsWithStats = [];
@@ -62,13 +54,11 @@ export function createEnhanceRouter(ctx) {
     // Enhance a single session
     router.post('/api/projects/:project/sessions/:id/enhance', async (req, res) => {
         try {
-            const { project, id } = req.params;
-            const projects = await ctx.getProjects();
-            const proj = projects.find((p) => p.name === project || p.dirName === project);
-            if (!proj) {
-                res.status(404).json({ error: { code: 'PROJECT_NOT_FOUND', message: 'Project not found' } });
+            const project = String(req.params.project);
+            const id = String(req.params.id);
+            const proj = await requireProject(ctx, project, res);
+            if (!proj)
                 return;
-            }
             const meta = proj.sessions.find((s) => s.sessionId === id);
             if (!meta) {
                 res.status(404).json({ error: { code: 'SESSION_NOT_FOUND', message: 'Session not found' } });
@@ -124,14 +114,7 @@ export function createEnhanceRouter(ctx) {
             res.status(400).json({ error: { code: 'NO_API_KEY', message: 'No Anthropic API key configured. Add one in Settings or set ANTHROPIC_API_KEY.' } });
             return;
         }
-        res.writeHead(200, {
-            'Content-Type': 'text/event-stream',
-            'Cache-Control': 'no-cache',
-            Connection: 'keep-alive',
-        });
-        const send = (data) => {
-            res.write(`data: ${JSON.stringify(data)}\n\n`);
-        };
+        const send = startSSE(res);
         try {
             const projects = await ctx.getProjects();
             const proj = projects.find((p) => p.name === project || p.dirName === project);
@@ -237,7 +220,7 @@ export function createEnhanceRouter(ctx) {
     });
     // Save project enhance result explicitly
     router.post('/api/projects/:project/enhance-save', async (req, res) => {
-        const { project } = req.params;
+        const project = String(req.params.project);
         const { selectedSessionIds, result, title, repoUrl, projectUrl, screenshotBase64 } = req.body;
         if (!Array.isArray(selectedSessionIds) || !result?.narrative) {
             res.status(400).json({ error: { code: 'INVALID_INPUT', message: 'selectedSessionIds and result are required' } });
@@ -248,12 +231,9 @@ export function createEnhanceRouter(ctx) {
             return;
         }
         try {
-            const projects = await ctx.getProjects();
-            const proj = projects.find((p) => p.name === project || p.dirName === project);
-            if (!proj) {
-                res.status(404).json({ error: { code: 'PROJECT_NOT_FOUND', message: 'Project not found' } });
+            const proj = await requireProject(ctx, project, res);
+            if (!proj)
                 return;
-            }
             saveProjectEnhanceResult(proj.dirName, selectedSessionIds, result, undefined, { title, repoUrl, projectUrl, screenshotBase64 });
             res.json({ saved: true, enhancedAt: new Date().toISOString() });
         }
@@ -263,14 +243,11 @@ export function createEnhanceRouter(ctx) {
     });
     // Get cached project enhance result
     router.get('/api/projects/:project/enhance-cache', async (req, res) => {
-        const { project } = req.params;
+        const project = String(req.params.project);
         try {
-            const projects = await ctx.getProjects();
-            const proj = projects.find((p) => p.name === project || p.dirName === project);
-            if (!proj) {
-                res.status(404).json({ error: { code: 'PROJECT_NOT_FOUND', message: 'Project not found' } });
+            const proj = await requireProject(ctx, project, res);
+            if (!proj)
                 return;
-            }
             const cached = loadProjectEnhanceResult(proj.dirName);
             if (!cached) {
                 res.status(404).json({ error: { code: 'NO_CACHE', message: 'No cached enhance result' } });

package/dist/routes/export.js

@@ -111,9 +111,14 @@ export function createExportRouter(ctx) {
                 return;
             }
             const cache = data.enhanceCache ?? buildFallbackCache(data.sessions);
-            const totalFilesChanged = data.project.totalFiles;
+            const proj = data.project;
             const outDir = safeExportPath(outputPath, dirName, 'html');
-            const result = await exportHtml(dirName, cache, data.sessions, outDir, 'local', { totalFilesChanged });
+            const result = await exportHtml(dirName, cache, data.sessions, outDir, 'local', {
+                totalFilesChanged: proj.totalFiles,
+                totalAgentDurationMinutes: proj.totalAgentDuration,
+                totalInputTokens: proj.totalInputTokens,
+                totalOutputTokens: proj.totalOutputTokens,
+            });
             res.json(result);
         }
         catch (err) {
@@ -131,8 +136,13 @@ export function createExportRouter(ctx) {
                 return;
             }
             const cache = data.enhanceCache ?? buildFallbackCache(data.sessions);
-            const totalFilesChanged = data.project.totalFiles;
-            const htmlFiles = generateHtmlFiles(dirName, cache, data.sessions, 'local', { totalFilesChanged });
+            const proj = data.project;
+            const htmlFiles = generateHtmlFiles(dirName, cache, data.sessions, 'local', {
+                totalFilesChanged: proj.totalFiles,
+                totalAgentDurationMinutes: proj.totalAgentDuration,
+                totalInputTokens: proj.totalInputTokens,
+                totalOutputTokens: proj.totalOutputTokens,
+            });
             const zipBuffer = createZipBuffer(htmlFiles);
             const filename = `${dirName.replace(/[^a-zA-Z0-9_-]/g, '_')}.zip`;
             res.setHeader('Content-Type', 'application/zip');