fleetlens 0.12.3 → 0.13.1

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

@@ -0,0 +1,103 @@
+"use client";
+import { type ReactNode } from "react";
+import { ExportPdfButton } from "./export-pdf-button";
+
+type Period = "week" | "month";
+
+export function DigestActions({
+  digestKey,
+  period,
+  hasDigest,
+  narrativeFresh,
+  isStreaming,
+  aiEnabled,
+  progress,
+  onGenerate,
+  onReroll,
+  rerollTitle,
+}: {
+  digestKey: string;
+  period: Period;
+  hasDigest: boolean;
+  narrativeFresh: boolean;
+  isStreaming: boolean;
+  aiEnabled: boolean;
+  progress: string;
+  onGenerate: () => void;
+  onReroll: () => void;
+  rerollTitle?: string;
+}): ReactNode {
+  const defaultRerollTitle = `Re-roll the narrative for this ${period}`;
+  const pdfAction = hasDigest ? <ExportPdfButton digestKey={`${period}-${digestKey}`} /> : null;
+
+  let actions: ReactNode = null;
+  if (!narrativeFresh && aiEnabled) {
+    actions = (
+      <button
+        onClick={onGenerate}
+        disabled={isStreaming}
+        style={btnPrimary(isStreaming)}
+      >
+        {isStreaming ? "Generating..." : hasDigest ? "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={onReroll}
+          disabled={isStreaming}
+          title={rerollTitle ?? defaultRerollTitle}
+          style={btnSecondary(isStreaming)}
+        >
+          {isStreaming ? "..." : "Re-roll"}
+        </button>
+      </span>
+    );
+  }
+  if (progress) {
+    actions = (
+      <>
+        {actions}
+        <span style={{ fontSize: 10, color: "var(--af-text-tertiary)" }}>{progress}</span>
+      </>
+    );
+  }
+  if (pdfAction) {
+    actions = (
+      <>
+        {actions}
+        {pdfAction}
+      </>
+    );
+  }
+  return actions;
+}
+
+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,
+  };
+}

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

@@ -199,7 +199,7 @@ function JobRow({ job }: { job: Job }) {
     job.status === "error"   ? "#f56565" :
                                 "#48bb78";
   const isLink = job.resultUrl && (job.status === "done" || job.status === "running");
-  const Container: any = isLink ? Link : "div";
+  const Container: React.ElementType = isLink ? Link : "div";
   const containerProps = isLink ? { href: job.resultUrl! } : {};
 
   return (

package/app/apps/web/components/live-badge.tsx

@@ -15,9 +15,14 @@ const LIVE_WINDOW_MS = 45_000;
 
 export function LiveBadge({
   mtimeIso,
+  activityMs,
   size = "sm",
 }: {
   mtimeIso?: string;
+  /** Nested-aware last-activity (epoch ms) — `SessionMeta.lastActivityMs`.
+   *  When present it wins over `mtimeIso` so a session stays LIVE while a
+   *  background agent/workflow churns and the main transcript is quiet. */
+  activityMs?: number;
   size?: "sm" | "md";
 }) {
   const [now, setNow] = useState(() => Date.now());
@@ -26,9 +31,12 @@ export function LiveBadge({
     return () => clearInterval(id);
   }, []);
 
-  if (!mtimeIso) return null;
-  const ms = Date.parse(mtimeIso);
-  if (Number.isNaN(ms) || now - ms > LIVE_WINDOW_MS) return null;
+  const isoMs = mtimeIso ? Date.parse(mtimeIso) : NaN;
+  const ms = Math.max(
+    Number.isNaN(isoMs) ? 0 : isoMs,
+    activityMs && Number.isFinite(activityMs) ? activityMs : 0,
+  );
+  if (ms <= 0 || now - ms > LIVE_WINDOW_MS) return null;
 
   const dotSize = size === "md" ? 8 : 6;
   const padV = size === "md" ? "3px 9px" : "2px 7px";

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

@@ -33,6 +33,7 @@ export type LiveSessionPick = {
   lastAgentPreview?: string;
   firstTimestamp?: string;
   lastTimestamp?: string;
+  lastActivityMs?: number;
   teamName?: string;
   agentName?: string;
   agent?: import("@claude-lens/parser").AgentKind;
@@ -95,9 +96,14 @@ export function LiveSessionsWidget({
   // order is stable even as agents keep emitting new messages.
   const live = sessions
     .filter((s) => {
-      if (!s.lastTimestamp) return false;
-      const ms = Date.parse(s.lastTimestamp);
-      if (Number.isNaN(ms)) return false;
+      // Nested-aware: a session with a quiet main transcript but an active
+      // background agent/workflow still counts as live via lastActivityMs.
+      const isoMs = s.lastTimestamp ? Date.parse(s.lastTimestamp) : NaN;
+      const ms = Math.max(
+        Number.isNaN(isoMs) ? 0 : isoMs,
+        s.lastActivityMs && Number.isFinite(s.lastActivityMs) ? s.lastActivityMs : 0,
+      );
+      if (ms <= 0) return false;
       return now - ms <= LIVE_WINDOW_MS;
     })
     .slice()

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

@@ -1,7 +1,7 @@
 "use client";
-import { useState, useCallback, type ReactNode } from "react";
+import { useState, useCallback } from "react";
 import { MonthDigest as MonthDigestRender } from "./month-digest";
-import { ExportPdfButton } from "./export-pdf-button";
+import { DigestActions } from "./digest-actions";
 import type { MonthDigest as MonthDigestType } from "@claude-lens/entries";
 
 type Status = "idle" | "streaming" | "done" | "error";
@@ -67,75 +67,30 @@ export function MonthDigestView({
 
   const isStreaming = status === "streaming";
   const narrativeFresh = !!digest?.headline;
-  const pdfAction = digest ? <ExportPdfButton digestKey={`month-${yearMonth}`} /> : null;
 
-  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 (pdfAction) {
-    actions = (
-      <>
-        {actions}
-        {pdfAction}
-      </>
-    );
-  }
+  const actions = (
+    <DigestActions
+      digestKey={yearMonth}
+      period="month"
+      hasDigest={!!digest}
+      narrativeFresh={narrativeFresh}
+      isStreaming={isStreaming}
+      aiEnabled={aiEnabled}
+      progress={progress}
+      onGenerate={() => generate(false)}
+      onReroll={() => generate(true)}
+    />
+  );
 
   if (digest) {
     return <MonthDigestRender digest={digest} aiEnabled={aiEnabled} actions={actions} />;
   }
+  // Hide the action bar when DigestActions would render nothing (no AI, no progress,
+  // no digest → no PDF). Otherwise the empty wrapper leaves visible padding.
+  const hasActionContent = aiEnabled || !!progress;
   return (
     <>
-      {actions && (
+      {hasActionContent && (
         <div style={{ display: "flex", gap: 10, padding: "14px 40px 0", alignItems: "center", flexWrap: "wrap" }}>
           {actions}
         </div>

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

@@ -34,7 +34,19 @@ type Label = "icon" | "text" | "both";
 
 type Props =
   | { outcome: DayOutcome | EntryOutcome; size?: Size; label?: Label; agent?: AgentKind; pending?: never }
-  | { outcome: null; pending: true; sessionId?: string; localDay: string; size?: Size; agent?: AgentKind };
+  | {
+      outcome: null;
+      pending: true;
+      sessionId?: string;
+      localDay: string;
+      size?: Size;
+      agent?: AgentKind;
+      // When the pill is rendered inside another anchor (e.g. a SessionCard
+      // whose whole body is a <Link>), render a plain <span> instead of a
+      // nested <Link> — nested <a> is invalid HTML and trips hydration. The
+      // host is then responsible for the click → /digest navigation.
+      noLink?: boolean;
+    };
 
 export function OutcomePill(props: Props) {
   const size = props.size ?? "md";
@@ -56,15 +68,23 @@ export function OutcomePill(props: Props) {
       textDecoration: "none",
       whiteSpace: "nowrap",
     };
+    const inner = (
+      <>
+        {props.agent && <AgentIcon agent={props.agent} size={agentIconSize} />}
+        <span aria-hidden style={{ lineHeight: 1 }}>{PENDING_STYLE.icon}</span>
+        <span>{PENDING_STYLE.label}</span>
+      </>
+    );
+    if (props.noLink) {
+      return <span style={style}>{inner}</span>;
+    }
     return (
       <Link
         href={`/digest/${props.localDay}`}
         style={style}
         title={`Generate ${props.localDay} digest →`}
       >
-        {props.agent && <AgentIcon agent={props.agent} size={agentIconSize} />}
-        <span aria-hidden style={{ lineHeight: 1 }}>{PENDING_STYLE.icon}</span>
-        <span>{PENDING_STYLE.label}</span>
+        {inner}
       </Link>
     );
   }

package/app/apps/web/components/searchable-select.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { ChevronDown, Search } from "lucide-react";
+
+export type SelectOption = { value: string; label: string };
+
+/** A native <select> can't be filtered, which is painful once there are dozens
+ *  of options (e.g. the project list across many folders). This is a drop-in
+ *  combobox: click to open, type to filter by label, arrow/Enter/Escape to
+ *  navigate. Selection is still a single string value via onChange. */
+export function SearchableSelect({
+  value,
+  onChange,
+  options,
+  placeholder = "Select…",
+  searchPlaceholder = "Type to filter…",
+  maxWidth = 260,
+  title,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  maxWidth?: number;
+  title?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState("");
+  const [active, setActive] = useState(0);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const baseId = useId();
+  const listboxId = `${baseId}-listbox`;
+  const optionId = (i: number) => `${baseId}-opt-${i}`;
+
+  const selected = options.find((o) => o.value === value);
+  const filtered = useMemo(() => {
+    const s = q.trim().toLowerCase();
+    if (!s) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(s));
+  }, [q, options]);
+
+  // On open only: clear the filter and highlight the current value (a native
+  // select opens on its selection), then focus the search box. Deps are [open]
+  // alone on purpose — `options` is a fresh array each parent render, so
+  // including it would reset the filter mid-typing.
+  useEffect(() => {
+    if (!open) return;
+    setQ("");
+    setActive(Math.max(0, options.findIndex((o) => o.value === value)));
+    const id = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // Keep the active option scrolled into view as the user arrows through.
+  useEffect(() => {
+    const el = listRef.current?.children[active] as HTMLElement | undefined;
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+
+  // Close and return focus to the trigger (a native select refocuses itself).
+  const close = () => {
+    setOpen(false);
+    buttonRef.current?.focus();
+  };
+  const choose = (v: string) => {
+    onChange(v);
+    close();
+  };
+
+  const activeId = filtered[active] ? optionId(active) : undefined;
+
+  return (
+    <div style={{ position: "relative", maxWidth }}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        title={title}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          width: "100%",
+          background: "var(--background)",
+          border: `1px solid ${open ? "var(--af-accent)" : "var(--af-border-subtle)"}`,
+          borderRadius: 8,
+          padding: "9px 12px",
+          color: "var(--af-text)",
+          fontSize: 13,
+          cursor: "pointer",
+          textAlign: "left",
+        }}
+      >
+        <span
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            color: selected ? "var(--af-text)" : "var(--af-text-tertiary)",
+          }}
+        >
+          {selected?.label ?? placeholder}
+        </span>
+        <ChevronDown size={13} style={{ marginLeft: "auto", flexShrink: 0, color: "var(--af-text-tertiary)" }} />
+      </button>
+
+      {open && (
+        <>
+          {/* Click-away backdrop. */}
+          <div onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40 }} />
+          <div
+            style={{
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              minWidth: "100%",
+              width: "max-content",
+              maxWidth: 380,
+              zIndex: 41,
+              background: "var(--af-surface)",
+              border: "1px solid var(--af-border-subtle)",
+              borderRadius: 8,
+              boxShadow: "0 8px 24px rgba(0,0,0,0.28)",
+              overflow: "hidden",
+            }}
+          >
+            <div style={{ position: "relative", padding: 6, borderBottom: "1px solid var(--af-border-subtle)" }}>
+              <Search
+                size={12}
+                style={{ position: "absolute", left: 15, top: "50%", transform: "translateY(-50%)", color: "var(--af-text-tertiary)" }}
+              />
+              <input
+                ref={inputRef}
+                type="text"
+                role="combobox"
+                aria-expanded={open}
+                aria-controls={listboxId}
+                aria-activedescendant={activeId}
+                aria-autocomplete="list"
+                value={q}
+                onChange={(e) => {
+                  setQ(e.target.value);
+                  setActive(0); // typing narrows the list; keep the highlight on a real row
+                }}
+                placeholder={searchPlaceholder}
+                onKeyDown={(e) => {
+                  if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    setActive((a) => Math.min(a + 1, Math.max(0, filtered.length - 1)));
+                  } else if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    setActive((a) => Math.max(a - 1, 0));
+                  } else if (e.key === "Enter") {
+                    e.preventDefault();
+                    const opt = filtered[active];
+                    if (opt) choose(opt.value);
+                  } else if (e.key === "Escape") {
+                    e.preventDefault();
+                    close();
+                  } else if (e.key === "Tab") {
+                    // Tab moves browser focus out naturally; close the dropdown
+                    // so it doesn't linger visible until a click-away.
+                    setOpen(false);
+                  }
+                }}
+                style={{ width: "100%", paddingLeft: 30, fontSize: 12 }}
+              />
+            </div>
+            <div ref={listRef} role="listbox" id={listboxId} style={{ maxHeight: 300, overflowY: "auto", padding: 4 }}>
+              {filtered.length === 0 ? (
+                <div style={{ padding: "8px 10px", fontSize: 12, color: "var(--af-text-tertiary)" }}>No matches</div>
+              ) : (
+                filtered.map((o, i) => (
+                  <button
+                    key={o.value}
+                    id={optionId(i)}
+                    type="button"
+                    role="option"
+                    aria-selected={o.value === value}
+                    onClick={() => choose(o.value)}
+                    onMouseEnter={() => setActive(i)}
+                    style={{
+                      display: "block",
+                      width: "100%",
+                      textAlign: "left",
+                      padding: "6px 10px",
+                      fontSize: 12,
+                      border: "none",
+                      borderRadius: 4,
+                      cursor: "pointer",
+                      background: i === active ? "var(--af-surface-hover)" : "transparent",
+                      color: o.value === value ? "var(--af-accent)" : "var(--af-text)",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {o.label}
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/app/apps/web/components/tail-mode.tsx

@@ -11,10 +11,20 @@
  * - Shows "Following live" indicator when tailing
  */
 
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback, type MutableRefObject } from "react";
 import { ArrowDown, Radio } from "lucide-react";
 
-export function TailMode({ isLive }: { isLive: boolean }) {
+export function TailMode({
+  isLive,
+  navLockRef,
+}: {
+  isLive: boolean;
+  /** SessionView stamps Date.now() here on every explicit day-jump. While the
+   *  stamp is fresh the live-follow observer bails, so a streaming event can't
+   *  yank the view back to the bottom mid-navigation. Read synchronously — a
+   *  setState couldn't disconnect the observer before its callback fires. */
+  navLockRef?: MutableRefObject<number>;
+}) {
   const [tailing, setTailing] = useState(isLive);
   const [atBottom, setAtBottom] = useState(false);
   const mainRef = useRef<HTMLElement | null>(null);
@@ -24,10 +34,15 @@ export function TailMode({ isLive }: { isLive: boolean }) {
   useEffect(() => {
     mainRef.current = document.querySelector("main");
     if (isLive && mainRef.current) {
-      // Small delay so the initial render settles before scrolling.
+      // Small delay so the initial render settles before scrolling. Use an
+      // INSTANT scroll, not smooth: a smooth animation emits a stream of scroll
+      // events, and check() reads the second one (still mid-animation, not yet
+      // at the bottom) as a user scroll-up and kills tailing — so on a heavy
+      // session the view never reaches the live tail. Instant lands in one
+      // event, which check() correctly sees as "at bottom".
       const t = setTimeout(() => {
         userScrolledRef.current = false;
-        mainRef.current?.scrollTo({ top: mainRef.current.scrollHeight, behavior: "smooth" });
+        mainRef.current?.scrollTo({ top: mainRef.current.scrollHeight, behavior: "auto" });
       }, 300);
       return () => clearTimeout(t);
     }
@@ -67,18 +82,34 @@ export function TailMode({ isLive }: { isLive: boolean }) {
     // Use a MutationObserver to detect when new content is added
     // (the RSC re-render appends new transcript rows to the DOM).
     const observer = new MutationObserver(() => {
+      // Bail while a day-jump is in flight: SessionView just scrolled the view
+      // to an earlier day, and a streaming live event must NOT yank it back to
+      // the bottom (that fight was the day-nav "flicker" on live sessions). A
+      // moment later check() sees the scroll is away from the bottom and turns
+      // tailing off for good. NOTE: do not gate on distance-from-bottom instead
+      // — on a heavy session the content streams in while we're still far from
+      // the bottom, and a distance gate would abandon the initial catch-up.
+      if (navLockRef && Date.now() - navLockRef.current < 1500) return;
       userScrolledRef.current = false; // suppress the scroll-up detection
-      main.scrollTo({ top: main.scrollHeight, behavior: "smooth" });
+      // Instant, not smooth: a smooth animation emits scroll events across many
+      // frames and check() reads a mid-animation one (still away from the bottom)
+      // as a user scroll-up, killing tailing after the first sizeable streamed
+      // append. Same reason as the immediate scroll below and the mount scroll.
+      main.scrollTo({ top: main.scrollHeight, behavior: "auto" });
     });
 
     observer.observe(main, { childList: true, subtree: true });
 
-    // Also scroll immediately when tail mode is first enabled.
+    // Also scroll immediately when tail mode is first enabled. Instant (not
+    // smooth) for the same reason as the mount scroll above — a smooth
+    // animation's scroll events trip check() into disabling tailing mid-flight.
     userScrolledRef.current = false;
-    main.scrollTo({ top: main.scrollHeight, behavior: "smooth" });
+    main.scrollTo({ top: main.scrollHeight, behavior: "auto" });
 
     return () => observer.disconnect();
-  }, [tailing]);
+    // navLockRef is a stable ref; listed to satisfy exhaustive-deps without
+    // causing re-runs.
+  }, [tailing, navLockRef]);
 
   const jumpToLatest = useCallback(() => {
     const main = mainRef.current;