@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/dashboard/global-search.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Search, X, ArrowRight } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { StatusBadge } from "@/components/shared/status-badge";
+import { friendlyProcessName, formatShortId } from "@/lib/utils";
+import type { Run } from "@/types";
+
+interface SearchResult {
+  runs: Run[];
+  totalCount: number;
+}
+
+export function GlobalSearch() {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [results, setResults] = useState<Run[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [hasSearched, setHasSearched] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // Debounce the search query
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(query.trim());
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  // Fetch results when debounced query changes
+  useEffect(() => {
+    if (!debouncedQuery) {
+      setResults([]);
+      setHasSearched(false);
+      setSelectedIndex(-1);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function fetchResults() {
+      setIsLoading(true);
+      try {
+        const params = new URLSearchParams({
+          search: debouncedQuery,
+          limit: "10",
+        });
+        const res = await fetch(`/api/runs?${params}`);
+        if (!res.ok) throw new Error("Search failed");
+        const data: SearchResult = await res.json();
+        if (!cancelled) {
+          setResults(data.runs ?? []);
+          setHasSearched(true);
+          setSelectedIndex(-1);
+        }
+      } catch {
+        if (!cancelled) {
+          setResults([]);
+          setHasSearched(true);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    fetchResults();
+    return () => {
+      cancelled = true;
+    };
+  }, [debouncedQuery]);
+
+  // Navigate to a run
+  const navigateToRun = useCallback(
+    (runId: string) => {
+      setIsOpen(false);
+      setQuery("");
+      setResults([]);
+      setHasSearched(false);
+      router.push(`/runs/${runId}`);
+    },
+    [router]
+  );
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!isOpen) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev < results.length - 1 ? prev + 1 : 0
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev > 0 ? prev - 1 : results.length - 1
+          );
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (selectedIndex >= 0 && selectedIndex < results.length) {
+            navigateToRun(results[selectedIndex].runId);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          inputRef.current?.blur();
+          break;
+      }
+    },
+    [isOpen, results, selectedIndex, navigateToRun]
+  );
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (selectedIndex >= 0 && listRef.current) {
+      const items = listRef.current.querySelectorAll("[data-search-item]");
+      items[selectedIndex]?.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+
+  // Cmd+K / Ctrl+K and "/" global shortcut
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        inputRef.current?.focus();
+        setIsOpen(true);
+      }
+      // "/" key to focus search (skip if already in an input)
+      if (
+        e.key === "/" &&
+        !e.metaKey && !e.ctrlKey && !e.altKey &&
+        !(e.target instanceof HTMLInputElement) &&
+        !(e.target instanceof HTMLTextAreaElement) &&
+        !(e.target instanceof HTMLSelectElement) &&
+        !(e.target as HTMLElement)?.isContentEditable
+      ) {
+        e.preventDefault();
+        inputRef.current?.focus();
+        setIsOpen(true);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const showDropdown = isOpen && (query.trim().length > 0);
+
+  return (
+    <div ref={containerRef} className="relative w-full max-w-xl mx-auto mb-6">
+      {/* Search input */}
+      <div className="relative">
+        <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-foreground-muted pointer-events-none" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => {
+            if (query.trim()) setIsOpen(true);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Search runs by ID, process name, or task title..."
+          className={cn(
+            "w-full rounded-lg border border-border bg-card/80 backdrop-blur-sm",
+            "pl-10 pr-20 py-2.5 text-sm text-foreground",
+            "placeholder:text-foreground-muted/60",
+            "focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/30",
+            "focus:shadow-neon-glow-primary-focus transition-all"
+          )}
+          data-testid="global-search-input"
+        />
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5">
+          {query && (
+            <button
+              onClick={() => {
+                setQuery("");
+                setResults([]);
+                setHasSearched(false);
+                setIsOpen(false);
+                inputRef.current?.focus();
+              }}
+              className="rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-foreground-secondary transition-colors"
+              aria-label="Clear search"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          )}
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 rounded border border-border bg-background-secondary px-1.5 py-0.5 text-xs font-medium text-foreground-muted">
+            <span className="text-xs">{typeof navigator !== "undefined" && /Mac/i.test(navigator.userAgent) ? "\u2318" : "Ctrl"}</span>
+            <span>K</span>
+          </kbd>
+        </div>
+      </div>
+
+      {/* Dropdown results */}
+      {showDropdown && (
+        <div
+          className={cn(
+            "absolute z-50 top-full left-0 right-0 mt-1.5",
+            "rounded-lg border border-border bg-card/95 backdrop-blur-md shadow-xl",
+            "overflow-hidden"
+          )}
+          data-testid="global-search-dropdown"
+        >
+          {isLoading && (
+            <div className="flex items-center gap-2 px-4 py-3 text-xs text-foreground-muted">
+              <div className="h-3 w-3 rounded-full border-2 border-primary/40 border-t-primary animate-spin" />
+              Searching...
+            </div>
+          )}
+
+          {!isLoading && hasSearched && results.length === 0 && (
+            <div className="px-4 py-6 text-center">
+              <Search className="h-5 w-5 text-foreground-muted/30 mx-auto mb-2" />
+              <p className="text-xs text-foreground-muted">
+                No runs found for &ldquo;{debouncedQuery}&rdquo;
+              </p>
+            </div>
+          )}
+
+          {!isLoading && results.length > 0 && (
+            <ul ref={listRef} className="max-h-80 overflow-y-auto py-1" role="listbox">
+              {results.map((run, index) => (
+                <li
+                  key={run.runId}
+                  data-search-item
+                  role="option"
+                  aria-selected={index === selectedIndex}
+                  onClick={() => navigateToRun(run.runId)}
+                  className={cn(
+                    "flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors",
+                    index === selectedIndex
+                      ? "bg-primary/10"
+                      : "hover:bg-background-secondary/60"
+                  )}
+                >
+                  {/* Status dot */}
+                  <span
+                    className={cn(
+                      "h-2 w-2 rounded-full shrink-0",
+                      run.status === "completed"
+                        ? "bg-success"
+                        : run.status === "failed"
+                        ? "bg-error"
+                        : run.status === "waiting" || run.status === "pending"
+                        ? "bg-warning"
+                        : "bg-foreground-muted"
+                    )}
+                  />
+                  {/* Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-foreground truncate">
+                        {friendlyProcessName(run.processId)}
+                      </span>
+                      <StatusBadge
+                        status={run.status}
+                        waitingKind={run.waitingKind}
+                        isStale={run.isStale}
+                      />
+                    </div>
+                    <div className="flex items-center gap-2 mt-0.5">
+                      {run.projectName && (
+                        <span className="text-xs text-foreground-muted">
+                          {run.projectName}
+                        </span>
+                      )}
+                      <span className="font-mono text-xs text-info">
+                        {formatShortId(run.runId, 8)}
+                      </span>
+                    </div>
+                  </div>
+                  {/* Navigate arrow */}
+                  <ArrowRight
+                    className={cn(
+                      "h-3.5 w-3.5 shrink-0 transition-colors",
+                      index === selectedIndex
+                        ? "text-primary"
+                        : "text-foreground-muted/40"
+                    )}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/kpi-grid.tsx

@@ -0,0 +1,140 @@
+"use client";
+import {
+  Layers,
+  Activity,
+  CheckCircle2,
+  AlertCircle,
+  Pause,
+} from "lucide-react";
+import { cn } from "@/lib/cn";
+import { useAnimatedNumber } from "@/hooks/use-animated-number";
+import type { DashboardMetrics, DashboardStatusFilter } from "@/hooks/use-run-dashboard";
+
+// ---------------------------------------------------------------------------
+// MetricTile (internal)
+// ---------------------------------------------------------------------------
+
+interface MetricTileProps {
+  label: string;
+  value: number;
+  icon: React.ReactNode;
+  color: "primary" | "success" | "warning" | "error" | "muted";
+  pulse?: boolean;
+  testId?: string;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+const colorMap: Record<MetricTileProps["color"], { text: string; bg: string; glow: string; borderL: string; ring: string }> = {
+  primary: { text: "text-primary", bg: "bg-primary/10", glow: "shadow-neon-glow-primary-xs", borderL: "", ring: "ring-primary/50" },
+  success: { text: "text-success", bg: "bg-success/10", glow: "shadow-neon-glow-success-sm", borderL: "border-l-success/60", ring: "ring-success/50" },
+  warning: { text: "text-warning", bg: "bg-warning/10", glow: "shadow-neon-glow-warning-sm", borderL: "border-l-warning/60", ring: "ring-warning/50" },
+  error: { text: "text-error", bg: "bg-error/10", glow: "shadow-neon-glow-error-sm", borderL: "border-l-error/60", ring: "ring-error/50" },
+  muted: { text: "text-zinc-500", bg: "bg-zinc-500/10", glow: "", borderL: "border-l-zinc-500/60", ring: "ring-zinc-500/50" },
+};
+
+function MetricTile({ label, value, icon, color, pulse, testId, active, onClick }: MetricTileProps) {
+  const c = colorMap[color];
+  const isClickable = !!onClick;
+  // Animate the number so jumps like 48->91 feel smooth instead of jarring
+  const displayValue = useAnimatedNumber(value);
+  return (
+    <div
+      data-testid={testId}
+      role={isClickable ? "button" : undefined}
+      aria-pressed={isClickable ? !!active : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onClick={onClick}
+      onKeyDown={isClickable ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick?.(); } } : undefined}
+      className={cn(
+        "rounded-xl border border-border bg-card/90 p-3 flex items-center gap-3 transition-all shadow-sm",
+        value > 0 && color !== "primary" && "border-l-2",
+        value > 0 && color !== "primary" && c.borderL,
+        c.glow,
+        isClickable && "cursor-pointer hover:bg-background-secondary/65 hover:shadow-md",
+        active && "ring-2",
+        active && c.ring,
+      )}
+    >
+      <div className={cn("rounded-md p-2", c.bg)}>
+        <span className={cn(c.text, pulse && "animate-pulse-dot")}>{icon}</span>
+      </div>
+      <div>
+        <p className={cn("text-lg font-bold tabular-nums leading-none mb-0.5", c.text)}>
+          {displayValue}
+        </p>
+        <p className="text-[11px] leading-tight text-foreground-muted uppercase tracking-[0.12em] font-medium">
+          {label}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// KpiGrid (public)
+// ---------------------------------------------------------------------------
+
+export interface KpiGridProps {
+  metrics: DashboardMetrics;
+  statusFilter: DashboardStatusFilter;
+  hasStaleRuns: boolean;
+  onToggleFilter: (filter: DashboardStatusFilter) => void;
+}
+
+export function KpiGrid({ metrics, statusFilter, hasStaleRuns, onToggleFilter }: KpiGridProps) {
+  const kpiCols = hasStaleRuns ? "grid-cols-2 sm:grid-cols-5" : "grid-cols-2 sm:grid-cols-4";
+
+  return (
+    <div data-testid="kpi-grid" aria-live="polite" aria-label="Key metrics" className={cn("grid gap-3 mb-6", kpiCols)}>
+      <MetricTile
+        label="Total Runs"
+        value={metrics.totalRuns}
+        icon={<Layers className="h-4 w-4" />}
+        color="primary"
+        testId="metric-tile-total-runs"
+        onClick={() => onToggleFilter("all")}
+        active={statusFilter === "all"}
+      />
+      <MetricTile
+        label="In Progress"
+        value={metrics.activeRuns}
+        icon={<Activity className="h-4 w-4" />}
+        color="warning"
+        pulse={metrics.activeRuns > 0}
+        testId="metric-tile-active"
+        onClick={() => onToggleFilter("waiting")}
+        active={statusFilter === "waiting"}
+      />
+      {hasStaleRuns && (
+        <MetricTile
+          label="Stale"
+          value={metrics.staleRuns}
+          icon={<Pause className="h-4 w-4" />}
+          color="muted"
+          testId="metric-tile-stale"
+          onClick={() => onToggleFilter("stale")}
+          active={statusFilter === "stale"}
+        />
+      )}
+      <MetricTile
+        label="Completed"
+        value={metrics.completedRuns}
+        icon={<CheckCircle2 className="h-4 w-4" />}
+        color="success"
+        testId="metric-tile-completed"
+        onClick={() => onToggleFilter("completed")}
+        active={statusFilter === "completed"}
+      />
+      <MetricTile
+        label="Failed"
+        value={metrics.failedRuns}
+        icon={<AlertCircle className="h-4 w-4" />}
+        color="error"
+        testId="metric-tile-failed"
+        onClick={() => onToggleFilter("failed")}
+        active={statusFilter === "failed"}
+      />
+    </div>
+  );
+}

package/src/components/dashboard/pagination-controls.tsx

@@ -0,0 +1,100 @@
+'use client';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/cn';
+
+interface PaginationControlsProps {
+  currentPage: number;
+  totalItems: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export function PaginationControls({
+  currentPage,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+  className
+}: PaginationControlsProps) {
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const startItem = currentPage * itemsPerPage + 1;
+  const endItem = Math.min((currentPage + 1) * itemsPerPage, totalItems);
+
+  const canGoPrev = currentPage > 0;
+  const canGoNext = currentPage < totalPages - 1;
+
+  if (totalItems === 0) {
+    return null;
+  }
+
+  // Build visible page numbers: show first, last, current, and neighbors
+  const pageNumbers: (number | 'ellipsis')[] = [];
+  if (totalPages <= 5) {
+    for (let i = 0; i < totalPages; i++) pageNumbers.push(i);
+  } else {
+    pageNumbers.push(0);
+    if (currentPage > 2) pageNumbers.push('ellipsis');
+    for (let i = Math.max(1, currentPage - 1); i <= Math.min(totalPages - 2, currentPage + 1); i++) {
+      pageNumbers.push(i);
+    }
+    if (currentPage < totalPages - 3) pageNumbers.push('ellipsis');
+    pageNumbers.push(totalPages - 1);
+  }
+
+  return (
+    <div className={cn('flex items-center justify-between border-t border-border pt-3', className)}>
+      <span className="text-xs text-foreground-muted tabular-nums">
+        {startItem}–{endItem} of {totalItems}
+      </span>
+      <div className="flex items-center gap-0.5">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={!canGoPrev}
+          className={cn(
+            'inline-flex h-11 w-11 items-center justify-center rounded-md text-xs transition-all',
+            canGoPrev
+              ? 'text-foreground hover:bg-primary-muted hover:text-primary hover:shadow-neon-glow-primary-xs cursor-pointer'
+              : 'text-foreground-muted cursor-not-allowed opacity-40'
+          )}
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        {pageNumbers.map((p, idx) =>
+          p === 'ellipsis' ? (
+            <span key={`ellipsis-${idx}`} className="inline-flex h-11 w-5 items-center justify-center text-xs text-foreground-muted">
+              ...
+            </span>
+          ) : (
+            <button
+              key={p}
+              onClick={() => onPageChange(p)}
+              className={cn(
+                'inline-flex h-11 min-w-[44px] items-center justify-center rounded-md px-1.5 text-xs font-medium tabular-nums transition-all',
+                p === currentPage
+                  ? 'text-primary bg-primary/10'
+                  : 'text-foreground-muted hover:bg-background-secondary hover:text-foreground-secondary cursor-pointer'
+              )}
+            >
+              {p + 1}
+            </button>
+          )
+        )}
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={!canGoNext}
+          className={cn(
+            'inline-flex h-11 w-11 items-center justify-center rounded-md text-xs transition-all',
+            canGoNext
+              ? 'text-foreground hover:bg-primary-muted hover:text-primary hover:shadow-neon-glow-primary-xs cursor-pointer'
+              : 'text-foreground-muted cursor-not-allowed opacity-40'
+          )}
+          aria-label="Next page"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/project-accordion.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { useState } from "react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
+import { ProjectSectionHeader } from "./project-section-header";
+import { ProjectSection } from "./project-section";
+import type { ProjectSummary } from "@/types";
+
+interface ProjectAccordionProps {
+  projects: ProjectSummary[];
+  statusFilter?: string;
+  className?: string;
+}
+
+export function ProjectAccordion({ projects, statusFilter, className }: ProjectAccordionProps) {
+  // Default-open projects that have active runs
+  const defaultOpen = projects
+    .filter((p) => p.activeRuns > 0)
+    .map((p) => p.projectName);
+
+  // Track which projects are expanded
+  const [expandedProjects, setExpandedProjects] = useState<string[]>(defaultOpen);
+
+  if (projects.length === 0) {
+    return (
+      <div className="text-sm text-foreground-muted text-center py-8">
+        No projects found
+      </div>
+    );
+  }
+
+  return (
+    <Accordion
+      type="multiple"
+      defaultValue={defaultOpen}
+      value={expandedProjects}
+      onValueChange={(value) => setExpandedProjects(Array.isArray(value) ? value : [value])}
+      className={className}
+    >
+      {projects.map((project) => {
+        const isExpanded = expandedProjects.includes(project.projectName);
+        return (
+          <AccordionItem key={project.projectName} value={project.projectName}>
+            <AccordionTrigger className="px-2 hover:bg-primary-muted/30 rounded-md transition-colors">
+              <ProjectSectionHeader
+                projectName={project.projectName}
+                activeRuns={project.activeRuns}
+                completedRuns={project.completedRuns}
+                failedRuns={project.failedRuns}
+                totalRuns={project.totalRuns}
+                latestUpdate={project.latestUpdate}
+              />
+            </AccordionTrigger>
+            <AccordionContent className="px-2">
+              <ProjectSection
+                projectName={project.projectName}
+                runs={[]}
+                defaultExpanded
+                statusFilter={statusFilter}
+                enabled={isExpanded}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+}