@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/dashboard/breakpoint-banner.tsx

@@ -0,0 +1,301 @@
+"use client";
+import { useState, useEffect, useLayoutEffect, useRef, useCallback, useTransition } from "react";
+import Link from "next/link";
+import { cn } from "@/lib/cn";
+import { Hand, AlertTriangle, CheckCircle2, Check, X } from "lucide-react";
+import { approveBreakpoint } from "@/app/actions/approve-breakpoint";
+import type { BreakpointRunInfo } from "@/types";
+
+interface ResolvedEntry {
+  bp: BreakpointRunInfo;
+  resolvedAt: number;
+}
+
+const RESOLVED_DISPLAY_MS = 20000; // 20 seconds
+const STALENESS_THRESHOLD_MS = 120000; // 2 minutes — if a breakpoint has been shown
+                                        // continuously for this long, show a hint
+const DISMISSED_KEY = "observer:dismissed-breakpoints";
+
+/** Inline approve button for a single breakpoint in the dashboard banner. */
+function BreakpointBannerItem({ bp, stale, onDismiss }: { bp: BreakpointRunInfo; stale: boolean; onDismiss?: () => void }) {
+  const [isPending, startTransition] = useTransition();
+  const [result, setResult] = useState<{ ok: boolean; msg?: string } | null>(null);
+
+  const handleApprove = (e: React.MouseEvent) => {
+    e.preventDefault(); // Don't navigate via the Link
+    e.stopPropagation();
+    startTransition(async () => {
+      const res = await approveBreakpoint(bp.runId, bp.effectId, "Approved from dashboard");
+      setResult(res.success ? { ok: true } : { ok: false, msg: res.error });
+    });
+  };
+
+  if (result?.ok) {
+    return (
+      <div className={cn(
+        "group relative flex items-center gap-3 px-4 py-3 rounded-lg",
+        "bg-success-muted border border-success/30",
+      )}>
+        <CheckCircle2 className="h-5 w-5 text-success shrink-0" />
+        <span className="text-sm text-success font-medium">Approved — {bp.projectName}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(
+      "group relative flex items-center gap-3 px-4 py-3 rounded-lg",
+      "bg-warning-muted border border-warning/30",
+      "shadow-breakpoint-glow animate-breakpoint-glow",
+      stale && "opacity-70"
+    )}>
+      <Link href={`/runs/${bp.runId}`} className="flex items-center gap-3 flex-1 min-w-0">
+        <div className="relative shrink-0">
+          <Hand className="h-5 w-5 text-warning animate-pulse-dot" />
+          <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-warning animate-ping" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-0.5">
+            <AlertTriangle className="h-3 w-3 text-warning shrink-0" />
+            <span className="text-xs font-bold text-warning uppercase tracking-wider">
+              Approval Needed
+            </span>
+            {stale && (
+              <span className="text-xs text-foreground-muted italic" data-testid="staleness-indicator">
+                (checking...)
+              </span>
+            )}
+            <span className="text-xs text-foreground-muted font-medium">
+              {bp.projectName}
+            </span>
+            <span className="font-mono text-xs text-info">
+              {bp.runId.slice(0, 8)}
+            </span>
+          </div>
+          <p className="text-sm text-foreground truncate">
+            {bp.breakpointQuestion}
+          </p>
+        </div>
+      </Link>
+      <button
+        onClick={handleApprove}
+        disabled={isPending || !bp.effectId}
+        className={cn(
+          "shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold",
+          "bg-success/20 text-success border border-success/30",
+          "hover:bg-success/30 hover:border-success/50",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          "transition-colors"
+        )}
+        title="Approve this breakpoint"
+      >
+        <Check className="h-3.5 w-3.5" />
+        {isPending ? "Approving..." : "Approve"}
+      </button>
+      {stale && onDismiss && (
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onDismiss();
+          }}
+          className={cn(
+            "shrink-0 p-1 rounded text-foreground-muted/50",
+            "hover:text-foreground-muted hover:bg-foreground-muted/10",
+            "transition-colors"
+          )}
+          title="Dismiss this stale breakpoint"
+          data-testid="dismiss-breakpoint"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+      {result && !result.ok && (
+        <span className="text-xs text-error ml-2">{result.msg}</span>
+      )}
+    </div>
+  );
+}
+
+interface BreakpointBannerProps {
+  breakpointRuns: BreakpointRunInfo[];
+}
+
+export function BreakpointBanner({ breakpointRuns }: BreakpointBannerProps) {
+  const [resolvedEntries, setResolvedEntries] = useState<ResolvedEntry[]>([]);
+  const prevRunIdsRef = useRef<Map<string, BreakpointRunInfo>>(new Map());
+
+  // Track when each breakpoint entry was first seen (by runId).
+  // Entries are cleaned up when the breakpoint disappears from the list.
+  const firstSeenRef = useRef<Map<string, number>>(new Map());
+
+  // Dismissed stale breakpoints (client-side only, persisted in localStorage)
+  // Start with empty set to match SSR, then read localStorage before paint.
+  const [dismissedIds, setDismissedIds] = useState<Set<string>>(new Set());
+
+  useLayoutEffect(() => {
+    try {
+      const raw = localStorage.getItem(DISMISSED_KEY);
+      if (raw) {
+        setDismissedIds(new Set(JSON.parse(raw) as string[]));
+      }
+    } catch {
+      // localStorage unavailable
+    }
+  }, []);
+
+  const dismissBreakpoint = useCallback((runId: string) => {
+    setDismissedIds((prev) => {
+      const next = new Set(prev);
+      next.add(runId);
+      try { localStorage.setItem(DISMISSED_KEY, JSON.stringify([...next])); } catch { /* noop */ }
+      return next;
+    });
+  }, []);
+
+  // Clean up dismissed IDs that are no longer in the breakpointRuns list
+  useEffect(() => {
+    const currentIds = new Set(breakpointRuns.map((bp) => bp.runId));
+    setDismissedIds((prev) => {
+      const cleaned = new Set([...prev].filter((id) => currentIds.has(id)));
+      if (cleaned.size !== prev.size) {
+        try { localStorage.setItem(DISMISSED_KEY, JSON.stringify([...cleaned])); } catch { /* noop */ }
+        return cleaned;
+      }
+      return prev;
+    });
+  }, [breakpointRuns]);
+
+  // State to trigger re-renders for staleness checks
+  const [, setStalenessTick] = useState(0);
+
+  // Detect resolved breakpoints: runs that were previously in the list but are now gone
+  useEffect(() => {
+    const currentIds = new Set(breakpointRuns.map((bp) => bp.runId));
+    const now = Date.now();
+
+    const newlyResolved: ResolvedEntry[] = [];
+    for (const [runId, bp] of prevRunIdsRef.current) {
+      if (!currentIds.has(runId)) {
+        newlyResolved.push({ bp, resolvedAt: now });
+        // Clean up first-seen tracking for resolved breakpoints
+        firstSeenRef.current.delete(runId);
+      }
+    }
+
+    if (newlyResolved.length > 0) {
+      setResolvedEntries((prev) => [...prev, ...newlyResolved]);
+    }
+
+    // Record first-seen time for new breakpoints
+    for (const bp of breakpointRuns) {
+      if (!firstSeenRef.current.has(bp.runId)) {
+        firstSeenRef.current.set(bp.runId, now);
+      }
+    }
+
+    // Update prev ref
+    prevRunIdsRef.current = new Map(breakpointRuns.map((bp) => [bp.runId, bp]));
+  }, [breakpointRuns]);
+
+  // Periodic tick to re-evaluate staleness (every 10s while breakpoints are active)
+  useEffect(() => {
+    if (breakpointRuns.length === 0) return;
+
+    const timer = setInterval(() => {
+      setStalenessTick((t) => t + 1);
+    }, 10000);
+
+    return () => clearInterval(timer);
+  }, [breakpointRuns.length]);
+
+  // Helper: check if a breakpoint has been shown for longer than the staleness threshold
+  const isStale = useCallback((runId: string): boolean => {
+    const firstSeen = firstSeenRef.current.get(runId);
+    if (!firstSeen) return false;
+    return Date.now() - firstSeen > STALENESS_THRESHOLD_MS;
+  }, []);
+
+  // Auto-cleanup expired resolved entries
+  useEffect(() => {
+    if (resolvedEntries.length === 0) return;
+
+    const timer = setInterval(() => {
+      const now = Date.now();
+      setResolvedEntries((prev) =>
+        prev.filter((entry) => now - entry.resolvedAt < RESOLVED_DISPLAY_MS)
+      );
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [resolvedEntries.length]);
+
+  const visibleRuns = breakpointRuns.filter((bp) => !dismissedIds.has(bp.runId));
+  const hasWaiting = visibleRuns.length > 0;
+  const hasResolved = resolvedEntries.length > 0;
+
+  if (!hasWaiting && !hasResolved) return null;
+
+  return (
+    <div role="alert" aria-live="assertive" aria-atomic="true" className="flex flex-col gap-2 mb-6" data-testid="breakpoint-banner">
+      {/* Active breakpoints waiting */}
+      {visibleRuns.map((bp) => {
+        const stale = isStale(bp.runId);
+        return (
+          <BreakpointBannerItem
+            key={bp.runId}
+            bp={bp}
+            stale={stale}
+            onDismiss={() => dismissBreakpoint(bp.runId)}
+          />
+        );
+      })}
+
+      {/* Recently resolved breakpoints — green transient display */}
+      {resolvedEntries.map((entry) => (
+        <Link
+          key={`resolved-${entry.bp.runId}`}
+          href={`/runs/${entry.bp.runId}`}
+          className={cn(
+            "group relative flex items-center gap-3 px-4 py-3 rounded-lg",
+            "bg-success-muted border border-success/30",
+            "shadow-glow-success",
+            "hover:border-success/50",
+            "transition-colors cursor-pointer"
+          )}
+        >
+          <div className="relative shrink-0">
+            <CheckCircle2 className="h-5 w-5 text-success" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-0.5">
+              <CheckCircle2 className="h-3 w-3 text-success shrink-0" />
+              <span className="text-xs font-bold text-success uppercase tracking-wider">
+                Approved
+              </span>
+              <span className="text-xs text-foreground-muted font-medium">
+                {entry.bp.projectName}
+              </span>
+              <span className="font-mono text-xs text-info">
+                {entry.bp.runId.slice(0, 8)}
+              </span>
+            </div>
+            <p className="text-sm text-foreground-muted truncate">
+              {entry.bp.breakpointQuestion}
+            </p>
+          </div>
+        </Link>
+      ))}
+
+      {/* Summary count when multiple waiting breakpoints */}
+      {visibleRuns.length > 1 && (
+        <div className="flex items-center gap-2 px-3 py-1">
+          <Hand className="h-3.5 w-3.5 text-warning" />
+          <span className="text-xs font-semibold text-warning">
+            {visibleRuns.length} approvals pending
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/catch-up-banner.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { RefreshCw, Inbox } from "lucide-react";
+import { cn } from "@/lib/cn";
+import type { CatchUpState } from "@/hooks/use-batched-updates";
+
+/** Lightweight snapshot of dashboard KPIs shown inside the catch-up banner. */
+export interface CatchUpSummary {
+  failedRuns: number;
+  completedRuns: number;
+  pendingBreakpoints: number;
+}
+
+export interface CatchUpBannerProps {
+  catchUp: CatchUpState;
+  /** Optional summary metrics to give the user quick context about what happened. */
+  summary?: CatchUpSummary;
+}
+
+/**
+ * Builds a concise, human-readable summary string from dashboard metrics.
+ * Returns null when there is nothing noteworthy to report.
+ */
+function buildSummaryText(summary: CatchUpSummary | undefined): string | null {
+  if (!summary) return null;
+  const parts: string[] = [];
+  if (summary.failedRuns > 0) {
+    parts.push(`${summary.failedRuns} failed`);
+  }
+  if (summary.pendingBreakpoints > 0) {
+    parts.push(`${summary.pendingBreakpoints} awaiting input`);
+  }
+  if (summary.completedRuns > 0) {
+    parts.push(`${summary.completedRuns} completed`);
+  }
+  if (parts.length === 0) return null;
+  return parts.join(", ");
+}
+
+/**
+ * Subtle notification shown when the dashboard detects a burst of SSE updates
+ * (catch-up mode). Displays the number of buffered updates, an optional
+ * summary of what happened, and a "refresh now" button to immediately apply
+ * all pending changes.
+ */
+export function CatchUpBanner({ catchUp, summary }: CatchUpBannerProps) {
+  if (!catchUp.active) return null;
+
+  const summaryText = buildSummaryText(summary);
+
+  return (
+    <div
+      data-testid="catch-up-banner"
+      className={cn(
+        "flex items-center gap-3 px-4 py-2.5 mb-4 rounded-lg",
+        "bg-info-muted border border-info/20",
+        "animate-in fade-in slide-in-from-top-2 duration-300"
+      )}
+    >
+      <div className="rounded-md p-1.5 bg-info/10">
+        <Inbox className="h-4 w-4 text-info" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-foreground">
+          <span className="font-semibold tabular-nums">{catchUp.bufferedCount}</span>
+          {" "}runs updated while you were away
+        </p>
+        {summaryText && (
+          <p data-testid="catch-up-summary" className="text-xs text-foreground-muted mt-0.5 truncate">
+            {summaryText}
+          </p>
+        )}
+      </div>
+      <button
+        onClick={catchUp.flush}
+        data-testid="catch-up-refresh-btn"
+        className={cn(
+          "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold",
+          "bg-info/10 border border-info/20 text-info",
+          "hover:bg-info/20 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-info/50"
+        )}
+      >
+        <RefreshCw className="h-3 w-3" />
+        Refresh now
+      </button>
+    </div>
+  );
+}

package/src/components/dashboard/executive-summary-banner.tsx

@@ -0,0 +1,174 @@
+"use client";
+import { useMemo } from "react";
+import { CheckCircle2, AlertTriangle, XCircle, X } from "lucide-react";
+import { cn } from "@/lib/cn";
+import type { RunStatus } from "@/types";
+
+export interface ExecutiveSummaryMetrics {
+  totalProjects: number;
+  activeRuns: number;
+  failedRuns: number;
+  completedRuns: number;
+  staleRuns: number;
+  pendingBreakpoints: number;
+}
+
+type SeverityLevel = "healthy" | "amber" | "red";
+
+interface SummaryIssue {
+  text: string;
+  filter: RunStatus | "stale" | null;
+}
+
+interface SummaryResult {
+  severity: SeverityLevel;
+  issues: SummaryIssue[];
+  icon: React.ReactNode;
+}
+
+function deriveSummary(m: ExecutiveSummaryMetrics): SummaryResult {
+  const issues: SummaryIssue[] = [];
+  let severity: SeverityLevel = "healthy";
+
+  // Red-level issues
+  if (m.failedRuns > 0) {
+    issues.push({
+      text: `${m.failedRuns} run${m.failedRuns !== 1 ? "s" : ""} failing`,
+      filter: "failed",
+    });
+    severity = "red";
+  }
+
+  // Amber-level issues
+  if (m.pendingBreakpoints > 0) {
+    issues.push({
+      text: `${m.pendingBreakpoints} approval${m.pendingBreakpoints !== 1 ? "s" : ""} need${m.pendingBreakpoints === 1 ? "s" : ""} your attention`,
+      filter: "waiting",
+    });
+    if (severity !== "red") severity = "amber";
+  }
+
+  if (m.staleRuns > 0) {
+    issues.push({
+      text: `${m.staleRuns} stale run${m.staleRuns !== 1 ? "s" : ""}`,
+      filter: "stale",
+    });
+    if (severity !== "red") severity = "amber";
+  }
+
+  // Healthy
+  if (issues.length === 0) {
+    const projectLabel = m.totalProjects === 1 ? "project" : "projects";
+    const text =
+      m.activeRuns > 0
+        ? `All ${m.totalProjects} ${projectLabel} healthy \u2014 ${m.activeRuns} run${m.activeRuns !== 1 ? "s" : ""} in progress`
+        : `All ${m.totalProjects} ${projectLabel} healthy`;
+    return {
+      severity: "healthy",
+      issues: [{ text, filter: null }],
+      icon: <CheckCircle2 className="h-4 w-4 shrink-0" aria-hidden="true" />,
+    };
+  }
+
+  const icon =
+    severity === "red" ? (
+      <XCircle className="h-4 w-4 shrink-0" aria-hidden="true" />
+    ) : (
+      <AlertTriangle className="h-4 w-4 shrink-0" aria-hidden="true" />
+    );
+
+  return { severity, issues, icon };
+}
+
+const severityStyles: Record<
+  SeverityLevel,
+  { container: string; text: string; iconColor: string }
+> = {
+  healthy: {
+    container:
+      "border-success/25 bg-success-muted shadow-neon-glow-success-sm",
+    text: "text-success",
+    iconColor: "text-success",
+  },
+  amber: {
+    container:
+      "border-warning/25 bg-warning-muted shadow-neon-glow-warning-sm",
+    text: "text-warning",
+    iconColor: "text-warning",
+  },
+  red: {
+    container: "border-error/25 bg-error-muted shadow-neon-glow-error-sm",
+    text: "text-error",
+    iconColor: "text-error",
+  },
+};
+
+interface ExecutiveSummaryBannerProps {
+  metrics: ExecutiveSummaryMetrics;
+  onFilterChange?: (filter: RunStatus | "stale") => void;
+  dismissed?: boolean;
+  onDismiss?: () => void;
+}
+
+export function ExecutiveSummaryBanner({
+  metrics,
+  onFilterChange,
+  dismissed,
+  onDismiss,
+}: ExecutiveSummaryBannerProps) {
+  const summary = useMemo(() => deriveSummary(metrics), [metrics]);
+  const styles = severityStyles[summary.severity];
+
+  if (dismissed) return null;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      data-testid="executive-summary-banner"
+      className={cn(
+        "flex items-center gap-2.5 rounded-xl border px-4 py-3 mb-6 shadow-sm transition-all duration-300",
+        styles.container
+      )}
+    >
+      <span className={styles.iconColor}>{summary.icon}</span>
+      <p
+        className={cn(
+          "text-sm font-medium leading-snug flex-1",
+          styles.text
+        )}
+      >
+        {summary.issues.map((issue, i) => (
+          <span key={i}>
+            {i > 0 && ", "}
+            {issue.filter && onFilterChange ? (
+              <button
+                onClick={() => onFilterChange(issue.filter!)}
+                className="underline decoration-dotted underline-offset-2 hover:decoration-solid transition-all"
+              >
+                {issue.text}
+              </button>
+            ) : (
+              issue.text
+            )}
+          </span>
+        ))}
+      </p>
+      {summary.severity !== "healthy" && onDismiss && (
+        <button
+          data-testid="executive-summary-dismiss"
+          onClick={onDismiss}
+          className={cn(
+            "rounded-md p-1.5 min-h-[44px] min-w-[44px] flex items-center justify-center transition-colors",
+            styles.iconColor,
+            "opacity-60 hover:opacity-100"
+          )}
+          aria-label="Dismiss banner"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}