🤖 fix: workflow result chip labels (#3630)

## Summary

Render workflow final-report stat chips as **key** value instead of
value key, with the key emphasized as the field label.

## Background

The Workflows tab's structured-output chips were displaying the value
first and the key second, which made labels like outcome, target, and
issue read backwards.

## Implementation

- Swap the final-report stat chip ordering to key before value.
- Move the bold emphasis from the value to the key.
- Add a focused UI test covering both ordering and emphasis.

## Validation

- `bun test
src/browser/features/RightSidebar/Workflows/WorkflowTimeline.test.tsx
src/browser/features/RightSidebar/Workflows/workflowDisplay.test.ts`
- `make static-check`

## Risks

Low. This only changes presentation for primitive structured-output stat
chips in the Workflows tab final report.

---

_Generated with `mux` • Model: `openai:gpt-5.5` • Thinking: `xhigh` •
Cost: `$3.49`_

<!-- mux-attribution: model=openai:gpt-5.5 thinking=xhigh costs=3.49 -->

Author: ThomasK33

src/browser/features/RightSidebar/Workflows/WorkflowTimeline.test.tsx

@@ -0,0 +1,78 @@
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+
+import { installDom } from "../../../../../tests/ui/dom";
+void mock.module("@/browser/features/Tools/WorkflowToolShared", () => ({
+  WorkflowJsonBlock: (props: { value: unknown; ariaLabel: string }) => (
+    <pre aria-label={props.ariaLabel}>{JSON.stringify(props.value)}</pre>
+  ),
+}));
+
+import type { WorkflowRunView } from "./projectWorkflowRun";
+import { WorkflowTimeline } from "./WorkflowTimeline";
+
+function normalizeText(element: Element): string {
+  return element.textContent?.replace(/\s+/g, " ").trim() ?? "";
+}
+
+function makeCompletedView(): WorkflowRunView {
+  const timestamp = "2026-06-25T12:00:00.000Z";
+  return {
+    id: "wfr_test",
+    workflow: {
+      name: "test-workflow",
+      description: "Test workflow",
+      scope: "project",
+      executable: true,
+    },
+    status: "completed",
+    argEntries: [],
+    createdAt: timestamp,
+    updatedAt: timestamp,
+    phases: [],
+    steps: [],
+    result: {
+      reportMarkdown: "",
+      structuredOutput: {
+        outcome: "converged",
+        verifierRuns: 1,
+        nested: { ignored: true },
+      },
+    },
+    errorMessage: null,
+    stats: {
+      total: 0,
+      done: 0,
+      running: 0,
+      failed: 0,
+      elapsedMs: 0,
+    },
+  };
+}
+
+describe("WorkflowTimeline", () => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("renders final report stat chips as bold key before value", () => {
+    const { container } = render(<WorkflowTimeline view={makeCompletedView()} />);
+
+    const statTexts = Array.from(container.querySelectorAll("span"), normalizeText);
+    const boldTexts = Array.from(container.querySelectorAll("b"), normalizeText);
+
+    expect(statTexts).toContain("outcome converged");
+    expect(statTexts).toContain("verifierRuns 1");
+    expect(statTexts).not.toContain("converged outcome");
+    expect(statTexts).not.toContain("1 verifierRuns");
+    expect(boldTexts).toEqual(["outcome", "verifierRuns"]);
+  });
+});

src/browser/features/RightSidebar/Workflows/WorkflowTimeline.tsx

@@ -313,12 +313,13 @@ const WorkflowFinalReport: React.FC<{ view: WorkflowRunView }> = (props) => {
           )}
           {stats.length > 0 && (
             <div className="flex flex-wrap gap-2">
+              {/* Field labels lead and stay emphasized so report chips scan as key → value. */}
               {stats.map((stat) => (
                 <span
                   key={stat.key}
                   className="border-border bg-surface-secondary text-muted rounded-md border px-2 py-0.5 text-[11px] tabular-nums"
                 >
-                  <b className="text-content-primary font-semibold">{stat.value}</b> {stat.key}
+                  <b className="text-content-primary font-semibold">{stat.key}</b> {stat.value}
                 </span>
               ))}
             </div>