fleetlens 0.4.1 → 0.6.0

package/app/apps/web/components/job-queue-widget.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Check, AlertCircle, Loader2, Clock } from "lucide-react";
+import Link from "next/link";
+
+type Job = {
+  id: string;
+  kind: string;
+  label: string;
+  target: string;
+  status: "queued" | "running" | "done" | "error" | "cancelled";
+  startedAt: string;
+  completedAt: string | null;
+  progress: { phase: string; index?: number; total?: number; bytes?: number; text?: string } | null;
+  resultUrl: string | null;
+  error: string | null;
+  caller: "auto" | "user" | "cli";
+};
+
+const STORAGE_KEY = "cclens-jobs-widget-expanded";
+
+export function JobQueueWidget() {
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [expanded, setExpanded] = useState(false);
+
+  // Persist expansion state.
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved !== null) setExpanded(saved === "true");
+    } catch { /* ignore */ }
+  }, []);
+
+  const setExpandedPersist = (v: boolean | ((prev: boolean) => boolean)) => {
+    setExpanded((prev) => {
+      const next = typeof v === "function" ? v(prev) : v;
+      try { localStorage.setItem(STORAGE_KEY, String(next)); } catch { /* ignore */ }
+      return next;
+    });
+  };
+
+  // Poll /api/jobs. Faster cadence when there's anything active.
+  useEffect(() => {
+    let mounted = true;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    const tick = async () => {
+      try {
+        const res = await fetch("/api/jobs", { cache: "no-store" });
+        if (!res.ok) return;
+        const data = await res.json() as { jobs: Job[] };
+        if (mounted) setJobs(data.jobs);
+      } catch { /* ignore */ }
+    };
+
+    const schedule = () => {
+      if (!mounted) return;
+      const hasActive = jobs.some(j => j.status === "running" || j.status === "queued");
+      const delay = hasActive ? 1500 : 6000;
+      timeoutId = setTimeout(async () => { await tick(); schedule(); }, delay);
+    };
+
+    void tick();
+    schedule();
+    return () => {
+      mounted = false;
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [jobs]);
+
+  const active = jobs.filter(j => j.status === "running" || j.status === "queued");
+  const recent = jobs.filter(j => j.status === "done" || j.status === "error" || j.status === "cancelled").slice(0, 8);
+
+  // Hide entirely when nothing is active. Recent jobs are still accessible
+  // by re-triggering an action; we don't want a permanent footer chip.
+  if (active.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        // Sit to the LEFT of the live-sessions widget pill (~110px).
+        // Anchored to the same bottom baseline so the two read as a row.
+        right: 140,
+        bottom: 20,
+        zIndex: 99,
+        display: "flex",
+        flexDirection: "column-reverse",
+        gap: 6,
+        maxWidth: 320,
+        alignItems: "flex-end",
+      }}
+    >
+      {/* Pill — always visible (we early-returned if no active). */}
+      <button
+        type="button"
+        onClick={() => setExpandedPersist(v => !v)}
+        title={`${active.length} job${active.length === 1 ? "" : "s"} running — click to ${expanded ? "collapse" : "expand"}`}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "5px 11px 5px 9px",
+          background: "rgba(66, 153, 225, 0.14)",
+          border: "1px solid rgba(66, 153, 225, 0.4)",
+          borderRadius: 100,
+          fontSize: 10,
+          fontWeight: 700,
+          color: "#4299e1",
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          cursor: "pointer",
+          userSelect: "none",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          boxShadow: "0 2px 10px rgba(66, 153, 225, 0.15)",
+          alignSelf: "flex-end",
+        }}
+      >
+        <Loader2
+          size={11}
+          className="cs-job-spin"
+          style={{ flexShrink: 0 }}
+        />
+        Jobs · {active.length}
+      </button>
+
+      {expanded && (
+        <div
+          style={{
+            width: 320,
+            maxHeight: 360,
+            overflowY: "auto",
+            background: "var(--af-surface-elevated)",
+            border: "1px solid var(--af-border-subtle)",
+            borderRadius: 10,
+            boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)",
+          }}
+        >
+          {active.length > 0 && (
+            <div>
+              <SectionLabel>Running</SectionLabel>
+              {active.map(j => <JobRow key={j.id} job={j} />)}
+            </div>
+          )}
+          {recent.length > 0 && (
+            <div>
+              <SectionLabel>Recent</SectionLabel>
+              {recent.map(j => <JobRow key={j.id} job={j} />)}
+            </div>
+          )}
+        </div>
+      )}
+
+      <style>{`
+        @keyframes cs-job-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .cs-job-spin {
+          animation: cs-job-spin 1s linear infinite;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{
+      padding: "6px 14px",
+      fontSize: 9,
+      color: "var(--af-text-tertiary)",
+      textTransform: "uppercase",
+      letterSpacing: "0.08em",
+      fontWeight: 700,
+      background: "var(--af-surface)",
+    }}>
+      {children}
+    </div>
+  );
+}
+
+function JobRow({ job }: { job: Job }) {
+  const Icon =
+    job.status === "running" ? Loader2 :
+    job.status === "queued"  ? Clock :
+    job.status === "error"   ? AlertCircle :
+                                Check;
+  const iconColor =
+    job.status === "running" ? "#4299e1" :
+    job.status === "queued"  ? "var(--af-text-tertiary)" :
+    job.status === "error"   ? "#f56565" :
+                                "#48bb78";
+  const isLink = job.resultUrl && (job.status === "done" || job.status === "running");
+  const Container: any = isLink ? Link : "div";
+  const containerProps = isLink ? { href: job.resultUrl! } : {};
+
+  return (
+    <Container
+      {...containerProps}
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 10,
+        padding: "10px 14px",
+        borderBottom: "1px solid var(--af-border-subtle)",
+        textDecoration: "none",
+        color: "var(--af-text)",
+        fontSize: 11.5,
+        cursor: isLink ? "pointer" : "default",
+      }}
+    >
+      <Icon
+        size={13}
+        className={job.status === "running" ? "cs-job-spin" : ""}
+        style={{ color: iconColor, marginTop: 2, flexShrink: 0 }}
+      />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{
+          fontWeight: 500,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}>
+          {job.label}
+        </div>
+        {job.progress && (
+          <div style={{
+            fontSize: 10,
+            color: "var(--af-text-tertiary)",
+            marginTop: 2,
+            fontFamily: "var(--font-mono)",
+          }}>
+            {progressDescription(job.progress)}
+          </div>
+        )}
+        {job.status === "error" && job.error && (
+          <div style={{
+            fontSize: 10,
+            color: "#f56565",
+            marginTop: 2,
+          }}>
+            {job.error.length > 60 ? job.error.slice(0, 60) + "…" : job.error}
+          </div>
+        )}
+        {job.status === "done" && job.resultUrl && (
+          <div style={{
+            fontSize: 10,
+            color: "var(--af-accent)",
+            marginTop: 2,
+          }}>
+            View →
+          </div>
+        )}
+      </div>
+    </Container>
+  );
+}
+
+function progressDescription(p: { phase: string; index?: number; total?: number; bytes?: number; text?: string }): string {
+  if (p.index !== undefined && p.total !== undefined) {
+    return `${p.phase} ${p.index}/${p.total}`;
+  }
+  if (p.bytes !== undefined) {
+    const kb = (p.bytes / 1024).toFixed(1);
+    return `${p.phase} · ${kb}k`;
+  }
+  if (p.text) return `${p.phase} · ${p.text}`;
+  return p.phase;
+}

package/app/apps/web/components/live-sessions-widget.tsx

@@ -17,6 +17,8 @@ import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { prettyProjectName } from "@/lib/format";
 import { TeamBadge } from "@/components/team-badge";
+import { OutcomePill } from "@/components/outcome-pill";
+import type { DayOutcome, EntryEnrichmentStatus } from "@claude-lens/entries";
 
 const LIVE_WINDOW_MS = 45_000;
 const MAX_VISIBLE = 5;
@@ -34,7 +36,19 @@ export type LiveSessionPick = {
   agentName?: string;
 };
 
-export function LiveSessionsWidget({ sessions }: { sessions: LiveSessionPick[] }) {
+export type LiveEntrySummary = {
+  outcome: DayOutcome | null;
+  enrichmentStatus: EntryEnrichmentStatus;
+  localDay: string;
+};
+
+export function LiveSessionsWidget({
+  sessions,
+  entrySummaries = {},
+}: {
+  sessions: LiveSessionPick[];
+  entrySummaries?: Record<string, LiveEntrySummary>;
+}) {
   const pathname = usePathname();
   const [now, setNow] = useState(() => Date.now());
   // Collapsed by default on first render so users who previously
@@ -166,7 +180,9 @@ export function LiveSessionsWidget({ sessions }: { sessions: LiveSessionPick[] }
       )}
 
       {/* Session cards — reverse order so newest is nearest the pill. */}
-      {visible.map((s) => (
+      {visible.map((s) => {
+        const sum = entrySummaries[s.id];
+        return (
         <Link
           key={s.id}
           href={`/sessions/${s.id}`}
@@ -190,6 +206,24 @@ export function LiveSessionsWidget({ sessions }: { sessions: LiveSessionPick[] }
             prettyProjectName(s.projectName)
           }
         >
+          {sum && (
+            <div
+              onClick={(e) => e.stopPropagation()}
+              style={{ marginBottom: 4 }}
+            >
+              {sum.outcome ? (
+                <OutcomePill outcome={sum.outcome} size="sm" label="text" />
+              ) : sum.enrichmentStatus !== "skipped_trivial" ? (
+                <OutcomePill
+                  outcome={null}
+                  pending
+                  sessionId={s.id}
+                  localDay={sum.localDay}
+                  size="sm"
+                />
+              ) : null}
+            </div>
+          )}
           {/* Title: most recent user message — "what am I working on now". */}
           <div
             style={{
@@ -248,7 +282,8 @@ export function LiveSessionsWidget({ sessions }: { sessions: LiveSessionPick[] }
             {prettyProjectName(s.projectName)}
           </div>
         </Link>
-      ))}
+        );
+      })}
 
       <style>{`
         @keyframes cs-live-pulse {

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

@@ -0,0 +1,138 @@
+"use client";
+import { useState, useCallback, type ReactNode } from "react";
+import { MonthDigest as MonthDigestRender } from "./month-digest";
+import type { MonthDigest as MonthDigestType } from "@claude-lens/entries";
+
+type Status = "idle" | "streaming" | "done" | "error";
+
+export function MonthDigestView({
+  initial, yearMonth, aiEnabled,
+}: {
+  initial: MonthDigestType | null;
+  yearMonth: string;
+  aiEnabled: boolean;
+}) {
+  const [digest, setDigest] = useState<MonthDigestType | null>(initial);
+  const [status, setStatus] = useState<Status>("idle");
+  const [progress, setProgress] = useState<string>("");
+
+  const generate = useCallback(async (force = false) => {
+    setStatus("streaming");
+    setProgress("Starting...");
+    const url = `/api/digest/month/${yearMonth}${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 === "month") {
+              setDigest(ev.digest as MonthDigestType);
+            }
+            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("");
+  }, [yearMonth]);
+
+  const isStreaming = status === "streaming";
+  const narrativeFresh = !!digest?.headline;
+
+  let actions: ReactNode = null;
+  if (!narrativeFresh && aiEnabled) {
+    actions = (
+      <button
+        onClick={() => generate(false)}
+        disabled={isStreaming}
+        style={{
+          padding: "4px 10px",
+          background: "var(--af-accent)",
+          color: "white",
+          border: "none",
+          borderRadius: 5,
+          cursor: isStreaming ? "default" : "pointer",
+          fontSize: 11,
+          fontWeight: 600,
+          opacity: isStreaming ? 0.6 : 1,
+        }}
+      >
+        {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}
+          style={{
+            padding: "2px 7px",
+            background: "transparent",
+            border: "1px solid var(--af-border-subtle)",
+            borderRadius: 4,
+            fontSize: 10,
+            color: "var(--af-text-secondary)",
+            cursor: isStreaming ? "default" : "pointer",
+            opacity: isStreaming ? 0.6 : 1,
+          }}
+        >
+          {isStreaming ? "..." : "Re-roll"}
+        </button>
+      </span>
+    );
+  }
+  if (progress) {
+    actions = (
+      <>
+        {actions}
+        <span style={{ fontSize: 10, color: "var(--af-text-tertiary)" }}>{progress}</span>
+      </>
+    );
+  }
+
+  if (digest) {
+    return <MonthDigestRender digest={digest} aiEnabled={aiEnabled} actions={actions} />;
+  }
+  return (
+    <>
+      {actions && (
+        <div style={{ display: "flex", gap: 10, padding: "14px 40px 0", alignItems: "center", flexWrap: "wrap" }}>
+          {actions}
+        </div>
+      )}
+      <div style={{ padding: 28, textAlign: "center", color: "var(--af-text-secondary)", fontSize: 13 }}>
+        {isStreaming ? "Loading month digest…" : "No digest yet — click Generate above."}
+      </div>
+    </>
+  );
+}