fleetlens 0.4.0 → 0.6.0

package/app/apps/web/components/month-digest.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import Link from "next/link";
+import type { MonthDigest as MonthDigestType, DayHelpfulness } from "@claude-lens/entries";
+import type { ReactNode } from "react";
+
+const HELP_COLORS: Record<NonNullable<DayHelpfulness>, string> = {
+  essential: "#48bb78",
+  helpful: "#4299e1",
+  neutral: "#a0aec0",
+  unhelpful: "#f56565",
+};
+
+export function MonthDigest({
+  digest, aiEnabled, actions,
+}: {
+  digest: MonthDigestType;
+  aiEnabled: boolean;
+  actions?: ReactNode;
+}) {
+  const totalDays = Object.values(digest.outcome_mix).reduce((a, b) => a + (b ?? 0), 0);
+  const totalShipped = digest.shipped.length;
+  const hrs = digest.agent_min_total / 60;
+  const timeStr = hrs >= 1 ? `${hrs.toFixed(1)}h` : `${Math.round(digest.agent_min_total)}m`;
+  const monthLabel = formatMonth(digest.key);
+
+  return (
+    <div style={{ maxWidth: 980, margin: "0 auto", padding: "24px 40px" }}>
+      <header style={{ marginBottom: 28 }}>
+        <div style={{
+          display: "flex", alignItems: "center", gap: 10, marginBottom: 8,
+          fontSize: 12, color: "var(--af-text-tertiary)", fontWeight: 500,
+          flexWrap: "wrap",
+        }}>
+          <span style={{ textTransform: "uppercase", letterSpacing: "0.06em" }}>{monthLabel}</span>
+          <span style={{ color: "var(--af-text-tertiary)" }}>·</span>
+          <span style={{ fontFamily: "var(--font-mono)", color: "var(--af-text-secondary)" }}>
+            {timeStr} agent time · {totalDays} active day{totalDays === 1 ? "" : "s"} · {totalShipped} PR{totalShipped === 1 ? "" : "s"}
+          </span>
+          {actions && (
+            <div style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 8 }}>
+              {actions}
+            </div>
+          )}
+        </div>
+        {digest.headline ? (
+          <h1 style={{
+            fontSize: 26, fontWeight: 700, lineHeight: 1.3, letterSpacing: "-0.02em",
+            margin: "0 0 14px", maxWidth: 820, color: "var(--af-text)",
+          }}>
+            {digest.headline}
+          </h1>
+        ) : (
+          <h1 style={{ fontSize: 20, color: "var(--af-text-secondary)", margin: "0 0 14px" }}>
+            {aiEnabled
+              ? "No narrative yet."
+              : `Worked ${timeStr} across ${digest.projects.length} project${digest.projects.length === 1 ? "" : "s"}.`}
+          </h1>
+        )}
+      </header>
+
+      {!aiEnabled && (
+        <div style={{
+          padding: 14, marginBottom: 24, background: "var(--af-accent-subtle)",
+          borderRadius: 8, fontSize: 13, color: "var(--af-text)",
+        }}>
+          Enable AI features in <Link href="/settings" style={{ color: "var(--af-accent)" }}>Settings</Link> to see monthly narratives.
+        </div>
+      )}
+
+      <HelpfulnessBars helpfulness_by_week={digest.helpfulness_by_week} />
+
+      {digest.standout_weeks && digest.standout_weeks.length > 0 && (
+        <Section title="Standout weeks">
+          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
+            {digest.standout_weeks.map(s => (
+              <li key={s.week_start} style={{
+                padding: "12px 14px", borderRadius: 8, background: "var(--af-surface)",
+                border: "1px solid var(--af-border-subtle)",
+                display: "flex", gap: 12, alignItems: "flex-start",
+              }}>
+                <Link href={`/insights/week-${s.week_start}`} style={{
+                  fontSize: 11, fontWeight: 600,
+                  color: "var(--af-accent)", textDecoration: "none",
+                  flexShrink: 0, paddingTop: 2,
+                  fontFamily: "var(--font-mono)",
+                }}>
+                  Week {s.week_start.slice(5)}
+                </Link>
+                <span style={{ fontSize: 13, lineHeight: 1.55, color: "var(--af-text)" }}>{s.why}</span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+      )}
+
+      {digest.trajectory && digest.trajectory.length > 0 && (
+        <Section title="Trajectory">
+          <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+            {digest.trajectory.map(t => (
+              <li key={t.week_start} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
+                <Link href={`/insights/week-${t.week_start}`} style={{
+                  fontSize: 10, fontWeight: 600, color: "var(--af-text-tertiary)",
+                  fontFamily: "var(--font-mono)", flexShrink: 0, width: 92, paddingTop: 3,
+                  textDecoration: "none",
+                }}>
+                  Week {t.week_start.slice(5)}
+                </Link>
+                <span style={{ fontSize: 13, lineHeight: 1.55, color: "var(--af-text-secondary)" }}>{t.line}</span>
+              </li>
+            ))}
+          </ol>
+        </Section>
+      )}
+
+      {digest.friction_themes && digest.friction_themes.trim().length > 0 && (
+        <Section title="Friction patterns">
+          <p style={{ fontSize: 13, lineHeight: 1.6, margin: 0, color: "var(--af-text)" }}>
+            {digest.friction_themes}
+          </p>
+        </Section>
+      )}
+
+      {digest.suggestion && (
+        <Section title="Suggestion">
+          <div style={{
+            padding: "14px 16px", borderRadius: 8, background: "var(--af-accent-subtle)",
+            border: "1px solid color-mix(in srgb, var(--af-accent) 18%, var(--af-border))",
+          }}>
+            <div style={{ fontSize: 14, fontWeight: 600, color: "var(--af-text)", marginBottom: 6 }}>
+              {digest.suggestion.headline}
+            </div>
+            <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--af-text-secondary)" }}>
+              {digest.suggestion.body}
+            </div>
+          </div>
+        </Section>
+      )}
+
+      {digest.projects.length > 0 && (
+        <Section title="Projects">
+          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+            {digest.projects.map(p => (
+              <li key={p.name} style={{
+                display: "flex", gap: 10, alignItems: "baseline",
+                padding: "6px 10px", borderRadius: 6,
+                fontSize: 12, color: "var(--af-text)",
+              }}>
+                <span style={{ flex: 1, minWidth: 0, fontWeight: 500 }}>{p.display_name}</span>
+                <span style={{
+                  fontFamily: "var(--font-mono)", fontSize: 10,
+                  color: "var(--af-text-tertiary)",
+                }}>
+                  {Math.round(p.agent_min)}m · {p.share_pct.toFixed(0)}% · {p.shipped_count} PR
+                </span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+      )}
+    </div>
+  );
+}
+
+function HelpfulnessBars({ helpfulness_by_week }: { helpfulness_by_week: MonthDigestType["helpfulness_by_week"] }) {
+  const filled = helpfulness_by_week.some(h => h.helpfulness !== null);
+  if (!filled) return null;
+  return (
+    <div style={{
+      display: "flex", gap: 6, alignItems: "stretch",
+      padding: "12px 0", marginBottom: 24,
+    }}>
+      {helpfulness_by_week.map((h, i) => (
+        <div key={i} style={{
+          flex: 1, padding: "10px 4px", borderRadius: 6,
+          textAlign: "center",
+          background: h.helpfulness ? `color-mix(in srgb, ${HELP_COLORS[h.helpfulness]} 14%, transparent)` : "var(--af-surface)",
+          border: `1px solid ${h.helpfulness ? `color-mix(in srgb, ${HELP_COLORS[h.helpfulness]} 28%, transparent)` : "var(--af-border-subtle)"}`,
+        }}>
+          <div style={{
+            fontSize: 9, fontWeight: 700, letterSpacing: "0.04em",
+            color: "var(--af-text-tertiary)", marginBottom: 4,
+            fontFamily: "var(--font-mono)",
+          }}>
+            {h.week_start.slice(5)}
+          </div>
+          <div style={{
+            fontSize: 10, fontWeight: 600,
+            color: h.helpfulness ? HELP_COLORS[h.helpfulness] : "var(--af-text-tertiary)",
+          }}>
+            {h.helpfulness ?? "—"}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section style={{ marginBottom: 28 }}>
+      <h2 style={{
+        fontSize: 11, fontWeight: 700, letterSpacing: "0.08em",
+        textTransform: "uppercase", color: "var(--af-text-tertiary)",
+        margin: "0 0 12px",
+      }}>{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+function formatMonth(yearMonth: string): string {
+  const [y, m] = yearMonth.split("-");
+  const d = new Date(Number(y), Number(m) - 1, 1);
+  return d.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+}

package/app/apps/web/components/outcome-mix-row.tsx

@@ -0,0 +1,37 @@
+import type { DayOutcome } from "@claude-lens/entries";
+import { OutcomePill } from "./outcome-pill";
+
+/**
+ * Horizontal row of outcome pills, oldest→newest left-to-right.
+ * Days without an outcome render as a faint placeholder dot.
+ */
+export function OutcomeMixRow({
+  days,
+  size = "sm",
+}: {
+  days: Array<{ date: string; outcome: DayOutcome | null }>;
+  size?: "sm" | "md";
+}) {
+  return (
+    <div style={{ display: "inline-flex", gap: 3, alignItems: "center" }}>
+      {days.map((d) =>
+        d.outcome ? (
+          <OutcomePill key={d.date} outcome={d.outcome} size={size} label="icon" />
+        ) : (
+          <span
+            key={d.date}
+            title={`${d.date} — no entries`}
+            style={{
+              display: "inline-block",
+              width: size === "sm" ? 14 : 18,
+              height: size === "sm" ? 14 : 18,
+              borderRadius: 99,
+              background: "var(--af-border-subtle)",
+              opacity: 0.5,
+            }}
+          />
+        )
+      )}
+    </div>
+  );
+}

package/app/apps/web/components/outcome-pill.tsx

@@ -0,0 +1,101 @@
+import Link from "next/link";
+import type { DayOutcome } from "@claude-lens/entries";
+
+export type EntryOutcome = Exclude<DayOutcome, "idle">;
+
+type Style = { bg: string; fg: string; label: string; icon: string };
+
+export const OUTCOME_STYLES: Record<DayOutcome, Style> = {
+  shipped:     { bg: "rgba(72, 187, 120, 0.12)",  fg: "#48bb78", label: "Shipped",     icon: "🚀" },
+  partial:     { bg: "rgba(66, 153, 225, 0.12)",  fg: "#4299e1", label: "Partial",     icon: "🔨" },
+  blocked:     { bg: "rgba(245, 101, 101, 0.12)", fg: "#f56565", label: "Blocked",     icon: "🚧" },
+  exploratory: { bg: "rgba(160, 174, 192, 0.12)", fg: "#a0aec0", label: "Exploratory", icon: "🧭" },
+  trivial:     { bg: "rgba(203, 213, 224, 0.12)", fg: "#a0aec0", label: "Warmup",      icon: "💤" },
+  idle:        { bg: "rgba(203, 213, 224, 0.12)", fg: "#a0aec0", label: "Idle",        icon: "—"  },
+};
+
+const PENDING_STYLE: Style = {
+  bg: "rgba(160, 174, 192, 0.08)",
+  fg: "var(--af-text-tertiary)",
+  label: "pending",
+  icon: "⋯",
+};
+
+const SIZES = {
+  sm: { fontSize: 9,  padding: "1px 6px",  iconGap: 3, borderRadius: 99 },
+  md: { fontSize: 10, padding: "2px 8px",  iconGap: 4, borderRadius: 99 },
+  lg: { fontSize: 11, padding: "3px 10px", iconGap: 5, borderRadius: 99 },
+} as const;
+
+type Size = keyof typeof SIZES;
+type Label = "icon" | "text" | "both";
+
+type Props =
+  | { outcome: DayOutcome | EntryOutcome; size?: Size; label?: Label; pending?: never }
+  | { outcome: null; pending: true; sessionId?: string; localDay: string; size?: Size };
+
+export function OutcomePill(props: Props) {
+  const size = props.size ?? "md";
+  const dim = SIZES[size];
+
+  if ("pending" in props && props.pending) {
+    const style: React.CSSProperties = {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: dim.iconGap,
+      padding: dim.padding,
+      borderRadius: dim.borderRadius,
+      fontSize: dim.fontSize,
+      fontWeight: 600,
+      background: PENDING_STYLE.bg,
+      color: PENDING_STYLE.fg,
+      border: "1px dashed var(--af-border-subtle)",
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+    };
+    return (
+      <Link
+        href={`/digest/${props.localDay}`}
+        style={style}
+        title={`Generate ${props.localDay} digest →`}
+      >
+        <span aria-hidden style={{ lineHeight: 1 }}>{PENDING_STYLE.icon}</span>
+        <span>{PENDING_STYLE.label}</span>
+      </Link>
+    );
+  }
+
+  const variant = OUTCOME_STYLES[props.outcome];
+  const label = props.label ?? "both";
+  const showIcon = label === "icon" || label === "both";
+  const showText = label === "text" || label === "both";
+
+  const style: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: dim.iconGap,
+    padding: dim.padding,
+    borderRadius: dim.borderRadius,
+    fontSize: dim.fontSize,
+    fontWeight: 600,
+    background: variant.bg,
+    color: variant.fg,
+    whiteSpace: "nowrap",
+  };
+
+  return (
+    <span style={style} title={variant.label}>
+      {showIcon && <span aria-hidden style={{ lineHeight: 1 }}>{variant.icon}</span>}
+      {showText && <span>{variant.label}</span>}
+    </span>
+  );
+}
+
+/** Sort priority for outcomes — higher = more "complete" outcome. */
+const OUTCOME_PRIORITY: Record<DayOutcome, number> = {
+  shipped: 6, partial: 5, blocked: 4, exploratory: 3, trivial: 2, idle: 1,
+};
+
+export function outcomePriority(outcome: DayOutcome | null | undefined): number {
+  return outcome ? OUTCOME_PRIORITY[outcome] : 0;
+}

package/app/apps/web/components/previous-cycles-trend.tsx

@@ -0,0 +1,155 @@
+import type { CyclePeak } from "@/lib/calibration-data";
+
+// Horizontal bar chart of the last few cycles' peak utilization. One bar
+// per cycle, height proportional to peak %, color follows the burndown
+// danger thresholds (green / amber / red). The right-most bar is "current"
+// (in-progress) and gets a distinct styling so it isn't read as a finished
+// trend point. Designed for direct reuse on the team-edition member card.
+export function PreviousCyclesTrend({
+  windowLabel,
+  cycles,
+}: {
+  windowLabel: "5h" | "7d";
+  cycles: CyclePeak[];
+}) {
+  if (cycles.length === 0) return null;
+  return (
+    <section
+      style={{
+        border: "1px solid var(--af-border-subtle)",
+        borderRadius: 8,
+        padding: "12px 16px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+      }}
+    >
+      <header
+        style={{
+          display: "flex",
+          alignItems: "baseline",
+          gap: 10,
+          flexWrap: "wrap",
+        }}
+      >
+        <h2 style={{ fontSize: 13, margin: 0, fontWeight: 700 }}>
+          Previous {windowLabel} cycles
+        </h2>
+        <span style={{ fontSize: 11, color: "var(--af-text-tertiary)" }}>
+          peak utilization · oldest → newest
+        </span>
+        <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--af-text-tertiary)" }}>
+          {trendLabel(cycles)}
+        </span>
+      </header>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${cycles.length}, minmax(0, 1fr))`,
+          gap: 8,
+          alignItems: "end",
+        }}
+      >
+        {cycles.map((c, i) => (
+          <CycleBar key={i} cycle={c} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function CycleBar({ cycle }: { cycle: CyclePeak }) {
+  const pct = Math.max(0, Math.min(100, cycle.peakPct));
+  const color =
+    pct >= 90 ? "var(--af-danger)" :
+    pct >= 70 ? "#b58400" :
+    "var(--af-success)";
+  const date = new Date(cycle.endsAt);
+  // Compact "Apr 23" date label; "current" cycle gets "ends Apr 30" instead
+  const label = cycle.current
+    ? `ends ${date.toLocaleDateString(undefined, { month: "short", day: "numeric" })}`
+    : date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        gap: 4,
+      }}
+      title={`${cycle.current ? "Current cycle ends" : "Cycle ended"} ${date.toLocaleString()}${cycle.source === "predicted" ? " · estimated from JSONL" : " · measured from daemon"}`}
+    >
+      <div
+        style={{
+          fontSize: 11,
+          fontFamily: "var(--font-mono)",
+          color,
+          fontWeight: 700,
+          textAlign: "right",
+          fontVariantNumeric: "tabular-nums",
+        }}
+      >
+        {pct.toFixed(0)}%
+      </div>
+      <div
+        style={{
+          height: 80,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-end",
+          background: "var(--af-border-subtle)",
+          borderRadius: 4,
+          opacity: cycle.current ? 0.85 : 1,
+          // Dashed border on in-progress cycle so it visually distinguishes
+          // from completed ones.
+          border: cycle.current ? `1px dashed ${color}` : "none",
+        }}
+      >
+        <div
+          style={{
+            height: `${pct}%`,
+            background: color,
+            borderRadius: 4,
+            opacity: cycle.source === "predicted" ? 0.55 : 1,
+            // Striped fill for predicted cycles so estimated values are
+            // visually distinct from measured ones.
+            backgroundImage:
+              cycle.source === "predicted"
+                ? `repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,0.08) 4px 8px)`
+                : undefined,
+          }}
+        />
+      </div>
+      <div
+        style={{
+          fontSize: 10,
+          color: "var(--af-text-tertiary)",
+          textAlign: "center",
+          fontFamily: "var(--font-mono)",
+          letterSpacing: "0.02em",
+        }}
+      >
+        {label}
+        {cycle.source === "predicted" && (
+          <>
+            {" "}
+            <span style={{ color: "#b58400" }}>·est</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// One-line trend hint over the last few cycles. We don't try to be clever —
+// just compare last completed peak to the prior one and label up/down/flat.
+function trendLabel(cycles: CyclePeak[]): string {
+  const completed = cycles.filter((c) => !c.current);
+  if (completed.length < 2) return "";
+  const last = completed[completed.length - 1]!.peakPct;
+  const prev = completed[completed.length - 2]!.peakPct;
+  const delta = last - prev;
+  if (Math.abs(delta) < 5) return `flat vs prior (${delta >= 0 ? "+" : ""}${delta.toFixed(0)}pp)`;
+  if (delta > 0) return `↑ up ${delta.toFixed(0)}pp from prior`;
+  return `↓ down ${Math.abs(delta).toFixed(0)}pp from prior`;
+}

package/app/apps/web/components/recent-days-panel.tsx

@@ -0,0 +1,83 @@
+import Link from "next/link";
+import { listEntriesForDay, readDayDigest } from "@claude-lens/entries/fs";
+import { toLocalDay } from "@/lib/entries";
+
+type Row = {
+  date: string;
+  label: string;
+  agentMin: number;
+  prs: number;
+  status: "generated" | "pending" | "empty";
+};
+
+export function RecentDaysPanel() {
+  const now = Date.now();
+  const rows: Row[] = [];
+
+  for (let i = 0; i < 5; i++) {
+    const d = toLocalDay(now - i * 86_400_000);
+    const entries = listEntriesForDay(d);
+    const agentMin = entries.reduce((s, e) => s + e.numbers.active_min, 0);
+    const prs = entries.reduce((s, e) => s + e.pr_titles.length, 0);
+    const digest = readDayDigest(d);
+    const status: Row["status"] = entries.length === 0 ? "empty"
+      : digest && digest.headline ? "generated"
+      : "pending";
+
+    const label = i === 0 ? "Today"
+      : i === 1 ? "Yesterday"
+      : new Date(`${d}T12:00:00`).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+
+    rows.push({ date: d, label, agentMin, prs, status });
+  }
+
+  return (
+    <div className="af-panel">
+      <div className="af-panel-header">
+        <span>Recent days</span>
+        <Link href="/digest" style={{ fontSize: 11, color: "var(--af-accent)", marginLeft: "auto" }}>
+          Backfill →
+        </Link>
+      </div>
+      <div>
+        {rows.map(r => (
+          <Link key={r.date} href={`/digest/${r.date}`}
+            style={{
+              display: "grid",
+              gridTemplateColumns: "1fr auto auto auto",
+              gap: 10,
+              padding: "10px 18px",
+              fontSize: 12,
+              borderBottom: "1px solid var(--af-border-subtle)",
+              alignItems: "center",
+            }}>
+            <span>{r.label}</span>
+            <StatusPill status={r.status} />
+            <span style={{ fontFamily: "var(--font-mono)", color: "var(--af-text-tertiary)", fontSize: 11, minWidth: 36, textAlign: "right" }}>
+              {r.agentMin > 0 ? `${Math.round(r.agentMin)}m` : "—"}
+            </span>
+            <span style={{ fontFamily: "var(--font-mono)", color: "var(--af-text-tertiary)", fontSize: 11, minWidth: 42, textAlign: "right" }}>
+              {r.prs > 0 ? `${r.prs} PR${r.prs === 1 ? "" : "s"}` : ""}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function StatusPill({ status }: { status: Row["status"] }) {
+  const style = {
+    generated: { bg: "rgba(72,187,120,0.12)", fg: "#48bb78", text: "✓" },
+    pending:   { bg: "rgba(237,137,54,0.12)", fg: "#ed8936", text: "•" },
+    empty:     { bg: "transparent",           fg: "var(--af-text-tertiary)", text: "—" },
+  }[status];
+  return (
+    <span style={{
+      fontSize: 10, fontWeight: 600, padding: "1px 7px", borderRadius: 99,
+      background: style.bg, color: style.fg, minWidth: 22, textAlign: "center",
+    }}>
+      {style.text}
+    </span>
+  );
+}