feat(feedback): add the Web surface for message feedback

Consume the durable message-feedback sidecar from #2217 in the browser:
per-message Like/Dislike with an optional note, contributed through a
declared assistant-actions slot.

- carry MessageId on finalized AssistantMessageNode so a target is nameable
- declare conversation.chat.assistant-actions and render it in the
  IconActions row between copy and branch
- hold one FeedbackController per Session with per-item ifVersion CAS,
  reconciling a version-conflict from the reply's authoritative item
- mount messageFeedbackRemote alongside goalsRemote

apps/web/tests/message-feedback.e2e.ts

@@ -0,0 +1,121 @@
+// Keyless browser regression for durable per-message feedback. Cold-seeds a
+// settled two-turn transcript (zero model calls), rates one assistant message,
+// attaches a note, proves both survive a full page reload from the Host's
+// message-feedback sidecar, then retracts the rating.
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import type { Browser, Page } from 'playwright'
+import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
+import {
+  acknowledgeReloadConnectionLoss, launchWebScaffold,
+  seedSession, watchConsole, webSnapshotMode, type WebScaffold,
+} from './scaffold.ts'
+import { newEnglishPage, saveFailureShot } from './support.ts'
+
+// Borrowed read-only: this scenario needs any settled assistant message to
+// address, not a new recording (message-actions / sidebar-scrollbar pattern).
+const SEED = fileURLToPath(new URL('./snapshots/seeded-history/seed.jsonl', import.meta.url))
+const MODE = webSnapshotMode()
+const SEED_ID = 'message-feedback-web-e2e'
+const NOTE = 'Read both files before answering.'
+
+describe('web e2e: durable per-message feedback', () => {
+  let scaffold: WebScaffold
+  let browser: Browser
+  let page: Page
+  let tripwire: ReturnType<typeof watchConsole>
+
+  beforeAll(async () => {
+    scaffold = await launchWebScaffold({})
+    await seedSession(scaffold, await readFile(SEED, 'utf8'), SEED_ID)
+    browser = await chromium.launch()
+    page = await newEnglishPage(browser)
+    tripwire = watchConsole(page)
+    await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
+    await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
+  }, 120_000)
+
+  afterAll(async () => {
+    await browser?.close()
+    await scaffold?.close()
+  })
+
+  /**
+   * Open the seeded transcript. The first treeitem is the collapsible group
+   * row; the session itself is the row beneath it. The group is already
+   * expanded on a fresh load, so clicking it unconditionally would collapse it
+   * and hide the session row.
+   */
+  async function openSeededSession(): Promise<void> {
+    const groupRow = page.locator('[role="treeitem"]').first()
+    await groupRow.waitFor({ timeout: 15_000 })
+    if (await groupRow.getAttribute('aria-expanded') !== 'true') await groupRow.click()
+    const sessionRow = page.locator('[role="treeitem"]').nth(1)
+    await sessionRow.waitFor({ timeout: 15_000 })
+    await sessionRow.click()
+  }
+
+  it.skipIf(MODE === 'record')('persists a rating and its note across a reload, then retracts', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-message-feedback'))
+    await openSeededSession()
+
+    // The controls live in the assistant message's IconActions row, which the
+    // transcript reveals on hover/focus like copy and branch. Wait for the
+    // settled closing text first: the strip mounts with that turn's tail.
+    await page.getByText('DONE', { exact: true }).waitFor({ timeout: 30_000 })
+    const like = page.getByRole('button', { name: 'Good response' }).first()
+    await like.waitFor({ timeout: 30_000 })
+    await like.scrollIntoViewIfNeeded()
+    await like.hover()
+    await like.click()
+    // A recorded rating relabels the button to what the next click would do,
+    // so the pressed control is addressed by the retract label from here on.
+    const rated = page.getByRole('button', { name: 'Remove rating' }).first()
+    await expect.poll(() => rated.getAttribute('aria-pressed'), { timeout: 10_000 }).toBe('true')
+
+    // A rated message offers the note editor; an unrated one does not.
+    await page.getByRole('button', { name: 'Add a note' }).first().click()
+    const editor = page.getByRole('textbox', { name: 'Feedback note' })
+    await editor.fill(NOTE)
+    await page.getByRole('button', { name: 'Save', exact: true }).click()
+    await expect.poll(() => editor.count(), { timeout: 10_000 }).toBe(0)
+    await page.getByText(NOTE, { exact: true }).waitFor({ timeout: 10_000 })
+
+    // The durable assertion: a cold browser re-reads the sidecar over the wire.
+    const warningStart = tripwire.warnings.length
+    await page.reload({ waitUntil: 'load' })
+    acknowledgeReloadConnectionLoss(tripwire, warningStart)
+    await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
+    await openSeededSession()
+    await page.getByText('DONE', { exact: true }).waitFor({ timeout: 30_000 })
+
+    // The controller defers its list read to the first hover or focus, so a
+    // cold reload shows the unrated label until the strip is touched. Hovering
+    // the unrated control is what triggers the authoritative re-read.
+    const cold = page.getByRole('button', { name: 'Good response' }).first()
+    await cold.waitFor({ timeout: 30_000 })
+    await cold.scrollIntoViewIfNeeded()
+    await cold.hover()
+
+    const restored = page.getByRole('button', { name: 'Remove rating' }).first()
+    await restored.waitFor({ timeout: 30_000 })
+    await restored.scrollIntoViewIfNeeded()
+    await restored.hover()
+    await expect.poll(() => restored.getAttribute('aria-pressed'), { timeout: 15_000 }).toBe('true')
+    await page.getByText(NOTE, { exact: true }).waitFor({ timeout: 10_000 })
+
+    // Re-clicking the active rating retracts it, and the note goes with it.
+    await restored.click()
+    await expect.poll(
+      () => page.getByRole('button', { name: 'Good response' }).first().getAttribute('aria-pressed'),
+      { timeout: 10_000 },
+    ).toBe('false')
+    await expect.poll(() => page.getByText(NOTE, { exact: true }).count(), { timeout: 10_000 }).toBe(0)
+  }, 90_000)
+
+  it.skipIf(MODE === 'record')('kept the console clean', () => {
+    expect(tripwire.pageErrors).toEqual([])
+    expect(tripwire.warnings).toEqual([])
+  })
+})

apps/web/tests/snapshots/code-mode-round/ui.expected.md

@@ -33,6 +33,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/cordis-tool-round/ui.expected.md

@@ -48,6 +48,10 @@
 - paragraph: CORDIS_UI_DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/feedback-command/ack.expected.md

@@ -20,6 +20,10 @@
 - paragraph: LIGHTHOUSE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/fresh-round-trip/ui.expected.md

@@ -28,6 +28,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/goal-multi-turn-actions/ui.expected.md

@@ -77,6 +77,10 @@
 - paragraph: 这是一个很典型的轻量 TypeScript 包结构：入口 + 实现 + 测试。这一轮到此结束，等系统开启下一个 turn。
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s
@@ -186,6 +190,10 @@
   - text: ）的结构，或者其他格式的输出（比如带文件大小的树形图），随时告诉我。
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - tooltip "Branch into a new conversation"

apps/web/tests/snapshots/lifecycle-chrome/reloaded.expected.md

@@ -20,6 +20,10 @@
 - paragraph: LIGHTHOUSE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/live-interactions/retry.expected.md

@@ -22,6 +22,10 @@
 - paragraph: Event sourcing is a pattern where all changes to an application's state are stored as an immutable, append-only sequence of events, rather than persisting only the current state, enabling full auditability, temporal queries, and event-driven architectures.
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/markdown-cjk-strong/ui.expected.md

@@ -35,6 +35,10 @@
 - paragraph: CJK_STRONG_DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}}

apps/web/tests/snapshots/markdown-images/ui.expected.md

@@ -14,6 +14,10 @@
 - paragraph: REMOTE_IMAGE_DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}}

apps/web/tests/snapshots/markdown-inline-code-links/ui.expected.md

@@ -26,6 +26,10 @@
 - paragraph: INLINE_CODE_LINK_DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}}

apps/web/tests/snapshots/math-rendering/ui.expected.md

@@ -30,6 +30,10 @@
 - paragraph: MATH_RENDERING_DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}}

apps/web/tests/snapshots/message-actions/ui.expected.md

@@ -15,6 +15,10 @@
 - paragraph: I will read both files before answering.
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation" [disabled]:
   - img
 - text: Available only on the last message of a completed turn 7/25 {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s
@@ -38,6 +42,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: 7/25 {{clock}} Ran for {{duration}}

apps/web/tests/snapshots/plan-review/approved.expected.md

@@ -33,6 +33,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/question-composer/answered.expected.md

@@ -28,6 +28,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/seeded-history/command-row.expected.md

@@ -28,6 +28,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: 7/25 {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/seeded-history/feedback-row.expected.md

@@ -28,6 +28,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: 7/25 {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/seeded-history/ui.expected.md

@@ -28,6 +28,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: 7/25 {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/skill-tool-row/ui.expected.md

@@ -31,6 +31,10 @@
 - paragraph: DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{date}} {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/skill-user-invoke/ui.expected.md

@@ -20,6 +20,10 @@
 - paragraph: USER_INVOKE_REPLY acknowledged; following the injected skill.
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/steer-all/settled.expected.md

@@ -30,6 +30,10 @@
 - paragraph: "Got it: BANANA and ORANGE."
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/steering/settled.expected.md

@@ -31,6 +31,10 @@
 - paragraph: Great, let's move forward. BANANA!
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/subagent-conversation/ui.expected.md

@@ -25,6 +25,10 @@
 - paragraph: Event sourcing is a pattern where all changes to an application's state are stored as an immutable, append-only sequence of events, rather than persisting only the current state, enabling full auditability, temporal queries, and event-driven architectures.
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s Now give the same explanation to a human reader. {{clock}}
@@ -37,6 +41,10 @@
 - paragraph: Event sourcing is a pattern where all changes to an application's state are stored as an immutable, append-only sequence of events, rather than persisting only the current state, enabling full auditability, temporal queries, and event-driven architectures.
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tests/snapshots/web-search-round/ui.expected.md

@@ -20,6 +20,10 @@
 - paragraph: SEARCH_DONE
 - button "Copy":
   - img
+- button "Good response":
+  - img
+- button "Bad response":
+  - img
 - button "Branch into a new conversation":
   - img
 - text: {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s

apps/web/tsconfig.json

@@ -53,6 +53,7 @@
     "tests/cordis-tool-round.e2e.ts",
     "tests/web-search-round.e2e.ts",
     "tests/message-actions.e2e.ts",
+    "tests/message-feedback.e2e.ts",
     "tests/markdown-images.e2e.ts",
     "tests/math-rendering.e2e.ts",
     "tests/markdown-cjk-strong.e2e.ts",