ai-wrapped 0.0.1

package/src/bun/store.ts

@@ -0,0 +1,283 @@
+import { mkdirSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import type { SessionSource } from "../shared/schema";
+import type { AppSettings } from "../shared/types";
+
+export interface ScanStateEntry {
+  source: SessionSource;
+  fileSize: number;
+  mtimeMs: number;
+  parsedAt: string;
+}
+
+export type ScanStateStore = Record<string, ScanStateEntry>;
+
+export interface DayStats {
+  sessions: number;
+  messages: number;
+  toolCalls: number;
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheWriteTokens: number;
+  reasoningTokens: number;
+  costUsd: number;
+  durationMs: number;
+}
+
+export interface DailyAggregateEntry {
+  bySource: Record<string, DayStats>;
+  byModel: Record<string, DayStats>;
+  byRepo: Record<string, DayStats>;
+  totals: DayStats;
+}
+
+export type DailyStore = Record<string, DailyAggregateEntry>;
+
+const DATA_DIR = join(homedir(), ".ai-wrapped");
+const SCAN_STATE_PATH = join(DATA_DIR, "scan-state.json");
+const DAILY_PATH = join(DATA_DIR, "daily.json");
+const SETTINGS_PATH = join(DATA_DIR, "settings.json");
+
+const DEFAULT_SETTINGS: AppSettings = {
+  scanOnLaunch: true,
+  scanIntervalMinutes: 5,
+  theme: "system",
+  customPaths: {},
+};
+
+let scanStateCache: ScanStateStore | null = null;
+let dailyCache: DailyStore | null = null;
+let settingsCache: AppSettings | null = null;
+
+const clone = <T>(value: T): T => structuredClone(value);
+
+const ensureDataDir = () => {
+  mkdirSync(DATA_DIR, { recursive: true });
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === "object" && !Array.isArray(value);
+
+const toNumber = (value: unknown): number =>
+  typeof value === "number" && Number.isFinite(value) ? value : 0;
+
+const toStringOr = (value: unknown, fallback: string): string =>
+  typeof value === "string" && value.length > 0 ? value : fallback;
+
+const readJson = async <T>(path: string, fallback: T): Promise<T> => {
+  try {
+    const text = await Bun.file(path).text();
+    const parsed = JSON.parse(text) as unknown;
+    return parsed as T;
+  } catch {
+    return fallback;
+  }
+};
+
+const writeJson = async <T>(path: string, value: T): Promise<void> => {
+  ensureDataDir();
+  await Bun.write(path, `${JSON.stringify(value, null, 2)}\n`);
+};
+
+export const createEmptyDayStats = (): DayStats => ({
+  sessions: 0,
+  messages: 0,
+  toolCalls: 0,
+  inputTokens: 0,
+  outputTokens: 0,
+  cacheReadTokens: 0,
+  cacheWriteTokens: 0,
+  reasoningTokens: 0,
+  costUsd: 0,
+  durationMs: 0,
+});
+
+const normalizeDayStats = (value: unknown): DayStats => {
+  if (!isRecord(value)) {
+    return createEmptyDayStats();
+  }
+
+  return {
+    sessions: toNumber(value.sessions),
+    messages: toNumber(value.messages),
+    toolCalls: toNumber(value.toolCalls),
+    inputTokens: toNumber(value.inputTokens),
+    outputTokens: toNumber(value.outputTokens),
+    cacheReadTokens: toNumber(value.cacheReadTokens),
+    cacheWriteTokens: toNumber(value.cacheWriteTokens),
+    reasoningTokens: toNumber(value.reasoningTokens),
+    costUsd: toNumber(value.costUsd),
+    durationMs: toNumber(value.durationMs),
+  };
+};
+
+const normalizeDailyStore = (value: unknown): DailyStore => {
+  if (!isRecord(value)) {
+    return {};
+  }
+
+  const output: DailyStore = {};
+
+  for (const [date, rawEntry] of Object.entries(value)) {
+    if (!isRecord(rawEntry)) {
+      continue;
+    }
+
+    const bySource: Record<string, DayStats> = {};
+    if (isRecord(rawEntry.bySource)) {
+      for (const [source, rawStats] of Object.entries(rawEntry.bySource)) {
+        bySource[source] = normalizeDayStats(rawStats);
+      }
+    }
+
+    const byModel: Record<string, DayStats> = {};
+    if (isRecord(rawEntry.byModel)) {
+      for (const [model, rawStats] of Object.entries(rawEntry.byModel)) {
+        byModel[model] = normalizeDayStats(rawStats);
+      }
+    }
+
+    const byRepo: Record<string, DayStats> = {};
+    if (isRecord(rawEntry.byRepo)) {
+      for (const [repo, rawStats] of Object.entries(rawEntry.byRepo)) {
+        byRepo[repo] = normalizeDayStats(rawStats);
+      }
+    }
+
+    output[date] = {
+      bySource,
+      byModel,
+      byRepo,
+      totals: normalizeDayStats(rawEntry.totals),
+    };
+  }
+
+  return output;
+};
+
+const normalizeScanState = (value: unknown): ScanStateStore => {
+  if (!isRecord(value)) {
+    return {};
+  }
+
+  const output: ScanStateStore = {};
+
+  for (const [filePath, rawState] of Object.entries(value)) {
+    if (!isRecord(rawState)) {
+      continue;
+    }
+
+    const source = rawState.source;
+    if (typeof source !== "string") {
+      continue;
+    }
+
+    output[filePath] = {
+      source: source as SessionSource,
+      fileSize: toNumber(rawState.fileSize),
+      mtimeMs: toNumber(rawState.mtimeMs),
+      parsedAt: toStringOr(rawState.parsedAt, new Date(0).toISOString()),
+    };
+  }
+
+  return output;
+};
+
+const normalizeSettings = (value: unknown): AppSettings => {
+  if (!isRecord(value)) {
+    return clone(DEFAULT_SETTINGS);
+  }
+
+  const customPathsInput = isRecord(value.customPaths) ? value.customPaths : {};
+  const customPaths: AppSettings["customPaths"] = {};
+
+  for (const [source, pathValue] of Object.entries(customPathsInput)) {
+    if (typeof pathValue === "string") {
+      customPaths[source as SessionSource] = pathValue;
+    }
+  }
+
+  return {
+    scanOnLaunch:
+      typeof value.scanOnLaunch === "boolean" ? value.scanOnLaunch : DEFAULT_SETTINGS.scanOnLaunch,
+    scanIntervalMinutes:
+      typeof value.scanIntervalMinutes === "number" && Number.isFinite(value.scanIntervalMinutes)
+        ? Math.max(1, Math.floor(value.scanIntervalMinutes))
+        : DEFAULT_SETTINGS.scanIntervalMinutes,
+    theme:
+      value.theme === "system" || value.theme === "light" || value.theme === "dark"
+        ? value.theme
+        : DEFAULT_SETTINGS.theme,
+    customPaths,
+  };
+};
+
+export const readScanState = async (): Promise<ScanStateStore> => {
+  if (scanStateCache === null) {
+    const raw = await readJson<unknown>(SCAN_STATE_PATH, {});
+    scanStateCache = normalizeScanState(raw);
+  }
+
+  return clone(scanStateCache);
+};
+
+export const writeScanState = async (state: ScanStateStore): Promise<void> => {
+  scanStateCache = normalizeScanState(state);
+  await writeJson(SCAN_STATE_PATH, scanStateCache);
+};
+
+export const readDailyStore = async (): Promise<DailyStore> => {
+  if (dailyCache === null) {
+    const raw = await readJson<unknown>(DAILY_PATH, {});
+    dailyCache = normalizeDailyStore(raw);
+  }
+
+  return clone(dailyCache);
+};
+
+export const writeDailyStore = async (daily: DailyStore): Promise<void> => {
+  dailyCache = normalizeDailyStore(daily);
+  await writeJson(DAILY_PATH, dailyCache);
+};
+
+export const dailyStoreMissingRepoDimension = async (): Promise<boolean> => {
+  const raw = await readJson<unknown>(DAILY_PATH, {});
+  if (!isRecord(raw)) {
+    return false;
+  }
+
+  for (const rawEntry of Object.values(raw)) {
+    if (!isRecord(rawEntry)) {
+      continue;
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(rawEntry, "byRepo")) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const getSettings = async (): Promise<AppSettings> => {
+  if (settingsCache === null) {
+    const raw = await readJson<unknown>(SETTINGS_PATH, DEFAULT_SETTINGS);
+    settingsCache = normalizeSettings(raw);
+  }
+
+  return clone(settingsCache);
+};
+
+export const setSettings = async (settings: AppSettings): Promise<void> => {
+  settingsCache = normalizeSettings(settings);
+  await writeJson(SETTINGS_PATH, settingsCache);
+};
+
+export const paths = {
+  dataDir: DATA_DIR,
+  scanState: SCAN_STATE_PATH,
+  daily: DAILY_PATH,
+  settings: SETTINGS_PATH,
+};

package/src/mainview/App.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import Dashboard from "./components/Dashboard";
+import Sidebar from "./components/Sidebar";
+import { useRPC } from "./hooks/useRPC";
+
+type ThemeMode = "system" | "light" | "dark";
+
+const applyTheme = (theme: ThemeMode) => {
+  document.documentElement.dataset.theme = theme;
+};
+
+const App = () => {
+  const rpc = useRPC();
+
+  useEffect(() => {
+    applyTheme("system");
+  }, []);
+
+  useEffect(() => {
+    const listener = (payload: unknown) => {
+      if (!payload || typeof payload !== "object") return;
+      const theme = (payload as { theme?: ThemeMode }).theme;
+      if (theme === "system" || theme === "light" || theme === "dark") {
+        applyTheme(theme);
+      }
+    };
+
+    rpc.addMessageListener("themeChanged", listener);
+    return () => {
+      rpc.removeMessageListener("themeChanged", listener);
+    };
+  }, [rpc]);
+
+  return (
+    <div className="h-screen overflow-hidden bg-[var(--surface-0)] text-[var(--text-primary)]">
+      <Sidebar />
+      <Dashboard />
+    </div>
+  );
+};
+
+export default App;

package/src/mainview/components/AgentBadge.tsx

@@ -0,0 +1,17 @@
+import type { SessionSource } from "@shared/schema";
+import { SOURCE_COLORS, SOURCE_LABELS } from "../lib/constants";
+
+interface AgentBadgeProps {
+  source: SessionSource;
+}
+
+const AgentBadge = ({ source }: AgentBadgeProps) => {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-2)] px-2.5 py-1 text-xs font-semibold text-[var(--text-secondary)]">
+      <span className="h-2 w-2 rounded-full" style={{ backgroundColor: SOURCE_COLORS[source] }} />
+      {SOURCE_LABELS[source]}
+    </span>
+  );
+};
+
+export default AgentBadge;

package/src/mainview/components/Dashboard.tsx

@@ -0,0 +1,229 @@
+import { useEffect, useRef, useState, type ChangeEvent } from "react";
+import DashboardCharts from "./DashboardCharts";
+import EmptyState from "./EmptyState";
+import StatsCards, { AnimatedNumber } from "./StatsCards";
+import { useDashboardData, type DashboardDateRange } from "../hooks/useDashboardData";
+import { formatDate, formatDuration, formatNumber } from "../lib/formatters";
+
+const useInView = <T extends HTMLElement>(threshold = 0.35) => {
+  const ref = useRef<T | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || visible) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold },
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [threshold, visible]);
+
+  return { ref, visible };
+};
+
+const clampPercentage = (value: number): number => Math.max(0, Math.min(100, value));
+
+const Dashboard = () => {
+  const {
+    dateFrom,
+    dateTo,
+    summary,
+    timeline,
+    loading,
+    error,
+    refresh,
+    totals,
+    modelBreakdown,
+    agentBreakdown,
+    topRepos,
+    selectedRange,
+    setSelectedRange,
+    rangeOptions,
+    dailyAgentTokensByDate,
+  } = useDashboardData();
+
+  const timeCard = useInView<HTMLDivElement>(0.4);
+
+  if (loading && !summary) {
+    return (
+      <div className="wrapped-scroll">
+        <section className="wrapped-card wrapped-card-loading">
+          <EmptyState title="Building your coding story" description="Loading annual summary and timeline." />
+        </section>
+      </div>
+    );
+  }
+
+  if (error && !summary) {
+    return (
+      <div className="wrapped-scroll">
+        <section className="wrapped-card wrapped-card-loading">
+          <EmptyState title="Unable to build wrapped view" description={error} />
+          <button type="button" onClick={() => void refresh()} className="wrapped-button mt-4">
+            Retry
+          </button>
+        </section>
+      </div>
+    );
+  }
+
+  const activeDayCoverage =
+    totals.dateSpanDays > 0 ? clampPercentage((totals.activeDays / totals.dateSpanDays) * 100) : 0;
+  const totalHours = totals.totalDurationMs / (60 * 60 * 1000);
+  const totalDays = totals.totalDurationMs / (24 * 60 * 60 * 1000);
+  const ringRadius = 58;
+  const ringCircumference = 2 * Math.PI * ringRadius;
+  const ringOffset = ringCircumference - (activeDayCoverage / 100) * ringCircumference;
+  const handleRangeChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const next = event.target.value as DashboardDateRange;
+    if (!rangeOptions.some((option) => option.value === next)) return;
+    setSelectedRange(next);
+  };
+
+  return (
+    <div className="wrapped-scroll">
+      <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 pb-12 pt-20 sm:px-6">
+        <section className="wrapped-tile self-end p-3 sm:p-4">
+          <label className="flex items-center gap-3 text-xs uppercase tracking-[0.16em] text-slate-300">
+            Range
+            <select
+              value={selectedRange}
+              onChange={handleRangeChange}
+              aria-label="Dashboard range"
+              className="min-w-40 rounded-lg border border-white/20 bg-slate-950/65 px-3 py-2 text-sm font-medium normal-case tracking-normal text-slate-100 outline-none transition focus:border-sky-300"
+            >
+              {rangeOptions.map((option) => (
+                <option key={option.value} value={option.value} className="bg-slate-950 text-slate-100">
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        </section>
+
+        <section className="wrapped-card wrapped-card-hero">
+          <header className="mb-6">
+            <p className="wrapped-kicker">Your Year In Code</p>
+            <h1 className="text-4xl font-semibold tracking-[-0.03em] text-white sm:text-6xl">Your AI Coding Year</h1>
+            <p className="mt-3 text-sm text-slate-200/90">
+              {formatDate(dateFrom)} - {formatDate(dateTo)}
+            </p>
+          </header>
+
+          <StatsCards
+            totalSessions={totals.totalSessions}
+            totalCostUsd={totals.totalCostUsd}
+            totalTokens={totals.totalTokens}
+            totalToolCalls={summary?.totals.toolCalls ?? 0}
+          />
+        </section>
+
+        <section ref={timeCard.ref} className="wrapped-card wrapped-card-time">
+          <header className="mb-6 flex flex-wrap items-end justify-between gap-3">
+            <div>
+              <p className="wrapped-kicker">Card 2</p>
+              <h2 className="wrapped-title">Time Spent Coding with AI</h2>
+            </div>
+            <p className="text-sm text-slate-300">Active on {formatNumber(totals.activeDays)} days</p>
+          </header>
+
+          <div className="grid gap-6 lg:grid-cols-[1.3fr_1fr]">
+            <div className="grid gap-3 sm:grid-cols-2">
+              <article className="wrapped-tile">
+                <p className="wrapped-label">Total Hours</p>
+                <AnimatedNumber
+                  value={totalHours}
+                  animate={timeCard.visible}
+                  format={(value) => `${value.toFixed(1)}h`}
+                  className="mt-2 block text-4xl font-semibold text-white"
+                />
+                <p className="mt-2 text-xs text-slate-300">{totalDays.toFixed(1)} total days of coding time</p>
+              </article>
+
+              <article className="wrapped-tile">
+                <p className="wrapped-label">Average Session</p>
+                <p className="mt-2 text-3xl font-semibold text-white">{formatDuration(totals.averageSessionDurationMs)}</p>
+                <p className="mt-2 text-xs text-slate-300">Per session across the full range</p>
+              </article>
+
+              <article className="wrapped-tile sm:col-span-2">
+                <p className="wrapped-label">Longest Session Highlight</p>
+                <p className="mt-2 text-3xl font-semibold text-white">
+                  {formatDuration(totals.longestSessionEstimateMs)}
+                </p>
+                <p className="mt-2 text-xs text-slate-300">Estimated from daily totals and session counts</p>
+              </article>
+            </div>
+
+            <article className="wrapped-tile flex flex-col items-center justify-center text-center">
+              <svg width="152" height="152" viewBox="0 0 152 152" className="overflow-visible">
+                <circle
+                  cx="76"
+                  cy="76"
+                  r={ringRadius}
+                  fill="none"
+                  stroke="rgba(148,163,184,0.25)"
+                  strokeWidth="12"
+                />
+                <circle
+                  cx="76"
+                  cy="76"
+                  r={ringRadius}
+                  fill="none"
+                  stroke="url(#ringGradient)"
+                  strokeWidth="12"
+                  strokeLinecap="round"
+                  strokeDasharray={ringCircumference}
+                  strokeDashoffset={timeCard.visible ? ringOffset : ringCircumference}
+                  style={{
+                    transition: "stroke-dashoffset 1000ms cubic-bezier(0.22, 1, 0.36, 1)",
+                    transformOrigin: "50% 50%",
+                    transform: "rotate(-90deg)",
+                  }}
+                />
+                <defs>
+                  <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stopColor="#22d3ee" />
+                    <stop offset="100%" stopColor="#0ea5e9" />
+                  </linearGradient>
+                </defs>
+              </svg>
+
+              <AnimatedNumber
+                value={activeDayCoverage}
+                animate={timeCard.visible}
+                format={(value) => `${value.toFixed(1)}%`}
+                className="mt-4 block text-4xl font-semibold text-white"
+              />
+              <p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-300">Days with activity</p>
+            </article>
+          </div>
+        </section>
+
+        <DashboardCharts
+          dateFrom={dateFrom}
+          dateTo={dateTo}
+          modelBreakdown={modelBreakdown}
+          agentBreakdown={agentBreakdown}
+          timeline={timeline}
+          dailyAgentTokensByDate={dailyAgentTokensByDate}
+          topRepos={topRepos}
+          totalCostUsd={totals.totalCostUsd}
+          dailyAverageCostUsd={totals.dailyAverageCostUsd}
+          mostExpensiveDay={totals.mostExpensiveDay}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;