Phase 8-A：首頁 4 張情境卡片（gr.HTML()+JS橋接，取代按鈕式選擇）

情境選擇搬到首頁，垂直置中展示 4 張圖文卡片（標題+說明，啟用原本死碼的
SCENARIOS[n]["desc"]）。Gradio 無原生卡片元件，卡片點擊透過 _APP_HEAD_SCRIPT
注入的 JS 監聽器橋接到隱藏版 sc_btn_1..4（.sc-bridge-btn），.click() 綁定
邏輯完全不動。隱藏按鈕改放進一開始就 visible=True 的 homepage_col（而非
workspace_row 內），因為 Gradio 對建構時 visible=False 的容器是整段不掛載
進 DOM，放錯位置會導致 JS 找不到可點的按鈕。

on_scenario_pick／on_reset_confirm 的 outputs tuple 尾端新增 homepage_col／
workspace_row 兩個 visibility 輸出，控制首頁與對話+操作區的顯示切換。
scenario_btn_col 原本包按鈕的位置留空，作為 Phase 8-F 清理債務。

已用 Playwright 驗證：首頁四卡渲染正確、點卡進入原有情境選擇流程（對話訊息
與格式要求皆正確）、開始新分析可正確返回首頁。

app_agent.py

@@ -1680,6 +1680,34 @@ _EMPTY_HINT = (
     '</div>'
 )
 
+# ── SVG 圖示（Phase 8：導覽/操作圖示改用線條 icon，不再用 emoji）───────────
+# 手繪 Heroicons 風格（24x24 viewBox、stroke=currentColor、圓角線頭），
+# 不是逐點對照官方套件，純線條輪廓、視覺重量統一，供 _icon() 組裝使用。
+_ICON_PATHS = {
+    "folder":       '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>',
+    "chevron-down": '<polyline points="6,9 12,15 18,9"/>',
+    "chevron-double-left": '<polyline points="17,6 11,12 17,18"/><polyline points="11,6 5,12 11,18"/>',
+    "bars-3":       '<line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/>',
+    "x":            '<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>',
+    "home":         '<path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5"/>',
+    "chart-bar":    '<line x1="4" y1="20" x2="20" y2="20"/><rect x="5" y="12" width="3" height="8"/><rect x="10.5" y="7" width="3" height="13"/><rect x="16" y="14" width="3" height="6"/>',
+    "trending-up":  '<polyline points="4,17 9,11 13,14 20,6"/><polyline points="14,6 20,6 20,12"/>',
+    "document":     '<path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><line x1="8.5" y1="12" x2="15.5" y2="12"/><line x1="8.5" y1="15.5" x2="15.5" y2="15.5"/>',
+    "plus":         '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
+    "download":     '<path d="M12 3v12"/><polyline points="7,10 12,15 17,10"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>',
+}
+
+
+def _icon(name: str, size: int = 20) -> str:
+    """回傳單一 SVG 圖示字串，供 gr.HTML() 內容與 gr.Button(icon=...) 檔案外的行內用法共用。"""
+    path = _ICON_PATHS.get(name, "")
+    return (
+        f'<svg xmlns="http://www.w3.org/2000/svg" width="{size}" height="{size}" '
+        f'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" '
+        f'stroke-linecap="round" stroke-linejoin="round">{path}</svg>'
+    )
+
+
 _CUSTOM_CSS = """
 /* ═══════════════════════════════════════════════════════════════
    重譯文本分析系統 Agent — Refined Dark Academic Dashboard
@@ -2262,6 +2290,68 @@ div[role="log"][aria-label="chatbot conversation"],
     font-weight: 600 !important;
     font-size: 0.92rem !important;
 }
+/* ── 5d. HOMEPAGE（Phase 8：首頁 4 張情境卡片）──────────────────── */
+/* 隱藏版情境按鈕：純作 JS 橋接目標（見 _APP_HEAD_SCRIPT），
+   點卡片＝模擬點這裡的按鈕，Python 端 .click() 綁定完全不動 */
+.sc-bridge-btn { display: none !important; }
+
+.homepage-col { max-width: 50rem; margin: 2.5rem auto 3rem; padding: 0 1rem; }
+.homepage-hero { text-align: center; margin-bottom: 2.4rem; }
+.homepage-hero .kicker {
+    display: inline-flex; align-items: center; gap: .5rem;
+    font-family: 'Crimson Pro', serif; font-style: italic;
+    font-size: 1.05rem; color: var(--c-text-muted);
+}
+.homepage-hero .kicker::before, .homepage-hero .kicker::after {
+    content: ""; width: 28px; height: 1px; background: var(--c-border-hover);
+}
+.homepage-hero h1 {
+    margin: 1rem 0 .6rem; font-size: 2.1rem; line-height: 1.3; font-weight: 700;
+    background: linear-gradient(100deg, var(--c-accent) 10%, var(--c-accent2) 90%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.homepage-hero .subtitle { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--c-text-muted); }
+.homepage-hero .engine-line { margin: 0; font-size: .95rem; font-weight: 600; color: var(--c-text-soft); }
+.homepage-hero .engine-line .en { color: var(--c-accent-strong); }
+.homepage-hero .lede {
+    margin: 1.8rem 0 0; text-align: left; font-size: var(--font-size-base);
+    line-height: 1.8; color: var(--c-text-muted);
+}
+.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
+@media (max-width: 640px) { .scenario-grid { grid-template-columns: 1fr; } }
+.scenario-card {
+    all: unset; box-sizing: border-box; cursor: pointer;
+    display: flex; gap: 1rem; align-items: flex-start; text-align: left;
+    padding: 1.3rem 1.4rem;
+    background: var(--c-surface);
+    border: 1px solid rgba(var(--c-accent-rgb),.40) !important;
+    border-radius: 16px;
+    box-shadow: 0 16px 50px rgba(15,23,42,.20);
+    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+}
+.scenario-card:hover, .scenario-card:focus-visible {
+    border-color: rgba(var(--c-accent-rgb),.7) !important;
+    background: linear-gradient(180deg, rgba(var(--c-accent-rgb),.06) 0%, var(--c-surface) 100%);
+}
+.scenario-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
+.scenario-card .sc-index {
+    flex: none; font-family: 'Crimson Pro', serif; font-weight: 600;
+    font-size: 1.8rem; line-height: 1; padding-top: .1rem;
+    color: rgba(var(--c-accent-rgb),.4); transition: color 180ms ease;
+}
+.scenario-card:hover .sc-index, .scenario-card:focus-visible .sc-index { color: var(--c-accent); }
+.scenario-card .sc-body { min-width: 0; display: flex; flex-direction: column; }
+.scenario-card .sc-title { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 700; color: var(--c-text); line-height: 1.4; }
+.scenario-card .sc-desc { margin: 0; font-size: .85rem; color: var(--c-text-muted); line-height: 1.65; }
+.homepage-secondary { display: flex; justify-content: center; margin-top: 2rem; }
+.homepage-secondary .placeholder-link {
+    display: inline-flex; align-items: center; gap: .4rem;
+    font-size: .88rem; color: var(--c-text-subtle); cursor: not-allowed;
+}
+.homepage-secondary .placeholder-link svg { width: 1rem; height: 1rem; opacity: .6; }
+.homepage-footnote { margin-top: 2rem; text-align: center; font-size: .82rem; color: var(--c-text-subtle); }
+@media (prefers-reduced-motion: reduce) { .scenario-card { transition: none; } }
+
 /* ── 6. UPLOAD AREA（醒目卡片）─────────────────────────────────── */
 /* 注意：max-width + margin auto 是舊版單欄置中版面留下的樣式，現在
    upload-zone 是右側 action-col 裡的元件，要跟同一欄的 scenario-buttons
@@ -2726,6 +2816,24 @@ _APP_HEAD_SCRIPT = """
         /* 多次觸發確保 Svelte hydration 後生效 */
         [300, 800, 1500, 3000].forEach(function(t) { setTimeout(fixBubbleWrap, t); });
 
+        /* 首頁情境卡片（Phase 8）：Gradio 沒有原生卡片元件，卡片本身是
+           gr.HTML() 刻的純展示內容，點擊時模擬點擊對應的隱藏版原生按鈕
+           （sc_btn_1..4，見 create_app() 的 .sc-bridge-btn），Python 端
+           on_scenario_pick 的 .click() 綁定完全不用改 */
+        function bindScenarioCards() {
+            var grid = document.getElementById('homepage_scenario_grid');
+            if (!grid || grid._bound) return;
+            grid._bound = true;
+            grid.addEventListener('click', function (e) {
+                var card = e.target.closest('.scenario-card');
+                if (!card) return;
+                var n = card.getAttribute('data-scenario');
+                var btn = document.getElementById('sc_btn_' + n);
+                if (btn) btn.click();
+            });
+        }
+        [300, 800, 1500, 3000].forEach(function(t) { setTimeout(bindScenarioCards, t); });
+
         /* 持續監聽 DOM 變化（每次訊息更新後重設） */
         var mo = new MutationObserver(function(mutations) {
             var needsFix = mutations.some(function(m) {
@@ -2788,6 +2896,39 @@ _APP_HEAD_SCRIPT = """
 _APP_HEAD = _DARK_MODE_HEAD_CSS + _APP_HEAD_SCRIPT
 
 
+def _build_homepage_html() -> str:
+    """首頁 4 張情境卡片（取代原本按鈕式選擇），資料來源沿用 SCENARIOS 字典。"""
+    cards = []
+    for n in ("1", "2", "3", "4"):
+        sc = SCENARIOS[n]
+        cards.append(
+            '<div class="scenario-card" role="listitem" tabindex="0" '
+            f'data-scenario="{n}">'
+            f'<span class="sc-index en">{n.zfill(2)}</span>'
+            '<span class="sc-body">'
+            f'<span class="sc-title">{sc["title"]}</span>'
+            f'<span class="sc-desc">{sc["desc"]}</span>'
+            '</span></div>'
+        )
+    return (
+        '<div class="homepage-col">'
+        '<div class="homepage-hero">'
+        '<span class="kicker">重譯文本量化分析平台</span>'
+        '<h1>譯彩紛呈：重譯文本分析系統</h1>'
+        '<p class="subtitle en">TransPrism: An Analytical Framework for Retranslation</p>'
+        '<p class="engine-line"><span class="en">II</span> 分析引擎 <span class="en">SpectraEngine</span></p>'
+        '<p class="lede">上傳已斷詞的譯本文本，系統將自動計算 <span class="en">75</span> 項語言指標並進行統計分析，'
+        '協助您完成重譯研究的量化論證。請先選擇最符合您研究設計的比較情境：</p>'
+        '</div>'
+        f'<div class="scenario-grid" id="homepage_scenario_grid" role="list">{"".join(cards)}</div>'
+        '<div class="homepage-secondary">'
+        f'<span class="placeholder-link">{_icon("folder", 16)}讀取進度（功能開發中）</span>'
+        '</div>'
+        '<p class="homepage-footnote">選擇任一情境即開始分析；建議同時只執行一項分析，以確保運算速度。</p>'
+        '</div>'
+    )
+
+
 def create_app():
     with gr.Blocks(
         title="譯彩紛呈 II 分析引擎 SpectraEngine",
@@ -2815,11 +2956,32 @@ def create_app():
             # 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"])
+
                 # 電腦版：左側對話視窗、右側操作區（按鈕／上傳卡片）並排；
                 # 手機寬度（見 CSS .main-layout-row 的 media query）改回上下堆疊。
                 # 對話視窗為畫面上唯一主要焦點；技術執行紀錄預設收合，
                 # 只在長時間運算（指標計算／統計分析／報告撰寫）時自動展開
-                with gr.Row(elem_classes=["main-layout-row"]):
+                with gr.Row(elem_classes=["main-layout-row"], visible=False) as workspace_row:
                     with gr.Column(scale=6, min_width=320, elem_classes=["chat-col"]):
                         chatbot = gr.Chatbot(
                             label="對話視窗",
@@ -2850,11 +3012,13 @@ def create_app():
                     with gr.Column(scale=4, min_width=280, elem_classes=["action-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:
-                            sc_btn_1 = gr.Button("1　人工翻譯 vs 機器翻譯", variant="secondary")
-                            sc_btn_2 = gr.Button("2　全譯 vs 編譯／節譯／改寫", variant="secondary")
-                            sc_btn_3 = gr.Button("3　同期不同譯者譯本比較", variant="secondary")
-                            sc_btn_4 = gr.Button("4　不同時期重譯本的歷時比較", variant="secondary")
+                            pass
 
                         # Phase 7 過渡：此卡片永久隱藏，不再被任何 .click()/yield
                         # 設回 visible=True，保留純作程式碼備援（回退時把新的
@@ -3273,24 +3437,30 @@ def create_app():
         # ── 研究情境選擇（封閉式固定四選一，按鈕直接觸發，不再解析打字輸入）──
         def on_scenario_pick(sc_num, chat_history, log_history, state):
             if state is None:
-                yield chat_history, log_history, state, gr.update(), gr.update(), gr.update(), gr.update()
+                yield chat_history, log_history, state, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
                 return
 
             sc_info = SCENARIOS[sc_num]
             chat_history = chat_history + [_user_msg(sc_info["title"])]
             log_history = _log_append(log_history, "使用者選擇研究情境中……")
-            yield chat_history, log_history, state, gr.update(), gr.update(), gr.update(), gr.update()
+            # 首頁一旦選定情境即隱藏，換成對話＋操作區（workspace_row）；
+            # 這兩個 visibility 只需要在第一個 yield 就切換一次，後續 yield
+            # 沿用 gr.update() 不動即可，不用每次都重複賦值。
+            yield (chat_history, log_history, state, gr.update(), gr.update(), gr.update(), gr.update(),
+                   gr.update(visible=False), gr.update(visible=True))
 
             reply, state = handle_scenario_select(sc_num, state)
             log_history = _log_append(log_history, "✅ STEP 1 情境選擇完成")
             chat_history = chat_history + [_assistant_msg(reply)]
-            yield chat_history, log_history, state, gr.update(), _todo_update(state), gr.update(), gr.update()
+            yield (chat_history, log_history, state, gr.update(), _todo_update(state), gr.update(), gr.update(),
+                   gr.update(), gr.update())
 
             # STEP 2：確認訊息已經導向上傳卡片的「格式要求」區塊，不再另外用
             # LLM 生成一則重複格式細節的引導訊息，避免對話視窗出現冗餘內容
             state["current_step"] = 2
             log_history = _log_append(log_history, "⏳ STEP 2 上傳引導中……")
-            yield chat_history, log_history, state, gr.update(), _todo_update(state), gr.update(), gr.update()
+            yield (chat_history, log_history, state, gr.update(), _todo_update(state), gr.update(), gr.update(),
+                   gr.update(), gr.update())
 
             state["done_steps"] = [1, 2]
             state["current_step"] = 3
@@ -3303,13 +3473,15 @@ def create_app():
                 f"**格式要求**\n\n{sc_info['upload_prompt']}"
             )
             yield (chat_history, log_history, state, gr.update(visible=True),
-                   _todo_update(state), gr.update(visible=False), gr.update(value=hint))
+                   _todo_update(state), gr.update(visible=False), gr.update(value=hint),
+                   gr.update(), gr.update())
 
         for _sc_num, _sc_btn in (("1", sc_btn_1), ("2", sc_btn_2), ("3", sc_btn_3), ("4", sc_btn_4)):
             _sc_btn.click(
                 fn=functools.partial(on_scenario_pick, _sc_num),
                 inputs=[chatbot, exec_log, session_state],
-                outputs=[chatbot, exec_log, session_state, chat_upload_col, app_header_html, scenario_btn_col, upload_hint_md],
+                outputs=[chatbot, exec_log, session_state, chat_upload_col, app_header_html, scenario_btn_col,
+                         upload_hint_md, homepage_col, workspace_row],
             ).then(
                 fn=_populate_tabs,
                 inputs=[session_state],
@@ -3342,6 +3514,8 @@ def create_app():
                 gr.update(visible=False),               # tab6 LLM輔助分析
                 gr.update(visible=False),               # reset_confirm_row（關掉確認彈窗自己）
                 _accordion_update(state, new_log),      # exec_log_accordion（收合並更新摘要文字）
+                gr.update(visible=True),                # homepage_col（Phase 8：重新開始＝回到首頁選情境）
+                gr.update(visible=False),               # workspace_row
             )
 
         reset_btn.click(fn=lambda: gr.update(visible=True), outputs=[reset_confirm_row])
@@ -3350,7 +3524,7 @@ def create_app():
             fn=on_reset_confirm,
             outputs=[chatbot, exec_log, session_state, app_header_html,
                      scenario_btn_col, chat_upload_col, chat_upload, metadata_row, tab2, tab3, tab6,
-                     reset_confirm_row, exec_log_accordion],
+                     reset_confirm_row, exec_log_accordion, homepage_col, workspace_row],
         )
 
         # ── 檔案上傳確認（streaming generator）──────────────────────────────