ai-wrapped 0.0.1

package/src/mainview/hooks/useDashboardData.ts

@@ -0,0 +1,315 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { DashboardSummary, DailyAggregate, SessionSource, TokenUsage } from "@shared/schema";
+import { SESSION_SOURCES } from "@shared/schema";
+import { SOURCE_LABELS } from "../lib/constants";
+import { rpcRequest, useRPC } from "./useRPC";
+
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+const MIN_SELECTABLE_YEAR = 2024;
+
+const daysAgoISO = (daysAgo: number): string => {
+  const date = new Date();
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() - daysAgo);
+  return date.toISOString().slice(0, 10);
+};
+
+const todayISO = (): string => new Date().toISOString().slice(0, 10);
+
+const tokenTotal = (tokens: TokenUsage): number =>
+  tokens.inputTokens +
+  tokens.outputTokens +
+  tokens.cacheReadTokens +
+  tokens.cacheWriteTokens +
+  tokens.reasoningTokens;
+
+const rangeLengthDays = (dateFrom: string, dateTo: string): number => {
+  const from = Date.parse(`${dateFrom}T00:00:00Z`);
+  const to = Date.parse(`${dateTo}T00:00:00Z`);
+  if (Number.isNaN(from) || Number.isNaN(to) || to < from) return 0;
+  return Math.floor((to - from) / ONE_DAY_MS) + 1;
+};
+
+const currentYear = (): number => new Date().getFullYear();
+
+export type DashboardDateRange = "last365" | `year:${number}`;
+
+export interface DashboardDateRangeOption {
+  value: DashboardDateRange;
+  label: string;
+}
+
+const parseYearSelection = (selection: DashboardDateRange): number | null => {
+  if (!selection.startsWith("year:")) return null;
+  const parsed = Number(selection.slice(5));
+  return Number.isInteger(parsed) ? parsed : null;
+};
+
+const buildRangeOptions = (): DashboardDateRangeOption[] => {
+  const thisYear = currentYear();
+  const options: DashboardDateRangeOption[] = [{ value: "last365", label: "Last 365 days" }];
+  for (let year = thisYear; year >= MIN_SELECTABLE_YEAR; year -= 1) {
+    options.push({
+      value: `year:${year}` as DashboardDateRange,
+      label: year === thisYear ? `${year} (Current year)` : String(year),
+    });
+  }
+  return options;
+};
+
+const resolveDateRange = (selection: DashboardDateRange): { dateFrom: string; dateTo: string } => {
+  const today = todayISO();
+  const selectedYear = parseYearSelection(selection);
+
+  if (selectedYear === null) {
+    return {
+      dateFrom: daysAgoISO(364),
+      dateTo: today,
+    };
+  }
+
+  return {
+    dateFrom: `${selectedYear}-01-01`,
+    dateTo: selectedYear === currentYear() ? today : `${selectedYear}-12-31`,
+  };
+};
+
+export interface TimelinePoint {
+  date: string;
+  sessions: number;
+  tokens: number;
+  costUsd: number;
+  durationMs: number;
+  messages: number;
+  toolCalls: number;
+}
+
+export interface AgentBreakdown {
+  source: SessionSource;
+  label: string;
+  sessions: number;
+  tokens: number;
+  costUsd: number;
+}
+
+export interface ModelBreakdown {
+  model: string;
+  sessions: number;
+  tokens: number;
+  costUsd: number;
+}
+
+export type DailyAgentTokensByDate = Record<string, Record<SessionSource, number>>;
+
+export interface DashboardTotals {
+  totalSessions: number;
+  totalTokens: number;
+  totalCostUsd: number;
+  totalDurationMs: number;
+  averageSessionDurationMs: number;
+  longestSessionEstimateMs: number;
+  activeDays: number;
+  dateSpanDays: number;
+  dailyAverageCostUsd: number;
+  mostExpensiveDay: TimelinePoint | null;
+}
+
+const emptyTotals: DashboardTotals = {
+  totalSessions: 0,
+  totalTokens: 0,
+  totalCostUsd: 0,
+  totalDurationMs: 0,
+  averageSessionDurationMs: 0,
+  longestSessionEstimateMs: 0,
+  activeDays: 0,
+  dateSpanDays: 0,
+  dailyAverageCostUsd: 0,
+  mostExpensiveDay: null,
+};
+
+const createEmptySourceTokenMap = (): Record<SessionSource, number> => ({
+  claude: 0,
+  codex: 0,
+  gemini: 0,
+  opencode: 0,
+  droid: 0,
+  copilot: 0,
+});
+
+const buildDailyAgentTokensByDate = (
+  rowsBySource: Array<{ source: SessionSource; rows: DailyAggregate[] }>,
+): DailyAgentTokensByDate => {
+  const byDate: DailyAgentTokensByDate = {};
+
+  for (const { source, rows } of rowsBySource) {
+    for (const row of rows) {
+      const current = byDate[row.date] ?? createEmptySourceTokenMap();
+      current[source] = tokenTotal(row.tokens);
+      byDate[row.date] = current;
+    }
+  }
+
+  return byDate;
+};
+
+export const useDashboardData = () => {
+  const rpc = useRPC();
+  const [selectedRange, setSelectedRange] = useState<DashboardDateRange>("last365");
+  const rangeOptions = useMemo<DashboardDateRangeOption[]>(() => buildRangeOptions(), []);
+  const { dateFrom, dateTo } = useMemo(() => resolveDateRange(selectedRange), [selectedRange]);
+  const [summary, setSummary] = useState<DashboardSummary | null>(null);
+  const [timeline, setTimeline] = useState<DailyAggregate[]>([]);
+  const [dailyAgentTokensByDate, setDailyAgentTokensByDate] = useState<DailyAgentTokensByDate>({});
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const [summaryResult, timelineResult, ...timelineBySourceResults] = await Promise.all([
+        rpcRequest("getDashboardSummary", { dateFrom, dateTo }),
+        rpcRequest("getDailyTimeline", { dateFrom, dateTo }),
+        ...SESSION_SOURCES.map((source) => rpcRequest("getDailyTimeline", { dateFrom, dateTo, source })),
+      ]);
+
+      setSummary(summaryResult);
+      setTimeline(timelineResult);
+      setDailyAgentTokensByDate(
+        buildDailyAgentTokensByDate(
+          timelineBySourceResults.map((rows, index) => ({
+            source: SESSION_SOURCES[index],
+            rows,
+          })),
+        ),
+      );
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Failed to load dashboard");
+    } finally {
+      setLoading(false);
+    }
+  }, [dateFrom, dateTo]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    const listener = () => {
+      void refresh();
+    };
+
+    rpc.addMessageListener("sessionsUpdated", listener);
+    rpc.addMessageListener("scanCompleted", listener);
+
+    return () => {
+      rpc.removeMessageListener("sessionsUpdated", listener);
+      rpc.removeMessageListener("scanCompleted", listener);
+    };
+  }, [refresh, rpc]);
+
+  const timelinePoints = useMemo<TimelinePoint[]>(
+    () =>
+      timeline
+        .map((entry) => ({
+          date: entry.date,
+          sessions: entry.sessionCount,
+          tokens: tokenTotal(entry.tokens),
+          costUsd: entry.costUsd,
+          durationMs: entry.totalDurationMs,
+          messages: entry.messageCount,
+          toolCalls: entry.toolCallCount,
+        }))
+        .sort((left, right) => left.date.localeCompare(right.date)),
+    [timeline],
+  );
+
+  const totals = useMemo<DashboardTotals>(() => {
+    if (!summary) return emptyTotals;
+
+    const spanDays = rangeLengthDays(dateFrom, dateTo);
+    const activeDays = timelinePoints.filter((entry) => entry.sessions > 0).length;
+    const mostExpensiveDay =
+      timelinePoints.length === 0
+        ? null
+        : timelinePoints.reduce((max, entry) => (entry.costUsd > max.costUsd ? entry : max), timelinePoints[0]);
+
+    return {
+      totalSessions: summary.totals.sessions,
+      totalTokens: tokenTotal(summary.totals.tokens),
+      totalCostUsd: summary.totals.costUsd,
+      totalDurationMs: summary.totals.durationMs,
+      averageSessionDurationMs:
+        summary.totals.sessions > 0 ? summary.totals.durationMs / summary.totals.sessions : 0,
+      longestSessionEstimateMs: timelinePoints.reduce((max, entry) => {
+        if (entry.sessions <= 0) return max;
+        return Math.max(max, entry.durationMs / entry.sessions);
+      }, 0),
+      activeDays,
+      dateSpanDays: spanDays,
+      dailyAverageCostUsd: spanDays > 0 ? summary.totals.costUsd / spanDays : 0,
+      mostExpensiveDay,
+    };
+  }, [dateFrom, dateTo, summary, timelinePoints]);
+
+  const agentBreakdown = useMemo<AgentBreakdown[]>(() => {
+    if (!summary) return [];
+
+    return SESSION_SOURCES.map((source) => ({
+      source,
+      label: SOURCE_LABELS[source],
+      sessions: summary.byAgent[source].sessions,
+      tokens: tokenTotal(summary.byAgent[source].tokens),
+      costUsd: summary.byAgent[source].costUsd,
+    })).filter((entry) => entry.sessions > 0 || entry.tokens > 0 || entry.costUsd > 0);
+  }, [summary]);
+
+  const modelBreakdown = useMemo<ModelBreakdown[]>(() => {
+    if (!summary) return [];
+
+    return summary.byModel
+      .map((entry) => ({
+        model: entry.model,
+        sessions: entry.sessions,
+        tokens: tokenTotal(entry.tokens),
+        costUsd: entry.costUsd,
+      }))
+      .filter((entry) => entry.sessions > 0 || entry.tokens > 0 || entry.costUsd > 0)
+      .sort((left, right) => {
+        if (right.tokens !== left.tokens) return right.tokens - left.tokens;
+        if (right.sessions !== left.sessions) return right.sessions - left.sessions;
+        return right.costUsd - left.costUsd;
+      });
+  }, [summary]);
+
+  const topRepos = useMemo(
+    () =>
+      (summary?.topRepos ?? [])
+        .map((entry) => ({
+          repo: entry.repo,
+          sessions: entry.sessions,
+          costUsd: entry.costUsd,
+        }))
+        .slice(0, 8),
+    [summary],
+  );
+
+  return {
+    dateFrom,
+    dateTo,
+    selectedRange,
+    setSelectedRange,
+    rangeOptions,
+    dailyAgentTokensByDate,
+    summary,
+    timeline: timelinePoints,
+    loading,
+    error,
+    refresh,
+    totals,
+    agentBreakdown,
+    modelBreakdown,
+    topRepos,
+  };
+};

package/src/mainview/hooks/useRPC.ts

@@ -0,0 +1,29 @@
+import { Electroview } from "electrobun/view";
+import type { AIStatsRPC } from "@shared/types";
+
+type BunRequests = AIStatsRPC["bun"]["requests"];
+type WrappedRPCRequests = Pick<BunRequests, "getDashboardSummary" | "getDailyTimeline">;
+export type RPCRequestName = keyof WrappedRPCRequests;
+export type RPCRequestParams<K extends RPCRequestName> = WrappedRPCRequests[K]["params"];
+export type RPCRequestResponse<K extends RPCRequestName> = WrappedRPCRequests[K]["response"];
+
+export const electroview = Electroview.defineRPC<AIStatsRPC>({
+  handlers: {},
+});
+
+// Instantiate Electroview to connect the WebSocket transport.
+// Without this, the RPC stays on a stub transport (no `send` method).
+new Electroview({ rpc: electroview });
+
+export const rpcRequest = <K extends RPCRequestName>(
+  method: K,
+  params: RPCRequestParams<K>,
+): Promise<RPCRequestResponse<K>> => {
+  const requestFn = electroview.request[method] as (
+    input: RPCRequestParams<K>,
+  ) => Promise<RPCRequestResponse<K>>;
+
+  return requestFn(params);
+};
+
+export const useRPC = () => electroview;

package/src/mainview/index.css

@@ -0,0 +1,195 @@
+@import "tailwindcss";
+
+:root,
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --surface-0: #020617;
+  --surface-1: #091126;
+  --surface-2: #101a34;
+  --text-primary: #f8fbff;
+  --text-secondary: #c8d2e7;
+  --text-muted: #8ea2c2;
+  --border-soft: #8ba3c933;
+  --border-subtle: #c5d4ec2e;
+  --border-strong: #8bd5ff99;
+  --accent-bg: #0d2449;
+  --accent-border: #63c7ff;
+  --accent-text: #a7e6ff;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --surface-0: #eaf3ff;
+  --surface-1: #f8fbff;
+  --surface-2: #e5f1ff;
+  --text-primary: #101828;
+  --text-secondary: #334155;
+  --text-muted: #5b6b85;
+  --border-soft: #7a8ba81f;
+  --border-subtle: #4e6b9536;
+  --border-strong: #2563eb99;
+  --accent-bg: #cbe7ff;
+  --accent-border: #1d4ed8;
+  --accent-text: #15387f;
+}
+
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] {
+    color-scheme: light;
+    --surface-0: #eaf3ff;
+    --surface-1: #f8fbff;
+    --surface-2: #e5f1ff;
+    --text-primary: #101828;
+    --text-secondary: #334155;
+    --text-muted: #5b6b85;
+    --border-soft: #7a8ba81f;
+    --border-subtle: #4e6b9536;
+    --border-strong: #2563eb99;
+    --accent-bg: #cbe7ff;
+    --accent-border: #1d4ed8;
+    --accent-text: #15387f;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+  background:
+    radial-gradient(90rem 48rem at 92% -8%, rgba(59, 130, 246, 0.25) 0%, transparent 62%),
+    radial-gradient(75rem 42rem at -8% 108%, rgba(20, 184, 166, 0.28) 0%, transparent 55%),
+    var(--surface-0);
+  color: var(--text-primary);
+}
+
+.wrapped-scroll {
+  height: 100%;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+}
+
+.wrapped-card {
+  position: relative;
+  min-height: calc(100vh - 7rem);
+  scroll-snap-align: start;
+  border-radius: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(18px);
+  padding: 1.5rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.wrapped-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.wrapped-card-hero {
+  background:
+    linear-gradient(135deg, rgba(38, 21, 91, 0.86), rgba(13, 59, 141, 0.8) 54%, rgba(13, 148, 136, 0.7)),
+    rgba(2, 6, 23, 0.78);
+}
+
+.wrapped-card-time {
+  background: linear-gradient(140deg, rgba(14, 36, 87, 0.78), rgba(15, 70, 124, 0.68), rgba(14, 165, 233, 0.38));
+}
+
+.wrapped-card-models {
+  background: linear-gradient(140deg, rgba(22, 36, 86, 0.8), rgba(10, 73, 107, 0.72), rgba(34, 197, 94, 0.22));
+}
+
+.wrapped-card-agents {
+  background: linear-gradient(142deg, rgba(10, 45, 85, 0.8), rgba(8, 80, 105, 0.72), rgba(56, 189, 248, 0.34));
+}
+
+.wrapped-card-activity {
+  background: linear-gradient(145deg, rgba(4, 32, 62, 0.85), rgba(2, 75, 82, 0.72), rgba(45, 212, 191, 0.35));
+}
+
+.wrapped-card-cost {
+  background: linear-gradient(145deg, rgba(12, 37, 89, 0.82), rgba(7, 75, 121, 0.7), rgba(56, 189, 248, 0.32));
+}
+
+.wrapped-card-repos {
+  background: linear-gradient(145deg, rgba(10, 45, 77, 0.84), rgba(11, 81, 110, 0.72), rgba(20, 184, 166, 0.34));
+}
+
+.wrapped-card-loading {
+  background: linear-gradient(145deg, rgba(2, 6, 23, 0.88), rgba(13, 30, 60, 0.78));
+  align-items: center;
+  text-align: center;
+}
+
+.wrapped-kicker {
+  margin: 0;
+  font-size: 0.72rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: rgba(186, 230, 253, 0.92);
+}
+
+.wrapped-title {
+  margin: 0.35rem 0 0;
+  font-size: clamp(1.8rem, 4vw, 3.1rem);
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  color: #fff;
+}
+
+.wrapped-tile {
+  border-radius: 1.2rem;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: rgba(2, 6, 23, 0.37);
+  padding: 1rem;
+  backdrop-filter: blur(8px);
+}
+
+.wrapped-label {
+  margin: 0;
+  font-size: 0.68rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(203, 213, 225, 0.92);
+}
+
+.wrapped-button {
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(125, 211, 252, 0.6);
+  padding: 0 1rem;
+  background: rgba(56, 189, 248, 0.18);
+  color: #f8fafc;
+  font-size: 0.82rem;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.wrapped-button:hover {
+  background: rgba(56, 189, 248, 0.28);
+}
+
+@media (max-width: 768px) {
+  .wrapped-card {
+    min-height: calc(100vh - 6.5rem);
+    border-radius: 1.5rem;
+    padding: 1.1rem;
+  }
+}

package/src/mainview/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Wrapped</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>

package/src/mainview/index.ts

@@ -0,0 +1,12 @@
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { electroview } from "./hooks/useRPC";
+
+void electroview;
+
+const container = document.getElementById("root");
+if (container) {
+  createRoot(container).render(createElement(App));
+}

package/src/mainview/lib/constants.ts

@@ -0,0 +1,32 @@
+import type { SessionSource } from "@shared/schema";
+
+export const SOURCE_LABELS: Record<SessionSource, string> = {
+  claude: "Claude Code",
+  codex: "Codex",
+  gemini: "Gemini",
+  opencode: "OpenCode",
+  droid: "Droid",
+  copilot: "Copilot",
+};
+
+export const SOURCE_COLORS: Record<SessionSource, string> = {
+  claude: "#f59e0b",
+  codex: "#14b8a6",
+  gemini: "#60a5fa",
+  opencode: "#f97316",
+  droid: "#34d399",
+  copilot: "#f43f5e",
+};
+
+export const CHART_COLORS = [
+  "#7dd3fc",
+  "#86efac",
+  "#fca5a5",
+  "#fcd34d",
+  "#c4b5fd",
+  "#fdba74",
+  "#67e8f9",
+  "#f9a8d4",
+];
+
+export const DEFAULT_PAGE_SIZE = 20;

package/src/mainview/lib/formatters.ts

@@ -0,0 +1,82 @@
+export const formatNumber = (value: number): string =>
+  new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
+
+export const formatTokens = (value: number): string => {
+  if (value >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(1)}B`;
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return formatNumber(value);
+};
+
+export const formatUsd = (value: number | null | undefined): string =>
+  new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 4,
+  }).format(value ?? 0);
+
+export const formatDate = (value: string | null): string => {
+  if (!value) return "-";
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) return value;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(new Date(parsed));
+};
+
+export const formatTime = (value: string | null): string => {
+  if (!value) return "-";
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) return value;
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(new Date(parsed));
+};
+
+export const formatDateTime = (value: string | null): string => {
+  if (!value) return "-";
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) return value;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(new Date(parsed));
+};
+
+export const formatRelativeTime = (value: string | null): string => {
+  if (!value) return "-";
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) return value;
+
+  const diffMs = parsed - Date.now();
+  const absMs = Math.abs(diffMs);
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+  const minute = 60_000;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+
+  if (absMs < hour) return rtf.format(Math.round(diffMs / minute), "minute");
+  if (absMs < day) return rtf.format(Math.round(diffMs / hour), "hour");
+  return rtf.format(Math.round(diffMs / day), "day");
+};
+
+export const formatDuration = (durationMs: number | null): string => {
+  if (!durationMs || durationMs < 0) return "-";
+
+  const totalSeconds = Math.floor(durationMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+};

package/src/shared/constants.ts

@@ -0,0 +1 @@
+export const APP_NAME = "AI Wrapped";