fleetlens 0.1.0

package/app/apps/web/components/data-table.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useMemo, useState, type ReactNode } from "react";
+import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+
+/**
+ * Generic sortable table. Each column provides a `sortValue` function
+ * so we can sort by something other than the displayed `render`
+ * output (e.g. render a relative date but sort by absolute epoch ms).
+ *
+ * Click a column header to sort by it. First click = descending.
+ * Click the same header again to flip direction, or a different
+ * header to switch sort column.
+ */
+export type Column<T> = {
+  key: string;
+  header: string;
+  /** Value used for sorting — must return a number or string */
+  sortValue?: (row: T) => number | string;
+  /** Content renderer for the cell */
+  render: (row: T) => ReactNode;
+  /** Optional CSS width / text align */
+  width?: string | number;
+  align?: "left" | "right" | "center";
+  /** Disable sorting for this column (e.g. preview/action columns) */
+  sortable?: boolean;
+};
+
+export function DataTable<T>({
+  rows,
+  columns,
+  getRowKey,
+  onRowClick,
+  defaultSortKey,
+  defaultSortDir = "desc",
+}: {
+  rows: T[];
+  columns: Column<T>[];
+  getRowKey: (row: T) => string;
+  onRowClick?: (row: T) => void;
+  defaultSortKey?: string;
+  defaultSortDir?: "asc" | "desc";
+}) {
+  const [sortKey, setSortKey] = useState<string | null>(defaultSortKey ?? null);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">(defaultSortDir);
+
+  const sorted = useMemo(() => {
+    if (!sortKey) return rows;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col || !col.sortValue) return rows;
+    const mult = sortDir === "asc" ? 1 : -1;
+    return [...rows].sort((a, b) => {
+      const av = col.sortValue!(a);
+      const bv = col.sortValue!(b);
+      if (typeof av === "number" && typeof bv === "number") return (av - bv) * mult;
+      return String(av).localeCompare(String(bv)) * mult;
+    });
+  }, [rows, columns, sortKey, sortDir]);
+
+  const handleHeaderClick = (col: Column<T>) => {
+    if (col.sortable === false || !col.sortValue) return;
+    if (sortKey === col.key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(col.key);
+      setSortDir("desc");
+    }
+  };
+
+  return (
+    <div
+      style={{
+        overflowX: "auto",
+        border: "1px solid var(--af-border-subtle)",
+        borderRadius: 8,
+        background: "var(--af-surface)",
+      }}
+    >
+      <table
+        style={{
+          width: "100%",
+          borderCollapse: "collapse",
+          fontSize: 12,
+          color: "var(--af-text)",
+        }}
+      >
+        <thead>
+          <tr>
+            {columns.map((col) => {
+              const isSorted = sortKey === col.key;
+              const isSortable = col.sortable !== false && !!col.sortValue;
+              return (
+                <th
+                  key={col.key}
+                  onClick={() => handleHeaderClick(col)}
+                  style={{
+                    textAlign: col.align ?? "left",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: isSorted ? "var(--af-accent)" : "var(--af-text-tertiary)",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    padding: "10px 12px",
+                    borderBottom: "1px solid var(--af-border-subtle)",
+                    cursor: isSortable ? "pointer" : "default",
+                    userSelect: "none",
+                    whiteSpace: "nowrap",
+                    width: col.width,
+                    background: "var(--af-surface)",
+                    position: "sticky",
+                    top: 0,
+                  }}
+                >
+                  <span
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 4,
+                      verticalAlign: "middle",
+                    }}
+                  >
+                    {col.header}
+                    {isSortable && (
+                      <span style={{ display: "inline-flex", opacity: isSorted ? 1 : 0.35 }}>
+                        {!isSorted ? (
+                          <ArrowUpDown size={10} />
+                        ) : sortDir === "asc" ? (
+                          <ArrowUp size={10} />
+                        ) : (
+                          <ArrowDown size={10} />
+                        )}
+                      </span>
+                    )}
+                  </span>
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((row) => (
+            <tr
+              key={getRowKey(row)}
+              onClick={() => onRowClick?.(row)}
+              style={{
+                cursor: onRowClick ? "pointer" : "default",
+                borderBottom: "1px solid var(--af-border-subtle)",
+                transition: "background 0.1s",
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLTableRowElement).style.background =
+                  "var(--af-surface-hover)";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLTableRowElement).style.background = "";
+              }}
+            >
+              {columns.map((col) => (
+                <td
+                  key={col.key}
+                  style={{
+                    padding: "10px 12px",
+                    textAlign: col.align ?? "left",
+                    whiteSpace: col.align === "right" ? "nowrap" : undefined,
+                    verticalAlign: "top",
+                  }}
+                >
+                  {col.render(row)}
+                </td>
+              ))}
+            </tr>
+          ))}
+          {sorted.length === 0 && (
+            <tr>
+              <td
+                colSpan={columns.length}
+                style={{
+                  padding: "32px 16px",
+                  textAlign: "center",
+                  fontSize: 12,
+                  color: "var(--af-text-tertiary)",
+                }}
+              >
+                No rows to display.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/app/apps/web/components/date-range-filter.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import type { RangeKey } from "@/lib/date-range";
+
+export type { RangeKey };
+
+const OPTIONS: { key: RangeKey; label: string }[] = [
+  { key: "7d", label: "7D" },
+  { key: "30d", label: "30D" },
+  { key: "90d", label: "90D" },
+  { key: "all", label: "All" },
+];
+
+/**
+ * Tiny segmented control that writes the current range into a
+ * `?range=` search param. Pages read it server-side in `searchParams`
+ * and filter `listSessions()` accordingly. No client-side state — the
+ * URL is the source of truth, so navigation + reload + share all work.
+ */
+export function DateRangeFilter({ current }: { current: RangeKey }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const pick = (next: RangeKey) => {
+    const params = new URLSearchParams(searchParams?.toString() ?? "");
+    if (next === "all") params.delete("range");
+    else params.set("range", next);
+    const qs = params.toString();
+    router.replace(`${pathname}${qs ? `?${qs}` : ""}`, { scroll: false });
+  };
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        gap: 2,
+        background: "var(--background)",
+        borderRadius: 7,
+        padding: 3,
+        border: "1px solid var(--af-border-subtle)",
+      }}
+    >
+      {OPTIONS.map((o) => (
+        <button
+          key={o.key}
+          type="button"
+          onClick={() => pick(o.key)}
+          style={{
+            fontSize: 11,
+            padding: "4px 10px",
+            border: "none",
+            borderRadius: 5,
+            background: current === o.key ? "var(--af-surface-elevated)" : "transparent",
+            color: current === o.key ? "var(--af-text)" : "var(--af-text-tertiary)",
+            fontWeight: 500,
+            cursor: "pointer",
+          }}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+

package/app/apps/web/components/date-range-picker.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export type RangePreset = "current" | "24h" | "7d" | "30d" | "90d" | "custom";
+
+export type DateRange = {
+  preset: RangePreset;
+  /** Absolute start timestamp (ms). Undefined when preset === "current". */
+  startMs?: number;
+  /** Absolute end timestamp (ms). Undefined when preset === "current". */
+  endMs?: number;
+};
+
+const HOUR = 60 * 60 * 1000;
+const DAY = 24 * HOUR;
+
+const ALL_PRESETS: { key: RangePreset; label: string }[] = [
+  { key: "current", label: "Current cycle" },
+  { key: "24h", label: "24H" },
+  { key: "7d", label: "7D" },
+  { key: "30d", label: "30D" },
+  { key: "90d", label: "90D" },
+  { key: "custom", label: "Custom" },
+];
+
+/** Window types map to the sensible preset subset. */
+export type WindowType = "short" | "long";
+
+function presetsForWindow(type: WindowType): typeof ALL_PRESETS {
+  // Short windows (5h) support 24H — that's ~5 cycles worth of zoom.
+  // Long windows (7d) don't — 24H is inside a single cycle, so use
+  // 'Current cycle' instead. 7D is the shortest meaningful multi-cycle
+  // view for a 7-day window.
+  if (type === "long") {
+    return ALL_PRESETS.filter((p) => p.key !== "24h");
+  }
+  return ALL_PRESETS;
+}
+
+export function resolveRange(range: DateRange): { startMs?: number; endMs?: number } {
+  const now = Date.now();
+  switch (range.preset) {
+    case "current":
+      return {};
+    case "24h":
+      return { startMs: now - 24 * HOUR, endMs: now };
+    case "7d":
+      return { startMs: now - 7 * DAY, endMs: now };
+    case "30d":
+      return { startMs: now - 30 * DAY, endMs: now };
+    case "90d":
+      return { startMs: now - 90 * DAY, endMs: now };
+    case "custom":
+      return { startMs: range.startMs, endMs: range.endMs };
+  }
+}
+
+export function DateRangePicker({
+  value,
+  onChange,
+  windowType = "short",
+}: {
+  value: DateRange;
+  onChange: (next: DateRange) => void;
+  /** Controls which presets are available. 'long' hides 24H. */
+  windowType?: WindowType;
+}) {
+  const presets = presetsForWindow(windowType);
+
+  const [customStart, setCustomStart] = useState<string>(() =>
+    toDatetimeLocal(value.startMs ?? Date.now() - 7 * DAY),
+  );
+  const [customEnd, setCustomEnd] = useState<string>(() =>
+    toDatetimeLocal(value.endMs ?? Date.now()),
+  );
+
+  // Auto-apply when the user changes custom datetime inputs.
+  useEffect(() => {
+    if (value.preset !== "custom") return;
+    const startMs = fromDatetimeLocal(customStart);
+    const endMs = fromDatetimeLocal(customEnd);
+    if (Number.isNaN(startMs) || Number.isNaN(endMs)) return;
+    if (startMs >= endMs) return;
+    // Only fire if something actually changed.
+    if (startMs !== value.startMs || endMs !== value.endMs) {
+      onChange({ preset: "custom", startMs, endMs });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [customStart, customEnd, value.preset]);
+
+  const selectPreset = (preset: RangePreset) => {
+    if (preset === "custom") {
+      onChange({
+        preset,
+        startMs: fromDatetimeLocal(customStart),
+        endMs: fromDatetimeLocal(customEnd),
+      });
+    } else {
+      onChange({ preset });
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        flexWrap: "wrap",
+      }}
+    >
+      <div
+        style={{
+          display: "inline-flex",
+          borderRadius: 6,
+          border: "1px solid var(--af-border-subtle)",
+          overflow: "hidden",
+        }}
+      >
+        {presets.map((p, i) => (
+          <button
+            key={p.key}
+            type="button"
+            onClick={() => selectPreset(p.key)}
+            style={{
+              padding: "6px 12px",
+              fontSize: 11,
+              fontWeight: 500,
+              background:
+                value.preset === p.key ? "var(--af-accent-subtle)" : "transparent",
+              color:
+                value.preset === p.key ? "var(--af-accent)" : "var(--af-text-secondary)",
+              border: "none",
+              borderRight:
+                i < presets.length - 1 ? "1px solid var(--af-border-subtle)" : "none",
+              cursor: "pointer",
+              letterSpacing: "0.02em",
+            }}
+          >
+            {p.label}
+          </button>
+        ))}
+      </div>
+      {value.preset === "custom" && (
+        <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+          <input
+            type="datetime-local"
+            value={customStart}
+            onChange={(e) => setCustomStart(e.target.value)}
+            style={datetimeInputStyle}
+          />
+          <span style={{ fontSize: 11, color: "var(--af-text-tertiary)" }}>→</span>
+          <input
+            type="datetime-local"
+            value={customEnd}
+            onChange={(e) => setCustomEnd(e.target.value)}
+            style={datetimeInputStyle}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+const datetimeInputStyle: React.CSSProperties = {
+  padding: "5px 8px",
+  fontSize: 11,
+  background: "var(--background)",
+  color: "var(--af-text)",
+  border: "1px solid var(--af-border-subtle)",
+  borderRadius: 5,
+  fontFamily: "var(--font-mono)",
+};
+
+/** Format a ms timestamp as YYYY-MM-DDTHH:MM for <input type="datetime-local">. */
+function toDatetimeLocal(ms: number): string {
+  const d = new Date(ms);
+  const y = d.getFullYear();
+  const mo = String(d.getMonth() + 1).padStart(2, "0");
+  const da = String(d.getDate()).padStart(2, "0");
+  const h = String(d.getHours()).padStart(2, "0");
+  const mi = String(d.getMinutes()).padStart(2, "0");
+  return `${y}-${mo}-${da}T${h}:${mi}`;
+}
+
+function fromDatetimeLocal(value: string): number {
+  const d = new Date(value);
+  return d.getTime();
+}

package/app/apps/web/components/heatmap.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import type { DailyBucket } from "@claude-lens/parser";
+
+/**
+ * GitHub-style contribution heatmap.
+ *
+ * Input: array of DailyBucket (pre-sorted ascending by date, with gaps filled).
+ * Layout: 7 rows (Sun..Sat) × N week columns.
+ */
+export function Heatmap({
+  buckets,
+  valueKey = "sessions",
+  cellSize = 13,
+  cellGap = 3,
+}: {
+  buckets: DailyBucket[];
+  valueKey?: "sessions" | "toolCalls" | "turns";
+  cellSize?: number;
+  cellGap?: number;
+}) {
+  const [hover, setHover] = useState<{ bucket: DailyBucket; x: number; y: number } | null>(null);
+
+  const { weeks, max } = useMemo(() => {
+    if (buckets.length === 0) return { weeks: [] as DailyBucket[][], max: 0 };
+    const firstBucket = buckets[0]!;
+    const firstDate = parseDay(firstBucket.date);
+    // Start at the most recent Sunday on or before firstDate.
+    const firstSunday = new Date(firstDate);
+    firstSunday.setDate(firstSunday.getDate() - firstSunday.getDay());
+
+    // Build an array of DailyBucket (or null for pre-range cells).
+    const map = new Map(buckets.map((b) => [b.date, b]));
+    const weeks: DailyBucket[][] = [];
+    let cur: DailyBucket[] = [];
+    const today = new Date();
+    const lastBucket = buckets[buckets.length - 1]!;
+    const lastDate = parseDay(lastBucket.date);
+    const endDate = lastDate > today ? lastDate : today;
+
+    let maxVal = 0;
+    for (const d = new Date(firstSunday); d <= endDate; d.setDate(d.getDate() + 1)) {
+      const day = formatDay(d);
+      const bucket = map.get(day) ?? makeEmpty(day);
+      const v = bucket[valueKey];
+      if (v > maxVal) maxVal = v;
+      cur.push(bucket);
+      if (cur.length === 7) {
+        weeks.push(cur);
+        cur = [];
+      }
+    }
+    if (cur.length > 0) {
+      while (cur.length < 7) cur.push(makeEmpty(formatDay(new Date())));
+      weeks.push(cur);
+    }
+    return { weeks, max: maxVal };
+  }, [buckets, valueKey]);
+
+  if (buckets.length === 0) {
+    return (
+      <div
+        style={{
+          padding: "32px 12px",
+          color: "var(--af-text-tertiary)",
+          fontSize: 12,
+          textAlign: "center",
+        }}
+      >
+        No activity yet.
+      </div>
+    );
+  }
+
+  const width = weeks.length * (cellSize + cellGap) + 24;
+  const height = 7 * (cellSize + cellGap) + 18;
+
+  return (
+    <div style={{ position: "relative", overflowX: "auto" }}>
+      <svg width={width} height={height} style={{ display: "block" }}>
+        {/* Day labels on the left */}
+        <g fontSize={9} fill="var(--af-text-tertiary)">
+          {["Mon", "Wed", "Fri"].map((label, i) => (
+            <text
+              key={label}
+              x={0}
+              y={18 + (1 + i * 2) * (cellSize + cellGap) + cellSize - 3}
+            >
+              {label}
+            </text>
+          ))}
+        </g>
+
+        {/* Cells */}
+        <g transform="translate(24, 18)">
+          {weeks.map((week, wi) =>
+            week.map((bucket, di) => {
+              const val = bucket[valueKey];
+              const fill = colorForValue(val, max);
+              return (
+                <rect
+                  key={`${wi}-${di}`}
+                  x={wi * (cellSize + cellGap)}
+                  y={di * (cellSize + cellGap)}
+                  width={cellSize}
+                  height={cellSize}
+                  rx={2.5}
+                  ry={2.5}
+                  stroke={val > 0 ? "rgba(255,255,255,0.04)" : "transparent"}
+                  onMouseEnter={(e) => {
+                    const rect = (e.currentTarget as SVGRectElement).getBoundingClientRect();
+                    setHover({
+                      bucket,
+                      x: rect.left + rect.width / 2,
+                      y: rect.top - 6,
+                    });
+                  }}
+                  onMouseLeave={() => setHover(null)}
+                  // Use `style.fill` not the `fill` attribute — React does
+                  // not expand CSS custom properties (var(--…)) inside the
+                  // SVG presentation attribute, but it does resolve them in
+                  // inline styles. So all dots render as the placeholder /
+                  // first resolved var if we set `fill={...}` directly.
+                  style={{ cursor: val > 0 ? "pointer" : "default", fill }}
+                />
+              );
+            }),
+          )}
+        </g>
+      </svg>
+
+      {/* Legend */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          marginTop: 6,
+          fontSize: 10,
+          color: "var(--af-text-tertiary)",
+          justifyContent: "flex-end",
+        }}
+      >
+        <span>Less</span>
+        {[0, 0.25, 0.5, 0.75, 1].map((frac, i) => (
+          <span
+            key={i}
+            style={{
+              width: 11,
+              height: 11,
+              borderRadius: 2.5,
+              background: colorForValue(Math.max(1, frac * max), max),
+              display: "inline-block",
+            }}
+          />
+        ))}
+        <span>More</span>
+      </div>
+
+      {/* Hover tooltip */}
+      {hover && (
+        <div
+          style={{
+            position: "fixed",
+            left: hover.x,
+            top: hover.y,
+            transform: "translate(-50%, -100%)",
+            background: "var(--af-surface-elevated)",
+            border: "1px solid var(--af-border-subtle)",
+            borderRadius: 6,
+            padding: "6px 10px",
+            fontSize: 11,
+            color: "var(--af-text)",
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+            zIndex: 100,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+          }}
+        >
+          <div style={{ fontWeight: 600 }}>{hover.bucket.date}</div>
+          <div style={{ color: "var(--af-text-secondary)" }}>
+            {hover.bucket.sessions} session{hover.bucket.sessions === 1 ? "" : "s"}
+            {hover.bucket.toolCalls > 0 && ` · ${hover.bucket.toolCalls} tool calls`}
+            {hover.bucket.peakParallelism > 1 && ` · peak ×${hover.bucket.peakParallelism}`}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function colorForValue(val: number, max: number): string {
+  if (val <= 0 || max <= 0) return "var(--af-heatmap-0)";
+  const frac = Math.min(1, val / max);
+  // Clamp to 5 discrete buckets for a GitHub feel
+  let bucket = 0;
+  if (frac > 0.75) bucket = 4;
+  else if (frac > 0.5) bucket = 3;
+  else if (frac > 0.25) bucket = 2;
+  else if (frac > 0) bucket = 1;
+  // CSS vars so the cells adapt to light/dark mode automatically.
+  return `var(--af-heatmap-${bucket})`;
+}
+
+function parseDay(s: string): Date {
+  const [y, m, d] = s.split("-").map(Number) as [number, number, number];
+  return new Date(y, m - 1, d);
+}
+
+function formatDay(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function makeEmpty(date: string): DailyBucket {
+  return {
+    date,
+    sessions: 0,
+    toolCalls: 0,
+    turns: 0,
+    airTimeMs: 0,
+    tokens: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+    durationMs: 0,
+    peakParallelism: 0,
+  };
+}