fleetlens 0.12.3 → 0.13.1

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

@@ -0,0 +1,217 @@
+"use client";
+
+/**
+ * Header stats + token stat with anchored tooltip.
+ *
+ * - InlineStat / InlineStatDivider — compact icon+value chips used in the
+ *   single-line session header, modeled on Claude's Sessions page.
+ * - EntrypointBadge — colors `cli` / `claude-desktop` (green, human-driven)
+ *   vs `sdk-*` (amber, programmatic).
+ * - InlineTokenStat — session-header token chip with a tooltip that
+ *   escapes the header's overflow:hidden ancestor via getBoundingClientRect
+ *   + position:fixed (`useAnchoredTooltip` + `AnchoredTooltip`).
+ *
+ * `useAnchoredTooltip` is a hook — it must be defined and consumed inside
+ * a component (no hook calls at module load).
+ */
+import React, { useRef, useState } from "react";
+import type { SessionEvent } from "@claude-lens/parser";
+import { formatTokens } from "@/lib/format";
+import { TooltipRow } from "./tooltip";
+
+export 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>
+  );
+}
+
+export function InlineStatDivider() {
+  return (
+    <span
+      style={{
+        color: "var(--af-text-tertiary)",
+        fontSize: 11,
+        opacity: 0.6,
+      }}
+    >
+      ·
+    </span>
+  );
+}
+
+export function EntrypointBadge({ entrypoint }: { entrypoint: string }) {
+  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>
+  );
+}
+
+export 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 };
+}
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}

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

@@ -0,0 +1,135 @@
+/**
+ * Pure (no-React) helpers for the session-view module.
+ *
+ * - `formatDayKey` — render a `YYYY-MM-DD` day key as a short, locale-free
+ *   label (e.g. "Jun 16"). Formatted straight from the key — not a Date —
+ *   so SSR and client output match regardless of timezone.
+ * - `flattenMegaRows` — turn the parser's MegaRow stream into a flat
+ *   DisplayRow list, expanding turns whose firstPrimaryIndex is in the
+ *   `expanded` set.
+ * - `allRowsAsRawRows` — fallback for "All events" filter mode. Wraps each
+ *   raw event in a synthetic PresentationRow so TranscriptList can render
+ *   attachments/meta/thinking/tool_result without going through the
+ *   meaningful-transformation logic.
+ * - `formatDurationHeader` — concise ms→string for header stats; rolls up
+ *   to "h m" once agent time exceeds an hour so workflow-fold totals stay
+ *   readable.
+ */
+import type {
+  MegaRow,
+  PresentationRow,
+  PresentationRowKind,
+  SessionEvent,
+} from "@claude-lens/parser";
+import type { DisplayRow } from "./types";
+
+const DAY_MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+export function formatDayKey(key: string): string {
+  const [, m, d] = key.split("-").map(Number);
+  if (!m || !d) return key;
+  return `${DAY_MONTHS[m - 1]} ${d}`;
+}
+
+export 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;
+}
+
+export function allRowsAsRawRows(events: SessionEvent[]): PresentationRow[] {
+  const out: PresentationRow[] = [];
+  for (const e of events) {
+    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;
+}
+
+export 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`;
+  const h = Math.floor(m / 60);
+  return `${h}h ${m % 60}m`;
+}

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

@@ -0,0 +1,339 @@
+"use client";
+
+/**
+ * SubagentDrawer — right-side panel opened when the user clicks a
+ * sub-agent lane bar on the mini-map. Renders the full run profile:
+ * type pill, background badge, timing range, duration, model, parent
+ * tool-use id, activity stats (events / messages / tool calls), token
+ * breakdown, tools-used pills, the prompt the parent dispatched, and
+ * the final agent text. A "Jump to parent" button scrolls the
+ * transcript to the Agent tool_use row that kicked the subagent off.
+ */
+import React from "react";
+import { X } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { SubagentRun } from "@claude-lens/parser";
+import { formatGap, formatOffset } from "@/lib/format";
+import { subagentColor } from "./colors";
+import { StatCell, TokenLine } from "./workflows-shared";
+import { shortenToolName } from "../turn-steps";
+
+export function SubagentDrawer({
+  subagent,
+  onClose,
+  onJumpToParent,
+}: {
+  subagent: SubagentRun;
+  onClose: () => void;
+  onJumpToParent: () => 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;
+
+  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,
+          flexWrap: "wrap",
+        }}
+      >
+        <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,
+            fontWeight: 600,
+            color: "var(--af-text)",
+            flex: 1,
+            minWidth: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+          title={s.description}
+        >
+          {s.description}
+        </span>
+        <button
+          onClick={onClose}
+          style={{
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            color: "var(--af-text-tertiary)",
+            padding: 4,
+            borderRadius: 4,
+          }}
+          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}
+        </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>
+
+      {/* 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>
+  );
+}