+
+
+
+
+
+
+ setSelectedAnimeId(null)}
+ onNavigateToWord={openWordDetail}
+ />
+
+
+
+
+
+
+
+
+ setGlobalWordId(null)}
+ onSelectWord={openWordDetail}
+ onNavigateToAnime={navigateToAnime}
+ />
+
+ );
+}
diff --git a/stats/src/components/anime/AnimeCard.tsx b/stats/src/components/anime/AnimeCard.tsx
new file mode 100644
index 0000000..bee479e
--- /dev/null
+++ b/stats/src/components/anime/AnimeCard.tsx
@@ -0,0 +1,35 @@
+import { AnimeCoverImage } from './AnimeCoverImage';
+import { formatDuration, formatNumber } from '../../lib/formatters';
+import type { AnimeLibraryItem } from '../../types/stats';
+
+interface AnimeCardProps {
+ anime: AnimeLibraryItem;
+ onClick: () => void;
+}
+
+export function AnimeCard({ anime, onClick }: AnimeCardProps) {
+ return (
+
+ );
+}
diff --git a/stats/src/components/anime/AnimeCardsList.tsx b/stats/src/components/anime/AnimeCardsList.tsx
new file mode 100644
index 0000000..c4e6864
--- /dev/null
+++ b/stats/src/components/anime/AnimeCardsList.tsx
@@ -0,0 +1,72 @@
+import { Fragment, useState } from 'react';
+import { formatNumber, formatRelativeDate } from '../../lib/formatters';
+import { CollapsibleSection } from './CollapsibleSection';
+import { EpisodeDetail } from './EpisodeDetail';
+import type { AnimeEpisode } from '../../types/stats';
+
+interface AnimeCardsListProps {
+ episodes: AnimeEpisode[];
+ totalCards: number;
+}
+
+export function AnimeCardsList({ episodes, totalCards }: AnimeCardsListProps) {
+ const [expandedVideoId, setExpandedVideoId] = useStateSubMiner Stats
+No cards mined from this anime yet.
+| + | Episode | +Cards | +Last Watched | +
|---|---|---|---|
| + {expandedVideoId === ep.videoId ? '▼' : '▶'} + | ++ + {ep.episode != null ? `#${ep.episode}` : ''} + + {ep.canonicalTitle} + | ++ {formatNumber(ep.totalCards)} + | ++ {ep.lastWatchedMs > 0 ? formatRelativeDate(ep.lastWatchedMs) : '\u2014'} + | +
|
+ |
+
+ {fallbackChar}
+
+ );
+ }
+
+ const src = getStatsClient().getAnimeCoverUrl(animeId);
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export function AnimeDetailView({ animeId, onBack, onNavigateToWord }: AnimeDetailViewProps) {
+ const { data, loading, error } = useAnimeDetail(animeId);
+
+ if (loading) return
+
+ Watch Time
+
+ {ranges.map((r) => (
+
+ ))}
+
+ Loading...
;
+ if (error) return Error: {error}
;
+ if (!data?.detail) return Anime not found
;
+
+ const { detail, episodes, anilistEntries } = data;
+ const avgSessionMs = detail.totalSessions > 0
+ ? Math.round(detail.totalActiveMs / detail.totalSessions)
+ : 0;
+
+ return (
+
+
+
+ );
+}
diff --git a/stats/src/components/anime/AnimeHeader.tsx b/stats/src/components/anime/AnimeHeader.tsx
new file mode 100644
index 0000000..37b9e79
--- /dev/null
+++ b/stats/src/components/anime/AnimeHeader.tsx
@@ -0,0 +1,81 @@
+import { AnimeCoverImage } from './AnimeCoverImage';
+import type { AnimeDetailData, AnilistEntry } from '../../types/stats';
+
+interface AnimeHeaderProps {
+ detail: AnimeDetailData['detail'];
+ anilistEntries: AnilistEntry[];
+}
+
+function AnilistButton({ entry }: { entry: AnilistEntry }) {
+ const label = entry.season != null
+ ? `Season ${entry.season}`
+ : entry.titleEnglish ?? entry.titleRomaji ?? 'AniList';
+
+ return (
+
+ {label}
+ {'\u2197'}
+
+ );
+}
+
+export function AnimeHeader({ detail, anilistEntries }: AnimeHeaderProps) {
+ const altTitles = [detail.titleRomaji, detail.titleEnglish, detail.titleNative]
+ .filter((t): t is string => t != null && t !== detail.canonicalTitle);
+ const uniqueAltTitles = [...new Set(altTitles)];
+
+ const hasMultipleEntries = anilistEntries.length > 1;
+
+ return (
+
+
+
+
+ );
+}
diff --git a/stats/src/components/anime/AnimeTab.tsx b/stats/src/components/anime/AnimeTab.tsx
new file mode 100644
index 0000000..af3fde2
--- /dev/null
+++ b/stats/src/components/anime/AnimeTab.tsx
@@ -0,0 +1,130 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useAnimeLibrary } from '../../hooks/useAnimeLibrary';
+import { formatDuration } from '../../lib/formatters';
+import { AnimeCard } from './AnimeCard';
+import { AnimeDetailView } from './AnimeDetailView';
+
+type SortKey = 'lastWatched' | 'watchTime' | 'cards' | 'episodes';
+type CardSize = 'sm' | 'md' | 'lg';
+
+const GRID_CLASSES: Record
+
+ {detail.canonicalTitle}
+ {uniqueAltTitles.length > 0 && ( +
+ {uniqueAltTitles.join(' · ')}
+
+ )}
+
+ {detail.episodeCount} episode{detail.episodeCount !== 1 ? 's' : ''}
+
+ {anilistEntries.length > 0 ? (
+
+ {hasMultipleEntries ? (
+ anilistEntries.map((entry) => (
+
+ ) : detail.anilistId ? (
+
+ View on AniList {'\u2197'}
+
+ ) : null}
+ Loading...
;
+ if (error) return Error: {error}
;
+
+ return (
+
+
+ );
+}
diff --git a/stats/src/components/anime/AnimeWordList.tsx b/stats/src/components/anime/AnimeWordList.tsx
new file mode 100644
index 0000000..42266e7
--- /dev/null
+++ b/stats/src/components/anime/AnimeWordList.tsx
@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from '../../hooks/useStatsApi';
+import { formatNumber } from '../../lib/formatters';
+import { CollapsibleSection } from './CollapsibleSection';
+import type { AnimeWord } from '../../types/stats';
+
+interface AnimeWordListProps {
+ animeId: number;
+ onNavigateToWord?: (wordId: number) => void;
+}
+
+export function AnimeWordList({ animeId, onNavigateToWord }: AnimeWordListProps) {
+ const [words, setWords] = useState
+ 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"
+ />
+
+
+
+ {filtered.length === 0 ? (
+
+ {(['sm', 'md', 'lg'] as const).map((size) => (
+
+ ))}
+
+
+ {filtered.length} anime · {formatDuration(totalMs)}
+
+ No anime found
+ ) : (
+
+ {filtered.map((item) => (
+ setSelectedAnimeId(item.animeId)}
+ />
+ ))}
+
+ )}
+ Loading words...
;
+ if (words.length === 0) return null;
+
+ return (
+
+ {words.map((w) => (
+
+ ))}
+
+
+
+ {open &&
+ );
+}
diff --git a/stats/src/components/anime/EpisodeDetail.tsx b/stats/src/components/anime/EpisodeDetail.tsx
new file mode 100644
index 0000000..251f836
--- /dev/null
+++ b/stats/src/components/anime/EpisodeDetail.tsx
@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from '../../hooks/useStatsApi';
+import { formatDuration, formatNumber, formatRelativeDate } from '../../lib/formatters';
+import type { EpisodeDetailData } from '../../types/stats';
+
+interface EpisodeDetailProps {
+ videoId: number;
+}
+
+interface NoteInfo {
+ noteId: number;
+ expression: string;
+}
+
+export function EpisodeDetail({ videoId }: EpisodeDetailProps) {
+ const [data, setData] = useState{children}
}
+ Loading...
;
+ if (!data) return Failed to load episode details.
;
+
+ const { sessions, cardEvents } = data;
+
+ return (
+
+ {sessions.length > 0 && (
+
+ );
+}
diff --git a/stats/src/components/anime/EpisodeList.tsx b/stats/src/components/anime/EpisodeList.tsx
new file mode 100644
index 0000000..b40b5e9
--- /dev/null
+++ b/stats/src/components/anime/EpisodeList.tsx
@@ -0,0 +1,134 @@
+import { Fragment, useState } from 'react';
+import { formatDuration, formatNumber, formatRelativeDate } from '../../lib/formatters';
+import { apiClient } from '../../lib/api-client';
+import { EpisodeDetail } from './EpisodeDetail';
+import type { AnimeEpisode } from '../../types/stats';
+
+interface EpisodeListProps {
+ episodes: AnimeEpisode[];
+}
+
+export function EpisodeList({ episodes: initialEpisodes }: EpisodeListProps) {
+ const [expandedVideoId, setExpandedVideoId] = useState
+
+ )}
+
+ {cardEvents.length > 0 && (
+ Sessions
+
+ {sessions.map((s) => (
+
+
+
+ {s.startedAtMs > 0 ? formatRelativeDate(s.startedAtMs) : '\u2014'}
+
+ {formatDuration(s.activeWatchedMs)}
+ {formatNumber(s.cardsMined)} cards
+ {formatNumber(s.wordsSeen)} words
+
+ ))}
+
+
+ )}
+
+ {sessions.length === 0 && cardEvents.length === 0 && (
+ Cards Mined
+
+ {cardEvents.map((ev) => (
+
+
+
+ {formatRelativeDate(ev.tsMs)}
+
+ {ev.noteIds.length > 0 ? (
+ ev.noteIds.map((noteId) => {
+ const info = noteInfos.get(noteId);
+ return (
+
+ ))}
+
+ {info?.expression && (
+ {info.expression}
+ )}
+
+
+ );
+ })
+ ) : (
+
+ +{ev.cardsDelta} {ev.cardsDelta === 1 ? 'card' : 'cards'}
+
+ )}
+ No detailed data available.
+ )}
+
+
+ );
+}
diff --git a/stats/src/components/layout/StatCard.tsx b/stats/src/components/layout/StatCard.tsx
new file mode 100644
index 0000000..3a59ea6
--- /dev/null
+++ b/stats/src/components/layout/StatCard.tsx
@@ -0,0 +1,24 @@
+interface StatCardProps {
+ label: string;
+ value: string;
+ subValue?: string;
+ color?: string;
+ trend?: { direction: 'up' | 'down' | 'flat'; text: string };
+}
+
+export function StatCard({ label, value, subValue, color = 'text-ctp-text', trend }: StatCardProps) {
+ return (
+
+
+ Episodes
+ + {watchedCount}/{episodes.length} watched + +
+
+
+
+
+ | + | # | +Title | +Progress | +Watch Time | +Cards | +Last Watched | ++ |
|---|---|---|---|---|---|---|---|
| + {expandedVideoId === ep.videoId ? '\u25BC' : '\u25B6'} + | ++ {ep.episode ?? idx + 1} + | ++ {ep.canonicalTitle} + | ++ {ep.durationMs > 0 ? ( + = ep.durationMs * 0.85 + ? 'text-ctp-green' + : ep.totalActiveMs >= ep.durationMs * 0.5 + ? 'text-ctp-peach' + : 'text-ctp-overlay2' + }> + {Math.min(100, Math.round((ep.totalActiveMs / ep.durationMs) * 100))}% + + ) : ( + {'\u2014'} + )} + | ++ {formatDuration(ep.totalActiveMs)} + | ++ {formatNumber(ep.totalCards)} + | ++ {ep.lastWatchedMs > 0 ? formatRelativeDate(ep.lastWatchedMs) : '\u2014'} + | ++ + | +
|
+ |
+
+
+ );
+}
diff --git a/stats/src/components/layout/TabBar.tsx b/stats/src/components/layout/TabBar.tsx
new file mode 100644
index 0000000..1815c6f
--- /dev/null
+++ b/stats/src/components/layout/TabBar.tsx
@@ -0,0 +1,46 @@
+export type TabId = 'overview' | 'anime' | 'trends' | 'vocabulary' | 'sessions';
+
+interface Tab {
+ id: TabId;
+ label: string;
+}
+
+const TABS: Tab[] = [
+ { id: 'overview', label: 'Overview' },
+ { id: 'anime', label: 'Anime' },
+ { id: 'trends', label: 'Trends' },
+ { id: 'vocabulary', label: 'Vocabulary' },
+ { id: 'sessions', label: 'Sessions' },
+];
+
+interface TabBarProps {
+ activeTab: TabId;
+ onTabChange: (tabId: TabId) => void;
+}
+
+export function TabBar({ activeTab, onTabChange }: TabBarProps) {
+ return (
+
+ );
+}
diff --git a/stats/src/components/library/CoverImage.tsx b/stats/src/components/library/CoverImage.tsx
new file mode 100644
index 0000000..2a4d925
--- /dev/null
+++ b/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 (
+ {value}
+ {label}
+ {subValue && (
+ {subValue}
+ )}
+ {trend && (
+
+ {trend.direction === 'up' ? '\u25B2' : trend.direction === 'down' ? '\u25BC' : '\u2014'} {trend.text}
+
+ )}
+
+ {fallbackChar}
+
+ );
+ }
+
+ return (
+ 
setFailed(true)}
+ />
+ );
+}
diff --git a/stats/src/components/library/LibraryTab.tsx b/stats/src/components/library/LibraryTab.tsx
new file mode 100644
index 0000000..e142ed5
--- /dev/null
+++ b/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] = useStateLoading...
;
+ if (error) return Error: {error}
;
+
+ return (
+
+
+ );
+}
diff --git a/stats/src/components/library/MediaCard.tsx b/stats/src/components/library/MediaCard.tsx
new file mode 100644
index 0000000..930c9d9
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/stats/src/components/library/MediaDetailView.tsx b/stats/src/components/library/MediaDetailView.tsx
new file mode 100644
index 0000000..08e774a
--- /dev/null
+++ b/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
+ 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"
+ />
+
+
+ {filtered.length === 0 ? (
+
+ {filtered.length} title{filtered.length !== 1 ? 's' : ''} · {formatDuration(totalMs)}
+
+ No media found
+ ) : (
+
+ {filtered.map((item) => (
+ setSelectedVideoId(item.videoId)}
+ />
+ ))}
+
+ )}
+ Loading...
;
+ if (error) return Error: {error}
;
+ if (!data?.detail) return Media not found
;
+
+ return (
+
+
+
+ );
+}
diff --git a/stats/src/components/library/MediaHeader.tsx b/stats/src/components/library/MediaHeader.tsx
new file mode 100644
index 0000000..a16a560
--- /dev/null
+++ b/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
+
+ );
+}
diff --git a/stats/src/components/library/MediaSessionList.tsx b/stats/src/components/library/MediaSessionList.tsx
new file mode 100644
index 0000000..0d5cb68
--- /dev/null
+++ b/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
+
+ {detail.canonicalTitle}
+
+
+
+
+ {formatDuration(detail.totalActiveMs)}
+ total watch time
+
+
+ {formatNumber(detail.totalCards)}
+ cards mined
+
+
+ {formatNumber(detail.totalWordsSeen)}
+ words seen
+
+
+ {formatPercent(hitRate)}
+ lookup rate
+
+
+ {detail.totalSessions}
+ sessions
+
+
+ {formatDuration(avgSessionMs)}
+ avg session
+ No sessions recorded
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/stats/src/components/library/MediaWatchChart.tsx b/stats/src/components/library/MediaWatchChart.tsx
new file mode 100644
index 0000000..cc9e500
--- /dev/null
+++ b/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] = useStateSession History
+ {sessions.map((s) => ( +
+
+ ))}
+
+
+
+ {formatRelativeDate(s.startedAtMs)} · {formatDuration(s.activeWatchedMs)} active
+
+
+
+
+
+ {formatNumber(s.cardsMined)}
+ cards
+
+
+ {formatNumber(s.wordsSeen)}
+ words
+
+
+
+
+
+
+ );
+}
diff --git a/stats/src/components/overview/HeroStats.tsx b/stats/src/components/overview/HeroStats.tsx
new file mode 100644
index 0000000..748219f
--- /dev/null
+++ b/stats/src/components/overview/HeroStats.tsx
@@ -0,0 +1,51 @@
+import { StatCard } from '../layout/StatCard';
+import { formatDuration, formatNumber, todayLocalDay, localDayFromMs } from '../../lib/formatters';
+import type { OverviewSummary } from '../../lib/dashboard-data';
+import type { SessionSummary } from '../../types/stats';
+
+interface HeroStatsProps {
+ summary: OverviewSummary;
+ sessions: SessionSummary[];
+}
+
+export function HeroStats({ summary, sessions }: HeroStatsProps) {
+ const today = todayLocalDay();
+ const sessionsToday = sessions.filter(
+ (s) => localDayFromMs(s.startedAtMs) === today,
+ ).length;
+
+ return (
+
+
+ Watch Time
+
+ {ranges.map((r) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/stats/src/components/overview/OverviewTab.tsx b/stats/src/components/overview/OverviewTab.tsx
new file mode 100644
index 0000000..112845e
--- /dev/null
+++ b/stats/src/components/overview/OverviewTab.tsx
@@ -0,0 +1,80 @@
+import { useOverview } from '../../hooks/useOverview';
+import { useStreakCalendar } from '../../hooks/useStreakCalendar';
+import { HeroStats } from './HeroStats';
+import { StreakCalendar } from './StreakCalendar';
+import { RecentSessions } from './RecentSessions';
+import { TrendChart } from '../trends/TrendChart';
+import { buildOverviewSummary, buildStreakCalendar } from '../../lib/dashboard-data';
+import { formatNumber } from '../../lib/formatters';
+
+export function OverviewTab() {
+ const { data, sessions, loading, error } = useOverview();
+ const { calendar, loading: calLoading } = useStreakCalendar(90);
+
+ if (loading) return Loading...
;
+ if (error) return Error: {error}
;
+ if (!data) return null;
+
+ const summary = buildOverviewSummary(data);
+ const streakData = buildStreakCalendar(calendar);
+ const showTrackedCardNote = summary.totalTrackedCards === 0 && summary.totalSessions > 0;
+
+ return (
+
+
+ );
+}
diff --git a/stats/src/components/overview/QuickStats.tsx b/stats/src/components/overview/QuickStats.tsx
new file mode 100644
index 0000000..04e43aa
--- /dev/null
+++ b/stats/src/components/overview/QuickStats.tsx
@@ -0,0 +1,46 @@
+import { todayLocalDay } from '../../lib/formatters';
+import type { DailyRollup } from '../../types/stats';
+
+interface QuickStatsProps {
+ rollups: DailyRollup[];
+}
+
+export function QuickStats({ rollups }: QuickStatsProps) {
+ const daysWithActivity = new Set(
+ rollups.filter((r) => r.totalActiveMin > 0).map((r) => r.rollupDayOrMonth),
+ );
+ const today = todayLocalDay();
+ const streakStart = daysWithActivity.has(today) ? today : today - 1;
+ let streak = 0;
+ for (let d = streakStart; daysWithActivity.has(d); d--) {
+ streak++;
+ }
+
+ const weekStart = today - 6;
+ const weekRollups = rollups.filter((r) => r.rollupDayOrMonth >= weekStart);
+ const weekMinutes = weekRollups.reduce((sum, r) => sum + r.totalActiveMin, 0);
+ const weekCards = weekRollups.reduce((sum, r) => sum + r.totalCards, 0);
+ const avgMinPerDay = Math.round(weekMinutes / 7);
+
+ return (
+
+
+
+
+
+
+ Tracking Snapshot
+ {showTrackedCardNote && ( +
+ No tracked card-add events in the current immersion DB yet. New cards mined after this fix will show here.
+
+ )}
+
+
+
+
+ Total Sessions
+
+ {formatNumber(summary.totalSessions)}
+
+
+
+ Episodes Today
+
+ {formatNumber(summary.episodesToday)}
+
+
+
+ All-Time Hours
+
+ {formatNumber(summary.allTimeHours)}
+
+
+
+ Active Days
+
+ {formatNumber(summary.activeDays)}
+
+
+
+ Cards Mined
+
+ {formatNumber(summary.totalTrackedCards)}
+
+
+
+ );
+}
diff --git a/stats/src/components/overview/RecentSessions.tsx b/stats/src/components/overview/RecentSessions.tsx
new file mode 100644
index 0000000..0f7ed63
--- /dev/null
+++ b/stats/src/components/overview/RecentSessions.tsx
@@ -0,0 +1,242 @@
+import { useState } from 'react';
+import { formatDuration, formatRelativeDate, formatNumber, todayLocalDay, localDayFromMs } from '../../lib/formatters';
+import { BASE_URL } from '../../lib/api-client';
+import type { SessionSummary } from '../../types/stats';
+
+interface RecentSessionsProps {
+ sessions: SessionSummary[];
+}
+
+interface AnimeGroup {
+ key: string;
+ animeId: number | null;
+ animeTitle: string | null;
+ videoId: number | null;
+ sessions: SessionSummary[];
+ totalCards: number;
+ totalWords: number;
+ totalActiveMs: number;
+}
+
+function groupSessionsByDay(sessions: SessionSummary[]): MapQuick Stats
+
+
+
+ Streak
+
+ {streak} day{streak !== 1 ? 's' : ''}
+
+
+
+ Avg/day this week
+ {avgMinPerDay}m
+
+
+ Cards this week
+ {weekCards}
+
+
+ {fallbackChar}
+
+ );
+ }
+
+ return (
+ {
+ const target = e.currentTarget;
+ target.style.display = 'none';
+ const placeholder = document.createElement('div');
+ placeholder.className = 'w-12 h-16 rounded bg-ctp-surface2 flex items-center justify-center text-ctp-overlay2 text-lg font-bold shrink-0';
+ placeholder.textContent = fallbackChar;
+ target.parentElement?.insertBefore(placeholder, target);
+ }}
+ />
+ );
+}
+
+function SessionItem({ session }: { session: SessionSummary }) {
+ return (
+
+
+ );
+}
+
+function AnimeGroupRow({ group }: { group: AnimeGroup }) {
+ const [expanded, setExpanded] = useState(false);
+
+ if (group.sessions.length === 1) {
+ return
+
+
+ {session.canonicalTitle ?? 'Unknown Media'}
+
+
+ {formatRelativeDate(session.startedAtMs)} · {formatDuration(session.activeWatchedMs)} active
+
+
+
+
+
+ {formatNumber(session.cardsMined)}
+ cards
+
+
+ {formatNumber(session.wordsSeen)}
+ words
+
+
+ {expanded && (
+
+ );
+}
+
+export function RecentSessions({ sessions }: RecentSessionsProps) {
+ if (sessions.length === 0) {
+ return (
+
+ {group.sessions.map((s) => (
+
+ )}
+
+
+ ))}
+
+
+
+ {s.canonicalTitle ?? 'Unknown Media'}
+
+
+ {formatRelativeDate(s.startedAtMs)} · {formatDuration(s.activeWatchedMs)} active
+
+
+
+
+
+ {formatNumber(s.cardsMined)}
+ cards
+
+
+ {formatNumber(s.wordsSeen)}
+ words
+
+
+ );
+ }
+
+ const groups = groupSessionsByDay(sessions);
+
+ return (
+ No sessions yet
+
+ {Array.from(groups.entries()).map(([dayLabel, daySessions]) => {
+ const animeGroups = groupSessionsByAnime(daySessions);
+ return (
+
+ );
+}
diff --git a/stats/src/components/overview/StreakCalendar.tsx b/stats/src/components/overview/StreakCalendar.tsx
new file mode 100644
index 0000000..74323f5
--- /dev/null
+++ b/stats/src/components/overview/StreakCalendar.tsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import type { StreakCalendarPoint } from '../../lib/dashboard-data';
+
+interface StreakCalendarProps {
+ data: StreakCalendarPoint[];
+}
+
+function intensityClass(value: number): string {
+ if (value === 0) return 'bg-ctp-surface0';
+ if (value <= 30) return 'bg-ctp-green/30';
+ if (value <= 60) return 'bg-ctp-green/60';
+ return 'bg-ctp-green';
+}
+
+const DAY_LABELS = ['Mon', '', 'Wed', '', 'Fri', '', ''];
+
+export function StreakCalendar({ data }: StreakCalendarProps) {
+ const [tooltip, setTooltip] = useState<{ x: number; y: number; text: string } | null>(null);
+
+ const lookup = new Map(data.map((d) => [d.date, d.value]));
+
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ const endDate = new Date(today);
+ const startDate = new Date(today);
+ startDate.setDate(startDate.getDate() - 89);
+
+ const startDow = (startDate.getDay() + 6) % 7;
+
+ const cells: Array<{ date: string; value: number; row: number; col: number }> = [];
+ let col = 0;
+ let row = startDow;
+
+ const cursor = new Date(startDate);
+ while (cursor <= endDate) {
+ const dateStr = `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`;
+ cells.push({ date: dateStr, value: lookup.get(dateStr) ?? 0, row, col });
+
+ row += 1;
+ if (row >= 7) {
+ row = 0;
+ col += 1;
+ }
+ cursor.setDate(cursor.getDate() + 1);
+ }
+
+ const totalCols = col + (row > 0 ? 1 : 0);
+
+ return (
+
+
+ );
+ })}
+ + {dayLabel} +
+
+ {animeGroups.map((group) => (
+
+
+ (14);
+
+ const byDay = new Map();
+ for (const r of rollups) {
+ byDay.set(r.rollupDayOrMonth, (byDay.get(r.rollupDayOrMonth) ?? 0) + r.totalActiveMin);
+ }
+ const chartData = Array.from(byDay.entries())
+ .sort(([dayA], [dayB]) => dayA - dayB)
+ .map(([day, mins]) => ({
+ date: epochDayToDate(day).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),
+ minutes: Math.round(mins),
+ }))
+ .slice(-range);
+
+ const ranges: Range[] = [14, 30, 90];
+
+ return (
+ > = {
+ [EventType.CARD_MINED]: { color: '#a6da95', label: 'Card mined' },
+ [EventType.PAUSE_START]: { color: '#f5a97f', label: 'Pause' },
+};
+
+export function SessionDetail({ sessionId, cardsMined }: SessionDetailProps) {
+ const { timeline, events, loading, error } = useSessionDetail(sessionId);
+
+ if (loading) return setFailed(true)}
+ />
+ );
+}
+
+export function SessionRow({ session, isExpanded, detailsId, onToggle }: SessionRowProps) {
+ return (
+
+ );
+}
diff --git a/stats/src/components/sessions/SessionsTab.tsx b/stats/src/components/sessions/SessionsTab.tsx
new file mode 100644
index 0000000..75f377a
--- /dev/null
+++ b/stats/src/components/sessions/SessionsTab.tsx
@@ -0,0 +1,99 @@
+import { useState, useMemo } from 'react';
+import { useSessions } from '../../hooks/useSessions';
+import { SessionRow } from './SessionRow';
+import { SessionDetail } from './SessionDetail';
+import { todayLocalDay, localDayFromMs } from '../../lib/formatters';
+import type { SessionSummary } from '../../types/stats';
+
+function groupSessionsByDay(sessions: SessionSummary[]): Map {
+ const groups = new Map();
+ const today = todayLocalDay();
+
+ for (const session of sessions) {
+ const sessionDay = localDayFromMs(session.startedAtMs);
+ let label: string;
+ if (sessionDay === today) {
+ label = 'Today';
+ } else if (sessionDay === today - 1) {
+ label = 'Yesterday';
+ } else {
+ label = new Date(session.startedAtMs).toLocaleDateString(undefined, {
+ month: 'long',
+ day: 'numeric',
+ });
+ }
+ const group = groups.get(label);
+ if (group) {
+ group.push(session);
+ } else {
+ groups.set(label, [session]);
+ }
+ }
+
+ return groups;
+}
+
+export function SessionsTab() {
+ const { sessions, loading, error } = useSessions();
+ const [expandedId, setExpandedId] = useState(null);
+ const [search, setSearch] = useState('');
+
+ const filtered = useMemo(() => {
+ const q = search.trim().toLowerCase();
+ if (!q) return sessions;
+ return sessions.filter(
+ (s) => s.canonicalTitle?.toLowerCase().includes(q),
+ );
+ }, [sessions, search]);
+
+ const groups = useMemo(() => groupSessionsByDay(filtered), [filtered]);
+
+ if (loading) return ();
+ for (const entry of raw) {
+ totalByAnime.set(entry.animeTitle, (totalByAnime.get(entry.animeTitle) ?? 0) + entry.value);
+ }
+
+ const sorted = [...totalByAnime.entries()].sort((a, b) => b[1] - a[1]);
+ const topTitles = sorted.slice(0, 7).map(([title]) => title);
+ const topSet = new Set(topTitles);
+
+ const byDay = new Map>();
+ for (const entry of raw) {
+ if (!topSet.has(entry.animeTitle)) continue;
+ const row = byDay.get(entry.epochDay) ?? {};
+ row[entry.animeTitle] = (row[entry.animeTitle] ?? 0) + Math.round(entry.value * 10) / 10;
+ byDay.set(entry.epochDay, row);
+ }
+
+ const points = [...byDay.entries()]
+ .sort(([a], [b]) => a - b)
+ .map(([epochDay, values]) => ({
+ label: epochDayToDate(epochDay).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),
+ ...values,
+ }));
+
+ return { points, seriesKeys: topTitles };
+}
+
+export function StackedTrendChart({ title, data }: StackedTrendChartProps) {
+ const { points, seriesKeys } = buildLineData(data);
+
+ const tooltipStyle = {
+ background: '#363a4f', border: '1px solid #494d64', borderRadius: 6, color: '#cad3f5', fontSize: 12,
+ };
+
+ if (points.length === 0) {
+ return (
+ >();
+ for (const p of points) {
+ const dayMap = byAnime.get(p.animeTitle) ?? new Map();
+ dayMap.set(p.epochDay, (dayMap.get(p.epochDay) ?? 0) + p.value);
+ byAnime.set(p.animeTitle, dayMap);
+ }
+ const result: PerAnimeDataPoint[] = [];
+ for (const [animeTitle, dayMap] of byAnime) {
+ const sorted = [...dayMap.entries()].sort(([a], [b]) => a - b);
+ let cumulative = 0;
+ for (const [epochDay, value] of sorted) {
+ cumulative += value;
+ result.push({ epochDay, animeTitle, value: cumulative });
+ }
+ }
+ return result;
+}
+
+function buildPerAnimeFromSessions(
+ sessions: SessionSummary[],
+ getValue: (s: SessionSummary) => number,
+): PerAnimeDataPoint[] {
+ const map = new Map>();
+ for (const s of sessions) {
+ const title = s.animeTitle ?? s.canonicalTitle ?? 'Unknown';
+ const day = localDayFromMs(s.startedAtMs);
+ const animeMap = map.get(title) ?? new Map();
+ animeMap.set(day, (animeMap.get(day) ?? 0) + getValue(s));
+ map.set(title, animeMap);
+ }
+ const points: PerAnimeDataPoint[] = [];
+ for (const [animeTitle, dayMap] of map) {
+ for (const [epochDay, value] of dayMap) {
+ points.push({ epochDay, animeTitle, value });
+ }
+ }
+ return points;
+}
+
+function buildEpisodesPerAnimeFromSessions(sessions: SessionSummary[]): PerAnimeDataPoint[] {
+ // Group by anime+day, counting distinct videoIds
+ const map = new Map>>();
+ for (const s of sessions) {
+ const title = s.animeTitle ?? s.canonicalTitle ?? 'Unknown';
+ const day = localDayFromMs(s.startedAtMs);
+ const animeMap = map.get(title) ?? new Map();
+ const videoSet = animeMap.get(day) ?? new Set();
+ videoSet.add(s.videoId);
+ animeMap.set(day, videoSet);
+ map.set(title, animeMap);
+ }
+ const points: PerAnimeDataPoint[] = [];
+ for (const [animeTitle, dayMap] of map) {
+ for (const [epochDay, videoSet] of dayMap) {
+ points.push({ epochDay, animeTitle, value: videoSet.size });
+ }
+ }
+ return points;
+}
+
+function SectionHeader({ children }: { children: React.ReactNode }) {
+ return (
+ ('30d');
+ const [groupBy, setGroupBy] = useState('day');
+ const { data, loading, error } = useTrends(range, groupBy);
+
+ if (loading) return ([]);
+ const [occLoading, setOccLoading] = useState(false);
+ const [occLoadingMore, setOccLoadingMore] = useState(false);
+ const [occError, setOccError] = useState(null);
+ const [hasMore, setHasMore] = useState(false);
+ const [occLoaded, setOccLoaded] = useState(false);
+ const requestIdRef = useRef(0);
+
+ if (kanjiId === null) return null;
+
+ const loadOccurrences = async (kanji: string, offset: number, append: boolean) => {
+ const reqId = ++requestIdRef.current;
+ if (append) {
+ setOccLoadingMore(true);
+ } else {
+ setOccLoading(true);
+ setOccError(null);
+ }
+ try {
+ const rows = await apiClient.getKanjiOccurrences(kanji, OCCURRENCES_PAGE_SIZE, offset);
+ if (reqId !== requestIdRef.current) return;
+ setOccurrences(prev => append ? [...prev, ...rows] : rows);
+ setHasMore(rows.length === OCCURRENCES_PAGE_SIZE);
+ } catch (err) {
+ if (reqId !== requestIdRef.current) return;
+ setOccError(err instanceof Error ? err.message : String(err));
+ if (!append) {
+ setOccurrences([]);
+ setHasMore(false);
+ }
+ } finally {
+ if (reqId !== requestIdRef.current) return;
+ setOccLoading(false);
+ setOccLoadingMore(false);
+ setOccLoaded(true);
+ }
+ };
+
+ const handleShowOccurrences = () => {
+ if (!data) return;
+ void loadOccurrences(data.detail.kanji, 0, false);
+ };
+
+ const handleLoadMore = () => {
+ if (!data || occLoadingMore || !hasMore) return;
+ void loadOccurrences(data.detail.kanji, occurrences.length, true);
+ };
+
+ return (
+ (null);
+ const [hideParticles, setHideParticles] = useState(true);
+ const [search, setSearch] = useState('');
+
+ const filteredWords = useMemo(
+ () => hideParticles ? words.filter(w => !isFilterable(w)) : words,
+ [words, hideParticles],
+ );
+
+ if (loading) return ([]);
+ const [occLoading, setOccLoading] = useState(false);
+ const [occLoadingMore, setOccLoadingMore] = useState(false);
+ const [occError, setOccError] = useState(null);
+ const [hasMore, setHasMore] = useState(false);
+ const [occLoaded, setOccLoaded] = useState(false);
+ const requestIdRef = useRef(0);
+
+ if (wordId === null) return null;
+
+ const loadOccurrences = async (detail: NonNullable['detail'], offset: number, append: boolean) => {
+ const reqId = ++requestIdRef.current;
+ if (append) {
+ setOccLoadingMore(true);
+ } else {
+ setOccLoading(true);
+ setOccError(null);
+ }
+ try {
+ const rows = await apiClient.getWordOccurrences(
+ detail.headword, detail.word, detail.reading,
+ OCCURRENCES_PAGE_SIZE, offset,
+ );
+ if (reqId !== requestIdRef.current) return;
+ setOccurrences(prev => append ? [...prev, ...rows] : rows);
+ setHasMore(rows.length === OCCURRENCES_PAGE_SIZE);
+ } catch (err) {
+ if (reqId !== requestIdRef.current) return;
+ setOccError(err instanceof Error ? err.message : String(err));
+ if (!append) {
+ setOccurrences([]);
+ setHasMore(false);
+ }
+ } finally {
+ if (reqId !== requestIdRef.current) return;
+ setOccLoading(false);
+ setOccLoadingMore(false);
+ setOccLoaded(true);
+ }
+ };
+
+ const handleShowOccurrences = () => {
+ if (!data) return;
+ void loadOccurrences(data.detail, 0, false);
+ };
+
+ const handleLoadMore = () => {
+ if (!data || occLoadingMore || !hasMore) return;
+ void loadOccurrences(data.detail, occurrences.length, true);
+ };
+
+ return (
+ ('frequency');
+ const [page, setPage] = useState(0);
+
+ const titleBySort: Record = {
+ frequency: 'Most Seen Words',
+ lastSeen: 'Recently Seen Words',
+ firstSeen: 'First Seen Words',
+ };
+
+ const filtered = useMemo(() => {
+ const needle = search.trim().toLowerCase();
+ if (!needle) return words;
+ return words.filter(
+ w => w.headword.toLowerCase().includes(needle)
+ || w.word.toLowerCase().includes(needle)
+ || w.reading.toLowerCase().includes(needle),
+ );
+ }, [words, search]);
+
+ const sorted = useMemo(() => {
+ const copy = [...filtered];
+ if (sortBy === 'frequency') copy.sort((a, b) => b.frequency - a.frequency);
+ else if (sortBy === 'lastSeen') copy.sort((a, b) => b.lastSeen - a.lastSeen);
+ else copy.sort((a, b) => b.firstSeen - a.firstSeen);
+ return copy;
+ }, [filtered, sortBy]);
+
+ const totalPages = Math.ceil(sorted.length / PAGE_SIZE);
+ const paged = sorted.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+ const maxFreq = words.reduce((max, word) => Math.max(max, word.frequency), 1);
+
+ const getFrequencyColor = (freq: number) => {
+ const ratio = freq / maxFreq;
+ if (ratio > 0.5) return 'text-ctp-blue bg-ctp-blue/10';
+ if (ratio > 0.2) return 'text-ctp-green bg-ctp-green/10';
+ return 'text-ctp-mauve bg-ctp-mauve/10';
+ };
+
+ return (
+ = {
+ noun: 'bg-ctp-blue/15 text-ctp-blue',
+ verb: 'bg-ctp-green/15 text-ctp-green',
+ adjective: 'bg-ctp-mauve/15 text-ctp-mauve',
+ adverb: 'bg-ctp-peach/15 text-ctp-peach',
+ particle: 'bg-ctp-overlay0/15 text-ctp-overlay0',
+ auxiliary_verb: 'bg-ctp-overlay0/15 text-ctp-overlay0',
+ conjunction: 'bg-ctp-overlay0/15 text-ctp-overlay0',
+ prenominal: 'bg-ctp-yellow/15 text-ctp-yellow',
+ suffix: 'bg-ctp-flamingo/15 text-ctp-flamingo',
+ prefix: 'bg-ctp-flamingo/15 text-ctp-flamingo',
+ interjection: 'bg-ctp-rosewater/15 text-ctp-rosewater',
+};
+
+const DEFAULT_POS_COLOR = 'bg-ctp-surface1 text-ctp-subtext0';
+
+export function posColor(pos: string): string {
+ return POS_COLORS[pos] ?? DEFAULT_POS_COLOR;
+}
+
+export function PosBadge({ pos }: { pos: string }) {
+ return (
+
+ {pos.replace(/_/g, ' ')}
+
+ );
+}
+
+const PARTICLE_POS = new Set(['particle', 'auxiliary_verb', 'conjunction']);
+
+export function isFilterable(entry: VocabularyEntry): boolean {
+ if (PARTICLE_POS.has(entry.partOfSpeech ?? '')) return true;
+ if (entry.headword.length === 1 && /[\u3040-\u309F\u30A0-\u30FF]/.test(entry.headword)) return true;
+ return false;
+}
diff --git a/stats/src/hooks/useAnimeDetail.ts b/stats/src/hooks/useAnimeDetail.ts
new file mode 100644
index 0000000..ce0ee06
--- /dev/null
+++ b/stats/src/hooks/useAnimeDetail.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { AnimeDetailData } from '../types/stats';
+
+export function useAnimeDetail(animeId: number | null) {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (animeId === null) return;
+ setLoading(true);
+ setError(null);
+ getStatsClient()
+ .getAnimeDetail(animeId)
+ .then(setData)
+ .catch((err: Error) => setError(err.message))
+ .finally(() => setLoading(false));
+ }, [animeId]);
+
+ return { data, loading, error };
+}
diff --git a/stats/src/hooks/useAnimeLibrary.ts b/stats/src/hooks/useAnimeLibrary.ts
new file mode 100644
index 0000000..e1991d3
--- /dev/null
+++ b/stats/src/hooks/useAnimeLibrary.ts
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { AnimeLibraryItem } from '../types/stats';
+
+export function useAnimeLibrary() {
+ const [anime, setAnime] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ getStatsClient()
+ .getAnimeLibrary()
+ .then((data) => { if (!cancelled) setAnime(data); })
+ .catch((err: Error) => { if (!cancelled) setError(err.message); })
+ .finally(() => { if (!cancelled) setLoading(false); });
+ return () => { cancelled = true; };
+ }, []);
+
+ return { anime, loading, error };
+}
diff --git a/stats/src/hooks/useKanjiDetail.ts b/stats/src/hooks/useKanjiDetail.ts
new file mode 100644
index 0000000..f5be433
--- /dev/null
+++ b/stats/src/hooks/useKanjiDetail.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { KanjiDetailData } from '../types/stats';
+
+export function useKanjiDetail(kanjiId: number | null) {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (kanjiId === null) return;
+ setLoading(true);
+ setError(null);
+ getStatsClient()
+ .getKanjiDetail(kanjiId)
+ .then(setData)
+ .catch((err: Error) => setError(err.message))
+ .finally(() => setLoading(false));
+ }, [kanjiId]);
+
+ return { data, loading, error };
+}
diff --git a/stats/src/hooks/useMediaDetail.ts b/stats/src/hooks/useMediaDetail.ts
new file mode 100644
index 0000000..b8ef195
--- /dev/null
+++ b/stats/src/hooks/useMediaDetail.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { MediaDetailData } from '../types/stats';
+
+export function useMediaDetail(videoId: number | null) {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (videoId === null) return;
+ setLoading(true);
+ setError(null);
+ getStatsClient()
+ .getMediaDetail(videoId)
+ .then(setData)
+ .catch((err: Error) => setError(err.message))
+ .finally(() => setLoading(false));
+ }, [videoId]);
+
+ return { data, loading, error };
+}
diff --git a/stats/src/hooks/useMediaLibrary.ts b/stats/src/hooks/useMediaLibrary.ts
new file mode 100644
index 0000000..9842a4b
--- /dev/null
+++ b/stats/src/hooks/useMediaLibrary.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { MediaLibraryItem } from '../types/stats';
+
+export function useMediaLibrary() {
+ const [media, setMedia] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ getStatsClient()
+ .getMediaLibrary()
+ .then(setMedia)
+ .catch((err: Error) => setError(err.message))
+ .finally(() => setLoading(false));
+ }, []);
+
+ return { media, loading, error };
+}
diff --git a/stats/src/hooks/useOverview.ts b/stats/src/hooks/useOverview.ts
new file mode 100644
index 0000000..254d117
--- /dev/null
+++ b/stats/src/hooks/useOverview.ts
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { OverviewData, SessionSummary } from '../types/stats';
+
+export function useOverview() {
+ const [data, setData] = useState(null);
+ const [sessions, setSessions] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const client = getStatsClient();
+ Promise.all([client.getOverview(), client.getSessions(50)])
+ .then(([overview, allSessions]) => {
+ setData(overview);
+ setSessions(allSessions);
+ })
+ .catch((err) => setError(err.message))
+ .finally(() => setLoading(false));
+ }, []);
+
+ return { data, sessions, loading, error };
+}
diff --git a/stats/src/hooks/useSessions.ts b/stats/src/hooks/useSessions.ts
new file mode 100644
index 0000000..daee82c
--- /dev/null
+++ b/stats/src/hooks/useSessions.ts
@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { SessionSummary, SessionTimelinePoint, SessionEvent } from '../types/stats';
+
+export function useSessions(limit = 50) {
+ const [sessions, setSessions] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ setLoading(true);
+ setError(null);
+ const client = getStatsClient();
+ client
+ .getSessions(limit)
+ .then((nextSessions) => {
+ if (cancelled) return;
+ setSessions(nextSessions);
+ })
+ .catch((err) => {
+ if (cancelled) return;
+ setError(err.message);
+ })
+ .finally(() => {
+ if (cancelled) return;
+ setLoading(false);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [limit]);
+
+ return { sessions, loading, error };
+}
+
+export function useSessionDetail(sessionId: number | null) {
+ const [timeline, setTimeline] = useState([]);
+ const [events, setEvents] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ setError(null);
+ if (sessionId == null) {
+ setTimeline([]);
+ setEvents([]);
+ setLoading(false);
+ return () => {
+ cancelled = true;
+ };
+ }
+ setLoading(true);
+ setTimeline([]);
+ setEvents([]);
+ const client = getStatsClient();
+ Promise.all([client.getSessionTimeline(sessionId), client.getSessionEvents(sessionId)])
+ .then(([nextTimeline, nextEvents]) => {
+ if (cancelled) return;
+ setTimeline(nextTimeline);
+ setEvents(nextEvents);
+ })
+ .catch((err) => {
+ if (cancelled) return;
+ setError(err.message);
+ })
+ .finally(() => {
+ if (cancelled) return;
+ setLoading(false);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [sessionId]);
+
+ return { timeline, events, loading, error };
+}
diff --git a/stats/src/hooks/useStatsApi.ts b/stats/src/hooks/useStatsApi.ts
new file mode 100644
index 0000000..fbc8b55
--- /dev/null
+++ b/stats/src/hooks/useStatsApi.ts
@@ -0,0 +1,7 @@
+import { apiClient } from '../lib/api-client';
+
+export type StatsClient = typeof apiClient;
+
+export function getStatsClient(): StatsClient {
+ return apiClient;
+}
diff --git a/stats/src/hooks/useStreakCalendar.ts b/stats/src/hooks/useStreakCalendar.ts
new file mode 100644
index 0000000..a2a964a
--- /dev/null
+++ b/stats/src/hooks/useStreakCalendar.ts
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { StreakCalendarDay } from '../types/stats';
+
+export function useStreakCalendar(days = 90) {
+ const [calendar, setCalendar] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ getStatsClient()
+ .getStreakCalendar(days)
+ .then((data) => { if (!cancelled) setCalendar(data); })
+ .catch((err: Error) => { if (!cancelled) setError(err.message); })
+ .finally(() => { if (!cancelled) setLoading(false); });
+ return () => { cancelled = true; };
+ }, [days]);
+
+ return { calendar, loading, error };
+}
diff --git a/stats/src/hooks/useTrends.ts b/stats/src/hooks/useTrends.ts
new file mode 100644
index 0000000..7e1016e
--- /dev/null
+++ b/stats/src/hooks/useTrends.ts
@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { DailyRollup, MonthlyRollup, EpisodesPerDay, NewAnimePerDay, WatchTimePerAnime, SessionSummary, AnimeLibraryItem } from '../types/stats';
+
+export type TimeRange = '7d' | '30d' | '90d' | 'all';
+export type GroupBy = 'day' | 'month';
+
+export interface TrendsData {
+ rollups: DailyRollup[] | MonthlyRollup[];
+ episodesPerDay: EpisodesPerDay[];
+ newAnimePerDay: NewAnimePerDay[];
+ watchTimePerAnime: WatchTimePerAnime[];
+ sessions: SessionSummary[];
+ animeLibrary: AnimeLibraryItem[];
+}
+
+export function useTrends(range: TimeRange, groupBy: GroupBy) {
+ const [data, setData] = useState({
+ rollups: [],
+ episodesPerDay: [],
+ newAnimePerDay: [],
+ watchTimePerAnime: [],
+ sessions: [],
+ animeLibrary: [],
+ });
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ setLoading(true);
+ setError(null);
+ const client = getStatsClient();
+ const limitMap: Record = { '7d': 7, '30d': 30, '90d': 90, all: 365 };
+ const limit = limitMap[range];
+ const monthlyLimit = Math.max(1, Math.ceil(limit / 30));
+
+ const rollupFetcher =
+ groupBy === 'month'
+ ? client.getMonthlyRollups(monthlyLimit)
+ : client.getDailyRollups(limit);
+
+ Promise.all([
+ rollupFetcher,
+ client.getEpisodesPerDay(limit),
+ client.getNewAnimePerDay(limit),
+ client.getWatchTimePerAnime(limit),
+ client.getSessions(500),
+ client.getAnimeLibrary(),
+ ])
+ .then(([rollups, episodesPerDay, newAnimePerDay, watchTimePerAnime, sessions, animeLibrary]) => {
+ setData({ rollups, episodesPerDay, newAnimePerDay, watchTimePerAnime, sessions, animeLibrary });
+ })
+ .catch((err) => setError(err.message))
+ .finally(() => setLoading(false));
+ }, [range, groupBy]);
+
+ return { data, loading, error };
+}
diff --git a/stats/src/hooks/useVocabulary.ts b/stats/src/hooks/useVocabulary.ts
new file mode 100644
index 0000000..84a1095
--- /dev/null
+++ b/stats/src/hooks/useVocabulary.ts
@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { VocabularyEntry, KanjiEntry } from '../types/stats';
+
+export function useVocabulary() {
+ const [words, setWords] = useState([]);
+ const [kanji, setKanji] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ setLoading(true);
+ setError(null);
+ const client = getStatsClient();
+ Promise.allSettled([client.getVocabulary(500), client.getKanji(200)])
+ .then(([wordsResult, kanjiResult]) => {
+ const errors: string[] = [];
+
+ if (wordsResult.status === 'fulfilled') {
+ setWords(wordsResult.value);
+ } else {
+ errors.push(wordsResult.reason.message);
+ }
+
+ if (kanjiResult.status === 'fulfilled') {
+ setKanji(kanjiResult.value);
+ } else {
+ errors.push(kanjiResult.reason.message);
+ }
+
+ if (errors.length > 0) {
+ setError(errors.join('; '));
+ }
+ })
+ .finally(() => setLoading(false));
+ }, []);
+
+ return { words, kanji, loading, error };
+}
diff --git a/stats/src/hooks/useWordDetail.ts b/stats/src/hooks/useWordDetail.ts
new file mode 100644
index 0000000..d98ddf7
--- /dev/null
+++ b/stats/src/hooks/useWordDetail.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { getStatsClient } from './useStatsApi';
+import type { WordDetailData } from '../types/stats';
+
+export function useWordDetail(wordId: number | null) {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (wordId === null) return;
+ setLoading(true);
+ setError(null);
+ getStatsClient()
+ .getWordDetail(wordId)
+ .then(setData)
+ .catch((err: Error) => setError(err.message))
+ .finally(() => setLoading(false));
+ }, [wordId]);
+
+ return { data, loading, error };
+}
diff --git a/stats/src/lib/api-client.ts b/stats/src/lib/api-client.ts
new file mode 100644
index 0000000..0388e98
--- /dev/null
+++ b/stats/src/lib/api-client.ts
@@ -0,0 +1,117 @@
+import type {
+ OverviewData,
+ DailyRollup,
+ MonthlyRollup,
+ SessionSummary,
+ SessionTimelinePoint,
+ SessionEvent,
+ VocabularyEntry,
+ KanjiEntry,
+ VocabularyOccurrenceEntry,
+ MediaLibraryItem,
+ MediaDetailData,
+ AnimeLibraryItem,
+ AnimeDetailData,
+ AnimeWord,
+ StreakCalendarDay,
+ EpisodesPerDay,
+ NewAnimePerDay,
+ WatchTimePerAnime,
+ WordDetailData,
+ KanjiDetailData,
+ EpisodeDetailData,
+} from '../types/stats';
+
+export const BASE_URL = window.location.protocol === 'file:'
+ ? 'http://127.0.0.1:5175'
+ : window.location.origin;
+
+async function fetchJson(path: string): Promise {
+ const res = await fetch(`${BASE_URL}${path}`);
+ if (!res.ok) {
+ let body = '';
+ try {
+ body = (await res.text()).trim();
+ } catch {
+ body = '';
+ }
+ throw new Error(
+ body ? `Stats API error: ${res.status} ${body}` : `Stats API error: ${res.status}`,
+ );
+ }
+ return res.json() as Promise;
+}
+
+export const apiClient = {
+ getOverview: () => fetchJson('/api/stats/overview'),
+ getDailyRollups: (limit = 60) =>
+ fetchJson(`/api/stats/daily-rollups?limit=${limit}`),
+ getMonthlyRollups: (limit = 24) =>
+ fetchJson(`/api/stats/monthly-rollups?limit=${limit}`),
+ getSessions: (limit = 50) => fetchJson(`/api/stats/sessions?limit=${limit}`),
+ getSessionTimeline: (id: number, limit = 200) =>
+ fetchJson(`/api/stats/sessions/${id}/timeline?limit=${limit}`),
+ getSessionEvents: (id: number, limit = 500) =>
+ fetchJson(`/api/stats/sessions/${id}/events?limit=${limit}`),
+ getVocabulary: (limit = 100) =>
+ fetchJson(`/api/stats/vocabulary?limit=${limit}`),
+ getWordOccurrences: (
+ headword: string,
+ word: string,
+ reading: string,
+ limit = 50,
+ offset = 0,
+ ) =>
+ fetchJson(
+ `/api/stats/vocabulary/occurrences?headword=${encodeURIComponent(headword)}&word=${encodeURIComponent(word)}&reading=${encodeURIComponent(reading)}&limit=${limit}&offset=${offset}`,
+ ),
+ getKanji: (limit = 100) => fetchJson(`/api/stats/kanji?limit=${limit}`),
+ getKanjiOccurrences: (kanji: string, limit = 50, offset = 0) =>
+ fetchJson(
+ `/api/stats/kanji/occurrences?kanji=${encodeURIComponent(kanji)}&limit=${limit}&offset=${offset}`,
+ ),
+ getMediaLibrary: () => fetchJson('/api/stats/media'),
+ getMediaDetail: (videoId: number) =>
+ fetchJson(`/api/stats/media/${videoId}`),
+ getAnimeLibrary: () => fetchJson('/api/stats/anime'),
+ getAnimeDetail: (animeId: number) =>
+ fetchJson(`/api/stats/anime/${animeId}`),
+ getAnimeWords: (animeId: number, limit = 50) =>
+ fetchJson(`/api/stats/anime/${animeId}/words?limit=${limit}`),
+ getAnimeRollups: (animeId: number, limit = 90) =>
+ fetchJson(`/api/stats/anime/${animeId}/rollups?limit=${limit}`),
+ getAnimeCoverUrl: (animeId: number) => `${BASE_URL}/api/stats/anime/${animeId}/cover`,
+ getStreakCalendar: (days = 90) =>
+ fetchJson(`/api/stats/streak-calendar?days=${days}`),
+ getEpisodesPerDay: (limit = 90) =>
+ fetchJson(`/api/stats/trends/episodes-per-day?limit=${limit}`),
+ getNewAnimePerDay: (limit = 90) =>
+ fetchJson(`/api/stats/trends/new-anime-per-day?limit=${limit}`),
+ getWatchTimePerAnime: (limit = 90) =>
+ fetchJson(`/api/stats/trends/watch-time-per-anime?limit=${limit}`),
+ getWordDetail: (wordId: number) =>
+ fetchJson(`/api/stats/vocabulary/${wordId}/detail`),
+ getKanjiDetail: (kanjiId: number) =>
+ fetchJson(`/api/stats/kanji/${kanjiId}/detail`),
+ getEpisodeDetail: (videoId: number) =>
+ fetchJson(`/api/stats/episode/${videoId}/detail`),
+ setVideoWatched: async (videoId: number, watched: boolean): Promise => {
+ await fetch(`${BASE_URL}/api/stats/media/${videoId}/watched`, {
+ method: 'PATCH',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ watched }),
+ });
+ },
+ ankiBrowse: async (noteId: number): Promise => {
+ await fetch(`${BASE_URL}/api/stats/anki/browse?noteId=${noteId}`, { method: 'POST' });
+ },
+ ankiNotesInfo: async (noteIds: number[]): Promise }>> => {
+ const res = await fetch(`${BASE_URL}/api/stats/anki/notesInfo`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ noteIds }),
+ });
+ if (!res.ok) throw new Error(`Stats API error: ${res.status}`);
+ return res.json();
+ },
+};
diff --git a/stats/src/lib/chart-theme.ts b/stats/src/lib/chart-theme.ts
new file mode 100644
index 0000000..549b015
--- /dev/null
+++ b/stats/src/lib/chart-theme.ts
@@ -0,0 +1,8 @@
+export const CHART_THEME = {
+ tick: '#a5adcb',
+ tooltipBg: '#363a4f',
+ tooltipBorder: '#494d64',
+ tooltipText: '#cad3f5',
+ tooltipLabel: '#b8c0e0',
+ barFill: '#8aadf4',
+} as const;
diff --git a/stats/src/lib/dashboard-data.test.ts b/stats/src/lib/dashboard-data.test.ts
new file mode 100644
index 0000000..59b067c
--- /dev/null
+++ b/stats/src/lib/dashboard-data.test.ts
@@ -0,0 +1,137 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import type { DailyRollup, OverviewData, SessionSummary, StreakCalendarDay, VocabularyEntry } from '../types/stats';
+import {
+ buildOverviewSummary,
+ buildStreakCalendar,
+ buildTrendDashboard,
+ buildVocabularySummary,
+} from './dashboard-data';
+
+test('buildOverviewSummary aggregates tracked totals and recent windows', () => {
+ const now = Date.UTC(2026, 2, 13, 12);
+ const today = Math.floor(now / 86_400_000);
+ const sessions: SessionSummary[] = [
+ {
+ sessionId: 1,
+ canonicalTitle: 'A',
+ videoId: 1,
+ animeId: null,
+ animeTitle: null,
+ startedAtMs: now - 3_600_000,
+ endedAtMs: now - 1_800_000,
+ totalWatchedMs: 3_600_000,
+ activeWatchedMs: 3_000_000,
+ linesSeen: 20,
+ wordsSeen: 100,
+ tokensSeen: 80,
+ cardsMined: 2,
+ lookupCount: 10,
+ lookupHits: 8,
+ },
+ ];
+ const rollups: DailyRollup[] = [
+ {
+ rollupDayOrMonth: today,
+ videoId: 1,
+ totalSessions: 1,
+ totalActiveMin: 50,
+ totalLinesSeen: 20,
+ totalWordsSeen: 100,
+ totalTokensSeen: 80,
+ totalCards: 2,
+ cardsPerHour: 2.4,
+ wordsPerMin: 2,
+ lookupHitRate: 0.8,
+ },
+ ];
+ const overview: OverviewData = {
+ sessions,
+ rollups,
+ hints: { totalSessions: 1, activeSessions: 0, episodesToday: 2, activeAnimeCount: 3 },
+ };
+
+ const summary = buildOverviewSummary(overview, now);
+ assert.equal(summary.todayCards, 2);
+ assert.equal(summary.totalTrackedCards, 2);
+ assert.equal(summary.episodesToday, 2);
+ assert.equal(summary.activeAnimeCount, 3);
+ assert.equal(summary.averageSessionMinutes, 50);
+});
+
+test('buildVocabularySummary treats firstSeen timestamps as seconds', () => {
+ const now = Date.UTC(2026, 2, 13, 12);
+ const nowSec = now / 1000;
+ const words: VocabularyEntry[] = [
+ {
+ wordId: 1,
+ headword: '猫',
+ word: '猫',
+ reading: 'ねこ',
+ partOfSpeech: null,
+ pos1: null,
+ pos2: null,
+ pos3: null,
+ frequency: 4,
+ firstSeen: nowSec - 2 * 86_400,
+ lastSeen: nowSec - 1,
+ },
+ ];
+
+ const summary = buildVocabularySummary(words, [], now);
+ assert.equal(summary.newThisWeek, 1);
+});
+
+test('buildTrendDashboard derives dense chart series', () => {
+ const now = Date.UTC(2026, 2, 13, 12);
+ const today = Math.floor(now / 86_400_000);
+ const rollups: DailyRollup[] = [
+ {
+ rollupDayOrMonth: today - 1,
+ videoId: 1,
+ totalSessions: 2,
+ totalActiveMin: 60,
+ totalLinesSeen: 30,
+ totalWordsSeen: 120,
+ totalTokensSeen: 100,
+ totalCards: 3,
+ cardsPerHour: 3,
+ wordsPerMin: 2,
+ lookupHitRate: 0.5,
+ },
+ {
+ rollupDayOrMonth: today,
+ videoId: 1,
+ totalSessions: 1,
+ totalActiveMin: 30,
+ totalLinesSeen: 10,
+ totalWordsSeen: 40,
+ totalTokensSeen: 30,
+ totalCards: 1,
+ cardsPerHour: 2,
+ wordsPerMin: 1.33,
+ lookupHitRate: 0.75,
+ },
+ ];
+
+ const dashboard = buildTrendDashboard(rollups);
+ assert.equal(dashboard.watchTime.length, 2);
+ assert.equal(dashboard.words[1]?.value, 40);
+ assert.equal(dashboard.sessions[0]?.value, 2);
+});
+
+test('buildStreakCalendar converts epoch days to YYYY-MM-DD dates', () => {
+ const days: StreakCalendarDay[] = [
+ { epochDay: 20525, totalActiveMin: 45 },
+ { epochDay: 20526, totalActiveMin: 0 },
+ { epochDay: 20527, totalActiveMin: 30 },
+ ];
+
+ const points = buildStreakCalendar(days);
+ assert.equal(points.length, 3);
+ assert.match(points[0]!.date, /^\d{4}-\d{2}-\d{2}$/);
+ assert.equal(points[0]!.value, 45);
+ assert.equal(points[1]!.value, 0);
+ assert.equal(points[2]!.value, 30);
+});
diff --git a/stats/src/lib/dashboard-data.ts b/stats/src/lib/dashboard-data.ts
new file mode 100644
index 0000000..cd6222b
--- /dev/null
+++ b/stats/src/lib/dashboard-data.ts
@@ -0,0 +1,224 @@
+import type { DailyRollup, KanjiEntry, OverviewData, StreakCalendarDay, VocabularyEntry } from '../types/stats';
+import { epochDayToDate, localDayFromMs } from './formatters';
+
+export interface ChartPoint {
+ label: string;
+ value: number;
+}
+
+export interface OverviewSummary {
+ todayActiveMs: number;
+ todayCards: number;
+ streakDays: number;
+ allTimeHours: number;
+ totalTrackedCards: number;
+ episodesToday: number;
+ activeAnimeCount: number;
+ averageSessionMinutes: number;
+ totalSessions: number;
+ activeDays: number;
+ recentWatchTime: ChartPoint[];
+}
+
+export interface TrendDashboard {
+ watchTime: ChartPoint[];
+ cards: ChartPoint[];
+ words: ChartPoint[];
+ sessions: ChartPoint[];
+ cardsPerHour: ChartPoint[];
+ lookupHitRate: ChartPoint[];
+ averageSessionMinutes: ChartPoint[];
+}
+
+export interface VocabularySummary {
+ uniqueWords: number;
+ uniqueKanji: number;
+ newThisWeek: number;
+ topWords: ChartPoint[];
+ newWordsTimeline: ChartPoint[];
+ recentDiscoveries: VocabularyEntry[];
+}
+
+function makeRollupLabel(value: number): string {
+ if (value > 100_000) {
+ const year = Math.floor(value / 100);
+ const month = value % 100;
+ return new Date(Date.UTC(year, month - 1, 1)).toLocaleDateString(undefined, {
+ month: 'short',
+ year: '2-digit',
+ });
+ }
+
+ return epochDayToDate(value).toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ });
+}
+
+function sumBy(values: T[], select: (value: T) => number): number {
+ return values.reduce((sum, value) => sum + select(value), 0);
+}
+
+function buildAggregatedDailyRows(rollups: DailyRollup[]) {
+ const byKey = new Map<
+ number,
+ {
+ activeMin: number;
+ cards: number;
+ words: number;
+ sessions: number;
+ lookupHitRateSum: number;
+ lookupWeight: number;
+ }
+ >();
+
+ for (const rollup of rollups) {
+ const existing = byKey.get(rollup.rollupDayOrMonth) ?? {
+ activeMin: 0,
+ cards: 0,
+ words: 0,
+ sessions: 0,
+ lookupHitRateSum: 0,
+ lookupWeight: 0,
+ };
+
+ existing.activeMin += rollup.totalActiveMin;
+ existing.cards += rollup.totalCards;
+ existing.words += rollup.totalWordsSeen;
+ existing.sessions += rollup.totalSessions;
+ if (rollup.lookupHitRate != null) {
+ const weight = Math.max(rollup.totalSessions, 1);
+ existing.lookupHitRateSum += rollup.lookupHitRate * weight;
+ existing.lookupWeight += weight;
+ }
+
+ byKey.set(rollup.rollupDayOrMonth, existing);
+ }
+
+ return Array.from(byKey.entries())
+ .sort(([left], [right]) => left - right)
+ .map(([key, value]) => ({
+ key,
+ label: makeRollupLabel(key),
+ activeMin: Math.round(value.activeMin),
+ cards: value.cards,
+ words: value.words,
+ sessions: value.sessions,
+ cardsPerHour: value.activeMin > 0 ? +((value.cards * 60) / value.activeMin).toFixed(1) : 0,
+ averageSessionMinutes:
+ value.sessions > 0 ? +(value.activeMin / value.sessions).toFixed(1) : 0,
+ lookupHitRate:
+ value.lookupWeight > 0 ? Math.round((value.lookupHitRateSum / value.lookupWeight) * 100) : 0,
+ }));
+}
+
+export function buildOverviewSummary(
+ overview: OverviewData,
+ nowMs: number = Date.now(),
+): OverviewSummary {
+ const today = localDayFromMs(nowMs);
+ const aggregated = buildAggregatedDailyRows(overview.rollups);
+ const todayRow = aggregated.find((row) => row.key === today);
+ const daysWithActivity = new Set(
+ aggregated.filter((row) => row.activeMin > 0).map((row) => row.key),
+ );
+
+ const sessionCards = sumBy(overview.sessions, (session) => session.cardsMined);
+ const rollupCards = sumBy(aggregated, (row) => row.cards);
+
+ let streakDays = 0;
+ const streakStart = daysWithActivity.has(today) ? today : today - 1;
+ for (let day = streakStart; daysWithActivity.has(day); day -= 1) {
+ streakDays += 1;
+ }
+
+ const todaySessions = overview.sessions.filter(
+ (session) => localDayFromMs(session.startedAtMs) === today,
+ );
+ const todayActiveFromSessions = sumBy(todaySessions, (session) => session.activeWatchedMs);
+ const todayActiveFromRollup = (todayRow?.activeMin ?? 0) * 60_000;
+
+ return {
+ todayActiveMs: Math.max(todayActiveFromRollup, todayActiveFromSessions),
+ todayCards: Math.max(todayRow?.cards ?? 0, sumBy(todaySessions, (session) => session.cardsMined)),
+ streakDays,
+ allTimeHours: Math.round(sumBy(aggregated, (row) => row.activeMin) / 60),
+ totalTrackedCards: Math.max(sessionCards, rollupCards),
+ episodesToday: overview.hints.episodesToday ?? 0,
+ activeAnimeCount: overview.hints.activeAnimeCount ?? 0,
+ averageSessionMinutes:
+ overview.sessions.length > 0
+ ? Math.round(sumBy(overview.sessions, (session) => session.activeWatchedMs) / overview.sessions.length / 60_000)
+ : 0,
+ totalSessions: overview.hints.totalSessions,
+ activeDays: daysWithActivity.size,
+ recentWatchTime: aggregated.slice(-14).map((row) => ({ label: row.label, value: row.activeMin })),
+ };
+}
+
+export function buildTrendDashboard(
+ rollups: DailyRollup[],
+): TrendDashboard {
+ const aggregated = buildAggregatedDailyRows(rollups);
+ return {
+ watchTime: aggregated.map((row) => ({ label: row.label, value: row.activeMin })),
+ cards: aggregated.map((row) => ({ label: row.label, value: row.cards })),
+ words: aggregated.map((row) => ({ label: row.label, value: row.words })),
+ sessions: aggregated.map((row) => ({ label: row.label, value: row.sessions })),
+ cardsPerHour: aggregated.map((row) => ({ label: row.label, value: row.cardsPerHour })),
+ lookupHitRate: aggregated.map((row) => ({ label: row.label, value: row.lookupHitRate })),
+ averageSessionMinutes: aggregated.map((row) => ({
+ label: row.label,
+ value: row.averageSessionMinutes,
+ })),
+ };
+}
+
+export function buildVocabularySummary(
+ words: VocabularyEntry[],
+ kanji: KanjiEntry[],
+ nowMs: number = Date.now(),
+): VocabularySummary {
+ const weekAgoSec = nowMs / 1000 - 7 * 86_400;
+ const byDay = new Map();
+
+ for (const word of words) {
+ const day = Math.floor(word.firstSeen / 86_400);
+ byDay.set(day, (byDay.get(day) ?? 0) + 1);
+ }
+
+ return {
+ uniqueWords: words.length,
+ uniqueKanji: kanji.length,
+ newThisWeek: words.filter((word) => word.firstSeen >= weekAgoSec).length,
+ topWords: [...words]
+ .sort((left, right) => right.frequency - left.frequency)
+ .slice(0, 12)
+ .map((word) => ({ label: word.headword, value: word.frequency })),
+ newWordsTimeline: Array.from(byDay.entries())
+ .sort(([left], [right]) => left - right)
+ .slice(-14)
+ .map(([day, count]) => ({
+ label: makeRollupLabel(day),
+ value: count,
+ })),
+ recentDiscoveries: [...words]
+ .sort((left, right) => right.firstSeen - left.firstSeen)
+ .slice(0, 8),
+ };
+}
+
+export interface StreakCalendarPoint {
+ date: string;
+ value: number;
+}
+
+export function buildStreakCalendar(days: StreakCalendarDay[]): StreakCalendarPoint[] {
+ return days.map((d) => {
+ const dt = epochDayToDate(d.epochDay);
+ const y = dt.getUTCFullYear();
+ const m = String(dt.getUTCMonth() + 1).padStart(2, '0');
+ const day = String(dt.getUTCDate()).padStart(2, '0');
+ return { date: `${y}-${m}-${day}`, value: d.totalActiveMin };
+ });
+}
diff --git a/stats/src/lib/formatters.test.ts b/stats/src/lib/formatters.test.ts
new file mode 100644
index 0000000..7be19df
--- /dev/null
+++ b/stats/src/lib/formatters.test.ts
@@ -0,0 +1,45 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { formatRelativeDate } from './formatters';
+
+test('formatRelativeDate: future timestamps return "just now"', () => {
+ assert.equal(formatRelativeDate(Date.now() + 60_000), 'just now');
+});
+
+test('formatRelativeDate: 0ms ago returns "just now"', () => {
+ assert.equal(formatRelativeDate(Date.now()), 'just now');
+});
+
+test('formatRelativeDate: 30s ago returns "just now"', () => {
+ assert.equal(formatRelativeDate(Date.now() - 30_000), 'just now');
+});
+
+test('formatRelativeDate: 5 minutes ago returns "5m ago"', () => {
+ assert.equal(formatRelativeDate(Date.now() - 5 * 60_000), '5m ago');
+});
+
+test('formatRelativeDate: 59 minutes ago returns "59m ago"', () => {
+ assert.equal(formatRelativeDate(Date.now() - 59 * 60_000), '59m ago');
+});
+
+test('formatRelativeDate: 2 hours ago returns "2h ago"', () => {
+ assert.equal(formatRelativeDate(Date.now() - 2 * 3_600_000), '2h ago');
+});
+
+test('formatRelativeDate: 23 hours ago returns "23h ago"', () => {
+ assert.equal(formatRelativeDate(Date.now() - 23 * 3_600_000), '23h ago');
+});
+
+test('formatRelativeDate: 36 hours ago returns "Yesterday"', () => {
+ assert.equal(formatRelativeDate(Date.now() - 36 * 3_600_000), 'Yesterday');
+});
+
+test('formatRelativeDate: 5 days ago returns "5d ago"', () => {
+ assert.equal(formatRelativeDate(Date.now() - 5 * 86_400_000), '5d ago');
+});
+
+test('formatRelativeDate: 10 days ago returns locale date string', () => {
+ const ts = Date.now() - 10 * 86_400_000;
+ assert.equal(formatRelativeDate(ts), new Date(ts).toLocaleDateString());
+});
diff --git a/stats/src/lib/formatters.ts b/stats/src/lib/formatters.ts
new file mode 100644
index 0000000..bb4249c
--- /dev/null
+++ b/stats/src/lib/formatters.ts
@@ -0,0 +1,44 @@
+export function formatDuration(ms: number): string {
+ const totalMin = Math.round(ms / 60_000);
+ if (totalMin < 60) return `${totalMin}m`;
+ const hours = Math.floor(totalMin / 60);
+ const mins = totalMin % 60;
+ return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+}
+
+export function formatNumber(n: number): string {
+ return n.toLocaleString();
+}
+
+export function formatPercent(ratio: number | null): string {
+ if (ratio == null) return '\u2014';
+ return `${Math.round(ratio * 100)}%`;
+}
+
+export function formatRelativeDate(ms: number): string {
+ const now = Date.now();
+ const diffMs = now - ms;
+ if (diffMs < 60_000) return 'just now';
+ const diffMin = Math.floor(diffMs / 60_000);
+ if (diffMin < 60) return `${diffMin}m ago`;
+ const diffHours = Math.floor(diffMs / 3_600_000);
+ if (diffHours < 24) return `${diffHours}h ago`;
+ const diffDays = Math.floor(diffMs / 86_400_000);
+ if (diffDays < 2) return 'Yesterday';
+ if (diffDays < 7) return `${diffDays}d ago`;
+ return new Date(ms).toLocaleDateString();
+}
+
+export function epochDayToDate(epochDay: number): Date {
+ return new Date(epochDay * 86_400_000);
+}
+
+export function localDayFromMs(ms: number): number {
+ const d = new Date(ms);
+ const localMidnight = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+ return Math.floor(localMidnight / 86_400_000);
+}
+
+export function todayLocalDay(): number {
+ return localDayFromMs(Date.now());
+}
diff --git a/stats/src/lib/ipc-client.ts b/stats/src/lib/ipc-client.ts
new file mode 100644
index 0000000..6600c36
--- /dev/null
+++ b/stats/src/lib/ipc-client.ts
@@ -0,0 +1,96 @@
+import type {
+ OverviewData, DailyRollup, MonthlyRollup,
+ SessionSummary, SessionTimelinePoint, SessionEvent,
+ VocabularyEntry, KanjiEntry,
+ VocabularyOccurrenceEntry,
+ MediaLibraryItem, MediaDetailData,
+ AnimeLibraryItem, AnimeDetailData, AnimeWord,
+ StreakCalendarDay, EpisodesPerDay, NewAnimePerDay, WatchTimePerAnime,
+ WordDetailData, KanjiDetailData,
+ EpisodeDetailData,
+} from '../types/stats';
+
+interface StatsElectronAPI {
+ stats: {
+ getOverview: () => Promise;
+ getDailyRollups: (limit?: number) => Promise;
+ getMonthlyRollups: (limit?: number) => Promise;
+ getSessions: (limit?: number) => Promise;
+ getSessionTimeline: (id: number, limit?: number) => Promise;
+ getSessionEvents: (id: number, limit?: number) => Promise;
+ getVocabulary: (limit?: number) => Promise;
+ getWordOccurrences: (
+ headword: string,
+ word: string,
+ reading: string,
+ limit?: number,
+ offset?: number,
+ ) => Promise;
+ getKanji: (limit?: number) => Promise;
+ getKanjiOccurrences: (
+ kanji: string,
+ limit?: number,
+ offset?: number,
+ ) => Promise;
+ getMediaLibrary: () => Promise;
+ getMediaDetail: (videoId: number) => Promise;
+ getAnimeLibrary: () => Promise;
+ getAnimeDetail: (animeId: number) => Promise;
+ getAnimeWords: (animeId: number, limit?: number) => Promise;
+ getAnimeRollups: (animeId: number, limit?: number) => Promise;
+ getAnimeCoverUrl: (animeId: number) => string;
+ getStreakCalendar: (days?: number) => Promise;
+ getEpisodesPerDay: (limit?: number) => Promise;
+ getNewAnimePerDay: (limit?: number) => Promise;
+ getWatchTimePerAnime: (limit?: number) => Promise;
+ getWordDetail: (wordId: number) => Promise;
+ getKanjiDetail: (kanjiId: number) => Promise;
+ getEpisodeDetail: (videoId: number) => Promise;
+ ankiBrowse: (noteId: number) => Promise;
+ ankiNotesInfo: (noteIds: number[]) => Promise }>>;
+ hideOverlay: () => void;
+ };
+}
+
+declare global {
+ interface Window {
+ electronAPI?: StatsElectronAPI;
+ }
+}
+
+function getIpc(): StatsElectronAPI['stats'] {
+ const api = window.electronAPI?.stats;
+ if (!api) throw new Error('Electron IPC not available');
+ return api;
+}
+
+export const ipcClient = {
+ getOverview: () => getIpc().getOverview(),
+ getDailyRollups: (limit = 60) => getIpc().getDailyRollups(limit),
+ getMonthlyRollups: (limit = 24) => getIpc().getMonthlyRollups(limit),
+ getSessions: (limit = 50) => getIpc().getSessions(limit),
+ getSessionTimeline: (id: number, limit = 200) => getIpc().getSessionTimeline(id, limit),
+ getSessionEvents: (id: number, limit = 500) => getIpc().getSessionEvents(id, limit),
+ getVocabulary: (limit = 100) => getIpc().getVocabulary(limit),
+ getWordOccurrences: (headword: string, word: string, reading: string, limit = 50, offset = 0) =>
+ getIpc().getWordOccurrences(headword, word, reading, limit, offset),
+ getKanji: (limit = 100) => getIpc().getKanji(limit),
+ getKanjiOccurrences: (kanji: string, limit = 50, offset = 0) =>
+ getIpc().getKanjiOccurrences(kanji, limit, offset),
+ getMediaLibrary: () => getIpc().getMediaLibrary(),
+ getMediaDetail: (videoId: number) => getIpc().getMediaDetail(videoId),
+ getAnimeLibrary: () => getIpc().getAnimeLibrary(),
+ getAnimeDetail: (animeId: number) => getIpc().getAnimeDetail(animeId),
+ getAnimeWords: (animeId: number, limit = 50) => getIpc().getAnimeWords(animeId, limit),
+ getAnimeRollups: (animeId: number, limit = 90) => getIpc().getAnimeRollups(animeId, limit),
+ getAnimeCoverUrl: (animeId: number) => getIpc().getAnimeCoverUrl(animeId),
+ getStreakCalendar: (days = 90) => getIpc().getStreakCalendar(days),
+ getEpisodesPerDay: (limit = 90) => getIpc().getEpisodesPerDay(limit),
+ getNewAnimePerDay: (limit = 90) => getIpc().getNewAnimePerDay(limit),
+ getWatchTimePerAnime: (limit = 90) => getIpc().getWatchTimePerAnime(limit),
+ getWordDetail: (wordId: number) => getIpc().getWordDetail(wordId),
+ getKanjiDetail: (kanjiId: number) => getIpc().getKanjiDetail(kanjiId),
+ getEpisodeDetail: (videoId: number) => getIpc().getEpisodeDetail(videoId),
+ ankiBrowse: (noteId: number) => getIpc().ankiBrowse(noteId),
+ ankiNotesInfo: (noteIds: number[]) => getIpc().ankiNotesInfo(noteIds),
+};
diff --git a/stats/src/main.tsx b/stats/src/main.tsx
new file mode 100644
index 0000000..2d20070
--- /dev/null
+++ b/stats/src/main.tsx
@@ -0,0 +1,18 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles/globals.css';
+
+const isOverlay = new URLSearchParams(window.location.search).has('overlay');
+if (isOverlay) {
+ document.body.classList.add('overlay-mode');
+}
+
+const root = document.getElementById('root');
+if (root) {
+ createRoot(root).render(
+
+
+ );
+}
diff --git a/stats/src/styles/globals.css b/stats/src/styles/globals.css
new file mode 100644
index 0000000..e2638fa
--- /dev/null
+++ b/stats/src/styles/globals.css
@@ -0,0 +1,41 @@
+@import "tailwindcss";
+
+@theme {
+ --color-ctp-base: #24273a;
+ --color-ctp-mantle: #1e2030;
+ --color-ctp-crust: #181926;
+ --color-ctp-surface0: #363a4f;
+ --color-ctp-surface1: #494d64;
+ --color-ctp-surface2: #5b6078;
+ --color-ctp-text: #cad3f5;
+ --color-ctp-subtext1: #b8c0e0;
+ --color-ctp-subtext0: #a5adcb;
+ --color-ctp-overlay2: #939ab7;
+ --color-ctp-overlay1: #8087a2;
+ --color-ctp-overlay0: #6e738d;
+ --color-ctp-blue: #8aadf4;
+ --color-ctp-green: #a6da95;
+ --color-ctp-mauve: #c6a0f6;
+ --color-ctp-peach: #f5a97f;
+ --color-ctp-red: #ed8796;
+ --color-ctp-yellow: #eed49f;
+ --color-ctp-teal: #8bd5ca;
+ --color-ctp-lavender: #b7bdf8;
+ --color-ctp-flamingo: #f0c6c6;
+ --color-ctp-rosewater: #f4dbd6;
+ --color-ctp-sky: #91d7e3;
+ --color-ctp-sapphire: #7dc4e4;
+ --color-ctp-maroon: #ee99a0;
+ --color-ctp-pink: #f5bde6;
+}
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+ background-color: var(--color-ctp-base);
+ color: var(--color-ctp-text);
+}
+
+body.overlay-mode {
+ background-color: rgba(36, 39, 58, 0.85);
+}
diff --git a/stats/src/types/stats.ts b/stats/src/types/stats.ts
new file mode 100644
index 0000000..1bcd3cf
--- /dev/null
+++ b/stats/src/types/stats.ts
@@ -0,0 +1,285 @@
+export interface SessionSummary {
+ sessionId: number;
+ canonicalTitle: string | null;
+ videoId: number | null;
+ animeId: number | null;
+ animeTitle: string | null;
+ startedAtMs: number;
+ endedAtMs: number | null;
+ totalWatchedMs: number;
+ activeWatchedMs: number;
+ linesSeen: number;
+ wordsSeen: number;
+ tokensSeen: number;
+ cardsMined: number;
+ lookupCount: number;
+ lookupHits: number;
+}
+
+export interface DailyRollup {
+ rollupDayOrMonth: number;
+ videoId: number | null;
+ totalSessions: number;
+ totalActiveMin: number;
+ totalLinesSeen: number;
+ totalWordsSeen: number;
+ totalTokensSeen: number;
+ totalCards: number;
+ cardsPerHour: number | null;
+ wordsPerMin: number | null;
+ lookupHitRate: number | null;
+}
+
+export type MonthlyRollup = DailyRollup;
+
+export interface SessionTimelinePoint {
+ sampleMs: number;
+ totalWatchedMs: number;
+ activeWatchedMs: number;
+ linesSeen: number;
+ wordsSeen: number;
+ tokensSeen: number;
+ cardsMined: number;
+}
+
+export interface SessionEvent {
+ eventType: EventType;
+ tsMs: number;
+ payload: string | null;
+}
+
+export interface VocabularyEntry {
+ wordId: number;
+ headword: string;
+ word: string;
+ reading: string;
+ partOfSpeech: string | null;
+ pos1: string | null;
+ pos2: string | null;
+ pos3: string | null;
+ frequency: number;
+ firstSeen: number;
+ lastSeen: number;
+}
+
+export interface KanjiEntry {
+ kanjiId: number;
+ kanji: string;
+ frequency: number;
+ firstSeen: number;
+ lastSeen: number;
+}
+
+export interface VocabularyOccurrenceEntry {
+ animeId: number | null;
+ animeTitle: string | null;
+ videoId: number;
+ videoTitle: string;
+ sessionId: number;
+ lineIndex: number;
+ segmentStartMs: number | null;
+ segmentEndMs: number | null;
+ text: string;
+ occurrenceCount: number;
+}
+
+export interface OverviewData {
+ sessions: SessionSummary[];
+ rollups: DailyRollup[];
+ hints: {
+ totalSessions: number;
+ activeSessions: number;
+ episodesToday: number;
+ activeAnimeCount: number;
+ };
+}
+
+export interface MediaLibraryItem {
+ videoId: number;
+ canonicalTitle: string;
+ totalSessions: number;
+ totalActiveMs: number;
+ totalCards: number;
+ totalWordsSeen: number;
+ lastWatchedMs: number;
+ hasCoverArt: number;
+}
+
+export interface MediaDetailData {
+ detail: {
+ videoId: number;
+ canonicalTitle: string;
+ totalSessions: number;
+ totalActiveMs: number;
+ totalCards: number;
+ totalWordsSeen: number;
+ totalLinesSeen: number;
+ totalLookupCount: number;
+ totalLookupHits: number;
+ } | null;
+ sessions: SessionSummary[];
+ rollups: DailyRollup[];
+}
+
+export const EventType = {
+ SUBTITLE_LINE: 1,
+ MEDIA_BUFFER: 2,
+ LOOKUP: 3,
+ CARD_MINED: 4,
+ SEEK_FORWARD: 5,
+ SEEK_BACKWARD: 6,
+ PAUSE_START: 7,
+ PAUSE_END: 8,
+} as const;
+
+export type EventType = (typeof EventType)[keyof typeof EventType];
+
+export interface AnimeLibraryItem {
+ animeId: number;
+ canonicalTitle: string;
+ anilistId: number | null;
+ totalSessions: number;
+ totalActiveMs: number;
+ totalCards: number;
+ totalWordsSeen: number;
+ episodeCount: number;
+ episodesTotal: number | null;
+ lastWatchedMs: number;
+}
+
+export interface AnilistEntry {
+ anilistId: number;
+ titleRomaji: string | null;
+ titleEnglish: string | null;
+ season: number | null;
+}
+
+export interface AnimeDetailData {
+ detail: {
+ animeId: number;
+ canonicalTitle: string;
+ anilistId: number | null;
+ titleRomaji: string | null;
+ titleEnglish: string | null;
+ titleNative: string | null;
+ totalSessions: number;
+ totalActiveMs: number;
+ totalCards: number;
+ totalWordsSeen: number;
+ totalLinesSeen: number;
+ totalLookupCount: number;
+ totalLookupHits: number;
+ episodeCount: number;
+ lastWatchedMs: number;
+ };
+ episodes: AnimeEpisode[];
+ anilistEntries: AnilistEntry[];
+}
+
+export interface AnimeEpisode {
+ videoId: number;
+ episode: number | null;
+ season: number | null;
+ durationMs: number;
+ watched: number;
+ canonicalTitle: string;
+ totalSessions: number;
+ totalActiveMs: number;
+ totalCards: number;
+ lastWatchedMs: number;
+}
+
+export interface AnimeWord {
+ wordId: number;
+ headword: string;
+ word: string;
+ reading: string;
+ partOfSpeech: string | null;
+ frequency: number;
+}
+
+export interface StreakCalendarDay {
+ epochDay: number;
+ totalActiveMin: number;
+}
+
+export interface EpisodesPerDay {
+ epochDay: number;
+ episodeCount: number;
+}
+
+export interface NewAnimePerDay {
+ epochDay: number;
+ newAnimeCount: number;
+}
+
+export interface WatchTimePerAnime {
+ epochDay: number;
+ animeId: number;
+ animeTitle: string;
+ totalActiveMin: number;
+}
+
+export interface WordDetailData {
+ detail: {
+ wordId: number;
+ headword: string;
+ word: string;
+ reading: string;
+ partOfSpeech: string | null;
+ pos1: string | null;
+ pos2: string | null;
+ pos3: string | null;
+ frequency: number;
+ firstSeen: number;
+ lastSeen: number;
+ };
+ animeAppearances: Array<{
+ animeId: number;
+ animeTitle: string;
+ occurrenceCount: number;
+ }>;
+ similarWords: Array<{
+ wordId: number;
+ headword: string;
+ word: string;
+ reading: string;
+ frequency: number;
+ }>;
+}
+
+export interface EpisodeCardEvent {
+ eventId: number;
+ sessionId: number;
+ tsMs: number;
+ cardsDelta: number;
+ noteIds: number[];
+}
+
+export interface EpisodeDetailData {
+ sessions: SessionSummary[];
+ words: AnimeWord[];
+ cardEvents: EpisodeCardEvent[];
+}
+
+export interface KanjiDetailData {
+ detail: {
+ kanjiId: number;
+ kanji: string;
+ frequency: number;
+ firstSeen: number;
+ lastSeen: number;
+ };
+ animeAppearances: Array<{
+ animeId: number;
+ animeTitle: string;
+ occurrenceCount: number;
+ }>;
+ words: Array<{
+ wordId: number;
+ headword: string;
+ word: string;
+ reading: string;
+ frequency: number;
+ }>;
+}
diff --git a/stats/tsconfig.json b/stats/tsconfig.json
new file mode 100644
index 0000000..1225539
--- /dev/null
+++ b/stats/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "jsx": "react-jsx",
+ "strict": true,
+ "noUncheckedIndexedAccess": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "outDir": "dist",
+ "rootDir": "src",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ }
+ },
+ "include": ["src"]
+}
diff --git a/stats/vite.config.ts b/stats/vite.config.ts
new file mode 100644
index 0000000..7fb4d95
--- /dev/null
+++ b/stats/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ base: './',
+ build: {
+ outDir: 'dist',
+ emptyOutDir: true,
+ },
+});
Activity (90 days)
+
+
+ );
+}
diff --git a/stats/src/components/overview/WatchTimeChart.tsx b/stats/src/components/overview/WatchTimeChart.tsx
new file mode 100644
index 0000000..aff9d70
--- /dev/null
+++ b/stats/src/components/overview/WatchTimeChart.tsx
@@ -0,0 +1,85 @@
+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 WatchTimeChartProps {
+ rollups: DailyRollup[];
+}
+
+type Range = 14 | 30 | 90;
+
+function formatActiveMinutes(value: number | string, _name?: string, _payload?: unknown) {
+ const minutes = Number(value);
+ return [`${Number.isFinite(minutes) ? minutes : 0} min`, 'Active Time'];
+}
+
+export function WatchTimeChart({ rollups }: WatchTimeChartProps) {
+ const [range, setRange] = useState
+ {DAY_LABELS.map((label, i) => (
+
+
+ {label}
+
+ ))}
+
+ {cells.map((cell) => (
+
+ {
+ const rect = e.currentTarget.getBoundingClientRect();
+ setTooltip({
+ x: rect.left + rect.width / 2,
+ y: rect.top - 4,
+ text: `${cell.date}: ${Math.round(cell.value * 100) / 100}m`,
+ });
+ }}
+ onMouseLeave={() => setTooltip(null)}
+ />
+ ))}
+
+ {tooltip && (
+
+ {tooltip.text}
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/stats/src/components/sessions/SessionDetail.tsx b/stats/src/components/sessions/SessionDetail.tsx
new file mode 100644
index 0000000..89b1cbf
--- /dev/null
+++ b/stats/src/components/sessions/SessionDetail.tsx
@@ -0,0 +1,121 @@
+import {
+ LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer,
+ ReferenceLine,
+} from 'recharts';
+import { useSessionDetail } from '../../hooks/useSessions';
+import { CHART_THEME } from '../../lib/chart-theme';
+import { EventType } from '../../types/stats';
+
+interface SessionDetailProps {
+ sessionId: number;
+ cardsMined: number;
+}
+
+const tooltipStyle = {
+ background: CHART_THEME.tooltipBg,
+ border: `1px solid ${CHART_THEME.tooltipBorder}`,
+ borderRadius: 6,
+ color: CHART_THEME.tooltipText,
+ fontSize: 11,
+};
+
+function formatTime(ms: number): string {
+ return new Date(ms).toLocaleTimeString(undefined, {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ });
+}
+
+const EVENT_COLORS: Partial
+
+ Watch Time
+
+ {ranges.map((r) => (
+
+ ))}
+
+ Loading timeline...
;
+ if (error) return Error: {error}
;
+
+ const chartData = [...timeline]
+ .reverse()
+ .map((t) => ({
+ tsMs: t.sampleMs,
+ time: formatTime(t.sampleMs),
+ words: t.wordsSeen,
+ cards: t.cardsMined,
+ }));
+
+ const pauseCount = events.filter((e) => e.eventType === EventType.PAUSE_START).length;
+ const seekCount = events.filter(
+ (e) => e.eventType === EventType.SEEK_FORWARD || e.eventType === EventType.SEEK_BACKWARD,
+ ).length;
+ const cardEventCount = events.filter((e) => e.eventType === EventType.CARD_MINED).length;
+
+ const markerEvents = events.filter((e) => EVENT_COLORS[e.eventType]);
+
+ return (
+
+ {chartData.length > 0 && (
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/stats/src/components/sessions/SessionRow.tsx b/stats/src/components/sessions/SessionRow.tsx
new file mode 100644
index 0000000..74f0886
--- /dev/null
+++ b/stats/src/components/sessions/SessionRow.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { BASE_URL } from '../../lib/api-client';
+import {
+ formatDuration,
+ formatRelativeDate,
+ formatNumber,
+} from '../../lib/formatters';
+import type { SessionSummary } from '../../types/stats';
+
+interface SessionRowProps {
+ session: SessionSummary;
+ isExpanded: boolean;
+ detailsId: string;
+ onToggle: () => void;
+}
+
+function CoverThumbnail({ videoId, title }: { videoId: number | null; title: string }) {
+ const [failed, setFailed] = useState(false);
+ const fallbackChar = title.charAt(0) || '?';
+
+ if (!videoId || failed) {
+ return (
+
+ {pauseCount} pause{pauseCount !== 1 ? 's' : ''}
+ {seekCount} seek{seekCount !== 1 ? 's' : ''}
+ {Math.max(cardEventCount, cardsMined)} card{Math.max(cardEventCount, cardsMined) !== 1 ? 's' : ''} mined
+
+
+ {markerEvents.length > 0 && (
+
+ {Object.entries(EVENT_COLORS).map(([type, cfg]) => {
+ if (!cfg) return null;
+ const count = markerEvents.filter((e) => e.eventType === Number(type)).length;
+ if (count === 0) return null;
+ return (
+
+
+ {cfg.label} ({count})
+
+ );
+ })}
+
+ )}
+
+ {fallbackChar}
+
+ );
+ }
+
+ return (
+ setFailed(true)}
+ />
+ );
+}
+
+export function SessionRow({ session, isExpanded, detailsId, onToggle }: SessionRowProps) {
+ return (
+
+ );
+}
diff --git a/stats/src/components/sessions/SessionsTab.tsx b/stats/src/components/sessions/SessionsTab.tsx
new file mode 100644
index 0000000..75f377a
--- /dev/null
+++ b/stats/src/components/sessions/SessionsTab.tsx
@@ -0,0 +1,99 @@
+import { useState, useMemo } from 'react';
+import { useSessions } from '../../hooks/useSessions';
+import { SessionRow } from './SessionRow';
+import { SessionDetail } from './SessionDetail';
+import { todayLocalDay, localDayFromMs } from '../../lib/formatters';
+import type { SessionSummary } from '../../types/stats';
+
+function groupSessionsByDay(sessions: SessionSummary[]): MapLoading...
;
+ if (error) return Error: {error}
;
+
+ return (
+
+ setSearch(e.target.value)}
+ className="w-full 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"
+ />
+
+ {Array.from(groups.entries()).map(([dayLabel, daySessions]) => (
+
+ );
+}
diff --git a/stats/src/components/trends/DateRangeSelector.tsx b/stats/src/components/trends/DateRangeSelector.tsx
new file mode 100644
index 0000000..ba66f79
--- /dev/null
+++ b/stats/src/components/trends/DateRangeSelector.tsx
@@ -0,0 +1,58 @@
+import type { TimeRange, GroupBy } from '../../hooks/useTrends';
+
+interface DateRangeSelectorProps {
+ range: TimeRange;
+ groupBy: GroupBy;
+ onRangeChange: (r: TimeRange) => void;
+ onGroupByChange: (g: GroupBy) => void;
+}
+
+export function DateRangeSelector({
+ range,
+ groupBy,
+ onRangeChange,
+ onGroupByChange,
+}: DateRangeSelectorProps) {
+ const ranges: TimeRange[] = ['7d', '30d', '90d', 'all'];
+ const groups: GroupBy[] = ['day', 'month'];
+
+ return (
+
+
+ ))}
+
+ {filtered.length === 0 && (
+ + {dayLabel} +
+
+ {daySessions.map((s) => {
+ const detailsId = `session-details-${s.sessionId}`;
+ return (
+
+
+ setExpandedId(expandedId === s.sessionId ? null : s.sessionId)}
+ />
+ {expandedId === s.sessionId && (
+
+ );
+ })}
+
+
+ )}
+
+ {search.trim() ? 'No sessions matching your search.' : 'No sessions recorded yet.'}
+
+ )}
+
+
+ );
+}
diff --git a/stats/src/components/trends/StackedTrendChart.tsx b/stats/src/components/trends/StackedTrendChart.tsx
new file mode 100644
index 0000000..59bd25f
--- /dev/null
+++ b/stats/src/components/trends/StackedTrendChart.tsx
@@ -0,0 +1,100 @@
+import {
+ LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer,
+} from 'recharts';
+import { epochDayToDate } from '../../lib/formatters';
+
+export interface PerAnimeDataPoint {
+ epochDay: number;
+ animeTitle: string;
+ value: number;
+}
+
+interface StackedTrendChartProps {
+ title: string;
+ data: PerAnimeDataPoint[];
+}
+
+const LINE_COLORS = [
+ '#8aadf4', '#c6a0f6', '#a6da95', '#f5a97f', '#f5bde6',
+ '#91d7e3', '#ee99a0', '#f4dbd6',
+];
+
+function buildLineData(raw: PerAnimeDataPoint[]) {
+ const totalByAnime = new Map
+ Range
+ {ranges.map((r) => (
+
+ ))}
+
+ {'\u00B7'}
+
+ Group by
+ {groups.map((g) => (
+
+ ))}
+
+
+
+ );
+ }
+
+ return (
+ {title}
+No data
+
+
+
+
+
+
+ );
+}
diff --git a/stats/src/components/trends/TrendChart.tsx b/stats/src/components/trends/TrendChart.tsx
new file mode 100644
index 0000000..4a7862e
--- /dev/null
+++ b/stats/src/components/trends/TrendChart.tsx
@@ -0,0 +1,43 @@
+import {
+ BarChart, Bar, LineChart, Line,
+ XAxis, YAxis, Tooltip, ResponsiveContainer,
+} from 'recharts';
+
+interface TrendChartProps {
+ title: string;
+ data: Array<{ label: string; value: number }>;
+ color: string;
+ type: 'bar' | 'line';
+ formatter?: (value: number) => string;
+}
+
+export function TrendChart({ title, data, color, type, formatter }: TrendChartProps) {
+ const tooltipStyle = {
+ background: '#363a4f', border: '1px solid #494d64', borderRadius: 6, color: '#cad3f5', fontSize: 12,
+ };
+
+ const formatValue = (v: number) => formatter ? [formatter(v), title] : [String(v), title];
+
+ return (
+ {title}
+
+ {seriesKeys.map((key, i) => (
+
+
+ {key}
+
+ ))}
+
+
+
+ {type === 'bar' ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ );
+}
diff --git a/stats/src/components/trends/TrendsTab.tsx b/stats/src/components/trends/TrendsTab.tsx
new file mode 100644
index 0000000..276ad3c
--- /dev/null
+++ b/stats/src/components/trends/TrendsTab.tsx
@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { useTrends, type TimeRange, type GroupBy } from '../../hooks/useTrends';
+import { DateRangeSelector } from './DateRangeSelector';
+import { TrendChart } from './TrendChart';
+import { StackedTrendChart, type PerAnimeDataPoint } from './StackedTrendChart';
+import { buildTrendDashboard, type ChartPoint } from '../../lib/dashboard-data';
+import { localDayFromMs } from '../../lib/formatters';
+import type { SessionSummary } from '../../types/stats';
+
+const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+function buildWatchTimeByDayOfWeek(sessions: SessionSummary[]): ChartPoint[] {
+ const totals = new Array(7).fill(0);
+ for (const s of sessions) {
+ const dow = new Date(s.startedAtMs).getDay();
+ totals[dow] += s.activeWatchedMs;
+ }
+ return DAY_NAMES.map((name, i) => ({ label: name, value: Math.round(totals[i] / 60_000) }));
+}
+
+function buildWatchTimeByHour(sessions: SessionSummary[]): ChartPoint[] {
+ const totals = new Array(24).fill(0);
+ for (const s of sessions) {
+ const hour = new Date(s.startedAtMs).getHours();
+ totals[hour] += s.activeWatchedMs;
+ }
+ return totals.map((ms, i) => ({
+ label: `${String(i).padStart(2, '0')}:00`,
+ value: Math.round(ms / 60_000),
+ }));
+}
+
+function buildCumulativePerAnime(points: PerAnimeDataPoint[]): PerAnimeDataPoint[] {
+ const byAnime = new Map{title}
++ {children} +
+ ); +} + +export function TrendsTab() { + const [range, setRange] = useStateLoading...
;
+ if (error) return Error: {error}
;
+
+ const dashboard = buildTrendDashboard(data.rollups);
+ const watchByDow = buildWatchTimeByDayOfWeek(data.sessions);
+ const watchByHour = buildWatchTimeByHour(data.sessions);
+
+ const watchTimePerAnime = data.watchTimePerAnime.map((e) => ({
+ epochDay: e.epochDay, animeTitle: e.animeTitle, value: e.totalActiveMin,
+ }));
+ const episodesPerAnime = buildEpisodesPerAnimeFromSessions(data.sessions);
+ const cardsPerAnime = buildPerAnimeFromSessions(data.sessions, (s) => s.cardsMined);
+ const wordsPerAnime = buildPerAnimeFromSessions(data.sessions, (s) => s.wordsSeen);
+
+ const animeProgress = buildCumulativePerAnime(episodesPerAnime);
+
+ return (
+
+
+ );
+}
diff --git a/stats/src/components/vocabulary/KanjiBreakdown.tsx b/stats/src/components/vocabulary/KanjiBreakdown.tsx
new file mode 100644
index 0000000..68095d3
--- /dev/null
+++ b/stats/src/components/vocabulary/KanjiBreakdown.tsx
@@ -0,0 +1,46 @@
+import type { KanjiEntry } from '../../types/stats';
+
+interface KanjiBreakdownProps {
+ kanji: KanjiEntry[];
+ selectedKanjiId?: number | null;
+ onSelectKanji?: (entry: KanjiEntry) => void;
+}
+
+export function KanjiBreakdown({
+ kanji,
+ selectedKanjiId = null,
+ onSelectKanji,
+}: KanjiBreakdownProps) {
+ if (kanji.length === 0) return null;
+
+ const maxFreq = kanji.reduce((max, entry) => Math.max(max, entry.frequency), 1);
+
+ return (
+
+ Activity
+ Efficiency
+ Anime
+ Patterns
+
+
+
+ );
+}
diff --git a/stats/src/components/vocabulary/KanjiDetailPanel.tsx b/stats/src/components/vocabulary/KanjiDetailPanel.tsx
new file mode 100644
index 0000000..a386ab0
--- /dev/null
+++ b/stats/src/components/vocabulary/KanjiDetailPanel.tsx
@@ -0,0 +1,232 @@
+import { useRef, useState } from 'react';
+import { useKanjiDetail } from '../../hooks/useKanjiDetail';
+import { apiClient } from '../../lib/api-client';
+import { formatNumber, formatRelativeDate } from '../../lib/formatters';
+import type { VocabularyOccurrenceEntry } from '../../types/stats';
+
+const OCCURRENCES_PAGE_SIZE = 50;
+
+interface KanjiDetailPanelProps {
+ kanjiId: number | null;
+ onClose: () => void;
+ onSelectWord?: (wordId: number) => void;
+ onNavigateToAnime?: (animeId: number) => void;
+}
+
+function formatSegment(ms: number | null): string {
+ if (ms == null || !Number.isFinite(ms)) return '--:--';
+ const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}
+
+export function KanjiDetailPanel({ kanjiId, onClose, onSelectWord, onNavigateToAnime }: KanjiDetailPanelProps) {
+ const { data, loading, error } = useKanjiDetail(kanjiId);
+ const [occurrences, setOccurrences] = useStateKanji Encountered
+
+ {kanji.map((k) => {
+ const ratio = k.frequency / maxFreq;
+ const opacity = Math.max(0.3, ratio);
+ return (
+
+ );
+ })}
+
+
+
+
+
+ );
+}
diff --git a/stats/src/components/vocabulary/VocabularyOccurrencesDrawer.tsx b/stats/src/components/vocabulary/VocabularyOccurrencesDrawer.tsx
new file mode 100644
index 0000000..26a320c
--- /dev/null
+++ b/stats/src/components/vocabulary/VocabularyOccurrencesDrawer.tsx
@@ -0,0 +1,149 @@
+import type { KanjiEntry, VocabularyEntry, VocabularyOccurrenceEntry } from '../../types/stats';
+import { formatNumber } from '../../lib/formatters';
+
+type VocabularyDrawerTarget =
+ | {
+ kind: 'word';
+ entry: VocabularyEntry;
+ }
+ | {
+ kind: 'kanji';
+ entry: KanjiEntry;
+ };
+
+interface VocabularyOccurrencesDrawerProps {
+ target: VocabularyDrawerTarget | null;
+ occurrences: VocabularyOccurrenceEntry[];
+ loading: boolean;
+ loadingMore: boolean;
+ error: string | null;
+ hasMore: boolean;
+ onClose: () => void;
+ onLoadMore: () => void;
+}
+
+function formatSegment(ms: number | null): string {
+ if (ms == null || !Number.isFinite(ms)) return '--:--';
+ const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}
+
+function renderTitle(target: VocabularyDrawerTarget): string {
+ return target.kind === 'word' ? target.entry.headword : target.entry.kanji;
+}
+
+function renderSubtitle(target: VocabularyDrawerTarget): string {
+ if (target.kind === 'word') {
+ return target.entry.reading || target.entry.word;
+ }
+ return `${formatNumber(target.entry.frequency)} seen`;
+}
+
+function renderFrequency(target: VocabularyDrawerTarget): string {
+ return `${formatNumber(target.entry.frequency)} total`;
+}
+
+export function VocabularyOccurrencesDrawer({
+ target,
+ occurrences,
+ loading,
+ loadingMore,
+ error,
+ hasMore,
+ onClose,
+ onLoadMore,
+}: VocabularyOccurrencesDrawerProps) {
+ if (!target) return null;
+
+ return (
+
+
+
+
+ );
+}
+
+export type { VocabularyDrawerTarget };
diff --git a/stats/src/components/vocabulary/VocabularyTab.tsx b/stats/src/components/vocabulary/VocabularyTab.tsx
new file mode 100644
index 0000000..a8602a7
--- /dev/null
+++ b/stats/src/components/vocabulary/VocabularyTab.tsx
@@ -0,0 +1,109 @@
+import { useMemo, useState } from 'react';
+import { useVocabulary } from '../../hooks/useVocabulary';
+import { StatCard } from '../layout/StatCard';
+import { WordList } from './WordList';
+import { KanjiBreakdown } from './KanjiBreakdown';
+import { KanjiDetailPanel } from './KanjiDetailPanel';
+import { formatNumber } from '../../lib/formatters';
+import { TrendChart } from '../trends/TrendChart';
+import { buildVocabularySummary } from '../../lib/dashboard-data';
+import { isFilterable } from './pos-helpers';
+import type { KanjiEntry, VocabularyEntry } from '../../types/stats';
+
+interface VocabularyTabProps {
+ onNavigateToAnime?: (animeId: number) => void;
+ onOpenWordDetail?: (wordId: number) => void;
+}
+
+export function VocabularyTab({ onNavigateToAnime, onOpenWordDetail }: VocabularyTabProps) {
+ const { words, kanji, loading, error } = useVocabulary();
+ const [selectedKanjiId, setSelectedKanjiId] = useStateLoading...
;
+ if (error) return Error: {error}
;
+
+ const summary = buildVocabularySummary(filteredWords, kanji);
+
+ const handleSelectWord = (entry: VocabularyEntry): void => {
+ onOpenWordDetail?.(entry.wordId);
+ };
+
+ const openKanjiDetail = (entry: KanjiEntry): void => {
+ setSelectedKanjiId(entry.kanjiId);
+ };
+
+ return (
+
+ setSelectedKanjiId(null)}
+ onSelectWord={onOpenWordDetail}
+ onNavigateToAnime={onNavigateToAnime}
+ />
+
+ );
+}
diff --git a/stats/src/components/vocabulary/WordDetailPanel.tsx b/stats/src/components/vocabulary/WordDetailPanel.tsx
new file mode 100644
index 0000000..9536a3f
--- /dev/null
+++ b/stats/src/components/vocabulary/WordDetailPanel.tsx
@@ -0,0 +1,246 @@
+import { useRef, useState } from 'react';
+import { useWordDetail } from '../../hooks/useWordDetail';
+import { apiClient } from '../../lib/api-client';
+import { formatNumber, formatRelativeDate } from '../../lib/formatters';
+import type { VocabularyOccurrenceEntry } from '../../types/stats';
+import { PosBadge } from './pos-helpers';
+
+const OCCURRENCES_PAGE_SIZE = 50;
+
+interface WordDetailPanelProps {
+ wordId: number | null;
+ onClose: () => void;
+ onSelectWord?: (wordId: number) => void;
+ onNavigateToAnime?: (animeId: number) => void;
+}
+
+function formatSegment(ms: number | null): string {
+ if (ms == null || !Number.isFinite(ms)) return '--:--';
+ const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}
+
+export function WordDetailPanel({ wordId, onClose, onSelectWord, onNavigateToAnime }: WordDetailPanelProps) {
+ const { data, loading, error } = useWordDetail(wordId);
+ const [occurrences, setOccurrences] = useState
+
+
+
+
+ setSearch(e.target.value)}
+ placeholder="Search words..."
+ className="rounded border border-ctp-surface2 bg-ctp-surface1 px-3 py-1 text-xs text-ctp-text placeholder:text-ctp-overlay0 focus:border-ctp-blue focus:outline-none focus:ring-1 focus:ring-ctp-blue"
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/stats/src/components/vocabulary/WordList.tsx b/stats/src/components/vocabulary/WordList.tsx
new file mode 100644
index 0000000..8d2a686
--- /dev/null
+++ b/stats/src/components/vocabulary/WordList.tsx
@@ -0,0 +1,126 @@
+import { useMemo, useState } from 'react';
+import type { VocabularyEntry } from '../../types/stats';
+import { PosBadge } from './pos-helpers';
+
+interface WordListProps {
+ words: VocabularyEntry[];
+ selectedKey?: string | null;
+ onSelectWord?: (word: VocabularyEntry) => void;
+ search?: string;
+}
+
+type SortKey = 'frequency' | 'lastSeen' | 'firstSeen';
+
+function toWordKey(word: VocabularyEntry): string {
+ return `${word.headword}\u0000${word.word}\u0000${word.reading}`;
+}
+
+const PAGE_SIZE = 100;
+
+export function WordList({ words, selectedKey = null, onSelectWord, search = '' }: WordListProps) {
+ const [sortBy, setSortBy] = useState
+
+ );
+}
+
+export { toWordKey };
diff --git a/stats/src/components/vocabulary/pos-helpers.tsx b/stats/src/components/vocabulary/pos-helpers.tsx
new file mode 100644
index 0000000..604e098
--- /dev/null
+++ b/stats/src/components/vocabulary/pos-helpers.tsx
@@ -0,0 +1,37 @@
+import type { VocabularyEntry } from '../../types/stats';
+
+const POS_COLORS: Record
+
+ + {titleBySort[sortBy]} + {search && ({filtered.length} matches)} +
+ +
+ {paged.map((w) => (
+
+ ))}
+
+ {totalPages > 1 && (
+
+
+
+ {page + 1} / {totalPages}
+
+
+
+ )}
+