fleetlens 0.12.3 → 0.13.1

package/app/apps/web/app/sessions/[id]/session-view.tsx

@@ -5,6 +5,7 @@ import React, { useEffect, useMemo, useRef, useState, type CSSProperties } from
 import {
   ArrowLeft,
   ChevronDown,
+  ChevronLeft,
   ChevronRight,
   ChevronUp,
   Clock,
@@ -19,7 +20,6 @@ import {
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import type {
-  ContentBlock,
   SessionDetail,
   SessionEvent,
   SubagentRun,
@@ -32,13 +32,44 @@ import {
   buildPresentation,
   buildMegaRows,
   detectPrMarkers,
-  rowPrimaryIndex as rowPrimaryIndexFromLib,
   type MegaRow,
   type PresentationRow,
   type PresentationRowKind,
   type TurnMegaRow,
   type TurnSummary,
 } from "@claude-lens/parser";
+import {
+  rowPrimaryIndex,
+  type DisplayRow,
+  type MinimapSeg,
+} from "./session-view/types";
+import { subagentColor, workflowColor } from "./session-view/colors";
+import {
+  formatDayKey,
+  flattenMegaRows,
+  allRowsAsRawRows,
+  formatDurationHeader,
+} from "./session-view/helpers";
+import { EntryDayStrip } from "./session-view/entry-day-strip";
+import { DebugList } from "./session-view/debug-list";
+import { Tooltip, TooltipRow } from "./session-view/tooltip";
+import { TokenChip, TurnTokenChip } from "./session-view/token-stats";
+import {
+  InlineStat,
+  InlineStatDivider,
+  EntrypointBadge,
+  InlineTokenStat,
+  useAnchoredTooltip,
+  AnchoredTooltip,
+} from "./session-view/header-stats";
+import { Drawer } from "./session-view/drawer";
+import {
+  WfMiniStat,
+  SectionLabel,
+  StatCell,
+  TokenLine,
+} from "./session-view/workflows-shared";
+import { SubagentDrawer } from "./session-view/subagent-drawer";
 import { estimateCost, formatCost, formatGap, formatOffset, formatRelative, formatTokens, shortId } from "@/lib/format";
 import { LiveBadge } from "@/components/live-badge";
 import { AskButton, AskDrawer } from "@/components/ask";
@@ -169,7 +200,20 @@ export function SessionView({
   /** When a timeline click sets the index we also want to scroll. Track that
    *  intent separately so selection via row-click doesn't auto-scroll. */
   const [scrollIntent, setScrollIntent] = useState(0);
+  /** Scroll-only target (no selection) — used by day navigation so jumping to
+   *  a day scrolls the transcript there WITHOUT popping the event drawer the
+   *  way a row/minimap selection does. `block` aligns the strip to the top
+   *  ("start", normal day jump) or the bottom ("end", used by "go to end of the
+   *  previous day" — scrolling the current day's strip to the viewport bottom
+   *  reveals the previous day's tail above it). `n` forces the effect to re-run
+   *  even when the same target is requested twice. */
+  const [dayScrollTarget, setDayScrollTarget] = useState<
+    { index: number; key: string; block: "start" | "end"; n: number } | null
+  >(null);
   const rowRefs = useRef<Record<number, HTMLDivElement | null>>({});
+  // Per-day digest cards (EntryDayStrip) are interleaved into the transcript at
+  // each day's first row, so day-nav scrolls to the card itself when present.
+  const dayStripRefs = useRef<Record<string, HTMLDivElement | null>>({});
 
   // The event/subagent drawers are transcript-scoped (position: fixed, shown
   // whenever a selection exists). Clear the selection when leaving the
@@ -192,6 +236,12 @@ export function SessionView({
    *  at mount + on resize via ResizeObserver — no magic constants. */
   const headerRef = useRef<HTMLDivElement>(null);
   const [headerH, setHeaderH] = useState(STICKY_HEADER_HEIGHT);
+  // Live mirror so the day-scroll alignment can read the current header height
+  // WITHOUT taking headerH as an effect dep — collapse flips headerH on every
+  // scroll direction change, and a dep there would re-fire the day scroll mid-
+  // free-scroll and yank the view back to the last nav target.
+  const headerHRef = useRef(headerH);
+  headerHRef.current = headerH;
   useEffect(() => {
     const el = headerRef.current;
     if (!el) return;
@@ -212,6 +262,10 @@ export function SessionView({
   // When the user explicitly clicks the toggle, suppress auto-collapse
   // for a short period so the scroll listener doesn't immediately undo it.
   const manualPinRef = useRef(0);
+  // Stamped on every explicit day-jump so TailMode's live-follow observer
+  // bails for a beat — otherwise a streaming live event yanks the view back
+  // to the bottom mid-navigation. See gotoDay / jumpAcrossDay.
+  const tailNavLockRef = useRef(0);
   const toggleCollapsed = () => {
     setCollapsed((v) => !v);
     manualPinRef.current = Date.now();
@@ -289,6 +343,51 @@ export function SessionView({
     el.scrollIntoView({ block: "start", behavior: "auto" });
   }, [scrollIntent, selectedIndex]);
 
+  // Scroll-only effect for day navigation — scrolls to a row without setting
+  // selectedIndex (so no drawer opens). Same scrollIntoView contract as above.
+  useEffect(() => {
+    if (!dayScrollTarget) return;
+    const main = headerRef.current?.closest("main") as HTMLElement | null;
+    // Prefer the day's digest card (it leads the day); fall back to the first
+    // row when that day has no entry.
+    const el =
+      dayStripRefs.current[dayScrollTarget.key] ?? rowRefs.current[dayScrollTarget.index];
+    if (!el || !main) return;
+    el.scrollIntoView({ block: dayScrollTarget.block, behavior: "auto" });
+
+    // scrollIntoView aims using the content-visibility ESTIMATED heights of the
+    // rows ABOVE the target, so on a long transcript (worst at mount, when none
+    // have been laid out yet) it undershoots by 100–200px — leaving the PREVIOUS
+    // day's tall trailing turn-block still straddling the header line. The
+    // playhead observer then reads THAT block's offset and followDayToScroll
+    // reverts the day-jump. For a top-aligned jump, re-measure on the next few
+    // frames (real heights now settle progressively) and nudge the target to sit
+    // exactly at the header line so the prev block clears it. block:"end" (go to
+    // end of prev day) intentionally leaves the prev-day tail on the line, so it
+    // needs no correction.
+    if (dayScrollTarget.block !== "start") return;
+    let frames = 0;
+    let settled = 0;
+    let raf = 0;
+    const align = () => {
+      const delta = Math.round(
+        el.getBoundingClientRect().top - main.getBoundingClientRect().top - headerHRef.current,
+      );
+      if (Math.abs(delta) > 1) {
+        main.scrollTop += delta;
+        settled = 0;
+      } else {
+        settled++;
+      }
+      // Keep correcting until it holds for two consecutive frames (rows above
+      // the target settle their real content-visibility heights progressively,
+      // and on a long transcript that can take many frames). Cap as a backstop.
+      if (settled < 2 && ++frames < 20) raf = requestAnimationFrame(align);
+    };
+    raf = requestAnimationFrame(align);
+    return () => cancelAnimationFrame(raf);
+  }, [dayScrollTarget]);
+
   const { events, durationMs, totalUsage, model, eventCount, projectName } = session;
   const airTimeMs = session.airTimeMs ?? durationMs;
   const workflowCount = session.workflows?.length ?? 0;
@@ -310,11 +409,16 @@ export function SessionView({
     [events, teammateCount],
   );
 
-  // A session is "live" if its last event was within 45 seconds.
+  // A session is "live" if its last activity was within 45 seconds — where
+  // "activity" includes nested background-agent/workflow writes, not just the
+  // main transcript's last event (lastActivityMs).
   const isSessionLive = (() => {
-    if (!session.lastTimestamp) return false;
-    const ms = Date.parse(session.lastTimestamp);
-    return !Number.isNaN(ms) && Date.now() - ms < 45_000;
+    const isoMs = session.lastTimestamp ? Date.parse(session.lastTimestamp) : NaN;
+    const ms = Math.max(
+      Number.isNaN(isoMs) ? 0 : isoMs,
+      session.lastActivityMs && Number.isFinite(session.lastActivityMs) ? session.lastActivityMs : 0,
+    );
+    return ms > 0 && Date.now() - ms < 45_000;
   })();
 
   /** Detect PR creations in this session. */
@@ -488,6 +592,135 @@ export function SessionView({
     return out;
   }, [events]);
 
+  /** Local-day buckets the session spans, in event order. Each day's
+   *  `startMs`/`endMs` are tOffsetMs bounds (offset from session start) so
+   *  they plug straight into the minimap's offset coordinate space. Keys are
+   *  derived as literal `YYYY-MM-DD` from local date parts so SSR and client
+   *  agree (no locale/Date formatting that could drift across the hydration
+   *  boundary). Long multi-day sessions use this to scope the minimap to one
+   *  day at a time instead of squashing days into a single bar. */
+  const sessionDays = useMemo(() => {
+    const byDay = new Map<string, { startMs: number; endMs: number; count: number }>();
+    for (const e of events) {
+      if (e.tOffsetMs === undefined || !e.timestamp) continue;
+      const ms = Date.parse(e.timestamp);
+      if (!Number.isFinite(ms)) continue;
+      const d = new Date(ms);
+      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+      const cur = byDay.get(key);
+      if (!cur) byDay.set(key, { startMs: e.tOffsetMs, endMs: e.tOffsetMs, count: 1 });
+      else {
+        cur.startMs = Math.min(cur.startMs, e.tOffsetMs);
+        cur.endMs = Math.max(cur.endMs, e.tOffsetMs);
+        cur.count += 1;
+      }
+    }
+    return [...byDay.entries()]
+      .map(([key, v]) => ({ key, ...v }))
+      .sort((a, b) => a.startMs - b.startMs);
+  }, [events]);
+
+  /** local_day → per-day digest card. `entry.local_day` and `sessionDays` keys
+   *  are both built from local-time getFullYear/Month/Date (see parser's
+   *  toLocalDay), so the strings match exactly and the card lands on the right
+   *  day's first transcript row. */
+  const entryByDay = useMemo(() => {
+    const m = new Map<string, Entry>();
+    for (const e of entries) m.set(e.local_day, e);
+    return m;
+  }, [entries]);
+
+  // Selected timeline day. Defaults to the LAST (most recent) active day so a
+  // long, multi-day transcript opens where the action is rather than at the
+  // top of an old day; the initial-jump effect below scrolls there instantly,
+  // and the day then follows the scroll position as the user reads in either
+  // direction (see followDayToScroll). The lazy initializer runs identically on
+  // server + client (sessionDays is deterministic), so there's no hydration
+  // mismatch; the effect re-pins it when the component is reused across
+  // /sessions/[id] navigations. "all" shows the full session.
+  const didInitialDayJump = useRef(false);
+  const [selectedDayKey, setSelectedDayKey] = useState<string>(
+    () => (sessionDays.length ? sessionDays[sessionDays.length - 1]!.key : "all"),
+  );
+  useEffect(() => {
+    setSelectedDayKey(sessionDays.length ? sessionDays[sessionDays.length - 1]!.key : "all");
+    didInitialDayJump.current = false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.sessionId]);
+
+  const dayIndex = sessionDays.findIndex((d) => d.key === selectedDayKey);
+  // Latest sessionDays, read by the initial-jump effect so it doesn't re-run on
+  // every render. On LIVE sessions SSE router.refresh() rebuilds sessionDays each
+  // tick; reading it via ref keeps the once-per-session jump from re-firing.
+  const sessionDaysRef = useRef(sessionDays);
+  sessionDaysRef.current = sessionDays;
+  // Read by followDayToScroll (the scroll→day follower) without stale closure.
+  const selectedDayKeyRef = useRef(selectedDayKey);
+  selectedDayKeyRef.current = selectedDayKey;
+
+  // Initial jump: on first paint of a multi-day session, snap straight to the
+  // most recent day (the default selectedDayKey is already the last day, so the
+  // minimap matches). Routed through gotoDay rather than scrolling to the day's
+  // strip directly: in "turns" mode the most recent day can be absorbed into a
+  // turn anchored on an earlier day and so have NO inline strip — gotoDay finds
+  // the day's first event, expands its turn, and falls back to the row ref, so
+  // it lands reliably either way. Single-day sessions stay at the top. Runs once
+  // per session; the re-pin effect above clears didInitialDayJump on nav.
+  //
+  // SKIPPED for live sessions: their destination is the live tail, which
+  // TailMode scrolls to on mount. Jumping to the most-recent-day's TOP would
+  // scroll the view UP, and that programmatic scroll trips TailMode's scroll-up
+  // detector (check()) into turning live-follow off — and it would race
+  // TailMode's own mount scroll. followDayToScroll still keeps the minimap on
+  // the last day, since the tail sits there.
+  useEffect(() => {
+    if (tab !== "transcript" || didInitialDayJump.current) return;
+    const days = sessionDaysRef.current;
+    if (days.length <= 1 || isSessionLive) {
+      didInitialDayJump.current = true;
+      return;
+    }
+    didInitialDayJump.current = true;
+    gotoDay(days[days.length - 1]!.key);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tab, sessionDays]);
+
+  // The displayed day is a single function of scroll position. The Minimap
+  // reports the offset (ms) of the topmost on-screen row — the SAME signal it
+  // draws the playhead from — and we select that row's day. Display only: this
+  // never scrolls the transcript. Navigation (gotoDay / the inline day-boundary
+  // buttons) moves the scroll, and the day then follows this one signal, so
+  // there's no second writer that could revert a day-jump. (The old scroll-spy
+  // used a separate pixel heuristic that disagreed with where nav scrolled to,
+  // which is what made "next day" snap back.) The tailNavLock guard lets an
+  // explicit jump's scroll settle first, and the key-unchanged no-op keeps a
+  // LIVE session's SSE refreshes from churning the selection.
+  function followDayToScroll(ms: number | null) {
+    if (ms === null) return;
+    if (Date.now() - tailNavLockRef.current < 1500) return;
+    const days = sessionDaysRef.current;
+    if (days.length <= 1) return;
+    const cur = selectedDayKeyRef.current;
+    if (cur === "all") return; // respect an explicit "show all days" choice
+    // Days are sorted by startMs; the last one starting at/below ms is the
+    // containing day (and tolerates the overnight gap between days).
+    let hit = days[0]!;
+    for (const d of days) {
+      if (ms >= d.startMs) hit = d;
+      else break;
+    }
+    if (hit.key !== cur) setSelectedDayKey(hit.key);
+  }
+
+  /** Offset window for the selected day, or null when there's a single day
+   *  or "all" is chosen — null tells the minimap to render the full session
+   *  exactly as before (no regression for single-day sessions). */
+  const dayWindow = useMemo(() => {
+    if (sessionDays.length <= 1 || selectedDayKey === "all") return null;
+    const d = sessionDays.find((x) => x.key === selectedDayKey);
+    return d ? { startMs: d.startMs, endMs: d.endMs } : null;
+  }, [sessionDays, selectedDayKey]);
+
   /** Build the full presentation stream once. */
   const allRows = useMemo(() => buildPresentation(visibleEvents), [visibleEvents]);
 
@@ -568,6 +801,67 @@ export function SessionView({
     setScrollIntent((n) => n + 1);
   }
 
+  /** Switch the minimap to a given day (or "all"). Also scrolls the transcript
+   *  to that day's first row so "jump to a day" navigates the body too. Called
+   *  on user day-picks and once on mount by the initial-jump effect (for non-live
+   *  multi-day sessions, to open on the most recent day). */
+  function gotoDay(key: string) {
+    setSelectedDayKey(key);
+    tailNavLockRef.current = Date.now();
+    // Paging days scrolls the transcript; that programmatic scroll (often
+    // upward to an earlier day's first row) would otherwise read as a
+    // user scroll-up and pop the sticky header open. Force it collapsed and
+    // pin so the scroll listener leaves it alone — day-nav always stays
+    // collapsed.
+    setCollapsed(true);
+    manualPinRef.current = Date.now();
+    if (key === "all") return;
+    const d = sessionDays.find((x) => x.key === key);
+    if (!d) return;
+    const ev = events.find((e) => e.tOffsetMs !== undefined && e.tOffsetMs >= d.startMs);
+    if (!ev) return;
+    // In turns mode the day's first row may be inside a collapsed turn — expand
+    // it so the row exists in the DOM before the scroll effect runs.
+    if (filter === "turns") {
+      const turnIdx = turnByRowIndex.get(ev.index);
+      if (turnIdx !== undefined && !expandedTurns.has(turnIdx)) {
+        setExpandedTurns((prev) => new Set(prev).add(turnIdx));
+      }
+    }
+    setDayScrollTarget((prev) => ({ index: ev.index, key, block: "start", n: (prev?.n ?? 0) + 1 }));
+  }
+
+  /** Cross-day hop used by the inline day-boundary buttons. Selecting a day can
+   *  differ from where we scroll: "go to end of previous day" selects the
+   *  previous day but scrolls the CURRENT day's strip to the viewport bottom
+   *  (block:"end"), revealing the previous day's tail above it. "go to start of
+   *  next day" selects + scrolls to that day's strip (block:"start"). */
+  function jumpAcrossDay(
+    selectKey: string,
+    scrollKey: string,
+    block: "start" | "end",
+    fallbackIndex: number,
+  ) {
+    setSelectedDayKey(selectKey);
+    setCollapsed(true);
+    manualPinRef.current = Date.now();
+    tailNavLockRef.current = Date.now();
+    // The fallback row may live inside a collapsed turn — expand it so the
+    // element exists if the strip ref is unavailable.
+    if (filter === "turns") {
+      const turnIdx = turnByRowIndex.get(fallbackIndex);
+      if (turnIdx !== undefined && !expandedTurns.has(turnIdx)) {
+        setExpandedTurns((prev) => new Set(prev).add(turnIdx));
+      }
+    }
+    setDayScrollTarget((prev) => ({
+      index: fallbackIndex,
+      key: scrollKey,
+      block,
+      n: (prev?.n ?? 0) + 1,
+    }));
+  }
+
   /** Scroll the transcript to the row whose assistant message issued a given
    *  tool_use id. Used by workflow cards / lanes to jump to the originating
    *  Workflow tool call. */
@@ -657,7 +951,7 @@ export function SessionView({
               className={`af-tab-btn ${tab === "transcript" ? "active" : ""}`}
               onClick={() => setTab("transcript")}
             >
-              Transcript
+              Timeline
             </button>
             {hasWorkflows && (
               <button
@@ -693,7 +987,7 @@ export function SessionView({
               className={`af-tab-btn ${tab === "debug" ? "active" : ""}`}
               onClick={() => setTab("debug")}
             >
-              Debug
+              Log
             </button>
           </div>
           <button
@@ -754,7 +1048,7 @@ export function SessionView({
           >
             sesn_{session.id.replace(/-/g, "").slice(0, 22)}
           </h1>
-          <LiveBadge mtimeIso={session.lastTimestamp} size="md" />
+          <LiveBadge mtimeIso={session.lastTimestamp} activityMs={session.lastActivityMs} size="md" />
           <span
             style={{
               fontSize: 10.5,
@@ -767,7 +1061,7 @@ export function SessionView({
               top: -1,
             }}
           >
-            {session.status === "running" ? "Running" : "Idle"}
+            {isSessionLive ? "Running" : "Idle"}
           </span>
           <InlineStatDivider />
           {model && <InlineStat icon={<Cpu size={12} />} value={model} mono />}
@@ -921,6 +1215,63 @@ export function SessionView({
             transition: "padding-bottom 0.2s ease",
           }}
         >
+        {/* Day navigator — only for multi-day sessions on the non-team
+            minimap. Lets you step the timeline through each local day (default
+            = the most recent) so a long-running session reads one day at a
+            time instead of squashed into one bar. */}
+        {tab !== "team" && sessionDays.length > 1 && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              marginBottom: 6,
+              fontSize: 12,
+              color: "var(--af-text-secondary)",
+            }}
+          >
+            <span style={{ color: "var(--af-text-tertiary)" }}>Timeline day</span>
+            <button
+              type="button"
+              title="Previous day"
+              aria-label="Previous day"
+              onClick={() => dayIndex > 0 && gotoDay(sessionDays[dayIndex - 1]!.key)}
+              disabled={selectedDayKey === "all" || dayIndex <= 0}
+              className="sl-day-nav-btn"
+            >
+              <ChevronLeft size={13} />
+            </button>
+            <select
+              value={selectedDayKey}
+              onChange={(e) => gotoDay(e.target.value)}
+              className="sl-compact-select"
+            >
+              {sessionDays.map((d, i) => (
+                <option key={d.key} value={d.key}>
+                  {formatDayKey(d.key)} · {d.count} event{d.count === 1 ? "" : "s"} (day {i + 1}/{sessionDays.length})
+                </option>
+              ))}
+              <option value="all">All days ({sessionDays.length})</option>
+            </select>
+            <button
+              type="button"
+              title="Next day"
+              aria-label="Next day"
+              onClick={() =>
+                dayIndex >= 0 && dayIndex < sessionDays.length - 1 && gotoDay(sessionDays[dayIndex + 1]!.key)
+              }
+              disabled={selectedDayKey === "all" || dayIndex < 0 || dayIndex >= sessionDays.length - 1}
+              className="sl-day-nav-btn"
+            >
+              <ChevronRight size={13} />
+            </button>
+            <span style={{ color: "var(--af-text-tertiary)", marginLeft: 2 }}>
+              {selectedDayKey === "all"
+                ? `showing all ${sessionDays.length} days`
+                : `day ${dayIndex + 1} of ${sessionDays.length}`}
+            </span>
+          </div>
+        )}
         {tab === "team" && team ? (
           <TeamMinimap
             data={team}
@@ -937,6 +1288,7 @@ export function SessionView({
           <Minimap
             displayRows={displayRows}
             durationMs={durationMs ?? 0}
+            dayWindow={dayWindow}
             selectedIndex={selectedIndex}
             onSelect={scrollToIndex}
             headerOffset={headerH}
@@ -958,6 +1310,7 @@ export function SessionView({
               // for the same right-side real estate.
               if (id) setSelectedIndex(null);
             }}
+            onPlayheadChange={followDayToScroll}
           />
         )}
         </div>
@@ -1002,17 +1355,13 @@ export function SessionView({
                 )
               }
               onJumpToParent={jumpToToolUse}
+              onClearFocus={() => setSelectedWorkflowId(null)}
             />
           </div>
         ) : tab === "debug" ? (
           <DebugList events={events} />
         ) : (
           <>
-            {entries.length > 0 && (
-              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 14 }}>
-                {entries.map((e) => <EntryDayStrip key={e.local_day} entry={e} />)}
-              </div>
-            )}
             {teammateCount > 0 && (
               <div
                 style={{
@@ -1055,6 +1404,10 @@ export function SessionView({
               team={team}
               model={model}
               rawIdleBands={rawIdleBands}
+              sessionDays={sessionDays}
+              entryByDay={entryByDay}
+              dayStripRefs={dayStripRefs}
+              onJumpAcrossDay={jumpAcrossDay}
             />
           </>
         )}
@@ -1185,7 +1538,7 @@ export function SessionView({
       )}
 
       {/* Tail mode FAB — auto-scroll to follow live events */}
-      <TailMode isLive={isSessionLive} />
+      <TailMode isLive={isSessionLive} navLockRef={tailNavLockRef} />
     </div>
   );
 }
@@ -1194,353 +1547,19 @@ export function SessionView({
 /*  Row helpers                                                       */
 /* ------------------------------------------------------------------ */
 
-const rowPrimaryIndex = rowPrimaryIndexFromLib;
-
-/* ------------------------------------------------------------------ */
-/*  DisplayRow: one line in the transcript list                      */
-/*                                                                     */
-/*  Flat list item type — either a presentation row (user, agent,    */
-/*  tool-group, error, ...), a collapsed turn summary, or an         */
-/*  expanded-turn header with its inner rows following.              */
-/* ------------------------------------------------------------------ */
-
-type DisplayRow =
-  | { kind: "presentation"; row: PresentationRow; indented?: boolean }
-  | { kind: "turn-collapsed"; turn: TurnMegaRow }
-  | { kind: "turn-expanded-header"; turn: TurnMegaRow }
-  | { kind: "turn-expanded-footer"; turn: TurnMegaRow };
-
-function flattenMegaRows(megaRows: MegaRow[], expanded: Set<number>): DisplayRow[] {
-  const out: DisplayRow[] = [];
-  for (const m of megaRows) {
-    if (m.kind === "turn") {
-      if (expanded.has(m.firstPrimaryIndex)) {
-        out.push({ kind: "turn-expanded-header", turn: m });
-        for (const r of m.rows) {
-          out.push({ kind: "presentation", row: r, indented: true });
-        }
-        out.push({ kind: "turn-expanded-footer", turn: m });
-      } else {
-        out.push({ kind: "turn-collapsed", turn: m });
-      }
-    } else {
-      out.push({ kind: "presentation", row: m });
-    }
-  }
-  return out;
-}
-
-/** Fallback for "All events" filter mode — wraps each raw event in a
- *  synthetic PresentationRow so the transcript component can render
- *  everything (attachments, meta, thinking, tool_result) without
- *  going through the meaningful-transformation logic. */
-function allRowsAsRawRows(events: SessionEvent[]): PresentationRow[] {
-  const out: PresentationRow[] = [];
-  for (const e of events) {
-    // Coerce every raw event to the closest presentation kind.
-    let kind: PresentationRowKind;
-    switch (e.role) {
-      case "user":
-        kind = "user";
-        break;
-      case "agent":
-      case "agent-thinking":
-        kind = "agent";
-        break;
-      case "tool-call":
-      case "tool-result":
-        kind = "tool-group";
-        break;
-      case "system":
-      case "meta":
-        kind = "model";
-        break;
-    }
-    if (kind === "tool-group") {
-      out.push({
-        kind: "tool-group",
-        toolNames: [{ name: e.toolName ?? e.rawType, count: 1 }],
-        count: 1,
-        events: [e],
-        tOffsetMs: e.tOffsetMs,
-        gapMs: e.gapMs,
-      });
-    } else if (kind === "agent") {
-      out.push({
-        kind: "agent",
-        event: e,
-        groupedEvents: [e],
-        tOffsetMs: e.tOffsetMs,
-        gapMs: e.gapMs,
-      });
-    } else if (kind === "user") {
-      out.push({
-        kind: "user",
-        event: e,
-        tOffsetMs: e.tOffsetMs,
-        gapMs: e.gapMs,
-      });
-    } else {
-      out.push({
-        kind: "model",
-        event: e,
-        tOffsetMs: e.tOffsetMs,
-        gapMs: e.gapMs,
-      });
-    }
-  }
-  return out;
-}
+// rowPrimaryIndex, DisplayRow, flattenMegaRows, allRowsAsRawRows moved to ./session-view/{types,helpers}.ts
 
 /* ------------------------------------------------------------------ */
 /*  Header stats + token stat w/ tooltip                              */
 /* ------------------------------------------------------------------ */
 
-/** Compact inline header stat — icon + value, separated by dots.
- *  Used in the single-line session header, modeled on Claude's Sessions page. */
-function InlineStat({
-  icon,
-  value,
-  mono,
-  truncate,
-}: {
-  icon?: React.ReactNode;
-  value: string;
-  mono?: boolean;
-  truncate?: boolean;
-}) {
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 5,
-        fontSize: 12,
-        color: "var(--af-text-secondary)",
-        maxWidth: truncate ? 260 : undefined,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-      }}
-    >
-      {icon && (
-        <span
-          style={{
-            display: "inline-flex",
-            color: "var(--af-text-tertiary)",
-          }}
-        >
-          {icon}
-        </span>
-      )}
-      <span
-        style={{
-          fontFamily: mono ? "var(--font-mono)" : "inherit",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {value}
-      </span>
-    </span>
-  );
-}
-
-function InlineStatDivider() {
-  return (
-    <span
-      style={{
-        color: "var(--af-text-tertiary)",
-        fontSize: 11,
-        opacity: 0.6,
-      }}
-    >
-      ·
-    </span>
-  );
-}
-
-function EntrypointBadge({ entrypoint }: { entrypoint: string }) {
-  // cli + claude-desktop are human-driven; sdk-* are programmatic.
-  const isSdk = entrypoint.startsWith("sdk-");
-  const tone = isSdk
-    ? { bg: "rgba(245, 158, 11, 0.16)", fg: "#b45309" }
-    : { bg: "rgba(16, 185, 129, 0.16)", fg: "#047857" };
-  return (
-    <span
-      title={`entrypoint: ${entrypoint}`}
-      style={{
-        fontSize: 10.5,
-        padding: "2px 7px",
-        borderRadius: 4,
-        background: tone.bg,
-        color: tone.fg,
-        fontWeight: 600,
-        fontFamily: "var(--font-mono)",
-        letterSpacing: 0.2,
-      }}
-    >
-      {entrypoint}
-    </span>
-  );
-}
-
-function InlineTokenStat({ usage }: { usage: SessionEvent["usage"] }) {
-  const { ref, anchor, open, close } = useAnchoredTooltip();
-  const u = usage ?? { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
-  const totalIn = u.input + u.cacheRead + u.cacheWrite;
-  const pctRead = totalIn > 0 ? Math.round((u.cacheRead / totalIn) * 100) : 0;
-  const cached = u.cacheRead + u.cacheWrite;
-
-  return (
-    <span
-      ref={ref}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 6,
-        fontSize: 12,
-        color: "var(--af-text-secondary)",
-        cursor: "default",
-        fontFamily: "var(--font-mono)",
-      }}
-      onMouseEnter={open}
-      onMouseLeave={close}
-    >
-      <span>
-        {formatTokens(u.input)}
-        <span style={{ color: "var(--af-text-tertiary)", margin: "0 3px" }}>in</span>
-        {formatTokens(u.output)}
-        <span style={{ color: "var(--af-text-tertiary)", marginLeft: 3 }}>out</span>
-      </span>
-      {cached > 0 && (
-        <span
-          style={{
-            fontSize: 10.5,
-            color: "var(--af-text-tertiary)",
-            paddingLeft: 6,
-            borderLeft: "1px solid var(--af-border-subtle)",
-          }}
-        >
-          +{formatTokens(cached)} cached
-        </span>
-      )}
-      {anchor && (
-        <AnchoredTooltip anchor={anchor} width={280}>
-          <TooltipRow label="Input (fresh)" value={u.input.toLocaleString()} />
-          <TooltipRow label="Output" value={u.output.toLocaleString()} />
-          <TooltipRow label="Cache read" value={`${u.cacheRead.toLocaleString()} (${pctRead}%)`} />
-          <TooltipRow label="Cache write" value={u.cacheWrite.toLocaleString()} />
-          <div
-            style={{
-              marginTop: 6,
-              paddingTop: 6,
-              borderTop: "1px solid rgba(241,245,249,0.12)",
-              opacity: 0.65,
-              fontSize: 10,
-              whiteSpace: "normal",
-              lineHeight: 1.4,
-            }}
-          >
-            Cache reads are cumulative across all API requests and billed at ~10% of regular input.
-          </div>
-        </AnchoredTooltip>
-      )}
-    </span>
-  );
-}
-
-// Used for tooltips that live inside an overflow:hidden ancestor (like the
-// session-header row). getBoundingClientRect + position:fixed lets the
-// tooltip escape the clipping context instead of being cropped.
-function useAnchoredTooltip() {
-  const ref = useRef<HTMLSpanElement>(null);
-  const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(null);
-  const open = () => {
-    if (!ref.current) return;
-    const r = ref.current.getBoundingClientRect();
-    setAnchor({ top: r.bottom + 6, left: r.left });
-  };
-  const close = () => setAnchor(null);
-  return { ref, anchor, open, close };
-}
-
-function AnchoredTooltip({
-  anchor,
-  width,
-  children,
-}: {
-  anchor: { top: number; left: number };
-  width: number;
-  children: React.ReactNode;
-}) {
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: anchor.top,
-        left: anchor.left,
-        zIndex: 1000,
-        background: "#1A1A1A",
-        color: "#F5F1EC",
-        padding: "8px 12px",
-        borderRadius: 6,
-        fontSize: 11,
-        fontFamily: "var(--font-mono)",
-        lineHeight: 1.5,
-        pointerEvents: "none",
-        boxShadow: "0 4px 16px rgba(15,23,42,0.24)",
-        width,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
+// InlineStat, InlineStatDivider, EntrypointBadge, InlineTokenStat, useAnchoredTooltip, AnchoredTooltip moved to ./session-view/header-stats.tsx
 
 /* ------------------------------------------------------------------ */
 /*  Generic Tooltip                                                    */
 /* ------------------------------------------------------------------ */
 
-function Tooltip({ children, style }: { children: React.ReactNode; style?: CSSProperties }) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        zIndex: 100,
-        background: "#1A1A1A",
-        color: "#F5F1EC",
-        borderRadius: 8,
-        padding: "10px 12px",
-        fontSize: 11,
-        fontFamily: "var(--font-mono)",
-        lineHeight: 1.5,
-        boxShadow: "0 4px 20px rgba(0,0,0,0.18)",
-        pointerEvents: "none",
-        whiteSpace: "nowrap",
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function TooltipRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        gap: 12,
-      }}
-    >
-      <span style={{ opacity: 0.7 }}>{label}</span>
-      <span>{value}</span>
-    </div>
-  );
-}
+// Tooltip, TooltipRow moved to ./session-view/tooltip.tsx
 
 /* ------------------------------------------------------------------ */
 /*  Mini-map                                                           */
@@ -1561,22 +1580,7 @@ function TooltipRow({ label, value }: { label: string; value: string }) {
 /*  - Rich hover card (role pill + preview) instead of bare SVG title. */
 /* ------------------------------------------------------------------ */
 
-type MinimapSeg =
-  | {
-      kind: "row";
-      row: PresentationRow;
-      primaryIndex: number;
-      start: number;
-      end: number;
-    }
-  | {
-      kind: "turn";
-      turn: TurnMegaRow;
-      primaryIndex: number;
-      start: number;
-      end: number;
-    }
-  | { kind: "idle"; start: number; end: number; durationMs: number };
+// MinimapSeg moved to ./session-view/types.ts
 
 /** All rows render at full bar height — distinction comes from color/pattern
  *  alone, matching Claude Managed Agents' unified-height timeline. */
@@ -1593,6 +1597,7 @@ const ROW_IMPORTANCE: Record<PresentationRowKind, number> = {
 function Minimap({
   displayRows,
   durationMs,
+  dayWindow,
   selectedIndex,
   onSelect,
   headerOffset,
@@ -1606,9 +1611,13 @@ function Minimap({
   coldResumeMarkers,
   rawIdleBands,
   model,
+  onPlayheadChange,
 }: {
   displayRows: DisplayRow[];
   durationMs: number;
+  /** When set, scope the timeline to this offset window (one local day).
+   *  null renders the full session. */
+  dayWindow?: { startMs: number; endMs: number } | null;
   selectedIndex: number | null;
   onSelect: (i: number) => void;
   headerOffset: number;
@@ -1629,6 +1638,10 @@ function Minimap({
    *  surface their dead-air on the minimap. */
   rawIdleBands?: { start: number; end: number; durationMs: number }[];
   model?: string;
+  /** Fires with the offset (ms) of the topmost on-screen transcript row — the
+   *  same scroll signal that draws the playhead. SessionView uses it to make
+   *  the selected day follow scroll. */
+  onPlayheadChange?: (ms: number | null) => void;
 }) {
   const WIDTH = 1400;
   /** Main timeline height. Sub-agent lanes stack below this. */
@@ -1667,6 +1680,10 @@ function Minimap({
     };
   } | null>(null);
   const [playheadMs, setPlayheadMs] = useState<number | null>(null);
+  // Read inside the observer so the latest callback fires without re-subscribing
+  // the IntersectionObserver (its effect deps stay [displayRows.length, headerOffset]).
+  const onPlayheadChangeRef = useRef(onPlayheadChange);
+  onPlayheadChangeRef.current = onPlayheadChange;
   const containerRef = useRef<HTMLDivElement>(null);
 
   /* Playhead — track which transcript row is at the top of the viewport.
@@ -1675,60 +1692,54 @@ function Minimap({
    * on every scroll event. For a session with ~2000 rows that's thousands
    * of DOM queries per second during scroll — enough to pin a CPU core
    * and make Chrome ask to kill the tab. IntersectionObserver is event-
-   * driven: the browser only notifies us when rows cross a narrow band
-   * near the top of the viewport (the "playhead line"), so the cost
-   * scales with *changes* instead of with scroll rate × row count.
+   * driven: the browser only notifies us when rows enter or leave the region
+   * below the sticky header, so the cost scales with *changes* instead of
+   * with scroll rate × row count.
    */
   useEffect(() => {
     const main = containerRef.current?.closest("main") as HTMLElement | null;
     if (!main) return;
 
-    // A thin horizontal band just below the sticky header. A row is
-    // "at the playhead" when it enters this band from the bottom.
-    // rootMargin: top crop = headerOffset (so the band starts where the
-    // transcript actually starts), bottom crop = everything except the
-    // band, so only rows inside the band trigger callbacks.
-    const BAND_HEIGHT = 12;
-    const rootMargin = `-${headerOffset}px 0px -${Math.max(
-      0,
-      main.clientHeight - headerOffset - BAND_HEIGHT,
-    )}px 0px`;
-
-    // Track which rows are currently inside the band. The topmost is
-    // the playhead. Using a Set keeps updates O(1).
-    const inBand = new Set<HTMLElement>();
+    // Crop the observation region by the sticky header at the top and keep the
+    // whole viewport below it. Every row visible below the header intersects
+    // this region; the topmost (smallest offsetTop) is the row sitting at the
+    // header line — the playhead. Using the full area (not a thin band) means
+    // the playhead never blanks out in the gaps between sparse rows, so the
+    // scroll→timeline highlight — and the day-follow that rides on it — stays
+    // continuous. Still event-driven: a row only fires when it enters or
+    // leaves, so cost scales with scroll distance, not row count.
+    const rootMargin = `-${headerOffset}px 0px 0px 0px`;
+
+    // Rows currently visible below the header. The topmost is the playhead.
+    const visibleRows = new Set<HTMLElement>();
 
     const publishTopmost = () => {
-      if (inBand.size === 0) {
-        // Fall back to the row just above the band by scanning the
-        // few immediately-adjacent rows — cheap because the band is
-        // narrow.
-        setPlayheadMs(null);
-        return;
-      }
-      let topmost: HTMLElement | null = null;
-      let topmostOff = Infinity;
-      for (const el of inBand) {
-        const t = el.offsetTop;
-        if (t < topmostOff) {
-          topmostOff = t;
-          topmost = el;
+      let value: number | null = null;
+      if (visibleRows.size > 0) {
+        let topmost: HTMLElement | null = null;
+        let topmostOff = Infinity;
+        for (const el of visibleRows) {
+          const t = el.offsetTop;
+          if (t < topmostOff) {
+            topmostOff = t;
+            topmost = el;
+          }
+        }
+        if (topmost) {
+          const tOff = Number(topmost.getAttribute("data-sl-toffset"));
+          value = Number.isNaN(tOff) ? null : tOff;
         }
       }
-      if (!topmost) {
-        setPlayheadMs(null);
-        return;
-      }
-      const tOff = Number(topmost.getAttribute("data-sl-toffset"));
-      setPlayheadMs(Number.isNaN(tOff) ? null : tOff);
+      setPlayheadMs(value);
+      onPlayheadChangeRef.current?.(value);
     };
 
     const observer = new IntersectionObserver(
       (entries) => {
         for (const e of entries) {
           const el = e.target as HTMLElement;
-          if (e.isIntersecting) inBand.add(el);
-          else inBand.delete(el);
+          if (e.isIntersecting) visibleRows.add(el);
+          else visibleRows.delete(el);
         }
         publishTopmost();
       },
@@ -1743,7 +1754,39 @@ function Minimap({
     return () => observer.disconnect();
   }, [displayRows.length, headerOffset]);
 
-  const safeDur = Math.max(durationMs, 1);
+  // Offset window for the rendered timeline. `winEnd` is the absolute offset
+  // of the right edge (session/day end); `safeDur` is the window LENGTH used
+  // as the proportional-width divisor. For a single-day session (dayWindow
+  // null) these collapse to [0, durationMs] — identical to the old behavior.
+  const winStart = dayWindow?.startMs ?? 0;
+  const winEnd = dayWindow?.endMs ?? durationMs;
+  const safeDur = Math.max(winEnd - winStart, 1);
+
+  // Subagent/workflow lanes are scoped to the same window as the main
+  // timeline so a day view doesn't reserve empty lanes for runs that happened
+  // on other days. Overlap test, not containment — a run straddling the
+  // window edge still shows.
+  const winSubagents = useMemo(
+    () =>
+      (subagents ?? []).filter(
+        (s) =>
+          s.startTOffsetMs !== undefined &&
+          s.endTOffsetMs !== undefined &&
+          s.endTOffsetMs >= winStart &&
+          s.startTOffsetMs <= winEnd,
+      ),
+    [subagents, winStart, winEnd],
+  );
+  const winWorkflows = useMemo(
+    () =>
+      (workflows ?? []).filter(
+        (w) =>
+          w.startTOffsetMs !== undefined &&
+          w.startTOffsetMs <= winEnd &&
+          (w.endTOffsetMs ?? winEnd) >= winStart,
+      ),
+    [workflows, winStart, winEnd],
+  );
 
   /* Build segments from the same display-row stream the transcript
      uses. Collapsed turns become one wide segment; expanded-turn
@@ -1769,6 +1812,7 @@ function Minimap({
       if (d.kind === "turn-expanded-footer") continue;
       if (d.kind === "turn-collapsed") {
         if (d.turn.tOffsetMs === undefined) continue;
+        if (d.turn.tOffsetMs < winStart || d.turn.tOffsetMs > winEnd) continue;
         withTime.push({
           kind: "turn",
           turn: d.turn,
@@ -1778,6 +1822,7 @@ function Minimap({
       } else {
         // presentation row
         if (d.row.tOffsetMs === undefined) continue;
+        if (d.row.tOffsetMs < winStart || d.row.tOffsetMs > winEnd) continue;
         withTime.push({
           kind: "row",
           row: d.row,
@@ -1791,7 +1836,9 @@ function Minimap({
     // the start of the next idle band (or the next row, whichever comes
     // first). This stops a row's rectangle from spanning across an idle
     // gap and visually swallowing it.
-    const idleBands = (rawIdleBands ?? []).slice().sort((a, b) => a.start - b.start);
+    const idleBands = (rawIdleBands ?? [])
+      .filter((b) => b.end > winStart && b.start < winEnd)
+      .sort((a, b) => a.start - b.start);
     const nextIdleStartFrom = (t: number): number | undefined => {
       for (const b of idleBands) {
         if (b.start >= t) return b.start;
@@ -1805,12 +1852,15 @@ function Minimap({
       const start = item.start;
       const nextRowStart = next?.start;
       const nextIdleStart = nextIdleStartFrom(start + 1);
-      // Cap end to whichever comes first: next visible row, next idle band.
+      // Cap end to whichever comes first: next visible row, next idle band,
+      // or the window's right edge (so a day's last segment doesn't bleed
+      // past the scoped window into the next day).
       const cap = (raw: number) =>
         Math.min(
           raw,
           nextRowStart ?? Number.POSITIVE_INFINITY,
           nextIdleStart ?? Number.POSITIVE_INFINITY,
+          winEnd,
         );
 
       if (item.kind === "turn") {
@@ -1891,7 +1941,7 @@ function Minimap({
       }
     }
     return bucketed;
-  }, [displayRows, safeDur, rawIdleBands]);
+  }, [displayRows, safeDur, rawIdleBands, winStart, winEnd]);
 
   /* Sequential layout with a minimum displayed width per segment.
      - Raw proportional width = (seg.end - seg.start) / safeDur * WIDTH
@@ -1944,10 +1994,10 @@ function Minimap({
   // sweep — O(N×L) where L is the number of lanes (small in practice).
   // Returns a Map agentId → laneIndex plus the total lane count.
   const { laneOf, laneCount } = useMemo(() => {
-    if (!subagents || subagents.length === 0) {
+    if (winSubagents.length === 0) {
       return { laneOf: new Map<string, number>(), laneCount: 0 };
     }
-    const sorted = [...subagents].sort(
+    const sorted = [...winSubagents].sort(
       (a, b) => (a.startTOffsetMs ?? 0) - (b.startTOffsetMs ?? 0),
     );
     const laneEnds: number[] = [];
@@ -1970,7 +2020,7 @@ function Minimap({
       laneOf.set(s.agentId, assigned);
     }
     return { laneOf, laneCount: laneEnds.length };
-  }, [subagents]);
+  }, [winSubagents]);
 
   const SUB_BLOCK_TOP = MAIN_H + SUB_LANE_GAP;
   const SUB_LANES_H = laneCount > 0 ? laneCount * SUB_LANE_H : 0;
@@ -1985,7 +2035,7 @@ function Minimap({
     // matching the open-ended bar the render draws. Counting only placeable
     // runs keeps wfLaneCount in lockstep with what renders, so no empty
     // reserved band appears.
-    const placeable = (workflows ?? []).filter((w) => w.startTOffsetMs !== undefined);
+    const placeable = winWorkflows;
     if (placeable.length === 0) {
       return { wfLaneOf: new Map<string, number>(), wfLaneCount: 0 };
     }
@@ -1996,7 +2046,7 @@ function Minimap({
     const wfLaneOf = new Map<string, number>();
     for (const w of sorted) {
       const start = w.startTOffsetMs ?? 0;
-      const end = w.endTOffsetMs ?? safeDur;
+      const end = w.endTOffsetMs ?? winEnd;
       let assigned = -1;
       for (let i = 0; i < laneEnds.length; i++) {
         if (laneEnds[i]! <= start) {
@@ -2012,7 +2062,7 @@ function Minimap({
       wfLaneOf.set(w.runId, assigned);
     }
     return { wfLaneOf, wfLaneCount: laneEnds.length };
-  }, [workflows, safeDur]);
+  }, [winWorkflows, winEnd]);
 
   const SUB_BLOCK_BOTTOM = MAIN_H + (laneCount > 0 ? SUB_LANE_GAP + SUB_LANES_H : 0);
   const WF_BLOCK_TOP = SUB_BLOCK_BOTTOM + (wfLaneCount > 0 ? SUB_LANE_GAP : 0);
@@ -2153,7 +2203,7 @@ function Minimap({
             glance. Bars use the same msToX mapping as the main timeline
             so the subagent's start/end aligns vertically with whatever
             was happening in the main session at that time. */}
-        {laneCount > 0 && subagents && (
+        {laneCount > 0 && winSubagents.length > 0 && (
           <g>
             {/* Faint divider line above the subagent lane block */}
             <line
@@ -2165,7 +2215,7 @@ function Minimap({
               strokeWidth="0.6"
               strokeDasharray="2 4"
             />
-            {subagents.map((s) => {
+            {winSubagents.map((s) => {
               const lane = laneOf.get(s.agentId) ?? 0;
               if (s.startTOffsetMs === undefined || s.endTOffsetMs === undefined) return null;
               const startX = msToX(s.startTOffsetMs);
@@ -2217,7 +2267,7 @@ function Minimap({
             time axis as the main timeline, colored by status (orange tier,
             distinct from the blue/purple subagents). The agent count is the
             headline — a single Workflow tool call hides a whole fleet. */}
-        {wfLaneCount > 0 && workflows && (
+        {wfLaneCount > 0 && winWorkflows.length > 0 && (
           <g>
             <line
               x1={0}
@@ -2228,7 +2278,7 @@ function Minimap({
               strokeWidth="0.6"
               strokeDasharray="2 4"
             />
-            {workflows.map((w) => {
+            {winWorkflows.map((w) => {
               if (w.startTOffsetMs === undefined) return null;
               const lane = wfLaneOf.get(w.runId) ?? 0;
               const startX = msToX(w.startTOffsetMs);
@@ -2236,7 +2286,7 @@ function Minimap({
               // the session end so it's visible (and dashed, to read as ongoing)
               // rather than vanishing while still occupying a reserved lane.
               const inProgress = w.endTOffsetMs === undefined;
-              const endX = msToX(w.endTOffsetMs ?? safeDur);
+              const endX = msToX(w.endTOffsetMs ?? winEnd);
               const wWidth = Math.max(endX - startX, 8);
               const y = WF_BLOCK_TOP + lane * WF_LANE_H;
               const h = WF_LANE_H - 2;
@@ -2283,6 +2333,7 @@ function Minimap({
         {/* PR markers — diamond + vertical line at each `gh pr create` */}
         {prMarkers?.map((pr, i) => {
           if (pr.tOffsetMs === undefined) return null;
+          if (pr.tOffsetMs < winStart || pr.tOffsetMs > winEnd) return null;
           const x = msToX(pr.tOffsetMs);
           return (
             <g
@@ -2320,6 +2371,7 @@ function Minimap({
         })}
 
         {coldResumeMarkers?.map((cr, i) => {
+          if (cr.tOffsetMs < winStart || cr.tOffsetMs > winEnd) return null;
           const x = msToX(cr.tOffsetMs);
           return (
             <g
@@ -2336,12 +2388,17 @@ function Minimap({
                 strokeWidth="1.5"
                 strokeDasharray="4 3"
                 opacity="0.75"
+                pointerEvents="none"
               />
+              {/* Hover hit-area limited to the diamond itself — a wider/taller
+                  target used to swallow hovers+clicks meant for adjacent
+                  user-prompt markers sitting right beside the cache-rebuild
+                  point. */}
               <rect
-                x={x - 8}
-                y={0}
-                width={16}
-                height={TOTAL_H}
+                x={x - 6}
+                y={MAIN_H / 2 - 8}
+                width={12}
+                height={16}
                 fill="transparent"
               />
               <polygon
@@ -2349,6 +2406,7 @@ function Minimap({
                 fill="#D97706"
                 stroke="var(--af-surface)"
                 strokeWidth="1.5"
+                pointerEvents="none"
               />
             </g>
           );
@@ -2446,33 +2504,7 @@ function Minimap({
   );
 }
 
-/** Color a sub-agent bar by its type. Background runs use a brighter
- *  variant of their color so true parallelism is visually distinct from
- *  blocking subagent calls (where the parent waits and there's no
- *  meaningful overlap with main session work). */
-function subagentColor(agentType: string, background?: boolean): string {
-  const palette: Record<string, [string, string]> = {
-    "general-purpose": ["#5C84C3", "#7BA3DC"],
-    Explore: ["#A855F7", "#C57BFF"],
-    Plan: ["#F59E0B", "#FFBD3D"],
-    "code-reviewer": ["#34D399", "#5EE5B0"],
-    "playwright-qa-verifier": ["#22D3EE", "#67E8F9"],
-    "claude-code-guide": ["#EC4899", "#F472B6"],
-  };
-  const [base, bright] = palette[agentType] ?? ["#8A8580", "#A8A19A"];
-  return background ? bright : base;
-}
-
-/** Workflow signature color, modulated by run status. Deliberately a warm
- *  orange — distinct from the blue/purple subagent palette so workflow lanes
- *  read as a different tier on the minimap. Failed runs go red, in-flight
- *  runs go green. */
-function workflowColor(status: string): string {
-  const s = status.toLowerCase();
-  if (s === "failed" || s === "aborted" || s === "error") return "#EF4444";
-  if (s === "running" || s === "in_progress" || s === "active") return "#10B981";
-  return "#EA580C";
-}
+// subagentColor, workflowColor moved to ./session-view/colors.ts
 
 function MinimapHoverCard({
   containerRef,
@@ -3070,6 +3102,10 @@ function TranscriptList({
   team,
   model,
   rawIdleBands,
+  sessionDays,
+  entryByDay,
+  dayStripRefs,
+  onJumpAcrossDay,
 }: {
   displayRows: DisplayRow[];
   rowRefs: React.MutableRefObject<Record<number, HTMLDivElement | null>>;
@@ -3084,6 +3120,20 @@ function TranscriptList({
    *  row whose start matches a band's end, so Codex sessions get the same
    *  "Session idle X minutes" markers Claude has always had. */
   rawIdleBands?: { start: number; end: number; durationMs: number }[];
+  /** Day buckets (sorted by startMs) + per-day digest cards. The body drops a
+   *  card at each day's first row so per-day perception sits inline with that
+   *  day's work instead of stacked at the top. */
+  sessionDays: { key: string; startMs: number; endMs: number; count: number }[];
+  entryByDay: Map<string, Entry>;
+  dayStripRefs: React.MutableRefObject<Record<string, HTMLDivElement | null>>;
+  /** Hop to an adjacent day from an inline day-boundary button.
+   *  (selectKey, scrollKey, block, fallbackRowIndex). */
+  onJumpAcrossDay: (
+    selectKey: string,
+    scrollKey: string,
+    block: "start" | "end",
+    fallbackIndex: number,
+  ) => void;
 }) {
   // Find the last collapsed turn index so we can mark it as in-progress
   // when the session is live.
@@ -3116,8 +3166,26 @@ function TranscriptList({
     if (d.kind === "turn-expanded-footer") return undefined;
     return d.row.tOffsetMs;
   };
+  // A display row → its event PRIMARY index (what jumpAcrossDay's turn/row
+  // lookups are keyed by — NOT the displayRows loop position).
+  const rowPrimaryIndexOf = (d: DisplayRow): number =>
+    d.kind === "presentation" ? rowPrimaryIndex(d.row) : d.turn.firstPrimaryIndex;
+  /** Which local day a row falls in: the last day bucket whose start is at or
+   *  before the row's offset. sessionDays is pre-sorted by startMs. */
+  const dayKeyForOffset = (tOff: number | undefined): string | null => {
+    if (tOff === undefined) return null;
+    let key: string | null = null;
+    for (const dd of sessionDays) {
+      if (dd.startMs <= tOff) key = dd.key;
+      else break;
+    }
+    return key;
+  };
 
   const out: React.ReactNode[] = [];
+  // Tracks the day of the last emitted row so a day's digest card is dropped
+  // once, before that day's first non-indented row.
+  let currentDayKey: string | null = null;
   // A user row and the turn-collapsed row that follows it share a
   // tOffsetMs (turn anchors at the user message — see buildMegaRows), so
   // both would match the same between-turn band without this guard. Track
@@ -3139,6 +3207,54 @@ function TranscriptList({
         emittedBandStarts.add(band.start);
         out.push(<IdleDivider key={`idle-before-${i}`} gapMs={band.durationMs} />);
       }
+      // Day boundary: drop this day's digest card at its first row (after any
+      // overnight idle divider that led into the day) so per-day perception
+      // sits inline with that day's work, not stacked at the top. The boundary
+      // also gets inline jump controls so you can page across days while
+      // reading — "↓ start of next day" sits at the bottom of the day that just
+      // ended, "↑ end of previous day" at the top of the new one.
+      const dk = dayKeyForOffset(rowTOffset(d));
+      if (dk && dk !== currentDayKey) {
+        const endedKey = currentDayKey; // day that just ended; null on the first day
+        currentDayKey = dk;
+        // Fallback scroll target for days with no digest card: the day's first
+        // row by PRIMARY index (i is the displayRows position — wrong key space).
+        const firstIdx = rowPrimaryIndexOf(d);
+        if (endedKey) {
+          out.push(
+            <DayJumpRow
+              key={`daydown-${dk}`}
+              dir="down"
+              label={formatDayKey(dk)}
+              onClick={() => onJumpAcrossDay(dk, dk, "start", firstIdx)}
+            />,
+          );
+        }
+        const dayEntry = entryByDay.get(dk);
+        if (dayEntry) {
+          out.push(
+            <div
+              key={`daystrip-${dk}`}
+              ref={(el) => {
+                dayStripRefs.current[dk] = el;
+              }}
+              style={{ marginBottom: 12, scrollMarginTop: stickyOffset }}
+            >
+              <EntryDayStrip entry={dayEntry} />
+            </div>,
+          );
+        }
+        if (endedKey) {
+          out.push(
+            <DayJumpRow
+              key={`dayup-${dk}`}
+              dir="up"
+              label={formatDayKey(endedKey)}
+              onClick={() => onJumpAcrossDay(endedKey, dk, "end", firstIdx)}
+            />,
+          );
+        }
+      }
     }
 
     // Collapsed turn summary row
@@ -3235,6 +3351,51 @@ function IdleDivider({ gapMs }: { gapMs: number }) {
   );
 }
 
+/** Inline cross-day jump control rendered at each day boundary. "down" sits at
+ *  the bottom of the day that just ended and jumps to the start of the next day;
+ *  "up" sits at the top of the new day and jumps to the end of the previous one.
+ *  The day always follows the scroll position (see followDayToScroll); these are
+ *  a one-click shortcut across the long idle gap between days so you don't have
+ *  to hand-scroll the whole span. "down" (start of next day) lands that day's
+ *  first row at the header line so the day-follow agrees; "up" (end of previous
+ *  day) scrolls the new day's strip to the viewport bottom, leaving the previous
+ *  day's tail above the header line. */
+function DayJumpRow({
+  dir,
+  label,
+  onClick,
+}: {
+  dir: "up" | "down";
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <div style={{ display: "flex", justifyContent: "center", margin: "6px 0" }}>
+      <button
+        type="button"
+        onClick={onClick}
+        title={dir === "up" ? `Go to the end of ${label}` : `Go to the start of ${label}`}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          fontSize: 11,
+          fontFamily: "var(--font-mono)",
+          color: "var(--af-text-secondary)",
+          background: "var(--af-surface)",
+          border: "1px solid var(--af-border-subtle)",
+          borderRadius: 100,
+          padding: "3px 12px",
+          cursor: "pointer",
+        }}
+      >
+        {dir === "up" ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+        {dir === "up" ? `End of ${label}` : `Start of ${label}`}
+      </button>
+    </div>
+  );
+}
+
 function findColdResumeInDisplayRow(
   d: DisplayRow,
 ): SessionEvent["coldResume"] | null {
@@ -4328,170 +4489,13 @@ function ToolGroupLabel({
   );
 }
 
-function TokenChip({ usage }: { usage: NonNullable<SessionEvent["usage"]> }) {
-  const [hover, setHover] = useState(false);
-  const totalIn = usage.input + usage.cacheRead + usage.cacheWrite;
-  const pctRead = totalIn > 0 ? Math.round((usage.cacheRead / totalIn) * 100) : 0;
-  return (
-    <span
-      style={{
-        position: "relative",
-        fontFamily: "var(--font-mono)",
-        fontSize: 11,
-        color: "var(--af-text-secondary)",
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        whiteSpace: "nowrap",
-      }}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    >
-      <span style={{ opacity: 0.6 }}>▤</span>
-      {formatTokens(totalIn)} / {formatTokens(usage.output)}
-      {hover && (
-        <Tooltip style={{ right: 0, top: "calc(100% + 6px)", minWidth: 180 }}>
-          <TooltipRow label="Input" value={usage.input.toLocaleString()} />
-          <TooltipRow
-            label="Cache read"
-            value={`${usage.cacheRead.toLocaleString()} (${pctRead}%)`}
-          />
-          <TooltipRow label="Cache write" value={usage.cacheWrite.toLocaleString()} />
-          <TooltipRow label="Output" value={usage.output.toLocaleString()} />
-        </Tooltip>
-      )}
-    </span>
-  );
-}
-
-/** Like TokenChip but for per-turn aggregates. Primary display is
- *  fresh input / output (not the cache-inflated sum), consistent with
- *  the session header. Tooltip shows the full breakdown plus a footnote
- *  reminding that cache reads are cumulative. */
-function TurnTokenChip({
-  usage,
-}: {
-  usage: { input: number; output: number; cacheRead: number; cacheWrite: number };
-}) {
-  const [hover, setHover] = useState(false);
-  const totalIn = usage.input + usage.cacheRead + usage.cacheWrite;
-  const pctRead = totalIn > 0 ? Math.round((usage.cacheRead / totalIn) * 100) : 0;
-  return (
-    <span
-      style={{
-        position: "relative",
-        fontFamily: "var(--font-mono)",
-        fontSize: 11,
-        color: "var(--af-text-tertiary)",
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        whiteSpace: "nowrap",
-        cursor: "default",
-      }}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    >
-      <span style={{ opacity: 0.6 }}>▤</span>
-      {formatTokens(usage.input)} / {formatTokens(usage.output)}
-      {hover && (
-        <Tooltip style={{ right: 0, top: "calc(100% + 6px)", minWidth: 220 }}>
-          <TooltipRow label="Input (fresh)" value={usage.input.toLocaleString()} />
-          <TooltipRow label="Output" value={usage.output.toLocaleString()} />
-          <TooltipRow
-            label="Cache read"
-            value={`${usage.cacheRead.toLocaleString()} (${pctRead}%)`}
-          />
-          <TooltipRow label="Cache write" value={usage.cacheWrite.toLocaleString()} />
-          <div
-            style={{
-              marginTop: 6,
-              paddingTop: 6,
-              borderTop: "1px solid rgba(241,245,249,0.12)",
-              opacity: 0.65,
-              fontSize: 10,
-              whiteSpace: "normal",
-              lineHeight: 1.4,
-            }}
-          >
-            Cumulative across all requests in this turn.
-          </div>
-        </Tooltip>
-      )}
-    </span>
-  );
-}
+// TokenChip, TurnTokenChip moved to ./session-view/token-stats.tsx
 
 /* ------------------------------------------------------------------ */
 /*  Debug list                                                         */
 /* ------------------------------------------------------------------ */
 
-function DebugList({ events }: { events: SessionEvent[] }) {
-  // Rebuild a JSON view from the structured fields on the event. The
-  // original `raw` field is stripped server-side before serialization
-  // (see app/sessions/[id]/page.tsx) because including the full JSONL
-  // line per event doubles the RSC payload on large sessions. All the
-  // useful data is already on the structured event; this view surfaces
-  // it in the same shape you'd get from the raw JSONL.
-  const shapeForDebug = (e: SessionEvent) => ({
-    type: e.rawType,
-    index: e.index,
-    uuid: e.uuid,
-    parentUuid: e.parentUuid,
-    timestamp: e.timestamp,
-    role: e.role,
-    messageId: e.messageId,
-    stopReason: e.stopReason,
-    model: e.model,
-    requestId: e.requestId,
-    toolName: e.toolName,
-    toolUseId: e.toolUseId,
-    attachmentType: e.attachmentType,
-    usage: e.usage,
-    blocks: e.blocks,
-  });
-
-  return (
-    <div style={{ padding: "8px 0" }}>
-      {events.map((e) => (
-        <details
-          key={e.index}
-          style={{
-            borderBottom: "1px solid var(--af-border-subtle)",
-            padding: "8px 12px",
-          }}
-        >
-          <summary
-            style={{
-              cursor: "pointer",
-              fontFamily: "var(--font-mono)",
-              fontSize: 12,
-              color: "var(--af-text-secondary)",
-            }}
-          >
-            #{e.index} · {e.rawType}
-            {e.attachmentType ? `/${e.attachmentType}` : ""} · {e.timestamp ?? "(no ts)"}
-          </summary>
-          <pre
-            style={{
-              marginTop: 8,
-              padding: 12,
-              background: "var(--background)",
-              border: "1px solid var(--af-border-subtle)",
-              borderRadius: 6,
-              fontSize: 11,
-              overflow: "auto",
-              maxHeight: 400,
-              color: "var(--af-text-secondary)",
-            }}
-          >
-            {JSON.stringify(shapeForDebug(e), null, 2)}
-          </pre>
-        </details>
-      ))}
-    </div>
-  );
-}
+// DebugList moved to ./session-view/debug-list.tsx
 
 /* ------------------------------------------------------------------ */
 /*  SubagentDrawer                                                    */
@@ -4504,412 +4508,98 @@ function DebugList({ events }: { events: SessionEvent[] }) {
 /*  this subagent off.                                                */
 /* ------------------------------------------------------------------ */
 
-function SubagentDrawer({
-  subagent,
-  onClose,
+// SubagentDrawer moved to ./session-view/subagent-drawer.tsx
+
+/* ------------------------------------------------------------------ */
+/*  Workflows panel                                                    */
+/*                                                                     */
+/*  A single `Workflow` tool call collapses a whole dynamic-workflow   */
+/*  fan-out into one transcript row. This panel surfaces what that row */
+/*  actually did: each run's spawned-agent count, tool calls, tokens,  */
+/*  phases, and progress log — the fleet work the transcript hides.    */
+/* ------------------------------------------------------------------ */
+
+function WorkflowsPanel({
+  workflows,
+  spawnedAgentCount,
+  focusRunId,
+  selectedAgentKey,
+  onOpenAgent,
   onJumpToParent,
+  onClearFocus,
 }: {
-  subagent: SubagentRun;
-  onClose: () => void;
-  onJumpToParent: () => void;
+  workflows: WorkflowRun[];
+  spawnedAgentCount: number;
+  focusRunId?: string | null;
+  selectedAgentKey?: string | null;
+  onOpenAgent: (runId: string, agent: WorkflowRun["agents"][number]) => void;
+  onJumpToParent: (toolUseId?: string) => void;
+  onClearFocus?: () => void;
 }) {
-  const s = subagent;
-  const fill = subagentColor(s.agentType, s.runInBackground);
-  const startOff = formatOffset(s.startTOffsetMs);
-  const endOff = formatOffset(s.endTOffsetMs);
-  const dur = s.durationMs !== undefined ? formatGap(s.durationMs) : "—";
-  const totalIn = s.totalUsage.input + s.totalUsage.cacheRead + s.totalUsage.cacheWrite;
-  const pctRead = totalIn > 0 ? Math.round((s.totalUsage.cacheRead / totalIn) * 100) : 0;
-
+  const totalTokens = workflows.reduce((n, w) => n + w.totalTokens, 0);
+  const totalTools = workflows.reduce((n, w) => n + w.toolCallCount, 0);
   return (
-    <div>
-      {/* Sticky title bar */}
+    <section
+      style={{
+        marginBottom: 16,
+        border: "1px solid var(--af-border-subtle)",
+        borderRadius: 10,
+        background: "var(--af-surface)",
+        overflow: "hidden",
+      }}
+    >
       <div
         style={{
-          padding: "14px 20px",
-          borderBottom: "1px solid var(--af-border-subtle)",
           display: "flex",
           alignItems: "center",
           gap: 10,
-          background: "var(--af-surface)",
-          position: "sticky",
-          top: 0,
-          zIndex: 1,
           flexWrap: "wrap",
+          padding: "10px 14px",
+          borderBottom: "1px solid var(--af-border-subtle)",
+          background: "var(--af-surface-subtle, rgba(234,88,12,0.04))",
         }}
       >
         <span
           style={{
-            fontSize: 11,
-            fontWeight: 600,
-            padding: "3px 10px",
-            borderRadius: 4,
-            background: fill,
-            color: "#fff",
-          }}
-        >
-          {s.agentType}
-        </span>
-        {s.runInBackground && (
-          <span
-            style={{
-              fontSize: 9,
-              fontWeight: 600,
-              padding: "2px 8px",
-              borderRadius: 4,
-              background: "var(--af-warning-subtle)",
-              color: "var(--af-warning)",
-              textTransform: "uppercase",
-              letterSpacing: "0.04em",
-            }}
-          >
-            background
-          </span>
-        )}
-        <span
-          style={{
-            fontSize: 14,
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 7,
+            fontSize: 13,
             fontWeight: 600,
             color: "var(--af-text)",
-            flex: 1,
-            minWidth: 0,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
           }}
-          title={s.description}
         >
-          {s.description}
+          <WorkflowIcon size={14} style={{ color: "#EA580C" }} />
+          Workflows
         </span>
-        <button
-          onClick={onClose}
+        <span
           style={{
-            background: "transparent",
-            border: "none",
-            cursor: "pointer",
+            fontSize: 11.5,
             color: "var(--af-text-tertiary)",
-            padding: 4,
-            borderRadius: 4,
+            fontFamily: "var(--font-mono)",
           }}
-          aria-label="Close"
         >
-          <X size={16} />
-        </button>
-      </div>
-
-      {/* Meta strip */}
-      <div
-        style={{
-          padding: "10px 20px",
-          fontFamily: "var(--font-mono)",
-          fontSize: 11,
-          color: "var(--af-text-tertiary)",
-          borderBottom: "1px solid var(--af-border-subtle)",
-          display: "grid",
-          gridTemplateColumns: "auto 1fr",
-          columnGap: 10,
-          rowGap: 3,
-        }}
-      >
-        <span style={{ opacity: 0.7 }}>range</span>
-        <span style={{ color: "var(--af-text-secondary)" }}>
-          {startOff} → {endOff}
+          {workflows.length} run{workflows.length === 1 ? "" : "s"} ·{" "}
+          {spawnedAgentCount.toLocaleString()} agents · {totalTools.toLocaleString()} tool calls ·{" "}
+          {formatTokens(totalTokens)} tok orchestrated
         </span>
-        <span style={{ opacity: 0.7 }}>duration</span>
-        <span style={{ color: "var(--af-text-secondary)" }}>{dur}</span>
-        {s.model && (
-          <>
-            <span style={{ opacity: 0.7 }}>model</span>
-            <span style={{ color: "var(--af-text-secondary)" }}>{s.model}</span>
-          </>
-        )}
-        {s.parentToolUseId && (
-          <>
-            <span style={{ opacity: 0.7 }}>parent</span>
-            <span style={{ color: "var(--af-text-secondary)" }}>
-              {s.parentToolUseId.slice(0, 24)}…
-            </span>
-          </>
-        )}
       </div>
-
-      {/* Activity stats */}
-      <div
-        style={{
-          padding: "14px 20px",
-          borderBottom: "1px solid var(--af-border-subtle)",
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr 1fr",
-          gap: 10,
-        }}
-      >
-        <StatCell label="Events" value={String(s.eventCount)} />
-        <StatCell label="Messages" value={String(s.assistantMessageCount ?? 0)} />
-        <StatCell label="Tool calls" value={String(s.toolCallCount ?? 0)} />
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {workflows.map((w) => (
+          <WorkflowCard
+            key={w.runId}
+            w={w}
+            focused={focusRunId === w.runId}
+            selectedAgentKey={selectedAgentKey}
+            onOpenAgent={onOpenAgent}
+            onJumpToParent={onJumpToParent}
+            onClearFocus={onClearFocus}
+          />
+        ))}
       </div>
-
-      {/* Token breakdown */}
-      <div
-        style={{
-          padding: "12px 20px",
-          borderBottom: "1px solid var(--af-border-subtle)",
-          fontSize: 11,
-          fontFamily: "var(--font-mono)",
-          color: "var(--af-text-secondary)",
-          display: "flex",
-          flexDirection: "column",
-          gap: 3,
-        }}
-      >
-        <TokenLine label="Input (fresh)" value={s.totalUsage.input} />
-        <TokenLine label="Output" value={s.totalUsage.output} />
-        <TokenLine
-          label="Cache read"
-          value={s.totalUsage.cacheRead}
-          suffix={` (${pctRead}%)`}
-        />
-        <TokenLine label="Cache write" value={s.totalUsage.cacheWrite} />
-      </div>
-
-      {/* Tool breakdown */}
-      {s.toolCalls && s.toolCalls.length > 0 && (
-        <div
-          style={{
-            padding: "14px 20px",
-            borderBottom: "1px solid var(--af-border-subtle)",
-          }}
-        >
-          <div
-            style={{
-              fontSize: 10,
-              fontWeight: 600,
-              textTransform: "uppercase",
-              letterSpacing: "0.04em",
-              color: "var(--af-text-tertiary)",
-              marginBottom: 8,
-            }}
-          >
-            Tools used
-          </div>
-          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
-            {s.toolCalls.map((t) => (
-              <span
-                key={t.name}
-                style={{
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: 4,
-                  fontSize: 11,
-                  padding: "2px 8px",
-                  borderRadius: 4,
-                  background: "var(--af-border-subtle)",
-                  color: "var(--af-text)",
-                  fontFamily: "var(--font-mono)",
-                }}
-              >
-                <b style={{ fontWeight: 600 }}>{shortenToolName(t.name)}</b>
-                <span style={{ color: "var(--af-text-tertiary)" }}>×{t.count}</span>
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Parent prompt (what the parent asked the subagent to do) */}
-      {s.prompt && (
-        <div
-          style={{
-            padding: "14px 20px",
-            borderBottom: "1px solid var(--af-border-subtle)",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              marginBottom: 8,
-            }}
-          >
-            <div
-              style={{
-                fontSize: 10,
-                fontWeight: 600,
-                textTransform: "uppercase",
-                letterSpacing: "0.04em",
-                color: "var(--af-text-tertiary)",
-              }}
-            >
-              Prompt
-            </div>
-            {s.parentToolUseId && (
-              <button
-                type="button"
-                onClick={onJumpToParent}
-                style={{
-                  fontSize: 10,
-                  color: "var(--af-accent)",
-                  background: "transparent",
-                  border: "none",
-                  cursor: "pointer",
-                  padding: 0,
-                }}
-              >
-                Jump to parent →
-              </button>
-            )}
-          </div>
-          <div className="sl-prose" style={{ fontSize: 12.5 }}>
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              components={{
-                a: (props) => (
-                  <a
-                    {...props}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    style={{
-                      color: "var(--af-accent)",
-                      textDecoration: "underline",
-                    }}
-                  />
-                ),
-              }}
-            >
-              {s.prompt}
-            </ReactMarkdown>
-          </div>
-        </div>
-      )}
-
-      {/* Final text */}
-      {s.finalText && (
-        <div style={{ padding: "14px 20px" }}>
-          <div
-            style={{
-              fontSize: 10,
-              fontWeight: 600,
-              textTransform: "uppercase",
-              letterSpacing: "0.04em",
-              color: "var(--af-text-tertiary)",
-              marginBottom: 8,
-            }}
-          >
-            Final result
-          </div>
-          <div className="sl-prose" style={{ fontSize: 13 }}>
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              components={{
-                a: (props) => (
-                  <a
-                    {...props}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    style={{
-                      color: "var(--af-accent)",
-                      textDecoration: "underline",
-                    }}
-                  />
-                ),
-              }}
-            >
-              {s.finalText}
-            </ReactMarkdown>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  Workflows panel                                                    */
-/*                                                                     */
-/*  A single `Workflow` tool call collapses a whole dynamic-workflow   */
-/*  fan-out into one transcript row. This panel surfaces what that row */
-/*  actually did: each run's spawned-agent count, tool calls, tokens,  */
-/*  phases, and progress log — the fleet work the transcript hides.    */
-/* ------------------------------------------------------------------ */
-
-function WorkflowsPanel({
-  workflows,
-  spawnedAgentCount,
-  focusRunId,
-  selectedAgentKey,
-  onOpenAgent,
-  onJumpToParent,
-}: {
-  workflows: WorkflowRun[];
-  spawnedAgentCount: number;
-  focusRunId?: string | null;
-  selectedAgentKey?: string | null;
-  onOpenAgent: (runId: string, agent: WorkflowRun["agents"][number]) => void;
-  onJumpToParent: (toolUseId?: string) => void;
-}) {
-  const totalTokens = workflows.reduce((n, w) => n + w.totalTokens, 0);
-  const totalTools = workflows.reduce((n, w) => n + w.toolCallCount, 0);
-  return (
-    <section
-      style={{
-        marginBottom: 16,
-        border: "1px solid var(--af-border-subtle)",
-        borderRadius: 10,
-        background: "var(--af-surface)",
-        overflow: "hidden",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          flexWrap: "wrap",
-          padding: "10px 14px",
-          borderBottom: "1px solid var(--af-border-subtle)",
-          background: "var(--af-surface-subtle, rgba(234,88,12,0.04))",
-        }}
-      >
-        <span
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 7,
-            fontSize: 13,
-            fontWeight: 600,
-            color: "var(--af-text)",
-          }}
-        >
-          <WorkflowIcon size={14} style={{ color: "#EA580C" }} />
-          Workflows
-        </span>
-        <span
-          style={{
-            fontSize: 11.5,
-            color: "var(--af-text-tertiary)",
-            fontFamily: "var(--font-mono)",
-          }}
-        >
-          {workflows.length} run{workflows.length === 1 ? "" : "s"} ·{" "}
-          {spawnedAgentCount.toLocaleString()} agents · {totalTools.toLocaleString()} tool calls ·{" "}
-          {formatTokens(totalTokens)} tok orchestrated
-        </span>
-      </div>
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        {workflows.map((w) => (
-          <WorkflowCard
-            key={w.runId}
-            w={w}
-            focused={focusRunId === w.runId}
-            selectedAgentKey={selectedAgentKey}
-            onOpenAgent={onOpenAgent}
-            onJumpToParent={onJumpToParent}
-          />
-        ))}
-      </div>
-    </section>
-  );
-}
+    </section>
+  );
+}
 
 function WorkflowCard({
   w,
@@ -4917,12 +4607,14 @@ function WorkflowCard({
   selectedAgentKey,
   onOpenAgent,
   onJumpToParent,
+  onClearFocus,
 }: {
   w: WorkflowRun;
   focused?: boolean;
   selectedAgentKey?: string | null;
   onOpenAgent: (runId: string, agent: WorkflowRun["agents"][number]) => void;
   onJumpToParent: (toolUseId?: string) => void;
+  onClearFocus?: () => void;
 }) {
   const [open, setOpen] = useState(focused);
   const cardRef = useRef<HTMLDivElement>(null);
@@ -4942,14 +4634,17 @@ function WorkflowCard({
       ref={cardRef}
       style={{
         borderTop: "1px solid var(--af-border-subtle)",
-        background: focused ? "rgba(234,88,12,0.07)" : "transparent",
-        transition: "background 0.5s ease",
         scrollMarginTop: 120,
       }}
     >
       {/* Collapsed header — click to expand */}
       <button
-        onClick={() => setOpen((v) => !v)}
+        onClick={() => {
+          setOpen((v) => !v);
+          // Any toggle is the user taking over from the timeline jump — drop the
+          // focus highlight so it doesn't linger on a card they've moved past.
+          onClearFocus?.();
+        }}
         style={{
           width: "100%",
           display: "flex",
@@ -4972,7 +4667,11 @@ function WorkflowCard({
             fontFamily: "var(--font-mono)",
             fontSize: 13,
             fontWeight: 600,
-            color: "var(--af-text)",
+            color: focused ? "#EA580C" : "var(--af-text)",
+            background: focused ? "rgba(234,88,12,0.16)" : "transparent",
+            padding: "2px 8px",
+            borderRadius: 6,
+            transition: "background 0.4s ease, color 0.4s ease",
             minWidth: 0,
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -5054,7 +4753,7 @@ function WorkflowCard({
                   fontFamily: "var(--font-mono)",
                 }}
               >
-                Jump to Workflow call →
+                Jump to timeline →
               </button>
             )}
           </div>
@@ -5705,593 +5404,18 @@ function WorkflowRunLog({ logs }: { logs: string[] }) {
   );
 }
 
-function WfMiniStat({ icon, value }: { icon?: React.ReactNode; value: string }) {
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        fontSize: 11.5,
-        color: "var(--af-text-secondary)",
-        fontFamily: "var(--font-mono)",
-        whiteSpace: "nowrap",
-      }}
-    >
-      {icon && <span style={{ color: "var(--af-text-tertiary)", display: "inline-flex" }}>{icon}</span>}
-      {value}
-    </span>
-  );
-}
-
-function SectionLabel({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        fontSize: 10,
-        fontWeight: 600,
-        textTransform: "uppercase",
-        letterSpacing: "0.04em",
-        color: "var(--af-text-tertiary)",
-        marginBottom: 8,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function StatCell({ label, value }: { label: string; value: string }) {
-  return (
-    <div>
-      <div
-        style={{
-          fontSize: 9,
-          color: "var(--af-text-tertiary)",
-          textTransform: "uppercase",
-          letterSpacing: "0.04em",
-          fontWeight: 600,
-        }}
-      >
-        {label}
-      </div>
-      <div
-        style={{
-          fontSize: 18,
-          fontWeight: 700,
-          fontFamily: "var(--font-mono)",
-          color: "var(--af-text)",
-          marginTop: 2,
-        }}
-      >
-        {value}
-      </div>
-    </div>
-  );
-}
-
-function TokenLine({
-  label,
-  value,
-  suffix,
-}: {
-  label: string;
-  value: number;
-  suffix?: string;
-}) {
-  return (
-    <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
-      <span style={{ opacity: 0.7 }}>{label}</span>
-      <span>
-        {value.toLocaleString()}
-        {suffix && <span style={{ opacity: 0.65 }}>{suffix}</span>}
-      </span>
-    </div>
-  );
-}
+// WfMiniStat, SectionLabel, StatCell, TokenLine moved to ./session-view/workflows-shared.tsx
 
 /* ------------------------------------------------------------------ */
 /*  Drawer                                                             */
 /* ------------------------------------------------------------------ */
 
-function Drawer({
-  event,
-  row,
-  onClose,
-}: {
-  event: SessionEvent;
-  row: PresentationRow | null;
-  onClose: () => void;
-}) {
-  const [showDev, setShowDev] = useState(false);
-  const kind: PresentationRowKind = row?.kind ?? "agent";
-  const theme = ROLE_THEMES[kind];
-  const title = drawerTitle(row, event);
-  const hasUsage = !!event.usage && (event.usage.input > 0 || event.usage.output > 0);
-
-  return (
-    <div>
-      {/* Sticky title bar */}
-      <div
-        style={{
-          padding: "14px 20px",
-          borderBottom: "1px solid var(--af-border-subtle)",
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          background: "var(--af-surface)",
-          position: "sticky",
-          top: 0,
-          zIndex: 1,
-        }}
-      >
-        <span
-          style={{
-            fontSize: 11,
-            fontWeight: 600,
-            padding: "3px 10px",
-            borderRadius: 4,
-            background: theme.bg,
-            color: theme.fg,
-          }}
-        >
-          {theme.label}
-        </span>
-        <span
-          style={{
-            fontSize: 14,
-            fontWeight: 600,
-            color: "var(--af-text)",
-          }}
-        >
-          {title}
-        </span>
-        <button
-          onClick={onClose}
-          style={{
-            marginLeft: "auto",
-            background: "transparent",
-            border: "none",
-            cursor: "pointer",
-            color: "var(--af-text-tertiary)",
-            padding: 4,
-            borderRadius: 4,
-          }}
-        >
-          <X size={16} />
-        </button>
-      </div>
-
-      {/* Meta line — compact */}
-      <div
-        style={{
-          padding: "8px 20px",
-          fontFamily: "var(--font-mono)",
-          fontSize: 11,
-          color: "var(--af-text-tertiary)",
-          display: "flex",
-          gap: 10,
-          alignItems: "center",
-          flexWrap: "wrap",
-          borderBottom: "1px solid var(--af-border-subtle)",
-        }}
-      >
-        <span>{formatOffset(event.tOffsetMs)}</span>
-        {event.gapMs !== undefined && event.gapMs > 0 && <span>· {formatGap(event.gapMs)}</span>}
-        {hasUsage && event.usage && (
-          <span style={{ color: "var(--af-text-secondary)" }}>
-            · {formatTokens(event.usage.input + event.usage.cacheRead + event.usage.cacheWrite)}/
-            {formatTokens(event.usage.output)} tokens
-          </span>
-        )}
-        <button
-          onClick={() => setShowDev((s) => !s)}
-          style={{
-            marginLeft: "auto",
-            background: "transparent",
-            border: "none",
-            fontSize: 10,
-            color: "var(--af-text-tertiary)",
-            cursor: "pointer",
-            padding: 0,
-            fontFamily: "inherit",
-            textDecoration: "underline",
-            textUnderlineOffset: 2,
-          }}
-        >
-          {showDev ? "hide details" : "details"}
-        </button>
-      </div>
-
-      {/* Developer panel — collapsed by default */}
-      {showDev && (
-        <div
-          style={{
-            padding: "10px 20px 14px",
-            borderBottom: "1px solid var(--af-border-subtle)",
-            fontSize: 11,
-            color: "var(--af-text-secondary)",
-            fontFamily: "var(--font-mono)",
-            display: "flex",
-            flexDirection: "column",
-            gap: 4,
-          }}
-        >
-          {event.model && <div>model: {event.model}</div>}
-          {event.requestId && <div>request: {event.requestId}</div>}
-          {event.messageId && <div>message: {event.messageId}</div>}
-          {event.stopReason && <div>stop_reason: {event.stopReason}</div>}
-          {event.usage && (
-            <>
-              <div style={{ marginTop: 6, opacity: 0.7 }}>tokens</div>
-              <div> input: {event.usage.input.toLocaleString()}</div>
-              <div> output: {event.usage.output.toLocaleString()}</div>
-              <div> cache read: {event.usage.cacheRead.toLocaleString()}</div>
-              <div>
-                {"  "}cache write: {event.usage.cacheWrite.toLocaleString()}
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
-      {/* Content */}
-      <div style={{ padding: "18px 22px" }}>
-        <DrawerContent event={event} row={row} />
-      </div>
-    </div>
-  );
-}
-
-function drawerTitle(row: PresentationRow | null, event: SessionEvent): string {
-  if (row) {
-    switch (row.kind) {
-      case "user":
-        return "Message";
-      case "agent":
-        return "Message";
-      case "tool-group":
-        return `Tool use · ${formatToolSummary(row.toolNames)}`;
-      case "interrupt":
-        return "Interrupted";
-      case "model":
-        return "Model (zero-usage)";
-      case "error":
-        return "API error";
-      case "task-notification":
-        return `Background task · ${row.status}`;
-    }
-  }
-  return event.rawType;
-}
-
-function DrawerContent({ event, row }: { event: SessionEvent; row: PresentationRow | null }) {
-  // User rows can override their blocks (e.g. slash commands get a cleaned
-  // "/implement AGE-8" block instead of the raw XML).
-  if (row?.kind === "user" && row.displayBlocks) {
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-        {row.displayBlocks.map((b, i) => (
-          <BlockView key={i} block={b} />
-        ))}
-      </div>
-    );
-  }
-
-  // Task notifications: parsed fields in a clean key-value layout,
-  // not the raw <task-notification> XML blob.
-  if (row?.kind === "task-notification") {
-    const statusColor =
-      row.status === "success"
-        ? "var(--af-success)"
-        : row.status === "failed"
-          ? "var(--af-danger)"
-          : "var(--af-text-secondary)";
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-          }}
-        >
-          <span
-            style={{
-              fontSize: 11,
-              fontWeight: 600,
-              padding: "3px 10px",
-              borderRadius: 4,
-              background:
-                row.status === "success"
-                  ? "var(--af-success-subtle)"
-                  : row.status === "failed"
-                    ? "var(--af-danger-subtle)"
-                    : "var(--af-border-subtle)",
-              color: statusColor,
-              textTransform: "uppercase",
-              letterSpacing: "0.03em",
-            }}
-          >
-            {row.status}
-          </span>
-        </div>
-        <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--af-text)" }}>{row.summary}</div>
-        {(row.taskId || row.toolUseId || row.outputFile) && (
-          <div
-            style={{
-              fontSize: 11,
-              color: "var(--af-text-secondary)",
-              fontFamily: "var(--font-mono)",
-              display: "flex",
-              flexDirection: "column",
-              gap: 4,
-              paddingTop: 10,
-              borderTop: "1px solid var(--af-border-subtle)",
-            }}
-          >
-            {row.taskId && <div>task id: {row.taskId}</div>}
-            {row.toolUseId && <div>tool use: {row.toolUseId.slice(0, 24)}…</div>}
-            {row.outputFile && (
-              <div style={{ wordBreak: "break-all" }}>output: {row.outputFile}</div>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // Tool group: list all individual tool calls with their inputs
-  if (row?.kind === "tool-group" && row.count > 1) {
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
-        {row.events.map((e, i) => (
-          <div key={e.index}>
-            <div
-              style={{
-                fontSize: 11,
-                color: "var(--af-text-tertiary)",
-                marginBottom: 4,
-                fontFamily: "var(--font-mono)",
-              }}
-            >
-              #{i + 1} · {formatOffset(e.tOffsetMs)} · {e.toolUseId?.slice(0, 14)}…
-            </div>
-            {e.blocks.map((b, bi) => (
-              <BlockView key={bi} block={b} />
-            ))}
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  // Agent row: include thinking blocks from the same message.id if present
-  if (row?.kind === "agent" && row.groupedEvents.length > 1) {
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-        {row.groupedEvents.flatMap((e, i) =>
-          e.blocks.map((b, bi) => <BlockView key={`${i}-${bi}`} block={b} />),
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-      {event.blocks.map((b, i) => (
-        <BlockView key={i} block={b} />
-      ))}
-    </div>
-  );
-}
-function BlockView({ block }: { block: ContentBlock }) {
-  if (block.type === "text") {
-    return (
-      <div className="sl-prose">
-        <ReactMarkdown
-          remarkPlugins={[remarkGfm]}
-          components={{
-            a: (props) => (
-              <a
-                {...props}
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{
-                  color: "var(--af-accent)",
-                  textDecoration: "underline",
-                  textUnderlineOffset: 2,
-                }}
-              />
-            ),
-          }}
-        >
-          {block.text}
-        </ReactMarkdown>
-      </div>
-    );
-  }
-  if (block.type === "thinking") {
-    return (
-      <details>
-        <summary
-          style={{
-            cursor: "pointer",
-            fontSize: 11,
-            color: "var(--af-text-tertiary)",
-            marginBottom: 6,
-          }}
-        >
-          Thinking · {block.thinking.length} chars
-        </summary>
-        <div
-          style={{
-            fontSize: 12,
-            lineHeight: 1.6,
-            color: "var(--af-text-secondary)",
-            whiteSpace: "pre-wrap",
-            fontStyle: "italic",
-            borderLeft: "3px solid var(--af-border-subtle)",
-            paddingLeft: 12,
-            marginTop: 6,
-          }}
-        >
-          {block.thinking}
-        </div>
-      </details>
-    );
-  }
-  if (block.type === "tool_use") {
-    return <ToolUseCard name={block.name} input={block.input} />;
-  }
-  if (block.type === "tool_result") {
-    const text =
-      typeof block.content === "string" ? block.content : JSON.stringify(block.content, null, 2);
-    return (
-      <pre
-        style={{
-          fontSize: 12,
-          padding: 12,
-          background: "var(--background)",
-          border: "1px solid var(--af-border-subtle)",
-          borderRadius: 6,
-          overflow: "auto",
-          whiteSpace: "pre-wrap",
-          color: "var(--af-text)",
-          fontFamily: "var(--font-mono)",
-          maxHeight: 500,
-        }}
-      >
-        {text}
-      </pre>
-    );
-  }
-  return null;
-}
+// DrawerContent, BlockView moved to ./session-view/drawer.tsx
 
 /* ------------------------------------------------------------------ */
 /*  Helpers                                                            */
 /* ------------------------------------------------------------------ */
 
-function formatDurationHeader(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  const s = Math.round(ms / 1000);
-  if (s < 60) return `${s}s`;
-  const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m ${s % 60}s`;
-  // Roll up to hours — agent time can reach many hours once workflow
-  // execution is folded in, and "1116m" reads poorly.
-  const h = Math.floor(m / 60);
-  return `${h}h ${m % 60}m`;
-}
-
-function EntryDayStrip({ entry }: { entry: Entry }) {
-  const fmtDate = new Date(`${entry.local_day}T12:00:00`).toLocaleDateString("en-US", {
-    weekday: "short", month: "short", day: "numeric",
-  });
-  const durMin = Math.round(entry.numbers.active_min);
-  const enr = entry.enrichment;
-  const isPending = enr.status === "pending" || enr.status === "error";
-  const isTrivial = enr.status === "skipped_trivial";
-
-  return (
-    <div
-      style={{
-        border: "1px solid var(--af-border-subtle)",
-        borderRadius: 10,
-        padding: "12px 16px",
-        background: "var(--af-surface)",
-        fontSize: 13,
-        lineHeight: 1.5,
-      }}
-    >
-      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
-        <span
-          style={{
-            fontSize: 12,
-            color: "var(--af-text-tertiary)",
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 4,
-          }}
-        >
-          📅 {fmtDate}
-        </span>
-        {isTrivial ? (
-          <OutcomePill outcome="trivial" size="md" agent={entry.agent} />
-        ) : isPending ? (
-          <OutcomePill
-            outcome={null}
-            pending
-            sessionId={entry.session_id}
-            localDay={entry.local_day}
-            size="md"
-            agent={entry.agent}
-          />
-        ) : enr.outcome ? (
-          <OutcomePill outcome={enr.outcome} size="md" agent={entry.agent} />
-        ) : null}
-        <span
-          style={{
-            fontFamily: "var(--font-mono)",
-            fontSize: 11,
-            color: "var(--af-text-tertiary)",
-            marginLeft: "auto",
-          }}
-        >
-          {durMin}m active
-        </span>
-      </div>
-
-      {isTrivial && (
-        <div style={{ fontSize: 12, color: "var(--af-text-tertiary)", fontStyle: "italic", marginTop: 8 }}>
-          Warmup — no enrichment generated.
-        </div>
-      )}
+// formatDurationHeader moved to ./session-view/helpers.ts
 
-      {isPending && (
-        <div style={{ fontSize: 12, color: "var(--af-text-secondary)", marginTop: 8 }}>
-          Click the pending pill to generate this day's digest →
-        </div>
-      )}
-
-      {enr.status === "done" && (
-        <>
-          {enr.brief_summary && (
-            <p style={{ margin: "10px 0 0", color: "var(--af-text)" }}>{enr.brief_summary}</p>
-          )}
-          {(enr.friction_detail || enr.user_instructions.length > 0) && (
-            <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 6 }}>
-              {enr.friction_detail && (
-                <div style={{ fontSize: 12, color: "var(--af-text-secondary)" }}>
-                  <span style={{ color: "#ed8936" }}>⚠ </span>
-                  {enr.friction_detail}
-                </div>
-              )}
-              {enr.user_instructions.length > 0 && (
-                <details style={{ fontSize: 12, color: "var(--af-text-secondary)" }}>
-                  <summary style={{ cursor: "pointer", color: "var(--af-text-tertiary)" }}>
-                    Top user instructions ({enr.user_instructions.length})
-                  </summary>
-                  <ul style={{ margin: "6px 0 0", paddingLeft: 18 }}>
-                    {enr.user_instructions.slice(0, 5).map((u, i) => (
-                      <li key={i} style={{ marginBottom: 2 }}>{u}</li>
-                    ))}
-                  </ul>
-                </details>
-              )}
-            </div>
-          )}
-          <div style={{ marginTop: 10, fontSize: 11 }}>
-            <Link
-              href={`/digest/${entry.local_day}`}
-              style={{ color: "var(--af-accent)", textDecoration: "none" }}
-            >
-              Open day digest →
-            </Link>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
+// EntryDayStrip moved to ./session-view/entry-day-strip.tsx