@ryanfw/prompt-orchestration-pipeline 1.3.3 → 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 {
@@ -165,6 +160,9 @@ export interface TaskCostBreakdown {
   inputCost: number;
   outputCost: number;
   totalCost: number;
+  source?: UsageSource;
+  failed?: boolean;
+  costEstimated?: boolean;
 }
 
 export interface NormalizedJobDetail extends NormalizedJobSummary {
@@ -185,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";
@@ -235,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";
   }>;
 }
 
@@ -246,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

@@ -71,8 +71,12 @@ export default function JobTable({
             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;
 
@@ -114,7 +118,14 @@ export default function JobTable({
                 <td className="px-4 py-4">
                   {readable ? (
                     <>
-                      <div className="text-sm text-gray-700">{totalCost > 0 ? formatCurrency4(totalCost) : "—"}</div>
+                      <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}
                     </>
                   ) : (

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

@@ -106,3 +106,86 @@ test("JobTable renders a normal job without readable or error as a clickable 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();
+});

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

@@ -11,20 +11,19 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-test("StageTimeline sorts by order and puts unordered stages last", () => {
+test("StageTimeline renders each stage name and purpose in order", () => {
   const view = render(
     <StageTimeline
       stages={[
-        { name: "B", order: 2 },
-        { name: "A", order: 1, isAsync: true },
-        { name: "C" },
+        { name: "ingestion", purpose: "Load raw input" },
+        { name: "inference", purpose: "Run the model" },
       ]}
     />,
   );
 
   const items = Array.from(view.container.querySelectorAll("li")).map((node) => node.textContent?.trim());
-  expect(items).toEqual(["Aasync", "B", "C"]);
-  expect(view.getByText("async")).toBeTruthy();
+  expect(items).toEqual(["ingestionLoad raw input", "inferenceRun the model"]);
+  expect(view.getByText("Load raw input")).toBeTruthy();
 });
 
 test("PageSubheader renders breadcrumbs", () => {

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

@@ -0,0 +1,64 @@
+import "./test-dom";
+
+import { render } from "@testing-library/react";
+import { afterEach, expect, test } from "bun:test";
+
+import { TaskAnalysisDisplay } from "../TaskAnalysisDisplay";
+import type { TaskAnalysis } from "../types";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function makeAnalysis(overrides: Partial<TaskAnalysis> = {}): TaskAnalysis {
+  return {
+    summary: "Summarizes the input document.",
+    stages: [{ name: "ingestion", purpose: "Load raw input" }],
+    artifacts: {
+      reads: [{ fileName: "input.json", role: "source data" }],
+      writes: [{ fileName: "output.json", role: "result data" }],
+    },
+    models: [{ provider: "deepseek", method: "chat", stage: "ingestion" }],
+    analyzedAt: "2026-06-22T00:00:00.000Z",
+    analysisStatus: "ok",
+    ...overrides,
+  };
+}
+
+test("ok renders summary, stage purpose, artifacts, models, and the AI-generated label", () => {
+  const view = render(
+    <TaskAnalysisDisplay analysis={makeAnalysis()} loading={false} error={null} pipelineSlug="demo" />,
+  );
+
+  expect(view.getByText("Summarizes the input document.")).toBeTruthy();
+  expect(view.getByText("Load raw input")).toBeTruthy();
+  expect(view.getByText("input.json")).toBeTruthy();
+  expect(view.getByText("source data")).toBeTruthy();
+  expect(view.getByText("output.json")).toBeTruthy();
+  expect(view.getByText("result data")).toBeTruthy();
+  expect(view.getByText("deepseek · chat · ingestion")).toBeTruthy();
+  expect(view.container.textContent).toContain("AI-generated, approximate");
+});
+
+test("unconfigured renders the configure message and CTA", () => {
+  const analysis = makeAnalysis({ analysisStatus: "unconfigured" });
+  const view = render(
+    <TaskAnalysisDisplay analysis={analysis} loading={false} error={null} pipelineSlug="demo" />,
+  );
+
+  expect(view.container.textContent).toContain("No analysis model is configured");
+  expect(view.getByRole("button", { name: "Configure model" })).toBeTruthy();
+});
+
+test("error renders an error note with the analysis error detail", () => {
+  const analysis = makeAnalysis({
+    analysisStatus: "error",
+    analysisError: "validation failed for field summary",
+  });
+  const view = render(
+    <TaskAnalysisDisplay analysis={analysis} loading={false} error={null} pipelineSlug="demo" />,
+  );
+
+  expect(view.getByText("Analysis failed")).toBeTruthy();
+  expect(view.getByText("validation failed for field summary")).toBeTruthy();
+});