fleetlens 0.12.3 → 0.13.1

package/app/apps/web/app/sessions/[id]/team-tab/minimap-hover-card.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { formatGap } from "@/lib/format";
+import type { TeamTrack, TeamTurn } from "./adapter";
+import { formatTeammatePreview } from "./format";
+import { formatEdge } from "./minimap-shared";
+
+export type HoverState = {
+  turn: TeamTurn;
+  track: TeamTrack;
+  clientX: number;
+  clientY: number;
+};
+
+export function HoverCard({
+  hover,
+  multiDay,
+}: {
+  hover: HoverState;
+  multiDay: boolean;
+}) {
+  const { turn, track } = hover;
+  const summary = turn.megaRow.summary;
+  const tmMsg =
+    turn.userPrompt && "event" in turn.userPrompt
+      ? turn.userPrompt.event.teammateMessage
+      : undefined;
+  const userLabel = tmMsg ? `FROM ${tmMsg.teammateId}` : "HUMAN";
+  const userText = tmMsg
+    ? formatTeammatePreview(tmMsg)
+    : turn.userPrompt && turn.userPrompt.kind === "user"
+      ? (turn.userPrompt.displayPreview ?? turn.userPrompt.event.preview ?? "")
+      : "";
+  const firstAgent = summary.firstAgentPreview ?? "";
+  const finalAgent = summary.finalAgentPreview ?? "";
+  const showFinal = finalAgent && finalAgent !== firstAgent;
+  const tools = summary.toolNames.slice(0, 4);
+
+  // Position card near the cursor, biased above-and-right to avoid covering
+  // the bar itself. Clamp to viewport via simple offsets.
+  const left = Math.min(window.innerWidth - 360, hover.clientX + 12);
+  const top = Math.max(8, hover.clientY - 12);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left,
+        top,
+        width: 340,
+        background: "var(--af-surface)",
+        border: "1px solid var(--af-border-subtle)",
+        borderLeft: `3px solid ${track.color}`,
+        borderRadius: 4,
+        padding: "8px 10px",
+        fontSize: 10,
+        lineHeight: 1.4,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
+        zIndex: 100,
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          fontSize: 9,
+          fontFamily: "ui-monospace, monospace",
+          color: track.color,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.04em",
+          marginBottom: 4,
+        }}
+      >
+        <span>{track.isLead ? "LEAD" : track.label}</span>
+        <span style={{ color: "var(--af-text-tertiary)", fontWeight: 500 }}>
+          {formatEdge(turn.startMs, multiDay)} → {formatEdge(turn.endMs, multiDay)} · {formatGap(turn.durationMs)}
+        </span>
+      </div>
+      <div
+        style={{
+          fontSize: 9,
+          color: "var(--af-text-tertiary)",
+          marginBottom: 6,
+        }}
+      >
+        {summary.agentMessages} msg · {summary.toolCalls} tools
+        {summary.errors > 0 ? ` · ${summary.errors} err` : ""}
+      </div>
+      {userText && (
+        <div style={{ marginBottom: 5 }}>
+          <div
+            style={{
+              fontSize: 8,
+              color: tmMsg ? "var(--af-text-tertiary)" : track.color,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.04em",
+              marginBottom: 1,
+              fontStyle: tmMsg ? "italic" : undefined,
+            }}
+          >
+            {userLabel}
+          </div>
+          <div
+            style={{
+              color: tmMsg ? "var(--af-text-tertiary)" : "var(--af-text)",
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+            }}
+          >
+            {userText}
+          </div>
+        </div>
+      )}
+      {firstAgent && (
+        <div style={{ marginBottom: 5 }}>
+          <div
+            style={{
+              fontSize: 8,
+              color: track.color,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.04em",
+              marginBottom: 1,
+            }}
+          >
+            AGENT
+          </div>
+          <div
+            style={{
+              color: "var(--af-text)",
+              display: "-webkit-box",
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+            }}
+          >
+            {firstAgent}
+          </div>
+        </div>
+      )}
+      {tools.length > 0 && (
+        <div
+          style={{
+            display: "flex",
+            gap: 3,
+            flexWrap: "wrap",
+            marginBottom: showFinal ? 5 : 0,
+          }}
+        >
+          {tools.map((t) => (
+            <span
+              key={t.name}
+              style={{
+                fontSize: 8,
+                padding: "1px 5px",
+                background: "var(--af-surface-hover)",
+                borderRadius: 2,
+                color: "var(--af-text-tertiary)",
+              }}
+            >
+              {t.name}
+              {t.count > 1 ? ` ×${t.count}` : ""}
+            </span>
+          ))}
+        </div>
+      )}
+      {showFinal && (
+        <div>
+          <div
+            style={{
+              fontSize: 8,
+              color: track.color,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.04em",
+              marginBottom: 1,
+            }}
+          >
+            RESULT
+          </div>
+          <div
+            style={{
+              color: "var(--af-text)",
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+            }}
+          >
+            {finalAgent}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/apps/web/app/sessions/[id]/team-tab/minimap-idle-band.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState } from "react";
+import type { MinimapIdleBand } from "./adapter";
+import { LABEL_WIDTH } from "./minimap-shared";
+
+export function IdleBandOverlay({ band }: { band: MinimapIdleBand }) {
+  const [hovered, setHovered] = useState(false);
+  const left = band.xFracStart * 100;
+  const width = Math.max(0.5, (band.xFracEnd - band.xFracStart) * 100);
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: `calc(${LABEL_WIDTH}px + ${left}% * (100% - ${LABEL_WIDTH}px) / 100%)`,
+        width: `calc(${width}% * (100% - ${LABEL_WIDTH}px) / 100%)`,
+        background:
+          "repeating-linear-gradient(135deg, transparent 0, transparent 4px, var(--af-border-subtle) 4px, var(--af-border-subtle) 6px)",
+        zIndex: 1,
+        cursor: "help",
+      }}
+    >
+      {hovered && (
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            bottom: "calc(100% + 6px)",
+            transform: "translateX(-50%)",
+            background: "#0F172A",
+            color: "#F1F5F9",
+            borderRadius: 8,
+            padding: "6px 10px",
+            fontSize: 11,
+            pointerEvents: "none",
+            boxShadow: "0 4px 16px rgba(15,23,42,0.22)",
+            zIndex: 20,
+            whiteSpace: "nowrap",
+          }}
+        >
+          <div style={{ fontWeight: 600, marginBottom: 1 }}>Idle</div>
+          <div style={{ opacity: 0.78, fontFamily: "ui-monospace, monospace", fontSize: 10 }}>
+            {band.label}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/apps/web/app/sessions/[id]/team-tab/minimap-shared.ts

@@ -0,0 +1,20 @@
+export const LANE_HEIGHT = 24;
+export const LANE_GAP = 2;
+export const LABEL_WIDTH = 100;
+export const DEFAULT_VISIBLE_LANES = 4;
+
+export function formatEdge(ms: number, multiDay: boolean): string {
+  const d = new Date(ms);
+  if (!multiDay) {
+    return d.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }
+  const date = d.toLocaleDateString([], { month: "short", day: "numeric" });
+  const time = d.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  return `${date} ${time}`;
+}

package/app/apps/web/app/sessions/[id]/team-tab/team-minimap.tsx

@@ -4,15 +4,19 @@ import Link from "next/link";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { formatGap } from "@/lib/format";
 import type { TimelineData, TeamTrack, TeamTurn, XAnchor, MinimapIdleBand } from "./adapter";
 import { xOfMs, msOfXFrac } from "./adapter";
-import { formatTeammatePreview } from "./format";
+import {
+  LANE_HEIGHT,
+  LANE_GAP,
+  LABEL_WIDTH,
+  DEFAULT_VISIBLE_LANES,
+  formatEdge,
+} from "./minimap-shared";
+import { IdleBandOverlay } from "./minimap-idle-band";
+import { HoverCard, type HoverState } from "./minimap-hover-card";
 
-const LANE_HEIGHT = 24;
-const LANE_GAP = 2;
-const LABEL_WIDTH = 100;
-export const DEFAULT_VISIBLE_LANES = 4;
+export { DEFAULT_VISIBLE_LANES };
 
 type Props = {
   data: TimelineData;
@@ -28,13 +32,6 @@ type Props = {
   visibleTrackIds: string[];
 };
 
-type HoverState = {
-  turn: TeamTurn;
-  track: TeamTrack;
-  clientX: number;
-  clientY: number;
-};
-
 export function TeamMinimap({
   data,
   playheadMs,
@@ -411,194 +408,6 @@ export function TeamMinimap({
   );
 }
 
-function HoverCard({
-  hover,
-  multiDay,
-}: {
-  hover: HoverState;
-  multiDay: boolean;
-}) {
-  const { turn, track } = hover;
-  const summary = turn.megaRow.summary;
-  const tmMsg =
-    turn.userPrompt && "event" in turn.userPrompt
-      ? turn.userPrompt.event.teammateMessage
-      : undefined;
-  const userLabel = tmMsg ? `FROM ${tmMsg.teammateId}` : "HUMAN";
-  const userText = tmMsg
-    ? formatTeammatePreview(tmMsg)
-    : turn.userPrompt && turn.userPrompt.kind === "user"
-      ? (turn.userPrompt.displayPreview ?? turn.userPrompt.event.preview ?? "")
-      : "";
-  const firstAgent = summary.firstAgentPreview ?? "";
-  const finalAgent = summary.finalAgentPreview ?? "";
-  const showFinal = finalAgent && finalAgent !== firstAgent;
-  const tools = summary.toolNames.slice(0, 4);
-
-  // Position card near the cursor, biased above-and-right to avoid covering
-  // the bar itself. Clamp to viewport via simple offsets.
-  const left = Math.min(window.innerWidth - 360, hover.clientX + 12);
-  const top = Math.max(8, hover.clientY - 12);
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        left,
-        top,
-        width: 340,
-        background: "var(--af-surface)",
-        border: "1px solid var(--af-border-subtle)",
-        borderLeft: `3px solid ${track.color}`,
-        borderRadius: 4,
-        padding: "8px 10px",
-        fontSize: 10,
-        lineHeight: 1.4,
-        boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-        zIndex: 100,
-        pointerEvents: "none",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          fontSize: 9,
-          fontFamily: "ui-monospace, monospace",
-          color: track.color,
-          fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.04em",
-          marginBottom: 4,
-        }}
-      >
-        <span>{track.isLead ? "LEAD" : track.label}</span>
-        <span style={{ color: "var(--af-text-tertiary)", fontWeight: 500 }}>
-          {formatEdge(turn.startMs, multiDay)} → {formatEdge(turn.endMs, multiDay)} · {formatGap(turn.durationMs)}
-        </span>
-      </div>
-      <div
-        style={{
-          fontSize: 9,
-          color: "var(--af-text-tertiary)",
-          marginBottom: 6,
-        }}
-      >
-        {summary.agentMessages} msg · {summary.toolCalls} tools
-        {summary.errors > 0 ? ` · ${summary.errors} err` : ""}
-      </div>
-      {userText && (
-        <div style={{ marginBottom: 5 }}>
-          <div
-            style={{
-              fontSize: 8,
-              color: tmMsg ? "var(--af-text-tertiary)" : track.color,
-              fontWeight: 600,
-              textTransform: "uppercase",
-              letterSpacing: "0.04em",
-              marginBottom: 1,
-              fontStyle: tmMsg ? "italic" : undefined,
-            }}
-          >
-            {userLabel}
-          </div>
-          <div
-            style={{
-              color: tmMsg ? "var(--af-text-tertiary)" : "var(--af-text)",
-              display: "-webkit-box",
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden",
-            }}
-          >
-            {userText}
-          </div>
-        </div>
-      )}
-      {firstAgent && (
-        <div style={{ marginBottom: 5 }}>
-          <div
-            style={{
-              fontSize: 8,
-              color: track.color,
-              fontWeight: 600,
-              textTransform: "uppercase",
-              letterSpacing: "0.04em",
-              marginBottom: 1,
-            }}
-          >
-            AGENT
-          </div>
-          <div
-            style={{
-              color: "var(--af-text)",
-              display: "-webkit-box",
-              WebkitLineClamp: 3,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden",
-            }}
-          >
-            {firstAgent}
-          </div>
-        </div>
-      )}
-      {tools.length > 0 && (
-        <div
-          style={{
-            display: "flex",
-            gap: 3,
-            flexWrap: "wrap",
-            marginBottom: showFinal ? 5 : 0,
-          }}
-        >
-          {tools.map((t) => (
-            <span
-              key={t.name}
-              style={{
-                fontSize: 8,
-                padding: "1px 5px",
-                background: "var(--af-surface-hover)",
-                borderRadius: 2,
-                color: "var(--af-text-tertiary)",
-              }}
-            >
-              {t.name}
-              {t.count > 1 ? ` ×${t.count}` : ""}
-            </span>
-          ))}
-        </div>
-      )}
-      {showFinal && (
-        <div>
-          <div
-            style={{
-              fontSize: 8,
-              color: track.color,
-              fontWeight: 600,
-              textTransform: "uppercase",
-              letterSpacing: "0.04em",
-              marginBottom: 1,
-            }}
-          >
-            RESULT
-          </div>
-          <div
-            style={{
-              color: "var(--af-text)",
-              display: "-webkit-box",
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden",
-            }}
-          >
-            {finalAgent}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
 function pageBtnStyle(disabled: boolean): React.CSSProperties {
   return {
     background: "transparent",
@@ -616,67 +425,3 @@ function pageBtnStyle(disabled: boolean): React.CSSProperties {
   };
 }
 
-function formatEdge(ms: number, multiDay: boolean): string {
-  const d = new Date(ms);
-  if (!multiDay) {
-    return d.toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  }
-  const date = d.toLocaleDateString([], { month: "short", day: "numeric" });
-  const time = d.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-  return `${date} ${time}`;
-}
-
-function IdleBandOverlay({ band }: { band: MinimapIdleBand }) {
-  const [hovered, setHovered] = useState(false);
-  const left = band.xFracStart * 100;
-  const width = Math.max(0.5, (band.xFracEnd - band.xFracStart) * 100);
-  return (
-    <div
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: `calc(${LABEL_WIDTH}px + ${left}% * (100% - ${LABEL_WIDTH}px) / 100%)`,
-        width: `calc(${width}% * (100% - ${LABEL_WIDTH}px) / 100%)`,
-        background:
-          "repeating-linear-gradient(135deg, transparent 0, transparent 4px, var(--af-border-subtle) 4px, var(--af-border-subtle) 6px)",
-        zIndex: 1,
-        cursor: "help",
-      }}
-    >
-      {hovered && (
-        <div
-          style={{
-            position: "absolute",
-            left: "50%",
-            bottom: "calc(100% + 6px)",
-            transform: "translateX(-50%)",
-            background: "#0F172A",
-            color: "#F1F5F9",
-            borderRadius: 8,
-            padding: "6px 10px",
-            fontSize: 11,
-            pointerEvents: "none",
-            boxShadow: "0 4px 16px rgba(15,23,42,0.22)",
-            zIndex: 20,
-            whiteSpace: "nowrap",
-          }}
-        >
-          <div style={{ fontWeight: 600, marginBottom: 1 }}>Idle</div>
-          <div style={{ opacity: 0.78, fontFamily: "ui-monospace, monospace", fontSize: 10 }}>
-            {band.label}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-

package/app/apps/web/app/sessions/sessions-grid.tsx

@@ -19,6 +19,7 @@ import { TeamBadge } from "@/components/team-badge";
 import { AgentBadge } from "@/components/agent-badge";
 import { DataTable, type Column } from "@/components/data-table";
 import { useViewToggle } from "@/components/view-toggle";
+import { SearchableSelect } from "@/components/searchable-select";
 import { OutcomePill, outcomePriority } from "@/components/outcome-pill";
 
 export type SessionRow = {
@@ -152,17 +153,16 @@ export function SessionsGrid({ rows }: { rows: SessionRow[] }) {
             style={{ width: "100%", paddingLeft: 32 }}
           />
         </div>
-        <select
+        <SearchableSelect
           value={project}
-          onChange={(e) => setProject(e.target.value)}
-          style={{ maxWidth: 260 }}
-        >
-          {projects.map((p) => (
-            <option key={p} value={p}>
-              {p === "all" ? "All projects" : prettyProjectName(p)}
-            </option>
-          ))}
-        </select>
+          onChange={setProject}
+          title="Filter by project"
+          searchPlaceholder="Filter projects…"
+          options={projects.map((p) => ({
+            value: p,
+            label: p === "all" ? "All projects" : prettyProjectName(p),
+          }))}
+        />
         {agentOptions.length > 1 && (
           <select
             value={agent}
@@ -400,6 +400,7 @@ function OutcomeCell({ row }: { row: SessionRow }) {
 }
 
 function SessionCard({ row }: { row: SessionRow }) {
+  const router = useRouter();
   const { session: s, briefSummary, outcome, latestLocalDay, enrichmentStatus } = row;
   const totalTokens =
     s.totalUsage.input + s.totalUsage.output + s.totalUsage.cacheRead + s.totalUsage.cacheWrite;
@@ -441,7 +442,7 @@ function SessionCard({ row }: { row: SessionRow }) {
           }}
           title={s.projectName}
         >
-          <LiveBadge mtimeIso={s.lastTimestamp} />
+          <LiveBadge mtimeIso={s.lastTimestamp} activityMs={s.lastActivityMs} />
           <span
             style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
           >
@@ -468,14 +469,37 @@ function SessionCard({ row }: { row: SessionRow }) {
           {outcome ? (
             <OutcomePill outcome={outcome} size="md" agent={s.agent} />
           ) : showPending ? (
-            <OutcomePill
-              outcome={null}
-              pending
-              sessionId={s.id}
-              localDay={latestLocalDay!}
-              size="md"
-              agent={s.agent}
-            />
+            // The card body is a <Link>, so the pending pill can't be its own
+            // <Link> (nested <a> → hydration error). Render it as a non-anchor
+            // and drive the /digest navigation from here instead.
+            <span
+              role="link"
+              tabIndex={0}
+              title={`Generate ${latestLocalDay} digest →`}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                router.push(`/digest/${latestLocalDay}`);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  router.push(`/digest/${latestLocalDay}`);
+                }
+              }}
+              style={{ cursor: "pointer", display: "inline-flex" }}
+            >
+              <OutcomePill
+                outcome={null}
+                pending
+                sessionId={s.id}
+                localDay={latestLocalDay!}
+                size="md"
+                agent={s.agent}
+                noLink
+              />
+            </span>
           ) : null}
         </div>
       )}