@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/notifications/__tests__/toast-stack.test.tsx

@@ -0,0 +1,217 @@
+import { render, screen, setupUser } from '@/test/test-utils';
+import { ToastStack } from '../toast-stack';
+import type { AppNotification } from '@/hooks/use-notifications';
+
+// Mock next/navigation
+const mockPush = vi.fn();
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+    replace: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+}));
+
+function makeNotification(overrides: Partial<AppNotification> = {}): AppNotification {
+  return {
+    id: overrides.id ?? 'toast-1',
+    title: overrides.title ?? 'Toast Title',
+    body: overrides.body ?? 'Toast body text',
+    type: overrides.type ?? 'info',
+    timestamp: overrides.timestamp ?? Date.now(),
+    href: overrides.href,
+    persistent: overrides.persistent,
+  };
+}
+
+describe('ToastStack', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // -----------------------------------------------------------------------
+  // Empty state
+  // -----------------------------------------------------------------------
+  it('renders nothing when notifications array is empty', () => {
+    const { container } = render(
+      <ToastStack notifications={[]} onDismiss={vi.fn()} />,
+    );
+
+    // The container div is rendered but no toast items inside
+    const toastItems = container.querySelectorAll('[class*="animate-slide-in-right"]');
+    expect(toastItems).toHaveLength(0);
+  });
+
+  // -----------------------------------------------------------------------
+  // Renders toasts
+  // -----------------------------------------------------------------------
+  it('renders toast for each notification', () => {
+    const notifications = [
+      makeNotification({ id: 't1', title: 'First Toast', body: 'Body 1' }),
+      makeNotification({ id: 't2', title: 'Second Toast', body: 'Body 2' }),
+    ];
+
+    render(<ToastStack notifications={notifications} onDismiss={vi.fn()} />);
+
+    expect(screen.getByText('First Toast')).toBeInTheDocument();
+    expect(screen.getByText('Body 1')).toBeInTheDocument();
+    expect(screen.getByText('Second Toast')).toBeInTheDocument();
+    expect(screen.getByText('Body 2')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Stacking -- multiple toasts rendered in order
+  // -----------------------------------------------------------------------
+  it('stacks multiple toasts', () => {
+    const notifications = [
+      makeNotification({ id: 't1', title: 'Alpha' }),
+      makeNotification({ id: 't2', title: 'Beta' }),
+      makeNotification({ id: 't3', title: 'Gamma' }),
+    ];
+
+    render(<ToastStack notifications={notifications} onDismiss={vi.fn()} />);
+
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+    expect(screen.getByText('Gamma')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Dismiss button
+  // -----------------------------------------------------------------------
+  it('calls onDismiss with the toast id when dismiss button is clicked', async () => {
+    const user = setupUser();
+    const onDismiss = vi.fn();
+    const notifications = [
+      makeNotification({ id: 'toast-42', title: 'Dismissable' }),
+    ];
+
+    render(<ToastStack notifications={notifications} onDismiss={onDismiss} />);
+
+    // The X button inside the toast
+    const xIcon = screen.getByTestId('icon-X');
+    const dismissButton = xIcon.closest('button')!;
+    await user.click(dismissButton);
+
+    expect(onDismiss).toHaveBeenCalledWith('toast-42');
+  });
+
+  it('dismiss does not trigger navigation', async () => {
+    const user = setupUser();
+    const onDismiss = vi.fn();
+    const notifications = [
+      makeNotification({ id: 't1', title: 'Has Link', href: '/runs/abc' }),
+    ];
+
+    render(<ToastStack notifications={notifications} onDismiss={onDismiss} />);
+
+    // Click the dismiss button (not the toast body)
+    const xIcon = screen.getByTestId('icon-X');
+    const dismissButton = xIcon.closest('button')!;
+    await user.click(dismissButton);
+
+    // Dismiss was called but navigation should NOT happen (stopPropagation)
+    expect(onDismiss).toHaveBeenCalledWith('t1');
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  // -----------------------------------------------------------------------
+  // Clicking toast with href navigates
+  // -----------------------------------------------------------------------
+  it('navigates and dismisses when a toast with href is clicked', async () => {
+    const user = setupUser();
+    const onDismiss = vi.fn();
+    const notifications = [
+      makeNotification({ id: 't1', title: 'Clickable', href: '/runs/xyz' }),
+    ];
+
+    render(<ToastStack notifications={notifications} onDismiss={onDismiss} />);
+
+    await user.click(screen.getByText('Clickable'));
+
+    expect(mockPush).toHaveBeenCalledWith('/runs/xyz');
+    expect(onDismiss).toHaveBeenCalledWith('t1');
+  });
+
+  it('does not navigate when a toast without href is clicked', async () => {
+    const user = setupUser();
+    const onDismiss = vi.fn();
+    const notifications = [
+      makeNotification({ id: 't1', title: 'No Link' }),
+    ];
+
+    render(<ToastStack notifications={notifications} onDismiss={onDismiss} />);
+
+    await user.click(screen.getByText('No Link'));
+
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  // -----------------------------------------------------------------------
+  // Notification type icons
+  // -----------------------------------------------------------------------
+  it('renders the correct icon for success type', () => {
+    const notifications = [makeNotification({ id: 't1', type: 'success' })];
+
+    render(<ToastStack notifications={notifications} onDismiss={vi.fn()} />);
+
+    expect(screen.getByTestId('icon-CheckCircle2')).toBeInTheDocument();
+  });
+
+  it('renders the correct icon for error type', () => {
+    const notifications = [makeNotification({ id: 't1', type: 'error' })];
+
+    render(<ToastStack notifications={notifications} onDismiss={vi.fn()} />);
+
+    expect(screen.getByTestId('icon-XCircle')).toBeInTheDocument();
+  });
+
+  it('renders the correct icon for warning type', () => {
+    const notifications = [makeNotification({ id: 't1', type: 'warning' })];
+
+    render(<ToastStack notifications={notifications} onDismiss={vi.fn()} />);
+
+    expect(screen.getByTestId('icon-AlertTriangle')).toBeInTheDocument();
+  });
+
+  it('renders the correct icon for info type', () => {
+    const notifications = [makeNotification({ id: 't1', type: 'info' })];
+
+    render(<ToastStack notifications={notifications} onDismiss={vi.fn()} />);
+
+    expect(screen.getByTestId('icon-Info')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Persistent (pinned) notification
+  // -----------------------------------------------------------------------
+  it('shows pin icon for persistent notifications', () => {
+    const persistentNotif = makeNotification({ id: 't-pin', persistent: true });
+    render(<ToastStack notifications={[persistentNotif]} onDismiss={vi.fn()} />);
+    expect(screen.getByTitle('Pinned — won\'t auto-dismiss')).toBeInTheDocument();
+  });
+
+  it('does not show pin icon for non-persistent notifications', () => {
+    const notif = makeNotification({ id: 't-nopin' });
+    render(<ToastStack notifications={[notif]} onDismiss={vi.fn()} />);
+    expect(screen.queryByTitle('Pinned — won\'t auto-dismiss')).not.toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Slide-in animation class
+  // -----------------------------------------------------------------------
+  it('applies the slide-in animation class to toasts', () => {
+    const notifications = [makeNotification({ id: 't1' })];
+
+    const { container } = render(
+      <ToastStack notifications={notifications} onDismiss={vi.fn()} />,
+    );
+
+    const toastEl = container.querySelector('[class*="animate-slide-in-right"]');
+    expect(toastEl).toBeInTheDocument();
+  });
+});

package/src/components/notifications/notification-panel.tsx

@@ -0,0 +1,124 @@
+"use client";
+import { useRouter } from "next/navigation";
+import * as Dialog from "@radix-ui/react-dialog";
+import { cn } from "@/lib/cn";
+import { X, CheckCircle2, XCircle, AlertTriangle, Info, Bell, Pin } from "lucide-react";
+import type { AppNotification } from "@/hooks/use-notifications";
+
+const iconMap: Record<AppNotification["type"], React.ReactNode> = {
+  success: <CheckCircle2 className="h-4 w-4 text-success drop-shadow-[var(--drop-glow-success)]" />,
+  error: <XCircle className="h-4 w-4 text-error drop-shadow-[var(--drop-glow-error)]" />,
+  warning: <AlertTriangle className="h-4 w-4 text-warning drop-shadow-[var(--drop-glow-warning)]" />,
+  info: <Info className="h-4 w-4 text-info drop-shadow-[var(--drop-glow-cyan)]" />,
+};
+
+const borderMap: Record<AppNotification["type"], string> = {
+  success: "border-l-success",
+  error: "border-l-error",
+  warning: "border-l-warning",
+  info: "border-l-info",
+};
+
+interface NotificationPanelProps {
+  open: boolean;
+  notifications: AppNotification[];
+  onDismiss: (id: string) => void;
+  onClose: () => void;
+}
+
+export function NotificationPanel({ open, notifications, onDismiss, onClose }: NotificationPanelProps) {
+  const router = useRouter();
+
+  const handleClick = (notif: AppNotification) => {
+    if (notif.href) {
+      router.push(notif.href);
+      onDismiss(notif.id);
+      onClose();
+    }
+  };
+
+  const formatTime = (timestamp: number) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+
+    if (seconds < 60) return "just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return new Date(timestamp).toLocaleString();
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose(); }}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm" />
+        <Dialog.Content
+          data-testid="notification-panel"
+          className="fixed right-4 top-4 z-50 rounded-lg border border-[var(--glass-border)] bg-[var(--glass-bg)] backdrop-blur-xl shadow-glass w-full max-w-md max-h-[80vh] flex flex-col"
+        >
+          <div className="flex items-center justify-between p-4 border-b border-[var(--glass-border-subtle)]">
+            <div className="flex items-center gap-2">
+              <Bell className="h-4 w-4 text-primary/60" />
+              <Dialog.Title className="text-sm font-medium text-foreground">Notifications</Dialog.Title>
+              {notifications.length > 0 && (
+                <span className="text-xs text-primary/70 font-mono">({notifications.length})</span>
+              )}
+            </div>
+            <Dialog.Close asChild>
+              <button
+                className="rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-primary transition-colors"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </Dialog.Close>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2">
+            {notifications.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-foreground-muted">
+                <Bell className="h-8 w-8 mb-2 opacity-50" />
+                <p className="text-sm">No notifications</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {notifications.map((notif) => (
+                  <div
+                    key={notif.id}
+                    data-testid={`notification-item-${notif.id}`}
+                    className={cn(
+                      "rounded-lg border border-[var(--glass-border-faint)] bg-[var(--glass-card-bg)] p-3 border-l-2",
+                      "transition-colors duration-150",
+                      notif.href && "cursor-pointer hover:bg-[var(--glass-border-faint)]",
+                      borderMap[notif.type]
+                    )}
+                    onClick={() => handleClick(notif)}
+                  >
+                    <div className="flex items-start gap-2">
+                      <div className="shrink-0 mt-0.5">{iconMap[notif.type]}</div>
+                      {notif.persistent && <span title="Pinned — won't auto-dismiss" className="shrink-0"><Pin className="h-3 w-3 text-primary/50" /></span>}
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-foreground">{notif.title}</p>
+                        <p className="text-xs text-foreground-muted mt-0.5">{notif.body}</p>
+                        <p className="text-xs text-foreground-muted mt-1 opacity-70">
+                          {formatTime(notif.timestamp)}
+                          {notif.persistent && <span className="text-primary/50 ml-1">· Pinned</span>}
+                        </p>
+                      </div>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); onDismiss(notif.id); }}
+                        className="shrink-0 rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-primary transition-colors"
+                      >
+                        <X className="h-3.5 w-3.5" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/src/components/notifications/notification-provider.tsx

@@ -0,0 +1,175 @@
+"use client";
+import { createContext, useContext, useEffect, useRef, type ReactNode } from "react";
+import {
+  useNotifications,
+  type AppNotification,
+} from "@/hooks/use-notifications";
+import { ToastStack } from "./toast-stack";
+import { usePolling } from "@/hooks/use-polling";
+import { formatShortId } from "@/lib/utils";
+import type { DigestResponse } from "@/types";
+
+interface NotificationContextValue {
+  notify: (
+    title: string,
+    body: string,
+    type?: AppNotification["type"],
+    options?: { href?: string; persistent?: boolean },
+  ) => void;
+  requestPermission: () => void;
+  permission: NotificationPermission;
+  notifications: AppNotification[];
+  dismiss: (id: string) => void;
+}
+
+const NotificationContext = createContext<NotificationContextValue>({
+  notify: () => {},
+  requestPermission: () => {},
+  permission: "default",
+  notifications: [],
+  dismiss: () => {},
+});
+
+export const useNotificationContext = () => useContext(NotificationContext);
+
+// Watermark per run: tracks the highest-seen state so notifications only fire once
+interface RunWatermark {
+  status: string;
+  completedTasks: number;
+  pendingBreakpoints: number;
+  notifiedCompleted: boolean;
+  notifiedFailed: boolean;
+  notifiedWaiting: boolean;
+}
+
+/** Duration after mount during which watermarks are seeded silently (no notifications). */
+export const STABILIZATION_WINDOW_MS = 10_000; // 10 seconds
+
+export function NotificationProvider({ children }: { children: ReactNode }) {
+  const { notifications, notify, dismiss, requestPermission, permission } =
+    useNotifications();
+  const { data: digest } = usePolling<DigestResponse>("/api/digest", {
+    interval: 3000,
+  });
+  // Permanent watermark: tracks highest-seen state per run across all polls
+  const watermarkRef = useRef<Map<string, RunWatermark>>(new Map());
+  const mountedAtRef = useRef(Date.now());
+
+  useEffect(() => {
+    if (!digest) return;
+
+    const watermarks = watermarkRef.current;
+    const isStabilizing =
+      Date.now() - mountedAtRef.current < STABILIZATION_WINDOW_MS;
+
+    // During the stabilization window, seed watermarks for every run without
+    // firing any notifications. This replaces the old count-based INIT_SKIP
+    // approach which could miss runs when there are many active runs and the
+    // first N polls didn't cover them all.
+    if (isStabilizing) {
+      for (const run of digest.runs) {
+        watermarks.set(run.runId, {
+          status: run.status,
+          completedTasks: run.completedTasks,
+          pendingBreakpoints: run.pendingBreakpoints || 0,
+          notifiedCompleted: run.status === "completed",
+          notifiedFailed: run.status === "failed",
+          notifiedWaiting: run.status === "waiting",
+        });
+      }
+      return;
+    }
+
+    for (const run of digest.runs) {
+      const wm = watermarks.get(run.runId);
+
+      if (!wm) {
+        // Genuinely new run — seed watermark and notify
+        watermarks.set(run.runId, {
+          status: run.status,
+          completedTasks: run.completedTasks,
+          pendingBreakpoints: run.pendingBreakpoints || 0,
+          notifiedCompleted: run.status === "completed",
+          notifiedFailed: run.status === "failed",
+          notifiedWaiting: run.status === "waiting",
+        });
+        notify(
+          "New Run Started",
+          `${formatShortId(run.runId, 4)} started`,
+          "info",
+          { href: `/runs/${run.runId}` },
+        );
+        continue;
+      }
+
+      // Run completed — only notify once ever
+      if (run.status === "completed" && !wm.notifiedCompleted) {
+        wm.notifiedCompleted = true;
+        notify(
+          "Run Completed",
+          `${formatShortId(run.runId, 4)} finished successfully`,
+          "success",
+          { href: `/runs/${run.runId}` },
+        );
+      }
+
+      // Run failed — only notify once ever
+      if (run.status === "failed" && !wm.notifiedFailed) {
+        wm.notifiedFailed = true;
+        notify(
+          "Run Failed",
+          `${formatShortId(run.runId, 4)} failed`,
+          "error",
+          { href: `/runs/${run.runId}` },
+        );
+      }
+
+      // Track completed-task watermark (no per-task notification — the
+      // terminal "Run Completed" notification already covers this, and
+      // per-task notifications flood the panel when many runs are active).
+      if (run.completedTasks > wm.completedTasks) {
+        wm.completedTasks = run.completedTasks;
+      }
+
+      // Run transitioned to waiting (breakpoint) — only notify once per waiting episode
+      // These notifications are persistent (no auto-dismiss) so users cannot miss them
+      if (run.status === "waiting" && !wm.notifiedWaiting) {
+        wm.notifiedWaiting = true;
+        const breakpointTitle = run.breakpointQuestion || "Review required";
+        notify(
+          `Run ${formatShortId(run.runId, 4)} needs attention`,
+          breakpointTitle,
+          "warning",
+          { href: `/runs/${run.runId}`, persistent: true },
+        );
+      }
+
+      // Reset waiting flag when run leaves waiting state (allows re-notification on next breakpoint)
+      if (run.status !== "waiting" && wm.notifiedWaiting) {
+        wm.notifiedWaiting = false;
+      }
+
+      // Breakpoint resolved — pending count dropped to zero
+      if (wm.pendingBreakpoints > 0 && (run.pendingBreakpoints === 0 || run.pendingBreakpoints === undefined)) {
+        notify(
+          "Breakpoint Resolved",
+          `Breakpoint in ${formatShortId(run.runId, 4)} was approved`,
+          "success",
+          { href: `/runs/${run.runId}` },
+        );
+      }
+      wm.pendingBreakpoints = run.pendingBreakpoints || 0;
+
+      wm.status = run.status;
+    }
+  }, [digest, notify]);
+
+  return (
+    <NotificationContext.Provider
+      value={{ notify, requestPermission, permission, notifications, dismiss }}
+    >
+      {children}
+      <ToastStack notifications={notifications} onDismiss={dismiss} />
+    </NotificationContext.Provider>
+  );
+}

package/src/components/notifications/toast-stack.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { cn } from "@/lib/cn";
+import { X, CheckCircle2, XCircle, AlertTriangle, Info, Pin } from "lucide-react";
+import type { AppNotification } from "@/hooks/use-notifications";
+
+const iconMap: Record<AppNotification["type"], React.ReactNode> = {
+  success: <CheckCircle2 className="h-4 w-4 text-success drop-shadow-[var(--drop-glow-success)]" />,
+  error: <XCircle className="h-4 w-4 text-error drop-shadow-[var(--drop-glow-error)]" />,
+  warning: <AlertTriangle className="h-4 w-4 text-warning drop-shadow-[var(--drop-glow-warning)]" />,
+  info: <Info className="h-4 w-4 text-info drop-shadow-[var(--drop-glow-cyan)]" />,
+};
+
+const borderMap: Record<AppNotification["type"], string> = {
+  success: "border-l-success shadow-toast-glow-success",
+  error: "border-l-error shadow-toast-glow-error",
+  warning: "border-l-warning shadow-toast-glow-warning",
+  info: "border-l-info shadow-toast-glow-cyan",
+};
+
+interface ToastStackProps {
+  notifications: AppNotification[];
+  onDismiss: (id: string) => void;
+}
+
+export function ToastStack({ notifications, onDismiss }: ToastStackProps) {
+  const router = useRouter();
+
+  const handleClick = (notif: AppNotification) => {
+    if (notif.href) {
+      router.push(notif.href);
+      onDismiss(notif.id);
+    }
+  };
+
+  return (
+    <div role="log" aria-live="assertive" aria-label="Notifications" data-testid="toast-stack" className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
+      {notifications.map((notif) => (
+        <div
+          key={notif.id}
+          data-testid={`toast-item-${notif.id}`}
+          className={cn(
+            "rounded-lg border border-[var(--glass-border-subtle)] bg-[var(--glass-bg-heavy)] backdrop-blur-sm p-3 shadow-lg border-l-2",
+            "animate-slide-in-right",
+            notif.href && "cursor-pointer hover:bg-card-hover",
+            notif.persistent && "ring-1 ring-primary/20",
+            borderMap[notif.type]
+          )}
+          onClick={() => handleClick(notif)}
+        >
+          <div className="flex items-start gap-2">
+            <div className="shrink-0 mt-0.5">{iconMap[notif.type]}</div>
+            {notif.persistent && <span title="Pinned — won't auto-dismiss" className="shrink-0"><Pin className="h-3 w-3 text-primary/50" /></span>}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1">
+                <p className="text-sm font-medium text-foreground">{notif.title}</p>
+                {notif.persistent && (
+                  <Pin className="h-3 w-3 text-warning shrink-0" aria-label="Persistent notification" />
+                )}
+              </div>
+              <p className="text-xs text-foreground-muted mt-0.5 truncate">{notif.body}</p>
+            </div>
+            <button
+              onClick={(e) => { e.stopPropagation(); onDismiss(notif.id); }}
+              className="shrink-0 rounded-md p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-foreground-muted hover:text-primary transition-colors"
+              aria-label={`Dismiss ${notif.title}`}
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { ParallelGroup } from '../parallel-group';
+
+describe('ParallelGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <ParallelGroup count={3}>
+        <div>child</div>
+      </ParallelGroup>,
+    );
+    expect(screen.getByText('parallel')).toBeInTheDocument();
+  });
+
+  it('displays the count label with correct task count', () => {
+    render(
+      <ParallelGroup count={5}>
+        <div>child</div>
+      </ParallelGroup>,
+    );
+    // The label renders as "· 5 tasks" via &middot; entity
+    expect(screen.getByText(/5 tasks/)).toBeInTheDocument();
+  });
+
+  it('renders children inside the group', () => {
+    render(
+      <ParallelGroup count={2}>
+        <div data-testid="child-a">Alpha</div>
+        <div data-testid="child-b">Beta</div>
+      </ParallelGroup>,
+    );
+    expect(screen.getByTestId('child-a')).toBeInTheDocument();
+    expect(screen.getByTestId('child-b')).toBeInTheDocument();
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+  });
+
+  it('renders the GitBranch icon', () => {
+    const { container } = render(
+      <ParallelGroup count={2}>
+        <div>child</div>
+      </ParallelGroup>,
+    );
+    const icon = container.querySelector('[data-lucide="GitBranch"]');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <ParallelGroup count={1} className="my-custom-class">
+        <div>child</div>
+      </ParallelGroup>,
+    );
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.className).toContain('my-custom-class');
+  });
+
+  it('always shows "parallel" label in uppercase styling container', () => {
+    render(
+      <ParallelGroup count={4}>
+        <div>child</div>
+      </ParallelGroup>,
+    );
+    const label = screen.getByText('parallel');
+    expect(label).toBeInTheDocument();
+  });
+
+  it('renders with count of 1', () => {
+    render(
+      <ParallelGroup count={1}>
+        <div>single child</div>
+      </ParallelGroup>,
+    );
+    expect(screen.getByText(/1 tasks/)).toBeInTheDocument();
+    expect(screen.getByText('single child')).toBeInTheDocument();
+  });
+
+  it('renders dashed border container with expected structure', () => {
+    const { container } = render(
+      <ParallelGroup count={3}>
+        <div>child</div>
+      </ParallelGroup>,
+    );
+    const outer = container.firstChild as HTMLElement;
+    expect(outer.className).toContain('border-dashed');
+  });
+});