ccwrap 0.2.0 → 0.3.1

package/dist/cli.js

@@ -50,7 +50,10 @@ function resolveDateRange(options) {
         const sinceStr = since.toLocaleDateString("en-US", fmtOpts);
         const untilYear = until.getFullYear();
         const sinceYear = since.getFullYear();
-        const untilStr = until.toLocaleDateString("en-US", { ...fmtOpts, year: sinceYear !== untilYear ? "numeric" : undefined });
+        const untilStr = until.toLocaleDateString("en-US", {
+            ...fmtOpts,
+            year: sinceYear !== untilYear ? "numeric" : undefined,
+        });
         const periodLabel = `${sinceStr} – ${untilStr}, ${untilYear}`;
         return { range: { since, until }, periodLabel };
     }
@@ -78,18 +81,10 @@ const banner = `
  ╚██████╗╚██████╗╚███╔███╔╝██║  ██║██║  ██║██║     ██║     ███████╗██████╔╝
   ╚═════╝ ╚═════╝ ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝     ╚══════╝╚═════╝
 `;
-const darkBanner = `
-  ██████╗ ██████╗██╗    ██╗██████╗  █████╗ ██████╗ ██████╗ ███████╗██████╗
- ██╔════╝██╔════╝██║    ██║██╔══██╗██╔══██╗██╔══██╗██╔══██╗██╔════╝██╔══██╗
- ██║     ██║     ██║ █╗ ██║██████╔╝███████║██████╔╝██████╔╝█████╗  ██║  ██║
- ██║     ██║     ██║███╗██║██╔══██╗██╔══██║██╔═══╝ ██╔═══╝ ██╔══╝  ██║  ██║
- ╚██████╗╚██████╗╚███╔███╔╝██║  ██║██║  ██║██║     ██║     ███████╗██████╔╝
-  ╚═════╝ ╚═════╝ ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝     ╚══════╝╚═════╝
-`;
 program
     .name("ccwrap")
     .description("ccwrap - Your AI coding stats, meme-ified into a shareable video")
-    .version("0.2.0")
+    .version("0.3.1")
     .option("-o, --output <path>", "Output video file path", "ccwrap.mp4")
     .option("-m, --mode <mode>", "Commentary mode: sassy or dark", "sassy")
     .option("-p, --period <period>", "Time period: week, month, quarter, all (default: month)")
@@ -101,17 +96,16 @@ program
     .action(async (options) => {
     const mode = options.mode === "dark" ? "dark" : "sassy";
     const isDark = mode === "dark";
-    console.log(isDark ? chalk.red(darkBanner) : chalk.hex("#7c3aed")(banner));
-    console.log(chalk.gray(isDark
-        ? "  Your AI usage. The planet remembers.\n"
-        : "  Your AI-assisted coding, recapped.\n"));
+    console.log(isDark ? chalk.red(banner) : chalk.hex("#7c3aed")(banner));
+    console.log(chalk.gray(isDark ? "  Your AI usage. The planet remembers.\n" : "  Your AI-assisted coding, recapped.\n"));
     // Resolve date range
     const { range, periodLabel } = resolveDateRange(options);
     // Step 1: Load and compute stats
-    const periodHint = range
-        ? chalk.gray(` (${periodLabel})`)
-        : "";
-    const spinner = ora({ text: `Scanning Claude Code usage data...${periodHint}`, color: isDark ? "red" : "magenta" }).start();
+    const periodHint = range ? chalk.gray(` (${periodLabel})`) : "";
+    const spinner = ora({
+        text: `Scanning Claude Code usage data...${periodHint}`,
+        color: isDark ? "red" : "magenta",
+    }).start();
     let stats;
     try {
         stats = await loadAndComputeStats(range, periodLabel, options.skipWeekends);
@@ -151,16 +145,9 @@ program
         text: isDark ? "Generating dark commentary..." : "Generating sassy commentary...",
         color: isDark ? "red" : "magenta",
     }).start();
-    let commentary;
-    try {
-        commentary = await generateCommentary(stats, mode);
-        commentarySpinner.succeed(chalk.green("Commentary generated!"));
-    }
-    catch (err) {
-        commentarySpinner.fail(chalk.yellow(`Commentary generation failed, using fallbacks`));
-        // Fallbacks are handled inside generateCommentary
-        commentary = await generateCommentary(stats, mode);
-    }
+    // generateCommentary handles its own errors and returns fallbacks
+    const commentary = await generateCommentary(stats, mode);
+    commentarySpinner.succeed(chalk.green("Commentary generated!"));
     // Step 3: Render video
     const renderSpinner = ora({ text: "Rendering your Wrapped video...", color: isDark ? "red" : "magenta" }).start();
     try {

package/dist/data/commentary.d.ts

@@ -1,14 +1,3 @@
-import type { WrappedStats } from "./types";
-export interface Commentary {
-    tokensLine: string;
-    costLine: string;
-    modelLine: string;
-    busiestDayLine: string;
-    sessionLine: string;
-    peakHoursLine: string;
-    archetypeLine: string;
-    summaryLine: string;
-}
-export type Mode = "sassy" | "dark";
+import type { WrappedStats, Commentary, Mode } from "./types.js";
 export declare function buildPrompt(stats: WrappedStats, mode: Mode): string;
 export declare function generateCommentary(stats: WrappedStats, mode: Mode): Promise<Commentary>;

package/dist/data/commentary.js

@@ -81,12 +81,20 @@ export async function generateCommentary(stats, mode) {
             max_tokens: 1024,
             messages: [{ role: "user", content: buildPrompt(stats, mode) }],
         });
-        const text = message.content[0]?.type === "text" ? message.content[0].text : "";
+        const raw = message.content[0]?.type === "text" ? message.content[0].text : "";
+        // Strip markdown fences if the model wraps the JSON in ```json ... ```
+        const text = raw.replace(/^```(?:json)?\s*\n?/i, "").replace(/\n?```\s*$/i, "");
         const parsed = JSON.parse(text);
         // Validate all keys exist
         const keys = [
-            "tokensLine", "costLine", "modelLine", "busiestDayLine",
-            "sessionLine", "peakHoursLine", "archetypeLine", "summaryLine",
+            "tokensLine",
+            "costLine",
+            "modelLine",
+            "busiestDayLine",
+            "sessionLine",
+            "peakHoursLine",
+            "archetypeLine",
+            "summaryLine",
         ];
         const fallback = mode === "dark" ? darkFallbacks : sassyFallbacks;
         for (const key of keys) {

package/dist/data/parser.d.ts

@@ -1,8 +1,14 @@
 import type { RawJSONLEntry, WrappedStats, DateRange } from "./types.js";
-export declare function estimateCost(model: string, inputTokens: number, outputTokens: number, cacheCreationTokens: number, cacheReadTokens: number): number;
+declare const PRICING: Record<string, {
+    input: number;
+    output: number;
+    cacheWrite: number;
+    cacheRead: number;
+}>;
+export declare function estimateCost(model: string, inputTokens: number, outputTokens: number, cacheCreationTokens: number, cacheReadTokens: number, cache?: Map<string, (typeof PRICING)[string]>): number;
 export declare function extractProject(filePath: string): string;
 export declare function loadAndComputeStats(range?: DateRange, periodLabel?: string, skipWeekends?: boolean): Promise<WrappedStats>;
-export declare function computeStatsFromEntries(allEntries: (RawJSONLEntry & {
+export declare function computeStatsFromEntries(rawEntries: (RawJSONLEntry & {
     _file: string;
 })[], opts?: {
     range?: DateRange;
@@ -21,3 +27,4 @@ export declare function computeArchetype(params: {
     archetype: string;
     archetypeDescription: string;
 };
+export {};

package/dist/data/parser.js

@@ -5,29 +5,35 @@ import { join } from "path";
 // Pricing per million tokens (from Anthropic pricing page)
 // Each model has: input, output, cache_write (25% premium), cache_read (90% discount)
 const PRICING = {
-    "claude-opus-4-6": { input: 15, output: 75, cacheWrite: 18.75, cacheRead: 1.50 },
-    "claude-sonnet-4-6": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.30 },
-    "claude-sonnet-4-5-20250514": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.30 },
-    "claude-sonnet-4-20250514": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.30 },
-    "claude-haiku-4-5-20251001": { input: 0.80, output: 4, cacheWrite: 1.00, cacheRead: 0.08 },
-    "claude-3-5-sonnet-20241022": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.30 },
-    "claude-3-5-haiku-20241022": { input: 0.80, output: 4, cacheWrite: 1.00, cacheRead: 0.08 },
+    "claude-opus-4-6": { input: 15, output: 75, cacheWrite: 18.75, cacheRead: 1.5 },
+    "claude-sonnet-4-6": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.3 },
+    "claude-sonnet-4-5-20250514": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.3 },
+    "claude-sonnet-4-20250514": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.3 },
+    "claude-haiku-4-5-20251001": { input: 0.8, output: 4, cacheWrite: 1.0, cacheRead: 0.08 },
+    "claude-3-5-sonnet-20241022": { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.3 },
+    "claude-3-5-haiku-20241022": { input: 0.8, output: 4, cacheWrite: 1.0, cacheRead: 0.08 },
 };
-export function estimateCost(model, inputTokens, outputTokens, cacheCreationTokens, cacheReadTokens) {
-    const pricing = Object.entries(PRICING).find(([key]) => model.includes(key))?.[1]
-        ?? (model.includes("opus") ? PRICING["claude-opus-4-6"]
-            : model.includes("haiku") ? PRICING["claude-haiku-4-5-20251001"]
-                : PRICING["claude-sonnet-4-6"]);
-    return (inputTokens * pricing.input +
+export function estimateCost(model, inputTokens, outputTokens, cacheCreationTokens, cacheReadTokens, cache) {
+    let pricing = cache?.get(model);
+    if (!pricing) {
+        pricing =
+            Object.entries(PRICING).find(([key]) => model.includes(key))?.[1] ??
+                (model.includes("opus")
+                    ? PRICING["claude-opus-4-6"]
+                    : model.includes("haiku")
+                        ? PRICING["claude-haiku-4-5-20251001"]
+                        : PRICING["claude-sonnet-4-6"]);
+        cache?.set(model, pricing);
+    }
+    return ((inputTokens * pricing.input +
         outputTokens * pricing.output +
         cacheCreationTokens * pricing.cacheWrite +
-        cacheReadTokens * pricing.cacheRead) / 1_000_000;
+        cacheReadTokens * pricing.cacheRead) /
+        1_000_000);
 }
 async function findJSONLFiles() {
     const claudeDir = join(homedir(), ".claude", "projects");
-    const configDir = process.env.CLAUDE_CONFIG_DIR
-        ? join(process.env.CLAUDE_CONFIG_DIR, "projects")
-        : null;
+    const configDir = process.env.CLAUDE_CONFIG_DIR ? join(process.env.CLAUDE_CONFIG_DIR, "projects") : null;
     const dirs = [claudeDir, configDir].filter(Boolean);
     const allFiles = [];
     for (const dir of dirs) {
@@ -68,9 +74,7 @@ export function extractProject(filePath) {
     const segments = afterProjects.split("/");
     const projectEncoded = segments[0] ?? "unknown";
     // Decode: -home-user-myproject -> /home/user/myproject
-    return projectEncoded
-        .replace(/^-/, "/")
-        .replace(/-/g, "/");
+    return projectEncoded.replace(/^-/, "/").replace(/-/g, "/");
 }
 export async function loadAndComputeStats(range, periodLabel, skipWeekends) {
     const files = await findJSONLFiles();
@@ -90,55 +94,92 @@ export async function loadAndComputeStats(range, periodLabel, skipWeekends) {
     }
     return computeStatsFromEntries(allEntries, { range, periodLabel, skipWeekends });
 }
-export function computeStatsFromEntries(allEntries, opts = {}) {
+export function computeStatsFromEntries(rawEntries, opts = {}) {
     const { range, periodLabel, skipWeekends } = opts;
-    // Sort by timestamp
-    allEntries.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
-    // Filter by date range if provided
+    let entries = rawEntries.map((e) => {
+        const _date = new Date(e.timestamp);
+        return { ...e, _ts: _date.getTime(), _date };
+    });
+    entries.sort((a, b) => a._ts - b._ts);
+    // Filter by date range
     if (range) {
         const sinceMs = range.since.getTime();
         const untilMs = range.until.getTime();
-        const before = allEntries.length;
-        const filtered = allEntries.filter(e => {
-            const ts = new Date(e.timestamp).getTime();
-            return ts >= sinceMs && ts <= untilMs;
-        });
-        allEntries.length = 0;
-        allEntries.push(...filtered);
-        if (allEntries.length === 0) {
+        const before = entries.length;
+        entries = entries.filter((e) => e._ts >= sinceMs && e._ts <= untilMs);
+        if (entries.length === 0) {
             throw new Error(`No usage data found in the selected time period (${before} entries exist outside this range).`);
         }
     }
-    // Filter out weekends if requested
+    // Filter out weekends
     if (skipWeekends) {
-        const before = allEntries.length;
-        const filtered = allEntries.filter(e => {
-            const day = new Date(e.timestamp).getDay();
+        const before = entries.length;
+        entries = entries.filter((e) => {
+            const day = e._date.getDay();
             return day !== 0 && day !== 6;
         });
-        allEntries.length = 0;
-        allEntries.push(...filtered);
-        if (allEntries.length === 0) {
+        if (entries.length === 0) {
             throw new Error(`No weekday usage data found (${before} weekend entries were excluded).`);
         }
     }
-    // Build session map
+    // Single pass: sessions, hourly, daily, model usage, weekend count
     const sessionMap = new Map();
-    for (const entry of allEntries) {
-        const sid = entry.sessionId;
-        if (!sessionMap.has(sid))
-            sessionMap.set(sid, []);
-        sessionMap.get(sid).push(entry);
+    const hourly = Array.from({ length: 24 }, (_, i) => ({ hour: i, messageCount: 0, tokenCount: 0 }));
+    const dailyMap = new Map();
+    const dailySessionSets = new Map();
+    const modelMap = new Map();
+    let weekendCount = 0;
+    for (const entry of entries) {
+        const hour = entry._date.getHours();
+        const dateStr = entry.timestamp.split("T")[0] ?? entry._date.toISOString().split("T")[0];
+        const model = entry.message?.model ?? "unknown";
+        const u = entry.message?.usage;
+        const inOut = u ? (u.input_tokens ?? 0) + (u.output_tokens ?? 0) : 0;
+        // Session grouping
+        if (!sessionMap.has(entry.sessionId))
+            sessionMap.set(entry.sessionId, []);
+        sessionMap.get(entry.sessionId).push(entry);
+        // Hourly
+        hourly[hour].messageCount++;
+        hourly[hour].tokenCount += inOut;
+        // Daily
+        if (!dailyMap.has(dateStr)) {
+            dailyMap.set(dateStr, { date: dateStr, messageCount: 0, tokenCount: 0, costUSD: 0, sessions: 0 });
+            dailySessionSets.set(dateStr, new Set());
+        }
+        dailyMap.get(dateStr).messageCount++;
+        dailyMap.get(dateStr).tokenCount += inOut;
+        dailySessionSets.get(dateStr).add(entry.sessionId);
+        // Model usage
+        if (!modelMap.has(model))
+            modelMap.set(model, { tokens: 0, messages: 0, cost: 0 });
+        const md = modelMap.get(model);
+        md.messages++;
+        md.tokens += inOut;
+        // Weekend count
+        const dow = entry._date.getDay();
+        if (dow === 0 || dow === 6)
+            weekendCount++;
+    }
+    // Finalize daily sessions
+    for (const [date, sessionSet] of dailySessionSets) {
+        dailyMap.get(date).sessions = sessionSet.size;
     }
+    const dailyActivity = [...dailyMap.values()].sort((a, b) => a.date.localeCompare(b.date));
     // Compute session stats
+    const costCache = new Map();
     const sessions = [];
-    for (const [sessionId, entries] of sessionMap) {
-        const timestamps = entries.map(e => new Date(e.timestamp));
-        const startTime = new Date(Math.min(...timestamps.map(t => t.getTime())));
-        const endTime = new Date(Math.max(...timestamps.map(t => t.getTime())));
-        const models = [...new Set(entries.map(e => e.message?.model).filter(Boolean))];
+    for (const [sessionId, sessionEntries] of sessionMap) {
+        let minTs = Infinity, maxTs = -Infinity;
+        const models = new Set();
         let totalInput = 0, totalOutput = 0, totalCacheCreate = 0, totalCacheRead = 0, totalCost = 0;
-        for (const entry of entries) {
+        for (const entry of sessionEntries) {
+            if (entry._ts < minTs)
+                minTs = entry._ts;
+            if (entry._ts > maxTs)
+                maxTs = entry._ts;
+            if (entry.message?.model)
+                models.add(entry.message.model);
             const u = entry.message?.usage;
             if (u) {
                 totalInput += u.input_tokens ?? 0;
@@ -150,73 +191,26 @@ export function computeStatsFromEntries(allEntries, opts = {}) {
                 totalCost += entry.costUSD;
             }
             else if (entry.message?.model && u) {
-                totalCost += estimateCost(entry.message.model, u.input_tokens ?? 0, u.output_tokens ?? 0, u.cache_creation_input_tokens ?? 0, u.cache_read_input_tokens ?? 0);
+                totalCost += estimateCost(entry.message.model, u.input_tokens ?? 0, u.output_tokens ?? 0, u.cache_creation_input_tokens ?? 0, u.cache_read_input_tokens ?? 0, costCache);
             }
         }
         sessions.push({
             sessionId,
-            project: extractProject(entries[0]._file),
-            startTime,
-            endTime,
-            durationMinutes: (endTime.getTime() - startTime.getTime()) / 60_000,
-            messageCount: entries.length,
+            project: extractProject(sessionEntries[0]._file),
+            startTime: new Date(minTs),
+            endTime: new Date(maxTs),
+            durationMinutes: (maxTs - minTs) / 60_000,
+            messageCount: sessionEntries.length,
             totalInputTokens: totalInput,
             totalOutputTokens: totalOutput,
             totalCacheCreationTokens: totalCacheCreate,
             totalCacheReadTokens: totalCacheRead,
             totalTokens: totalInput + totalOutput + totalCacheCreate + totalCacheRead,
-            models,
+            models: [...models],
             costUSD: totalCost,
         });
     }
-    // Hourly activity
-    const hourly = Array.from({ length: 24 }, (_, i) => ({
-        hour: i,
-        messageCount: 0,
-        tokenCount: 0,
-    }));
-    for (const entry of allEntries) {
-        const hour = new Date(entry.timestamp).getHours();
-        hourly[hour].messageCount++;
-        const u = entry.message?.usage;
-        if (u) {
-            hourly[hour].tokenCount += (u.input_tokens ?? 0) + (u.output_tokens ?? 0);
-        }
-    }
-    // Daily activity
-    const dailyMap = new Map();
-    const dailySessionSets = new Map();
-    for (const entry of allEntries) {
-        const date = new Date(entry.timestamp).toISOString().split("T")[0];
-        if (!dailyMap.has(date)) {
-            dailyMap.set(date, { date, messageCount: 0, tokenCount: 0, costUSD: 0, sessions: 0 });
-            dailySessionSets.set(date, new Set());
-        }
-        const day = dailyMap.get(date);
-        day.messageCount++;
-        const u = entry.message?.usage;
-        if (u) {
-            day.tokenCount += (u.input_tokens ?? 0) + (u.output_tokens ?? 0);
-        }
-        dailySessionSets.get(date).add(entry.sessionId);
-    }
-    for (const [date, sessionSet] of dailySessionSets) {
-        dailyMap.get(date).sessions = sessionSet.size;
-    }
-    const dailyActivity = [...dailyMap.values()].sort((a, b) => a.date.localeCompare(b.date));
-    // Model usage
-    const modelMap = new Map();
-    for (const entry of allEntries) {
-        const model = entry.message?.model ?? "unknown";
-        if (!modelMap.has(model))
-            modelMap.set(model, { tokens: 0, messages: 0, cost: 0 });
-        const m = modelMap.get(model);
-        m.messages++;
-        const u = entry.message?.usage;
-        if (u) {
-            m.tokens += (u.input_tokens ?? 0) + (u.output_tokens ?? 0);
-        }
-    }
+    // Model usage percentages
     const totalTokensAll = [...modelMap.values()].reduce((sum, m) => sum + m.tokens, 0);
     const modelUsage = [...modelMap.entries()]
         .map(([model, data]) => ({
@@ -232,16 +226,16 @@ export function computeStatsFromEntries(allEntries, opts = {}) {
     const totalInputTokens = sessions.reduce((s, sess) => s + sess.totalInputTokens, 0);
     const totalOutputTokens = sessions.reduce((s, sess) => s + sess.totalOutputTokens, 0);
     const totalCost = sessions.reduce((s, sess) => s + sess.costUSD, 0);
-    const totalMessages = allEntries.length;
-    // Dates
-    const firstActivity = new Date(allEntries[0].timestamp);
-    const lastActivity = new Date(allEntries[allEntries.length - 1].timestamp);
-    const uniqueDays = new Set(allEntries.map(e => new Date(e.timestamp).toISOString().split("T")[0]));
+    const totalMessages = entries.length;
+    // Dates — reuse dailyMap keys instead of reparsing
+    const firstActivity = entries[0]._date;
+    const lastActivity = entries[entries.length - 1]._date;
+    const uniqueDays = new Set(dailyMap.keys());
     const totalDaysActive = uniqueDays.size;
     // Peak stats
-    const busiestDay = dailyActivity.reduce((best, d) => d.tokenCount > best.tokenCount ? d : best);
-    const busiestHour = hourly.reduce((best, h) => h.tokenCount > best.tokenCount ? h : best).hour;
-    const longestSession = sessions.reduce((best, s) => s.durationMinutes > best.durationMinutes ? s : best);
+    const busiestDay = dailyActivity.reduce((best, d) => (d.tokenCount > best.tokenCount ? d : best));
+    const busiestHour = hourly.reduce((best, h) => (h.tokenCount > best.tokenCount ? h : best)).hour;
+    const longestSession = sessions.reduce((best, s) => (s.durationMinutes > best.durationMinutes ? s : best));
     // Project frequency
     const projectCounts = new Map();
     for (const sess of sessions) {
@@ -264,15 +258,9 @@ export function computeStatsFromEntries(allEntries, opts = {}) {
         }
     }
     // Scores
-    const nightTokens = hourly.filter(h => h.hour >= 22 || h.hour < 5).reduce((s, h) => s + h.tokenCount, 0);
+    const nightTokens = hourly.filter((h) => h.hour >= 22 || h.hour < 5).reduce((s, h) => s + h.tokenCount, 0);
     const nightOwlScore = totalTokensAll > 0 ? Math.round((nightTokens / totalTokensAll) * 100) : 0;
-    const weekendEntries = allEntries.filter(e => {
-        const day = new Date(e.timestamp).getDay();
-        return day === 0 || day === 6;
-    });
-    const weekendWarriorScore = allEntries.length > 0
-        ? Math.round((weekendEntries.length / allEntries.length) * 100)
-        : 0;
+    const weekendWarriorScore = entries.length > 0 ? Math.round((weekendCount / entries.length) * 100) : 0;
     const favoriteModel = modelUsage[0]?.model ?? "unknown";
     const totalSessionHours = sessions.reduce((s, sess) => s + sess.durationMinutes, 0) / 60;
     const avgSessionMinutes = sessions.length > 0 ? sessions.reduce((s, sess) => s + sess.durationMinutes, 0) / sessions.length : 0;
@@ -317,15 +305,15 @@ export function computeStatsFromEntries(allEntries, opts = {}) {
         marathonEquivalent: Math.round((totalSessionHours / 4.5) * 100) / 100,
         // Environmental estimates (rough but directionally correct)
         // ~0.5 liters of water per 1M tokens for data center cooling
-        waterLiters: Math.round(totalTokens / 1_000_000 * 0.5 * 100) / 100,
+        waterLiters: Math.round((totalTokens / 1_000_000) * 0.5 * 100) / 100,
         // ~0.3g CO2 per 1K tokens (inference energy + grid mix)
-        co2Grams: Math.round(totalTokens / 1_000 * 0.3),
+        co2Grams: Math.round((totalTokens / 1_000) * 0.3),
         // ~0.001 kWh per 1K tokens
-        kwhUsed: Math.round(totalTokens / 1_000 * 0.001 * 100) / 100,
+        kwhUsed: Math.round((totalTokens / 1_000) * 0.001 * 100) / 100,
     };
 }
 export function computeArchetype(params) {
-    const { nightOwlScore, weekendWarriorScore, avgSessionMinutes, totalSessions, streakDays, totalTokens, favoriteModel } = params;
+    const { nightOwlScore, weekendWarriorScore, avgSessionMinutes, totalSessions, streakDays, totalTokens, favoriteModel, } = params;
     if (nightOwlScore > 50) {
         return {
             archetype: "The Night Owl Demon",

package/dist/data/types.d.ts

@@ -92,10 +92,11 @@ export interface WrappedStats {
     co2Grams: number;
     kwhUsed: number;
 }
+export type Mode = "sassy" | "dark";
 export interface VideoProps {
     stats: WrappedStats;
     commentary: Commentary;
-    mode: "sassy" | "dark";
+    mode: Mode;
 }
 export interface Commentary {
     tokensLine: string;

package/dist/render.js

@@ -11,7 +11,7 @@ function findChromeBinary() {
         "/usr/bin/chromium",
         "/usr/bin/google-chrome",
     ];
-    return candidates.find(p => existsSync(p));
+    return candidates.find((p) => existsSync(p));
 }
 export async function renderVideo(stats, commentary, mode, outputPath) {
     const resolvedOutput = resolve(process.cwd(), outputPath);
@@ -26,10 +26,7 @@ export async function renderVideo(stats, commentary, mode, outputPath) {
             ...config,
             module: {
                 ...config.module,
-                rules: [
-                    ...(config.module?.rules ?? []),
-                    { test: /\.m?js$/, resolve: { fullySpecified: false } },
-                ],
+                rules: [...(config.module?.rules ?? []), { test: /\.m?js$/, resolve: { fullySpecified: false } }],
             },
         }),
     });

package/dist/video/Composition.js

@@ -30,9 +30,12 @@ const SlideWithTransition = ({ children, index }) => {
         extrapolateRight: "clamp",
     });
     const fadeOut = index < TOTAL_SLIDES - 1
-        ? interpolate(frame, [FADE_IN + READABLE, SLIDE_CONTENT], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })
+        ? interpolate(frame, [FADE_IN + READABLE, SLIDE_CONTENT], [1, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+        })
         : 1; // last slide stays visible
-    return (_jsx(AbsoluteFill, { style: { opacity: fadeIn * fadeOut }, children: children }));
+    return _jsx(AbsoluteFill, { style: { opacity: fadeIn * fadeOut }, children: children });
 };
 export const CCWrappedComposition = ({ stats, commentary, mode }) => {
     const slides = [

package/dist/video/Root.js

@@ -25,7 +25,7 @@ const defaultProps = {
         totalDaysActive: 89,
         firstActivity: new Date("2025-06-01"),
         lastActivity: new Date("2026-03-15"),
-        busiestDay: { date: "2026-02-14", messageCount: 247, tokenCount: 2_400_000, costUSD: 18.50, sessions: 8 },
+        busiestDay: { date: "2026-02-14", messageCount: 247, tokenCount: 2_400_000, costUSD: 18.5, sessions: 8 },
         busiestHour: 22,
         longestSession: {
             sessionId: "demo",
@@ -40,7 +40,7 @@ const defaultProps = {
             totalCacheReadTokens: 300_000,
             totalTokens: 3_200_000,
             models: ["claude-sonnet-4-6"],
-            costUSD: 18.50,
+            costUSD: 18.5,
         },
         mostActiveProject: "/home/user/megaproject",
         hourlyActivity: Array.from({ length: 24 }, (_, i) => ({

package/dist/video/components/ParticleField.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useCurrentFrame, interpolate } from "remotion";
-import { colors } from "../styles";
+import { getColors } from "../styles";
 export const ParticleField = ({ count = 40, seed = 42 }) => {
     const frame = useCurrentFrame();
     const particles = useMemo(() => {
         const rng = (s) => {
-            let x = Math.sin(s) * 10000;
+            const x = Math.sin(s) * 10000;
             return x - Math.floor(x);
         };
-        const particleColors = [colors.primary, colors.secondary, colors.accent, colors.gold, colors.pink];
+        const c = getColors("sassy");
+        const particleColors = [c.primary, c.secondary, c.accent, c.gold, c.pink];
         return Array.from({ length: count }, (_, i) => ({
             x: rng(seed + i * 7) * 100,
             y: rng(seed + i * 13) * 100,
@@ -20,7 +21,7 @@ export const ParticleField = ({ count = 40, seed = 42 }) => {
         }));
     }, [count, seed]);
     return (_jsx("div", { style: { position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }, children: particles.map((p, i) => {
-            const y = (p.y + frame * p.speed * 0.3) % 110 - 5;
+            const y = ((p.y + frame * p.speed * 0.3) % 110) - 5;
             const twinkle = interpolate(Math.sin(frame * 0.1 + i), [-1, 1], [p.opacity * 0.5, p.opacity]);
             return (_jsx("div", { style: {
                     position: "absolute",

package/dist/video/slides/ArchetypeSlide.js

@@ -15,20 +15,70 @@ function getArchetypeColor(archetype, mode) {
     if (archetype.includes("Streak"))
         return c.gold;
     if (archetype.includes("Whale"))
-        return mode === "dark" ? c.accent : "#10b981";
+        return mode === "dark" ? c.accent : c.green;
     if (archetype.includes("Connoisseur"))
         return c.gold;
     if (archetype.includes("Serial"))
         return c.pink;
     return c.secondary;
 }
-export const ArchetypeSlide = ({ stats, commentary, mode }) => {
+export const ArchetypeSlide = ({ stats, commentary, mode, }) => {
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const c = getColors(mode);
     const color = getArchetypeColor(stats.archetype, mode);
-    const revealScale = spring({ frame: Math.max(0, frame - 20), fps, from: 0, to: 1, config: { damping: 8, stiffness: 80 } });
+    const revealScale = spring({
+        frame: Math.max(0, frame - 20),
+        fps,
+        from: 0,
+        to: 1,
+        config: { damping: 8, stiffness: 80 },
+    });
     const glowIntensity = interpolate(Math.sin(frame * 0.08), [-1, 1], [0.5, 1]);
-    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(200, c), color: c.text }, children: [_jsx(ParticleField, { count: 40, seed: 333 }), _jsx(GlowOrb, { color: color, size: 350, x: 50, y: 45, speed: 0.3 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 15, y: 20 }), _jsx(GlowOrb, { color: c.accent, size: 180, x: 85, y: 80 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color, zIndex: 1, letterSpacing: "0.3em" }, children: mode === "dark" ? "Your Classification" : "You Are..." }) }), _jsxs("div", { style: { transform: `scale(${revealScale})`, opacity: revealScale, zIndex: 1, marginTop: 24, textAlign: "center" }, children: [_jsx("div", { style: { width: 90, height: 3, background: `linear-gradient(90deg, transparent, ${color}, transparent)`, margin: "0 auto 18px", opacity: glowIntensity } }), _jsx("div", { style: { fontSize: 68, fontWeight: 900, lineHeight: 1.1, ...glowText(color), background: `linear-gradient(135deg, ${color}, ${c.text}, ${color})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", filter: `brightness(${0.8 + glowIntensity * 0.4})` }, children: stats.archetype }), _jsx("div", { style: { width: 90, height: 3, background: `linear-gradient(90deg, transparent, ${color}, transparent)`, margin: "18px auto 0", opacity: glowIntensity } })] }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: { fontSize: 18, color: c.textMuted, maxWidth: 580, textAlign: "center", lineHeight: 1.5, marginTop: 28, zIndex: 1, padding: "8px 18px", borderRadius: 10, background: "rgba(0,0,0,0.35)" }, children: commentary }) }), _jsx(FadeIn, { delay: 55, style: { zIndex: 1, marginTop: 28 }, children: _jsxs("div", { style: { display: "flex", gap: 14 }, children: [_jsx(Badge, { label: "Night Owl", value: `${stats.nightOwlScore}%`, color: c.primary, textColor: c.textMuted }), _jsx(Badge, { label: "Weekend", value: `${stats.weekendWarriorScore}%`, color: c.secondary, textColor: c.textMuted }), _jsx(Badge, { label: "Streak", value: `${stats.streakDays}d`, color: c.gold, textColor: c.textMuted })] }) })] }));
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(200, c), color: c.text }, children: [_jsx(ParticleField, { count: 40, seed: 333 }), _jsx(GlowOrb, { color: color, size: 350, x: 50, y: 45, speed: 0.3 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 15, y: 20 }), _jsx(GlowOrb, { color: c.accent, size: 180, x: 85, y: 80 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color, zIndex: 1, letterSpacing: "0.3em" }, children: mode === "dark" ? "Your Classification" : "You Are..." }) }), _jsxs("div", { style: {
+                    transform: `scale(${revealScale})`,
+                    opacity: revealScale,
+                    zIndex: 1,
+                    marginTop: 24,
+                    textAlign: "center",
+                }, children: [_jsx("div", { style: {
+                            width: 90,
+                            height: 3,
+                            background: `linear-gradient(90deg, transparent, ${color}, transparent)`,
+                            margin: "0 auto 18px",
+                            opacity: glowIntensity,
+                        } }), _jsx("div", { style: {
+                            fontSize: 68,
+                            fontWeight: 900,
+                            lineHeight: 1.1,
+                            ...glowText(color),
+                            background: `linear-gradient(135deg, ${color}, ${c.text}, ${color})`,
+                            WebkitBackgroundClip: "text",
+                            WebkitTextFillColor: "transparent",
+                            filter: `brightness(${0.8 + glowIntensity * 0.4})`,
+                        }, children: stats.archetype }), _jsx("div", { style: {
+                            width: 90,
+                            height: 3,
+                            background: `linear-gradient(90deg, transparent, ${color}, transparent)`,
+                            margin: "18px auto 0",
+                            opacity: glowIntensity,
+                        } })] }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: {
+                        fontSize: 18,
+                        color: c.textMuted,
+                        maxWidth: 580,
+                        textAlign: "center",
+                        lineHeight: 1.5,
+                        marginTop: 28,
+                        zIndex: 1,
+                        padding: "8px 18px",
+                        borderRadius: 10,
+                        background: "rgba(0,0,0,0.35)",
+                    }, children: commentary }) }), _jsx(FadeIn, { delay: 55, style: { zIndex: 1, marginTop: 28 }, children: _jsxs("div", { style: { display: "flex", gap: 14 }, children: [_jsx(Badge, { label: "Night Owl", value: `${stats.nightOwlScore}%`, color: c.primary, textColor: c.textMuted }), _jsx(Badge, { label: "Weekend", value: `${stats.weekendWarriorScore}%`, color: c.secondary, textColor: c.textMuted }), _jsx(Badge, { label: "Streak", value: `${stats.streakDays}d`, color: c.gold, textColor: c.textMuted })] }) })] }));
 };
-const Badge = ({ label: l, value, color, textColor }) => (_jsxs("div", { style: { background: `${color}20`, border: `1px solid ${color}50`, borderRadius: 12, padding: "10px 20px", textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 22, fontWeight: 700, color }, children: value }), _jsx("div", { style: { fontSize: 11, color: textColor, marginTop: 2, textTransform: "uppercase" }, children: l })] }));
+const Badge = ({ label: l, value, color, textColor, }) => (_jsxs("div", { style: {
+        background: `${color}20`,
+        border: `1px solid ${color}50`,
+        borderRadius: 12,
+        padding: "10px 20px",
+        textAlign: "center",
+    }, children: [_jsx("div", { style: { fontSize: 22, fontWeight: 700, color }, children: value }), _jsx("div", { style: { fontSize: 11, color: textColor, marginTop: 2, textTransform: "uppercase" }, children: l })] }));

package/dist/video/slides/BusiestDaySlide.js

@@ -9,15 +9,24 @@ function formatDate(dateStr) {
     const d = new Date(dateStr + "T00:00:00");
     return d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
 }
-export const BusiestDaySlide = ({ stats, commentary, mode }) => {
+export const BusiestDaySlide = ({ stats, commentary, mode, }) => {
     const frame = useCurrentFrame();
     const c = getColors(mode);
     const day = stats.busiestDay;
     const recentDays = stats.dailyActivity.slice(-14);
-    const maxTokens = Math.max(...recentDays.map(d => d.tokenCount), 1);
+    const maxTokens = Math.max(...recentDays.map((d) => d.tokenCount), 1);
     return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(45, c), color: c.text }, children: [_jsx(ParticleField, { count: 30, seed: 55 }), _jsx(GlowOrb, { color: c.accent, size: 250, x: 50, y: 30 }), _jsx(GlowOrb, { color: c.pink, size: 180, x: 25, y: 70 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: c.accent, zIndex: 1 }, children: mode === "dark" ? "Peak Destruction Day" : "Your Biggest Day" }) }), _jsx(FadeIn, { delay: 12, children: _jsx("div", { style: { fontSize: 44, fontWeight: 900, ...glowText(c.accent), color: c.text, zIndex: 1, marginTop: 16 }, children: formatDate(day.date) }) }), _jsx(FadeIn, { delay: 25, children: _jsxs("div", { style: { display: "flex", gap: 48, marginTop: 24, zIndex: 1 }, children: [_jsxs("div", { style: { textAlign: "center" }, children: [_jsx(AnimatedNumber, { value: day.tokenCount, style: { fontSize: 40, fontWeight: 800, color: c.accent }, startFrame: 25, duration: 25 }), _jsx("div", { style: { fontSize: 13, color: c.textMuted, marginTop: 4 }, children: "TOKENS" })] }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx(AnimatedNumber, { value: day.messageCount, style: { fontSize: 40, fontWeight: 800, color: c.pink }, startFrame: 28, duration: 25 }), _jsx("div", { style: { fontSize: 13, color: c.textMuted, marginTop: 4 }, children: "MESSAGES" })] }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx(AnimatedNumber, { value: day.sessions, style: { fontSize: 40, fontWeight: 800, color: c.secondary }, startFrame: 31, duration: 25 }), _jsx("div", { style: { fontSize: 13, color: c.textMuted, marginTop: 4 }, children: "SESSIONS" })] })] }) }), _jsx(FadeIn, { delay: 45, style: { width: "88%", marginTop: 28, zIndex: 1 }, children: _jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 4, height: 100 }, children: recentDays.map((d, i) => {
-                        const barHeight = interpolate(frame, [48 + i, 68 + i], [0, (d.tokenCount / maxTokens) * 100], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+                        const barHeight = interpolate(frame, [48 + i, 68 + i], [0, (d.tokenCount / maxTokens) * 100], {
+                            extrapolateLeft: "clamp",
+                            extrapolateRight: "clamp",
+                        });
                         const isBusiest = d.date === day.date;
-                        return (_jsx("div", { style: { flex: 1, height: barHeight, borderRadius: 3, background: isBusiest ? `linear-gradient(180deg, ${c.accent}, ${c.pink})` : `${c.primary}90`, boxShadow: isBusiest ? `0 0 8px ${c.accent}80` : undefined } }, d.date));
+                        return (_jsx("div", { style: {
+                                flex: 1,
+                                height: barHeight,
+                                borderRadius: 3,
+                                background: isBusiest ? `linear-gradient(180deg, ${c.accent}, ${c.pink})` : `${c.primary}90`,
+                                boxShadow: isBusiest ? `0 0 8px ${c.accent}80` : undefined,
+                            } }, d.date));
                     }) }) }), _jsx(FadeIn, { delay: 60, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
 };

package/dist/video/slides/CostSlide.js

@@ -4,9 +4,24 @@ import { FadeIn } from "../components/FadeIn";
 import { AnimatedNumber } from "../components/AnimatedNumber";
 import { ParticleField } from "../components/ParticleField";
 import { GlowOrb } from "../components/GlowOrb";
-export const CostSlide = ({ stats, commentary, mode }) => {
+export const CostSlide = ({ stats, commentary, mode, }) => {
     const c = getColors(mode);
-    const costColor = mode === "dark" ? c.accent : "#10b981";
-    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(320, c), color: c.text }, children: [_jsx(ParticleField, { count: 25, seed: 42 }), _jsx(GlowOrb, { color: costColor, size: 280, x: 50, y: 35 }), _jsx(GlowOrb, { color: c.primary, size: 160, x: 80, y: 75 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: costColor, zIndex: 1 }, children: mode === "dark" ? "The Price of Progress" : "Estimated Cost" }) }), _jsx(AnimatedNumber, { value: stats.totalCost, decimals: 2, prefix: "$", style: { ...bigNumber, ...glowText(costColor), color: costColor, display: "block", textAlign: "center", zIndex: 1, marginTop: 20 }, startFrame: 10, duration: 35 }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: { display: "flex", gap: 50, marginTop: 36, zIndex: 1 }, children: mode === "dark" ? (_jsxs(_Fragment, { children: [_jsx(Metric, { icon: "\uD83D\uDCA7", value: `${stats.waterLiters.toLocaleString(undefined, { maximumFractionDigits: 1 })}L`, label: "Water" }), _jsx(Metric, { icon: "\uD83C\uDFED", value: `${(stats.co2Grams / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 })}kg`, label: "CO\u2082" }), _jsx(Metric, { icon: "\u26A1", value: `${stats.kwhUsed.toLocaleString(undefined, { maximumFractionDigits: 1 })}`, label: "kWh" })] })) : (_jsxs(_Fragment, { children: [_jsx(Metric, { icon: "\u2615", value: stats.coffeeEquivalent.toLocaleString(), label: "Coffees" }), _jsx(Metric, { icon: "\uD83C\uDFC3", value: stats.marathonEquivalent.toLocaleString(undefined, { maximumFractionDigits: 1 }), label: "Marathons" }), _jsx(Metric, { icon: "\uD83D\uDCD6", value: stats.warAndPeaceEquivalent.toLocaleString(undefined, { maximumFractionDigits: 1 }), label: "War & Peaces" })] })) }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+    const costColor = mode === "dark" ? c.accent : c.green;
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(320, c), color: c.text }, children: [_jsx(ParticleField, { count: 25, seed: 42 }), _jsx(GlowOrb, { color: costColor, size: 280, x: 50, y: 35 }), _jsx(GlowOrb, { color: c.primary, size: 160, x: 80, y: 75 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: costColor, zIndex: 1 }, children: mode === "dark" ? "The Price of Progress" : "Estimated Cost" }) }), _jsx(AnimatedNumber, { value: stats.totalCost, decimals: 2, prefix: "$", style: {
+                    ...bigNumber,
+                    ...glowText(costColor),
+                    color: costColor,
+                    display: "block",
+                    textAlign: "center",
+                    zIndex: 1,
+                    marginTop: 20,
+                }, startFrame: 10, duration: 35 }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: { display: "flex", gap: 50, marginTop: 36, zIndex: 1 }, children: mode === "dark" ? (_jsxs(_Fragment, { children: [_jsx(Metric, { icon: "\uD83D\uDCA7", value: `${stats.waterLiters.toLocaleString(undefined, { maximumFractionDigits: 1 })}L`, label: "Water" }), _jsx(Metric, { icon: "\uD83C\uDFED", value: `${(stats.co2Grams / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 })}kg`, label: "CO\u2082" }), _jsx(Metric, { icon: "\u26A1", value: `${stats.kwhUsed.toLocaleString(undefined, { maximumFractionDigits: 1 })}`, label: "kWh" })] })) : (_jsxs(_Fragment, { children: [_jsx(Metric, { icon: "\u2615", value: stats.coffeeEquivalent.toLocaleString(), label: "Coffees" }), _jsx(Metric, { icon: "\uD83C\uDFC3", value: stats.marathonEquivalent.toLocaleString(undefined, { maximumFractionDigits: 1 }), label: "Marathons" }), _jsx(Metric, { icon: "\uD83D\uDCD6", value: stats.warAndPeaceEquivalent.toLocaleString(undefined, { maximumFractionDigits: 1 }), label: "War & Peaces" })] })) }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
 };
-const Metric = ({ icon, value, label: l }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 36 }, children: icon }), _jsx("div", { style: { fontSize: 30, fontWeight: 800, color: "#f1f5f9", marginTop: 6 }, children: value }), _jsx("div", { style: { fontSize: 13, color: "inherit", opacity: 0.7, marginTop: 3, textTransform: "uppercase", letterSpacing: "0.1em" }, children: l })] }));
+const Metric = ({ icon, value, label: l }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 36 }, children: icon }), _jsx("div", { style: { fontSize: 30, fontWeight: 800, color: "#f1f5f9", marginTop: 6 }, children: value }), _jsx("div", { style: {
+                fontSize: 13,
+                color: "inherit",
+                opacity: 0.7,
+                marginTop: 3,
+                textTransform: "uppercase",
+                letterSpacing: "0.1em",
+            }, children: l })] }));

package/dist/video/slides/IntroSlide.js

@@ -13,7 +13,48 @@ export const IntroSlide = ({ mode, periodLabel }) => {
     const taglineScale = spring({ frame: Math.max(0, frame - 35), fps, from: 0.5, to: 1, config: { damping: 8 } });
     const taglineOpacity = interpolate(frame, [35, 50], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     const rotation = interpolate(frame, [0, 150], [0, 360], { extrapolateRight: "extend" });
-    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(135, c), color: c.text }, children: [_jsx(ParticleField, { count: 40 }), _jsx(GlowOrb, { color: c.primary, size: 250, x: 15, y: 25 }), _jsx(GlowOrb, { color: c.secondary, size: 200, x: 80, y: 70 }), _jsx(GlowOrb, { color: c.accent, size: 150, x: 50, y: 15, speed: 0.3 }), _jsx("div", { style: { position: "absolute", width: 180, height: 180, borderRadius: "50%", border: `2px solid ${c.primary}30`, transform: `scale(${logoScale}) rotate(${rotation}deg)` } }), _jsx("div", { style: { position: "absolute", width: 150, height: 150, borderRadius: "50%", border: `1px solid ${c.secondary}20`, transform: `scale(${logoScale}) rotate(-${rotation * 0.7}deg)` } }), _jsx("div", { style: { transform: `scale(${logoScale})`, fontSize: 72, fontWeight: 900, background: `linear-gradient(135deg, ${c.primary}, ${c.secondary})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", zIndex: 1 }, children: "</>" }), _jsx("div", { style: { opacity: titleOpacity, fontSize: 48, fontWeight: 800, marginTop: 24, letterSpacing: "-0.02em", zIndex: 1 }, children: _jsx("span", { style: { background: `linear-gradient(90deg, ${c.primary}, ${c.accent})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }, children: "ccwrap" }) }), _jsx(FadeIn, { delay: 35, children: _jsx("div", { style: { opacity: taglineOpacity, transform: `scale(${taglineScale})`, fontSize: 22, fontWeight: 500, color: c.textMuted, marginTop: 20, zIndex: 1 }, children: periodLabel.startsWith("Your ")
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(135, c), color: c.text }, children: [_jsx(ParticleField, { count: 40 }), _jsx(GlowOrb, { color: c.primary, size: 250, x: 15, y: 25 }), _jsx(GlowOrb, { color: c.secondary, size: 200, x: 80, y: 70 }), _jsx(GlowOrb, { color: c.accent, size: 150, x: 50, y: 15, speed: 0.3 }), _jsx("div", { style: {
+                    position: "absolute",
+                    width: 180,
+                    height: 180,
+                    borderRadius: "50%",
+                    border: `2px solid ${c.primary}30`,
+                    transform: `scale(${logoScale}) rotate(${rotation}deg)`,
+                } }), _jsx("div", { style: {
+                    position: "absolute",
+                    width: 150,
+                    height: 150,
+                    borderRadius: "50%",
+                    border: `1px solid ${c.secondary}20`,
+                    transform: `scale(${logoScale}) rotate(-${rotation * 0.7}deg)`,
+                } }), _jsx("div", { style: {
+                    transform: `scale(${logoScale})`,
+                    fontSize: 72,
+                    fontWeight: 900,
+                    background: `linear-gradient(135deg, ${c.primary}, ${c.secondary})`,
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    zIndex: 1,
+                }, children: "</>" }), _jsx("div", { style: {
+                    opacity: titleOpacity,
+                    fontSize: 48,
+                    fontWeight: 800,
+                    marginTop: 24,
+                    letterSpacing: "-0.02em",
+                    zIndex: 1,
+                }, children: _jsx("span", { style: {
+                        background: `linear-gradient(90deg, ${c.primary}, ${c.accent})`,
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                    }, children: "ccwrap" }) }), _jsx(FadeIn, { delay: 35, children: _jsx("div", { style: {
+                        opacity: taglineOpacity,
+                        transform: `scale(${taglineScale})`,
+                        fontSize: 22,
+                        fontWeight: 500,
+                        color: c.textMuted,
+                        marginTop: 20,
+                        zIndex: 1,
+                    }, children: periodLabel.startsWith("Your ")
                         ? mode === "dark"
                             ? `${periodLabel} in AI. The planet remembers.`
                             : `${periodLabel} in AI-assisted coding`

package/dist/video/slides/ModelSlide.js

@@ -31,15 +31,34 @@ function getModelColor(model, mode) {
         return c.secondary;
     return c.accent;
 }
-export const ModelSlide = ({ stats, commentary, mode }) => {
+export const ModelSlide = ({ stats, commentary, mode, }) => {
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const c = getColors(mode);
     const favoriteColor = getModelColor(stats.favoriteModel, mode);
     const revealScale = spring({ frame: Math.max(0, frame - 15), fps, from: 0.3, to: 1, config: { damping: 10 } });
-    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(260, c), color: c.text }, children: [_jsx(ParticleField, { count: 35, seed: 77 }), _jsx(GlowOrb, { color: favoriteColor, size: 300, x: 50, y: 40 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: favoriteColor, zIndex: 1 }, children: mode === "dark" ? "Your Weapon of Choice" : "Your #1 Model" }) }), _jsx(FadeIn, { delay: 15, children: _jsx("div", { style: { fontSize: 90, fontWeight: 900, ...glowText(favoriteColor), background: `linear-gradient(135deg, ${favoriteColor}, ${c.text})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", transform: `scale(${revealScale})`, zIndex: 1, marginTop: 12 }, children: getModelDisplayName(stats.favoriteModel) }) }), _jsx(FadeIn, { delay: 30, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) }), _jsx(FadeIn, { delay: 40, style: { width: "85%", marginTop: 28, zIndex: 1 }, children: _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: stats.modelUsage.slice(0, 4).map((m, i) => {
-                        const barWidth = interpolate(frame, [45 + i * 5, 65 + i * 5], [0, m.percentage], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(260, c), color: c.text }, children: [_jsx(ParticleField, { count: 35, seed: 77 }), _jsx(GlowOrb, { color: favoriteColor, size: 300, x: 50, y: 40 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: favoriteColor, zIndex: 1 }, children: mode === "dark" ? "Your Weapon of Choice" : "Your #1 Model" }) }), _jsx(FadeIn, { delay: 15, children: _jsx("div", { style: {
+                        fontSize: 90,
+                        fontWeight: 900,
+                        ...glowText(favoriteColor),
+                        background: `linear-gradient(135deg, ${favoriteColor}, ${c.text})`,
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        transform: `scale(${revealScale})`,
+                        zIndex: 1,
+                        marginTop: 12,
+                    }, children: getModelDisplayName(stats.favoriteModel) }) }), _jsx(FadeIn, { delay: 30, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) }), _jsx(FadeIn, { delay: 40, style: { width: "85%", marginTop: 28, zIndex: 1 }, children: _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: stats.modelUsage.slice(0, 4).map((m, i) => {
+                        const barWidth = interpolate(frame, [45 + i * 5, 65 + i * 5], [0, m.percentage], {
+                            extrapolateLeft: "clamp",
+                            extrapolateRight: "clamp",
+                        });
                         const modelColor = getModelColor(m.model, mode);
-                        return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("div", { style: { width: 100, fontSize: 14, color: c.textMuted, textAlign: "right", fontWeight: 500 }, children: getModelDisplayName(m.model) }), _jsx("div", { style: { flex: 1, height: 24, borderRadius: 12, background: `${c.text}20`, overflow: "hidden" }, children: _jsx("div", { style: { width: `${barWidth}%`, height: "100%", borderRadius: 12, background: `linear-gradient(90deg, ${modelColor}, ${modelColor}cc)`, boxShadow: `0 0 8px ${modelColor}60` } }) }), _jsxs("div", { style: { width: 44, fontSize: 14, color: c.textMuted, fontWeight: 600 }, children: [m.percentage.toFixed(0), "%"] })] }, m.model));
+                        return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("div", { style: { width: 100, fontSize: 14, color: c.textMuted, textAlign: "right", fontWeight: 500 }, children: getModelDisplayName(m.model) }), _jsx("div", { style: { flex: 1, height: 24, borderRadius: 12, background: `${c.text}20`, overflow: "hidden" }, children: _jsx("div", { style: {
+                                            width: `${barWidth}%`,
+                                            height: "100%",
+                                            borderRadius: 12,
+                                            background: `linear-gradient(90deg, ${modelColor}, ${modelColor}cc)`,
+                                            boxShadow: `0 0 8px ${modelColor}60`,
+                                        } }) }), _jsxs("div", { style: { width: 44, fontSize: 14, color: c.textMuted, fontWeight: 600 }, children: [m.percentage.toFixed(0), "%"] })] }, m.model));
                     }) }) })] }));
 };

package/dist/video/slides/PeakHoursSlide.js

@@ -35,14 +35,24 @@ function getTimeTitle(hour, mode) {
         return "Night Coder";
     return "Midnight Demon";
 }
-export const PeakHoursSlide = ({ stats, commentary, mode }) => {
+export const PeakHoursSlide = ({ stats, commentary, mode, }) => {
     const frame = useCurrentFrame();
     const c = getColors(mode);
-    const maxActivity = Math.max(...stats.hourlyActivity.map(h => h.tokenCount), 1);
+    const maxActivity = Math.max(...stats.hourlyActivity.map((h) => h.tokenCount), 1);
     return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(280, c), color: c.text }, children: [_jsx(ParticleField, { count: 20, seed: 200 }), _jsx(GlowOrb, { color: c.secondary, size: 250, x: 50, y: 30 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 20, y: 70 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: c.secondary, zIndex: 1 }, children: mode === "dark" ? "Peak Power Draw" : "Peak Coding Hours" }) }), _jsxs(FadeIn, { delay: 12, children: [_jsx("div", { style: { fontSize: 56, fontWeight: 900, ...glowText(c.secondary), color: c.text, zIndex: 1, marginTop: 12 }, children: getTimeTitle(stats.busiestHour, mode) }), _jsxs("div", { style: { fontSize: 18, color: c.textMuted, textAlign: "center", marginTop: 8, zIndex: 1 }, children: ["Your peak: ", _jsx("span", { style: { color: c.secondary, fontWeight: 700 }, children: formatHour(stats.busiestHour) })] })] }), _jsx(FadeIn, { delay: 25, style: { marginTop: 32, zIndex: 1 }, children: _jsxs("div", { style: { width: 700, height: 180 }, children: [_jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 3, height: 150 }, children: stats.hourlyActivity.map((h, i) => {
                                 const barHeight = interpolate(frame, [28 + i * 0.5, 48 + i * 0.5], [0, (h.tokenCount / maxActivity) * 150], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
                                 const isPeak = h.hour === stats.busiestHour;
                                 const isNight = h.hour >= 22 || h.hour < 5;
-                                return (_jsx("div", { style: { flex: 1 }, children: _jsx("div", { style: { width: "100%", height: barHeight, borderRadius: 3, background: isPeak ? `linear-gradient(180deg, ${c.secondary}, ${c.primary})` : isNight ? `${c.primary}cc` : `${c.text}60`, boxShadow: isPeak ? `0 0 8px ${c.secondary}80` : undefined } }) }, i));
-                            }) }), _jsx("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 6 }, children: [0, 6, 12, 18, 23].map(h => _jsx("div", { style: { fontSize: 12, color: c.textMuted }, children: formatHour(h) }, h)) })] }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+                                return (_jsx("div", { style: { flex: 1 }, children: _jsx("div", { style: {
+                                            width: "100%",
+                                            height: barHeight,
+                                            borderRadius: 3,
+                                            background: isPeak
+                                                ? `linear-gradient(180deg, ${c.secondary}, ${c.primary})`
+                                                : isNight
+                                                    ? `${c.primary}cc`
+                                                    : `${c.text}60`,
+                                            boxShadow: isPeak ? `0 0 8px ${c.secondary}80` : undefined,
+                                        } }) }, i));
+                            }) }), _jsx("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 6 }, children: [0, 6, 12, 18, 23].map((h) => (_jsx("div", { style: { fontSize: 12, color: c.textMuted }, children: formatHour(h) }, h))) })] }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
 };

package/dist/video/slides/SessionSlide.js

@@ -11,12 +11,32 @@ function formatDuration(minutes) {
     const mins = Math.round(minutes % 60);
     return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
 }
-export const SessionSlide = ({ stats, commentary, mode }) => {
+export const SessionSlide = ({ stats, commentary, mode, }) => {
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const c = getColors(mode);
     const pulse = spring({ frame: frame % 40, fps, from: 1, to: 1.04, config: { damping: 5 } });
-    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(160, c), color: c.text }, children: [_jsx(ParticleField, { count: 25, seed: 123 }), _jsx(GlowOrb, { color: c.pink, size: 300, x: 50, y: 40 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 75, y: 20 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: c.pink, zIndex: 1 }, children: mode === "dark" ? "Endurance Test" : "Marathon Session" }) }), _jsxs(FadeIn, { delay: 12, children: [_jsx("div", { style: { fontSize: 80, fontWeight: 900, ...glowText(c.pink), color: c.text, zIndex: 1, marginTop: 16, transform: `scale(${pulse})` }, children: formatDuration(stats.longestSession.durationMinutes) }), _jsx("div", { style: { fontSize: 18, color: c.textMuted, zIndex: 1, marginTop: 8 }, children: "longest session" })] }), _jsx(FadeIn, { delay: 30, children: _jsxs("div", { style: { display: "flex", gap: 36, marginTop: 32, zIndex: 1 }, children: [_jsx(Pill, { label: "Sessions", value: stats.totalSessions, color: c.primary, textColor: c.textMuted }), _jsx(Pill, { label: "Avg", value: `${stats.avgSessionMinutes}m`, color: c.secondary, textColor: c.textMuted }), _jsx(Pill, { label: "Messages", value: stats.totalMessages, color: mode === "dark" ? c.textMuted : "#10b981", textColor: c.textMuted }), _jsx(Pill, { label: "Streak", value: `${stats.streakDays}d`, color: c.gold, textColor: c.textMuted })] }) }), _jsx(FadeIn, { delay: 50, children: _jsxs("div", { style: { display: "flex", gap: 14, marginTop: 24, zIndex: 1 }, children: [_jsx(Chip, { label: "Active Days", value: stats.totalDaysActive, color: c.accent, textColor: c.textMuted }), _jsx(Chip, { label: "Night Owl", value: `${stats.nightOwlScore}%`, color: c.primary, textColor: c.textMuted }), _jsx(Chip, { label: "Weekend", value: `${stats.weekendWarriorScore}%`, color: c.secondary, textColor: c.textMuted })] }) }), _jsx(FadeIn, { delay: 60, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(160, c), color: c.text }, children: [_jsx(ParticleField, { count: 25, seed: 123 }), _jsx(GlowOrb, { color: c.pink, size: 300, x: 50, y: 40 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 75, y: 20 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: c.pink, zIndex: 1 }, children: mode === "dark" ? "Endurance Test" : "Marathon Session" }) }), _jsxs(FadeIn, { delay: 12, children: [_jsx("div", { style: {
+                            fontSize: 80,
+                            fontWeight: 900,
+                            ...glowText(c.pink),
+                            color: c.text,
+                            zIndex: 1,
+                            marginTop: 16,
+                            transform: `scale(${pulse})`,
+                        }, children: formatDuration(stats.longestSession.durationMinutes) }), _jsx("div", { style: { fontSize: 18, color: c.textMuted, zIndex: 1, marginTop: 8 }, children: "longest session" })] }), _jsx(FadeIn, { delay: 30, children: _jsxs("div", { style: { display: "flex", gap: 36, marginTop: 32, zIndex: 1 }, children: [_jsx(Pill, { label: "Sessions", value: stats.totalSessions, color: c.primary, textColor: c.textMuted }), _jsx(Pill, { label: "Avg", value: `${stats.avgSessionMinutes}m`, color: c.secondary, textColor: c.textMuted }), _jsx(Pill, { label: "Messages", value: stats.totalMessages, color: mode === "dark" ? c.textMuted : c.green, textColor: c.textMuted }), _jsx(Pill, { label: "Streak", value: `${stats.streakDays}d`, color: c.gold, textColor: c.textMuted })] }) }), _jsx(FadeIn, { delay: 50, children: _jsxs("div", { style: { display: "flex", gap: 14, marginTop: 24, zIndex: 1 }, children: [_jsx(Chip, { label: "Active Days", value: stats.totalDaysActive, color: c.accent, textColor: c.textMuted }), _jsx(Chip, { label: "Night Owl", value: `${stats.nightOwlScore}%`, color: c.primary, textColor: c.textMuted }), _jsx(Chip, { label: "Weekend", value: `${stats.weekendWarriorScore}%`, color: c.secondary, textColor: c.textMuted })] }) }), _jsx(FadeIn, { delay: 60, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
 };
-const Pill = ({ label: l, value, color, textColor }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 34, fontWeight: 800, color, ...glowText(color) }, children: typeof value === "number" ? value.toLocaleString() : value }), _jsx("div", { style: { fontSize: 12, color: textColor, marginTop: 3, textTransform: "uppercase", letterSpacing: "0.1em" }, children: l })] }));
-const Chip = ({ label: l, value, color, textColor }) => (_jsxs("div", { style: { background: `${color}20`, border: `1px solid ${color}50`, borderRadius: 10, padding: "8px 18px", textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 24, fontWeight: 700, color }, children: typeof value === "number" ? value.toLocaleString() : value }), _jsx("div", { style: { fontSize: 11, color: textColor, marginTop: 2 }, children: l })] }));
+const Pill = ({ label: l, value, color, textColor, }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 34, fontWeight: 800, color, ...glowText(color) }, children: typeof value === "number" ? value.toLocaleString() : value }), _jsx("div", { style: {
+                fontSize: 12,
+                color: textColor,
+                marginTop: 3,
+                textTransform: "uppercase",
+                letterSpacing: "0.1em",
+            }, children: l })] }));
+const Chip = ({ label: l, value, color, textColor, }) => (_jsxs("div", { style: {
+        background: `${color}20`,
+        border: `1px solid ${color}50`,
+        borderRadius: 10,
+        padding: "8px 18px",
+        textAlign: "center",
+    }, children: [_jsx("div", { style: { fontSize: 24, fontWeight: 700, color }, children: typeof value === "number" ? value.toLocaleString() : value }), _jsx("div", { style: { fontSize: 11, color: textColor, marginTop: 2 }, children: l })] }));

package/dist/video/slides/SummarySlide.js

@@ -34,7 +34,7 @@ function getSummaryTitle(periodLabel, mode) {
         return mode === "dark" ? match[1] : match[0];
     return periodLabel; // custom date range string
 }
-export const SummarySlide = ({ stats, commentary, mode }) => {
+export const SummarySlide = ({ stats, commentary, mode, }) => {
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const c = getColors(mode);
@@ -42,11 +42,43 @@ export const SummarySlide = ({ stats, commentary, mode }) => {
     const cardOpacity = interpolate(frame, [5, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     const rotation = interpolate(Math.sin(frame * 0.02), [-1, 1], [-0.8, 0.8]);
     return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(135, c), color: c.text }, children: [_jsx(ParticleField, { count: 50, seed: 444 }), _jsx(GlowOrb, { color: c.primary, size: 240, x: 25, y: 20 }), _jsx(GlowOrb, { color: c.secondary, size: 200, x: 75, y: 75 }), _jsx(GlowOrb, { color: c.accent, size: 170, x: 50, y: 50, speed: 0.2 }), _jsxs("div", { style: {
-                    opacity: cardOpacity, transform: `scale(${cardScale}) rotate(${rotation}deg)`,
+                    opacity: cardOpacity,
+                    transform: `scale(${cardScale}) rotate(${rotation}deg)`,
                     background: `linear-gradient(145deg, ${c.bgGradient1}ee, ${c.bgGradient3}ee)`,
-                    border: `1px solid ${c.primary}50`, borderRadius: 24, padding: "36px 44px",
-                    maxWidth: 620, width: "92%",
-                    boxShadow: `0 0 36px ${c.primary}20, 0 12px 36px rgba(0,0,0,0.5)`, zIndex: 1,
-                }, children: [_jsx("div", { style: { textAlign: "center", marginBottom: 20 }, children: _jsx("div", { style: { fontSize: 28, fontWeight: 900, ...glowText(c.primary), background: `linear-gradient(90deg, ${c.primary}, ${c.secondary})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }, children: getSummaryTitle(stats.periodLabel, mode) }) }), _jsx(FadeIn, { delay: 15, children: _jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 36px" }, children: [_jsx(Row, { label: "Tokens", value: formatNumber(stats.totalTokens), color: c.gold, textColor: c.textMuted }), _jsx(Row, { label: "Cost", value: `$${stats.totalCost.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, color: mode === "dark" ? c.accent : "#10b981", textColor: c.textMuted }), _jsx(Row, { label: "Sessions", value: stats.totalSessions.toLocaleString(), color: c.primary, textColor: c.textMuted }), _jsx(Row, { label: "Messages", value: formatNumber(stats.totalMessages), color: c.pink, textColor: c.textMuted }), _jsx(Row, { label: "Active Days", value: stats.totalDaysActive.toLocaleString(), color: c.secondary, textColor: c.textMuted }), _jsx(Row, { label: "Fav Model", value: getModelShortName(stats.favoriteModel), color: c.accent, textColor: c.textMuted }), mode === "dark" && _jsxs(_Fragment, { children: [_jsx(Row, { label: "Water", value: `${stats.waterLiters.toLocaleString(undefined, { maximumFractionDigits: 1 })}L`, color: c.secondary, textColor: c.textMuted }), _jsx(Row, { label: "CO\u2082", value: `${(stats.co2Grams / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 })}kg`, color: c.textMuted, textColor: c.textMuted })] })] }) }), _jsx(FadeIn, { delay: 30, children: _jsxs("div", { style: { marginTop: 20, textAlign: "center", padding: "12px 20px", background: `linear-gradient(135deg, ${c.primary}20, ${c.accent}20)`, borderRadius: 12, border: `1px solid ${c.primary}40` }, children: [_jsx("div", { style: { fontSize: 12, color: c.textMuted, textTransform: "uppercase", letterSpacing: "0.15em" }, children: "Your Archetype" }), _jsx("div", { style: { fontSize: 26, fontWeight: 800, background: `linear-gradient(90deg, ${c.primary}, ${c.accent})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", marginTop: 3 }, children: stats.archetype })] }) }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: { textAlign: "center", marginTop: 16, fontSize: 15, fontStyle: "italic", color: c.textMuted }, children: commentary }) }), _jsx(FadeIn, { delay: 50, children: _jsxs("div", { style: { textAlign: "center", marginTop: 14, fontSize: 12, color: c.textDim }, children: ["ccwrap", mode === "dark" ? " — know your impact" : " — put meme software on the map"] }) })] })] }));
+                    border: `1px solid ${c.primary}50`,
+                    borderRadius: 24,
+                    padding: "36px 44px",
+                    maxWidth: 620,
+                    width: "92%",
+                    boxShadow: `0 0 36px ${c.primary}20, 0 12px 36px rgba(0,0,0,0.5)`,
+                    zIndex: 1,
+                }, children: [_jsx("div", { style: { textAlign: "center", marginBottom: 20 }, children: _jsx("div", { style: {
+                                fontSize: 28,
+                                fontWeight: 900,
+                                ...glowText(c.primary),
+                                background: `linear-gradient(90deg, ${c.primary}, ${c.secondary})`,
+                                WebkitBackgroundClip: "text",
+                                WebkitTextFillColor: "transparent",
+                            }, children: getSummaryTitle(stats.periodLabel, mode) }) }), _jsx(FadeIn, { delay: 15, children: _jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 36px" }, children: [_jsx(Row, { label: "Tokens", value: formatNumber(stats.totalTokens), color: c.gold, textColor: c.textMuted }), _jsx(Row, { label: "Cost", value: `$${stats.totalCost.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, color: mode === "dark" ? c.accent : c.green, textColor: c.textMuted }), _jsx(Row, { label: "Sessions", value: stats.totalSessions.toLocaleString(), color: c.primary, textColor: c.textMuted }), _jsx(Row, { label: "Messages", value: formatNumber(stats.totalMessages), color: c.pink, textColor: c.textMuted }), _jsx(Row, { label: "Active Days", value: stats.totalDaysActive.toLocaleString(), color: c.secondary, textColor: c.textMuted }), _jsx(Row, { label: "Fav Model", value: getModelShortName(stats.favoriteModel), color: c.accent, textColor: c.textMuted }), mode === "dark" && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Water", value: `${stats.waterLiters.toLocaleString(undefined, { maximumFractionDigits: 1 })}L`, color: c.secondary, textColor: c.textMuted }), _jsx(Row, { label: "CO\u2082", value: `${(stats.co2Grams / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 })}kg`, color: c.textMuted, textColor: c.textMuted })] }))] }) }), _jsx(FadeIn, { delay: 30, children: _jsxs("div", { style: {
+                                marginTop: 20,
+                                textAlign: "center",
+                                padding: "12px 20px",
+                                background: `linear-gradient(135deg, ${c.primary}20, ${c.accent}20)`,
+                                borderRadius: 12,
+                                border: `1px solid ${c.primary}40`,
+                            }, children: [_jsx("div", { style: { fontSize: 12, color: c.textMuted, textTransform: "uppercase", letterSpacing: "0.15em" }, children: "Your Archetype" }), _jsx("div", { style: {
+                                        fontSize: 26,
+                                        fontWeight: 800,
+                                        background: `linear-gradient(90deg, ${c.primary}, ${c.accent})`,
+                                        WebkitBackgroundClip: "text",
+                                        WebkitTextFillColor: "transparent",
+                                        marginTop: 3,
+                                    }, children: stats.archetype })] }) }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: {
+                                textAlign: "center",
+                                marginTop: 16,
+                                fontSize: 15,
+                                fontStyle: "italic",
+                                color: c.textMuted,
+                            }, children: commentary }) }), _jsx(FadeIn, { delay: 50, children: _jsxs("div", { style: { textAlign: "center", marginTop: 14, fontSize: 12, color: c.textDim }, children: ["ccwrap", mode === "dark" ? " — know your impact" : " — put meme software on the map"] }) })] })] }));
 };
-const Row = ({ label, value, color, textColor }) => (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("div", { style: { fontSize: 14, color: textColor }, children: label }), _jsx("div", { style: { fontSize: 20, fontWeight: 700, color }, children: value })] }));
+const Row = ({ label, value, color, textColor, }) => (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("div", { style: { fontSize: 14, color: textColor }, children: label }), _jsx("div", { style: { fontSize: 20, fontWeight: 700, color }, children: value })] }));

package/dist/video/slides/TokensSlide.js

@@ -7,19 +7,34 @@ import { ParticleField } from "../components/ParticleField";
 import { GlowOrb } from "../components/GlowOrb";
 function formatTokens(n) {
     if (n >= 1_000_000_000)
-        return { value: Math.round(n / 1_000_000_000 * 10) / 10, suffix: "B" };
+        return { value: Math.round((n / 1_000_000_000) * 10) / 10, suffix: "B" };
     if (n >= 1_000_000)
-        return { value: Math.round(n / 1_000_000 * 10) / 10, suffix: "M" };
+        return { value: Math.round((n / 1_000_000) * 10) / 10, suffix: "M" };
     if (n >= 1_000)
-        return { value: Math.round(n / 1_000 * 10) / 10, suffix: "K" };
+        return { value: Math.round((n / 1_000) * 10) / 10, suffix: "K" };
     return { value: n, suffix: "" };
 }
-export const TokensSlide = ({ stats, commentary, mode }) => {
+export const TokensSlide = ({ stats, commentary, mode, }) => {
     const frame = useCurrentFrame();
     const c = getColors(mode);
     const formatted = formatTokens(stats.totalTokens);
     const shake = frame > 30 && frame < 45 ? Math.sin(frame * 2) * 2 : 0;
     const accentColor = mode === "dark" ? c.accent : c.gold;
-    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(200, c), color: c.text }, children: [_jsx(ParticleField, { count: 35, seed: 99 }), _jsx(GlowOrb, { color: accentColor, size: 300, x: 50, y: 40 }), _jsx(GlowOrb, { color: c.accent, size: 180, x: 20, y: 75 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: accentColor, zIndex: 1 }, children: "Total Tokens Consumed" }) }), _jsx("div", { style: { transform: `translateX(${shake}px)`, zIndex: 1, marginTop: 20 }, children: _jsx(AnimatedNumber, { value: formatted.value, decimals: formatted.suffix ? 1 : 0, suffix: formatted.suffix, style: { ...bigNumber, ...glowText(accentColor), background: `linear-gradient(135deg, ${accentColor}, ${c.text})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", display: "block", textAlign: "center" }, startFrame: 10, duration: 40 }) }), _jsx(FadeIn, { delay: 45, children: _jsxs("div", { style: { display: "flex", gap: 50, marginTop: 32, zIndex: 1 }, children: [_jsx(StatBox, { label: "Input", value: formatTokens(stats.totalInputTokens), color: c.secondary }), _jsx(StatBox, { label: "Output", value: formatTokens(stats.totalOutputTokens), color: mode === "dark" ? c.textMuted : "#10b981" }), mode === "dark" && _jsx(StatBox, { label: "Water", value: { value: stats.waterLiters, suffix: "L" }, color: c.secondary }), mode === "dark" && _jsx(StatBox, { label: "Energy", value: { value: stats.kwhUsed, suffix: " kWh" }, color: c.gold })] }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(200, c), color: c.text }, children: [_jsx(ParticleField, { count: 35, seed: 99 }), _jsx(GlowOrb, { color: accentColor, size: 300, x: 50, y: 40 }), _jsx(GlowOrb, { color: c.accent, size: 180, x: 20, y: 75 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: accentColor, zIndex: 1 }, children: "Total Tokens Consumed" }) }), _jsx("div", { style: { transform: `translateX(${shake}px)`, zIndex: 1, marginTop: 20 }, children: _jsx(AnimatedNumber, { value: formatted.value, decimals: formatted.suffix ? 1 : 0, suffix: formatted.suffix, style: {
+                        ...bigNumber,
+                        ...glowText(accentColor),
+                        background: `linear-gradient(135deg, ${accentColor}, ${c.text})`,
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        display: "block",
+                        textAlign: "center",
+                    }, startFrame: 10, duration: 40 }) }), _jsx(FadeIn, { delay: 45, children: _jsxs("div", { style: { display: "flex", gap: 50, marginTop: 32, zIndex: 1 }, children: [_jsx(StatBox, { label: "Input", value: formatTokens(stats.totalInputTokens), color: c.secondary }), _jsx(StatBox, { label: "Output", value: formatTokens(stats.totalOutputTokens), color: mode === "dark" ? c.textMuted : c.green }), mode === "dark" && (_jsx(StatBox, { label: "Water", value: { value: stats.waterLiters, suffix: "L" }, color: c.secondary })), mode === "dark" && (_jsx(StatBox, { label: "Energy", value: { value: stats.kwhUsed, suffix: " kWh" }, color: c.gold }))] }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
 };
-const StatBox = ({ label: l, value, color }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsxs("div", { style: { fontSize: 36, fontWeight: 800, color, ...glowText(color) }, children: [value.value.toLocaleString(undefined, { maximumFractionDigits: value.suffix ? 1 : 0 }), value.suffix] }), _jsx("div", { style: { fontSize: 13, color: "inherit", opacity: 0.7, marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }, children: l })] }));
+const StatBox = ({ label: l, value, color, }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsxs("div", { style: { fontSize: 36, fontWeight: 800, color, ...glowText(color) }, children: [value.value.toLocaleString(undefined, { maximumFractionDigits: value.suffix ? 1 : 0 }), value.suffix] }), _jsx("div", { style: {
+                fontSize: 13,
+                color: "inherit",
+                opacity: 0.7,
+                marginTop: 4,
+                textTransform: "uppercase",
+                letterSpacing: "0.1em",
+            }, children: l })] }));

package/dist/video/styles.d.ts

@@ -16,21 +16,6 @@ declare const sassyColors: {
 };
 export type ColorScheme = typeof sassyColors;
 export declare function getColors(mode: "sassy" | "dark"): ColorScheme;
-export declare const colors: {
-    bg: string;
-    bgGradient1: string;
-    bgGradient2: string;
-    bgGradient3: string;
-    primary: string;
-    secondary: string;
-    accent: string;
-    gold: string;
-    green: string;
-    pink: string;
-    text: string;
-    textMuted: string;
-    textDim: string;
-};
 export declare const fonts: {
     heading: string;
     body: string;

package/dist/video/styles.js

@@ -32,7 +32,6 @@ const darkColors = {
 export function getColors(mode) {
     return mode === "dark" ? darkColors : sassyColors;
 }
-export const colors = sassyColors;
 export const fonts = {
     heading: "Inter, system-ui, sans-serif",
     body: "Inter, system-ui, sans-serif",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccwrap",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Claude Code Wrapped - Your AI coding stats, meme-ified into a shareable video",
   "type": "module",
   "license": "MIT",
@@ -25,6 +25,10 @@
     "render": "tsx src/cli.ts",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
+    "lint": "eslint src/ tests/",
+    "lint:fix": "eslint src/ tests/ --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx}' 'tests/**/*.ts'",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx}' 'tests/**/*.ts'",
     "prepublishOnly": "npm run build"
   },
   "bin": {
@@ -52,11 +56,16 @@
     "remotion": "^4.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "@vitest/coverage-v8": "^4.1.0",
+    "eslint": "^10.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.8.1",
     "tsx": "^4.0.0",
     "typescript": "^5.6.0",
+    "typescript-eslint": "^8.57.1",
     "vitest": "^4.1.0"
   }
 }