diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/ask-ai-panel.test.tsx b/apps/web/src/components/admin/settings/appearance/__tests__/ask-ai-panel.test.tsx
index 9b1fadfb79..9eaa046490 100644
--- a/apps/web/src/components/admin/settings/appearance/__tests__/ask-ai-panel.test.tsx
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/ask-ai-panel.test.tsx
@@ -279,6 +279,67 @@ describe('AskAiPanel', () => {
     expect(document.querySelector('ol')?.hasAttribute('aria-live')).toBe(false)
   })
 
+  it('says one row per operation, in words, with no swatch for a relative value', () => {
+    draft.layout.band = 'tint'
+    draft.style = { button: { hover: { background: 'oklch(from var(--primary) l c h)' } } }
+    mount({
+      turns: [
+        {
+          role: 'assistant',
+          text: 'Calmer.',
+          changes: [
+            // One look, two fields, each carrying the look's name, as the critique saw it.
+            { path: 'layout.band', before: 'none', after: 'tint', label: 'Hero look: Tint' },
+            { path: 'layout.bandArt', before: 'dots', after: null, label: 'Hero look: Tint' },
+            {
+              path: 'style',
+              before: null,
+              after: { button: { hover: { background: 'oklch(from var(--primary) l c h)' } } },
+              label: 'Main buttons on hover: background darker',
+            },
+          ],
+        },
+      ],
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Show changes' }))
+    const rows = screen.getAllByRole('listitem').filter((row) => row.closest('[data-changes]'))
+    expect(rows.map((row) => row.textContent)).toEqual([
+      'Hero look: Tint',
+      'Main buttons on hover: background darker',
+    ])
+    expect(document.querySelectorAll('[data-changes] [data-swatch]')).toHaveLength(0)
+  })
+
+  it('offers Show on each row the canvas can point at, which goes to the change', () => {
+    draft.layout.band = 'tint'
+    draft.shape.corners = 'pill'
+    const go = vi.fn()
+    mount({
+      show: { can: (at) => at.path.startsWith('layout.'), go },
+      turns: [
+        {
+          role: 'assistant',
+          text: 'Calmer.',
+          changes: [
+            { path: 'layout.band', before: 'none', after: 'tint', label: 'Hero look: Tint' },
+            { path: 'shape.corners', before: 'rounded', after: 'pill', label: 'Corners to pill' },
+          ],
+        },
+      ],
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Show changes' }))
+    const shows = screen.getAllByRole('button', { name: /^Show / })
+    expect(shows.map((button) => button.getAttribute('aria-label'))).toEqual([
+      'Show Hero look: Tint on the page',
+    ])
+    expect(shows[0]!.textContent).toBe('Show')
+    fireEvent.click(shows[0]!)
+    expect(go).toHaveBeenCalledWith(
+      { path: 'layout.band', before: 'none', after: 'tint' },
+      'Hero look: Tint'
+    )
+  })
+
   it('reads a switch as On and Off', () => {
     mount({
       turns: [
diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/change-rows.test.ts b/apps/web/src/components/admin/settings/appearance/__tests__/change-rows.test.ts
new file mode 100644
index 0000000000..8fe8fdde61
--- /dev/null
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/change-rows.test.ts
@@ -0,0 +1,119 @@
+/**
+ * Show changes says one row per operation, in words. Built from the real
+ * operations applied to a design (no model): a hero look that sets its fill
+ * and its art is one row, never a field per row named after the look, and a
+ * swatch shows only beside an actual colour.
+ */
+import { describe, expect, it } from 'vitest'
+import { applyOps, type OpWorld } from '@/lib/shared/design/design-ops'
+import { applyStep } from '@/lib/shared/design/agent/style-ops'
+import { STYLE_REGISTRY } from '@/lib/shared/design/agent/style-registry'
+import type { AppliedDesignChange } from '@/lib/shared/design/apply-changes'
+import { defaultDesign } from '@/lib/shared/design/schema'
+import { changeRows, type ChangeRow } from '../change-rows'
+
+const world: OpWorld = {
+  gates: { feedback: true, roadmap: true, changelog: true, help: true, support: true, status: true },
+  places: { boards: [], roadmaps: [], categories: [] },
+}
+
+function green() {
+  const design = defaultDesign()
+  design.brand.light.accent = '#16a34a'
+  return design
+}
+
+/** A row as it reads, with [swatch] where one shows. */
+const read = (row: ChangeRow) =>
+  'text' in row
+    ? `${row.text}${row.swatch ? ' [swatch]' : ''}`
+    : `${row.label}: ${row.before.words}${row.before.swatch ? ' [swatch]' : ''} → ${row.after.words}${row.after.swatch ? ' [swatch]' : ''}`
+
+describe('changeRows', () => {
+  it('says a hero look that sets several fields as one row', () => {
+    const result = applyOps(green(), world, [
+      { op: 'set', target: 'hero', key: 'look', value: 'brand-waves' },
+    ])
+    expect(result.applied.map((change) => change.path)).toEqual(['layout.band', 'layout.bandArt'])
+    expect(changeRows(result.applied).map(read)).toEqual(['Hero look: Brand colour with waves'])
+  })
+
+  it('never repeats an operation’s name over each field it touched (the critique’s “Tint” rows)', () => {
+    // As the critique saw it: one look, two fields, both carrying the look's label.
+    const changes: AppliedDesignChange[] = [
+      { path: 'layout.band', before: 'none', after: 'tint', label: 'Hero look: Tint' },
+      { path: 'layout.bandColour', before: null, after: 'auto', label: 'Hero look: Tint' },
+    ]
+    const rows = changeRows(changes).map(read)
+    expect(rows).toEqual(['Hero look: Tint'])
+    expect(rows.join(' ')).not.toMatch(/Automatic|None/)
+  })
+
+  it('says each of several operations once, in the order they were made', () => {
+    const result = applyStep(
+      green(),
+      world,
+      STYLE_REGISTRY,
+      [
+        { op: 'theme', key: 'corners', value: 'pill' },
+        { op: 'set', target: 'hero', key: 'art', value: 'dots' },
+      ],
+      [
+        { element: 'button', state: 'hover', property: 'background', value: 'darker', block: '' },
+        { element: 'button', state: 'hover', property: 'color', value: 'page', block: '' },
+      ]
+    )
+    expect(changeRows(result.applied).map(read)).toEqual([
+      'Corners to pill',
+      'Hero art: Dots',
+      // The darker shade is an actual colour: a swatch, and no codes in the words.
+      'Main buttons on hover: background darker [swatch]',
+      // The page colour is a role, worked out from the theme: no swatch.
+      'Main buttons on hover: text the page colour',
+    ])
+  })
+
+  it('shows no swatch for a colour the design works out from another', () => {
+    const changes: AppliedDesignChange[] = [
+      {
+        path: 'style',
+        before: null,
+        after: { button: { hover: { background: 'oklch(from var(--primary) calc(l - 0.1) c h)' } } },
+      },
+      { path: 'style.link.hover.color', before: null, after: 'accent' },
+    ]
+    expect(changeRows(changes).map(read)).toEqual([
+      'Main buttons, hover background: Automatic → Worked out from the brand',
+      'Links, hover text: Automatic → Brand',
+    ])
+  })
+
+  it('reads changes no operation names field by field, a colour by its name with its swatch', () => {
+    const changes: AppliedDesignChange[] = [
+      { path: 'brand.light.accent', before: '#ffffff', after: '#0f766e' },
+      { path: 'layout.density', before: 'comfortable', after: 'compact' },
+      { path: 'brand.fonts.heading', before: { kind: 'bundled', id: 'inter' }, after: null },
+    ]
+    const rows = changeRows(changes).map(read)
+    expect(rows.slice(0, 2)).toEqual([
+      'Brand colour: White [swatch] → Teal [swatch]',
+      'Density: Comfortable → Compact',
+    ])
+  })
+
+  it('says an operation on Home’s blocks by its own words, as its list reads as no change', () => {
+    const design = green()
+    design.nav.home.on = true
+    design.pages.home.blocks = [
+      { type: 'updates', id: 'updates1', count: 3, grid: { x: 0, y: 0, w: 6, h: 2 } },
+    ] as typeof design.pages.home.blocks
+    const result = applyOps(design, world, [
+      { op: 'set', target: 'updates1', key: 'count', value: '2' },
+    ])
+    expect(result.applied).toHaveLength(1)
+    const rows = changeRows(result.applied)
+    expect(rows).toHaveLength(1)
+    expect(read(rows[0]!)).toBe(result.applied[0]!.label)
+    expect(rows[0]!.path).toBe('pages.home.blocks')
+  })
+})
diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/design-composer-stop.test.tsx b/apps/web/src/components/admin/settings/appearance/__tests__/design-composer-stop.test.tsx
new file mode 100644
index 0000000000..596a458bf9
--- /dev/null
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/design-composer-stop.test.tsx
@@ -0,0 +1,72 @@
+// @vitest-environment happy-dom
+/**
+ * While a request runs, Stop takes Send's place: the same button, reached
+ * the same way, and Escape anywhere in the composer stops too.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+
+vi.mock('@/lib/client/image-palette', () => ({ imagePalette: async () => [] }))
+vi.mock('@/lib/client/brand-shots', () => ({ readBrandShot: async () => null }))
+vi.mock('@/lib/server/functions/portal-design-ai', () => ({ readBrandShotsFn: vi.fn() }))
+
+const { DesignComposer } = await import('../design-composer')
+
+afterEach(cleanup)
+
+const composer = (busy: boolean, onStop = vi.fn(), onAsk = vi.fn()) => {
+  const view = render(
+    <DesignComposer
+      scope="site"
+      busy={busy}
+      onClearScope={() => {}}
+      onAsk={onAsk}
+      onStop={onStop}
+    />
+  )
+  return { onStop, onAsk, view }
+}
+
+describe('Stop in the composer', () => {
+  it('takes Send’s place while a request runs, and stops it', () => {
+    const { onStop } = composer(true)
+    expect(screen.queryByRole('button', { name: 'Send' })).toBeNull()
+    const stop = screen.getByRole('button', { name: 'Stop' }) as HTMLButtonElement
+    expect(stop.disabled).toBe(false)
+    fireEvent.click(stop)
+    expect(onStop).toHaveBeenCalledOnce()
+  })
+
+  it('is the same button as Send, so focus stays on it', () => {
+    const { view, onStop } = composer(false)
+    const send = screen.getByRole('button', { name: 'Send' })
+    view.rerender(
+      <DesignComposer scope="site" busy onClearScope={() => {}} onAsk={vi.fn()} onStop={onStop} />
+    )
+    expect(screen.getByRole('button', { name: 'Stop' })).toBe(send)
+  })
+
+  it('stops on Escape from the box, and the Escape goes no further', () => {
+    const { onStop } = composer(true)
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+    screen.getByLabelText('Ask Quackback AI').dispatchEvent(event)
+    expect(onStop).toHaveBeenCalledOnce()
+    expect(event.defaultPrevented).toBe(true)
+  })
+
+  it('leaves Escape alone when nothing runs', () => {
+    const { onStop } = composer(false)
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+    screen.getByLabelText('Ask Quackback AI').dispatchEvent(event)
+    expect(onStop).not.toHaveBeenCalled()
+    expect(event.defaultPrevented).toBe(false)
+  })
+
+  it('shows Send while nothing runs, and never sends while a request runs', () => {
+    const { onAsk } = composer(true)
+    const box = screen.getByLabelText('Ask Quackback AI')
+    fireEvent.change(box, { target: { value: 'Warmer' } })
+    fireEvent.keyDown(box, { key: 'Enter' })
+    expect(onAsk).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/use-design-ai.test.tsx b/apps/web/src/components/admin/settings/appearance/__tests__/use-design-ai.test.tsx
index c1ef5ec450..fea7097b42 100644
--- a/apps/web/src/components/admin/settings/appearance/__tests__/use-design-ai.test.tsx
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/use-design-ai.test.tsx
@@ -9,8 +9,13 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { act, renderHook } from '@testing-library/react'
 import { defaultDesign } from '@/lib/shared/design/schema'
 
-const server = vi.hoisted(() => ({ ask: vi.fn() }))
-vi.mock('@/lib/server/functions/portal-design-ai', () => ({ askPortalDesignAiFn: server.ask }))
+const server = vi.hoisted(() => ({ ask: vi.fn(), step: vi.fn() }))
+vi.mock('@/lib/server/functions/portal-design-ai', () => ({
+  askPortalDesignAiFn: server.ask,
+  designAgentStepFn: server.step,
+}))
+const loop = vi.hoisted(() => ({ run: vi.fn() }))
+vi.mock('@/lib/client/edit-loop', () => ({ runBuilderEditLoop: loop.run }))
 const logo = vi.hoisted(() => ({ change: vi.fn() }))
 vi.mock('@/lib/client/brand-logo', () => ({ brandLogoChange: logo.change }))
 const stream = vi.hoisted(() => ({ match: vi.fn() }))
@@ -269,6 +274,118 @@ describe('useDesignAi', () => {
   })
 })
 
+describe('how far a request reaches, and what its reply leaves to Show changes', () => {
+  const checkHooks = () => ({
+    begin: vi.fn(),
+    end: vi.fn(),
+    replace: vi.fn(),
+    frame: () => null,
+    current: () => defaultDesign(),
+  })
+  const loopHook = () =>
+    renderHook(() =>
+      useDesignAi({
+        flush: async () => {},
+        adopt: vi.fn(),
+        update,
+        workspaceName: 'Acme',
+        check: checkHooks(),
+      })
+    )
+  const looped = (over: object = {}) => ({
+    ok: true,
+    reply: 'The hero’s button is darker on hover.',
+    design: defaultDesign(),
+    applied: [{ path: 'overrides', before: null, after: [] }],
+    steps: [],
+    unmet: [],
+    refused: [],
+    notes: ['Left alone, as it is outside what was picked: cards.'],
+    stopped: 'done',
+    ms: 10,
+    ...over,
+  })
+
+  beforeEach(() => loop.run.mockReset())
+
+  it('sends the chip’s reach with a request about one part, and never for the whole site', async () => {
+    server.ask.mockResolvedValue({ ok: false, code: 'AI_FAILED', message: 'No.' })
+    const { result } = hook({ page: 'home', locale: 'en' })
+    await act(() =>
+      result.current.ask('Calmer', 'band', undefined, undefined, undefined, undefined, 'page')
+    )
+    expect(server.ask.mock.calls[0]![0].data).toMatchObject({ scope: 'band', within: 'page' })
+    await act(() =>
+      result.current.ask('Calmer', 'site', undefined, undefined, undefined, undefined, 'page')
+    )
+    expect(server.ask.mock.calls[1]![0].data).not.toHaveProperty('within')
+  })
+
+  it('keeps a one-call reply’s notes for Show changes', async () => {
+    server.ask.mockResolvedValue({
+      ok: true,
+      reply: 'I changed the contact heading.',
+      applied: [],
+      readability: [],
+      notes: ['Part of that is outside the Contact block on Home and was left alone.'],
+      outOfScope: false,
+      design: defaultDesign(),
+    })
+    const { result } = hook()
+    await act(() => result.current.ask('Friendlier', 'home', undefined, 'contactbbb'))
+    const reply = result.current.turns.at(-1)
+    expect(reply).toMatchObject({
+      text: 'I changed the contact heading.',
+      notes: ['Part of that is outside the Contact block on Home and was left alone.'],
+    })
+    expect(reply).not.toHaveProperty('widen')
+  })
+
+  it('offers match_website to the loop only for the whole site', async () => {
+    loop.run.mockResolvedValue(looped())
+    const { result } = loopHook()
+    await act(() =>
+      result.current.ask(
+        'Make the main button feel like stripe.com when hovered',
+        'band',
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        'every'
+      )
+    )
+    const [request, deps] = loop.run.mock.calls[0]!
+    expect(request).toMatchObject({ scope: 'band', within: 'every' })
+    expect(deps.matchWebsite).toBeUndefined()
+    expect(deps.readWebsite).toBeTypeOf('function')
+    // What the loop left alone goes under Show changes, not into the reply.
+    expect(result.current.turns.at(-1)).toMatchObject({
+      text: 'The hero’s button is darker on hover.',
+      notes: ['Left alone, as it is outside what was picked: cards.'],
+    })
+    await act(() => result.current.ask('Make it feel like stripe.com on hover', 'site'))
+    expect(loop.run.mock.calls[1]![1].matchWebsite).toBeTypeOf('function')
+  })
+
+  it('shows a loop that stopped after a change with its changes and Undo, never as failed', async () => {
+    loop.run.mockResolvedValue(
+      looped({
+        reply: 'I changed main buttons on hover, but I stopped before checking everything.',
+        stopped: 'failed',
+        notes: [],
+      })
+    )
+    const { result } = loopHook()
+    await act(() => result.current.ask('Make the buttons darker on hover', 'site'))
+    const reply = result.current.turns.at(-1)
+    expect(reply).toMatchObject({
+      text: 'I changed main buttons on hover, but I stopped before checking everything.',
+      changes: [{ path: 'overrides' }],
+    })
+  })
+})
+
 describe('the check after a brand match', () => {
   const shot = { id: 's1', jpeg: 'data:image/jpeg;base64,AAAA', width: 1440, height: 900 } as never
   const brand = { shots: [shot], name: 'Acme', icon: null }
@@ -522,3 +639,62 @@ describe('startBrandMatch', () => {
     expect(result.current.turns).toEqual([])
   })
 })
+
+describe('Stop', () => {
+  it('aborts the request it sent and says so, nothing changed', async () => {
+    let seen: AbortSignal | undefined
+    server.ask.mockImplementation(
+      ({ signal }: { signal?: AbortSignal }) =>
+        new Promise((_, reject) => {
+          seen = signal
+          signal?.addEventListener('abort', () =>
+            reject(new DOMException('The operation was aborted.', 'AbortError'))
+          )
+        })
+    )
+    const { result } = hook()
+    let asked: Promise<void> | undefined
+    act(() => {
+      asked = result.current.ask('Warmer', 'site')
+    })
+    await vi.waitFor(() => expect(seen).toBeDefined())
+    expect(result.current.busy).toBe(true)
+    act(() => result.current.stop())
+    await act(() => asked!)
+    expect(seen?.aborted).toBe(true)
+    expect(result.current.busy).toBe(false)
+    expect(result.current.turns.at(-1)).toEqual({
+      role: 'assistant',
+      text: 'Stopped. Nothing changed.',
+    })
+  })
+
+  it('does nothing when nothing is running', () => {
+    const { result } = hook()
+    act(() => result.current.stop())
+    expect(result.current.turns).toEqual([])
+  })
+
+  it('aborts a brand match’s stream', async () => {
+    let seen: AbortSignal | undefined
+    stream.match.mockImplementation(
+      (_body: unknown, _onStep: unknown, _fetcher: unknown, signal?: AbortSignal) =>
+        new Promise((_, reject) => {
+          seen = signal
+          signal?.addEventListener('abort', () =>
+            reject(new DOMException('The operation was aborted.', 'AbortError'))
+          )
+        })
+    )
+    const { result } = hook()
+    let asked: Promise<void> | undefined
+    act(() => {
+      asked = result.current.ask('Match https://example.com', 'site')
+    })
+    await vi.waitFor(() => expect(seen).toBeDefined())
+    act(() => result.current.stop())
+    await act(() => asked!)
+    expect(seen?.aborted).toBe(true)
+    expect(result.current.turns.at(-1)?.text).toBe('Stopped. Nothing changed.')
+  })
+})
diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/use-design-draft.test.tsx b/apps/web/src/components/admin/settings/appearance/__tests__/use-design-draft.test.tsx
index 862712dd6d..f02498d29f 100644
--- a/apps/web/src/components/admin/settings/appearance/__tests__/use-design-draft.test.tsx
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/use-design-draft.test.tsx
@@ -307,6 +307,24 @@ describe('useDesignDraft', () => {
       expect(result.current.design).toEqual(original)
     })
 
+    it('makes a change by hand while the AI works its own undo step', () => {
+      const { result } = setup()
+      const original = structuredClone(result.current.design)
+      act(() => result.current.begin('Make it calmer', 'ai'))
+      const first = structuredClone(result.current.design)
+      first.layout.width = 'wide'
+      act(() => result.current.adopt(first, undefined, 'Make it calmer', 'r2'))
+      act(() => result.current.update((draft) => void (draft.layout.density = 'compact'), 'Density'))
+      act(() => result.current.end('ai'))
+      expect(result.current.undoLabel).toBe('Density')
+      act(() => result.current.undo())
+      expect(result.current.design.layout.density).toBe(original.layout.density)
+      expect(result.current.design.layout.width).toBe('wide')
+      expect(result.current.undoLabel).toBe('Make it calmer')
+      act(() => result.current.undo())
+      expect(result.current.design).toEqual(original)
+    })
+
     it('starts again when another draft is loaded', async () => {
       const { result } = setup()
       act(() => result.current.update((draft) => void (draft.layout.width = 'wide'), 'Width'))
diff --git a/apps/web/src/components/admin/settings/appearance/ask-ai-panel.tsx b/apps/web/src/components/admin/settings/appearance/ask-ai-panel.tsx
index 764add6af3..7a456f4001 100644
--- a/apps/web/src/components/admin/settings/appearance/ask-ai-panel.tsx
+++ b/apps/web/src/components/admin/settings/appearance/ask-ai-panel.tsx
@@ -1,6 +1,6 @@
 import { useState, type ReactNode } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/16/solid'
-import { colourName, plainWords } from '@/lib/shared/design/colour-names'
+import { plainWords } from '@/lib/shared/design/colour-names'
 import { matchSummary } from '@/lib/shared/design/step-summary'
 import { overrideChangeLines } from '@/lib/shared/design/override-cascade'
 import type { StyleOverride } from '@/lib/shared/design/style-overrides'
@@ -14,69 +14,59 @@ import {
 } from '@/lib/shared/design/apply-changes'
 import type { PortalDesign } from '@/lib/shared/design/schema'
 import { cn } from '@/lib/shared/utils'
-import { ChangeValue, changeLabel, shownValue } from './change-list'
+import { changeRows, type ChangeRow, type RowChange, type RowSide } from './change-rows'
 import { HeroPhotoChip } from './hero-photo-chip'
 import type { DesignAiTurn } from './use-design-ai'
 
 /** Changes the draft, naming the change for undo when a name is given. */
 type Update = (change: (draft: PortalDesign) => void, label?: string) => void
 
-/** A value as a row says it: a colour by its name beside a swatch, never its code. */
-function RowValue({ value }: { value: unknown }) {
-  if (typeof value === 'string' && isColour(value))
-    return (
-      <span className="inline-flex items-center gap-1">
-        <span
-          aria-hidden="true"
-          className="size-3 rounded-sm border border-border"
-          style={{ background: value }}
-        />
-        {capital(colourName(value))}
-      </span>
-    )
-  return <ChangeValue value={value} />
+/** Where a row's change shows on the canvas: whether it can be pointed at, and going there. */
+export interface ShowChange {
+  can: (at: RowChange) => boolean
+  /** Shows the change on the canvas; `words` is the row as it reads. */
+  go: (at: RowChange, words: string) => void
 }
 
-const isColour = (value: string) => /^(#[0-9a-f]{3}|#[0-9a-f]{6}|oklch\()/i.test(value)
-const capital = (text: string) => text.charAt(0).toUpperCase() + text.slice(1)
-
-/** What a value reads as, for leaving out a row whose two sides read the same. */
-const readAs = (value: unknown) =>
-  typeof value === 'string' && isColour(value) ? colourName(value) : JSON.stringify(value ?? null)
+/** A row as it reads, for its Show's name and what is said once it is shown. */
+const rowWords = (row: ChangeRow) =>
+  'text' in row ? row.text : `${row.label}: ${row.before.words} → ${row.after.words}`
 
-type Row = { key: string; label: string; before: unknown; after: unknown }
+/** A row's Show: to the page the change is on, its part outlined. */
+function ShowButton({ row, onShow }: { row: ChangeRow; onShow: ShowChange['go'] }) {
+  const words = rowWords(row)
+  return (
+    <button
+      type="button"
+      aria-label={`Show ${words} on the page`}
+      onClick={() => onShow(row.at, words)}
+      className="ms-auto rounded px-1 text-muted-foreground underline-offset-2 outline-none hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-muted-foreground"
+    >
+      Show
+    </button>
+  )
+}
 
-/**
- * A value a person cannot read as a change: a list or object that would only
- * say "Changed", or an exact size the builder set (sizes show on the page).
- */
-const technical = (value: unknown) =>
-  (!!value && typeof value === 'object') ||
-  (typeof value === 'string' && /^-?[\d.]+ (px|em)$/.test(value))
+/** One side of a row: its words, beside a swatch only when it is an actual colour. */
+function RowValue({ side }: { side: RowSide }) {
+  if (!side.swatch) return <span>{side.words}</span>
+  return (
+    <span className="inline-flex items-center gap-1">
+      <Swatch colour={side.swatch} />
+      {side.words}
+    </span>
+  )
+}
 
-/**
- * The rows a change makes: one for a plain value, one for each value inside
- * an object that reads only as "Changed", and none where both sides read the same.
- */
-function rowsOf(path: string, before: unknown, after: unknown, label?: string, depth = 0): Row[] {
-  const was = shownValue(path, before)
-  const now = shownValue(path, after)
-  const nested = (v: unknown) => !!v && typeof v === 'object' && !Array.isArray(v)
-  if (depth < 4 && (nested(was) || nested(now))) {
-    const keys = new Set([
-      ...Object.keys(nested(before) ? (before as object) : {}),
-      ...Object.keys(nested(after) ? (after as object) : {}),
-    ])
-    const at = (v: unknown, key: string) =>
-      nested(v) ? (v as Record<string, unknown>)[key] : undefined
-    return [...keys].flatMap((key) =>
-      rowsOf(`${path}.${key}`, at(before, key), at(after, key), undefined, depth + 1)
-    )
-  }
-  if (readAs(was) === readAs(now) || [was, now].some(technical)) return []
-  return [
-    { key: path, label: (label ?? changeLabel(path)).replace(': ', ' '), before: was, after: now },
-  ]
+function Swatch({ colour }: { colour: string }) {
+  return (
+    <span
+      data-swatch=""
+      aria-hidden="true"
+      className="size-3 rounded-sm border border-border"
+      style={{ background: colour }}
+    />
+  )
 }
 
 /**
@@ -90,6 +80,7 @@ function StepResult({
   notes,
   design,
   update,
+  show,
 }: {
   changes: AppliedDesignChange[]
   readability: string[]
@@ -97,6 +88,7 @@ function StepResult({
   /** The draft as it is now. */
   design: PortalDesign
   update: Update
+  show?: ShowChange
 }) {
   const [open, setOpen] = useState(false)
   const undo = (rows: AppliedDesignChange[]) => {
@@ -114,18 +106,22 @@ function StepResult({
   }
   const holding = changes.filter((change) => changeState(design, change) === 'applied')
   const undone = changes.every((change) => changeState(design, change) === 'undone')
-  const lines = changes.flatMap((change): Array<{ key: string; line?: string; row?: Row }> =>
-    change.path === 'overrides'
-      ? overrideChangeLines(
+  // One row per operation, in words; an override's lines say what it set where.
+  const lines: Array<{ key: string; line?: string; row?: ChangeRow }> = [
+    ...changeRows(changes.filter((change) => change.path !== 'overrides')).map((row) => ({
+      key: row.key,
+      row,
+    })),
+    ...changes
+      .filter((change) => change.path === 'overrides')
+      .flatMap((change) =>
+        overrideChangeLines(
           design,
           change.before as StyleOverride[] | null,
           change.after as StyleOverride[] | null
         ).map((line) => ({ key: line, line }))
-      : rowsOf(change.path, change.before, change.after, change.label).map((row) => ({
-          key: row.key,
-          row,
-        }))
-  )
+      ),
+  ]
   const details = lines.length > 0 || readability.length > 0 || notes.length > 0
   return (
     <div className="space-y-1.5">
@@ -164,16 +160,24 @@ function StepResult({
             <ul className="space-y-1">
               {lines.map((each) => (
                 <li key={each.key} className="flex flex-wrap items-center gap-x-1">
-                  {each.row ? (
+                  {each.row && 'text' in each.row ? (
+                    <>
+                      {each.row.swatch && <Swatch colour={each.row.swatch} />}
+                      {each.row.text}
+                    </>
+                  ) : each.row ? (
                     <>
                       <span className="text-muted-foreground">{each.row.label}:</span>
-                      <RowValue value={each.row.before} />
+                      <RowValue side={each.row.before} />
                       <span aria-hidden="true">→</span>
-                      <RowValue value={each.row.after} />
+                      <RowValue side={each.row.after} />
                     </>
                   ) : (
                     each.line
                   )}
+                  {each.row && show?.can(each.row.at) && (
+                    <ShowButton row={each.row} onShow={show.go} />
+                  )}
                 </li>
               ))}
             </ul>
@@ -248,6 +252,7 @@ export function AskAiPanel({
   onRecapture,
   onUploadFont,
   onFonts,
+  show,
 }: {
   available: boolean
   turns: DesignAiTurn[]
@@ -273,6 +278,8 @@ export function AskAiPanel({
   onUploadFont?: (font: UnmatchedFont) => void
   /** Opens the fonts in Theme's Brand kit. */
   onFonts?: () => void
+  /** Shows a change on the canvas, from its row's Show; without it, rows have none. */
+  show?: ShowChange
 }) {
   if (!available) {
     return (
@@ -329,6 +336,7 @@ export function AskAiPanel({
                     notes={turn.notes ?? []}
                     design={design}
                     update={update}
+                    {...(show ? { show } : {})}
                   />
                 )}
                 {turn.capture && (
diff --git a/apps/web/src/components/admin/settings/appearance/change-list.tsx b/apps/web/src/components/admin/settings/appearance/change-list.tsx
index c7b9f6b079..c049952c09 100644
--- a/apps/web/src/components/admin/settings/appearance/change-list.tsx
+++ b/apps/web/src/components/admin/settings/appearance/change-list.tsx
@@ -31,11 +31,19 @@ export function ChangeValue({ value }: { value: unknown }) {
       </span>
     )
   }
-  if (typeof value === 'string') return <span>{VALUE_LABELS[value] ?? capital(value)}</span>
-  if (typeof value === 'boolean') return <span>{value ? 'On' : 'Off'}</span>
+  return <span>{valueWords(value)}</span>
+}
+
+/** A design value in words, as the tiles name it; a colour by its code. */
+export function valueWords(value: unknown): string {
+  if (value === undefined || value === null) return 'Automatic'
+  if (typeof value === 'string' && Object.hasOwn(BUNDLED_FONTS, value))
+    return BUNDLED_FONTS[value as BundledFontId].label
+  if (typeof value === 'string') return VALUE_LABELS[value] ?? (value ? capital(value) : 'None')
+  if (typeof value === 'boolean') return value ? 'On' : 'Off'
   const background = backgroundWords(value)
-  if (background) return <span>{background}</span>
-  return <span>{typeof value === 'object' ? 'Changed' : String(value)}</span>
+  if (background) return background
+  return typeof value === 'object' ? 'Changed' : String(value)
 }
 
 /** A page background, or the pages with their own, in words: "Gradient", "Roadmap: Pattern". */
@@ -109,6 +117,9 @@ export function shownValue(path: string, value: unknown): unknown {
   return plainValue(value)
 }
 
+/** A language's key in a field of words by language: en, de, pt-BR. */
+const LOCALE_KEY = /^[a-z]{2,3}(?:-[A-Za-z]{2,4})?$/
+
 /** An object value as one short line: a font by its name, text by its English or its words. */
 function plainValue(value: unknown): unknown {
   if (value === null || typeof value !== 'object' || Array.isArray(value)) return value
@@ -120,8 +131,11 @@ function plainValue(value: unknown): unknown {
     return text.length > 60 ? `${text.slice(0, 57)}…` : text || 'None'
   }
   if (typeof record.en === 'string') return record.en
-  // Words in another language say which.
-  const [locale, text] = Object.entries(record).find(([, words]) => typeof words === 'string') ?? []
+  // Words in another language say which. Only a map keyed by languages is words: a style's
+  // { background: "#12893c" } is not "#12893c (background)".
+  const entries = Object.entries(record)
+  if (!entries.length || !entries.every(([key]) => LOCALE_KEY.test(key))) return value
+  const [locale, text] = entries.find(([, words]) => typeof words === 'string') ?? []
   if (locale && typeof text === 'string') return `${text} (${languageName(locale)})`
   return value
 }
diff --git a/apps/web/src/components/admin/settings/appearance/change-rows.ts b/apps/web/src/components/admin/settings/appearance/change-rows.ts
new file mode 100644
index 0000000000..bd06db5da5
--- /dev/null
+++ b/apps/web/src/components/admin/settings/appearance/change-rows.ts
@@ -0,0 +1,185 @@
+/**
+ * Show changes under an Ask AI reply, as rows in words. A request's changes
+ * come per field, each carrying the labels of the operations that made it;
+ * one operation can touch several fields (a hero look sets its fill and its
+ * art), so rows are made per operation, said as the operation is, never a
+ * field per row named after the operation. Changes no operation names (a
+ * brand match's) read field by field, as "Thing: old → new". A swatch shows
+ * only beside an actual colour, never beside a role or a relative value.
+ */
+import type { AppliedDesignChange } from '@/lib/shared/design/apply-changes'
+import { colourName } from '@/lib/shared/design/colour-names'
+import { changeLabel, styleValueWords } from '@/lib/shared/design/labels'
+import { STYLE_PROPS, type StyleProp } from '@/lib/shared/design/style-tokens'
+import { shownValue, valueWords } from './change-list'
+
+/** One side of a row: its words, and the colour itself where it is one. */
+export interface RowSide {
+  words: string
+  swatch?: string
+}
+
+/** What a row changed, as the canvas finds where it shows. */
+export interface RowChange {
+  path: string
+  before: unknown
+  after: unknown
+}
+
+export type ChangeRow =
+  /** A field changed, "Thing: old → new". */
+  | { key: string; path: string; at: RowChange; label: string; before: RowSide; after: RowSide }
+  /** An operation, said as it was done: "Hero look: Brand colour with waves". */
+  | { key: string; path: string; at: RowChange; text: string; swatch?: string }
+
+const capital = (text: string) => text.charAt(0).toUpperCase() + text.slice(1)
+
+const STYLE_PATH = /^(?:style|styleDark)\.\w+\.\w+\.(\w+)$/
+
+/** A colour a swatch can draw: a hex, or a colour function a name can be read from. */
+function actualColour(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  if (/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)) return value
+  if (/^oklch\(/i.test(value) && colourName(value) !== 'colour') return value
+  return null
+}
+
+/** A value written as a colour the design works out, such as one made from another. */
+const relativeColour = (value: unknown) =>
+  typeof value === 'string' && /^(?:oklch|color-mix|rgb|hsl|var)\(/i.test(value)
+
+/** One side of a field's change, in words, with a swatch only for an actual colour. */
+export function sideOf(path: string, raw: unknown): RowSide {
+  const value = shownValue(path, raw)
+  const colour = actualColour(value)
+  if (colour) return { words: capital(colourName(colour)), swatch: colour }
+  if (relativeColour(value)) return { words: 'Worked out from the brand' }
+  const prop = STYLE_PATH.exec(path)?.[1]
+  if (prop && Object.hasOwn(STYLE_PROPS, prop) && value != null)
+    return { words: capital(styleValueWords(prop as StyleProp, value)) }
+  return { words: valueWords(value) }
+}
+
+/** What a side reads as, to leave out a row whose two sides read the same. */
+const readAs = (side: RowSide) => side.words
+
+/**
+ * A value a person cannot read as a change: a list or object that would only
+ * say "Changed", or an exact size the builder set (sizes show on the page).
+ */
+const technical = (value: unknown) =>
+  (!!value && typeof value === 'object') ||
+  (typeof value === 'string' && /^-?[\d.]+ (px|em)$/.test(value))
+
+type Leaf = { path: string; label: string; before: unknown; after: unknown }
+
+/** The fields a change holds that read as a change: one for a plain value, one per value in an object. */
+function leavesOf(path: string, before: unknown, after: unknown, depth = 0): Leaf[] {
+  const was = shownValue(path, before)
+  const now = shownValue(path, after)
+  const nested = (v: unknown) => !!v && typeof v === 'object' && !Array.isArray(v)
+  if (depth < 4 && (nested(was) || nested(now))) {
+    const keys = new Set([
+      ...Object.keys(nested(before) ? (before as object) : {}),
+      ...Object.keys(nested(after) ? (after as object) : {}),
+    ])
+    const at = (v: unknown, key: string) =>
+      nested(v) ? (v as Record<string, unknown>)[key] : undefined
+    return [...keys].flatMap((key) =>
+      leavesOf(`${path}.${key}`, at(before, key), at(after, key), depth + 1)
+    )
+  }
+  if ([was, now].some(technical)) return []
+  if (readAs(sideOf(path, before)) === readAs(sideOf(path, after))) return []
+  return [{ path, label: changeLabel(path).replace(': ', ' '), before, after }]
+}
+
+/** Words compared loosely: case, punctuation and joining words aside. */
+const loose = (text: string) =>
+  ` ${text
+    .toLowerCase()
+    .replace(/[,:;()]/g, ' ')
+    .replace(/\b(on|when|to)\b/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()} `
+
+/**
+ * Whether an operation's label is about this field: it starts with the
+ * field's name, or for a style, with its property as the operation names it.
+ */
+function about(op: string, leaf: Leaf): boolean {
+  const prop = STYLE_PATH.exec(leaf.path)?.[1]
+  const names = [leaf.label]
+  if (prop && Object.hasOwn(STYLE_PROPS, prop))
+    names.push(
+      leaf.label.replace(new RegExp(`${STYLE_PROPS[prop as StyleProp].label}$`, 'i'), prop)
+    )
+  return names.some((name) => loose(op).startsWith(loose(name)))
+}
+
+/**
+ * An operation's label in plain words: no codes in brackets, a colour by its
+ * name, a style's property by the name its panel gives it.
+ */
+function opWords(op: string, leaf: Leaf | null): string {
+  let text = op.replace(/\s*\([^)]*#[0-9a-f]{3,6}[^)]*\)/gi, '')
+  const prop = leaf ? STYLE_PATH.exec(leaf.path)?.[1] : undefined
+  if (prop && Object.hasOwn(STYLE_PROPS, prop))
+    text = text.replace(
+      `: ${prop} `,
+      `: ${STYLE_PROPS[prop as StyleProp].label.toLowerCase()} `
+    )
+  text = text.replace(/#(?:[0-9a-f]{6}|[0-9a-f]{3})\b/gi, (hex) => colourName(hex))
+  return capital(text.trim())
+}
+
+/**
+ * The rows for a request's changes: one per operation, in the order they
+ * were made, and for changes no operation names, one per field.
+ */
+export function changeRows(changes: readonly AppliedDesignChange[]): ChangeRow[] {
+  const rows: ChangeRow[] = []
+  const said = new Set<string>()
+  for (const change of changes) {
+    const leaves = leavesOf(change.path, change.before, change.after)
+    const named = (change.label ?? '')
+      .split('; ')
+      .map((op) => op.trim())
+      .filter(Boolean)
+    if (!named.length) {
+      for (const leaf of leaves)
+        rows.push({
+          key: leaf.path,
+          path: leaf.path,
+          at: { path: leaf.path, before: leaf.before, after: leaf.after },
+          label: leaf.label,
+          before: sideOf(leaf.path, leaf.before),
+          after: sideOf(leaf.path, leaf.after),
+        })
+      continue
+    }
+    // A field another operation already said is part of what that operation did.
+    const ops = named.filter((op) => !said.has(op))
+    const claimed = new Set<Leaf>()
+    for (const op of ops) {
+      said.add(op)
+      const free = leaves.filter((leaf) => !claimed.has(leaf))
+      const leaf =
+        free.find((each) => about(op, each)) ??
+        (named.length === 1 && leaves.length === 1 ? leaves[0]! : null)
+      if (leaf) claimed.add(leaf)
+      const swatch = leaf ? sideOf(leaf.path, leaf.after).swatch : undefined
+      rows.push({
+        key: `${change.path}|${op}`,
+        path: leaf?.path ?? change.path,
+        // A field the operation is about, else everything its change did.
+        at: leaf
+          ? { path: leaf.path, before: leaf.before, after: leaf.after }
+          : { path: change.path, before: change.before, after: change.after },
+        text: opWords(op, leaf),
+        ...(swatch ? { swatch } : {}),
+      })
+    }
+  }
+  return rows
+}
diff --git a/apps/web/src/components/admin/settings/appearance/design-composer.tsx b/apps/web/src/components/admin/settings/appearance/design-composer.tsx
index c8d4f9c2bc..1902959fbd 100644
--- a/apps/web/src/components/admin/settings/appearance/design-composer.tsx
+++ b/apps/web/src/components/admin/settings/appearance/design-composer.tsx
@@ -4,6 +4,7 @@ import {
   useState,
   type ClipboardEvent,
   type DragEvent,
+  type KeyboardEvent,
   type ReactNode,
 } from 'react'
 import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/16/solid'
@@ -15,6 +16,7 @@ import { readBrandShot, type BrandShot } from '@/lib/client/brand-shots'
 import { imageForModel, imagePalette } from '@/lib/client/image-palette'
 import { MATCH_BRAND } from '@/lib/shared/design/match-brand'
 import type { DesignAiScope } from '@/lib/shared/design/apply-changes'
+import type { AiReach, ReachChoice } from '@/lib/shared/design/ai-reach'
 import type { BrandContext, ChatImage } from './use-design-ai'
 import { useShotChecks } from './use-shot-checks'
 
@@ -104,6 +106,7 @@ export function DesignComposer({
   limited,
   onClearScope,
   onAsk,
+  onStop,
   prefill = null,
   below,
 }: {
@@ -120,6 +123,8 @@ export function DesignComposer({
   onClearScope: () => void
   /** A message; with screenshots, how they were read, for a brand started from them. */
   onAsk: (text: string, images?: ChatImage[], brand?: BrandContext) => void
+  /** Stops the request running; while one runs, Stop takes Send's place and Escape stops it. */
+  onStop?: () => void
   /**
    * Words to put in the box, such as an example chosen; a new `seq` puts them
    * in again. A hint instead says in the empty box what to put there.
@@ -199,6 +204,14 @@ export function DesignComposer({
     const added = read.filter((item): item is Attached => item !== null)
     if (added.length) setImages((current) => [...current, ...added].slice(0, MAX_IMAGES))
   }
+  // While a request runs, the send button is Stop: the same button, so focus stays on it.
+  const stoppable = busy && !!onStop
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || !stoppable || event.defaultPrevented) return
+    // Escape here stops the request; it does not also step back in the builder.
+    event.preventDefault()
+    onStop()
+  }
   const onPaste = (event: ClipboardEvent) => {
     const files = filesOf(event.clipboardData)
     if (!files.length) return
@@ -222,6 +235,7 @@ export function DesignComposer({
   return (
     <div
       onPaste={onPaste}
+      onKeyDown={onKeyDown}
       onDragOver={(event) => {
         if (!carriesFiles(event)) return
         event.preventDefault()
@@ -378,26 +392,38 @@ export function DesignComposer({
             </TooltipContent>
           </Tooltip>
         )}
-        <Button
-          type="button"
-          variant="secondary"
-          size="icon-sm"
-          aria-label="Send"
-          className="ms-auto shrink-0 rounded-full focus-visible:ring-muted-foreground"
-          disabled={!sendable}
-          onClick={send}
-        >
-          <svg viewBox="0 0 16 16" className="size-4" aria-hidden="true">
-            <path
-              d="M8 13V3M3.5 7.5 8 3l4.5 4.5"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="secondary"
+              size="icon-sm"
+              aria-label={stoppable ? 'Stop' : 'Send'}
+              aria-keyshortcuts={stoppable ? 'Escape' : undefined}
+              className="ms-auto shrink-0 rounded-full focus-visible:ring-muted-foreground"
+              disabled={!stoppable && !sendable}
+              onClick={stoppable ? onStop : send}
+            >
+              {stoppable ? (
+                <svg viewBox="0 0 16 16" className="size-4" aria-hidden="true">
+                  <rect x="4.5" y="4.5" width="7" height="7" rx="1.5" fill="currentColor" />
+                </svg>
+              ) : (
+                <svg viewBox="0 0 16 16" className="size-4" aria-hidden="true">
+                  <path
+                    d="M8 13V3M3.5 7.5 8 3l4.5 4.5"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{stoppable ? 'Stop (Esc)' : 'Send'}</TooltipContent>
+        </Tooltip>
       </div>
     </div>
   )
@@ -405,28 +431,67 @@ export function DesignComposer({
 
 /**
  * What rides along with a request: the picked block, section or element by
- * name, the page it is on, and for an element the section it is in.
+ * name, the page it is on, and for an element the section it is in. Its
+ * reach says how far a request may change it, the panel's own scope first,
+ * and goes with the request as its `within`.
  */
 export interface ChatContext {
   name: string
   page: string
   /** The section an element picked inside it is in: "Hero". */
   section?: string
+  /** How far a request may reach: the choices, the one chosen, and a way to choose another. */
+  reach?: {
+    choices: readonly ReachChoice[]
+    value: AiReach
+    onChange: (reach: AiReach) => void
+  }
+}
+
+const capital = (text: string) => `${text.charAt(0).toUpperCase()}${text.slice(1)}`
+
+/** Where the picked part is and how far a request reaches: "Hero · every main button", "Every page (4)". */
+function reachLine(context: ChatContext): string {
+  const chosen = context.reach?.choices.find((choice) => choice.reach === context.reach!.value)
+  if (!chosen)
+    return context.section ? `${context.section} on ${context.page}` : `On ${context.page}`
+  return context.section ? `${context.section} · ${chosen.words}` : capital(chosen.words)
 }
 
 /**
- * The picked block or element riding along with a request: its name and
- * where it is, and an X that takes it out of the chat and lets go of it on
- * the page.
+ * The picked block or element riding along with a request: its name, where
+ * it is and how far a request reaches (a click takes the next reach, where
+ * there is more than one), and an X that takes it out of the chat and lets
+ * go of it on the page.
  */
 export function ContextChip({ context, onClear }: { context: ChatContext; onClear: () => void }) {
+  const line = reachLine(context)
+  const choices = context.reach?.choices ?? []
+  const next = () => {
+    const at = choices.findIndex((choice) => choice.reach === context.reach!.value)
+    context.reach!.onChange(choices[(at + 1) % choices.length]!.reach)
+  }
   return (
     <span className="inline-flex min-w-0 items-center gap-1.5 rounded-lg bg-muted py-0.5 ps-2 pe-0.5 text-xs">
       <span className="min-w-0 leading-tight">
         <span className="block truncate font-medium text-foreground">{context.name}</span>
-        <span className="block truncate text-muted-foreground">
-          {context.section ? `${context.section} on ${context.page}` : `On ${context.page}`}
-        </span>
+        {choices.length > 1 ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={`How far a request reaches: ${line}`}
+                className="block max-w-full truncate rounded text-start text-muted-foreground underline decoration-dotted underline-offset-2 hover:text-foreground focus-visible:ring-2 focus-visible:ring-muted-foreground focus-visible:outline-none"
+                onClick={next}
+              >
+                {line}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>How far a request reaches</TooltipContent>
+          </Tooltip>
+        ) : (
+          <span className="block truncate text-muted-foreground">{line}</span>
+        )}
       </span>
       <Tooltip>
         <TooltipTrigger asChild>
diff --git a/apps/web/src/components/admin/settings/appearance/use-design-ai.ts b/apps/web/src/components/admin/settings/appearance/use-design-ai.ts
index be2f8ea43b..e56f633163 100644
--- a/apps/web/src/components/admin/settings/appearance/use-design-ai.ts
+++ b/apps/web/src/components/admin/settings/appearance/use-design-ai.ts
@@ -13,7 +13,7 @@ import { askPortalDesignAiFn, designAgentStepFn } from '@/lib/server/functions/p
 import { readWebsiteFn } from '@/lib/server/functions/site-capture'
 import { readingSummary } from '@/lib/shared/design/agent/website-tool'
 import { runBuilderEditLoop, type ServerStep } from '@/lib/client/edit-loop'
-import { LOOP_BUDGET, trailOf } from '@/lib/shared/design/agent/loop'
+import { LOOP_BUDGET, stoppedReply, trailOf } from '@/lib/shared/design/agent/loop'
 import { routeRequest } from '@/lib/shared/design/agent/router'
 import { STYLE_REGISTRY } from '@/lib/shared/design/agent/style-registry'
 import { designPreview } from './use-design-draft'
@@ -32,6 +32,7 @@ import type {
   DesignAiScope,
 } from '@/lib/shared/design/apply-changes'
 import type { DesignerPage } from '@/lib/shared/design/outline'
+import type { AiReach } from '@/lib/shared/design/ai-reach'
 import type { DesignAdjustment } from '@/lib/shared/design/resolve'
 import type { PortalDesign } from '@/lib/shared/design/schema'
 import type { SupportedLocale } from '@/lib/shared/i18n'
@@ -185,8 +186,8 @@ export function useDesignAi({
   /** Saves a pending draft change first, so the server reads the latest draft. */
   flush: () => Promise<void>
   adopt: (design: PortalDesign, report: Report, label?: string, revision?: string) => void
-  /** Changes the draft as one named step, as the logo a brand match places is. */
-  update: (change: (draft: PortalDesign) => void, label?: string) => void
+  /** Changes the draft as one named step, as the logo a brand match places is; `ai` when the AI makes it. */
+  update: (change: (draft: PortalDesign) => void, label?: string, by?: 'ai') => void
   /** The workspace's name, which a title read from screenshots only replaces when it differs. */
   workspaceName: string
   /** The page and language the person sees, so a request is read, and words written, for them. */
@@ -208,6 +209,26 @@ export function useDesignAi({
   const seen = useRef(view)
   seen.current = view
   const say = (turn: DesignAiTurn) => setTurns((previous) => [...previous, turn])
+  // The request running, which Stop aborts.
+  const running = useRef<AbortController | null>(null)
+  /** A request starts: its signal, which Stop aborts. */
+  const started = () => {
+    const controller = new AbortController()
+    running.current = controller
+    return controller.signal
+  }
+  /** A request ends, unless a newer one has started since. */
+  const ended = (signal: AbortSignal) => {
+    if (running.current?.signal === signal) running.current = null
+  }
+  /** Why a request ended early: Stop, said as such, or a failure. */
+  const failed = (signal: AbortSignal) =>
+    say({ role: 'assistant', text: signal.aborted ? stoppedReply(false) : FAILED })
+  /**
+   * Stops the request running: the server takes no further step, what
+   * already applied stays (with its Undo), and the conversation says so.
+   */
+  const stop = useCallback(() => running.current?.abort(), [])
   /** A refusal said in the conversation; one for the allowance is kept to show in place of the composer. */
   const refused = (result: { code: string; message: string }, prefix = '') => {
     if (result.code === 'AI_LIMIT') setLimited(result.message)
@@ -232,7 +253,7 @@ export function useDesignAi({
       const logo = { shot, box, full, title: titleToSet(brand.name, workspaceName) }
       try {
         const change = await brandLogoChange(shot, box, { full, title: logo.title })
-        update(change, full ? 'Full logo' : 'Icon and title')
+        update(change, full ? 'Full logo' : 'Icon and title', 'ai')
         return logo
       } catch {
         return null
@@ -252,7 +273,8 @@ export function useDesignAi({
       text: string,
       attachments: ChatImage[],
       given: BrandContext | null,
-      website?: { url: string; recapture?: boolean }
+      website?: { url: string; recapture?: boolean },
+      signal?: AbortSignal
     ) => {
       await flush()
       const result = await streamBrandMatch(
@@ -278,7 +300,9 @@ export function useDesignAi({
         (step) => {
           setStage(`${step}…`)
           setSteps((now) => [...now, step])
-        }
+        },
+        undefined,
+        signal
       )
       if (!result.ok) {
         refused(result)
@@ -329,7 +353,8 @@ export function useDesignAi({
             : {}),
           ...(result.font ? { font: result.font } : {}),
         })
-        if (!checking || !target) return
+        // Stopped once the match landed: it stays, and the check does not start.
+        if (!checking || !target || signal?.aborted) return
         // The verified critic loop: read the drawn preview, score it against what was
         // measured, and keep a revision only when the measured match improves.
         setSteps((now) => [...now, CHECK_STEP])
@@ -397,7 +422,9 @@ export function useDesignAi({
       /** Screenshots as the browser read them, for a brand matched from them. */
       brand?: BrandContext,
       /** An element picked on the canvas, which "just this" names. */
-      element?: AiElementPick
+      element?: AiElementPick,
+      /** How far the request may reach from the pick, as the composer's chip says. */
+      within?: AiReach
     ) => {
       const images = attachments?.length ?? 0
       // A website named with screenshots is read beside them; named alone, it is captured.
@@ -409,11 +436,18 @@ export function useDesignAi({
         attached.image ? [attached.image] : []
       )
       setStage(matching ? 'Matching your brand…' : 'Working on it…')
+      const signal = started()
       const history = turns.map((turn) => ({ role: turn.role, content: turn.text }))
       say({ role: 'user', text, ...(thumbnails.length ? { images: thumbnails } : {}) })
       try {
         if (matching) {
-          await matchBrand(text, attachments ?? [], brand ?? null, site ? { url: site } : undefined)
+          await matchBrand(
+            text,
+            attachments ?? [],
+            brand ?? null,
+            site ? { url: site } : undefined,
+            signal
+          )
           return
         }
         await flush()
@@ -434,15 +468,18 @@ export function useDesignAi({
                 scope,
                 ...(blockId ? { blockId } : {}),
                 ...(element ? { element } : {}),
+                ...(within && scope !== 'site' ? { within } : {}),
                 history,
                 ...(attachments?.length ? { images: attachments } : {}),
                 ...(seen.current ?? {}),
                 design: check.current(),
                 targets: route.targets,
                 budget: LOOP_BUDGET,
+                signal,
               },
               {
-                step: async (body) => (await designAgentStepFn({ data: body })) as ServerStep,
+                step: async (body) =>
+                  (await designAgentStepFn({ data: body, signal })) as ServerStep,
                 adopt: (design, report, revision) =>
                   adopt(design, report as Report, requestLabel(text), revision),
                 ...(check.open ? { open: check.open } : {}),
@@ -453,34 +490,43 @@ export function useDesignAi({
                   found.push(readingSummary(read.reading))
                   return read
                 },
-                matchWebsite: async (url) => {
-                  const matched = await streamBrandMatch({ message: '', images: [], url }, () => {})
-                  if (!matched.ok)
+                // A whole brand match restyles the whole site: offered only when the
+                // request is about the whole site. One part borrows with read_website.
+                ...(scope === 'site' && {
+                  matchWebsite: async (url: string) => {
+                    const matched = await streamBrandMatch(
+                      { message: '', images: [], url },
+                      () => {},
+                      undefined,
+                      signal
+                    )
+                    if (!matched.ok)
+                      return {
+                        match: {
+                          ok: false,
+                          host: url,
+                          reply: matched.message,
+                          changed: [],
+                          notes: [],
+                        },
+                        design: null,
+                        applied: [],
+                      }
+                    if (matched.report && matched.revision && matched.applied.length > 0)
+                      adopt(matched.design, matched.report, requestLabel(text), matched.revision)
                     return {
                       match: {
-                        ok: false,
-                        host: url,
-                        reply: matched.message,
-                        changed: [],
-                        notes: [],
+                        ok: true,
+                        host: matched.capture?.host ?? url,
+                        reply: matched.reply,
+                        changed: matched.applied.map((c) => c.path),
+                        notes: matched.notes ?? [],
                       },
-                      design: null,
-                      applied: [],
+                      design: matched.design,
+                      applied: matched.applied,
                     }
-                  if (matched.report && matched.revision && matched.applied.length > 0)
-                    adopt(matched.design, matched.report, requestLabel(text), matched.revision)
-                  return {
-                    match: {
-                      ok: true,
-                      host: matched.capture?.host ?? url,
-                      reply: matched.reply,
-                      changed: matched.applied.map((c) => c.path),
-                      notes: matched.notes ?? [],
-                    },
-                    design: matched.design,
-                    applied: matched.applied,
-                  }
-                },
+                  },
+                }),
                 progress: (line) => {
                   setStage(`${line}…`)
                   setSteps((now) => [...now, line])
@@ -498,7 +544,9 @@ export function useDesignAi({
               text: result.reply,
               changes: result.applied,
               trail: trailOf(result.steps),
-              ...(found.length ? { notes: found } : {}),
+              ...(result.notes.length || found.length
+                ? { notes: [...result.notes, ...found] }
+                : {}),
               ...(shown && {
                 capture: {
                   host: shown[0],
@@ -522,10 +570,12 @@ export function useDesignAi({
             scope,
             ...(blockId ? { blockId } : {}),
             ...(element ? { element } : {}),
+            ...(within && scope !== 'site' ? { within } : {}),
             history,
             ...(attachments?.length ? { images: attachments } : {}),
             ...(seen.current ?? {}),
           },
+          signal,
         })
         if (!result.ok) {
           refused(result)
@@ -540,12 +590,15 @@ export function useDesignAi({
           text: result.reply,
           changes: result.applied,
           readability: result.readability,
+          ...('notes' in result && result.notes?.length ? { notes: result.notes } : {}),
           ...(scope !== 'site' ? { where: SCOPE_LABEL[scope] } : {}),
           ...(result.outOfScope ? { widen: text } : {}),
         })
       } catch {
-        say({ role: 'assistant', text: FAILED })
+        // Only when nothing changed: a loop that fails after a step applied keeps it, with its Undo.
+        failed(signal)
       } finally {
+        ended(signal)
         setBusy(false)
         setSteps([])
       }
@@ -583,11 +636,13 @@ export function useDesignAi({
   const recapture = useCallback(
     async (url: string) => {
       setStage('Matching your brand…')
+      const signal = started()
       try {
-        await matchBrand('', [], null, { url, recapture: true })
+        await matchBrand('', [], null, { url, recapture: true }, signal)
       } catch {
-        say({ role: 'assistant', text: FAILED })
+        failed(signal)
       } finally {
+        ended(signal)
         setBusy(false)
         setSteps([])
       }
@@ -614,6 +669,7 @@ export function useDesignAi({
       const site = website?.trim() || null
       if (!site && !screenshots.length) return
       setStage('Matching your brand…')
+      const signal = started()
       try {
         const { attachments, brand } = await readMatchShots(screenshots)
         trackBuilder('designer_brand_match_started', {
@@ -635,11 +691,13 @@ export function useDesignAi({
           site ? '' : 'Match my brand',
           attachments,
           brand,
-          site ? { url: site } : undefined
+          site ? { url: site } : undefined,
+          signal
         )
       } catch {
-        say({ role: 'assistant', text: FAILED })
+        failed(signal)
       } finally {
+        ended(signal)
         setBusy(false)
         setSteps([])
       }
@@ -656,6 +714,7 @@ export function useDesignAi({
     steps,
     limited,
     ask,
+    stop,
     adjustLogo,
     recapture,
     startBrandMatch,
diff --git a/apps/web/src/components/admin/settings/appearance/use-design-draft.ts b/apps/web/src/components/admin/settings/appearance/use-design-draft.ts
index a3d85dfb59..17643440d5 100644
--- a/apps/web/src/components/admin/settings/appearance/use-design-draft.ts
+++ b/apps/web/src/components/admin/settings/appearance/use-design-draft.ts
@@ -12,7 +12,7 @@ import {
 import { designChanges } from '@/lib/shared/design/diff'
 import { changeLabel } from '@/lib/shared/design/labels'
 import { designView } from '@/lib/shared/design/design-view'
-import { createHistory, patchesBetween } from '@/lib/shared/design/history'
+import { createHistory, patchesBetween, type Author } from '@/lib/shared/design/history'
 import { releaseOverrides } from '@/lib/shared/design/overrides'
 import type { PortalDesign } from '@/lib/shared/design/schema'
 import type { PortalDesignRevisionId } from '@quackback/ids'
@@ -150,7 +150,7 @@ export function useDesignDraft() {
    * named for what changed unless a name is given.
    */
   const update = useCallback(
-    (change: (draft: PortalDesign) => void, label?: string) => {
+    (change: (draft: PortalDesign) => void, label?: string, by?: Author) => {
       // A plain copy, not a proxy: the builder's changes may copy parts of what they are handed.
       const before = latest.current
       const next = structuredClone(before)
@@ -158,7 +158,7 @@ export function useDesignDraft() {
       // A choice picked again counts: the exact value it competes with goes, in the same step.
       releaseOverrides(before, next)
       const [patches, inverse] = patchesBetween(before, next)
-      history.getState().push(label ?? nameOfChange(before, next), patches, inverse)
+      history.getState().push(label ?? nameOfChange(before, next), patches, inverse, undefined, by)
       commit(next)
     },
     [commit, history]
@@ -170,10 +170,11 @@ export function useDesignDraft() {
    * values stay as they are: nothing is released, unlike a change picked.
    */
   const replace = useCallback(
-    (next: PortalDesign, label?: string) => {
+    (next: PortalDesign, label?: string, by?: Author) => {
       const [patches, inverse] = patchesBetween(latest.current, next)
       if (!patches.length) return
-      history.getState().push(label ?? nameOfChange(latest.current, next), patches, inverse)
+      const name = label ?? nameOfChange(latest.current, next)
+      history.getState().push(name, patches, inverse, undefined, by)
       commit(next)
     },
     [commit, history]
@@ -193,10 +194,14 @@ export function useDesignDraft() {
 
   /**
    * Makes the changes until `end` one step, under one label, such as a drag
-   * or an AI reply. Groups nest; the outermost names the step.
+   * or an AI reply. Groups nest; the outermost names the step. The AI's
+   * group says so, so a change made by hand meanwhile is a step of its own.
    */
-  const begin = useCallback((label: string) => history.getState().begin(label), [history])
-  const end = useCallback(() => history.getState().end(), [history])
+  const begin = useCallback(
+    (label: string, by?: Author) => history.getState().begin(label, by),
+    [history]
+  )
+  const end = useCallback((by?: Author) => history.getState().end(by), [history])
 
   /** Saves a change still waiting on its pause, or waits for the save under way. */
   const flush = useCallback(async () => {
@@ -221,9 +226,10 @@ export function useDesignDraft() {
       // A step of its own, never merged into the one before, named for what it changed.
       const [patches, inverse] = patchesBetween(latest.current, next)
       const name = label ?? nameOfChange(latest.current, next)
-      history.getState().begin(name)
-      history.getState().push(name, patches, inverse)
-      history.getState().end()
+      // Quackback AI's, so a change made by hand meanwhile never joins its step.
+      history.getState().begin(name, 'ai')
+      history.getState().push(name, patches, inverse, undefined, 'ai')
+      history.getState().end('ai')
       latest.current = next
       setDesign(next)
       if (nextReport) setReport(nextReport)
diff --git a/apps/web/src/components/designer/__tests__/ai-context-chip.test.tsx b/apps/web/src/components/designer/__tests__/ai-context-chip.test.tsx
index 946b686a61..5706a35e8b 100644
--- a/apps/web/src/components/designer/__tests__/ai-context-chip.test.tsx
+++ b/apps/web/src/components/designer/__tests__/ai-context-chip.test.tsx
@@ -86,7 +86,16 @@ describe('the AI context chip', () => {
     const box = screen.getByLabelText('Ask Quackback AI')
     fireEvent.change(box, { target: { value: 'fewer posts' } })
     fireEvent.keyDown(box, { key: 'Enter' })
-    expect(ask).toHaveBeenCalledWith('fewer posts', 'home', undefined, 'topposts1', undefined)
+    // A Home block keeps to itself: the chip's reach goes with the request.
+    expect(ask).toHaveBeenCalledWith(
+      'fewer posts',
+      'home',
+      undefined,
+      'topposts1',
+      undefined,
+      undefined,
+      'one'
+    )
   })
 
   it('sends the element picked inside the selection, so "just this" names it', () => {
@@ -103,7 +112,8 @@ describe('the AI context chip', () => {
       {
         element: 'button',
         part: 'hero.home.cta',
-      }
+      },
+      'every'
     )
   })
 
@@ -116,7 +126,8 @@ describe('the AI context chip', () => {
       'Call to action'
     )
     expect(screen.getByText('Call to action')).toBeTruthy()
-    expect(screen.getByText('Hero on Home')).toBeTruthy()
+    // Shared by default, as the element's own panel starts.
+    expect(screen.getByText('Hero · every main button')).toBeTruthy()
     expect(screen.getByLabelText('Ask Quackback AI').getAttribute('placeholder')).toBe(
       'Ask about Call to action'
     )
@@ -126,6 +137,41 @@ describe('the AI context chip', () => {
     expect(onClearSelection).toHaveBeenCalledOnce()
   })
 
+  it('says how far a request about the hero reaches, every page first, and sends it', () => {
+    const design = defaultDesign()
+    design.nav.home.on = true
+    const { ask } = show('hero', 'Hero', [], null, null, design)
+    const reach = screen.getByRole('button', { name: 'How far a request reaches: Every page (6)' })
+    const box = screen.getByLabelText('Ask Quackback AI')
+    fireEvent.change(box, { target: { value: 'Make this calmer' } })
+    fireEvent.keyDown(box, { key: 'Enter' })
+    expect(ask).toHaveBeenLastCalledWith(
+      'Make this calmer',
+      'band',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      'every'
+    )
+    // Narrowed to this page, a request is held to it.
+    fireEvent.click(reach)
+    expect(
+      screen.getByRole('button', { name: 'How far a request reaches: This page' })
+    ).toBeTruthy()
+    fireEvent.change(box, { target: { value: 'Make this calmer' } })
+    fireEvent.keyDown(box, { key: 'Enter' })
+    expect(ask).toHaveBeenLastCalledWith(
+      'Make this calmer',
+      'band',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      'page'
+    )
+  })
+
   it('carries nothing when nothing is picked', () => {
     show(null, null)
     expect(screen.queryByRole('button', { name: /from the chat and deselect it/ })).toBeNull()
diff --git a/apps/web/src/components/designer/__tests__/change-flash.test.tsx b/apps/web/src/components/designer/__tests__/change-flash.test.tsx
new file mode 100644
index 0000000000..5848658ce9
--- /dev/null
+++ b/apps/web/src/components/designer/__tests__/change-flash.test.tsx
@@ -0,0 +1,140 @@
+// @vitest-environment happy-dom
+/**
+ * The canvas outlines what changed in neutral grey: the part a change is in,
+ * and the elements a style changed, each forced into the state it changed
+ * while outlined. Never in the brand's colour; still, not fading, for those
+ * who ask for less motion.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, renderHook, waitFor } from '@testing-library/react'
+import { CanvasLayer } from '../canvas-layer'
+import { EditingLayer } from '../editing-layer'
+import { FLASH_MS, useChangeFlash } from '../use-change-flash'
+
+afterEach(() => {
+  cleanup()
+  document.querySelector('[data-test-page]')?.remove()
+  vi.useRealTimers()
+})
+
+/** The page the frame draws, in this document: a hero holding two main buttons. */
+function page() {
+  const root = document.createElement('div')
+  root.setAttribute('data-test-page', '')
+  const hero = document.createElement('section')
+  hero.setAttribute('data-qb-section', 'hero')
+  hero.getBoundingClientRect = () => new DOMRect(0, 60, 1000, 300)
+  hero.getClientRects = () => [hero.getBoundingClientRect()] as unknown as DOMRectList
+  for (const x of [100, 300]) {
+    const button = document.createElement('button')
+    button.setAttribute('data-slot', 'button')
+    button.setAttribute('data-variant', 'default')
+    button.getBoundingClientRect = () => new DOMRect(x, 200, 120, 40)
+    button.getClientRects = () => [button.getBoundingClientRect()] as unknown as DOMRectList
+    hero.append(button)
+  }
+  root.append(hero)
+  document.body.append(root)
+  return {
+    contentDocument: document,
+    contentWindow: window,
+    getBoundingClientRect: () => ({ left: 0, top: 0, width: 1200, height: 800 }),
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  } as unknown as HTMLIFrameElement
+}
+
+function layer(flash: Parameters<typeof CanvasLayer>[0]['flash']) {
+  return render(
+    <CanvasLayer
+      canvas={{ frame: page(), scale: 1, room: { width: 1200, height: 800 } }}
+      hovered={null}
+      picked={null}
+      name={null}
+      homeOn
+      pages={['home']}
+      onPage={vi.fn()}
+      onDuplicate={vi.fn()}
+      onRemove={vi.fn()}
+      onDeselect={vi.fn()}
+      flash={flash}
+    />
+  )
+}
+
+describe('the canvas’s outline of a change', () => {
+  it('outlines the part a change is in, in neutral grey', async () => {
+    const { container } = layer({ spots: [{ page: null, section: 'hero' }], seq: 1 })
+    await waitFor(() => expect(container.querySelectorAll('[data-change-outline]')).toHaveLength(1))
+    const outline = container.querySelector<HTMLElement>('[data-change-outline]')!
+    expect(outline.style.outline).toContain('#71717a')
+    expect(outline.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  it('outlines each element a style changed, forced into the state it changed', async () => {
+    const { container, unmount } = layer({
+      spots: [{ page: null, element: 'button', state: 'hover' }],
+      seq: 1,
+    })
+    await waitFor(() => expect(container.querySelectorAll('[data-change-outline]')).toHaveLength(2))
+    const buttons = [...document.querySelectorAll('[data-test-page] button')]
+    expect(buttons.map((button) => button.getAttribute('data-qb-force'))).toEqual([
+      'hover',
+      'hover',
+    ])
+    unmount()
+    expect(buttons.map((button) => button.getAttribute('data-qb-force'))).toEqual([null, null])
+  })
+
+  it('outlines nothing for a part this page does not draw', async () => {
+    const { container } = layer({ spots: [{ page: 'roadmap', section: 'board' }], seq: 1 })
+    await new Promise((resolve) => setTimeout(resolve, 30))
+    expect(container.querySelectorAll('[data-change-outline]')).toHaveLength(0)
+  })
+})
+
+describe('the outline itself', () => {
+  const room = { width: 800, height: 600 }
+  const rect = { left: 10, top: 10, width: 100, height: 50 }
+
+  it('fades after it shows, unless less motion is asked for', async () => {
+    const { container } = render(
+      <EditingLayer
+        room={room}
+        hovered={null}
+        picked={null}
+        name={null}
+        onSettings={vi.fn()}
+        changed={{ rects: [rect], seq: 1 }}
+      />
+    )
+    const outline = container.querySelector<HTMLElement>('[data-change-outline]')!
+    expect(outline.className).toContain('motion-reduce:transition-none')
+    await waitFor(() => expect(outline.className).toContain('motion-safe:opacity-0'))
+    // Never brand coloured: grey, edged in white so it reads on any brand colour.
+    expect(outline.style.outline).toContain('#71717a')
+    expect(outline.style.outline).not.toContain('#2563eb')
+  })
+})
+
+describe('useChangeFlash', () => {
+  it('shows spots for a moment, a newer one in its place', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() => useChangeFlash())
+    act(() => result.current.show([{ page: null, section: 'hero' }]))
+    expect(result.current.flash).toEqual({ spots: [{ page: null, section: 'hero' }], seq: 1 })
+    act(() => vi.advanceTimersByTime(FLASH_MS - 100))
+    act(() => result.current.show([{ page: null, section: 'header' }]))
+    expect(result.current.flash?.seq).toBe(2)
+    act(() => vi.advanceTimersByTime(FLASH_MS - 100))
+    expect(result.current.flash?.spots).toEqual([{ page: null, section: 'header' }])
+    act(() => vi.advanceTimersByTime(200))
+    expect(result.current.flash).toBeNull()
+  })
+
+  it('shows nothing for no spots', () => {
+    const { result } = renderHook(() => useChangeFlash())
+    act(() => result.current.show([]))
+    expect(result.current.flash).toBeNull()
+  })
+})
diff --git a/apps/web/src/components/designer/__tests__/designer-ai-starters.test.tsx b/apps/web/src/components/designer/__tests__/designer-ai-starters.test.tsx
new file mode 100644
index 0000000000..fca1c7fc80
--- /dev/null
+++ b/apps/web/src/components/designer/__tests__/designer-ai-starters.test.tsx
@@ -0,0 +1,68 @@
+// @vitest-environment happy-dom
+/**
+ * Ask AI's first suggestions follow where the person is: the picked part's
+ * own examples, else the page open.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, within } from '@testing-library/react'
+
+vi.mock('@tanstack/react-query', () => ({
+  useSuspenseQuery: () => ({ data: { available: true } }),
+  useQuery: () => ({ data: undefined }),
+}))
+vi.mock('@/lib/server/functions/site-capture', () => ({ siteCaptureUsageFn: vi.fn() }))
+vi.mock('@/lib/client/queries/portal-design', () => ({
+  portalDesignQueries: { aiStatus: () => ({}) },
+}))
+vi.mock('@/lib/client/image-palette', () => ({}))
+vi.mock('@/components/admin/settings/appearance/ask-ai-panel', () => ({
+  AskAiPanel: () => null,
+  PaletteSwatches: () => null,
+}))
+
+const { DesignerAi } = await import('../designer-ai')
+const { defaultDesign } = await import('@/lib/shared/design/schema')
+
+afterEach(cleanup)
+
+function matched() {
+  const design = defaultDesign()
+  design.brand.matchedAt = '2026-11-07T12:00:00.000Z'
+  design.nav.home.on = true
+  return design
+}
+
+function starters(page: 'home' | 'roadmap', selection: string | null, name: string | null) {
+  render(
+    <DesignerAi
+      ai={{ busy: false, limited: null, ask: vi.fn(), turns: [] } as never}
+      draft={{ design: matched() } as never}
+      selection={selection as never}
+      selectionName={name}
+      page={page}
+      pageName={page === 'home' ? 'Home' : 'Roadmap'}
+      update={vi.fn()}
+      onClearSelection={vi.fn()}
+      onCollapse={vi.fn()}
+    />
+  )
+  return within(screen.getByRole('list', { name: 'Suggestions' }))
+    .getAllByRole('button')
+    .map((button) => button.textContent)
+}
+
+describe('Ask AI’s starters', () => {
+  it('offers the picked part’s examples', () => {
+    expect(starters('home', 'hero', 'Hero')).toEqual([
+      'Make the hero louder',
+      'Give the hero more room and a dotted pattern',
+      'Just the headline up top, no post box there',
+    ])
+  })
+
+  it('keeps to the page open when nothing is picked', () => {
+    const shown = starters('roadmap', null, null)
+    expect(shown[0]).toBe('Lay the roadmap out in columns, with votes on its cards')
+    expect(shown).not.toContain('Show the roadmap on Home')
+  })
+})
diff --git a/apps/web/src/components/designer/canvas-layer.tsx b/apps/web/src/components/designer/canvas-layer.tsx
index 6adcb1a047..564dbeed36 100644
--- a/apps/web/src/components/designer/canvas-layer.tsx
+++ b/apps/web/src/components/designer/canvas-layer.tsx
@@ -8,6 +8,8 @@ import { useComposerWidthEdit } from './use-composer-width'
 import { useGridEdit, type GridEditing } from './use-grid-edit'
 import { revealInFrame, useFrameRects } from './use-frame-rects'
 import { ElementOutlines, type LiveValue, type OutlinedElement } from './element-outline'
+import { locateTarget, outlineTargets } from './change-outlines'
+import type { ChangeFlash } from './use-change-flash'
 import {
   kindNote,
   locatePick,
@@ -45,6 +47,7 @@ export function CanvasLayer({
   onDeselect,
   grid,
   elements,
+  flash = null,
 }: {
   canvas: CanvasFrame
   hovered: Selection | null
@@ -71,8 +74,22 @@ export function CanvasLayer({
     onPick: (pick: ElementPick | null) => void
     say: (words: string) => void
   }
+  /** What a change touched, outlined for a moment, its elements in the state it changed. */
+  flash?: ChangeFlash | null
 }) {
+  const doc = canvas.frame?.contentDocument ?? null
+  // What the change outlines, found in the page as drawn now.
+  const changedTargets = flash && doc ? outlineTargets(doc, flash.spots) : []
+  const flashKeys = changedTargets.map((_, at) => `flash:${flash!.seq}:${at}`)
+  const flashTargetOf = (key: string) => {
+    const m = /^flash:\d+:(\d+)$/.exec(key)
+    return m ? changedTargets[Number(m[1])] : undefined
+  }
   const locate = (doc: Document, key: string) => {
+    if (key.startsWith('flash:')) {
+      const target = flashTargetOf(key)
+      return target ? locateTarget(doc, target) : null
+    }
     const live = liveOfKey(key)
     if (live) {
       const scope = [...doc.querySelectorAll('[data-qb-section]')].find(
@@ -83,7 +100,6 @@ export function CanvasLayer({
     const pick = pickOfKey(key)
     return pick && elements ? locatePick(doc, pick, elements.design, elements.page) : null
   }
-  const doc = canvas.frame?.contentDocument ?? null
   const element = elements?.picked ? pickOfKey(elements.picked) : null
   const pointed = elements?.hovered ? pickOfKey(elements.hovered) : null
   const traitsOf = (pick: ElementPick | null) =>
@@ -120,6 +136,7 @@ export function CanvasLayer({
       elements?.picked ?? null,
       ...otherKeys,
       ...liveKeys,
+      ...flashKeys,
     ],
     locate
   )
@@ -127,6 +144,26 @@ export function CanvasLayer({
     pick && elements ? pickName(pick, elements.design, elements.page) : null
   const locateRef = useRef(locate)
   locateRef.current = locate
+  // A style changed in a state shows in it while outlined: its elements are forced into it.
+  const forcedFlash = changedTargets.flatMap((target, at) =>
+    target.state && rects[flashKeys[at]!] ? [`${flashKeys[at]}|${target.state}`] : []
+  )
+  const forcedFlashKey = forcedFlash.join(' ')
+  useEffect(() => {
+    const doc = canvas.frame?.contentDocument
+    if (!doc || !forcedFlashKey) return
+    const set: Element[] = []
+    for (const entry of forcedFlashKey.split(' ')) {
+      const [key, state] = entry.split('|')
+      const node = locateRef.current(doc, key!)
+      if (!node || node.hasAttribute('data-qb-force')) continue
+      node.setAttribute('data-qb-force', state!)
+      set.push(node)
+    }
+    return () => {
+      for (const node of set) node.removeAttribute('data-qb-force')
+    }
+  }, [canvas.frame, forcedFlashKey])
   // The picked element is drawn in the state its settings show.
   const force = elements?.force ?? 'base'
   const forcedKey = elements?.picked ?? null
@@ -221,6 +258,14 @@ export function CanvasLayer({
       }
       picked={pickedRect}
       pickedKey={picked}
+      changed={
+        flash
+          ? {
+              seq: flash.seq,
+              rects: flashKeys.flatMap((key) => (rects[key] ? [rects[key]] : [])),
+            }
+          : null
+      }
       name={name}
       onDuplicate={block ? () => onDuplicate(block) : undefined}
       onRemove={block ? () => onRemove(block) : undefined}
diff --git a/apps/web/src/components/designer/change-outlines.ts b/apps/web/src/components/designer/change-outlines.ts
new file mode 100644
index 0000000000..6d74108383
--- /dev/null
+++ b/apps/web/src/components/designer/change-outlines.ts
@@ -0,0 +1,58 @@
+/**
+ * What the canvas outlines for a change: each part a change is in, by its
+ * `data-qb-section`, and each element a style changed, by its selector (in
+ * its part when it has one), a few of each. Read from the frame's page each
+ * time it is measured, as the page may draw its parts afresh.
+ */
+import type { ChangeSpot } from '@/lib/shared/design/change-spots'
+import { STYLE_ELEMENTS, type StyleState } from '@/lib/shared/design/style-tokens'
+
+/** Most elements outlined for one style, so a page of buttons is not a page of boxes. */
+const MOST_ELEMENTS = 8
+
+/** One thing outlined: a part, or the nth element a selector finds in a part or the page. */
+export interface OutlineTarget {
+  section?: string
+  selector?: string
+  nth?: number
+  /** The state the element is forced into while outlined. */
+  state?: StyleState
+}
+
+/** Whether the page lays an element out. */
+const drawn = (element: Element) => element.getClientRects().length > 0
+
+function sectionIn(doc: Document, section: string): Element | null {
+  for (const element of doc.querySelectorAll('[data-qb-section]'))
+    if (element.getAttribute('data-qb-section') === section) return element
+  return null
+}
+
+function elementsIn(doc: Document, target: OutlineTarget): Element[] {
+  const scope = target.section ? sectionIn(doc, target.section) : doc
+  if (!scope || !target.selector) return []
+  return [...scope.querySelectorAll(target.selector)].filter(drawn)
+}
+
+/** The things to outline for a change's spots on the page in the frame. */
+export function outlineTargets(doc: Document, spots: readonly ChangeSpot[]): OutlineTarget[] {
+  return spots.flatMap((spot): OutlineTarget[] => {
+    if (spot.element) {
+      const target = {
+        selector: STYLE_ELEMENTS[spot.element].selector,
+        ...(spot.section ? { section: spot.section } : {}),
+        ...(spot.state ? { state: spot.state } : {}),
+      }
+      return elementsIn(doc, target)
+        .slice(0, MOST_ELEMENTS)
+        .map((_, nth) => ({ ...target, nth }))
+    }
+    return spot.section && sectionIn(doc, spot.section) ? [{ section: spot.section }] : []
+  })
+}
+
+/** The element a target names in the page as it is now, or null where it has gone. */
+export function locateTarget(doc: Document, target: OutlineTarget): Element | null {
+  if (target.selector) return elementsIn(doc, target)[target.nth ?? 0] ?? null
+  return target.section ? sectionIn(doc, target.section) : null
+}
diff --git a/apps/web/src/components/designer/designer-ai.tsx b/apps/web/src/components/designer/designer-ai.tsx
index 7b883ca811..e3b4b0eb40 100644
--- a/apps/web/src/components/designer/designer-ai.tsx
+++ b/apps/web/src/components/designer/designer-ai.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
 import { ChevronDoubleLeftIcon, SparklesIcon } from '@heroicons/react/24/outline'
-import { AskAiPanel } from '@/components/admin/settings/appearance/ask-ai-panel'
+import { AskAiPanel, type ShowChange } from '@/components/admin/settings/appearance/ask-ai-panel'
 import {
   DesignComposer,
   type ChatContext,
@@ -13,7 +13,8 @@ import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { portalDesignQueries } from '@/lib/client/queries/portal-design'
 import type { AiElementPick, DesignAiScope } from '@/lib/shared/design/apply-changes'
-import type { Selection } from '@/lib/shared/design/outline'
+import type { DesignerPage, Selection } from '@/lib/shared/design/outline'
+import { reachChoices, type AiReach } from '@/lib/shared/design/ai-reach'
 import { heroOf, writeHero } from '@/lib/shared/design/hero'
 import { isMenuSelection } from '@/lib/shared/design/menu'
 import { siteCaptureUsageFn } from '@/lib/server/functions/site-capture'
@@ -54,17 +55,21 @@ export function aiScopeOf(selection: Selection | null): {
 /** The id of Ask AI's request box, which "/" focuses. */
 export const AI_BOX_ID = 'designer-ai-box'
 
-/** Before the first request: one line, and what to start from for this portal. */
+/** Before the first request: one line, and what to start from for this portal, page and pick. */
 function AiEmpty({
   design,
   gates,
+  page,
+  selection,
   onStarter,
 }: {
   design: PortalDesign
   gates?: Partial<PortalPageGates>
+  page?: DesignerPage
+  selection: Selection | null
   onStarter: (text: string) => void
 }) {
-  const starters = aiStarters(design, gates)
+  const starters = aiStarters(design, gates, { ...(page ? { page } : {}), selection })
   return (
     <div className="flex min-h-full flex-col items-center justify-center gap-3 py-8 text-center">
       <span className="grid size-10 place-items-center rounded-full border border-border">
@@ -134,11 +139,13 @@ export function DesignerAi({
   element = null,
   elementName = null,
   pageName,
+  page = 'home',
   update,
   onClearSelection,
   onCollapse,
   gates,
   onFonts,
+  show,
 }: {
   /** The conversation, kept by the designer so a match made in the inspector joins it. */
   ai: ReturnType<typeof useDesignAi>
@@ -152,6 +159,11 @@ export function DesignerAi({
   elementName?: string | null
   /** The page shown, which the picked part is on. */
   pageName: string
+  /**
+   * The page shown, by its id: the starters keep to it with nothing picked, and
+   * a request kept to one page keeps to it.
+   */
+  page?: DesignerPage
   update: Update
   onClearSelection: () => void
   /** Folds the pane to its rail. */
@@ -160,6 +172,8 @@ export function DesignerAi({
   gates?: Partial<PortalPageGates>
   /** Opens Theme's Brand kit fonts, with the upload for a font a brand match could not match. */
   onFonts?: (font?: UnmatchedFont) => void
+  /** Shows a change on the canvas from its Show changes row. */
+  show?: ShowChange
 }) {
   const { available } = useSuspenseQuery(portalDesignQueries.aiStatus()).data
   const { scope, blockId } = aiScopeOf(selection)
@@ -170,13 +184,29 @@ export function DesignerAi({
       // Match my brand points at the box: the website or screenshots go there.
       ...(text === MATCH_STARTER ? { text: '', hint: MATCH_HINT } : { text }),
     }))
+  // How far a request may reach: the panel's own scope first, until another is chosen
+  // for this pick on this page.
+  const choices = reachChoices(draft.design, { scope, blockId, element }, page, gates)
+  const pickKey = `${selection}|${element?.element ?? ''}|${element?.part ?? ''}|${page}`
+  const [chosen, setChosen] = useState<{ key: string; reach: AiReach } | null>(null)
+  const within: AiReach | undefined =
+    chosen?.key === pickKey && choices.some((choice) => choice.reach === chosen.reach)
+      ? chosen.reach
+      : choices[0]?.reach
+  const reach = within
+    ? {
+        choices,
+        value: within,
+        onChange: (next: AiReach) => setChosen({ key: pickKey, reach: next }),
+      }
+    : undefined
   // A block, a section of the page or an item of the menu; never the site's own settings.
   // An element picked inside it leads, with the section it is in beside it.
   const context: ChatContext | null =
     selection && selectionName && selection !== 'site' && !selection.startsWith('site:')
       ? element && elementName
-        ? { name: elementName, section: selectionName, page: pageName }
-        : { name: selectionName, page: pageName }
+        ? { name: elementName, section: selectionName, page: pageName, ...(reach && { reach }) }
+        : { name: selectionName, page: pageName, ...(reach && { reach }) }
       : null
   return (
     <section
@@ -212,7 +242,13 @@ export function DesignerAi({
         className="min-h-0 flex-1 overflow-y-auto px-4 py-3"
       >
         {available && ai.turns.length === 0 ? (
-          <AiEmpty design={draft.design} gates={gates} onStarter={fill} />
+          <AiEmpty
+            design={draft.design}
+            gates={gates}
+            page={page}
+            selection={selection}
+            onStarter={fill}
+          />
         ) : (
           <AskAiPanel
             available={available}
@@ -222,6 +258,7 @@ export function DesignerAi({
             steps={ai.steps}
             design={draft.design}
             update={update}
+            {...(show ? { show } : {})}
             renderBrand={(turn, index) =>
               turn.brand && (
                 <BrandLogoCard
@@ -255,12 +292,16 @@ export function DesignerAi({
             context={context}
             busy={ai.busy}
             limited={ai.limited}
+            onStop={ai.stop}
             onClearScope={onClearSelection}
             onAsk={(text, images, brand) =>
-              // An element picked inside the selection rides along, so "just this" names it.
-              void (element
-                ? ai.ask(text, scope, images, blockId, brand, element)
-                : ai.ask(text, scope, images, blockId, brand))
+              // An element picked inside the selection rides along, so "just this" names it,
+              // and the chip's reach with it, which the server holds every change to.
+              void (context && within
+                ? ai.ask(text, scope, images, blockId, brand, element ?? undefined, within)
+                : element
+                  ? ai.ask(text, scope, images, blockId, brand, element)
+                  : ai.ask(text, scope, images, blockId, brand))
             }
             prefill={prefill}
             below={(text) => <CapturesLeft text={text} />}
diff --git a/apps/web/src/components/designer/designer-shell.tsx b/apps/web/src/components/designer/designer-shell.tsx
index 130e3a50af..545706eb95 100644
--- a/apps/web/src/components/designer/designer-shell.tsx
+++ b/apps/web/src/components/designer/designer-shell.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { ClientOnly } from '@tanstack/react-router'
 import { MotionConfig } from 'framer-motion'
@@ -57,6 +57,10 @@ import { useCanvasSelection } from './use-canvas-selection'
 import { useCanvasView } from './use-canvas-view'
 import { useCountedUpdate, useDesignerEvents } from './use-designer-events'
 import { useDesignerAi } from './use-designer-ai'
+import { SHOW_MS, useChangeFlash } from './use-change-flash'
+import type { ShowChange } from '@/components/admin/settings/appearance/ask-ai-panel'
+import { changeSpots, pageForSpot, spotsBetween } from '@/lib/shared/design/change-spots'
+import type { PortalDesign } from '@/lib/shared/design/schema'
 import { useDesignerPage } from './use-designer-page'
 import { useMatchOnArrival } from './use-match-on-arrival'
 import { useMenuEditing } from './use-menu-editing'
@@ -99,8 +103,22 @@ export function DesignerShell({
   const follow = usePreviewFollow({ previewing, ...view, homeOn: design.nav.home.on })
   const panel = useBuilderPanel()
   const aiPane = useAiPane(previewing, () => setPane('ai'))
+  // What an AI step changed is outlined on the canvas for a moment, where this page shows it.
+  const changeFlash = useChangeFlash()
+  const shownPage = useRef(page)
+  shownPage.current = page
+  const { show: flashChange } = changeFlash
+  const onAiApplied = useCallback(
+    (before: PortalDesign, after: PortalDesign) =>
+      flashChange(
+        spotsBetween(before, after).filter(
+          (spot) => spot.page === null || spot.page === shownPage.current
+        )
+      ),
+    [flashChange]
+  )
   // Quackback AI's conversation.
-  const { ai } = useDesignerAi(draft, { page, locale }, workspaceName)
+  const { ai } = useDesignerAi(draft, { page, locale }, workspaceName, onAiApplied)
   const [now] = useState(() => new Date())
   const livePreview = useMemo(() => designPreview(draft.live), [draft.live])
   const canvasDesign = useCanvasDesign(draft.preview)
@@ -312,6 +330,23 @@ export function DesignerShell({
     pick(key)
     focusSettings()
   }
+  // A Show changes row's Show: the page the change is on, its part outlined, its state forced.
+  const showChange: ShowChange = {
+    can: (at) => changeSpots(design, at).some((spot) => pageForSpot(spot, page, pages) !== null),
+    go: (at, words) => {
+      const spots = changeSpots(design, at)
+      const first = spots.find((spot) => pageForSpot(spot, page, pages) !== null)
+      const to = first ? pageForSpot(first, page, pages) : null
+      if (!to) return
+      if (to !== page) setPage(to)
+      setPane('page')
+      flashChange(
+        spots.filter((spot) => pageForSpot(spot, to, pages) === to),
+        SHOW_MS
+      )
+      say(`Showing ${words}${to === page ? '' : ` on ${PAGE_NAMES[to]}`}.`)
+    },
+  }
   const menuHot = picking.hovered === 'header' || selection === 'header'
   const pickedBlock = selection?.startsWith('block-') ? (nameOf(selection) ?? null) : null
   const caption = deviceCaption(size)
@@ -410,6 +445,7 @@ export function DesignerShell({
                 elementName={
                   pickedElement ? pickLabel(pickedElement, design, backgroundPageOf(page)) : null
                 }
+                page={page}
                 pageName={PAGE_NAMES[page]}
                 update={update}
                 onClearSelection={() => setSelection(null)}
@@ -420,6 +456,7 @@ export function DesignerShell({
                   setPane('settings')
                   revealThemeFonts(font)
                 }}
+                show={showChange}
               />
             </AiPane>
           )}
@@ -505,6 +542,7 @@ export function DesignerShell({
                           onDuplicate={blocks.duplicateBlock}
                           onRemove={blocks.removeBlock}
                           onDeselect={stepBack}
+                          flash={changeFlash.flash}
                           grid={{ design, gates, update, begin: draft.begin, end: draft.end, say }}
                           elements={{
                             design,
diff --git a/apps/web/src/components/designer/editing-layer.tsx b/apps/web/src/components/designer/editing-layer.tsx
index 0566d0f082..0175fa28bd 100644
--- a/apps/web/src/components/designer/editing-layer.tsx
+++ b/apps/web/src/components/designer/editing-layer.tsx
@@ -22,6 +22,9 @@ import { chipPlacement, outlineBox, type Rect } from '@/lib/shared/design/layer-
 /** The picked block's outline and chip: blue, edged in white, so it reads on any brand colour. */
 const PICKED = '#2563eb'
 
+/** What changed, outlined: neutral grey, never the brand's colour or the pick's blue. */
+const CHANGED = '#71717a'
+
 /** A chip size to place it by until it has been measured. */
 const CHIP_GUESS = { width: 220, height: 28 }
 
@@ -118,6 +121,7 @@ export function EditingLayer({
   onDown,
   grip,
   children,
+  changed = null,
 }: {
   /** The canvas's visible size on the layer. */
   room: { width: number; height: number }
@@ -144,6 +148,8 @@ export function EditingLayer({
   }
   /** More for the layer to draw, such as a block's resize handles. */
   children?: ReactNode
+  /** What a change touched, outlined for a moment; `seq` starts each outline afresh. */
+  changed?: { rects: Rect[]; seq: number } | null
 }) {
   const chip = useRef<HTMLDivElement>(null)
   const [size, setSize] = useState(CHIP_GUESS)
@@ -178,6 +184,9 @@ export function EditingLayer({
           }}
         />
       )}
+      {changed?.rects.map((rect, at) => (
+        <ChangeOutline key={`${changed.seq}-${at}`} rect={rect} room={room} />
+      ))}
       {children}
       {place && name && (
         <ChipMenu name={name} onDuplicate={onDuplicate}>
@@ -238,6 +247,31 @@ export function EditingLayer({
   )
 }
 
+/**
+ * One thing a change touched, outlined in grey, edged in white so it reads on
+ * any colour. It fades once shown; with less motion asked for, it stays still
+ * until the canvas takes it away.
+ */
+function ChangeOutline({ rect, room }: { rect: Rect; room: { width: number; height: number } }) {
+  const [fading, setFading] = useState(false)
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setFading(true))
+    return () => cancelAnimationFrame(frame)
+  }, [])
+  return (
+    <div
+      data-change-outline=""
+      aria-hidden="true"
+      className={`absolute rounded-[3px] transition-opacity delay-500 duration-1000 ease-in motion-reduce:transition-none ${fading ? 'motion-safe:opacity-0' : 'opacity-100'}`}
+      style={{
+        ...outlineBox(rect, 2, room),
+        outline: `2px solid ${CHANGED}`,
+        boxShadow: '0 0 0 1px #fff, inset 0 0 0 1px #fff',
+      }}
+    />
+  )
+}
+
 /** The picked block chip's right-click menu: copying the block, as Ctrl+D does. */
 function ChipMenu({
   name,
diff --git a/apps/web/src/components/designer/use-change-flash.ts b/apps/web/src/components/designer/use-change-flash.ts
new file mode 100644
index 0000000000..bf84876713
--- /dev/null
+++ b/apps/web/src/components/designer/use-change-flash.ts
@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ChangeSpot } from '@/lib/shared/design/change-spots'
+
+/** How long the canvas outlines what an AI step changed. */
+export const FLASH_MS = 1500
+
+/** How long a change shown from its row stays outlined, a page switch included. */
+export const SHOW_MS = 3000
+
+/** What the canvas outlines just now: the spots, and a count that starts each outline afresh. */
+export interface ChangeFlash {
+  spots: ChangeSpot[]
+  seq: number
+}
+
+/**
+ * The canvas's outline of what changed: shown for a moment after an AI step
+ * applies, or from a Show changes row, then gone. A newer one replaces it.
+ */
+export function useChangeFlash() {
+  const [flash, setFlash] = useState<ChangeFlash | null>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const show = useCallback((spots: ChangeSpot[], ms = FLASH_MS) => {
+    if (!spots.length) return
+    if (timer.current) clearTimeout(timer.current)
+    setFlash((was) => ({ spots, seq: (was?.seq ?? 0) + 1 }))
+    timer.current = setTimeout(() => {
+      timer.current = null
+      setFlash(null)
+    }, ms)
+  }, [])
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current)
+    },
+    []
+  )
+  return { flash, show }
+}
diff --git a/apps/web/src/components/designer/use-designer-ai.ts b/apps/web/src/components/designer/use-designer-ai.ts
index 6082e343c1..0b0ddc88e1 100644
--- a/apps/web/src/components/designer/use-designer-ai.ts
+++ b/apps/web/src/components/designer/use-designer-ai.ts
@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { useDesignAi } from '@/components/admin/settings/appearance/use-design-ai'
 import {
   designPreview,
@@ -30,29 +30,46 @@ const openHome = (locale: SupportedLocale) => (design: PortalDesign) =>
     preview: designPreview,
   })
 
-/** Quackback AI's conversation for the designer, told the page and language shown. */
+/**
+ * Quackback AI's conversation for the designer, told the page and language
+ * shown. Each step the AI applies is reported with the draft before and
+ * after it, so the canvas can outline what changed.
+ */
 export function useDesignerAi(
   draft: Pick<
     ReturnType<typeof useDesignDraft>,
     'flush' | 'adopt' | 'update' | 'replace' | 'begin' | 'end' | 'design'
   >,
   view: { page: DesignerPage; locale: SupportedLocale },
-  workspaceName: string
+  workspaceName: string,
+  onApplied?: (before: PortalDesign, after: PortalDesign) => void
 ) {
   // The draft as it is when a request starts, read without re-rendering on every change.
   const latest = useRef(draft.design)
   latest.current = draft.design
+  const applied = useRef(onApplied)
+  applied.current = onApplied
+  const { adopt } = draft
+  const adoptAndShow = useCallback(
+    (...args: Parameters<typeof adopt>) => {
+      const before = latest.current
+      adopt(...args)
+      applied.current?.(before, args[0])
+    },
+    [adopt]
+  )
   return {
     ai: useDesignAi({
       flush: draft.flush,
-      adopt: draft.adopt,
+      adopt: adoptAndShow,
       update: draft.update,
       workspaceName,
       view,
       check: {
-        begin: draft.begin,
-        end: draft.end,
-        replace: draft.replace,
+        // The AI's own group, so a change made by hand while it works is a step of its own.
+        begin: (label) => draft.begin(label, 'ai'),
+        end: () => draft.end('ai'),
+        replace: (design, label) => draft.replace(design, label, 'ai'),
         frame: canvasFrame,
         open: openHome(view.locale),
         current: () => latest.current,
diff --git a/apps/web/src/components/designer/use-frame-rects.ts b/apps/web/src/components/designer/use-frame-rects.ts
index d1f26ea01a..fd5c6b9a48 100644
--- a/apps/web/src/components/designer/use-frame-rects.ts
+++ b/apps/web/src/components/designer/use-frame-rects.ts
@@ -19,7 +19,7 @@ export function blockElement(
   key: string,
   locate?: (doc: Document, key: string) => Element | null
 ): Element | null {
-  if (locate && (key.startsWith('el:') || key.startsWith('live:'))) return locate(doc, key)
+  if (locate && /^(el|live|flash):/.test(key)) return locate(doc, key)
   if (key === MENU_ROW_KEY)
     return [...doc.querySelectorAll('[data-qb-menu-row]')].find(drawn) ?? null
   if (key.startsWith('menu:')) {
@@ -92,7 +92,7 @@ export function useFrameRects(
   frame: HTMLIFrameElement | null,
   scale: number,
   keys: readonly (string | null)[],
-  /** Finds an element picked in a block (`el:` keys) or a live value in one (`live:` keys). */
+  /** Finds an element picked in a block (`el:` keys), a live value in one (`live:` keys) or a change outlined (`flash:` keys). */
   locate?: (doc: Document, key: string) => Element | null
 ): Partial<Record<string, Rect>> {
   const locating = useRef(locate)
diff --git a/apps/web/src/lib/client/brand-match-stream.ts b/apps/web/src/lib/client/brand-match-stream.ts
index 3d114c08a2..d49c02fc8d 100644
--- a/apps/web/src/lib/client/brand-match-stream.ts
+++ b/apps/web/src/lib/client/brand-match-stream.ts
@@ -100,13 +100,16 @@ export async function streamBrandMatch(
     recapture?: boolean
   },
   onStep: (step: string) => void,
-  fetcher: typeof fetch = fetch
+  fetcher: typeof fetch = fetch,
+  /** The person's Stop: the request ends, and the server saves nothing more. */
+  signal?: AbortSignal
 ): Promise<BrandMatchOutcome> {
   const res = await fetcher(BRAND_MATCH_URL, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     credentials: 'same-origin',
     body: JSON.stringify(body),
+    ...(signal ? { signal } : {}),
   })
   if (!res.ok || !res.body) {
     const refusal = (await res.json().catch(() => null)) as { error?: { message?: string } } | null
diff --git a/apps/web/src/lib/client/edit-loop.ts b/apps/web/src/lib/client/edit-loop.ts
index 1ab08574fc..522d84aabb 100644
--- a/apps/web/src/lib/client/edit-loop.ts
+++ b/apps/web/src/lib/client/edit-loop.ts
@@ -22,6 +22,7 @@ import {
 } from '@/lib/shared/design/agent/style-registry'
 import type { PortalDesign } from '@/lib/shared/design/schema'
 import type { AiElementPick, DesignAiScope } from '@/lib/shared/design/apply-changes'
+import type { AiReach } from '@/lib/shared/design/ai-reach'
 import type { DesignerPage } from '@/lib/shared/design/outline'
 import type { SupportedLocale } from '@/lib/shared/i18n'
 import type { CheckFrame } from './check-frame'
@@ -35,6 +36,8 @@ export interface EditLoopRequest {
   blockId?: string
   /** An element picked on the canvas, which "just this" names. */
   element?: AiElementPick
+  /** How far the request may reach from the pick, as the composer's chip says. */
+  within?: AiReach
   images?: Array<{ palette: string[]; image?: string }>
   history: Array<{ role: 'user' | 'assistant'; content: string }>
   page?: DesignerPage
@@ -70,13 +73,19 @@ export interface EditLoopDeps {
 
 /** Runs a request through the loop from the builder. */
 export async function runBuilderEditLoop(
-  input: EditLoopRequest & { design: PortalDesign; targets: StyleTarget[]; budget: LoopBudget },
+  input: EditLoopRequest & {
+    design: PortalDesign
+    targets: StyleTarget[]
+    budget: LoopBudget
+    /** The person's Stop: no step starts after it, and what applied stays. */
+    signal?: AbortSignal
+  },
   deps: EditLoopDeps,
   registry: StyleRegistry = STYLE_REGISTRY
 ): Promise<LoopResult> {
   const original = input.design
   let current = original
-  const { design: _design, targets, budget, ...request } = input
+  const { design: _design, targets, budget, signal, ...request } = input
   // The frame opens while the first step is asked; reading waits for it.
   const opening: Promise<CheckFrame<PortalDesign> | null> = deps.open
     ? deps.open(original).catch(() => null)
@@ -92,6 +101,8 @@ export async function runBuilderEditLoop(
       design: original,
       targets,
       budget,
+      pick: { scope: request.scope, ...(request.page ? { page: request.page } : {}) },
+      ...(signal ? { signal } : {}),
       deps: {
         progress: deps.progress,
         step: async (step) => {
diff --git a/apps/web/src/lib/server/domains/ai/__tests__/structured-chat.test.ts b/apps/web/src/lib/server/domains/ai/__tests__/structured-chat.test.ts
index 62e2500e1a..9286e0f6e0 100644
--- a/apps/web/src/lib/server/domains/ai/__tests__/structured-chat.test.ts
+++ b/apps/web/src/lib/server/domains/ai/__tests__/structured-chat.test.ts
@@ -263,3 +263,22 @@ describe('isResponseFormatRejection', () => {
     expect(isResponseFormatRejection('response_format')).toBe(false)
   })
 })
+
+describe('structuredChat with a signal', () => {
+  it('hands the model call an abort controller that follows the signal', async () => {
+    hoisted.chat.mockResolvedValueOnce({ sentiment: 'positive', confidence: 0.9 })
+    const stop = new AbortController()
+    await structuredChat({ ...base, signal: stop.signal })
+    const controller = hoisted.chat.mock.calls[0][0].abortController as AbortController
+    expect(controller).toBeInstanceOf(AbortController)
+    expect(controller.signal.aborted).toBe(false)
+    stop.abort()
+    expect(controller.signal.aborted).toBe(true)
+  })
+
+  it('sends no abort controller without a signal', async () => {
+    hoisted.chat.mockResolvedValueOnce({ sentiment: 'positive', confidence: 0.9 })
+    await structuredChat(base)
+    expect(hoisted.chat.mock.calls[0][0].abortController).toBeUndefined()
+  })
+})
diff --git a/apps/web/src/lib/server/domains/ai/structured-chat.ts b/apps/web/src/lib/server/domains/ai/structured-chat.ts
index b8217e4aef..a18cc7ac92 100644
--- a/apps/web/src/lib/server/domains/ai/structured-chat.ts
+++ b/apps/web/src/lib/server/domains/ai/structured-chat.ts
@@ -98,17 +98,29 @@ export interface StructuredChatInput<S extends z.ZodType> {
   schema: S
   maxTokens: number
   middleware?: ChatMiddleware[]
+  /** Ends the model call when the caller has gone, such as a request stopped in the builder. */
+  signal?: AbortSignal
+}
+
+/** An abort controller that aborts with the signal, as the chat call takes one. */
+function followed(signal: AbortSignal): AbortController {
+  const controller = new AbortController()
+  if (signal.aborted) controller.abort(signal.reason)
+  else signal.addEventListener('abort', () => controller.abort(signal.reason), { once: true })
+  return controller
 }
 
 export async function structuredChat<S extends z.ZodType>(
   input: StructuredChatInput<S>
 ): Promise<z.infer<S>> {
   const adapter = createChatAdapter(input.model)
+  const abort = input.signal ? { abortController: followed(input.signal) } : {}
   if (getAiProvider() === 'anthropic') {
     return (await chat({
       adapter,
       messages: input.messages,
       stream: false,
+      ...abort,
       systemPrompts: input.systemPrompts,
       outputSchema: input.schema,
       modelOptions: { max_tokens: input.maxTokens },
@@ -121,6 +133,7 @@ export async function structuredChat<S extends z.ZodType>(
     adapter,
     messages: input.messages,
     stream: false as const,
+    ...abort,
     ...(input.middleware ? { middleware: input.middleware } : {}),
   }
 
diff --git a/apps/web/src/lib/server/domains/design/ai/__tests__/brand-match.test.ts b/apps/web/src/lib/server/domains/design/ai/__tests__/brand-match.test.ts
index 28071c5bb5..dbdf01c5db 100644
--- a/apps/web/src/lib/server/domains/design/ai/__tests__/brand-match.test.ts
+++ b/apps/web/src/lib/server/domains/design/ai/__tests__/brand-match.test.ts
@@ -358,7 +358,8 @@ describe('brandMatch', () => {
     expect(result.logo).toMatchObject({ image: 0, full: true })
     expect(result.logo!.box.x).toBeGreaterThan(0.02)
     expect(result.reply).toMatch(/blue/)
-    expect(result.notes.at(-1)).toMatch(/Your screenshots do not show hover effects/)
+    // No note every match would say alike.
+    expect(result.notes.join(' ')).not.toMatch(/Your screenshots do not show/)
     expect(result.target?.measured?.fields.typeScale).toBe('display')
     // For the check: what was measured as a fingerprint, and every field set, unchanged ones too.
     expect(result.target?.fingerprint.headline?.size).toBeCloseTo(48, -1)
diff --git a/apps/web/src/lib/server/domains/design/ai/__tests__/brand-photo.test.ts b/apps/web/src/lib/server/domains/design/ai/__tests__/brand-photo.test.ts
index 4315ea3bb8..642e85f37f 100644
--- a/apps/web/src/lib/server/domains/design/ai/__tests__/brand-photo.test.ts
+++ b/apps/web/src/lib/server/domains/design/ai/__tests__/brand-photo.test.ts
@@ -257,7 +257,9 @@ describe('a brand match on a site that leads with a photo', { timeout: 60_000 },
     expect(result.design.layout.imagePoint).toBeDefined()
     // The words reach 4.5:1 on the veiled photo: no readability problem left.
     expect(result.readability).toEqual([])
-    expect(result.reply).toMatch(/cut from your screenshot: replace it with the original/)
+    expect(result.notes).toContainEqual(
+      expect.stringMatching(/cut from your screenshot: replace it with the original/)
+    )
     expect(result.chips[0]).toBe(MATCH_BRAND.addHeroPhoto)
   })
 
diff --git a/apps/web/src/lib/server/domains/design/ai/__tests__/brand-reply.test.ts b/apps/web/src/lib/server/domains/design/ai/__tests__/brand-reply.test.ts
index d17e6e2e77..577d737ab9 100644
--- a/apps/web/src/lib/server/domains/design/ai/__tests__/brand-reply.test.ts
+++ b/apps/web/src/lib/server/domains/design/ai/__tests__/brand-reply.test.ts
@@ -137,11 +137,25 @@ describe('the reply about colour', () => {
 })
 
 describe('what the reply says was left as is', () => {
-  it('does not say the other pages’ titles were left, now that they follow Home’s hero', () => {
-    const notes = reply(roles({})).notes
-    const left = notes.find((note) => note.startsWith('Your screenshots do not show'))
-    expect(left).toBeDefined()
-    expect(left).not.toMatch(/titles/)
+  it('adds no note that every match would say alike', () => {
+    expect(reply(roles({})).notes).toEqual([])
+  })
+
+  it('keeps the reply to one sentence, and the photo to replace under Show changes', () => {
+    const said = brandReply({
+      shots: 1,
+      roles: null,
+      heading: null,
+      band: 'none',
+      failed: [],
+      logo: 'placed',
+      faceClose: null,
+      photo: 'placed',
+    })
+    expect(said.reply).toBe('I matched your brand from your screenshot: a plain hero.')
+    expect(said.notes).toEqual([
+      'The hero photo is cut from your screenshot: replace it with the original for best quality.',
+    ])
   })
 })
 
diff --git a/apps/web/src/lib/server/domains/design/ai/__tests__/design-agent.test.ts b/apps/web/src/lib/server/domains/design/ai/__tests__/design-agent.test.ts
index e3cb0cb1f9..429d5a8f55 100644
--- a/apps/web/src/lib/server/domains/design/ai/__tests__/design-agent.test.ts
+++ b/apps/web/src/lib/server/domains/design/ai/__tests__/design-agent.test.ts
@@ -191,3 +191,142 @@ describe('one step', () => {
     expect(await step(hover)).toMatchObject({ ok: false, code: 'AI_FAILED' })
   })
 })
+
+describe('a step keeps to what was picked and how far the chip says it reaches', () => {
+  const hoverDarker = {
+    plan: 'Darken the main button on hover',
+    ops: [],
+    styles: [
+      {
+        element: 'button',
+        state: 'hover',
+        block: '',
+        property: 'background',
+        value: 'darker',
+        says: '',
+      },
+    ],
+    checks: [],
+    read: [],
+    look: false,
+    read_website: '',
+    match_website: '',
+    done: true,
+    reply: 'The main button is darker on hover.',
+  }
+  const calmer = {
+    ...hoverDarker,
+    plan: 'Calm the hero',
+    ops: [{ op: 'set', target: 'hero', key: 'look', value: 'tint', says: 'the hero to a tint' }],
+    styles: [],
+    reply: 'The hero is calmer.',
+  }
+  const overrides = (design: { overrides?: unknown }) =>
+    (design.overrides ?? []) as Array<{
+      target: { scope: string; part?: string; page?: string }
+      style?: { hover?: { background?: unknown } }
+    }>
+
+  for (const message of [
+    'Make the main button darker when hovered',
+    // Read by no English pattern: the chip's reach holds it all the same.
+    'Mach den Hauptbutton dunkler, wenn man darüber fährt',
+  ])
+    it(`with the hero picked, “${message}” changes the hero’s buttons, never every main button`, async () => {
+      const reply = await step(hoverDarker, {
+        message,
+        scope: 'band',
+        within: 'every',
+        page: 'home',
+      })
+      if (!reply.ok) throw new Error(reply.message)
+      // No site-wide style: the main buttons elsewhere are as they were.
+      expect(reply.design.style?.button?.hover).toBeUndefined()
+      expect(reply.design.tune).toEqual(fixtureDesign().tune)
+      // The hero's own button holds it, as an override on that part.
+      const cta = overrides(reply.design).find((o) => o.target.part === 'hero.home.cta')
+      expect(cta?.style?.hover?.background).toMatch(/^#[0-9a-f]{6}$/)
+      expect(
+        overrides(reply.design).every(
+          (o) => o.target.scope === 'part' && /^(hero|title)\./.test(o.target.part ?? '')
+        )
+      ).toBe(true)
+    })
+
+  it('with the hero picked for this page only, a hover style lands on this page’s hero alone', async () => {
+    const reply = await step(hoverDarker, {
+      message: 'Make the main button darker when hovered',
+      scope: 'band',
+      within: 'page',
+      page: 'home',
+    })
+    if (!reply.ok) throw new Error(reply.message)
+    expect(reply.design.style?.button?.hover).toBeUndefined()
+    const parts = overrides(reply.design).map((o) => o.target.part)
+    expect(parts).toEqual(['hero.home.cta'])
+  })
+
+  it('with the hero’s call to action picked, keeps a hover style to the reach the chip says', async () => {
+    const element = { element: 'button' as const, part: 'hero.home.cta' }
+    const one = await step(hoverDarker, {
+      scope: 'band',
+      element,
+      within: 'one',
+      page: 'home',
+    })
+    if (!one.ok) throw new Error(one.message)
+    expect(one.design.style?.button?.hover).toBeUndefined()
+    expect(overrides(one.design).map((o) => o.target.part)).toEqual(['hero.home.cta'])
+    const page = await step(hoverDarker, { scope: 'band', element, within: 'page', page: 'home' })
+    if (!page.ok) throw new Error(page.message)
+    expect(page.design.style?.button?.hover).toBeUndefined()
+    expect(overrides(page.design).map((o) => o.target)).toEqual([
+      { scope: 'page', page: 'home', element: 'button' },
+    ])
+    // Every main button: the panel's own default for an element, said on the chip.
+    const every = await step(hoverDarker, { scope: 'band', element, within: 'every', page: 'home' })
+    if (!every.ok) throw new Error(every.message)
+    expect(every.design.style?.button?.hover?.background).toMatch(/^#[0-9a-f]{6}$/)
+  })
+
+  for (const message of ['Make this calmer', 'Mach das ruhiger'])
+    it(`with the hero picked for this page only, “${message}” changes no other page`, async () => {
+      const before = fixtureDesign()
+      const reply = await step(calmer, { message, scope: 'band', within: 'page', page: 'home' })
+      if (!reply.ok) throw new Error(reply.message)
+      // The hero's look is one for every page, so it is left, and said so.
+      expect(reply.design.layout).toEqual(before.layout)
+      expect(reply.outcome.applied).toEqual([])
+      expect(reply.outcome.outOfScope.length).toBeGreaterThan(0)
+    })
+
+  it('with the hero picked for every page, the same request changes the hero everywhere', async () => {
+    const reply = await step(calmer, {
+      message: 'Make this calmer',
+      scope: 'band',
+      within: 'every',
+      page: 'home',
+    })
+    if (!reply.ok) throw new Error(reply.message)
+    expect(reply.design.layout.band).toBe('tint')
+  })
+
+  it('reports a style outside the pick as left alone, never drops it silently', async () => {
+    const reply = await step(
+      {
+        ...hoverDarker,
+        styles: [{ ...hoverDarker.styles[0]!, element: 'card', property: 'shadow', value: 'soft' }],
+      },
+      { message: 'Add a shadow to the cards', scope: 'band', within: 'every', page: 'home' }
+    )
+    if (!reply.ok) throw new Error(reply.message)
+    expect(reply.design.style?.card).toBeUndefined()
+    expect(reply.outcome.outOfScope).toEqual(['Cards on hover'])
+  })
+
+  it('tells the model how far it may reach', async () => {
+    await step(calmer, { message: 'Make this calmer', scope: 'band', within: 'page', page: 'home' })
+    const system = model.calls[0]!.systemPrompts.join('\n')
+    expect(system).toContain('only on the Home page')
+  })
+})
diff --git a/apps/web/src/lib/server/domains/design/ai/__tests__/design-ai.test.ts b/apps/web/src/lib/server/domains/design/ai/__tests__/design-ai.test.ts
index de1efd744e..da6ed2c915 100644
--- a/apps/web/src/lib/server/domains/design/ai/__tests__/design-ai.test.ts
+++ b/apps/web/src/lib/server/domains/design/ai/__tests__/design-ai.test.ts
@@ -179,7 +179,9 @@ describe('askDesignAi', () => {
     })
     if (!result.ok) throw new Error('expected a result')
     expect(result.design.pages.feedback.headline?.title).toEqual({ de: 'Hilf uns' })
-    expect(result.reply).toBe('Done. The words are in German, the language shown.')
+    // One sentence; the language is said under Show changes.
+    expect(result.reply).toBe('Done.')
+    expect(result.notes).toEqual(['The words are in German, the language shown.'])
     expect(model.calls[0]!.systemPrompts[1]).toContain(
       'The person is looking at the Feedback page. The page is shown in German: write any words they ask for in German.'
     )
@@ -201,11 +203,11 @@ describe('askDesignAi', () => {
       history: [],
       allows: ALLOWS,
     })
-    // What was left alone is named with why, so the reply never overclaims.
+    // What was left alone is named with why, under Show changes, so the reply never overclaims.
     expect(result).toMatchObject({
       ok: true,
-      reply:
-        'I changed the brand colour to teal. I left the rest: cards can be bordered, raised, list or filled.',
+      reply: 'I changed the brand colour to teal.',
+      notes: ['I left the rest: cards can be bordered, raised, list or filled.'],
       skipped: 1,
     })
     expect(result.ok && result.applied.map((change) => [change.path, change.label])).toEqual([
@@ -338,9 +340,12 @@ describe('askDesignAi', () => {
       undefined,
       { en: 'Talk to us' },
     ])
-    expect(result.reply).toBe(
-      'I changed the contact heading. Part of that is outside the Contact block on Home and was left alone.'
-    )
+    expect(result.reply).toBe('I changed the contact heading.')
+    expect(result.notes).toEqual([
+      'Part of that is outside the Contact block on Home and was left alone.',
+    ])
+    // The request is about the block picked: no offer to ask about the whole site.
+    expect(result.outOfScope).toBe(false)
     expect(model.calls.at(-1)!.systemPrompts[1]).toContain(
       'The person picked Contact (contactbbb); "this" and "it" mean it.'
     )
@@ -1001,3 +1006,69 @@ describe('a logo or a screenshot', () => {
     expect(model.calls.filter(first)).toHaveLength(2)
   })
 })
+
+describe('a request keeps as near as the chip says it reaches', () => {
+  const calmer = {
+    reply: 'The hero is calmer now. I softened its colour.',
+    outOfScope: false,
+    ops: [op({ op: 'set', target: 'hero', key: 'look', value: 'tint' }, 'the hero to a tint')],
+  }
+  const ask = (message: string, within: 'page' | 'every') => {
+    const design = defaultDesign()
+    design.nav.home.on = true
+    design.layout.band = 'brand'
+    return askDesignAi({
+      message,
+      design,
+      scope: 'band',
+      within,
+      page: 'home',
+      history: [],
+      allows: ALLOWS,
+    })
+  }
+
+  for (const message of ['Make this calmer', 'Mach das ruhiger'])
+    it(`with the hero picked for this page only, “${message}” changes no other page`, async () => {
+      model.answer = calmer
+      const result = await ask(message, 'page')
+      if (!result.ok) throw new Error('expected an answer')
+      expect(result.applied).toEqual([])
+      expect(result.design.layout.band).toBe('brand')
+      expect(result.reply).toBe('That reaches beyond this page, so nothing changed.')
+      // About the hero itself: no offer to ask about the whole site.
+      expect(result.outOfScope).toBe(false)
+    })
+
+  it('with the hero picked for every page, says in one sentence that it changed every page', async () => {
+    model.answer = calmer
+    const result = await ask('Make this calmer', 'every')
+    if (!result.ok) throw new Error('expected an answer')
+    expect(result.design.layout.band).toBe('tint')
+    expect(result.reply).toBe('The hero is calmer now, on every page.')
+  })
+
+  it('says what else a shared field changes under Show changes', async () => {
+    model.answer = {
+      reply: 'Rounder corners.',
+      outOfScope: false,
+      ops: [op({ op: 'theme', key: 'corners', value: 'pill' }, 'the corners')],
+    }
+    const result = await askDesignAi({
+      message: 'Rounder',
+      design: defaultDesign(),
+      scope: 'card',
+      page: 'feedback',
+      history: [],
+      allows: ALLOWS,
+    })
+    if (!result.ok) throw new Error('expected an answer')
+    expect(result.notes).toContain('Also changes the corners of cards, fields and buttons.')
+  })
+
+  it('tells the model how far it may reach', async () => {
+    model.answer = calmer
+    await ask('Make this calmer', 'page')
+    expect(model.calls[0]!.systemPrompts[1]).toContain('Change it only on the Home page')
+  })
+})
diff --git a/apps/web/src/lib/server/domains/design/ai/brand-reply.ts b/apps/web/src/lib/server/domains/design/ai/brand-reply.ts
index d4275598de..4fc07e9293 100644
--- a/apps/web/src/lib/server/domains/design/ai/brand-reply.ts
+++ b/apps/web/src/lib/server/domains/design/ai/brand-reply.ts
@@ -1,7 +1,8 @@
 /**
- * What a brand match says: a line on what was matched, the questions the
- * screenshots could not settle (thin evidence, a conflict) asked quietly,
- * what was left as is because it was not visible or a stage failed, and
+ * What a brand match says: one sentence on what was matched, the questions
+ * the screenshots could not settle (thin evidence, a conflict) asked
+ * quietly, notes that are specific to this match (a stage that failed, a
+ * font or logo it could not use, a photo to replace) for Show changes, and
  * follow-ups the person can send next, each of which fills the request box.
  */
 import { parseOklch } from '@/lib/shared/theme/expand'
@@ -46,9 +47,6 @@ export function pageBackgroundWords(decided: PageFillDecision): string {
   return `a soft ${way} gradient behind the page, as your site has`
 }
 
-/** Not visible in screenshots, so never guessed: left at the house defaults. */
-export const NOT_VISIBLE = 'hover effects or status labels'
-
 export interface BrandReplyInput {
   shots: number
   roles: ColourRoles | null
@@ -104,10 +102,8 @@ export function brandReply(input: BrandReplyInput): BrandReply {
   const matched = parts.length
     ? `I matched your brand from ${from}: ${parts.join(', ')}.`
     : `I matched what I could from ${from}.`
-  const reply =
-    input.photo === 'placed'
-      ? `${matched} The hero photo is cut from ${from}: replace it with the original for best quality.`
-      : matched
+  // One sentence: what was matched. Anything else is a row under Show changes.
+  const reply = matched
   const ask = roles?.ask
   const asks = !ask
     ? []
@@ -117,6 +113,9 @@ export function brandReply(input: BrandReplyInput): BrandReply {
         ]
       : [ask.message]
   const notes = [
+    input.photo === 'placed'
+      ? `The hero photo is cut from ${from}: replace it with the original for best quality.`
+      : '',
     ...input.failed,
     input.faceClose === false
       ? 'Your headline font is not one we have, so I used the closest match. You can upload yours in Theme > Brand kit > Fonts.'
@@ -126,7 +125,6 @@ export function brandReply(input: BrandReplyInput): BrandReply {
     input.photo === 'offered'
       ? `Your site leads with a photo${input.photoWhy ? `, but ${input.photoWhy.replace(/^the photo /, 'it ')}` : ''}. Add one to the hero for the same feel.`
       : '',
-    `Your screenshots do not show ${NOT_VISIBLE}, so those are as they were.`,
   ].filter(Boolean)
   const chips = followUps(roles, input.band)
   // A photo-led site is offered a hero photo first, whether or not one was cut.
diff --git a/apps/web/src/lib/server/domains/design/ai/design-agent.ts b/apps/web/src/lib/server/domains/design/ai/design-agent.ts
index 32a5b637d2..ff6fa4fa65 100644
--- a/apps/web/src/lib/server/domains/design/ai/design-agent.ts
+++ b/apps/web/src/lib/server/domains/design/ai/design-agent.ts
@@ -38,6 +38,7 @@ import {
 import { BLOCK_NAMES } from '@/lib/shared/design/outline'
 import { scopeNote as requestScopeNote, scopeOf } from '@/lib/shared/design/agent/router'
 import type { StyleElement } from '@/lib/shared/design/style-tokens'
+import { reachNote, type AiReach } from '@/lib/shared/design/ai-reach'
 
 const log = logger.child({ module: 'design-agent' })
 
@@ -114,6 +115,8 @@ export interface AgentStepInput {
   blockId?: string
   /** An element picked on the canvas: its kind and the part it is, which "just this" names. */
   element?: { element: StyleElement; part: string | null }
+  /** How far the request may reach from the pick, as the composer's chip says; every place the pick is when not given. */
+  within?: AiReach
   history: Array<{ role: 'user' | 'assistant'; content: string }>
   images?: Array<{ palette: string[]; image?: string }>
   allows: Omit<UntrustedChanges, 'links'> & {
@@ -126,6 +129,8 @@ export interface AgentStepInput {
   request: StepRequest
   maxSteps: number
   registry?: StyleRegistry
+  /** The builder's Stop: the model call ends with it. */
+  signal?: AbortSignal
 }
 
 /** One step of the loop: the model's calls, applied. */
@@ -146,12 +151,17 @@ export async function agentStep(input: AgentStepInput): Promise<StepReply> {
     scope: input.scope,
     ...(block ? { blockId: input.blockId } : {}),
     ...(input.element ? { element: input.element } : {}),
+    ...(input.scope !== 'site' && input.within ? { reach: input.within } : {}),
+    ...(input.page ? { page: input.page } : {}),
   }
+  // The request's own words are a hint for the model; the chip's reach is what holds.
   const reads = requestScopeNote(input.message)
+  const reach =
+    input.scope === 'site' ? '' : reachNote(input.within, input.page, input.element?.part)
   const scopeNote =
     input.scope === 'site'
       ? ''
-      : `\nThe person picked the ${block ? `${BLOCK_NAMES[block.type]} block on Home` : SCOPE_NAMES[input.scope as keyof typeof SCOPE_NAMES]} in the preview${input.element ? '' : ': every one of them, not one in particular'}. Change only ${input.element ? 'it' : 'them'}.`
+      : `\nThe person picked the ${block ? `${BLOCK_NAMES[block.type]} block on Home` : SCOPE_NAMES[input.scope as keyof typeof SCOPE_NAMES]} in the preview${input.element ? '' : ': every one of them, not one in particular'}. Change only ${input.element ? 'it' : 'them'}.${reach ? ` ${reach}` : ''} match_website is not offered: it restyles the whole site; use read_website to borrow from a site.`
   const view = viewNote(input.page, input.locale)
   const attached = (input.images ?? []).filter((each) => each.palette.length > 0)
   const colours = attached.length
@@ -200,6 +210,7 @@ export async function agentStep(input: AgentStepInput): Promise<StepReply> {
       schema: agentStepSchema(registry),
       maxTokens: 3000,
       middleware: designUsage(model, 'edit'),
+      ...(input.signal ? { signal: input.signal } : {}),
     })
   let answer: AgentStepAnswer
   try {
@@ -253,16 +264,18 @@ export async function agentStep(input: AgentStepInput): Promise<StepReply> {
   )
   const { design, ...outcome } = out
   const words = input.locale && input.locale !== 'en' && answer.ops.some((op) => op.op === 'words')
+  // match_website restyles the whole site: never for a request about one part.
+  const scoped =
+    input.scope !== 'site' && answer.match_website ? { ...answer, match_website: '' } : answer
   return {
     ok: true,
-    answer: words
+    answer: scoped,
+    outcome: words
       ? {
-          ...answer,
-          reply:
-            `${answer.reply} The words are in ${languageName(input.locale!)}, the language shown.`.trim(),
+          ...outcome,
+          notes: [`The words are in ${languageName(input.locale!)}, the language shown.`],
         }
-      : answer,
-    outcome,
+      : outcome,
     design,
   }
 }
diff --git a/apps/web/src/lib/server/domains/design/ai/design-ai.ts b/apps/web/src/lib/server/domains/design/ai/design-ai.ts
index 4ddb92b2ea..2959e42611 100644
--- a/apps/web/src/lib/server/domains/design/ai/design-ai.ts
+++ b/apps/web/src/lib/server/domains/design/ai/design-ai.ts
@@ -23,6 +23,14 @@ import type { PortalPageGates } from '@/lib/shared/design/paths'
 import { designContext } from '@/lib/shared/design/design-context'
 import { scopeNote as requestScopeNote, scopeOf } from '@/lib/shared/design/agent/router'
 import type { StyleElement } from '@/lib/shared/design/style-tokens'
+import {
+  alsoNotes,
+  oneSentence,
+  reachClause,
+  reachNote,
+  withReach,
+  type AiReach,
+} from '@/lib/shared/design/ai-reach'
 import {
   applyOps,
   OP_KINDS,
@@ -170,27 +178,39 @@ export const SCOPE_NAMES: Record<Exclude<DesignAiScope, 'site'>, string> = {
 const opKey = (op: FlatOp) => JSON.stringify([op.op, op.target ?? '', op.key ?? '', op.value ?? ''])
 
 /**
- * The reply, said only of what happened. The model writes its reply before
- * its operations are checked, so when any did not apply the reply is built
- * from the ones that did, by their labels, and when none did the server says
- * why: a reply never claims a change the draft does not have.
+ * The reply, said only of what happened, in one sentence. The model writes
+ * its reply before its operations are checked, so when any did not apply
+ * the reply is built from the ones that did, by their labels, and when none
+ * did the server says why: a reply never claims a change the draft does not
+ * have. What was left alone, and why, is said under Show changes.
  */
 function honestReply(
   answer: OpsAnswer,
   result: OpsOutcome,
   outOfScope: boolean,
   /** What was picked, such as "the hero". */
-  where: string
-): string {
+  where: string,
+  /** How far the request could reach, when narrower than everywhere the pick is. */
+  reach: AiReach | undefined
+): { reply: string; notes: string[] } {
   const { done, refused, already } = result
   const why = plainReasons(refused.map((each) => each.reason))
-  if (done.length === 0 && outOfScope) return `That is outside ${where}, so nothing changed.`
+  const narrowed = reach === 'page' ? 'this page' : reach === 'one' ? 'this one' : null
+  const leftOut = result.outOfScope.length > 0
+  if (done.length === 0 && (outOfScope || (leftOut && !narrowed)))
+    return { reply: `That is outside ${where}, so nothing changed.`, notes: [] }
+  if (done.length === 0 && leftOut)
+    return { reply: `That reaches beyond ${narrowed}, so nothing changed.`, notes: [] }
   if (done.length === 0 && refused.length > 0)
-    return why ? `Nothing changed: ${why}.` : 'Nothing changed: I could not do that here.'
-  if (done.length === 0 && already.length > 0) return 'Nothing changed: it is already like that.'
+    return {
+      reply: why ? `Nothing changed: ${why}.` : 'Nothing changed: I could not do that here.',
+      notes: [],
+    }
+  if (done.length === 0 && already.length > 0)
+    return { reply: 'Nothing changed: it is already like that.', notes: [] }
   const applied = new Set(done.map((each) => opKey(each.op)))
   const said = answer.ops.every((each) => applied.has(opKey(each)))
-    ? answer.reply
+    ? oneSentence(answer.reply)
     : `I changed ${done
         .map((each) => {
           const own = answer.ops.find((op) => opKey(op) === opKey(each.op))?.says?.trim()
@@ -198,9 +218,19 @@ function honestReply(
           return `${words.charAt(0).toLowerCase()}${words.slice(1)}`
         })
         .join(', ')}.`
-  const reply = outOfScope ? `${said} Part of that is outside ${where} and was left alone.` : said
-  if (refused.length === 0) return reply
-  return why ? `${reply} I left the rest: ${why}.` : `${reply} I could not do the rest here.`
+  const notes = [
+    ...(leftOut
+      ? [
+          narrowed
+            ? `Part of that reaches beyond ${narrowed} and was left alone.`
+            : `Part of that is outside ${where} and was left alone.`,
+        ]
+      : []),
+    ...(refused.length === 0
+      ? []
+      : [why ? `I left the rest: ${why}.` : 'I could not do the rest here.']),
+  ]
+  return { reply: said, notes }
 }
 
 function newAdjustments(before: PortalDesign, after: PortalDesign): string[] {
@@ -217,8 +247,10 @@ export type DesignAiResult =
       design: PortalDesign
       applied: AppliedDesignChange[]
       skipped: number
-      /** The request reached outside the section picked; asking about the whole site may do it. */
+      /** The request names something outside the part picked; asking about the whole site may do it. */
       outOfScope: boolean
+      /** What was left alone and why, and what else a change reaches, for Show changes. */
+      notes?: string[]
       /** What the solver now adjusts to keep text readable that it did not before. */
       readability: string[]
     }
@@ -233,6 +265,8 @@ export async function askDesignAi(input: {
   blockId?: string
   /** An element picked on the canvas: its kind and the part it is, which "just this" names. */
   element?: { element: StyleElement; part: string | null }
+  /** How far the request may reach from the pick, as the composer's chip says; every place the pick is when not given. */
+  within?: AiReach
   history: Array<{ role: 'user' | 'assistant'; content: string }>
   /** The images the person attached: each one's main colours, and the picture itself (a JPEG data URL) for a model that reads images. */
   images?: Array<{ palette: string[]; image?: string }>
@@ -245,6 +279,8 @@ export async function askDesignAi(input: {
   places?: AiPlaces
   /** The pages the portal has; every one when not given. */
   gates?: PortalPageGates
+  /** The builder's Stop: the model call ends with it. */
+  signal?: AbortSignal
 }): Promise<DesignAiResult> {
   const model = designAiModel()
   if (!model) {
@@ -259,17 +295,22 @@ export async function askDesignAi(input: {
   const places = input.places ?? NO_PLACES
   const gates = input.gates ?? EVERY_PAGE
   const block = input.scope === 'home' ? pickedBlock(input.design, input.blockId) : null
+  const reachTo = input.scope === 'site' ? undefined : input.within
   const within = {
     scope: input.scope,
     ...(block ? { blockId: input.blockId } : {}),
     ...(input.element ? { element: input.element } : {}),
+    ...(reachTo ? { reach: reachTo } : {}),
+    ...(input.page ? { page: input.page } : {}),
   }
   const picked = block ?? SCOPE_NAMES[input.scope as 'home']
+  const reach = reachNote(reachTo, input.page, input.element?.part)
   const scopeNote =
     input.scope === 'site'
       ? ''
-      : `\nThe person picked the ${picked} in the preview. Change only it. If the request is about anything else, make no operations for that part and set outOfScope to true.`
+      : `\nThe person picked the ${picked} in the preview. Change only it.${reach ? ` ${reach}` : ''} If the request is about anything else, make no operations for that part and set outOfScope to true.`
   const view = viewNote(input.page, input.locale)
+  // The request's own words are a hint for the model; the chip's reach is what holds.
   const reads = requestScopeNote(input.message)
   const attached = (input.images ?? []).filter((attachment) => attachment.palette.length > 0)
   const text =
@@ -327,6 +368,7 @@ export async function askDesignAi(input: {
       // A change to match a picture can take many operations.
       maxTokens: 4000,
       middleware: designUsage(model, 'edit'),
+      ...(input.signal ? { signal: input.signal } : {}),
     })
   try {
     // An answer that does not fit is asked for once more, then without the
@@ -363,22 +405,36 @@ export async function askDesignAi(input: {
       })),
       within
     )
-    const outOfScope = input.scope !== 'site' && (answer.outOfScope || result.outOfScope.length > 0)
+    // Asking about the whole site is offered only when the request names something
+    // outside the pick: all of it went elsewhere, or the model read it so and part of
+    // it was left out. A request about the pick itself never offers it.
+    const leftOut = result.outOfScope.length > 0
+    const nothing = result.done.length === 0
+    const outOfScope =
+      input.scope !== 'site' &&
+      (answer.outOfScope
+        ? leftOut || nothing
+        : leftOut && nothing && (!reachTo || reachTo === 'every'))
+    const said = honestReply(
+      answer,
+      result,
+      outOfScope,
+      input.scope === 'site' ? 'the section picked' : `the ${picked}`,
+      reachTo
+    )
+    const clause = reachClause(result.design, result.applied, {
+      scope: input.scope,
+      ...(input.page ? { page: input.page } : {}),
+    })
+    const words = wordsNote(result, input.locale)
     return {
       ok: true,
-      reply:
-        plainWords(
-          honestReply(
-            answer,
-            result,
-            outOfScope,
-            input.scope === 'site' ? 'the section picked' : `the ${picked}`
-          )
-        ) + wordsNote(result, input.locale),
+      reply: plainWords(result.done.length ? withReach(said.reply, clause) : said.reply),
       design: result.design,
       applied: result.applied,
       skipped: result.refused.length + result.outOfScope.length,
       outOfScope,
+      notes: [...said.notes, ...alsoNotes(result.applied, input.scope), ...(words ? [words] : [])],
       readability: newAdjustments(input.design, result.design),
     }
   } catch (err) {
@@ -408,7 +464,7 @@ function wordsNote(result: OpsOutcome, locale: string | undefined): string {
   const wrote = result.done.some(
     ({ op }) => op.op === 'words' || (op.op === 'set' && ['heading', 'body'].includes(op.key ?? ''))
   )
-  return wrote ? ` The words are in ${languageName(locale)}, the language shown.` : ''
+  return wrote ? `The words are in ${languageName(locale)}, the language shown.` : ''
 }
 
 export { designDirections, type DesignLook, type DirectionsResult } from './design-directions'
diff --git a/apps/web/src/lib/server/functions/__tests__/portal-design-ai-stop.test.ts b/apps/web/src/lib/server/functions/__tests__/portal-design-ai-stop.test.ts
new file mode 100644
index 0000000000..440e924158
--- /dev/null
+++ b/apps/web/src/lib/server/functions/__tests__/portal-design-ai-stop.test.ts
@@ -0,0 +1,118 @@
+/**
+ * The builder's Stop ends an Ask AI request on the server: the request's
+ * signal reaches the model call, and a request stopped while the model
+ * answered saves nothing to the draft.
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const state = vi.hoisted(() => ({
+  controller: new AbortController(),
+  ask: vi.fn(),
+  step: vi.fn(),
+  save: vi.fn(),
+}))
+vi.mock('@tanstack/react-start', () => ({
+  createServerFn: () => {
+    let schema: { parse: (value: unknown) => unknown }
+    const builder = {
+      validator(value: typeof schema) {
+        schema = value
+        return builder
+      },
+      handler(fn: (args: { data: unknown }) => unknown) {
+        return async (args: { data: unknown }) => fn({ data: schema.parse(args.data) })
+      },
+    }
+    return builder
+  },
+}))
+vi.mock('@tanstack/react-start/server', () => ({
+  getRequest: () => ({ signal: state.controller.signal }),
+}))
+vi.mock('../auth-helpers', () => ({ requireAuth: async () => ({ principal: { id: 'p' } }) }))
+vi.mock('@/lib/server/domains/design/ai/design-ai', () => ({
+  askDesignAi: state.ask,
+  allowanceRefusal: async () => null,
+  designAiModel: () => 'model',
+}))
+vi.mock('@/lib/server/domains/design/ai/design-agent', () => ({ agentStep: state.step }))
+vi.mock('@/lib/server/domains/design/design.actions', () => ({
+  readDraftForChange: async () => ({ design: {}, revision: 'r1' }),
+  saveDesignDraft: state.save,
+}))
+vi.mock('@/lib/server/domains/design/design-author', () => ({ designAuthor: async () => ({}) }))
+vi.mock('@/lib/server/domains/design/design-allowances', () => ({
+  designAllowances: async () => ({ gates: {} }),
+}))
+vi.mock('@/lib/server/domains/design/designer-places', () => ({
+  listDesignerPlaces: async () => ({ boards: [], roadmaps: [], categories: [] }),
+}))
+vi.mock('@/lib/server/domains/design/site/website-reading', () => ({
+  storedSiteImages: async () => new Set(),
+}))
+
+const { askPortalDesignAiFn, designAgentStepFn } = await import('../portal-design-ai')
+
+const applied = [{ path: 'shape.corners', before: 'rounded', after: 'sharp' }]
+
+beforeEach(() => {
+  state.controller = new AbortController()
+  state.ask.mockReset()
+  state.step.mockReset()
+  state.save.mockReset()
+  state.save.mockResolvedValue({ ok: true, report: {}, revision: 'r2' })
+})
+
+describe('Stop on the server', () => {
+  it('hands the request’s signal to the model call and saves as usual when not stopped', async () => {
+    state.ask.mockResolvedValue({ ok: true, applied, design: {}, reply: 'Done.' })
+    const result = await askPortalDesignAiFn({
+      data: { message: 'Square corners', scope: 'site', history: [] },
+    })
+    expect(state.ask.mock.calls[0]![0].signal).toBe(state.controller.signal)
+    expect(state.save).toHaveBeenCalledOnce()
+    expect(result).toMatchObject({ ok: true, revision: 'r2' })
+  })
+
+  it('saves nothing when the request was stopped while the model answered', async () => {
+    state.ask.mockImplementation(async () => {
+      state.controller.abort()
+      return { ok: true, applied, design: {}, reply: 'Done.' }
+    })
+    const result = await askPortalDesignAiFn({
+      data: { message: 'Square corners', scope: 'site', history: [] },
+    })
+    expect(state.save).not.toHaveBeenCalled()
+    expect(result).toMatchObject({ ok: false, code: 'STOPPED' })
+  })
+
+  it('takes a model call cut off by Stop as stopped, not failed', async () => {
+    state.ask.mockImplementation(async () => {
+      state.controller.abort()
+      throw new DOMException('The operation was aborted.', 'AbortError')
+    })
+    const result = await askPortalDesignAiFn({
+      data: { message: 'Square corners', scope: 'site', history: [] },
+    })
+    expect(result).toMatchObject({ ok: false, code: 'STOPPED' })
+  })
+
+  it('saves no loop step stopped while the model answered', async () => {
+    state.step.mockImplementation(async (input: { signal: AbortSignal }) => {
+      expect(input.signal).toBe(state.controller.signal)
+      state.controller.abort()
+      return { ok: true, answer: {}, outcome: { applied }, design: {} }
+    })
+    const result = await designAgentStepFn({
+      data: {
+        message: 'Darker on hover',
+        scope: 'site',
+        history: [],
+        step: { step: 0, turns: [], readings: [], picture: null, last: false },
+        maxSteps: 4,
+      },
+    })
+    expect(state.save).not.toHaveBeenCalled()
+    expect(result).toMatchObject({ ok: false, code: 'STOPPED' })
+  })
+})
diff --git a/apps/web/src/lib/server/functions/__tests__/portal-design-ai.test.ts b/apps/web/src/lib/server/functions/__tests__/portal-design-ai.test.ts
index 267a48b120..44eb9b4e0f 100644
--- a/apps/web/src/lib/server/functions/__tests__/portal-design-ai.test.ts
+++ b/apps/web/src/lib/server/functions/__tests__/portal-design-ai.test.ts
@@ -36,6 +36,7 @@ vi.mock('@tanstack/react-start', () => ({
 }))
 vi.mock('@tanstack/react-start/server', () => ({
   getRequestHeaders: () => new Headers({ 'user-agent': 'vitest' }),
+  getRequest: () => ({ signal: new AbortController().signal }),
 }))
 const requireAuth = vi.fn()
 vi.mock('../auth-helpers', () => ({ requireAuth: (...args: unknown[]) => requireAuth(...args) }))
diff --git a/apps/web/src/lib/server/functions/portal-design-ai.ts b/apps/web/src/lib/server/functions/portal-design-ai.ts
index 1c0d102a65..27ac0c4779 100644
--- a/apps/web/src/lib/server/functions/portal-design-ai.ts
+++ b/apps/web/src/lib/server/functions/portal-design-ai.ts
@@ -4,9 +4,11 @@
  * step; nothing reaches visitors until a person publishes.
  */
 import { createServerFn } from '@tanstack/react-start'
+import { getRequest } from '@tanstack/react-start/server'
 import { z } from 'zod'
 import { PERMISSIONS } from '@/lib/shared/permissions'
 import { DESIGN_AI_SCOPES } from '@/lib/shared/design/apply-changes'
+import { AI_REACHES } from '@/lib/shared/design/ai-reach'
 import { BLOCK_ID } from '@/lib/shared/design/schema'
 import { STYLE_ELEMENT_NAMES, type StyleElement } from '@/lib/shared/design/style-tokens'
 import { PART_ID } from '@/lib/shared/design/style-overrides'
@@ -54,6 +56,8 @@ export const askPortalDesignAiFn = createServerFn({ method: 'POST' })
         blockId: z.string().regex(BLOCK_ID).optional(),
         /** An element picked on the canvas, which "just this" names. */
         element: elementPick.optional(),
+        /** How far the request may reach from the pick, as the composer's chip says: just it, the page shown, or everywhere it is. */
+        within: z.enum(AI_REACHES).optional(),
         history: z
           .array(z.object({ role: z.enum(['user', 'assistant']), content: z.string().max(2000) }))
           .max(12),
@@ -77,6 +81,8 @@ export const askPortalDesignAiFn = createServerFn({ method: 'POST' })
       designAllowances(),
       listDesignerPlaces(),
     ])
+    // The builder's Stop ends the request: the model call ends, and nothing is saved after it.
+    const signal = getRequest().signal
     // Boards, roadmaps and help topics by name, so a request can name them.
     const result = await askDesignAi({
       ...data,
@@ -84,8 +90,13 @@ export const askPortalDesignAiFn = createServerFn({ method: 'POST' })
       allows,
       gates: allows.gates,
       places,
+      signal,
+    }).catch((err: unknown) => {
+      if (signal.aborted) return STOPPED
+      throw err
     })
     if (!result.ok || result.applied.length === 0) return result
+    if (signal.aborted) return STOPPED
     const saved = await actions.saveDesignDraft(
       result.design,
       { ...(await designAuthor(auth)), via: 'ai' },
@@ -120,6 +131,8 @@ export const designAgentStepFn = createServerFn({ method: 'POST' })
         blockId: z.string().regex(BLOCK_ID).optional(),
         /** An element picked on the canvas, which "just this" names. */
         element: elementPick.optional(),
+        /** How far the request may reach from the pick, as the composer's chip says: just it, the page shown, or everywhere it is. */
+        within: z.enum(AI_REACHES).optional(),
         history: z
           .array(z.object({ role: z.enum(['user', 'assistant']), content: z.string().max(2000) }))
           .max(12),
@@ -177,6 +190,8 @@ export const designAgentStepFn = createServerFn({ method: 'POST' })
       storedSiteImages(),
     ])
     const { step, maxSteps, ...rest } = data
+    // The builder's Stop ends the step: the model call ends, and nothing is saved after it.
+    const signal = getRequest().signal
     const reply = await agentStep({
       ...rest,
       design: current.design,
@@ -185,10 +200,15 @@ export const designAgentStepFn = createServerFn({ method: 'POST' })
       places,
       request: step,
       maxSteps,
+      signal,
+    }).catch((err: unknown) => {
+      if (signal.aborted) return STOPPED
+      throw err
     })
     if (!reply.ok) return reply
     if (reply.outcome.applied.length === 0)
       return { ...reply, revision: current.revision, report: null }
+    if (signal.aborted) return STOPPED
     const saved = await actions.saveDesignDraft(
       reply.design,
       { ...(await designAuthor(auth)), via: 'ai' },
@@ -198,6 +218,9 @@ export const designAgentStepFn = createServerFn({ method: 'POST' })
     return { ...reply, report: saved.report, revision: saved.revision }
   })
 
+/** A request the builder stopped: nothing more is saved, and no one is waiting for the answer. */
+const STOPPED = { ok: false as const, code: 'STOPPED' as const, message: 'Stopped.' }
+
 /**
  * A save refused because the draft moved while the request was worked on,
  * such as by a change made meanwhile, said so a person can ask again.
diff --git a/apps/web/src/lib/shared/design/__tests__/ai-reach.test.ts b/apps/web/src/lib/shared/design/__tests__/ai-reach.test.ts
new file mode 100644
index 0000000000..52782c910b
--- /dev/null
+++ b/apps/web/src/lib/shared/design/__tests__/ai-reach.test.ts
@@ -0,0 +1,178 @@
+/**
+ * How far an Ask AI request may reach from what was picked: the choices the
+ * composer's chip offers (the panel's own default first), the pages a change
+ * lands on, and the short clause a reply ends with when its changes land
+ * beyond the page shown.
+ */
+import { describe, expect, it } from 'vitest'
+import { defaultDesign, portalDesign, type PortalDesign } from '../schema'
+import {
+  alsoNotes,
+  changePages,
+  fieldPage,
+  oneSentence,
+  reachChoices,
+  reachClause,
+  withReach,
+} from '../ai-reach'
+import type { AppliedDesignChange } from '../apply-changes'
+
+const GATES = {
+  feedback: true,
+  roadmap: true,
+  changelog: true,
+  help: true,
+  support: true,
+  status: true,
+}
+
+function design(): PortalDesign {
+  const d = defaultDesign()
+  d.nav.home.on = true
+  return portalDesign.parse(d)
+}
+
+const change = (path: string, before: unknown = null, after: unknown = 'x') =>
+  ({ path, before, after }) as AppliedDesignChange
+
+describe('the reach a pick offers', () => {
+  it('starts the hero at every page it is on, with this page as the narrower one', () => {
+    const choices = reachChoices(design(), { scope: 'band' }, 'home', GATES)
+    expect(choices.map((c) => c.reach)).toEqual(['every', 'page'])
+    // Home, Feedback, Roadmap, Changelog, Help Center and Support have a hero.
+    expect(choices[0]!.words).toBe('every page (6)')
+    expect(choices[1]!.words).toBe('this page')
+  })
+
+  it('counts only the pages the workspace has', () => {
+    const choices = reachChoices(design(), { scope: 'band' }, 'home', {
+      ...GATES,
+      roadmap: false,
+      changelog: false,
+    })
+    expect(choices[0]!.words).toBe('every page (4)')
+  })
+
+  it('starts a picked element shared, as its panel does, with this page and just this one', () => {
+    const choices = reachChoices(
+      design(),
+      { scope: 'band', element: { element: 'button', part: 'hero.home.cta' } },
+      'home',
+      GATES
+    )
+    expect(choices).toEqual([
+      { reach: 'every', words: 'every main button' },
+      { reach: 'page', words: 'this page' },
+      { reach: 'one', words: 'just this one' },
+    ])
+  })
+
+  it('keeps a Home block to itself', () => {
+    expect(reachChoices(design(), { scope: 'home', blockId: 'abc' }, 'home', GATES)).toEqual([
+      { reach: 'one', words: 'on Home' },
+    ])
+  })
+
+  it('offers nothing for the whole site or its styles', () => {
+    expect(reachChoices(design(), { scope: 'site' }, 'home', GATES)).toEqual([])
+    expect(reachChoices(design(), { scope: 'brand' }, 'home', GATES)).toEqual([])
+  })
+})
+
+describe('the pages a change lands on', () => {
+  it('reads a page’s own fields as that page', () => {
+    expect(fieldPage('pages.home.headline.title')).toBe('home')
+    expect(fieldPage('pages.titles.roadmap.title')).toBe('roadmap')
+    expect(fieldPage('layout.pageBackgrounds.help')).toBe('help')
+    expect(fieldPage('pages.home.blocks')).toBe('home')
+    expect(fieldPage('layout.band')).toBeNull()
+    expect(fieldPage('tune.button.radius')).toBeNull()
+  })
+
+  it('reads a shared field as every page', () => {
+    expect(changePages(design(), change('layout.band'))).toBe('every')
+  })
+
+  it('reads an override by its target', () => {
+    const d = design()
+    const page = changePages(
+      d,
+      change('overrides', null, [
+        {
+          id: 'part:hero.home.cta:button',
+          target: { scope: 'part', part: 'hero.home.cta', element: 'button' },
+        },
+      ])
+    )
+    expect(page).toEqual(new Set(['home']))
+    const onRoadmap = changePages(
+      d,
+      change('overrides', null, [
+        {
+          id: 'page:roadmap:button',
+          target: { scope: 'page', page: 'roadmap', element: 'button' },
+        },
+      ])
+    )
+    expect(onRoadmap).toEqual(new Set(['roadmap']))
+  })
+})
+
+describe('the reach clause', () => {
+  it('says “on every page” when a hero change lands beyond the page shown', () => {
+    expect(reachClause(design(), [change('layout.band')], { scope: 'band', page: 'home' })).toBe(
+      'on every page'
+    )
+  })
+
+  it('says nothing when the change stays on the page shown', () => {
+    expect(
+      reachClause(design(), [change('pages.home.headline.title')], { scope: 'band', page: 'home' })
+    ).toBe('')
+  })
+
+  it('says “on other pages too” for a change that lands on a page not shown', () => {
+    expect(
+      reachClause(design(), [change('pages.titles.roadmap.title')], {
+        scope: 'band',
+        page: 'home',
+      })
+    ).toBe('on other pages too')
+  })
+
+  it('says nothing for the whole site, its styles, or a part on every page anyway', () => {
+    const changes = [change('layout.band')]
+    expect(reachClause(design(), changes, { scope: 'site', page: 'home' })).toBe('')
+    expect(reachClause(design(), changes, { scope: 'brand', page: 'home' })).toBe('')
+    expect(
+      reachClause(design(), [change('layout.header')], { scope: 'header', page: 'home' })
+    ).toBe('')
+  })
+
+  it('ends a sentence with it', () => {
+    expect(withReach('The hero is calmer.', 'on every page')).toBe(
+      'The hero is calmer, on every page.'
+    )
+    expect(withReach('The hero is calmer!', '')).toBe('The hero is calmer!')
+  })
+})
+
+describe('what else a change reaches', () => {
+  it('names the other parts a shared field changes, for a pick narrower than the site', () => {
+    expect(alsoNotes([change('shape.corners')], 'button')).toEqual([
+      'Also changes the corners of cards, fields and buttons.',
+    ])
+    expect(alsoNotes([change('tune.button.radius')], 'button')).toEqual([])
+    expect(alsoNotes([change('shape.corners')], 'site')).toEqual([])
+  })
+})
+
+describe('one sentence', () => {
+  it('keeps the first sentence of a reply', () => {
+    expect(oneSentence('The hero is calmer. I also softened the edges.')).toBe(
+      'The hero is calmer.'
+    )
+    expect(oneSentence('Buttons are 48px tall on phones.')).toBe('Buttons are 48px tall on phones.')
+    expect(oneSentence('No full stop')).toBe('No full stop')
+  })
+})
diff --git a/apps/web/src/lib/shared/design/__tests__/ai-starters.test.ts b/apps/web/src/lib/shared/design/__tests__/ai-starters.test.ts
index 319ade748a..5232d6df45 100644
--- a/apps/web/src/lib/shared/design/__tests__/ai-starters.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/ai-starters.test.ts
@@ -49,3 +49,66 @@ describe('aiStarters', () => {
     ])
   })
 })
+
+describe('aiStarters for the page and the pick', () => {
+  it('offers the picked part’s own examples, up to three', () => {
+    const starters = aiStarters(branded(), undefined, { page: 'home', selection: 'hero' })
+    expect(starters).toEqual([
+      'Make the hero louder',
+      'Give the hero more room and a dotted pattern',
+      'Just the headline up top, no post box there',
+    ])
+  })
+
+  it('offers a picked Home block’s examples, by its type', () => {
+    const design = branded()
+    design.pages.home.blocks = [
+      { type: 'updates', id: 'updates1', count: 3, grid: { x: 0, y: 0, w: 6, h: 2 } },
+    ] as PortalDesign['pages']['home']['blocks']
+    expect(aiStarters(design, undefined, { page: 'home', selection: 'block-updates1' })).toEqual([
+      'Show just 2 updates',
+    ])
+    // A block id the design does not hold offers the page's starters.
+    expect(aiStarters(design, undefined, { page: 'home', selection: 'block-gone0000' })).toEqual(
+      aiStarters(design, undefined, { page: 'home' })
+    )
+  })
+
+  it('offers a page section’s examples when it is picked', () => {
+    expect(aiStarters(branded(), undefined, { page: 'roadmap', selection: 'board' })).toEqual([
+      'Lay the roadmap out in columns, with votes on its cards',
+    ])
+  })
+
+  it('keeps to the page open when nothing is picked', () => {
+    const design = branded()
+    design.nav.home.on = true
+    const roadmap = aiStarters(design, undefined, { page: 'roadmap', selection: null })
+    expect(roadmap[0]).toBe('Lay the roadmap out in columns, with votes on its cards')
+    expect(roadmap).not.toContain('Show the roadmap on Home')
+    expect(roadmap.length).toBeLessThanOrEqual(3)
+    const help = aiStarters(design, undefined, { page: 'help' })
+    expect(help).toEqual([
+      'List the help topics instead of cards',
+      'Bring back popular articles on the help center',
+      'Give the help center’s search box its usual size',
+    ])
+    expect(aiStarters(design, undefined, { page: 'home' })).toEqual(aiStarters(design))
+  })
+
+  it('falls back to the page’s starters for a pick with no examples', () => {
+    const design = branded()
+    expect(aiStarters(design, undefined, { page: 'feedback', selection: 'filters' })).toEqual(
+      aiStarters(design, undefined, { page: 'feedback' })
+    )
+    expect(aiStarters(design, undefined, { page: 'feedback' })).not.toContain(
+      'Show the roadmap on Home'
+    )
+  })
+
+  it('offers only Match my brand before a match, whatever is picked', () => {
+    expect(aiStarters(defaultDesign(), undefined, { page: 'roadmap', selection: 'board' })).toEqual(
+      [MATCH_STARTER]
+    )
+  })
+})
diff --git a/apps/web/src/lib/shared/design/__tests__/change-spots.test.ts b/apps/web/src/lib/shared/design/__tests__/change-spots.test.ts
new file mode 100644
index 0000000000..b3296507a8
--- /dev/null
+++ b/apps/web/src/lib/shared/design/__tests__/change-spots.test.ts
@@ -0,0 +1,125 @@
+/**
+ * Where an AI change shows on the canvas, from the real operations (no
+ * model): a hero look in the hero on any page with one, a hover style on
+ * its element in its hover state, a Home block's setting in that block, a
+ * page's own section on that page, and nothing for what the whole portal takes.
+ */
+import { describe, expect, it } from 'vitest'
+import { applyOps, type OpWorld } from '../design-ops'
+import { applyStep } from '../agent/style-ops'
+import { STYLE_REGISTRY } from '../agent/style-registry'
+import { changeSpots, pageForSpot, spotsBetween, spotsOfChanges } from '../change-spots'
+import { blockOf } from '../blocks'
+import { defaultDesign, type PortalDesign } from '../schema'
+
+const world: OpWorld = {
+  gates: { feedback: true, roadmap: true, changelog: true, help: true, support: true, status: true },
+  places: { boards: [], roadmaps: [], categories: [] },
+}
+
+function design(): PortalDesign {
+  const d = defaultDesign()
+  d.brand.light.accent = '#16a34a'
+  d.nav.home.on = true
+  d.pages.home.blocks = [
+    { type: 'updates', id: 'updates1', count: 3, grid: { x: 0, y: 0, w: 6, h: 2 } },
+    { type: 'status', id: 'statusbk', grid: { x: 6, y: 0, w: 6, h: 1 } },
+  ] as PortalDesign['pages']['home']['blocks']
+  return d
+}
+
+const spotsOf = (d: PortalDesign, applied: ReturnType<typeof applyOps>['applied']) =>
+  spotsOfChanges(d, applied)
+
+describe('changeSpots', () => {
+  it('puts a hero look in the hero, on whichever page shows one', () => {
+    const d = design()
+    const { applied, design: after } = applyOps(d, world, [
+      { op: 'set', target: 'hero', key: 'look', value: 'brand-waves' },
+    ])
+    expect(spotsOf(after, applied)).toEqual([{ page: null, section: 'hero' }])
+  })
+
+  it('puts a hover style on its element, in its hover state', () => {
+    const d = design()
+    const { applied, design: after } = applyStep(d, world, STYLE_REGISTRY, [], [
+      { element: 'button', state: 'hover', property: 'background', value: 'darker', block: '' },
+      { element: 'button', state: 'hover', property: 'color', value: 'page', block: '' },
+    ])
+    expect(spotsOf(after, applied)).toEqual([{ page: null, element: 'button', state: 'hover' }])
+  })
+
+  it('puts a Home block’s setting in that block only', () => {
+    const d = design()
+    const { applied, design: after } = applyOps(d, world, [
+      { op: 'set', target: 'updates1', key: 'count', value: '2' },
+    ])
+    expect(spotsOf(after, applied)).toEqual([{ page: 'home', section: 'block-updates1' }])
+  })
+
+  it('puts a page’s own section on that page', () => {
+    const d = design()
+    const { applied, design: after } = applyOps(
+      d,
+      world,
+      blockOf('changelog.entries')!.examples[0]!.ops
+    )
+    expect(applied.length).toBeGreaterThan(0)
+    expect(spotsOf(after, applied)).toEqual([{ page: 'changelog', section: 'entries' }])
+  })
+
+  it('has no spot for what the whole portal takes at once', () => {
+    const d = design()
+    const { applied, design: after } = applyOps(d, world, [
+      { op: 'theme', key: 'corners', value: 'pill' },
+    ])
+    expect(applied.length).toBe(1)
+    expect(spotsOf(after, applied)).toEqual([])
+    expect(changeSpots(d, { path: 'brand.light.accent', before: '#000000', after: '#16a34a' })).toEqual([])
+  })
+
+  it('reads a patch’s path into Home’s blocks by the block at that place', () => {
+    const d = design()
+    expect(changeSpots(d, { path: 'pages.home.blocks.1.showIncidents', before: false, after: true })).toEqual([
+      { page: 'home', section: 'block-statusbk' },
+    ])
+  })
+})
+
+describe('pageForSpot', () => {
+  const pages = ['home', 'feedback', 'roadmap', 'status'] as const
+  it('keeps to the page shown when it draws the part, else the first that does', () => {
+    expect(pageForSpot({ page: null, section: 'hero' }, 'roadmap', pages)).toBe('roadmap')
+    expect(pageForSpot({ page: null, section: 'hero' }, 'status', pages)).toBe('home')
+    expect(pageForSpot({ page: null, element: 'button' }, 'status', pages)).toBe('status')
+    expect(pageForSpot({ page: 'roadmap', section: 'board' }, 'home', pages)).toBe('roadmap')
+    expect(pageForSpot({ page: 'help', section: 'topics' }, 'home', pages)).toBeNull()
+  })
+})
+
+describe('spotsBetween', () => {
+  it('finds where an AI step’s draft differs from the one before', () => {
+    const d = design()
+    const step = applyStep(
+      d,
+      world,
+      STYLE_REGISTRY,
+      [
+        { op: 'set', target: 'hero', key: 'art', value: 'dots' },
+        { op: 'set', target: 'statusbk', key: 'showIncidents', value: 'true' },
+        { op: 'theme', key: 'corners', value: 'pill' },
+      ],
+      [{ element: 'link', state: 'hover', property: 'underline', value: 'always', block: '' }]
+    )
+    expect(step.refused).toEqual([])
+    expect(spotsBetween(d, step.design)).toEqual(
+      expect.arrayContaining([
+        { page: null, section: 'hero' },
+        { page: 'home', section: 'block-statusbk' },
+        { page: null, element: 'link', state: 'hover' },
+      ])
+    )
+    expect(spotsBetween(d, step.design)).toHaveLength(3)
+    expect(spotsBetween(d, d)).toEqual([])
+  })
+})
diff --git a/apps/web/src/lib/shared/design/__tests__/history.test.ts b/apps/web/src/lib/shared/design/__tests__/history.test.ts
index cffa50f083..42b1088436 100644
--- a/apps/web/src/lib/shared/design/__tests__/history.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/history.test.ts
@@ -170,3 +170,95 @@ describe('createHistory groups', () => {
     expect(history.getState().past).toHaveLength(2)
   })
 })
+
+describe('createHistory while the AI works', () => {
+  function edit(
+    history: ReturnType<typeof createHistory>,
+    doc: Doc,
+    label: string,
+    by?: 'ai' | 'person'
+  ) {
+    const [next, patches, inverse] = change(doc, (draft) => void (draft.count += 1))
+    history.getState().push(label, patches, inverse, 0, by)
+    return next
+  }
+
+  it('keeps the AI’s changes one step, its own nested steps included', () => {
+    const history = createHistory()
+    history.getState().begin('Make it calmer', 'ai')
+    let doc = edit(history, start, 'Make it calmer', 'ai')
+    history.getState().begin('Make it calmer', 'ai')
+    doc = edit(history, doc, 'Make it calmer', 'ai')
+    history.getState().end('ai')
+    history.getState().end('ai')
+    expect(history.getState().past.map((step) => step.label)).toEqual(['Make it calmer'])
+    expect(history.getState().undo(doc)?.doc).toEqual(start)
+  })
+
+  it('makes a change by hand while the AI works its own step, never part of the AI’s', () => {
+    const history = createHistory()
+    history.getState().begin('Make it calmer', 'ai')
+    const one = edit(history, start, 'Make it calmer', 'ai')
+    const two = edit(history, one, 'Headline')
+    const three = edit(history, two, 'Make it calmer', 'ai')
+    expect(history.getState().group?.label).toBe('Make it calmer')
+    history.getState().end('ai')
+    expect(history.getState().past.map((step) => step.label)).toEqual([
+      'Make it calmer',
+      'Headline',
+      'Make it calmer',
+    ])
+    // Undo takes back the AI's last part, then the hand's change on its own.
+    const back = history.getState().undo(three)!
+    expect(back.doc).toEqual(two)
+    expect(history.getState().undo(back.doc)?.doc).toEqual(one)
+    expect(history.getState().group).toBeNull()
+  })
+
+  it('keeps a drag made by hand while the AI works one step of its own', () => {
+    const history = createHistory()
+    history.getState().begin('Make it calmer', 'ai')
+    let doc = edit(history, start, 'Make it calmer', 'ai')
+    history.getState().begin('Move block')
+    doc = edit(history, doc, 'Step')
+    doc = edit(history, doc, 'Make it calmer', 'ai')
+    doc = edit(history, doc, 'Step')
+    history.getState().end()
+    history.getState().end('ai')
+    expect(history.getState().past.map((step) => step.label)).toEqual([
+      'Make it calmer',
+      'Move block',
+      'Make it calmer',
+    ])
+    expect(history.getState().past[1]!.patches).toHaveLength(2)
+    expect(history.getState().group).toBeNull()
+  })
+
+  it('still folds a person’s changes into a person’s own group, as a drag does', () => {
+    const history = createHistory()
+    history.getState().begin('Move block')
+    edit(history, start, 'Step')
+    edit(history, start, 'Step')
+    history.getState().end()
+    expect(history.getState().past.map((step) => step.label)).toEqual(['Move block'])
+  })
+})
+
+describe('createHistory when the AI finishes mid-drag', () => {
+  it('keeps the rest of the drag in the drag’s own step', () => {
+    const history = createHistory()
+    const push = (label: string, by?: 'ai') => {
+      const [, patches, inverse] = change(start, (draft) => void (draft.count += 1))
+      history.getState().push(label, patches, inverse, 0, by)
+    }
+    history.getState().begin('Ask', 'ai')
+    push('Ask', 'ai')
+    history.getState().begin('Move block')
+    push('Step')
+    history.getState().end('ai')
+    push('Step')
+    history.getState().end()
+    expect(history.getState().past.map((step) => step.label)).toEqual(['Ask', 'Move block'])
+    expect(history.getState().past[1]!.patches).toHaveLength(2)
+  })
+})
diff --git a/apps/web/src/lib/shared/design/agent/__tests__/loop.test.ts b/apps/web/src/lib/shared/design/agent/__tests__/loop.test.ts
index d593603647..828199e3a9 100644
--- a/apps/web/src/lib/shared/design/agent/__tests__/loop.test.ts
+++ b/apps/web/src/lib/shared/design/agent/__tests__/loop.test.ts
@@ -286,9 +286,9 @@ describe('the edit loop', () => {
     if (!result.ok) throw new Error(result.message)
     expect(step).toHaveBeenCalledTimes(3)
     expect(result.stopped).toBe('steps')
-    expect(result.reply).toMatch(
-      /^I changed main buttons on hover: background periwinkle\. Some of it did not come out as asked, so ask again to finish\./
-    )
+    // One sentence; what did not come out as asked is under Show changes.
+    expect(result.reply).toBe('I changed main buttons on hover: background periwinkle.')
+    expect(result.notes).toContain('Some of it did not come out as asked, so ask again to finish.')
   })
 
   it('starts no step the time budget cannot fit', async () => {
@@ -317,7 +317,7 @@ describe('the edit loop', () => {
     // 9s, 18s; a third would end at 27s.
     expect(step).toHaveBeenCalledTimes(2)
     expect(result.stopped).toBe('time')
-    expect(result.reply).toContain('I stopped before checking everything.')
+    expect(result.reply).toMatch(/, but I stopped before checking everything\.$/)
   })
 
   it('reads the design before the request for a check that compares with it', async () => {
@@ -405,6 +405,138 @@ describe('the edit loop', () => {
     expect(result).toEqual({ ok: false, code: 'AI_FAILED', message: 'Try rephrasing.' })
   })
 
+  it('keeps what an earlier step applied when a later step throws, with its Undo', async () => {
+    const original = start()
+    const design = { current: original }
+    const { step } = scripted(
+      [
+        answer({
+          plan: 'Darken buttons on hover',
+          styles: [hoverStyle('#c7d2fe')],
+          checks: [darkerCheck],
+          done: false,
+        }),
+      ],
+      design
+    )
+    const flaky: LoopDeps['step'] = async (request) => {
+      if (request.step > 0) throw new Error('network')
+      return step(request)
+    }
+    const result = await runEditLoop({
+      registry: R,
+      design: original,
+      targets: [],
+      deps: { step: flaky, read: reader(design, original) },
+    })
+    if (!result.ok) throw new Error(result.message)
+    expect(result.stopped).toBe('failed')
+    // The first step's change is the request's one Undo, and the reply says it stopped.
+    expect(result.applied.map((c) => c.path)).toEqual(['style'])
+    expect(result.design).toEqual(design.current)
+    expect(result.reply).toMatch(/^I changed .*, but I stopped before checking everything\.$/)
+  })
+
+  it('keeps what an earlier step applied when a later step is refused', async () => {
+    const original = start()
+    const design = { current: original }
+    const { step } = scripted(
+      [answer({ plan: 'Try', styles: [hoverStyle('#c7d2fe')], checks: [darkerCheck] })],
+      design
+    )
+    const result = await runEditLoop({
+      registry: R,
+      design: original,
+      targets: [],
+      deps: { step, read: reader(design, original) },
+    })
+    if (!result.ok) throw new Error(result.message)
+    expect(result.stopped).toBe('failed')
+    expect(result.applied).toHaveLength(1)
+  })
+
+  it('throws as before when a step throws with nothing changed', async () => {
+    const original = start()
+    await expect(
+      runEditLoop({
+        registry: R,
+        design: original,
+        targets: [],
+        deps: {
+          step: async () => {
+            throw new Error('network')
+          },
+          read: async () => ({}),
+        },
+      })
+    ).rejects.toThrow('network')
+  })
+
+  it('says how far the changes reached beyond the page shown, in the same sentence', async () => {
+    const original = start()
+    const design = { current: original }
+    const { step } = scripted(
+      [
+        answer({
+          plan: 'Calm the hero',
+          ops: [{ op: 'set', target: 'hero', key: 'look', value: 'tint', says: '' }],
+          done: true,
+          reply: 'The hero is calmer. It is a soft tint now.',
+        }),
+      ],
+      design
+    )
+    const result = await runEditLoop({
+      registry: R,
+      design: original,
+      targets: [],
+      deps: { step, read: reader(design, original) },
+      pick: { scope: 'band', page: 'home' },
+    })
+    if (!result.ok) throw new Error(result.message)
+    expect(result.reply).toBe('The hero is calmer, on every page.')
+  })
+
+  it('reports styles left outside the pick under Show changes, and to the next step', async () => {
+    const original = start()
+    const design = { current: original }
+    const asked: StepRequest[] = []
+    const step: LoopDeps['step'] = async (request) => {
+      asked.push(request)
+      const a =
+        request.step === 0
+          ? answer({
+              plan: 'Cards',
+              styles: [
+                { ...hoverStyle('darker'), element: 'card', property: 'shadow', value: 'soft' },
+              ],
+            })
+          : answer({ plan: 'Done', done: true })
+      const out = applyStep(design.current, world, R, [], a.styles, {
+        scope: 'band',
+        reach: 'every',
+        page: 'home',
+      })
+      design.current = out.design
+      const { design: next, ...outcome } = out
+      return { ok: true, answer: a, outcome, design: next }
+    }
+    const result = await runEditLoop({
+      registry: R,
+      design: original,
+      targets: [],
+      deps: { step, read: reader(design, original) },
+      pick: { scope: 'band', page: 'home' },
+    })
+    if (!result.ok) throw new Error(result.message)
+    expect(result.applied).toEqual([])
+    expect(result.reply).toBe('That is outside what was picked, so nothing changed.')
+    expect(result.notes).toEqual(['Left alone, as it is outside what was picked: cards on hover.'])
+    expect(asked[1]!.turns[0]!.refused).toEqual([
+      { what: 'Cards on hover', reason: 'outside what was picked: left alone' },
+    ])
+  })
+
   it('hands what a step asked to read to the next one', async () => {
     const original = start()
     const design = { current: original }
@@ -497,3 +629,77 @@ describe('the tool schemas', () => {
     expect(text).not.toContain('- font-size:')
   })
 })
+
+describe('the edit loop, stopped', () => {
+  it('takes no step after Stop, keeping what the steps before applied', async () => {
+    const original = start()
+    const design = { current: original }
+    const stop = new AbortController()
+    const { step } = scripted(
+      [
+        answer({ plan: 'Darken buttons on hover', styles: [hoverStyle('darker')], done: false }),
+        answer({ plan: 'Correct', styles: [hoverStyle('#000000')], done: true }),
+      ],
+      design
+    )
+    const read = vi.fn(async (targets: Parameters<LoopDeps['read']>[0], which: 'before' | 'now') => {
+      // Stop lands while the first step's result is checked.
+      if (which === 'now') stop.abort()
+      return staticReadings(which === 'before' ? original : design.current, R, targets)
+    })
+    const result = await runEditLoop({
+      registry: R,
+      design: original,
+      targets: [],
+      deps: { step, read },
+      signal: stop.signal,
+    })
+    expect(step).toHaveBeenCalledTimes(1)
+    if (!result.ok) throw new Error(result.message)
+    expect(result.stopped).toBe('stopped')
+    expect(result.applied.map((c) => c.path)).toEqual(['style'])
+  })
+
+  it('keeps what applied when a step is cut off by Stop', async () => {
+    const original = start()
+    const design = { current: original }
+    const stop = new AbortController()
+    const { step: first } = scripted(
+      [answer({ plan: 'Darken buttons on hover', styles: [hoverStyle('darker')] })],
+      design
+    )
+    const step = vi.fn(async (request: StepRequest): Promise<StepReply> => {
+      if (request.step === 0) return first(request)
+      stop.abort()
+      throw new DOMException('The operation was aborted.', 'AbortError')
+    })
+    const result = await runEditLoop({
+      registry: R,
+      design: original,
+      targets: [],
+      deps: { step, read: reader(design, original) },
+      signal: stop.signal,
+    })
+    if (!result.ok) throw new Error(result.message)
+    expect(result.stopped).toBe('stopped')
+    expect(result.applied.map((c) => c.path)).toEqual(['style'])
+  })
+
+  it('says it stopped when Stop came before any step', async () => {
+    const stop = new AbortController()
+    stop.abort()
+    const original = start()
+    const { step } = scripted([answer({ done: true })], { current: original })
+    const result = await runEditLoop({
+      registry: R,
+      design: original,
+      targets: [],
+      deps: { step, read: reader({ current: original }, original) },
+      signal: stop.signal,
+    })
+    expect(step).not.toHaveBeenCalled()
+    if (!result.ok) throw new Error(result.message)
+    expect(result.stopped).toBe('stopped')
+    expect(result.applied).toEqual([])
+  })
+})
diff --git a/apps/web/src/lib/shared/design/agent/__tests__/website-tools.test.ts b/apps/web/src/lib/shared/design/agent/__tests__/website-tools.test.ts
index 347c0bccef..3f9826cbbe 100644
--- a/apps/web/src/lib/shared/design/agent/__tests__/website-tools.test.ts
+++ b/apps/web/src/lib/shared/design/agent/__tests__/website-tools.test.ts
@@ -105,9 +105,36 @@ describe('read_website and match_website in the loop', () => {
     expect(asked[2]!.capture ?? null).toBeNull()
     expect(asked[2]!.website?.[1]).toContain('Website matched (acme.test)')
     expect(result.ok && result.design.mode).toBe('dark')
-    expect(result.ok && result.reply).toBe(
-      'I matched your brand from acme.test. Kept the buttons square.'
+    // One sentence: the match; what the steps after it added is under Show changes.
+    expect(result.ok && result.reply).toBe('I matched your brand from acme.test.')
+  })
+
+  it('never matches a whole site for a request about one part, and borrows by reading instead', async () => {
+    // A request about one part is run without match_website: the builder passes it only for
+    // the whole site, so "make this button feel like acme.test" cannot restyle the site.
+    const original = portalDesign.parse(defaultDesign())
+    const { step, asked } = model(
+      [
+        answer({ plan: 'Match it', match_website: 'acme.test' }),
+        answer({ plan: 'Read it', read_website: 'acme.test' }),
+        answer({ plan: 'Done', done: true, reply: 'The button is like acme.test’s.' }),
+      ],
+      original
     )
+    const readWebsite = vi.fn(async () => ({ reading, capture: null }))
+    const result = await runEditLoop({
+      registry: STYLE_REGISTRY,
+      design: original,
+      targets: [],
+      deps: { step, read: vi.fn(async () => ({})), readWebsite } as LoopDeps,
+      budget: { steps: 4, ms: 60_000 },
+      pick: { scope: 'band', page: 'home' },
+    })
+    if (!result.ok) throw new Error(result.message)
+    expect(result.design).toEqual(original)
+    // The model is told why, so it reads the site and sets the part itself.
+    expect(asked[1]!.website?.[0]).toMatch(/match_website is not offered/)
+    expect(readWebsite).toHaveBeenCalledWith('acme.test')
   })
 
   it('reads and matches a site once, however often the model asks', async () => {
diff --git a/apps/web/src/lib/shared/design/agent/loop.ts b/apps/web/src/lib/shared/design/agent/loop.ts
index 8cb94feab1..593bef138e 100644
--- a/apps/web/src/lib/shared/design/agent/loop.ts
+++ b/apps/web/src/lib/shared/design/agent/loop.ts
@@ -12,8 +12,10 @@
  * Pure: the model, the draft and the preview come in as dependencies, so
  * the builder, the server and the eval run the same loop.
  */
-import type { AppliedDesignChange } from '../apply-changes'
+import type { AppliedDesignChange, DesignAiScope } from '../apply-changes'
+import { alsoNotes, oneSentence, reachClause, withReach } from '../ai-reach'
 import { plainReasons, plainWords } from '../colour-names'
+import type { DesignerPage } from '../paths'
 import type { PortalDesign } from '../schema'
 import type { AgentStepAnswer } from './step-schema'
 import {
@@ -95,7 +97,11 @@ export interface LoopDeps {
   now?: () => number
   /** read_website: the site's facts and a capture (as a JPEG data URL), cache first. */
   readWebsite?: (url: string) => Promise<{ reading: WebsiteReading; capture: string | null }>
-  /** match_website: the whole brand match on the site, saved to the draft; its design after. */
+  /**
+   * match_website: the whole brand match on the site, saved to the draft; its
+   * design after. Given only for a request about the whole site: a request
+   * about one part borrows from a site with read_website.
+   */
   matchWebsite?: (
     url: string
   ) => Promise<{ match: WebsiteMatch; design: PortalDesign | null; applied: AppliedDesignChange[] }>
@@ -130,7 +136,13 @@ export type LoopResult =
       /** Checks that failed in the last step that made any. */
       unmet: CheckResult[]
       refused: Array<{ what: string; reason: string }>
-      stopped: 'done' | 'steps' | 'time' | 'failed' | 'stalled'
+      /**
+       * What the reply leaves to Show changes: what was left alone and why,
+       * what did not come out as asked, what else a change reaches.
+       */
+      notes: string[]
+      /** Why it ended; `stopped` is the person's Stop. */
+      stopped: 'done' | 'steps' | 'time' | 'failed' | 'stalled' | 'stopped'
       ms: number
     }
   | { ok: false; code: string; message: string }
@@ -156,7 +168,15 @@ export function trailOf(steps: readonly StepRecord[]): string[] {
 
 const lowerFirst = (text: string) => `${text.charAt(0).toLowerCase()}${text.slice(1)}`
 
-/** The reply, said only of what happened. */
+/** What a request stopped by the person says: whether anything it did stays. */
+export const stoppedReply = (changed: boolean) =>
+  changed ? 'Stopped. What changed so far stays.' : 'Stopped. Nothing changed.'
+
+/**
+ * The reply, said only of what happened, in one sentence: what changed, how
+ * far it reached beyond the page shown, and that the loop stopped early
+ * where it did. Everything else is said under Show changes (loopNotes).
+ */
 export function loopReply(input: {
   answer: AgentStepAnswer | null
   applied: readonly AppliedDesignChange[]
@@ -164,32 +184,59 @@ export function loopReply(input: {
   refused: ReadonlyArray<{ what: string; reason: string }>
   unmet: readonly CheckResult[]
   stopped: Extract<LoopResult, { ok: true }>['stopped']
+  /** Parts of the request left alone because they are outside what was picked. */
+  leftAlone?: readonly string[]
+  /** How far the changes reached beyond the page shown, such as "on every page". */
+  reach?: string
 }): string {
   const { answer, applied, done, refused, unmet } = input
+  if (input.stopped === 'stopped') return stoppedReply(applied.length > 0)
   const why = plainReasons(refused.map((each) => each.reason))
   if (applied.length === 0) {
     if (refused.length > 0)
       return why ? `Nothing changed: ${why}.` : 'Nothing changed: I could not do that here.'
-    return plainWords(answer?.reply?.trim() || 'Nothing changed.')
+    if (input.leftAlone?.length) return 'That is outside what was picked, so nothing changed.'
+    return plainWords(oneSentence(answer?.reply?.trim() || 'Nothing changed.'))
   }
   const clean = unmet.length === 0 && refused.length === 0 && !!answer?.done
   const said =
     clean && answer?.reply.trim()
-      ? answer.reply.trim()
+      ? oneSentence(answer.reply)
       : `I changed ${[...new Set(done)].slice(0, 8).map(lowerFirst).join(', ')}.`
-  const notMet = unmet.length
-    ? ' Some of it did not come out as asked, so ask again to finish.'
-    : ''
-  const left = refused.length
-    ? why
-      ? ` I left the rest: ${why}.`
-      : ' I could not do the rest here.'
-    : ''
-  const time =
-    input.stopped === 'time' || input.stopped === 'failed'
-      ? ' I stopped before checking everything.'
-      : ''
-  return plainWords(`${said}${notMet}${left}${time}`)
+  const reached = withReach(said, input.reach ?? '')
+  const stoppedEarly = input.stopped === 'time' || input.stopped === 'failed'
+  return plainWords(
+    stoppedEarly
+      ? `${reached.replace(/[.!]+$/, '')}, but I stopped before checking everything.`
+      : reached
+  )
+}
+
+/** What the reply leaves to Show changes, each a short line. */
+export function loopNotes(input: {
+  unmet: readonly CheckResult[]
+  refused: ReadonlyArray<{ what: string; reason: string }>
+  leftAlone: readonly string[]
+  applied: readonly AppliedDesignChange[]
+  /** Notes the steps brought, such as the language words were written in. */
+  own: readonly string[]
+  scope: DesignAiScope
+}): string[] {
+  const why = plainReasons(input.refused.map((each) => each.reason))
+  const left = [...new Set(input.leftAlone)]
+  return [
+    ...(input.applied.length && input.unmet.length
+      ? ['Some of it did not come out as asked, so ask again to finish.']
+      : []),
+    ...(left.length
+      ? [`Left alone, as it is outside what was picked: ${left.map(lowerFirst).join(', ')}.`]
+      : []),
+    ...(input.applied.length && input.refused.length
+      ? [why ? `I left the rest: ${why}.` : 'I could not do the rest here.']
+      : []),
+    ...alsoNotes(input.applied, input.scope),
+    ...new Set(input.own),
+  ].map(plainWords)
 }
 
 const uniqueTargets = (targets: readonly StyleTarget[]) => {
@@ -288,6 +335,10 @@ export async function runEditLoop(input: {
   targets: readonly StyleTarget[]
   deps: LoopDeps
   budget?: LoopBudget
+  /** What was picked and the page shown, for how far the reply says the changes reached. */
+  pick?: { scope: DesignAiScope; page?: DesignerPage }
+  /** The person's Stop: no step starts after it, and what applied stays. */
+  signal?: AbortSignal
 }): Promise<LoopResult> {
   const { registry, deps } = input
   const budget = input.budget ?? LOOP_BUDGET
@@ -298,6 +349,8 @@ export async function runEditLoop(input: {
   const lists: AppliedDesignChange[][] = []
   const refused: Array<{ what: string; reason: string }> = []
   const done: string[] = []
+  const leftAlone: string[] = []
+  const own: string[] = []
   let design = input.design
   let answer: AgentStepAnswer | null = null
   let unmet: CheckResult[] = []
@@ -322,159 +375,195 @@ export async function runEditLoop(input: {
   // The website tools' own time (a capture, a match) is not the steps' budget.
   let toolMs = 0
 
-  for (let step = 0; step < budget.steps; step++) {
-    const spent = now() - started - toolMs
-    const usual = records.length
-      ? records.reduce((sum, r) => sum + r.ms.step + r.ms.read, 0) / records.length
-      : 0
-    if (step > 0 && spent + usual > budget.ms) {
-      stopped = 'time'
-      break
-    }
-    deps.progress?.(
-      step === 0
-        ? 'Step 1: planning the change'
-        : `Step ${step + 1}: correcting what the check found`
-    )
-    const stepStart = now()
-    const reply = await deps.step({
-      step,
-      turns: [...turns],
-      readings,
-      picture,
-      last: step === budget.steps - 1,
-      ...(website.length ? { website: [...website] } : {}),
-      ...(capture ? { capture } : {}),
-    })
-    const stepMs = now() - stepStart
-    if (!reply.ok) {
-      if (records.length === 0) return reply
-      stopped = 'failed'
-      break
-    }
-    answer = reply.answer
-    design = reply.design
-    lists.push(reply.outcome.applied)
-    refused.push(...reply.outcome.refused)
-    done.push(...reply.outcome.done)
-    // read_website and match_website: once a site, whatever the model asks.
-    capture = null
-    const toolStart = now()
-    const toRead = hostKey(answer.read_website ?? '')
-    if (toRead && deps.readWebsite) {
-      const kept = readSites.get(toRead)
-      if (kept) website.push(`${toRead} is already read; use the result above.`)
-      else {
-        deps.progress?.(`Reading ${toRead}`)
-        const got = await deps.readWebsite(answer.read_website)
-        readSites.set(toRead, got)
-        website.push(readingText(got.reading))
-        capture = got.capture
+  // Whether anything has landed in the draft: a step that fails after one did keeps it.
+  const changed = () => lists.some((list) => list.length > 0)
+  try {
+    for (let step = 0; step < budget.steps; step++) {
+      if (input.signal?.aborted) {
+        stopped = 'stopped'
+        break
       }
-    }
-    const toMatch = hostKey(answer.match_website ?? '')
-    if (toMatch && deps.matchWebsite && !matchedSites.has(toMatch)) {
-      matchedSites.add(toMatch)
-      deps.progress?.(`Matching ${toMatch}`)
-      const matched = await deps.matchWebsite(answer.match_website)
-      website.push(matchText(matched.match))
-      if (matched.design) {
-        design = matched.design
-        lists.push(matched.applied)
-        done.push(`matched ${toMatch}`)
-        matchReply = matched.match.reply
+      const spent = now() - started - toolMs
+      const usual = records.length
+        ? records.reduce((sum, r) => sum + r.ms.step + r.ms.read, 0) / records.length
+        : 0
+      if (step > 0 && spent + usual > budget.ms) {
+        stopped = 'time'
+        break
       }
-    }
-    const usedTools = !!toRead || !!toMatch
-    toolMs += now() - toolStart
-
-    // verify: every check so far (a correction is held to what the first step meant),
-    // read as drawn, with what the step asked to read.
-    const overridden = overrideStyles(design, answer.ops)
-    for (const set of overridden)
-      if (set.phone) phoneOnly.add(`${set.element}|${set.property}`)
-      else allScreens.add(`${set.element}|${set.property}`)
-    for (const style of answer.styles) allScreens.add(`${style.element}|${style.property}`)
-    for (const check of uniqueChecks([
-      ...answer.checks,
-      ...readabilityChecks([...answer.styles, ...overridden.filter((set) => !set.phone)]),
-    ] as StyleCheck[]))
-      // A check restated for the same element and property replaces the one before.
-      active.set(`${targetKey(check)}|${check.property}`, check)
-    const checks = [...active.values()]
-    const asked = answer.read.map((r) => ({ ...r }) as StyleTarget)
-    const targets = uniqueTargets([...checks.flatMap(checkTargets), ...asked])
-    const readStart = now()
-    if (targets.length) deps.progress?.(`Step ${step + 1}: checking the drawn preview`)
-    const drawn = targets.length ? await deps.read(targets, 'now') : {}
-    const missing = uniqueTargets(
-      checks
-        .filter(needsBefore)
-        .flatMap(checkTargets)
-        .filter((t) => !before[targetKey(t)])
-    )
-    if (missing.length) Object.assign(before, await deps.read(missing, 'before'))
-    picture = answer.look && deps.picture ? await deps.picture() : null
-    const readMs = now() - readStart
-    // What was set for phones only is not on the page as read, at full width: not measured.
-    const results = checks.map((check): CheckResult => {
-      const key = `${check.element}|${check.property}`
-      if (phoneOnly.has(key) && !allScreens.has(key))
-        return {
-          check,
-          ok: null,
-          saw: `${targetWords(registry, check)}: ${check.property} on phones, not measured at full width`,
+      deps.progress?.(
+        step === 0
+          ? 'Step 1: planning the change'
+          : `Step ${step + 1}: correcting what the check found`
+      )
+      const stepStart = now()
+      let reply: StepReply
+      try {
+        reply = await deps.step({
+          step,
+          turns: [...turns],
+          readings,
+          picture,
+          last: step === budget.steps - 1,
+          ...(website.length ? { website: [...website] } : {}),
+          ...(capture ? { capture } : {}),
+        })
+      } catch (err) {
+        // A step cut off by Stop: what the steps before applied stays.
+        if (!input.signal?.aborted) throw err
+        stopped = 'stopped'
+        break
+      }
+      const stepMs = now() - stepStart
+      if (!reply.ok) {
+        if (records.length === 0 && !changed()) return reply
+        stopped = 'failed'
+        break
+      }
+      answer = reply.answer
+      design = reply.design
+      lists.push(reply.outcome.applied)
+      refused.push(...reply.outcome.refused)
+      done.push(...reply.outcome.done)
+      const outside = reply.outcome.outOfScope ?? []
+      leftAlone.push(...outside)
+      own.push(...(reply.outcome.notes ?? []))
+      // read_website and match_website: once a site, whatever the model asks.
+      capture = null
+      const toolStart = now()
+      const toRead = hostKey(answer.read_website ?? '')
+      if (toRead && deps.readWebsite) {
+        const kept = readSites.get(toRead)
+        if (kept) website.push(`${toRead} is already read; use the result above.`)
+        else {
+          deps.progress?.(`Reading ${toRead}`)
+          const got = await deps.readWebsite(answer.read_website)
+          readSites.set(toRead, got)
+          website.push(readingText(got.reading))
+          capture = got.capture
+        }
+      }
+      const toMatch = hostKey(answer.match_website ?? '')
+      if (toMatch && !deps.matchWebsite)
+        website.push(
+          'match_website is not offered: only part of the site was picked. Use read_website to borrow from a site.'
+        )
+      if (toMatch && deps.matchWebsite && !matchedSites.has(toMatch)) {
+        matchedSites.add(toMatch)
+        deps.progress?.(`Matching ${toMatch}`)
+        const matched = await deps.matchWebsite(answer.match_website)
+        website.push(matchText(matched.match))
+        if (matched.design) {
+          design = matched.design
+          lists.push(matched.applied)
+          done.push(`matched ${toMatch}`)
+          matchReply = matched.match.reply
         }
-      return evaluateCheck(registry, withRoleColour(registry, check, design), drawn, before)
-    })
-    const failing = results.filter((r) => r.ok === false)
-    unmet = failing
+      }
+      const usedTools = !!toRead || !!toMatch
+      toolMs += now() - toolStart
 
-    records.push({
-      step,
-      plan: answer.plan,
-      did: reply.outcome.done,
-      refused: reply.outcome.refused,
-      checks: results,
-      ms: { step: stepMs, read: readMs },
-    })
-    turns.push({
-      step,
-      plan: answer.plan,
-      did: reply.outcome.done,
-      refused: reply.outcome.refused,
-      checks: results.map((r) => ({ ok: r.ok, saw: r.saw })),
-    })
-    readings = notes(registry, asked, drawn)
+      // verify: every check so far (a correction is held to what the first step meant),
+      // read as drawn, with what the step asked to read.
+      const overridden = overrideStyles(design, answer.ops)
+      for (const set of overridden)
+        if (set.phone) phoneOnly.add(`${set.element}|${set.property}`)
+        else allScreens.add(`${set.element}|${set.property}`)
+      for (const style of answer.styles) allScreens.add(`${style.element}|${style.property}`)
+      for (const check of uniqueChecks([
+        ...answer.checks,
+        ...readabilityChecks([...answer.styles, ...overridden.filter((set) => !set.phone)]),
+      ] as StyleCheck[]))
+        // A check restated for the same element and property replaces the one before.
+        active.set(`${targetKey(check)}|${check.property}`, check)
+      const checks = [...active.values()]
+      const asked = answer.read.map((r) => ({ ...r }) as StyleTarget)
+      const targets = uniqueTargets([...checks.flatMap(checkTargets), ...asked])
+      const readStart = now()
+      if (targets.length) deps.progress?.(`Step ${step + 1}: checking the drawn preview`)
+      const drawn = targets.length ? await deps.read(targets, 'now') : {}
+      const missing = uniqueTargets(
+        checks
+          .filter(needsBefore)
+          .flatMap(checkTargets)
+          .filter((t) => !before[targetKey(t)])
+      )
+      if (missing.length) Object.assign(before, await deps.read(missing, 'before'))
+      picture = answer.look && deps.picture ? await deps.picture() : null
+      const readMs = now() - readStart
+      // What was set for phones only is not on the page as read, at full width: not measured.
+      const results = checks.map((check): CheckResult => {
+        const key = `${check.element}|${check.property}`
+        if (phoneOnly.has(key) && !allScreens.has(key))
+          return {
+            check,
+            ok: null,
+            saw: `${targetWords(registry, check)}: ${check.property} on phones, not measured at full width`,
+          }
+        return evaluateCheck(registry, withRoleColour(registry, check, design), drawn, before)
+      })
+      const failing = results.filter((r) => r.ok === false)
+      unmet = failing
 
-    if (answer.done && failing.length === 0 && !usedTools) {
-      stopped = 'done'
-      break
-    }
-    // A step that neither changes, reads nor finds anything to correct twice running is stuck.
-    const acted =
-      reply.outcome.done.length > 0 || asked.length > 0 || failing.length > 0 || usedTools
-    idle = acted ? 0 : idle + 1
-    if (idle >= 2) {
-      stopped = 'stalled'
-      break
+      records.push({
+        step,
+        plan: answer.plan,
+        did: reply.outcome.done,
+        refused: reply.outcome.refused,
+        checks: results,
+        ms: { step: stepMs, read: readMs },
+      })
+      turns.push({
+        step,
+        plan: answer.plan,
+        did: reply.outcome.done,
+        // What was left outside the pick, so the next step can put it on the pick instead.
+        refused: [
+          ...reply.outcome.refused,
+          ...outside.map((what) => ({ what, reason: 'outside what was picked: left alone' })),
+        ],
+        checks: results.map((r) => ({ ok: r.ok, saw: r.saw })),
+      })
+      readings = notes(registry, asked, drawn)
+
+      if (answer.done && failing.length === 0 && !usedTools) {
+        stopped = 'done'
+        break
+      }
+      // A step that neither changes, reads nor finds anything to correct twice running is stuck.
+      const acted =
+        reply.outcome.done.length > 0 || asked.length > 0 || failing.length > 0 || usedTools
+      idle = acted ? 0 : idle + 1
+      if (idle >= 2) {
+        stopped = 'stalled'
+        break
+      }
     }
+  } catch (err) {
+    // Stopped by the person: what applied stays. Otherwise, nothing changed: the
+    // request failed as a whole; something did: it stays, with its Undo.
+    if (input.signal?.aborted) stopped = 'stopped'
+    else if (!changed()) throw err
+    else stopped = 'failed'
   }
 
   const applied = mergeChanges(input.design, design, lists)
-  const said = loopReply({ answer, applied, done, refused, unmet, stopped })
+  const scope = input.pick?.scope ?? 'site'
+  const reach = reachClause(design, applied, {
+    scope,
+    ...(input.pick?.page ? { page: input.pick.page } : {}),
+  })
+  const said = loopReply({ answer, applied, done, refused, unmet, stopped, leftAlone, reach })
   return {
     ok: true,
-    // A match says what it did first; the steps after it say what they added.
-    reply:
-      matchReply && !said.includes(matchReply)
-        ? `${matchReply} ${answer?.reply?.trim() ?? ''}`.trim()
-        : said,
+    // A match says what it did; what the steps added is under Show changes.
+    reply: matchReply ? plainWords(oneSentence(matchReply)) : said,
     design,
     applied,
     steps: records,
     unmet,
     refused,
+    notes: loopNotes({ unmet, refused, leftAlone, applied, own, scope }),
     stopped,
     ms: now() - started,
   }
diff --git a/apps/web/src/lib/shared/design/agent/router.ts b/apps/web/src/lib/shared/design/agent/router.ts
index 1c266e1724..8e1e1d47af 100644
--- a/apps/web/src/lib/shared/design/agent/router.ts
+++ b/apps/web/src/lib/shared/design/agent/router.ts
@@ -40,7 +40,12 @@ const ONE_BLOCK =
 
 const ONE_CALL_ELEMENTS = new Set(['page', 'headline', 'subtitle'])
 
-/** Where a request's change goes, read from its words: one page, phones, one part. */
+/**
+ * Where a request's change goes, read from its words: one page, phones, one
+ * part. English words only, so a hint for the model and the route, never
+ * the authority: how far a request may reach is the composer chip's
+ * (ai-reach.ts), which the server holds every change to.
+ */
 export interface RequestScope {
   page?: OverridePage
   phone: boolean
diff --git a/apps/web/src/lib/shared/design/agent/style-ops.ts b/apps/web/src/lib/shared/design/agent/style-ops.ts
index d10af6ef80..5efff2a67a 100644
--- a/apps/web/src/lib/shared/design/agent/style-ops.ts
+++ b/apps/web/src/lib/shared/design/agent/style-ops.ts
@@ -13,7 +13,8 @@
 import { mixColor, normaliseColor } from '../color'
 import { resolveDesign } from '../resolve'
 import type { PortalDesign } from '../schema'
-import type { DesignAiScope } from '../apply-changes'
+import { pathInScope } from '../apply-changes'
+import { pickedParts } from '../override-ops'
 import {
   applyOps,
   blockTypeOf,
@@ -26,7 +27,13 @@ import type { AppliedDesignChange, DesignValue } from '../apply-changes'
 import type { ThemeVariables } from '@/lib/shared/theme/types'
 import { lightness, parseCssColour } from './css-values'
 import { shownMode, staticReading } from './static-reading'
-import { BLOCK_STYLE_ELEMENTS, COLOUR_ROLES, readStyleValue, type StyleProp } from '../style-tokens'
+import {
+  BLOCK_STYLE_ELEMENTS,
+  COLOUR_ROLES,
+  readStyleValue,
+  type StyleElement,
+  type StyleProp,
+} from '../style-tokens'
 import {
   elementOf,
   propertyOf,
@@ -45,8 +52,17 @@ export interface StyleOp extends StyleTarget {
   says?: string
 }
 
-/** A style worked out: the operations that set it (an exact value, or tokens), and their path. */
-type Planned = { kind: 'field' | 'token'; ops: FlatOp[]; path: string; label: string }
+/**
+ * A style worked out: the operations that set it (an exact value, or
+ * tokens), their path, and its value as a token or an override takes it.
+ */
+type Planned = {
+  kind: 'field' | 'token'
+  ops: FlatOp[]
+  path: string
+  label: string
+  token: string
+}
 
 /** The exact values a style at rest reaches, by element and property. */
 const FIELDS: Record<string, Record<string, string>> = {
@@ -300,6 +316,7 @@ export function planStyle(
     }
   }
   const label = `${words}: ${property.id} ${shownValue}`
+  const token = JSON.stringify(readStyleValue(property.id as StyleProp, tokenValue))
 
   // An exact value where the design has one, at rest, for the whole portal, in the mode it reaches.
   const fieldKey = FIELDS[element.id]?.[property.id]
@@ -341,16 +358,17 @@ export function planStyle(
         ops: [{ op: 'theme', key, value: JSON.stringify(fieldValue) }],
         path,
         label,
+        token,
       },
     }
   }
   // A token: the whole portal's, or each Home block of the type named.
-  const value = JSON.stringify(readStyleValue(property.id as StyleProp, tokenValue))
+  const value = token
   const key = `style.${element.id}.${state}.${property.id}`
   if (!block)
     return {
       ok: true,
-      plan: { kind: 'token', ops: [{ op: 'theme', key, value }], path: key, label },
+      plan: { kind: 'token', ops: [{ op: 'theme', key, value }], path: key, label, token },
     }
   const own =
     element.id === 'block' || (BLOCK_STYLE_ELEMENTS as readonly string[]).includes(element.id)
@@ -367,6 +385,7 @@ export function planStyle(
       ops: ids.map((id) => ({ op: 'set', target: id, key, value })),
       path: 'pages.home.blocks',
       label,
+      token,
     },
   }
 }
@@ -403,49 +422,81 @@ export function stylesAsOps(
   return out
 }
 
-/** The elements a picked part's styles may reach; every one for the whole site and brand. */
-const SCOPE_ELEMENTS: Partial<Record<DesignAiScope, readonly string[]>> = {
-  header: ['header', 'navItem'],
-  band: ['hero', 'headline', 'subtitle', 'button'],
-  headline: ['headline'],
-  subtitle: ['subtitle'],
-  heading: ['heading'],
-  menu: ['navItem'],
-  button: ['button'],
-  secondary: ['secondary', 'ghost'],
-  card: ['card'],
-  vote: ['vote'],
-  field: ['input'],
-  status: ['badge', 'chip'],
-  link: ['link'],
-  body: ['body'],
-  feed: ['card', 'vote', 'chip', 'badge'],
-  home: [
-    'block',
-    'card',
-    'heading',
-    'link',
-    'button',
-    'body',
-    'chip',
-    'badge',
-    'vote',
-    'input',
-    'secondary',
-    'ghost',
-  ],
-}
+/** Where a style goes for what was picked. */
+export type StylePlace =
+  /** As the style says: the site's token or exact value, the pick being the site or every one of its kind. */
+  | { as: 'written' }
+  /** As overrides on the pick's own parts, page or block. */
+  | { as: 'override'; targets: string[] }
+  /** Nowhere: it would change something the pick does not hold. */
+  | { as: 'outside' }
 
-/** Whether a style stays within what was picked. */
-export function styleInScope(style: StyleOp, within: OpScope, design: PortalDesign): boolean {
-  if (within.scope === 'site' || within.scope === 'brand') return true
-  const allowed = SCOPE_ELEMENTS[within.scope]
-  if (!allowed?.includes(style.element)) return false
+/**
+ * Where a style goes for what was picked and how far the request may reach.
+ * A style is written for the whole site only when the whole site, or every
+ * one of an element's kind, is what was picked; otherwise it lands as an
+ * override on the pick (its parts holding that element, the page shown, the
+ * Home block picked) or not at all. A hover asked of the hero darkens the
+ * hero's own buttons, never every main button.
+ */
+export function stylePlace(
+  design: PortalDesign,
+  registry: StyleRegistry,
+  style: StyleOp,
+  within: OpScope
+): StylePlace {
+  const reach = within.reach ?? 'every'
+  const { page } = within
+  if (within.scope === 'site' || (within.scope === 'brand' && reach === 'every'))
+    return { as: 'written' }
+  const element = style.element
+  if (within.element) {
+    if (element !== within.element.element) return { as: 'outside' }
+    if (reach === 'every') return style.block ? { as: 'outside' } : { as: 'written' }
+    if (reach === 'one')
+      return within.element.part
+        ? { as: 'override', targets: [`part:${within.element.part}`] }
+        : { as: 'outside' }
+    return page ? { as: 'override', targets: [`page:${page}`] } : { as: 'outside' }
+  }
   if (within.blockId) {
     const picked = design.pages.home.blocks.find((b) => b.id === within.blockId)
-    return !!picked && blockTypeOf(style.block) === picked.type
+    if (!picked || (style.block && blockTypeOf(style.block) !== picked.type))
+      return { as: 'outside' }
+    return { as: 'override', targets: [`block:${within.blockId}`] }
   }
-  return true
+  if (reach !== 'every' && !page) return { as: 'outside' }
+  if (style.block) {
+    // One Home block type's look: each such block's own, where Home is what was picked.
+    const type = blockTypeOf(style.block)
+    const ids = design.pages.home.blocks.filter((b) => b.type === type && b.id).map((b) => b.id!)
+    return within.scope === 'home' && (reach === 'every' || page === 'home') && ids.length
+      ? { as: 'override', targets: ids.map((id) => `block:${id}`) }
+      : { as: 'outside' }
+  }
+  if (reach === 'every') {
+    const planned = planStyle(design, registry, style)
+    if (planned.ok && pathInScope(planned.plan.path, within.scope)) return { as: 'written' }
+  }
+  const parts = pickedParts(
+    design,
+    within.scope,
+    element as StyleElement,
+    reach === 'every' ? undefined : page
+  )
+  return parts.length
+    ? { as: 'override', targets: parts.map((part) => `part:${part.id}`) }
+    : { as: 'outside' }
+}
+
+/** Whether a style stays within what was picked, written or as overrides. */
+export function styleInScope(
+  style: StyleOp,
+  within: OpScope,
+  design: PortalDesign,
+  registry: StyleRegistry
+): boolean {
+  return stylePlace(design, registry, style, within).as !== 'outside'
 }
 
 const read = (doc: unknown, path: string): DesignValue =>
@@ -499,6 +550,8 @@ export interface LoopApplyOutcome {
   already: string[]
   refused: Array<{ what: string; reason: string }>
   outOfScope: string[]
+  /** Notes for Show changes, such as the language words were written in. */
+  notes?: string[]
 }
 
 const opWords = (op: FlatOp) =>
@@ -518,13 +571,47 @@ export function applyStep(
   within: OpScope = { scope: 'site' }
 ): LoopApplyOutcome {
   const first: OpsOutcome = applyOps(design, world, ops, within)
-  const scoped = styles.filter((style) => styleInScope(style, within, first.design))
+  const written: StyleOp[] = []
+  const outside: StyleOp[] = []
+  // Styles that land on the pick as overrides: each one's operations, and the style they came from.
+  const placed: Array<{ style: StyleOp; ops: FlatOp[] }> = []
+  const planRefused: Array<{ what: string; reason: string }> = []
+  for (const style of styles) {
+    const place = stylePlace(first.design, registry, style, within)
+    if (place.as === 'written') written.push(style)
+    else if (place.as === 'outside') outside.push(style)
+    else {
+      // Its value worked out as for the site (a relative colour from what it shows now).
+      const planned = planStyle(first.design, registry, { ...style, block: '' })
+      if (!planned.ok) {
+        planRefused.push({ what: targetWords(registry, style), reason: planned.refusal })
+        continue
+      }
+      const key = `${style.element}.${style.state || 'base'}.${style.property}`
+      placed.push({
+        style,
+        ops: place.targets.map((target) => ({
+          op: 'override',
+          target,
+          key,
+          value: planned.plan.token,
+        })),
+      })
+    }
+  }
   const outOfScope = [
     ...first.outOfScope.map(opWords),
-    ...styles.filter((s) => !scoped.includes(s)).map((s) => targetWords(registry, s)),
+    ...outside.map((s) => targetWords(registry, s)),
   ]
-  const asOps = stylesAsOps(first.design, registry, scoped)
+  const asOps = stylesAsOps(first.design, registry, written)
   const second = applyOps(first.design, world, asOps.ops)
+  // Overrides are held to the pick and its reach as the model's own operations are.
+  const third = applyOps(
+    second.design,
+    world,
+    placed.flatMap((each) => each.ops),
+    within
+  )
   const styleLabels = new Map<string, string[]>()
   const done: string[] = first.done.map((each) => each.label)
   const refused = [
@@ -533,6 +620,7 @@ export function applyStep(
       what: targetWords(registry, each.style),
       reason: each.reason,
     })),
+    ...planRefused,
   ]
   for (const planned of asOps.planned) {
     const failed = second.refused.find((each) => planned.ops.includes(each.op))
@@ -543,6 +631,15 @@ export function applyStep(
     done.push(planned.label)
     styleLabels.set(planned.path, [...(styleLabels.get(planned.path) ?? []), planned.label])
   }
+  const styleOf = (op: FlatOp) => placed.find((each) => each.ops.includes(op))!.style
+  done.push(...third.done.map((each) => each.label))
+  refused.push(
+    ...third.refused.map((each) => ({
+      what: targetWords(registry, styleOf(each.op)),
+      reason: each.reason,
+    }))
+  )
+  outOfScope.push(...new Set(third.outOfScope.map((op) => targetWords(registry, styleOf(op)))))
   const relabelled = second.applied.map((change) => {
     // Every style this change holds: one token, or a whole sheet written at once.
     const own = [...styleLabels.entries()]
@@ -551,10 +648,10 @@ export function applyStep(
     return own.length ? { ...change, label: own.join('; ') } : change
   })
   return {
-    design: second.design,
-    applied: mergeChanges(design, second.design, [first.applied, relabelled]),
+    design: third.design,
+    applied: mergeChanges(design, third.design, [first.applied, relabelled, third.applied]),
     done,
-    already: [...first.already, ...second.already].map((each) => each.label),
+    already: [...first.already, ...second.already, ...third.already].map((each) => each.label),
     refused,
     outOfScope,
   }
diff --git a/apps/web/src/lib/shared/design/ai-reach.ts b/apps/web/src/lib/shared/design/ai-reach.ts
new file mode 100644
index 0000000000..81c291f92f
--- /dev/null
+++ b/apps/web/src/lib/shared/design/ai-reach.ts
@@ -0,0 +1,226 @@
+/**
+ * How far an Ask AI request may reach from what was picked, and how far its
+ * changes did reach. The composer's chip offers the reaches a pick has, its
+ * panel's own default first ("Hero · every page (4)", "Call to action ·
+ * just this one"); the one chosen goes with the request as its `within`,
+ * and the server holds every change to it. The words a request uses ("only
+ * on this page") are hints for the model, never the authority.
+ *
+ * After a request, its reply ends with a short clause when the changes land
+ * beyond the page shown ("on every page"), and what else a shared field
+ * changes is said under Show changes.
+ *
+ * Pure.
+ */
+import type { AiElementPick, AppliedDesignChange, DesignAiScope } from './apply-changes'
+import { singular } from './element-pick'
+import { alsoChanges } from './labels'
+import { PAGE_NAMES } from './names'
+import { designerPages } from './outline'
+import { allPartsOf } from './parts-registry'
+import type { DesignerPage, PortalPageGates } from './paths'
+import type { PortalDesign } from './schema'
+import type { OverridePage, StyleOverride } from './style-overrides'
+
+/**
+ * How far a request may reach: just the part picked, the page shown, or
+ * everywhere the pick is (every page a section is on, every one of an
+ * element's kind).
+ */
+export const AI_REACHES = ['one', 'page', 'every'] as const
+export type AiReach = (typeof AI_REACHES)[number]
+
+/** A reach the chip offers, in the words it says. */
+export interface ReachChoice {
+  reach: AiReach
+  words: string
+}
+
+/** What was picked, as Ask AI is told it. */
+export interface AiPick {
+  scope: DesignAiScope
+  blockId?: string
+  element?: AiElementPick | null
+}
+
+const EVERY_GATE: PortalPageGates = {
+  feedback: true,
+  roadmap: true,
+  changelog: true,
+  help: true,
+  support: true,
+  status: true,
+}
+
+/** Sections that are on every page anyway, so every page is all they can reach. */
+const ON_EVERY_PAGE: ReadonlySet<DesignAiScope> = new Set(['header', 'menu', 'logo'])
+
+/**
+ * The reaches a pick offers, the panel's default first: an element starts
+ * shared (every one of its kind), as its panel does; the hero starts at
+ * every page it is on; a Home block keeps to itself. None for the whole
+ * site or its styles, which reach everything.
+ */
+export function reachChoices(
+  design: PortalDesign,
+  pick: AiPick,
+  page: DesignerPage,
+  gates: Partial<PortalPageGates> = EVERY_GATE
+): ReachChoice[] {
+  if (pick.scope === 'site' || pick.scope === 'brand') return []
+  if (pick.element)
+    return [
+      { reach: 'every', words: `every ${singular(pick.element.element).toLowerCase()}` },
+      { reach: 'page', words: 'this page' },
+      ...(pick.element.part ? [{ reach: 'one' as const, words: 'just this one' }] : []),
+    ]
+  if (pick.blockId) return [{ reach: 'one', words: 'on Home' }]
+  if (pick.scope === 'band') {
+    const pages = designerPages(design, { ...EVERY_GATE, ...gates }).filter(
+      (each) => each !== 'post' && each !== 'status'
+    ).length
+    return [
+      { reach: 'every', words: `every page (${pages})` },
+      { reach: 'page', words: 'this page' },
+    ]
+  }
+  if (ON_EVERY_PAGE.has(pick.scope)) return [{ reach: 'every', words: 'every page' }]
+  return [{ reach: 'every', words: `on ${PAGE_NAMES[page]}` }]
+}
+
+const PAGES: readonly OverridePage[] = [
+  'home',
+  'feedback',
+  'roadmap',
+  'changelog',
+  'help',
+  'support',
+  'status',
+  'post',
+]
+const isPage = (word: string | undefined): word is OverridePage =>
+  !!word && (PAGES as readonly string[]).includes(word)
+
+/** The one page a field of the design is drawn on, or null for one shared by every page. */
+export function fieldPage(path: string): OverridePage | null {
+  const title = /^pages\.titles\.(\w+)/.exec(path)
+  if (title) return isPage(title[1]) ? title[1] : null
+  const own = /^pages\.(\w+)/.exec(path)
+  if (own) return isPage(own[1]) ? own[1] : null
+  const background = /^layout\.pageBackgrounds\.(\w+)/.exec(path)
+  if (background) return isPage(background[1]) ? background[1] : null
+  return null
+}
+
+const stable = (value: unknown) => JSON.stringify(value ?? null)
+
+/** The overrides one list has that the other has not, or holds otherwise. */
+function changedOverrides(before: unknown, after: unknown): StyleOverride[] {
+  const list = (value: unknown) => (Array.isArray(value) ? (value as StyleOverride[]) : [])
+  const was = new Map(list(before).map((o) => [o.id, stable(o)]))
+  const now = new Map(list(after).map((o) => [o.id, stable(o)]))
+  return [
+    ...list(after).filter((o) => was.get(o.id) !== stable(o)),
+    ...list(before).filter((o) => !now.has(o.id)),
+  ]
+}
+
+/** The pages each page background key changed is drawn on. */
+function changedBackgrounds(before: unknown, after: unknown): string[] {
+  const keyed = (value: unknown) =>
+    value && typeof value === 'object' ? (value as Record<string, unknown>) : {}
+  const [a, b] = [keyed(before), keyed(after)]
+  return [...new Set([...Object.keys(a), ...Object.keys(b)])].filter(
+    (key) => stable(a[key]) !== stable(b[key])
+  )
+}
+
+/** The pages a change lands on: some, or every one. */
+export function changePages(
+  design: PortalDesign,
+  change: { path: string; before: unknown; after: unknown }
+): 'every' | Set<OverridePage> {
+  if (change.path === 'overrides') {
+    const parts = new Map(allPartsOf(design).map((part) => [part.id, part]))
+    const pages = new Set<OverridePage>()
+    for (const o of changedOverrides(change.before, change.after)) {
+      if (o.target.scope === 'page') pages.add(o.target.page)
+      else {
+        const on = parts.get(o.target.part)?.pages ?? PAGES
+        if (on.length !== 1) return 'every'
+        pages.add(on[0]!)
+      }
+    }
+    return pages
+  }
+  if (change.path === 'layout.pageBackgrounds') {
+    const keys = changedBackgrounds(change.before, change.after)
+    return keys.every(isPage) ? new Set(keys) : 'every'
+  }
+  const page = fieldPage(change.path)
+  return page ? new Set([page]) : 'every'
+}
+
+/**
+ * A short clause for a reply whose changes land beyond the page shown: "on
+ * every page", or "on other pages too"; '' when they stay on it, and for
+ * the whole site, its styles and parts that are on every page anyway.
+ */
+export function reachClause(
+  design: PortalDesign,
+  changes: ReadonlyArray<{ path: string; before: unknown; after: unknown }>,
+  pick: { scope: DesignAiScope; page?: DesignerPage }
+): string {
+  if (pick.scope === 'site' || pick.scope === 'brand' || ON_EVERY_PAGE.has(pick.scope)) return ''
+  let other = false
+  for (const change of changes) {
+    const pages = changePages(design, change)
+    if (pages === 'every') return 'on every page'
+    if (pick.page && [...pages].some((page) => page !== pick.page)) other = true
+  }
+  return other ? 'on other pages too' : ''
+}
+
+/** A sentence with the reach clause before its full stop; as it was when there is none. */
+export function withReach(sentence: string, clause: string): string {
+  const said = sentence.trim()
+  if (!clause) return said
+  return `${said.replace(/[.!]+$/, '')}, ${clause}.`
+}
+
+/**
+ * What else the changes reach, for a pick narrower than the site: a shared
+ * field's other parts ("Also changes the corners of cards, fields and
+ * buttons."), said under Show changes.
+ */
+export function alsoNotes(
+  changes: ReadonlyArray<Pick<AppliedDesignChange, 'path'>>,
+  scope: DesignAiScope
+): string[] {
+  if (scope === 'site' || scope === 'brand') return []
+  return [...new Set(changes.flatMap((change) => alsoChanges(change.path) ?? []))]
+}
+
+/** A reply's first sentence: replies are one line. */
+export function oneSentence(text: string): string {
+  const said = text.trim()
+  const first = /^(.+?[.!?])\s+(?=[A-Z“"‘'(])/.exec(said)
+  return first ? first[1]! : said
+}
+
+/**
+ * What the model is told of how far a request may reach, beside what was
+ * picked; '' for everywhere the pick is.
+ */
+export function reachNote(
+  reach: AiReach | undefined,
+  page: DesignerPage | undefined,
+  part?: string | null
+): string {
+  if (!reach || reach === 'every') return ''
+  if (reach === 'one' && part)
+    return `Change just this one: op override with target part:${part}. Anything else is refused.`
+  if (reach === 'one') return 'Change just the block picked. Anything else is refused.'
+  if (!page) return ''
+  return `Change it only on the ${PAGE_NAMES[page]} page: an override on its parts there (target part:<id>) or on the page (target page:${page}), or that page's own settings. Anything every page shares is refused.`
+}
diff --git a/apps/web/src/lib/shared/design/ai-starters.ts b/apps/web/src/lib/shared/design/ai-starters.ts
index 5160e50034..fb03748c76 100644
--- a/apps/web/src/lib/shared/design/ai-starters.ts
+++ b/apps/web/src/lib/shared/design/ai-starters.ts
@@ -1,10 +1,23 @@
 /**
  * What Ask AI offers before the first request, from the design itself: to
  * match the brand until a match has run, and after that a few next edits
- * the design can take, none assuming a brand colour.
+ * the design can take, none assuming a brand colour. A part picked offers
+ * its own examples from the block registry; with nothing picked, the
+ * starters keep to the page open.
  */
+import { blockOf, SECTION_TYPES } from './blocks'
+import { sectionTypeOf } from './builder-chrome'
 import type { PortalDesign } from './schema'
-import type { PortalPageGates } from './paths'
+import type { DesignerPage, PortalPageGates } from './paths'
+
+/** Where the person is: the page open and the part picked on it, if any. */
+export interface StarterPlace {
+  page?: DesignerPage
+  selection?: string | null
+}
+
+/** Most starters offered at once. */
+const MOST = 3
 
 /** The chip that starts a brand match: it points at the box, it sends nothing. */
 export const MATCH_STARTER = 'Match my brand'
@@ -20,14 +33,45 @@ export function hasMatched(design: PortalDesign): boolean {
   return !!design.brand.matchedAt
 }
 
+/** The registry's type for a pick: the hero, a Home block by its type, or a page's section. */
+function typeOfPick(design: PortalDesign, selection: string): string | null {
+  if (selection === 'hero') return 'hero'
+  if (selection.startsWith('block-')) {
+    const id = selection.slice('block-'.length)
+    return design.pages.home.blocks.find((block) => block.id === id)?.type ?? null
+  }
+  return sectionTypeOf(selection)
+}
+
+/** The example requests the registry gives for the part picked; none for a part it has none for. */
+function pickedExamples(design: PortalDesign, selection: string | null | undefined): string[] {
+  const type = selection ? typeOfPick(design, selection) : null
+  return (type ? (blockOf(type)?.examples ?? []) : []).map((example) => example.request)
+}
+
 /** Up to three requests to start from; none is fine when nothing fits. */
-export function aiStarters(design: PortalDesign, gates?: Partial<PortalPageGates>): string[] {
+export function aiStarters(
+  design: PortalDesign,
+  gates?: Partial<PortalPageGates>,
+  at: StarterPlace = {}
+): string[] {
   if (!hasMatched(design)) return [MATCH_STARTER]
+  const picked = pickedExamples(design, at.selection)
+  if (picked.length) return picked.slice(0, MOST)
+  const page = at.page ?? 'home'
   const roadmapOnHome = design.pages.home.blocks.some((block) => block.type === 'roadmap')
   const corners = design.shape.corners
+  // The page's own sections, each by its first example, before what every page can take.
+  const sections =
+    page === 'home'
+      ? []
+      : SECTION_TYPES.filter((type) => blockOf(type)?.pages.includes(page)).flatMap(
+          (type) => blockOf(type)?.examples[0]?.request ?? []
+        )
   return [
-    design.mode !== 'dark' ? 'Try a dark hero' : null,
-    design.nav.home.on && !roadmapOnHome && gates?.roadmap !== false
+    ...sections,
+    design.mode !== 'dark' && page !== 'status' && page !== 'post' ? 'Try a dark hero' : null,
+    page === 'home' && design.nav.home.on && !roadmapOnHome && gates?.roadmap !== false
       ? 'Show the roadmap on Home'
       : null,
     corners === 'sharp'
@@ -35,5 +79,7 @@ export function aiStarters(design: PortalDesign, gates?: Partial<PortalPageGates
       : corners === 'pill'
         ? 'Squarer corners'
         : 'Square corners',
-  ].filter((starter): starter is string => !!starter)
+  ]
+    .filter((starter): starter is string => !!starter)
+    .slice(0, MOST)
 }
diff --git a/apps/web/src/lib/shared/design/change-spots.ts b/apps/web/src/lib/shared/design/change-spots.ts
new file mode 100644
index 0000000000..cfb10853a0
--- /dev/null
+++ b/apps/web/src/lib/shared/design/change-spots.ts
@@ -0,0 +1,189 @@
+/**
+ * Where a change shows on the canvas: the page it is on, the part of the
+ * page (a `data-qb-section` key, as the outline names parts), and for an
+ * element's style, the element and the state it is in. The builder outlines
+ * these after an AI step and from Show changes' Show. A change the whole
+ * portal takes at once, such as the brand colour or the corners, has no one
+ * spot to point at, and no spot.
+ */
+import { HERO_AI_PATHS } from './hero'
+import { patchesBetween } from './history'
+import { PAGE_NAMES } from './names'
+import type { DesignerPage } from './paths'
+import type { PortalDesign } from './schema'
+import { STATE_INFO, STYLE_ELEMENTS, type StyleElement, type StyleState } from './style-tokens'
+
+export interface ChangeSpot {
+  /** The page it is on; null where every page that draws the part shows it. */
+  page: DesignerPage | null
+  /** The part of the page, as `data-qb-section` marks it. */
+  section?: string
+  /** The element a style changed, drawn wherever it is. */
+  element?: StyleElement
+  /** The state a style changed, which the canvas forces to show it. */
+  state?: StyleState
+}
+
+/** A change as a request reports it. */
+export interface SpotChange {
+  path: string
+  before: unknown
+  after: unknown
+}
+
+/** The pages with a hero: every page but a post and the status page. */
+const HERO_PAGES: readonly DesignerPage[] = ['home', 'feedback', 'roadmap', 'changelog', 'help', 'support']
+
+/** The exact values each part keeps, as the element they style. */
+const TUNE_ELEMENTS: Record<string, StyleElement> = {
+  headline: 'headline',
+  heading: 'heading',
+  button: 'button',
+  card: 'card',
+  field: 'input',
+  subtitle: 'subtitle',
+  link: 'link',
+  secondary: 'secondary',
+  body: 'body',
+}
+
+/** Fields of a page's own sections, and the section each is drawn in. */
+const SECTION_FIELDS: Array<[RegExp, DesignerPage, string]> = [
+  [/^pages\.roadmap\b/, 'roadmap', 'board'],
+  [/^pages\.changelog\b/, 'changelog', 'entries'],
+  [/^pages\.help\.topics\b/, 'help', 'topics'],
+  [/^pages\.help\.popular\b/, 'help', 'popular'],
+  [/^pages\.help\.search\b/, 'help', 'hero'],
+  [/^pages\.feedback\.welcome\b/, 'feedback', 'welcome'],
+  [/^(pages\.feedback\.(copy|defaultSort)|layout\.postCardHides)\b/, 'feedback', 'feed'],
+  [/^layout\.filters\b/, 'feedback', 'filters'],
+  [/^pages\.feedback\.headline\b/, 'feedback', 'hero'],
+  [/^pages\.home\.headline\b/, 'home', 'hero'],
+]
+
+const HEADER = /^(layout\.(header|nav|navText|menuAlign|headerOnBand)|nav|brand\.logo)\b/
+
+const isPlain = (value: unknown): value is Record<string, unknown> =>
+  !!value && typeof value === 'object' && !Array.isArray(value)
+
+/** The fields inside a change whose values differ, as dotted paths. */
+function leaves(path: string, before: unknown, after: unknown, depth = 0): SpotChange[] {
+  if (depth < 4 && (isPlain(before) || isPlain(after))) {
+    const keys = new Set([
+      ...Object.keys(isPlain(before) ? before : {}),
+      ...Object.keys(isPlain(after) ? after : {}),
+    ])
+    return [...keys].flatMap((key) =>
+      leaves(
+        `${path}.${key}`,
+        isPlain(before) ? before[key] : undefined,
+        isPlain(after) ? after[key] : undefined,
+        depth + 1
+      )
+    )
+  }
+  return JSON.stringify(before ?? null) === JSON.stringify(after ?? null)
+    ? []
+    : [{ path, before, after }]
+}
+
+/** Home's blocks a change to their list made or changed, by id; one removed has no spot. */
+function blocksChanged(design: PortalDesign, change: SpotChange): ChangeSpot[] {
+  const at = /^pages\.home\.blocks\.(\d+)\b/.exec(change.path)
+  if (at) {
+    const id = design.pages.home.blocks[Number(at[1])]?.id
+    return id ? [{ page: 'home', section: `block-${id}` }] : []
+  }
+  const list = (value: unknown) =>
+    Array.isArray(value) ? (value as Array<{ id?: string }>) : []
+  const was = new Map(list(change.before).map((block) => [block.id, JSON.stringify(block)]))
+  return list(change.after)
+    .filter((block) => block.id && was.get(block.id) !== JSON.stringify(block))
+    .map((block) => ({ page: 'home', section: `block-${block.id}` }))
+}
+
+/** One field's spot, or null where the whole portal takes it. */
+function spotOfField(path: string): ChangeSpot | null {
+  const styled = /^(?:style|styleDark|stylePhone)\.(\w+)\.(\w+)\.\w+$/.exec(path)
+  if (styled) {
+    const [, element, state] = styled
+    if (!Object.hasOwn(STYLE_ELEMENTS, element!)) return null
+    return {
+      page: null,
+      element: element as StyleElement,
+      ...(state !== 'base' && Object.hasOwn(STATE_INFO, state!)
+        ? { state: state as StyleState }
+        : {}),
+    }
+  }
+  const tuned = /^tune\.(\w+)\./.exec(path)
+  if (tuned) return TUNE_ELEMENTS[tuned[1]!] ? { page: null, element: TUNE_ELEMENTS[tuned[1]!] } : null
+  for (const [field, page, section] of SECTION_FIELDS)
+    if (field.test(path)) return { page, section }
+  const titled = /^pages\.titles\.(roadmap|changelog|help|support)\b/.exec(path)
+  if (titled) return { page: titled[1] as DesignerPage, section: 'hero' }
+  if (HERO_AI_PATHS.some((field) => path === field || path.startsWith(`${field}.`)))
+    return { page: path.startsWith('pages.home.') ? 'home' : null, section: 'hero' }
+  if (path === 'brand.bandImage' || path.startsWith('brand.bandImage.'))
+    return { page: null, section: 'hero' }
+  if (HEADER.test(path)) return { page: null, section: 'header' }
+  const background = /^layout\.pageBackgrounds\.(\w+)\b/.exec(path)
+  if (background && Object.hasOwn(PAGE_NAMES, background[1]!))
+    return { page: background[1] as DesignerPage }
+  return null
+}
+
+const key = (spot: ChangeSpot) =>
+  [spot.page ?? '', spot.section ?? '', spot.element ?? '', spot.state ?? ''].join('|')
+
+/** Where a change shows, each spot once; none for a change the whole portal takes. */
+export function changeSpots(design: PortalDesign, change: SpotChange): ChangeSpot[] {
+  const spots =
+    change.path === 'pages.home.blocks' || change.path.startsWith('pages.home.blocks.')
+      ? blocksChanged(design, change)
+      : leaves(change.path, change.before, change.after).flatMap((leaf) => {
+          const spot = spotOfField(leaf.path)
+          return spot ? [spot] : []
+        })
+  const seen = new Set<string>()
+  return spots.filter((spot) => !seen.has(key(spot)) && !!seen.add(key(spot)))
+}
+
+/**
+ * The page a spot is shown on: its own, else the page shown when it draws
+ * the part, else the first page that does among those given.
+ */
+export function pageForSpot(
+  spot: ChangeSpot,
+  shown: DesignerPage,
+  pages: readonly DesignerPage[]
+): DesignerPage | null {
+  if (spot.page) return pages.includes(spot.page) ? spot.page : null
+  if (spot.section !== 'hero') return shown
+  if (HERO_PAGES.includes(shown)) return shown
+  return pages.find((page) => HERO_PAGES.includes(page)) ?? null
+}
+
+/** Where a request's changes show, each spot once. */
+export function spotsOfChanges(
+  design: PortalDesign,
+  changes: readonly SpotChange[]
+): ChangeSpot[] {
+  const seen = new Set<string>()
+  return changes
+    .flatMap((change) => changeSpots(design, change))
+    .filter((spot) => !seen.has(key(spot)) && !!seen.add(key(spot)))
+}
+
+/** Where what changed between two designs shows, such as an AI step's draft and the one before. */
+export function spotsBetween(before: PortalDesign, after: PortalDesign): ChangeSpot[] {
+  const [patches] = patchesBetween(before, after)
+  return spotsOfChanges(
+    after,
+    patches.map((patch) => ({
+      path: patch.path.join('.'),
+      before: undefined,
+      after: patch.op === 'remove' ? undefined : patch.value,
+    }))
+  )
+}
diff --git a/apps/web/src/lib/shared/design/design-ops.ts b/apps/web/src/lib/shared/design/design-ops.ts
index b4eeedbf22..e8850b0fef 100644
--- a/apps/web/src/lib/shared/design/design-ops.ts
+++ b/apps/web/src/lib/shared/design/design-ops.ts
@@ -102,7 +102,10 @@ import {
   type StyleElement,
   type StyleProp,
 } from './style-tokens'
+import { changePages, type AiReach } from './ai-reach'
+import type { OverridePage } from './style-overrides'
 import {
+  overrideInReach,
   overrideInScope,
   overrideLabel,
   readOverrideOp,
@@ -1636,12 +1639,20 @@ export interface OpScope {
   blockId?: string
   /** An element picked on the canvas: its kind, and the part it is (null for one of many). */
   element?: { element: StyleElement; part: string | null }
+  /**
+   * How far the request may reach from the pick, as the composer's chip says
+   * it: just the part, the page shown, or everywhere the pick is (the default).
+   */
+  reach?: AiReach
+  /** The page shown, which a reach of one page or one part keeps to. */
+  page?: OverridePage
 }
 
-/** Whether an operation stays within what was picked. */
+/** Whether an operation stays within what was picked, and as far as the request may reach. */
 function opInScope(
   op: FlatOp,
   before: PortalDesign,
+  after: PortalDesign,
   fields: readonly string[],
   within: OpScope
 ): boolean {
@@ -1654,13 +1665,35 @@ function opInScope(
       : named
         ? readOverrideOp(before, named.target, named.key, readValue(named.value))
         : null
-  if (override?.ok) return overrideInScope(override.read, within)
+  if (override?.ok)
+    return overrideInScope(override.read, within) && overrideInReach(override.read, within)
   if (within.blockId) {
     if (!['set', 'move', 'resize', 'remove'].includes(op.op)) return false
     const found = findBlock(before, op.target)
     return found.ok && found.block.id === within.blockId
   }
-  return fields.every((field) => pathInScope(field, within.scope))
+  if (!fields.every((field) => pathInScope(field, within.scope))) return false
+  return fieldsInReach(before, after, fields, within)
+}
+
+/**
+ * Whether changed fields stay as near as the request may reach: anywhere
+ * for every page; for one page or one part, only fields drawn on the page
+ * shown, never one every page shares.
+ */
+function fieldsInReach(
+  before: PortalDesign,
+  after: PortalDesign,
+  fields: readonly string[],
+  within: OpScope
+): boolean {
+  if (!within.reach || within.reach === 'every') return true
+  const page = within.page
+  if (!page) return false
+  return fields.every((path) => {
+    const pages = changePages(after, { path, before: read(before, path), after: read(after, path) })
+    return pages !== 'every' && [...pages].every((each) => each === page)
+  })
 }
 
 export interface OpsOutcome {
@@ -1708,7 +1741,7 @@ export function applyOps(
       continue
     }
     const fields = changedFields(current, result.design)
-    if (!opInScope(op, current, fields, within)) {
+    if (!opInScope(op, current, result.design, fields, within)) {
       outcome.outOfScope.push(op)
       continue
     }
diff --git a/apps/web/src/lib/shared/design/history.ts b/apps/web/src/lib/shared/design/history.ts
index 07b14646fc..1e64fce379 100644
--- a/apps/web/src/lib/shared/design/history.ts
+++ b/apps/web/src/lib/shared/design/history.ts
@@ -2,8 +2,10 @@
  * The builder's history: every change as a labelled step of patches, so undo
  * and redo replay exactly what changed. A quick burst of the same change,
  * such as typing, merges into one step; a group, such as a drag or an AI
- * reply, is one step however many changes it makes. Only so many steps are
- * kept.
+ * reply, is one step however many changes it makes. A change made by hand
+ * while the AI works is never part of the AI's step: the AI's step so far
+ * closes, the hand's change is a step of its own, and what the AI changes
+ * after it is one more step under the AI's name. Only so many steps are kept.
  */
 import { createStore } from 'zustand/vanilla'
 import { enablePatches, Immer, type Draft, type Patch } from 'immer'
@@ -64,11 +66,15 @@ export function patchesBetween<T extends object>(before: T, after: T): [Patch[],
 
 const apply = <T>(doc: T, patches: Patch[]): T => immer.applyPatches(doc as object, patches) as T
 
+/** Who made a change: a person in the builder, or Quackback AI. */
+export type Author = 'person' | 'ai'
+
 interface Group {
   label: string
   depth: number
   patches: Patch[]
   inversePatches: Patch[]
+  by: Author
 }
 
 export interface HistoryState {
@@ -76,14 +82,22 @@ export interface HistoryState {
   future: HistoryStep[]
   /** A group still open, whose changes become one step when it ends. */
   group: Group | null
+  /** A person's group, such as a drag, opened while the AI's is open: a step of its own. */
+  side: Group | null
   /** The last step pushed, and when, to merge a burst of the same change. */
   last: { label: string; at: number } | null
-  /** Records a change; one that changed nothing is not a step. */
-  push: (label: string, patches: Patch[], inversePatches: Patch[], at?: number) => void
+  /** Records a change, a person's unless said; one that changed nothing is not a step. */
+  push: (
+    label: string,
+    patches: Patch[],
+    inversePatches: Patch[],
+    at?: number,
+    by?: Author
+  ) => void
   /** Opens a group; groups nest, and the outermost names the step. */
-  begin: (label: string) => void
+  begin: (label: string, by?: Author) => void
   /** Closes a group, recording it as one step once the outermost ends. */
-  end: () => void
+  end: (by?: Author) => void
   /** Takes back the last step from a document, or null with nothing to undo. */
   undo: <T>(doc: T) => { doc: T; label: string } | null
   /** Puts back the last step undone, or null with nothing to redo. */
@@ -122,48 +136,76 @@ export function createHistory({
         last: at === null ? null : { label: step.label, at },
       })
     }
+    const stepOf = (group: Group): HistoryStep => ({
+      label: group.label,
+      patches: group.patches,
+      inversePatches: group.inversePatches,
+    })
+    const joined = (group: Group, patches: Patch[], inversePatches: Patch[]): Group => ({
+      ...group,
+      patches: [...group.patches, ...patches],
+      inversePatches: [...inversePatches, ...group.inversePatches],
+    })
+    /** Records what the AI's open group holds so far as its own step; the group stays open. */
+    const cut = () => {
+      const { group } = get()
+      if (!group?.patches.length) return
+      set({ group: { ...group, patches: [], inversePatches: [] } })
+      record(stepOf(group), null)
+    }
+    /** Whether a change is a person's made while the AI's group is open. */
+    const byHandDuringAi = (by: Author) => get().group?.by === 'ai' && by !== 'ai'
     /** Closes any open group at once, as undo and redo need a settled history. */
     const settle = () => {
-      const { group } = get()
-      if (!group) return
-      set({ group: null })
-      if (group.patches.length)
-        record(
-          { label: group.label, patches: group.patches, inversePatches: group.inversePatches },
-          null
-        )
+      const { group, side } = get()
+      if (!group && !side) return
+      set({ group: null, side: null })
+      for (const open of [group, side])
+        if (open?.patches.length) record(stepOf(open), null)
     }
     return {
       past: [],
       future: [],
       group: null,
+      side: null,
       last: null,
-      push: (label, patches, inversePatches, at = Date.now()) => {
+      push: (label, patches, inversePatches, at = Date.now(), by = 'person') => {
         if (!patches.length) return
-        const { group } = get()
-        if (group)
-          return set({
-            group: {
-              ...group,
-              patches: [...group.patches, ...patches],
-              inversePatches: [...inversePatches, ...group.inversePatches],
-            },
-          })
+        const { group, side } = get()
+        // A person's group opened while the AI worked holds their changes until it ends.
+        if (by !== 'ai' && side) return set({ side: joined(side, patches, inversePatches) })
+        if (byHandDuringAi(by)) {
+          cut()
+          return record({ label, patches, inversePatches }, at)
+        }
+        if (group) return set({ group: joined(group, patches, inversePatches) })
         record({ label, patches, inversePatches }, at)
       },
-      begin: (label) => {
-        const { group } = get()
+      begin: (label, by = 'person') => {
+        const { group, side } = get()
+        if (by !== 'ai' && side) return set({ side: { ...side, depth: side.depth + 1 } })
+        if (byHandDuringAi(by)) {
+          cut()
+          return set({ side: { label, depth: 1, patches: [], inversePatches: [], by } })
+        }
         set({
           group: group
             ? { ...group, depth: group.depth + 1 }
-            : { label, depth: 1, patches: [], inversePatches: [] },
+            : { label, depth: 1, patches: [], inversePatches: [], by },
         })
       },
-      end: () => {
-        const { group } = get()
+      end: (by = 'person') => {
+        const { group, side } = get()
+        if (by !== 'ai' && side) {
+          if (side.depth > 1) return set({ side: { ...side, depth: side.depth - 1 } })
+          set({ side: null })
+          if (side.patches.length) record(stepOf(side), null)
+          return
+        }
         if (!group) return
         if (group.depth > 1) return set({ group: { ...group, depth: group.depth - 1 } })
-        settle()
+        set({ group: null })
+        if (group.patches.length) record(stepOf(group), null)
       },
       undo: (doc) => {
         settle()
@@ -189,7 +231,7 @@ export function createHistory({
       },
       undoLabel: () => get().past.at(-1)?.label ?? null,
       redoLabel: () => get().future.at(-1)?.label ?? null,
-      clear: (past = []) => set({ past, future: [], group: null, last: null }),
+      clear: (past = []) => set({ past, future: [], group: null, side: null, last: null }),
     }
   })
 }
diff --git a/apps/web/src/lib/shared/design/override-ops.ts b/apps/web/src/lib/shared/design/override-ops.ts
index 5e65da0b3a..5a32bf919f 100644
--- a/apps/web/src/lib/shared/design/override-ops.ts
+++ b/apps/web/src/lib/shared/design/override-ops.ts
@@ -393,11 +393,20 @@ const SCOPE_PARTS: Partial<Record<DesignAiScope, readonly string[]>> = {
  */
 export function overrideInScope(
   o: OverrideOp,
-  within: { scope: DesignAiScope; blockId?: string }
+  within: {
+    scope: DesignAiScope
+    blockId?: string
+    element?: { element: StyleElement; part: string | null }
+  }
 ): boolean {
   const { scope, blockId } = within
   if (scope === 'site' || scope === 'brand') return true
   const { where } = o
+  // An element picked: every one of its kind, those on a page, or the one picked, as its panel offers.
+  if (within.element && o.element === within.element.element) {
+    if (where.kind === 'everywhere' || where.kind === 'page') return true
+    if (where.kind === 'part' && where.part.id === within.element.part) return true
+  }
   if (blockId)
     return (
       (where.kind === 'block' && where.block === blockId) ||
@@ -420,6 +429,70 @@ export function overrideInScope(
   }
 }
 
+/**
+ * Whether an override stays as near as the request may reach: anywhere for
+ * every page; on the page shown (its page, a part only there, a Home block
+ * on Home) for one page; the part picked, or the Home block picked, for one.
+ */
+export function overrideInReach(
+  o: OverrideOp,
+  within: {
+    blockId?: string
+    element?: { part: string | null }
+    reach?: 'one' | 'page' | 'every'
+    page?: OverridePage
+  }
+): boolean {
+  const { reach, page } = within
+  if (!reach || reach === 'every') return true
+  const { where } = o
+  if (reach === 'one') {
+    const part = within.element?.part
+    if (part) {
+      if (where.kind === 'part') return where.part.id === part
+      // A Home block's slot is written as the block's own look.
+      if (where.kind === 'block') return part.startsWith(`block.${where.block}.`)
+      return false
+    }
+    if (within.blockId)
+      return (
+        (where.kind === 'block' && where.block === within.blockId) ||
+        (where.kind === 'part' && where.part.block === within.blockId)
+      )
+  }
+  if (!page) return false
+  switch (where.kind) {
+    case 'page':
+      return where.page === page
+    case 'part':
+      return where.part.pages.length === 1 && where.part.pages[0] === page
+    case 'block':
+      return page === 'home'
+    case 'everywhere':
+      return false
+  }
+}
+
+/**
+ * The parts a picked section holds that are drawn as an element kind, on
+ * the page given or on every page: the hero's buttons for a hover asked of
+ * the hero, so a style lands on them as overrides, never on every button.
+ */
+export function pickedParts(
+  design: PortalDesign,
+  scope: DesignAiScope,
+  element: StyleElement,
+  page?: OverridePage
+): PartInfo[] {
+  const starts = SCOPE_PARTS[scope] ?? []
+  return partsOf(design).filter(
+    (part) =>
+      starts.some((start) => part.id.startsWith(start)) &&
+      (part.elements as readonly string[]).includes(element) &&
+      (!page || (part.pages.length === 1 && part.pages[0] === page))
+  )
+}
+
 /* What the AI is told */
 
 /**