@a5c-ai/babysitter-observer-dashboard 5.0.1-staging.7a8768ec

package/src/components/shared/__tests__/status-badge.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { StatusBadge } from '../status-badge';
+
+describe('StatusBadge', () => {
+  it('renders without crashing', () => {
+    render(<StatusBadge status="completed" />);
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+  });
+
+  it('renders "Completed" label for completed status', () => {
+    render(<StatusBadge status="completed" />);
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+  });
+
+  it('renders "Done" label for resolved status', () => {
+    render(<StatusBadge status="resolved" />);
+    expect(screen.getByText('Done')).toBeInTheDocument();
+  });
+
+  it('renders "OK" label for ok status', () => {
+    render(<StatusBadge status="ok" />);
+    expect(screen.getByText('OK')).toBeInTheDocument();
+  });
+
+  it('renders "Failed" label for failed status', () => {
+    render(<StatusBadge status="failed" />);
+    expect(screen.getByText('Failed')).toBeInTheDocument();
+  });
+
+  it('renders "Error" label for error status', () => {
+    render(<StatusBadge status="error" />);
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('renders "Waiting" label for waiting status', () => {
+    render(<StatusBadge status="waiting" />);
+    expect(screen.getByText('Waiting')).toBeInTheDocument();
+  });
+
+  it('renders "Needs Approval" label for breakpoint_awaiting status', () => {
+    render(<StatusBadge status="breakpoint_awaiting" />);
+    expect(screen.getByText('Needs Approval')).toBeInTheDocument();
+  });
+
+  it('renders "Running" label for requested status', () => {
+    render(<StatusBadge status="requested" />);
+    expect(screen.getByText('Running')).toBeInTheDocument();
+  });
+
+  it('renders "Pending" label for pending status', () => {
+    render(<StatusBadge status="pending" />);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('falls back to pending config for unknown status', () => {
+    render(<StatusBadge status="unknown_status" />);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<StatusBadge status="completed" className="my-custom" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge.className).toContain('my-custom');
+  });
+
+  it('renders an icon alongside the label', () => {
+    const { container } = render(<StatusBadge status="completed" />);
+    // The Badge wrapper should contain both the SVG icon and the text
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+  });
+
+  it('renders "Approval Needed" when status is waiting and waitingKind is breakpoint', () => {
+    render(<StatusBadge status="waiting" waitingKind="breakpoint" />);
+    expect(screen.getByText('Approval Needed')).toBeInTheDocument();
+  });
+
+  it('renders "Working" when status is waiting and waitingKind is task', () => {
+    render(<StatusBadge status="waiting" waitingKind="task" />);
+    expect(screen.getByText('Working')).toBeInTheDocument();
+  });
+
+  it('renders with stale styling when isStale is true', () => {
+    const { container } = render(<StatusBadge status="waiting" isStale={true} />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge.className).toContain('opacity-60');
+  });
+
+  it('renders normal waiting when waitingKind not provided', () => {
+    render(<StatusBadge status="waiting" />);
+    expect(screen.getByText('Waiting')).toBeInTheDocument();
+    expect(screen.queryByText('Approval Needed')).not.toBeInTheDocument();
+    expect(screen.queryByText('Working')).not.toBeInTheDocument();
+  });
+});

package/src/components/shared/__tests__/theme-provider.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@/test/test-utils';
+import { ThemeProvider, useTheme } from '../theme-provider';
+
+function ThemeConsumer() {
+  const { theme, toggle } = useTheme();
+  return (
+    <div>
+      <span data-testid="theme-value">{theme}</span>
+      <button onClick={toggle}>Toggle</button>
+    </div>
+  );
+}
+
+describe('ThemeProvider', () => {
+  beforeEach(() => {
+    // Reset DOM state between tests since ThemeProvider reads from the DOM
+    document.documentElement.removeAttribute('data-theme');
+    document.documentElement.className = '';
+    localStorage.removeItem('observer-theme');
+  });
+
+  it('renders children', () => {
+    render(
+      <ThemeProvider>
+        <span>child content</span>
+      </ThemeProvider>,
+    );
+    expect(screen.getByText('child content')).toBeInTheDocument();
+  });
+
+  it('provides default dark theme', () => {
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('theme-value').textContent).toBe('dark');
+  });
+
+  it('toggles from dark to light', () => {
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByTestId('theme-value').textContent).toBe('light');
+  });
+
+  it('toggles from light back to dark', () => {
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByTestId('theme-value').textContent).toBe('light');
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByTestId('theme-value').textContent).toBe('dark');
+  });
+
+  it('sets data-theme attribute on document element when toggling', () => {
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+  });
+
+  it('sets className on document element when toggling', () => {
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(document.documentElement.className).toBe('light');
+  });
+
+  it('stores theme in localStorage when toggling', () => {
+    render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(localStorage.getItem('observer-theme')).toBe('light');
+  });
+});
+
+describe('useTheme without provider', () => {
+  it('returns default values when used outside ThemeProvider', () => {
+    render(<ThemeConsumer />);
+    expect(screen.getByTestId('theme-value').textContent).toBe('dark');
+  });
+});

package/src/components/shared/__tests__/truncated-id.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import userEvent from '@testing-library/user-event';
+import { TruncatedId } from '../truncated-id';
+
+describe('TruncatedId', () => {
+  it('renders without crashing', () => {
+    render(<TruncatedId id="abc123def456" />);
+    // formatShortId("abc123def456", 4) => "...f456"
+    expect(screen.getByText('...f456')).toBeInTheDocument();
+  });
+
+  it('renders truncated ID with default 4 chars', () => {
+    render(<TruncatedId id="long-id-string-xyz" />);
+    expect(screen.getByText('...-xyz')).toBeInTheDocument();
+  });
+
+  it('renders truncated ID with custom chars count', () => {
+    render(<TruncatedId id="abcdefghij" chars={6} />);
+    // formatShortId("abcdefghij", 6) => "...efghij"
+    expect(screen.getByText('...efghij')).toBeInTheDocument();
+  });
+
+  it('renders full ID when shorter than chars', () => {
+    render(<TruncatedId id="ab" chars={4} />);
+    expect(screen.getByText('ab')).toBeInTheDocument();
+  });
+
+  it('copies full ID to clipboard on click', async () => {
+    const user = userEvent.setup();
+    const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText');
+    render(<TruncatedId id="full-id-to-copy" />);
+    const el = screen.getByText('...copy');
+    await user.click(el);
+    expect(writeTextSpy).toHaveBeenCalledWith('full-id-to-copy');
+  });
+
+  it('applies copied class after click', async () => {
+    const user = userEvent.setup();
+    render(<TruncatedId id="some-test-id" />);
+    const el = screen.getByText('...t-id');
+    await user.click(el);
+    // After copying, the element gets 'text-primary' class to indicate copied state
+    expect(el.className).toContain('text-primary');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<TruncatedId id="test-id" className="custom-class" />);
+    const span = container.querySelector('span');
+    expect(span?.className).toContain('custom-class');
+  });
+});

package/src/components/shared/app-footer.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Eye, Github, ExternalLink } from "lucide-react";
+
+export function AppFooter() {
+  const [versions, setVersions] = useState({
+    app: process.env.NEXT_PUBLIC_APP_VERSION || "…",
+    babysitter: process.env.NEXT_PUBLIC_BABYSITTER_VERSION || "…",
+  });
+
+  useEffect(() => {
+    fetch("/api/version")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.app || data.babysitter) {
+          setVersions((prev) => ({
+            app: data.app || prev.app,
+            babysitter: data.babysitter || prev.babysitter,
+          }));
+        }
+      })
+      .catch(() => {
+        // Keep build-time fallback values
+      });
+  }, []);
+
+  return (
+    <footer className="border-t border-border bg-background/80 backdrop-blur-sm">
+      <div className="mx-auto max-w-[1600px] px-6 py-3 flex flex-wrap items-center justify-between gap-3 text-xs text-foreground-muted">
+        <div className="flex items-center gap-3 flex-wrap">
+          <Eye className="h-3.5 w-3.5 text-primary/40" />
+          <span className="font-medium">
+            Babysitter Observer{" "}
+            <span className="rounded-full bg-primary/10 border border-primary/20 px-1.5 py-px text-[10px] font-medium text-primary tabular-nums">
+              v{versions.app}
+            </span>
+          </span>
+
+          <span className="text-foreground-muted/30 select-none">&middot;</span>
+
+          <span className="text-xs font-normal text-foreground-muted">
+            Babysitter{" "}
+            <span className="rounded-full bg-muted/50 border border-border px-1.5 py-px text-[10px] font-normal text-foreground-muted tabular-nums">
+              v{versions.babysitter}
+            </span>
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          <a
+            href="https://github.com/a5c-ai/babysitter/tree/main/packages/observer-dashboard#readme"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 hover:text-foreground-secondary transition-colors"
+          >
+            <Github className="h-3 w-3" />
+            Docs
+          </a>
+          <a
+            href="https://github.com/a5c-ai/babysitter"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 hover:text-foreground-secondary transition-colors"
+          >
+            <Github className="h-3 w-3" />
+            Babysitter
+          </a>
+          <a
+            href="https://www.a5c.ai/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 hover:text-primary transition-colors"
+          >
+            a5c.ai
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/components/shared/app-header.tsx

@@ -0,0 +1,160 @@
+"use client";
+import { useState, useCallback, useEffect } from "react";
+import Link from "next/link";
+import { useTheme } from "@/components/shared/theme-provider";
+import { useEventStream } from "@/hooks/use-event-stream";
+import { useNotificationContext } from "@/components/notifications/notification-provider";
+import { useKeyboard } from "@/hooks/use-keyboard";
+import { NotificationPanel } from "@/components/notifications/notification-panel";
+import { SettingsModal } from "@/components/shared/settings-modal";
+import { cn } from "@/lib/cn";
+import {
+  Eye,
+  Sun,
+  Moon,
+  Settings,
+  Bell,
+  HelpCircle,
+  Wifi,
+  WifiOff,
+  Github,
+} from "lucide-react";
+
+export function AppHeader() {
+  const { theme, toggle: toggleTheme } = useTheme();
+  const { connected: sseConnected } = useEventStream();
+  const { notifications, dismiss } = useNotificationContext();
+  const [showNotificationPanel, setShowNotificationPanel] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+
+  const toggleNotificationPanel = useCallback(() => {
+    setShowNotificationPanel((v) => !v);
+  }, []);
+
+  useKeyboard([
+    { key: "n", action: toggleNotificationPanel, description: "Toggle notifications" },
+  ]);
+
+  // Allow external components to open the settings modal via custom event
+  useEffect(() => {
+    const handler = () => setShowSettings(true);
+    window.addEventListener("open-settings", handler);
+    return () => window.removeEventListener("open-settings", handler);
+  }, []);
+
+
+  return (
+    <>
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md"
+      >
+        Skip to main content
+      </a>
+      <header className="sticky top-0 z-30 border-b border-border bg-background/80 backdrop-blur-md">
+        <div className="mx-auto max-w-[1600px] px-6 py-3 flex items-center gap-3">
+          <Eye className="h-5 w-5 text-primary" />
+          <h1 className="text-base font-semibold">
+            <Link href="/" className="text-foreground hover:text-primary transition-colors">
+              Babysitter Observer
+            </Link>
+          </h1>
+          <a
+            href="https://www.a5c.ai/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs leading-tight font-medium text-primary/60 hover:text-primary transition-colors hidden sm:block"
+          >
+            a5c.ai
+          </a>
+          <a
+            href="https://github.com/a5c-ai/babysitter"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-xs text-foreground-muted hover:text-foreground-secondary transition-colors hidden sm:block"
+            title="Babysitter on GitHub"
+          >
+            <Github className="h-3.5 w-3.5" />
+          </a>
+          <span className="text-xs text-foreground-muted hidden md:block">
+            Real-time orchestration dashboard
+          </span>
+          <div className="ml-auto flex items-center gap-1.5">
+            {/* SSE connection status chip */}
+            <span
+              data-testid="sse-status"
+              role="status"
+              aria-live="polite"
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium mr-1 transition-all",
+                sseConnected
+                  ? "bg-success/10 text-success border border-success/20"
+                  : "bg-error/10 text-error border border-error/20"
+              )}
+              title={sseConnected ? "Live updates connected" : "Live updates disconnected"}
+            >
+              {sseConnected ? (
+                <Wifi className="h-3 w-3" />
+              ) : (
+                <WifiOff className="h-3 w-3" />
+              )}
+              <span className="hidden sm:inline">{sseConnected ? "Live" : "Offline"}</span>
+            </span>
+            {/* Notification bell */}
+            <button
+              data-testid="notification-bell"
+              onClick={toggleNotificationPanel}
+              className="relative rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-foreground-secondary hover:bg-background-secondary transition-colors"
+              title="Notifications"
+              aria-label={`Notifications${notifications.length > 0 ? ` (${notifications.length} unread)` : ""}`}
+            >
+              <Bell className="h-4 w-4" />
+              {notifications.length > 0 && (
+                <span data-testid="notification-badge" className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground tabular-nums">
+                  {notifications.length > 9 ? "9+" : notifications.length}
+                </span>
+              )}
+            </button>
+            {/* Keyboard shortcuts help */}
+            <button
+              onClick={() => window.dispatchEvent(new CustomEvent("open-shortcuts-help"))}
+              className="rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-foreground-secondary hover:bg-background-secondary transition-colors"
+              title="Keyboard shortcuts"
+              aria-label="Keyboard shortcuts"
+            >
+              <HelpCircle className="h-4 w-4" />
+            </button>
+            <button
+              onClick={() => setShowSettings(true)}
+              className="rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-foreground-secondary hover:bg-background-secondary transition-colors"
+              title="Settings"
+              aria-label="Settings"
+            >
+              <Settings className="h-4 w-4" />
+            </button>
+            <button
+              data-testid="theme-toggle"
+              onClick={toggleTheme}
+              className="rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-foreground-secondary hover:bg-background-secondary transition-colors"
+              title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+              aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+            >
+              {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Notification Panel */}
+      <NotificationPanel
+        open={showNotificationPanel}
+        notifications={notifications}
+        onDismiss={dismiss}
+        onClose={() => setShowNotificationPanel(false)}
+      />
+
+      {/* Settings Modal */}
+      <SettingsModal open={showSettings} onClose={() => setShowSettings(false)} />
+    </>
+  );
+}

package/src/components/shared/empty-state.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/cn";
+import { Inbox } from "lucide-react";
+
+interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+export function EmptyState({ title = "No runs found", description = "Start a babysitter run to see it here.", className }: EmptyStateProps) {
+  return (
+    <div className={cn("flex flex-col items-center justify-center py-16 text-center", className)}>
+      <Inbox className="h-12 w-12 text-foreground-muted/30 mb-4" />
+      <h3 className="text-sm font-medium text-foreground-secondary">{title}</h3>
+      <p className="mt-1 text-xs text-foreground-muted">{description}</p>
+    </div>
+  );
+}

package/src/components/shared/error-boundary.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React from "react";
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  /** When set, renders a compact inline fallback instead of the full-page error. */
+  section?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  private handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // Section-level: compact inline fallback that doesn't take over the page
+      if (this.props.section) {
+        return (
+          <div className="rounded-lg border border-error/20 bg-error-muted p-4 text-center">
+            <p className="text-sm font-medium text-error mb-1">
+              {this.props.section} failed to load
+            </p>
+            <p className="text-xs text-foreground-muted mb-2">
+              This section encountered an error. Other sections are unaffected.
+            </p>
+            <button
+              onClick={this.handleRetry}
+              className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-primary/90"
+            >
+              Retry
+            </button>
+          </div>
+        );
+      }
+
+      // Root-level: full-page fallback
+      return (
+        <div className="flex min-h-screen items-center justify-center bg-background p-6">
+          <div className="max-w-md text-center">
+            <h2 className="mb-2 text-lg font-semibold text-foreground">
+              Something went wrong
+            </h2>
+            <p className="mb-4 text-sm text-foreground-muted">
+              An unexpected error occurred. Please try again.
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary/90"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/shared/friendly-id.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { useState } from "react";
+import { formatShortId } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/cn";
+
+interface FriendlyIdProps {
+  id: string;
+  className?: string;
+}
+
+export function FriendlyId({ id, className }: FriendlyIdProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(id);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={handleCopy}
+            className={cn(
+              "inline-flex items-center rounded px-1.5 py-0.5 font-mono text-xs",
+              "bg-background-secondary text-info/80",
+              "hover:bg-background-tertiary hover:text-info transition-colors cursor-pointer",
+              copied && "text-primary",
+              className
+            )}
+          >
+            {formatShortId(id)}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="font-mono text-xs">{copied ? <span className="text-primary font-semibold">Copied!</span> : id}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/components/shared/kbd.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/cn";
+
+export function Kbd({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <kbd className={cn(
+      "inline-flex h-5 min-w-[20px] items-center justify-center rounded",
+      "border border-[var(--kbd-border)] bg-background-secondary",
+      "px-1.5 font-mono text-xs leading-tight text-foreground-muted",
+      "shadow-kbd",
+      className
+    )}>
+      {children}
+    </kbd>
+  );
+}