From 6b960c0bc166588d22eaf49ea9bef53d20eb64f5 Mon Sep 17 00:00:00 2001
From: milovate <cmilind33@gmail.com>
Date: Wed, 27 May 2026 14:02:19 +0530
Subject: [PATCH 1/6] feat: add bulk runner progress display

---
 .../bulkProgress/BulkProgressCard.css         | 508 ++++++++++++++++++
 .../bulkProgress/BulkProgressCard.tsx         | 310 +++++++++++
 .../bulkProgress/bulkProgress.types.ts        |  88 +++
 .../bulkProgress/bulkProgressCardModel.ts     | 339 ++++++++++++
 .../bulkProgress/bulkProgressFormat.ts        |  42 ++
 gooey-gui/app/components/index.ts             |   1 +
 recipes/BulkRunner.py                         | 108 +++-
 widgets/bulk_progress_display.py              | 180 +++++++
 widgets/bulk_progress_state.py                | 286 ++++++++++
 9 files changed, 1849 insertions(+), 13 deletions(-)
 create mode 100644 gooey-gui/app/components/bulkProgress/BulkProgressCard.css
 create mode 100644 gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
 create mode 100644 gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
 create mode 100644 gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
 create mode 100644 gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts
 create mode 100644 widgets/bulk_progress_display.py
 create mode 100644 widgets/bulk_progress_state.py

diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.css b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
new file mode 100644
index 000000000..702a82fb7
--- /dev/null
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
@@ -0,0 +1,508 @@
+.bulk-progress-card {
+  --bulk-progress-detail-label-width: 7.5rem;
+  background: #fff;
+  border: 1px solid #e4e4e7;
+  border-radius: 8px;
+  color: #070b1a;
+  margin: 0 0 1rem;
+  overflow: hidden;
+}
+
+.bulk-progress-card-running {
+  padding: 1.5rem;
+}
+
+.bulk-progress-running-header {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.bulk-progress-card-stopped {
+  background: #fff7d8;
+  border-color: #f0dc92;
+}
+
+.bulk-progress-card-error {
+  background: #fff4f2;
+  border-color: #f5b8b0;
+}
+
+.bulk-progress-card-complete {
+  background: #edf7e9;
+  border-color: #bdddb8;
+}
+
+.bulk-progress-main {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.bulk-progress-main-left {
+  flex: 0 0 auto;
+}
+
+.bulk-progress-main-right {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+.bulk-progress-ring {
+  border-radius: 50%;
+  display: grid;
+  flex: 0 0 auto;
+  height: 92px;
+  place-items: center;
+  position: relative;
+  width: 92px;
+}
+
+.bulk-progress-ring svg {
+  inset: 0;
+  overflow: visible;
+  position: absolute;
+}
+
+.bulk-progress-ring circle {
+  fill: none;
+  stroke-width: 8;
+}
+
+.bulk-progress-ring-track {
+  stroke: #e6e6e6;
+}
+
+.bulk-progress-ring-bar {
+  stroke: var(--bulk-progress-accent);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 2400ms cubic-bezier(0.22, 1, 0.36, 1);
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+}
+
+.bulk-progress-ring > div {
+  align-items: center;
+  background-color: #fff;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  height: 70px;
+  justify-content: center;
+  line-height: 1;
+  overflow: hidden;
+  text-align: center;
+  width: 70px;
+}
+
+.bulk-progress-card-stopped .bulk-progress-ring > div {
+  background-color: #fff7d8;
+}
+
+.bulk-progress-card-error .bulk-progress-ring > div {
+  background-color: #fff4f2;
+}
+
+.bulk-progress-ring strong {
+  font-size: 0.98rem;
+  line-height: 1;
+}
+
+.bulk-progress-meta,
+.bulk-progress-stat-caption {
+  color: #59617d;
+}
+
+.bulk-progress-copy {
+  --bulk-progress-dot-size: 0.65rem;
+  --bulk-progress-dot-gap: 0.55rem;
+  --bulk-progress-text-column-inset: calc(
+    var(--bulk-progress-dot-size) + var(--bulk-progress-dot-gap)
+  );
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding-top: 0.125rem;
+  text-align: left;
+  width: 100%;
+}
+
+.bulk-progress-kicker {
+  align-items: center;
+  display: flex;
+  font-size: 0.98rem;
+  gap: var(--bulk-progress-dot-gap, 0.55rem);
+}
+
+.bulk-progress-dot {
+  background: #d9a642;
+  border-radius: 999px;
+  flex-shrink: 0;
+  height: var(--bulk-progress-dot-size, 0.65rem);
+  margin-top: 0.085rem;
+  width: var(--bulk-progress-dot-size, 0.65rem);
+}
+
+.bulk-progress-card-running .bulk-progress-dot {
+  animation: bulk-progress-pulse 0.8s ease-in-out infinite;
+}
+
+.bulk-progress-card-error .bulk-progress-dot {
+  background: #b42318;
+}
+
+.bulk-progress-stop-icon {
+  color: #9d7b1f;
+  flex-shrink: 0;
+  font-size: var(--bulk-progress-dot-size, 0.65rem);
+  line-height: 1;
+  margin-top: 0.085rem;
+}
+
+.bulk-progress-headline {
+  align-self: stretch;
+  font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy,
+    "Space Grotesk", sans-serif;
+  font-size: 1.55rem;
+  line-height: 1.15;
+  margin: 0.55rem 0;
+  margin-inline-start: var(--bulk-progress-text-column-inset, 0);
+  text-align: left;
+}
+
+.bulk-progress-meta {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.9rem;
+  gap: 0.45rem;
+  justify-content: flex-start;
+  line-height: 1.35;
+  margin-inline-start: var(--bulk-progress-text-column-inset, 0);
+  text-align: left;
+}
+
+.bulk-progress-meta-item {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.bulk-progress-meta-separator {
+  color: #59617d;
+  white-space: nowrap;
+}
+
+.bulk-progress-detail {
+  border-top: 1px solid rgba(0, 0, 0, 0.09);
+  margin-top: 1.5rem;
+  padding: 1.45rem 0 0;
+}
+
+.bulk-progress-card-stopped .bulk-progress-detail,
+.bulk-progress-card-error .bulk-progress-detail {
+  margin-top: 1.25rem;
+  padding: 1rem 1.25rem 1.25rem;
+}
+
+.bulk-progress-card-stopped .bulk-progress-main,
+.bulk-progress-card-error .bulk-progress-main {
+  padding: 1.25rem;
+}
+
+.bulk-progress-current {
+  color: #59617d;
+  font-size: 1.08rem;
+  line-height: 1.25;
+  margin-bottom: 0.95rem;
+}
+
+.bulk-progress-current strong {
+  color: #070b1a;
+  font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy,
+    "Space Grotesk", sans-serif;
+  font-weight: 400;
+}
+
+.bulk-progress-workflow {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: nowrap;
+  font-size: 0.95rem;
+  gap: 0.35rem;
+  line-height: 1.3;
+  margin-bottom: 0.95rem;
+  min-width: 0;
+}
+
+.bulk-progress-workflow-main {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.bulk-progress-workflow-prefix {
+  color: #59617d;
+  flex: 0 0 var(--bulk-progress-detail-label-width);
+  white-space: nowrap;
+}
+
+.bulk-progress-detail-link {
+  color: #070b1a;
+  display: -webkit-inline-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  flex: 0 1 auto;
+  font-size: 0.95rem;
+  font-weight: 700;
+  min-width: 0;
+  overflow: hidden;
+  text-decoration: underline;
+  text-overflow: ellipsis;
+  text-underline-offset: 0.12em;
+  word-break: break-word;
+}
+
+.bulk-progress-detail-link:link,
+.bulk-progress-detail-link:visited,
+.bulk-progress-detail-link:hover,
+.bulk-progress-detail-link:active,
+.bulk-progress-detail-link:focus {
+  color: #070b1a;
+}
+
+.bulk-progress-workflow-title {
+  max-width: 100%;
+  vertical-align: bottom;
+  white-space: normal;
+}
+
+.bulk-progress-workflow-status {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.bulk-progress-input {
+  background: #fff;
+  border: 1px solid #e4e4e7;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  margin: 0 0 0.9rem;
+  overflow: hidden;
+  padding: 0.7rem 0.85rem;
+}
+
+.bulk-progress-input-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  line-height: 1.35;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.bulk-progress-input-text span,
+.bulk-progress-input > span {
+  color: #59617d;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.bulk-progress-last-completed {
+  align-items: baseline;
+  color: #59617d;
+  display: flex;
+  flex-wrap: nowrap;
+  font-size: 0.9rem;
+  gap: 0.45rem;
+  line-height: 1.35;
+  min-width: 0;
+}
+
+.bulk-progress-last-completed-label {
+  color: #59617d;
+  flex: 0 0 var(--bulk-progress-detail-label-width);
+  font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy,
+    "Space Grotesk", sans-serif;
+  font-size: 0.8rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.bulk-progress-card-stopped .bulk-progress-last-completed-label,
+.bulk-progress-card-error .bulk-progress-last-completed-label {
+  color: #9d7b1f;
+}
+
+.bulk-progress-last-completed-title {
+  max-width: 34ch;
+}
+
+.bulk-progress-last-completed-meta {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.bulk-progress-stop-pending {
+  background: #fff9e8;
+  border: 1px solid #efd893;
+  border-radius: 8px;
+  color: #6f5614;
+  font-size: 0.9rem;
+  line-height: 1.35;
+  margin: 0 0 0.9rem;
+  padding: 0.7rem 0.85rem;
+}
+
+.bulk-progress-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  padding: 0 1.25rem 1.25rem;
+}
+
+.bulk-progress-card-complete .bulk-progress-actions {
+  background: rgba(255, 255, 255, 0.35);
+  padding: 1.35rem 2.5rem;
+}
+
+.bulk-progress-action {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.55rem;
+  justify-content: center;
+  margin: 0;
+  white-space: normal;
+}
+
+.bulk-progress-complete-header {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  padding: 1.35rem 2.5rem;
+}
+
+.bulk-progress-status-icon {
+  background: #3f9438;
+  border-radius: 50%;
+  color: #fff;
+  display: grid;
+  flex: 0 0 auto;
+  height: 2rem;
+  place-items: center;
+  width: 2rem;
+}
+
+.bulk-progress-summary-grid {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  padding: 1.35rem 2.5rem;
+}
+
+.bulk-progress-stat-label {
+  color: #59617d;
+  font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy,
+    "Space Grotesk", sans-serif;
+  font-size: 0.85rem;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.bulk-progress-stat-value {
+  font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy,
+    "Space Grotesk", sans-serif;
+  font-size: 1.55rem;
+  line-height: 1.2;
+  margin: 0.45rem 0;
+}
+
+.bulk-progress-stat-caption {
+  font-size: 0.82rem;
+  line-height: 1.3;
+}
+
+@keyframes bulk-progress-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.35;
+    transform: scale(0.82);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bulk-progress-card-running .bulk-progress-dot {
+    animation: none;
+  }
+
+  .bulk-progress-ring-bar {
+    transition: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .bulk-progress-card-running {
+    padding: 1.25rem;
+  }
+
+  .bulk-progress-running-header {
+    align-items: flex-start;
+  }
+
+  .bulk-progress-main {
+    align-items: center;
+  }
+
+  .bulk-progress-ring {
+    height: 78px;
+    width: 78px;
+  }
+
+  .bulk-progress-ring > div {
+    height: 60px;
+    width: 60px;
+  }
+
+  .bulk-progress-ring strong {
+    font-size: 1rem;
+  }
+
+  .bulk-progress-headline,
+  .bulk-progress-stat-value {
+    font-size: 1.45rem;
+  }
+
+  .bulk-progress-summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .bulk-progress-complete-header,
+  .bulk-progress-summary-grid,
+  .bulk-progress-card-complete .bulk-progress-actions {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+}
+
+@media (max-width: 540px) {
+  .bulk-progress-running-header {
+    flex-direction: column;
+  }
+}
diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
new file mode 100644
index 000000000..e52eae783
--- /dev/null
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
@@ -0,0 +1,310 @@
+import { useEffect, useState } from "react";
+
+import { buildCardModel, snapshotTicksElapsed } from "./bulkProgressCardModel";
+import { formatCredits, formatElapsed } from "./bulkProgressFormat";
+import type {
+  BulkProgressCardProps,
+  DetailDisplay,
+  WorkflowDisplay,
+} from "./bulkProgress.types";
+
+import "./BulkProgressCard.css";
+
+export function BulkProgressCard({
+  snapshot,
+  rerunAllKey,
+}: BulkProgressCardProps) {
+  const liveElapsedSeconds = useLiveElapsedSeconds(
+    snapshot.elapsedSeconds,
+    snapshotTicksElapsed(snapshot)
+  );
+  const model = buildCardModel(snapshot, liveElapsedSeconds);
+
+  if (model.kind === "complete") {
+    return (
+      <div className="bulk-progress-card bulk-progress-card-complete">
+        <div className="bulk-progress-complete-header">
+          <span className="bulk-progress-status-icon">
+            <i className="fa-solid fa-check" />
+          </span>
+          <div>
+            <div className="bulk-progress-kicker">
+              <strong>{model.title}</strong>
+            </div>
+          </div>
+        </div>
+        <div className="bulk-progress-summary-grid">
+          <SummaryStat label="Total runs" value={model.totalRuns}>
+            all completed
+          </SummaryStat>
+          <SummaryStat label="Total time" value={model.totalTime}>
+            {model.averageRunTime}
+          </SummaryStat>
+          <SummaryStat label="Credits" value={model.credits}>
+            {model.averageCredits}
+          </SummaryStat>
+          <SummaryStat label="Rows" value={model.totalRows}>
+            {model.rowsCaption}
+          </SummaryStat>
+        </div>
+        <RerunAllActions rerunAllKey={rerunAllKey} showRerun={model.showRerun} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`bulk-progress-card bulk-progress-card-${model.cardClass}`}>
+      <div className="bulk-progress-running-header">
+        <div className="bulk-progress-main">
+          <div className="bulk-progress-main-left">
+            <ProgressRing
+              ringPercent={model.ringPercent}
+              ringLabel={model.ringLabel}
+              ringAccent={model.ringAccent}
+            />
+          </div>
+          <div className="bulk-progress-main-right">
+            <div className="bulk-progress-copy">
+              <div className="bulk-progress-kicker">
+                {model.marker === "stop" && (
+                  <i
+                    aria-hidden="true"
+                    className="fa-solid fa-circle-stop bulk-progress-stop-icon"
+                  />
+                )}
+                {model.marker === "dot" && <span className="bulk-progress-dot" />}
+                <strong>{model.title}</strong>
+              </div>
+              <div className="bulk-progress-headline">{model.headline}</div>
+              <MetaRow parts={model.metaParts} />
+            </div>
+          </div>
+        </div>
+      </div>
+      {model.detail ? <ProgressDetail detail={model.detail} /> : null}
+      <RerunAllActions rerunAllKey={rerunAllKey} showRerun={model.showRerun} />
+    </div>
+  );
+}
+
+function RerunAllActions({
+  rerunAllKey,
+  showRerun,
+}: {
+  rerunAllKey?: string | null;
+  showRerun: boolean;
+}) {
+  if (!rerunAllKey || !showRerun) {
+    return null;
+  }
+
+  return (
+    <div className="bulk-progress-actions">
+      <button
+        className="btn btn-theme btn-tertiary bulk-progress-action"
+        name={rerunAllKey}
+        type="submit"
+        value="1"
+      >
+        <i aria-hidden="true" className="fa-solid fa-rotate-right" />
+        Re-run all
+      </button>
+    </div>
+  );
+}
+
+function useLiveElapsedSeconds(
+  elapsedSeconds: number | null | undefined,
+  isTicking: boolean
+) {
+  const [liveElapsedSeconds, setLiveElapsedSeconds] = useState(elapsedSeconds);
+
+  useEffect(() => {
+    setLiveElapsedSeconds(elapsedSeconds);
+  }, [elapsedSeconds]);
+
+  useEffect(() => {
+    if (!isTicking || elapsedSeconds == null) {
+      return;
+    }
+
+    const startedAt = Date.now() - elapsedSeconds * 1000;
+    const intervalId = window.setInterval(() => {
+      setLiveElapsedSeconds((Date.now() - startedAt) / 1000);
+    }, 1000);
+
+    return () => window.clearInterval(intervalId);
+  }, [elapsedSeconds, isTicking]);
+
+  return liveElapsedSeconds;
+}
+
+function SummaryStat({
+  label,
+  value,
+  children,
+}: {
+  label: string;
+  value: number | string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <div className="bulk-progress-stat-label">{label}</div>
+      <div className="bulk-progress-stat-value">{value}</div>
+      <div className="bulk-progress-stat-caption">{children}</div>
+    </div>
+  );
+}
+
+function ProgressRing({
+  ringPercent,
+  ringLabel,
+  ringAccent,
+}: {
+  ringPercent: number;
+  ringLabel: string;
+  ringAccent: string;
+}) {
+  const circumference = 251.33;
+  const boundedRingPercent = Math.max(Math.min(ringPercent, 100), 0);
+  const remaining = circumference - (circumference * boundedRingPercent) / 100;
+
+  return (
+    <div
+      className="bulk-progress-ring"
+      style={{ ["--bulk-progress-accent"]: ringAccent } as React.CSSProperties}
+    >
+      <svg viewBox="0 0 100 100" aria-hidden="true">
+        <circle className="bulk-progress-ring-track" cx="50" cy="50" r="40" />
+        <circle
+          className="bulk-progress-ring-bar"
+          cx="50"
+          cy="50"
+          r="40"
+          strokeDasharray={circumference.toFixed(2)}
+          strokeDashoffset={remaining.toFixed(2)}
+        />
+      </svg>
+      <div>
+        <strong>{ringLabel}</strong>
+      </div>
+    </div>
+  );
+}
+
+function MetaRow({ parts }: { parts: string[] }) {
+  const nodes: React.ReactNode[] = [];
+  parts.forEach((part, index) => {
+    if (index) {
+      nodes.push(
+        <span
+          aria-hidden="true"
+          className="bulk-progress-meta-separator"
+          key={`separator-${index}`}
+        >
+          &middot;
+        </span>
+      );
+    }
+    nodes.push(
+      <span className="bulk-progress-meta-item" key={`part-${index}`}>
+        {part}
+      </span>
+    );
+  });
+
+  return <div className="bulk-progress-meta">{nodes}</div>;
+}
+
+function ProgressDetail({ detail }: { detail: DetailDisplay }) {
+  return (
+    <div className="bulk-progress-detail">
+      <div className="bulk-progress-current">
+        <strong>{detail.rowLabel}</strong>
+      </div>
+      {detail.showStoppingMessage ? (
+        <div className="bulk-progress-stop-pending">
+          We're trying our best to cancel this run, please be patient.
+        </div>
+      ) : null}
+      {detail.workflow ? (
+        <WorkflowRow workflow={detail.workflow} />
+      ) : null}
+      {detail.inputPrompt ? (
+        <div className="bulk-progress-input">
+          <div className="bulk-progress-input-text">
+            <span>input_prompt:</span> {detail.inputPrompt}
+          </div>
+        </div>
+      ) : null}
+      {detail.inputAudioUrl ? (
+        <div className="bulk-progress-input">
+          <span>input_audio:</span>{" "}
+          <a
+            href={detail.inputAudioUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View audio &rarr;
+          </a>
+        </div>
+      ) : null}
+      {detail.lastCompleted ? (
+        <LastCompleted lastCompleted={detail.lastCompleted} />
+      ) : null}
+    </div>
+  );
+}
+
+function WorkflowRow({ workflow }: { workflow: WorkflowDisplay }) {
+  return (
+    <div className="bulk-progress-workflow">
+      <span className="bulk-progress-workflow-main">
+        <span className="bulk-progress-workflow-prefix">{workflow.prefix}</span>
+        <a
+          className="bulk-progress-detail-link bulk-progress-workflow-title"
+          href={workflow.url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {workflow.title}
+        </a>
+      </span>
+      {workflow.failedAt != null ? (
+        <span className="bulk-progress-workflow-status">
+          &middot; failed at {formatElapsed(workflow.failedAt)}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function LastCompleted({
+  lastCompleted,
+}: {
+  lastCompleted: NonNullable<DetailDisplay["lastCompleted"]>;
+}) {
+  const { credits, runTimeSeconds, title, url } = lastCompleted;
+  return (
+    <div className="bulk-progress-last-completed">
+      <span className="bulk-progress-last-completed-label">Last completed</span>
+      <a
+        className="bulk-progress-detail-link bulk-progress-last-completed-title"
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {title}
+      </a>
+      {runTimeSeconds != null || credits != null ? (
+        <span className="bulk-progress-last-completed-meta">
+          {credits != null ? <> &middot; {formatCredits(credits)}</> : null}
+          {runTimeSeconds != null ? (
+            <> &middot; {formatElapsed(runTimeSeconds)}</>
+          ) : null}
+        </span>
+      ) : null}
+    </div>
+  );
+}
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
new file mode 100644
index 000000000..966c9012a
--- /dev/null
+++ b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
@@ -0,0 +1,88 @@
+// Keep in sync with widgets/bulk_progress_display.py (BulkProgressSnapshot).
+
+export type BulkRunnerRunState =
+  | "running"
+  | "stopping"
+  | "evaluating"
+  | "complete"
+  | "error"
+  | "stopped";
+
+export type BulkProgressSnapshot = {
+  runState: BulkRunnerRunState;
+  elapsedSeconds?: number | null;
+  completedUnitRuns: number;
+  totalUnitRuns: number;
+  totalRows: number;
+  currentRowNumber: number;
+  currentWorkflowNumber: number;
+  totalWorkflows: number;
+  currentWorkflowTitle: string;
+  currentWorkflowUrl: string;
+  currentWorkflowRunTimeSeconds?: number | null;
+  creditsUsed?: number | null;
+  evalCurrent?: number;
+  evalTotal?: number;
+  evalWorkflowTitle?: string;
+  inputPrompt?: string;
+  inputAudioUrl?: string;
+  lastCompletedWorkflowTitle?: string;
+  lastCompletedWorkflowUrl?: string;
+  lastCompletedRunTimeSeconds?: number | null;
+  lastCompletedCredits?: number | null;
+};
+
+export type BulkProgressCardProps = {
+  snapshot: BulkProgressSnapshot;
+  rerunAllKey?: string | null;
+};
+
+export type WorkflowDisplay = {
+  prefix: string;
+  title: string;
+  url: string;
+  failedAt: number | null;
+};
+
+export type DetailDisplay = {
+  rowLabel: string;
+  showStoppingMessage: boolean;
+  workflow: WorkflowDisplay | null;
+  inputPrompt?: string;
+  inputAudioUrl?: string;
+  lastCompleted?: {
+    title: string;
+    url: string;
+    credits?: number | null;
+    runTimeSeconds?: number | null;
+  };
+};
+
+export type CompleteCardModel = {
+  kind: "complete";
+  title: string;
+  totalRuns: number;
+  totalRows: number;
+  rowsCaption: string;
+  totalTime: string;
+  averageRunTime: string;
+  credits: string;
+  averageCredits: string;
+  showRerun: boolean;
+};
+
+export type ActiveCardModel = {
+  kind: "active";
+  cardClass: string;
+  title: string;
+  headline: string;
+  metaParts: string[];
+  marker: "dot" | "stop" | null;
+  ringPercent: number;
+  ringLabel: string;
+  ringAccent: string;
+  detail: DetailDisplay | null;
+  showRerun: boolean;
+};
+
+export type CardModel = CompleteCardModel | ActiveCardModel;
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
new file mode 100644
index 000000000..a1f90a891
--- /dev/null
+++ b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
@@ -0,0 +1,339 @@
+import {
+  formatAverageCredits,
+  formatAverageRunTime,
+  formatCredits,
+  formatElapsed,
+} from "./bulkProgressFormat";
+import type {
+  ActiveCardModel,
+  BulkProgressSnapshot,
+  BulkRunnerRunState,
+  CardModel,
+  CompleteCardModel,
+  DetailDisplay,
+  WorkflowDisplay,
+} from "./bulkProgress.types";
+
+type ActiveRunState = Exclude<BulkRunnerRunState, "complete">;
+
+type ActiveRunStateProfile = {
+  title: string;
+  tickElapsed: boolean;
+  showRerun: boolean;
+  marker: ActiveCardModel["marker"];
+  cardClass: string;
+  ringAccent: string;
+};
+
+const ACTIVE_RUN_STATE_PROFILE: Record<ActiveRunState, ActiveRunStateProfile> = {
+  running: {
+    title: "Running...",
+    tickElapsed: true,
+    showRerun: false,
+    marker: "dot",
+    cardClass: "running",
+    ringAccent: "#070b1a",
+  },
+  stopping: {
+    title: "Stopping...",
+    tickElapsed: true,
+    showRerun: false,
+    marker: "dot",
+    cardClass: "running",
+    ringAccent: "#070b1a",
+  },
+  evaluating: {
+    title: "Running evals...",
+    tickElapsed: true,
+    showRerun: false,
+    marker: "dot",
+    cardClass: "running",
+    ringAccent: "#070b1a",
+  },
+  error: {
+    title: "Bulk run failed",
+    tickElapsed: false,
+    showRerun: true,
+    marker: "dot",
+    cardClass: "error",
+    ringAccent: "#b42318",
+  },
+  stopped: {
+    title: "Bulk run stopped",
+    tickElapsed: false,
+    showRerun: true,
+    marker: "stop",
+    cardClass: "stopped",
+    ringAccent: "#9d7b1f",
+  },
+};
+
+export function buildCardModel(
+  snapshot: BulkProgressSnapshot,
+  liveElapsedSeconds: number | null | undefined
+): CardModel {
+  switch (snapshot.runState) {
+    case "complete":
+      return buildCompleteModel(snapshot);
+    case "evaluating":
+      return buildEvaluatingModel(snapshot, liveElapsedSeconds);
+    case "running":
+      return buildInProgressUnitRunModel(snapshot, {
+        runState: "running",
+        liveElapsedSeconds,
+      });
+    case "stopping":
+      return buildInProgressUnitRunModel(snapshot, {
+        runState: "stopping",
+        liveElapsedSeconds,
+      });
+    case "stopped":
+      return buildTerminalUnitRunModel(snapshot, "stopped");
+    case "error":
+      return buildTerminalUnitRunModel(snapshot, "error");
+  }
+}
+
+export function snapshotTicksElapsed(snapshot: BulkProgressSnapshot): boolean {
+  return (
+    snapshot.runState !== "complete" &&
+    ACTIVE_RUN_STATE_PROFILE[snapshot.runState].tickElapsed
+  );
+}
+
+function buildCompleteModel(snapshot: BulkProgressSnapshot): CompleteCardModel {
+  return {
+    kind: "complete",
+    title: "Bulk run complete",
+    totalRuns: snapshot.totalUnitRuns,
+    totalRows: snapshot.totalRows,
+    rowsCaption: `× ${snapshot.totalWorkflows} workflows`,
+    totalTime:
+      snapshot.elapsedSeconds != null
+        ? formatElapsed(snapshot.elapsedSeconds)
+        : "-",
+    averageRunTime: formatAverageRunTime(snapshot),
+    credits:
+      snapshot.creditsUsed != null ? String(snapshot.creditsUsed) : "-",
+    averageCredits: formatAverageCredits(snapshot),
+    showRerun: true,
+  };
+}
+
+function buildEvaluatingModel(
+  snapshot: BulkProgressSnapshot,
+  liveElapsedSeconds: number | null | undefined
+): ActiveCardModel {
+  const profile = ACTIVE_RUN_STATE_PROFILE.evaluating;
+  const evalCounts =
+    snapshot.evalCurrent != null && snapshot.evalTotal != null
+      ? { current: snapshot.evalCurrent, total: snapshot.evalTotal }
+      : null;
+  const ring = getEvalRingDisplay(evalCounts);
+  const metaParts: string[] = [];
+
+  if (evalCounts) {
+    metaParts.push(`${evalCounts.current} of ${evalCounts.total}`);
+  }
+  appendCreditsAndElapsed(metaParts, snapshot, liveElapsedSeconds);
+
+  return activeFromProfile(profile, {
+    headline: snapshot.evalWorkflowTitle || "Eval workflow",
+    metaParts,
+    ringPercent: ring.ringPercent,
+    ringLabel: ring.ringLabel,
+    detail: null,
+  });
+}
+
+function buildInProgressUnitRunModel(
+  snapshot: BulkProgressSnapshot,
+  variant: {
+    runState: "running" | "stopping";
+    liveElapsedSeconds: number | null | undefined;
+  }
+): ActiveCardModel {
+  const profile = ACTIVE_RUN_STATE_PROFILE[variant.runState];
+  const ring = unitRunRingFields(snapshot);
+  const metaParts = [
+    `${snapshot.completedUnitRuns} of ${snapshot.totalUnitRuns} total runs`,
+  ];
+  appendCreditsAndElapsed(metaParts, snapshot, variant.liveElapsedSeconds);
+
+  return activeFromProfile(profile, {
+    ...ring,
+    metaParts,
+    detail: buildDetail(snapshot, {
+      rowLabel: `Processing row ${snapshot.currentRowNumber} of ${snapshot.totalRows}`,
+      showStoppingMessage: variant.runState === "stopping",
+      capitalized: false,
+      failedAt: null,
+    }),
+  });
+}
+
+function buildTerminalUnitRunModel(
+  snapshot: BulkProgressSnapshot,
+  runState: "stopped" | "error"
+): ActiveCardModel {
+  const profile = ACTIVE_RUN_STATE_PROFILE[runState];
+  const ring = unitRunRingFields(snapshot);
+  const remaining = Math.max(
+    snapshot.totalUnitRuns - snapshot.completedUnitRuns,
+    0
+  );
+  const metaParts = [
+    `${snapshot.completedUnitRuns} of ${snapshot.totalUnitRuns} Total runs (${remaining} remaining)`,
+  ];
+  const elapsed = runState === "stopped" ? snapshot.elapsedSeconds : undefined;
+  appendCreditsAndElapsed(metaParts, snapshot, elapsed);
+  const rowLabel =
+    runState === "error"
+      ? `Failed on row ${snapshot.currentRowNumber} of ${snapshot.totalRows}`
+      : `Started row ${snapshot.currentRowNumber} of ${snapshot.totalRows}`;
+
+  return activeFromProfile(profile, {
+    ...ring,
+    metaParts,
+    detail: buildDetail(snapshot, {
+      rowLabel,
+      showStoppingMessage: false,
+      capitalized: true,
+      failedAt:
+        runState === "error"
+          ? snapshot.currentWorkflowRunTimeSeconds ?? null
+          : null,
+    }),
+  });
+}
+
+function activeFromProfile(
+  profile: ActiveRunStateProfile,
+  fields: {
+    headline: string;
+    metaParts: string[];
+    ringPercent: number;
+    ringLabel: string;
+    detail: DetailDisplay | null;
+  }
+): ActiveCardModel {
+  return {
+    kind: "active",
+    cardClass: profile.cardClass,
+    title: profile.title,
+    headline: fields.headline,
+    metaParts: fields.metaParts,
+    marker: profile.marker,
+    ringPercent: fields.ringPercent,
+    ringLabel: fields.ringLabel,
+    ringAccent: profile.ringAccent,
+    detail: fields.detail,
+    showRerun: profile.showRerun,
+  };
+}
+
+function appendCreditsAndElapsed(
+  metaParts: string[],
+  snapshot: BulkProgressSnapshot,
+  elapsedSeconds: number | null | undefined
+) {
+  if (snapshot.creditsUsed != null) {
+    metaParts.push(formatCredits(snapshot.creditsUsed));
+  }
+  if (elapsedSeconds != null) {
+    metaParts.push(formatElapsed(elapsedSeconds));
+  }
+}
+
+function buildDetail(
+  snapshot: BulkProgressSnapshot,
+  {
+    rowLabel,
+    showStoppingMessage,
+    capitalized,
+    failedAt,
+  }: {
+    rowLabel: string;
+    showStoppingMessage: boolean;
+    capitalized: boolean;
+    failedAt: number | null;
+  }
+): DetailDisplay {
+  const lastTitle = snapshot.lastCompletedWorkflowTitle;
+  const lastUrl = snapshot.lastCompletedWorkflowUrl;
+
+  return {
+    rowLabel,
+    showStoppingMessage,
+    workflow: buildWorkflowDisplay(snapshot, { capitalized, failedAt }),
+    inputPrompt: snapshot.inputPrompt,
+    inputAudioUrl: snapshot.inputAudioUrl,
+    lastCompleted:
+      lastTitle && lastUrl
+        ? {
+            title: lastTitle,
+            url: lastUrl,
+            credits: snapshot.lastCompletedCredits,
+            runTimeSeconds: snapshot.lastCompletedRunTimeSeconds,
+          }
+        : undefined,
+  };
+}
+
+function buildWorkflowDisplay(
+  snapshot: BulkProgressSnapshot,
+  options: { capitalized: boolean; failedAt: number | null }
+): WorkflowDisplay | null {
+  if (!snapshot.currentWorkflowTitle || !snapshot.currentWorkflowUrl) {
+    return null;
+  }
+
+  const workflowNumber = Math.max(snapshot.currentWorkflowNumber, 1);
+  const prefix = options.capitalized
+    ? `Workflow ${workflowNumber} of ${snapshot.totalWorkflows}:`
+    : `workflow ${workflowNumber} of ${snapshot.totalWorkflows}`;
+
+  return {
+    prefix,
+    title: snapshot.currentWorkflowTitle,
+    url: snapshot.currentWorkflowUrl,
+    failedAt: options.failedAt,
+  };
+}
+
+function getEvalRingDisplay(
+  evalCounts: { current: number; total: number } | null
+): { ringPercent: number; ringLabel: string } {
+  if (!evalCounts) {
+    return { ringPercent: 0, ringLabel: "…" };
+  }
+  if (!evalCounts.total) {
+    return {
+      ringPercent: 0,
+      ringLabel: `${evalCounts.current}/${evalCounts.total}`,
+    };
+  }
+  const ringPercent = Math.round((evalCounts.current / evalCounts.total) * 100);
+  return {
+    ringPercent,
+    ringLabel: `${evalCounts.current}/${evalCounts.total}`,
+  };
+}
+
+function unitRunRingFields(snapshot: BulkProgressSnapshot) {
+  const ringPercent = unitRunPercent(snapshot);
+  return {
+    ringPercent,
+    ringLabel: `${ringPercent}%`,
+    headline: `${ringPercent}% Completed`,
+  };
+}
+
+function unitRunPercent(snapshot: BulkProgressSnapshot) {
+  if (!snapshot.totalUnitRuns) {
+    return 0;
+  }
+  return Math.round(
+    (snapshot.completedUnitRuns / snapshot.totalUnitRuns) * 100
+  );
+}
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts b/gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts
new file mode 100644
index 000000000..fe6927bfe
--- /dev/null
+++ b/gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts
@@ -0,0 +1,42 @@
+import type { BulkProgressSnapshot } from "./bulkProgress.types";
+
+export function formatElapsed(seconds: number) {
+  if (seconds < 60) {
+    return `${Math.round(seconds)}s`;
+  }
+
+  const roundedSeconds = Math.round(seconds) % 60;
+  const totalMinutes = Math.floor(Math.round(seconds) / 60);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (hours) {
+    return `${hours}h ${minutes}m`;
+  }
+  if (totalMinutes) {
+    return `${totalMinutes}m ${roundedSeconds}s`;
+  }
+  return `${roundedSeconds}s`;
+}
+
+export function formatCredits(credits: number | null | undefined) {
+  if (credits == null) {
+    return "-";
+  }
+  return `${credits} Cr`;
+}
+
+export function formatAverageCredits(snapshot: BulkProgressSnapshot) {
+  if (snapshot.creditsUsed == null || snapshot.totalUnitRuns <= 0) {
+    return "-";
+  }
+  return `${(snapshot.creditsUsed / snapshot.totalUnitRuns).toFixed(1)} Cr / run`;
+}
+
+export function formatAverageRunTime(snapshot: BulkProgressSnapshot) {
+  if (snapshot.elapsedSeconds == null || snapshot.totalUnitRuns <= 0) {
+    return "-";
+  }
+  return `${(snapshot.elapsedSeconds / snapshot.totalUnitRuns).toFixed(
+    1
+  )}s avg / run`;
+}
diff --git a/gooey-gui/app/components/index.ts b/gooey-gui/app/components/index.ts
index 7b885f902..5b4c50f6e 100644
--- a/gooey-gui/app/components/index.ts
+++ b/gooey-gui/app/components/index.ts
@@ -7,6 +7,7 @@ export type CustomComponentProps = {
   state: Record<string, any>;
 };
 
+export * from "./bulkProgress/BulkProgressCard";
 export * from "./ComposioAuthRequired";
 export * from "./ExploreBuilderPrompt";
 export * from "./GooeyBuilderInlineEmbed";
diff --git a/recipes/BulkRunner.py b/recipes/BulkRunner.py
index b91b547f1..1d2c3a28e 100644
--- a/recipes/BulkRunner.py
+++ b/recipes/BulkRunner.py
@@ -33,6 +33,12 @@
     edit_done_button,
 )
 from recipes.DocSearch import render_documents
+from widgets.bulk_progress_display import render_bulk_runner_progress
+from widgets.bulk_progress_state import (
+    BulkEvalProgress,
+    BulkProgress,
+    BulkProgressTracker,
+)
 
 if typing.TYPE_CHECKING:
     import pandas as pd
@@ -87,6 +93,8 @@ class RequestModel(BasePage.RequestModel):
 
     class ResponseModel(BaseModel):
         output_documents: list[HttpUrlStr]
+        bulk_progress: BulkProgress | None = None
+        eval_progress: BulkEvalProgress | None = None
 
         eval_runs: list[HttpUrlStr] | None = Field(
             None,
@@ -242,6 +250,10 @@ def render_run_preview_output(self, state: dict):
         render_documents(state)
 
     def render_output(self):
+        render_bulk_runner_progress(
+            is_cancelled=bool(self.current_sr and self.current_sr.is_cancelled),
+        )
+
         eval_runs = gui.session_state.get("eval_runs")
 
         if eval_runs:
@@ -275,6 +287,38 @@ def render_output(self):
                 )
                 gui.data_table(file)
 
+    def _render_running_output(self):
+        if gui.session_state.get("bulk_progress"):
+            return
+
+        super()._render_running_output()
+
+    def render_is_cancelled(self):
+        if gui.session_state.get("bulk_progress"):
+            return
+        super().render_is_cancelled()
+
+    def get_run_cost_display(self) -> str:
+        progress = gui.session_state.get("bulk_progress")
+        if not progress:
+            return ""
+        if progress["completed_unit_runs"] >= progress["total_unit_runs"]:
+            return ""
+
+        run_cost = progress.get("credits_used") or 0
+        url = self.get_credits_click_url()
+        ret = f'Run cost = <a href="{url}">{run_cost} credits</a>'
+
+        cost_note = self.get_cost_note()
+        if cost_note:
+            ret += f" ({cost_note.strip()})"
+
+        additional_notes = self.additional_notes()
+        if additional_notes:
+            ret += f" \n{additional_notes}"
+
+        return ret
+
     def run_v2(
         self,
         request: "BulkRunnerPage.RequestModel",
@@ -284,9 +328,17 @@ def run_v2(
 
         response.output_documents = []
         array_columns = set()
+        dfs = [read_df_any(doc) for doc in request.documents]
+        total_rows = sum(len(df) for df in dfs)
+        total_row_groups = get_bulk_total_row_groups(dfs, request)
+        progress = BulkProgressTracker(
+            total_rows=total_rows,
+            total_row_groups=total_row_groups,
+            total_workflows=len(request.run_urls),
+        )
 
-        for doc_ix, doc in enumerate(request.documents):
-            df = read_df_any(doc)
+        row_offset = 0
+        for doc_ix, df in enumerate(dfs):
             in_recs = df.to_dict(orient="records")
             out_recs = []
 
@@ -297,28 +349,30 @@ def run_v2(
             )
             response.output_documents.append(f)
 
-            df_slices = list(slice_request_df(df, request))
-            for slice_ix, (df_ix, arr_len) in enumerate(df_slices):
+            for df_ix, arr_len in slice_request_df(df, request):
                 rec_ix = len(out_recs)
                 out_recs.extend(in_recs[df_ix : df_ix + arr_len])
+                current_row_number = row_offset + min(df_ix + arr_len, len(df))
 
                 used_col_names = set()
                 for url_ix, request_body, page_cls, sr, pr in build_requests_for_df(
                     df, request, df_ix, arr_len, array_columns
                 ):
-                    progress = round(
-                        (slice_ix + url_ix)
-                        / (len(df_slices) + len(request.run_urls))
-                        * 100
-                    )
-                    yield f"{progress}%"
-
                     result, sr = sr.submit_api_call(
                         workspace=self.current_workspace,
                         current_user=self.request.user,
                         request_body=request_body,
                         parent_pr=pr,
                     )
+                    yield progress.workflow_started(
+                        response,
+                        current_row_number=current_row_number,
+                        workflow_number=url_ix + 1,
+                        page_cls=page_cls,
+                        sr=sr,
+                        pr=pr,
+                        request_body=request_body,
+                    )
                     sr.wait_for_celery_result(result)
 
                     state = sr.to_dict()
@@ -373,14 +427,34 @@ def run_v2(
                         content_type="text/csv",
                     )
                     response.output_documents[doc_ix] = f
+                    yield progress.workflow_completed(
+                        response,
+                        page_cls=page_cls,
+                        sr=sr,
+                        pr=pr,
+                        request_body=request_body,
+                        arr_len=arr_len,
+                        workflow_run_time_seconds=state["run_time"],
+                        workflow_credits=sr.price,
+                        error_msg=sr.error_msg,
+                    )
+
+            row_offset += len(df)
 
         if not request.eval_urls:
             return
 
         response.eval_runs = []
-        for url in request.eval_urls:
+        total_evals = len(request.eval_urls)
+        for eval_ix, url in enumerate(request.eval_urls):
             page_cls, sr, pr = url_to_runs(url)
-            yield f"Running {get_title_breadcrumbs(page_cls, sr, pr).title_with_prefix()}..."
+            title = get_title_breadcrumbs(page_cls, sr, pr).title_with_prefix()
+            yield progress.eval_started(
+                response,
+                current=eval_ix + 1,
+                total=total_evals,
+                workflow_title=title,
+            )
             request_body = page_cls.RequestModel(
                 documents=response.output_documents,
                 array_columns=array_columns or None,
@@ -394,6 +468,8 @@ def run_v2(
             sr.wait_for_celery_result(result)
             response.eval_runs.append(sr.get_app_url())
 
+        progress.evals_completed(response)
+
     def render_run_url_inputs(self, key: str, del_key: str, d: dict):
         from daras_ai_v2.all_pages import all_home_pages
 
@@ -472,6 +548,12 @@ def render_eval_url_inputs(self, key: str, del_key: str | None, d: dict):
         )
 
 
+def get_bulk_total_row_groups(
+    dfs: list[typing.Any], request: BulkRunnerPage.RequestModel
+) -> int:
+    return sum(1 for df in dfs for _ in slice_request_df(df, request))
+
+
 def build_requests_for_df(df, request, df_ix, arr_len, array_columns):
     for url_ix, url in enumerate(request.run_urls):
         page_cls, sr, pr = url_to_runs(url)
diff --git a/widgets/bulk_progress_display.py b/widgets/bulk_progress_display.py
new file mode 100644
index 000000000..370483fcd
--- /dev/null
+++ b/widgets/bulk_progress_display.py
@@ -0,0 +1,180 @@
+from __future__ import annotations
+
+import datetime
+from typing import Literal
+
+import gooey_gui as gui
+from typing_extensions import NotRequired, TypedDict
+
+from daras_ai_v2.base import StateKeys
+from widgets.bulk_progress_state import (
+    BulkEvalProgress,
+    BulkProgress,
+    coerce_seconds,
+    is_bulk_progress_complete,
+)
+
+BULK_RERUN_ALL_KEY = "-submit-workflow"
+
+BulkRunnerRunState = Literal[
+    "running", "stopping", "evaluating", "complete", "error", "stopped"
+]
+
+
+# Keep in sync with gooey-gui/app/components/bulkProgress/bulkProgress.types.ts (BulkProgressSnapshot).
+class BulkProgressSnapshot(TypedDict, total=False):
+    runState: BulkRunnerRunState
+    elapsedSeconds: float | None
+    completedUnitRuns: int
+    totalUnitRuns: int
+    totalRows: int
+    currentRowNumber: int
+    currentWorkflowNumber: int
+    totalWorkflows: int
+    currentWorkflowTitle: str
+    currentWorkflowUrl: str
+    currentWorkflowRunTimeSeconds: NotRequired[float | None]
+    creditsUsed: NotRequired[int]
+    evalCurrent: NotRequired[int]
+    evalTotal: NotRequired[int]
+    evalWorkflowTitle: NotRequired[str]
+    inputPrompt: NotRequired[str]
+    inputAudioUrl: NotRequired[str]
+    lastCompletedWorkflowTitle: NotRequired[str]
+    lastCompletedWorkflowUrl: NotRequired[str]
+    lastCompletedRunTimeSeconds: NotRequired[float | None]
+    lastCompletedCredits: NotRequired[int | None]
+
+
+def get_bulk_runner_run_state(
+    *,
+    progress: BulkProgress | None,
+    is_cancelled: bool,
+    is_running: bool,
+    error_msg: str | None,
+) -> BulkRunnerRunState | None:
+    if not progress:
+        return None
+
+    bulk_complete = is_bulk_progress_complete(progress)
+
+    if is_running and is_cancelled:
+        return "stopping"
+
+    if is_running and bulk_complete:
+        if progress["phase"] == "evaluating":
+            return progress["phase"]
+        return "complete"
+
+    if is_running:
+        return "running"
+
+    if error_msg:
+        return "error"
+
+    if bulk_complete and not is_running:
+        return "complete"
+
+    return "stopped"
+
+
+def get_bulk_elapsed_seconds(
+    *,
+    is_running: bool,
+    run_time: float | datetime.timedelta | None,
+    created_at: datetime.datetime | str | None,
+) -> float | None:
+    seconds = coerce_seconds(run_time)
+    if seconds is not None:
+        return seconds
+
+    if not is_running or not created_at:
+        return None
+
+    if isinstance(created_at, str):
+        created_at = datetime.datetime.fromisoformat(created_at)
+    now = datetime.datetime.now(created_at.tzinfo)
+    return max((now - created_at).total_seconds(), 0)
+
+
+def render_bulk_runner_progress(*, is_cancelled: bool) -> None:
+    session = gui.session_state
+    progress = session.get("bulk_progress")
+    is_running = bool(session.get(StateKeys.run_status))
+    error_msg = session.get(StateKeys.error_msg)
+    run_state = get_bulk_runner_run_state(
+        progress=progress,
+        is_cancelled=is_cancelled,
+        is_running=is_running,
+        error_msg=error_msg,
+    )
+    if not progress or not run_state:
+        return
+
+    elapsed_seconds = get_bulk_elapsed_seconds(
+        is_running=is_running,
+        run_time=session.get(StateKeys.run_time),
+        created_at=session.get(StateKeys.created_at),
+    )
+    snapshot = build_bulk_progress_snapshot(
+        progress=progress,
+        run_state=run_state,
+        elapsed_seconds=elapsed_seconds,
+        eval_progress=session.get("eval_progress")
+        if run_state == "evaluating"
+        else None,
+    )
+    gui.component(
+        "BulkProgressCard",
+        snapshot=snapshot,
+        rerunAllKey=BULK_RERUN_ALL_KEY,
+    )
+
+
+def build_bulk_progress_snapshot(
+    *,
+    progress: BulkProgress,
+    run_state: BulkRunnerRunState,
+    elapsed_seconds: float | None,
+    eval_progress: BulkEvalProgress | None = None,
+) -> BulkProgressSnapshot:
+    snapshot: BulkProgressSnapshot = {
+        "runState": run_state,
+        "elapsedSeconds": elapsed_seconds,
+        "completedUnitRuns": progress["completed_unit_runs"],
+        "totalUnitRuns": progress["total_unit_runs"],
+        "totalRows": progress["total_rows"],
+        "currentRowNumber": progress["current_row_number"],
+        "currentWorkflowNumber": progress["current_workflow_number"],
+        "totalWorkflows": progress["total_workflows"],
+        "currentWorkflowTitle": progress["workflow_title"],
+        "currentWorkflowUrl": progress["workflow_url"],
+    }
+    if "workflow_run_time_seconds" in progress:
+        snapshot["currentWorkflowRunTimeSeconds"] = progress[
+            "workflow_run_time_seconds"
+        ]
+    if "credits_used" in progress:
+        snapshot["creditsUsed"] = progress["credits_used"]
+    if eval_progress:
+        snapshot["evalCurrent"] = eval_progress["current"]
+        snapshot["evalTotal"] = eval_progress["total"]
+        snapshot["evalWorkflowTitle"] = eval_progress["workflow_title"]
+    if input_prompt := progress.get("input_prompt"):
+        snapshot["inputPrompt"] = input_prompt
+    if input_audio := progress.get("input_audio"):
+        snapshot["inputAudioUrl"] = input_audio
+    if progress.get("last_completed_workflow_title") and progress.get(
+        "last_completed_workflow_url"
+    ):
+        snapshot["lastCompletedWorkflowTitle"] = progress[
+            "last_completed_workflow_title"
+        ]
+        snapshot["lastCompletedWorkflowUrl"] = progress["last_completed_workflow_url"]
+        if "last_completed_run_time_seconds" in progress:
+            snapshot["lastCompletedRunTimeSeconds"] = progress[
+                "last_completed_run_time_seconds"
+            ]
+        if "last_completed_credits" in progress:
+            snapshot["lastCompletedCredits"] = progress["last_completed_credits"]
+    return snapshot
diff --git a/widgets/bulk_progress_state.py b/widgets/bulk_progress_state.py
new file mode 100644
index 000000000..ba9e2d27e
--- /dev/null
+++ b/widgets/bulk_progress_state.py
@@ -0,0 +1,286 @@
+from __future__ import annotations
+
+import datetime
+from typing import Literal
+
+from typing_extensions import NotRequired, TypedDict
+
+from bots.models import SavedRun
+from daras_ai_v2.base import BasePage
+from daras_ai_v2.breadcrumbs import get_title_breadcrumbs
+
+BulkProgressPhase = Literal["running", "evaluating", "complete"]
+BULK_INPUT_PROMPT_PREVIEW_CHARS = 160
+
+
+class BulkEvalProgress(TypedDict):
+    current: int
+    total: int
+    workflow_title: str
+
+
+class BulkProgressCounts(TypedDict):
+    completed_unit_runs: int
+    total_unit_runs: int
+    completed_row_groups: int
+    total_row_groups: int
+    completed_rows: int
+    total_rows: int
+    current_row_number: int
+    current_workflow_number: int
+    total_workflows: int
+
+
+class BulkProgress(BulkProgressCounts):
+    phase: BulkProgressPhase
+    workflow_title: str
+    workflow_url: str
+    input_prompt: str
+    input_audio: NotRequired[str]
+    credits_used: NotRequired[int]
+    workflow_run_time_seconds: NotRequired[float]
+    workflow_credits: NotRequired[int]
+    last_completed_workflow_title: NotRequired[str]
+    last_completed_workflow_url: NotRequired[str]
+    last_completed_run_time_seconds: NotRequired[float]
+    last_completed_credits: NotRequired[int]
+    error_msg: NotRequired[str]
+
+
+class BulkProgressTracker:
+    def __init__(
+        self,
+        *,
+        total_rows: int,
+        total_row_groups: int,
+        total_workflows: int,
+    ):
+        self.counts = init_bulk_progress_counts(
+            total_rows=total_rows,
+            total_row_groups=total_row_groups,
+            total_workflows=total_workflows,
+        )
+        self.credits_used = 0
+        self.snapshot: BulkProgress | None = None
+
+    def workflow_started(
+        self,
+        response,
+        *,
+        current_row_number: int,
+        workflow_number: int,
+        page_cls: type[BasePage],
+        sr: SavedRun,
+        pr,
+        request_body: dict,
+    ) -> tuple[str, dict[str, BulkProgress]]:
+        self.counts.update(
+            current_row_number=current_row_number,
+            current_workflow_number=workflow_number,
+        )
+        return self._emit_bulk_progress(
+            response,
+            page_cls=page_cls,
+            sr=sr,
+            pr=pr,
+            request_body=request_body,
+            phase="running",
+            current_workflow_completed=False,
+        )
+
+    def workflow_completed(
+        self,
+        response,
+        *,
+        page_cls: type[BasePage],
+        sr: SavedRun,
+        pr,
+        request_body: dict,
+        arr_len: int,
+        workflow_run_time_seconds: float | None,
+        workflow_credits: int | None,
+        error_msg: str | None,
+    ) -> tuple[str, dict[str, BulkProgress]]:
+        self.counts["completed_unit_runs"] += 1
+        if self.counts["current_workflow_number"] == self.counts["total_workflows"]:
+            self.counts["completed_row_groups"] += 1
+            self.counts["completed_rows"] += arr_len
+        self.credits_used += workflow_credits or 0
+
+        return self._emit_bulk_progress(
+            response,
+            page_cls=page_cls,
+            sr=sr,
+            pr=pr,
+            request_body=request_body,
+            phase="running",
+            credits_used=self.credits_used,
+            workflow_run_time_seconds=workflow_run_time_seconds,
+            workflow_credits=workflow_credits,
+            error_msg=error_msg,
+        )
+
+    def eval_started(
+        self,
+        response,
+        *,
+        current: int,
+        total: int,
+        workflow_title: str,
+    ) -> str:
+        response.eval_progress = {
+            "current": current,
+            "total": total,
+            "workflow_title": workflow_title,
+        }
+        if self.snapshot:
+            self.snapshot["phase"] = "evaluating"
+            response.bulk_progress = self.snapshot
+        return f"Running {workflow_title}..."
+
+    def evals_completed(self, response) -> None:
+        response.eval_progress = None
+        if self.snapshot:
+            self.snapshot["phase"] = "complete"
+            response.bulk_progress = self.snapshot
+
+    def _emit_bulk_progress(
+        self,
+        response,
+        *,
+        page_cls: type[BasePage],
+        sr: SavedRun,
+        pr,
+        request_body: dict,
+        phase: BulkProgressPhase,
+        current_workflow_completed: bool = True,
+        credits_used: int | None = None,
+        workflow_run_time_seconds: float | None = None,
+        workflow_credits: int | None = None,
+        error_msg: str | None = None,
+    ) -> tuple[str, dict[str, BulkProgress]]:
+        self.snapshot = build_bulk_progress(
+            progress=self.counts,
+            page_cls=page_cls,
+            sr=sr,
+            pr=pr,
+            request_body=request_body,
+            phase=phase,
+            previous_progress=self.snapshot,
+            credits_used=credits_used,
+            workflow_run_time_seconds=workflow_run_time_seconds,
+            workflow_credits=workflow_credits,
+            error_msg=error_msg,
+            current_workflow_completed=current_workflow_completed,
+        )
+        response.bulk_progress = self.snapshot
+
+        return (
+            f"{bulk_progress_percent(self.snapshot)}% Completed",
+            {"bulk_progress": self.snapshot},
+        )
+
+
+def init_bulk_progress_counts(
+    *,
+    total_rows: int,
+    total_row_groups: int,
+    total_workflows: int,
+) -> BulkProgressCounts:
+    return {
+        "completed_unit_runs": 0,
+        "total_unit_runs": total_row_groups * total_workflows,
+        "completed_row_groups": 0,
+        "total_row_groups": total_row_groups,
+        "completed_rows": 0,
+        "total_rows": total_rows,
+        "current_row_number": 0,
+        "current_workflow_number": 1,
+        "total_workflows": total_workflows,
+    }
+
+
+def is_bulk_progress_complete(progress: BulkProgressCounts) -> bool:
+    total_unit_runs = progress["total_unit_runs"]
+    return total_unit_runs > 0 and progress["completed_unit_runs"] >= total_unit_runs
+
+
+def build_bulk_progress(
+    *,
+    progress: BulkProgressCounts,
+    page_cls: type[BasePage],
+    sr: SavedRun,
+    pr,
+    request_body: dict,
+    phase: BulkProgressPhase,
+    previous_progress: BulkProgress | None = None,
+    credits_used: int | None = None,
+    workflow_run_time_seconds: float | None = None,
+    workflow_credits: int | None = None,
+    error_msg: str | None = None,
+    current_workflow_completed: bool = True,
+) -> BulkProgress:
+    title = get_title_breadcrumbs(page_cls=page_cls, sr=sr, pr=pr).title_with_prefix()
+    input_prompt = page_cls.preview_input(request_body)
+    bulk_progress: BulkProgress = {
+        **progress,
+        "phase": phase,
+        "workflow_title": title,
+        "workflow_url": sr.get_app_url(),
+        "input_prompt": build_input_prompt_preview(input_prompt),
+    }
+    if input_audio := request_body.get("input_audio"):
+        bulk_progress["input_audio"] = input_audio
+    if credits_used is not None:
+        bulk_progress["credits_used"] = credits_used
+    elif previous_progress and "credits_used" in previous_progress:
+        bulk_progress["credits_used"] = previous_progress["credits_used"]
+    if workflow_run_time_seconds is not None:
+        bulk_progress["workflow_run_time_seconds"] = workflow_run_time_seconds
+    if workflow_credits is not None:
+        bulk_progress["workflow_credits"] = workflow_credits
+    if error_msg:
+        bulk_progress["error_msg"] = error_msg
+
+    if current_workflow_completed:
+        bulk_progress["last_completed_workflow_title"] = title
+        bulk_progress["last_completed_workflow_url"] = sr.get_app_url()
+        if workflow_run_time_seconds is not None:
+            bulk_progress["last_completed_run_time_seconds"] = workflow_run_time_seconds
+        if workflow_credits is not None:
+            bulk_progress["last_completed_credits"] = workflow_credits
+    elif previous_progress:
+        for key in (
+            "last_completed_workflow_title",
+            "last_completed_workflow_url",
+            "last_completed_run_time_seconds",
+            "last_completed_credits",
+        ):
+            if key in previous_progress:
+                bulk_progress[key] = previous_progress[key]
+
+    return bulk_progress
+
+
+def build_input_prompt_preview(input_prompt: str | None) -> str:
+    if not input_prompt:
+        return ""
+
+    if len(input_prompt) <= BULK_INPUT_PROMPT_PREVIEW_CHARS:
+        return input_prompt
+
+    return input_prompt[: BULK_INPUT_PROMPT_PREVIEW_CHARS - 3].rstrip() + "..."
+
+
+def bulk_progress_percent(progress: BulkProgressCounts | None) -> int:
+    if not progress or not progress["total_unit_runs"]:
+        return 0
+    return round(progress["completed_unit_runs"] / progress["total_unit_runs"] * 100)
+
+
+def coerce_seconds(seconds: float | datetime.timedelta | None) -> float | None:
+    if seconds is None:
+        return None
+    if isinstance(seconds, datetime.timedelta):
+        return seconds.total_seconds()
+    return seconds

From 3883240c12a93b125f517753e44776571f1e86e8 Mon Sep 17 00:00:00 2001
From: milovate <cmilind33@gmail.com>
Date: Thu, 28 May 2026 00:32:55 +0530
Subject: [PATCH 2/6] fix: refine bulk progress card rendering

Replace deprecated bulk progress word wrapping, validate input audio
links before rendering anchors, and derive the card run state inside the
snapshot builder. Keep eval progress rings based on completed evals and
inline redundant one-off helpers in the bulk progress display path.
---
 .../bulkProgress/BulkProgressCard.css         |   4 +-
 .../bulkProgress/BulkProgressCard.tsx         |  26 +++-
 .../bulkProgress/bulkProgress.types.ts        |   1 +
 .../bulkProgress/bulkProgressCardModel.ts     |  61 ++++----
 .../bulkProgress/bulkProgressFormat.ts        |   5 +-
 recipes/BulkRunner.py                         |   5 +-
 widgets/bulk_progress_display.py              | 135 ++++++++----------
 widgets/bulk_progress_state.py                |  28 ++--
 8 files changed, 135 insertions(+), 130 deletions(-)

diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.css b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
index 702a82fb7..97a3a0f72 100644
--- a/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
@@ -269,7 +269,7 @@
   text-decoration: underline;
   text-overflow: ellipsis;
   text-underline-offset: 0.12em;
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .bulk-progress-detail-link:link,
@@ -308,7 +308,7 @@
   line-clamp: 3;
   line-height: 1.35;
   overflow: hidden;
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .bulk-progress-input-text span,
diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
index e52eae783..89fb31e34 100644
--- a/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
@@ -218,6 +218,18 @@ function MetaRow({ parts }: { parts: string[] }) {
 }
 
 function ProgressDetail({ detail }: { detail: DetailDisplay }) {
+  let inputAudioSafeHref: string | null = null;
+  if (detail.inputAudioUrl) {
+    try {
+      const parsed = new URL(detail.inputAudioUrl);
+      if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+        inputAudioSafeHref = parsed.href;
+      }
+    } catch {
+      inputAudioSafeHref = null;
+    }
+  }
+
   return (
     <div className="bulk-progress-detail">
       <div className="bulk-progress-current">
@@ -241,13 +253,13 @@ function ProgressDetail({ detail }: { detail: DetailDisplay }) {
       {detail.inputAudioUrl ? (
         <div className="bulk-progress-input">
           <span>input_audio:</span>{" "}
-          <a
-            href={detail.inputAudioUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            View audio &rarr;
-          </a>
+          {inputAudioSafeHref ? (
+            <a href={inputAudioSafeHref} target="_blank" rel="noopener noreferrer">
+              View audio &rarr;
+            </a>
+          ) : (
+            <span>{detail.inputAudioUrl}</span>
+          )}
         </div>
       ) : null}
       {detail.lastCompleted ? (
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
index 966c9012a..03852ec66 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
@@ -21,6 +21,7 @@ export type BulkProgressSnapshot = {
   currentWorkflowUrl: string;
   currentWorkflowRunTimeSeconds?: number | null;
   creditsUsed?: number | null;
+  totalEvalRuns?: number;
   evalCurrent?: number;
   evalTotal?: number;
   evalWorkflowTitle?: string;
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
index a1f90a891..d6cfd48c9 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
@@ -261,11 +261,28 @@ function buildDetail(
 ): DetailDisplay {
   const lastTitle = snapshot.lastCompletedWorkflowTitle;
   const lastUrl = snapshot.lastCompletedWorkflowUrl;
+  let workflow: WorkflowDisplay | null = null;
+
+  if (snapshot.currentWorkflowTitle && snapshot.currentWorkflowUrl) {
+    const workflowNumber = Math.max(snapshot.currentWorkflowNumber, 1);
+    let prefix: string;
+    if (capitalized) {
+      prefix = `Workflow ${workflowNumber} of ${snapshot.totalWorkflows}:`;
+    } else {
+      prefix = `workflow ${workflowNumber} of ${snapshot.totalWorkflows}`;
+    }
+    workflow = {
+      prefix,
+      title: snapshot.currentWorkflowTitle,
+      url: snapshot.currentWorkflowUrl,
+      failedAt,
+    };
+  }
 
   return {
     rowLabel,
     showStoppingMessage,
-    workflow: buildWorkflowDisplay(snapshot, { capitalized, failedAt }),
+    workflow,
     inputPrompt: snapshot.inputPrompt,
     inputAudioUrl: snapshot.inputAudioUrl,
     lastCompleted:
@@ -280,27 +297,6 @@ function buildDetail(
   };
 }
 
-function buildWorkflowDisplay(
-  snapshot: BulkProgressSnapshot,
-  options: { capitalized: boolean; failedAt: number | null }
-): WorkflowDisplay | null {
-  if (!snapshot.currentWorkflowTitle || !snapshot.currentWorkflowUrl) {
-    return null;
-  }
-
-  const workflowNumber = Math.max(snapshot.currentWorkflowNumber, 1);
-  const prefix = options.capitalized
-    ? `Workflow ${workflowNumber} of ${snapshot.totalWorkflows}:`
-    : `workflow ${workflowNumber} of ${snapshot.totalWorkflows}`;
-
-  return {
-    prefix,
-    title: snapshot.currentWorkflowTitle,
-    url: snapshot.currentWorkflowUrl,
-    failedAt: options.failedAt,
-  };
-}
-
 function getEvalRingDisplay(
   evalCounts: { current: number; total: number } | null
 ): { ringPercent: number; ringLabel: string } {
@@ -313,27 +309,24 @@ function getEvalRingDisplay(
       ringLabel: `${evalCounts.current}/${evalCounts.total}`,
     };
   }
-  const ringPercent = Math.round((evalCounts.current / evalCounts.total) * 100);
+  const completedEvals = Math.max(evalCounts.current - 1, 0);
+  const ringPercent = Math.round((completedEvals / evalCounts.total) * 100);
   return {
     ringPercent,
-    ringLabel: `${evalCounts.current}/${evalCounts.total}`,
+    ringLabel: `${completedEvals}/${evalCounts.total}`,
   };
 }
 
 function unitRunRingFields(snapshot: BulkProgressSnapshot) {
-  const ringPercent = unitRunPercent(snapshot);
+  let ringPercent = 0;
+  if (snapshot.totalUnitRuns) {
+    ringPercent = Math.round(
+      (snapshot.completedUnitRuns / snapshot.totalUnitRuns) * 100
+    );
+  }
   return {
     ringPercent,
     ringLabel: `${ringPercent}%`,
     headline: `${ringPercent}% Completed`,
   };
 }
-
-function unitRunPercent(snapshot: BulkProgressSnapshot) {
-  if (!snapshot.totalUnitRuns) {
-    return 0;
-  }
-  return Math.round(
-    (snapshot.completedUnitRuns / snapshot.totalUnitRuns) * 100
-  );
-}
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts b/gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts
index fe6927bfe..8ab553b4b 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgressFormat.ts
@@ -26,10 +26,11 @@ export function formatCredits(credits: number | null | undefined) {
 }
 
 export function formatAverageCredits(snapshot: BulkProgressSnapshot) {
-  if (snapshot.creditsUsed == null || snapshot.totalUnitRuns <= 0) {
+  const totalRuns = snapshot.totalUnitRuns + (snapshot.totalEvalRuns || 0);
+  if (snapshot.creditsUsed == null || totalRuns <= 0) {
     return "-";
   }
-  return `${(snapshot.creditsUsed / snapshot.totalUnitRuns).toFixed(1)} Cr / run`;
+  return `${(snapshot.creditsUsed / totalRuns).toFixed(1)} Cr / run`;
 }
 
 export function formatAverageRunTime(snapshot: BulkProgressSnapshot) {
diff --git a/recipes/BulkRunner.py b/recipes/BulkRunner.py
index 1d2c3a28e..24c81e28e 100644
--- a/recipes/BulkRunner.py
+++ b/recipes/BulkRunner.py
@@ -302,8 +302,6 @@ def get_run_cost_display(self) -> str:
         progress = gui.session_state.get("bulk_progress")
         if not progress:
             return ""
-        if progress["completed_unit_runs"] >= progress["total_unit_runs"]:
-            return ""
 
         run_cost = progress.get("credits_used") or 0
         url = self.get_credits_click_url()
@@ -330,7 +328,7 @@ def run_v2(
         array_columns = set()
         dfs = [read_df_any(doc) for doc in request.documents]
         total_rows = sum(len(df) for df in dfs)
-        total_row_groups = get_bulk_total_row_groups(dfs, request)
+        total_row_groups = sum(1 for df in dfs for _ in slice_request_df(df, request))
         progress = BulkProgressTracker(
             total_rows=total_rows,
             total_row_groups=total_row_groups,
@@ -467,6 +465,7 @@ def run_v2(
             )
             sr.wait_for_celery_result(result)
             response.eval_runs.append(sr.get_app_url())
+            yield progress.eval_completed(response, eval_credits=sr.price)
 
         progress.evals_completed(response)
 
diff --git a/widgets/bulk_progress_display.py b/widgets/bulk_progress_display.py
index 370483fcd..e82b9ffa7 100644
--- a/widgets/bulk_progress_display.py
+++ b/widgets/bulk_progress_display.py
@@ -10,7 +10,6 @@
 from widgets.bulk_progress_state import (
     BulkEvalProgress,
     BulkProgress,
-    coerce_seconds,
     is_bulk_progress_complete,
 )
 
@@ -35,6 +34,7 @@ class BulkProgressSnapshot(TypedDict, total=False):
     currentWorkflowUrl: str
     currentWorkflowRunTimeSeconds: NotRequired[float | None]
     creditsUsed: NotRequired[int]
+    totalEvalRuns: NotRequired[int]
     evalCurrent: NotRequired[int]
     evalTotal: NotRequired[int]
     evalWorkflowTitle: NotRequired[str]
@@ -46,84 +46,31 @@ class BulkProgressSnapshot(TypedDict, total=False):
     lastCompletedCredits: NotRequired[int | None]
 
 
-def get_bulk_runner_run_state(
-    *,
-    progress: BulkProgress | None,
-    is_cancelled: bool,
-    is_running: bool,
-    error_msg: str | None,
-) -> BulkRunnerRunState | None:
-    if not progress:
-        return None
-
-    bulk_complete = is_bulk_progress_complete(progress)
-
-    if is_running and is_cancelled:
-        return "stopping"
-
-    if is_running and bulk_complete:
-        if progress["phase"] == "evaluating":
-            return progress["phase"]
-        return "complete"
-
-    if is_running:
-        return "running"
-
-    if error_msg:
-        return "error"
-
-    if bulk_complete and not is_running:
-        return "complete"
-
-    return "stopped"
-
-
-def get_bulk_elapsed_seconds(
-    *,
-    is_running: bool,
-    run_time: float | datetime.timedelta | None,
-    created_at: datetime.datetime | str | None,
-) -> float | None:
-    seconds = coerce_seconds(run_time)
-    if seconds is not None:
-        return seconds
-
-    if not is_running or not created_at:
-        return None
-
-    if isinstance(created_at, str):
-        created_at = datetime.datetime.fromisoformat(created_at)
-    now = datetime.datetime.now(created_at.tzinfo)
-    return max((now - created_at).total_seconds(), 0)
-
-
 def render_bulk_runner_progress(*, is_cancelled: bool) -> None:
     session = gui.session_state
     progress = session.get("bulk_progress")
-    is_running = bool(session.get(StateKeys.run_status))
-    error_msg = session.get(StateKeys.error_msg)
-    run_state = get_bulk_runner_run_state(
-        progress=progress,
-        is_cancelled=is_cancelled,
-        is_running=is_running,
-        error_msg=error_msg,
-    )
-    if not progress or not run_state:
+    if not progress:
         return
 
-    elapsed_seconds = get_bulk_elapsed_seconds(
-        is_running=is_running,
-        run_time=session.get(StateKeys.run_time),
-        created_at=session.get(StateKeys.created_at),
-    )
+    run_time = session.get(StateKeys.run_time)
+    elapsed_seconds = None
+    if run_time is not None:
+        if isinstance(run_time, datetime.timedelta):
+            elapsed_seconds = run_time.total_seconds()
+        else:
+            elapsed_seconds = run_time
+
     snapshot = build_bulk_progress_snapshot(
         progress=progress,
-        run_state=run_state,
+        is_cancelled=is_cancelled,
+        is_running=bool(session.get(StateKeys.run_status)),
+        error_msg=session.get(StateKeys.error_msg),
         elapsed_seconds=elapsed_seconds,
-        eval_progress=session.get("eval_progress")
-        if run_state == "evaluating"
-        else None,
+        eval_progress=session.get("eval_progress"),
     )
+    if not snapshot:
+        return
+
     gui.component(
         "BulkProgressCard",
         snapshot=snapshot,
@@ -134,10 +81,21 @@ def render_bulk_runner_progress(*, is_cancelled: bool) -> None:
 def build_bulk_progress_snapshot(
     *,
     progress: BulkProgress,
-    run_state: BulkRunnerRunState,
+    is_cancelled: bool,
+    is_running: bool,
+    error_msg: str | None,
     elapsed_seconds: float | None,
     eval_progress: BulkEvalProgress | None = None,
-) -> BulkProgressSnapshot:
+) -> BulkProgressSnapshot | None:
+    run_state = bulk_snapshot_run_state(
+        progress=progress,
+        is_cancelled=is_cancelled,
+        is_running=is_running,
+        error_msg=error_msg,
+    )
+    if not run_state:
+        return None
+
     snapshot: BulkProgressSnapshot = {
         "runState": run_state,
         "elapsedSeconds": elapsed_seconds,
@@ -156,7 +114,9 @@ def build_bulk_progress_snapshot(
         ]
     if "credits_used" in progress:
         snapshot["creditsUsed"] = progress["credits_used"]
-    if eval_progress:
+    if "total_eval_runs" in progress:
+        snapshot["totalEvalRuns"] = progress["total_eval_runs"]
+    if run_state == "evaluating" and eval_progress:
         snapshot["evalCurrent"] = eval_progress["current"]
         snapshot["evalTotal"] = eval_progress["total"]
         snapshot["evalWorkflowTitle"] = eval_progress["workflow_title"]
@@ -178,3 +138,32 @@ def build_bulk_progress_snapshot(
         if "last_completed_credits" in progress:
             snapshot["lastCompletedCredits"] = progress["last_completed_credits"]
     return snapshot
+
+
+def bulk_snapshot_run_state(
+    *,
+    progress: BulkProgress,
+    is_cancelled: bool,
+    is_running: bool,
+    error_msg: str | None,
+) -> BulkRunnerRunState | None:
+    if is_running and is_cancelled:
+        return "stopping"
+
+    bulk_complete = is_bulk_progress_complete(progress)
+    if is_running:
+        if not bulk_complete:
+            return "running"
+        if progress["phase"] == "evaluating":
+            return "evaluating"
+        if progress["phase"] == "complete":
+            return "complete"
+        return "complete"
+
+    if error_msg:
+        return "error"
+
+    if bulk_complete:
+        return "complete"
+
+    return "stopped"
diff --git a/widgets/bulk_progress_state.py b/widgets/bulk_progress_state.py
index ba9e2d27e..d24e42045 100644
--- a/widgets/bulk_progress_state.py
+++ b/widgets/bulk_progress_state.py
@@ -1,6 +1,5 @@
 from __future__ import annotations
 
-import datetime
 from typing import Literal
 
 from typing_extensions import NotRequired, TypedDict
@@ -40,6 +39,7 @@ class BulkProgress(BulkProgressCounts):
     credits_used: NotRequired[int]
     workflow_run_time_seconds: NotRequired[float]
     workflow_credits: NotRequired[int]
+    total_eval_runs: NotRequired[int]
     last_completed_workflow_title: NotRequired[str]
     last_completed_workflow_url: NotRequired[str]
     last_completed_run_time_seconds: NotRequired[float]
@@ -135,9 +135,27 @@ def eval_started(
         }
         if self.snapshot:
             self.snapshot["phase"] = "evaluating"
+            self.snapshot["total_eval_runs"] = total
             response.bulk_progress = self.snapshot
         return f"Running {workflow_title}..."
 
+    def eval_completed(
+        self,
+        response,
+        *,
+        eval_credits: int | None,
+    ) -> tuple[str, dict[str, BulkProgress]] | None:
+        self.credits_used += eval_credits or 0
+        if not self.snapshot:
+            return None
+
+        self.snapshot["credits_used"] = self.credits_used
+        response.bulk_progress = self.snapshot
+        return (
+            f"{bulk_progress_percent(self.snapshot)}% Completed",
+            {"bulk_progress": self.snapshot},
+        )
+
     def evals_completed(self, response) -> None:
         response.eval_progress = None
         if self.snapshot:
@@ -276,11 +294,3 @@ def bulk_progress_percent(progress: BulkProgressCounts | None) -> int:
     if not progress or not progress["total_unit_runs"]:
         return 0
     return round(progress["completed_unit_runs"] / progress["total_unit_runs"] * 100)
-
-
-def coerce_seconds(seconds: float | datetime.timedelta | None) -> float | None:
-    if seconds is None:
-        return None
-    if isinstance(seconds, datetime.timedelta):
-        return seconds.total_seconds()
-    return seconds

From be0b9acc9052e33785587a7399618d08a2fdfc1d Mon Sep 17 00:00:00 2001
From: milovate <cmilind33@gmail.com>
Date: Thu, 28 May 2026 00:59:39 +0530
Subject: [PATCH 3/6] fix: improve bulk progress calculations and state
 management

Refactor the bulk progress card model to ensure ring percentages are clamped between 0 and 100. Update the bulk progress display to replace the deprecated Literal with an Enum for bulk runner states, enhancing clarity and maintainability. Adjust snapshot building to utilize the new state management approach.
---
 .../bulkProgress/bulkProgressCardModel.ts     | 13 +++-
 widgets/bulk_progress_display.py              | 62 +++++++++----------
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
index d6cfd48c9..159d8c099 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
@@ -310,7 +310,10 @@ function getEvalRingDisplay(
     };
   }
   const completedEvals = Math.max(evalCounts.current - 1, 0);
-  const ringPercent = Math.round((completedEvals / evalCounts.total) * 100);
+  const ringPercent = Math.min(
+    Math.max(Math.round((completedEvals / evalCounts.total) * 100), 0),
+    100
+  );
   return {
     ringPercent,
     ringLabel: `${completedEvals}/${evalCounts.total}`,
@@ -320,8 +323,12 @@ function getEvalRingDisplay(
 function unitRunRingFields(snapshot: BulkProgressSnapshot) {
   let ringPercent = 0;
   if (snapshot.totalUnitRuns) {
-    ringPercent = Math.round(
-      (snapshot.completedUnitRuns / snapshot.totalUnitRuns) * 100
+    ringPercent = Math.min(
+      Math.max(
+        Math.round((snapshot.completedUnitRuns / snapshot.totalUnitRuns) * 100),
+        0
+      ),
+      100
     );
   }
   return {
diff --git a/widgets/bulk_progress_display.py b/widgets/bulk_progress_display.py
index e82b9ffa7..6678df2f7 100644
--- a/widgets/bulk_progress_display.py
+++ b/widgets/bulk_progress_display.py
@@ -1,12 +1,12 @@
 from __future__ import annotations
 
 import datetime
-from typing import Literal
+from enum import Enum
 
 import gooey_gui as gui
 from typing_extensions import NotRequired, TypedDict
 
-from daras_ai_v2.base import StateKeys
+from daras_ai_v2.base import BasePage, RecipeRunState, StateKeys
 from widgets.bulk_progress_state import (
     BulkEvalProgress,
     BulkProgress,
@@ -15,9 +15,14 @@
 
 BULK_RERUN_ALL_KEY = "-submit-workflow"
 
-BulkRunnerRunState = Literal[
-    "running", "stopping", "evaluating", "complete", "error", "stopped"
-]
+
+class BulkRunnerRunState(str, Enum):
+    running = "running"
+    stopping = "stopping"
+    evaluating = "evaluating"
+    complete = "complete"
+    error = "error"
+    stopped = "stopped"
 
 
 # Keep in sync with gooey-gui/app/components/bulkProgress/bulkProgress.types.ts (BulkProgressSnapshot).
@@ -63,8 +68,7 @@ def render_bulk_runner_progress(*, is_cancelled: bool) -> None:
     snapshot = build_bulk_progress_snapshot(
         progress=progress,
         is_cancelled=is_cancelled,
-        is_running=bool(session.get(StateKeys.run_status)),
-        error_msg=session.get(StateKeys.error_msg),
+        recipe_run_state=BasePage.get_run_state(session),
         elapsed_seconds=elapsed_seconds,
         eval_progress=session.get("eval_progress"),
     )
@@ -82,16 +86,14 @@ def build_bulk_progress_snapshot(
     *,
     progress: BulkProgress,
     is_cancelled: bool,
-    is_running: bool,
-    error_msg: str | None,
+    recipe_run_state: RecipeRunState,
     elapsed_seconds: float | None,
     eval_progress: BulkEvalProgress | None = None,
 ) -> BulkProgressSnapshot | None:
     run_state = bulk_snapshot_run_state(
         progress=progress,
         is_cancelled=is_cancelled,
-        is_running=is_running,
-        error_msg=error_msg,
+        recipe_run_state=recipe_run_state,
     )
     if not run_state:
         return None
@@ -116,7 +118,7 @@ def build_bulk_progress_snapshot(
         snapshot["creditsUsed"] = progress["credits_used"]
     if "total_eval_runs" in progress:
         snapshot["totalEvalRuns"] = progress["total_eval_runs"]
-    if run_state == "evaluating" and eval_progress:
+    if run_state == BulkRunnerRunState.evaluating and eval_progress:
         snapshot["evalCurrent"] = eval_progress["current"]
         snapshot["evalTotal"] = eval_progress["total"]
         snapshot["evalWorkflowTitle"] = eval_progress["workflow_title"]
@@ -144,26 +146,22 @@ def bulk_snapshot_run_state(
     *,
     progress: BulkProgress,
     is_cancelled: bool,
-    is_running: bool,
-    error_msg: str | None,
+    recipe_run_state: RecipeRunState,
 ) -> BulkRunnerRunState | None:
-    if is_running and is_cancelled:
-        return "stopping"
+    is_active = recipe_run_state in {RecipeRunState.starting, RecipeRunState.running}
+    if is_active and is_cancelled:
+        return BulkRunnerRunState.stopping
+
+    if recipe_run_state == RecipeRunState.failed:
+        return BulkRunnerRunState.error
 
     bulk_complete = is_bulk_progress_complete(progress)
-    if is_running:
-        if not bulk_complete:
-            return "running"
-        if progress["phase"] == "evaluating":
-            return "evaluating"
-        if progress["phase"] == "complete":
-            return "complete"
-        return "complete"
-
-    if error_msg:
-        return "error"
-
-    if bulk_complete:
-        return "complete"
-
-    return "stopped"
+    if not bulk_complete:
+        if is_active:
+            return BulkRunnerRunState.running
+        return BulkRunnerRunState.stopped
+
+    if progress["phase"] == "evaluating":
+        return BulkRunnerRunState.evaluating
+
+    return BulkRunnerRunState.complete

From d057c190e52e1e125b33f0bbc787c22a366530e1 Mon Sep 17 00:00:00 2001
From: milovate <cmilind33@gmail.com>
Date: Thu, 28 May 2026 09:11:09 +0530
Subject: [PATCH 4/6] refactor: keep bulk progress detail rows from overflowing

- Trim workflow titles before rendering so whitespace-only titles do not create empty links.
---
 .../bulkProgress/BulkProgressCard.css         | 13 ++-----
 .../bulkProgress/BulkProgressCard.tsx         | 10 +++---
 .../bulkProgress/bulkProgressCardModel.ts     |  7 ++--
 widgets/bulk_progress_state.py                | 35 ++++++-------------
 4 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.css b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
index 97a3a0f72..293682af7 100644
--- a/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
@@ -257,10 +257,7 @@
 
 .bulk-progress-detail-link {
   color: #070b1a;
-  display: -webkit-inline-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
+  display: inline-block;
   flex: 0 1 auto;
   font-size: 0.95rem;
   font-weight: 700;
@@ -281,9 +278,9 @@
 }
 
 .bulk-progress-workflow-title {
-  max-width: 100%;
+  max-width: 34ch;
   vertical-align: bottom;
-  white-space: normal;
+  white-space: nowrap;
 }
 
 .bulk-progress-workflow-status {
@@ -344,10 +341,6 @@
   color: #9d7b1f;
 }
 
-.bulk-progress-last-completed-title {
-  max-width: 34ch;
-}
-
 .bulk-progress-last-completed-meta {
   flex: 0 0 auto;
   white-space: nowrap;
diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
index 89fb31e34..8e9f966ab 100644
--- a/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
@@ -173,7 +173,7 @@ function ProgressRing({
   return (
     <div
       className="bulk-progress-ring"
-      style={{ ["--bulk-progress-accent"]: ringAccent } as React.CSSProperties}
+      style={{ "--bulk-progress-accent": ringAccent } as React.CSSProperties}
     >
       <svg viewBox="0 0 100 100" aria-hidden="true">
         <circle className="bulk-progress-ring-track" cx="50" cy="50" r="40" />
@@ -302,7 +302,7 @@ function LastCompleted({
     <div className="bulk-progress-last-completed">
       <span className="bulk-progress-last-completed-label">Last completed</span>
       <a
-        className="bulk-progress-detail-link bulk-progress-last-completed-title"
+        className="bulk-progress-detail-link bulk-progress-workflow-title"
         href={url}
         target="_blank"
         rel="noopener noreferrer"
@@ -311,9 +311,11 @@ function LastCompleted({
       </a>
       {runTimeSeconds != null || credits != null ? (
         <span className="bulk-progress-last-completed-meta">
-          {credits != null ? <> &middot; {formatCredits(credits)}</> : null}
+          {credits != null ? (
+            <span>&middot; {formatCredits(credits)}</span>
+          ) : null}
           {runTimeSeconds != null ? (
-            <> &middot; {formatElapsed(runTimeSeconds)}</>
+            <span>&middot; {formatElapsed(runTimeSeconds)}</span>
           ) : null}
         </span>
       ) : null}
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
index 159d8c099..f54e1d977 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
@@ -259,11 +259,12 @@ function buildDetail(
     failedAt: number | null;
   }
 ): DetailDisplay {
-  const lastTitle = snapshot.lastCompletedWorkflowTitle;
+  const currentTitle = snapshot.currentWorkflowTitle.trim();
+  const lastTitle = snapshot.lastCompletedWorkflowTitle?.trim();
   const lastUrl = snapshot.lastCompletedWorkflowUrl;
   let workflow: WorkflowDisplay | null = null;
 
-  if (snapshot.currentWorkflowTitle && snapshot.currentWorkflowUrl) {
+  if (currentTitle && snapshot.currentWorkflowUrl) {
     const workflowNumber = Math.max(snapshot.currentWorkflowNumber, 1);
     let prefix: string;
     if (capitalized) {
@@ -273,7 +274,7 @@ function buildDetail(
     }
     workflow = {
       prefix,
-      title: snapshot.currentWorkflowTitle,
+      title: currentTitle,
       url: snapshot.currentWorkflowUrl,
       failedAt,
     };
diff --git a/widgets/bulk_progress_state.py b/widgets/bulk_progress_state.py
index d24e42045..27b005e55 100644
--- a/widgets/bulk_progress_state.py
+++ b/widgets/bulk_progress_state.py
@@ -55,11 +55,17 @@ def __init__(
         total_row_groups: int,
         total_workflows: int,
     ):
-        self.counts = init_bulk_progress_counts(
-            total_rows=total_rows,
-            total_row_groups=total_row_groups,
-            total_workflows=total_workflows,
-        )
+        self.counts: BulkProgressCounts = {
+            "completed_unit_runs": 0,
+            "total_unit_runs": total_row_groups * total_workflows,
+            "completed_row_groups": 0,
+            "total_row_groups": total_row_groups,
+            "completed_rows": 0,
+            "total_rows": total_rows,
+            "current_row_number": 0,
+            "current_workflow_number": 1,
+            "total_workflows": total_workflows,
+        }
         self.credits_used = 0
         self.snapshot: BulkProgress | None = None
 
@@ -199,25 +205,6 @@ def _emit_bulk_progress(
         )
 
 
-def init_bulk_progress_counts(
-    *,
-    total_rows: int,
-    total_row_groups: int,
-    total_workflows: int,
-) -> BulkProgressCounts:
-    return {
-        "completed_unit_runs": 0,
-        "total_unit_runs": total_row_groups * total_workflows,
-        "completed_row_groups": 0,
-        "total_row_groups": total_row_groups,
-        "completed_rows": 0,
-        "total_rows": total_rows,
-        "current_row_number": 0,
-        "current_workflow_number": 1,
-        "total_workflows": total_workflows,
-    }
-
-
 def is_bulk_progress_complete(progress: BulkProgressCounts) -> bool:
     total_unit_runs = progress["total_unit_runs"]
     return total_unit_runs > 0 and progress["completed_unit_runs"] >= total_unit_runs

From f3e9711c8d18d5b637381a54bf223a222e87ca65 Mon Sep 17 00:00:00 2001
From: milovate <cmilind33@gmail.com>
Date: Thu, 28 May 2026 14:59:21 +0530
Subject: [PATCH 5/6] feat: reorder bulk complete stats and add workflow
 elapsed timer

Show per-workflow elapsed time beside the active workflow link during
running/stopping, and reorder the complete-state summary to Total runs,
Rows, Credits, Total time. Reuse workflow link-group layout for last
completed meta and inline the live elapsed hook in WorkflowRow. Remove
unused BulkRunner row-group helper.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../bulkProgress/BulkProgressCard.css         | 21 +++--
 .../bulkProgress/BulkProgressCard.tsx         | 80 ++++++++++++-------
 .../bulkProgress/bulkProgress.types.ts        |  1 +
 .../bulkProgress/bulkProgressCardModel.ts     |  4 +
 recipes/BulkRunner.py                         |  6 --
 5 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.css b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
index 293682af7..20350b68a 100644
--- a/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.css
@@ -113,7 +113,8 @@
 }
 
 .bulk-progress-meta,
-.bulk-progress-stat-caption {
+.bulk-progress-stat-caption,
+.bulk-progress-workflow-elapsed {
   color: #59617d;
 }
 
@@ -255,6 +256,19 @@
   white-space: nowrap;
 }
 
+.bulk-progress-workflow-link-group {
+  align-items: baseline;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.bulk-progress-workflow-elapsed {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
 .bulk-progress-detail-link {
   color: #070b1a;
   display: inline-block;
@@ -341,11 +355,6 @@
   color: #9d7b1f;
 }
 
-.bulk-progress-last-completed-meta {
-  flex: 0 0 auto;
-  white-space: nowrap;
-}
-
 .bulk-progress-stop-pending {
   background: #fff9e8;
   border: 1px solid #efd893;
diff --git a/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
index 8e9f966ab..0088981b8 100644
--- a/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
+++ b/gooey-gui/app/components/bulkProgress/BulkProgressCard.tsx
@@ -37,14 +37,14 @@ export function BulkProgressCard({
           <SummaryStat label="Total runs" value={model.totalRuns}>
             all completed
           </SummaryStat>
-          <SummaryStat label="Total time" value={model.totalTime}>
-            {model.averageRunTime}
+          <SummaryStat label="Rows" value={model.totalRows}>
+            {model.rowsCaption}
           </SummaryStat>
           <SummaryStat label="Credits" value={model.credits}>
             {model.averageCredits}
           </SummaryStat>
-          <SummaryStat label="Rows" value={model.totalRows}>
-            {model.rowsCaption}
+          <SummaryStat label="Total time" value={model.totalTime}>
+            {model.averageRunTime}
           </SummaryStat>
         </div>
         <RerunAllActions rerunAllKey={rerunAllKey} showRerun={model.showRerun} />
@@ -241,7 +241,10 @@ function ProgressDetail({ detail }: { detail: DetailDisplay }) {
         </div>
       ) : null}
       {detail.workflow ? (
-        <WorkflowRow workflow={detail.workflow} />
+        <WorkflowRow
+          key={`${detail.rowLabel}:${detail.workflow.url}`}
+          workflow={detail.workflow}
+        />
       ) : null}
       {detail.inputPrompt ? (
         <div className="bulk-progress-input">
@@ -270,18 +273,31 @@ function ProgressDetail({ detail }: { detail: DetailDisplay }) {
 }
 
 function WorkflowRow({ workflow }: { workflow: WorkflowDisplay }) {
+  const showElapsed = workflow.elapsedSeconds != null;
+  const liveElapsedSeconds = useLiveElapsedSeconds(
+    workflow.elapsedSeconds ?? 0,
+    showElapsed
+  );
+
   return (
     <div className="bulk-progress-workflow">
       <span className="bulk-progress-workflow-main">
         <span className="bulk-progress-workflow-prefix">{workflow.prefix}</span>
-        <a
-          className="bulk-progress-detail-link bulk-progress-workflow-title"
-          href={workflow.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {workflow.title}
-        </a>
+        <span className="bulk-progress-workflow-link-group">
+          <a
+            className="bulk-progress-detail-link bulk-progress-workflow-title"
+            href={workflow.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {workflow.title}
+          </a>
+          {showElapsed ? (
+            <span className="bulk-progress-workflow-elapsed">
+              &middot; {formatElapsed(liveElapsedSeconds ?? 0)}
+            </span>
+          ) : null}
+        </span>
       </span>
       {workflow.failedAt != null ? (
         <span className="bulk-progress-workflow-status">
@@ -301,24 +317,26 @@ function LastCompleted({
   return (
     <div className="bulk-progress-last-completed">
       <span className="bulk-progress-last-completed-label">Last completed</span>
-      <a
-        className="bulk-progress-detail-link bulk-progress-workflow-title"
-        href={url}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {title}
-      </a>
-      {runTimeSeconds != null || credits != null ? (
-        <span className="bulk-progress-last-completed-meta">
-          {credits != null ? (
-            <span>&middot; {formatCredits(credits)}</span>
-          ) : null}
-          {runTimeSeconds != null ? (
-            <span>&middot; {formatElapsed(runTimeSeconds)}</span>
-          ) : null}
-        </span>
-      ) : null}
+      <span className="bulk-progress-workflow-link-group">
+        <a
+          className="bulk-progress-detail-link bulk-progress-workflow-title"
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {title}
+        </a>
+        {runTimeSeconds != null || credits != null ? (
+          <span className="bulk-progress-workflow-elapsed">
+            {credits != null ? (
+              <span>&middot; {formatCredits(credits)}</span>
+            ) : null}
+            {runTimeSeconds != null ? (
+              <span>&middot; {formatElapsed(runTimeSeconds)}</span>
+            ) : null}
+          </span>
+        ) : null}
+      </span>
     </div>
   );
 }
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
index 03852ec66..cd68f0557 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
@@ -43,6 +43,7 @@ export type WorkflowDisplay = {
   title: string;
   url: string;
   failedAt: number | null;
+  elapsedSeconds: number | null;
 };
 
 export type DetailDisplay = {
diff --git a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
index f54e1d977..f8111a3fc 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgressCardModel.ts
@@ -168,6 +168,7 @@ function buildInProgressUnitRunModel(
       showStoppingMessage: variant.runState === "stopping",
       capitalized: false,
       failedAt: null,
+      workflowElapsedSeconds: 0,
     }),
   });
 }
@@ -252,11 +253,13 @@ function buildDetail(
     showStoppingMessage,
     capitalized,
     failedAt,
+    workflowElapsedSeconds = null,
   }: {
     rowLabel: string;
     showStoppingMessage: boolean;
     capitalized: boolean;
     failedAt: number | null;
+    workflowElapsedSeconds?: number | null;
   }
 ): DetailDisplay {
   const currentTitle = snapshot.currentWorkflowTitle.trim();
@@ -277,6 +280,7 @@ function buildDetail(
       title: currentTitle,
       url: snapshot.currentWorkflowUrl,
       failedAt,
+      elapsedSeconds: workflowElapsedSeconds,
     };
   }
 
diff --git a/recipes/BulkRunner.py b/recipes/BulkRunner.py
index 24c81e28e..35c80184f 100644
--- a/recipes/BulkRunner.py
+++ b/recipes/BulkRunner.py
@@ -547,12 +547,6 @@ def render_eval_url_inputs(self, key: str, del_key: str | None, d: dict):
         )
 
 
-def get_bulk_total_row_groups(
-    dfs: list[typing.Any], request: BulkRunnerPage.RequestModel
-) -> int:
-    return sum(1 for df in dfs for _ in slice_request_df(df, request))
-
-
 def build_requests_for_df(df, request, df_ix, arr_len, array_columns):
     for url_ix, url in enumerate(request.run_urls):
         page_cls, sr, pr = url_to_runs(url)

From 403464580839a6ac4214e03f5b5970e88dc71763 Mon Sep 17 00:00:00 2001
From: milovate <cmilind33@gmail.com>
Date: Wed, 10 Jun 2026 14:16:50 +0530
Subject: [PATCH 6/6] feat: generate BulkProgressCard wire props from Pydantic
 models
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Define the Python→React prop contract in bulk_progress_props.py and
codegen TypeScript types from JSON Schema. Only componentProps.d.ts is
committed; the schema JSON is a local build artifact gitignored by *.json.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../bulkProgress/bulkProgress.types.ts        |  48 +------
 .../generated/componentProps.d.ts             |  32 +++++
 gooey-gui/package-lock.json                   | 105 ++++++++++++++
 gooey-gui/package.json                        |   1 +
 pyproject.toml                                |   1 +
 scripts/generate_bulk_progress_props.py       |  42 ++++++
 widgets/bulk_progress_display.py              | 129 +++++++-----------
 widgets/bulk_progress_props.py                |  62 +++++++++
 8 files changed, 302 insertions(+), 118 deletions(-)
 create mode 100644 gooey-gui/app/components/bulkProgress/generated/componentProps.d.ts
 create mode 100644 scripts/generate_bulk_progress_props.py
 create mode 100644 widgets/bulk_progress_props.py

diff --git a/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
index cd68f0557..6432a715b 100644
--- a/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
+++ b/gooey-gui/app/components/bulkProgress/bulkProgress.types.ts
@@ -1,42 +1,8 @@
-// Keep in sync with widgets/bulk_progress_display.py (BulkProgressSnapshot).
-
-export type BulkRunnerRunState =
-  | "running"
-  | "stopping"
-  | "evaluating"
-  | "complete"
-  | "error"
-  | "stopped";
-
-export type BulkProgressSnapshot = {
-  runState: BulkRunnerRunState;
-  elapsedSeconds?: number | null;
-  completedUnitRuns: number;
-  totalUnitRuns: number;
-  totalRows: number;
-  currentRowNumber: number;
-  currentWorkflowNumber: number;
-  totalWorkflows: number;
-  currentWorkflowTitle: string;
-  currentWorkflowUrl: string;
-  currentWorkflowRunTimeSeconds?: number | null;
-  creditsUsed?: number | null;
-  totalEvalRuns?: number;
-  evalCurrent?: number;
-  evalTotal?: number;
-  evalWorkflowTitle?: string;
-  inputPrompt?: string;
-  inputAudioUrl?: string;
-  lastCompletedWorkflowTitle?: string;
-  lastCompletedWorkflowUrl?: string;
-  lastCompletedRunTimeSeconds?: number | null;
-  lastCompletedCredits?: number | null;
-};
-
-export type BulkProgressCardProps = {
-  snapshot: BulkProgressSnapshot;
-  rerunAllKey?: string | null;
-};
+export type {
+  BulkProgressCardProps,
+  BulkProgressSnapshot,
+  BulkRunnerRunState,
+} from "./generated/componentProps";
 
 export type WorkflowDisplay = {
   prefix: string;
@@ -50,8 +16,8 @@ export type DetailDisplay = {
   rowLabel: string;
   showStoppingMessage: boolean;
   workflow: WorkflowDisplay | null;
-  inputPrompt?: string;
-  inputAudioUrl?: string;
+  inputPrompt?: string | null;
+  inputAudioUrl?: string | null;
   lastCompleted?: {
     title: string;
     url: string;
diff --git a/gooey-gui/app/components/bulkProgress/generated/componentProps.d.ts b/gooey-gui/app/components/bulkProgress/generated/componentProps.d.ts
new file mode 100644
index 000000000..9a6f3aa36
--- /dev/null
+++ b/gooey-gui/app/components/bulkProgress/generated/componentProps.d.ts
@@ -0,0 +1,32 @@
+/* Generated from widgets/bulk_progress_props.py. Do not edit manually. */
+
+export type BulkRunnerRunState = "running" | "stopping" | "evaluating" | "complete" | "error" | "stopped";
+
+export interface BulkProgressCardProps {
+  snapshot: BulkProgressSnapshot;
+  rerunAllKey?: string | null;
+}
+export interface BulkProgressSnapshot {
+  runState: BulkRunnerRunState;
+  elapsedSeconds?: number | null;
+  completedUnitRuns: number;
+  totalUnitRuns: number;
+  totalRows: number;
+  currentRowNumber: number;
+  currentWorkflowNumber: number;
+  totalWorkflows: number;
+  currentWorkflowTitle: string;
+  currentWorkflowUrl: string;
+  currentWorkflowRunTimeSeconds?: number | null;
+  creditsUsed?: number | null;
+  totalEvalRuns?: number | null;
+  evalCurrent?: number | null;
+  evalTotal?: number | null;
+  evalWorkflowTitle?: string | null;
+  inputPrompt?: string | null;
+  inputAudioUrl?: string | null;
+  lastCompletedWorkflowTitle?: string | null;
+  lastCompletedWorkflowUrl?: string | null;
+  lastCompletedRunTimeSeconds?: number | null;
+  lastCompletedCredits?: number | null;
+}
diff --git a/gooey-gui/package-lock.json b/gooey-gui/package-lock.json
index 0542cff41..839b87197 100644
--- a/gooey-gui/package-lock.json
+++ b/gooey-gui/package-lock.json
@@ -78,6 +78,7 @@
         "@types/react-plotly.js": "^2.6.3",
         "@types/uuid": "^9.0.1",
         "eslint": "^8.38.0",
+        "json-schema-to-typescript": "^15.0.4",
         "prettier": "^3.0.3",
         "typescript": "^5.0.4"
       },
@@ -99,6 +100,24 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@apidevtools/json-schema-ref-parser": {
+      "version": "11.9.3",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-11.9.3.tgz",
+      "integrity": "sha512-60vepv88RwcJtSHrD6MjIL6Ta3SOYbgfnkHb+ppAVK+o9mXprRtulx7VlRl3lN3bbvysAfCS7WMVfhUYemB0IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jsdevtools/ono": "^7.1.3",
+        "@types/json-schema": "^7.0.15",
+        "js-yaml": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/philsturgeon"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
@@ -3052,6 +3071,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jsdevtools/ono": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@jsdoc/salty": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.8.tgz",
@@ -4978,6 +5004,13 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/long": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
@@ -13454,6 +13487,30 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "license": "MIT"
     },
+    "node_modules/json-schema-to-typescript": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/json-schema-to-typescript/-/json-schema-to-typescript-15.0.4.tgz",
+      "integrity": "sha512-Su9oK8DR4xCmDsLlyvadkXzX6+GGXJpbhwoLtOGArAG61dvbW4YQmSEno2y66ahpIdmLMg6YUf/QHLgiwvkrHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@apidevtools/json-schema-ref-parser": "^11.5.5",
+        "@types/json-schema": "^7.0.15",
+        "@types/lodash": "^4.17.7",
+        "is-glob": "^4.0.3",
+        "js-yaml": "^4.1.0",
+        "lodash": "^4.17.21",
+        "minimist": "^1.2.8",
+        "prettier": "^3.2.5",
+        "tinyglobby": "^0.2.9"
+      },
+      "bin": {
+        "json2ts": "dist/src/cli.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -19867,6 +19924,54 @@
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
diff --git a/gooey-gui/package.json b/gooey-gui/package.json
index 33f924c1e..1d92509af 100644
--- a/gooey-gui/package.json
+++ b/gooey-gui/package.json
@@ -85,6 +85,7 @@
     "@types/react-plotly.js": "^2.6.3",
     "@types/uuid": "^9.0.1",
     "eslint": "^8.38.0",
+    "json-schema-to-typescript": "^15.0.4",
     "prettier": "^3.0.3",
     "typescript": "^5.0.4"
   },
diff --git a/pyproject.toml b/pyproject.toml
index 99f1551af..520b771fb 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -127,3 +127,4 @@ ignore = ["E402", "E741"]  # position of imports, single letter variables
 
 [tool.ruff.lint.per-file-ignores]
 "*/{tests,views,admin}.py" = ["F401"]
+"widgets/bulk_progress_props.py" = ["N815"]
diff --git a/scripts/generate_bulk_progress_props.py b/scripts/generate_bulk_progress_props.py
new file mode 100644
index 000000000..30f4d0db9
--- /dev/null
+++ b/scripts/generate_bulk_progress_props.py
@@ -0,0 +1,42 @@
+#!/usr/bin/env python3
+
+import json
+import subprocess
+import sys
+from pathlib import Path
+
+REPO_ROOT = Path(__file__).resolve().parents[1]
+sys.path.insert(0, str(REPO_ROOT))
+
+from widgets.bulk_progress_props import build_bulk_progress_schema
+
+GENERATED_DIR = (
+    REPO_ROOT / "gooey-gui" / "app" / "components" / "bulkProgress" / "generated"
+)
+SCHEMA_PATH = GENERATED_DIR / "bulk-progress-props.schema.json"
+TYPES_PATH = GENERATED_DIR / "componentProps.d.ts"
+
+
+def main() -> None:
+    GENERATED_DIR.mkdir(parents=True, exist_ok=True)
+
+    schema = build_bulk_progress_schema()
+    SCHEMA_PATH.write_text(json.dumps(schema, indent=2) + "\n", encoding="utf-8")
+
+    subprocess.run(
+        [
+            "npx",
+            "json-schema-to-typescript",
+            str(SCHEMA_PATH),
+            "--output",
+            str(TYPES_PATH),
+            "--bannerComment",
+            "/* Generated from widgets/bulk_progress_props.py. Do not edit manually. */",
+        ],
+        cwd=REPO_ROOT / "gooey-gui",
+        check=True,
+    )
+
+
+if __name__ == "__main__":
+    main()
diff --git a/widgets/bulk_progress_display.py b/widgets/bulk_progress_display.py
index 6678df2f7..e6f3d8c67 100644
--- a/widgets/bulk_progress_display.py
+++ b/widgets/bulk_progress_display.py
@@ -1,12 +1,15 @@
 from __future__ import annotations
 
 import datetime
-from enum import Enum
 
 import gooey_gui as gui
-from typing_extensions import NotRequired, TypedDict
 
 from daras_ai_v2.base import BasePage, RecipeRunState, StateKeys
+from widgets.bulk_progress_props import (
+    BulkProgressCardProps,
+    BulkProgressSnapshot,
+    BulkRunnerRunState,
+)
 from widgets.bulk_progress_state import (
     BulkEvalProgress,
     BulkProgress,
@@ -16,41 +19,6 @@
 BULK_RERUN_ALL_KEY = "-submit-workflow"
 
 
-class BulkRunnerRunState(str, Enum):
-    running = "running"
-    stopping = "stopping"
-    evaluating = "evaluating"
-    complete = "complete"
-    error = "error"
-    stopped = "stopped"
-
-
-# Keep in sync with gooey-gui/app/components/bulkProgress/bulkProgress.types.ts (BulkProgressSnapshot).
-class BulkProgressSnapshot(TypedDict, total=False):
-    runState: BulkRunnerRunState
-    elapsedSeconds: float | None
-    completedUnitRuns: int
-    totalUnitRuns: int
-    totalRows: int
-    currentRowNumber: int
-    currentWorkflowNumber: int
-    totalWorkflows: int
-    currentWorkflowTitle: str
-    currentWorkflowUrl: str
-    currentWorkflowRunTimeSeconds: NotRequired[float | None]
-    creditsUsed: NotRequired[int]
-    totalEvalRuns: NotRequired[int]
-    evalCurrent: NotRequired[int]
-    evalTotal: NotRequired[int]
-    evalWorkflowTitle: NotRequired[str]
-    inputPrompt: NotRequired[str]
-    inputAudioUrl: NotRequired[str]
-    lastCompletedWorkflowTitle: NotRequired[str]
-    lastCompletedWorkflowUrl: NotRequired[str]
-    lastCompletedRunTimeSeconds: NotRequired[float | None]
-    lastCompletedCredits: NotRequired[int | None]
-
-
 def render_bulk_runner_progress(*, is_cancelled: bool) -> None:
     session = gui.session_state
     progress = session.get("bulk_progress")
@@ -75,11 +43,14 @@ def render_bulk_runner_progress(*, is_cancelled: bool) -> None:
     if not snapshot:
         return
 
-    gui.component(
-        "BulkProgressCard",
+    props = BulkProgressCardProps(
         snapshot=snapshot,
         rerunAllKey=BULK_RERUN_ALL_KEY,
     )
+    gui.component(
+        "BulkProgressCard",
+        **props.model_dump(mode="json", exclude_none=True),
+    )
 
 
 def build_bulk_progress_snapshot(
@@ -98,48 +69,52 @@ def build_bulk_progress_snapshot(
     if not run_state:
         return None
 
-    snapshot: BulkProgressSnapshot = {
-        "runState": run_state,
-        "elapsedSeconds": elapsed_seconds,
-        "completedUnitRuns": progress["completed_unit_runs"],
-        "totalUnitRuns": progress["total_unit_runs"],
-        "totalRows": progress["total_rows"],
-        "currentRowNumber": progress["current_row_number"],
-        "currentWorkflowNumber": progress["current_workflow_number"],
-        "totalWorkflows": progress["total_workflows"],
-        "currentWorkflowTitle": progress["workflow_title"],
-        "currentWorkflowUrl": progress["workflow_url"],
-    }
-    if "workflow_run_time_seconds" in progress:
-        snapshot["currentWorkflowRunTimeSeconds"] = progress[
-            "workflow_run_time_seconds"
-        ]
-    if "credits_used" in progress:
-        snapshot["creditsUsed"] = progress["credits_used"]
-    if "total_eval_runs" in progress:
-        snapshot["totalEvalRuns"] = progress["total_eval_runs"]
+    eval_current = None
+    eval_total = None
+    eval_workflow_title = None
     if run_state == BulkRunnerRunState.evaluating and eval_progress:
-        snapshot["evalCurrent"] = eval_progress["current"]
-        snapshot["evalTotal"] = eval_progress["total"]
-        snapshot["evalWorkflowTitle"] = eval_progress["workflow_title"]
-    if input_prompt := progress.get("input_prompt"):
-        snapshot["inputPrompt"] = input_prompt
-    if input_audio := progress.get("input_audio"):
-        snapshot["inputAudioUrl"] = input_audio
+        eval_current = eval_progress["current"]
+        eval_total = eval_progress["total"]
+        eval_workflow_title = eval_progress["workflow_title"]
+
+    last_completed_workflow_title = None
+    last_completed_workflow_url = None
+    last_completed_run_time_seconds = None
+    last_completed_credits = None
     if progress.get("last_completed_workflow_title") and progress.get(
         "last_completed_workflow_url"
     ):
-        snapshot["lastCompletedWorkflowTitle"] = progress[
-            "last_completed_workflow_title"
-        ]
-        snapshot["lastCompletedWorkflowUrl"] = progress["last_completed_workflow_url"]
-        if "last_completed_run_time_seconds" in progress:
-            snapshot["lastCompletedRunTimeSeconds"] = progress[
-                "last_completed_run_time_seconds"
-            ]
-        if "last_completed_credits" in progress:
-            snapshot["lastCompletedCredits"] = progress["last_completed_credits"]
-    return snapshot
+        last_completed_workflow_title = progress["last_completed_workflow_title"]
+        last_completed_workflow_url = progress["last_completed_workflow_url"]
+        last_completed_run_time_seconds = progress.get(
+            "last_completed_run_time_seconds"
+        )
+        last_completed_credits = progress.get("last_completed_credits")
+
+    return BulkProgressSnapshot(
+        runState=run_state,
+        elapsedSeconds=elapsed_seconds,
+        completedUnitRuns=progress["completed_unit_runs"],
+        totalUnitRuns=progress["total_unit_runs"],
+        totalRows=progress["total_rows"],
+        currentRowNumber=progress["current_row_number"],
+        currentWorkflowNumber=progress["current_workflow_number"],
+        totalWorkflows=progress["total_workflows"],
+        currentWorkflowTitle=progress["workflow_title"],
+        currentWorkflowUrl=progress["workflow_url"],
+        currentWorkflowRunTimeSeconds=progress.get("workflow_run_time_seconds"),
+        creditsUsed=progress.get("credits_used"),
+        totalEvalRuns=progress.get("total_eval_runs"),
+        evalCurrent=eval_current,
+        evalTotal=eval_total,
+        evalWorkflowTitle=eval_workflow_title,
+        inputPrompt=progress.get("input_prompt") or None,
+        inputAudioUrl=progress.get("input_audio") or None,
+        lastCompletedWorkflowTitle=last_completed_workflow_title,
+        lastCompletedWorkflowUrl=last_completed_workflow_url,
+        lastCompletedRunTimeSeconds=last_completed_run_time_seconds,
+        lastCompletedCredits=last_completed_credits,
+    )
 
 
 def bulk_snapshot_run_state(
diff --git a/widgets/bulk_progress_props.py b/widgets/bulk_progress_props.py
new file mode 100644
index 000000000..4fec0905b
--- /dev/null
+++ b/widgets/bulk_progress_props.py
@@ -0,0 +1,62 @@
+from enum import Enum
+
+from pydantic import BaseModel, ConfigDict
+
+
+class BulkRunnerRunState(str, Enum):
+    running = "running"
+    stopping = "stopping"
+    evaluating = "evaluating"
+    complete = "complete"
+    error = "error"
+    stopped = "stopped"
+
+
+class BulkProgressSnapshot(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    runState: BulkRunnerRunState
+    elapsedSeconds: float | None = None
+    completedUnitRuns: int
+    totalUnitRuns: int
+    totalRows: int
+    currentRowNumber: int
+    currentWorkflowNumber: int
+    totalWorkflows: int
+    currentWorkflowTitle: str
+    currentWorkflowUrl: str
+    currentWorkflowRunTimeSeconds: float | None = None
+    creditsUsed: int | None = None
+    totalEvalRuns: int | None = None
+    evalCurrent: int | None = None
+    evalTotal: int | None = None
+    evalWorkflowTitle: str | None = None
+    inputPrompt: str | None = None
+    inputAudioUrl: str | None = None
+    lastCompletedWorkflowTitle: str | None = None
+    lastCompletedWorkflowUrl: str | None = None
+    lastCompletedRunTimeSeconds: float | None = None
+    lastCompletedCredits: int | None = None
+
+
+class BulkProgressCardProps(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    snapshot: BulkProgressSnapshot
+    rerunAllKey: str | None = None
+
+
+def build_bulk_progress_schema() -> dict:
+    schema = BulkProgressCardProps.model_json_schema(ref_template="#/$defs/{model}")
+    schema["$schema"] = "https://json-schema.org/draft/2020-12/schema"
+    strip_field_titles(schema)
+    return schema
+
+
+def strip_field_titles(schema: dict) -> None:
+    for prop in schema.get("properties", {}).values():
+        if isinstance(prop, dict):
+            prop.pop("title", None)
+    for definition in schema.get("$defs", {}).values():
+        if isinstance(definition, dict):
+            strip_field_titles(definition)