chore: UI enhancements for workflow runs view (#142)

* add local state in filters

* feat: add sorting feature by duration

* chore: refactor workfow run view

ui/src/components/filters/DateRangeFilter.tsx

@@ -1,5 +1,5 @@
 import { CalendarIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -25,6 +25,19 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
   const [isFromOpen, setIsFromOpen] = useState(false);
   const [isToOpen, setIsToOpen] = useState(false);
 
+  // Local state for time inputs - only syncs to parent on blur
+  const [fromTime, setFromTime] = useState(value.from?.toTimeString().slice(0, 5) ?? "");
+  const [toTime, setToTime] = useState(value.to?.toTimeString().slice(0, 5) ?? "");
+
+  // Sync local time state when parent value changes
+  useEffect(() => {
+    setFromTime(value.from?.toTimeString().slice(0, 5) ?? "");
+  }, [value.from]);
+
+  useEffect(() => {
+    setToTime(value.to?.toTimeString().slice(0, 5) ?? "");
+  }, [value.to]);
+
   const formatDate = (date: Date | null) => {
     if (!date) return "Select date";
     return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
@@ -55,10 +68,11 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
     setIsToOpen(false);
   };
 
-  const handleTimeChange = (type: 'from' | 'to', timeString: string) => {
+  const handleTimeBlur = (type: 'from' | 'to') => {
+    const timeString = type === 'from' ? fromTime : toTime;
     const [hours, minutes] = timeString.split(':').map(Number);
     const date = type === 'from' ? value.from : value.to;
-    if (date) {
+    if (date && !isNaN(hours) && !isNaN(minutes)) {
       const newDate = new Date(date);
       newDate.setHours(hours, minutes);
       onChange({ ...value, [type]: newDate });
@@ -112,8 +126,9 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
                     id="from-time"
                     type="time"
                     className="w-full mt-1 px-3 py-2 border rounded-md"
-                    value={value.from.toTimeString().slice(0, 5)}
-                    onChange={(e) => handleTimeChange('from', e.target.value)}
+                    value={fromTime}
+                    onChange={(e) => setFromTime(e.target.value)}
+                    onBlur={() => handleTimeBlur('from')}
                   />
                 </div>
               )}
@@ -151,8 +166,9 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
                     id="to-time"
                     type="time"
                     className="w-full mt-1 px-3 py-2 border rounded-md"
-                    value={value.to.toTimeString().slice(0, 5)}
-                    onChange={(e) => handleTimeChange('to', e.target.value)}
+                    value={toTime}
+                    onChange={(e) => setToTime(e.target.value)}
+                    onBlur={() => handleTimeBlur('to')}
                   />
                 </div>
               )}

ui/src/components/filters/NumberFilter.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { NumberValue } from "@/types/filters";
@@ -21,12 +23,23 @@ export const NumberFilter: React.FC<NumberFilterProps> = ({
   max,
   step = 1,
 }) => {
+  // Local state for fast typing - only syncs to parent on blur
+  const [localValue, setLocalValue] = useState<string>(value.value?.toString() ?? '');
+
+  // Sync local state when parent value changes (e.g., from URL or clear)
+  useEffect(() => {
+    setLocalValue(value.value?.toString() ?? '');
+  }, [value.value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    if (newValue === '') {
+    setLocalValue(e.target.value);
+  };
+
+  const handleBlur = () => {
+    if (localValue === '') {
       onChange({ value: null });
     } else {
-      const num = parseInt(newValue, 10);
+      const num = parseInt(localValue, 10);
       if (!isNaN(num)) {
         onChange({ value: num });
       }
@@ -40,8 +53,9 @@ export const NumberFilter: React.FC<NumberFilterProps> = ({
         <Input
           id="number-filter"
           type="number"
-          value={value.value ?? ''}
+          value={localValue}
           onChange={handleChange}
+          onBlur={handleBlur}
           placeholder={placeholder}
           min={min}
           max={max}

ui/src/components/filters/NumberRangeFilter.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -24,13 +26,23 @@ export const NumberRangeFilter: React.FC<NumberRangeFilterProps> = ({
   step = 1,
   presets = [],
 }) => {
-  const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value === "" ? null : Number(e.target.value);
+  // Local state for fast typing - only syncs to parent on blur
+  const [localMin, setLocalMin] = useState<string>(value.min?.toString() ?? "");
+  const [localMax, setLocalMax] = useState<string>(value.max?.toString() ?? "");
+
+  // Sync local state when parent value changes (e.g., from URL, clear, or presets)
+  useEffect(() => {
+    setLocalMin(value.min?.toString() ?? "");
+    setLocalMax(value.max?.toString() ?? "");
+  }, [value.min, value.max]);
+
+  const handleMinBlur = () => {
+    const newValue = localMin === "" ? null : Number(localMin);
     onChange({ ...value, min: newValue });
   };
 
-  const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value === "" ? null : Number(e.target.value);
+  const handleMaxBlur = () => {
+    const newValue = localMax === "" ? null : Number(localMax);
     onChange({ ...value, max: newValue });
   };
 
@@ -64,8 +76,9 @@ export const NumberRangeFilter: React.FC<NumberRangeFilterProps> = ({
             id="min-value"
             type="number"
             placeholder={`Min ${unit || 'value'}`}
-            value={value.min ?? ""}
-            onChange={handleMinChange}
+            value={localMin}
+            onChange={(e) => setLocalMin(e.target.value)}
+            onBlur={handleMinBlur}
             min={min}
             max={max}
             step={step}
@@ -80,8 +93,9 @@ export const NumberRangeFilter: React.FC<NumberRangeFilterProps> = ({
             id="max-value"
             type="number"
             placeholder={`Max ${unit || 'value'}`}
-            value={value.max ?? ""}
-            onChange={handleMaxChange}
+            value={localMax}
+            onChange={(e) => setLocalMax(e.target.value)}
+            onBlur={handleMaxBlur}
             min={min}
             max={max}
             step={step}

ui/src/components/filters/TagInputFilter.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -14,6 +14,11 @@ interface TagInputFilterProps {
 export const TagInputFilter: React.FC<TagInputFilterProps> = ({ value, onChange, error, placeholder="Enter tags (comma separated)" }) => {
   const [text, setText] = useState(value.codes.join(", "));
 
+  // Sync local state when parent value changes (e.g., from URL or clear)
+  useEffect(() => {
+    setText(value.codes.join(", "));
+  }, [value.codes]);
+
   const handleBlur = (e: ChangeEvent<HTMLInputElement>) => {
     const tags = e.target.value
       .split(/[,\n]/)

ui/src/components/filters/TextFilter.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import { Input } from "@/components/ui/input";
 import { TextValue } from "@/types/filters";
 
@@ -16,12 +18,25 @@ export const TextFilter: React.FC<TextFilterProps> = ({
   placeholder = "Enter text",
   maxLength,
 }) => {
+  // Local state for fast typing - only syncs to parent on blur
+  const [localValue, setLocalValue] = useState(value.value || "");
+
+  // Sync local state when parent value changes (e.g., from URL or clear)
+  useEffect(() => {
+    setLocalValue(value.value || "");
+  }, [value.value]);
+
+  const handleBlur = () => {
+    onChange({ value: localValue });
+  };
+
   return (
     <div className="space-y-2">
       <Input
         type="text"
-        value={value.value || ""}
-        onChange={(e) => onChange({ value: e.target.value })}
+        value={localValue}
+        onChange={(e) => setLocalValue(e.target.value)}
+        onBlur={handleBlur}
         placeholder={placeholder}
         maxLength={maxLength}
         className={error ? "border-red-500" : ""}

ui/src/components/layout/AppLayout.tsx

@@ -24,8 +24,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({
   // Hide sidebar for root (/) and /handler routes (Stack Auth routes)
   const shouldShowSidebar = pathname !== "/" && !pathname.startsWith("/handler");
 
-  // Check if we're in workflow editor mode - collapse sidebar by default
+  // Check if we're in workflow editor mode or superadmin runs - collapse sidebar by default
   const isWorkflowEditor = /^\/workflow\/\d+/.test(pathname);
+  const isSuperadmin = pathname.startsWith("/superadmin");
 
   // If no sidebar needed, just return children
   if (!shouldShowSidebar) {
@@ -33,7 +34,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
   }
 
   return (
-    <SidebarProvider defaultOpen={!isWorkflowEditor}>
+    <SidebarProvider defaultOpen={!isWorkflowEditor && !isSuperadmin}>
       <div className="flex min-h-screen w-full">
         <AppSidebar />
         <SidebarInset className="flex-1">

ui/src/components/workflow-runs/CampaignRuns.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+
+import { getCampaignRunsApiV1CampaignCampaignIdRunsGet } from "@/client/sdk.gen";
+import { WorkflowRunResponseSchema } from "@/client/types.gen";
+import { WorkflowRunsTable } from "@/components/workflow-runs";
+import { useAuth } from "@/lib/auth";
+import { decodeFiltersFromURL, encodeFiltersToURL } from "@/lib/filters";
+import { ActiveFilter, availableAttributes, FilterAttribute } from "@/types/filters";
+
+interface CampaignRunsProps {
+    campaignId: number;
+    workflowId: number;
+    searchParams?: URLSearchParams;
+}
+
+export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignRunsProps) {
+    const router = useRouter();
+    const { getAccessToken } = useAuth();
+    const [runs, setRuns] = useState<WorkflowRunResponseSchema[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [currentPage, setCurrentPage] = useState(() => {
+        const pageParam = searchParams?.get('page');
+        return pageParam ? parseInt(pageParam, 10) : 1;
+    });
+    const [totalPages, setTotalPages] = useState(1);
+    const [totalCount, setTotalCount] = useState(0);
+    const [isExecutingFilters, setIsExecutingFilters] = useState(false);
+    const [accessToken, setAccessToken] = useState<string | null>(null);
+
+    // Sort state
+    const [sortBy, setSortBy] = useState<string | null>(null);
+    const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+
+    // Initialize filters from URL
+    const [activeFilters, setActiveFilters] = useState<ActiveFilter[]>(() => {
+        return searchParams ? decodeFiltersFromURL(searchParams, availableAttributes) : [];
+    });
+
+    // Get access token on mount
+    useEffect(() => {
+        const fetchToken = async () => {
+            const token = await getAccessToken();
+            setAccessToken(token);
+        };
+        fetchToken();
+    }, [getAccessToken]);
+
+    const fetchCampaignRuns = useCallback(async (
+        page: number,
+        filters?: ActiveFilter[],
+        sortByParam?: string | null,
+        sortOrderParam?: 'asc' | 'desc'
+    ) => {
+        if (!accessToken) return;
+        try {
+            setLoading(true);
+            // Prepare filter data for API
+            let filterParam = undefined;
+            if (filters && filters.length > 0) {
+                const filterData = filters.map(filter => ({
+                    attribute: filter.attribute.id,
+                    type: filter.attribute.type,
+                    value: filter.value
+                }));
+                filterParam = JSON.stringify(filterData);
+            }
+
+            const response = await getCampaignRunsApiV1CampaignCampaignIdRunsGet({
+                path: { campaign_id: campaignId },
+                query: {
+                    page: page,
+                    limit: 50,
+                    ...(filterParam && { filters: filterParam }),
+                    ...(sortByParam && { sort_by: sortByParam }),
+                    ...(sortOrderParam && { sort_order: sortOrderParam }),
+                },
+                headers: {
+                    'Authorization': `Bearer ${accessToken}`,
+                }
+            });
+
+            if (response.error) {
+                throw new Error("Failed to fetch campaign runs");
+            }
+
+            if (response.data) {
+                // The API returns runs as array of dicts, convert to WorkflowRunResponseSchema
+                setRuns((response.data.runs || []) as unknown as WorkflowRunResponseSchema[]);
+                setTotalPages(response.data.total_pages || 1);
+                setTotalCount(response.data.total_count || 0);
+                setCurrentPage(response.data.page || 1);
+            }
+            setError(null);
+        } catch (err) {
+            console.error("Error fetching campaign runs:", err);
+            setError("Failed to load campaign runs");
+        } finally {
+            setLoading(false);
+        }
+    }, [campaignId, accessToken]);
+
+    const updatePageInUrl = useCallback((page: number, filters?: ActiveFilter[]) => {
+        const params = new URLSearchParams();
+        params.set('page', page.toString());
+
+        // Add filters to URL if present
+        if (filters && filters.length > 0) {
+            const filterString = encodeFiltersToURL(filters);
+            if (filterString) {
+                const filterParams = new URLSearchParams(filterString);
+                filterParams.forEach((value, key) => params.set(key, value));
+            }
+        }
+
+        router.push(`/campaigns/${campaignId}?${params.toString()}`, { scroll: false });
+    }, [router, campaignId]);
+
+    useEffect(() => {
+        if (accessToken) {
+            fetchCampaignRuns(currentPage, activeFilters, sortBy, sortOrder);
+        }
+    }, [currentPage, activeFilters, fetchCampaignRuns, accessToken, sortBy, sortOrder]);
+
+    const handleApplyFilters = useCallback(async () => {
+        setIsExecutingFilters(true);
+        setCurrentPage(1);
+        updatePageInUrl(1, activeFilters);
+        await fetchCampaignRuns(1, activeFilters, sortBy, sortOrder);
+        setIsExecutingFilters(false);
+    }, [activeFilters, fetchCampaignRuns, updatePageInUrl, sortBy, sortOrder]);
+
+    const handleFiltersChange = useCallback((filters: ActiveFilter[]) => {
+        setActiveFilters(filters);
+    }, []);
+
+    const handleClearFilters = useCallback(async () => {
+        setIsExecutingFilters(true);
+        setCurrentPage(1);
+        setActiveFilters([]);
+        updatePageInUrl(1, []);
+        await fetchCampaignRuns(1, [], sortBy, sortOrder);
+        setIsExecutingFilters(false);
+    }, [fetchCampaignRuns, updatePageInUrl, sortBy, sortOrder]);
+
+    const handlePageChange = useCallback((page: number) => {
+        setCurrentPage(page);
+        updatePageInUrl(page, activeFilters);
+    }, [updatePageInUrl, activeFilters]);
+
+    const handleSort = useCallback((field: string) => {
+        // Reset to first page when sort changes
+        setCurrentPage(1);
+
+        if (sortBy === field) {
+            // Toggle order if same field
+            setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
+        } else {
+            // New field, default to desc
+            setSortBy(field);
+            setSortOrder('desc');
+        }
+    }, [sortBy]);
+
+    // Use a subset of filter attributes relevant for campaigns
+    const campaignFilterAttributes: FilterAttribute[] = availableAttributes.filter(
+        attr => ['dateRange', 'dispositionCode', 'duration', 'status', 'tokenUsage'].includes(attr.id)
+    );
+
+    return (
+        <WorkflowRunsTable
+            runs={runs}
+            loading={loading}
+            error={error}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            totalCount={totalCount}
+            onPageChange={handlePageChange}
+            availableAttributes={campaignFilterAttributes}
+            activeFilters={activeFilters}
+            onFiltersChange={handleFiltersChange}
+            onApplyFilters={handleApplyFilters}
+            onClearFilters={handleClearFilters}
+            isExecutingFilters={isExecutingFilters}
+            sortBy={sortBy}
+            sortOrder={sortOrder}
+            onSort={handleSort}
+            workflowId={workflowId}
+            accessToken={accessToken}
+            title="Campaign Workflow Runs"
+            emptyMessage="No workflow runs found for this campaign"
+        />
+    );
+}

ui/src/components/workflow-runs/WorkflowRunsTable.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, ExternalLink } from "lucide-react";
+import { useState } from "react";
+
+import { WorkflowRunResponseSchema } from "@/client/types.gen";
+import { FilterBuilder } from "@/components/filters/FilterBuilder";
+import { MediaPreviewButtons, MediaPreviewDialog } from "@/components/MediaPreviewDialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { ActiveFilter, FilterAttribute } from "@/types/filters";
+
+export interface WorkflowRunsTableProps {
+    // Data
+    runs: WorkflowRunResponseSchema[];
+    loading: boolean;
+    error: string | null;
+
+    // Pagination
+    currentPage: number;
+    totalPages: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+
+    // Filters
+    availableAttributes: FilterAttribute[];
+    activeFilters: ActiveFilter[];
+    onFiltersChange: (filters: ActiveFilter[]) => void;
+    onApplyFilters: () => void;
+    onClearFilters: () => void;
+    isExecutingFilters: boolean;
+
+    // Sorting
+    sortBy?: string | null;
+    sortOrder?: 'asc' | 'desc';
+    onSort?: (field: string) => void;
+
+    // Navigation & Actions
+    workflowId: number;
+    accessToken: string | null;
+
+    // Optional customization
+    title?: string;
+    subtitle?: string;
+    showFilters?: boolean;
+    emptyMessage?: string;
+}
+
+export function WorkflowRunsTable({
+    runs,
+    loading,
+    error,
+    currentPage,
+    totalPages,
+    totalCount,
+    onPageChange,
+    availableAttributes,
+    activeFilters,
+    onFiltersChange,
+    onApplyFilters,
+    onClearFilters,
+    isExecutingFilters,
+    sortBy,
+    sortOrder = 'desc',
+    onSort,
+    workflowId,
+    accessToken,
+    title = "Workflow Run History",
+    subtitle,
+    showFilters = true,
+    emptyMessage = "No workflow runs found",
+}: WorkflowRunsTableProps) {
+    const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
+
+    // Media preview dialog
+    const mediaPreview = MediaPreviewDialog({ accessToken });
+
+    const formatDate = (dateString: string) => new Date(dateString).toLocaleString();
+
+    const handleRowClick = (runId: number) => {
+        window.open(`/workflow/${workflowId}/run/${runId}`, '_blank');
+    };
+
+    return (
+        <div className="space-y-6">
+            {/* Title and Filters */}
+            {showFilters && (
+                <div className="mb-6">
+                    <h1 className="text-2xl font-bold mb-4">{title}</h1>
+                    <FilterBuilder
+                        availableAttributes={availableAttributes}
+                        activeFilters={activeFilters}
+                        onFiltersChange={onFiltersChange}
+                        onApplyFilters={onApplyFilters}
+                        onClearFilters={onClearFilters}
+                        isExecuting={isExecutingFilters}
+                    />
+                </div>
+            )}
+
+            {/* Loading State */}
+            {loading ? (
+                <div className="flex justify-center">
+                    <div className="animate-pulse">Loading workflow runs...</div>
+                </div>
+            ) : error ? (
+                <div className="bg-destructive/10 border border-destructive/30 text-destructive px-4 py-3 rounded">
+                    {error}
+                </div>
+            ) : runs.length === 0 ? (
+                <div className="text-center py-8">
+                    <p className="text-muted-foreground">{emptyMessage}</p>
+                </div>
+            ) : (
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Workflow Runs</CardTitle>
+                        <CardDescription>
+                            {subtitle || `Showing ${runs.length} of ${totalCount} total runs`}
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="bg-card border border-border rounded-lg overflow-hidden shadow-sm">
+                            <Table>
+                                <TableHeader>
+                                    <TableRow className="bg-muted/50">
+                                        <TableHead className="font-semibold">ID</TableHead>
+                                        <TableHead className="font-semibold">Status</TableHead>
+                                        <TableHead className="font-semibold">Created At</TableHead>
+                                        <TableHead className="font-semibold">Call Type</TableHead>
+                                        <TableHead
+                                            className="font-semibold cursor-pointer hover:bg-muted/50 select-none"
+                                            onClick={() => onSort?.('duration')}
+                                        >
+                                            <div className="flex items-center gap-1">
+                                                Duration
+                                                {sortBy === 'duration' ? (
+                                                    sortOrder === 'asc' ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />
+                                                ) : (
+                                                    <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
+                                                )}
+                                            </div>
+                                        </TableHead>
+                                        <TableHead className="font-semibold">Disposition</TableHead>
+                                        <TableHead className="font-semibold">Actions</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {runs.map((run) => (
+                                        <TableRow
+                                            key={run.id}
+                                            className={`cursor-pointer hover:bg-muted/50 ${selectedRowId === run.id ? "bg-primary/20 ring-1 ring-primary/50" : ""}`}
+                                            onClick={() => handleRowClick(run.id)}
+                                        >
+                                            <TableCell className="font-mono text-sm">#{run.id}</TableCell>
+                                            <TableCell>
+                                                <Badge variant={run.is_completed ? "default" : "secondary"}>
+                                                    {run.is_completed ? "Completed" : "In Progress"}
+                                                </Badge>
+                                            </TableCell>
+                                            <TableCell className="text-sm">{formatDate(run.created_at)}</TableCell>
+                                            <TableCell>
+                                                <Badge variant={run.call_type === 'inbound' ? "secondary" : "default"}>
+                                                    {run.call_type === 'inbound' ? 'Inbound' : 'Outbound'}
+                                                </Badge>
+                                            </TableCell>
+                                            <TableCell className="text-sm">
+                                                {typeof run.cost_info?.call_duration_seconds === 'number'
+                                                    ? `${run.cost_info.call_duration_seconds.toFixed(1)}s`
+                                                    : "-"}
+                                            </TableCell>
+                                            <TableCell>
+                                                {run.gathered_context?.mapped_call_disposition ? (
+                                                    <Badge variant="default">
+                                                        {run.gathered_context.mapped_call_disposition as string}
+                                                    </Badge>
+                                                ) : (
+                                                    <span className="text-sm text-muted-foreground">-</span>
+                                                )}
+                                            </TableCell>
+                                            <TableCell>
+                                                <div className="flex space-x-2" onClick={(e) => e.stopPropagation()}>
+                                                    <MediaPreviewButtons
+                                                        recordingUrl={run.recording_url}
+                                                        transcriptUrl={run.transcript_url}
+                                                        runId={run.id}
+                                                        onOpenAudio={mediaPreview.openAudioModal}
+                                                        onOpenTranscript={mediaPreview.openTranscriptModal}
+                                                        onSelect={setSelectedRowId}
+                                                    />
+                                                    <Button
+                                                        variant="outline"
+                                                        size="icon"
+                                                        onClick={() => window.open(`/workflow/${workflowId}/run/${run.id}`, '_blank')}
+                                                    >
+                                                        <ExternalLink className="h-4 w-4" />
+                                                    </Button>
+                                                </div>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </div>
+
+                        {/* Pagination */}
+                        {totalPages > 1 && (
+                            <div className="flex items-center justify-between mt-6">
+                                <p className="text-sm text-muted-foreground">
+                                    Page {currentPage} of {totalPages}
+                                </p>
+                                <div className="flex gap-2">
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => onPageChange(currentPage - 1)}
+                                        disabled={currentPage === 1}
+                                    >
+                                        <ChevronLeft className="h-4 w-4" />
+                                        Previous
+                                    </Button>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => onPageChange(currentPage + 1)}
+                                        disabled={currentPage === totalPages}
+                                    >
+                                        Next
+                                        <ChevronRight className="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            )}
+
+            {/* Media Preview Dialog */}
+            {mediaPreview.dialog}
+        </div>
+    );
+}

ui/src/components/workflow-runs/index.ts

@@ -0,0 +1,3 @@
+export { CampaignRuns } from "./CampaignRuns";
+export type { WorkflowRunsTableProps } from "./WorkflowRunsTable";
+export { WorkflowRunsTable } from "./WorkflowRunsTable";