fleetlens 0.4.0 → 0.4.1

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

@@ -35,7 +35,7 @@ import {
   type TurnMegaRow,
   type TurnSummary,
 } from "@claude-lens/parser";
-import { formatGap, formatOffset, formatRelative, formatTokens, shortId } from "@/lib/format";
+import { estimateCost, formatCost, formatGap, formatOffset, formatRelative, formatTokens, shortId } from "@/lib/format";
 import { LiveBadge } from "@/components/live-badge";
 import { AskClaudeButton, AskClaudeDrawer } from "@/components/ask-claude";
 import { TailMode } from "@/components/tail-mode";
@@ -286,6 +286,21 @@ export function SessionView({
   /** Detect PR creations in this session. */
   const prMarkers = useMemo(() => detectPrMarkers(session), [session]);
 
+  const coldResumeMarkers = useMemo(() => {
+    const seen = new Set<string>();
+    const out: {
+      tOffsetMs: number;
+      info: NonNullable<SessionEvent["coldResume"]>;
+    }[] = [];
+    for (const e of events) {
+      if (!e.coldResume || !e.messageId || e.tOffsetMs === undefined) continue;
+      if (seen.has(e.messageId)) continue;
+      seen.add(e.messageId);
+      out.push({ tOffsetMs: e.tOffsetMs, info: e.coldResume });
+    }
+    return out;
+  }, [events]);
+
   /** Build the full presentation stream once. */
   const allRows = useMemo(() => buildPresentation(visibleEvents), [visibleEvents]);
 
@@ -541,6 +556,18 @@ export function SessionView({
           )}
           <InlineStatDivider />
           <InlineTokenStat usage={totalUsage} />
+          {session.coldResumeCount !== undefined &&
+            session.coldResumeCount > 0 &&
+            session.cacheRebuildTokens !== undefined && (
+              <>
+                <InlineStatDivider />
+                <ColdResumeSessionStat
+                  count={session.coldResumeCount}
+                  writeTokens={session.cacheRebuildTokens}
+                  model={model}
+                />
+              </>
+            )}
           <InlineStatDivider />
           <InlineStat value={`${eventCount} events`} />
           {prMarkers.length > 0 && (
@@ -675,6 +702,8 @@ export function SessionView({
             subagents={session.subagents}
             collapsed={collapsed}
             prMarkers={prMarkers}
+            coldResumeMarkers={coldResumeMarkers}
+            model={model}
             selectedSubagentId={selectedSubagentId}
             onSelectSubagent={(id) => {
               setSelectedSubagentId(id);
@@ -749,6 +778,7 @@ export function SessionView({
               stickyOffset={headerH + 16}
               isSessionLive={isSessionLive}
               team={team}
+              model={model}
             />
           </>
         ) : (
@@ -1031,7 +1061,7 @@ function InlineStatDivider() {
 }
 
 function InlineTokenStat({ usage }: { usage: SessionEvent["usage"] }) {
-  const [hover, setHover] = useState(false);
+  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;
@@ -1039,8 +1069,8 @@ function InlineTokenStat({ usage }: { usage: SessionEvent["usage"] }) {
 
   return (
     <span
+      ref={ref}
       style={{
-        position: "relative",
         display: "inline-flex",
         alignItems: "center",
         gap: 6,
@@ -1049,20 +1079,15 @@ function InlineTokenStat({ usage }: { usage: SessionEvent["usage"] }) {
         cursor: "default",
         fontFamily: "var(--font-mono)",
       }}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
+      onMouseEnter={open}
+      onMouseLeave={close}
     >
-      {/* Primary: fresh input / output. This is the actually-new
-          per-request context — distinct from the cached context that
-          dominates most agentic sessions (often 99%+). */}
       <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>
-      {/* Secondary: cached context as a separate hint so the header
-          doesn't lump 50M+ cache hits into the "tokens" number. */}
       {cached > 0 && (
         <span
           style={{
@@ -1075,14 +1100,8 @@ function InlineTokenStat({ usage }: { usage: SessionEvent["usage"] }) {
           +{formatTokens(cached)} cached
         </span>
       )}
-      {hover && (
-        <Tooltip
-          style={{
-            bottom: "calc(100% + 6px)",
-            left: 0,
-            minWidth: 240,
-          }}
-        >
+      {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}%)`} />
@@ -1100,12 +1119,60 @@ function InlineTokenStat({ usage }: { usage: SessionEvent["usage"] }) {
           >
             Cache reads are cumulative across all API requests and billed at ~10% of regular input.
           </div>
-        </Tooltip>
+        </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>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Generic Tooltip                                                    */
 /* ------------------------------------------------------------------ */
@@ -1208,6 +1275,8 @@ function Minimap({
   selectedSubagentId,
   onSelectSubagent,
   prMarkers,
+  coldResumeMarkers,
+  model,
 }: {
   displayRows: DisplayRow[];
   durationMs: number;
@@ -1219,6 +1288,11 @@ function Minimap({
   selectedSubagentId?: string | null;
   onSelectSubagent?: (id: string | null) => void;
   prMarkers?: PrMarker[];
+  coldResumeMarkers?: {
+    tOffsetMs: number;
+    info: NonNullable<SessionEvent["coldResume"]>;
+  }[];
+  model?: string;
 }) {
   const WIDTH = 1400;
   /** Main timeline height. Sub-agent lanes stack below this. */
@@ -1247,6 +1321,10 @@ function Minimap({
     idleMs?: number;
     subagent?: SubagentRun;
     pr?: PrMarker;
+    cold?: {
+      tOffsetMs: number;
+      info: NonNullable<SessionEvent["coldResume"]>;
+    };
   } | null>(null);
   const [playheadMs, setPlayheadMs] = useState<number | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -1777,6 +1855,41 @@ function Minimap({
           );
         })}
 
+        {coldResumeMarkers?.map((cr, i) => {
+          const x = msToX(cr.tOffsetMs);
+          return (
+            <g
+              key={`cold-${i}`}
+              style={{ cursor: "pointer" }}
+              onMouseEnter={(e) => setHover({ clientX: e.clientX, cold: cr })}
+            >
+              <line
+                x1={x}
+                x2={x}
+                y1={0}
+                y2={TOTAL_H}
+                stroke="#D97706"
+                strokeWidth="1.5"
+                strokeDasharray="4 3"
+                opacity="0.75"
+              />
+              <rect
+                x={x - 8}
+                y={0}
+                width={16}
+                height={TOTAL_H}
+                fill="transparent"
+              />
+              <polygon
+                points={`${x},${MAIN_H / 2 - 5} ${x + 5},${MAIN_H / 2} ${x},${MAIN_H / 2 + 5} ${x - 5},${MAIN_H / 2}`}
+                fill="#D97706"
+                stroke="var(--af-surface)"
+                strokeWidth="1.5"
+              />
+            </g>
+          );
+        })}
+
         {/* Playhead — positioned against the relaxed layout, not raw time.
             Spans the full SVG height (main + subagent lanes) so you can see
             which subagents were running at the current scroll position. */}
@@ -1804,6 +1917,8 @@ function Minimap({
           idleMs={hover.idleMs}
           subagent={hover.subagent}
           pr={hover.pr}
+          cold={hover.cold}
+          model={model}
         />
       )}
 
@@ -1891,6 +2006,8 @@ function MinimapHoverCard({
   idleMs,
   subagent,
   pr,
+  cold,
+  model,
 }: {
   containerRef: React.RefObject<HTMLDivElement | null>;
   clientX: number;
@@ -1899,6 +2016,8 @@ function MinimapHoverCard({
   idleMs?: number;
   subagent?: SubagentRun;
   pr?: PrMarker;
+  cold?: { tOffsetMs: number; info: NonNullable<SessionEvent["coldResume"]> };
+  model?: string;
 }) {
   const rect = containerRef.current?.getBoundingClientRect();
   const localX = rect ? clientX - rect.left : 0;
@@ -2014,6 +2133,77 @@ function MinimapHoverCard({
     );
   }
 
+  if (cold) {
+    const { trigger, gapMs, writeTokens, compact } = cold.info;
+    const isCompact = trigger === "compact";
+    const estUsd = estimateCost(
+      { input: 0, output: 0, cacheRead: 0, cacheWrite: writeTokens },
+      model,
+    );
+    let label: string;
+    if (!isCompact) label = "⚡ CACHE REBUILD";
+    else if (compact?.trigger === "auto") label = "⚡ AUTO-COMPACT";
+    else label = "⚡ /COMPACT";
+    const detailLine = isCompact
+      ? `${formatTokens(writeTokens)} rewritten · pre-compact ${formatTokens(compact?.preTokens ?? 0)}`
+      : `${formatTokens(writeTokens)} rewritten · idle ${formatGap(gapMs)}`;
+    const hint = isCompact
+      ? "Conversation was summarized; prefix had to be rewritten into a fresh cache."
+      : "Prompt cache expired during idle; resuming within 5 min keeps it warm.";
+    return (
+      <div
+        style={{
+          position: "absolute",
+          ...posStyle,
+          zIndex: 100,
+          background: "#0F172A",
+          color: "#F1F5F9",
+          borderRadius: 10,
+          padding: "10px 14px",
+          fontSize: 11,
+          pointerEvents: "none",
+          boxShadow: "0 6px 24px rgba(15,23,42,0.22)",
+          maxWidth: 340,
+          minWidth: 220,
+          lineHeight: 1.45,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
+          <span
+            style={{
+              fontSize: 10,
+              fontWeight: 600,
+              padding: "2px 8px",
+              borderRadius: 4,
+              background: "#D97706",
+              color: "#fff",
+            }}
+          >
+            {label}
+          </span>
+          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, opacity: 0.7 }}>
+            at {formatOffset(cold.tOffsetMs)}
+          </span>
+        </div>
+        <div style={{ fontWeight: 500, fontFamily: "var(--font-mono)" }}>
+          {detailLine}
+          {estUsd >= 0.005 && ` · est. ${formatCost(estUsd)}`}
+        </div>
+        <div
+          style={{
+            marginTop: 4,
+            fontSize: 10,
+            opacity: 0.65,
+            fontStyle: "italic",
+            whiteSpace: "normal",
+          }}
+        >
+          {hint}
+        </div>
+      </div>
+    );
+  }
+
   if (pr) {
     const label = pr.title
       ? `PR${pr.prNumber ? ` #${pr.prNumber}` : ""}: ${pr.title}`
@@ -2314,6 +2504,7 @@ function TranscriptList({
   stickyOffset,
   isSessionLive,
   team,
+  model,
 }: {
   displayRows: DisplayRow[];
   rowRefs: React.MutableRefObject<Record<number, HTMLDivElement | null>>;
@@ -2323,6 +2514,7 @@ function TranscriptList({
   stickyOffset: number;
   isSessionLive?: boolean;
   team?: (TimelineData & { teamName: string }) | null;
+  model?: string;
 }) {
   // Find the last collapsed turn index so we can mark it as in-progress
   // when the session is live.
@@ -2343,6 +2535,7 @@ function TranscriptList({
     // Collapsed turn summary row
     if (d.kind === "turn-collapsed") {
       const idx = d.turn.firstPrimaryIndex;
+      const turnCold = findColdResumeInDisplayRow(d);
       out.push(
         <CollapsedTurnRow
           key={`turn-${idx}`}
@@ -2351,6 +2544,8 @@ function TranscriptList({
           onClick={() => onToggleTurn(idx)}
           inProgress={i === lastCollapsedTurnIdx}
           team={team}
+          coldResume={turnCold ?? undefined}
+          model={model}
           refCb={(el) => {
             rowRefs.current[idx] = el;
           }}
@@ -2361,11 +2556,14 @@ function TranscriptList({
 
     // Expanded turn header
     if (d.kind === "turn-expanded-header") {
+      const turnCold = findColdResumeInDisplayRow(d);
       out.push(
         <ExpandedTurnHeader
           key={`turnhead-${d.turn.firstPrimaryIndex}`}
           turn={d.turn}
           onClick={() => onToggleTurn(d.turn.firstPrimaryIndex)}
+          coldResume={turnCold ?? undefined}
+          model={model}
         />,
       );
       continue;
@@ -2430,6 +2628,212 @@ function IdleDivider({ gapMs }: { gapMs: number }) {
   );
 }
 
+function findColdResumeInDisplayRow(
+  d: DisplayRow,
+): SessionEvent["coldResume"] | null {
+  if (d.kind === "presentation") return findColdResumeInRow(d.row);
+  if (d.kind === "turn-collapsed" || d.kind === "turn-expanded-header") {
+    for (const r of d.turn.rows) {
+      const hit = findColdResumeInRow(r);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+function findColdResumeInRow(
+  r: PresentationRow,
+): SessionEvent["coldResume"] | null {
+  if (r.kind === "agent") {
+    if (r.event.coldResume) return r.event.coldResume;
+    for (const ge of r.groupedEvents) {
+      if (ge.coldResume) return ge.coldResume;
+    }
+  } else if (r.kind === "tool-group") {
+    for (const e of r.events) if (e.coldResume) return e.coldResume;
+  }
+  return null;
+}
+
+function ColdResumeNotice({
+  info,
+  model,
+}: {
+  info: NonNullable<SessionEvent["coldResume"]>;
+  model?: string;
+}) {
+  const { trigger, gapMs, writeTokens, writeRatio, compact } = info;
+  const estUsd = estimateCost(
+    { input: 0, output: 0, cacheRead: 0, cacheWrite: writeTokens },
+    model,
+  );
+  const isCompact = trigger === "compact";
+  const fullyCold = writeRatio >= 0.9;
+  let title: string;
+  if (!isCompact) title = `Session resumed cold · idle ${formatGap(gapMs)}`;
+  else if (compact?.trigger === "auto") title = "Auto-compact rebuilt the cache";
+  else title = "Conversation compacted · cache rebuilt";
+  const hint = isCompact
+    ? "Compaction summarizes the conversation, so the prefix must be rewritten into a fresh cache. Any /compact or auto-compact will cost this rewrite."
+    : "Prompt cache expired during idle. Resuming within 5 min keeps the cache warm and avoids the rewrite tax.";
+  return (
+    <div
+      style={{
+        padding: "8px 12px",
+        background: "rgba(217, 119, 6, 0.08)",
+        border: "1px solid rgba(217, 119, 6, 0.35)",
+        borderLeft: "3px solid rgba(217, 119, 6, 0.9)",
+        borderRadius: 6,
+        fontSize: 11.5,
+        color: "var(--af-text-secondary)",
+        lineHeight: 1.5,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          fontWeight: 600,
+          color: "#78350F",
+          letterSpacing: "0.01em",
+        }}
+      >
+        <span style={{ fontSize: 13 }}>⚡</span>
+        {title}
+      </div>
+      <div style={{ marginTop: 4, fontFamily: "var(--font-mono)", fontSize: 11 }}>
+        Rewrote <b>{formatTokens(writeTokens)}</b> tokens into prompt cache
+        {estUsd >= 0.005 && (
+          <>
+            {" "}
+            · est. <b>{formatCost(estUsd)}</b>
+          </>
+        )}
+        {isCompact && compact && (
+          <>
+            {" "}
+            · pre-compact <b>{formatTokens(compact.preTokens)}</b>
+          </>
+        )}
+        {!isCompact && (
+          <>
+            {" "}
+            · {fullyCold ? "fully cold" : "partial"} ({Math.round(writeRatio * 100)}% write)
+          </>
+        )}
+      </div>
+      <div
+        style={{
+          marginTop: 3,
+          fontSize: 10.5,
+          color: "var(--af-text-tertiary)",
+          fontStyle: "italic",
+        }}
+      >
+        {hint}
+      </div>
+    </div>
+  );
+}
+
+function ColdResumeSessionStat({
+  count,
+  writeTokens,
+  model,
+}: {
+  count: number;
+  writeTokens: number;
+  model?: string;
+}) {
+  const { ref, anchor, open, close } = useAnchoredTooltip();
+  const estUsd = estimateCost(
+    { input: 0, output: 0, cacheRead: 0, cacheWrite: writeTokens },
+    model,
+  );
+  return (
+    <span
+      ref={ref}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        fontSize: 11.5,
+        fontWeight: 600,
+        color: "#78350F",
+        background: "rgba(217, 119, 6, 0.12)",
+        padding: "2px 8px",
+        borderRadius: 100,
+        cursor: "default",
+      }}
+      onMouseEnter={open}
+      onMouseLeave={close}
+    >
+      <span style={{ fontSize: 12 }}>⚡</span>
+      {count} cache rebuild{count === 1 ? "" : "s"} · {formatTokens(writeTokens)} rewritten
+      {anchor && (
+        <AnchoredTooltip anchor={anchor} width={320}>
+          <TooltipRow label="Cache rebuilds" value={count.toLocaleString()} />
+          <TooltipRow label="Tokens rewritten" value={writeTokens.toLocaleString()} />
+          {estUsd >= 0.005 && (
+            <TooltipRow label="Est. rebuild cost" value={formatCost(estUsd)} />
+          )}
+          <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,
+            }}
+          >
+            Turns where the whole prompt-cache prefix had to be rewritten.
+            Either the cache expired during a long idle gap, or a /compact
+            (manual or auto) summarized the conversation. Both cost tokens
+            at 1.25× base input price.
+          </div>
+        </AnchoredTooltip>
+      )}
+    </span>
+  );
+}
+
+function ColdResumeChip({
+  info,
+  model,
+}: {
+  info: NonNullable<SessionEvent["coldResume"]>;
+  model?: string;
+}) {
+  const { writeTokens } = info;
+  const estUsd = estimateCost(
+    { input: 0, output: 0, cacheRead: 0, cacheWrite: writeTokens },
+    model,
+  );
+  return (
+    <span
+      title={`Prompt cache expired during idle; this turn rewrote ${writeTokens.toLocaleString()} tokens into cache${estUsd >= 0.005 ? ` (est. ${formatCost(estUsd)})` : ""}.`}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontSize: 10.5,
+        fontWeight: 600,
+        padding: "2px 7px",
+        borderRadius: 3,
+        background: "rgba(217, 119, 6, 0.14)",
+        color: "#78350F",
+        letterSpacing: "0.01em",
+        cursor: "default",
+      }}
+    >
+      ⚡ cold resume · {formatTokens(writeTokens)} rewritten
+    </span>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Collapsed turn row                                                 */
 /*                                                                     */
@@ -2446,6 +2850,8 @@ function CollapsedTurnRow({
   stickyOffset,
   inProgress,
   team,
+  coldResume,
+  model,
 }: {
   turn: TurnMegaRow;
   /** Fires when the user wants to fully expand this turn into the
@@ -2456,6 +2862,8 @@ function CollapsedTurnRow({
   stickyOffset: number;
   inProgress?: boolean;
   team?: (TimelineData & { teamName: string }) | null;
+  coldResume?: NonNullable<SessionEvent["coldResume"]>;
+  model?: string;
 }) {
   const theme = ROLE_THEMES.agent;
   const s = turn.summary;
@@ -2526,7 +2934,7 @@ function CollapsedTurnRow({
         Agent
       </span>
 
-      {/* Col 3 — content (first · stats · steps · last · bottom bar) */}
+      {/* Col 3 — content (cold-resume notice · first · stats · steps · last · bottom bar) */}
       <div
         style={{
           minWidth: 0,
@@ -2536,6 +2944,12 @@ function CollapsedTurnRow({
           paddingBottom: 10,
         }}
       >
+        {coldResume && (
+          <div onClick={stop}>
+            <ColdResumeNotice info={coldResume} model={model} />
+          </div>
+        )}
+
         {/* 1. First agent message — clickable to expand into full markdown */}
         {firstAgentRow && (
           <ExpandableMessage
@@ -3027,7 +3441,17 @@ function TurnStatsLine({
   );
 }
 
-function ExpandedTurnHeader({ turn, onClick }: { turn: TurnMegaRow; onClick: () => void }) {
+function ExpandedTurnHeader({
+  turn,
+  onClick,
+  coldResume,
+  model,
+}: {
+  turn: TurnMegaRow;
+  onClick: () => void;
+  coldResume?: NonNullable<SessionEvent["coldResume"]>;
+  model?: string;
+}) {
   const s = turn.summary;
   return (
     <div
@@ -3060,6 +3484,11 @@ function ExpandedTurnHeader({ turn, onClick }: { turn: TurnMegaRow; onClick: ()
         {s.toolCalls === 1 ? "" : "s"}
         {turn.durationMs !== undefined ? ` · ${formatGap(turn.durationMs)}` : ""}
       </span>
+      {coldResume && (
+        <span style={{ marginLeft: "auto" }}>
+          <ColdResumeChip info={coldResume} model={model} />
+        </span>
+      )}
     </div>
   );
 }

package/app/apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claude-lens/web",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "description": "Local-only dashboard for Claude Code sessions. Reads ~/.claude/projects/*.jsonl and visualizes agent activity.",
   "license": "MIT",