fleetlens 0.12.3 → 0.13.1

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

@@ -0,0 +1,111 @@
+"use client";
+
+/**
+ * Token display chips.
+ *
+ * - `TokenChip` — per-event token chip showing `{cache-inflated input} /
+ *   output`. Used in event rows.
+ * - `TurnTokenChip` — per-turn aggregate. 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 across all requests in
+ *   the turn.
+ */
+import React, { useState } from "react";
+import type { SessionEvent } from "@claude-lens/parser";
+import { formatTokens } from "@/lib/format";
+import { Tooltip, TooltipRow } from "./tooltip";
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}

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

@@ -0,0 +1,63 @@
+"use client";
+
+/**
+ * Tooltip + TooltipRow — generic absolutely-positioned tooltip used by
+ * inline header stats, token chips, hover cards, etc. The parent owns
+ * positioning via the `style` prop; this component only handles the
+ * shell (background, border-radius, pointer-events: none).
+ *
+ * TooltipRow is a small key/value row helper for the common
+ * label-on-left / value-on-right pattern inside a Tooltip.
+ */
+import React, { type CSSProperties } from "react";
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}

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

@@ -0,0 +1,46 @@
+/**
+ * Shared types for the session-view module split.
+ *
+ * - DisplayRow: a flat list item rendered by TranscriptList. Either a
+ *   presentation row, a collapsed turn summary, or an expanded-turn
+ *   header/footer with its inner rows interleaved between them.
+ * - MinimapSeg: one segment in the minimap (a row, a whole turn, or an
+ *   idle stripe).
+ *
+ * Also re-exports `rowPrimaryIndex` from the parser so consumers can
+ * import it from one place alongside the types.
+ */
+import {
+  rowPrimaryIndex as rowPrimaryIndexFromLib,
+  type MegaRow,
+  type PresentationRow,
+  type TurnMegaRow,
+} from "@claude-lens/parser";
+
+export const rowPrimaryIndex = rowPrimaryIndexFromLib;
+
+export 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 };
+
+export 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 };
+
+// Re-export underlying types so consumers needing them can import here.
+export type { MegaRow, PresentationRow, TurnMegaRow };

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

@@ -0,0 +1,104 @@
+"use client";
+
+/**
+ * Small layout helpers shared between SubagentDrawer and WorkflowsPanel.
+ *
+ * - WfMiniStat — inline icon+value chip used in workflow card headers.
+ * - SectionLabel — small all-caps label above a content section.
+ * - StatCell — 3-column "Events / Messages / Tool calls" stat grid cell.
+ * - TokenLine — label-value row for a token breakdown.
+ */
+import React from "react";
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}