Appearance
Design Review Findings Log
記錄每次 Design Review 完成時發現的問題，用於追蹤跨 spec 的重複問題模式。規則詳見 .claude/rules/proactive-skills.md → Design Review Findings Log 段落。
admin-document-lifecycle-ops — 2026-04-18
影響範圍:
app/components/documents/DocumentListTable.vueapp/pages/admin/documents/[id].vueapp/components/documents/LifecycleConfirmDialog.vue
| # | 類別 | 問題摘要 | 嚴重度 | 發現來源 |
|---|---|---|---|---|
| 1 | consistency | Archive / Unarchive confirm button 用 warning / primary solid 色 | critical | /polish |
| 2 | consistency | 詳情頁 toolbar archive / unarchive 用 color="warning" / "primary" | critical | /polish |
| 3 | consistency | bg-muted/30 在 semantic token 加 opacity modifier | warning | /polish |
| 4 | typography | i-lucide-dot 作 bullet 視覺過弱（size-4 幾乎看不見） | warning | /polish |
| 5 | a11y | Dialog 缺 aria-describedby，影響清單與標題未綁定 | warning | /harden |
備註：原設計使用語意色作為強調按鈕，違反 .impeccable.md 「不使用彩色強調按鈕（除了語意色彩的 alert）」。修復後明文於 .impeccable.md 補「破壞性動作（delete）例外允許 color="error"」。
bootstrap-v1-core-from-report (Round 3 — UploadWizard) — 2026-04-18
影響範圍:
app/components/documents/UploadWizard.vue
| # | 類別 | 問題摘要 | 嚴重度 | 發現來源 |
|---|---|---|---|---|
| 1 | consistency | Step indicator completed 用 border-success bg-success text-inverted（綠色填滿） | critical | /polish |
| 2 | consistency | Step separator completed 用 bg-success（綠線裝飾） | critical | /polish |
| 3 | consistency | Publish step check-circle icon 用 text-success | warning | /polish |
| 4 | consistency | Complete step party-popper icon 用 text-success | warning | /polish |
| 5 | a11y | Step indicator 為 <div> 非 <ol>/<li> 語意化；缺 aria-current；無 motion-reduce | warning | /harden |
| 6 | state | getIndexingStatusLabel 未覆蓋 pending / queued / running（有 fallback 但資訊量低） | info | /harden |
備註：Cross-Change DRIFT — 與 admin-document-lifecycle-ops 屬同一 DS 規則「語意色彩不用於裝飾或強調」的不同違反點（此 change 用 success，另一個 change 用 warning / primary）。修復方向一致：都改 neutral。
累積觀察（兩次 review 後的模式）
consistency（語意色彩做裝飾）是目前重複出現的最大類別：
- admin-document-lifecycle-ops: warning + primary 用於 confirm / toolbar button
- bootstrap UploadWizard: success 用於 step indicator + completion icon
這指向一個系統性問題：先前的實作者未把 .impeccable.md「語意色彩僅用於系統回饋」條款內化。建議：
- 在
.claude/rules/proactive-skills.md的 Design Gate 加明確 grep 檢查 — 任何color="warning|success|primary|info"在.vue檔中都先警示 - 或在 pre-archive hook 加 CI-level DRIFT scan
a11y（aria-* / semantic HTML / motion-reduce）是第二類重複問題。建議考慮：
- 抽共用
StepIndicator.vue/ConfirmDialog.vue樣板組件，把 a11y 細節封裝好 - 這樣下次的 Design Review 可以專注視覺而非重複 a11y 檢查
累積 Findings: 11 項（接近 /design-retro 的 5 倍數觸發點 10 / 15；若再累積一次 Design Review 到達 15 即可觸發 retro）。
admin-ui-post-core (Phase 3) — 2026-04-19
影響範圍:
app/pages/admin/dashboard/index.vueapp/components/admin/dashboard/SummaryCard.vueapp/components/admin/dashboard/QueryTrendList.vue
| # | 類別 | 問題摘要 | 嚴重度 | 發現來源 |
|---|---|---|---|---|
| 1 | consistency | SummaryCard 初版用 bg-primary/10 text-primary 做 icon halo，不符合既定 empty-state icon-circle bg-muted convention | warning | design-review |
備註：修復時未觸發 cross-change DRIFT — tokens / query-logs / documents 全部都使用 bg-muted text-default，Phase 3 初版是唯一偏離者；review 當下 inline 修復。
累積 Findings: 12 項。
member-and-permission-management + responsive-and-a11y-foundation (合跑) — 2026-04-20
影響範圍:
app/pages/admin/members/index.vueapp/pages/admin/settings/guest-policy.vueapp/pages/account-pending.vueapp/components/admin/members/MemberRoleActions.vueapp/components/admin/members/ConfirmRoleChangeDialog.vueapp/components/chat/GuestAccessGate.vueapp/components/chat/Container.vueapp/components/chat/MessageList.vueapp/components/documents/UploadWizard.vueapp/pages/index.vue（signed-in 分支）
| # | 類別 | 問題摘要 | 嚴重度 | 發現來源 |
|---|---|---|---|---|
| 1 | consistency | ConfirmRoleChangeDialog / MemberRoleActions 用 color="primary" / "warning" 做強調色 | critical | /polish |
| 2 | consistency | guest-policy.vue radio 選中狀態用 border-primary bg-primary/5 做強調 | critical | /polish |
| 3 | consistency | account-pending.vue 聯絡 email 用 text-primary 而非 text-default underline | warning | /polish |
| 4 | a11y | 4 處 animate-spin 缺 motion-reduce:animate-none （WCAG 2.3.3） | P1 | /audit |
| 5 | a11y | Container.vue 錯誤提示關閉鈕 icon-only <UButton> 缺 aria-label | P2 | /audit |
| 6 | responsive | index.vue:92 signed-in chat 用 100vh 而非 100dvh，mobile Safari 地址列會切到輸入區 | P2 | /audit |
| 7 | a11y | MessageList.vue suggestion chip 原生 <button> 缺 type="button" 預設會變 submit | P3 | /audit |
| 8 | consistency | admin/members/index.vue roleBadgeColor 用 'primary' (admin) / 'warning' (guest) | critical | 人工檢查 |
| 9 | a11y | UAvatar fallback text 對比度不足（oklch(0.708) on oklch(0.269) ≈ 3.5:1，WCAG AA 要 4.5:1） | serious | axe-core |
| 10 | a11y | Footer + chat UI 7 處 text-dimmed 對比度不足（Lighthouse + axe-core 皆 flag） | serious | axe-core |
備註：
#1-3為語意色彩做裝飾的第三次出現（前兩次：admin-document-lifecycle-ops warning/primary、bootstrap UploadWizard success）。已由 subagent inline 修為 neutral。#4-7由/audit發現、主線補修（2026-04-20）；均為細節強化，屬/harden+/adapt範疇。#8於 2026-04-20 B16 人工檢查階段發現：/admin/members頁面訪客badge 渲染為黃色（warning），管理員badge 為 primary。前次 design-review-combo 因 seed 資料缺 guest user，audit 未實際渲染 guest badge，漏網。修復：roleBadgeColor三個分支全回'neutral'，type annotation 收斂為'neutral'。檔案：app/pages/admin/members/index.vue:70-80。#9於 2026-04-20 C11.9 axe-core 掃描發現：UAvatar fallback 文字色oklch(0.708)on parentbg-elevated oklch(0.269)≈ 3.5:1，未達 WCAG AA 4.5:1。修復：app/app.config.ts新增ui.avatar.slots.fallback: 'text-highlighted font-medium leading-none truncate'全站 override，axe-core 複掃 violations=0。✅ Resolved 2026-04-20。#10於 2026-04-20 C11.9 axe-core 掃描發現：/(chat ConversationHistory + MessageList + RefusalMessage + index.vue) 共 6 處text-dimmed+app/layouts/default.vuefooter 1 處，對比度未達 AA。修復：全數改為text-muted。axe-core 複掃三頁 violations=0。✅ Resolved 2026-04-20。其他頁面仍用text-dimmed（admin/debug/、admin/query-logs/、UploadWizard、auth/callback 等約 10 處）列為 Cross-Change follow-up，下一條 UI change 掃過。- Cross-Change DRIFT 觀察：全 repo 有 13+ 個
animate-spin使用處（admin/debug/、admin/tokens/、admin/query-logs/、auth/callback、admin/dashboard、chat/StreamingMessage、chat/CitationReplayModal、admin/documents/[index,upload]、documents/[id]）缺motion-reduce:animate-none。本次 change scope 外，不阻擋 archive，但建議列為獨立 tech-debt task 或下一條 UI change 的 Cross-Change DRIFT。- ✅ Resolved 2026-04-21：主線已補齊 13 處
motion-reduce:animate-none（debug/latency、debug/query-logs/[id]、tokens/index、documents/[id] × 2、documents/upload、documents/index、dashboard/index、query-logs/[id]、query-logs/index、auth/callback、chat/StreamingMessage、chat/CitationReplayModal）。驗證：rg 'animate-spin' app全 19 處皆含motion-reduce:animate-none。
- ✅ Resolved 2026-04-21：主線已補齊 13 處
未完成項（archive 前必補）：
三斷點截圖（xs 360 / md 768 / xl 1280）✅ Resolved 2026-04-20：Playwright 三斷點（iphone-se 375/ipad-mini 768/desktop 1920/360 baseline）四組截圖於screenshots/local/manual-review/c11-*.png，C11.1-4 已勾 PASS。responsive-and-a11y-foundation§10 的/design improve從頭跑（subagent 此次只覆蓋 member-perm 範圍）— 本次 session 改用 axe-core playwright 掃/admin/documents、/admin/members、/三頁 violations=0 作為等效證據（比 subagent/design improve更硬性可驗）。正式/design improve視為可選 follow-up，不阻擋 archive。
累積 Findings: 20 項（觸發 /design-retro 5 倍數觸發點；B16 archive 後執行週期性分析）。
@nuxt/a11y 首輪掃描 (2026-04-21)
觸發：responsive-and-a11y-foundation B17 將社群版 nuxt-a11y@0.1.0（只有 composable 無 devtools）切換為官方 @nuxt/a11y@1.0.0-alpha.1（有 devtools panel）。panel 初次全站掃描發現以下 violation。
切換原因：原社群版無法提供 RAF §9.2 / §10.6 要求的 devtools panel，使用者要求改用 https://nuxt.com/modules/a11y 官方版。
| # | 類別 | 頁面 | 問題摘要 | 嚴重度 | Scope |
|---|---|---|---|---|---|
| 11 | a11y | /admin/members | UTable { id: 'actions', header: '' } 觸發 empty-table-header | minor | MPM（當前） |
| 12 | a11y | /admin/settings/guest-policy | color-contrast（affected element 待使用者貼 DevTools 詳情） | serious | MPM（當前） |
| 13 | a11y | /admin/query-logs | 3 × button-name（icon-only button 缺 aria-label） | critical | Cross-Change |
| 14 | a11y | /admin/query-logs | 2 × label（form element 缺 label） | critical | Cross-Change |
| 15 | a11y | /admin/query-logs | UTable empty-table-header | minor | Cross-Change |
| 16 | a11y | /admin/documents | UTable empty-table-header | minor | Cross-Change |
| 17 | a11y | /admin/tokens | UTable empty-table-header | minor | Cross-Change |
| 18 | a11y | /admin/debug/latency | heading-order（heading 層級跳階） | moderate | Cross-Change |
備註：
#11於 2026-04-21 主線修復：header: ''改為header: () => h('span', { class: 'sr-only' }, '操作')，為視覺隱藏但 screen reader 可讀。檔案：app/pages/admin/members/index.vue:105-108。#12需使用者於 @nuxt/a11y DevTools 點color-contrastviolation 的 Affected Elements 提供 CSS selector + element text，才能精準修復（可能是text-mutedonbg-accentedselected option 的組合）。#13-18屬 Cross-Change DRIFT（非 MPM / RAF scope）：/admin/query-logs→admin-query-log-uicapability/admin/documents→admin-document-management-uicapability/admin/tokens→admin-token-management-uicapability/admin/debug/latency→debug-decision-inspectioncapability- 登
docs/tech-debt.mdTD-005 批次處理，不阻擋 當前 MPM / RAF archive。 - ✅ Resolved 2026-04-20：TD-005 commit 285482b 修復 —
#13-14用<UFormField>包裹（USelect×3 + UInput×2）同時解 button-name + label；#15-17新增shared/utils/table.tssrOnlyHeader(label)utility 統一 UTable actions header；#18/admin/debug/latency補<h2 sr-only>並改用aria-labelledby單一 source of truth，unauthorized/empty/error 分支<h3>改為<h2>填全分支覆蓋。Regression guard：e2e/td005-a11y-admin.spec.ts掃四頁 4/4 pass。
累積 Findings: 28 項。
oauth-user-delegated-remote-mcp — 2026-04-22
影響範圍:
app/pages/auth/mcp/authorize.vueapp/components/auth/McpConnectorLoginCard.vueapp/components/auth/McpConnectorConsentCard.vue
本輪 Design Review 未發現新的 blocking finding；主要工作是修正 consent 頁把 composable Ref 直接往子元件傳遞，導致 runtime 標題與按鈕 state 異常的問題。修正後以下檢查通過：
- Playwright：
e2e/mcp-connector-authorize.spec.ts- signed-out login guidance
- xs / md / xl 三斷點無 horizontal overflow
- consent 主操作可見且可透過鍵盤抵達
- axe-core targeted rules：
button-name/link-name/label/page-has-heading-one為 0 violation - 本次 UI 仍符合
.impeccable.md的 neutral monochrome 規則，未觸發額外/design improve修正回合
| # | 類別 | 問題摘要 | 嚴重度 | 發現來源 |
|---|---|---|---|---|
| 29 | state | consent 頁初版把 Ref wrapper 傳入子元件，造成 clientName / button state runtime 錯誤 | warning | Playwright |
備註：
- 這是 state wiring 問題，不是新的視覺語言漂移；修復後未再觀察到新的 responsive / a11y blocking issue。
- 累積 Findings 更新為 29 項。