@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/app/page.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { useRunDashboard } from "@/hooks/use-run-dashboard";
+import { BreakpointBanner } from "@/components/dashboard/breakpoint-banner";
+import { CatchUpBanner } from "@/components/dashboard/catch-up-banner";
+import { ExecutiveSummaryBanner } from "@/components/dashboard/executive-summary-banner";
+import { KpiGrid } from "@/components/dashboard/kpi-grid";
+import { RunFilterBar } from "@/components/dashboard/run-filter-bar";
+import { ProjectListView } from "@/components/dashboard/project-list-view";
+import { ErrorBoundary } from "@/components/shared/error-boundary";
+import { GlobalSearch } from "@/components/dashboard/global-search";
+
+export default function DashboardPage() {
+  const {
+    projects,
+    loading,
+    error,
+    metrics,
+    allBreakpointRuns,
+    summaryMetrics,
+    bannerFingerprint,
+    bannerDismissed,
+    filterCounts,
+    filteredProjects,
+    activeProjects,
+    historyProjects,
+    statusFilter,
+    sortMode,
+    historyCollapsed,
+    cardStatusFilter,
+    hasStaleRuns,
+    catchUp,
+    setStatusFilter,
+    setSortMode,
+    setHistoryCollapsed,
+    setDismissedFingerprint,
+    toggleMetricFilter,
+    handleHideProject,
+  } = useRunDashboard();
+
+  const showBanners = !loading && !error && projects.length > 0;
+
+  return (
+    <div className="bg-gradient-brand flex-1">
+      <div className="mx-auto max-w-[1600px] px-6 py-6">
+        {/* Global Search */}
+        <GlobalSearch />
+
+        {/* Executive Summary Banner */}
+        {showBanners && (
+          <ErrorBoundary section="Executive Summary">
+            <ExecutiveSummaryBanner
+              metrics={summaryMetrics}
+              onFilterChange={setStatusFilter}
+              dismissed={bannerDismissed}
+              onDismiss={() => setDismissedFingerprint(bannerFingerprint)}
+            />
+          </ErrorBoundary>
+        )}
+
+        {/* KPI Metrics Row */}
+        {showBanners && (
+          <ErrorBoundary section="KPI Metrics">
+            <KpiGrid
+              metrics={metrics}
+              statusFilter={statusFilter}
+              hasStaleRuns={hasStaleRuns}
+              onToggleFilter={toggleMetricFilter}
+            />
+          </ErrorBoundary>
+        )}
+
+        {/* Catch-up mode banner — shown when burst of SSE updates detected */}
+        {catchUp.active && (
+          <CatchUpBanner
+            catchUp={catchUp}
+            summary={{
+              failedRuns: summaryMetrics.failedRuns,
+              completedRuns: summaryMetrics.completedRuns,
+              pendingBreakpoints: summaryMetrics.pendingBreakpoints,
+            }}
+          />
+        )}
+
+        {/* Global Breakpoint Banner — pinned with sticky positioning */}
+        {!loading && !error && allBreakpointRuns.length > 0 && (
+          <ErrorBoundary section="Breakpoint Banner">
+            <div className="sticky top-0 z-40">
+              <BreakpointBanner breakpointRuns={allBreakpointRuns} />
+            </div>
+          </ErrorBoundary>
+        )}
+
+        {/* Filter pills + sort toggle */}
+        <RunFilterBar
+          statusFilter={statusFilter}
+          onStatusFilterChange={setStatusFilter}
+          filterCounts={filterCounts}
+          sortMode={sortMode}
+          onSortModeToggle={() => setSortMode((prev) => prev === "status" ? "activity" : "status")}
+          filteredProjectCount={filteredProjects.length}
+        />
+
+        {/* Project cards content */}
+        <ProjectListView
+          loading={loading}
+          error={error}
+          filteredProjects={filteredProjects}
+          activeProjects={activeProjects}
+          historyProjects={historyProjects}
+          statusFilter={statusFilter}
+          sortMode={sortMode}
+          cardStatusFilter={cardStatusFilter}
+          historyCollapsed={historyCollapsed}
+          onHistoryCollapsedChange={setHistoryCollapsed}
+          onHideProject={handleHideProject}
+        />
+      </div>
+    </div>
+  );
+}

package/src/app/runs/[runId]/page.tsx

@@ -0,0 +1,279 @@
+"use client";
+import { useState, useCallback, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import dynamic from "next/dynamic";
+import { useRunDetail } from "@/hooks/use-run-detail";
+import { useKeyboard } from "@/hooks/use-keyboard";
+import { OutcomeBanner } from "@/components/shared/outcome-banner";
+import { MetricsRow } from "@/components/shared/metrics-row";
+import { useNotificationContext } from "@/components/notifications/notification-provider";
+import { cn } from "@/lib/cn";
+import { Loader2, X, ArrowLeft } from "lucide-react";
+import type { JournalEvent, EffectRequestedPayload } from "@/types";
+
+/* -------------------------------------------------------------------------- */
+/*  Loading skeletons for lazy-loaded route panels                            */
+/* -------------------------------------------------------------------------- */
+
+function PipelineSkeleton() {
+  return (
+    <div className="flex flex-col h-full animate-pulse p-4 space-y-3">
+      <div className="h-5 w-40 rounded bg-foreground-muted/10" />
+      <div className="h-2 w-full rounded-full bg-foreground-muted/10" />
+      <div className="space-y-2 mt-4">
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="h-16 rounded-lg bg-foreground-muted/10" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function EventStreamSkeleton() {
+  return (
+    <div className="flex flex-col h-full animate-pulse p-3 space-y-2">
+      <div className="h-4 w-24 rounded bg-foreground-muted/10" />
+      <div className="h-8 w-full rounded bg-foreground-muted/10" />
+      <div className="space-y-1.5 mt-2">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="h-10 rounded bg-foreground-muted/10" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function DetailPanelSkeleton() {
+  return (
+    <div className="flex flex-col h-full animate-pulse p-4 space-y-3">
+      <div className="h-8 w-full rounded bg-foreground-muted/10" />
+      <div className="h-4 w-3/4 rounded bg-foreground-muted/10" />
+      <div className="h-4 w-1/2 rounded bg-foreground-muted/10" />
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Lazy-loaded heavy route panels                                            */
+/* -------------------------------------------------------------------------- */
+
+const PipelineView = dynamic(
+  () => import("@/components/pipeline/pipeline-view").then((mod) => ({ default: mod.PipelineView })),
+  { ssr: false, loading: PipelineSkeleton }
+);
+
+const EventStream = dynamic(
+  () => import("@/components/events/event-stream").then((mod) => ({ default: mod.EventStream })),
+  { ssr: false, loading: EventStreamSkeleton }
+);
+
+const TaskDetailPanel = dynamic(
+  () => import("@/components/details/task-detail").then((mod) => ({ default: mod.TaskDetailPanel })),
+  { ssr: false, loading: DetailPanelSkeleton }
+);
+
+export default function RunDetailPage({ params }: { params: { runId: string } }) {
+  const { runId } = params;
+  const router = useRouter();
+  const { run, loading, error, hasBreakpointWaiting: _hasBreakpointWaiting } = useRunDetail(runId);
+  const { notifications: _notifications, dismiss: _dismiss, notify: _notify } = useNotificationContext();
+  const [selectedEffectId, setSelectedEffectId] = useState<string | null>(null);
+  const [showDetail, setShowDetail] = useState(false);
+  const [showEventStream, setShowEventStream] = useState(true);
+  const [activeTab, setActiveTab] = useState("agent");
+
+  const handleSelectEffect = useCallback((effectId: string) => {
+    setSelectedEffectId(effectId);
+    setShowDetail(true);
+
+    // Auto-switch to breakpoint tab when selecting a breakpoint task
+    const task = run?.tasks.find((t) => t.effectId === effectId);
+    if (task?.kind === "breakpoint") {
+      setActiveTab("breakpoint");
+    }
+  }, [run?.tasks]);
+
+  const handleEventClick = useCallback((event: JournalEvent) => {
+    const payload = event.payload as unknown as EffectRequestedPayload;
+    if (payload?.effectId) {
+      handleSelectEffect(payload.effectId);
+    }
+  }, [handleSelectEffect]);
+
+  const tasks = useMemo(() => run?.tasks || [], [run?.tasks]);
+
+  // Determine if the currently selected task is a waiting breakpoint
+  const selectedTask = useMemo(() => {
+    if (!selectedEffectId) return null;
+    return tasks.find((t) => t.effectId === selectedEffectId) || null;
+  }, [tasks, selectedEffectId]);
+
+  const moveDown = useCallback(() => {
+    if (!tasks.length) return;
+    const currentIdx = selectedEffectId
+      ? tasks.findIndex((t) => t.effectId === selectedEffectId)
+      : -1;
+    const nextIdx = Math.min(currentIdx + 1, tasks.length - 1);
+    handleSelectEffect(tasks[nextIdx].effectId);
+  }, [tasks, selectedEffectId, handleSelectEffect]);
+
+  const moveUp = useCallback(() => {
+    if (!tasks.length) return;
+    const currentIdx = selectedEffectId
+      ? tasks.findIndex((t) => t.effectId === selectedEffectId)
+      : tasks.length;
+    const prevIdx = Math.max(currentIdx - 1, 0);
+    handleSelectEffect(tasks[prevIdx].effectId);
+  }, [tasks, selectedEffectId, handleSelectEffect]);
+
+  const goBack = useCallback(() => {
+    if (showDetail) {
+      setShowDetail(false);
+      setSelectedEffectId(null);
+    } else {
+      router.push("/");
+    }
+  }, [showDetail, router]);
+
+  const toggleEventStream = useCallback(() => {
+    setShowEventStream((v) => !v);
+  }, []);
+
+  const openSelected = useCallback(() => {
+    if (selectedEffectId && !showDetail) {
+      setShowDetail(true);
+    } else if (!selectedEffectId && tasks.length > 0) {
+      handleSelectEffect(tasks[0].effectId);
+    }
+  }, [selectedEffectId, showDetail, tasks, handleSelectEffect]);
+
+  const switchTab = useCallback((key: string) => {
+    if (!showDetail) return;
+    const tabKeys: Record<string, string> = {
+      "1": "agent",
+      "2": "timing",
+      "3": "logs",
+      "4": "data",
+      "5": "breakpoint",
+    };
+    const tab = tabKeys[key];
+    if (tab) {
+      if (tab === "breakpoint" && selectedTask?.kind !== "breakpoint") return;
+      setActiveTab(tab);
+    }
+  }, [selectedTask, showDetail]);
+
+  useKeyboard([
+    { key: "j", action: moveDown, description: "Next item" },
+    { key: "k", action: moveUp, description: "Previous item" },
+    { key: "Enter", action: openSelected, description: "Open selected" },
+    { key: "Escape", action: goBack, description: "Go back / Close" },
+    { key: "e", action: toggleEventStream, description: "Toggle event stream" },
+    { key: "1", action: () => switchTab("1"), description: "Agent tab" },
+    { key: "2", action: () => switchTab("2"), description: "Timing tab" },
+    { key: "3", action: () => switchTab("3"), description: "Logs tab" },
+    { key: "4", action: () => switchTab("4"), description: "Data tab" },
+    { key: "5", action: () => switchTab("5"), description: "Approval tab" },
+  ]);
+
+  if (loading && !run) {
+    return (
+      <div className="flex items-center justify-center flex-1">
+        <Loader2 className="h-6 w-6 animate-spin text-foreground-muted" />
+      </div>
+    );
+  }
+
+  if (error || !run) {
+    return (
+      <div className="flex items-center justify-center flex-1">
+        <div data-testid="run-error-message" className="rounded-lg border border-error/20 bg-error-muted p-4 text-sm text-error">
+          {error || "Run not found"}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col flex-1 bg-background">
+      {/* Navigation header with back button */}
+      <div className="flex items-center gap-3 px-4 py-2 border-b border-border bg-background-secondary/40">
+        <button
+          onClick={() => router.push("/")}
+          className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 min-h-[44px] text-xs font-medium text-foreground-muted hover:text-foreground hover:border-primary/50 hover:shadow-neon-glow-primary-ring transition-all duration-200"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Dashboard
+        </button>
+        <span className="text-xs text-foreground-muted">/</span>
+        <span className="text-xs font-mono text-foreground-secondary">{run.runId.slice(0, 8)}...</span>
+        {run.processId && (
+          <>
+            <span className="text-xs text-foreground-muted">/</span>
+            <span className="text-xs text-foreground-secondary">{run.processId}</span>
+          </>
+        )}
+      </div>
+
+      {/* Outcome Banner - Top of page */}
+      <OutcomeBanner run={run} />
+
+      {/* Metrics Row - Summary stats for all run statuses */}
+      <MetricsRow run={run} />
+
+      <div className="flex flex-col lg:flex-row flex-1 overflow-hidden">
+        {/* Pipeline - Left panel */}
+        <div className={cn(
+          "border-b lg:border-b-0 lg:border-r border-border transition-panel bg-card/50 backdrop-blur-sm",
+          showDetail ? "lg:w-[35%]" : showEventStream ? "lg:w-[60%]" : "w-full",
+        )}>
+          <PipelineView
+            run={run}
+            selectedEffectId={selectedEffectId}
+            onSelectEffect={handleSelectEffect}
+            runStatus={run.status}
+          />
+        </div>
+
+        {/* Task Detail - Center panel (shown when task selected) */}
+        {showDetail && (
+          <div className={cn(
+            "border-b lg:border-b-0 lg:border-r border-border transition-panel bg-card/50 backdrop-blur-sm overflow-hidden flex flex-col",
+            showEventStream ? "lg:w-[30%]" : "lg:w-[65%]",
+          )}>
+            <div data-testid="task-detail-header" className="flex items-center justify-between p-3 border-b border-border bg-background-secondary/40">
+              <h3 className="text-xs font-medium text-foreground-muted uppercase tracking-wider">Task Detail</h3>
+              <button
+                data-testid="close-detail-btn"
+                onClick={() => { setShowDetail(false); setSelectedEffectId(null); }}
+                className="inline-flex items-center gap-1.5 rounded-md border border-primary/20 px-2.5 py-1 min-h-[44px] text-xs font-medium text-foreground-muted hover:text-primary hover:border-primary/50 hover:shadow-neon-glow-primary-ring transition-all duration-200"
+              >
+                <X className="h-3.5 w-3.5" />
+                Close
+              </button>
+            </div>
+            <TaskDetailPanel
+              runId={runId}
+              effectId={selectedEffectId}
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+              runDuration={run.duration}
+              allTasks={run.tasks}
+            />
+          </div>
+        )}
+
+        {/* Event Stream - Right panel */}
+        {showEventStream && (
+          <div className={cn(
+            "transition-panel bg-card/50 backdrop-blur-sm",
+            showDetail ? "lg:w-[35%]" : "lg:w-[40%]",
+          )}>
+            <EventStream events={run.events} onEventClick={handleEventClick} />
+          </div>
+        )}
+      </div>
+
+    </div>
+  );
+}

package/src/cli.ts

@@ -0,0 +1,271 @@
+#!/usr/bin/env node
+
+/**
+ * CLI entry point for the babysitter observer dashboard.
+ *
+ * Parses command-line flags, maps them to environment variables,
+ * then execs into `next dev` or `next start`.
+ *
+ * Usage:
+ *   npx ts-node src/cli.ts --port 4800 --watch-dir /tmp/runs --poll-interval 5000 --theme light
+ *   npx ts-node src/cli.ts --production --port 4800
+ */
+
+import { execSync } from "child_process";
+import { readFileSync, existsSync } from "fs";
+import { resolve } from "path";
+
+interface CliOptions {
+  port?: string;
+  watchDir?: string;
+  pollInterval?: string;
+  theme?: string;
+  dev?: boolean;
+  help?: boolean;
+  version?: boolean;
+}
+
+// Injected at build time by esbuild define. Falls back to reading package.json
+// at runtime for development (ts-node) usage.
+declare const __CLI_VERSION__: string | undefined;
+
+function getVersion(): string {
+  if (typeof __CLI_VERSION__ !== "undefined") {
+    return __CLI_VERSION__;
+  }
+  try {
+    const pkgPath = resolve(__dirname, "..", "package.json");
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+    return pkg.version || "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+function printUsage(): void {
+  const usage = `
+babysitter-observer-dashboard — CLI for the observer dashboard
+
+Usage:
+  observer [options]
+
+Options:
+  --port <number>           Port to listen on (default: 4800)
+  --watch-dir <path>        Directory to watch for .a5c/runs (default: cwd)
+  --poll-interval <ms>      Polling interval in milliseconds (default: 2000)
+  --theme <dark|light>      Default UI theme (default: dark)
+  --dev                     Run in dev mode (next dev) instead of production
+  --version, -v             Show version number
+  --help                    Show this help message
+
+Environment variable mapping:
+  --port           -> OBSERVER_PORT
+  --watch-dir      -> OBSERVER_WATCH_DIR
+  --poll-interval  -> OBSERVER_POLL_INTERVAL
+  --theme          -> OBSERVER_DEFAULT_THEME
+
+Examples:
+  # Start dashboard on port 3002 watching a specific directory
+  observer --port 3002 --watch-dir /home/user/projects
+
+  # Start with light theme
+  observer --theme light
+`.trim();
+
+  console.log(usage);
+}
+
+function parseArgs(argv: string[]): CliOptions {
+  const opts: CliOptions = {};
+  // Skip first two entries: node binary and script path
+  const args = argv.slice(2);
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    switch (arg) {
+      case "--port":
+        i++;
+        opts.port = args[i];
+        if (!opts.port || isNaN(Number(opts.port))) {
+          console.error("Error: --port requires a numeric value");
+          process.exit(1);
+        }
+        break;
+
+      case "--watch-dir":
+        i++;
+        opts.watchDir = args[i];
+        if (!opts.watchDir) {
+          console.error("Error: --watch-dir requires a path value");
+          process.exit(1);
+        }
+        break;
+
+      case "--poll-interval":
+        i++;
+        opts.pollInterval = args[i];
+        if (!opts.pollInterval || isNaN(Number(opts.pollInterval))) {
+          console.error("Error: --poll-interval requires a numeric value (ms)");
+          process.exit(1);
+        }
+        break;
+
+      case "--theme":
+        i++;
+        opts.theme = args[i];
+        if (opts.theme !== "dark" && opts.theme !== "light") {
+          console.error('Error: --theme must be "dark" or "light"');
+          process.exit(1);
+        }
+        break;
+
+      case "--dev":
+        opts.dev = true;
+        break;
+
+      case "--production":
+        // Legacy flag — production is now the default, so this is a no-op
+        break;
+
+      case "--version":
+      case "-v":
+        opts.version = true;
+        break;
+
+      case "--help":
+      case "-h":
+        opts.help = true;
+        break;
+
+      default:
+        console.error(`Unknown flag: ${arg}`);
+        console.error('Run with --help for usage information.');
+        process.exit(1);
+    }
+  }
+
+  return opts;
+}
+
+/**
+ * Locate the `next` binary across all installation scenarios.
+ *
+ * npm may hoist dependencies to a parent node_modules (e.g. when this
+ * package is installed via npx or as a dependency of another project).
+ * We try several strategies before giving up:
+ *
+ *   1. require.resolve — honours Node's module resolution & hoisting
+ *   2. Local node_modules/.bin — classic non-hoisted layout
+ *   3. Walk up the directory tree — covers deep-nested workspaces
+ *   4. Bare "next" — last resort, assumes it is on $PATH
+ */
+function findNextBin(): string {
+  const projectRoot = resolve(__dirname, "..");
+
+  // Method 1: Use require.resolve to find next's package.json (handles hoisting).
+  // We derive the .bin/next wrapper path (not dist/bin/next) because the wrapper
+  // is cross-platform: on Unix it has a shebang, on Windows there is a .cmd peer.
+  try {
+    const nextPkgPath = require.resolve("next/package.json", {
+      paths: [projectRoot],
+    });
+    // nextPkgPath => .../node_modules/next/package.json
+    // Go up to the containing node_modules directory, then into .bin
+    const nodeModulesDir = resolve(nextPkgPath, "..", "..");
+    const binPath = resolve(nodeModulesDir, ".bin", "next");
+    if (existsSync(binPath) || existsSync(binPath + ".cmd")) {
+      return binPath;
+    }
+  } catch {
+    // next is not resolvable from projectRoot — continue to fallbacks
+  }
+
+  // Method 2: Check the local node_modules/.bin (non-hoisted layout)
+  const localBin = resolve(projectRoot, "node_modules", ".bin", "next");
+  if (existsSync(localBin)) {
+    return localBin;
+  }
+
+  // Method 3: Walk up the directory tree looking for node_modules/.bin/next
+  let current = projectRoot;
+  while (true) {
+    const candidate = resolve(current, "node_modules", ".bin", "next");
+    if (existsSync(candidate)) {
+      return candidate;
+    }
+    const parent = resolve(current, "..");
+    if (parent === current) {
+      break; // reached filesystem root
+    }
+    current = parent;
+  }
+
+  // Method 4: Fall back to bare "next" and hope it is on PATH
+  return "next";
+}
+
+function main(): void {
+  const opts = parseArgs(process.argv);
+
+  if (opts.version) {
+    console.log(`babysitter-observer-dashboard v${getVersion()}`);
+    process.exit(0);
+  }
+
+  if (opts.help) {
+    printUsage();
+    process.exit(0);
+  }
+
+  // Map CLI flags to environment variables
+  if (opts.port) {
+    process.env.OBSERVER_PORT = opts.port;
+  }
+
+  // Default watch directory to the user's cwd (not the package root, which is
+  // where Next.js will run). Without this, the config falls back to
+  // process.cwd() inside the Next.js process, which points at the package
+  // root — useless for npx / global installs.
+  process.env.OBSERVER_WATCH_DIR = opts.watchDir || process.cwd();
+
+  if (opts.pollInterval) {
+    process.env.OBSERVER_POLL_INTERVAL = opts.pollInterval;
+  }
+
+  if (opts.theme) {
+    process.env.OBSERVER_DEFAULT_THEME = opts.theme;
+  }
+
+  // Determine the Next.js command — use local binary for global installs
+  const port = opts.port || process.env.OBSERVER_PORT || "4800";
+  const nextBin = findNextBin();
+  const nextCmd = opts.dev
+    ? `"${nextBin}" dev --port ${port}`
+    : `"${nextBin}" start --port ${port}`;
+
+  console.log(`Starting observer: ${nextCmd}`);
+
+  if (opts.watchDir) {
+    console.log(`  Watch directory: ${opts.watchDir}`);
+  }
+  if (opts.pollInterval) {
+    console.log(`  Poll interval: ${opts.pollInterval}ms`);
+  }
+  if (opts.theme) {
+    console.log(`  Theme: ${opts.theme}`);
+  }
+
+  try {
+    execSync(nextCmd, {
+      env: process.env,
+      stdio: "inherit",
+      cwd: resolve(__dirname, ".."),
+    });
+  } catch {
+    // next dev exits with non-zero on SIGINT/SIGTERM — that is normal
+    process.exit(0);
+  }
+}
+
+main();