fleetlens 0.6.4 → 0.7.1

package/app/apps/web/app/usage/page.tsx

@@ -1,17 +1,20 @@
 /**
- * Claude Code usage page — historical utilization analytics.
+ * Usage page — historical utilization analytics, per agent.
  *
- * Current utilization lives in the sidebar (always visible). This page
- * is dedicated to historical views, trend analysis, and leadership
- * reporting metrics derived from the daemon's snapshot log.
+ * One tab per agent that has snapshots on disk. Each tab renders the
+ * same dashboard layout (burndown charts + previous-cycles trend) so
+ * Claude Code and Codex are peers, not primary/secondary.
  *
- * Reads from ~/.cclens/usage.jsonl — no API endpoint needed.
+ * Reads from ~/.cclens/usage.jsonl — the daemon writes both agents'
+ * snapshots there, tagged with `agent`. Filtering happens at read time.
  */
 
 import { Activity } from "lucide-react";
+import Link from "next/link";
 import {
   readUsageSnapshots,
-  latestUsageSnapshot,
+  readUsageSnapshotsByAgent,
+  latestUsageSnapshotByAgent,
   readCachedPlanTier,
   PLAN_TIER_LABELS,
 } from "@/lib/usage-data";
@@ -22,16 +25,53 @@ import {
 } from "@/lib/calibration-data";
 import { UsageChartsDashboard } from "@/components/usage-charts-dashboard";
 import { PreviousCyclesTrend } from "@/components/previous-cycles-trend";
+import {
+  type AgentKind,
+  agentMetadata,
+  getAgentMetadata,
+  isAgentKind,
+} from "@claude-lens/parser";
 
 export const dynamic = "force-dynamic";
 
-export default async function UsagePage() {
-  const snapshots = readUsageSnapshots();
-  const latest = latestUsageSnapshot();
-  const tier = readCachedPlanTier();
-  const calibration = await readCalibrationDump();
-  const predicted = predictedSeriesFor(calibration);
-  const cycles7d = previousCyclesTrend(calibration, "7d");
+function agentLabel(kind: AgentKind): string {
+  return getAgentMetadata(kind)?.displayName ?? kind;
+}
+
+function agentAccent(kind: AgentKind): string {
+  return getAgentMetadata(kind)?.accentColor ?? "var(--af-text-tertiary)";
+}
+
+export default async function UsagePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ agent?: string }>;
+}) {
+  const params = await searchParams;
+  const allSnapshots = readUsageSnapshots();
+  const agentsWithData = new Set<AgentKind>();
+  for (const s of allSnapshots) {
+    const k = (s.agent ?? "claude-code") as AgentKind;
+    agentsWithData.add(k);
+  }
+  // Always show Claude in the tab strip even if empty — it's the canonical
+  // source. Codex appears only once it has at least one snapshot.
+  agentsWithData.add("claude-code");
+
+  const requested: AgentKind | undefined = isAgentKind(params.agent) ? params.agent : undefined;
+  const selected: AgentKind =
+    requested && agentsWithData.has(requested)
+      ? requested
+      : agentsWithData.has("claude-code")
+        ? "claude-code"
+        : (Array.from(agentsWithData)[0] as AgentKind);
+
+  const snapshots = readUsageSnapshotsByAgent(selected);
+  const latest = latestUsageSnapshotByAgent(selected);
+  const tier = selected === "claude-code" ? readCachedPlanTier() : null;
+  const calibration = selected === "claude-code" ? await readCalibrationDump() : null;
+  const predicted = calibration ? predictedSeriesFor(calibration) : null;
+  const cycles7d = calibration ? previousCyclesTrend(calibration, "7d") : [];
 
   return (
     <div
@@ -43,7 +83,6 @@ export default async function UsagePage() {
         padding: "20px 32px",
       }}
     >
-      {/* Header */}
       <header
         style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}
       >
@@ -64,7 +103,7 @@ export default async function UsagePage() {
         <span style={{ fontSize: 11, color: "var(--af-text-tertiary)" }}>
           historical plan utilization · current usage in sidebar
         </span>
-        {tier && (
+        {tier && selected === "claude-code" && (
           <span
             style={{
               marginLeft: "auto",
@@ -90,14 +129,39 @@ export default async function UsagePage() {
             )}
           </span>
         )}
+        {selected === "codex" && latest?.plan_type && (
+          <span
+            style={{
+              marginLeft: "auto",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              fontSize: 12,
+              padding: "4px 10px",
+              border: "1px solid var(--af-border-subtle)",
+              borderRadius: 999,
+              fontFamily: "var(--font-mono)",
+            }}
+          >
+            <span style={{ color: "var(--af-text-tertiary)" }}>plan</span>
+            <span style={{ color: "var(--af-text)", fontWeight: 600 }}>
+              Codex {latest.plan_type}
+            </span>
+          </span>
+        )}
       </header>
 
+      {/* Agent tab strip — one Link per agent that has snapshots. */}
+      <AgentTabs agents={Array.from(agentsWithData)} selected={selected} />
+
       {!latest ? (
-        <EmptyState />
+        <EmptyState agent={selected} />
       ) : (
         <>
-          <PreviousCyclesTrend windowLabel="7d" cycles={cycles7d} />
-          <UsageChartsDashboard snapshots={snapshots} predicted={predicted} />
+          {cycles7d.length > 0 && (
+            <PreviousCyclesTrend windowLabel="7d" cycles={cycles7d} />
+          )}
+          <UsageChartsDashboard snapshots={snapshots} predicted={predicted ?? undefined} />
           <div
             style={{
               fontSize: 11,
@@ -106,7 +170,7 @@ export default async function UsagePage() {
             }}
             suppressHydrationWarning
           >
-            Last daemon poll: {new Date(latest.captured_at).toLocaleString()} ·{" "}
+            Last {agentLabel(selected)} poll: {new Date(latest.captured_at).toLocaleString()} ·{" "}
             {snapshots.length} snapshot{snapshots.length === 1 ? "" : "s"} on disk
           </div>
         </>
@@ -115,7 +179,68 @@ export default async function UsagePage() {
   );
 }
 
-function EmptyState() {
+function AgentTabs({ agents, selected }: { agents: AgentKind[]; selected: AgentKind }) {
+  // Claude first, then everything else alphabetically.
+  const sorted = [...agents].sort((a, b) => {
+    if (a === "claude-code") return -1;
+    if (b === "claude-code") return 1;
+    return a.localeCompare(b);
+  });
+  return (
+    <div
+      role="tablist"
+      style={{
+        display: "inline-flex",
+        gap: 4,
+        padding: 4,
+        background: "var(--af-border-subtle)",
+        borderRadius: 8,
+        alignSelf: "flex-start",
+      }}
+    >
+      {sorted.map((kind) => {
+        const isActive = kind === selected;
+        return (
+          <Link
+            key={kind}
+            role="tab"
+            aria-selected={isActive}
+            href={`/usage?agent=${kind}`}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "6px 14px",
+              borderRadius: 6,
+              fontSize: 12,
+              fontWeight: 600,
+              letterSpacing: "0.01em",
+              color: isActive ? "var(--af-text)" : "var(--af-text-tertiary)",
+              background: isActive ? "var(--af-surface)" : "transparent",
+              boxShadow: isActive ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
+              textDecoration: "none",
+              transition: "all 0.12s ease",
+            }}
+          >
+            <span
+              style={{
+                display: "inline-block",
+                width: 8,
+                height: 8,
+                borderRadius: 999,
+                background: agentAccent(kind),
+                opacity: isActive ? 1 : 0.6,
+              }}
+            />
+            {agentLabel(kind)}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+function EmptyState({ agent }: { agent: AgentKind }) {
   return (
     <div
       className="af-card"
@@ -131,7 +256,7 @@ function EmptyState() {
           color: "var(--af-text)",
         }}
       >
-        No usage data yet
+        No {agentLabel(agent)} usage data yet
       </div>
       <p
         style={{
@@ -140,43 +265,27 @@ function EmptyState() {
           marginTop: 8,
         }}
       >
-        Start the polling daemon to begin collecting metrics every 5 minutes:
+        {agent === "claude-code"
+          ? "Start the polling daemon to begin collecting metrics every 5 minutes:"
+          : "The daemon picks up Codex usage from disk on every poll cycle. Run a Codex session and the data will appear here within minutes."}
       </p>
-      <pre
-        style={{
-          display: "inline-block",
-          marginTop: 14,
-          background: "var(--background)",
-          border: "1px solid var(--af-border-subtle)",
-          padding: "8px 16px",
-          borderRadius: 6,
-          fontSize: 13,
-          fontFamily: "var(--font-mono)",
-          color: "var(--af-text)",
-        }}
-      >
-        cclens daemon start
-      </pre>
-      <p
-        style={{
-          fontSize: 11,
-          color: "var(--af-text-tertiary)",
-          marginTop: 16,
-        }}
-      >
-        For a one-shot snapshot without the daemon, run{" "}
-        <code
+      {agent === "claude-code" && (
+        <pre
           style={{
+            display: "inline-block",
+            marginTop: 14,
             background: "var(--background)",
-            padding: "1px 6px",
-            borderRadius: 4,
+            border: "1px solid var(--af-border-subtle)",
+            padding: "8px 16px",
+            borderRadius: 6,
+            fontSize: 13,
             fontFamily: "var(--font-mono)",
+            color: "var(--af-text)",
           }}
         >
-          cclens usage
-        </code>
-        .
-      </p>
+          fleetlens daemon start
+        </pre>
+      )}
     </div>
   );
 }

package/app/apps/web/components/agent-badge.tsx

@@ -0,0 +1,43 @@
+import type { AgentKind } from "@claude-lens/parser";
+import { getAgentMetadata } from "@claude-lens/parser";
+
+type AgentBadgeProps = {
+  /** Source agent. Undefined is treated as legacy claude-code (no badge). */
+  agent?: AgentKind;
+};
+
+/**
+ * Inline agent pill. Registry-driven: pulls accentColor + shortLabel
+ * directly off the AgentSource. Adding a new agent makes a new badge
+ * appear automatically with the source's declared color — no edits
+ * needed here.
+ *
+ * Returns null for "claude-code" (legacy default-hide so existing
+ * Claude rows render unchanged) and for unknown kinds.
+ */
+export function AgentBadge({ agent }: AgentBadgeProps) {
+  if (!agent || agent === "claude-code") return null;
+  const meta = getAgentMetadata(agent);
+  if (!meta) return null;
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        borderRadius: 4,
+        padding: "2px 6px",
+        fontSize: 10,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        whiteSpace: "nowrap",
+        fontWeight: 600,
+        color: meta.accentColor,
+        background: `color-mix(in srgb, ${meta.accentColor} 12%, transparent)`,
+        border: `1px solid color-mix(in srgb, ${meta.accentColor} 30%, transparent)`,
+      }}
+      title={`Source: ${meta.displayName}`}
+    >
+      {meta.shortLabel}
+    </span>
+  );
+}

package/app/apps/web/components/agent-icon.tsx

@@ -0,0 +1,38 @@
+import type { AgentKind } from "@claude-lens/parser";
+import { getAgentMetadata } from "@claude-lens/parser";
+
+type Props = {
+  agent?: AgentKind;
+  /** Glyph size in px. Defaults to inherit-from-context (12 typical). */
+  size?: number;
+  /** Spoken label override; defaults to the agent's displayName. */
+  title?: string;
+};
+
+/** Single-glyph agent indicator: ✦ for Claude, ◆ for Codex (or whatever
+ *  the registered metadata declares), painted in the agent's accent color.
+ *  Returns null for unknown / undefined agents. */
+export function AgentIcon({ agent, size = 11, title }: Props) {
+  if (!agent) return null;
+  const meta = getAgentMetadata(agent);
+  if (!meta) return null;
+  return (
+    <span
+      aria-hidden
+      title={title ?? meta.displayName}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        width: size + 2,
+        height: size + 2,
+        fontSize: size,
+        lineHeight: 1,
+        color: meta.accentColor,
+      }}
+    >
+      {meta.iconChar}
+    </span>
+  );
+}

package/app/apps/web/components/agent-mix-chip.tsx

@@ -0,0 +1,42 @@
+import type { AgentBreakdown } from "@claude-lens/parser";
+import { getAgentMetadata } from "@claude-lens/parser";
+
+/**
+ * Inline chip that surfaces "12 Claude · 3 Codex" on a project row when
+ * the project has activity from more than one source. Registry-driven:
+ * shortLabel + accentColor come from each AgentSource, so adding a new
+ * agent auto-appears here without edits.
+ *
+ * Returns null when there's only one agent — keeps single-agent rows
+ * visually unchanged.
+ */
+export function AgentMixChip({ perAgent }: { perAgent: AgentBreakdown[] }) {
+  if (perAgent.length < 2) return null;
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontSize: 10,
+        fontFamily: "var(--font-mono)",
+        color: "var(--af-text-tertiary)",
+        whiteSpace: "nowrap",
+      }}
+      title="Sessions split by source agent"
+    >
+      {perAgent.map((row, i) => {
+        const meta = getAgentMetadata(row.agent);
+        const label = meta?.shortLabel ?? row.agent;
+        const color = meta?.accentColor ?? "inherit";
+        return (
+          <span key={row.agent}>
+            {i > 0 && <span style={{ margin: "0 4px", opacity: 0.5 }}>·</span>}
+            <span style={{ color, fontWeight: 600 }}>{row.sessions}</span>{" "}
+            {label}
+          </span>
+        );
+      })}
+    </span>
+  );
+}

package/app/apps/web/components/{ask-claude.tsx → ask.tsx}

@@ -1,15 +1,16 @@
 "use client";
 
 /**
- * "Ask Claude" drawer for session analysis.
+ * Ask drawer for session analysis.
  *
  * Renders as a right-side panel with:
  * - Quick-action buttons (Identify errors, Analyze performance, etc.)
  * - Free-form textarea for custom questions
  * - Streaming markdown response
  *
- * Calls POST /api/ask which spawns `claude -p` under the hood, using
- * the user's local keychain auth. No API key management required.
+ * Calls POST /api/ask which spawns `claude -p` under the hood today;
+ * the analyzer becomes pluggable when the LLM runner abstraction lands.
+ * The subject session can come from any registered agent.
  */
 
 import React, { useCallback, useRef, useState } from "react";
@@ -19,9 +20,9 @@ import {
   AlertTriangle,
   BarChart3,
   Lightbulb,
-  MessageCircle,
   Route,
   Send,
+  Sparkles,
   X,
   Loader2,
 } from "lucide-react";
@@ -58,7 +59,7 @@ const QUICK_ACTIONS = [
   },
 ];
 
-export function AskClaudeButton({ onClick }: { onClick: () => void }) {
+export function AskButton({ onClick }: { onClick: () => void }) {
   return (
     <button
       type="button"
@@ -86,13 +87,13 @@ export function AskClaudeButton({ onClick }: { onClick: () => void }) {
         e.currentTarget.style.color = "var(--af-accent)";
       }}
     >
-      <MessageCircle size={13} />
-      Ask Claude
+      <Sparkles size={13} />
+      Ask
     </button>
   );
 }
 
-export function AskClaudeDrawer({
+export function AskDrawer({
   sessionId,
   onClose,
 }: {
@@ -232,7 +233,7 @@ export function AskClaudeDrawer({
           flexShrink: 0,
         }}
       >
-        <MessageCircle size={16} color="var(--af-accent)" />
+        <Sparkles size={16} color="var(--af-accent)" />
         <span
           style={{
             fontSize: 14,
@@ -241,7 +242,7 @@ export function AskClaudeDrawer({
             flex: 1,
           }}
         >
-          Ask Claude
+          Ask about this session
         </span>
         <button
           onClick={onClose}
@@ -280,8 +281,8 @@ export function AskClaudeDrawer({
                 lineHeight: 1.5,
               }}
             >
-              Ask Claude to analyze this session. Pick a quick action or type
-              your own question.
+              Run an AI analysis on this session. Pick a quick action or
+              type your own question.
             </div>
             <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
               {QUICK_ACTIONS.map((action) => (

package/app/apps/web/components/changelog-icon.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Megaphone } from "lucide-react";
+import { STORAGE_KEY } from "@/lib/changelog";
+
+export function ChangelogIcon({ latestVersion, active }: { latestVersion: string | null; active: boolean }) {
+  // Server can't read localStorage, so render no dot until after mount to
+  // avoid a hydration mismatch flash.
+  const [unread, setUnread] = useState(false);
+
+  useEffect(() => {
+    if (!latestVersion) {
+      setUnread(false);
+      return;
+    }
+    try {
+      const seen = window.localStorage.getItem(STORAGE_KEY);
+      setUnread(seen !== latestVersion);
+    } catch {
+      setUnread(false);
+    }
+  }, [latestVersion]);
+
+  return (
+    <Link
+      href="/changelog"
+      aria-label={unread ? "Changelog (new entries)" : "Changelog"}
+      title={unread ? `What's new in v${latestVersion}` : "Changelog"}
+      style={{
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        color: active ? "var(--af-text)" : "var(--af-text-tertiary)",
+        background: active ? "var(--af-surface-hover)" : "transparent",
+        textDecoration: "none",
+      }}
+    >
+      <Megaphone size={14} />
+      {unread && (
+        <span
+          aria-hidden
+          style={{
+            position: "absolute",
+            top: 3,
+            right: 3,
+            width: 7,
+            height: 7,
+            borderRadius: "50%",
+            background: "#ef4444",
+            border: "1.5px solid var(--af-surface)",
+          }}
+        />
+      )}
+    </Link>
+  );
+}

package/app/apps/web/components/changelog-mark-read.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { useEffect } from "react";
+import { STORAGE_KEY } from "@/lib/changelog";
+
+export function ChangelogMarkRead({ version }: { version: string | null }) {
+  useEffect(() => {
+    if (!version) return;
+    window.localStorage.setItem(STORAGE_KEY, version);
+  }, [version]);
+  return null;
+}

package/app/apps/web/components/day-digest.tsx

@@ -473,7 +473,7 @@ function SessionRow({ entry }: { entry: Entry }) {
         <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--af-text-tertiary)", width: 40, textAlign: "right" }}>
           {durMin}m
         </span>
-        {outcome && <OutcomePill outcome={outcome} size="sm" label="text" />}
+        {outcome && <OutcomePill outcome={outcome} size="sm" label="text" agent={entry.agent} />}
       </div>
       {summary && (
         <div style={{

package/app/apps/web/components/live-sessions-widget.tsx

@@ -17,6 +17,7 @@ import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { prettyProjectName } from "@/lib/format";
 import { TeamBadge } from "@/components/team-badge";
+import { AgentBadge } from "@/components/agent-badge";
 import { OutcomePill } from "@/components/outcome-pill";
 import type { DayOutcome, EntryEnrichmentStatus } from "@claude-lens/entries";
 
@@ -34,6 +35,7 @@ export type LiveSessionPick = {
   lastTimestamp?: string;
   teamName?: string;
   agentName?: string;
+  agent?: import("@claude-lens/parser").AgentKind;
 };
 
 export type LiveEntrySummary = {
@@ -212,7 +214,7 @@ export function LiveSessionsWidget({
               style={{ marginBottom: 4 }}
             >
               {sum.outcome ? (
-                <OutcomePill outcome={sum.outcome} size="sm" label="text" />
+                <OutcomePill outcome={sum.outcome} size="sm" label="text" agent={s.agent} />
               ) : sum.enrichmentStatus !== "skipped_trivial" ? (
                 <OutcomePill
                   outcome={null}
@@ -220,6 +222,7 @@ export function LiveSessionsWidget({
                   sessionId={s.id}
                   localDay={sum.localDay}
                   size="sm"
+                  agent={s.agent}
                 />
               ) : null}
             </div>
@@ -248,6 +251,7 @@ export function LiveSessionsWidget({
               )}
             </span>
             <TeamBadge session={s} linkable={false} />
+            <AgentBadge agent={s.agent} />
           </div>
           {/* Subtitle: what the agent is saying in response. */}
           <div

package/app/apps/web/components/outcome-pill.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 import type { DayOutcome } from "@claude-lens/entries";
+import type { AgentKind } from "@claude-lens/parser";
+import { AgentIcon } from "@/components/agent-icon";
 
 export type EntryOutcome = Exclude<DayOutcome, "idle">;
 
@@ -31,12 +33,13 @@ type Size = keyof typeof SIZES;
 type Label = "icon" | "text" | "both";
 
 type Props =
-  | { outcome: DayOutcome | EntryOutcome; size?: Size; label?: Label; pending?: never }
-  | { outcome: null; pending: true; sessionId?: string; localDay: string; size?: Size };
+  | { outcome: DayOutcome | EntryOutcome; size?: Size; label?: Label; agent?: AgentKind; pending?: never }
+  | { outcome: null; pending: true; sessionId?: string; localDay: string; size?: Size; agent?: AgentKind };
 
 export function OutcomePill(props: Props) {
   const size = props.size ?? "md";
   const dim = SIZES[size];
+  const agentIconSize = dim.fontSize + 1;
 
   if ("pending" in props && props.pending) {
     const style: React.CSSProperties = {
@@ -59,6 +62,7 @@ export function OutcomePill(props: Props) {
         style={style}
         title={`Generate ${props.localDay} digest →`}
       >
+        {props.agent && <AgentIcon agent={props.agent} size={agentIconSize} />}
         <span aria-hidden style={{ lineHeight: 1 }}>{PENDING_STYLE.icon}</span>
         <span>{PENDING_STYLE.label}</span>
       </Link>
@@ -85,6 +89,7 @@ export function OutcomePill(props: Props) {
 
   return (
     <span style={style} title={variant.label}>
+      {props.agent && <AgentIcon agent={props.agent} size={agentIconSize} />}
       {showIcon && <span aria-hidden style={{ lineHeight: 1 }}>{variant.icon}</span>}
       {showText && <span>{variant.label}</span>}
     </span>