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

package/src/components/pipeline/parallel-group.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { memo } from "react";
+import { cn } from "@/lib/cn";
+import { GitBranch } from "lucide-react";
+import type { ReactNode } from "react";
+
+interface ParallelGroupProps {
+  children: ReactNode;
+  count: number;
+  className?: string;
+}
+
+/**
+ * Visual wrapper that groups tasks detected as running in parallel.
+ * Shows a dashed border container with a "parallel" label and renders
+ * the grouped StepCards inside.
+ */
+export const ParallelGroup = memo(function ParallelGroup({ children, count, className }: ParallelGroupProps) {
+  return (
+    <div
+      className={cn(
+        "relative rounded-lg border border-dashed border-secondary/20 bg-secondary/[0.03] p-3 pt-7",
+        className
+      )}
+    >
+      {/* Label */}
+      <div className="absolute top-1.5 left-2.5 flex items-center gap-1 text-xs leading-tight font-medium text-info uppercase tracking-wider select-none">
+        <GitBranch className="h-3 w-3 text-info" />
+        <span>parallel</span>
+        <span className="text-foreground-muted">&middot; {count} tasks</span>
+      </div>
+
+      {/* Grouped task cards */}
+      <div className="flex flex-col gap-2">
+        {children}
+      </div>
+    </div>
+  );
+});

package/src/components/pipeline/pipeline-view.tsx

@@ -0,0 +1,197 @@
+"use client";
+import { useMemo, useState, memo } from "react";
+import { StepCard } from "./step-card";
+import { ParallelGroup } from "./parallel-group";
+import { ProgressBar } from "@/components/shared/progress-bar";
+import { StatusBadge } from "@/components/shared/status-badge";
+import { SessionPill } from "@/components/shared/session-pill";
+import { TruncatedId } from "@/components/shared/truncated-id";
+import { formatDuration, friendlyProcessName } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { Run, TaskEffect } from "@/types";
+import { ChevronRight, Clock, Layers, ChevronDown } from "lucide-react";
+import Link from "next/link";
+
+/** Threshold in ms -- tasks requested within this window are considered parallel */
+const PARALLEL_THRESHOLD_MS = 100;
+
+/**
+ * A pipeline entry is either a single task or a group of tasks
+ * that were requested in parallel.
+ */
+type PipelineEntry =
+  | { type: "single"; task: TaskEffect }
+  | { type: "parallel"; tasks: TaskEffect[] };
+
+/**
+ * Detect parallel task groups.
+ *
+ * Two tasks are considered parallel when they share the same stepId prefix
+ * (the portion before the first `.`) OR their requestedAt timestamps are
+ * within PARALLEL_THRESHOLD_MS of each other.
+ *
+ * The algorithm walks the task list (sorted by requestedAt) and greedily
+ * merges adjacent tasks that satisfy either condition into a group.
+ */
+function groupParallelTasks(tasks: TaskEffect[]): PipelineEntry[] {
+  if (tasks.length === 0) return [];
+
+  const sorted = [...tasks].sort(
+    (a, b) => new Date(a.requestedAt).getTime() - new Date(b.requestedAt).getTime()
+  );
+
+  const entries: PipelineEntry[] = [];
+  let currentGroup: TaskEffect[] = [sorted[0]];
+
+  for (let i = 1; i < sorted.length; i++) {
+    const prev = currentGroup[currentGroup.length - 1];
+    const curr = sorted[i];
+
+    const prevTime = new Date(prev.requestedAt).getTime();
+    const currTime = new Date(curr.requestedAt).getTime();
+    const timeDelta = Math.abs(currTime - prevTime);
+
+    const prevStepPrefix = prev.stepId.split(".")[0];
+    const currStepPrefix = curr.stepId.split(".")[0];
+    const sameStepPrefix = prevStepPrefix === currStepPrefix;
+
+    if (sameStepPrefix || timeDelta <= PARALLEL_THRESHOLD_MS) {
+      currentGroup.push(curr);
+    } else {
+      // Flush the accumulated group
+      if (currentGroup.length === 1) {
+        entries.push({ type: "single", task: currentGroup[0] });
+      } else {
+        entries.push({ type: "parallel", tasks: currentGroup });
+      }
+      currentGroup = [curr];
+    }
+  }
+
+  // Flush remaining group
+  if (currentGroup.length === 1) {
+    entries.push({ type: "single", task: currentGroup[0] });
+  } else {
+    entries.push({ type: "parallel", tasks: currentGroup });
+  }
+
+  return entries;
+}
+
+interface PipelineViewProps {
+  run: Run;
+  selectedEffectId: string | null;
+  onSelectEffect: (effectId: string) => void;
+  runStatus?: string;
+}
+
+const INITIAL_TASK_LIMIT = 20;
+
+export const PipelineView = memo(function PipelineView({ run, selectedEffectId, onSelectEffect, runStatus }: PipelineViewProps) {
+  const effectiveStatus = runStatus ?? run.status;
+  const isReviewMode = effectiveStatus === "completed" || effectiveStatus === "failed";
+  const isRunning = effectiveStatus === "requested" || effectiveStatus === "waiting";
+  const progress = run.totalTasks > 0 ? Math.round((run.completedTasks / run.totalTasks) * 100) : 0;
+  const [showAllTasks, setShowAllTasks] = useState(false);
+
+  const pipelineEntries = useMemo(() => groupParallelTasks(run.tasks), [run.tasks]);
+  const hasMore = pipelineEntries.length > INITIAL_TASK_LIMIT;
+  const visibleEntries = showAllTasks || !hasMore ? pipelineEntries : pipelineEntries.slice(0, INITIAL_TASK_LIMIT);
+
+  return (
+    <div data-testid="pipeline-view" className="flex flex-col h-full">
+      {/* Header with breadcrumb — sticky so it's always visible */}
+      <div className="shrink-0 sticky top-0 z-20 border-b border-border p-4 pb-3 bg-card/95 backdrop-blur-sm">
+        {/* Breadcrumb navigation — prominent for easy back-navigation */}
+        <nav data-testid="pipeline-breadcrumb" className="flex items-center gap-1.5 mb-2 text-sm">
+          <Link href="/" className="text-foreground-muted hover:text-primary transition-colors font-semibold">
+            Projects
+          </Link>
+          <ChevronRight className="h-3.5 w-3.5 text-foreground-muted/50" />
+          <span className="text-foreground-secondary font-semibold">
+            {run.projectName || friendlyProcessName(run.processId)}
+          </span>
+          <ChevronRight className="h-3.5 w-3.5 text-foreground-muted/50" />
+          <TruncatedId id={run.runId} chars={4} className="text-foreground font-medium" />
+          <StatusBadge status={run.status} className="ml-1" />
+        </nav>
+        <div className="flex items-center gap-4 text-xs text-foreground-muted mb-3">
+          <SessionPill sessionId={run.sessionId} active={run.status === "waiting"} />
+          <span className="inline-flex items-center gap-1">
+            <Layers className="h-3 w-3" />
+            {run.completedTasks}/{run.totalTasks} tasks
+          </span>
+          <span className="inline-flex items-center gap-1">
+            <Clock className="h-3 w-3" />
+            {formatDuration(run.duration)}
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex-1">
+            <ProgressBar value={progress} glow={isRunning} />
+          </div>
+          <span className="text-xs leading-tight text-foreground-muted tabular-nums shrink-0">{progress}%</span>
+        </div>
+      </div>
+
+      {/* Step list */}
+      <ScrollArea className="flex-1 relative">
+        {/* Subtle top gradient for depth — brand magenta/cyan */}
+        <div className="sticky top-0 z-10 h-3 bg-gradient-to-b from-primary/[0.06] via-secondary/[0.03] to-transparent pointer-events-none" />
+        <div className="flex flex-col gap-2 px-4 pb-4">
+          {(() => {
+            let stepCounter = 0;
+            return visibleEntries.map((entry) => {
+              if (entry.type === "single") {
+                stepCounter++;
+                return (
+                  <StepCard
+                    key={entry.task.effectId}
+                    task={entry.task}
+                    runId={run.runId}
+                    onSelect={onSelectEffect}
+                    isSelected={selectedEffectId === entry.task.effectId}
+                    defaultExpanded={isReviewMode}
+                    stepNumber={stepCounter}
+                  />
+                );
+              }
+
+              // Parallel group — all share the same step number
+              stepCounter++;
+              const groupKey = entry.tasks.map((t) => t.effectId).join("|");
+              return (
+                <ParallelGroup key={groupKey} count={entry.tasks.length}>
+                  {entry.tasks.map((task) => (
+                    <StepCard
+                      key={task.effectId}
+                      task={task}
+                      runId={run.runId}
+                      onSelect={onSelectEffect}
+                      isSelected={selectedEffectId === task.effectId}
+                      defaultExpanded={isReviewMode}
+                      stepNumber={stepCounter}
+                    />
+                  ))}
+                </ParallelGroup>
+              );
+            });
+          })()}
+          {hasMore && !showAllTasks && (
+            <button
+              data-testid="show-all-tasks-btn"
+              onClick={() => setShowAllTasks(true)}
+              className="w-full flex items-center justify-center gap-1.5 rounded-md border border-border bg-background-secondary/50 py-2 text-xs text-foreground-muted hover:text-foreground hover:bg-background-secondary transition-colors"
+            >
+              <ChevronDown className="h-3.5 w-3.5" />
+              Show all {pipelineEntries.length} tasks
+            </button>
+          )}
+          {run.tasks.length === 0 && (
+            <div className="text-sm text-foreground-muted text-center py-8">No tasks yet</div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+});

package/src/components/pipeline/step-card.tsx

@@ -0,0 +1,166 @@
+"use client";
+import { useState, useEffect, memo } from "react";
+import { cn } from "@/lib/cn";
+import { StatusBadge } from "@/components/shared/status-badge";
+import { KindBadge } from "@/components/shared/kind-badge";
+import { formatDuration } from "@/lib/utils";
+import { TruncatedId } from "@/components/shared/truncated-id";
+import type { TaskEffect } from "@/types";
+import { ChevronDown, Clock, Hand } from "lucide-react";
+
+interface StepCardProps {
+  task: TaskEffect;
+  runId: string;
+  onSelect: (effectId: string) => void;
+  isSelected: boolean;
+  defaultExpanded?: boolean;
+  /** 1-based step number for display */
+  stepNumber?: number;
+}
+
+export const StepCard = memo(function StepCard({ task, runId: _runId, onSelect, isSelected, defaultExpanded = false, stepNumber }: StepCardProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isRunning = task.status === "requested";
+  const isBreakpointWaiting = task.kind === "breakpoint" && task.status === "requested";
+  const borderColor = isBreakpointWaiting ? "border-l-warning shadow-step-inset-warning" :
+                      task.status === "resolved" ? "border-l-success" :
+                      task.status === "error" ? "border-l-error" :
+                      isRunning ? "border-l-info shadow-step-inset-cyan" : "border-l-pending/30";
+
+  // Live elapsed time counter for running tasks
+  const [elapsedMs, setElapsedMs] = useState<number>(0);
+
+  useEffect(() => {
+    if (!isRunning || !task.requestedAt) {
+      return;
+    }
+
+    // Calculate initial elapsed time
+    const calculateElapsed = () => {
+      const requestedTime = new Date(task.requestedAt).getTime();
+      const now = Date.now();
+      return now - requestedTime;
+    };
+
+    // Set initial value
+    setElapsedMs(calculateElapsed());
+
+    // Update every second
+    const interval = setInterval(() => {
+      setElapsedMs(calculateElapsed());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [isRunning, task.requestedAt]);
+
+  return (
+    <div
+      data-testid={`step-card-${task.effectId}`}
+      data-status={task.status}
+      data-selected={String(isSelected)}
+      className={cn(
+        "w-full text-left rounded-lg border border-card-border bg-card transition-all duration-150",
+        "hover:bg-[var(--card-hover)] border-l-[3px]",
+        borderColor,
+        isSelected && "border-l-primary bg-primary-muted shadow-step-selected",
+        isBreakpointWaiting && "animate-breakpoint-glow"
+      )}
+    >
+      <button
+        onClick={() => onSelect(task.effectId)}
+        className="w-full text-left p-3"
+      >
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            {isBreakpointWaiting ? (
+              <Hand className="h-3.5 w-3.5 text-warning animate-pulse-dot shrink-0 drop-shadow-[var(--drop-glow-warning)]" />
+            ) : isRunning ? (
+              <div className="h-2 w-2 rounded-full bg-info animate-pulse-dot shrink-0 shadow-step-running-dot" />
+            ) : null}
+            {stepNumber && (
+              <span className="flex-shrink-0 w-5 h-5 rounded-full bg-background-tertiary text-xs font-mono text-foreground-muted flex items-center justify-center">
+                {stepNumber}
+              </span>
+            )}
+            <span className="text-sm font-medium text-foreground truncate">{task.title}</span>
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <KindBadge kind={task.kind} />
+            <StatusBadge status={task.status} />
+          </div>
+        </div>
+        {isBreakpointWaiting ? (
+          <div className="flex items-center gap-1 mt-1.5 text-xs text-warning">
+            <Hand className="h-3 w-3 shrink-0 drop-shadow-[var(--drop-glow-warning-sm)]" />
+            <span className="font-medium">Your approval is needed</span>
+            <span className="font-mono text-warning animate-pulse">{formatDuration(elapsedMs)}</span>
+          </div>
+        ) : (task.duration || isRunning) ? (
+          <div className="flex items-center gap-1 mt-1.5 text-xs text-foreground-muted">
+            <Clock className="h-3 w-3 shrink-0" />
+            <span className="whitespace-nowrap">
+              {isRunning ? (
+                <span className="animate-pulse font-mono text-info/80">running {formatDuration(elapsedMs)}...</span>
+              ) : (
+                <span className="font-mono">{formatDuration(task.duration)}</span>
+              )}
+            </span>
+          </div>
+        ) : null}
+      </button>
+
+      {/* Expand/collapse toggle */}
+      <div className="flex items-center border-t border-card-border">
+        <button
+          onClick={(e) => { e.stopPropagation(); setExpanded((v) => !v); }}
+          className="flex items-center justify-center px-3 py-2 text-foreground-muted hover:text-primary hover:bg-primary-muted rounded-b-lg transition-colors w-full"
+          aria-label={expanded ? "Collapse details" : "Expand details"}
+        >
+          <ChevronDown className={cn("h-4 w-4 transition-transform duration-200", !expanded && "-rotate-90")} />
+        </button>
+      </div>
+
+      {/* Expanded detail */}
+      <div
+        className={cn(
+          "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
+          expanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="px-3 pb-3 text-xs text-foreground-muted space-y-1.5 border-t border-card-border">
+            <div className="flex items-center gap-2 pt-2">
+              <span className="text-foreground-secondary font-medium">Step:</span>
+              <TruncatedId id={task.stepId} chars={4} />
+            </div>
+            {task.duration != null && (
+              <div className="flex items-center gap-2">
+                <span className="text-foreground-secondary font-medium">
+                  {task.kind === "breakpoint" ? "Approval time:" : "Duration:"}
+                </span>
+                <span>{formatDuration(task.duration)}</span>
+              </div>
+            )}
+            {task.requestedAt && (
+              <div className="flex items-center gap-2">
+                <span className="text-foreground-secondary font-medium">Requested:</span>
+                <span>{new Date(task.requestedAt).toLocaleTimeString()}</span>
+              </div>
+            )}
+            {task.resolvedAt && (
+              <div className="flex items-center gap-2">
+                <span className="text-foreground-secondary font-medium">Resolved:</span>
+                <span>{new Date(task.resolvedAt).toLocaleTimeString()}</span>
+              </div>
+            )}
+            {task.error && (
+              <div className="mt-2 rounded bg-error-muted p-2 text-error">
+                <span className="font-medium">{task.error.name}:</span> {task.error.message}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/providers/event-stream-provider.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { createContext, useContext } from "react";
+import { useEventStream, StreamEvent } from "@/hooks/use-event-stream";
+
+interface EventStreamContextValue {
+  connected: boolean;
+  lastEvent: StreamEvent | null;
+  error: string | null;
+}
+
+const EventStreamContext = createContext<EventStreamContextValue | null>(null);
+
+export function EventStreamProvider({ children }: { children: React.ReactNode }) {
+  const { connected, lastEvent, error } = useEventStream();
+
+  return (
+    <EventStreamContext.Provider value={{ connected, lastEvent, error }}>
+      {children}
+    </EventStreamContext.Provider>
+  );
+}
+
+export function useEventStreamContext() {
+  const context = useContext(EventStreamContext);
+  if (!context) {
+    throw new Error("useEventStreamContext must be used within EventStreamProvider");
+  }
+  return context;
+}

package/src/components/providers.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { ThemeProvider } from "@/components/shared/theme-provider";
+import { NotificationProvider } from "@/components/notifications/notification-provider";
+import { EventStreamProvider } from "@/components/providers/event-stream-provider";
+import { ShortcutsHelp } from "@/components/shared/shortcuts-help";
+import { AppHeader } from "@/components/shared/app-header";
+import { AppFooter } from "@/components/shared/app-footer";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider>
+      <NotificationProvider>
+        <EventStreamProvider>
+          <div className="flex flex-col min-h-screen">
+            <AppHeader />
+            <main id="main-content" className="flex-1 flex flex-col">{children}</main>
+            <AppFooter />
+          </div>
+          <ShortcutsHelp />
+        </EventStreamProvider>
+      </NotificationProvider>
+    </ThemeProvider>
+  );
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { EmptyState } from '../empty-state';
+
+describe('EmptyState', () => {
+  it('renders without crashing', () => {
+    render(<EmptyState />);
+    expect(screen.getByText('No runs found')).toBeInTheDocument();
+  });
+
+  it('renders default title', () => {
+    render(<EmptyState />);
+    expect(screen.getByText('No runs found')).toBeInTheDocument();
+  });
+
+  it('renders default description', () => {
+    render(<EmptyState />);
+    expect(screen.getByText('Start a babysitter run to see it here.')).toBeInTheDocument();
+  });
+
+  it('renders custom title', () => {
+    render(<EmptyState title="Nothing here" />);
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+  });
+
+  it('renders custom description', () => {
+    render(<EmptyState description="Try adding some data." />);
+    expect(screen.getByText('Try adding some data.')).toBeInTheDocument();
+  });
+
+  it('renders the Inbox icon', () => {
+    const { container } = render(<EmptyState />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<EmptyState className="my-custom" />);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.className).toContain('my-custom');
+  });
+
+  it('renders custom title and description together', () => {
+    render(<EmptyState title="Empty" description="Custom desc" />);
+    expect(screen.getByText('Empty')).toBeInTheDocument();
+    expect(screen.getByText('Custom desc')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,47 @@
+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 { FriendlyId } from '../friendly-id';
+
+describe('FriendlyId', () => {
+  it('renders without crashing', () => {
+    render(<FriendlyId id="abc123def456" />);
+    // formatShortId("abc123def456") defaults to 4 chars => "...f456"
+    expect(screen.getByText('...f456')).toBeInTheDocument();
+  });
+
+  it('renders truncated ID using formatShortId', () => {
+    render(<FriendlyId id="my-long-test-id" />);
+    expect(screen.getByText('...t-id')).toBeInTheDocument();
+  });
+
+  it('renders as a button element', () => {
+    render(<FriendlyId id="test-id" />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('copies full ID to clipboard on click', async () => {
+    const user = userEvent.setup();
+    const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText');
+    render(<FriendlyId id="full-id-for-copy" />);
+    const btn = screen.getByRole('button');
+    await user.click(btn);
+    expect(writeTextSpy).toHaveBeenCalledWith('full-id-for-copy');
+  });
+
+  it('applies copied class after clicking', async () => {
+    const user = userEvent.setup();
+    render(<FriendlyId id="some-id" />);
+    const btn = screen.getByRole('button');
+    await user.click(btn);
+    // After copying, button gets 'text-primary' class to indicate copied state
+    expect(btn.className).toContain('text-primary');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<FriendlyId id="test" className="my-class" />);
+    const btn = container.querySelector('button');
+    expect(btn?.className).toContain('my-class');
+  });
+});

package/src/components/shared/__tests__/kbd.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { Kbd } from '../kbd';
+
+describe('Kbd', () => {
+  it('renders without crashing', () => {
+    render(<Kbd>K</Kbd>);
+    expect(screen.getByText('K')).toBeInTheDocument();
+  });
+
+  it('renders the children text', () => {
+    render(<Kbd>Enter</Kbd>);
+    expect(screen.getByText('Enter')).toBeInTheDocument();
+  });
+
+  it('renders as a <kbd> element', () => {
+    const { container } = render(<Kbd>A</Kbd>);
+    const kbd = container.querySelector('kbd');
+    expect(kbd).toBeInTheDocument();
+    expect(kbd?.textContent).toBe('A');
+  });
+
+  it('applies default styling classes', () => {
+    const { container } = render(<Kbd>X</Kbd>);
+    const kbd = container.querySelector('kbd') as HTMLElement;
+    expect(kbd.className).toContain('inline-flex');
+    expect(kbd.className).toContain('font-mono');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Kbd className="extra-class">M</Kbd>);
+    const kbd = container.querySelector('kbd') as HTMLElement;
+    expect(kbd.className).toContain('extra-class');
+  });
+
+  it('renders complex children', () => {
+    render(
+      <Kbd>
+        <span>Ctrl</span>
+      </Kbd>,
+    );
+    expect(screen.getByText('Ctrl')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { KindBadge } from '../kind-badge';
+
+describe('KindBadge', () => {
+  it('renders without crashing', () => {
+    render(<KindBadge kind="node" />);
+    expect(screen.getByText('node')).toBeInTheDocument();
+  });
+
+  it('renders "agent" kind with correct text', () => {
+    render(<KindBadge kind="agent" />);
+    expect(screen.getByText('agent')).toBeInTheDocument();
+  });
+
+  it('renders "node" kind with correct text', () => {
+    render(<KindBadge kind="node" />);
+    expect(screen.getByText('node')).toBeInTheDocument();
+  });
+
+  it('renders "shell" kind with correct text', () => {
+    render(<KindBadge kind="shell" />);
+    expect(screen.getByText('shell')).toBeInTheDocument();
+  });
+
+  it('renders "skill" kind with correct text', () => {
+    render(<KindBadge kind="skill" />);
+    expect(screen.getByText('skill')).toBeInTheDocument();
+  });
+
+  it('renders "breakpoint" kind with "approval" display text', () => {
+    render(<KindBadge kind="breakpoint" />);
+    expect(screen.getByText('approval')).toBeInTheDocument();
+  });
+
+  it('renders "sleep" kind with correct text', () => {
+    render(<KindBadge kind="sleep" />);
+    expect(screen.getByText('sleep')).toBeInTheDocument();
+  });
+
+  it('renders an SVG icon alongside the kind text', () => {
+    const { container } = render(<KindBadge kind="agent" />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('applies agent color class for agent kind', () => {
+    const { container } = render(<KindBadge kind="agent" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge.className).toContain('text-primary');
+  });
+
+  it('applies warning color class for node kind', () => {
+    const { container } = render(<KindBadge kind="node" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge.className).toContain('text-warning');
+  });
+
+  it('applies info color class for skill kind', () => {
+    const { container } = render(<KindBadge kind="skill" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge.className).toContain('text-info');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<KindBadge kind="agent" className="extra-cls" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge.className).toContain('extra-cls');
+  });
+});