From 926d6c9402cc4ccb6a55510cd66a3fae488e4bef Mon Sep 17 00:00:00 2001
From: abrichr <richard.abrich@mldsai.com>
Date: Sun, 18 Oct 2026 00:16:44 -0400
Subject: [PATCH] Calm UI: Check it, Watch it run and the steps view in plain
 words

- Check it: finished parts fold to their title; saving steps that check the record the same way say it once; the last part is 'Approve this workflow' and says it is approved once, then stops only when something doesn't match.
- Watch it run: 'Run it' and 'Replay the recording' instead of 'Run with safety gates' and 'Replay'; no 'Execute' eyebrow; outcome pills in words; contract labels Right record / Screen checks / Read-back; plain target form copy.
- Steps view and Qualification: 'Checked' / 'Not checked' instead of 'Armed' / 'Not armed'; plain column names.
- Results: shorter subtitle; the data note moves to the fine print.
---
 packages/desktop/src/screens/CheckIt.test.tsx |  4 +-
 packages/desktop/src/screens/CheckIt.tsx      | 62 +++++++++++++++----
 .../desktop/src/screens/Qualification.tsx     |  8 +--
 packages/desktop/src/screens/Results.tsx      |  6 +-
 .../desktop/src/screens/WatchRun.test.tsx     | 10 +--
 packages/desktop/src/screens/WatchRun.tsx     | 58 ++++++++---------
 packages/desktop/src/styles/app.css           | 26 +++++++-
 .../src/ui/ExecutionTargetForm.test.tsx       |  2 +-
 .../desktop/src/ui/ExecutionTargetForm.tsx    |  2 +-
 .../desktop/src/ui/ProgramWorkbench.test.tsx  |  2 +-
 packages/desktop/src/ui/ProgramWorkbench.tsx  | 26 ++++----
 packages/desktop/src/ui/ReplayMonitor.tsx     |  2 +-
 12 files changed, 133 insertions(+), 75 deletions(-)

diff --git a/packages/desktop/src/screens/CheckIt.test.tsx b/packages/desktop/src/screens/CheckIt.test.tsx
index 3ce0ced31..9bdbb716a 100644
--- a/packages/desktop/src/screens/CheckIt.test.tsx
+++ b/packages/desktop/src/screens/CheckIt.test.tsx
@@ -312,7 +312,7 @@ it("approves, locks the version, and offers Run it", async () => {
   const onRun = vi.fn();
   render(<CheckIt workflowId="wf-1" onExactChecks={() => {}} onRun={onRun} />);
 
-  fireEvent.click(await screen.findByRole("button", { name: "Approve for use" }));
+  fireEvent.click(await screen.findByRole("button", { name: "Approve this workflow" }));
 
   expect(await screen.findByText("Approved and locked")).toBeTruthy();
   fireEvent.click(screen.getByRole("button", { name: "Run it" }));
@@ -322,7 +322,7 @@ it("approves, locks the version, and offers Run it", async () => {
 it("keeps approval off until the practice item passed", async () => {
   engine(project());
   render(<CheckIt workflowId="wf-1" onExactChecks={() => {}} onRun={() => {}} />);
-  const approve = await screen.findByRole("button", { name: "Approve for use" });
+  const approve = await screen.findByRole("button", { name: "Approve this workflow" });
   expect((approve as HTMLButtonElement).disabled).toBe(true);
 });
 
diff --git a/packages/desktop/src/screens/CheckIt.tsx b/packages/desktop/src/screens/CheckIt.tsx
index 9c42c1495..86dfaed55 100644
--- a/packages/desktop/src/screens/CheckIt.tsx
+++ b/packages/desktop/src/screens/CheckIt.tsx
@@ -118,11 +118,25 @@ function CheckSection({
     >
       <StepBadge state={state} index={index} passed={passed} />
       <div className="check-step-body">
-        <div className="check-step-head">
-          <h2 id={`check-${index}`}>{title}</h2>
-          <span className="check-step-state">{stateWord(state, doneWord)}</span>
-        </div>
-        {children}
+        {/* A finished part folds to its title so the open question stands out;
+            the last part keeps its Run button in view. */}
+        {state === "done" && index < 6 ? (
+          <details className="check-step-fold">
+            <summary className="check-step-head">
+              <h2 id={`check-${index}`}>{title}</h2>
+              <span className="check-step-state">{stateWord(state, doneWord)}</span>
+            </summary>
+            {children}
+          </details>
+        ) : (
+          <>
+            <div className="check-step-head">
+              <h2 id={`check-${index}`}>{title}</h2>
+              <span className="check-step-state">{stateWord(state, doneWord)}</span>
+            </div>
+            {children}
+          </>
+        )}
       </div>
     </section>
   );
@@ -301,6 +315,18 @@ function EffectQuestion({
   );
 }
 
+/** Armed saving steps grouped by their identical sentence, in first-seen order. */
+function armedIdentityGroups<T extends { identityArmed: boolean; identityText: string }>(
+  writes: T[],
+): { text: string; count: number }[] {
+  const groups = new Map<string, number>();
+  for (const step of writes) {
+    if (!step.identityArmed) continue;
+    groups.set(step.identityText, (groups.get(step.identityText) ?? 0) + 1);
+  }
+  return [...groups].map(([text, count]) => ({ text, count }));
+}
+
 export function CheckIt({
   workflowId,
   onExactChecks,
@@ -914,7 +940,16 @@ export function CheckIt({
                 it asks how to recognize the right record.
               </p>
             )}
-            {plan.writes.map((step) => (
+            {/* Saving steps that check the record the same way say it once. */}
+            {armedIdentityGroups(plan.writes).map((group) => (
+              <div className="check-detail" key={`armed-${group.text}`}>
+                <p>{group.text}</p>
+                {group.count > 1 && (
+                  <p className="check-detail-count">For each of its {group.count} saving steps.</p>
+                )}
+              </div>
+            ))}
+            {plan.writes.filter((step) => !step.identityArmed).map((step) => (
               <div className="check-detail" key={step.id}>
                 <p>{step.identityText}</p>
                 {!step.identityArmed && step.canArm && plan.hasProject && (
@@ -1116,7 +1151,7 @@ export function CheckIt({
 
           <CheckSection
             index={6}
-            title="Approve for use"
+            title="Approve this workflow"
             doneWord="Approved"
             state={approved ? "done" : "todo"}
           >
@@ -1127,7 +1162,8 @@ export function CheckIt({
                 </Status>
                 <p>
                   This version is checked, approved, and encrypted on this
-                  computer. It's ready to run on real items.
+                  computer. It&rsquo;s ready to run on real items, and it stops
+                  to ask you only when something doesn&rsquo;t match.
                 </p>
                 <Button variant="primary" onClick={() => onRun(approvedId ?? workflowId)}>
                   Run it
@@ -1136,9 +1172,11 @@ export function CheckIt({
             ) : (
               <>
                 <p>
-                  Approving locks this version so it can't change without being
-                  checked again. OpenAdapt approves it only when every check
-                  above has passed.
+                  You approve a workflow once. After that it runs on its own and
+                  stops to ask a person only when something doesn&rsquo;t match.
+                  Approving locks this version, so any change is checked again.
+                  OpenAdapt lets you approve only when every check above has
+                  passed.
                 </p>
                 {plan.blockers.length > 0 && (
                   <TechnicalDetails>
@@ -1160,7 +1198,7 @@ export function CheckIt({
                     }
                     onClick={() => void approve()}
                   >
-                    {busy === "approve" ? "Approving…" : "Approve for use"}
+                    {busy === "approve" ? "Approving…" : "Approve this workflow"}
                   </Button>
                 </div>
               </>
diff --git a/packages/desktop/src/screens/Qualification.tsx b/packages/desktop/src/screens/Qualification.tsx
index df6dfef14..011e193e8 100644
--- a/packages/desktop/src/screens/Qualification.tsx
+++ b/packages/desktop/src/screens/Qualification.tsx
@@ -120,9 +120,9 @@ function signalNeedsExtraction(source: QualificationIdentitySourceKind): boolean
 }
 
 function identityLabel(node: QualificationNode): string {
-  if (!node.identity?.applicable) return "not applicable";
-  if (node.identity.armed) return "armed";
-  return node.identity.reason || "not armed";
+  if (!node.identity?.applicable) return "not needed";
+  if (node.identity.armed) return "checked";
+  return node.identity.reason || "not checked";
 }
 
 function actionTitle(node: QualificationNode): string {
@@ -1259,7 +1259,7 @@ export function Qualification({
                     }}
                   >
                     <Pill tone={selectedControls.identity.armed ? "ok" : "warn"}>
-                      {selectedControls.identity.armed ? "armed" : "not armed"}
+                      {selectedControls.identity.armed ? "checked" : "not checked"}
                     </Pill>
                     {selectedControls.identity.policy && (
                       <Pill
diff --git a/packages/desktop/src/screens/Results.tsx b/packages/desktop/src/screens/Results.tsx
index 2cb630b2d..7fbaf8052 100644
--- a/packages/desktop/src/screens/Results.tsx
+++ b/packages/desktop/src/screens/Results.tsx
@@ -141,7 +141,7 @@ export function Results({ onNeedsYou }: { onNeedsYou: () => void }) {
     <div className="content simple wide">
       <PageHead
         title="Results"
-        sub="What OpenAdapt finished, what needed a person, and what it prevented. OpenAdapt doesn't send these results anywhere. If you turn on the hosted runner, it reports only a PHI-free outcome for each Cloud job it runs."
+        sub="What OpenAdapt finished, what needed a person, and what it prevented."
       />
 
       <div className="stats">
@@ -309,7 +309,9 @@ export function Results({ onNeedsYou }: { onNeedsYou: () => void }) {
           Only items that OpenAdapt saved and then read back from the record
           count as done and checked. Items a person finished or confirmed count
           under Needed a person. “No person” marks an item saved with every
-          check passed while “{SWITCH_LABEL}” was on.
+          check passed while “{SWITCH_LABEL}” was on. OpenAdapt doesn't send
+          these results anywhere. If you turn on the hosted runner, it reports
+          only a PHI-free outcome for each Cloud job it runs.
         </p>
       </section>
     </div>
diff --git a/packages/desktop/src/screens/WatchRun.test.tsx b/packages/desktop/src/screens/WatchRun.test.tsx
index 5114ac668..ccf6651d9 100644
--- a/packages/desktop/src/screens/WatchRun.test.tsx
+++ b/packages/desktop/src/screens/WatchRun.test.tsx
@@ -118,19 +118,19 @@ it("clears prior terminal evidence while a new run is in flight", async () => {
       onTeach={() => {}}
     />,
   );
-  await screen.findByText("Outcome evidence");
+  await screen.findByText("What was checked");
 
-  fireEvent.click(screen.getByRole("button", { name: "Run with safety gates" }));
+  fireEvent.click(screen.getByRole("button", { name: "Run it" }));
 
   await waitFor(() =>
-    expect(screen.queryByText("Outcome evidence")).toBeNull(),
+    expect(screen.queryByText("What was checked")).toBeNull(),
   );
 
   await act(async () => {
     finishRun(verified);
     await pendingRun;
   });
-  expect(await screen.findByText("Outcome evidence")).toBeTruthy();
+  expect(await screen.findByText("What was checked")).toBeTruthy();
 });
 
 it("keeps a report visible while local history is retried", async () => {
@@ -174,7 +174,7 @@ it("keeps a report visible while local history is retried", async () => {
   await waitFor(() =>
     expect(screen.queryByText("Local run history needs attention")).toBeNull(),
   );
-  expect(screen.getByText("Outcome evidence")).toBeTruthy();
+  expect(screen.getByText("What was checked")).toBeTruthy();
 });
 
 function firstWorkflowReview(
diff --git a/packages/desktop/src/screens/WatchRun.tsx b/packages/desktop/src/screens/WatchRun.tsx
index 00926aa4e..516634997 100644
--- a/packages/desktop/src/screens/WatchRun.tsx
+++ b/packages/desktop/src/screens/WatchRun.tsx
@@ -54,10 +54,10 @@ function issueForReport(report: RunReport): RunIssue | null {
 }
 
 const CONTRACT_LABELS = {
-  authorization: "Authorization",
-  identity: "Identity",
-  postcondition: "Postcondition",
-  effect: "Business effect",
+  authorization: "Allowed to act",
+  identity: "Right record",
+  postcondition: "Screen checks",
+  effect: "Read-back",
 } as const;
 
 function reviewRisk(
@@ -385,9 +385,7 @@ export function WatchRun({
     <div className="content">
       <div className="page-head">
         <div className="titles">
-          <p className="eyebrow">
-            {firstWorkflow ? "First supervised run" : "Execute"}
-          </p>
+          {firstWorkflow && <p className="eyebrow">First supervised run</p>}
           <h1>
             {firstWorkflow
               ? "Review the workflow, then watch it run"
@@ -397,14 +395,14 @@ export function WatchRun({
         {!firstWorkflow && (
           <div className="row">
             <Button disabled={executionBusy} onClick={() => execute("replay")}>
-              {executionBusy ? "Running…" : "Replay"}
+              {executionBusy ? "Running…" : "Replay the recording"}
             </Button>
             <Button
               variant="primary"
               disabled={executionBusy}
               onClick={() => execute("run")}
             >
-              Run with safety gates
+              Run it
             </Button>
           </div>
         )}
@@ -413,8 +411,7 @@ export function WatchRun({
       {firstWorkflow && (
         <Card>
           <CardHead
-            eyebrow="Compiled review"
-            title="Check the compiled workflow"
+            title="Check the steps"
             sub="Read the steps and inputs before OpenAdapt touches the app."
           />
           {reviewReady && currentReview ? (
@@ -522,7 +519,6 @@ export function WatchRun({
 
       <Card>
         <CardHead
-          eyebrow="Target"
           title={
             firstWorkflow
               ? "Recorded application target"
@@ -531,7 +527,7 @@ export function WatchRun({
           sub={
             firstWorkflow
               ? "The supervised run uses the same application target as the recording."
-              : "Choose the application surface. OpenAdapt uses the same compiled workflow and fail-closed verification on every target."
+              : "Pick the app it runs in. The steps and checks are the same everywhere."
           }
         />
         <ExecutionTargetForm
@@ -546,7 +542,7 @@ export function WatchRun({
         />
 
         {!firstWorkflow && <details className="advanced-target">
-          <summary>Advanced deployment details</summary>
+          <summary>Settings for the person who sets this up</summary>
           <div className="advanced-target-body">
             <Field
               label="Deployment config"
@@ -695,31 +691,32 @@ export function WatchRun({
       {report?.outcome_details && (
         <Card>
           <CardHead
-            eyebrow="Execution contract"
-            title="Outcome evidence"
-            sub="The runtime reports what the profile required, what passed, and which external capabilities were used."
+            title="What was checked"
+            sub="What this run had to prove, what passed, and anything it reached outside this computer."
           />
           <div className="row">
             <Pill tone={report.outcome === "VERIFIED" ? "ok" : "warn"}>
-              {report.outcome.replaceAll("_", " ").toLowerCase()}
+              {resultCopy(plainResultForReport(report)).label}
+            </Pill>
+            <Pill tone={report.outcome_details.execution_completed ? "ok" : "warn"}>
+              {report.outcome_details.execution_completed
+                ? "Ran to the end"
+                : "Stopped before the end"}
             </Pill>
-            {report.outcome_details.profile && (
-              <Pill tone="neutral">{report.outcome_details.profile}</Pill>
-            )}
             <Pill
               tone={
                 report.outcome_details.production_eligible ? "ok" : "neutral"
               }
             >
               {report.outcome_details.production_eligible
-                ? "production eligible"
-                : "not production eligible"}
-            </Pill>
-            <Pill tone={report.outcome_details.execution_completed ? "ok" : "warn"}>
-              {report.outcome_details.execution_completed
-                ? "execution completed"
-                : "execution stopped"}
+                ? "Ready for real items"
+                : "Not ready for real items yet"}
             </Pill>
+            {report.outcome_details.profile && (
+              <span className="technical-text" title="Profile">
+                {report.outcome_details.profile}
+              </span>
+            )}
           </div>
           <div className="metrics" style={{ marginTop: "var(--space-4)" }}>
             {(
@@ -768,7 +765,7 @@ export function WatchRun({
 
       {report?.metrics && (
         <Card>
-          <CardHead eyebrow="Run report" title="Metrics" />
+          <CardHead title="Run details" />
           <div className="metrics">
             <div className="metric">
               <span className="label">Steps</span>
@@ -797,8 +794,7 @@ export function WatchRun({
       {firstRunFinished && (
         <Card>
           <CardHead
-            eyebrow="Next"
-            title="Qualify this workflow for repeated use"
+            title="Next: check it for everyday use"
             sub="Your supervised run is saved. Now define which record may change and what result proves success."
           />
           <p className="page-sub">
diff --git a/packages/desktop/src/styles/app.css b/packages/desktop/src/styles/app.css
index 0169d160a..925144efb 100644
--- a/packages/desktop/src/styles/app.css
+++ b/packages/desktop/src/styles/app.css
@@ -1195,7 +1195,7 @@ select.input:focus {
 .advanced-target summary {
   color: var(--text-muted);
   cursor: pointer;
-  font-family: var(--font-mono);
+  font-family: var(--font-ui);
   font-size: var(--fs-sm);
 }
 .advanced-target-body {
@@ -1262,7 +1262,7 @@ select.input:focus {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  font-family: var(--font-mono);
+  font-family: var(--font-ui);
   font-size: var(--fs-sm);
   color: var(--text-muted);
   margin-bottom: var(--space-3);
@@ -3111,3 +3111,25 @@ select.input:focus {
   gap: var(--space-2);
   margin-bottom: var(--space-3);
 }
+.check-detail-count {
+  margin: var(--space-1) 0 0;
+  color: var(--text-muted);
+  font-size: var(--fs-sm);
+}
+.check-step-fold > summary {
+  cursor: pointer;
+  list-style: none;
+}
+.check-step-fold > summary::-webkit-details-marker {
+  display: none;
+}
+.check-step-fold > summary .check-step-state::after {
+  content: "Show";
+  margin-left: var(--space-3);
+  color: var(--text-faint);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.check-step-fold[open] > summary .check-step-state::after {
+  content: "Hide";
+}
diff --git a/packages/desktop/src/ui/ExecutionTargetForm.test.tsx b/packages/desktop/src/ui/ExecutionTargetForm.test.tsx
index 64947c5f7..c788977a8 100644
--- a/packages/desktop/src/ui/ExecutionTargetForm.test.tsx
+++ b/packages/desktop/src/ui/ExecutionTargetForm.test.tsx
@@ -103,7 +103,7 @@ it("never claims Available before detection arrives", () => {
 it("keeps every surface selectable even when not available", () => {
   const changes: ExecutionTarget[] = [];
   renderForm({ backend: "web" }, report(), (t) => changes.push(t));
-  const select = screen.getByLabelText("Application surface") as HTMLSelectElement;
+  const select = screen.getByLabelText("App type") as HTMLSelectElement;
   expect(select.options.length).toBe(6);
   fireEvent.change(select, { target: { value: "citrix" } });
   expect(changes).toEqual([{ backend: "citrix" }]);
diff --git a/packages/desktop/src/ui/ExecutionTargetForm.tsx b/packages/desktop/src/ui/ExecutionTargetForm.tsx
index 08fcd0e89..2cb608d67 100644
--- a/packages/desktop/src/ui/ExecutionTargetForm.tsx
+++ b/packages/desktop/src/ui/ExecutionTargetForm.tsx
@@ -152,7 +152,7 @@ export function ExecutionTargetForm({
 
   return (
     <>
-      <Field label="Application surface" htmlFor={`${idPrefix}-backend`}>
+      <Field label="App type" htmlFor={`${idPrefix}-backend`}>
         <select
           id={`${idPrefix}-backend`}
           className="input"
diff --git a/packages/desktop/src/ui/ProgramWorkbench.test.tsx b/packages/desktop/src/ui/ProgramWorkbench.test.tsx
index 935ee29eb..5cea55cd4 100644
--- a/packages/desktop/src/ui/ProgramWorkbench.test.tsx
+++ b/packages/desktop/src/ui/ProgramWorkbench.test.tsx
@@ -83,7 +83,7 @@ describe("ProgramWorkbench", () => {
   it("switches from the map to the declared evidence lanes", () => {
     render(<ProgramWorkbench graph={graph} />);
     fireEvent.click(screen.getByRole("tab", { name: "Evidence lanes" }));
-    expect(screen.getByText("Target evidence")).toBeTruthy();
+    expect(screen.getByText("Finds the field")).toBeTruthy();
     expect(screen.getByText("Structural")).toBeTruthy();
     expect(screen.getByText(/do not report a live verdict/i)).toBeTruthy();
   });
diff --git a/packages/desktop/src/ui/ProgramWorkbench.tsx b/packages/desktop/src/ui/ProgramWorkbench.tsx
index 4ee5cd52d..1df0f9c58 100644
--- a/packages/desktop/src/ui/ProgramWorkbench.tsx
+++ b/packages/desktop/src/ui/ProgramWorkbench.tsx
@@ -52,22 +52,22 @@ function NodeInspector({ node }: { node: QualificationNode }) {
 
       <div className="program-inspector-lanes">
         <EvidenceState
-          label="Resolve"
+          label="Finds the field"
           state={targetRungs.length ? "present" : "none"}
           value={targetRungs.length ? `${targetRungs.length} evidence types` : "Not applicable"}
         />
         <EvidenceState
-          label="Identity"
+          label="Right record"
           state={node.identity?.armed ? "present" : node.identity?.applicable ? "warn" : "none"}
-          value={node.identity?.armed ? "Armed" : node.identity?.applicable ? "Not armed" : "Not applicable"}
+          value={node.identity?.armed ? "Checked" : node.identity?.applicable ? "Not checked" : "Not needed"}
         />
         <EvidenceState
-          label="Screen"
+          label="Screen check"
           state={node.postconditions.length ? "present" : "none"}
           value={node.postconditions.length ? `${node.postconditions.length} checks` : "Not declared"}
         />
         <EvidenceState
-          label="Effect"
+          label="Read-back"
           state={node.effects.length ? "present" : "none"}
           value={node.effects.length ? `${node.effects.length} independent checks` : "Not declared"}
         />
@@ -176,8 +176,8 @@ function ProgramMap({ graph }: { graph: QualificationGraph }) {
                     <strong>{displayTitle(node)}</strong>
                   </span>
                   <span className="program-node-signals" aria-label="Step controls">
-                    {node.identity?.armed && <i title="Identity gate">I</i>}
-                    {node.effects.length > 0 && <i title="Effect check">E</i>}
+                    {node.identity?.armed && <i title="Checks the right record">R</i>}
+                    {node.effects.length > 0 && <i title="Reads the saved record back">C</i>}
                     {node.halts.length > 0 && <i title="Stop rules">H</i>}
                   </span>
                 </button>
@@ -200,11 +200,11 @@ function EvidenceMatrix({ graph }: { graph: QualificationGraph }) {
       <table className="program-matrix">
         <thead>
           <tr>
-            <th>Program step</th>
-            <th>Target evidence</th>
-            <th>Identity gate</th>
+            <th>Step</th>
+            <th>Finds the field</th>
+            <th>Right record</th>
             <th>Screen check</th>
-            <th>Effect check</th>
+            <th>Read-back</th>
           </tr>
         </thead>
         <tbody>
@@ -214,7 +214,7 @@ function EvidenceMatrix({ graph }: { graph: QualificationGraph }) {
               <tr key={`evidence-${node.id}`}>
                 <td><strong>{displayTitle(node)}</strong><small className="mono">{node.id}</small></td>
                 <td data-state={rungs.length ? "present" : "none"}>{rungs.length ? rungs.map((rung) => rung.label).join(", ") : "Not applicable"}</td>
-                <td data-state={node.identity?.armed ? "present" : node.identity?.applicable ? "warn" : "none"}>{node.identity?.armed ? "Armed" : node.identity?.applicable ? "Not armed" : "Not applicable"}</td>
+                <td data-state={node.identity?.armed ? "present" : node.identity?.applicable ? "warn" : "none"}>{node.identity?.armed ? "Checked" : node.identity?.applicable ? "Not checked" : "Not needed"}</td>
                 <td data-state={node.postconditions.length ? "present" : "none"}>{node.postconditions.length ? `${node.postconditions.length} declared` : "Not declared"}</td>
                 <td data-state={node.effects.length ? "present" : "none"}>{node.effects.length ? `${node.effects.length} independent` : "Not declared"}</td>
               </tr>
@@ -252,7 +252,7 @@ export function ProgramWorkbench({ graph }: { graph: QualificationGraph }) {
     <div className="program-workbench surface-phosphor">
       <div className="program-workbench-topbar">
         <div>
-          <span className="program-kicker">Local compiled program</span>
+          <span className="program-kicker">The steps</span>
           <strong>{graph.bundle.name}</strong>
         </div>
         <span className="program-trace-state"><i /> No live trace bound</span>
diff --git a/packages/desktop/src/ui/ReplayMonitor.tsx b/packages/desktop/src/ui/ReplayMonitor.tsx
index d429ade11..34d1cb171 100644
--- a/packages/desktop/src/ui/ReplayMonitor.tsx
+++ b/packages/desktop/src/ui/ReplayMonitor.tsx
@@ -39,7 +39,7 @@ export function ReplayMonitor({
     <div>
       <div className="monitor-head">
         <span>
-          REPLAY ▸ {workflowName}
+          {workflowName}
         </span>
         <span className="tnum">
           {done}/{total} steps