From fff04311a115b3fae11f0b8e77f1a89b721d4f5d Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 25 Oct 2026 09:14:22 -0700
Subject: [PATCH] fix(settings): show the revoke date on a revoked CLI device
 (TASK-542)

The row already renders a revoked device as Revoked with no button. It now
also shows when the device was revoked. Render tests cover the revoked-on-load
state and the in-place revoke.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-authored-by: dart <WyJkYXJ0IiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-haiku-5-5/default
---
 frontend/src/v2/__tests__/V2DevicesPanel.test.tsx | 11 ++++++++++-
 frontend/src/v2/components/V2DevicesPanel.tsx     |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/v2/__tests__/V2DevicesPanel.test.tsx b/frontend/src/v2/__tests__/V2DevicesPanel.test.tsx
index 24cafe5936..ecdb4b7a48 100644
--- a/frontend/src/v2/__tests__/V2DevicesPanel.test.tsx
+++ b/frontend/src/v2/__tests__/V2DevicesPanel.test.tsx
@@ -25,5 +25,14 @@ test('lists a device without exposing its bearer and revokes it in place', async
   expect(screen.queryByText(/cm_[a-f0-9]/)).not.toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: 'Revoke' }));
   await waitFor(() => expect(axios.delete).toHaveBeenCalledWith('/api/auth/devices/d1'));
-  expect(await screen.findByText('Revoked')).toBeInTheDocument();
+  expect(await screen.findByText(/^Revoked/)).toBeInTheDocument();
+});
+
+test('a revoked device shows its revoked date and no Revoke button', async () => {
+  axios.get.mockResolvedValue({ data: { devices: [{ id: 'd2', label: 'old-laptop · commonly-cli', createdAt: '2026-08-31T00:00:00.000Z', lastUsedAt: null, revokedAt: '2026-10-20T09:30:00.000Z' }] } });
+  render(<V2DevicesPanel />);
+
+  expect(await screen.findByText('old-laptop · commonly-cli')).toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: 'Revoke' })).not.toBeInTheDocument();
+  expect(screen.getByText(/^Revoked/)).toHaveTextContent(new Date('2026-10-20T09:30:00.000Z').toLocaleString());
 });
diff --git a/frontend/src/v2/components/V2DevicesPanel.tsx b/frontend/src/v2/components/V2DevicesPanel.tsx
index a2338df3ae..4938860219 100644
--- a/frontend/src/v2/components/V2DevicesPanel.tsx
+++ b/frontend/src/v2/components/V2DevicesPanel.tsx
@@ -55,7 +55,7 @@ const V2DevicesPanel: React.FC<V2DevicesPanelProps> = ({ showHeading = true }) =
       {!loading && devices.length > 0 && <div className="v2-devices__list">
         {devices.map((device) => <article className="v2-devices__item" key={device.id}>
           <div><strong>{device.label}</strong><span>Created {dateLabel(device.createdAt)} · Last used {dateLabel(device.lastUsedAt)}</span></div>
-          {device.revokedAt ? <span className="v2-devices__revoked">Revoked</span> : <button type="button" onClick={() => void revoke(device)}>Revoke</button>}
+          {device.revokedAt ? <span className="v2-devices__revoked">Revoked {dateLabel(device.revokedAt)}</span> : <button type="button" onClick={() => void revoke(device)}>Revoke</button>}
         </article>)}
       </div>}
     </section>