From ec7a4e9df5fc2bc791008c234d469906a7df46e2 Mon Sep 17 00:00:00 2001
From: ZiyaZhang <199893125+ZiyaZhang@users.noreply.github.com>
Date: Mon, 2 Nov 2026 02:35:59 -0800
Subject: [PATCH] fix(creation-recommendations): show Cancel beside the
 location while creating

Creating cards now put Cancel on the location row, where Undo and Restore
sit, instead of a separate row below.
---
 .../client-ui-creation-recommendations/src/client/Card.tsx  | 4 +---
 .../tests/card.client.spec.tsx                              | 6 ++++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/experimental/client-ui-creation-recommendations/src/client/Card.tsx b/packages/experimental/client-ui-creation-recommendations/src/client/Card.tsx
index 4974460d29..18150edce0 100644
--- a/packages/experimental/client-ui-creation-recommendations/src/client/Card.tsx
+++ b/packages/experimental/client-ui-creation-recommendations/src/client/Card.tsx
@@ -150,12 +150,10 @@ export function PageCardBody({ proposal, decision, summary, Folded, act, infoDis
         </footer>
       </div> : <div className={css.placement}>
         <p className={css.description}>{t('location')} · {data?.customLocation ?? t(data?.slot ?? details.data.slot)}</p>
+        {phase === 'creating' && <Button variant="ghost" size="sm" disabled={busy} onClick={() => { void run('cancel') }}>{t(pending === 'cancel' ? 'cancelling' : 'cancel')}</Button>}
         {installed && <Button variant="ghost" size="sm" disabled={busy} onClick={() => { void run('undo') }}>{t('undo')}</Button>}
         {phase === 'removed' && <Button variant="primary" size="sm" disabled={busy} onClick={() => { void run('restore') }}>{t(pending === 'restore' ? 'restoring' : 'restore')}</Button>}
       </div>}
-      {phase === 'creating' && <footer className={css.footer}>
-        <Button variant="ghost" size="sm" disabled={busy} onClick={() => { void run('cancel') }}>{t(pending === 'cancel' ? 'cancelling' : 'cancel')}</Button>
-      </footer>}
     </div>
   </>
 }
diff --git a/packages/experimental/client-ui-creation-recommendations/tests/card.client.spec.tsx b/packages/experimental/client-ui-creation-recommendations/tests/card.client.spec.tsx
index d94b890383..24fac56a1f 100644
--- a/packages/experimental/client-ui-creation-recommendations/tests/card.client.spec.tsx
+++ b/packages/experimental/client-ui-creation-recommendations/tests/card.client.spec.tsx
@@ -151,7 +151,7 @@ it.each([true, false])('explains cost and background creation without starting w
   expect(value.act).not.toHaveBeenCalled()
 })
 
-it('offers cancellation during generation, then waits for cleanup before retrying', async () => {
+it('offers cancellation beside the location during generation, then waits for cleanup before retrying', async () => {
   const value = props({ phase: 'creating', data: { slot: 'page', bundleName: '@dsh-local/view-fixture' } })
   const pending = Promise.withResolvers<ActionCardResult | undefined>()
   value.act.mockImplementation(() => pending.promise)
@@ -159,7 +159,9 @@ it('offers cancellation during generation, then waits for cleanup before retryin
   expect(screen.queryByText(zh.sourceRetained)).toBeNull()
   fireEvent.click(screen.getByRole('button', { name: zh.creationInfo }))
   expect(screen.getByText(zh.sourceRetained)).toBeTruthy()
-  fireEvent.click(screen.getByRole('button', { name: '取消创建' }))
+  const cancel = screen.getByRole('button', { name: '取消创建' })
+  expect(cancel.parentElement).toBe(screen.getByText(`${zh.location} · ${zh.page}`).parentElement)
+  fireEvent.click(cancel)
   expect(value.act).toHaveBeenCalledWith('cancel', undefined)
   expect(screen.getByRole('button', { name: '正在取消…' }).hasAttribute('disabled')).toBe(true)
   expect(screen.queryByRole('button', { name: '重新创建' })).toBeNull()