feat(stats): build anime-centric stats dashboard frontend

5-tab React dashboard with Catppuccin Mocha theme:
- Overview: hero stats, streak calendar, watch time chart, recent sessions
- Anime: grid with cover art, episode list with completion %, detail view
- Trends: 15 charts across Activity, Efficiency, Anime, and Patterns
- Vocabulary: POS-filtered word/kanji lists with detail panels
- Sessions: expandable session history with event timeline

Features:
- Cross-tab navigation (anime <-> vocabulary)
- Global word detail panel overlay
- Expandable episode detail with Anki card links (Expression field)
- Per-anime multi-line trend charts
- Watch time by day-of-week and hour-of-day
- Collapsible sections with accessibility (aria-expanded)
- Card size selector for anime grid
- Cover art caching via AniList
- HTTP API client with file:// protocol fallback for Electron overlay

stats/src/components/library/CoverImage.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { BASE_URL } from '../../lib/api-client';
+
+interface CoverImageProps {
+  videoId: number;
+  title: string;
+  className?: string;
+}
+
+export function CoverImage({ videoId, title, className = '' }: CoverImageProps) {
+  const [failed, setFailed] = useState(false);
+  const fallbackChar = title.charAt(0) || '?';
+
+  if (failed) {
+    return (
+      <div className={`bg-ctp-surface2 flex items-center justify-center text-ctp-overlay2 text-2xl font-bold ${className}`}>
+        {fallbackChar}
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={`${BASE_URL}/api/stats/media/${videoId}/cover`}
+      alt={title}
+      className={`object-cover bg-ctp-surface2 ${className}`}
+      onError={() => setFailed(true)}
+    />
+  );
+}

stats/src/components/library/LibraryTab.tsx

@@ -0,0 +1,57 @@
+import { useState, useMemo } from 'react';
+import { useMediaLibrary } from '../../hooks/useMediaLibrary';
+import { formatDuration } from '../../lib/formatters';
+import { MediaCard } from './MediaCard';
+import { MediaDetailView } from './MediaDetailView';
+
+export function LibraryTab() {
+  const { media, loading, error } = useMediaLibrary();
+  const [search, setSearch] = useState('');
+  const [selectedVideoId, setSelectedVideoId] = useState<number | null>(null);
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return media;
+    const q = search.toLowerCase();
+    return media.filter((m) => m.canonicalTitle.toLowerCase().includes(q));
+  }, [media, search]);
+
+  const totalMs = media.reduce((sum, m) => sum + m.totalActiveMs, 0);
+
+  if (selectedVideoId !== null) {
+    return <MediaDetailView videoId={selectedVideoId} onBack={() => setSelectedVideoId(null)} />;
+  }
+
+  if (loading) return <div className="text-ctp-overlay2 p-4">Loading...</div>;
+  if (error) return <div className="text-ctp-red p-4">Error: {error}</div>;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <input
+          type="text"
+          placeholder="Search titles..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="flex-1 bg-ctp-surface0 border border-ctp-surface1 rounded-lg px-3 py-2 text-sm text-ctp-text placeholder:text-ctp-overlay2 focus:outline-none focus:border-ctp-blue"
+        />
+        <div className="text-xs text-ctp-overlay2 shrink-0">
+          {filtered.length} title{filtered.length !== 1 ? 's' : ''} · {formatDuration(totalMs)}
+        </div>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="text-sm text-ctp-overlay2 p-4">No media found</div>
+      ) : (
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+          {filtered.map((item) => (
+            <MediaCard
+              key={item.videoId}
+              item={item}
+              onClick={() => setSelectedVideoId(item.videoId)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

stats/src/components/library/MediaCard.tsx

@@ -0,0 +1,33 @@
+import { CoverImage } from './CoverImage';
+import { formatDuration, formatNumber } from '../../lib/formatters';
+import type { MediaLibraryItem } from '../../types/stats';
+
+interface MediaCardProps {
+  item: MediaLibraryItem;
+  onClick: () => void;
+}
+
+export function MediaCard({ item, onClick }: MediaCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="bg-ctp-surface0 border border-ctp-surface1 rounded-lg overflow-hidden hover:border-ctp-surface2 transition-colors text-left w-full"
+    >
+      <CoverImage
+        videoId={item.videoId}
+        title={item.canonicalTitle}
+        className="w-full aspect-[3/4] rounded-t-lg"
+      />
+      <div className="p-3">
+        <div className="text-sm font-medium text-ctp-text truncate">{item.canonicalTitle}</div>
+        <div className="text-xs text-ctp-overlay2 mt-1">
+          {formatDuration(item.totalActiveMs)} · {formatNumber(item.totalCards)} cards
+        </div>
+        <div className="text-xs text-ctp-overlay2">
+          {item.totalSessions} session{item.totalSessions !== 1 ? 's' : ''}
+        </div>
+      </div>
+    </button>
+  );
+}

stats/src/components/library/MediaDetailView.tsx

@@ -0,0 +1,32 @@
+import { useMediaDetail } from '../../hooks/useMediaDetail';
+import { MediaHeader } from './MediaHeader';
+import { MediaWatchChart } from './MediaWatchChart';
+import { MediaSessionList } from './MediaSessionList';
+
+interface MediaDetailViewProps {
+  videoId: number;
+  onBack: () => void;
+}
+
+export function MediaDetailView({ videoId, onBack }: MediaDetailViewProps) {
+  const { data, loading, error } = useMediaDetail(videoId);
+
+  if (loading) return <div className="text-ctp-overlay2 p-4">Loading...</div>;
+  if (error) return <div className="text-ctp-red p-4">Error: {error}</div>;
+  if (!data?.detail) return <div className="text-ctp-overlay2 p-4">Media not found</div>;
+
+  return (
+    <div className="space-y-4">
+      <button
+        type="button"
+        onClick={onBack}
+        className="text-sm text-ctp-blue hover:text-ctp-sapphire transition-colors"
+      >
+        &larr; Back to Library
+      </button>
+      <MediaHeader detail={data.detail} />
+      <MediaWatchChart rollups={data.rollups} />
+      <MediaSessionList sessions={data.sessions} />
+    </div>
+  );
+}

stats/src/components/library/MediaHeader.tsx

@@ -0,0 +1,55 @@
+import { CoverImage } from './CoverImage';
+import { formatDuration, formatNumber, formatPercent } from '../../lib/formatters';
+import type { MediaDetailData } from '../../types/stats';
+
+interface MediaHeaderProps {
+  detail: NonNullable<MediaDetailData['detail']>;
+}
+
+export function MediaHeader({ detail }: MediaHeaderProps) {
+  const hitRate = detail.totalLookupCount > 0
+    ? detail.totalLookupHits / detail.totalLookupCount
+    : null;
+  const avgSessionMs = detail.totalSessions > 0
+    ? Math.round(detail.totalActiveMs / detail.totalSessions)
+    : 0;
+
+  return (
+    <div className="flex gap-4">
+      <CoverImage
+        videoId={detail.videoId}
+        title={detail.canonicalTitle}
+        className="w-32 h-44 rounded-lg shrink-0"
+      />
+      <div className="flex-1 min-w-0">
+        <h2 className="text-lg font-bold text-ctp-text truncate">{detail.canonicalTitle}</h2>
+        <div className="grid grid-cols-2 gap-2 mt-3 text-sm">
+          <div>
+            <div className="text-ctp-blue font-medium">{formatDuration(detail.totalActiveMs)}</div>
+            <div className="text-xs text-ctp-overlay2">total watch time</div>
+          </div>
+          <div>
+            <div className="text-ctp-green font-medium">{formatNumber(detail.totalCards)}</div>
+            <div className="text-xs text-ctp-overlay2">cards mined</div>
+          </div>
+          <div>
+            <div className="text-ctp-mauve font-medium">{formatNumber(detail.totalWordsSeen)}</div>
+            <div className="text-xs text-ctp-overlay2">words seen</div>
+          </div>
+          <div>
+            <div className="text-ctp-peach font-medium">{formatPercent(hitRate)}</div>
+            <div className="text-xs text-ctp-overlay2">lookup rate</div>
+          </div>
+          <div>
+            <div className="text-ctp-text font-medium">{detail.totalSessions}</div>
+            <div className="text-xs text-ctp-overlay2">sessions</div>
+          </div>
+          <div>
+            <div className="text-ctp-text font-medium">{formatDuration(avgSessionMs)}</div>
+            <div className="text-xs text-ctp-overlay2">avg session</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

stats/src/components/library/MediaSessionList.tsx

@@ -0,0 +1,40 @@
+import { formatDuration, formatRelativeDate, formatNumber } from '../../lib/formatters';
+import type { SessionSummary } from '../../types/stats';
+
+interface MediaSessionListProps {
+  sessions: SessionSummary[];
+}
+
+export function MediaSessionList({ sessions }: MediaSessionListProps) {
+  if (sessions.length === 0) {
+    return <div className="text-sm text-ctp-overlay2">No sessions recorded</div>;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-semibold text-ctp-text">Session History</h3>
+      {sessions.map((s) => (
+        <div
+          key={s.sessionId}
+          className="bg-ctp-surface0 border border-ctp-surface1 rounded-lg p-3 flex items-center justify-between"
+        >
+          <div className="min-w-0">
+            <div className="text-sm text-ctp-text">
+              {formatRelativeDate(s.startedAtMs)} · {formatDuration(s.activeWatchedMs)} active
+            </div>
+          </div>
+          <div className="flex gap-4 text-xs text-center shrink-0">
+            <div>
+              <div className="text-ctp-green font-medium">{formatNumber(s.cardsMined)}</div>
+              <div className="text-ctp-overlay2">cards</div>
+            </div>
+            <div>
+              <div className="text-ctp-mauve font-medium">{formatNumber(s.wordsSeen)}</div>
+              <div className="text-ctp-overlay2">words</div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

stats/src/components/library/MediaWatchChart.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import { epochDayToDate } from '../../lib/formatters';
+import { CHART_THEME } from '../../lib/chart-theme';
+import type { DailyRollup } from '../../types/stats';
+
+interface MediaWatchChartProps {
+  rollups: DailyRollup[];
+}
+
+type Range = 14 | 30 | 90;
+
+function formatActiveMinutes(value: number | string) {
+  const minutes = Number(value);
+  return [`${Number.isFinite(minutes) ? minutes : 0} min`, 'Active Time'];
+}
+
+export function MediaWatchChart({ rollups }: MediaWatchChartProps) {
+  const [range, setRange] = useState<Range>(30);
+
+  const byDay = new Map<number, number>();
+  for (const r of rollups) {
+    byDay.set(r.rollupDayOrMonth, (byDay.get(r.rollupDayOrMonth) ?? 0) + r.totalActiveMin);
+  }
+  const chartData = Array.from(byDay.entries())
+    .sort(([a], [b]) => a - b)
+    .map(([day, mins]) => ({
+      date: epochDayToDate(day).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),
+      minutes: Math.round(mins),
+    }))
+    .slice(-range);
+
+  const ranges: Range[] = [14, 30, 90];
+
+  if (chartData.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="bg-ctp-surface0 border border-ctp-surface1 rounded-lg p-4">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-semibold text-ctp-text">Watch Time</h3>
+        <div className="flex gap-1">
+          {ranges.map((r) => (
+            <button
+              key={r}
+              onClick={() => setRange(r)}
+              className={`px-2 py-0.5 text-xs rounded ${
+                range === r
+                  ? 'bg-ctp-surface2 text-ctp-text'
+                  : 'text-ctp-overlay2 hover:text-ctp-subtext0'
+              }`}
+            >
+              {r}d
+            </button>
+          ))}
+        </div>
+      </div>
+      <ResponsiveContainer width="100%" height={160}>
+        <BarChart data={chartData}>
+          <XAxis dataKey="date" tick={{ fontSize: 10, fill: CHART_THEME.tick }} axisLine={false} tickLine={false} />
+          <YAxis tick={{ fontSize: 10, fill: CHART_THEME.tick }} axisLine={false} tickLine={false} width={30} />
+          <Tooltip
+            contentStyle={{
+              background: CHART_THEME.tooltipBg,
+              border: `1px solid ${CHART_THEME.tooltipBorder}`,
+              borderRadius: 6,
+              color: CHART_THEME.tooltipText,
+              fontSize: 12,
+            }}
+            labelStyle={{ color: CHART_THEME.tooltipLabel }}
+            formatter={formatActiveMinutes}
+          />
+          <Bar dataKey="minutes" fill={CHART_THEME.barFill} radius={[3, 3, 0, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}