fleetlens 0.6.4 → 0.7.1

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

@@ -0,0 +1,238 @@
+import { Fragment } from "react";
+import { ENTRIES, LATEST_VERSION, type ChangelogEntry } from "@/lib/changelog";
+import { ChangelogMarkRead } from "@/components/changelog-mark-read";
+
+export const metadata = { title: "Changelog · Fleetlens" };
+
+const SECTION_TONES: Record<string, { fg: string; bg: string }> = {
+  fixed:   { fg: "#c4673b", bg: "rgba(196, 103, 59, 0.12)" },
+  added:   { fg: "#3a8b5e", bg: "rgba(58, 139, 94, 0.12)" },
+  changed: { fg: "#5b6cc4", bg: "rgba(91, 108, 196, 0.12)" },
+  removed: { fg: "#a64545", bg: "rgba(166, 69, 69, 0.12)" },
+};
+const DEFAULT_TONE = { fg: "var(--af-text-tertiary)", bg: "var(--af-surface-hover)" };
+
+export default function ChangelogPage() {
+  return (
+    <main style={{ maxWidth: 720, margin: "0 auto", padding: "32px 24px" }}>
+      <ChangelogMarkRead version={LATEST_VERSION} />
+      <header style={{ marginBottom: 28 }}>
+        <h1 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.01em", margin: 0 }}>
+          Changelog
+        </h1>
+        <p style={{ color: "var(--af-text-secondary)", fontSize: 13, marginTop: 6 }}>
+          Notable user-facing changes to the Fleetlens CLI.
+        </p>
+      </header>
+
+      {ENTRIES.length === 0 ? (
+        <p style={{ color: "var(--af-text-tertiary)", fontSize: 13 }}>
+          No releases recorded yet.
+        </p>
+      ) : (
+        <div>
+          {ENTRIES.map((entry, idx) => {
+            const prevDate = idx > 0 ? ENTRIES[idx - 1].date : null;
+            const showDateHeader = entry.date && entry.date !== prevDate;
+            return (
+              <Fragment key={entry.version}>
+                {showDateHeader && (
+                  <DateHeader date={entry.date!} firstInList={idx === 0} />
+                )}
+                <EntryCard entry={entry} isLatest={idx === 0} />
+              </Fragment>
+            );
+          })}
+        </div>
+      )}
+    </main>
+  );
+}
+
+function DateHeader({ date, firstInList }: { date: string; firstInList: boolean }) {
+  const rel = relativeDate(date);
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "baseline",
+        gap: 10,
+        marginTop: firstInList ? 0 : 22,
+        marginBottom: 10,
+        borderTop: firstInList ? "none" : "1px solid var(--af-border-subtle)",
+        paddingTop: firstInList ? 0 : 18,
+      }}
+    >
+      <span
+        style={{
+          fontSize: 11,
+          color: "var(--af-text-tertiary)",
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          fontWeight: 600,
+          fontFamily: "var(--font-mono)",
+        }}
+      >
+        {date}
+      </span>
+      {rel && (
+        <span style={{ fontSize: 11, color: "var(--af-text-tertiary)" }}>{rel}</span>
+      )}
+    </div>
+  );
+}
+
+function EntryCard({ entry, isLatest }: { entry: ChangelogEntry; isLatest: boolean }) {
+  const simple =
+    entry.sections.length === 1 && entry.sections[0].bullets.length === 1;
+
+  return (
+    <section id={`v${entry.version}`} style={{ marginBottom: 18 }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          flexWrap: "wrap",
+          marginBottom: 8,
+        }}
+      >
+        <h2
+          style={{
+            fontSize: 15,
+            fontWeight: 700,
+            margin: 0,
+            fontFamily: "var(--font-mono)",
+            letterSpacing: "0.01em",
+          }}
+        >
+          v{entry.version}
+        </h2>
+        {simple && <SectionPill kind={entry.sections[0].kind} />}
+        {isLatest && <LatestPill />}
+      </div>
+
+      {entry.sections.length === 0 ? (
+        <p style={{ color: "var(--af-text-tertiary)", fontSize: 13 }}>
+          No details recorded.
+        </p>
+      ) : simple ? (
+        <p
+          style={{
+            margin: 0,
+            fontSize: 13.5,
+            color: "var(--af-text)",
+            lineHeight: 1.55,
+          }}
+        >
+          {renderInline(entry.sections[0].bullets[0])}
+        </p>
+      ) : (
+        entry.sections.map((s) => (
+          <div key={s.kind} style={{ marginBottom: 10 }}>
+            <div
+              style={{
+                fontSize: 11,
+                color: "var(--af-text-tertiary)",
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                fontWeight: 600,
+                marginBottom: 5,
+              }}
+            >
+              {s.kind}
+            </div>
+            <ul
+              style={{
+                margin: 0,
+                paddingLeft: 22,
+                fontSize: 13.5,
+                color: "var(--af-text)",
+                lineHeight: 1.55,
+                listStyleType: "disc",
+              }}
+            >
+              {s.bullets.map((b, i) => (
+                <li key={i} style={{ marginBottom: 6 }}>{renderInline(b)}</li>
+              ))}
+            </ul>
+          </div>
+        ))
+      )}
+    </section>
+  );
+}
+
+function SectionPill({ kind }: { kind: string }) {
+  const tone = SECTION_TONES[kind.toLowerCase()] ?? DEFAULT_TONE;
+  return (
+    <span
+      style={{
+        fontSize: 10,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        padding: "2px 7px",
+        borderRadius: 99,
+        background: tone.bg,
+        color: tone.fg,
+      }}
+    >
+      {kind}
+    </span>
+  );
+}
+
+function LatestPill() {
+  return (
+    <span
+      style={{
+        fontSize: 10,
+        fontWeight: 500,
+        padding: "2px 7px",
+        borderRadius: 99,
+        background: "var(--af-surface-hover)",
+        color: "var(--af-text-tertiary)",
+        fontFamily: "var(--font-mono)",
+        letterSpacing: "0.02em",
+      }}
+    >
+      latest
+    </span>
+  );
+}
+
+function renderInline(text: string): React.ReactNode[] {
+  const parts = text.split(/(`[^`]+`)/g);
+  return parts.map((p, i) => {
+    if (p.startsWith("`") && p.endsWith("`") && p.length >= 2) {
+      return (
+        <code
+          key={i}
+          style={{
+            fontFamily: "var(--font-mono)",
+            background: "var(--af-surface-hover)",
+            padding: "1px 5px",
+            borderRadius: 4,
+            fontSize: "0.92em",
+          }}
+        >
+          {p.slice(1, -1)}
+        </code>
+      );
+    }
+    return <span key={i}>{p}</span>;
+  });
+}
+
+function relativeDate(date: string): string | null {
+  const t = Date.parse(`${date}T12:00:00`);
+  if (Number.isNaN(t)) return null;
+  const days = Math.round((Date.now() - t) / 86_400_000);
+  if (days < 0) return null;
+  if (days === 0) return "today";
+  if (days === 1) return "yesterday";
+  if (days < 14) return `${days} days ago`;
+  if (days < 60) return `${Math.round(days / 7)} weeks ago`;
+  return null;
+}

package/app/apps/web/app/insights/[key]/page.tsx

@@ -23,8 +23,14 @@ export default async function SavedInsightPage({
   const weekMatch = WEEK_KEY.exec(key);
   if (weekMatch) {
     const monday = weekMatch[1]!;
-    const cached = monday === currentWeekMonday()
-      ? getCurrentWeekDigestFromCache(monday, Date.now())
+    // Current-week digests live in an in-memory TTL cache by default. When
+    // the user explicitly forces generation we ALSO persist to disk
+    // (digest-week-pipeline) so the result survives across Next.js route
+    // bundles — fall back to disk here so the page actually reads what
+    // they paid the LLM to produce.
+    const isCurrent = monday === currentWeekMonday();
+    const cached = isCurrent
+      ? (getCurrentWeekDigestFromCache(monday, Date.now()) ?? readWeekDigest(monday))
       : readWeekDigest(monday);
 
     const prev = shiftMonday(monday, -7);

package/app/apps/web/app/layout.tsx

@@ -8,29 +8,32 @@ import {
   type LiveEntrySummary,
 } from "@/components/live-sessions-widget";
 import { JobQueueWidget } from "@/components/job-queue-widget";
-import { listProjects, listSessions, walkJsonlFiles } from "@claude-lens/parser/fs";
+import { listProjects, walkJsonlFiles } from "@claude-lens/parser/fs";
+import { listSessions } from "@/lib/data";
 import { latestUsageSnapshot } from "@/lib/usage-data";
 import { buildEntriesIndex } from "@/lib/entries-index";
+import { LATEST_VERSION as LATEST_CHANGELOG_VERSION } from "@/lib/changelog";
 import pkg from "../package.json" with { type: "json" };
 import "./globals.css";
 
 export const metadata: Metadata = {
   title: "Fleetlens",
-  description: "Claude Code fleet analytics — local-only dashboard for sessions and agent fleets.",
+  description: "Multi-agent fleet analytics — local-only dashboard for Claude Code, Codex, and other coding-agent sessions.",
 };
 
 export const dynamic = "force-dynamic";
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  const [projects, allFiles, recentSessions, entriesIndex] = await Promise.all([
+  const [projects, allFiles, allSessions, entriesIndex] = await Promise.all([
     listProjects(),
     walkJsonlFiles(),
-    // Only need the newest-mtime slice — the widget filters to the 45s
-    // live window client-side.
-    listSessions({ limit: 20 }),
+    // Pull from every registered agent source. The widget filters to the
+    // 45s live window client-side, so the slice is on freshness, not count.
+    listSessions(),
     buildEntriesIndex(),
   ]);
-  const totalSessions = allFiles.length;
+  const recentSessions = allSessions.slice(0, 20);
+  const totalSessions = allSessions.length;
   const currentUsage = latestUsageSnapshot();
 
   // Project to the minimal shape the widget needs so we don't ship
@@ -45,6 +48,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     lastTimestamp: s.lastTimestamp,
     teamName: s.teamName,
     agentName: s.agentName,
+    agent: s.agent,
   }));
 
   const liveEntrySummaries: Record<string, LiveEntrySummary> = {};
@@ -82,6 +86,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             totalSessions={totalSessions}
             currentUsage={currentUsage}
             version={pkg.version}
+            latestChangelogVersion={LATEST_CHANGELOG_VERSION}
           />
           <main
             style={{

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

@@ -1,5 +1,5 @@
 /**
- * Dashboard home — high-level metrics across all Claude Code sessions.
+ * Dashboard home — high-level metrics across every observed agent.
  *
  * Everything here is server-rendered from @claude-lens/parser/fs, then
  * passed down to small interactive client components (heatmap, chart).
@@ -7,6 +7,8 @@
 
 import {
   groupByProject,
+  type AgentKind,
+  agentMetadata,
   type SessionMeta,
 } from "@claude-lens/parser";
 import { DashboardView } from "@/components/dashboard-view";
@@ -110,19 +112,21 @@ export default async function DashboardHome({
           </h1>
           <p style={{ fontSize: 13, color: "var(--af-text-secondary)", marginTop: 4 }}>
             {sessions.length} of {allSessions.length} session
-            {allSessions.length === 1 ? "" : "s"}, read from{" "}
-            <code
-              style={{
-                fontFamily: "var(--font-mono)",
-                fontSize: 11,
-                background: "var(--af-border-subtle)",
-                padding: "1px 6px",
-                borderRadius: 4,
-              }}
-            >
-              ~/.claude/projects
-            </code>
-            .
+            {allSessions.length === 1 ? "" : "s"} across{" "}
+            {(() => {
+              const counts = new Map<AgentKind, number>();
+              for (const s of allSessions) {
+                const k = (s.agent ?? "claude-code") as AgentKind;
+                counts.set(k, (counts.get(k) ?? 0) + 1);
+              }
+              const parts = agentMetadata
+                .map((m) => {
+                  const n = counts.get(m.kind) ?? 0;
+                  return n > 0 ? `${n} ${m.displayName}` : null;
+                })
+                .filter((s): s is string => s !== null);
+              return parts.length ? parts.join(" + ") : "no observed agents yet";
+            })()}.
           </p>
         </div>
         <DateRangeFilter current={range} />
@@ -246,7 +250,7 @@ export default async function DashboardHome({
           </div>
           <div>
             {recentSessions.length === 0 ? (
-              <div className="af-empty">No sessions found in ~/.claude/projects</div>
+              <div className="af-empty">No sessions found from any registered agent source.</div>
             ) : (
               recentSessions.map((s) => (
                 <Link

package/app/apps/web/app/parallelism/gantt-chart.tsx

@@ -10,7 +10,8 @@ import {
 } from "@claude-lens/parser";
 import type { DayOutcome, EntryEnrichmentStatus } from "@claude-lens/entries";
 import { formatDuration, formatTokens, prettyProjectName } from "@/lib/format";
-import { OutcomePill, OUTCOME_STYLES } from "@/components/outcome-pill";
+import { OutcomePill } from "@/components/outcome-pill";
+import { AgentIcon } from "@/components/agent-icon";
 
 export type SessionEntrySummary = {
   outcome: DayOutcome | null;
@@ -643,21 +644,8 @@ export function GanttChart({
                         flexShrink: 0,
                       }}
                     />
-                    {(() => {
-                      const sum = sessionEntries[session.id];
-                      if (sum?.outcome) {
-                        return (
-                          <span
-                            title={OUTCOME_STYLES[sum.outcome]?.label ?? sum.outcome}
-                            style={{ fontSize: 11, lineHeight: 1, flexShrink: 0 }}
-                            aria-hidden
-                          >
-                            {OUTCOME_STYLES[sum.outcome]?.icon ?? ""}
-                          </span>
-                        );
-                      }
-                      return null;
-                    })()}
+                    <AgentIcon agent={session.agent} size={11} />
+
                     <Link
                       href={`/sessions/${session.id}`}
                       style={{
@@ -841,7 +829,7 @@ export function GanttChart({
               if (sum.outcome) {
                 return (
                   <div style={{ marginBottom: 6 }}>
-                    <OutcomePill outcome={sum.outcome} size="sm" />
+                    <OutcomePill outcome={sum.outcome} size="sm" agent={hover.session.agent} />
                   </div>
                 );
               }
@@ -854,6 +842,7 @@ export function GanttChart({
                       sessionId={hover.session.id}
                       localDay={sum.localDay}
                       size="sm"
+                      agent={hover.session.agent}
                     />
                   </div>
                 );
@@ -1761,7 +1750,7 @@ function BurstDetailModal({
                       {(() => {
                         const sum = sessionEntries[s.id];
                         if (sum?.outcome) {
-                          return <OutcomePill outcome={sum.outcome} size="sm" label="text" />;
+                          return <OutcomePill outcome={sum.outcome} size="sm" label="text" agent={s.agent} />;
                         }
                         return null;
                       })()}

package/app/apps/web/app/projects/projects-view.tsx

@@ -8,6 +8,7 @@ import { formatDuration, formatRelative, formatTokens, prettyProjectName } from
 import { DataTable, type Column } from "@/components/data-table";
 import { useViewToggle } from "@/components/view-toggle";
 import { OutcomeMixRow } from "@/components/outcome-mix-row";
+import { AgentMixChip } from "@/components/agent-mix-chip";
 
 export type ProjectRow = {
   project: ProjectRollup;
@@ -63,6 +64,7 @@ const projectTableColumns: Column<ProjectRow>[] = [
         >
           {prettyProjectName(r.project.projectName)}
           {r.project.worktreeCount > 0 && <WorktreeBadge count={r.project.worktreeCount} />}
+          <AgentMixChip perAgent={r.project.perAgent} />
         </div>
         <div
           style={{
@@ -203,6 +205,7 @@ function ProjectCard({ row }: { row: ProjectRow }) {
           {prettyProjectName(p.projectName)}
         </span>
         {p.worktreeCount > 0 && <WorktreeBadge count={p.worktreeCount} />}
+        <AgentMixChip perAgent={p.perAgent} />
       </div>
       <div
         style={{ fontSize: 11, color: "var(--af-text-tertiary)", fontFamily: "var(--font-mono)" }}