diff --git a/app/routes/$orgSlug/settings/data-management/+components/job-history.tsx b/app/routes/$orgSlug/settings/data-management/+components/job-history.tsx
new file mode 100644
index 00000000..0f6b37dc
--- /dev/null
+++ b/app/routes/$orgSlug/settings/data-management/+components/job-history.tsx
@@ -0,0 +1,206 @@
+import type { RunStatus, TypedClientRun } from '@coji/durably-react'
+import {
+  Alert,
+  AlertDescription,
+  Badge,
+  Button,
+  Stack,
+} from '~/app/components/ui'
+import { Progress } from '~/app/components/ui/progress'
+import dayjs from '~/app/libs/dayjs'
+
+type Run = TypedClientRun<
+  Record<string, unknown>,
+  Record<string, unknown> | undefined
+>
+
+export function isRunActive(status: RunStatus): boolean {
+  return status === 'pending' || status === 'leased'
+}
+
+const jobNameColors: Record<string, string> = {
+  crawl: 'bg-blue-100 text-blue-800',
+  recalculate: 'bg-purple-100 text-purple-800',
+  classify: 'bg-amber-100 text-amber-800',
+  backfill: 'bg-emerald-100 text-emerald-800',
+}
+
+function StatusBadge({ status }: { status: RunStatus }) {
+  const variant =
+    {
+      pending: 'outline' as const,
+      leased: 'secondary' as const,
+      completed: 'default' as const,
+      failed: 'destructive' as const,
+      cancelled: 'outline' as const,
+    }[status] ?? ('outline' as const)
+
+  return <Badge variant={variant}>{status}</Badge>
+}
+
+function RunItem({
+  run,
+  onCancel,
+  onRetrigger,
+  isActing,
+}: {
+  run: Run
+  onCancel: (runId: string) => void
+  onRetrigger: (runId: string) => void
+  isActing: boolean
+}) {
+  const isRunning = isRunActive(run.status)
+  const canRetrigger = run.status === 'failed' || run.status === 'cancelled'
+
+  return (
+    <div className="space-y-2 rounded-md border p-3">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <span
+            className={`rounded px-1.5 py-0.5 text-xs font-medium ${jobNameColors[run.jobName] ?? 'bg-gray-100 text-gray-800'}`}
+          >
+            {run.jobName}
+          </span>
+          <StatusBadge status={run.status} />
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-xs">
+            {dayjs.utc(run.createdAt).fromNow()}
+          </span>
+          {isRunning && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-xs"
+              onClick={() => onCancel(run.id)}
+              disabled={isActing}
+            >
+              Cancel
+            </Button>
+          )}
+          {canRetrigger && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-xs"
+              onClick={() => onRetrigger(run.id)}
+              disabled={isActing}
+            >
+              Retry
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {isRunning && run.progress && (
+        <div className="space-y-1">
+          <p className="text-muted-foreground text-xs">
+            {run.progress.message ?? 'Processing...'}
+          </p>
+          {run.progress.current != null &&
+            run.progress.total != null &&
+            run.progress.total > 0 && (
+              <Progress
+                value={(run.progress.current / run.progress.total) * 100}
+                className="h-1.5"
+              />
+            )}
+        </div>
+      )}
+
+      {run.status === 'completed' && run.output && (
+        <p className="text-muted-foreground text-xs">
+          {(() => {
+            const pullCount = (run.output as { pullCount?: number }).pullCount
+            return pullCount != null ? `${pullCount} PRs updated` : 'Done'
+          })()}
+        </p>
+      )}
+
+      {run.status === 'failed' && run.error && (
+        <p className="text-xs text-red-600">{run.error}</p>
+      )}
+    </div>
+  )
+}
+
+export function JobHistory({
+  runs,
+  page,
+  hasMore,
+  isLoading,
+  onNextPage,
+  onPrevPage,
+  onCancel,
+  onRetrigger,
+  isActing,
+  actionError,
+}: {
+  runs: Run[]
+  page: number
+  hasMore: boolean
+  isLoading: boolean
+  onNextPage: () => void
+  onPrevPage: () => void
+  onCancel: (runId: string) => void
+  onRetrigger: (runId: string) => void
+  isActing: boolean
+  actionError: string | null
+}) {
+  return (
+    <Stack>
+      <div className="space-y-1">
+        <p className="text-sm font-medium">Job History</p>
+        <p className="text-muted-foreground text-xs">
+          Recent job executions for this organization.
+        </p>
+      </div>
+
+      {actionError && (
+        <Alert variant="destructive">
+          <AlertDescription>{actionError}</AlertDescription>
+        </Alert>
+      )}
+
+      {isLoading && runs.length === 0 ? (
+        <p className="text-muted-foreground text-xs">Loading...</p>
+      ) : runs.length === 0 ? (
+        <p className="text-muted-foreground text-xs">No job history yet.</p>
+      ) : (
+        <Stack gap="2">
+          {runs.map((run) => (
+            <RunItem
+              key={run.id}
+              run={run}
+              onCancel={onCancel}
+              onRetrigger={onRetrigger}
+              isActing={isActing}
+            />
+          ))}
+        </Stack>
+      )}
+
+      {(page > 0 || hasMore) && (
+        <div className="flex items-center justify-between">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onPrevPage}
+            disabled={page === 0}
+          >
+            Prev
+          </Button>
+          <span className="text-muted-foreground text-xs">Page {page + 1}</span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onNextPage}
+            disabled={!hasMore}
+          >
+            Next
+          </Button>
+        </div>
+      )}
+    </Stack>
+  )
+}
diff --git a/app/routes/$orgSlug/settings/data-management/index.tsx b/app/routes/$orgSlug/settings/data-management/index.tsx
index d7c89100..56c76373 100644
--- a/app/routes/$orgSlug/settings/data-management/index.tsx
+++ b/app/routes/$orgSlug/settings/data-management/index.tsx
@@ -1,21 +1,20 @@
 import { useState } from 'react'
-import { data, href, useFetcher } from 'react-router'
+import { data, href, useFetcher, useLoaderData } from 'react-router'
 import { match } from 'ts-pattern'
 import {
   Alert,
   AlertDescription,
-  Badge,
   Button,
   Checkbox,
   Label,
   Stack,
 } from '~/app/components/ui'
-import { Progress } from '~/app/components/ui/progress'
 import { orgContext } from '~/app/middleware/context'
 import { durably } from '~/app/services/durably'
 import { durably as serverDurably } from '~/app/services/durably.server'
 import type { JobSteps } from '~/app/services/jobs/shared-steps.server'
 import ContentSection from '../+components/content-section'
+import { JobHistory, isRunActive } from './+components/job-history'
 import type { Route } from './+types/index'
 
 export const handle = {
@@ -25,6 +24,11 @@ export const handle = {
   }),
 }
 
+export const loader = ({ context }: Route.LoaderArgs) => {
+  const { organization } = context.get(orgContext)
+  return data({ organizationId: organization.id })
+}
+
 export const action = async ({ request, context }: Route.ActionArgs) => {
   const { organization: org } = context.get(orgContext)
   const formData = await request.formData()
@@ -33,14 +37,14 @@ export const action = async ({ request, context }: Route.ActionArgs) => {
   return match(intent)
     .with('refresh', async () => {
       try {
-        const run = await serverDurably.jobs.crawl.trigger(
+        await serverDurably.jobs.crawl.trigger(
           { organizationId: org.id, refresh: true },
           {
             concurrencyKey: `crawl:${org.id}`,
             labels: { organizationId: org.id },
           },
         )
-        return data({ intent: 'refresh' as const, ok: true, runId: run.id })
+        return data({ intent: 'refresh' as const, ok: true })
       } catch {
         return data(
           { intent: 'refresh' as const, error: 'Failed to start refresh' },
@@ -66,18 +70,14 @@ export const action = async ({ request, context }: Route.ActionArgs) => {
       }
 
       try {
-        const run = await serverDurably.jobs.recalculate.trigger(
+        await serverDurably.jobs.recalculate.trigger(
           { organizationId: org.id, steps },
           {
             concurrencyKey: `recalculate:${org.id}`,
             labels: { organizationId: org.id },
           },
         )
-        return data({
-          intent: 'recalculate' as const,
-          ok: true,
-          runId: run.id,
-        })
+        return data({ intent: 'recalculate' as const, ok: true })
       } catch {
         return data(
           {
@@ -91,119 +91,19 @@ export const action = async ({ request, context }: Route.ActionArgs) => {
     .otherwise(() => data({ error: 'Invalid intent' }, { status: 400 }))
 }
 
-// --- Shared Run Status Alerts ---
-
-function RunStatusAlerts({
-  label,
-  progress,
-  output,
-  runError,
-  triggerError,
-  isRunning,
-  isCompleted,
-  isFailed,
-}: {
-  label: string
-  progress: { message?: string; current?: number; total?: number } | null
-  output: { pullCount?: number } | null
-  runError: string | null
-  triggerError: string | null
-  isRunning: boolean
-  isCompleted: boolean
-  isFailed: boolean
-}) {
-  if (isRunning && progress) {
-    return (
-      <Alert>
-        <AlertDescription>
-          <div className="space-y-2">
-            <p className="text-sm">{progress.message ?? 'Processing...'}</p>
-            {progress.current != null &&
-              progress.total != null &&
-              progress.total > 0 && (
-                <Progress
-                  value={(progress.current / progress.total) * 100}
-                  className="h-2"
-                />
-              )}
-          </div>
-        </AlertDescription>
-      </Alert>
-    )
-  }
-
-  if (isRunning) {
-    return (
-      <Alert>
-        <AlertDescription>Starting {label}...</AlertDescription>
-      </Alert>
-    )
-  }
-
-  const capitalizedLabel = label.charAt(0).toUpperCase() + label.slice(1)
-
-  if (isCompleted) {
-    return (
-      <Alert>
-        <AlertDescription>
-          {capitalizedLabel} completed.{' '}
-          {output?.pullCount != null && `${output.pullCount} PRs updated.`}
-        </AlertDescription>
-      </Alert>
-    )
-  }
-
-  if (isFailed) {
-    return (
-      <Alert variant="destructive">
-        <AlertDescription>
-          {capitalizedLabel} failed. {runError}
-        </AlertDescription>
-      </Alert>
-    )
-  }
-
-  if (triggerError) {
-    return (
-      <Alert variant="destructive">
-        <AlertDescription>{triggerError}</AlertDescription>
-      </Alert>
-    )
-  }
-
-  return null
-}
-
 // --- Refresh Section ---
 
-function RefreshSection() {
+function RefreshSection({ isRunning }: { isRunning: boolean }) {
   const fetcher = useFetcher()
   const isSubmitting = fetcher.state !== 'idle'
-
-  const runId =
-    fetcher.data?.intent === 'refresh' && fetcher.data?.ok
-      ? fetcher.data.runId
-      : null
-  const {
-    progress,
-    output,
-    error: runError,
-    isPending,
-    isLeased,
-    isCompleted,
-    isFailed,
-  } = durably.crawl.useRun(runId)
-
-  const isRunning = isPending || isLeased
+  const triggerError =
+    fetcher.data?.intent === 'refresh' ? fetcher.data?.error : null
 
   return (
     <Stack>
       <div className="flex items-start justify-between gap-4">
         <div className="space-y-1">
-          <p className="flex items-center gap-2 text-sm font-medium">
-            Full Refresh
-            {isRunning && <Badge variant="secondary">Running</Badge>}
-          </p>
+          <p className="text-sm font-medium">Full Refresh</p>
           <p className="text-muted-foreground text-xs">
             Re-fetch all PR data from GitHub immediately.
           </p>
@@ -216,46 +116,25 @@ function RefreshSection() {
         </fetcher.Form>
       </div>
 
-      <RunStatusAlerts
-        label="full refresh"
-        progress={progress}
-        output={output}
-        runError={runError}
-        triggerError={
-          fetcher.data?.intent === 'refresh' ? fetcher.data?.error : null
-        }
-        isRunning={isRunning}
-        isCompleted={isCompleted}
-        isFailed={isFailed}
-      />
+      {triggerError && (
+        <Alert variant="destructive">
+          <AlertDescription>{triggerError}</AlertDescription>
+        </Alert>
+      )}
     </Stack>
   )
 }
 
 // --- Recalculate Section ---
 
-function RecalculateSection() {
+function RecalculateSection({ isRunning }: { isRunning: boolean }) {
   const fetcher = useFetcher()
   const [upsert, setUpsert] = useState(true)
   const [exportData, setExportData] = useState(false)
   const noneSelected = !upsert && !exportData
-
-  const runId =
-    fetcher.data?.intent === 'recalculate' && fetcher.data?.ok
-      ? fetcher.data.runId
-      : null
-  const {
-    progress,
-    output,
-    error: runError,
-    isPending,
-    isLeased,
-    isCompleted,
-    isFailed,
-  } = durably.recalculate.useRun(runId)
-
-  const isRunning = isPending || isLeased
   const isSubmitting = fetcher.state !== 'idle'
+  const triggerError =
+    fetcher.data?.intent === 'recalculate' ? fetcher.data?.error : null
 
   return (
     <Stack>
@@ -308,18 +187,11 @@ function RecalculateSection() {
         </Stack>
       </fetcher.Form>
 
-      <RunStatusAlerts
-        label="recalculation"
-        progress={progress}
-        output={output}
-        runError={runError}
-        triggerError={
-          fetcher.data?.intent === 'recalculate' ? fetcher.data?.error : null
-        }
-        isRunning={isRunning}
-        isCompleted={isCompleted}
-        isFailed={isFailed}
-      />
+      {triggerError && (
+        <Alert variant="destructive">
+          <AlertDescription>{triggerError}</AlertDescription>
+        </Alert>
+      )}
     </Stack>
   )
 }
@@ -371,15 +243,49 @@ function ExportDataSection({ orgSlug }: { orgSlug: string }) {
 export default function DataManagementPage({
   params: { orgSlug },
 }: Route.ComponentProps) {
+  const { organizationId } = useLoaderData<typeof loader>()
+
+  const { runs, page, hasMore, isLoading, nextPage, prevPage } =
+    durably.useRuns({
+      labels: { organizationId },
+      pageSize: 10,
+    })
+
+  const {
+    cancel,
+    retrigger,
+    isLoading: isActing,
+    error: actionError,
+  } = durably.useRunActions()
+
+  const isCrawlRunning = runs.some(
+    (r) => r.jobName === 'crawl' && isRunActive(r.status),
+  )
+  const isRecalculateRunning = runs.some(
+    (r) => r.jobName === 'recalculate' && isRunActive(r.status),
+  )
+
   return (
     <ContentSection
       title="Data Management"
       desc="Manage data refresh and recalculation for this organization."
     >
       <Stack gap="6">
-        <RefreshSection />
-        <RecalculateSection />
+        <RefreshSection isRunning={isCrawlRunning} />
+        <RecalculateSection isRunning={isRecalculateRunning} />
         <ExportDataSection orgSlug={orgSlug} />
+        <JobHistory
+          runs={runs}
+          page={page}
+          hasMore={hasMore}
+          isLoading={isLoading}
+          onNextPage={nextPage}
+          onPrevPage={prevPage}
+          onCancel={cancel}
+          onRetrigger={retrigger}
+          isActing={isActing}
+          actionError={actionError}
+        />
       </Stack>
     </ContentSection>
   )