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

package/src/components/dashboard/project-list-view.tsx

@@ -0,0 +1,246 @@
+"use client";
+import {
+  FolderOpen,
+  Activity,
+  Eye,
+  Clock,
+  History,
+  ChevronDown,
+  ChevronUp,
+} from "lucide-react";
+import { cn } from "@/lib/cn";
+import { ErrorBoundary } from "@/components/shared/error-boundary";
+import { ProjectHealthCard } from "./project-health-card";
+import type { ProjectSummary, RunStatus } from "@/types";
+import type { DashboardSortMode, DashboardStatusFilter } from "@/hooks/use-run-dashboard";
+
+// ---------------------------------------------------------------------------
+// Loading skeleton
+// ---------------------------------------------------------------------------
+
+function LoadingSkeleton() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="rounded-lg border border-border bg-card p-4 animate-pulse">
+          <div className="flex items-center gap-2 mb-3">
+            <div className="h-2.5 w-2.5 rounded-full bg-foreground-muted/20" />
+            <div className="h-4 w-32 rounded bg-foreground-muted/10" />
+          </div>
+          <div className="h-1.5 w-full rounded-full bg-foreground-muted/10 mb-3" />
+          <div className="flex items-center gap-3">
+            <div className="h-5 w-16 rounded-full bg-foreground-muted/10" />
+            <div className="h-5 w-16 rounded-full bg-foreground-muted/10" />
+            <div className="h-3 w-12 rounded bg-foreground-muted/10" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Error banner
+// ---------------------------------------------------------------------------
+
+function ErrorBanner({ error }: { error: string }) {
+  return (
+    <div data-testid="error-banner" className="rounded-lg border border-error/20 bg-error-muted p-4 text-sm text-error">
+      Failed to load projects: {error}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Empty state (no projects matching filter)
+// ---------------------------------------------------------------------------
+
+function NoProjectsState() {
+  return (
+    <div data-testid="empty-state" className="text-center py-16">
+      <FolderOpen className="h-10 w-10 text-foreground-muted/30 mx-auto mb-3" />
+      <p className="text-sm text-foreground-muted mb-1">No projects found</p>
+      <p className="text-xs text-foreground-muted/60">
+        Configure watch sources in{" "}
+        <button
+          onClick={() => window.dispatchEvent(new CustomEvent("open-settings"))}
+          className="text-primary hover:underline"
+        >
+          Settings
+        </button>{" "}
+        or edit <span className="font-mono">~/.a5c/observer.json</span>
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Idle empty state (no active and no history runs)
+// ---------------------------------------------------------------------------
+
+function IdleEmptyState() {
+  return (
+    <div data-testid="idle-empty-state" className="text-center py-16">
+      <Eye className="h-10 w-10 text-foreground-muted/30 mx-auto mb-3" />
+      <p className="text-sm text-foreground-muted mb-1">All quiet — no active orchestration runs</p>
+      <p className="text-xs text-foreground-muted/60">
+        Runs will appear here when babysitter processes are started
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ProjectListView (public)
+// ---------------------------------------------------------------------------
+
+export interface ProjectListViewProps {
+  loading: boolean;
+  error: string | null | undefined;
+  filteredProjects: ProjectSummary[];
+  activeProjects: ProjectSummary[];
+  historyProjects: ProjectSummary[];
+  statusFilter: DashboardStatusFilter;
+  sortMode: DashboardSortMode;
+  cardStatusFilter: RunStatus | "all";
+  historyCollapsed: boolean;
+  onHistoryCollapsedChange: (value: boolean | ((prev: boolean) => boolean)) => void;
+  onHideProject?: (projectName: string) => void;
+}
+
+export function ProjectListView({
+  loading,
+  error,
+  filteredProjects,
+  activeProjects,
+  historyProjects,
+  statusFilter,
+  sortMode,
+  cardStatusFilter,
+  historyCollapsed,
+  onHistoryCollapsedChange,
+  onHideProject,
+}: ProjectListViewProps) {
+  if (loading) {
+    return <LoadingSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorBanner error={error} />;
+  }
+
+  if (filteredProjects.length === 0) {
+    return <NoProjectsState />;
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      {/* Idle empty state: no active and no history runs at all */}
+      {activeProjects.length === 0 && historyProjects.length === 0 && (
+        <IdleEmptyState />
+      )}
+
+      {/* Idle with history: no active/recent runs but has history */}
+      {activeProjects.length === 0 && historyProjects.length > 0 && (statusFilter === "all" || statusFilter === "stale") && (
+        <div data-testid="idle-with-history-banner" className="flex items-center gap-2 px-3 py-2 rounded-md bg-background-secondary/50 border border-border w-fit">
+          <Activity className="h-3.5 w-3.5 text-foreground-muted/50" />
+          <span className="text-xs text-foreground-muted">
+            {sortMode === "activity" ? "No activity in the last 24 hours" : "No runs in progress"}
+          </span>
+        </div>
+      )}
+
+      {/* Active / Recent section */}
+      {activeProjects.length > 0 && (statusFilter === "all" || statusFilter === "stale" || statusFilter === "waiting") && (
+        <ErrorBoundary section="Active Runs">
+          <section data-testid="active-runs-section">
+            <div className="flex items-center gap-2 mb-3">
+              {sortMode === "activity" ? (
+                <Clock className="h-4 w-4 text-primary" />
+              ) : (
+                <Activity className="h-4 w-4 text-warning animate-pulse-dot" />
+              )}
+              <h2 className="text-sm font-semibold text-foreground">
+                {sortMode === "activity" ? "Recent Activity" : "In Progress"}
+              </h2>
+              <span className={cn(
+                "rounded-full px-2 py-px text-xs font-semibold tabular-nums",
+                sortMode === "activity"
+                  ? "bg-primary/10 border border-primary/20 text-primary"
+                  : "bg-warning/10 border border-warning/20 text-warning"
+              )}>
+                {activeProjects.length}
+              </span>
+            </div>
+            <div data-testid="project-grid-active" className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+              {activeProjects.map((project) => (
+                <ProjectHealthCard
+                  key={project.projectName}
+                  project={project}
+                  statusFilter={cardStatusFilter}
+                  sortMode={sortMode}
+                  onHide={onHideProject}
+                />
+              ))}
+            </div>
+          </section>
+        </ErrorBoundary>
+      )}
+
+      {/* When filter is "completed" or "failed", show filteredProjects directly without sectioning */}
+      {(statusFilter === "completed" || statusFilter === "failed") && (
+        <ErrorBoundary section="Filtered Results">
+          <div data-testid="project-grid-filtered" className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+            {filteredProjects.map((project) => (
+              <ProjectHealthCard
+                key={project.projectName}
+                project={project}
+                statusFilter={cardStatusFilter}
+                sortMode={sortMode}
+              />
+            ))}
+          </div>
+        </ErrorBoundary>
+      )}
+
+      {/* History / Earlier section */}
+      {historyProjects.length > 0 && (statusFilter === "all" || statusFilter === "stale") && (
+        <ErrorBoundary section="Recent History">
+          <section data-testid="recent-history-section">
+            <button
+              onClick={() => onHistoryCollapsedChange((v) => !v)}
+              className="flex items-center gap-2 mb-3 group w-fit"
+            >
+              <History className="h-4 w-4 text-foreground-muted/70" />
+              <h2 className="text-sm font-semibold text-foreground-muted group-hover:text-foreground-secondary transition-colors">
+                {sortMode === "activity" ? "Earlier" : "Recent History"}
+              </h2>
+              <span className="rounded-full bg-background-secondary border border-border px-2 py-px text-xs font-semibold text-foreground-muted tabular-nums">
+                {historyProjects.length}
+              </span>
+              {historyCollapsed ? (
+                <ChevronDown className="h-3.5 w-3.5 text-foreground-muted/60 group-hover:text-foreground-muted transition-colors" />
+              ) : (
+                <ChevronUp className="h-3.5 w-3.5 text-foreground-muted/60 group-hover:text-foreground-muted transition-colors" />
+              )}
+            </button>
+            {!historyCollapsed && (
+              <div className="opacity-70">
+                <div data-testid="project-grid-history" className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+                  {historyProjects.map((project) => (
+                    <ProjectHealthCard
+                      key={project.projectName}
+                      project={project}
+                      statusFilter={cardStatusFilter}
+                      sortMode={sortMode}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </section>
+        </ErrorBoundary>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/project-search-input.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { Search } from 'lucide-react';
+import { cn } from '@/lib/cn';
+
+interface ProjectSearchInputProps {
+  onSearch: (value: string) => void;
+  debounceMs?: number;
+  className?: string;
+  placeholder?: string;
+}
+
+export function ProjectSearchInput({
+  onSearch,
+  debounceMs = 300,
+  className,
+  placeholder = 'Filter runs...'
+}: ProjectSearchInputProps) {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onSearch(value);
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [value, debounceMs, onSearch]);
+
+  return (
+    <div className={cn('relative', className)}>
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-foreground-muted" />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={placeholder}
+        className="w-full rounded-md border border-border bg-background px-9 py-2 text-xs text-foreground placeholder:text-foreground-muted focus:border-primary/30 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:shadow-neon-glow-primary-focus transition-all"
+      />
+    </div>
+  );
+}

package/src/components/dashboard/project-section-header.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { cn } from "@/lib/cn";
+
+interface ProjectSectionHeaderProps {
+  projectName: string;
+  activeRuns: number;
+  completedRuns: number;
+  failedRuns: number;
+  totalRuns: number;
+  latestUpdate?: string;
+  className?: string;
+}
+
+function formatRelativeTime(iso: string | undefined): string {
+  if (!iso) return "";
+  try {
+    const now = Date.now();
+    const then = new Date(iso).getTime();
+    const diffMs = now - then;
+    if (diffMs < 0) return "just now";
+    const diffSec = Math.floor(diffMs / 1000);
+    if (diffSec < 60) return `${diffSec}s ago`;
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDays = Math.floor(diffHr / 24);
+    return `${diffDays}d ago`;
+  } catch {
+    return "";
+  }
+}
+
+export function ProjectSectionHeader({
+  projectName,
+  activeRuns,
+  completedRuns,
+  failedRuns,
+  totalRuns,
+  latestUpdate,
+  className,
+}: ProjectSectionHeaderProps) {
+  return (
+    <div className={cn("flex flex-1 items-center gap-3 min-w-0", className)}>
+      <span className="font-semibold text-sm text-foreground truncate border-l-2 border-primary pl-2 transition-all hover:neon-text-subtle">
+        {projectName}
+      </span>
+
+      <div className="flex items-center gap-1.5 shrink-0">
+        {activeRuns > 0 && (
+          <span className="inline-flex items-center rounded-full bg-warning-muted px-2 py-0.5 text-[11px] font-medium text-warning shadow-neon-glow-warning-xs">
+            {activeRuns} active
+          </span>
+        )}
+        {completedRuns > 0 && (
+          <span className="inline-flex items-center rounded-full bg-success-muted px-2 py-0.5 text-[11px] font-medium text-success">
+            {completedRuns} completed
+          </span>
+        )}
+        {failedRuns > 0 && (
+          <span className="inline-flex items-center rounded-full bg-error-muted px-2 py-0.5 text-[11px] font-medium text-error shadow-neon-glow-error-xs">
+            {failedRuns} failed
+          </span>
+        )}
+      </div>
+
+      <span className="ml-auto text-xs leading-tight text-foreground-muted shrink-0 tabular-nums">
+        {totalRuns} run{totalRuns !== 1 ? "s" : ""}
+        {latestUpdate && ` \u00b7 ${formatRelativeTime(latestUpdate)}`}
+      </span>
+    </div>
+  );
+}

package/src/components/dashboard/project-section.tsx

@@ -0,0 +1,89 @@
+"use client";
+import { useState, useCallback } from "react";
+import { Loader2 } from "lucide-react";
+import { RunCard } from "./run-card";
+import { VirtualizedRunList } from "./virtualized-run-list";
+import { PaginationControls } from "./pagination-controls";
+import { ProjectSearchInput } from "./project-search-input";
+import { useProjectRuns } from "@/hooks/use-project-runs";
+import type { Run } from "@/types";
+
+interface ProjectSectionProps {
+  projectName: string;
+  runs: Run[];
+  selectedIndex?: number;
+  defaultExpanded?: boolean;
+  statusFilter?: string;
+  enabled?: boolean;
+}
+
+const PAGE_SIZE = 10;
+
+export function ProjectSection({
+  projectName,
+  runs: _initialRuns,
+  selectedIndex,
+  defaultExpanded: _defaultExpanded = false,
+  statusFilter,
+  enabled = true,
+}: ProjectSectionProps) {
+  const [page, setPage] = useState(0);
+  const [search, setSearch] = useState("");
+
+  const { runs: fetchedRuns, totalCount, loading } = useProjectRuns(
+    projectName,
+    {
+      limit: PAGE_SIZE,
+      offset: page * PAGE_SIZE,
+      search,
+      status: statusFilter && statusFilter !== "all" ? statusFilter : undefined,
+      enabled,
+    }
+  );
+
+  // Use fetched runs
+  const displayRuns = fetchedRuns;
+
+  const handleSearch = useCallback((value: string) => {
+    setSearch(value);
+    setPage(0);
+  }, []);
+
+  const handlePageChange = useCallback((newPage: number) => {
+    setPage(newPage);
+  }, []);
+
+  return (
+    <div>
+      <ProjectSearchInput
+        onSearch={handleSearch}
+        placeholder="Search by run ID, process, task, or error..."
+        className="mb-3"
+      />
+      {loading && displayRuns.length === 0 ? (
+        <div className="flex items-center justify-center py-6">
+          <Loader2 className="h-4 w-4 animate-spin text-primary" />
+        </div>
+      ) : displayRuns.length === 0 ? (
+        <div className="text-xs text-foreground-muted text-center py-4">
+          No runs found
+        </div>
+      ) : (
+        <VirtualizedRunList
+          runs={displayRuns}
+          maxHeight={600}
+          renderItem={(run, i) => (
+            <RunCard run={run} selected={i === selectedIndex} />
+          )}
+        />
+      )}
+      <PaginationControls
+        currentPage={page}
+        totalItems={totalCount}
+        itemsPerPage={PAGE_SIZE}
+        onPageChange={handlePageChange}
+        className="mt-3"
+      />
+    </div>
+  );
+}

package/src/components/dashboard/run-card.tsx

@@ -0,0 +1,218 @@
+"use client";
+import { memo } from "react";
+import Link from "next/link";
+import { cn } from "@/lib/cn";
+import { Card } from "@/components/ui/card";
+import { StatusBadge } from "@/components/shared/status-badge";
+import { SessionPill } from "@/components/shared/session-pill";
+import { TruncatedId } from "@/components/shared/truncated-id";
+import { ProgressBar } from "@/components/shared/progress-bar";
+import { formatDuration, friendlyProcessName, formatRelativeTime } from "@/lib/utils";
+import type { Run } from "@/types";
+import { Clock, Layers, Hand, AlertCircle, Tag, ExternalLink } from "lucide-react";
+
+interface RunCardProps {
+  run: Run;
+  selected?: boolean;
+}
+
+/** Map run status to progress bar variant */
+function progressVariant(status: Run["status"]): "default" | "success" | "error" | "warning" {
+  switch (status) {
+    case "completed":
+      return "success";
+    case "failed":
+      return "error";
+    case "waiting":
+      return "warning";
+    default:
+      return "default";
+  }
+}
+
+/** Compute display progress: completed runs always show 100% */
+function displayProgress(run: Run): number {
+  if (run.status === "completed") return 100;
+  if (run.totalTasks > 0) return Math.round((run.completedTasks / run.totalTasks) * 100);
+  return 0;
+}
+
+/** Format stale time: "Stale (2h ago)", "Stale (1d ago)" */
+function formatStaleTime(updatedAt: string): string {
+  const relative = formatRelativeTime(updatedAt);
+  return relative ? `Stale (${relative})` : "Stale";
+}
+
+/**
+ * Shallow comparison of Run props to prevent unnecessary re-renders.
+ * Checks key fields that affect visual output rather than deep-comparing
+ * the entire run object (which includes tasks[] and events[]).
+ */
+function runCardPropsAreEqual(prev: RunCardProps, next: RunCardProps): boolean {
+  if (prev.selected !== next.selected) return false;
+  const a = prev.run;
+  const b = next.run;
+  return (
+    a.runId === b.runId &&
+    a.status === b.status &&
+    a.updatedAt === b.updatedAt &&
+    a.completedTasks === b.completedTasks &&
+    a.totalTasks === b.totalTasks &&
+    a.duration === b.duration &&
+    a.isStale === b.isStale &&
+    a.waitingKind === b.waitingKind &&
+    a.breakpointQuestion === b.breakpointQuestion &&
+    a.failedStep === b.failedStep &&
+    a.failureMessage === b.failureMessage
+  );
+}
+
+export const RunCard = memo(function RunCard({ run, selected }: RunCardProps) {
+  const progress = displayProgress(run);
+  const isActive = run.status === "waiting" || run.status === "pending";
+  const isStale = run.isStale === true;
+
+  // Find the first breakpoint task that is waiting for approval
+  const pendingBreakpoint = run.tasks.find(
+    (t) => t.kind === "breakpoint" && t.status === "requested"
+  );
+  // Prefer run-level breakpointQuestion, fall back to task-level
+  const breakpointQuestion = run.breakpointQuestion ?? pendingBreakpoint?.breakpointQuestion;
+
+  // A breakpoint is active if: there's a pending breakpoint task OR the run is waiting on a breakpoint
+  const hasActiveBreakpoint = !isStale && (
+    !!pendingBreakpoint ||
+    (run.status === "waiting" && run.waitingKind === "breakpoint")
+  );
+
+  // Failure point text: prefer run-level failedStep, then construct from failureMessage
+  const failedStep = run.status === "failed"
+    ? run.failedStep || (run.failureMessage ? `${run.failureMessage}` : undefined)
+    : undefined;
+
+  return (
+    <Link href={`/runs/${run.runId}`}>
+      <Card className={cn(
+        "cursor-pointer p-4 transition-all card-hover-lift",
+        "hover:shadow-md",
+        selected && "ring-1 ring-primary shadow-glow-primary",
+        isActive && !isStale && !hasActiveBreakpoint && "border-[var(--border-hover)]",
+        hasActiveBreakpoint && "border-warning/40 shadow-glow-warning ring-1 ring-warning/20 animate-breakpoint-glow",
+        isStale && "opacity-50"
+      )}>
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            {/* Row 1: Title on its own row for readability */}
+            <div className="flex items-center gap-2 mb-1.5">
+              <span className={cn(
+                "h-2 w-2 rounded-full shrink-0",
+                isStale
+                  ? "bg-zinc-500"
+                  : hasActiveBreakpoint ? "bg-warning shadow-[0_0_8px_var(--warning)] animate-pulse-dot" :
+                    run.status === "completed" ? "bg-success shadow-[0_0_6px_var(--success)]" :
+                    run.status === "failed" ? "bg-error shadow-[0_0_6px_var(--error)]" :
+                    run.status === "waiting" ? "bg-warning shadow-[0_0_6px_var(--warning)] animate-pulse-dot" :
+                    "bg-pending"
+              )} />
+              <span className="text-lg font-semibold italic font-serif text-foreground truncate">
+                {friendlyProcessName(run.processId)}
+              </span>
+              {hasActiveBreakpoint && (
+                <span className="inline-flex items-center gap-1 rounded-full bg-warning/15 border border-warning/30 px-2.5 py-1 text-[11px] leading-tight font-bold text-warning uppercase tracking-[0.12em] shrink-0 animate-pulse-dot">
+                  <Hand className="h-2.5 w-2.5" />
+                  Approval Required
+                </span>
+              )}
+            </div>
+            {/* Row 2: Status badges and tags */}
+            <div className="flex items-center gap-2 flex-wrap mb-1">
+              <StatusBadge
+                status={run.status}
+                waitingKind={run.waitingKind}
+                isStale={isStale}
+              />
+              {isStale && (
+                <span className="inline-flex items-center rounded-full bg-zinc-500/10 border border-zinc-500/20 px-2 py-0.5 text-xs leading-tight font-medium text-zinc-500 shrink-0">
+                  {formatStaleTime(run.updatedAt)}
+                </span>
+              )}
+              <TruncatedId id={run.runId} chars={4} className="text-foreground-secondary" />
+              {run.projectName && (
+                <span className="inline-flex items-center gap-1 rounded-full bg-background-secondary px-2 py-0.5 text-xs leading-tight font-medium text-foreground-muted shrink-0">
+                  <Tag className="h-2.5 w-2.5" />
+                  {run.projectName}
+                </span>
+              )}
+            </div>
+            {/* Inline failure point for failed runs */}
+            {failedStep && (
+              <div className="flex items-center gap-1.5 mt-2 px-2 py-1 rounded-md bg-error-muted border border-error/20 border-l-2 border-l-error shadow-glow-error">
+                <AlertCircle className="h-3.5 w-3.5 text-error shrink-0" />
+                <span className="text-xs text-error truncate">
+                  Failed at: {failedStep.length > 80 ? failedStep.slice(0, 80) + "..." : failedStep}
+                </span>
+              </div>
+            )}
+            {/* Breakpoint question panel — prominent display */}
+            {hasActiveBreakpoint && breakpointQuestion && (
+              <div className="mt-2 px-3 py-2 rounded-md bg-warning-muted border border-warning/25 border-l-2 border-l-warning shadow-breakpoint-glow">
+                <div className="flex items-start gap-2">
+                  <Hand className="h-4 w-4 text-warning shrink-0 mt-0.5 animate-pulse-dot" />
+                  <div className="flex-1 min-w-0">
+                    <span className="text-xs font-bold text-warning uppercase tracking-wider block mb-0.5">
+                      Awaiting approval
+                    </span>
+                    <span className="text-sm text-foreground leading-snug block">
+                      {breakpointQuestion}
+                    </span>
+                  </div>
+                  <span className={cn(
+                    "shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded-md",
+                    "bg-warning/10 border border-warning/20",
+                    "text-xs font-semibold text-warning",
+                    "hover:bg-warning/20 transition-colors"
+                  )}>
+                    Review & Approve
+                    <ExternalLink className="h-2.5 w-2.5" />
+                  </span>
+                </div>
+              </div>
+            )}
+            {/* Breakpoint without question text — still show indicator */}
+            {hasActiveBreakpoint && !breakpointQuestion && (
+              <div className="flex items-center gap-2 mt-2 px-3 py-2 rounded-md bg-warning-muted border border-warning/25 border-l-2 border-l-warning shadow-breakpoint-glow">
+                <Hand className="h-4 w-4 text-warning shrink-0 animate-pulse-dot" />
+                <span className="text-xs font-semibold text-warning">
+                  Approval needed
+                </span>
+                <span className={cn(
+                  "ml-auto shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded-md",
+                  "bg-warning/10 border border-warning/20",
+                  "text-xs font-semibold text-warning"
+                )}>
+                  Review & Approve
+                  <ExternalLink className="h-2.5 w-2.5" />
+                </span>
+              </div>
+            )}
+            <div className="flex items-center gap-3 mt-2 text-xs text-foreground-muted">
+              <SessionPill sessionId={run.sessionId} active={isActive && !isStale} />
+              <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>
+        </div>
+        {/* Task 1.8 — Show progress bar for ALL runs, not just active */}
+        {run.totalTasks > 0 && (
+          <ProgressBar value={progress} variant={progressVariant(run.status)} glow={isActive && !isStale} className="mt-4" />
+        )}
+      </Card>
+    </Link>
+  );
+}, runCardPropsAreEqual);