@a5c-ai/babysitter-observer-dashboard 1.0.0

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

@@ -0,0 +1,51 @@
+import { cn } from "@/lib/cn";
+import type { TaskKind } from "@/types";
+import { Bot, Terminal, Puzzle, Hand, Clock, Cog } from "lucide-react";
+
+const kindConfig: Record<TaskKind, { icon: React.ReactNode; color: string; bgTint: string }> = {
+  agent: {
+    icon: <Bot className="h-3 w-3" />,
+    color: "text-primary",
+    bgTint: "bg-primary-muted",
+  },
+  node: {
+    icon: <Cog className="h-3 w-3" />,
+    color: "text-warning",
+    bgTint: "bg-warning-muted",
+  },
+  shell: {
+    icon: <Terminal className="h-3 w-3" />,
+    color: "text-foreground-secondary",
+    bgTint: "bg-background-secondary",
+  },
+  skill: {
+    icon: <Puzzle className="h-3 w-3" />,
+    color: "text-info",
+    bgTint: "bg-info-muted",
+  },
+  breakpoint: {
+    icon: <Hand className="h-3 w-3" />,
+    color: "text-warning",
+    bgTint: "bg-warning-muted",
+  },
+  sleep: {
+    icon: <Clock className="h-3 w-3" />,
+    color: "text-foreground-muted",
+    bgTint: "bg-background-secondary",
+  },
+};
+
+export function KindBadge({ kind, className }: { kind: TaskKind; className?: string }) {
+  const config = kindConfig[kind] || kindConfig.agent;
+  return (
+    <span className={cn(
+      "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs leading-tight font-medium uppercase tracking-wider",
+      config.bgTint,
+      config.color,
+      className
+    )}>
+      {config.icon}
+      {kind === "breakpoint" ? "approval" : kind}
+    </span>
+  );
+}

package/src/components/shared/metrics-row.tsx

@@ -0,0 +1,106 @@
+import { Clock, CheckCircle2, Percent, RefreshCw, Loader2, Pause } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { formatDuration } from "@/lib/utils";
+import type { Run } from "@/types";
+
+interface MetricsRowProps {
+  run: Run;
+}
+
+interface MetricCardProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  valueColor?: string;
+  testId?: string;
+}
+
+function MetricCard({ icon, label, value, valueColor, testId }: MetricCardProps) {
+  return (
+    <div data-testid={testId} className="bg-background-secondary/60 rounded-lg px-4 py-2.5 flex items-center gap-3">
+      <div className="text-foreground-muted">{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs leading-tight text-foreground-muted uppercase tracking-wider font-medium">{label}</span>
+        <span className={cn("text-lg font-semibold tabular-nums", valueColor || "text-foreground")}>{value}</span>
+      </div>
+    </div>
+  );
+}
+
+export function MetricsRow({ run }: MetricsRowProps) {
+  const isTerminal = run.status === "completed" || run.status === "failed";
+  const isRunning = run.status === "pending";
+  const isWaiting = run.status === "waiting";
+
+  const successRate =
+    run.totalTasks > 0
+      ? Math.round((run.completedTasks / run.totalTasks) * 100)
+      : 0;
+
+  // Count unique iterations from invocationKeys
+  const iterationKeys = new Set(run.tasks.map((t) => t.invocationKey));
+  const iterationCount = iterationKeys.size;
+
+  // Semantic color for success rate (neon palette)
+  const successRateColor = successRate === 100
+    ? "text-success"
+    : successRate >= 80
+    ? "text-foreground"
+    : successRate >= 50
+    ? "text-warning"
+    : "text-error";
+
+  // Duration display and color
+  const durationValue = isTerminal ? formatDuration(run.duration) : formatDuration(run.duration) || "...";
+  const durationColor = isRunning ? "text-info" : isWaiting ? "text-warning" : undefined;
+
+  // Status-specific icon for duration
+  const durationIcon = isRunning
+    ? <Loader2 className="h-4 w-4 animate-spin-smooth text-info drop-shadow-[var(--drop-glow-cyan)]" />
+    : isWaiting
+    ? <Pause className="h-4 w-4 text-warning" />
+    : <Clock className="h-4 w-4" />;
+
+  return (
+    <div data-testid="metrics-row" className={cn(
+      "flex items-center divide-x divide-primary/10 px-4 py-3 border-b border-border bg-background",
+      (isRunning || isWaiting) && "opacity-90"
+    )}>
+      <div className="flex items-center pr-3">
+        <MetricCard
+          icon={durationIcon}
+          label="Total Duration"
+          value={durationValue}
+          valueColor={durationColor}
+          testId="metric-total-duration"
+        />
+      </div>
+      <div className="flex items-center px-3">
+        <MetricCard
+          icon={<CheckCircle2 className="h-4 w-4" />}
+          label="Tasks"
+          value={`${run.completedTasks}/${run.totalTasks}`}
+          valueColor="text-success"
+          testId="metric-tasks"
+        />
+      </div>
+      <div className="flex items-center px-3">
+        <MetricCard
+          icon={<Percent className="h-4 w-4" />}
+          label="Success Rate"
+          value={`${successRate}%`}
+          valueColor={successRateColor}
+          testId="metric-success-rate"
+        />
+      </div>
+      <div className="flex items-center pl-3">
+        <MetricCard
+          icon={<RefreshCw className="h-4 w-4" />}
+          label="Iterations"
+          value={String(iterationCount)}
+          testId="metric-iterations"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/shared/outcome-banner.tsx

@@ -0,0 +1,56 @@
+import { CheckCircle2, XCircle } from "lucide-react";
+import { formatDuration } from "@/lib/utils";
+import type { Run } from "@/types";
+
+interface OutcomeBannerProps {
+  run: Run;
+}
+
+export function OutcomeBanner({ run }: OutcomeBannerProps) {
+  if (run.status === "completed") {
+    return (
+      <div data-testid="outcome-banner" data-status="completed" className="bg-success-muted border-b-2 border-success/30 px-5 py-4 shadow-glow-success">
+        <div className="flex items-center gap-3 text-success">
+          <CheckCircle2 className="h-5 w-5 shrink-0 drop-shadow-[var(--drop-glow-success)]" />
+          <span className="text-base font-medium">
+            Completed in {formatDuration(run.duration)}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (run.status === "failed") {
+    const failedTask = run.tasks.find((t) => t.status === "error");
+
+    // Determine step name: prefer task-level label, then run-level failedStep, then "process error" for run-level failures
+    const stepName = failedTask?.label || run.failedStep || (run.failureMessage ? "process error" : "unknown step");
+
+    // Determine error message: prefer task-level error, then run-level failure message from RUN_FAILED event
+    const rawErrorMessage = failedTask?.error?.message || run.failureMessage || "An error occurred";
+
+    // Format the error message — if it looks like JSON, try to extract the most relevant part
+    let errorMessage = rawErrorMessage;
+    if (rawErrorMessage.startsWith("{") || rawErrorMessage.startsWith("[")) {
+      try {
+        const parsed = JSON.parse(rawErrorMessage);
+        errorMessage = parsed.message || parsed.error || parsed.reason || rawErrorMessage;
+      } catch {
+        // Not valid JSON, use as-is
+      }
+    }
+
+    return (
+      <div data-testid="outcome-banner" data-status="failed" className="bg-error-muted border-b-2 border-error/30 px-5 py-4 shadow-glow-error">
+        <div className="flex items-center gap-3 text-error">
+          <XCircle className="h-5 w-5 shrink-0 drop-shadow-[var(--drop-glow-error)]" />
+          <span className="text-base font-medium">
+            Failed at step: {stepName} &mdash; {errorMessage}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/components/shared/progress-bar.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/cn";
+
+type ProgressVariant = "default" | "success" | "error" | "warning";
+
+const variantStyles: Record<ProgressVariant, string> = {
+  default: "bg-primary",
+  success: "bg-success",
+  error: "bg-error",
+  warning: "bg-warning",
+};
+
+const variantGlow: Record<ProgressVariant, string> = {
+  default: "shadow-progress-glow-primary",
+  success: "shadow-progress-glow-success",
+  error: "shadow-progress-glow-error",
+  warning: "shadow-progress-glow-warning",
+};
+
+interface ProgressBarProps {
+  value: number; // 0-100
+  variant?: ProgressVariant;
+  glow?: boolean;
+  className?: string;
+}
+
+export function ProgressBar({ value, variant = "default", glow = false, className }: ProgressBarProps) {
+  const clamped = Math.min(100, Math.max(0, value));
+  const isComplete = clamped === 100;
+  return (
+    <div className={cn("h-2 w-full overflow-hidden rounded-full bg-background-muted", className)}>
+      <div
+        className={cn(
+          "h-full transition-all duration-500 ease-out",
+          variantStyles[variant],
+          glow && variantGlow[variant],
+          isComplete ? "rounded-full" : "rounded-l-full"
+        )}
+        style={{ width: `${clamped}%` }}
+      />
+    </div>
+  );
+}

package/src/components/shared/session-pill.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/cn";
+import { formatShortId } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface SessionPillProps {
+  sessionId?: string;
+  active?: boolean;
+  className?: string;
+}
+
+export function SessionPill({ sessionId, active = false, className }: SessionPillProps) {
+  const [copied, setCopied] = useState(false);
+
+  if (!sessionId) return null;
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    navigator.clipboard.writeText(sessionId);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className={cn(
+              "relative inline-flex items-center gap-1.5 rounded-full bg-background-secondary px-2.5 py-0.5 text-xs font-mono text-foreground-muted cursor-pointer transition-all hover:bg-background-tertiary select-none",
+              active && "shadow-neon-glow-cyan-sm",
+              className
+            )}
+            onClick={handleCopy}
+          >
+            <span
+              className={cn(
+                "h-1.5 w-1.5 rounded-full",
+                active ? "bg-secondary shadow-[0_0_6px_var(--secondary)] animate-pulse-dot" : "bg-foreground-muted/40"
+              )}
+            />
+            {formatShortId(sessionId, 4)}
+            {copied && (
+              <span className="absolute -top-7 left-1/2 -translate-x-1/2 rounded-md bg-primary px-2 py-0.5 text-xs leading-tight font-sans font-medium text-primary-foreground whitespace-nowrap animate-slide-in-right">
+                Copied!
+              </span>
+            )}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="font-mono text-xs">
+            {copied ? "Copied!" : `Session: ${sessionId}`}
+          </p>
+          {!copied && (
+            <p className="text-foreground-muted text-xs leading-tight mt-0.5">Click to copy</p>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}