fleetlens 0.13.0 → 0.13.2

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>
+  );
+}

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 };