文件同步：兩份交付文件補上 2026-08-12 本輪改動

《UIUX優化成果與技術說明》停在 8/6，本輪 8 個 commit 全未反映，且 4.4 節
「本次改版不更換配色」與背景色表（#f8fafc／#020617）已與實作不符——那是
交付給業主的文件裡的錯誤敘述，優先修掉。

本次修正：
- 4.4 配色章改寫：拆成「強調色（未更動）／底色三層／線條兩級」三段，
補上淺色為何維持白底表格、以及結構線最終 1.46:1 低於 WCAG 1.4.11 的
3:1 門檻是業主連續三輪要求柔和後拍板的取捨（文字對比不受影響）
- 新增 3.5 導覽列「使用手冊」下載入口、3.6 AI 訊息頭像
- 4.3 語料說明表單補：欄位不包白色卡片、「比較結構」改小標題（gr.Group→
gr.Column）、radio 欄位標籤對齊文字欄位、選項被裁切的成因與修法
- 4.2 結果分頁排版：語言指標分析的下載鈕由表格之前改到表格之後，六頁一致；
導覽列版面圖與圖示對照表補「回首頁」與「使用手冊」兩項
- 第二章修復項目 19→21：新增 2.2 ⑨（運算中途重置後畫面殘留，含「不是漏清
而是沒中止 generator」的根因）與 2.3 ⑥（表格右側空白帶，含「欄位其實
沒有錯位、13 張表逐欄量測一致」的查證結果與兩條排除掉的修法）
- 4.1「開始新分析」更正為現行名稱「回首頁」（2026-07-30 已更名）並註明
第二章部分描述沿用舊名；2.3 ⑤ 的交叉引用編號修正
- app_agent.py 行數 4232→4371；更新紀錄補一列（時間正序，放最後）

《design.md》升 v1.3：AI 頭像改實心與尺寸規格、新增「導覽圖示要量實際
上色範圍」檢查、欄位標籤唯一樣式、表格不自己出捲軸（含兩條不可用的替代
做法）。

《開發優化建議》與 docs/README.md 本輪不需異動（前者結論不受影響，後者
是三份文件對照表、文件未增減）。

驗證：章節數量前後一致（2.1 六項＋2.2 九項＋2.3 六項＝標題與總覽表的
21 項，以腳本逐節數過）；design.md front matter 可被 YAML 解析、色票值
與 assets/app.css 現值相符；兩份文件所有表格欄數一致。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MQuAXWC1hCsiT48TXftPc7

docs/UIUX優化成果與技術說明.md

@@ -1,7 +1,7 @@
 # 譯彩紛呈 II 分析引擎 SpectraEngine UI/UX 優化成果與技術說明
 
 - 文件建立日期：2026-07-20
-- 最後更新日期：2026-08-06（新增 4 項導覽掛載／下載時序修復，對應 commit `56a8c3b`）
+- 最後更新日期：2026-08-12（淺色配色體系重整、AI 訊息頭像、使用手冊入口、2 項修復，對應 commit `2d850f9`）
 - 專案委託方：致理科技大學應日系 鄧敏君老師
 - 專案執行：利他設計工作室 吳千卉
 - 用途：說明本次 UI/UX 優化執行的工作項目，並保留設計規範與技術決策，供後續工程接手參考
@@ -13,8 +13,8 @@
 | 章節 | 這一章做了什麼 |
 |---|---|
 | **一、專案說明** | 系統定位、本次施工的技術限制、以及不可誤改的既有架構。動手前該知道的事都在這裡 |
-| **二、修復既有問題** | 修好 **19 個**原本就存在的問題，分三類：6 個會讓使用者卡死、只能重整頁面的；8 個畫面顯示與實際狀態不符的；5 個看得出來不對的視覺與可讀性瑕疵 |
-| **三、功能新增與調整** | 新增四顆打包下載捷徑（原本要跑三個分頁下載 15 個檔案）、補齊兩個統計子頁缺少的下載入口、加上離開頁面前的防手滑確認、移除畫面底部的多餘連結列 |
+| **二、修復既有問題** | 修好 **21 個**原本就存在的問題，分三類：6 個會讓使用者卡死、只能重整頁面的；9 個畫面顯示與實際狀態不符的；6 個看得出來不對的視覺與可讀性瑕疵 |
+| **三、功能新增與調整** | 新增四顆打包下載捷徑（原本要跑三個分頁下載 15 個檔案）、補齊兩個統計子頁缺少的下載入口、加上離開頁面前的防手滑確認、移除畫面底部的多餘連結列、導覽列新增使用手冊下載入口、AI 訊息加上頭像 |
 | **四、設計規範** | 這次改版怎麼決定畫面長相：資訊架構、三欄式版面、語料說明表單、視覺規範（字級、字體、配色與 WCAG 稽核）、各種空白與錯誤狀態，以及本次另外交付的 `design.md` 設計系統文件 |
 | **五、未完成項目** | **8 項**經評估超出本次委託範圍、或需要業主決定的項目。每項在此僅簡述，完整技術評估見《開發優化建議》 |
 | **六、更新紀錄** | 本文件歷次修改摘要，時間正序 |
@@ -25,7 +25,7 @@
 
 ### 1.1 專案背景
 
-`SpectraEngine` 是一套針對重譯文本（retranslation）語言特徵的量化分析平台，技術上是 **Python + Gradio 單頁研究工具**（`app_agent.py`，4232 行；樣式已於本次改版抽出為 `assets/app.css`），並非傳統前後端分離的 HTML/CSS/JS 網站，正式機部署在 Hugging Face Spaces。
+`SpectraEngine` 是一套針對重譯文本（retranslation）語言特徵的量化分析平台，技術上是 **Python + Gradio 單頁研究工具**（`app_agent.py`，4371 行；樣式已於本次改版抽出為 `assets/app.css`），並非傳統前後端分離的 HTML/CSS/JS 網站，正式機部署在 Hugging Face Spaces。
 
 系統採雙 Agent 架構：主 Agent（LLM1）負責研究情境引導與報告撰寫，工作程序 Agent（LLM2）負責上傳引導與格式驗證。
 
@@ -55,7 +55,7 @@
 
 ---
 
-## 二、修復既有問題（19 項）
+## 二、修復既有問題（21 項）
 
 ### 2.1 流程卡住，必須重整頁面才能繼續（6 項）
 
@@ -103,9 +103,9 @@
 
 commit `bd3ee2c`
 
-### 2.2 畫面顯示與實際狀態不符（8 項）
+### 2.2 畫面顯示與實際狀態不符（9 項）
 
-這四個問題的共通點是：系統實際狀態與畫面呈現的不一樣，使用者被誤導。
+這些問題的共通點是：系統實際狀態與畫面呈現的不一樣，使用者被誤導。
 
 **① 分析失敗時，該步驟的圓點永遠停在「進行中」閃爍**
 
@@ -155,7 +155,17 @@ Python 端在 `on_start_analysis_show`（app_agent.py:3625）確實送出了 `re
 
 ⑤⑥⑦⑧ commit `56a8c3b`
 
-### 2.3 視覺與可讀性（5 項）
+**⑨ 分析運算中途按「回首頁」，重新進入後上一輪的畫面又回來**
+
+分析運算跑到一半按「回首頁」→「確定回首頁」，畫面確實回到首頁；但重新進入工作區後，上一輪的分析運算面板、步驟列完成狀態、對話訊息又出現在畫面上，看起來像重置沒有生效。
+
+根因不是重置漏清元件：分析**跑完後**再重置是乾淨的（面板、對話、下載捷徑全數清空，已實測）。問題在於重置沒有中止還在執行的運算——`_run_computation` 是 streaming generator，每個子階段都會 yield 一次畫面更新；重置把畫面清乾淨之後，這條 generator 後續的 yield 又把上一輪的內容一格一格畫回去。
+
+修法：改用 Gradio 原生的 `cancels`，按下「確定回首頁」時一併中止「確認並開始分析」與「略過」兩條事件鏈（兩者都會進入同一支 `_run_computation`），generator 停止後不再有遲到的畫面更新。為了取得這兩個事件物件，`reset_confirm_btn` 的事件接線移至 `create_app()` 結尾（Gradio 的接線順序不影響行為，僅 `cancels` 需要引用先前建立的事件）。
+
+同批修正另一項重置殘留：結果導覽的可點狀態（語言指標分析／統計四項／LLM 輔助分析）在結果產出時由 `_populate_tabs` 打開，但重置從未關回，導致重置後回到全新首頁，這些項目仍可點擊、點入後是空白結果頁。已於 `on_reset_clear_workspace` 一併設回 `interactive=False`。commit `bfd97c3`
+
+### 2.3 視覺與可讀性（6 項）
 
 **① 語料說明表單章節編號跳號**
 
@@ -181,6 +191,16 @@ Python 端在 `on_start_analysis_show`（app_agent.py:3625）確實送出了 `re
 
 修法：統一為「下載＋該頁名稱」，與左側導覽的頁面名稱一致。「下載檔案」改為「下載語言指標分析」（app_agent.py:3042），「下載報告」改為「下載LLM輔助分析」（app_agent.py:3111）。
 
+**⑥ 表格右側出現一條空白帶，看起來像最後一欄被切掉**
+
+語料說明的兩張表格與部分結果頁表格，右側會多出一條約 10px 的空白帶，視覺上像欄位沒有對齊或最後一欄被裁掉。
+
+查證結果：**欄位並沒有錯位**。逐張量測 13 張表格（語料說明 2 張＋結果頁 11 張）每一欄表頭與資料列的右邊界座標，全數完全一致。空白帶的來源是 Gradio 為 dataframe 內部容器（`.virtual-table-viewport`）設定的 `max-height: 500px` + `overflow-y: auto`：列數超過容器高度時出現垂直捲軸，佔掉 10px 版面寬度，表格因此比外框窄一截。不捲動時表格右緣與外框只差 2px（框線），一旦捲動就跳到 12px。
+
+修法：`scrollbar-width: none`，捲軸不再佔用版面寬度，滾輪／觸控／鍵盤捲動與虛擬捲動渲染均不受影響。
+
+過程中排除的兩條路徑一併記錄，避免日後重試：①用 `::-webkit-scrollbar` 調整寬度無效——Gradio 在該元件設定了標準屬性 `scrollbar-width`／`scrollbar-color`，Chrome 只要見到標準屬性就會忽略 legacy 的 `::-webkit-scrollbar` 偽元素 ②移除 `max-height` 讓表格完全展開會破壞虛擬捲動——該元件依自身捲動位置決定渲染哪些列，移除後敘述統計變成「保留 2832px 高度卻只渲染 1 列」的空表。commit `a7cc84d`
+
 ---
 
 ## 三、功能新增與調整
@@ -246,6 +266,24 @@ commit `8ac93d8`
 
 commit `d928c91`
 
+### 3.5 導覽列新增「使用手冊」下載入口
+
+左側導覽列最末新增「使用手冊」項目（`nav_guide_btn`，`book-open.svg`），供使用者隨時下載系統操作手冊。
+
+- **位置刻意放在結果導覽區塊之外**：手冊與分析進度無關，選定研究情境之前也應該拿得到。選定情境後它自然落在「技術執行紀錄」下方，以分隔線與上方的結果導覽區隔
+- **不參與導覽的作用中狀態**：它是下載動作而非頁面，與四顆下載捷徑同樣不納入 `_ALL_NAV_IDS`，點擊後不會把作用中狀態從當前結果頁移走
+- **目前接的是專案根目錄既有的 `使用手冊.docx`**（業主原始版本，內容尚未反映本次改版後的介面）。日後更新手冊只需覆蓋同一個檔名，不必改動程式
+
+commit `32e7f6c`
+
+### 3.6 AI 訊息頭像
+
+對話串中的 AI 訊息左側加上 28px 圓形頭像（紫→藍漸層底＋白色四角星），讓「這句是系統在說話」一眼可辨。技術做法採 Gradio 原生的 `gr.Chatbot(avatar_images=...)`，未自製 JS 橋接。
+
+漸層底刻意畫在 CSS 而非 SVG 檔內：`avatar_images` 是 Python 端參數，同一個檔案無法隨明暗主題換色，交給 CSS 才能沿用會跟著主題切換的強調色變數，SVG 檔本身只保留白色圖形。詳細規格見 `design.md`。
+
+commit `32e7f6c`、`2d850f9`
+
 ---
 
 ## 四、設計規範
@@ -290,7 +328,7 @@ commit `d928c91`
 
 **變更情境**
 
-使用者選錯情境時，透過左側導覽列的「開始新分析」重置（換情境＝重新開始，共用同一套重置機制，見 2.1 ①，app_agent.py:3763）。
+使用者選錯情境時，透過左側導覽列的「回首頁」重置（換情境＝重新開始，共用同一套重置機制，見 2.1 ①，app_agent.py:3763）。此項目在 2026-07-30 之前名為「開始新分析」，第二章部分項目描述沿用當時的名稱。
 
 **已取消的規劃：常駐情境標籤**
 
@@ -306,7 +344,7 @@ commit `d928c91`
 
 ```
 ┌─────────────────────┐
-│ 🆕 開始新分析          │
+│ 🏠 回首頁              │
 ├─────────────────────┤
 │ 💬 AI對話             │  ← 以下八項分析開始後才出現
 │ 📈 語言指標分析         │
@@ -321,6 +359,8 @@ commit `d928c91`
 │ ⬇️ 下載統計圖表         │
 │ ⬇️ 下載研究報告         │
 │ ⬇️ 下載完整分析資料      │  ← 內容為空的那包不會出現
+├──────────���──────────┤
+│ 📖 使用手冊            │  ← 全程可見，與分析進度無關
 └─────────────────────┘
 ```
 
@@ -337,6 +377,13 @@ commit `d928c91`
 | LLM輔助分析 | `document.svg` | `nav_report_btn` |
 | 技術執行紀錄 | `folder.svg` | `nav_exec_btn`（套 `--muted` 樣式弱化）|
 
+另有兩項不屬於這八項、生命週期不同的導覽項目：
+
+| 項目 | 圖示檔 | 元件 | 顯示時機 |
+|---|---|---|---|
+| 回首頁 | `home.svg` | `reset_btn` | 進入工作區後全程可見（重置機制見 2.1 ①）|
+| 使用手冊 | `book-open.svg` | `nav_guide_btn` | 進入工作區後全程可見，位於導覽列最末（見 3.5）|
+
 - 固定窄寬 240–280px
 - **桌面版可收合**成 ChatGPT 式細窄 icon bar（`nav_collapse_toggle`，收合狀態存 localStorage）
 - **手機版**：漢堡選單／抽屜收合（`mobile_nav_toggle`／`nav_drawer_close`／`nav_backdrop`），預設只顯示對話主畫面，點擊展開側欄
@@ -408,7 +455,7 @@ commit `d928c91`
 
 | 分頁 | 由上而下的元件順序 | 排版決策 |
 |---|---|---|
-| 語言指標分析 | 下載鈕 → 指標計算結果表格 | **下載鈕放在表格之前**（表格有 75 項指標，放後面要捲很久才看得到）|
+| 語言指標分析 | 指標計算結果表格 → 下載鈕 | 原本刻意把下載鈕放在表格之前（表格有 75 項指標，放後面要捲很久），2026-08-12 業主要求改回表格之後，與其餘五頁一致 |
 | 統計-1 敘述統計 | 敘述性統計表格 → 下載鈕 | 沿用原排版 |
 | 統計-2 差異性分析 | 顯著指標箱形圖 → 差異性分析表格 → 下載鈕 | **圖在上、表格在下**，先看圖抓重點 |
 | 統計-3 監督式學習 | 〔特徵重要性 Top 20 表格 ｜ 特徵重要性圖〕左右並排 → 下載鈕 | 表格與圖的寬度比為 1:2，讓圖有足夠寬度 |
@@ -418,7 +465,7 @@ commit `d928c91`
 
 所有圖表元件預設 `visible=False`，待對應結果產出後才顯示。
 
-六顆頁內下載鈕的標籤一律採「下載＋該頁名稱」，與左側導覽的頁面名稱一致（見 2.3 ⑥）。
+六顆頁內下載鈕的標籤一律採「下載＋該頁名稱」，與左側導覽的頁面名稱一致（見 2.3 ⑤）；位置一律在該頁內容的最下方（2026-08-12 起六頁一致）。
 
 ### 4.3 語料 Metadata 說明表單設計
 
@@ -427,6 +474,10 @@ commit `d928c91`
 - **維持獨立表單卡片**，佔滿全欄寬，位於對話視窗下方（同頁面往下捲動關係，**非 dialog／彈出視窗**，已實機截圖驗證）
 - 群組層／個體層表格**維持 Dataframe 元件不變**。先前曾提議改成卡片式後收回：現有元件已內建全螢幕展開編輯功能，且卡片式無法應對 20–30 組的規模
 - 「略過」文案定稿：「以下資訊會寫入報告開頭，您也可以先略過（略過後這次分析將不會用到這些補充說明）」
+- **欄位不包白色卡片**（2026-08-12 業主要求）：Gradio 會自動把連續的輸入元件包成一張白底卡片，與下方「群組層資訊」那種「小標題＋內容直接攤開」的樣子不一致。卡片其實由兩層構成——外層 `.form` 出框線、內層 `.block`／`fieldset` 出白底與內距——兩層都要清除才會完全消失。內距清除後，欄位左緣自然對齊小標題與下方表格
+- **「比較結構」改為與「原文資訊」同款的小標題**：原本以 `gr.Group` 包裹，Gradio 會附加一條藍色標題橫幅與外框；改用 `gr.Column` 後該裝飾消失，標題樣式自動與其他區塊一致。此改法同時符合本專案既有結論：這版 Gradio 的 `gr.Group` 設 `visible=False` 只清空內容、容器本身仍佔位，可切換顯隱的容器一律使用 `gr.Column`
+- **「群組數量」「比較方式」的欄位標籤**與「原文標題」「作者」等文字欄位標籤一致（小字、粗體、次要文字色）。Gradio 對 radio 的 `fieldset` 標籤走另一條樣式規則，需另行對齊
+- 同批修正一項既有缺陷：上述兩組 radio 的選項原本會被裁掉一半。成因是 `.form` 的 `align-items: stretch` 把每個欄位的高度統一鎖成整列高度，而該列高未計入欄位標籤（20px＋8px 下距），超出部分被 `fieldset` 自帶的 `overflow: auto` 裁切；改為 `flex-start` 讓每個欄位使用自身內容高度即解決。commit `6e2c8b8`
 
 ### 4.4 視覺規範
 
@@ -448,18 +499,44 @@ commit `d928c91`
 
 此為中西混搭的判斷結果，非套用單一字體庫的建議。目前 Crimson Pro 透過 Google Fonts CDN 載入（`assets/app.css:8`）；若日後需要移除對外部 CDN 的依賴，字體檔已備份於 `assets/fonts/`，可改為自架。
 
-#### 配色：維持現有雙主題系統，不重新設計
+#### 配色：沿用既有色相，重新定義底色層次
+
+業主上一版已建立完整淺色／深色雙主題 token（sky＋indigo＋slate 系），經 WCAG 對比度驗算後確認品質良好。**本次改版不更換色相**，強調色維持原值；2026-08-12 依業主回饋重新定義了底色與線條的層次（原因見下）。
 
-業主上一版已建立完整淺色／深色雙主題 token（sky＋indigo＋slate 系），經 WCAG 對比度驗算後確認品質良好。**本次改版不更換配色，只驗證與修正用法**：
+**強調色（未更動）**
 
 | | 淺色模式 | 深色模式 |
 |---|---|---|
-| 背景 | `#f8fafc` | `#020617` |
-| 主要文字對比度 | 約 14:1 | 約 14:1 |
 | 一般強調色 `--c-accent`（按鈕／圖示／大字用）| `#0284c7`，約 4.09:1 | `#0ea5e9`，約 6.58:1 |
 | 加強強調色 `--c-accent-strong`（小字／連結文字用）| `#0369a1`，約 5.93:1 | 同等更高 |
 
-**稽核結果與修正**：淺色模式的一般強調色 `#0284c7` 若直接用於一般大小的內文文字，對比度 4.09:1 略低於 WCAG AA 的 4.5:1 門檻（用於按鈕／圖示／大字等允許 3:1 門檻的地方完全合格）。系統已內建 `--c-accent-strong`（`#0369a1`，5.93:1）供小字／連結使用。本次改版逐處確認兩者的使用場景沒有混用，不新增變數，只修正用法對應。
+淺色模式的一般強調色 `#0284c7` 若直接用於一般大小的內文文字，對比度 4.09:1 略低於 WCAG AA 的 4.5:1 門檻（用於按鈕／圖示／大字等允許 3:1 門檻的地方完全合格）。系統已內建 `--c-accent-strong`（`#0369a1`，5.93:1）供小字／連結使用。本次改版逐處確認兩者的使用場景沒有混用，不新增變數，只修正用法對應。
+
+**底色：三層結構（2026-08-12 調整）**
+
+業主回饋「純黑或純白背景面積很大，視覺壓力也大」。量測後確認來源不只對話欄：淺色的頁面底 `#f8fafc` 幾乎等於白，而真正的大面積純白是所有 Gradio 區塊與表格資料列共用的 `--c-surface`；深色則是接近純黑的 `#020617`。改為三層，淺色與深色共用同一套邏輯：
+
+| 層 | 用途 | 淺色 | 深色 |
+|---|---|---|---|
+| 底 | 頁面、內容區、導覽列、對話欄 | `#f3f8fd` | `#0b1424` |
+| 浮起物 | 對話氣泡，比底亮一階 | `#ffffff` | `#172136` |
+| 資料紙張 | 表格資料列、卡片、輸入框 | `#ffffff`（維持純白）| `#172136` |
+
+淺色的表格與卡片刻意維持純白：75 項指標表格屬資料密集區，白底可讀性優先於「消除所有純白」；染色的是其下方的底層，白色表格因而成為浮在淡藍底上的紙張，層次比原本白疊白清楚。
+
+**線條：兩級（2026-08-12 新增）**
+
+WCAG 1.4.11 要求 UI 元件邊界達 3:1，而原本全站共用的 `--c-border`（`rgba(2,132,199,.16)`）疊在近白底上僅約 1.2:1，區塊外框與水平分界線在淺色模式幾乎不可見（深色模式當初已個別補強，淺色未補）。業主 2026-08-12 回報「淺色版看不清楚區塊的顏色」即為此。
+
+| Token | 用途 | 淺色 | 深色 |
+|---|---|---|---|
+| `--c-border-strong` | 結構線：區塊外框、欄位分隔、頂部列底線、標題底線、表格外框與表頭分界 | `rgba(2,132,199,.30)`（與次要按鈕邊框同值）| `rgba(148,163,184,.28)` |
+| `--c-divider` | 細線：表格資料列之間 | `#a9cbe8` | `rgba(148,163,184,.18)` |
+| `--c-bubble-border` | 對話氣泡邊框（兩主題實測對齊：淺 1.69:1／深 1.61:1）| `#a9cbe8` | `rgba(148,163,184,.26)` |
+
+淺色線條一律採 sky 色相，不使用中性灰藍——中間版本曾試過同亮度的灰藍，配上淡藍底會顯灰顯濁。
+
+**須留意的取捨**：結構線最終落在約 1.46:1，低於 1.4.11 的 3:1 門檻。第一版採用符合規範的 `#7c8798`（3.64:1），業主實機檢視後認為線條過重、視覺變吵，連續三輪往柔和方向調整，最終指定與「重新選擇研究情境」按鈕的邊框同色。此為業主明確拍板的視覺取捨，且文字對比完全不受影響（全站文字仍通過 AA）。日後若需嚴格達標，只需將該 token 換成同色相較深的值，全站線條會一併跟上。commit `42e3294`、`6e2c8b8`
 
 ### 4.5 空狀態／極限狀態／錯誤狀態
 
@@ -584,3 +661,4 @@ commit `d928c91`
 | 2026-08-06 | 修正兩處導覽改名後未同步的文案並列入第二章，修復項目由 13 項增為 15 項：空狀態提示指向不存在的「主頁」（改為「AI對話」）、結果頁下載鈕命名不一致（統一為「下載＋該頁名稱」）|
 | 2026-08-06 | 《開發優化建議》原第七節底下的兩個子項提升為第七、第八節，使兩份文件的未完成項目由「8 項對 6 節＋2 子項」變為「8 項對 8 節」，對照時不再需要換算層級；本文件 5.7／5.8 的指向同步更新 |
 | 2026-08-06 | 修復項目由 15 項增為 19 項（2.2 由 4 項增為 8 項）：「開始研究分析」後左側導覽列消失、硬點技術執行紀錄內容區塊空白、技術執行紀錄缺大標題、下載研究報告／完整分析資料在報告撰寫完成前提早出現缺件。前三項根因相同：Gradio 6 元件第一次從隱��翻顯示時，只有在觸發它的 generator 第一個 yield 設定才會真的掛進 DOM，原寫法套錯了另一段既有修法（4-C 補償）延到第二個 yield 才設，改回第一個 yield。3.1 打包下載機制規則同步更新。commit `56a8c3b` |
+| 2026-08-12 | 依業主回饋進行本輪視覺調整並同步全文：①4.4 配色章改寫——原「不更換配色」與背景色表已不符實作，改為「沿用色相、重新定義底色三層與線條兩級」，並載明結構線低於 1.4.11 門檻是業主拍板的取捨 ②新增 3.5 使用手冊入口、3.6 AI 訊息頭像 ③4.3 補語料說明表單去卡片、比較結構改小標題、radio 標籤對齊與選項被裁切的修正 ④結果分頁排版：語言指標分析的下載鈕由表格之前改到表格之後，六頁一致 ⑤導覽列版面圖與圖示對照表補「回首頁」（2026-07-30 已由「開始新分析」更名）與「使用手冊」⑥修復項目由 19 項增為 21 項：分析運算中途重置後畫面殘留（2.2 ⑨）、表格右側空白帶（2.3 ⑥）⑦`app_agent.py` 行數更新為 4371。commit `32e7f6c`～`2d850f9` |

docs/design.md

@@ -1,5 +1,5 @@
 ---
-version: 1.2
+version: 1.3
 project: SpectraEngine（譯彩紛呈 II 分析引擎）
 brand: 致理科技大學應日系 鄧老師委託案
 last_updated: 2026-08-12
@@ -219,6 +219,8 @@ WCAG 1.4.11 對「UI 元件與圖形物件的邊界」要求 3:1，這條在淺
 - **版面比例**：三欄式工作區 `nav-col : chat-col : canvas-col = 2 : 3 : 7`，寬螢幕滿版貼齊左右邊界（不做置中留白），首頁例外維持 `max-width: 50rem` 置中，避免寬螢幕上被拉滿版
 - **結果頁內容順序**：標題 → 圖表／表格 → 下載按鈕，六個結果頁一致（2026-08-12 業主要求把「語言指標分析」的下載從頁面頂部改回最下方，統一順序）
 - **表單欄位不包卡片**（2026-08-12）：語料說明表單的欄位一律「小標題＋內容直接攤開」，不要 Gradio 自動包的白色 `.form` 卡片。Gradio 這層卡片是兩件事疊起來的——`.form` 出框線、內層 `.block`／`fieldset` 出白底與內距——兩層都要清掉才會消失。內距清掉之後欄位左緣自然對齊小標題與下方表格。另外 `.form` 的 `align-items` 要改 `flex-start`：預設的 `stretch` 會把每個欄位的高度鎖成整列高度，而那個列高不含欄位標籤，radio 這種「標籤在上、選項在下」的元件會被裁掉一截
+- **欄位標籤只有一種樣式**（2026-08-12）：`.7rem`／`700`／`--c-text-muted`。這是 Gradio 給文字欄位標籤的既有值，不是另訂的字級，所以不套 `--font-size-base`（標籤比內文小一階是這張表單本來的層級設計）。radio 的 `fieldset` 標籤走 Gradio 另一條規則、預設是一般大小的深色字，要另外對齊，否則同一張表單裡兩種欄位的標籤長得不一樣
+- **表格不自己出捲軸**（2026-08-12）：dataframe 的內部容器一律 `scrollbar-width: none`。Gradio 預設 `max-height: 500px` + `overflow-y: auto`，列多時捲軸會佔掉 10px 版面寬度，表格因此比外框窄一截，右側露出一條空白帶，看起來像最後一欄被切掉（業主回報過）。滾輪／觸控／鍵盤照常可捲。**不要改用移除 `max-height` 的做法**：這個表格是虛擬捲動，靠自身捲動位置決定渲染哪些列，移除後會變成「保留整表高度卻只渲染 1 列」的空表。也**不要用 `::-webkit-scrollbar`**：Gradio 在該元件設了標準屬性 `scrollbar-width`／`scrollbar-color`，Chrome 見到標準屬性就會忽略 legacy 偽元素
 - **導覽列末項**：「使用手冊」固定在左側導覽列最後一項（技術執行紀錄下方，用分隔線隔開），與分析進度無關、全程可見；它是下載動作不是頁面，不參與導覽列的 active 狀態
 - **基準留白**：導覽列與輸入框四邊留白 16px 為基準，其餘區塊（對話氣泡、Canvas 內容區）對齊同一基準線，避免同一頁面出現兩種留白邏輯
 
@@ -228,11 +230,15 @@ WCAG 1.4.11 對「UI 元件與圖形物件的邊界」要求 3:1，這條在淺
 
 Heroicons outline 風格 SVG，24×24、`stroke-width="1.75"`、`fill="none"`，手繪 path（非套件逐點對照）。業主明確否決沿用專案既有的 emoji 慣例。
 
+**新增導覽圖示時要量「實際上色範圍」，不能只看 viewBox。** 所有圖示的 viewBox 都是 24×24、容器都是 22px，但畫出來的大小取決於 path 撐到哪裡。現有導覽圖示的上色範圍多落在 18×16 附近（`folder`／`chat-bubble`／`table-cells` 皆是），2026-08-12 新增的 `book-open` 初版只有 16×15，肉眼看得出比別人小一圈、卻不容易指出原因，是截圖逐一量非背景像素才確認。新增圖示畫完後量一次，對齊 18×16 這個量體。
+
 ### AI 頭像（2026-08-12 新增）
 
-AI 訊息左側的頭像是 28px 圓形，紫→藍漸層底＋白色四角星（sparkle）線稿，漸層與標題字共用同一條 heading-gradient。
+AI 訊息左側的頭像是 28px 圓形，紫→藍漸層底＋白色四角星（sparkle），漸層與標題字共用同一條 heading-gradient。
+
+實作分工是刻意的：**漸層畫在 CSS 的 `.avatar-container`，SVG 檔（`assets/icons/ai-avatar.svg`）只放白色 glyph**。原因是 `gr.Chatbot(avatar_images=...)` 是 Python 端參數，同一個檔案沒辦法隨明暗主題換色；把漸層交給 CSS 才吃得到 `--c-accent-strong / --c-accent2 / --c-accent3` 這組會跟著主題切換的 token。白色圖形疊在任一主題的漸層上都夠亮。頭像寬高固定並設 `flex: none`，避免重蹈「圖示被 flex 壓縮」的舊坑。
 
-實作分工是刻意的：**漸層畫在 CSS 的 `.avatar-container`，SVG 檔（`assets/icons/ai-avatar.svg`）只放白色 glyph**。原因是 `gr.Chatbot(avatar_images=...)` 是 Python 端參數，同一個檔案沒辦法隨明暗主題換色；把漸層交給 CSS 才吃得到 `--c-accent-strong / --c-accent2 / --c-accent3` 這組會跟著主題切換的 token。白色描邊疊在任一主題的漸層上都夠亮。頭像寬高固定並設 `flex: none`，避免重蹈��圖示被 flex 壓縮」的舊坑。
+glyph 規格與其他導覽圖示不同，另立一套：**兩顆星都是實心 `fill`、不描邊**，path 撐到接近滿版（大星 x3.9–17.1／y2.2–17.2、小星 x15.3–21.5／y13.6–20.7），`img` 內距 3px，圖案在 28px 圓內的可用範圍 22px。實心與放大要一起做才有效——只縮內距是把細線稿放大，只放大 path 又會被內距框住。
 
 深色模式處理：`gr.Button(icon=...)` 在這版 Gradio 渲染成 `<img>` 標籤而非行內 `<svg>`，CSS `currentColor` 對它無效，因此淺色版固定 stroke 顏色，深色模式改用 `filter: grayscale(1) invert(1) brightness(1.55) contrast(.85)` 反相逼近深色版文字色，不另外準備第二份深色 SVG 檔案。需要 `currentColor` 正常運作（例如收合鈕、明暗切換鈕這類不需要 Python `.click()` 的裝飾性圖示）則改用 `gr.HTML()` 內嵌行內 SVG。