fleetlens 0.4.0 → 0.6.0

package/app/apps/web/components/usage-chart.tsx

@@ -24,6 +24,7 @@ export function UsageChart({
   seriesKey,
   windowMs,
   colorVar,
+  predictedSeries,
   onExpand,
 }: {
   snapshots: UsageSnapshot[];
@@ -31,6 +32,10 @@ export function UsageChart({
   windowMs: number;
   /** CSS variable for this window's color (e.g. 'var(--af-success)') */
   colorVar: string;
+  /** Optional JSONL-derived utilization estimates, drawn as a dashed overlay
+   * for cold-start validation. Omitted on charts where we don't predict
+   * (e.g. seven_day_sonnet). */
+  predictedSeries?: { capturedAt: number; util: number }[];
   /** If provided, render a fullscreen-expand button that calls this handler. */
   onExpand?: () => void;
 }) {
@@ -63,15 +68,27 @@ export function UsageChart({
       .filter((x) => x.capturedAt >= windowStart && x.capturedAt <= resetsAt)
       .map((x) => [x.capturedAt, 100 - (x.window.utilization ?? 0)] as const);
 
-    return { points, windowStart, windowEnd: resetsAt, now, currentRemaining, latest };
-  }, [snapshots, seriesKey, windowMs]);
+    // Predicted series: clip to window, clamp util to [0, 100] (model is
+    // unbounded but utilization can't physically exceed the cap), then
+    // convert to remaining-budget. Sorted ascending for path drawing.
+    const predicted = (predictedSeries ?? [])
+      .filter((p) => p.capturedAt >= windowStart && p.capturedAt <= resetsAt)
+      .map((p) => [p.capturedAt, 100 - Math.max(0, Math.min(100, p.util))] as const)
+      .sort((a, b) => a[0] - b[0]);
+
+    return { points, predicted, windowStart, windowEnd: resetsAt, now, currentRemaining, latest };
+  }, [snapshots, seriesKey, windowMs, predictedSeries]);
 
   const plotW = width - padding.left - padding.right;
   const plotH = height - padding.top - padding.bottom;
 
-  const [hover, setHover] = useState<{ x: number; t: number; actual: number; ideal: number } | null>(
-    null,
-  );
+  const [hover, setHover] = useState<{
+    x: number;
+    t: number;
+    actual: number;
+    ideal: number;
+    predicted: number | null;
+  } | null>(null);
 
   if (!computed) {
     return (
@@ -89,7 +106,7 @@ export function UsageChart({
     );
   }
 
-  const { points, windowStart, windowEnd, now, currentRemaining, latest } = computed;
+  const { points, predicted, windowStart, windowEnd, now, currentRemaining, latest } = computed;
 
   const xScale = (t: number): number =>
     padding.left + ((t - windowStart) / (windowEnd - windowStart)) * plotW;
@@ -120,6 +137,13 @@ export function UsageChart({
           .join(" ")
       : "";
 
+  const predictedPath =
+    predicted.length > 1
+      ? predicted
+          .map(([t, v], i) => `${i === 0 ? "M" : "L"} ${xScale(t).toFixed(1)} ${yScale(v).toFixed(1)}`)
+          .join(" ")
+      : "";
+
   const areaPath =
     points.length > 0
       ? `${linePath} L ${xScale(points[points.length - 1]![0]).toFixed(1)} ${yScale(0).toFixed(1)} L ${xScale(points[0]![0]).toFixed(1)} ${yScale(0).toFixed(1)} Z`
@@ -143,7 +167,29 @@ export function UsageChart({
         nearestDist = d;
       }
     }
-    setHover({ x: xScale(nearest[0]), t: nearest[0], actual: nearest[1], ideal: idealAt(nearest[0]) });
+    // Find nearest predicted point so the tooltip can display both at the
+    // same hovered x — predicted snapshots are independent of real ones,
+    // pick the closest one in time.
+    let predictedAt: number | null = null;
+    if (predicted.length > 0) {
+      let bestPred = predicted[0]!;
+      let bestPredDist = Math.abs(bestPred[0] - nearest[0]);
+      for (const p of predicted) {
+        const d = Math.abs(p[0] - nearest[0]);
+        if (d < bestPredDist) {
+          bestPred = p;
+          bestPredDist = d;
+        }
+      }
+      predictedAt = bestPred[1];
+    }
+    setHover({
+      x: xScale(nearest[0]),
+      t: nearest[0],
+      actual: nearest[1],
+      ideal: idealAt(nearest[0]),
+      predicted: predictedAt,
+    });
   };
 
   return (
@@ -365,6 +411,22 @@ export function UsageChart({
             <circle key={i} cx={xScale(t)} cy={yScale(v)} r="3" fill={colorVar} />
           ))}
 
+          {/* Predicted line drawn AFTER the actual line so it's visually on top.
+           * Same shape as before — kept here as an overlay to avoid being
+           * masked by the actual line + dots. */}
+          {predictedPath && (
+            <path
+              d={predictedPath}
+              fill="none"
+              stroke="#ff7a00"
+              strokeOpacity="0.9"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeDasharray="5 4"
+            />
+          )}
+
           {/* Hover crosshair + highlight dot */}
           {hover && (
             <g>
@@ -429,10 +491,30 @@ export function UsageChart({
                   {hover.ideal.toFixed(1)}%
                 </span>
               </div>
+              {hover.predicted !== null && (
+                <div>
+                  <span style={{ color: "var(--af-text-tertiary)" }}>Estimated</span>{" "}
+                  <span
+                    style={{
+                      fontWeight: 600,
+                      fontVariantNumeric: "tabular-nums",
+                      color: "#b58400",
+                    }}
+                  >
+                    {hover.predicted.toFixed(1)}%
+                  </span>
+                </div>
+              )}
             </div>
             <div style={{ marginTop: 2, color: "var(--af-text-tertiary)" }}>
               Δ {hover.actual - hover.ideal >= 0 ? "+" : ""}
               {(hover.actual - hover.ideal).toFixed(1)}%
+              {hover.predicted !== null && (
+                <span style={{ marginLeft: 8 }}>
+                  · estimate {hover.predicted >= hover.actual ? "+" : ""}
+                  {(hover.predicted - hover.actual).toFixed(1)}pp vs actual
+                </span>
+              )}
             </div>
           </div>
         )}
@@ -451,6 +533,11 @@ export function UsageChart({
       >
         {points.length} snapshot{points.length === 1 ? "" : "s"} · last{" "}
         {formatRelative(new Date(latest.capturedAt).toISOString())}
+        {predicted.length > 0 && (
+          <span style={{ marginLeft: 8, color: "#ff7a00" }}>
+            · {predicted.length} estimate{predicted.length === 1 ? "" : "s"} overlaid
+          </span>
+        )}
       </div>
     </div>
   );

package/app/apps/web/components/usage-charts-dashboard.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { X } from "lucide-react";
 import type { UsageSnapshot } from "@/lib/usage-data";
+import type { PredictedSeriesByKey } from "@/lib/calibration-data";
 import { UsageChart } from "@/components/usage-chart";
 import { UsageChartRange } from "@/components/usage-chart-range";
 import { OptionalChart } from "@/components/optional-chart";
@@ -44,8 +45,20 @@ const SONNET_WINDOW: WindowConfig = {
  * component receives them as a prop and handles purely the interaction
  * layer (2-col grid, expand-to-modal).
  */
-export function UsageChartsDashboard({ snapshots }: { snapshots: UsageSnapshot[] }) {
+export function UsageChartsDashboard({
+  snapshots,
+  predicted,
+}: {
+  snapshots: UsageSnapshot[];
+  predicted?: PredictedSeriesByKey;
+}) {
   const [expanded, setExpanded] = useState<WindowConfig | null>(null);
+  const emptyPredicted: PredictedSeriesByKey = {
+    five_hour: [],
+    seven_day: [],
+    seven_day_sonnet: [],
+  };
+  const pred = predicted ?? emptyPredicted;
 
   // Close on Escape.
   useEffect(() => {
@@ -80,6 +93,7 @@ export function UsageChartsDashboard({ snapshots }: { snapshots: UsageSnapshot[]
             seriesKey={w.key}
             windowMs={w.windowMs}
             colorVar={w.colorVar}
+            predictedSeries={pred[w.key]}
             onExpand={() => setExpanded(w)}
           />
         </section>
@@ -93,6 +107,7 @@ export function UsageChartsDashboard({ snapshots }: { snapshots: UsageSnapshot[]
             seriesKey={SONNET_WINDOW.key}
             windowMs={SONNET_WINDOW.windowMs}
             colorVar={SONNET_WINDOW.colorVar}
+            predictedSeries={pred[SONNET_WINDOW.key]}
             onExpand={() => setExpanded(SONNET_WINDOW)}
           />
         </section>
@@ -102,6 +117,7 @@ export function UsageChartsDashboard({ snapshots }: { snapshots: UsageSnapshot[]
         <ExpandedModal
           config={expanded}
           snapshots={snapshots}
+          predictedSeries={pred[expanded.key]}
           onClose={() => setExpanded(null)}
         />
       )}
@@ -112,10 +128,12 @@ export function UsageChartsDashboard({ snapshots }: { snapshots: UsageSnapshot[]
 function ExpandedModal({
   config,
   snapshots,
+  predictedSeries,
   onClose,
 }: {
   config: WindowConfig;
   snapshots: UsageSnapshot[];
+  predictedSeries?: { capturedAt: number; util: number }[];
   onClose: () => void;
 }) {
   const [range, setRange] = useState<DateRange>({ preset: "current" });
@@ -236,6 +254,7 @@ function ExpandedModal({
               endMs={resolved.endMs}
               windowMs={config.windowMs}
               colorVar={config.colorVar}
+              predictedSeries={predictedSeries}
             />
           ) : (
             <div

package/app/apps/web/components/week-digest-view.tsx

@@ -0,0 +1,226 @@
+"use client";
+import { useState, useCallback, useEffect, useRef, type ReactNode } from "react";
+import { WeekDigest as WeekDigestRender } from "./week-digest";
+import type { WeekDigest as WeekDigestType } from "@claude-lens/entries";
+
+type Status = "idle" | "streaming" | "done" | "error";
+
+export function WeekDigestView({
+  initial, monday, aiEnabled, autoFire = false, prior,
+}: {
+  initial: WeekDigestType | null;
+  monday: string;
+  aiEnabled: boolean;
+  autoFire?: boolean;
+  prior?: WeekDigestType | null;
+}) {
+  const [digest, setDigest] = useState<WeekDigestType | null>(initial);
+  const [status, setStatus] = useState<Status>("idle");
+  const [progress, setProgress] = useState<string>("");
+  const firedRef = useRef(false);
+
+  const generate = useCallback(async (force = false) => {
+    setStatus("streaming");
+    setProgress("Starting...");
+    const url = `/api/digest/week/${monday}${force ? "?force=1" : ""}`;
+    const res = await fetch(url, { method: "POST" });
+    if (!res.ok || !res.body) {
+      setStatus("error");
+      setProgress(`Error ${res.status}`);
+      return;
+    }
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buf = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += decoder.decode(value, { stream: true });
+      const frames = buf.split("\n\n");
+      buf = frames.pop() ?? "";
+      for (const frame of frames) {
+        const dataLine = frame.split("\n").find(l => l.startsWith("data: "));
+        if (!dataLine) continue;
+        try {
+          const ev = JSON.parse(dataLine.slice(6));
+          if (ev.type === "status") setProgress(ev.text);
+          else if (ev.type === "dependency") {
+            setProgress(`${ev.kind === "day" ? "Day" : "Week"} ${ev.key} ${ev.status}`);
+          }
+          else if (ev.type === "entry") setProgress(`Enriching ${ev.index}/${ev.total}...`);
+          else if (ev.type === "progress") {
+            const sec = Math.round(ev.elapsed_ms / 1000);
+            setProgress(`Claude composing… ${ev.bytes.toLocaleString()} chars (${sec}s)`);
+          }
+          else if (ev.type === "digest") {
+            if (ev.digest && ev.digest.scope === "week") {
+              setDigest(ev.digest as WeekDigestType);
+            }
+            setProgress("Rendering...");
+          }
+          else if (ev.type === "saved") setProgress("Saved.");
+          else if (ev.type === "error") { setStatus("error"); setProgress(ev.message); return; }
+        } catch { /* skip */ }
+      }
+    }
+    setStatus("done");
+    setProgress("");
+  }, [monday]);
+
+  useEffect(() => {
+    if (autoFire && !firedRef.current && status === "idle") {
+      firedRef.current = true;
+      void generate(false);
+    }
+  }, [autoFire, status, generate]);
+
+  const isStreaming = status === "streaming";
+  const narrativeFresh = !!digest?.headline;
+
+  let actions: ReactNode = null;
+  if (!narrativeFresh && aiEnabled) {
+    actions = (
+      <button
+        onClick={() => generate(false)}
+        disabled={isStreaming}
+        style={btnPrimary(isStreaming)}
+      >
+        {isStreaming ? "Generating..." : digest ? "Generate" : "Generate digest"}
+      </button>
+    );
+  } else if (aiEnabled) {
+    actions = (
+      <span style={{ fontSize: 10, color: "var(--af-text-tertiary)", display: "inline-flex", gap: 6, alignItems: "center" }}>
+        ✓ Up to date
+        <button
+          onClick={() => generate(true)}
+          disabled={isStreaming}
+          title="Re-roll the narrative for this week"
+          style={btnSecondary(isStreaming)}
+        >
+          {isStreaming ? "..." : "Re-roll"}
+        </button>
+      </span>
+    );
+  }
+  if (progress) {
+    actions = (
+      <>
+        {actions}
+        <span style={{ fontSize: 10, color: "var(--af-text-tertiary)" }}>{progress}</span>
+      </>
+    );
+  }
+
+  if (digest) {
+    return <WeekDigestRender digest={digest} aiEnabled={aiEnabled} actions={actions} priorDigest={prior ?? null} />;
+  }
+  return (
+    <EmptyWeekState
+      monday={monday}
+      isStreaming={isStreaming}
+      aiEnabled={aiEnabled}
+      progress={progress}
+      onGenerate={() => generate(false)}
+    />
+  );
+}
+
+function EmptyWeekState({ monday, isStreaming, aiEnabled, progress, onGenerate }: {
+  monday: string;
+  isStreaming: boolean;
+  aiEnabled: boolean;
+  progress: string | null;
+  onGenerate: () => void;
+}) {
+  const start = new Date(`${monday}T12:00:00`);
+  const end = new Date(start);
+  end.setDate(start.getDate() + 6);
+  const fmt = (d: Date) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  const range = `${fmt(start)} — ${fmt(end)}`;
+  return (
+    <div style={{ maxWidth: 980, margin: "0 auto", padding: "60px 40px" }}>
+      <div style={{
+        margin: "0 auto", maxWidth: 480,
+        padding: "32px 28px",
+        borderRadius: 14,
+        background: "var(--af-surface)",
+        border: "1px dashed var(--af-border-subtle)",
+        textAlign: "center",
+      }}>
+        <div style={{
+          width: 44, height: 44, borderRadius: 12, margin: "0 auto 16px",
+          background: "var(--af-accent-subtle)",
+          display: "flex", alignItems: "center", justifyContent: "center",
+          color: "var(--af-accent)", fontSize: 20,
+        }}>✦</div>
+        <h2 style={{
+          fontSize: 16, fontWeight: 600, margin: "0 0 6px",
+          color: "var(--af-text)", letterSpacing: "-0.01em",
+        }}>
+          {isStreaming ? "Generating digest…" : "No digest yet for this week"}
+        </h2>
+        <p style={{
+          fontSize: 12.5, lineHeight: 1.55, margin: "0 0 18px",
+          color: "var(--af-text-secondary)",
+        }}>
+          {isStreaming
+            ? `Synthesizing ${range} from this week's day digests. This usually takes 5–10 minutes.`
+            : aiEnabled
+              ? `Once generated, this view shows top sessions, trajectory, findings, and project areas for ${range}.`
+              : `Enable AI features in Settings to synthesize a weekly narrative for ${range}. Deterministic stats are still available below in the live digest as soon as data lands.`}
+        </p>
+        {aiEnabled && (
+          <button
+            onClick={onGenerate}
+            disabled={isStreaming}
+            style={{
+              padding: "9px 18px", borderRadius: 8,
+              background: isStreaming ? "var(--af-border-subtle)" : "var(--af-accent)",
+              color: isStreaming ? "var(--af-text-tertiary)" : "white",
+              border: "none", cursor: isStreaming ? "default" : "pointer",
+              fontSize: 13, fontWeight: 600, letterSpacing: "-0.005em",
+            }}
+          >
+            {isStreaming ? "Generating…" : "Generate digest"}
+          </button>
+        )}
+        {progress && (
+          <div style={{
+            marginTop: 12, fontSize: 10.5, color: "var(--af-text-tertiary)",
+            fontFamily: "var(--font-mono)",
+          }}>
+            {progress}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function btnPrimary(disabled: boolean): React.CSSProperties {
+  return {
+    padding: "4px 10px",
+    background: "var(--af-accent)",
+    color: "white",
+    border: "none",
+    borderRadius: 5,
+    cursor: disabled ? "default" : "pointer",
+    fontSize: 11,
+    fontWeight: 600,
+    opacity: disabled ? 0.6 : 1,
+  };
+}
+
+function btnSecondary(disabled: boolean): React.CSSProperties {
+  return {
+    padding: "2px 7px",
+    background: "transparent",
+    border: "1px solid var(--af-border-subtle)",
+    borderRadius: 4,
+    fontSize: 10,
+    color: "var(--af-text-secondary)",
+    cursor: disabled ? "default" : "pointer",
+    opacity: disabled ? 0.6 : 1,
+  };
+}