fleetlens 0.4.1 → 0.6.0

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

@@ -3,31 +3,32 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import type { ProjectRollup } from "@claude-lens/parser";
+import type { DayOutcome } from "@claude-lens/entries";
 import { formatDuration, formatRelative, formatTokens, prettyProjectName } from "@/lib/format";
 import { DataTable, type Column } from "@/components/data-table";
 import { useViewToggle } from "@/components/view-toggle";
+import { OutcomeMixRow } from "@/components/outcome-mix-row";
 
-export function ProjectsView({ projects }: { projects: ProjectRollup[] }) {
+export type ProjectRow = {
+  project: ProjectRollup;
+  recentDays: Array<{ date: string; outcome: DayOutcome | null }>;
+};
+
+export function ProjectsView({ rows }: { rows: ProjectRow[] }) {
   const router = useRouter();
   const { mode, toggle } = useViewToggle("cclens:projects:view");
 
   return (
     <>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-end",
-          marginBottom: 14,
-        }}
-      >
+      <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 14 }}>
         {toggle}
       </div>
       {mode === "table" ? (
-        <DataTable<ProjectRollup>
-          rows={projects}
-          getRowKey={(p) => p.projectDir}
-          onRowClick={(p) =>
-            router.push(`/projects/${encodeURIComponent(p.projectDir)}`)
+        <DataTable<ProjectRow>
+          rows={rows}
+          getRowKey={(r) => r.project.projectDir}
+          onRowClick={(r) =>
+            router.push(`/projects/${encodeURIComponent(r.project.projectDir)}`)
           }
           defaultSortKey="lastActive"
           defaultSortDir="desc"
@@ -41,8 +42,8 @@ export function ProjectsView({ projects }: { projects: ProjectRollup[] }) {
             gap: 14,
           }}
         >
-          {projects.map((p) => (
-            <ProjectCard key={p.projectDir} project={p} />
+          {rows.map((r) => (
+            <ProjectCard key={r.project.projectDir} row={r} />
           ))}
         </div>
       )}
@@ -50,23 +51,18 @@ export function ProjectsView({ projects }: { projects: ProjectRollup[] }) {
   );
 }
 
-const projectTableColumns: Column<ProjectRollup>[] = [
+const projectTableColumns: Column<ProjectRow>[] = [
   {
     key: "name",
     header: "Project",
-    sortValue: (p) => p.projectName,
-    render: (p) => (
+    sortValue: (r) => r.project.projectName,
+    render: (r) => (
       <div>
         <div
-          style={{
-            fontWeight: 500,
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 6,
-          }}
+          style={{ fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 6 }}
         >
-          {prettyProjectName(p.projectName)}
-          {p.worktreeCount > 0 && <WorktreeBadge count={p.worktreeCount} />}
+          {prettyProjectName(r.project.projectName)}
+          {r.project.worktreeCount > 0 && <WorktreeBadge count={r.project.worktreeCount} />}
         </div>
         <div
           style={{
@@ -78,72 +74,78 @@ const projectTableColumns: Column<ProjectRollup>[] = [
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
           }}
-          title={p.projectName}
+          title={r.project.projectName}
         >
-          {p.projectName}
+          {r.project.projectName}
         </div>
       </div>
     ),
   },
+  {
+    key: "recent",
+    header: "Recent (7d)",
+    sortable: false,
+    render: (r) => <OutcomeMixRow days={r.recentDays} />,
+  },
   {
     key: "sessions",
     header: "Sessions",
-    sortValue: (p) => p.metrics.sessionCount,
+    sortValue: (r) => r.project.metrics.sessionCount,
     align: "right",
-    render: (p) => (
+    render: (r) => (
       <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
-        {p.metrics.sessionCount.toLocaleString()}
+        {r.project.metrics.sessionCount.toLocaleString()}
       </span>
     ),
   },
   {
     key: "turns",
     header: "Turns",
-    sortValue: (p) => p.metrics.totalTurns,
+    sortValue: (r) => r.project.metrics.totalTurns,
     align: "right",
-    render: (p) => (
+    render: (r) => (
       <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
-        {p.metrics.totalTurns.toLocaleString()}
+        {r.project.metrics.totalTurns.toLocaleString()}
       </span>
     ),
   },
   {
     key: "tools",
     header: "Tool calls",
-    sortValue: (p) => p.metrics.totalToolCalls,
+    sortValue: (r) => r.project.metrics.totalToolCalls,
     align: "right",
-    render: (p) => (
+    render: (r) => (
       <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
-        {p.metrics.totalToolCalls.toLocaleString()}
+        {r.project.metrics.totalToolCalls.toLocaleString()}
       </span>
     ),
   },
   {
     key: "airtime",
     header: "Agent time",
-    sortValue: (p) => p.metrics.totalAirTimeMs,
+    sortValue: (r) => r.project.metrics.totalAirTimeMs,
     align: "right",
-    render: (p) => (
+    render: (r) => (
       <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
-        {formatDuration(p.metrics.totalAirTimeMs)}
+        {formatDuration(r.project.metrics.totalAirTimeMs)}
       </span>
     ),
   },
   {
     key: "tokens",
     header: "Tokens",
-    sortValue: (p) =>
-      p.metrics.totalTokens.input +
-      p.metrics.totalTokens.output +
-      p.metrics.totalTokens.cacheRead +
-      p.metrics.totalTokens.cacheWrite,
+    sortValue: (r) =>
+      r.project.metrics.totalTokens.input +
+      r.project.metrics.totalTokens.output +
+      r.project.metrics.totalTokens.cacheRead +
+      r.project.metrics.totalTokens.cacheWrite,
     align: "right",
-    render: (p) => {
+    render: (r) => {
       const total =
-        p.metrics.totalTokens.input +
-        p.metrics.totalTokens.output +
-        p.metrics.totalTokens.cacheRead +
-        p.metrics.totalTokens.cacheWrite;
+        r.project.metrics.totalTokens.input +
+        r.project.metrics.totalTokens.output +
+        r.project.metrics.totalTokens.cacheRead +
+        r.project.metrics.totalTokens.cacheWrite;
       return (
         <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
           {formatTokens(total)}
@@ -154,34 +156,31 @@ const projectTableColumns: Column<ProjectRollup>[] = [
   {
     key: "lastActive",
     header: "Last active",
-    sortValue: (p) => p.lastActiveMs ?? 0,
+    sortValue: (r) => r.project.lastActiveMs ?? 0,
     align: "right",
-    render: (p) => (
-      <span
-        suppressHydrationWarning
-        style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}
-      >
-        {p.lastActiveMs ? formatRelative(new Date(p.lastActiveMs).toISOString()) : "—"}
+    render: (r) => (
+      <span suppressHydrationWarning style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
+        {r.project.lastActiveMs
+          ? formatRelative(new Date(r.project.lastActiveMs).toISOString())
+          : "—"}
       </span>
     ),
   },
 ];
 
-function ProjectCard({ project: p }: { project: ProjectRollup }) {
+function ProjectCard({ row }: { row: ProjectRow }) {
+  const p = row.project;
   const totalTokens =
     p.metrics.totalTokens.input +
     p.metrics.totalTokens.output +
     p.metrics.totalTokens.cacheRead +
     p.metrics.totalTokens.cacheWrite;
+  const hasOutcomes = row.recentDays.some((d) => d.outcome !== null);
   return (
     <Link
       href={`/projects/${encodeURIComponent(p.projectDir)}`}
       className="af-card"
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 10,
-      }}
+      style={{ display: "flex", flexDirection: "column", gap: 10 }}
     >
       <div
         style={{
@@ -206,14 +205,26 @@ function ProjectCard({ project: p }: { project: ProjectRollup }) {
         {p.worktreeCount > 0 && <WorktreeBadge count={p.worktreeCount} />}
       </div>
       <div
-        style={{
-          fontSize: 11,
-          color: "var(--af-text-tertiary)",
-          fontFamily: "var(--font-mono)",
-        }}
+        style={{ fontSize: 11, color: "var(--af-text-tertiary)", fontFamily: "var(--font-mono)" }}
       >
         {p.projectName}
       </div>
+
+      {hasOutcomes && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            fontSize: 10,
+            color: "var(--af-text-tertiary)",
+          }}
+        >
+          <span>recent:</span>
+          <OutcomeMixRow days={row.recentDays} />
+        </div>
+      )}
+
       <div
         style={{
           display: "grid",

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

@@ -0,0 +1,21 @@
+import { Activity } from "lucide-react";
+import { RunsLiveBoard } from "@/components/runs-live-board";
+
+export const dynamic = "force-dynamic";
+
+export default function RunsPage() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 18, maxWidth: 1600, padding: "20px 32px" }}>
+      <header style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}>
+        <h1 style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", margin: 0, display: "flex", alignItems: "center", gap: 8 }}>
+          <Activity size={18} />
+          LLM runs
+        </h1>
+        <span style={{ fontSize: 11, color: "var(--af-text-tertiary)" }}>
+          live trace of every claude -p subprocess · click a run to stream its events + see exact prompts
+        </span>
+      </header>
+      <RunsLiveBoard />
+    </div>
+  );
+}

package/app/apps/web/app/sessions/[id]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import { getSession } from "@/lib/data";
 import { loadTeamForSession, findTeamLead } from "@claude-lens/parser/fs";
+import { listEntriesForSession } from "@claude-lens/entries/fs";
 import {
   teamViewToTimelineData,
   type TimelineData,
@@ -17,6 +18,9 @@ export default async function SessionDetailPage({
   const { id } = await params;
   const session = await getSession(id);
   if (!session) return notFound();
+  const entries = listEntriesForSession(id).sort((a, b) =>
+    b.local_day.localeCompare(a.local_day),
+  );
 
   // Only attempt the team load when this session is actually orchestrating
   // a team. A bare teamName tag (without TeamCreate or outbound SendMessage)
@@ -50,5 +54,12 @@ export default async function SessionDetailPage({
     events: session.events.map((e) => ({ ...e, raw: undefined })),
   };
 
-  return <SessionView session={stripped} team={teamProps} teamLead={teamLeadInfo} />;
+  return (
+    <SessionView
+      session={stripped}
+      team={teamProps}
+      teamLead={teamLeadInfo}
+      entries={entries}
+    />
+  );
 }

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

@@ -24,6 +24,8 @@ import type {
   SubagentRun,
   PrMarker,
 } from "@claude-lens/parser";
+import type { Entry } from "@claude-lens/entries";
+import { OutcomePill } from "@/components/outcome-pill";
 import {
   buildPresentation,
   buildMegaRows,
@@ -97,10 +99,12 @@ export function SessionView({
   session,
   team,
   teamLead,
+  entries = [],
 }: {
   session: SessionDetail;
   team?: (TimelineData & { teamName: string }) | null;
   teamLead?: { leadSessionId: string; teamName: string; agentName: string } | null;
+  entries?: Entry[];
 }) {
   const readHash = (): TabId => {
     if (typeof window === "undefined") return "transcript";
@@ -738,6 +742,11 @@ export function SessionView({
           />
         ) : tab === "transcript" ? (
           <>
+            {entries.length > 0 && (
+              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 14 }}>
+                {entries.map((e) => <EntryDayStrip key={e.local_day} entry={e} />)}
+              </div>
+            )}
             {teammateCount > 0 && (
               <div
                 style={{
@@ -4656,3 +4665,113 @@ function formatDurationHeader(ms: number): string {
   const rem = s % 60;
   return `${m}m ${rem}s`;
 }
+
+function EntryDayStrip({ entry }: { entry: Entry }) {
+  const fmtDate = new Date(`${entry.local_day}T12:00:00`).toLocaleDateString("en-US", {
+    weekday: "short", month: "short", day: "numeric",
+  });
+  const durMin = Math.round(entry.numbers.active_min);
+  const enr = entry.enrichment;
+  const isPending = enr.status === "pending" || enr.status === "error";
+  const isTrivial = enr.status === "skipped_trivial";
+
+  return (
+    <div
+      style={{
+        border: "1px solid var(--af-border-subtle)",
+        borderRadius: 10,
+        padding: "12px 16px",
+        background: "var(--af-surface)",
+        fontSize: 13,
+        lineHeight: 1.5,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+        <span
+          style={{
+            fontSize: 12,
+            color: "var(--af-text-tertiary)",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+          }}
+        >
+          📅 {fmtDate}
+        </span>
+        {isTrivial ? (
+          <OutcomePill outcome="trivial" size="md" />
+        ) : isPending ? (
+          <OutcomePill
+            outcome={null}
+            pending
+            sessionId={entry.session_id}
+            localDay={entry.local_day}
+            size="md"
+          />
+        ) : enr.outcome ? (
+          <OutcomePill outcome={enr.outcome} size="md" />
+        ) : null}
+        <span
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 11,
+            color: "var(--af-text-tertiary)",
+            marginLeft: "auto",
+          }}
+        >
+          {durMin}m active
+        </span>
+      </div>
+
+      {isTrivial && (
+        <div style={{ fontSize: 12, color: "var(--af-text-tertiary)", fontStyle: "italic", marginTop: 8 }}>
+          Warmup — no enrichment generated.
+        </div>
+      )}
+
+      {isPending && (
+        <div style={{ fontSize: 12, color: "var(--af-text-secondary)", marginTop: 8 }}>
+          Click the pending pill to generate this day's digest →
+        </div>
+      )}
+
+      {enr.status === "done" && (
+        <>
+          {enr.brief_summary && (
+            <p style={{ margin: "10px 0 0", color: "var(--af-text)" }}>{enr.brief_summary}</p>
+          )}
+          {(enr.friction_detail || enr.user_instructions.length > 0) && (
+            <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 6 }}>
+              {enr.friction_detail && (
+                <div style={{ fontSize: 12, color: "var(--af-text-secondary)" }}>
+                  <span style={{ color: "#ed8936" }}>⚠ </span>
+                  {enr.friction_detail}
+                </div>
+              )}
+              {enr.user_instructions.length > 0 && (
+                <details style={{ fontSize: 12, color: "var(--af-text-secondary)" }}>
+                  <summary style={{ cursor: "pointer", color: "var(--af-text-tertiary)" }}>
+                    Top user instructions ({enr.user_instructions.length})
+                  </summary>
+                  <ul style={{ margin: "6px 0 0", paddingLeft: 18 }}>
+                    {enr.user_instructions.slice(0, 5).map((u, i) => (
+                      <li key={i} style={{ marginBottom: 2 }}>{u}</li>
+                    ))}
+                  </ul>
+                </details>
+              )}
+            </div>
+          )}
+          <div style={{ marginTop: 10, fontSize: 11 }}>
+            <Link
+              href={`/digest/${entry.local_day}`}
+              style={{ color: "var(--af-accent)", textDecoration: "none" }}
+            >
+              Open day digest →
+            </Link>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -1,10 +1,26 @@
 import { listSessions } from "@/lib/data";
-import { SessionsGrid } from "./sessions-grid";
+import { buildEntriesIndex } from "@/lib/entries-index";
+import { SessionsGrid, type SessionRow } from "./sessions-grid";
 
 export const dynamic = "force-dynamic";
 
 export default async function SessionsPage() {
-  const sessions = await listSessions();
+  const [sessions, index] = await Promise.all([listSessions(), buildEntriesIndex()]);
+
+  const rows: SessionRow[] = sessions.map((s) => {
+    const entries = index.bySession.get(s.id) ?? [];
+    const enrichedDesc = [...entries]
+      .reverse()
+      .find((e) => e.enrichment.status === "done");
+    const latest = entries[entries.length - 1];
+    return {
+      session: s,
+      outcome: index.sessionOutcome.get(s.id) ?? null,
+      briefSummary: enrichedDesc?.enrichment.brief_summary ?? null,
+      enrichmentStatus: latest?.enrichment.status ?? null,
+      latestLocalDay: latest?.local_day ?? null,
+    };
+  });
 
   return (
     <div style={{ maxWidth: 1280, padding: "32px 40px" }}>
@@ -27,7 +43,7 @@ export default async function SessionsPage() {
           </code>
         </p>
       </header>
-      <SessionsGrid sessions={sessions} />
+      <SessionsGrid rows={rows} />
     </div>
   );
 }