feat(stats): add v1 immersion stats dashboard (#19)

stats/src/components/sessions/SessionDetail.tsx

@@ -0,0 +1,827 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AreaChart,
+  Area,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceArea,
+  ReferenceLine,
+  CartesianGrid,
+  Customized,
+} from 'recharts';
+import { useSessionDetail } from '../../hooks/useSessions';
+import { getStatsClient } from '../../hooks/useStatsApi';
+import type { KnownWordsTimelinePoint } from '../../hooks/useSessions';
+import { CHART_THEME } from '../../lib/chart-theme';
+import {
+  buildSessionChartEvents,
+  collectPendingSessionEventNoteIds,
+  getSessionEventCardRequest,
+  mergeSessionEventNoteInfos,
+  resolveActiveSessionMarkerKey,
+  type SessionChartMarker,
+  type SessionEventNoteInfo,
+  type SessionChartPlotArea,
+} from '../../lib/session-events';
+import { buildLookupRateDisplay } from '../../lib/yomitan-lookup';
+import { getSessionDisplayWordCount } from '../../lib/session-word-count';
+import { EventType } from '../../types/stats';
+import type { SessionEvent, SessionSummary } from '../../types/stats';
+import { SessionEventOverlay } from './SessionEventOverlay';
+
+interface SessionDetailProps {
+  session: SessionSummary;
+}
+
+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',
+  });
+}
+
+/** Build a lookup: linesSeen → knownWordsSeen */
+function buildKnownWordsLookup(knownWordsTimeline: KnownWordsTimelinePoint[]): Map<number, number> {
+  const map = new Map<number, number>();
+  for (const pt of knownWordsTimeline) {
+    map.set(pt.linesSeen, pt.knownWordsSeen);
+  }
+  return map;
+}
+
+/** For a given linesSeen value, find the closest known words count (floor lookup). */
+function lookupKnownWords(map: Map<number, number>, linesSeen: number): number {
+  if (map.size === 0) return 0;
+  if (map.has(linesSeen)) return map.get(linesSeen)!;
+  let best = 0;
+  for (const k of map.keys()) {
+    if (k <= linesSeen && k > best) {
+      best = k;
+    }
+  }
+  return best > 0 ? map.get(best)! : 0;
+}
+
+interface RatioChartPoint {
+  tsMs: number;
+  knownWords: number;
+  unknownWords: number;
+  totalWords: number;
+}
+
+interface FallbackChartPoint {
+  tsMs: number;
+  totalWords: number;
+}
+
+type TimelineEntry = {
+  sampleMs: number;
+  linesSeen: number;
+  tokensSeen: number;
+};
+
+function SessionChartOffsetProbe({
+  offset,
+  onPlotAreaChange,
+}: {
+  offset?: { left?: number; width?: number };
+  onPlotAreaChange: (plotArea: SessionChartPlotArea) => void;
+}) {
+  useEffect(() => {
+    if (!offset) return;
+    const { left, width } = offset;
+    if (typeof left !== 'number' || !Number.isFinite(left)) return;
+    if (typeof width !== 'number' || !Number.isFinite(width)) return;
+    onPlotAreaChange({ left, width });
+  }, [offset?.left, offset?.width, onPlotAreaChange]);
+
+  return null;
+}
+
+export function SessionDetail({ session }: SessionDetailProps) {
+  const { timeline, events, knownWordsTimeline, loading, error } = useSessionDetail(
+    session.sessionId,
+  );
+  const [hoveredMarkerKey, setHoveredMarkerKey] = useState<string | null>(null);
+  const [pinnedMarkerKey, setPinnedMarkerKey] = useState<string | null>(null);
+  const [noteInfos, setNoteInfos] = useState<Map<number, SessionEventNoteInfo>>(new Map());
+  const [loadingNoteIds, setLoadingNoteIds] = useState<Set<number>>(new Set());
+  const pendingNoteIdsRef = useRef<Set<number>>(new Set());
+
+  const sorted = [...timeline].reverse();
+  const knownWordsMap = buildKnownWordsLookup(knownWordsTimeline);
+  const hasKnownWords = knownWordsMap.size > 0;
+
+  const { cardEvents, seekEvents, yomitanLookupEvents, pauseRegions, markers } =
+    buildSessionChartEvents(events);
+  const lookupRate = buildLookupRateDisplay(
+    session.yomitanLookupCount,
+    getSessionDisplayWordCount(session),
+  );
+  const pauseCount = events.filter((e) => e.eventType === EventType.PAUSE_START).length;
+  const seekCount = seekEvents.length;
+  const cardEventCount = cardEvents.length;
+  const activeMarkerKey = resolveActiveSessionMarkerKey(hoveredMarkerKey, pinnedMarkerKey);
+  const activeMarker = useMemo<SessionChartMarker | null>(
+    () => markers.find((marker) => marker.key === activeMarkerKey) ?? null,
+    [markers, activeMarkerKey],
+  );
+  const activeCardRequest = useMemo(
+    () => getSessionEventCardRequest(activeMarker),
+    [activeMarkerKey, markers],
+  );
+
+  useEffect(() => {
+    if (!activeCardRequest.requestKey || activeCardRequest.noteIds.length === 0) {
+      return;
+    }
+
+    const missingNoteIds = collectPendingSessionEventNoteIds(
+      activeCardRequest.noteIds,
+      noteInfos,
+      pendingNoteIdsRef.current,
+    );
+    if (missingNoteIds.length === 0) {
+      return;
+    }
+
+    for (const noteId of missingNoteIds) {
+      pendingNoteIdsRef.current.add(noteId);
+    }
+
+    let cancelled = false;
+    setLoadingNoteIds((prev) => {
+      const next = new Set(prev);
+      for (const noteId of missingNoteIds) {
+        next.add(noteId);
+      }
+      return next;
+    });
+
+    getStatsClient()
+      .ankiNotesInfo(missingNoteIds)
+      .then((notes) => {
+        if (cancelled) return;
+        setNoteInfos((prev) => {
+          const next = new Map(prev);
+          for (const [noteId, info] of mergeSessionEventNoteInfos(missingNoteIds, notes)) {
+            next.set(noteId, info);
+          }
+          return next;
+        });
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          console.warn('Failed to fetch session event Anki note info:', err);
+        }
+      })
+      .finally(() => {
+        if (cancelled) return;
+        for (const noteId of missingNoteIds) {
+          pendingNoteIdsRef.current.delete(noteId);
+        }
+        setLoadingNoteIds((prev) => {
+          const next = new Set(prev);
+          for (const noteId of missingNoteIds) {
+            next.delete(noteId);
+          }
+          return next;
+        });
+      });
+
+    return () => {
+      cancelled = true;
+      for (const noteId of missingNoteIds) {
+        pendingNoteIdsRef.current.delete(noteId);
+      }
+      setLoadingNoteIds((prev) => {
+        const next = new Set(prev);
+        for (const noteId of missingNoteIds) {
+          next.delete(noteId);
+        }
+        return next;
+      });
+    };
+  }, [activeCardRequest.requestKey, noteInfos]);
+
+  const handleOpenNote = (noteId: number) => {
+    void getStatsClient().ankiBrowse(noteId);
+  };
+
+  if (loading) return <div className="text-ctp-overlay2 text-xs p-2">Loading timeline...</div>;
+  if (error) return <div className="text-ctp-red text-xs p-2">Error: {error}</div>;
+
+  if (hasKnownWords) {
+    return (
+      <RatioView
+        sorted={sorted}
+        knownWordsMap={knownWordsMap}
+        cardEvents={cardEvents}
+        seekEvents={seekEvents}
+        yomitanLookupEvents={yomitanLookupEvents}
+        pauseRegions={pauseRegions}
+        markers={markers}
+        hoveredMarkerKey={hoveredMarkerKey}
+        onHoveredMarkerChange={setHoveredMarkerKey}
+        pinnedMarkerKey={pinnedMarkerKey}
+        onPinnedMarkerChange={setPinnedMarkerKey}
+        noteInfos={noteInfos}
+        loadingNoteIds={loadingNoteIds}
+        onOpenNote={handleOpenNote}
+        pauseCount={pauseCount}
+        seekCount={seekCount}
+        cardEventCount={cardEventCount}
+        lookupRate={lookupRate}
+        session={session}
+      />
+    );
+  }
+
+  return (
+    <FallbackView
+      sorted={sorted}
+      cardEvents={cardEvents}
+      seekEvents={seekEvents}
+      yomitanLookupEvents={yomitanLookupEvents}
+      pauseRegions={pauseRegions}
+      markers={markers}
+      hoveredMarkerKey={hoveredMarkerKey}
+      onHoveredMarkerChange={setHoveredMarkerKey}
+      pinnedMarkerKey={pinnedMarkerKey}
+      onPinnedMarkerChange={setPinnedMarkerKey}
+      noteInfos={noteInfos}
+      loadingNoteIds={loadingNoteIds}
+      onOpenNote={handleOpenNote}
+      pauseCount={pauseCount}
+      seekCount={seekCount}
+      cardEventCount={cardEventCount}
+      lookupRate={lookupRate}
+      session={session}
+    />
+  );
+}
+
+/* ── Ratio View (primary design) ────────────────────────────────── */
+
+function RatioView({
+  sorted,
+  knownWordsMap,
+  cardEvents,
+  seekEvents,
+  yomitanLookupEvents,
+  pauseRegions,
+  markers,
+  hoveredMarkerKey,
+  onHoveredMarkerChange,
+  pinnedMarkerKey,
+  onPinnedMarkerChange,
+  noteInfos,
+  loadingNoteIds,
+  onOpenNote,
+  pauseCount,
+  seekCount,
+  cardEventCount,
+  lookupRate,
+  session,
+}: {
+  sorted: TimelineEntry[];
+  knownWordsMap: Map<number, number>;
+  cardEvents: SessionEvent[];
+  seekEvents: SessionEvent[];
+  yomitanLookupEvents: SessionEvent[];
+  pauseRegions: Array<{ startMs: number; endMs: number }>;
+  markers: SessionChartMarker[];
+  hoveredMarkerKey: string | null;
+  onHoveredMarkerChange: (markerKey: string | null) => void;
+  pinnedMarkerKey: string | null;
+  onPinnedMarkerChange: (markerKey: string | null) => void;
+  noteInfos: Map<number, SessionEventNoteInfo>;
+  loadingNoteIds: Set<number>;
+  onOpenNote: (noteId: number) => void;
+  pauseCount: number;
+  seekCount: number;
+  cardEventCount: number;
+  lookupRate: ReturnType<typeof buildLookupRateDisplay>;
+  session: SessionSummary;
+}) {
+  const [plotArea, setPlotArea] = useState<SessionChartPlotArea | null>(null);
+  const chartData: RatioChartPoint[] = [];
+  for (const t of sorted) {
+    const totalWords = getSessionDisplayWordCount(t);
+    if (totalWords === 0) continue;
+    const knownWords = Math.min(lookupKnownWords(knownWordsMap, t.linesSeen), totalWords);
+    const unknownWords = totalWords - knownWords;
+    chartData.push({
+      tsMs: t.sampleMs,
+      knownWords,
+      unknownWords,
+      totalWords,
+    });
+  }
+
+  if (chartData.length === 0) {
+    return <div className="text-ctp-overlay2 text-xs p-2">No word data for this session.</div>;
+  }
+
+  const tsMin = chartData[0]!.tsMs;
+  const tsMax = chartData[chartData.length - 1]!.tsMs;
+  const finalTotal = chartData[chartData.length - 1]!.totalWords;
+
+  const sparkData = chartData.map((d) => ({ tsMs: d.tsMs, totalWords: d.totalWords }));
+
+  return (
+    <div className="bg-ctp-mantle border border-ctp-surface1 rounded-lg p-3 mt-1 space-y-1">
+      {/* ── Top: Percentage area chart ── */}
+      <div className="relative">
+        <ResponsiveContainer width="100%" height={130}>
+          <AreaChart data={chartData}>
+            <Customized
+              component={
+                <SessionChartOffsetProbe
+                  onPlotAreaChange={(nextPlotArea) => {
+                    setPlotArea((prevPlotArea) =>
+                      prevPlotArea &&
+                      prevPlotArea.left === nextPlotArea.left &&
+                      prevPlotArea.width === nextPlotArea.width
+                        ? prevPlotArea
+                        : nextPlotArea,
+                    );
+                  }}
+                />
+              }
+            />
+            <defs>
+              <linearGradient id={`knownGrad-${session.sessionId}`} x1="0" y1="1" x2="0" y2="0">
+                <stop offset="0%" stopColor="#a6da95" stopOpacity={0.4} />
+                <stop offset="100%" stopColor="#a6da95" stopOpacity={0.15} />
+              </linearGradient>
+              <linearGradient id={`unknownGrad-${session.sessionId}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#c6a0f6" stopOpacity={0.25} />
+                <stop offset="100%" stopColor="#c6a0f6" stopOpacity={0.08} />
+              </linearGradient>
+            </defs>
+
+            <CartesianGrid
+              horizontal
+              vertical={false}
+              stroke="#494d64"
+              strokeDasharray="4 4"
+              strokeOpacity={0.4}
+            />
+
+            <XAxis
+              dataKey="tsMs"
+              type="number"
+              domain={[tsMin, tsMax]}
+              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
+              axisLine={false}
+              tickLine={false}
+              tickFormatter={formatTime}
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              yAxisId="pct"
+              orientation="right"
+              domain={[0, finalTotal]}
+              allowDataOverflow
+              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
+              tickFormatter={(v: number) => `${v.toLocaleString()}`}
+              axisLine={false}
+              tickLine={false}
+              width={32}
+            />
+
+            <Tooltip
+              contentStyle={tooltipStyle}
+              labelFormatter={formatTime}
+              formatter={(_value: number, name: string, props: { payload?: RatioChartPoint }) => {
+                const d = props.payload;
+                if (!d) return [_value, name];
+                if (name === 'Known words') {
+                  const knownPct = d.totalWords === 0 ? 0 : (d.knownWords / d.totalWords) * 100;
+                  return [`${d.knownWords.toLocaleString()} (${knownPct.toFixed(1)}%)`, name];
+                }
+                if (name === 'Unknown words') return [d.unknownWords.toLocaleString(), name];
+                return [_value, name];
+              }}
+              itemSorter={() => -1}
+            />
+
+            {/* Pause shaded regions */}
+            {pauseRegions.map((r, i) => (
+              <ReferenceArea
+                key={`pause-${i}`}
+                yAxisId="pct"
+                x1={r.startMs}
+                x2={r.endMs}
+                y1={0}
+                y2={finalTotal}
+                fill="#f5a97f"
+                fillOpacity={0.15}
+                stroke="#f5a97f"
+                strokeOpacity={0.4}
+                strokeDasharray="3 3"
+                strokeWidth={1}
+              />
+            ))}
+
+            {/* Card mine markers */}
+            {cardEvents.map((e, i) => (
+              <ReferenceLine
+                key={`card-${i}`}
+                yAxisId="pct"
+                x={e.tsMs}
+                stroke="#a6da95"
+                strokeWidth={2}
+                strokeOpacity={0.8}
+              />
+            ))}
+
+            {seekEvents.map((e, i) => {
+              const isBackward = e.eventType === EventType.SEEK_BACKWARD;
+              const stroke = isBackward ? '#f5bde6' : '#8bd5ca';
+              return (
+                <ReferenceLine
+                  key={`seek-${i}`}
+                  yAxisId="pct"
+                  x={e.tsMs}
+                  stroke={stroke}
+                  strokeWidth={1.5}
+                  strokeOpacity={0.75}
+                  strokeDasharray="4 3"
+                />
+              );
+            })}
+
+            {/* Yomitan lookup markers */}
+            {yomitanLookupEvents.map((e, i) => (
+              <ReferenceLine
+                key={`yomitan-${i}`}
+                yAxisId="pct"
+                x={e.tsMs}
+                stroke="#b7bdf8"
+                strokeWidth={1.5}
+                strokeDasharray="2 3"
+                strokeOpacity={0.7}
+              />
+            ))}
+
+            <Area
+              yAxisId="pct"
+              dataKey="knownWords"
+              stackId="ratio"
+              stroke="#a6da95"
+              strokeWidth={1.5}
+              fill={`url(#knownGrad-${session.sessionId})`}
+              name="Known words"
+              type="monotone"
+              dot={false}
+              activeDot={{ r: 3, fill: '#a6da95', stroke: '#1e2030', strokeWidth: 1 }}
+              isAnimationActive={false}
+            />
+            <Area
+              yAxisId="pct"
+              dataKey="unknownWords"
+              stackId="ratio"
+              stroke="#c6a0f6"
+              strokeWidth={0}
+              fill={`url(#unknownGrad-${session.sessionId})`}
+              name="Unknown words"
+              type="monotone"
+              isAnimationActive={false}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+        <SessionEventOverlay
+          markers={markers}
+          tsMin={tsMin}
+          tsMax={tsMax}
+          plotArea={plotArea}
+          hoveredMarkerKey={hoveredMarkerKey}
+          onHoveredMarkerChange={onHoveredMarkerChange}
+          pinnedMarkerKey={pinnedMarkerKey}
+          onPinnedMarkerChange={onPinnedMarkerChange}
+          noteInfos={noteInfos}
+          loadingNoteIds={loadingNoteIds}
+          onOpenNote={onOpenNote}
+        />
+      </div>
+
+      {/* ── Bottom: Token accumulation sparkline ── */}
+      <div className="flex items-center gap-2 border-t border-ctp-surface1 pt-1">
+        <span className="text-[9px] text-ctp-overlay0 whitespace-nowrap">total words</span>
+        <div className="flex-1 h-[28px]">
+          <ResponsiveContainer width="100%" height={28}>
+            <LineChart data={sparkData}>
+              <XAxis dataKey="tsMs" type="number" domain={[tsMin, tsMax]} hide />
+              <YAxis hide />
+              <Line
+                dataKey="totalWords"
+                stroke="#8aadf4"
+                strokeWidth={1.5}
+                strokeOpacity={0.8}
+                dot={false}
+                type="monotone"
+                isAnimationActive={false}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+        <span className="text-[10px] text-ctp-blue font-semibold whitespace-nowrap tabular-nums">
+          {finalTotal.toLocaleString()}
+        </span>
+      </div>
+
+      {/* ── Stats bar ── */}
+      <StatsBar
+        hasKnownWords
+        pauseCount={pauseCount}
+        seekCount={seekCount}
+        cardEventCount={cardEventCount}
+        session={session}
+        lookupRate={lookupRate}
+      />
+    </div>
+  );
+}
+
+/* ── Fallback View (no known words data) ────────────────────────── */
+
+function FallbackView({
+  sorted,
+  cardEvents,
+  seekEvents,
+  yomitanLookupEvents,
+  pauseRegions,
+  markers,
+  hoveredMarkerKey,
+  onHoveredMarkerChange,
+  pinnedMarkerKey,
+  onPinnedMarkerChange,
+  noteInfos,
+  loadingNoteIds,
+  onOpenNote,
+  pauseCount,
+  seekCount,
+  cardEventCount,
+  lookupRate,
+  session,
+}: {
+  sorted: TimelineEntry[];
+  cardEvents: SessionEvent[];
+  seekEvents: SessionEvent[];
+  yomitanLookupEvents: SessionEvent[];
+  pauseRegions: Array<{ startMs: number; endMs: number }>;
+  markers: SessionChartMarker[];
+  hoveredMarkerKey: string | null;
+  onHoveredMarkerChange: (markerKey: string | null) => void;
+  pinnedMarkerKey: string | null;
+  onPinnedMarkerChange: (markerKey: string | null) => void;
+  noteInfos: Map<number, SessionEventNoteInfo>;
+  loadingNoteIds: Set<number>;
+  onOpenNote: (noteId: number) => void;
+  pauseCount: number;
+  seekCount: number;
+  cardEventCount: number;
+  lookupRate: ReturnType<typeof buildLookupRateDisplay>;
+  session: SessionSummary;
+}) {
+  const [plotArea, setPlotArea] = useState<SessionChartPlotArea | null>(null);
+  const chartData: FallbackChartPoint[] = [];
+  for (const t of sorted) {
+    const totalWords = getSessionDisplayWordCount(t);
+    if (totalWords === 0) continue;
+    chartData.push({ tsMs: t.sampleMs, totalWords });
+  }
+
+  if (chartData.length === 0) {
+    return <div className="text-ctp-overlay2 text-xs p-2">No word data for this session.</div>;
+  }
+
+  const tsMin = chartData[0]!.tsMs;
+  const tsMax = chartData[chartData.length - 1]!.tsMs;
+
+  return (
+    <div className="bg-ctp-mantle border border-ctp-surface1 rounded-lg p-3 mt-1 space-y-3">
+      <div className="relative">
+        <ResponsiveContainer width="100%" height={130}>
+          <LineChart data={chartData}>
+            <Customized
+              component={
+                <SessionChartOffsetProbe
+                  onPlotAreaChange={(nextPlotArea) => {
+                    setPlotArea((prevPlotArea) =>
+                      prevPlotArea &&
+                      prevPlotArea.left === nextPlotArea.left &&
+                      prevPlotArea.width === nextPlotArea.width
+                        ? prevPlotArea
+                        : nextPlotArea,
+                    );
+                  }}
+                />
+              }
+            />
+            <XAxis
+              dataKey="tsMs"
+              type="number"
+              domain={[tsMin, tsMax]}
+              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
+              axisLine={false}
+              tickLine={false}
+              tickFormatter={formatTime}
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
+              axisLine={false}
+              tickLine={false}
+              width={30}
+              allowDecimals={false}
+            />
+            <Tooltip
+              contentStyle={tooltipStyle}
+              labelFormatter={formatTime}
+              formatter={(value: number) => [`${value.toLocaleString()}`, 'Total words']}
+            />
+
+            {pauseRegions.map((r, i) => (
+              <ReferenceArea
+                key={`pause-${i}`}
+                x1={r.startMs}
+                x2={r.endMs}
+                fill="#f5a97f"
+                fillOpacity={0.15}
+                stroke="#f5a97f"
+                strokeOpacity={0.4}
+                strokeDasharray="3 3"
+                strokeWidth={1}
+              />
+            ))}
+
+            {cardEvents.map((e, i) => (
+              <ReferenceLine
+                key={`card-${i}`}
+                x={e.tsMs}
+                stroke="#a6da95"
+                strokeWidth={2}
+                strokeOpacity={0.8}
+              />
+            ))}
+            {seekEvents.map((e, i) => {
+              const isBackward = e.eventType === EventType.SEEK_BACKWARD;
+              const stroke = isBackward ? '#f5bde6' : '#8bd5ca';
+              return (
+                <ReferenceLine
+                  key={`seek-${i}`}
+                  x={e.tsMs}
+                  stroke={stroke}
+                  strokeWidth={1.5}
+                  strokeOpacity={0.75}
+                  strokeDasharray="4 3"
+                />
+              );
+            })}
+            {yomitanLookupEvents.map((e, i) => (
+              <ReferenceLine
+                key={`yomitan-${i}`}
+                x={e.tsMs}
+                stroke="#b7bdf8"
+                strokeWidth={1.5}
+                strokeDasharray="2 3"
+                strokeOpacity={0.7}
+              />
+            ))}
+
+            <Line
+              dataKey="totalWords"
+              stroke="#8aadf4"
+              strokeWidth={1.5}
+              dot={false}
+              activeDot={{ r: 3, fill: '#8aadf4', stroke: '#1e2030', strokeWidth: 1 }}
+              name="Total words"
+              type="monotone"
+              isAnimationActive={false}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+        <SessionEventOverlay
+          markers={markers}
+          tsMin={tsMin}
+          tsMax={tsMax}
+          plotArea={plotArea}
+          hoveredMarkerKey={hoveredMarkerKey}
+          onHoveredMarkerChange={onHoveredMarkerChange}
+          pinnedMarkerKey={pinnedMarkerKey}
+          onPinnedMarkerChange={onPinnedMarkerChange}
+          noteInfos={noteInfos}
+          loadingNoteIds={loadingNoteIds}
+          onOpenNote={onOpenNote}
+        />
+      </div>
+
+      <StatsBar
+        hasKnownWords={false}
+        pauseCount={pauseCount}
+        seekCount={seekCount}
+        cardEventCount={cardEventCount}
+        session={session}
+        lookupRate={lookupRate}
+      />
+    </div>
+  );
+}
+
+/* ── Stats Bar ──────────────────────────────────────────────────── */
+
+function StatsBar({
+  hasKnownWords,
+  pauseCount,
+  seekCount,
+  cardEventCount,
+  session,
+  lookupRate,
+}: {
+  hasKnownWords: boolean;
+  pauseCount: number;
+  seekCount: number;
+  cardEventCount: number;
+  session: SessionSummary;
+  lookupRate: ReturnType<typeof buildLookupRateDisplay>;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-4 text-[11px] pt-1">
+      {/* Group 1: Legend */}
+      {hasKnownWords && (
+        <>
+          <span className="flex items-center gap-1.5">
+            <span
+              className="inline-block w-2.5 h-2.5 rounded-sm"
+              style={{ background: 'rgba(166,218,149,0.4)', border: '1px solid #a6da95' }}
+            />
+            <span className="text-ctp-overlay2">Known</span>
+          </span>
+          <span className="flex items-center gap-1.5">
+            <span
+              className="inline-block w-2.5 h-2.5 rounded-sm"
+              style={{ background: 'rgba(198,160,246,0.2)', border: '1px solid #c6a0f6' }}
+            />
+            <span className="text-ctp-overlay2">Unknown</span>
+          </span>
+          <span className="text-ctp-surface2">|</span>
+        </>
+      )}
+
+      {/* Group 2: Playback stats */}
+      {pauseCount > 0 && (
+        <span className="text-ctp-overlay2">
+          <span className="text-ctp-peach">{pauseCount}</span> pause
+          {pauseCount !== 1 ? 's' : ''}
+        </span>
+      )}
+      {seekCount > 0 && (
+        <span className="text-ctp-overlay2">
+          <span className="text-ctp-teal">{seekCount}</span> seek{seekCount !== 1 ? 's' : ''}
+        </span>
+      )}
+      {(pauseCount > 0 || seekCount > 0) && <span className="text-ctp-surface2">|</span>}
+
+      {/* Group 3: Learning events */}
+      <span className="flex items-center gap-1.5">
+        <span
+          className="inline-block w-3 h-0.5 rounded"
+          style={{ background: '#b7bdf8', opacity: 0.8 }}
+        />
+        <span className="text-ctp-overlay2">
+          {session.yomitanLookupCount} Yomitan lookup
+          {session.yomitanLookupCount !== 1 ? 's' : ''}
+        </span>
+      </span>
+      {lookupRate && (
+        <span className="text-ctp-overlay2">
+          lookup rate: <span className="text-ctp-sapphire">{lookupRate.shortValue}</span>{' '}
+          <span className="text-ctp-subtext0">({lookupRate.longValue})</span>
+        </span>
+      )}
+      <span className="flex items-center gap-1.5">
+        <span className="text-[12px]">{'\u26CF'}</span>
+        <span className="text-ctp-cards-mined">
+          {Math.max(cardEventCount, session.cardsMined)} card
+          {Math.max(cardEventCount, session.cardsMined) !== 1 ? 's' : ''} mined
+        </span>
+      </span>
+    </div>
+  );
+}

stats/src/components/sessions/SessionEventOverlay.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useRef, type FocusEvent, type MouseEvent } from 'react';
+import {
+  projectSessionMarkerLeftPx,
+  resolveActiveSessionMarkerKey,
+  togglePinnedSessionMarkerKey,
+  type SessionChartMarker,
+  type SessionEventNoteInfo,
+  type SessionChartPlotArea,
+} from '../../lib/session-events';
+import { SessionEventPopover } from './SessionEventPopover';
+
+interface SessionEventOverlayProps {
+  markers: SessionChartMarker[];
+  tsMin: number;
+  tsMax: number;
+  plotArea: SessionChartPlotArea | null;
+  hoveredMarkerKey: string | null;
+  onHoveredMarkerChange: (markerKey: string | null) => void;
+  pinnedMarkerKey: string | null;
+  onPinnedMarkerChange: (markerKey: string | null) => void;
+  noteInfos: Map<number, SessionEventNoteInfo>;
+  loadingNoteIds: Set<number>;
+  onOpenNote: (noteId: number) => void;
+}
+
+function toPercent(tsMs: number, tsMin: number, tsMax: number): number {
+  if (tsMax <= tsMin) return 50;
+  const ratio = ((tsMs - tsMin) / (tsMax - tsMin)) * 100;
+  return Math.max(0, Math.min(100, ratio));
+}
+
+function markerLabel(marker: SessionChartMarker): string {
+  switch (marker.kind) {
+    case 'pause':
+      return '||';
+    case 'seek':
+      return marker.direction === 'backward' ? '<<' : '>>';
+    case 'card':
+      return '\u26CF';
+  }
+}
+
+function markerColors(marker: SessionChartMarker): { border: string; bg: string; text: string } {
+  switch (marker.kind) {
+    case 'pause':
+      return { border: '#f5a97f', bg: 'rgba(245,169,127,0.16)', text: '#f5a97f' };
+    case 'seek':
+      return marker.direction === 'backward'
+        ? { border: '#f5bde6', bg: 'rgba(245,189,230,0.16)', text: '#f5bde6' }
+        : { border: '#8bd5ca', bg: 'rgba(139,213,202,0.16)', text: '#8bd5ca' };
+    case 'card':
+      return { border: '#a6da95', bg: 'rgba(166,218,149,0.16)', text: '#a6da95' };
+  }
+}
+
+function popupAlignment(percent: number): string {
+  if (percent <= 15) return 'left-0 translate-x-0';
+  if (percent >= 85) return 'right-0 translate-x-0';
+  return 'left-1/2 -translate-x-1/2';
+}
+
+function handleWrapperBlur(
+  event: FocusEvent<HTMLDivElement>,
+  onHoveredMarkerChange: (markerKey: string | null) => void,
+  pinnedMarkerKey: string | null,
+  markerKey: string,
+): void {
+  if (pinnedMarkerKey === markerKey) return;
+  const nextFocused = event.relatedTarget;
+  if (nextFocused instanceof Node && event.currentTarget.contains(nextFocused)) {
+    return;
+  }
+  onHoveredMarkerChange(null);
+}
+
+function handleWrapperMouseLeave(
+  event: MouseEvent<HTMLDivElement>,
+  onHoveredMarkerChange: (markerKey: string | null) => void,
+  pinnedMarkerKey: string | null,
+  markerKey: string,
+): void {
+  if (pinnedMarkerKey === markerKey) return;
+  const nextHovered = event.relatedTarget;
+  if (nextHovered instanceof Node && event.currentTarget.contains(nextHovered)) {
+    return;
+  }
+  onHoveredMarkerChange(null);
+}
+
+export function SessionEventOverlay({
+  markers,
+  tsMin,
+  tsMax,
+  plotArea,
+  hoveredMarkerKey,
+  onHoveredMarkerChange,
+  pinnedMarkerKey,
+  onPinnedMarkerChange,
+  noteInfos,
+  loadingNoteIds,
+  onOpenNote,
+}: SessionEventOverlayProps) {
+  if (markers.length === 0) return null;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const activeMarkerKey = resolveActiveSessionMarkerKey(hoveredMarkerKey, pinnedMarkerKey);
+
+  useEffect(() => {
+    if (!pinnedMarkerKey) return;
+
+    function handleDocumentPointerDown(event: PointerEvent): void {
+      if (rootRef.current?.contains(event.target as Node)) {
+        return;
+      }
+      onPinnedMarkerChange(null);
+      onHoveredMarkerChange(null);
+    }
+
+    function handleDocumentKeyDown(event: KeyboardEvent): void {
+      if (event.key !== 'Escape') return;
+      onPinnedMarkerChange(null);
+      onHoveredMarkerChange(null);
+    }
+
+    document.addEventListener('pointerdown', handleDocumentPointerDown);
+    document.addEventListener('keydown', handleDocumentKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', handleDocumentPointerDown);
+      document.removeEventListener('keydown', handleDocumentKeyDown);
+    };
+  }, [pinnedMarkerKey, onHoveredMarkerChange, onPinnedMarkerChange]);
+
+  return (
+    <div ref={rootRef} className="pointer-events-none absolute inset-0 z-30 overflow-visible">
+      {markers.map((marker) => {
+        const percent = toPercent(marker.anchorTsMs, tsMin, tsMax);
+        const left = plotArea
+          ? `${projectSessionMarkerLeftPx({
+              anchorTsMs: marker.anchorTsMs,
+              tsMin,
+              tsMax,
+              plotLeftPx: plotArea.left,
+              plotWidthPx: plotArea.width,
+            })}px`
+          : `${percent}%`;
+        const colors = markerColors(marker);
+        const isActive = marker.key === activeMarkerKey;
+        const isPinned = marker.key === pinnedMarkerKey;
+        const loading =
+          marker.kind === 'card' && marker.noteIds.some((noteId) => loadingNoteIds.has(noteId));
+
+        return (
+          <div
+            key={marker.key}
+            className="pointer-events-auto absolute top-0 -translate-x-1/2 pt-1"
+            style={{ left }}
+            onMouseEnter={() => onHoveredMarkerChange(marker.key)}
+            onMouseLeave={(event) =>
+              handleWrapperMouseLeave(event, onHoveredMarkerChange, pinnedMarkerKey, marker.key)
+            }
+            onFocusCapture={() => onHoveredMarkerChange(marker.key)}
+            onBlurCapture={(event) =>
+              handleWrapperBlur(event, onHoveredMarkerChange, pinnedMarkerKey, marker.key)
+            }
+          >
+            <div className="relative flex flex-col items-center">
+              <button
+                type="button"
+                aria-label={`Show ${marker.kind} event details`}
+                aria-pressed={isPinned}
+                className="flex h-5 min-w-5 items-center justify-center rounded-full border px-1 text-[10px] font-semibold shadow-sm backdrop-blur-sm"
+                style={{
+                  borderColor: colors.border,
+                  background: colors.bg,
+                  color: colors.text,
+                }}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onHoveredMarkerChange(marker.key);
+                  onPinnedMarkerChange(togglePinnedSessionMarkerKey(pinnedMarkerKey, marker.key));
+                }}
+              >
+                {markerLabel(marker)}
+              </button>
+              {isActive ? (
+                <div
+                  className={`pointer-events-auto absolute top-5 z-50 pt-2 ${popupAlignment(percent)}`}
+                  onMouseDownCapture={() => {
+                    if (!isPinned) {
+                      onPinnedMarkerChange(marker.key);
+                    }
+                  }}
+                >
+                  <SessionEventPopover
+                    marker={marker}
+                    noteInfos={noteInfos}
+                    loading={loading}
+                    pinned={isPinned}
+                    onTogglePinned={() =>
+                      onPinnedMarkerChange(
+                        togglePinnedSessionMarkerKey(pinnedMarkerKey, marker.key),
+                      )
+                    }
+                    onClose={() => {
+                      onPinnedMarkerChange(null);
+                      onHoveredMarkerChange(null);
+                    }}
+                    onOpenNote={onOpenNote}
+                  />
+                </div>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

stats/src/components/sessions/SessionEventPopover.test.tsx

@@ -0,0 +1,150 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+import type { SessionChartMarker } from '../../lib/session-events';
+import { SessionEventPopover } from './SessionEventPopover';
+
+test('SessionEventPopover renders formatted card-mine details with fetched note info', () => {
+  const marker: SessionChartMarker = {
+    key: 'card-6000',
+    kind: 'card',
+    anchorTsMs: 6_000,
+    eventTsMs: 6_000,
+    noteIds: [11, 22],
+    cardsDelta: 2,
+  };
+
+  const markup = renderToStaticMarkup(
+    <SessionEventPopover
+      marker={marker}
+      noteInfos={
+        new Map([
+          [11, { noteId: 11, expression: '冒険者', context: '駆け出しの冒険者だ', meaning: null }],
+          [22, { noteId: 22, expression: '呪い', context: null, meaning: 'curse' }],
+        ])
+      }
+      loading={false}
+      pinned={false}
+      onTogglePinned={() => {}}
+      onClose={() => {}}
+      onOpenNote={() => {}}
+    />,
+  );
+
+  assert.match(markup, /Card mined/);
+  assert.match(markup, /\+2 cards/);
+  assert.match(markup, /冒険者/);
+  assert.match(markup, /呪い/);
+  assert.match(markup, /駆け出しの冒険者だ/);
+  assert.match(markup, /curse/);
+  assert.match(markup, /Pin/);
+  assert.match(markup, /Open in Anki/);
+});
+
+test('SessionEventPopover renders seek metadata compactly', () => {
+  const marker: SessionChartMarker = {
+    key: 'seek-3000',
+    kind: 'seek',
+    anchorTsMs: 3_000,
+    eventTsMs: 3_000,
+    direction: 'backward',
+    fromMs: 5_000,
+    toMs: 1_500,
+  };
+
+  const markup = renderToStaticMarkup(
+    <SessionEventPopover
+      marker={marker}
+      noteInfos={new Map()}
+      loading={false}
+      pinned={false}
+      onTogglePinned={() => {}}
+      onClose={() => {}}
+      onOpenNote={() => {}}
+    />,
+  );
+
+  assert.match(markup, /Seek backward/);
+  assert.match(markup, /5\.0s/);
+  assert.match(markup, /1\.5s/);
+  assert.match(markup, /3\.5s/);
+});
+
+test('SessionEventPopover renders a cleaner fallback when AnkiConnect provides no preview fields', () => {
+  const marker: SessionChartMarker = {
+    key: 'card-9000',
+    kind: 'card',
+    anchorTsMs: 9_000,
+    eventTsMs: 9_000,
+    noteIds: [91],
+    cardsDelta: 1,
+  };
+
+  const markup = renderToStaticMarkup(
+    <SessionEventPopover
+      marker={marker}
+      noteInfos={new Map()}
+      loading={false}
+      pinned={true}
+      onTogglePinned={() => {}}
+      onClose={() => {}}
+      onOpenNote={() => {}}
+    />,
+  );
+
+  assert.match(markup, /Pinned/);
+  assert.match(markup, /Preview unavailable from AnkiConnect/);
+  assert.doesNotMatch(markup, /No readable note fields returned/);
+});
+
+test('SessionEventPopover hides preview-unavailable fallback while note info is still loading', () => {
+  const marker: SessionChartMarker = {
+    key: 'card-177',
+    kind: 'card',
+    anchorTsMs: 9_000,
+    eventTsMs: 9_000,
+    noteIds: [177],
+    cardsDelta: 1,
+  };
+
+  const markup = renderToStaticMarkup(
+    <SessionEventPopover
+      marker={marker}
+      noteInfos={new Map()}
+      loading
+      pinned
+      onTogglePinned={() => {}}
+      onClose={() => {}}
+      onOpenNote={() => {}}
+    />,
+  );
+
+  assert.match(markup, /Loading Anki note info/);
+  assert.doesNotMatch(markup, /Preview unavailable/);
+});
+
+test('SessionEventPopover keeps the loading state clean until note preview data arrives', () => {
+  const marker: SessionChartMarker = {
+    key: 'card-9001',
+    kind: 'card',
+    anchorTsMs: 9_001,
+    eventTsMs: 9_001,
+    noteIds: [1773808840964],
+    cardsDelta: 1,
+  };
+
+  const markup = renderToStaticMarkup(
+    <SessionEventPopover
+      marker={marker}
+      noteInfos={new Map()}
+      loading={true}
+      pinned={true}
+      onTogglePinned={() => {}}
+      onClose={() => {}}
+      onOpenNote={() => {}}
+    />,
+  );
+
+  assert.match(markup, /Loading Anki note info/);
+  assert.doesNotMatch(markup, /Preview unavailable/);
+});

stats/src/components/sessions/SessionEventPopover.tsx

@@ -0,0 +1,161 @@
+import {
+  formatEventSeconds,
+  type SessionChartMarker,
+  type SessionEventNoteInfo,
+} from '../../lib/session-events';
+
+interface SessionEventPopoverProps {
+  marker: SessionChartMarker;
+  noteInfos: Map<number, SessionEventNoteInfo>;
+  loading: boolean;
+  pinned: boolean;
+  onTogglePinned: () => void;
+  onClose: () => void;
+  onOpenNote: (noteId: number) => void;
+}
+
+function formatEventTime(tsMs: number): string {
+  return new Date(tsMs).toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+export function SessionEventPopover({
+  marker,
+  noteInfos,
+  loading,
+  pinned,
+  onTogglePinned,
+  onClose,
+  onOpenNote,
+}: SessionEventPopoverProps) {
+  const seekDurationLabel =
+    marker.kind === 'seek' && marker.fromMs !== null && marker.toMs !== null
+      ? formatEventSeconds(Math.abs(marker.toMs - marker.fromMs))?.replace(/\.0s$/, 's')
+      : null;
+
+  return (
+    <div className="relative z-50 w-64 rounded-xl border border-ctp-surface2 bg-ctp-surface0/95 p-3 shadow-2xl shadow-black/30 backdrop-blur-sm">
+      <div className="mb-2 flex items-start justify-between gap-3">
+        <div>
+          <div className="text-xs font-semibold text-ctp-text">
+            {marker.kind === 'pause' && 'Paused'}
+            {marker.kind === 'seek' && `Seek ${marker.direction}`}
+            {marker.kind === 'card' && 'Card mined'}
+          </div>
+          <div className="text-[10px] text-ctp-overlay1">{formatEventTime(marker.eventTsMs)}</div>
+        </div>
+        <div className="flex items-center gap-1.5">
+          {pinned ? (
+            <span className="rounded-full border border-ctp-surface2 px-1.5 py-0.5 text-[10px] font-medium text-ctp-blue">
+              Pinned
+            </span>
+          ) : null}
+          <button
+            type="button"
+            onClick={onTogglePinned}
+            className="rounded-md border border-ctp-surface2 px-1.5 py-0.5 text-[10px] text-ctp-overlay1 transition-colors hover:bg-ctp-surface1 hover:text-ctp-text"
+          >
+            {pinned ? 'Unpin' : 'Pin'}
+          </button>
+          {pinned ? (
+            <button
+              type="button"
+              aria-label="Close event popup"
+              onClick={onClose}
+              className="rounded-md border border-ctp-surface2 px-1.5 py-0.5 text-[10px] text-ctp-overlay1 transition-colors hover:bg-ctp-surface1 hover:text-ctp-text"
+            >
+              ×
+            </button>
+          ) : null}
+          <div className="text-sm">
+            {marker.kind === 'pause' && '||'}
+            {marker.kind === 'seek' && (marker.direction === 'backward' ? '<<' : '>>')}
+            {marker.kind === 'card' && '\u26CF'}
+          </div>
+        </div>
+      </div>
+
+      {marker.kind === 'pause' && (
+        <div className="text-xs text-ctp-subtext0">
+          Duration: <span className="text-ctp-peach">{formatEventSeconds(marker.durationMs)}</span>
+        </div>
+      )}
+
+      {marker.kind === 'seek' && (
+        <div className="space-y-1 text-xs text-ctp-subtext0">
+          <div>
+            From{' '}
+            <span className="text-ctp-teal">{formatEventSeconds(marker.fromMs) ?? '\u2014'}</span>{' '}
+            to <span className="text-ctp-teal">{formatEventSeconds(marker.toMs) ?? '\u2014'}</span>
+          </div>
+          <div>
+            Length <span className="text-ctp-peach">{seekDurationLabel ?? '\u2014'}</span>
+          </div>
+        </div>
+      )}
+
+      {marker.kind === 'card' && (
+        <div className="space-y-2">
+          <div className="text-xs text-ctp-cards-mined">
+            +{marker.cardsDelta} {marker.cardsDelta === 1 ? 'card' : 'cards'}
+          </div>
+          {loading ? (
+            <div className="text-xs text-ctp-overlay1">Loading Anki note info...</div>
+          ) : null}
+          <div className="space-y-1.5">
+            {marker.noteIds.length > 0 ? (
+              marker.noteIds.map((noteId) => {
+                const info = noteInfos.get(noteId);
+                const hasPreview = Boolean(info?.expression || info?.context || info?.meaning);
+                const showUnavailableFallback = !loading && !hasPreview;
+                return (
+                  <div
+                    key={noteId}
+                    className="rounded-lg border border-ctp-surface1 bg-ctp-mantle/80 px-2.5 py-2"
+                  >
+                    <div className="mb-1 flex items-center justify-between gap-2">
+                      <div className="rounded-full bg-ctp-surface1 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-ctp-overlay1">
+                        Note {noteId}
+                      </div>
+                      {showUnavailableFallback ? (
+                        <div className="text-[10px] text-ctp-overlay1">Preview unavailable</div>
+                      ) : null}
+                    </div>
+                    {info?.expression ? (
+                      <div className="mb-1 text-sm font-medium text-ctp-text">
+                        {info.expression}
+                      </div>
+                    ) : null}
+                    {info?.context ? (
+                      <div className="mb-1 text-xs text-ctp-subtext0">{info.context}</div>
+                    ) : null}
+                    {info?.meaning ? (
+                      <div className="mb-2 text-xs text-ctp-teal">{info.meaning}</div>
+                    ) : null}
+                    {showUnavailableFallback ? (
+                      <div className="mb-2 text-xs text-ctp-overlay1">
+                        Preview unavailable from AnkiConnect.
+                      </div>
+                    ) : null}
+                    <button
+                      type="button"
+                      onClick={() => onOpenNote(noteId)}
+                      className="rounded-md bg-ctp-surface1 px-2 py-1 text-[10px] text-ctp-blue transition-colors hover:bg-ctp-surface2"
+                    >
+                      Open in Anki
+                    </button>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="text-xs text-ctp-overlay1">No linked note ids recorded.</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

stats/src/components/sessions/SessionRow.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { BASE_URL } from '../../lib/api-client';
+import { formatDuration, formatRelativeDate, formatNumber } from '../../lib/formatters';
+import { getSessionDisplayWordCount } from '../../lib/session-word-count';
+import type { SessionSummary } from '../../types/stats';
+
+interface SessionRowProps {
+  session: SessionSummary;
+  isExpanded: boolean;
+  detailsId: string;
+  onToggle: () => void;
+  onDelete: () => void;
+  deleteDisabled?: boolean;
+  onNavigateToMediaDetail?: (videoId: number) => void;
+}
+
+function CoverThumbnail({
+  animeId,
+  videoId,
+  title,
+}: {
+  animeId: number | null;
+  videoId: number | null;
+  title: string;
+}) {
+  const [failed, setFailed] = useState(false);
+  const fallbackChar = title.charAt(0) || '?';
+
+  if ((!animeId && !videoId) || failed) {
+    return (
+      <div className="w-10 h-14 rounded bg-ctp-surface2 flex items-center justify-center text-ctp-overlay2 text-sm font-bold shrink-0">
+        {fallbackChar}
+      </div>
+    );
+  }
+
+  const src =
+    animeId != null
+      ? `${BASE_URL}/api/stats/anime/${animeId}/cover`
+      : `${BASE_URL}/api/stats/media/${videoId}/cover`;
+
+  return (
+    <img
+      src={src}
+      alt=""
+      loading="lazy"
+      className="w-10 h-14 rounded object-cover shrink-0 bg-ctp-surface2"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+export function SessionRow({
+  session,
+  isExpanded,
+  detailsId,
+  onToggle,
+  onDelete,
+  deleteDisabled = false,
+  onNavigateToMediaDetail,
+}: SessionRowProps) {
+  const displayWordCount = getSessionDisplayWordCount(session);
+  const knownWordsSeen = session.knownWordsSeen;
+
+  return (
+    <div className="relative group">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={isExpanded}
+        aria-controls={detailsId}
+        className="w-full bg-ctp-surface0 border border-ctp-surface1 rounded-lg p-3 pr-12 flex items-center gap-3 hover:border-ctp-surface2 transition-colors text-left"
+      >
+        <CoverThumbnail
+          animeId={session.animeId}
+          videoId={session.videoId}
+          title={session.canonicalTitle ?? 'Unknown'}
+        />
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium text-ctp-text truncate">
+            {session.canonicalTitle ?? 'Unknown Media'}
+          </div>
+          <div className="text-xs text-ctp-overlay2">
+            {formatRelativeDate(session.startedAtMs)} · {formatDuration(session.activeWatchedMs)}{' '}
+            active
+          </div>
+        </div>
+        <div className="flex gap-4 text-xs text-center shrink-0">
+          <div>
+            <div className="text-ctp-cards-mined font-medium font-mono tabular-nums">
+              {formatNumber(session.cardsMined)}
+            </div>
+            <div className="text-ctp-overlay2">cards</div>
+          </div>
+          <div>
+            <div className="text-ctp-mauve font-medium font-mono tabular-nums">
+              {formatNumber(displayWordCount)}
+            </div>
+            <div className="text-ctp-overlay2">words</div>
+          </div>
+          <div>
+            <div className="text-ctp-green font-medium font-mono tabular-nums">
+              {formatNumber(knownWordsSeen)}
+            </div>
+            <div className="text-ctp-overlay2">known words</div>
+          </div>
+        </div>
+        <div
+          className={`text-ctp-blue text-xs transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+        >
+          {'\u25B8'}
+        </div>
+      </button>
+      {onNavigateToMediaDetail != null && session.videoId != null ? (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onNavigateToMediaDetail(session.videoId!);
+          }}
+          aria-label={`View overview for ${session.canonicalTitle ?? 'Unknown Media'}`}
+          className="absolute right-10 top-1/2 -translate-y-1/2 w-5 h-5 rounded border border-ctp-surface2 text-transparent hover:border-ctp-blue/50 hover:text-ctp-blue hover:bg-ctp-blue/10 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 flex items-center justify-center"
+          title="View anime overview"
+        >
+          {'\u2197'}
+        </button>
+      ) : null}
+      <button
+        type="button"
+        onClick={onDelete}
+        disabled={deleteDisabled}
+        aria-label={`Delete session ${session.canonicalTitle ?? 'Unknown Media'}`}
+        className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 rounded border border-ctp-surface2 text-transparent hover:border-ctp-red/50 hover:text-ctp-red hover:bg-ctp-red/10 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 flex items-center justify-center disabled:opacity-40 disabled:cursor-not-allowed"
+        title="Delete session"
+      >
+        {'\u2715'}
+      </button>
+    </div>
+  );
+}

stats/src/components/sessions/SessionsTab.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useSessions } from '../../hooks/useSessions';
+import { SessionRow } from './SessionRow';
+import { SessionDetail } from './SessionDetail';
+import { apiClient } from '../../lib/api-client';
+import { confirmSessionDelete } from '../../lib/delete-confirm';
+import { formatSessionDayLabel } from '../../lib/formatters';
+import type { SessionSummary } from '../../types/stats';
+
+function groupSessionsByDay(sessions: SessionSummary[]): Map<string, SessionSummary[]> {
+  const groups = new Map<string, SessionSummary[]>();
+
+  for (const session of sessions) {
+    const dayLabel = formatSessionDayLabel(session.startedAtMs);
+    const group = groups.get(dayLabel);
+    if (group) {
+      group.push(session);
+    } else {
+      groups.set(dayLabel, [session]);
+    }
+  }
+
+  return groups;
+}
+
+interface SessionsTabProps {
+  initialSessionId?: number | null;
+  onClearInitialSession?: () => void;
+  onNavigateToMediaDetail?: (videoId: number) => void;
+}
+
+export function SessionsTab({
+  initialSessionId,
+  onClearInitialSession,
+  onNavigateToMediaDetail,
+}: SessionsTabProps = {}) {
+  const { sessions, loading, error } = useSessions();
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+  const [search, setSearch] = useState('');
+  const [visibleSessions, setVisibleSessions] = useState<SessionSummary[]>([]);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [deletingSessionId, setDeletingSessionId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setVisibleSessions(sessions);
+  }, [sessions]);
+
+  useEffect(() => {
+    if (initialSessionId != null && sessions.length > 0) {
+      let canceled = false;
+      setExpandedId(initialSessionId);
+      onClearInitialSession?.();
+      const frame = requestAnimationFrame(() => {
+        if (canceled) return;
+        const el = document.getElementById(`session-details-${initialSessionId}`);
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        } else {
+          // Session row itself if detail hasn't rendered yet
+          const row = document.querySelector(
+            `[aria-controls="session-details-${initialSessionId}"]`,
+          );
+          row?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      });
+      return () => {
+        canceled = true;
+        cancelAnimationFrame(frame);
+      };
+    }
+  }, [initialSessionId, sessions, onClearInitialSession]);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return visibleSessions;
+    return visibleSessions.filter((s) => s.canonicalTitle?.toLowerCase().includes(q));
+  }, [visibleSessions, search]);
+
+  const groups = useMemo(() => groupSessionsByDay(filtered), [filtered]);
+
+  const handleDeleteSession = async (session: SessionSummary) => {
+    if (!confirmSessionDelete()) return;
+
+    setDeleteError(null);
+    setDeletingSessionId(session.sessionId);
+    try {
+      await apiClient.deleteSession(session.sessionId);
+      setVisibleSessions((prev) => prev.filter((item) => item.sessionId !== session.sessionId));
+      setExpandedId((prev) => (prev === session.sessionId ? null : prev));
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete session.');
+    } finally {
+      setDeletingSessionId(null);
+    }
+  };
+
+  if (loading) return <div className="text-ctp-overlay2 p-4">Loading...</div>;
+  if (error) return <div className="text-ctp-red p-4">Error: {error}</div>;
+
+  return (
+    <div className="space-y-4">
+      <input
+        type="search"
+        aria-label="Search sessions by title"
+        placeholder="Search by title..."
+        value={search}
+        onChange={(e) => 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"
+      />
+
+      {deleteError ? <div className="text-sm text-ctp-red">{deleteError}</div> : null}
+
+      {Array.from(groups.entries()).map(([dayLabel, daySessions]) => (
+        <div key={dayLabel}>
+          <div className="flex items-center gap-3 mb-2">
+            <h3 className="text-xs font-semibold text-ctp-overlay2 uppercase tracking-widest shrink-0">
+              {dayLabel}
+            </h3>
+            <div className="flex-1 h-px bg-gradient-to-r from-ctp-surface1 to-transparent" />
+          </div>
+          <div className="space-y-2">
+            {daySessions.map((s) => {
+              const detailsId = `session-details-${s.sessionId}`;
+              return (
+                <div key={s.sessionId}>
+                  <SessionRow
+                    session={s}
+                    isExpanded={expandedId === s.sessionId}
+                    detailsId={detailsId}
+                    onToggle={() => setExpandedId(expandedId === s.sessionId ? null : s.sessionId)}
+                    onDelete={() => void handleDeleteSession(s)}
+                    deleteDisabled={deletingSessionId === s.sessionId}
+                    onNavigateToMediaDetail={onNavigateToMediaDetail}
+                  />
+                  {expandedId === s.sessionId && (
+                    <div id={detailsId}>
+                      <SessionDetail session={s} />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+
+      {filtered.length === 0 && (
+        <div className="text-ctp-overlay2 text-sm">
+          {search.trim() ? 'No sessions matching your search.' : 'No sessions recorded yet.'}
+        </div>
+      )}
+    </div>
+  );
+}