@ryanfw/prompt-orchestration-pipeline 1.3.2 → 1.3.4

package/src/ui/client/types.ts

@@ -1,4 +1,8 @@
 import type { JobStatusValue, TaskStateValue } from "../../config/statuses";
+import type { SseEventType } from "../../config/sse-events.ts";
+import type { UsageSource } from "../../providers/types";
+
+export type { SseEventType };
 
 export type ApiErrorCode =
   | "job_running"
@@ -43,19 +47,6 @@ export interface RestartJobOptions {
   };
 }
 
-export type SseEventType =
-  | "state"
-  | "job:updated"
-  | "job:created"
-  | "job:removed"
-  | "heartbeat"
-  | "message"
-  | "status:changed"
-  | "seed:uploaded"
-  | "state:change"
-  | "state:summary"
-  | "task:updated";
-
 export interface BootstrapOptions {
   stateUrl?: string;
   sseUrl?: string;
@@ -87,6 +78,9 @@ export interface CostsSummary {
   totalCost: number;
   totalInputCost: number;
   totalOutputCost: number;
+  estimatedCost: number;
+  hasEstimated: boolean;
+  unavailableCost: number;
 }
 
 export type RetryError = { message: string; name?: string; stack?: string } | string;
@@ -96,6 +90,7 @@ export interface GateInfo {
   message: string;
   artifacts?: string[];
   requestedAt: string;
+  kind?: "approval" | "control_invalid";
 }
 
 export interface TaskFiles {
@@ -155,6 +150,8 @@ export interface NormalizedJobSummary {
   totalTokens?: number;
   displayCategory: string;
   __warnings?: string[];
+  readable?: boolean;
+  error?: { code: string; message: string; path?: string };
 }
 
 export interface TaskCostBreakdown {
@@ -163,6 +160,9 @@ export interface TaskCostBreakdown {
   inputCost: number;
   outputCost: number;
   totalCost: number;
+  source?: UsageSource;
+  failed?: boolean;
+  costEstimated?: boolean;
 }
 
 export interface NormalizedJobDetail extends NormalizedJobSummary {
@@ -183,11 +183,12 @@ export interface UseJobListWithUpdatesResult extends UseJobListResult {
 export interface UseJobDetailWithUpdatesResult {
   data: NormalizedJobDetail | null;
   loading: boolean;
-  error: string | null;
+  error: ApiError | null;
   connectionStatus: ConnectionStatus;
   isRefreshing: boolean;
   isTransitioning: boolean;
   isHydrated: boolean;
+  refetch: () => void;
 }
 
 export type AnalysisStatus = "idle" | "connecting" | "running" | "complete" | "error";
@@ -233,7 +234,7 @@ export interface JobConcurrencyApiStatus {
   }>;
   staleSlots: Array<{
     jobId: string;
-    reason: "missing_current_job" | "missing_pid" | "dead_pid" | "invalid_json";
+    reason: "missing_current_job" | "missing_pid" | "dead_pid" | "invalid_json" | "stale_runner";
   }>;
 }
 
@@ -244,11 +245,6 @@ export interface UseConcurrencyStatusResult {
   refetch: () => void;
 }
 
-export interface SseJobEvent {
-  type: SseEventType;
-  data: Record<string, unknown>;
-}
-
 export type AnalysisSseEventType =
   | "started"
   | "task:start"

package/src/ui/components/DAGGrid.tsx

@@ -346,7 +346,12 @@ export default function DAGGrid({
                 </div>
               </div>
               <div className="p-4">
-                {items[index]?.subtitle ? <div className="text-sm text-gray-600">{items[index]?.subtitle}</div> : null}
+                {items[index]?.subtitle ? (
+                  <div className="text-sm text-gray-600">
+                    {items[index]?.costEstimated ? <abbr title="Estimated cost" className="mr-0.5">≈</abbr> : null}
+                    {items[index]?.subtitle}
+                  </div>
+                ) : null}
                 {items[index]?.body ? <div className="mt-2 text-sm text-gray-700">{items[index]?.body}</div> : null}
                 <div className="mt-3 flex gap-2 border-t border-gray-100 pt-3">
                   {itemStatus === "pending" ? (

package/src/ui/components/JobDetail.tsx

@@ -33,13 +33,20 @@ export default function JobDetail({
         typeof task?.config?.["model"] === "string" ? String(task.config.model) : null,
         typeof task?.refinementAttempts === "number" ? `${task.refinementAttempts} refinements` : null,
       ];
-      const breakdown = (job.costs?.taskBreakdown?.[item.id] as Record<string, unknown> | undefined)?.["summary"] as Record<string, unknown> | undefined;
-      if (typeof breakdown?.["totalTokens"] === "number" && breakdown.totalTokens > 0) parts.push(formatTokensCompact(breakdown.totalTokens));
-      if (typeof breakdown?.["totalCost"] === "number" && breakdown.totalCost > 0) parts.push(formatCurrency4(breakdown.totalCost));
+      const breakdown = job.costs?.[item.id];
+      const breakdownTokens = breakdown ? breakdown.inputTokens + breakdown.outputTokens : 0;
+      if (breakdownTokens > 0) parts.push(formatTokensCompact(breakdownTokens));
+      if (typeof breakdown?.totalCost === "number" && breakdown.totalCost > 0) parts.push(formatCurrency4(breakdown.totalCost));
+      const source = breakdown?.source;
+      const costEstimated =
+        breakdown?.costEstimated === true ||
+        source === "estimated" ||
+        source === "unavailable";
       return {
         ...item,
         subtitle: parts.filter(Boolean).join(" · ") || null,
         body: item.body ?? task?.error?.message ?? null,
+        ...(costEstimated ? { costEstimated: true } : {}),
       };
     });
 
@@ -54,7 +61,8 @@ export default function JobDetail({
         prior.title === item.title &&
         prior.subtitle === item.subtitle &&
         prior.body === item.body &&
-        prior.restartCount === item.restartCount
+        prior.restartCount === item.restartCount &&
+        prior.costEstimated === item.costEstimated
       ) {
         return prior;
       }

package/src/ui/components/JobTable.tsx

@@ -65,47 +65,75 @@ export default function JobTable({
         <tbody className="divide-y divide-gray-200">
           {jobs.map((job) => {
             const validId = Boolean(job.id);
+            const readable = job.readable !== false;
+            const clickable = validId && readable;
             const taskMap = Array.isArray(job.tasks) ? Object.fromEntries(job.tasks.map((task) => [task.name, task] as const)) : job.tasks;
             const currentTaskId =
               typeof job.current === "string" ? job.current : job.current?.taskName;
             const currentTask = currentTaskId ? taskMap[currentTaskId] : undefined;
-            const totalCost = job.totalCost ?? job.costsSummary?.totalCost ?? 0;
+            const totalCost =
+              (job.totalCost ?? job.costsSummary?.totalCost ?? 0) +
+              (job.costsSummary?.estimatedCost ?? 0) +
+              (job.costsSummary?.unavailableCost ?? 0);
             const totalTokens = job.totalTokens ?? job.costsSummary?.totalTokens ?? 0;
+            const hasEstimated = job.costsSummary?.hasEstimated === true;
             const startMs = Object.values(taskMap).map((task) => toMs(task.startedAt)).filter((value): value is number => value !== null).sort((a, b) => a - b)[0] ?? null;
             const endMs = Object.values(taskMap).map((task) => toMs(task.endedAt)).filter((value): value is number => value !== null).sort((a, b) => b - a)[0] ?? null;
 
             return (
               <tr
                 key={job.jobId}
-                className={validId ? "cursor-pointer transition hover:bg-gray-50" : "cursor-not-allowed opacity-60"}
-                onClick={() => validId && onOpenJob(job.id)}
-                tabIndex={validId ? 0 : -1}
+                className={clickable ? "cursor-pointer transition hover:bg-gray-50" : "cursor-not-allowed opacity-60"}
+                onClick={() => clickable && onOpenJob(job.id)}
+                tabIndex={clickable ? 0 : -1}
                 onKeyDown={(event) => {
-                  if (validId && (event.key === "Enter" || event.key === " ")) onOpenJob(job.id);
+                  if (clickable && (event.key === "Enter" || event.key === " ")) onOpenJob(job.id);
                 }}
               >
                 <td className="px-4 py-4">
                   <div className="font-medium text-[#6d28d9]">{job.name}</div>
                   <div className="text-xs text-gray-500">{job.id}</div>
+                  {!readable && job.error ? <div className="text-xs text-red-600">{job.error.message}</div> : null}
                 </td>
                 <td className="px-4 py-4 text-sm text-gray-700">{job.pipelineLabel ?? job.pipeline ?? pipeline?.name ?? "—"}</td>
                 <td className="px-4 py-4">
-                  <Badge intent={getIntent(job.status)}>{job.status}</Badge>
+                  {readable ? (
+                    <Badge intent={getIntent(job.status)}>{job.status}</Badge>
+                  ) : (
+                    <Badge intent="red">Unreadable</Badge>
+                  )}
                 </td>
                 <td className="px-4 py-4 text-sm text-gray-700">{currentTask?.name ?? currentTaskId ?? "—"}</td>
                 <td className="px-4 py-4">
-                  <div className="flex min-w-[160px] items-center gap-3">
-                    <Progress value={job.progress} variant={job.status === "failed" ? "error" : job.status === "complete" ? "completed" : job.status === "running" ? "running" : "pending"} className="flex-1" />
-                    <span className="text-sm text-gray-600">{job.progress}%</span>
-                  </div>
+                  {readable ? (
+                    <div className="flex min-w-[160px] items-center gap-3">
+                      <Progress value={job.progress} variant={job.status === "failed" ? "error" : job.status === "complete" ? "completed" : job.status === "running" ? "running" : "pending"} className="flex-1" />
+                      <span className="text-sm text-gray-600">{job.progress}%</span>
+                    </div>
+                  ) : (
+                    "—"
+                  )}
                 </td>
                 <td className="px-4 py-4 text-sm text-gray-700">{countCompleted(job)} of {job.taskCount}</td>
                 <td className="px-4 py-4">
-                  <div className="text-sm text-gray-700">{totalCost > 0 ? formatCurrency4(totalCost) : "—"}</div>
-                  {totalTokens > 0 ? <div className="text-xs text-gray-500">{formatTokensCompact(totalTokens)}</div> : null}
+                  {readable ? (
+                    <>
+                      <div className="text-sm text-gray-700">
+                        {totalCost > 0 ? (
+                          <>
+                            {hasEstimated ? <abbr title="Estimated cost" className="mr-0.5">≈</abbr> : null}
+                            {formatCurrency4(totalCost)}
+                          </>
+                        ) : "—"}
+                      </div>
+                      {totalTokens > 0 ? <div className="text-xs text-gray-500">{formatTokensCompact(totalTokens)}</div> : null}
+                    </>
+                  ) : (
+                    "—"
+                  )}
                 </td>
                 <td className="px-4 py-4 text-sm text-gray-700">
-                  {startMs ? <TimerText startMs={startMs} endMs={endMs} granularity="second" /> : "—"}
+                  {readable ? (startMs ? <TimerText startMs={startMs} endMs={endMs} granularity="second" /> : "—") : "—"}
                 </td>
               </tr>
             );

package/src/ui/components/StageTimeline.tsx

@@ -1,29 +1,17 @@
 import { memo } from "react";
 
-import type { Stage } from "./types";
-import { Badge } from "./ui/Badge";
+import type { AnalysisStage } from "./types";
 
-export const StageTimeline = memo(function StageTimeline({ stages }: { stages: Stage[] }) {
-  const sortedStages = stages
-    .filter((stage) => stage.name)
-    .slice()
-    .sort((a, b) => {
-      const orderA = typeof a.order === "number" ? a.order : Number.MAX_SAFE_INTEGER;
-      const orderB = typeof b.order === "number" ? b.order : Number.MAX_SAFE_INTEGER;
-      return orderA - orderB;
-    });
+export const StageTimeline = memo(function StageTimeline({ stages }: { stages: AnalysisStage[] }) {
+  const namedStages = stages.filter((stage) => stage.name);
 
   return (
     <ol role="list" aria-label="Task execution stages" className="relative ml-1 space-y-4 border-l border-gray-300">
-      {sortedStages.map((stage) => (
-        <li key={stage.name} className="relative flex items-center gap-3 pl-4">
-          <div className="absolute left-[-5px] h-2 w-2 rounded-full bg-[#6d28d9]" />
-          <span className="text-sm">{stage.name}</span>
-          {stage.isAsync ? (
-            <Badge intent="amber" className="ml-auto">
-              async
-            </Badge>
-          ) : null}
+      {namedStages.map((stage) => (
+        <li key={stage.name} className="relative flex flex-col gap-1 pl-4">
+          <div className="absolute left-[-5px] top-1.5 h-2 w-2 rounded-full bg-[#6d28d9]" />
+          <span className="text-sm font-medium">{stage.name}</span>
+          {stage.purpose ? <span className="text-sm text-gray-600">{stage.purpose}</span> : null}
         </li>
       ))}
     </ol>

package/src/ui/components/TaskAnalysisDisplay.tsx

@@ -45,11 +45,47 @@ export const TaskAnalysisDisplay = memo(function TaskAnalysisDisplay({
   };
 
   if (loading) return <div className="p-4 text-sm text-gray-500">Loading analysis…</div>;
-  if (error) return <div className="p-4 text-sm text-red-700">{error}</div>;
+  if (error) return <div className="p-4 text-sm text-red-700" role="alert">{error}</div>;
   if (analysis === null) return <div className="p-4 text-sm text-gray-500">No analysis available.</div>;
 
+  if (analysis.analysisStatus === "unconfigured") {
+    return (
+      <div className="space-y-3 p-6 text-sm" role="status">
+        <h3 className="text-base font-semibold">Analysis not configured</h3>
+        <p className="text-gray-600">
+          No analysis model is configured. Set an internal analysis model to generate a reference for this
+          task.
+        </p>
+        {analysis.analysisError ? (
+          <p className="text-xs text-gray-500">{analysis.analysisError}</p>
+        ) : null}
+        <Button size="sm" variant="outline">
+          Configure model
+        </Button>
+      </div>
+    );
+  }
+
+  if (analysis.analysisStatus === "error") {
+    return (
+      <div className="space-y-2 p-6 text-sm" role="alert">
+        <h3 className="text-base font-semibold text-red-700">Analysis failed</h3>
+        <p className="text-gray-600">The analysis could not be generated. Re-run analysis to try again.</p>
+        {analysis.analysisError ? (
+          <p className="text-xs text-gray-500">{analysis.analysisError}</p>
+        ) : null}
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6 p-6">
+      {analysis.summary ? (
+        <section className="space-y-2">
+          <h3 className="text-base font-semibold">Summary</h3>
+          <p className="text-sm text-gray-700">{analysis.summary}</p>
+        </section>
+      ) : null}
       <section className="space-y-3">
         <h3 className="text-base font-semibold">Artifacts</h3>
         <div className="grid gap-4 md:grid-cols-2">
@@ -57,8 +93,11 @@ export const TaskAnalysisDisplay = memo(function TaskAnalysisDisplay({
             <p className="mb-2 text-sm font-medium">Reads</p>
             <ul className="space-y-2 text-sm">
               {analysis.artifacts.reads.map((artifact) => (
-                <li key={`read-${artifact.fileName}`} className="flex items-center justify-between gap-3 rounded border p-2">
-                  <span>{artifact.fileName}</span>
+                <li key={`read-${artifact.fileName}`} className="flex items-start justify-between gap-3 rounded border p-2">
+                  <span className="flex flex-col">
+                    <span className="font-medium">{artifact.fileName}</span>
+                    {artifact.role ? <span className="text-xs text-gray-600">{artifact.role}</span> : null}
+                  </span>
                   <Button size="sm" variant="outline" onClick={() => void openPreview(artifact.fileName, "read")}>
                     Preview
                   </Button>
@@ -70,8 +109,11 @@ export const TaskAnalysisDisplay = memo(function TaskAnalysisDisplay({
             <p className="mb-2 text-sm font-medium">Writes</p>
             <ul className="space-y-2 text-sm">
               {analysis.artifacts.writes.map((artifact) => (
-                <li key={`write-${artifact.fileName}`} className="flex items-center justify-between gap-3 rounded border p-2">
-                  <span>{artifact.fileName}</span>
+                <li key={`write-${artifact.fileName}`} className="flex items-start justify-between gap-3 rounded border p-2">
+                  <span className="flex flex-col">
+                    <span className="font-medium">{artifact.fileName}</span>
+                    {artifact.role ? <span className="text-xs text-gray-600">{artifact.role}</span> : null}
+                  </span>
                   <Button size="sm" variant="outline" onClick={() => void openPreview(artifact.fileName, "write")}>
                     Preview
                   </Button>
@@ -95,7 +137,7 @@ export const TaskAnalysisDisplay = memo(function TaskAnalysisDisplay({
           ))}
         </ul>
       </section>
-      <p className="text-xs text-gray-500">Analyzed at {analysis.analyzedAt}</p>
+      <p className="text-xs text-gray-500">AI-generated, approximate · Analyzed at {analysis.analyzedAt}</p>
       {preview !== null ? (
         <SchemaPreviewPanel
           fileName={preview.fileName}

package/src/ui/components/__tests__/DAGGrid.test.tsx

@@ -246,3 +246,39 @@ test("DAGGrid renders gate-adjacent waiting nodes with a visible waiting label",
   expect(view.getByText("Waiting")).toBeTruthy();
   expect(view.container.querySelector('[data-status="waiting"]')).not.toBeNull();
 });
+
+test("DAGGrid renders estimated marker when costEstimated is true", () => {
+  installMatchMedia();
+
+  const view = render(
+    <DAGGrid
+      items={[makeItem({ id: "build", title: "Build", status: "done", subtitle: "gpt-4 · 150 tok · $0.0012", costEstimated: true })]}
+      jobId="job-1"
+      taskById={{ build: makeTaskState({ name: "build", state: "done" }) }}
+      pipelineTasks={["build"]}
+      filesByTypeForItem={() => emptyFiles}
+      geometryAdapter={geometryAdapter}
+    />,
+  );
+
+  const marker = view.container.querySelector('abbr[title="Estimated cost"]');
+  expect(marker).not.toBeNull();
+  expect(marker?.textContent).toBe("≈");
+});
+
+test("DAGGrid omits estimated marker when costEstimated is absent", () => {
+  installMatchMedia();
+
+  const view = render(
+    <DAGGrid
+      items={[makeItem({ id: "build", title: "Build", status: "done", subtitle: "gpt-4 · 150 tok · $0.0012" })]}
+      jobId="job-1"
+      taskById={{ build: makeTaskState({ name: "build", state: "done" }) }}
+      pipelineTasks={["build"]}
+      filesByTypeForItem={() => emptyFiles}
+      geometryAdapter={geometryAdapter}
+    />,
+  );
+
+  expect(view.container.querySelector('abbr[title="Estimated cost"]')).toBeNull();
+});

package/src/ui/components/__tests__/JobDetail.test.tsx

@@ -137,3 +137,115 @@ test("JobDetail cancels gate rejection when the prompt is cancelled", () => {
     window.prompt = originalPrompt;
   }
 });
+
+test("JobDetail flags estimated task cost on the DAG item", () => {
+  const job: JobDetailType = {
+    ...makeJob(0),
+    costs: {
+      build: {
+        inputTokens: 100,
+        outputTokens: 50,
+        inputCost: 0.0006,
+        outputCost: 0.0006,
+        totalCost: 0.0012,
+        source: "estimated",
+      },
+    },
+  };
+
+  render(<JobDetail job={job} pipeline={pipeline} />);
+
+  const lastItems = capturedItems[capturedItems.length - 1] as DagItem[];
+  const buildItem = lastItems.find((item) => item.id === "build");
+  expect(buildItem?.costEstimated).toBe(true);
+});
+
+test("JobDetail flags unavailable task cost on the DAG item", () => {
+  const job: JobDetailType = {
+    ...makeJob(0),
+    costs: {
+      build: {
+        inputTokens: 100,
+        outputTokens: 50,
+        inputCost: 0.0006,
+        outputCost: 0.0006,
+        totalCost: 0.0012,
+        source: "unavailable",
+      },
+    },
+  };
+
+  render(<JobDetail job={job} pipeline={pipeline} />);
+
+  const lastItems = capturedItems[capturedItems.length - 1] as DagItem[];
+  const buildItem = lastItems.find((item) => item.id === "build");
+  expect(buildItem?.costEstimated).toBe(true);
+});
+
+test("JobDetail does not flag reported failed task cost as estimated", () => {
+  const job: JobDetailType = {
+    ...makeJob(0),
+    costs: {
+      build: {
+        inputTokens: 100,
+        outputTokens: 0,
+        inputCost: 0.0006,
+        outputCost: 0,
+        totalCost: 0.0006,
+        source: "reported",
+        failed: true,
+      },
+    },
+  };
+
+  render(<JobDetail job={job} pipeline={pipeline} />);
+
+  const lastItems = capturedItems[capturedItems.length - 1] as DagItem[];
+  const buildItem = lastItems.find((item) => item.id === "build");
+  expect(buildItem?.costEstimated).toBeFalsy();
+});
+
+test("JobDetail flags reported task cost when costEstimated is explicit", () => {
+  const job: JobDetailType = {
+    ...makeJob(0),
+    costs: {
+      build: {
+        inputTokens: 100,
+        outputTokens: 50,
+        inputCost: 0,
+        outputCost: 0,
+        totalCost: 0,
+        source: "reported",
+        costEstimated: true,
+      },
+    },
+  };
+
+  render(<JobDetail job={job} pipeline={pipeline} />);
+
+  const lastItems = capturedItems[capturedItems.length - 1] as DagItem[];
+  const buildItem = lastItems.find((item) => item.id === "build");
+  expect(buildItem?.costEstimated).toBe(true);
+});
+
+test("JobDetail leaves costEstimated unset for reported task cost", () => {
+  const job: JobDetailType = {
+    ...makeJob(0),
+    costs: {
+      build: {
+        inputTokens: 100,
+        outputTokens: 50,
+        inputCost: 0.0006,
+        outputCost: 0.0006,
+        totalCost: 0.0012,
+        source: "reported",
+      },
+    },
+  };
+
+  render(<JobDetail job={job} pipeline={pipeline} />);
+
+  const lastItems = capturedItems[capturedItems.length - 1] as DagItem[];
+  const buildItem = lastItems.find((item) => item.id === "build");
+  expect(buildItem?.costEstimated).toBeFalsy();
+});

package/src/ui/components/__tests__/JobTable.test.tsx

@@ -1,6 +1,6 @@
 import "./test-dom";
 
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { afterEach, expect, mock, test } from "bun:test";
 
@@ -53,3 +53,139 @@ test("JobTable renders waiting status badge", () => {
 
   expect(view.getByText("waiting")).toBeTruthy();
 });
+
+test("JobTable renders an unreadable job as a non-clickable row with badge and recovery text", () => {
+  const recoveryMessage =
+    'Status file is unreadable (INVALID_JSON). Repair or delete tasks-status.json for job "job-bad" to recover.';
+  const onOpenJob = mock((_jobId: string) => {});
+  const view = render(
+    <MemoryRouter>
+      <JobTable
+        jobs={[
+          makeJob({
+            id: "job-bad",
+            jobId: "job-bad",
+            name: "Bad Job",
+            status: "error",
+            readable: false,
+            error: { code: "INVALID_JSON", message: recoveryMessage },
+          }),
+        ]}
+        onOpenJob={onOpenJob}
+      />
+    </MemoryRouter>,
+  );
+
+  const row = view.container.querySelector("tbody tr");
+  expect(row).toBeTruthy();
+  expect(row?.getAttribute("tabindex")).toBe("-1");
+  expect(row?.className).toContain("cursor-not-allowed");
+
+  expect(view.getByText("Unreadable")).toBeTruthy();
+  expect(view.getByText(recoveryMessage)).toBeTruthy();
+
+  fireEvent.click(row!);
+  fireEvent.keyDown(row!, { key: "Enter" });
+  expect(onOpenJob).not.toHaveBeenCalled();
+});
+
+test("JobTable renders a normal job without readable or error as a clickable row", () => {
+  const onOpenJob = mock((_jobId: string) => {});
+  const view = render(
+    <MemoryRouter>
+      <JobTable jobs={[makeJob()]} onOpenJob={onOpenJob} />
+    </MemoryRouter>,
+  );
+
+  const row = view.container.querySelector("tbody tr");
+  expect(row).toBeTruthy();
+  expect(row?.getAttribute("tabindex")).toBe("0");
+  expect(row?.className).toContain("cursor-pointer");
+
+  fireEvent.click(row!);
+  expect(onOpenJob).toHaveBeenCalledTimes(1);
+  expect(onOpenJob).toHaveBeenCalledWith("job-1");
+});
+
+test("JobTable marks estimated cost when costsSummary.hasEstimated is true", () => {
+  const view = render(
+    <MemoryRouter>
+      <JobTable
+        jobs={[
+          makeJob({
+            costsSummary: {
+              totalTokens: 10,
+              totalInputTokens: 5,
+              totalOutputTokens: 5,
+              totalCost: 0.0012,
+              totalInputCost: 0.0006,
+              totalOutputCost: 0.0006,
+              estimatedCost: 0.0012,
+              hasEstimated: true,
+              unavailableCost: 0,
+            },
+          }),
+        ]}
+        onOpenJob={() => undefined}
+      />
+    </MemoryRouter>,
+  );
+
+  const marker = view.container.querySelector('tbody abbr[title="Estimated cost"]');
+  expect(marker).not.toBeNull();
+  expect(marker?.textContent).toBe("≈");
+});
+
+test("JobTable displays reported, estimated, and unavailable cost buckets together", () => {
+  const view = render(
+    <MemoryRouter>
+      <JobTable
+        jobs={[
+          makeJob({
+            costsSummary: {
+              totalTokens: 10,
+              totalInputTokens: 5,
+              totalOutputTokens: 5,
+              totalCost: 0.001,
+              totalInputCost: 0.001,
+              totalOutputCost: 0,
+              estimatedCost: 0.002,
+              hasEstimated: true,
+              unavailableCost: 0.003,
+            },
+          }),
+        ]}
+        onOpenJob={() => undefined}
+      />
+    </MemoryRouter>,
+  );
+
+  expect(view.getByText("$0.006")).toBeTruthy();
+});
+
+test("JobTable omits estimated marker for a fully reported job", () => {
+  const view = render(
+    <MemoryRouter>
+      <JobTable
+        jobs={[
+          makeJob({
+            costsSummary: {
+              totalTokens: 10,
+              totalInputTokens: 5,
+              totalOutputTokens: 5,
+              totalCost: 0.0012,
+              totalInputCost: 0.0006,
+              totalOutputCost: 0.0006,
+              estimatedCost: 0,
+              hasEstimated: false,
+              unavailableCost: 0,
+            },
+          }),
+        ]}
+        onOpenJob={() => undefined}
+      />
+    </MemoryRouter>,
+  );
+
+  expect(view.container.querySelector('tbody abbr[title="Estimated cost"]')).toBeNull();
+});