fleetlens 0.1.0

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

@@ -0,0 +1,33 @@
+import { listSessions } from "@/lib/data";
+import { SessionsGrid } from "./sessions-grid";
+
+export const dynamic = "force-dynamic";
+
+export default async function SessionsPage() {
+  const sessions = await listSessions();
+
+  return (
+    <div style={{ maxWidth: 1280, padding: "32px 40px" }}>
+      <header style={{ marginBottom: 20 }}>
+        <h1 style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", margin: 0 }}>
+          All sessions
+        </h1>
+        <p style={{ fontSize: 13, color: "var(--af-text-secondary)", marginTop: 4 }}>
+          {sessions.length} session{sessions.length === 1 ? "" : "s"} in{" "}
+          <code
+            style={{
+              fontFamily: "var(--font-mono)",
+              fontSize: 11,
+              background: "var(--af-border-subtle)",
+              padding: "1px 6px",
+              borderRadius: 4,
+            }}
+          >
+            ~/.claude/projects
+          </code>
+        </p>
+      </header>
+      <SessionsGrid sessions={sessions} />
+    </div>
+  );
+}

package/app/apps/web/app/sessions/sessions-grid.tsx

@@ -0,0 +1,411 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { SessionMeta } from "@claude-lens/parser";
+import {
+  formatDuration,
+  formatRelative,
+  formatTokens,
+  prettyProjectName,
+  shortId,
+} from "@/lib/format";
+import { Search, Wrench, MessagesSquare, Clock } from "lucide-react";
+import { LiveBadge } from "@/components/live-badge";
+import { DataTable, type Column } from "@/components/data-table";
+import { useViewToggle } from "@/components/view-toggle";
+
+export function SessionsGrid({ sessions }: { sessions: SessionMeta[] }) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [project, setProject] = useState("all");
+  const [sortBy, setSortBy] = useState<"newest" | "longest" | "most-tokens">("newest");
+  const { mode: viewMode, toggle: viewToggle } = useViewToggle("cclens:sessions:view");
+
+  const projects = useMemo(() => {
+    const s = new Set(sessions.map((x) => x.projectName));
+    return ["all", ...Array.from(s).sort()];
+  }, [sessions]);
+
+  const filtered = useMemo(() => {
+    let rows = sessions.slice();
+    if (project !== "all") rows = rows.filter((s) => s.projectName === project);
+    if (query) {
+      const q = query.toLowerCase();
+      rows = rows.filter(
+        (s) =>
+          s.id.toLowerCase().includes(q) ||
+          (s.firstUserPreview ?? "").toLowerCase().includes(q) ||
+          (s.lastAgentPreview ?? "").toLowerCase().includes(q) ||
+          s.projectName.toLowerCase().includes(q),
+      );
+    }
+    // "Longest" uses active time (airTimeMs), not wall-clock duration.
+    // Otherwise a session that sat idle for 14 days with one message
+    // would out-rank a session that was actively coding for 4 hours.
+    if (sortBy === "longest")
+      rows.sort(
+        (a, b) =>
+          (b.airTimeMs ?? b.durationMs ?? 0) - (a.airTimeMs ?? a.durationMs ?? 0),
+      );
+    else if (sortBy === "most-tokens")
+      rows.sort(
+        (a, b) =>
+          b.totalUsage.input +
+          b.totalUsage.output +
+          b.totalUsage.cacheRead -
+          (a.totalUsage.input + a.totalUsage.output + a.totalUsage.cacheRead),
+      );
+    return rows;
+  }, [sessions, project, query, sortBy]);
+
+  return (
+    <div>
+      {/* Toolbar */}
+      <div
+        style={{
+          display: "flex",
+          gap: 10,
+          marginBottom: 16,
+          flexWrap: "wrap",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            position: "relative",
+            flex: 1,
+            minWidth: 260,
+            maxWidth: 480,
+          }}
+        >
+          <Search
+            size={13}
+            color="var(--af-text-tertiary)"
+            style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)" }}
+          />
+          <input
+            type="text"
+            placeholder="Search by message, project, or ID"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            style={{ width: "100%", paddingLeft: 32 }}
+          />
+        </div>
+        <select
+          value={project}
+          onChange={(e) => setProject(e.target.value)}
+          style={{ maxWidth: 260 }}
+        >
+          {projects.map((p) => (
+            <option key={p} value={p}>
+              {p === "all" ? "All projects" : prettyProjectName(p)}
+            </option>
+          ))}
+        </select>
+        <select value={sortBy} onChange={(e) => setSortBy(e.target.value as typeof sortBy)}>
+          <option value="newest">Newest</option>
+          <option value="longest">Longest</option>
+          <option value="most-tokens">Most tokens</option>
+        </select>
+        <span
+          style={{
+            marginLeft: "auto",
+            fontSize: 11,
+            color: "var(--af-text-tertiary)",
+            fontFamily: "var(--font-mono)",
+          }}
+        >
+          {filtered.length}
+        </span>
+        {viewToggle}
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="af-empty">No sessions found.</div>
+      ) : viewMode === "table" ? (
+        <DataTable<SessionMeta>
+          rows={filtered}
+          getRowKey={(s) => `${s.projectDir}/${s.id}`}
+          onRowClick={(s) => router.push(`/sessions/${s.id}`)}
+          defaultSortKey="lastActive"
+          defaultSortDir="desc"
+          columns={sessionTableColumns}
+        />
+      ) : (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))",
+            gap: 14,
+          }}
+        >
+          {filtered.map((s) => (
+            // Compose key from projectDir + id because Claude Code reuses
+            // session UUIDs when the same conversation continues across
+            // git worktrees — same UUID in two project dirs is a real
+            // pattern in `~/.claude/projects/`.
+            <SessionCard key={`${s.projectDir}/${s.id}`} session={s} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const sessionTableColumns: Column<SessionMeta>[] = [
+  {
+    key: "project",
+    header: "Project",
+    sortValue: (s) => s.projectName,
+    render: (s) => (
+      <div
+        style={{
+          maxWidth: 180,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+        title={s.projectName}
+      >
+        <div style={{ fontWeight: 500 }}>{prettyProjectName(s.projectName)}</div>
+        <div
+          style={{
+            fontSize: 10,
+            color: "var(--af-text-tertiary)",
+            fontFamily: "var(--font-mono)",
+          }}
+        >
+          {shortId(s.id)}
+        </div>
+      </div>
+    ),
+  },
+  {
+    key: "preview",
+    header: "First message",
+    sortable: false,
+    render: (s) => (
+      <div
+        style={{
+          maxWidth: 360,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          color: "var(--af-text-secondary)",
+        }}
+        title={s.firstUserPreview}
+      >
+        {s.firstUserPreview || "—"}
+      </div>
+    ),
+  },
+  {
+    key: "lastActive",
+    header: "Last active",
+    sortValue: (s) => (s.lastTimestamp ? Date.parse(s.lastTimestamp) : 0),
+    align: "right",
+    render: (s) => (
+      <span
+        suppressHydrationWarning
+        style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}
+      >
+        {s.lastTimestamp ? formatRelative(s.lastTimestamp) : "—"}
+      </span>
+    ),
+  },
+  {
+    key: "airtime",
+    header: "Agent time",
+    sortValue: (s) => s.airTimeMs ?? s.durationMs ?? 0,
+    align: "right",
+    render: (s) => (
+      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
+        {formatDuration(s.airTimeMs ?? s.durationMs ?? 0)}
+      </span>
+    ),
+  },
+  {
+    key: "turns",
+    header: "Turns",
+    sortValue: (s) => s.turnCount ?? 0,
+    align: "right",
+    render: (s) => (
+      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
+        {(s.turnCount ?? 0).toLocaleString()}
+      </span>
+    ),
+  },
+  {
+    key: "tools",
+    header: "Tool calls",
+    sortValue: (s) => s.toolCallCount ?? 0,
+    align: "right",
+    render: (s) => (
+      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
+        {(s.toolCallCount ?? 0).toLocaleString()}
+      </span>
+    ),
+  },
+  {
+    key: "tokens",
+    header: "Tokens",
+    sortValue: (s) =>
+      s.totalUsage.input +
+      s.totalUsage.output +
+      s.totalUsage.cacheRead +
+      s.totalUsage.cacheWrite,
+    align: "right",
+    render: (s) => (
+      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
+        {formatTokens(
+          s.totalUsage.input +
+            s.totalUsage.output +
+            s.totalUsage.cacheRead +
+            s.totalUsage.cacheWrite,
+        )}
+      </span>
+    ),
+  },
+  {
+    key: "status",
+    header: "Status",
+    sortValue: (s) => (s.status === "running" ? 1 : 0),
+    align: "center",
+    render: (s) =>
+      s.status === "running" ? <LiveBadge /> : <span style={{ opacity: 0.4 }}>—</span>,
+  },
+];
+
+function SessionCard({ session: s }: { session: SessionMeta }) {
+  const totalTokens =
+    s.totalUsage.input + s.totalUsage.output + s.totalUsage.cacheRead + s.totalUsage.cacheWrite;
+  return (
+    <Link
+      href={`/sessions/${s.id}`}
+      className="af-card"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+        padding: "14px 16px",
+      }}
+    >
+      {/* Header: project + id + time */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 8,
+        }}
+      >
+        <div
+          style={{
+            fontSize: 11,
+            color: "var(--af-text-tertiary)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            minWidth: 0,
+          }}
+          title={s.projectName}
+        >
+          <LiveBadge mtimeIso={s.lastTimestamp} />
+          <span
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {prettyProjectName(s.projectName)}
+          </span>
+        </div>
+        <div
+          style={{
+            fontSize: 10,
+            color: "var(--af-text-tertiary)",
+            fontFamily: "var(--font-mono)",
+            flexShrink: 0,
+          }}
+          suppressHydrationWarning
+        >
+          {s.firstTimestamp ? formatRelative(s.firstTimestamp) : "—"}
+        </div>
+      </div>
+
+      {/* First user message (prompt) */}
+      <div
+        style={{
+          fontSize: 13,
+          color: "var(--af-text)",
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          WebkitLineClamp: 2,
+          overflow: "hidden",
+          minHeight: 36,
+          lineHeight: 1.4,
+        }}
+        title={s.firstUserPreview}
+      >
+        {s.firstUserPreview || (
+          <em style={{ color: "var(--af-text-tertiary)" }}>(no user message)</em>
+        )}
+      </div>
+
+      {/* Last agent message (conclusion) */}
+      <div
+        style={{
+          fontSize: 11.5,
+          color: "var(--af-text-secondary)",
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          WebkitLineClamp: 2,
+          overflow: "hidden",
+          lineHeight: 1.4,
+          paddingLeft: 10,
+          borderLeft: "2px solid var(--af-accent-subtle)",
+        }}
+        title={s.lastAgentPreview}
+      >
+        {s.lastAgentPreview || <em style={{ color: "var(--af-text-tertiary)" }}>—</em>}
+      </div>
+
+      {/* Footer stats */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 14,
+          fontSize: 10.5,
+          color: "var(--af-text-tertiary)",
+          paddingTop: 8,
+          borderTop: "1px solid var(--af-border-subtle)",
+          fontFamily: "var(--font-mono)",
+        }}
+      >
+        <Stat icon={<MessagesSquare size={11} />} label={`${s.turnCount ?? 0} turn${s.turnCount === 1 ? "" : "s"}`} />
+        <Stat icon={<Wrench size={11} />} label={`${s.toolCallCount ?? 0} tools`} />
+        <Stat
+          icon={<Clock size={11} />}
+          label={formatDuration(s.airTimeMs ?? s.durationMs)}
+        />
+        <span style={{ marginLeft: "auto" }}>{formatTokens(totalTokens)}</span>
+      </div>
+    </Link>
+  );
+}
+
+function Stat({ icon, label }: { icon: React.ReactNode; label: string }) {
+  return (
+    <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+      {icon}
+      {label}
+    </span>
+  );
+}

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

@@ -0,0 +1,140 @@
+/**
+ * Claude Code usage page — historical utilization analytics.
+ *
+ * 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.
+ *
+ * Reads from ~/.cclens/usage.jsonl — no API endpoint needed.
+ */
+
+import { Activity } from "lucide-react";
+import { readUsageSnapshots, latestUsageSnapshot } from "@/lib/usage-data";
+import { UsageChartsDashboard } from "@/components/usage-charts-dashboard";
+
+export const dynamic = "force-dynamic";
+
+export default function UsagePage() {
+  const snapshots = readUsageSnapshots();
+  const latest = latestUsageSnapshot();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 18,
+        maxWidth: 1400,
+        padding: "20px 32px",
+      }}
+    >
+      {/* Header */}
+      <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} />
+          Usage history
+        </h1>
+        <span style={{ fontSize: 11, color: "var(--af-text-tertiary)" }}>
+          historical plan utilization · current usage in sidebar
+        </span>
+      </header>
+
+      {!latest ? (
+        <EmptyState />
+      ) : (
+        <>
+          <UsageChartsDashboard snapshots={snapshots} />
+          <div
+            style={{
+              fontSize: 11,
+              color: "var(--af-text-tertiary)",
+              fontFamily: "var(--font-mono)",
+            }}
+            suppressHydrationWarning
+          >
+            Last daemon poll: {new Date(latest.captured_at).toLocaleString()} ·{" "}
+            {snapshots.length} snapshot{snapshots.length === 1 ? "" : "s"} on disk
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div
+      className="af-card"
+      style={{
+        padding: "48px 32px",
+        textAlign: "center",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 15,
+          fontWeight: 600,
+          color: "var(--af-text)",
+        }}
+      >
+        No usage data yet
+      </div>
+      <p
+        style={{
+          fontSize: 12,
+          color: "var(--af-text-tertiary)",
+          marginTop: 8,
+        }}
+      >
+        Start the polling daemon to begin collecting metrics every 5 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
+          style={{
+            background: "var(--background)",
+            padding: "1px 6px",
+            borderRadius: 4,
+            fontFamily: "var(--font-mono)",
+          }}
+        >
+          cclens usage
+        </code>
+        .
+      </p>
+    </div>
+  );
+}