fleetlens 0.4.0 → 0.6.0

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

@@ -1,7 +1,16 @@
 "use client";
 
 import { useState, useMemo } from "react";
+import { useRouter } from "next/navigation";
 import type { DailyBucket } from "@claude-lens/parser";
+import type { DayOutcome, DayHelpfulness } from "@claude-lens/entries";
+import { OUTCOME_STYLES } from "./outcome-pill";
+
+export type DaySummary = {
+  outcome: DayOutcome | null;
+  headline: string | null;
+  helpfulness: DayHelpfulness;
+};
 
 /**
  * GitHub-style contribution heatmap.
@@ -14,12 +23,15 @@ export function Heatmap({
   valueKey = "sessions",
   cellSize = 13,
   cellGap = 3,
+  daySummaries,
 }: {
   buckets: DailyBucket[];
   valueKey?: "sessions" | "toolCalls" | "turns";
   cellSize?: number;
   cellGap?: number;
+  daySummaries?: Map<string, DaySummary>;
 }) {
+  const router = useRouter();
   const [hover, setHover] = useState<{ bucket: DailyBucket; x: number; y: number } | null>(null);
 
   const { weeks, max } = useMemo(() => {
@@ -117,6 +129,9 @@ export function Heatmap({
                     });
                   }}
                   onMouseLeave={() => setHover(null)}
+                  onClick={() => {
+                    if (val > 0) router.push(`/digest/${bucket.date}`);
+                  }}
                   // 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
@@ -178,12 +193,74 @@ export function Heatmap({
             boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
           }}
         >
-          <div style={{ fontWeight: 600 }}>{hover.bucket.date}</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 2 }}>
+            <span style={{ fontWeight: 600 }}>{hover.bucket.date}</span>
+            {(() => {
+              const sum = daySummaries?.get(hover.bucket.date);
+              if (!sum?.outcome) return null;
+              const variant = OUTCOME_STYLES[sum.outcome];
+              return (
+                <span
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 3,
+                    padding: "1px 6px",
+                    borderRadius: 99,
+                    fontSize: 9,
+                    fontWeight: 600,
+                    background: variant.bg,
+                    color: variant.fg,
+                  }}
+                >
+                  {variant.icon} {variant.label}
+                </span>
+              );
+            })()}
+          </div>
+          {(() => {
+            const sum = daySummaries?.get(hover.bucket.date);
+            if (sum?.headline) {
+              return (
+                <div
+                  style={{
+                    color: "var(--af-text)",
+                    fontSize: 11,
+                    fontWeight: 500,
+                    marginBottom: 2,
+                    maxWidth: 280,
+                    whiteSpace: "normal",
+                    lineHeight: 1.35,
+                  }}
+                >
+                  &ldquo;{sum.headline}&rdquo;
+                </div>
+              );
+            }
+            return null;
+          })()}
           <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>
+          {(() => {
+            const sum = daySummaries?.get(hover.bucket.date);
+            if (sum?.helpfulness) {
+              return (
+                <div
+                  style={{
+                    color: "var(--af-text-tertiary)",
+                    fontSize: 10,
+                    marginTop: 2,
+                  }}
+                >
+                  Claude: {sum.helpfulness}
+                </div>
+              );
+            }
+            return null;
+          })()}
         </div>
       )}
     </div>

package/app/apps/web/components/helpfulness-sparkline.tsx

@@ -0,0 +1,82 @@
+import type { DayHelpfulness } from "@claude-lens/entries";
+
+const LEVELS: Record<NonNullable<DayHelpfulness>, { height: string; color: string; label: string }> = {
+  essential:  { height: "100%", color: "#48bb78", label: "Essential"  },
+  helpful:    { height: "75%",  color: "#4299e1", label: "Helpful"    },
+  neutral:    { height: "50%",  color: "#a0aec0", label: "Neutral"    },
+  unhelpful:  { height: "25%",  color: "#f56565", label: "Unhelpful"  },
+};
+
+export function HelpfulnessSparkline({
+  days,
+}: {
+  days: Array<{ date: string; helpfulness: DayHelpfulness; cached: boolean }>;
+}) {
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 36 }}>
+        {days.map((d) => {
+          const level = d.helpfulness ? LEVELS[d.helpfulness] : null;
+          return (
+            <div
+              key={d.date}
+              title={
+                level
+                  ? `${d.date}: Claude ${level.label.toLowerCase()}`
+                  : d.cached
+                    ? `${d.date}: no signal`
+                    : `${d.date}: not generated — open digest →`
+              }
+              style={{
+                flex: 1,
+                height: "100%",
+                display: "flex",
+                alignItems: "flex-end",
+                background: "rgba(160, 174, 192, 0.06)",
+                borderRadius: 3,
+                overflow: "hidden",
+                cursor: d.cached ? "default" : "pointer",
+              }}
+            >
+              {level ? (
+                <div
+                  style={{
+                    width: "100%",
+                    height: level.height,
+                    background: level.color,
+                  }}
+                />
+              ) : (
+                <div
+                  style={{
+                    width: "100%",
+                    height: "10%",
+                    background: "var(--af-border-subtle)",
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          marginTop: 6,
+          fontSize: 10,
+          color: "var(--af-text-tertiary)",
+          flexWrap: "wrap",
+        }}
+      >
+        <span>mood (last {days.length}d):</span>
+        {(["essential", "helpful", "neutral", "unhelpful"] as const).map((k) => (
+          <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+            <span style={{ width: 8, height: 8, borderRadius: 1, background: LEVELS[k].color }} />
+            {LEVELS[k].label.toLowerCase()}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/apps/web/components/insights-history.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+type WeekRow = {
+  iso_week: number;
+  start: string;
+  end: string;
+  label: string;
+  active_days: number;
+  in_progress: boolean;
+  saved_key: string | null;
+  headline: string | null;
+  shipped_count: number;
+  agent_min: number;
+};
+
+type MonthRow = {
+  year: number;
+  month: number;
+  start: string;
+  end: string;
+  label: string;
+  active_days: number;
+  in_progress: boolean;
+  saved_key: string | null;
+  headline: string | null;
+  shipped_count: number;
+  agent_min: number;
+};
+
+type Tab = "weeks" | "months";
+
+export function InsightsHistory({ inDrawer = false }: { inDrawer?: boolean } = {}) {
+  const [tab, setTab] = useState<Tab>("weeks");
+  const [weeks, setWeeks] = useState<WeekRow[] | null>(null);
+  const [months, setMonths] = useState<MonthRow[] | null>(null);
+
+  useEffect(() => {
+    void fetch("/api/digest/week-index?count=12")
+      .then(r => r.json())
+      .then((j: { weeks: WeekRow[] }) => setWeeks(j.weeks))
+      .catch(() => setWeeks([]));
+    void fetch("/api/digest/month-index?count=6")
+      .then(r => r.json())
+      .then((j: { months: MonthRow[] }) => setMonths(j.months))
+      .catch(() => setMonths([]));
+  }, []);
+
+  const wrapperStyle: React.CSSProperties = inDrawer
+    ? { padding: "0 18px" }
+    : { maxWidth: 980, margin: "0 auto", padding: "28px 40px 0" };
+
+  return (
+    <div style={wrapperStyle}>
+      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: inDrawer ? 14 : 18 }}>
+        {!inDrawer && (
+          <h2 style={{
+            fontSize: 11, fontWeight: 700, letterSpacing: "0.08em",
+            textTransform: "uppercase", color: "var(--af-text-tertiary)",
+            margin: 0, marginRight: 4,
+          }}>History</h2>
+        )}
+        <div style={tabGroup}>
+          {(["weeks", "months"] as const).map(t => (
+            <button key={t} type="button" onClick={() => setTab(t)} style={{
+              ...tabBtn,
+              background: tab === t ? "var(--af-accent)" : "transparent",
+              color: tab === t ? "white" : "var(--af-text-secondary)",
+            }}>
+              {t === "weeks" ? "Weeks" : "Months"}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {tab === "weeks" ? (
+        weeks === null ? <Empty>Loading weeks…</Empty>
+        : weeks.length === 0 ? <Empty>No history yet.</Empty>
+        : (
+          <ul style={listStyle}>
+            {weeks.map(w => <WeekItem key={w.start} w={w} />)}
+          </ul>
+        )
+      ) : (
+        months === null ? <Empty>Loading months…</Empty>
+        : months.length === 0 ? <Empty>No history yet.</Empty>
+        : (
+          <ul style={listStyle}>
+            {months.map(m => <MonthItem key={m.start} m={m} />)}
+          </ul>
+        )
+      )}
+    </div>
+  );
+}
+
+function WeekItem({ w }: { w: WeekRow }) {
+  const empty = w.active_days === 0 && !w.in_progress && !w.saved_key;
+  const target = w.saved_key ? `/insights/${w.saved_key}` : `/insights/week-${w.start}`;
+  const subline = w.saved_key && w.headline
+    ? w.headline
+    : empty ? "no data"
+    : w.in_progress ? "in progress · click to view"
+    : `${w.active_days} active day${w.active_days === 1 ? "" : "s"} · click to generate`;
+
+  return (
+    <li style={pickerRow(!!w.saved_key)}>
+      <Link href={target} style={{
+        display: "flex", flexDirection: "column", gap: 4, textDecoration: "none",
+        flex: 1, minWidth: 0,
+      }}>
+        <div style={rowHeader}>
+          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--af-text)", letterSpacing: "-0.01em" }}>
+            W{String(w.iso_week).padStart(2, "0")} · {w.label}
+          </span>
+          {w.in_progress && <span style={inProgressTag}>in progress</span>}
+          {w.saved_key && (
+            <span style={{
+              fontSize: 10, fontWeight: 600,
+              color: "var(--af-accent)", marginLeft: "auto",
+            }}>
+              {w.shipped_count} PR · {w.agent_min}m
+            </span>
+          )}
+        </div>
+        <span style={subStyle}>{subline}</span>
+      </Link>
+    </li>
+  );
+}
+
+function MonthItem({ m }: { m: MonthRow }) {
+  const empty = m.active_days === 0 && !m.in_progress && !m.saved_key;
+  const target = m.saved_key
+    ? `/insights/${m.saved_key}`
+    : `/insights/month-${m.start.slice(0, 7)}`;
+  const subline = m.saved_key && m.headline
+    ? m.headline
+    : empty ? "no data"
+    : m.in_progress ? "in progress · click to view"
+    : `${m.active_days} active day${m.active_days === 1 ? "" : "s"} · click to generate`;
+
+  return (
+    <li style={pickerRow(!!m.saved_key)}>
+      <Link href={target} style={{
+        display: "flex", flexDirection: "column", gap: 4, textDecoration: "none",
+        flex: 1, minWidth: 0,
+      }}>
+        <div style={rowHeader}>
+          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--af-text)", letterSpacing: "-0.01em" }}>
+            {m.label}
+          </span>
+          {m.in_progress && <span style={inProgressTag}>in progress</span>}
+          {m.saved_key && (
+            <span style={{
+              fontSize: 10, fontWeight: 600,
+              color: "var(--af-accent)", marginLeft: "auto",
+            }}>
+              {m.shipped_count} PR · {m.agent_min}m
+            </span>
+          )}
+        </div>
+        <span style={subStyle}>{subline}</span>
+      </Link>
+    </li>
+  );
+}
+
+function Empty({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{
+      padding: "20px 18px", borderRadius: 10,
+      border: "1px dashed var(--af-border)", background: "var(--af-surface)",
+      fontSize: 13, color: "var(--af-text-tertiary)", lineHeight: 1.55,
+    }}>{children}</div>
+  );
+}
+
+const tabGroup: React.CSSProperties = {
+  display: "inline-flex", gap: 3, border: "1px solid var(--af-border)", borderRadius: 8, padding: 2,
+};
+const tabBtn: React.CSSProperties = {
+  padding: "5px 14px", fontSize: 12, fontWeight: 600,
+  border: "none", borderRadius: 6, cursor: "pointer",
+};
+const listStyle: React.CSSProperties = {
+  listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4,
+};
+function pickerRow(saved: boolean): React.CSSProperties {
+  return {
+    display: "flex", alignItems: "stretch", gap: 14,
+    padding: "10px 14px", borderRadius: 10,
+    border: `1px solid ${saved ? "color-mix(in srgb, var(--af-accent) 24%, var(--af-border))" : "var(--af-border-subtle)"}`,
+    background: saved ? "color-mix(in srgb, var(--af-accent) 6%, var(--af-surface))" : "var(--af-surface)",
+    transition: "border-color 0.15s",
+  };
+}
+const rowHeader: React.CSSProperties = {
+  display: "flex", alignItems: "center", gap: 8, minWidth: 0,
+};
+const subStyle: React.CSSProperties = {
+  fontSize: 11, color: "var(--af-text-tertiary)", lineHeight: 1.5,
+  fontFamily: "var(--font-mono)",
+};
+const inProgressTag: React.CSSProperties = {
+  fontSize: 10, fontWeight: 500, padding: "2px 6px", borderRadius: 4,
+  background: "color-mix(in srgb, #f5b445 18%, transparent)", color: "#c08a1f",
+  letterSpacing: "0.02em",
+};

package/app/apps/web/components/insights-top-bar.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState, type ReactNode } from "react";
+import { ChevronLeft, ChevronRight, History, X } from "lucide-react";
+import { InsightsHistory } from "./insights-history";
+
+type NavTarget = { key: string; label: string; cached: boolean };
+
+export function InsightsTopBar({
+  scope,           // "week" | "month"
+  currentLabel,    // primary label, e.g. "Week of 2026-04-20" or "Apr 2026"
+  rangeLabel,      // optional secondary, e.g. "Apr 20 — Apr 26"
+  prev,
+  next,
+}: {
+  scope: "week" | "month";
+  currentLabel: string;
+  rangeLabel?: string;
+  prev: NavTarget | null;
+  next: NavTarget | null;
+}) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  useEffect(() => {
+    if (!drawerOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setDrawerOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+    };
+  }, [drawerOpen]);
+
+  return (
+    <>
+      <header style={{
+        position: "sticky", top: 0, zIndex: 50,
+        background: "color-mix(in srgb, var(--background) 90%, transparent)",
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+        borderBottom: "1px solid var(--af-border-subtle)",
+      }} className="no-print">
+        <div style={{
+          maxWidth: 980, margin: "0 auto", padding: "12px 40px",
+          display: "flex", alignItems: "center", gap: 14, minHeight: 44,
+        }}>
+          {/* Title cluster */}
+          <div style={{ display: "flex", alignItems: "baseline", gap: 10, minWidth: 0 }}>
+            <Link href="/insights" style={{
+              fontSize: 10, fontWeight: 700, color: "var(--af-text-tertiary)",
+              textDecoration: "none", textTransform: "uppercase",
+              letterSpacing: "0.08em", flexShrink: 0,
+            }} title="Latest week digest">
+              Insights
+            </Link>
+            <span style={{ color: "var(--af-text-tertiary)", fontSize: 11, flexShrink: 0 }}>›</span>
+            <span style={{
+              fontSize: 14, fontWeight: 600, color: "var(--af-text)",
+              letterSpacing: "-0.01em", minWidth: 0, overflow: "hidden",
+              textOverflow: "ellipsis", whiteSpace: "nowrap",
+            }}>
+              {currentLabel}
+            </span>
+            {rangeLabel && (
+              <span style={{
+                fontSize: 11, fontFamily: "var(--font-mono)",
+                color: "var(--af-text-tertiary)", flexShrink: 0,
+              }}>
+                {rangeLabel}
+              </span>
+            )}
+          </div>
+
+          {/* Nav cluster */}
+          <div style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 6 }}>
+            <NavArrow target={prev} dir="prev" />
+            <NavArrow target={next} dir="next" />
+            <button
+              type="button"
+              onClick={() => setDrawerOpen(true)}
+              style={historyBtnStyle}
+              title={`Browse ${scope === "week" ? "weekly" : "monthly"} history`}
+            >
+              <History size={13} />
+              <span>Browse</span>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {drawerOpen && (
+        <HistoryDrawer onClose={() => setDrawerOpen(false)} />
+      )}
+    </>
+  );
+}
+
+function NavArrow({ target, dir }: { target: NavTarget | null; dir: "prev" | "next" }) {
+  const Icon = dir === "prev" ? ChevronLeft : ChevronRight;
+  if (!target) {
+    return (
+      <span style={navBtnStyleDisabled} title={`No ${dir === "prev" ? "earlier" : "later"} period`}>
+        <Icon size={14} />
+      </span>
+    );
+  }
+  return (
+    <Link
+      href={`/insights/${target.key}`}
+      style={navBtnStyle(target.cached)}
+      title={
+        target.cached
+          ? `Saved digest · ${target.label}`
+          : `${target.label} (no saved digest yet — will prompt to Generate)`
+      }
+    >
+      <Icon size={14} />
+      <span>{target.label}</span>
+    </Link>
+  );
+}
+
+function HistoryDrawer({ onClose }: { onClose: () => void }) {
+  return (
+    <div role="dialog" aria-modal="true" aria-label="Insights history" style={{
+      position: "fixed", inset: 0, zIndex: 200,
+      display: "flex", justifyContent: "flex-end",
+    }}>
+      <div
+        onClick={onClose}
+        style={{
+          position: "absolute", inset: 0,
+          background: "rgba(0,0,0,0.32)",
+          animation: "fade-in 120ms ease-out",
+        }}
+      />
+      <aside style={{
+        position: "relative",
+        width: "min(440px, 92vw)", height: "100vh",
+        background: "var(--background)",
+        borderLeft: "1px solid var(--af-border-subtle)",
+        boxShadow: "-12px 0 40px rgba(0,0,0,0.32)",
+        display: "flex", flexDirection: "column",
+        animation: "slide-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1)",
+      }}>
+        <header style={{
+          display: "flex", alignItems: "center", gap: 10,
+          padding: "14px 18px", borderBottom: "1px solid var(--af-border-subtle)",
+        }}>
+          <h2 style={{
+            fontSize: 13, fontWeight: 600, margin: 0, color: "var(--af-text)",
+          }}>
+            Browse insights history
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close history"
+            style={{
+              marginLeft: "auto", width: 26, height: 26,
+              display: "inline-flex", alignItems: "center", justifyContent: "center",
+              border: "1px solid var(--af-border-subtle)", borderRadius: 6,
+              background: "transparent", color: "var(--af-text-secondary)",
+              cursor: "pointer",
+            }}
+          >
+            <X size={14} />
+          </button>
+        </header>
+        <div style={{ flex: 1, overflowY: "auto", padding: "18px 0" }}>
+          <InsightsHistory inDrawer />
+        </div>
+      </aside>
+      <style>{`
+        @keyframes slide-in { from { transform: translateX(20px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
+        @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
+      `}</style>
+    </div>
+  );
+}
+
+const historyBtnStyle: React.CSSProperties = {
+  display: "inline-flex", alignItems: "center", gap: 6,
+  padding: "5px 11px", borderRadius: 6,
+  border: "1px solid var(--af-border-subtle)",
+  background: "var(--af-surface)",
+  color: "var(--af-text)",
+  fontSize: 11, fontWeight: 500, cursor: "pointer",
+  fontFamily: "inherit",
+};
+
+function navBtnStyle(cached: boolean): React.CSSProperties {
+  return {
+    display: "inline-flex", alignItems: "center", gap: 4,
+    padding: "5px 9px", borderRadius: 6,
+    border: `1px solid ${cached ? "color-mix(in srgb, var(--af-accent) 28%, var(--af-border))" : "var(--af-border-subtle)"}`,
+    background: cached ? "color-mix(in srgb, var(--af-accent) 6%, var(--af-surface))" : "var(--af-surface)",
+    color: cached ? "var(--af-accent)" : "var(--af-text-secondary)",
+    fontSize: 11, fontWeight: 500, fontFamily: "var(--font-mono)",
+    textDecoration: "none",
+  };
+}
+
+const navBtnStyleDisabled: React.CSSProperties = {
+  display: "inline-flex", alignItems: "center", gap: 4,
+  padding: "5px 9px", borderRadius: 6,
+  border: "1px solid var(--af-border-subtle)",
+  background: "var(--af-surface)",
+  color: "var(--af-text-tertiary)",
+  fontSize: 11, fontWeight: 500, fontFamily: "var(--font-mono)",
+  opacity: 0.45, cursor: "default",
+};