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

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

@@ -0,0 +1,110 @@
+import { cn } from "@/lib/cn";
+import { Badge } from "@/components/ui/badge";
+import type { RunStatus, TaskStatus } from "@/types";
+import { CheckCircle2, XCircle, Clock, Loader2, Circle, Hand } from "lucide-react";
+
+const iconSize = "h-3.5 w-3.5";
+
+const statusConfig: Record<string, { variant: "success" | "error" | "warning" | "info" | "pending"; icon: React.ReactNode; label: string; extraClass?: string }> = {
+  completed: {
+    variant: "success",
+    icon: <CheckCircle2 className={cn(iconSize, "drop-shadow-[var(--drop-glow-success)]")} />,
+    label: "Completed",
+    extraClass: "ring-success/30 shadow-neon-glow-success-sm",
+  },
+  resolved: {
+    variant: "success",
+    icon: <CheckCircle2 className={cn(iconSize, "drop-shadow-[var(--drop-glow-success)]")} />,
+    label: "Done",
+    extraClass: "ring-success/30 shadow-neon-glow-success-sm",
+  },
+  ok: {
+    variant: "success",
+    icon: <CheckCircle2 className={cn(iconSize, "drop-shadow-[var(--drop-glow-success)]")} />,
+    label: "OK",
+    extraClass: "ring-success/30 shadow-neon-glow-success-sm",
+  },
+  failed: {
+    variant: "error",
+    icon: <XCircle className={cn(iconSize, "drop-shadow-[var(--drop-glow-error)]")} />,
+    label: "Failed",
+    extraClass: "ring-error/30 shadow-neon-glow-error-sm",
+  },
+  error: {
+    variant: "error",
+    icon: <XCircle className={cn(iconSize, "drop-shadow-[var(--drop-glow-error)]")} />,
+    label: "Error",
+    extraClass: "ring-error/30 shadow-neon-glow-error-sm",
+  },
+  waiting: {
+    variant: "warning",
+    icon: <Clock className={cn(iconSize, "drop-shadow-[var(--drop-glow-warning)]")} />,
+    label: "Waiting",
+    extraClass: "ring-warning/30 shadow-neon-glow-warning-sm",
+  },
+  waiting_breakpoint: {
+    variant: "warning",
+    icon: <Hand className={cn(iconSize, "animate-pulse drop-shadow-[var(--drop-glow-warning)]")} />,
+    label: "Approval Needed",
+    extraClass: "ring-warning/40 animate-breakpoint-glow",
+  },
+  waiting_task: {
+    variant: "info",
+    icon: <Loader2 className={cn(iconSize, "animate-spin drop-shadow-[var(--drop-glow-cyan)]")} />,
+    label: "Working",
+    extraClass: "ring-info/30 shadow-neon-glow-cyan-sm",
+  },
+  breakpoint_awaiting: {
+    variant: "warning",
+    icon: <Hand className={cn(iconSize, "animate-pulse drop-shadow-[var(--drop-glow-warning)]")} />,
+    label: "Needs Approval",
+    extraClass: "ring-warning/40 animate-breakpoint-glow",
+  },
+  requested: {
+    variant: "info",
+    icon: <Loader2 className={cn(iconSize, "animate-spin drop-shadow-[var(--drop-glow-cyan)]")} />,
+    label: "Running",
+    extraClass: "ring-info/30 shadow-neon-glow-cyan-sm",
+  },
+  pending: {
+    variant: "pending",
+    icon: <Circle className={iconSize} />,
+    label: "Pending",
+  },
+};
+
+interface StatusBadgeProps {
+  status: RunStatus | TaskStatus | string;
+  className?: string;
+  waitingKind?: 'breakpoint' | 'task';
+  isStale?: boolean;
+}
+
+export function StatusBadge({ status, className, waitingKind, isStale }: StatusBadgeProps) {
+  // Resolve config: if status is "waiting" and a waitingKind is provided, use the sub-variant
+  let config = statusConfig[status] || statusConfig.pending;
+  if (status === "waiting" && waitingKind) {
+    const subKey = `waiting_${waitingKind}`;
+    config = statusConfig[subKey] || config;
+  }
+
+  // Detect orphaned/interrupted runs: stale with no pending work remaining
+  const isInterrupted = isStale && (status === "pending" || (status === "waiting" && !waitingKind));
+
+  return (
+    <Badge
+      data-testid={`status-badge-${status}`}
+      variant={isStale ? "default" : config.variant}
+      className={cn(
+        "gap-1",
+        isStale
+          ? "opacity-60 text-zinc-500 ring-zinc-500/20 bg-zinc-500/10 shadow-none"
+          : config.extraClass,
+        className
+      )}
+    >
+      {config.icon}
+      {isInterrupted ? "Interrupted" : config.label}
+    </Badge>
+  );
+}

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

@@ -0,0 +1,46 @@
+"use client";
+import { createContext, useContext, useEffect, useState, useCallback } from "react";
+
+type Theme = "dark" | "light";
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggle: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: "dark",
+  toggle: () => {},
+});
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("dark");
+
+  // Read initial theme from DOM (set by inline script in layout)
+  useEffect(() => {
+    const stored = document.documentElement.getAttribute("data-theme") as Theme;
+    if (stored === "light" || stored === "dark") {
+      setTheme(stored);
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    setTheme((prev) => {
+      const next = prev === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      document.documentElement.className = next;
+      localStorage.setItem("observer-theme", next);
+      return next;
+    });
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggle }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

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

@@ -0,0 +1,51 @@
+'use client';
+import { useState } from 'react';
+import { formatShortId } from '@/lib/utils';
+import { cn } from '@/lib/cn';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface TruncatedIdProps {
+  id: string;
+  chars?: number;
+  className?: string;
+}
+
+export function TruncatedId({ id, chars = 4, className }: TruncatedIdProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    navigator.clipboard.writeText(id);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className={cn(
+              'inline-flex items-center justify-center rounded px-2 py-1 min-h-[44px] min-w-[44px] font-mono text-xs',
+              'bg-background-secondary text-info/80',
+              'hover:bg-background-tertiary hover:text-info',
+              'cursor-pointer transition-colors select-none',
+              copied && 'text-primary',
+              className
+            )}
+            onClick={handleCopy}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleCopy(e as unknown as React.MouseEvent); } }}
+          >
+            {formatShortId(id, chars)}
+          </span>
+        </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/ui/__tests__/accordion.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import userEvent from '@testing-library/user-event';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../accordion';
+
+describe('Accordion', () => {
+  function renderAccordion(defaultValue?: string) {
+    return render(
+      <Accordion type="single" collapsible defaultValue={defaultValue}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Section 2</AccordionTrigger>
+          <AccordionContent>Content 2</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+  }
+
+  it('renders without crashing', () => {
+    renderAccordion();
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+    expect(screen.getByText('Section 2')).toBeInTheDocument();
+  });
+
+  it('renders trigger buttons', () => {
+    renderAccordion();
+    const triggers = screen.getAllByRole('button');
+    expect(triggers.length).toBe(2);
+  });
+
+  it('shows content of a pre-opened item', () => {
+    renderAccordion('item-1');
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+  });
+
+  it('expands an item on click', async () => {
+    const user = userEvent.setup();
+    renderAccordion();
+
+    const trigger = screen.getByText('Section 1');
+    await user.click(trigger);
+
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+  });
+
+  it('collapses an expanded item on click (collapsible)', async () => {
+    const user = userEvent.setup();
+    renderAccordion('item-1');
+
+    const trigger = screen.getByText('Section 1');
+    await user.click(trigger);
+
+    // After collapsing, Content 1 should be hidden
+    const content = screen.queryByText('Content 1');
+    // The content might still be in DOM but hidden by data-state=closed
+    // Since Radix keeps it in the DOM with data-state, check the attribute
+    if (content) {
+      const parent = content.closest('[data-state]');
+      expect(parent?.getAttribute('data-state')).toBe('closed');
+    }
+  });
+
+  it('renders chevron icon in triggers', () => {
+    const { container } = renderAccordion();
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(2);
+  });
+});
+
+describe('Accordion with multiple type', () => {
+  it('allows multiple items open simultaneously', async () => {
+    const user = userEvent.setup();
+    render(
+      <Accordion type="multiple">
+        <AccordionItem value="a">
+          <AccordionTrigger>Item A</AccordionTrigger>
+          <AccordionContent>Content A</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>Item B</AccordionTrigger>
+          <AccordionContent>Content B</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    await user.click(screen.getByText('Item A'));
+    await user.click(screen.getByText('Item B'));
+
+    expect(screen.getByText('Content A')).toBeInTheDocument();
+    expect(screen.getByText('Content B')).toBeInTheDocument();
+  });
+});

package/src/components/ui/__tests__/badge.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { Badge } from '../badge';
+
+describe('Badge', () => {
+  it('renders without crashing', () => {
+    render(<Badge>Label</Badge>);
+    expect(screen.getByText('Label')).toBeInTheDocument();
+  });
+
+  it('renders children text', () => {
+    render(<Badge>Test Badge</Badge>);
+    expect(screen.getByText('Test Badge')).toBeInTheDocument();
+  });
+
+  it('renders as a <span> element', () => {
+    const { container } = render(<Badge>Test</Badge>);
+    const span = container.querySelector('span');
+    expect(span).toBeInTheDocument();
+  });
+
+  it('applies default variant classes', () => {
+    const { container } = render(<Badge>Default</Badge>);
+    const span = container.firstChild as HTMLElement;
+    expect(span.className).toContain('bg-muted');
+  });
+
+  it('applies success variant classes', () => {
+    const { container } = render(<Badge variant="success">Success</Badge>);
+    const span = container.firstChild as HTMLElement;
+    expect(span.className).toContain('text-success');
+  });
+
+  it('applies error variant classes', () => {
+    const { container } = render(<Badge variant="error">Error</Badge>);
+    const span = container.firstChild as HTMLElement;
+    expect(span.className).toContain('text-error');
+  });
+
+  it('applies warning variant classes', () => {
+    const { container } = render(<Badge variant="warning">Warning</Badge>);
+    const span = container.firstChild as HTMLElement;
+    expect(span.className).toContain('text-warning');
+  });
+
+  it('applies info variant classes', () => {
+    const { container } = render(<Badge variant="info">Info</Badge>);
+    const span = container.firstChild as HTMLElement;
+    expect(span.className).toContain('text-info');
+  });
+
+  it('applies pending variant classes', () => {
+    const { container } = render(<Badge variant="pending">Pending</Badge>);
+    const span = container.firstChild as HTMLElement;
+    expect(span.className).toContain('text-pending');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Badge className="custom-cls">C</Badge>);
+    const span = container.firstChild as HTMLElement;
+    expect(span.className).toContain('custom-cls');
+  });
+
+  it('passes through additional HTML attributes', () => {
+    render(<Badge data-testid="my-badge">X</Badge>);
+    expect(screen.getByTestId('my-badge')).toBeInTheDocument();
+  });
+});

package/src/components/ui/__tests__/button.test.tsx

@@ -0,0 +1,113 @@
+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 { Button } from '../button';
+
+describe('Button', () => {
+  it('renders without crashing', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('renders children text', () => {
+    render(<Button>Submit</Button>);
+    expect(screen.getByText('Submit')).toBeInTheDocument();
+  });
+
+  it('renders as a <button> element by default', () => {
+    render(<Button>Btn</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.tagName).toBe('BUTTON');
+  });
+
+  it('handles click events', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire click when disabled', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <Button onClick={handleClick} disabled>
+        Disabled
+      </Button>,
+    );
+    await user.click(screen.getByRole('button'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('applies disabled attribute', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('applies default variant classes', () => {
+    render(<Button>Default</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('bg-primary');
+  });
+
+  it('applies neon variant classes', () => {
+    render(<Button variant="neon">Neon</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('border-primary');
+  });
+
+  it('applies outline variant classes', () => {
+    render(<Button variant="outline">Outline</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('bg-transparent');
+  });
+
+  it('applies ghost variant classes', () => {
+    render(<Button variant="ghost">Ghost</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('hover:bg-muted');
+  });
+
+  it('applies destructive variant classes', () => {
+    render(<Button variant="destructive">Delete</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('bg-destructive');
+  });
+
+  it('applies sm size classes', () => {
+    render(<Button size="sm">Small</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('h-11');
+  });
+
+  it('applies lg size classes', () => {
+    render(<Button size="lg">Large</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('h-10');
+  });
+
+  it('applies icon size classes', () => {
+    render(<Button size="icon">I</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('w-11');
+  });
+
+  it('applies custom className', () => {
+    render(<Button className="extra">Cls</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('extra');
+  });
+
+  it('renders as child component when asChild is true', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>,
+    );
+    const link = screen.getByRole('link', { name: 'Link Button' });
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe('A');
+  });
+});

package/src/components/ui/__tests__/tabs.test.tsx

@@ -0,0 +1,75 @@
+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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../tabs';
+
+describe('Tabs', () => {
+  function renderTabs(defaultValue = 'tab1', onValueChange?: (v: string) => void) {
+    return render(
+      <Tabs defaultValue={defaultValue} onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+        <TabsContent value="tab3">Content 3</TabsContent>
+      </Tabs>,
+    );
+  }
+
+  it('renders without crashing', () => {
+    renderTabs();
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Tab 2')).toBeInTheDocument();
+    expect(screen.getByText('Tab 3')).toBeInTheDocument();
+  });
+
+  it('renders tab triggers as buttons', () => {
+    renderTabs();
+    const triggers = screen.getAllByRole('tab');
+    expect(triggers.length).toBe(3);
+  });
+
+  it('shows content of the default active tab', () => {
+    renderTabs('tab1');
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+  });
+
+  it('switches content when clicking a different tab', async () => {
+    const user = userEvent.setup();
+    renderTabs('tab1');
+
+    await user.click(screen.getByText('Tab 2'));
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('marks the active tab with data-state=active', () => {
+    renderTabs('tab1');
+    const tab1 = screen.getByText('Tab 1');
+    expect(tab1.getAttribute('data-state')).toBe('active');
+  });
+
+  it('marks inactive tabs with data-state=inactive', () => {
+    renderTabs('tab1');
+    const tab2 = screen.getByText('Tab 2');
+    expect(tab2.getAttribute('data-state')).toBe('inactive');
+  });
+
+  it('calls onValueChange when switching tabs', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderTabs('tab1', onChange);
+
+    await user.click(screen.getByText('Tab 2'));
+    expect(onChange).toHaveBeenCalledWith('tab2');
+  });
+
+  it('renders TabsList with styling classes', () => {
+    renderTabs();
+    const tablist = screen.getByRole('tablist');
+    expect(tablist.className).toContain('inline-flex');
+  });
+});

package/src/components/ui/__tests__/tooltip.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
+
+describe('Tooltip', () => {
+  it('renders the trigger element', () => {
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <button>Hover me</button>
+          </TooltipTrigger>
+          <TooltipContent>Tooltip text</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(screen.getByText('Hover me')).toBeInTheDocument();
+  });
+
+  it('renders trigger as child when asChild is set', () => {
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button>Trigger</button>
+          </TooltipTrigger>
+          <TooltipContent>Info</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(screen.getByRole('button', { name: 'Trigger' })).toBeInTheDocument();
+  });
+
+  it('shows tooltip content when open is true', () => {
+    render(
+      <TooltipProvider>
+        <Tooltip open={true}>
+          <TooltipTrigger>
+            <button>Btn</button>
+          </TooltipTrigger>
+          <TooltipContent>Visible tooltip</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    // Radix renders tooltip text twice (visible + accessible hidden span)
+    const matches = screen.getAllByText('Visible tooltip');
+    expect(matches.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('does not show tooltip content when open is false', () => {
+    render(
+      <TooltipProvider>
+        <Tooltip open={false}>
+          <TooltipTrigger>
+            <button>Btn</button>
+          </TooltipTrigger>
+          <TooltipContent>Hidden tooltip</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(screen.queryByText('Hidden tooltip')).not.toBeInTheDocument();
+  });
+
+  it('applies custom className to tooltip content', () => {
+    const { container } = render(
+      <TooltipProvider>
+        <Tooltip open={true}>
+          <TooltipTrigger>
+            <button>Btn</button>
+          </TooltipTrigger>
+          <TooltipContent className="my-tooltip">Tooltip content here</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    // Find the element with the custom class directly
+    const contentEl = container.querySelector('.my-tooltip');
+    expect(contentEl).toBeInTheDocument();
+    expect(contentEl?.textContent).toContain('Tooltip content here');
+  });
+
+  it('renders children inside TooltipProvider', () => {
+    render(
+      <TooltipProvider>
+        <span>Wrapped child</span>
+      </TooltipProvider>,
+    );
+    expect(screen.getByText('Wrapped child')).toBeInTheDocument();
+  });
+});