fleetlens 0.13.0 → 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/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/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;

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

@@ -1,7 +1,7 @@
 "use client";
-import { useState, useCallback, useEffect, useRef, type ReactNode } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { WeekDigest as WeekDigestRender } from "./week-digest";
-import { ExportPdfButton } from "./export-pdf-button";
+import { DigestActions } from "./digest-actions";
 import type { WeekDigest as WeekDigestType } from "@claude-lens/entries";
 
 type Status = "idle" | "streaming" | "done" | "error";
@@ -77,50 +77,21 @@ export function WeekDigestView({
 
   const isStreaming = status === "streaming";
   const narrativeFresh = !!digest?.headline;
-  const pdfAction = digest ? <ExportPdfButton digestKey={`week-${monday}`} /> : null;
 
-  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 (pdfAction) {
-    actions = (
-      <>
-        {actions}
-        {pdfAction}
-      </>
-    );
-  }
+  const actions = (
+    <DigestActions
+      digestKey={monday}
+      period="week"
+      hasDigest={!!digest}
+      narrativeFresh={narrativeFresh}
+      isStreaming={isStreaming}
+      aiEnabled={aiEnabled}
+      progress={progress}
+      onGenerate={() => generate(false)}
+      onReroll={() => generate(true)}
+      rerollTitle="Re-roll the narrative for this week"
+    />
+  );
 
   if (digest) {
     return <WeekDigestRender digest={digest} aiEnabled={aiEnabled} actions={actions} priorDigest={prior ?? null} />;
@@ -208,29 +179,3 @@ function EmptyWeekState({ monday, isStreaming, aiEnabled, progress, onGenerate }
   );
 }
 
-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,
-  };
-}