# T711 — watch brand product selector

> Status: `done`  
> Milestone: `M1` · Phase B  
> Kind: `feat` · Est. change: `~190 lines`

## Goal

讓使用者在 watch 表單先選自己的 Brand，再選該 Brand 下的 Product，並建立 product watch。

## Depends on

- T710

## Inputs

- `apps/web/src/pages/RadarWatchesPage.tsx`
- 既有 Scout brand／product repository
- `../spec.md` §4.1、驗收 #1、#13

## Outputs

| 路徑 | 動作 | 說明 |
|------|------|------|
| `apps/web/src/pages/RadarWatchesPage.tsx` | edit | 串接 selector、loading／empty／ownership states |
| `apps/web/src/components/radar/ProductWatchForm.tsx` | add | product watch 表單與成對 ID submit |
| `apps/web/src/lib/i18n/messages.ts` | edit | TC／EN 文案 |
| `apps/web/src/pages/RadarWatchesPage.test.tsx` | edit | 選擇與錯誤互動 |

## Behavior

- 換 Brand 會清除不屬於它的 Product。
- 沒有 Brand／Product 不可啟用；新 UI 不提供 generic 建立。
- 只顯示 owner 可讀資料，不在 UI 推測跨 owner 錯誤內容。

## Out of scope

- 建議詞與完整度（T712）
- live mapping（T760）

## Acceptance

- [x] Brand A 不會提交 Brand B 的 Product。

```bash
cd apps/web && npm run test -- RadarWatchesPage && npm run build
```

Implementation result (2026-08-10): added paired Brand → Product selectors,
owner-scoped product loading, reset-on-brand-change behavior, and product watch
payloads while retaining the legacy generic test injection path.
