Phase 8-C：結果內容從 tab2/tab3/tab6 遷移進 Canvas

- 外層 gr.Tabs() 與 tab2/tab3/tab6（gr.Tab）拿掉分頁包裝，改成
canvas_idx_col/canvas_stat_col/canvas_report_col 三個 gr.Column，
搬進 canvas-scroll（upload_row/metadata_row 之後、
exec_log_accordion 之前）；canvas_stat_col 內部維持原本巢狀
gr.Tabs()（敘述統計/差異性分析/監督式學習/非監督式學習 4 子頁不變）
- 首頁 gr.Tab("主頁") 包裝一併拿掉，改用純 with 區塊，首頁不再顯示
「主頁」分頁標籤
- _TAB_OUTPUTS/on_reset_confirm/reset_confirm_btn.click 的
tab2/tab3/tab6 引用改指向新 Column
- 修復兩個真實 CSS bug：
1. 巢狀子分頁字級規則原本靠 .tabitem 祖先跟全頁分頁列區分，外層
gr.Tabs() 拿掉後祖先消失、選擇器失效，改用 #canvas_stat 的
elem_id 精準定位
2. exec_log_accordion 搬進 canvas-scroll（flex column）後被壓縮成
只剩標題列高度：flexbox 規範規定 flex 子項只有 overflow:visible
時才用內容高度當自動最小高度下限，Gradio 幫 Accordion wrapper
加的 inline overflow:auto 觸發下限歸零。修法：
.canvas-scroll > * { flex-shrink:0 !important; }

已用 Playwright 完整驗證：情境1 上傳→格式驗證→Metadata 略過→運算
完成，語言指標分析/統計比較分析 4 子頁（含監督式/非監督式學習下載
按鈕）皆在 Canvas 正確顯示＋下載；LLM輔助分析區塊因本機無 API key
正確維持隱藏（非本次迴歸）；開始新分析重置正確回到全新首頁。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app_agent.py

@@ -2041,8 +2041,11 @@ _CUSTOM_CSS = """
     background: rgba(var(--c-accent-rgb),.07) !important;
 }
 .tabitem { padding: 1.5rem 1.25rem !important; }
-/* 巢狀子分頁（統計比較分析內）維持原字級 */
-.tabitem .tabs > .tab-nav > button { font-size: 0.80rem !important; }
+/* 巢狀子分頁（統計比較分析內，敘述統計/差異性分析/監督式學習/非監督式學習）
+   維持原字級。Phase 8-C 前這裡靠 .tabitem 祖先跟外層分頁列的 .tabs 區分；
+   外層 gr.Tabs() 拿掉後，這是全站唯一剩下的 .tabs，改用 canvas_stat_col
+   的 elem_id 精準定位，避免套用上面給「全頁分頁列」設計的 1.20rem 大字級 */
+#canvas_stat .tabs > .tab-nav > button { font-size: 0.80rem !important; }
 
 /* ── 4. CHATBOT ────────────────────────────────────────────────── */
 .chatbot {
@@ -2332,6 +2335,21 @@ div[role="log"][aria-label="chatbot conversation"],
     overflow-x: hidden !important;
     overflow-y: auto !important;
 }
+/* Phase 8-C 踩坑：結果內容搬進 canvas-scroll 後，內容總高度遠超過
+   canvas-col 給的固定 height，理論上該讓 canvas-scroll 自己捲動就好；但
+   exec_log_accordion（技術執行紀錄）被壓縮成只剩標題列高度（22px），內容
+   反而擠進一個內部小捲動框。原因：CSS flexbox 規範規定「flex 子項的
+   automatic minimum size」只有在該子項 overflow:visible 時才會採用內容
+   高度當下限，一旦子項 overflow 不是 visible（Gradio 會自動幫 Accordion
+   這類元件的外層 wrapper 加上 inline overflow:auto，方便使用者拖曳調整
+   大小），下限就變成 0，於是在總內容超出容器高度、瀏覽器要收縮子項時，
+   這個子項就被壓到接近 0——同排的 upload_row/metadata_row/canvas_idx_col
+   等純 gr.Column 因為維持預設 overflow:visible 沒有這個下限問題，才沒被
+   壓縮。修法不是去動 Accordion 的 overflow（那是 Gradio 拖曳調整大小的
+   功能，不想關掉），而是直接讓這個捲動容器裡的所有子項都不參與收縮 */
+.canvas-scroll > * {
+    flex-shrink: 0 !important;
+}
 
 /* ── 5c. SCENARIO BUTTONS（取代原本打字輸入研究情境的輸入列）────────── */
 .scenario-buttons {
@@ -2510,6 +2528,10 @@ div[role="log"][aria-label="chatbot conversation"],
     animation: popupIn .25s cubic-bezier(.2,.8,.3,1) !important;
 }
 .metadata-zone .gr-box, .metadata-zone .form { background: transparent !important; }
+/* Phase 8-C：結果內容區塊（語言指標分析／統計比較分析／LLM輔助分析），
+   從原本的 gr.Tab()（自帶 .tabitem padding）改成 gr.Column，這裡補上
+   跟上面 upload-zone/metadata-zone 一致的垂直間距，避免緊貼在一起 */
+.canvas-result { margin-top: 1.2rem !important; }
 .upload-area, [data-testid="droparea"] {
     border: 2px dashed rgba(var(--c-accent-rgb),.28) !important;
     border-radius: 12px !important;
@@ -3014,257 +3036,255 @@ def create_app():
 
         session_state = gr.State(None)
 
-        with gr.Tabs():
-            # ══════════════════════════════════════════════════════════════
-            # Tab 0: 主頁
-            # ══════════════════════════════════════════════════════════════
-            with gr.Tab("🏠 主頁"):
-                # Phase 8：首頁改成 4 張情境卡片（gr.HTML()+JS橋接，Gradio 無原生
-                # 卡片元件，點卡片＝模擬點擊下方隱藏版 sc_btn_1..4，見
-                # _APP_HEAD_SCRIPT 的 bindScenarioCards()）。情境選定後這塊隱藏，
-                # workspace_row（對話＋操作區）才出現。
-                with gr.Column(visible=True) as homepage_col:
-                    gr.HTML(_build_homepage_html())
-                    # 隱藏版情境按鈕：純作 JS 橋接目標（.sc-bridge-btn，見 CSS／
-                    # bindScenarioCards()），.click() 綁定邏輯完全不動。必須放在
-                    # 一開始就 visible=True 的容器裡（homepage_col），因為 Gradio
-                    # 對「建構時就 visible=False」的容器是整段不掛載進 DOM，不是
-                    # 只用 CSS display:none 藏起來——放在 workspace_row 裡會導致
-                    # 這幾顆按鈕在情境選定前根本不存在於 DOM，JS 找不到可點的對象。
-                    sc_btn_1 = gr.Button("1　人工翻譯 vs 機器翻譯", variant="secondary",
-                                         elem_id="sc_btn_1", elem_classes=["sc-bridge-btn"])
-                    sc_btn_2 = gr.Button("2　全譯 vs 編譯／節譯／改寫", variant="secondary",
-                                         elem_id="sc_btn_2", elem_classes=["sc-bridge-btn"])
-                    sc_btn_3 = gr.Button("3　同期不同譯者譯本比較", variant="secondary",
-                                         elem_id="sc_btn_3", elem_classes=["sc-bridge-btn"])
-                    sc_btn_4 = gr.Button("4　不同時期重譯本的歷時比較", variant="secondary",
-                                         elem_id="sc_btn_4", elem_classes=["sc-bridge-btn"])
-
-                # Phase 8-B：三欄式工作區——nav-col（窄，導覽/重置）＋chat-col
-                # （對話視窗＋輸入框，獨立捲動）＋canvas-col（步驟列＋上傳/表單/
-                # 執行紀錄，獨立捲動）。手機寬度見 CSS 的 media query 改上下堆疊。
-                with gr.Row(elem_classes=["main-layout-row"], visible=False) as workspace_row:
-                    with gr.Column(scale=2, min_width=200, elem_classes=["nav-col"]) as nav_col:
-                        # 研究情境是封閉式的固定四選一，改用可點擊按鈕取代打字輸入
-                        # 數字再解析，選定後即隱藏，對話視窗回歸純輸出角色
-                        # Phase 8：情境選擇按鈕已搬到 homepage_col（見上方，理由是
-                        # Gradio 對建構時 visible=False 的容器不掛載進 DOM，見該處
-                        # 註解）。這個 Column 目前是空的，只留來讓 on_scenario_pick／
-                        # on_reset_confirm 既有的可見性輸出繼續運作，不動更多 wiring；
-                        # Phase 8-F 全站清理時一併拿掉。
-                        with gr.Column(elem_classes=["scenario-buttons"]) as scenario_btn_col:
-                            pass
-
-                        # 「開始新分析」與其確認彈窗：換情境／重新開始都走這一套共用
-                        # 機制。情境是封閉式按鈕選擇，不透過對話框打字，所以「換
-                        # 情境」也統一走這顆按鈕，不恢復文字解析路徑。
-                        reset_btn = gr.Button("🆕 開始新分析", elem_classes=["reset-btn"], variant="secondary")
-                        with gr.Column(visible=False, elem_classes=["reset-confirm"]) as reset_confirm_row:
-                            gr.Markdown("確定要開始新分析嗎？目前進度將會遺失。")
-                            with gr.Row(elem_classes=["upload-actions"]):
-                                reset_cancel_btn  = gr.Button("取消", scale=1, variant="secondary")
-                                reset_confirm_btn = gr.Button("確定重新開始", scale=2, variant="primary")
-                        # 結果導覽（🏠對話／📊語言指標分析／📈統計比較分析／📝LLM
-                        # 輔助分析）與下載區留給 Phase 8-D 一起做，這裡先不放。
-
-                    with gr.Column(scale=4, min_width=300, elem_classes=["chat-col"]):
-                        chatbot = gr.Chatbot(
+        # ══════════════════════════════════════════════════════════════
+        # 主頁（Phase 8-C：不再包在 gr.Tabs()/gr.Tab() 裡，外層分頁列已拿掉）
+        # ══════════════════════════════════════════════════════════════
+        # Phase 8：首頁改成 4 張情境卡片（gr.HTML()+JS橋接，Gradio 無原生
+        # 卡片元件，點卡片＝模擬點擊下方隱藏版 sc_btn_1..4，見
+        # _APP_HEAD_SCRIPT 的 bindScenarioCards()）。情境選定後這塊隱藏，
+        # workspace_row（對話＋操作區）才出現。
+        with gr.Column(visible=True) as homepage_col:
+            gr.HTML(_build_homepage_html())
+            # 隱藏版情境按鈕：純作 JS 橋接目標（.sc-bridge-btn，見 CSS／
+            # bindScenarioCards()），.click() 綁定邏輯完全不動。必須放在
+            # 一開始就 visible=True 的容器裡（homepage_col），因為 Gradio
+            # 對「建構時就 visible=False」的容器是整段不掛載進 DOM，不是
+            # 只用 CSS display:none 藏起來——放在 workspace_row 裡會導致
+            # 這幾顆按鈕在情境選定前根本不存在於 DOM，JS 找不到可點的對象。
+            sc_btn_1 = gr.Button("1　人工翻譯 vs 機器翻譯", variant="secondary",
+                                 elem_id="sc_btn_1", elem_classes=["sc-bridge-btn"])
+            sc_btn_2 = gr.Button("2　全譯 vs 編譯／節譯／改寫", variant="secondary",
+                                 elem_id="sc_btn_2", elem_classes=["sc-bridge-btn"])
+            sc_btn_3 = gr.Button("3　同期不同譯者譯本比較", variant="secondary",
+                                 elem_id="sc_btn_3", elem_classes=["sc-bridge-btn"])
+            sc_btn_4 = gr.Button("4　不同時期重譯本的歷時比較", variant="secondary",
+                                 elem_id="sc_btn_4", elem_classes=["sc-bridge-btn"])
+
+        # Phase 8-B：三欄式工作區——nav-col（窄，導覽/重置）＋chat-col
+        # （對話視窗＋輸入框，獨立捲動）＋canvas-col（步驟列＋上傳/表單/
+        # 執行紀錄，獨立捲動）。手機寬度見 CSS 的 media query 改上下堆疊。
+        with gr.Row(elem_classes=["main-layout-row"], visible=False) as workspace_row:
+            with gr.Column(scale=2, min_width=200, elem_classes=["nav-col"]) as nav_col:
+                # 研究情境是封閉式的固定四選一，改用可點擊按鈕取代打字輸入
+                # 數字再解析，選定後即隱藏，對話視窗回歸純輸出角色
+                # Phase 8：情境選擇按鈕已搬到 homepage_col（見上方，理由是
+                # Gradio 對建構時 visible=False 的容器不掛載進 DOM，見該處
+                # 註解）。這個 Column 目前是空的，只留來讓 on_scenario_pick／
+                # on_reset_confirm 既有的可見性輸出繼續運作，不動更多 wiring；
+                # Phase 8-F 全站清理時一併拿掉。
+                with gr.Column(elem_classes=["scenario-buttons"]) as scenario_btn_col:
+                    pass
+
+                # 「開始新分析」與其確認彈窗：換情境／重新開始都走這一套共用
+                # 機制。情境是封閉式按鈕選擇，不透過對話框打字，所以「換
+                # 情境」也統一走這顆按鈕，不恢復文字解析路徑。
+                reset_btn = gr.Button("🆕 開始新分析", elem_classes=["reset-btn"], variant="secondary")
+                with gr.Column(visible=False, elem_classes=["reset-confirm"]) as reset_confirm_row:
+                    gr.Markdown("確定要開始新分析嗎？目前進度將會遺失。")
+                    with gr.Row(elem_classes=["upload-actions"]):
+                        reset_cancel_btn  = gr.Button("取消", scale=1, variant="secondary")
+                        reset_confirm_btn = gr.Button("確定重新開始", scale=2, variant="primary")
+                # 結果導覽（🏠對話／📊語言指標分析／📈統計比較分析／📝LLM
+                # 輔助分析）與下載區留給 Phase 8-D 一起做，這裡先不放。
+
+            with gr.Column(scale=4, min_width=300, elem_classes=["chat-col"]):
+                chatbot = gr.Chatbot(
+                    show_label=False,
+                    height=400,
+                    elem_classes=["main-chat"],
+                )
+                # Phase 8（千卉實測後回頭調整）：對話輸入框改回「常駐顯示、
+                # 不負責上傳」——業主原本設計就是用拖曳／點擊上傳的卡片
+                # （見下方 upload_row），對話框目前也沒有其他打字用途
+                # （全站掃過沒有任何地方會解析使用者自由輸入文字），暫時
+                # 只留著當畫面元素，不接 sources=["upload"]，避免顯示
+                # 附加檔案的迴紋針卻沒有作用。chat_upload.submit() 的
+                # wiring 已停用（見下方 on_chat_upload_submit 註解），
+                # 函式保留、之後如果對話框有真正用途要復活直接接回去即可。
+                with gr.Column(visible=True, elem_id="chat_upload_zone", elem_classes=["upload-zone-plain"]) as chat_upload_col:
+                    chat_upload = gr.MultimodalTextbox(
+                        file_types=[".txt"],
+                        sources=[],
+                        placeholder="對話輸入框（功能開發中）",
+                        show_label=False,
+                    )
+
+            with gr.Column(scale=7, min_width=380, elem_classes=["canvas-col"]):
+                # 頂部步驟列＋情境標籤：原本在全頁最上方（首頁也會看到），
+                # Phase 8-B 搬進 Canvas 內部，只在 workspace_row 顯示後
+                # 才出現，首頁不再看到。
+                # 注意：這裡不能靠 app_header_html 自己 position:sticky
+                # 達到「頂部固定」——它的直接 wrapper（Gradio 自動包的
+                # .block）高度只比它自己的內容高一點點，sticky 的可移動
+                # 範圍被那層 wrapper 框住，捲動一小段（wrapper 多出來的
+                # 高度）後就整個跟著捲走，不會真的貼在 Canvas 頂端不動
+                # （已實測踩坑）。正確做法：步驟列留在捲動區外面（跟著
+                # canvas-col 本身固定不動），下面另外包一層
+                # canvas-scroll 才是真正會捲動的區域，兩者高度各自獨立。
+                app_header_html = gr.HTML(_build_header_html())
+
+                with gr.Column(elem_classes=["canvas-scroll"]):
+                    # Phase 8（千卉實測後回頭調整）：這張卡片改回正式使用
+                    # 中的上傳入口（拖曳／點擊上傳），符合業主原本設計；
+                    # Phase 7 曾經把它永久隱藏、改用對話框上傳，這次反
+                    # 過來。程式邏輯完全沒動，只是把可見性開關從
+                    # chat_upload_col 換回這裡。
+                    with gr.Column(visible=False, elem_id="upload_zone", elem_classes=["upload-zone"]) as upload_row:
+                        upload_hint_md = gr.Markdown(value="", elem_classes=["upload-hint"])
+                        file_input = gr.File(
                             show_label=False,
-                            height=400,
-                            elem_classes=["main-chat"],
+                            file_types=[".txt"], file_count="multiple",
                         )
-                        # Phase 8（千卉實測後回頭調整）：對話輸入框改回「常駐顯示、
-                        # 不負責上傳」——業主原本設計就是用拖曳／點擊上傳的卡片
-                        # （見下方 upload_row），對話框目前也沒有其他打字用途
-                        # （全站掃過沒有任何地方會解析使用者自由輸入文字），暫時
-                        # 只留著當畫面元素，不接 sources=["upload"]，避免顯示
-                        # 附加檔案的迴紋針卻沒有作用。chat_upload.submit() 的
-                        # wiring 已停用（見下方 on_chat_upload_submit 註解），
-                        # 函式保留、之後如果對話框有真正用途要復活直接接回去即可。
-                        with gr.Column(visible=True, elem_id="chat_upload_zone", elem_classes=["upload-zone-plain"]) as chat_upload_col:
-                            chat_upload = gr.MultimodalTextbox(
-                                file_types=[".txt"],
-                                sources=[],
-                                placeholder="對話輸入框（功能開發中）",
-                                show_label=False,
-                            )
-
-                    with gr.Column(scale=7, min_width=380, elem_classes=["canvas-col"]):
-                        # 頂部步驟列＋情境標籤：原本在全頁最上方（首頁也會看到），
-                        # Phase 8-B 搬進 Canvas 內部，只在 workspace_row 顯示後
-                        # 才出現，首頁不再看到。
-                        # 注意：這裡不能靠 app_header_html 自己 position:sticky
-                        # 達到「頂部固定」——它的直接 wrapper（Gradio 自動包的
-                        # .block）高度只比它自己的內容高一點點，sticky 的可移動
-                        # 範圍被那層 wrapper 框住，捲動一小段（wrapper 多出來的
-                        # 高度）後就整個跟著捲走，不會真的貼在 Canvas 頂端不動
-                        # （已實測踩坑）。正確做法：步驟列留在捲動區外面（跟著
-                        # canvas-col 本身固定不動），下面另外包一層
-                        # canvas-scroll 才是真正會捲動的區域，兩者高度各自獨立。
-                        app_header_html = gr.HTML(_build_header_html())
-
-                        with gr.Column(elem_classes=["canvas-scroll"]):
-                            # Phase 8（千卉實測後回頭調整）：這張卡片改回正式使用
-                            # 中的上傳入口（拖曳／點擊上傳），符合業主原本設計；
-                            # Phase 7 曾經把它永久隱藏、改用對話框上傳，這次反
-                            # 過來。程式邏輯完全沒動，只是把可見性開關從
-                            # chat_upload_col 換回這裡。
-                            with gr.Column(visible=False, elem_id="upload_zone", elem_classes=["upload-zone"]) as upload_row:
-                                upload_hint_md = gr.Markdown(value="", elem_classes=["upload-hint"])
-                                file_input = gr.File(
-                                    show_label=False,
-                                    file_types=[".txt"], file_count="multiple",
-                                )
-                                with gr.Row(elem_classes=["upload-actions"]):
-                                    cancel_btn = gr.Button("取消", scale=1, variant="secondary")
-                                    upload_btn = gr.Button("確認上傳", scale=2, variant="primary")
-
-                            # ── 語料 Metadata 說明表單（上傳後、分析前）───────
-                            with gr.Column(visible=False, elem_id="metadata_zone", elem_classes=["metadata-zone"]) as metadata_row:
-                                gr.Markdown("### 📑 語料 Metadata 說明\n請於正式分析前說明語料來源、範圍與比較結構，將寫入研究報告。")
-
-                                gr.Markdown("**原文資訊**")
-                                with gr.Row():
-                                    meta_title   = gr.Textbox(label="原文標題", scale=2)
-                                    meta_author  = gr.Textbox(label="作者", scale=2)
-                                    meta_lang    = gr.Textbox(label="語言", scale=1)
-                                with gr.Row():
-                                    meta_pubyear = gr.Textbox(label="出版年", scale=1)
-                                    meta_version = gr.Textbox(label="版本", scale=2)
-
-                                # 比較結構（僅情境 3、4 需要；情境 1、2 固定二群）
-                                with gr.Group(visible=False) as meta_compare_group:
-                                    gr.Markdown("**比較結構**")
-                                    with gr.Row():
-                                        meta_ngroups = gr.Radio(
-                                            ["二群", "三群"], label="群組數量", value="二群", scale=1,
-                                        )
-                                        meta_method  = gr.Radio(
-                                            ["群組間比較", "個體間比較"], label="比較方式",
-                                            value="群組間比較", scale=1,
-                                        )
-
-                                gr.Markdown("**群組層資訊**（共通屬性）")
-                                meta_group_df = gr.Dataframe(
-                                    headers=["群組標籤", "翻譯類型", "翻譯方向", "譯者背景", "目標讀者"],
-                                    datatype=["str"] * 5,
-                                    col_count=(5, "fixed"),
-                                    row_count=(1, "dynamic"),
-                                    interactive=True,
-                                    label="群組層",
-                                )
+                        with gr.Row(elem_classes=["upload-actions"]):
+                            cancel_btn = gr.Button("取消", scale=1, variant="secondary")
+                            upload_btn = gr.Button("確認上傳", scale=2, variant="primary")
 
-                                gr.Markdown("**個體層資訊**（每個譯本／檔案）")
-                                meta_indiv_df = gr.Dataframe(
-                                    headers=["檔案", "譯者／系統名稱", "出版年", "譯者母語", "後編輯程度", "重譯序位"],
-                                    datatype=["str"] * 6,
-                                    col_count=(6, "fixed"),
-                                    row_count=(1, "dynamic"),
-                                    interactive=True,
-                                    label="個體層",
-                                )
+                    # ── 語料 Metadata 說明表單（上傳後、分析前）───────
+                    with gr.Column(visible=False, elem_id="metadata_zone", elem_classes=["metadata-zone"]) as metadata_row:
+                        gr.Markdown("### 📑 語料 Metadata 說明\n請於正式分析前說明語料來源、範圍與比較結構，將寫入研究報告。")
 
-                                gr.Markdown(
-                                    "以下資訊會寫入報告開頭，您也可以先略過（略過後這次分析將不會用到這些補充說明）",
-                                    elem_classes=["upload-hint"],
+                        gr.Markdown("**原文資訊**")
+                        with gr.Row():
+                            meta_title   = gr.Textbox(label="原文標題", scale=2)
+                            meta_author  = gr.Textbox(label="作者", scale=2)
+                            meta_lang    = gr.Textbox(label="語言", scale=1)
+                        with gr.Row():
+                            meta_pubyear = gr.Textbox(label="出版年", scale=1)
+                            meta_version = gr.Textbox(label="版本", scale=2)
+
+                        # 比較結構（僅情境 3、4 需要；情境 1、2 固定二群）
+                        with gr.Group(visible=False) as meta_compare_group:
+                            gr.Markdown("**比較結構**")
+                            with gr.Row():
+                                meta_ngroups = gr.Radio(
+                                    ["二群", "三群"], label="群組數量", value="二群", scale=1,
                                 )
-                                with gr.Row(elem_classes=["upload-actions"]):
-                                    meta_cancel_btn  = gr.Button("略過", scale=1, variant="secondary")
-                                    meta_confirm_btn = gr.Button("確認並開始分析", scale=2, variant="primary")
-
-                            # 技術執行紀錄：Phase 8-B 從 chat-col 搬到 Canvas 底
-                            # 部，跟中段內容同一塊可捲動捲軸，非 sticky，點擊
-                            # 往下展開。
-                            with gr.Accordion("技術執行紀錄", open=False, elem_id="exec_log_accordion") as exec_log_accordion:
-                                exec_log = gr.Markdown(
-                                    value="",
-                                    elem_id="exec_log",
-                                    elem_classes=["exec-log"],
+                                meta_method  = gr.Radio(
+                                    ["群組間比較", "個體間比較"], label="比較方式",
+                                    value="群組間比較", scale=1,
                                 )
 
-            # ══════════════════════════════════════════════════════════════
-            # 結果分頁：初始隱藏，分析完成後顯示
-            # ══════════════════════════════════════════════════════════════
-            with gr.Tab("📊 語言指標分析", visible=False) as tab2:
-                tab_idx_md   = gr.Markdown(_EMPTY_HINT)
-                tab_idx_file = gr.File(
-                    label="下載檔案",
-                    file_count="multiple", interactive=False, visible=False,
-                )
-                tab_idx_df   = gr.Dataframe(
-                    label="指標計算結果",
-                    interactive=False, visible=False,
-                )
+                        gr.Markdown("**群組層資訊**（共通屬性）")
+                        meta_group_df = gr.Dataframe(
+                            headers=["群組標籤", "翻譯類型", "翻譯方向", "譯者背景", "目標讀者"],
+                            datatype=["str"] * 5,
+                            col_count=(5, "fixed"),
+                            row_count=(1, "dynamic"),
+                            interactive=True,
+                            label="群組層",
+                        )
 
-            with gr.Tab("📈 統計比較分析", visible=False) as tab3:
-                with gr.Tabs():
-                    # 子分頁 1：敘述統計
-                    with gr.Tab("1. 敘述統計"):
-                        tab_desc_md   = gr.Markdown(_EMPTY_HINT)
-                        tab_desc_df   = gr.Dataframe(
-                            label="敘述性統計",
-                            interactive=False, visible=False,
+                        gr.Markdown("**個體層資訊**（每個譯本／檔案）")
+                        meta_indiv_df = gr.Dataframe(
+                            headers=["檔案", "譯者／系統名稱", "出版年", "譯者母語", "後編輯程度", "重譯序位"],
+                            datatype=["str"] * 6,
+                            col_count=(6, "fixed"),
+                            row_count=(1, "dynamic"),
+                            interactive=True,
+                            label="個體層",
                         )
-                        tab_desc_file = gr.File(
-                            label="下載敘述統計",
-                            interactive=False, visible=False,
+
+                        gr.Markdown(
+                            "以下資訊會寫入報告開頭，您也可以先略過（略過後這次分析將不會用到這些補充說明）",
+                            elem_classes=["upload-hint"],
                         )
-                    # 子分頁 2：差異性分析
-                    with gr.Tab("2. 差異性分析"):
-                        tab_diff_head = gr.Markdown(_EMPTY_HINT)
-                        tab_box_img   = gr.Image(label="顯著指標箱形圖", visible=False)
-                        tab_diff_df   = gr.Dataframe(
-                            label="差異性分析",
-                            interactive=False, visible=False,
+                        with gr.Row(elem_classes=["upload-actions"]):
+                            meta_cancel_btn  = gr.Button("略過", scale=1, variant="secondary")
+                            meta_confirm_btn = gr.Button("確認並開始分析", scale=2, variant="primary")
+
+                    # Phase 8-C：結果內容從 tab2/tab3/tab6（原本 gr.Tabs() 分頁頁面）搬進
+                    # Canvas，改成三個互斥可見性的 gr.Column，取代整頁分頁切換。三塊
+                    # 目前皆用同一組 visible=True/False 語意（見 _populate_tabs 的
+                    # index 20-22），分析完成後會同時顯示、垂直堆疊；哪個結果先出現在
+                    # 畫面上由使用者往下捲決定，nav-col 的「結果導覽」切換是 8-D 待辦。
+                    with gr.Column(visible=False, elem_id="canvas_idx", elem_classes=["canvas-result"]) as canvas_idx_col:
+                        tab_idx_md   = gr.Markdown(_EMPTY_HINT)
+                        tab_idx_file = gr.File(
+                            label="下載檔案",
+                            file_count="multiple", interactive=False, visible=False,
                         )
-                        tab_diff_file = gr.File(
-                            label="下載差異性分析",
+                        tab_idx_df   = gr.Dataframe(
+                            label="指標計算結果",
                             interactive=False, visible=False,
                         )
-                    # 子分頁 3：監督式學習
-                    with gr.Tab("3. 監督式學習"):
-                        tab_rf_md  = gr.Markdown(_EMPTY_HINT)
-                        with gr.Row():
-                            with gr.Column(scale=1):
-                                tab_imp_df = gr.Dataframe(
-                                    label="特徵重要性 Top 20",
+
+                    with gr.Column(visible=False, elem_id="canvas_stat", elem_classes=["canvas-result"]) as canvas_stat_col:
+                        with gr.Tabs():
+                            # 子分頁 1：敘述統計
+                            with gr.Tab("1. 敘述統計"):
+                                tab_desc_md   = gr.Markdown(_EMPTY_HINT)
+                                tab_desc_df   = gr.Dataframe(
+                                    label="敘述性統計",
+                                    interactive=False, visible=False,
+                                )
+                                tab_desc_file = gr.File(
+                                    label="下載敘述統計",
+                                    interactive=False, visible=False,
+                                )
+                            # 子分頁 2：差異性分析
+                            with gr.Tab("2. 差異性分析"):
+                                tab_diff_head = gr.Markdown(_EMPTY_HINT)
+                                tab_box_img   = gr.Image(label="顯著指標箱形圖", visible=False)
+                                tab_diff_df   = gr.Dataframe(
+                                    label="差異性分析",
+                                    interactive=False, visible=False,
+                                )
+                                tab_diff_file = gr.File(
+                                    label="下載差異性分析",
+                                    interactive=False, visible=False,
+                                )
+                            # 子分頁 3：監督式學習
+                            with gr.Tab("3. 監督式學習"):
+                                tab_rf_md  = gr.Markdown(_EMPTY_HINT)
+                                with gr.Row():
+                                    with gr.Column(scale=1):
+                                        tab_imp_df = gr.Dataframe(
+                                            label="特徵重要性 Top 20",
+                                            interactive=False, visible=False,
+                                        )
+                                    with gr.Column(scale=2):
+                                        tab_imp_img = gr.Image(label="特徵重要性圖", visible=False)
+                                tab_imp_file = gr.File(
+                                    label="下載監督式學習",
+                                    interactive=False, visible=False,
+                                )
+                            # 子分頁 4：非監督式學習
+                            with gr.Tab("4. 非監督式學習"):
+                                tab_clust_md = gr.Markdown(_EMPTY_HINT)
+                                with gr.Row():
+                                    with gr.Column(scale=1):
+                                        tab_dendro_img = gr.Image(label="層次分群樹狀圖", visible=False)
+                                    with gr.Column(scale=1):
+                                        tab_elbow_img  = gr.Image(label="K-means Elbow Curve", visible=False)
+                                tab_pca_img    = gr.Image(label="分群視覺化（PCA 2D）", visible=False)
+                                tab_cluster_df = gr.Dataframe(
+                                    label="分群結果",
+                                    interactive=False, visible=False,
+                                )
+                                tab_cluster_file = gr.File(
+                                    label="下載非監督式學習",
                                     interactive=False, visible=False,
                                 )
-                            with gr.Column(scale=2):
-                                tab_imp_img = gr.Image(label="特徵重要性圖", visible=False)
-                        tab_imp_file = gr.File(
-                            label="下載監督式學習",
-                            interactive=False, visible=False,
-                        )
-                    # 子分頁 4：非監督式學習
-                    with gr.Tab("4. 非監督式學習"):
-                        tab_clust_md = gr.Markdown(_EMPTY_HINT)
-                        with gr.Row():
-                            with gr.Column(scale=1):
-                                tab_dendro_img = gr.Image(label="層次分群樹狀圖", visible=False)
-                            with gr.Column(scale=1):
-                                tab_elbow_img  = gr.Image(label="K-means Elbow Curve", visible=False)
-                        tab_pca_img    = gr.Image(label="分群視覺化（PCA 2D）", visible=False)
-                        tab_cluster_df = gr.Dataframe(
-                            label="分群結果",
-                            interactive=False, visible=False,
-                        )
-                        tab_cluster_file = gr.File(
-                            label="下載非監督式學習",
-                            interactive=False, visible=False,
-                        )
-            with gr.Tab("📝 LLM輔助分析", visible=False) as tab6:
-                tab_rpt_md   = gr.Markdown(_EMPTY_HINT)
-                tab_rpt_file = gr.File(
-                    label="下載報告",
-                    file_count="multiple", interactive=False, visible=False,
-                )
-
 
-        # ── 分頁 Tab 元件（控制顯示/隱藏）─────────────────────────────────
-        _RESULT_TABS = [tab2, tab3, tab6]
+                    with gr.Column(visible=False, elem_id="canvas_report", elem_classes=["canvas-result"]) as canvas_report_col:
+                        tab_rpt_md   = gr.Markdown(_EMPTY_HINT)
+                        tab_rpt_file = gr.File(
+                            label="下載報告",
+                            file_count="multiple", interactive=False, visible=False,
+                        )
 
-        # ── 所有分頁內容輸出元件 + 3 個 Tab 可見性 ────────────────────────
+                    # 技術執行紀錄：Phase 8-B 從 chat-col 搬到 Canvas 底
+                    # 部，跟中段內容同一塊可捲動捲軸，非 sticky，點擊
+                    # 往下展開。
+                    with gr.Accordion("技術執行紀錄", open=False, elem_id="exec_log_accordion") as exec_log_accordion:
+                        exec_log = gr.Markdown(
+                            value="",
+                            elem_id="exec_log",
+                            elem_classes=["exec-log"],
+                        )
+        # ── 結果內容輸出元件 + 3 個 Canvas 結果區塊可見性 ─────────────────
+        # Phase 8-C：tab2/tab3/tab6（原 gr.Tab()）已改成 canvas_idx_col/
+        # canvas_stat_col/canvas_report_col（gr.Column()），可見性語意不變。
         _TAB_OUTPUTS = [
             tab_idx_md, tab_idx_df, tab_idx_file,               # 0-2  語言指標分析
             tab_desc_md, tab_desc_df, tab_desc_file,             # 3-5  敘述統計（含下載）
@@ -3273,7 +3293,7 @@ def create_app():
             tab_clust_md, tab_dendro_img, tab_elbow_img,         # 13-15 非監督式學習
             tab_pca_img, tab_cluster_df,                         # 16-17
             tab_rpt_md, tab_rpt_file,                            # 18-19 研究報告
-            tab2, tab3, tab6,                                    # 20-22 (visibility)
+            canvas_idx_col, canvas_stat_col, canvas_report_col,  # 20-22 (visibility)
             tab_imp_file, tab_cluster_file,                      # 23-24 新增下載按鈕（僅能往尾端加，
                                                                   # 不可插入既有 index 中間，見程式工作守則）
         ]
@@ -3586,9 +3606,9 @@ def create_app():
                 gr.update(visible=False),                # upload_row（Phase 8：正式上傳入口改這張卡片）
                 gr.update(value=None),                   # chat_upload（對話框仍清空一下，雖然目前不接上傳）
                 gr.update(visible=False),               # metadata_row
-                gr.update(visible=False),               # tab2 語言指標分析
-                gr.update(visible=False),               # tab3 統計比較分析
-                gr.update(visible=False),               # tab6 LLM輔助分析
+                gr.update(visible=False),               # canvas_idx_col 語言指標分析
+                gr.update(visible=False),               # canvas_stat_col 統計比較分析
+                gr.update(visible=False),               # canvas_report_col LLM輔助分析
                 gr.update(visible=False),               # reset_confirm_row（關掉確認彈窗自己）
                 _accordion_update(state, new_log),      # exec_log_accordion（收合並更新摘要文字）
                 gr.update(visible=True),                # homepage_col（Phase 8：重新開始＝回到首頁選情境）
@@ -3601,7 +3621,8 @@ def create_app():
         reset_confirm_btn.click(
             fn=on_reset_confirm,
             outputs=[chatbot, exec_log, session_state, app_header_html,
-                     scenario_btn_col, upload_row, chat_upload, metadata_row, tab2, tab3, tab6,
+                     scenario_btn_col, upload_row, chat_upload, metadata_row,
+                     canvas_idx_col, canvas_stat_col, canvas_report_col,
                      reset_confirm_row, exec_log_accordion, homepage_col, workspace_row, file_input],
         )