From 2dcbcb5eb864123d1ddbedd4e21185b21d059aa0 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 00:06:06 +0000
Subject: [PATCH 1/7] fix(frontend): fix stale and inconsistent admin copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header said "Logout" (a noun) where it means "Log out". The
Purchasing policies tab opened on a panel headed "Purchasing Settings",
and the service overrides dialog pointed at "Settings → Purchasing",
a path that no longer exists. The add-override dialog said "Only AWS
services are supported today" although Azure and GCP overrides are
supported, and the Azure Workload Identity Federation option claimed it
uses an RSA certificate assertion, contradicting the secret-free OIDC
federated credential the form actually configures.

Refs #728

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/index.html                         | 10 +++++-----
 frontend/tests-e2e/mobile-header-drawer.spec.ts |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/index.html b/frontend/src/index.html
index ebbbdd24c..fb694d2b7 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -45,7 +45,7 @@ <h1>CUDly</h1>
                 <span id="user-role-display" class="role-badge"></span>
                 <a href="/docs/" target="_blank" class="header-link">API Docs</a>
                 <a id="feedback-link" href="#" class="header-link feedback-link">Feedback</a>
-                <button id="logout-btn">Logout</button>
+                <button id="logout-btn">Log out</button>
             </div>
         </header>
         <!-- Overlay: covers content when sidebar drawer is open on mobile.
@@ -428,7 +428,7 @@ <h2>Global Configuration</h2>
 
                 <!-- Purchasing Section -->
                 <section id="purchasing-panel" class="card page-hero hidden" role="tabpanel" aria-labelledby="admin-subtab-purchasing">
-                    <h2>Purchasing Settings</h2>
+                    <h2>Purchasing policies</h2>
                     <p class="settings-description">Configure purchase defaults, per-provider service terms, and RI exchange automation.</p>
 
                     <fieldset class="settings-category" id="purchasing-global-defaults">
@@ -1149,7 +1149,7 @@ <h2 id="group-duplicate-modal-title">Duplicate Group</h2>
         <div id="account-overrides-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="account-overrides-modal-title">
             <div class="modal-content modal-wide">
                 <h2 id="account-overrides-modal-title">Service overrides</h2>
-                <p class="help-text">Per-account overrides take precedence over the global service defaults configured in Settings → Purchasing.</p>
+                <p class="help-text">Per-account overrides take precedence over the global service defaults configured in Admin → Purchasing policies.</p>
                 <div id="account-overrides-modal-body"></div>
                 <div class="modal-buttons">
                     <button type="button" id="close-account-overrides-modal-btn">Close</button>
@@ -1161,7 +1161,7 @@ <h2 id="account-overrides-modal-title">Service overrides</h2>
         <div id="override-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="override-modal-title">
             <div class="modal-content">
                 <h2 id="override-modal-title">Add service override</h2>
-                <p class="help-text">Per-account override that takes precedence over the global service defaults. Only AWS services are supported today.</p>
+                <p class="help-text">Per-account override that takes precedence over the global service defaults. The services listed are the ones available for this account's cloud provider.</p>
                 <form id="override-form">
                     <input type="hidden" id="override-account-id">
                     <input type="hidden" id="override-provider" value="aws">
@@ -1304,7 +1304,7 @@ <h3>AWS Authentication</h3>
                         <h3>Azure Authentication</h3>
                         <label>Auth Mode:
                             <select id="account-azure-auth-mode">
-                                <option value="workload_identity_federation" selected title="Authenticate using an RSA certificate assertion — no client secrets stored in CUDly. Requires an App Registration with a certificate credential.">Workload Identity Federation (recommended)</option>
+                                <option value="workload_identity_federation" selected title="Authenticate with CUDly's OIDC identity through a federated identity credential on an App Registration. No client secret or certificate is stored in CUDly.">Workload Identity Federation (recommended)</option>
                                 <option value="managed_identity" title="Use the Azure Managed Identity of the host VM or container. Only works when CUDly itself runs on Azure.">Managed Identity (Azure-hosted CUDly only)</option>
                                 <option value="client_secret" title="Store an Azure AD client secret in CUDly. Simple to set up but stores a long-lived credential.">Client Secret</option>
                             </select>
diff --git a/frontend/tests-e2e/mobile-header-drawer.spec.ts b/frontend/tests-e2e/mobile-header-drawer.spec.ts
index a28f44c8c..ac8d3ecc9 100644
--- a/frontend/tests-e2e/mobile-header-drawer.spec.ts
+++ b/frontend/tests-e2e/mobile-header-drawer.spec.ts
@@ -71,7 +71,7 @@ type AriaRole = Parameters<Page['getByRole']>[0];
 const ACCESSIBLE_DRAWER_CONTENT: ReadonlyArray<readonly [AriaRole, string]> = [
   ['complementary', 'Primary navigation'],
   ['tablist', 'Main navigation'],
-  ['button', 'Logout'],
+  ['button', 'Log out'],
 ];
 
 /**

From aacd3ae17b6a00f28b0fd98edc3f83f76a6d7832 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 00:06:06 +0000
Subject: [PATCH 2/7] fix(frontend): pause toasts while hovered or focused,
 lengthen override Undo

Toasts kept counting down while the pointer was over them or focus was
on their buttons, so a long message or an Undo action could vanish
mid-read (WCAG 2.2.1 Timing Adjustable). The countdown now pauses on
hover and on focus inside the toast, and resumes with the time that
was left (at least one second) when both leave. The override-delete
Undo toast goes from 5 s to 10 s so there is time to reach Undo.

The 30 s default timeout is unchanged: it was set as an explicit owner
choice, so shortening success toasts or making errors sticky is left
for the owner to decide.

Refs #728

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/__tests__/settings-accounts.test.ts   |  6 +--
 frontend/src/__tests__/toast.test.ts          | 53 +++++++++++++++++++
 frontend/src/settings.ts                      |  6 ++-
 frontend/src/toast.ts                         | 40 ++++++++++++--
 4 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/frontend/src/__tests__/settings-accounts.test.ts b/frontend/src/__tests__/settings-accounts.test.ts
index bd8db15fd..ff9b701c7 100644
--- a/frontend/src/__tests__/settings-accounts.test.ts
+++ b/frontend/src/__tests__/settings-accounts.test.ts
@@ -1432,8 +1432,8 @@ describe('Account overrides modal', () => {
       expect(undoToast!.actions).toBeDefined();
       expect(undoToast!.actions!.length).toBe(1);
       expect(undoToast!.actions![0]!.label).toBe('Undo');
-      // 5-second TTL per issue spec.
-      expect(undoToast!.timeout).toBe(5_000);
+      // 10-second TTL (issue #728; was 5 s per issue #113).
+      expect(undoToast!.timeout).toBe(10_000);
 
       // Simulate clicking Undo.
       undoToast!.actions![0]!.onClick();
@@ -1488,7 +1488,7 @@ describe('Account overrides modal', () => {
       }>).find(t => t.kind === 'info' && t.message?.includes('aws/rds'));
       expect(undoToast).toBeDefined();
       expect(undoToast!.actions?.[0]?.label).toBe('Undo');
-      expect(undoToast!.timeout).toBe(5_000);
+      expect(undoToast!.timeout).toBe(10_000);
 
       // Let the pending refresh resolve so the async chain completes cleanly.
       resolveRefresh();
diff --git a/frontend/src/__tests__/toast.test.ts b/frontend/src/__tests__/toast.test.ts
index a69374b26..8ef4d059a 100644
--- a/frontend/src/__tests__/toast.test.ts
+++ b/frontend/src/__tests__/toast.test.ts
@@ -105,4 +105,57 @@ describe('showToast', () => {
     showToast({ message: 'ok', kind: 'success' });
     expect(document.querySelector('.toast--success')?.getAttribute('role')).toBe('status');
   });
+
+  describe('pause while hovered or focused (issue #728, WCAG 2.2.1)', () => {
+    const toastEl = (): HTMLElement => document.querySelector('.toast') as HTMLElement;
+
+    it('hover pauses the countdown and leaving resumes it with the time left', () => {
+      showToast({ message: 'read me', timeout: 5_000 });
+      jest.advanceTimersByTime(3_000);
+      toastEl().dispatchEvent(new MouseEvent('mouseenter'));
+      jest.advanceTimersByTime(60_000);
+      expect(toastEl()).not.toBeNull();
+
+      toastEl().dispatchEvent(new MouseEvent('mouseleave'));
+      jest.advanceTimersByTime(1_999);
+      expect(toastEl().classList.contains('toast--leaving')).toBe(false);
+      jest.advanceTimersByTime(2 + 200);
+      expect(document.querySelector('.toast')).toBeNull();
+    });
+
+    it('focus inside the toast pauses it until focus leaves the toast', () => {
+      const handler = jest.fn();
+      showToast({ message: 'undo?', timeout: 5_000, actions: [{ label: 'Undo', onClick: handler }] });
+      const undo = toastEl().querySelector('button') as HTMLButtonElement;
+      undo.focus();
+      jest.advanceTimersByTime(60_000);
+      expect(toastEl()).not.toBeNull();
+
+      // Moving focus within the toast keeps it paused.
+      (toastEl().querySelector('.toast-close') as HTMLButtonElement).focus();
+      jest.advanceTimersByTime(60_000);
+      expect(toastEl()).not.toBeNull();
+
+      (document.activeElement as HTMLElement).blur();
+      jest.advanceTimersByTime(5_000 + 200);
+      expect(document.querySelector('.toast')).toBeNull();
+    });
+
+    it('resumes with at least one second so it does not vanish on mouse-out', () => {
+      showToast({ message: 'almost gone', timeout: 5_000 });
+      jest.advanceTimersByTime(4_990);
+      toastEl().dispatchEvent(new MouseEvent('mouseenter'));
+      toastEl().dispatchEvent(new MouseEvent('mouseleave'));
+      jest.advanceTimersByTime(900);
+      expect(toastEl().classList.contains('toast--leaving')).toBe(false);
+    });
+
+    it('sticky toasts stay sticky after hover', () => {
+      showToast({ message: 'stay', timeout: null });
+      toastEl().dispatchEvent(new MouseEvent('mouseenter'));
+      toastEl().dispatchEvent(new MouseEvent('mouseleave'));
+      jest.advanceTimersByTime(120_000);
+      expect(toastEl()).not.toBeNull();
+    });
+  });
 });
diff --git a/frontend/src/settings.ts b/frontend/src/settings.ts
index efbed45af..133e59357 100644
--- a/frontend/src/settings.ts
+++ b/frontend/src/settings.ts
@@ -1301,7 +1301,7 @@ export async function loadOverridesPanel(accountId: string, panel: HTMLElement,
           showToast({ message: `Failed to delete override: ${(err as Error).message}`, kind: 'error' });
           return;
         }
-        // The server has confirmed the delete. Show the 5-second undo toast
+        // The server has confirmed the delete. Show the 10-second undo toast
         // IMMEDIATELY, before the panel reload + recommendations refresh below.
         // Previously the toast was awaited behind both of those calls, so a
         // slow recommendations refresh (a full page-worth of API calls) delayed
@@ -1318,7 +1318,9 @@ export async function loadOverridesPanel(accountId: string, panel: HTMLElement,
         showToast({
           message: `Override for ${o.provider}/${o.service} deleted.`,
           kind: 'info',
-          timeout: 5_000,
+          // 10 s (was 5 s, issue #728) so there is time to read the message
+          // and reach Undo; the countdown also pauses on hover/focus.
+          timeout: 10_000,
           actions: [{
             label: 'Undo',
             onClick: () => {
diff --git a/frontend/src/toast.ts b/frontend/src/toast.ts
index a043de2d4..f65748a20 100644
--- a/frontend/src/toast.ts
+++ b/frontend/src/toast.ts
@@ -14,7 +14,10 @@
  * the bottom.
  *
  * Dismissal: × button click, timeout expiry, or Esc while the toast has
- * focus. The dismiss() return value lets callers clear a toast
+ * focus. The countdown pauses while the pointer is over the toast or
+ * focus is inside it, and restarts with the time that was left when both
+ * leave, so a toast being read or acted on never vanishes (WCAG 2.2.1,
+ * issue #728). The dismiss() return value lets callers clear a toast
  * programmatically (e.g. tie an "uploading..." toast to the completion
  * of the upload).
  */
@@ -119,6 +122,10 @@ export function showToast(opts: ToastOptions): ToastHandle {
 
   let dismissed = false;
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let remaining = timeout;
+  let startedAt = 0;
+  let hovered = false;
+  let focused = false;
 
   const handle: ToastHandle = {
     dismiss: () => {
@@ -144,11 +151,34 @@ export function showToast(opts: ToastOptions): ToastHandle {
   };
   toast.addEventListener('keydown', onKey);
 
-  container.appendChild(toast);
+  const startTimer = (): void => {
+    if (dismissed || remaining === null || timeoutId !== null || hovered || focused) return;
+    startedAt = Date.now();
+    timeoutId = setTimeout(() => handle.dismiss(), remaining);
+  };
+  const pauseTimer = (): void => {
+    if (timeoutId === null || remaining === null) return;
+    clearTimeout(timeoutId);
+    timeoutId = null;
+    remaining = Math.max(remaining - (Date.now() - startedAt), 0);
+  };
+  // Restart with at least a second left so the toast does not vanish the
+  // instant the pointer moves off it.
+  const resumeTimer = (): void => {
+    if (remaining !== null) remaining = Math.max(remaining, 1_000);
+    startTimer();
+  };
+  toast.addEventListener('mouseenter', () => { hovered = true; pauseTimer(); });
+  toast.addEventListener('mouseleave', () => { hovered = false; resumeTimer(); });
+  toast.addEventListener('focusin', () => { focused = true; pauseTimer(); });
+  toast.addEventListener('focusout', (e: FocusEvent) => {
+    if (e.relatedTarget instanceof Node && toast.contains(e.relatedTarget)) return;
+    focused = false;
+    resumeTimer();
+  });
 
-  if (timeout !== null) {
-    timeoutId = setTimeout(() => handle.dismiss(), timeout);
-  }
+  container.appendChild(toast);
+  startTimer();
 
   return handle;
 }

From 674a94e4f41d7a4f2b26ddd9a1cc6bf26974c225 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 00:06:06 +0000
Subject: [PATCH 3/7] fix(frontend): name the purchase in History Cancel and
 Retry confirms

"Cancel this pending purchase?" and "Retry this failed purchase?" did
not say which row they applied to, so in a long table it was easy to
confirm the wrong one. The confirm now opens with a summary of the row
(provider, service, resource and count, region, account, term, upfront
cost and date) above the existing explanation, built by a small helper
module so history.ts does not grow further.

Adds a Playwright spec for the named confirm and for a toast staying
while hovered.

Refs #728

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../__tests__/history-cancel-button.test.ts   | 21 ++++++++
 .../__tests__/history-retry-button.test.ts    | 17 +++++++
 frontend/src/history-confirm-body.ts          | 51 +++++++++++++++++++
 frontend/src/history.ts                       | 13 +++--
 .../history-confirm-and-toast.spec.ts         | 50 ++++++++++++++++++
 5 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/history-confirm-body.ts
 create mode 100644 frontend/tests-e2e/history-confirm-and-toast.spec.ts

diff --git a/frontend/src/__tests__/history-cancel-button.test.ts b/frontend/src/__tests__/history-cancel-button.test.ts
index 461894fc0..d9c16e32b 100644
--- a/frontend/src/__tests__/history-cancel-button.test.ts
+++ b/frontend/src/__tests__/history-cancel-button.test.ts
@@ -254,6 +254,27 @@ describe('History inline Cancel button (issue #46)', () => {
     expect(api.cancelPurchase).not.toHaveBeenCalled();
   });
 
+  test('confirm names the purchase being cancelled (issue #728)', async () => {
+    (getCurrentUser as jest.Mock).mockReturnValue(ADMIN_USER);
+    (confirmDialog as jest.Mock).mockResolvedValue(false);
+    (api.getHistory as jest.Mock).mockResolvedValue({
+      summary: {},
+      purchases: [
+        makeRow({ purchase_id: 'exec-1', created_by_user_id: ADMIN_USER.id }),
+        makeRow({ purchase_id: 'exec-2', resource_type: 'm5.xlarge', count: 3, region: 'eu-west-1', upfront_cost: 4200, created_by_user_id: ADMIN_USER.id }),
+      ],
+    });
+
+    await loadHistory();
+    document.querySelector<HTMLButtonElement>('.history-cancel-btn[data-cancel-id="exec-2"]')!.click();
+    await new Promise((r) => setTimeout(r, 0));
+
+    const body = (confirmDialog as jest.Mock).mock.calls[0][0].body as HTMLElement;
+    expect(body.querySelector('.history-confirm-summary strong')?.textContent).toBe('AWS ec2 m5.xlarge × 3 in eu-west-1');
+    expect(body.textContent).toContain('Upfront: $4200');
+    expect(body.textContent).toContain('The pending email approval link will stop working.');
+  });
+
   test('accepted confirm posts cancel + reloads + toasts', async () => {
     (getCurrentUser as jest.Mock).mockReturnValue(ADMIN_USER);
     (confirmDialog as jest.Mock).mockResolvedValue(true);
diff --git a/frontend/src/__tests__/history-retry-button.test.ts b/frontend/src/__tests__/history-retry-button.test.ts
index 7867ee71d..bb9040b0c 100644
--- a/frontend/src/__tests__/history-retry-button.test.ts
+++ b/frontend/src/__tests__/history-retry-button.test.ts
@@ -353,6 +353,23 @@ describe('History inline Retry button (issue #47)', () => {
     expect(api.retryPurchase).not.toHaveBeenCalled();
   });
 
+  test('confirm names the purchase being retried (issue #728)', async () => {
+    (getCurrentUser as jest.Mock).mockReturnValue(ADMIN_USER);
+    (confirmDialog as jest.Mock).mockResolvedValue(false);
+    (api.getHistory as jest.Mock).mockResolvedValue({
+      summary: {},
+      purchases: [makeRow({ purchase_id: 'r-1', service: 'rds', resource_type: 'db.r5.large', count: 2, created_by_user_id: ADMIN_USER.id })],
+    });
+
+    await loadHistory();
+    document.querySelector<HTMLButtonElement>('.history-retry-btn')!.click();
+    await new Promise((r) => setTimeout(r, 0));
+
+    const body = (confirmDialog as jest.Mock).mock.calls[0][0].body as HTMLElement;
+    expect(body.querySelector('.history-confirm-summary strong')?.textContent).toBe('AWS rds db.r5.large × 2 in us-east-1');
+    expect(body.textContent).toContain('This will create a new purchase execution');
+  });
+
   test('accepted confirm posts retry + reloads + success toast when email_sent is true', async () => {
     (getCurrentUser as jest.Mock).mockReturnValue(ADMIN_USER);
     (confirmDialog as jest.Mock).mockResolvedValue(true);
diff --git a/frontend/src/history-confirm-body.ts b/frontend/src/history-confirm-body.ts
new file mode 100644
index 000000000..93cadb431
--- /dev/null
+++ b/frontend/src/history-confirm-body.ts
@@ -0,0 +1,51 @@
+/**
+ * Confirm-dialog body that names the purchase a History row action will
+ * act on (issue #728, UX-29). Cancel and Retry used to say only "Cancel
+ * this pending purchase?", so in a long table the user could not tell
+ * which row they were confirming. The summary mirrors the row: provider,
+ * service, resource and count, region, account, upfront cost and date.
+ */
+
+import type { HistoryPurchase } from './types';
+import { getAccountName } from './recommendations';
+import { formatCurrency, formatDate, formatTerm } from './utils';
+
+/** One-line description of a History row, e.g. "AWS ec2 m5.large × 2 in us-east-1". */
+export function describeHistoryPurchase(p: HistoryPurchase): string {
+  const provider = p.provider && p.provider !== 'multiple' ? p.provider.toUpperCase() : '';
+  const what = [provider, p.service, p.resource_type].filter(Boolean).join(' ');
+  const count = p.count > 1 ? ` × ${p.count}` : '';
+  const region = p.region ? ` in ${p.region}` : '';
+  return `${what || 'Purchase'}${count}${region}`;
+}
+
+/**
+ * Body element for a row-action confirm: a definition-style summary of the
+ * purchase followed by the action's explanation.
+ */
+export function historyConfirmBody(p: HistoryPurchase | undefined, explanation: string): HTMLElement {
+  const wrap = document.createElement('div');
+  wrap.className = 'history-confirm-body';
+  if (p) {
+    const summary = document.createElement('p');
+    summary.className = 'history-confirm-summary';
+    const name = document.createElement('strong');
+    name.textContent = describeHistoryPurchase(p);
+    summary.appendChild(name);
+    const facts: string[] = [];
+    if (p.account_id) facts.push(`Account: ${getAccountName(p.account_id)}`);
+    if (p.term) facts.push(`Term: ${formatTerm(p.term)}`);
+    if (p.upfront_cost != null) facts.push(`Upfront: ${formatCurrency(p.upfront_cost)}`);
+    const date = formatDate(p.timestamp);
+    if (date) facts.push(`Created: ${date}`);
+    if (facts.length > 0) {
+      summary.appendChild(document.createElement('br'));
+      summary.appendChild(document.createTextNode(facts.join(' · ')));
+    }
+    wrap.appendChild(summary);
+  }
+  const text = document.createElement('p');
+  text.textContent = explanation;
+  wrap.appendChild(text);
+  return wrap;
+}
diff --git a/frontend/src/history.ts b/frontend/src/history.ts
index b4c183d44..0a280fa8f 100644
--- a/frontend/src/history.ts
+++ b/frontend/src/history.ts
@@ -5,6 +5,7 @@
 import * as api from './api';
 import * as state from './state';
 import { formatCurrency, formatDate, formatTerm, escapeHtml, escapeHtmlAttr, amortizedMonthly } from './utils';
+import { historyConfirmBody } from './history-confirm-body';
 import type { HistoryResponse, HistorySummary, HistoryPurchase } from './types';
 import type { RevokeQuote } from './api';
 import { switchTab } from './navigation';
@@ -845,6 +846,11 @@ function sameRowActions(btn: HTMLButtonElement): HTMLButtonElement[] {
   );
 }
 
+/** The loaded History or Approval queue row for an execution ID. */
+function findHistoryRow(id: string): HistoryPurchase | undefined {
+  return lastPurchases.find(p => p.purchase_id === id) ?? lastPendingForQueue.find(p => p.purchase_id === id);
+}
+
 async function runHistoryRowAction(
   btn: HTMLButtonElement,
   id: string,
@@ -1378,7 +1384,8 @@ function wireRowActionHandlers(container: HTMLElement): void {
     btn.addEventListener('click', () => runHistoryRowAction(btn, id, async markMutationSucceeded => {
       const ok = await confirmDialog({
         title: 'Cancel this pending purchase?',
-        body: 'This will permanently abort the approval flow. The pending email approval link will stop working. This action cannot be undone.',
+        // Issue #728: name the purchase so the right row is confirmed.
+        body: historyConfirmBody(findHistoryRow(id), 'This will permanently abort the approval flow. The pending email approval link will stop working. This action cannot be undone.'),
         confirmLabel: 'Cancel purchase',
         destructive: true,
       });
@@ -1410,9 +1417,9 @@ function wireRowActionHandlers(container: HTMLElement): void {
       const overThreshold = btn.classList.contains('history-retry-over-threshold');
       const ok = await confirmDialog({
         title: overThreshold ? 'Retry past threshold?' : 'Retry this failed purchase?',
-        body: overThreshold
+        body: historyConfirmBody(findHistoryRow(id), overThreshold
           ? 'The same recommendations have already failed multiple times. Are you sure you want to retry again? This may not succeed.'
-          : 'This will create a new purchase execution from the same recommendations. The original failed row will be linked to the new attempt.',
+          : 'This will create a new purchase execution from the same recommendations. The original failed row will be linked to the new attempt.'),
         confirmLabel: overThreshold ? 'Retry anyway' : 'Retry purchase',
         destructive: false,
       });
diff --git a/frontend/tests-e2e/history-confirm-and-toast.spec.ts b/frontend/tests-e2e/history-confirm-and-toast.spec.ts
new file mode 100644
index 000000000..b2a372b57
--- /dev/null
+++ b/frontend/tests-e2e/history-confirm-and-toast.spec.ts
@@ -0,0 +1,50 @@
+import { test, expect, type Page } from '@playwright/test';
+import { mockApi, seedAuth } from './fixtures/recs';
+
+// Issue #728: History Cancel names the purchase it cancels (UX-29), and a
+// toast stays while the pointer is over it (VIS-25, WCAG 2.2.1).
+
+const ROWS = [
+  { id: '11111111-1111-1111-1111-111111111111', resource_type: 'm5.large', count: 1, upfront_cost: 1200 },
+  { id: '22222222-2222-2222-2222-222222222222', resource_type: 'c5.2xlarge', count: 4, upfront_cost: 9800 },
+].map(r => ({
+  purchase_id: r.id, timestamp: '2026-10-20T10:00:00Z', provider: 'aws', service: 'ec2', resource_type: r.resource_type,
+  region: 'us-east-1', count: r.count, term: 1, upfront_cost: r.upfront_cost, monthly_cost: 0, estimated_savings: 10,
+  status: 'pending', account_id: 'acct-001', created_by_user_id: 'user-smoke',
+}));
+
+async function historyPage(page: Page): Promise<void> {
+  await seedAuth(page);
+  await mockApi(page);
+  await page.route('**/api/auth/me/permissions', route => route.fulfill({ json: { permissions: [{ action: 'admin', resource: '*' }] } }));
+  await page.route('**/api/info/deployment', route => route.fulfill({ json: {} }));
+  await page.route('**/api/history**', route => route.fulfill({ json: { summary: {}, purchases: ROWS } }));
+  await page.route('**/api/purchases/cancel/**', route => route.fulfill({ json: {} }));
+  await page.goto('/purchases/history');
+}
+
+test('Cancel confirm names the purchase on the clicked row', async ({ page }) => {
+  await historyPage(page);
+  await page.locator(`#history-list .history-cancel-btn[data-cancel-id="${ROWS[1]!.purchase_id}"]`).click();
+
+  const summary = page.getByRole('dialog').locator('.history-confirm-summary');
+  await expect(summary.locator('strong')).toHaveText('AWS ec2 c5.2xlarge × 4 in us-east-1');
+  await expect(summary).toContainText('Upfront: $9,800');
+});
+
+test('a toast does not expire while hovered and does once the pointer leaves', async ({ page }) => {
+  await page.clock.install();
+  await historyPage(page);
+  await page.locator('#history-list .history-cancel-btn').first().click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Cancel purchase' }).click();
+
+  const toast = page.locator('.toast--success', { hasText: 'Purchase cancelled' });
+  await expect(toast).toBeVisible();
+  await toast.hover();
+  await page.clock.runFor(20_000);
+  await expect(toast).toBeVisible();
+
+  await page.mouse.move(5, 5);
+  await page.clock.runFor(6_000);
+  await expect(toast).toHaveCount(0);
+});

From aa37ff04ae692bc219f5ea2bce1ac505170d6643 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 00:06:06 +0000
Subject: [PATCH 4/7] fix(frontend): refresh the ladder timeline after
 kill-switch and config save

The planned-purchases timeline captured the configs and the global
kill-switch state when it was mounted, so after enabling laddering or
saving an account config it kept saying "Ladder planning is disabled"
or "No ladder configuration" until a page reload. ladder.ts now calls
refreshLadderTimeline() after both, which updates the mounted
timeline's inputs and reloads it while keeping the selected provider,
account and filters.

Refs #728

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/__tests__/ladder-timeline.test.ts | 18 +++++++++++++++++-
 frontend/src/__tests__/ladder.test.ts          |  7 ++++++-
 frontend/src/ladder-timeline.ts                | 17 ++++++++++++++++-
 frontend/src/ladder.ts                         |  4 +++-
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/src/__tests__/ladder-timeline.test.ts b/frontend/src/__tests__/ladder-timeline.test.ts
index 87a060557..8ad4dd00e 100644
--- a/frontend/src/__tests__/ladder-timeline.test.ts
+++ b/frontend/src/__tests__/ladder-timeline.test.ts
@@ -5,7 +5,7 @@ jest.mock('../permissions', () => ({ canAccess: jest.fn(() => true) }));
 
 import { listAccountsMinimal } from '../api/accounts';
 import { getLadderEvents, getLadderRuns, amendLadderEvent, type LadderEvent, type LadderRun } from '../api/ladder';
-import { initLadderTimeline } from '../ladder-timeline';
+import { initLadderTimeline, refreshLadderTimeline } from '../ladder-timeline';
 import { canAccess } from '../permissions';
 import { Chart } from 'chart.js';
 
@@ -360,3 +360,19 @@ test('editor labels each row by its basis and keeps the native amount', async ()
   expect(open('m2')).toBe('Planning budget (on-demand-equivalent $/hr)|2.000000');
   expect(open('m3')).toBe('Planning budget (on-demand-equivalent $/hr)|1.000000');
 });
+
+test('refreshLadderTimeline re-evaluates the state after a config save and a kill-switch toggle (issue #728)', async () => {
+  await initLadderTimeline(document.getElementById('timeline')!, [], false);
+  const state = (): string => document.querySelector('[data-state]')!.textContent ?? '';
+  expect(state()).toContain('No ladder configuration');
+
+  const cfg = { cloud_account_id: 'account', provider: 'aws', enabled: true } as unknown as Parameters<typeof refreshLadderTimeline>[0][number];
+  refreshLadderTimeline([cfg]);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  expect(state()).toContain('Ladder planning is disabled');
+
+  refreshLadderTimeline([cfg], true);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  expect(state()).toContain('Timeline loaded');
+  expect(getLadderEvents).toHaveBeenCalledTimes(3);
+});
diff --git a/frontend/src/__tests__/ladder.test.ts b/frontend/src/__tests__/ladder.test.ts
index af96ae8cb..ab2f21d6d 100644
--- a/frontend/src/__tests__/ladder.test.ts
+++ b/frontend/src/__tests__/ladder.test.ts
@@ -12,9 +12,10 @@ import type { LadderConfig } from '../api';
 import { waitFor } from '@testing-library/dom';
 import { listAccountsMinimal, type AccountSummary } from '../api/accounts';
 import { canAccess } from '../permissions';
+import { refreshLadderTimeline } from '../ladder-timeline';
 
 jest.mock('../api/accounts', () => ({ listAccountsMinimal: jest.fn() }));
-jest.mock('../ladder-timeline', () => ({ initLadderTimeline: jest.fn() }));
+jest.mock('../ladder-timeline', () => ({ initLadderTimeline: jest.fn(), refreshLadderTimeline: jest.fn() }));
 
 jest.mock('../api', () => ({
   getLadderConfigs: jest.fn(),
@@ -101,6 +102,8 @@ describe('ladder.ts', () => {
     expect(api.upsertLadderConfig).toHaveBeenCalledTimes(1);
     const { updated_at: _updatedAt, ...expected } = config;
     expect(api.upsertLadderConfig).toHaveBeenCalledWith({ ...expected, target_coverage: 75 });
+    // Issue #728: the timeline picks up the saved config without a reload.
+    expect(refreshLadderTimeline).toHaveBeenCalledWith(expect.arrayContaining([expect.objectContaining({ cloud_account_id: config.cloud_account_id })]));
   });
 
   describe('renderLadderingSection: toggle label accessibility (issue #1412 row 3.1)', () => {
@@ -158,6 +161,8 @@ describe('ladder.ts', () => {
       expect(api.updateConfig).toHaveBeenCalledWith({ laddering_enabled: !before });
       expect(toggle.checked).toBe(!before);
       await waitFor(() => expect(mockShowToast).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' })));
+      // Issue #728: the timeline re-evaluates with the new kill-switch state.
+      expect(refreshLadderTimeline).toHaveBeenCalledWith(expect.any(Array), !before);
     });
 
     test('a failed PUT reverts the toggle and shows an error toast', async () => {
diff --git a/frontend/src/ladder-timeline.ts b/frontend/src/ladder-timeline.ts
index 85d6cb1d0..197fcf79e 100644
--- a/frontend/src/ladder-timeline.ts
+++ b/frontend/src/ladder-timeline.ts
@@ -9,6 +9,16 @@ import { ladderChartConfig, ladderChartModel, ladderChartSummary, LADDER_UNIT_LA
 
 Chart.register(...registerables);
 let disposeTimeline: (() => void) | undefined;
+let updateTimeline: ((configs: readonly LadderConfig[], globalEnabled?: boolean) => void) | undefined;
+
+/**
+ * Re-evaluate the mounted timeline after a kill-switch toggle or a config
+ * save, keeping the selected provider, account and filters (issue #728:
+ * it kept saying "disabled" or "no configuration" until reload).
+ */
+export function refreshLadderTimeline(configs: readonly LadderConfig[], globalEnabled?: boolean): void {
+  updateTimeline?.(configs, globalEnabled);
+}
 
 export async function initLadderTimeline(root: HTMLElement, configs: readonly LadderConfig[], globalEnabled: boolean): Promise<void> {
   disposeTimeline?.();
@@ -22,7 +32,7 @@ export async function initLadderTimeline(root: HTMLElement, configs: readonly La
   let accountsLoaded = false;
   let filters: LadderFilters = { ...emptyLadderFilters(), status: 'scheduled', from: new Date().toISOString().slice(0, 19) };
   let selectedID = '';
-  disposeTimeline = () => { disposed = true; generation++; chart?.destroy(); };
+  disposeTimeline = () => { disposed = true; generation++; chart?.destroy(); updateTimeline = undefined; };
   const labels = { run_id: 'Run', layer_type: 'Commitment type', term: 'Commitment term', payment_option: 'Payment option', status: 'Status' };
   root.innerHTML = `<h4>Planned purchases</h4><p>Inspect retained planning tranches and edit future scheduled budgets.
     Ladder purchases are not executed yet. Coverage and expiry forecasts are unavailable.</p>
@@ -148,5 +158,10 @@ export async function initLadderTimeline(root: HTMLElement, configs: readonly La
   root.querySelectorAll<HTMLSelectElement>('[data-filter]').forEach(select => select.addEventListener('change', () => { filters[select.dataset['filter'] as typeof ladderDimensions[number]] = select.value; render(); }));
   root.querySelectorAll<HTMLInputElement>('[data-date]').forEach(input => input.addEventListener('change', () => { filters[input.dataset['date'] as 'from' | 'to'] = input.value; render(); }));
   root.querySelector('[data-reset]')!.addEventListener('click', () => { resetFilters(); render(); });
+  updateTimeline = (nextConfigs, nextEnabled) => {
+    configs = nextConfigs;
+    if (nextEnabled !== undefined) globalEnabled = nextEnabled;
+    void load();
+  };
   await load();
 }
diff --git a/frontend/src/ladder.ts b/frontend/src/ladder.ts
index 96fdac226..ab08151ac 100644
--- a/frontend/src/ladder.ts
+++ b/frontend/src/ladder.ts
@@ -17,7 +17,7 @@ import * as api from './api';
 import { escapeHtml, formatDate } from './utils';
 import { showToast } from './toast';
 import { canAccess } from './permissions';
-import { initLadderTimeline } from './ladder-timeline';
+import { initLadderTimeline, refreshLadderTimeline } from './ladder-timeline';
 import { initLadderAccountSelector } from './ladder-account-selector';
 
 // ==========================================
@@ -347,6 +347,7 @@ function wireKillSwitchToggle(): void {
         message: `Commitment Laddering ${toggle.checked ? 'enabled' : 'disabled'} globally.`,
         kind: 'success',
       });
+      refreshLadderTimeline(cachedConfigs, toggle.checked);
     } catch (err) {
       toggle.checked = !toggle.checked; // revert on error
       showToast({ message: 'Failed to update laddering kill-switch.', kind: 'error' });
@@ -461,6 +462,7 @@ export async function saveLadderConfig(): Promise<void> {
       cachedConfigs.push(saved);
     }
     renderConfigTable(cachedConfigs);
+    refreshLadderTimeline(cachedConfigs);
 
     closeLadderModal();
     showToast({ message: 'Ladder config saved.', kind: 'success' });

From 8b68eecd6086a944ddb40d40236921c3f80a3738 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 17:19:43 +0000
Subject: [PATCH 5/7] fix(frontend): click Cancel in the Approval queue in the
 #728 e2e

Main's #1331 made the Approval queue the only place to approve or cancel a
pending purchase; the History table now shows a 'Review in queue' link
instead. The confirm-summary and toast-hover spec still clicked Cancel in
#history-list, so it timed out after the merge. It now clicks the queue's
Cancel button. findHistoryRow already falls back to the queue's rows, so
the confirm still names the purchase.

Refs #728

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/tests-e2e/history-confirm-and-toast.spec.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/tests-e2e/history-confirm-and-toast.spec.ts b/frontend/tests-e2e/history-confirm-and-toast.spec.ts
index b2a372b57..f03f951ab 100644
--- a/frontend/tests-e2e/history-confirm-and-toast.spec.ts
+++ b/frontend/tests-e2e/history-confirm-and-toast.spec.ts
@@ -1,8 +1,9 @@
 import { test, expect, type Page } from '@playwright/test';
 import { mockApi, seedAuth } from './fixtures/recs';
 
-// Issue #728: History Cancel names the purchase it cancels (UX-29), and a
-// toast stays while the pointer is over it (VIS-25, WCAG 2.2.1).
+// Issue #728: Cancel (in the Approval queue since #1331) names the purchase it
+// cancels (UX-29), and a toast stays while the pointer is over it (VIS-25,
+// WCAG 2.2.1).
 
 const ROWS = [
   { id: '11111111-1111-1111-1111-111111111111', resource_type: 'm5.large', count: 1, upfront_cost: 1200 },
@@ -25,7 +26,7 @@ async function historyPage(page: Page): Promise<void> {
 
 test('Cancel confirm names the purchase on the clicked row', async ({ page }) => {
   await historyPage(page);
-  await page.locator(`#history-list .history-cancel-btn[data-cancel-id="${ROWS[1]!.purchase_id}"]`).click();
+  await page.locator(`#purchases-approval-queue .history-cancel-btn[data-cancel-id="${ROWS[1]!.purchase_id}"]`).click();
 
   const summary = page.getByRole('dialog').locator('.history-confirm-summary');
   await expect(summary.locator('strong')).toHaveText('AWS ec2 c5.2xlarge × 4 in us-east-1');
@@ -35,7 +36,7 @@ test('Cancel confirm names the purchase on the clicked row', async ({ page }) =>
 test('a toast does not expire while hovered and does once the pointer leaves', async ({ page }) => {
   await page.clock.install();
   await historyPage(page);
-  await page.locator('#history-list .history-cancel-btn').first().click();
+  await page.locator('#purchases-approval-queue .history-cancel-btn').first().click();
   await page.getByRole('dialog').getByRole('button', { name: 'Cancel purchase' }).click();
 
   const toast = page.locator('.toast--success', { hasText: 'Purchase cancelled' });

From c85b919b6f2cbbf86d850f8c6813794e2b1429e6 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 20:22:10 +0000
Subject: [PATCH 6/7] fix(frontend): use the "Log out" label in tests merged
 from main

Main's crosstab-storage-clear.spec.ts (#317) waited for a button named
"Logout", which this branch renames to "Log out". Update it, the jest
fixtures in auth.test.ts and mobile-nav.test.ts, and the control names in
mobile-header-drawer.spec.ts so no test refers to the old label.

Refs #728

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/__tests__/auth.test.ts               | 2 +-
 frontend/src/__tests__/mobile-nav.test.ts         | 2 +-
 frontend/tests-e2e/crosstab-storage-clear.spec.ts | 2 +-
 frontend/tests-e2e/mobile-header-drawer.spec.ts   | 8 ++++----
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/__tests__/auth.test.ts b/frontend/src/__tests__/auth.test.ts
index d83a0bf0d..c98381230 100644
--- a/frontend/src/__tests__/auth.test.ts
+++ b/frontend/src/__tests__/auth.test.ts
@@ -440,7 +440,7 @@ describe('Auth Module', () => {
       document.body.innerHTML = `
         <div id="user-info" class="hidden">
           <span id="user-email-display"></span>
-          <button id="logout-btn">Logout</button>
+          <button id="logout-btn">Log out</button>
         </div>
         <div class="admin-only hidden">Admin content</div>
         <a class="requires-purchases" id="purchases-tab-btn">Purchases</a>
diff --git a/frontend/src/__tests__/mobile-nav.test.ts b/frontend/src/__tests__/mobile-nav.test.ts
index d21d5d25d..d1f473f73 100644
--- a/frontend/src/__tests__/mobile-nav.test.ts
+++ b/frontend/src/__tests__/mobile-nav.test.ts
@@ -22,7 +22,7 @@ function buildDOM(): void {
         <span id="user-role-display" class="role-badge"></span>
         <a href="/docs/" target="_blank" class="header-link">API Docs</a>
         <a id="feedback-link" href="#" class="header-link feedback-link">Feedback</a>
-        <button id="logout-btn">Logout</button>
+        <button id="logout-btn">Log out</button>
       </div>
     </header>
     <div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
diff --git a/frontend/tests-e2e/crosstab-storage-clear.spec.ts b/frontend/tests-e2e/crosstab-storage-clear.spec.ts
index 3b5585d07..b98eba2ad 100644
--- a/frontend/tests-e2e/crosstab-storage-clear.spec.ts
+++ b/frontend/tests-e2e/crosstab-storage-clear.spec.ts
@@ -12,7 +12,7 @@ test('localStorage.clear() in another tab signs this tab out', async ({ page, co
   await page.goto('/');
   await page.evaluate(() => { localStorage.setItem('authToken', 'smoke-token'); localStorage.setItem('csrfToken', 'smoke-csrf'); });
   await page.reload();
-  await expect(page.getByRole('button', { name: 'Logout' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Log out' })).toBeVisible();
   await expect(page.getByRole('heading', { name: 'CUDly Login' })).toHaveCount(0);
 
   const other = await context.newPage();
diff --git a/frontend/tests-e2e/mobile-header-drawer.spec.ts b/frontend/tests-e2e/mobile-header-drawer.spec.ts
index ac8d3ecc9..269ca27b7 100644
--- a/frontend/tests-e2e/mobile-header-drawer.spec.ts
+++ b/frontend/tests-e2e/mobile-header-drawer.spec.ts
@@ -2,7 +2,7 @@
  * Mobile topbar / drawer layout at a phone viewport (issue #1779).
  *
  * The reported failure is that below the drawer breakpoint the CUDly logo,
- * the signed-in email, the admin badge, API Docs, Feedback, Logout and the
+ * the signed-in email, the admin badge, API Docs, Feedback, Log out and the
  * Provider / Account filter chips paint as faint text over the page content
  * and cannot be used. The markup was always correct: the topbar is a fixed
  * --cudly-topbar-h box, and a `header { flex-direction: column }` rule
@@ -54,7 +54,7 @@ const DRAWER_CONTROLS: Record<string, string> = {
   'admin badge': '#sidebar #user-role-display',
   'API Docs link': '#sidebar #user-info a[href="/docs/"]',
   'Feedback link': '#sidebar #feedback-link',
-  'Logout button': '#sidebar #logout-btn',
+  'Log out button': '#sidebar #logout-btn',
   'Provider chip': '#sidebar button[aria-label="Provider"]',
   'Account chip': '#sidebar button[aria-label="Account"]',
 };
@@ -113,7 +113,7 @@ async function focusIsInsideHiddenSubtree(page: Page): Promise<boolean> {
 const TAPPABLE = [
   'API Docs link',
   'Feedback link',
-  'Logout button',
+  'Log out button',
   'Provider chip',
   'Account chip',
 ] as const;
@@ -349,7 +349,7 @@ test.describe('phone viewport', () => {
    * The mirror of the widening defect. A closed drawer is parked off-screen
    * by a CSS transform, which hides it from sight but not from assistive
    * technology, and this file moves the account controls into it. Without an
-   * aria-hidden a screen-reader user reaches Logout, the identity block and
+   * aria-hidden a screen-reader user reaches Log out, the identity block and
    * both filter chips inside a drawer that is closed.
    */
   test('a closed drawer is out of the accessibility tree on a narrow load', async ({ page }) => {

From 150979e79dbd4ae3d0d25d95cbe3cf33d709609a Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 22:09:04 +0000
Subject: [PATCH 7/7] fix(frontend): apply #181 no-commitments guards to
 Cancel/Retry confirms

Main's #181 guards (#1329) stopped the Approval queue and History rows
from printing the placeholder values of an execution with no
recommendations: count 0, "0 commitment(s)", "multiple" provider/service/
region and $0 costs. The Cancel and Retry confirm summary added for #728
still printed them, so a row reading "No recommendations attached" opened
a confirm reading "multiple 0 commitment(s) in multiple ... Upfront: $0".

The summary now uses NO_RECOMMENDATIONS_LABEL for such a row and leaves
out upfront, service and region, drops a "multiple" region the same way
as a "multiple" provider, and only shows a term isRealTerm accepts.

Tests: Cancel and Retry on the EMPTY_PENDING fixture shape, plus a real
row checked with the real currency formatter ("Upfront: $4,200"). The
Cancel describe is renamed to the Approval queue, where Cancel now lives.

Refs #728

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../__tests__/history-cancel-button.test.ts   |  9 ++-
 .../purchases-placeholders-181.test.ts        | 66 ++++++++++++++++++-
 frontend/src/history-confirm-body.ts          | 15 +++--
 3 files changed, 82 insertions(+), 8 deletions(-)

diff --git a/frontend/src/__tests__/history-cancel-button.test.ts b/frontend/src/__tests__/history-cancel-button.test.ts
index 664f84118..1fd715671 100644
--- a/frontend/src/__tests__/history-cancel-button.test.ts
+++ b/frontend/src/__tests__/history-cancel-button.test.ts
@@ -1,5 +1,6 @@
 /**
- * History inline Cancel button tests (issue #46).
+ * Approval queue Cancel button tests (issue #46). Cancel renders only in
+ * the Approval queue card (#1331), not in the History table.
  *
  * Mirror of the backend RBAC matrix in
  * internal/api/handler_purchases.go::authorizeSessionCancel — keep both
@@ -154,7 +155,7 @@ function makeRow(overrides: Record<string, unknown>) {
   };
 }
 
-describe('History inline Cancel button (issue #46)', () => {
+describe('Approval queue Cancel button (issue #46)', () => {
   beforeEach(() => {
     setupDOM();
     jest.clearAllMocks();
@@ -269,7 +270,9 @@ describe('History inline Cancel button (issue #46)', () => {
 
     const body = (confirmDialog as jest.Mock).mock.calls[0][0].body as HTMLElement;
     expect(body.querySelector('.history-confirm-summary strong')?.textContent).toBe('AWS ec2 m5.xlarge × 3 in eu-west-1');
-    expect(body.textContent).toContain('Upfront: $4200');
+    // formatCurrency is mocked here; purchases-placeholders-181.test.ts
+    // pins the real "Upfront: $4,200" output with the real utils.
+    expect(body.textContent).toContain('Upfront:');
     expect(body.textContent).toContain('The pending email approval link will stop working.');
   });
 
diff --git a/frontend/src/__tests__/purchases-placeholders-181.test.ts b/frontend/src/__tests__/purchases-placeholders-181.test.ts
index f7964f7a5..e50828712 100644
--- a/frontend/src/__tests__/purchases-placeholders-181.test.ts
+++ b/frontend/src/__tests__/purchases-placeholders-181.test.ts
@@ -9,7 +9,9 @@
  */
 
 import { loadHistory } from '../history';
-import { hasNoCommitments, isRealTerm, isPastScheduledDate } from '../lib/purchase-row-guards';
+import { hasNoCommitments, isRealTerm, isPastScheduledDate, NO_RECOMMENDATIONS_LABEL } from '../lib/purchase-row-guards';
+import { describeHistoryPurchase } from '../history-confirm-body';
+import type { HistoryPurchase } from '../types';
 
 jest.mock('../api', () => ({
   getHistory: jest.fn(),
@@ -61,6 +63,7 @@ jest.mock('../recommendations', () => ({
 }));
 
 import * as api from '../api';
+import { confirmDialog } from '../confirmDialog';
 import { getCurrentUser } from '../state';
 import { ADMINISTRATORS_GROUP_ID } from '../permissions';
 
@@ -167,3 +170,64 @@ describe('Purchases tables never render impossible values (#181)', () => {
     expect(row.join(' ')).not.toContain('0 Years');
   });
 });
+
+// The Cancel and Retry confirms (#728) summarise the row they act on, so
+// they must apply the same guards as the row: a no-commitments execution
+// must not read "multiple 0 commitment(s) in multiple ... Upfront: $0".
+describe('Cancel and Retry confirms apply the no-commitments guards (#181, #728)', () => {
+  const EMPTY_FAILED = { ...EMPTY_PENDING, purchase_id: 'exec-empty-failed', status: 'failed' };
+  const REAL_PENDING = {
+    ...EMPTY_PENDING,
+    purchase_id: 'exec-real',
+    provider: 'aws',
+    service: 'ec2',
+    resource_type: 'm5.xlarge',
+    region: 'eu-west-1',
+    count: 3,
+    term: 1,
+    upfront_cost: 4200,
+  };
+
+  beforeEach(() => {
+    setupDOM();
+    jest.clearAllMocks();
+    (getCurrentUser as jest.Mock).mockReturnValue(ADMIN_USER);
+    (confirmDialog as jest.Mock).mockResolvedValue(false);
+    (api.getHistory as jest.Mock).mockResolvedValue({ summary: {}, purchases: [EMPTY_PENDING, EMPTY_FAILED, REAL_PENDING] });
+  });
+
+  const confirmBodyFor = async (selector: string): Promise<HTMLElement> => {
+    await loadHistory();
+    document.querySelector<HTMLButtonElement>(selector)!.click();
+    await new Promise((r) => setTimeout(r, 0));
+    expect(confirmDialog).toHaveBeenCalledTimes(1);
+    return (confirmDialog as jest.Mock).mock.calls[0][0].body as HTMLElement;
+  };
+
+  const expectNoPlaceholders = (body: HTMLElement): void => {
+    expect(body.querySelector('.history-confirm-summary strong')?.textContent).toBe(NO_RECOMMENDATIONS_LABEL);
+    const text = body.textContent || '';
+    expect(text).not.toMatch(/multiple|0 commitment\(s\)|Upfront|\$0|0 Years/i);
+    expect(text).toContain('Created:');
+  };
+
+  test('Cancel on a pending row with no commitments says so instead of printing placeholders', async () => {
+    expectNoPlaceholders(await confirmBodyFor('#purchases-approval-queue .history-cancel-btn[data-cancel-id="exec-empty"]'));
+  });
+
+  test('Retry on a failed row with no commitments says so instead of printing placeholders', async () => {
+    expectNoPlaceholders(await confirmBodyFor('#history-list .history-retry-btn[data-retry-id="exec-empty-failed"]'));
+  });
+
+  test('Cancel on a real row names it and shows upfront in the shipped currency format', async () => {
+    const body = await confirmBodyFor('#purchases-approval-queue .history-cancel-btn[data-cancel-id="exec-real"]');
+    expect(body.querySelector('.history-confirm-summary strong')?.textContent).toBe('AWS ec2 m5.xlarge × 3 in eu-west-1');
+    expect(body.textContent).toContain('Upfront: $4,200');
+    expect(body.textContent).toContain('Term: 1 Year');
+  });
+
+  test('a "multiple" region is left out like a "multiple" provider', () => {
+    const p = { ...REAL_PENDING, resource_type: '2 commitment(s)', count: 2, region: 'multiple' } as unknown as HistoryPurchase;
+    expect(describeHistoryPurchase(p)).toBe('AWS ec2 2 commitment(s) × 2');
+  });
+});
diff --git a/frontend/src/history-confirm-body.ts b/frontend/src/history-confirm-body.ts
index 93cadb431..e57302c05 100644
--- a/frontend/src/history-confirm-body.ts
+++ b/frontend/src/history-confirm-body.ts
@@ -4,18 +4,25 @@
  * this pending purchase?", so in a long table the user could not tell
  * which row they were confirming. The summary mirrors the row: provider,
  * service, resource and count, region, account, upfront cost and date.
+ * A row with no commitments (#181) shows the same "No recommendations
+ * attached" label as the row instead of its placeholder values.
  */
 
 import type { HistoryPurchase } from './types';
 import { getAccountName } from './recommendations';
 import { formatCurrency, formatDate, formatTerm } from './utils';
+import { hasNoCommitments, isRealTerm, NO_RECOMMENDATIONS_LABEL } from './lib/purchase-row-guards';
+
+/** The API's "multiple" placeholder for a basket spanning providers or regions. */
+const specific = (v: string | undefined): string => (v && v !== 'multiple' ? v : '');
 
 /** One-line description of a History row, e.g. "AWS ec2 m5.large × 2 in us-east-1". */
 export function describeHistoryPurchase(p: HistoryPurchase): string {
-  const provider = p.provider && p.provider !== 'multiple' ? p.provider.toUpperCase() : '';
+  if (hasNoCommitments(p)) return NO_RECOMMENDATIONS_LABEL;
+  const provider = specific(p.provider).toUpperCase();
   const what = [provider, p.service, p.resource_type].filter(Boolean).join(' ');
   const count = p.count > 1 ? ` × ${p.count}` : '';
-  const region = p.region ? ` in ${p.region}` : '';
+  const region = specific(p.region) ? ` in ${p.region}` : '';
   return `${what || 'Purchase'}${count}${region}`;
 }
 
@@ -34,8 +41,8 @@ export function historyConfirmBody(p: HistoryPurchase | undefined, explanation:
     summary.appendChild(name);
     const facts: string[] = [];
     if (p.account_id) facts.push(`Account: ${getAccountName(p.account_id)}`);
-    if (p.term) facts.push(`Term: ${formatTerm(p.term)}`);
-    if (p.upfront_cost != null) facts.push(`Upfront: ${formatCurrency(p.upfront_cost)}`);
+    if (isRealTerm(p.term)) facts.push(`Term: ${formatTerm(p.term)}`);
+    if (p.upfront_cost != null && !hasNoCommitments(p)) facts.push(`Upfront: ${formatCurrency(p.upfront_cost)}`);
     const date = formatDate(p.timestamp);
     if (date) facts.push(`Created: ${date}`);
     if (facts.length > 0) {