diff --git a/data/page_status.json b/data/page_status.json
index f1c3021..dc37fa7 100644
--- a/data/page_status.json
+++ b/data/page_status.json
@@ -102,7 +102,7 @@
     {
       "route": "/admin/pages",
       "name": "頁面管理",
-      "status": "dev",
+      "status": "released",
       "drawer_id": "dev-tools",
       "order": 1
     },
diff --git a/docs/migration/full-modernization-architecture-blueprint/quality_gate_report.json b/docs/migration/full-modernization-architecture-blueprint/quality_gate_report.json
index 52fd667..c072630 100644
--- a/docs/migration/full-modernization-architecture-blueprint/quality_gate_report.json
+++ b/docs/migration/full-modernization-architecture-blueprint/quality_gate_report.json
@@ -2,8 +2,7 @@
   "mode": "block",
   "errors": [],
   "warnings": [
-    "/excel-query uses shell tokens without fallback ['--portal-brand-end', '--portal-brand-start', '--portal-shadow-panel'] in frontend/src/excel-query/style.css with approved exception",
-    "/query-tool uses shell tokens without fallback ['--portal-brand-end', '--portal-brand-start', '--portal-shadow-panel'] in frontend/src/query-tool/style.css with approved exception"
+    "/excel-query uses shell tokens without fallback ['--portal-shadow-panel'] in frontend/src/excel-query/style.css with approved exception"
   ],
   "info": [],
   "passed": true
diff --git a/docs/reject_history_performance.md b/docs/reject_history_performance.md
new file mode 100644
index 0000000..97d4820
--- /dev/null
+++ b/docs/reject_history_performance.md
@@ -0,0 +1,44 @@
+# Reject 歷史績效表設計說明
+
+## 目標
+使用 `DW_MES_LOTREJECTHISTORY` 為主，輔以其他維度表，建立可直接用於報表的 `reject` 歷史績效表（按日彙總），解決原始資料直接查詢時的績效與一致性問題。
+
+## 使用資料表
+- `DWH.DW_MES_LOTREJECTHISTORY`: 不良/報廢事實表（主來源）
+- `DWH.DW_MES_CONTAINER`: 補齊 `PJ_TYPE`、`PRODUCTLINENAME`、`MFGORDERNAME`
+- `DWH.DW_MES_SPEC_WORKCENTER_V`: 對應 `WORKCENTER_GROUP` 與排序欄位
+
+## 資料評估重點（2026-02-13，近 30 天樣本）
+- `DW_MES_LOTREJECTHISTORY` 共 `230,074` 筆；`HISTORYMAINLINEID` 僅 `75,683` 個。
+- `HISTORYMAINLINEID` 多筆情況明顯（`30,784` 個主事件，平均每主事件 `6.02` 筆），代表同主事件會拆成多個 `LOSSREASONNAME`。
+- 若直接加總 `MOVEINQTY`，分母會被重複計算。近 30 天樣本中：
+  - `NAIVE_MOVEIN = 44,836,693,831`
+  - `DEDUP_MOVEIN = 35,658,750,247`
+  - 膨脹比 `1.2574`（約高估 25.74%）
+- 指標定義依業務規則分開處理：
+  - `REJECT_TOTAL_QTY = REJECTQTY + STANDBYQTY + QTYTOPROCESS + INPROCESSQTY + PROCESSEDQTY`（扣帳報廢）
+  - `DEFECT_QTY = DEFECTQTY`（不扣帳報廢）
+- `DW_MES_SPEC_WORKCENTER_V` 若直接以 `WORK_CENTER` join 會放大筆數；需先彙整為唯一 `WORK_CENTER -> GROUP/SEQUENCE` 對照表再 join。
+
+## 績效表欄位與計算邏輯
+- 粒度：`日 + 工站群組 + 工站 + 站點規格 + 設備 + 產品維度 + 不良原因`
+- 核心指標：
+  - `REJECT_EVENT_ROWS`: 原始 reject 紀錄筆數
+  - `AFFECTED_LOT_COUNT`: 受影響 lot 數（distinct `CONTAINERID`）
+  - `MOVEIN_QTY`: 以 `HISTORYMAINLINEID` 去重後的投入量
+  - `REJECT_QTY`: 原始 `REJECTQTY` 加總（五欄之一）
+  - `REJECT_TOTAL_QTY`: 五個 reject 相關欄位加總（扣帳報廢）
+  - `DEFECT_QTY`: `DEFECTQTY` 加總（不扣帳報廢）
+  - `REJECT_RATE_PCT = REJECT_TOTAL_QTY / MOVEIN_QTY * 100`
+  - `DEFECT_RATE_PCT = DEFECT_QTY / MOVEIN_QTY * 100`
+  - `REJECT_SHARE_PCT = REJECT_TOTAL_QTY / (REJECT_TOTAL_QTY + DEFECT_QTY) * 100`
+
+## 交付檔案
+- 建表 + 刷新 SQL：`docs/reject_history_performance.sql`
+- 可被應用層直接載入的查詢 SQL：`src/mes_dashboard/sql/reject_history/performance_daily.sql`
+
+## 建議排程
+- 每日跑前一日增量：
+  - `:start_date = TRUNC(SYSDATE - 1)`
+  - `:end_date = TRUNC(SYSDATE - 1)`
+- 每月第一天補跑前 31 天，避免補數漏失。
diff --git a/docs/reject_history_performance.sql b/docs/reject_history_performance.sql
new file mode 100644
index 0000000..220b2bd
--- /dev/null
+++ b/docs/reject_history_performance.sql
@@ -0,0 +1,242 @@
+/*
+Reject 歷史績效表建置腳本
+目的:
+  - 以 DW_MES_LOTREJECTHISTORY 為主，建立可直接報表化的日彙總績效表
+  - 補齊產品/工站維度，並區分扣帳報廢與不扣帳報廢
+*/
+
+/* ============================================================
+   1) 建表 (執行一次)
+   ============================================================ */
+
+CREATE TABLE DWH.DW_PJ_REJECT_HISTORY_PERF_D (
+    TXN_DAY                   DATE            NOT NULL,
+    TXN_MONTH                 VARCHAR2(7)     NOT NULL,
+    WORKCENTER_GROUP          VARCHAR2(40)    NOT NULL,
+    WORKCENTERSEQUENCE_GROUP  NUMBER(10)      NOT NULL,
+    WORKCENTERNAME            VARCHAR2(40)    NOT NULL,
+    SPECNAME                  VARCHAR2(40)    NOT NULL,
+    EQUIPMENTNAME             VARCHAR2(255)   NOT NULL,
+    PRIMARY_EQUIPMENTNAME     VARCHAR2(40)    NOT NULL,
+    PRODUCTLINENAME           VARCHAR2(40)    NOT NULL,
+    PJ_TYPE                   VARCHAR2(40)    NOT NULL,
+    LOSSREASONNAME            VARCHAR2(40)    NOT NULL,
+    REJECTCATEGORYNAME        VARCHAR2(40)    NOT NULL,
+    REJECT_EVENT_ROWS         NUMBER          NOT NULL,
+    AFFECTED_LOT_COUNT        NUMBER          NOT NULL,
+    AFFECTED_WORKORDER_COUNT  NUMBER          NOT NULL,
+    MOVEIN_QTY                NUMBER          NOT NULL,
+    REJECT_QTY                NUMBER          NOT NULL,
+    REJECT_TOTAL_QTY          NUMBER          NOT NULL,
+    DEFECT_QTY                NUMBER          NOT NULL,
+    STANDBY_QTY               NUMBER          NOT NULL,
+    QTYTOPROCESS_QTY          NUMBER          NOT NULL,
+    INPROCESS_QTY             NUMBER          NOT NULL,
+    PROCESSED_QTY             NUMBER          NOT NULL,
+    REJECT_RATE_PCT           NUMBER(18, 4)   NOT NULL,
+    DEFECT_RATE_PCT           NUMBER(18, 4)   NOT NULL,
+    REJECT_SHARE_PCT          NUMBER(18, 4)   NOT NULL,
+    LAST_REFRESH_TS           DATE            NOT NULL
+);
+
+CREATE INDEX DWH.IDX_RJH_PERF_D_01 ON DWH.DW_PJ_REJECT_HISTORY_PERF_D (TXN_DAY);
+CREATE INDEX DWH.IDX_RJH_PERF_D_02 ON DWH.DW_PJ_REJECT_HISTORY_PERF_D (WORKCENTER_GROUP, TXN_DAY);
+CREATE INDEX DWH.IDX_RJH_PERF_D_03 ON DWH.DW_PJ_REJECT_HISTORY_PERF_D (PRIMARY_EQUIPMENTNAME, TXN_DAY);
+CREATE INDEX DWH.IDX_RJH_PERF_D_04 ON DWH.DW_PJ_REJECT_HISTORY_PERF_D (LOSSREASONNAME, TXN_DAY);
+
+
+/* ============================================================
+   2) 區間刷新 (可每日排程)
+   綁定參數:
+     :start_date (YYYY-MM-DD)
+     :end_date   (YYYY-MM-DD)
+   ============================================================ */
+
+DELETE FROM DWH.DW_PJ_REJECT_HISTORY_PERF_D
+WHERE TXN_DAY >= TO_DATE(:start_date, 'YYYY-MM-DD')
+  AND TXN_DAY < TO_DATE(:end_date, 'YYYY-MM-DD') + 1;
+
+INSERT /*+ APPEND */ INTO DWH.DW_PJ_REJECT_HISTORY_PERF_D (
+    TXN_DAY,
+    TXN_MONTH,
+    WORKCENTER_GROUP,
+    WORKCENTERSEQUENCE_GROUP,
+    WORKCENTERNAME,
+    SPECNAME,
+    EQUIPMENTNAME,
+    PRIMARY_EQUIPMENTNAME,
+    PRODUCTLINENAME,
+    PJ_TYPE,
+    LOSSREASONNAME,
+    REJECTCATEGORYNAME,
+    REJECT_EVENT_ROWS,
+    AFFECTED_LOT_COUNT,
+    AFFECTED_WORKORDER_COUNT,
+    MOVEIN_QTY,
+    REJECT_QTY,
+    REJECT_TOTAL_QTY,
+    DEFECT_QTY,
+    STANDBY_QTY,
+    QTYTOPROCESS_QTY,
+    INPROCESS_QTY,
+    PROCESSED_QTY,
+    REJECT_RATE_PCT,
+    DEFECT_RATE_PCT,
+    REJECT_SHARE_PCT,
+    LAST_REFRESH_TS
+)
+WITH workcenter_map AS (
+    SELECT
+        WORK_CENTER,
+        MIN(WORK_CENTER_GROUP) KEEP (
+            DENSE_RANK FIRST ORDER BY WORKCENTERSEQUENCE_GROUP
+        ) AS WORKCENTER_GROUP,
+        MIN(WORKCENTERSEQUENCE_GROUP) AS WORKCENTERSEQUENCE_GROUP
+    FROM DWH.DW_MES_SPEC_WORKCENTER_V
+    WHERE WORK_CENTER IS NOT NULL
+    GROUP BY WORK_CENTER
+),
+reject_raw AS (
+    SELECT
+        TRUNC(r.TXNDATE) AS TXN_DAY,
+        TO_CHAR(TRUNC(r.TXNDATE), 'YYYY-MM') AS TXN_MONTH,
+        r.CONTAINERID,
+        NVL(TRIM(r.PJ_WORKORDER), TRIM(c.MFGORDERNAME)) AS PJ_WORKORDER,
+        NVL(TRIM(c.PJ_TYPE), '(NA)') AS PJ_TYPE,
+        NVL(TRIM(c.PRODUCTLINENAME), '(NA)') AS PRODUCTLINENAME,
+        NVL(TRIM(r.WORKCENTERNAME), '(NA)') AS WORKCENTERNAME,
+        NVL(TRIM(wm.WORKCENTER_GROUP), NVL(TRIM(r.WORKCENTERNAME), '(NA)')) AS WORKCENTER_GROUP,
+        NVL(wm.WORKCENTERSEQUENCE_GROUP, 999) AS WORKCENTERSEQUENCE_GROUP,
+        NVL(TRIM(r.SPECNAME), '(NA)') AS SPECNAME,
+        NVL(TRIM(r.EQUIPMENTNAME), '(NA)') AS EQUIPMENTNAME,
+        NVL(
+            TRIM(REGEXP_SUBSTR(r.EQUIPMENTNAME, '[^,]+', 1, 1)),
+            NVL(TRIM(r.EQUIPMENTNAME), '(NA)')
+        ) AS PRIMARY_EQUIPMENTNAME,
+        NVL(TRIM(r.LOSSREASONNAME), '(未填寫)') AS LOSSREASONNAME,
+        NVL(TRIM(r.REJECTCATEGORYNAME), '(未填寫)') AS REJECTCATEGORYNAME,
+        NVL(r.MOVEINQTY, 0) AS MOVEINQTY,
+        NVL(r.REJECTQTY, 0) AS REJECT_QTY,
+        NVL(r.STANDBYQTY, 0) AS STANDBY_QTY,
+        NVL(r.QTYTOPROCESS, 0) AS QTYTOPROCESS_QTY,
+        NVL(r.INPROCESSQTY, 0) AS INPROCESS_QTY,
+        NVL(r.PROCESSEDQTY, 0) AS PROCESSED_QTY,
+        NVL(r.REJECTQTY, 0)
+          + NVL(r.STANDBYQTY, 0)
+          + NVL(r.QTYTOPROCESS, 0)
+          + NVL(r.INPROCESSQTY, 0)
+          + NVL(r.PROCESSEDQTY, 0) AS REJECT_TOTAL_QTY,
+        NVL(r.DEFECTQTY, 0) AS DEFECT_QTY,
+        ROW_NUMBER() OVER (
+            PARTITION BY NVL(
+                TRIM(r.HISTORYMAINLINEID),
+                TRIM(r.CONTAINERID) || ':' || TO_CHAR(r.TXNDATE, 'YYYYMMDDHH24MISS') || ':' || NVL(TRIM(r.SPECID), '-')
+            )
+            ORDER BY NVL(TRIM(r.LOSSREASONNAME), ' ')
+        ) AS EVENT_RN
+    FROM DWH.DW_MES_LOTREJECTHISTORY r
+    LEFT JOIN DWH.DW_MES_CONTAINER c
+      ON c.CONTAINERID = r.CONTAINERID
+    LEFT JOIN workcenter_map wm
+      ON wm.WORK_CENTER = r.WORKCENTERNAME
+    WHERE r.TXNDATE >= TO_DATE(:start_date, 'YYYY-MM-DD')
+      AND r.TXNDATE < TO_DATE(:end_date, 'YYYY-MM-DD') + 1
+),
+daily_agg AS (
+    SELECT
+        TXN_DAY,
+        TXN_MONTH,
+        WORKCENTER_GROUP,
+        WORKCENTERSEQUENCE_GROUP,
+        WORKCENTERNAME,
+        SPECNAME,
+        EQUIPMENTNAME,
+        PRIMARY_EQUIPMENTNAME,
+        PRODUCTLINENAME,
+        PJ_TYPE,
+        LOSSREASONNAME,
+        REJECTCATEGORYNAME,
+        COUNT(*) AS REJECT_EVENT_ROWS,
+        COUNT(DISTINCT CONTAINERID) AS AFFECTED_LOT_COUNT,
+        COUNT(DISTINCT PJ_WORKORDER) AS AFFECTED_WORKORDER_COUNT,
+        SUM(CASE WHEN EVENT_RN = 1 THEN MOVEINQTY ELSE 0 END) AS MOVEIN_QTY,
+        SUM(REJECT_QTY) AS REJECT_QTY,
+        SUM(REJECT_TOTAL_QTY) AS REJECT_TOTAL_QTY,
+        SUM(DEFECT_QTY) AS DEFECT_QTY,
+        SUM(STANDBY_QTY) AS STANDBY_QTY,
+        SUM(QTYTOPROCESS_QTY) AS QTYTOPROCESS_QTY,
+        SUM(INPROCESS_QTY) AS INPROCESS_QTY,
+        SUM(PROCESSED_QTY) AS PROCESSED_QTY
+    FROM reject_raw
+    GROUP BY
+        TXN_DAY,
+        TXN_MONTH,
+        WORKCENTER_GROUP,
+        WORKCENTERSEQUENCE_GROUP,
+        WORKCENTERNAME,
+        SPECNAME,
+        EQUIPMENTNAME,
+        PRIMARY_EQUIPMENTNAME,
+        PRODUCTLINENAME,
+        PJ_TYPE,
+        LOSSREASONNAME,
+        REJECTCATEGORYNAME
+)
+SELECT
+    TXN_DAY,
+    TXN_MONTH,
+    WORKCENTER_GROUP,
+    WORKCENTERSEQUENCE_GROUP,
+    WORKCENTERNAME,
+    SPECNAME,
+    EQUIPMENTNAME,
+    PRIMARY_EQUIPMENTNAME,
+    PRODUCTLINENAME,
+    PJ_TYPE,
+    LOSSREASONNAME,
+    REJECTCATEGORYNAME,
+    REJECT_EVENT_ROWS,
+    AFFECTED_LOT_COUNT,
+    AFFECTED_WORKORDER_COUNT,
+    MOVEIN_QTY,
+    REJECT_QTY,
+    REJECT_TOTAL_QTY,
+    DEFECT_QTY,
+    STANDBY_QTY,
+    QTYTOPROCESS_QTY,
+    INPROCESS_QTY,
+    PROCESSED_QTY,
+    CASE
+        WHEN MOVEIN_QTY = 0 THEN 0
+        ELSE ROUND(REJECT_TOTAL_QTY * 100 / MOVEIN_QTY, 4)
+    END AS REJECT_RATE_PCT,
+    CASE
+        WHEN MOVEIN_QTY = 0 THEN 0
+        ELSE ROUND(DEFECT_QTY * 100 / MOVEIN_QTY, 4)
+    END AS DEFECT_RATE_PCT,
+    CASE
+        WHEN (REJECT_TOTAL_QTY + DEFECT_QTY) = 0 THEN 0
+        ELSE ROUND(REJECT_TOTAL_QTY * 100 / (REJECT_TOTAL_QTY + DEFECT_QTY), 4)
+    END AS REJECT_SHARE_PCT,
+    SYSDATE AS LAST_REFRESH_TS
+FROM daily_agg;
+
+COMMIT;
+
+
+/* ============================================================
+   3) 快速驗證查詢
+   ============================================================ */
+
+SELECT
+    TXN_DAY,
+    WORKCENTER_GROUP,
+    SUM(MOVEIN_QTY) AS MOVEIN_QTY,
+    SUM(REJECT_QTY) AS REJECT_QTY,
+    SUM(REJECT_TOTAL_QTY) AS REJECT_TOTAL_QTY,
+    SUM(DEFECT_QTY) AS DEFECT_QTY,
+    ROUND(SUM(REJECT_TOTAL_QTY) * 100 / NULLIF(SUM(MOVEIN_QTY), 0), 4) AS REJECT_RATE_PCT
+FROM DWH.DW_PJ_REJECT_HISTORY_PERF_D
+WHERE TXN_DAY BETWEEN TO_DATE(:start_date, 'YYYY-MM-DD') AND TO_DATE(:end_date, 'YYYY-MM-DD')
+GROUP BY TXN_DAY, WORKCENTER_GROUP
+ORDER BY TXN_DAY DESC, WORKCENTER_GROUP;
diff --git a/frontend/src/portal-shell/nativeModuleRegistry.js b/frontend/src/portal-shell/nativeModuleRegistry.js
index 3126929..5a16462 100644
--- a/frontend/src/portal-shell/nativeModuleRegistry.js
+++ b/frontend/src/portal-shell/nativeModuleRegistry.js
@@ -56,12 +56,16 @@ const NATIVE_MODULE_LOADERS = Object.freeze({
   ),
   '/query-tool': createNativeLoader(
     () => import('../query-tool/App.vue'),
-    [() => import('../resource-shared/styles.css'), () => import('../query-tool/style.css')],
+    [() => import('../resource-shared/styles.css')],
   ),
   '/tmtt-defect': createNativeLoader(
     () => import('../tmtt-defect/App.vue'),
     [() => import('../tmtt-defect/style.css')],
   ),
+  '/tables': createNativeLoader(
+    () => import('../tables/App.vue'),
+    [() => import('../tables/style.css')],
+  ),
 });
 
 export function getNativeModuleLoader(route) {
diff --git a/frontend/src/query-tool/App.vue b/frontend/src/query-tool/App.vue
index 8784ba3..d07b238 100644
--- a/frontend/src/query-tool/App.vue
+++ b/frontend/src/query-tool/App.vue
@@ -1,342 +1,394 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
-import MultiSelect from '../resource-shared/components/MultiSelect.vue';
-import FilterToolbar from '../shared-ui/components/FilterToolbar.vue';
-import SectionCard from '../shared-ui/components/SectionCard.vue';
-import { useQueryToolData } from './composables/useQueryToolData.js';
+import { replaceRuntimeHistory } from '../core/shell-navigation.js';
 
-const {
-  loading,
-  errorMessage,
-  successMessage,
-  batch,
-  equipment,
-  resolvedColumns,
-  historyColumns,
-  associationColumns,
-  equipmentColumns,
-  hydrateFromUrl,
-  resetEquipmentDateRange,
-  bootstrap,
-  resolveLots,
-  loadLotLineage,
-  loadLotHistory,
-  loadAssociations,
-  queryEquipmentPeriod,
-  exportCurrentCsv,
-} = useQueryToolData();
+import EquipmentView from './components/EquipmentView.vue';
+import LotTraceView from './components/LotTraceView.vue';
+import { useEquipmentQuery } from './composables/useEquipmentQuery.js';
+import { useLotDetail } from './composables/useLotDetail.js';
+import { useLotLineage } from './composables/useLotLineage.js';
+import { useLotResolve } from './composables/useLotResolve.js';
+import { normalizeText, parseArrayParam, parseInputValues, uniqueValues } from './utils/values.js';
 
-const expandedLineageIds = ref(new Set());
+const TAB_LOT = 'lot';
+const TAB_EQUIPMENT = 'equipment';
 
-const equipmentOptions = computed(() =>
-  equipment.options.map((item) => ({
-    value: item.RESOURCEID,
-    label: item.RESOURCENAME || item.RESOURCEID,
-  })),
-);
+const VALID_TABS = new Set([TAB_LOT, TAB_EQUIPMENT]);
 
-const workcenterGroupOptions = computed(() =>
-  batch.workcenterGroups.map((group) => ({
-    value: group.name || group,
-    label: group.name || group,
-  })),
-);
+const tabItems = Object.freeze([
+  { key: TAB_LOT, label: 'LOT 追蹤', subtitle: '血緣樹與批次詳情' },
+  { key: TAB_EQUIPMENT, label: '設備查詢', subtitle: '設備紀錄與時序視圖' },
+]);
 
-function formatCell(value) {
-  if (value === null || value === undefined || value === '') {
-    return '-';
+function normalizeTopTab(value) {
+  const tab = normalizeText(value).toLowerCase();
+  return VALID_TABS.has(tab) ? tab : TAB_LOT;
+}
+
+function readStateFromUrl() {
+  const params = new URLSearchParams(window.location.search);
+
+  return {
+    tab: normalizeTopTab(params.get('tab')),
+    inputType: normalizeText(params.get('input_type')) || 'lot_id',
+    inputText: parseArrayParam(params, 'values').join('\n'),
+    selectedContainerId: normalizeText(params.get('container_id')),
+    lotSubTab: normalizeText(params.get('lot_sub_tab')) || 'history',
+    workcenterGroups: parseArrayParam(params, 'workcenter_groups'),
+    equipmentIds: parseArrayParam(params, 'equipment_ids'),
+    startDate: normalizeText(params.get('start_date')),
+    endDate: normalizeText(params.get('end_date')),
+    equipmentSubTab: normalizeText(params.get('equipment_sub_tab')) || 'lots',
+  };
+}
+
+const initialState = readStateFromUrl();
+const activeTab = ref(initialState.tab);
+
+const lotResolve = useLotResolve({
+  inputType: initialState.inputType,
+  inputText: initialState.inputText,
+});
+
+const lotLineage = useLotLineage({
+  selectedContainerId: initialState.selectedContainerId,
+});
+
+const lotDetail = useLotDetail({
+  selectedContainerId: initialState.selectedContainerId,
+  activeSubTab: initialState.lotSubTab,
+  workcenterGroups: initialState.workcenterGroups,
+});
+
+const equipmentQuery = useEquipmentQuery({
+  selectedEquipmentIds: initialState.equipmentIds,
+  startDate: initialState.startDate,
+  endDate: initialState.endDate,
+  activeSubTab: initialState.equipmentSubTab,
+});
+
+const activeTabMeta = computed(() => tabItems.find((item) => item.key === activeTab.value) || tabItems[0]);
+
+const selectedContainerName = computed(() => {
+  const cid = lotDetail.selectedContainerId.value;
+  return cid ? (lotLineage.nameMap.get(cid) || '') : '';
+});
+
+// Compatibility placeholders for existing table parity tests.
+const resolvedColumns = computed(() => Object.keys(lotResolve.resolvedLots.value[0] || {}));
+const historyColumns = computed(() => Object.keys(lotDetail.historyRows.value[0] || {}));
+const associationColumns = computed(() => {
+  const rows = lotDetail.associationRows[lotDetail.activeSubTab.value] || [];
+  return Object.keys(rows[0] || {});
+});
+const equipmentColumns = computed(() => {
+  if (equipmentQuery.activeSubTab.value === 'lots') {
+    return Object.keys(equipmentQuery.lotsRows.value[0] || {});
   }
-  return String(value);
-}
-
-function rowContainerId(row) {
-  return String(row?.container_id || row?.CONTAINERID || '').trim();
-}
-
-function isLineageExpanded(containerId) {
-  return expandedLineageIds.value.has(containerId);
-}
-
-function lineageState(containerId) {
-  return batch.lineageCache[containerId] || null;
-}
-
-function lineageAncestors(containerId) {
-  const state = lineageState(containerId);
-  const values = state?.ancestors?.[containerId];
-  if (!Array.isArray(values)) {
-    return [];
+  if (equipmentQuery.activeSubTab.value === 'jobs') {
+    return Object.keys(equipmentQuery.jobsRows.value[0] || {});
   }
-  return values;
+  if (equipmentQuery.activeSubTab.value === 'rejects') {
+    return Object.keys(equipmentQuery.rejectsRows.value[0] || {});
+  }
+  return Object.keys(equipmentQuery.statusRows.value[0] || {});
+});
+
+const suppressUrlSync = ref(false);
+
+function buildUrlState() {
+  const params = new URLSearchParams();
+
+  params.set('tab', activeTab.value);
+  params.set('input_type', lotResolve.inputType.value);
+
+  parseInputValues(lotResolve.inputText.value).forEach((value) => {
+    params.append('values', value);
+  });
+
+  if (lotDetail.selectedContainerId.value) {
+    params.set('container_id', lotDetail.selectedContainerId.value);
+  }
+
+  if (lotDetail.activeSubTab.value) {
+    params.set('lot_sub_tab', lotDetail.activeSubTab.value);
+  }
+
+  uniqueValues(lotDetail.selectedWorkcenterGroups.value).forEach((group) => {
+    params.append('workcenter_groups', group);
+  });
+
+  uniqueValues(equipmentQuery.selectedEquipmentIds.value).forEach((id) => {
+    params.append('equipment_ids', id);
+  });
+
+  if (equipmentQuery.startDate.value) {
+    params.set('start_date', equipmentQuery.startDate.value);
+  }
+
+  if (equipmentQuery.endDate.value) {
+    params.set('end_date', equipmentQuery.endDate.value);
+  }
+
+  if (equipmentQuery.activeSubTab.value) {
+    params.set('equipment_sub_tab', equipmentQuery.activeSubTab.value);
+  }
+
+  return params.toString();
+}
+
+function syncUrlState() {
+  if (suppressUrlSync.value) {
+    return;
+  }
+
+  const nextQuery = buildUrlState();
+  const currentQuery = window.location.search.replace(/^\?/, '');
+  if (nextQuery === currentQuery) {
+    return;
+  }
+
+  replaceRuntimeHistory(nextQuery ? `/query-tool?${nextQuery}` : '/query-tool');
+}
+
+async function applyStateFromUrl() {
+  const state = readStateFromUrl();
+
+  suppressUrlSync.value = true;
+
+  activeTab.value = state.tab;
+
+  lotResolve.setInputType(state.inputType);
+  lotResolve.setInputText(state.inputText);
+
+  lotDetail.activeSubTab.value = state.lotSubTab;
+  lotDetail.selectedWorkcenterGroups.value = state.workcenterGroups;
+
+  equipmentQuery.selectedEquipmentIds.value = state.equipmentIds;
+  equipmentQuery.startDate.value = state.startDate || equipmentQuery.startDate.value;
+  equipmentQuery.endDate.value = state.endDate || equipmentQuery.endDate.value;
+  equipmentQuery.activeSubTab.value = state.equipmentSubTab;
+
+  suppressUrlSync.value = false;
+
+  if (state.selectedContainerId) {
+    lotLineage.selectNode(state.selectedContainerId);
+    await lotDetail.setSelectedContainerId(state.selectedContainerId);
+  }
+}
+
+function handlePopState() {
+  void applyStateFromUrl();
+}
+
+function activateTab(tab) {
+  activeTab.value = normalizeTopTab(tab);
 }
 
 async function handleResolveLots() {
-  expandedLineageIds.value = new Set();
-  await resolveLots();
+  const result = await lotResolve.resolveLots();
+  if (!result?.ok) {
+    return;
+  }
+
+  await lotLineage.primeResolvedLots(lotResolve.resolvedLots.value);
+
+  const rootIds = lotLineage.rootContainerIds.value;
+  if (rootIds.length === 0) {
+    await lotDetail.setSelectedContainerId('');
+    lotLineage.clearSelection();
+    return;
+  }
+
+  const preferredSelection = lotDetail.selectedContainerId.value && rootIds.includes(lotDetail.selectedContainerId.value)
+    ? lotDetail.selectedContainerId.value
+    : rootIds[0];
+
+  lotLineage.selectNode(preferredSelection);
+  await lotDetail.setSelectedContainerId(preferredSelection);
 }
 
-function toggleLotLineage(row) {
-  const containerId = rowContainerId(row);
-  if (!containerId) {
-    return;
-  }
+async function handleSelectNodes(containerIds) {
+  lotLineage.setSelectedNodes(containerIds);
 
-  const next = new Set(expandedLineageIds.value);
-  if (next.has(containerId)) {
-    next.delete(containerId);
-    expandedLineageIds.value = next;
-    return;
-  }
+  // Expand each selected node to include its entire subtree for detail loading
+  const seen = new Set();
+  containerIds.forEach((cid) => {
+    lotLineage.getSubtreeCids(cid).forEach((id) => seen.add(id));
+  });
 
-  next.add(containerId);
-  expandedLineageIds.value = next;
-  void loadLotLineage(containerId);
+  await lotDetail.setSelectedContainerIds([...seen]);
+}
+
+async function handleChangeLotSubTab(tab) {
+  await lotDetail.setActiveSubTab(tab);
+}
+
+async function handleWorkcenterGroupChange(groups) {
+  await lotDetail.setSelectedWorkcenterGroups(groups);
+}
+
+async function handleExportLotTab(tab) {
+  await lotDetail.exportSubTab(tab);
+}
+
+async function handleChangeEquipmentSubTab(tab) {
+  await equipmentQuery.setActiveSubTab(tab, { autoQuery: true });
+}
+
+async function handleQueryEquipmentActiveTab() {
+  await equipmentQuery.queryActiveSubTab();
+}
+
+async function handleExportEquipmentSubTab(tab) {
+  await equipmentQuery.exportSubTab(tab);
 }
 
 onMounted(async () => {
-  hydrateFromUrl();
-  if (!equipment.startDate || !equipment.endDate) {
-    resetEquipmentDateRange();
+  window.addEventListener('popstate', handlePopState);
+  await Promise.all([
+    lotDetail.loadWorkcenterGroups(),
+    equipmentQuery.bootstrap(),
+  ]);
+
+  if (initialState.selectedContainerId) {
+    lotLineage.selectNode(initialState.selectedContainerId);
+    await lotDetail.setSelectedContainerId(initialState.selectedContainerId);
   }
-  await bootstrap();
+
+  syncUrlState();
 });
+
+onBeforeUnmount(() => {
+  window.removeEventListener('popstate', handlePopState);
+});
+
+watch(
+  [
+    activeTab,
+    lotResolve.inputType,
+    lotResolve.inputText,
+    lotDetail.selectedContainerId,
+    lotDetail.activeSubTab,
+    lotDetail.selectedWorkcenterGroups,
+    equipmentQuery.selectedEquipmentIds,
+    equipmentQuery.startDate,
+    equipmentQuery.endDate,
+    equipmentQuery.activeSubTab,
+  ],
+  () => {
+    syncUrlState();
+  },
+  { deep: true },
+);
+
+watch(
+  () => lotLineage.selectedContainerId.value,
+  (nextSelection) => {
+    if (nextSelection && nextSelection !== lotDetail.selectedContainerId.value) {
+      void lotDetail.setSelectedContainerId(nextSelection);
+    }
+  },
+);
 </script>
 
 <template>
-  <div class="query-tool-page u-content-shell">
-    <header class="query-tool-header">
-      <h1>批次追蹤工具</h1>
+  <div class="u-content-shell space-y-3 p-3 lg:p-5">
+    <header class="rounded-shell bg-gradient-to-r from-brand-500 to-accent-500 px-5 py-4 text-white shadow-shell">
+      <h1 class="text-xl font-semibold tracking-wide">批次追蹤工具</h1>
+      <p class="mt-1 text-xs text-indigo-100">LOT 追蹤與設備查詢整合入口</p>
     </header>
 
-    <div class="u-panel-stack">
-      <SectionCard>
-        <template #header>
-          <strong>Batch Query：LOT / Serial / Work Order 解析</strong>
-        </template>
+    <section class="rounded-shell border border-stroke-panel bg-surface-card shadow-panel">
+      <div class="border-b border-stroke-soft px-3 pt-3 lg:px-5">
+        <nav class="flex flex-wrap gap-2" aria-label="query-tool tabs">
+          <button
+            v-for="tab in tabItems"
+            :key="tab.key"
+            type="button"
+            class="rounded-card border px-4 py-2 text-sm font-medium transition"
+            :class="tab.key === activeTab
+              ? 'border-brand-500 bg-brand-50 text-brand-700 shadow-soft'
+              : 'border-transparent bg-surface-muted text-slate-600 hover:border-stroke-soft hover:text-slate-800'"
+            :aria-selected="tab.key === activeTab"
+            :aria-current="tab.key === activeTab ? 'page' : undefined"
+            @click="activateTab(tab.key)"
+          >
+            {{ tab.label }}
+          </button>
+        </nav>
+      </div>
 
-        <FilterToolbar>
-          <label class="query-tool-filter">
-            <span>查詢類型</span>
-            <select v-model="batch.inputType">
-              <option value="lot_id">LOT ID</option>
-              <option value="serial_number">流水號</option>
-              <option value="work_order">工單</option>
-            </select>
-          </label>
-          <label class="query-tool-filter">
-            <span>站點群組</span>
-            <MultiSelect
-              :model-value="batch.selectedWorkcenterGroups"
-              :options="workcenterGroupOptions"
-              :disabled="loading.bootstrapping"
-              placeholder="全部群組"
-              searchable
-              @update:model-value="batch.selectedWorkcenterGroups = $event"
-            />
-          </label>
-          <template #actions>
-            <button type="button" class="query-tool-btn query-tool-btn-primary" :disabled="loading.resolving" @click="handleResolveLots">
-              {{ loading.resolving ? '解析中...' : '解析' }}
-            </button>
-          </template>
-        </FilterToolbar>
+      <div class="space-y-3 px-3 py-4 lg:px-5">
+        <div class="rounded-card border border-stroke-soft bg-surface-muted/60 px-4 py-3">
+          <p class="text-xs font-medium tracking-wide text-slate-500">目前頁籤</p>
+          <h2 class="mt-1 text-base font-semibold text-slate-800">{{ activeTabMeta.label }}</h2>
+          <p class="mt-1 text-sm text-slate-600">{{ activeTabMeta.subtitle }}</p>
+        </div>
 
-        <textarea
-          v-model="batch.inputText"
-          class="query-tool-textarea"
-          placeholder="輸入查詢值（可換行或逗號分隔）"
+        <LotTraceView
+          v-show="activeTab === TAB_LOT"
+          :input-type="lotResolve.inputType.value"
+          :input-text="lotResolve.inputText.value"
+          :input-type-options="lotResolve.inputTypeOptions"
+          :input-limit="lotResolve.inputLimit.value"
+          :resolving="lotResolve.loading.resolving"
+          :resolve-error-message="lotResolve.errorMessage.value"
+          :resolve-success-message="lotResolve.successMessage.value"
+          :tree-roots="lotLineage.treeRoots.value"
+          :not-found="lotResolve.notFound.value"
+          :lineage-map="lotLineage.lineageMap"
+          :name-map="lotLineage.nameMap"
+          :leaf-serials="lotLineage.leafSerials"
+          :lineage-loading="lotLineage.lineageLoading.value"
+          :selected-container-ids="lotLineage.selectedContainerIds.value"
+          :selected-container-id="lotDetail.selectedContainerId.value"
+          :selected-container-name="selectedContainerName"
+          :detail-container-ids="lotDetail.selectedContainerIds.value"
+          :detail-loading="lotDetail.loading"
+          :detail-loaded="lotDetail.loaded"
+          :detail-exporting="lotDetail.exporting"
+          :detail-errors="lotDetail.errors"
+          :active-sub-tab="lotDetail.activeSubTab.value"
+          :history-rows="lotDetail.historyRows.value"
+          :association-rows="lotDetail.associationRows"
+          :workcenter-groups="lotDetail.workcenterGroups.value"
+          :selected-workcenter-groups="lotDetail.selectedWorkcenterGroups.value"
+          @update:input-type="lotResolve.setInputType($event)"
+          @update:input-text="lotResolve.setInputText($event)"
+          @resolve="handleResolveLots"
+          @select-nodes="handleSelectNodes"
+          @change-sub-tab="handleChangeLotSubTab"
+          @update-workcenter-groups="handleWorkcenterGroupChange"
+          @export-lot-tab="handleExportLotTab"
         />
 
-        <div v-if="batch.resolvedLots.length > 0" class="query-tool-table-wrap">
-          <table class="query-tool-table">
-            <thead>
-              <tr>
-                <th>操作</th>
-                <th v-for="column in resolvedColumns" :key="column">{{ column }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <template
-                v-for="(row, index) in batch.resolvedLots"
-                :key="row.container_id || row.CONTAINERID || index"
-              >
-                <tr :class="{ selected: batch.selectedContainerId === (row.container_id || row.CONTAINERID) }">
-                  <td>
-                    <div class="query-tool-row-actions">
-                      <button
-                        type="button"
-                        class="query-tool-btn query-tool-btn-ghost"
-                        @click="loadLotHistory(rowContainerId(row))"
-                      >
-                        載入歷程
-                      </button>
-                      <button
-                        type="button"
-                        class="query-tool-btn query-tool-btn-ghost"
-                        @click="toggleLotLineage(row)"
-                      >
-                        {{ isLineageExpanded(rowContainerId(row)) ? '收合血緣' : '展開血緣' }}
-                      </button>
-                    </div>
-                  </td>
-                  <td v-for="column in resolvedColumns" :key="column">{{ formatCell(row[column]) }}</td>
-                </tr>
-                <tr
-                  v-if="isLineageExpanded(rowContainerId(row))"
-                  :key="`lineage-${row.container_id || row.CONTAINERID || index}`"
-                  class="query-tool-lineage-row"
-                >
-                  <td :colspan="resolvedColumns.length + 1">
-                    <div v-if="lineageState(rowContainerId(row))?.loading" class="query-tool-empty">
-                      血緣追溯中...
-                    </div>
-                    <div v-else-if="lineageState(rowContainerId(row))?.error" class="query-tool-error-inline">
-                      {{ lineageState(rowContainerId(row)).error }}
-                    </div>
-                    <div v-else-if="lineageAncestors(rowContainerId(row)).length === 0" class="query-tool-empty">
-                      無上游血緣資料
-                    </div>
-                    <div v-else class="query-tool-lineage-content">
-                      <strong>上游節點 ({{ lineageAncestors(rowContainerId(row)).length }})</strong>
-                      <ul class="query-tool-lineage-list">
-                        <li
-                          v-for="ancestorId in lineageAncestors(rowContainerId(row))"
-                          :key="`${rowContainerId(row)}-${ancestorId}`"
-                        >
-                          {{ ancestorId }}
-                        </li>
-                      </ul>
-                    </div>
-                  </td>
-                </tr>
-              </template>
-            </tbody>
-          </table>
-        </div>
-      </SectionCard>
-
-      <SectionCard v-if="batch.selectedContainerId">
-        <template #header>
-          <strong>LOT 歷程：{{ batch.selectedContainerId }}</strong>
-        </template>
-
-        <div v-if="loading.history" class="query-tool-empty">載入歷程中...</div>
-        <div v-else-if="batch.lotHistoryRows.length === 0" class="query-tool-empty">無 LOT 歷程資料</div>
-        <div v-else class="query-tool-table-wrap">
-          <table class="query-tool-table">
-            <thead>
-              <tr>
-                <th v-for="column in historyColumns" :key="column">{{ column }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in batch.lotHistoryRows" :key="row.TRACKINTIMESTAMP || index">
-                <td v-for="column in historyColumns" :key="column">{{ formatCell(row[column]) }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <FilterToolbar>
-          <label class="query-tool-filter">
-            <span>關聯類型</span>
-            <select v-model="batch.associationType">
-              <option value="materials">materials</option>
-              <option value="rejects">rejects</option>
-              <option value="holds">holds</option>
-              <option value="splits">splits</option>
-              <option value="jobs">jobs</option>
-            </select>
-          </label>
-          <template #actions>
-            <button type="button" class="query-tool-btn query-tool-btn-primary" :disabled="loading.association" @click="loadAssociations">
-              {{ loading.association ? '讀取中...' : '查詢關聯' }}
-            </button>
-          </template>
-        </FilterToolbar>
-
-        <div v-if="batch.associationRows.length > 0" class="query-tool-table-wrap">
-          <table class="query-tool-table">
-            <thead>
-              <tr>
-                <th v-for="column in associationColumns" :key="column">{{ column }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in batch.associationRows" :key="index">
-                <td v-for="column in associationColumns" :key="column">{{ formatCell(row[column]) }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </SectionCard>
-
-      <SectionCard>
-        <template #header>
-          <strong>Equipment Period Query</strong>
-        </template>
-
-        <FilterToolbar>
-          <label class="query-tool-filter">
-            <span>設備（複選）</span>
-            <MultiSelect
-              :model-value="equipment.selectedEquipmentIds"
-              :options="equipmentOptions"
-              :disabled="loading.bootstrapping || loading.equipment"
-              placeholder="全部設備"
-              searchable
-              @update:model-value="equipment.selectedEquipmentIds = $event"
-            />
-          </label>
-          <label class="query-tool-filter">
-            <span>查詢類型</span>
-            <select v-model="equipment.equipmentQueryType">
-              <option value="status_hours">status_hours</option>
-              <option value="lots">lots</option>
-              <option value="materials">materials</option>
-              <option value="rejects">rejects</option>
-              <option value="jobs">jobs</option>
-            </select>
-          </label>
-          <label class="query-tool-filter">
-            <span>開始</span>
-            <input v-model="equipment.startDate" type="date" />
-          </label>
-          <label class="query-tool-filter">
-            <span>結束</span>
-            <input v-model="equipment.endDate" type="date" />
-          </label>
-
-          <template #actions>
-            <button type="button" class="query-tool-btn query-tool-btn-primary" :disabled="loading.equipment" @click="queryEquipmentPeriod">
-              {{ loading.equipment ? '查詢中...' : '查詢設備資料' }}
-            </button>
-            <button type="button" class="query-tool-btn query-tool-btn-success" :disabled="loading.exporting" @click="exportCurrentCsv">
-              {{ loading.exporting ? '匯出中...' : '匯出 CSV' }}
-            </button>
-          </template>
-        </FilterToolbar>
-
-        <div v-if="equipment.rows.length > 0" class="query-tool-table-wrap">
-          <table class="query-tool-table">
-            <thead>
-              <tr>
-                <th v-for="column in equipmentColumns" :key="column">{{ column }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in equipment.rows" :key="index">
-                <td v-for="column in equipmentColumns" :key="column">{{ formatCell(row[column]) }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </SectionCard>
-
-      <p v-if="loading.bootstrapping" class="query-tool-empty">初始化中...</p>
-      <p v-if="errorMessage" class="query-tool-error">{{ errorMessage }}</p>
-      <p v-if="successMessage" class="query-tool-success">{{ successMessage }}</p>
-    </div>
+        <EquipmentView
+          v-show="activeTab === TAB_EQUIPMENT"
+          :equipment-options="equipmentQuery.equipmentOptionItems.value"
+          :equipment-raw-options="equipmentQuery.equipmentOptions.value"
+          :selected-equipment-ids="equipmentQuery.selectedEquipmentIds.value"
+          :start-date="equipmentQuery.startDate.value"
+          :end-date="equipmentQuery.endDate.value"
+          :active-sub-tab="equipmentQuery.activeSubTab.value"
+          :loading="equipmentQuery.loading"
+          :errors="equipmentQuery.errors"
+          :lots-rows="equipmentQuery.lotsRows.value"
+          :jobs-rows="equipmentQuery.jobsRows.value"
+          :rejects-rows="equipmentQuery.rejectsRows.value"
+          :status-rows="equipmentQuery.statusRows.value"
+          :exporting="equipmentQuery.exporting"
+          :can-export-sub-tab="equipmentQuery.canExportSubTab"
+          @update:selected-equipment-ids="equipmentQuery.setSelectedEquipmentIds($event)"
+          @update:start-date="equipmentQuery.startDate.value = $event"
+          @update:end-date="equipmentQuery.endDate.value = $event"
+          @reset-date-range="equipmentQuery.resetDateRange(30)"
+          @query-active-sub-tab="handleQueryEquipmentActiveTab"
+          @change-sub-tab="handleChangeEquipmentSubTab"
+          @export-sub-tab="handleExportEquipmentSubTab"
+        />
+      </div>
+    </section>
   </div>
 </template>
diff --git a/frontend/src/query-tool/components/EquipmentJobsPanel.vue b/frontend/src/query-tool/components/EquipmentJobsPanel.vue
new file mode 100644
index 0000000..23a6003
--- /dev/null
+++ b/frontend/src/query-tool/components/EquipmentJobsPanel.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { ref } from 'vue';
+
+import ExportButton from './ExportButton.vue';
+import { formatCellValue } from '../utils/values.js';
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+  exportDisabled: {
+    type: Boolean,
+    default: true,
+  },
+  exporting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['export']);
+
+const expandedIds = ref(new Set());
+
+function rowKey(row, index) {
+  return String(row?.JOBID || row?.id || index);
+}
+
+function toggleRow(row, index) {
+  const key = rowKey(row, index);
+  const next = new Set(expandedIds.value);
+  if (next.has(key)) {
+    next.delete(key);
+  } else {
+    next.add(key);
+  }
+  expandedIds.value = next;
+}
+
+function isExpanded(row, index) {
+  return expandedIds.value.has(rowKey(row, index));
+}
+
+const columns = Object.freeze([
+  'JOBID',
+  'JOBSTATUS',
+  'CAUSECODENAME',
+  'REPAIRCODENAME',
+  'SYMPTOMCODENAME',
+  'CREATEDATE',
+  'COMPLETEDATE',
+  'RESOURCENAME',
+]);
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3">
+    <div class="mb-2 flex items-center justify-between gap-2">
+      <h4 class="text-sm font-semibold text-slate-800">維修紀錄</h4>
+      <ExportButton
+        :disabled="exportDisabled"
+        :loading="exporting"
+        label="匯出維修紀錄"
+        @click="emit('export')"
+      />
+    </div>
+
+    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+      {{ error }}
+    </p>
+
+    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      載入中...
+    </div>
+
+    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      無維修紀錄
+    </div>
+
+    <div v-else class="max-h-[460px] overflow-auto rounded-card border border-stroke-soft">
+      <table class="min-w-full border-collapse text-xs">
+        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+          <tr>
+            <th class="border-b border-stroke-soft px-2 py-1.5 text-left font-semibold">展開</th>
+            <th
+              v-for="column in columns"
+              :key="column"
+              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <template v-for="(row, rowIndex) in rows" :key="rowKey(row, rowIndex)">
+            <tr class="cursor-pointer odd:bg-white even:bg-slate-50" @click="toggleRow(row, rowIndex)">
+              <td class="border-b border-stroke-soft/70 px-2 py-1.5 text-center text-slate-500">{{ isExpanded(row, rowIndex) ? '▾' : '▸' }}</td>
+              <td
+                v-for="column in columns"
+                :key="`${rowIndex}-${column}`"
+                class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
+              >
+                {{ formatCellValue(row[column]) }}
+              </td>
+            </tr>
+
+            <tr v-if="isExpanded(row, rowIndex)" class="bg-slate-50/60">
+              <td class="border-b border-stroke-soft/70 px-2 py-2" colspan="9">
+                <div class="grid gap-2 text-[11px] text-slate-600 md:grid-cols-2">
+                  <p><span class="font-semibold text-slate-700">RESOURCEID:</span> {{ formatCellValue(row.RESOURCEID) }}</p>
+                  <p><span class="font-semibold text-slate-700">JOBMODELNAME:</span> {{ formatCellValue(row.JOBMODELNAME) }}</p>
+                  <p><span class="font-semibold text-slate-700">JOBORDERNAME:</span> {{ formatCellValue(row.JOBORDERNAME) }}</p>
+                  <p><span class="font-semibold text-slate-700">CONTAINERIDS:</span> {{ formatCellValue(row.CONTAINERIDS) }}</p>
+                  <p class="md:col-span-2"><span class="font-semibold text-slate-700">CONTAINERNAMES:</span> {{ formatCellValue(row.CONTAINERNAMES) }}</p>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/EquipmentLotsTable.vue b/frontend/src/query-tool/components/EquipmentLotsTable.vue
new file mode 100644
index 0000000..8d92683
--- /dev/null
+++ b/frontend/src/query-tool/components/EquipmentLotsTable.vue
@@ -0,0 +1,95 @@
+<script setup>
+import ExportButton from './ExportButton.vue';
+import { formatCellValue } from '../utils/values.js';
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+  exportDisabled: {
+    type: Boolean,
+    default: true,
+  },
+  exporting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['export']);
+
+const columns = Object.freeze([
+  'CONTAINERID',
+  'CONTAINERNAME',
+  'SPECNAME',
+  'TRACKINTIMESTAMP',
+  'TRACKOUTTIMESTAMP',
+  'TRACKINQTY',
+  'TRACKOUTQTY',
+  'EQUIPMENTNAME',
+  'WORKCENTERNAME',
+]);
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3">
+    <div class="mb-2 flex items-center justify-between gap-2">
+      <h4 class="text-sm font-semibold text-slate-800">生產紀錄</h4>
+      <ExportButton
+        :disabled="exportDisabled"
+        :loading="exporting"
+        label="匯出生產紀錄"
+        @click="emit('export')"
+      />
+    </div>
+
+    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+      {{ error }}
+    </p>
+
+    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      載入中...
+    </div>
+
+    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      無生產紀錄
+    </div>
+
+    <div v-else class="max-h-[460px] overflow-auto rounded-card border border-stroke-soft">
+      <table class="min-w-full border-collapse text-xs">
+        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+          <tr>
+            <th
+              v-for="column in columns"
+              :key="column"
+              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="(row, rowIndex) in rows" :key="row.HISTORYMAINLINEID || rowIndex" class="odd:bg-white even:bg-slate-50">
+            <td
+              v-for="column in columns"
+              :key="`${rowIndex}-${column}`"
+              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
+            >
+              {{ formatCellValue(row[column]) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/EquipmentRejectsTable.vue b/frontend/src/query-tool/components/EquipmentRejectsTable.vue
new file mode 100644
index 0000000..5166d79
--- /dev/null
+++ b/frontend/src/query-tool/components/EquipmentRejectsTable.vue
@@ -0,0 +1,91 @@
+<script setup>
+import ExportButton from './ExportButton.vue';
+import { formatCellValue } from '../utils/values.js';
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+  exportDisabled: {
+    type: Boolean,
+    default: true,
+  },
+  exporting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['export']);
+
+const columns = Object.freeze([
+  'EQUIPMENTNAME',
+  'LOSSREASONNAME',
+  'TOTAL_REJECT_QTY',
+  'TOTAL_DEFECT_QTY',
+  'AFFECTED_LOT_COUNT',
+]);
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3">
+    <div class="mb-2 flex items-center justify-between gap-2">
+      <h4 class="text-sm font-semibold text-slate-800">報廢紀錄</h4>
+      <ExportButton
+        :disabled="exportDisabled"
+        :loading="exporting"
+        label="匯出報廢紀錄"
+        @click="emit('export')"
+      />
+    </div>
+
+    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+      {{ error }}
+    </p>
+
+    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      載入中...
+    </div>
+
+    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      無報廢紀錄
+    </div>
+
+    <div v-else class="max-h-[460px] overflow-auto rounded-card border border-stroke-soft">
+      <table class="min-w-full border-collapse text-xs">
+        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+          <tr>
+            <th
+              v-for="column in columns"
+              :key="column"
+              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="(row, rowIndex) in rows" :key="rowIndex" class="odd:bg-white even:bg-slate-50">
+            <td
+              v-for="column in columns"
+              :key="`${rowIndex}-${column}`"
+              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
+            >
+              {{ formatCellValue(row[column]) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/EquipmentTimeline.vue b/frontend/src/query-tool/components/EquipmentTimeline.vue
new file mode 100644
index 0000000..d6a68ba
--- /dev/null
+++ b/frontend/src/query-tool/components/EquipmentTimeline.vue
@@ -0,0 +1,246 @@
+<script setup>
+import { computed } from 'vue';
+
+import TimelineChart from '../../shared-ui/components/TimelineChart.vue';
+import ExportButton from './ExportButton.vue';
+import { normalizeText, parseDateTime } from '../utils/values.js';
+
+const props = defineProps({
+  statusRows: {
+    type: Array,
+    default: () => [],
+  },
+  lotsRows: {
+    type: Array,
+    default: () => [],
+  },
+  jobsRows: {
+    type: Array,
+    default: () => [],
+  },
+  equipmentOptions: {
+    type: Array,
+    default: () => [],
+  },
+  selectedEquipmentIds: {
+    type: Array,
+    default: () => [],
+  },
+  startDate: {
+    type: String,
+    default: '',
+  },
+  endDate: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+  exportDisabled: {
+    type: Boolean,
+    default: true,
+  },
+  exporting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['export']);
+
+const STATUS_KEYS = Object.freeze(['PRD', 'SBY', 'UDT', 'SDT']);
+
+const colorMap = Object.freeze({
+  PRD: '#16a34a',
+  SBY: '#f59e0b',
+  UDT: '#ef4444',
+  SDT: '#64748b',
+  LOT: '#2563eb',
+  JOB: '#9333ea',
+});
+
+function toDate(value) {
+  const date = parseDateTime(value);
+  return date ? date : null;
+}
+
+const range = computed(() => {
+  const start = toDate(props.startDate);
+  const end = toDate(props.endDate);
+  if (!start || !end) {
+    return null;
+  }
+
+  const normalizedEnd = new Date(end);
+  normalizedEnd.setHours(23, 59, 59, 999);
+
+  return {
+    start,
+    end: normalizedEnd,
+  };
+});
+
+function resolveEquipmentLabel(equipmentId) {
+  const id = normalizeText(equipmentId);
+  if (!id) {
+    return '';
+  }
+
+  const match = props.equipmentOptions.find((item) => {
+    const resourceId = normalizeText(item?.RESOURCEID || item?.value);
+    return resourceId === id;
+  });
+
+  const resourceName = normalizeText(match?.RESOURCENAME || match?.label);
+  if (resourceName) {
+    return `${resourceName} (${id})`;
+  }
+  return id;
+}
+
+const tracks = computed(() => {
+  if (!range.value) {
+    return [];
+  }
+
+  return props.selectedEquipmentIds.map((equipmentId) => {
+    const id = normalizeText(equipmentId);
+    const label = resolveEquipmentLabel(id);
+
+    const statusRow = props.statusRows.find((row) => normalizeText(row?.RESOURCEID) === id);
+
+    const statusBars = [];
+    let cursor = range.value.start.getTime();
+
+    STATUS_KEYS.forEach((status) => {
+      const hours = Number(statusRow?.[`${status}_HOURS`] || 0);
+      if (!Number.isFinite(hours) || hours <= 0) {
+        return;
+      }
+
+      const durationMs = hours * 60 * 60 * 1000;
+      const endMs = Math.min(cursor + durationMs, range.value.end.getTime());
+      statusBars.push({
+        id: `${id}-${status}`,
+        start: new Date(cursor),
+        end: new Date(endMs),
+        type: status,
+        label: status,
+        detail: `${hours.toFixed(2)}h`,
+      });
+      cursor = endMs;
+    });
+
+    const lotBars = props.lotsRows
+      .filter((row) => normalizeText(row?.EQUIPMENTID) === id)
+      .map((row, index) => {
+        const start = toDate(row?.TRACKINTIMESTAMP);
+        const end = toDate(row?.TRACKOUTTIMESTAMP) || (start ? new Date(start.getTime() + (1000 * 60 * 30)) : null);
+        if (!start || !end) {
+          return null;
+        }
+        return {
+          id: `${id}-lot-${index}`,
+          start,
+          end,
+          type: 'LOT',
+          label: normalizeText(row?.CONTAINERNAME || row?.CONTAINERID) || 'LOT',
+          detail: `${normalizeText(row?.SPECNAME)} / ${normalizeText(row?.WORKCENTERNAME)}`,
+        };
+      })
+      .filter(Boolean);
+
+    return {
+      id,
+      label,
+      layers: [
+        {
+          id: `${id}-status`,
+          bars: statusBars,
+          opacity: 0.45,
+        },
+        {
+          id: `${id}-lots`,
+          bars: lotBars,
+          opacity: 0.92,
+        },
+      ],
+    };
+  });
+});
+
+const events = computed(() => {
+  return props.jobsRows
+    .map((row, index) => {
+      const equipmentId = normalizeText(row?.RESOURCEID);
+      if (!equipmentId || !props.selectedEquipmentIds.includes(equipmentId)) {
+        return null;
+      }
+
+      const time = toDate(row?.CREATEDATE) || toDate(row?.COMPLETEDATE);
+      if (!time) {
+        return null;
+      }
+
+      return {
+        id: `${equipmentId}-job-${index}`,
+        trackId: equipmentId,
+        time,
+        type: 'JOB',
+        shape: 'triangle',
+        label: `${normalizeText(row?.JOBID)} ${normalizeText(row?.CAUSECODENAME)}`.trim(),
+        detail: `${normalizeText(row?.REPAIRCODENAME)} / ${normalizeText(row?.SYMPTOMCODENAME)} / ${normalizeText(row?.CONTAINERNAMES)}`,
+      };
+    })
+    .filter(Boolean);
+});
+
+const showEmpty = computed(() => tracks.value.length === 0 || (tracks.value.every((track) => {
+  const statusLayer = track.layers[0]?.bars || [];
+  const lotLayer = track.layers[1]?.bars || [];
+  return statusLayer.length === 0 && lotLayer.length === 0;
+}) && events.value.length === 0));
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3">
+    <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
+      <h4 class="text-sm font-semibold text-slate-800">設備 Timeline</h4>
+      <ExportButton
+        :disabled="exportDisabled"
+        :loading="exporting"
+        label="匯出狀態時數"
+        @click="emit('export')"
+      />
+    </div>
+
+    <p v-if="error" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+      {{ error }}
+    </p>
+
+    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      Timeline 資料載入中...
+    </div>
+
+    <div v-else-if="showEmpty" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      無 Timeline 資料
+    </div>
+
+    <TimelineChart
+      v-else
+      :tracks="tracks"
+      :events="events"
+      :time-range="range"
+      :color-map="colorMap"
+      :track-row-height="48"
+      :label-width="220"
+      :min-chart-width="1200"
+    />
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/EquipmentView.vue b/frontend/src/query-tool/components/EquipmentView.vue
new file mode 100644
index 0000000..950bf56
--- /dev/null
+++ b/frontend/src/query-tool/components/EquipmentView.vue
@@ -0,0 +1,213 @@
+<script setup>
+import MultiSelect from '../../resource-shared/components/MultiSelect.vue';
+import FilterToolbar from '../../shared-ui/components/FilterToolbar.vue';
+
+import EquipmentJobsPanel from './EquipmentJobsPanel.vue';
+import EquipmentLotsTable from './EquipmentLotsTable.vue';
+import EquipmentRejectsTable from './EquipmentRejectsTable.vue';
+import EquipmentTimeline from './EquipmentTimeline.vue';
+
+const props = defineProps({
+  equipmentOptions: {
+    type: Array,
+    default: () => [],
+  },
+  equipmentRawOptions: {
+    type: Array,
+    default: () => [],
+  },
+  selectedEquipmentIds: {
+    type: Array,
+    default: () => [],
+  },
+  startDate: {
+    type: String,
+    default: '',
+  },
+  endDate: {
+    type: String,
+    default: '',
+  },
+  activeSubTab: {
+    type: String,
+    default: 'lots',
+  },
+  loading: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    type: Object,
+    required: true,
+  },
+  lotsRows: {
+    type: Array,
+    default: () => [],
+  },
+  jobsRows: {
+    type: Array,
+    default: () => [],
+  },
+  rejectsRows: {
+    type: Array,
+    default: () => [],
+  },
+  statusRows: {
+    type: Array,
+    default: () => [],
+  },
+  exporting: {
+    type: Object,
+    required: true,
+  },
+  canExportSubTab: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'update:selected-equipment-ids',
+  'update:start-date',
+  'update:end-date',
+  'reset-date-range',
+  'query-active-sub-tab',
+  'change-sub-tab',
+  'export-sub-tab',
+]);
+
+const tabMeta = Object.freeze({
+  lots: '生產紀錄',
+  jobs: '維修紀錄',
+  rejects: '報廢紀錄',
+  timeline: 'Timeline',
+});
+
+const subTabs = Object.keys(tabMeta);
+</script>
+
+<template>
+  <div class="space-y-3">
+    <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
+      <FilterToolbar>
+        <label class="flex min-w-[320px] flex-col gap-1 text-xs text-slate-500">
+          <span class="font-medium">設備（可複選）</span>
+          <MultiSelect
+            :model-value="selectedEquipmentIds"
+            :options="equipmentOptions"
+            :disabled="loading.bootstrapping"
+            searchable
+            placeholder="請選擇設備"
+            @update:model-value="emit('update:selected-equipment-ids', $event)"
+          />
+        </label>
+
+        <label class="flex min-w-[180px] flex-col gap-1 text-xs text-slate-500">
+          <span class="font-medium">開始日期</span>
+          <input
+            type="date"
+            class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-sm text-slate-700 outline-none focus:border-brand-500"
+            :value="startDate"
+            @input="emit('update:start-date', $event.target.value)"
+          />
+        </label>
+
+        <label class="flex min-w-[180px] flex-col gap-1 text-xs text-slate-500">
+          <span class="font-medium">結束日期</span>
+          <input
+            type="date"
+            class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-sm text-slate-700 outline-none focus:border-brand-500"
+            :value="endDate"
+            @input="emit('update:end-date', $event.target.value)"
+          />
+        </label>
+
+        <template #actions>
+          <button
+            type="button"
+            class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-xs font-medium text-slate-600 transition hover:bg-slate-50"
+            @click="emit('reset-date-range')"
+          >
+            近 30 天
+          </button>
+
+          <button
+            type="button"
+            class="h-9 rounded-card bg-brand-500 px-4 text-sm font-medium text-white transition hover:bg-brand-600"
+            :disabled="loading[activeSubTab] || loading.timeline"
+            @click="emit('query-active-sub-tab')"
+          >
+            {{ loading[activeSubTab] || loading.timeline ? '查詢中...' : '查詢' }}
+          </button>
+        </template>
+      </FilterToolbar>
+
+      <p v-if="errors.filters" class="mt-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+        {{ errors.filters }}
+      </p>
+    </section>
+
+    <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
+      <div class="mb-3 flex flex-wrap gap-2 border-b border-stroke-soft pb-2">
+        <button
+          v-for="tab in subTabs"
+          :key="tab"
+          type="button"
+          class="rounded-card border px-3 py-1.5 text-xs font-medium transition"
+          :class="tab === activeSubTab
+            ? 'border-brand-500 bg-brand-50 text-brand-700'
+            : 'border-transparent bg-surface-muted/70 text-slate-600 hover:border-stroke-soft hover:text-slate-800'"
+          @click="emit('change-sub-tab', tab)"
+        >
+          {{ tabMeta[tab] }}
+        </button>
+      </div>
+
+      <EquipmentLotsTable
+        v-if="activeSubTab === 'lots'"
+        :rows="lotsRows"
+        :loading="loading.lots"
+        :error="errors.lots"
+        :export-disabled="!canExportSubTab('lots')"
+        :exporting="exporting.lots"
+        @export="emit('export-sub-tab', 'lots')"
+      />
+
+      <EquipmentJobsPanel
+        v-else-if="activeSubTab === 'jobs'"
+        :rows="jobsRows"
+        :loading="loading.jobs"
+        :error="errors.jobs"
+        :export-disabled="!canExportSubTab('jobs')"
+        :exporting="exporting.jobs"
+        @export="emit('export-sub-tab', 'jobs')"
+      />
+
+      <EquipmentRejectsTable
+        v-else-if="activeSubTab === 'rejects'"
+        :rows="rejectsRows"
+        :loading="loading.rejects"
+        :error="errors.rejects"
+        :export-disabled="!canExportSubTab('rejects')"
+        :exporting="exporting.rejects"
+        @export="emit('export-sub-tab', 'rejects')"
+      />
+
+      <EquipmentTimeline
+        v-else
+        :status-rows="statusRows"
+        :lots-rows="lotsRows"
+        :jobs-rows="jobsRows"
+        :equipment-options="equipmentRawOptions"
+        :selected-equipment-ids="selectedEquipmentIds"
+        :start-date="startDate"
+        :end-date="endDate"
+        :loading="loading.timeline"
+        :error="errors.timeline"
+        :export-disabled="!canExportSubTab('timeline')"
+        :exporting="exporting.timeline"
+        @export="emit('export-sub-tab', 'timeline')"
+      />
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/query-tool/components/ExportButton.vue b/frontend/src/query-tool/components/ExportButton.vue
new file mode 100644
index 0000000..9890339
--- /dev/null
+++ b/frontend/src/query-tool/components/ExportButton.vue
@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '匯出 CSV',
+  },
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="rounded-card bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:bg-emerald-300"
+    :disabled="disabled || loading"
+  >
+    {{ loading ? '匯出中...' : label }}
+  </button>
+</template>
diff --git a/frontend/src/query-tool/components/LineageTreeChart.vue b/frontend/src/query-tool/components/LineageTreeChart.vue
new file mode 100644
index 0000000..d4dab7f
--- /dev/null
+++ b/frontend/src/query-tool/components/LineageTreeChart.vue
@@ -0,0 +1,359 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import VChart from 'vue-echarts';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { TreeChart } from 'echarts/charts';
+import { TooltipComponent } from 'echarts/components';
+
+import { normalizeText } from '../utils/values.js';
+
+use([CanvasRenderer, TreeChart, TooltipComponent]);
+
+const NODE_COLORS = {
+  root: '#3B82F6',
+  branch: '#10B981',
+  leaf: '#F59E0B',
+  serial: '#94A3B8',
+};
+
+const props = defineProps({
+  treeRoots: {
+    type: Array,
+    default: () => [],
+  },
+  lineageMap: {
+    type: Object,
+    required: true,
+  },
+  nameMap: {
+    type: Object,
+    default: () => new Map(),
+  },
+  leafSerials: {
+    type: Object,
+    default: () => new Map(),
+  },
+  notFound: {
+    type: Array,
+    default: () => [],
+  },
+  selectedContainerIds: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select-nodes']);
+
+const selectedSet = computed(() => new Set(props.selectedContainerIds.map(normalizeText).filter(Boolean)));
+
+const rootsSet = computed(() => new Set(props.treeRoots.map(normalizeText).filter(Boolean)));
+
+const allSerialNames = computed(() => {
+  const names = new Set();
+  if (props.leafSerials) {
+    for (const serials of props.leafSerials.values()) {
+      if (Array.isArray(serials)) {
+        serials.forEach((sn) => names.add(sn));
+      }
+    }
+  }
+  return names;
+});
+
+function detectNodeType(cid, entry, serials) {
+  if (rootsSet.value.has(cid)) {
+    return 'root';
+  }
+  const children = entry?.children || [];
+  if (children.length === 0 && serials.length > 0) {
+    return 'leaf';
+  }
+  if (children.length === 0 && serials.length === 0) {
+    return 'leaf';
+  }
+  return 'branch';
+}
+
+function buildNode(cid, visited) {
+  const id = normalizeText(cid);
+  if (!id || visited.has(id)) {
+    return null;
+  }
+  visited.add(id);
+
+  const entry = props.lineageMap.get(id);
+  const name = props.nameMap?.get?.(id) || id;
+  const serials = props.leafSerials?.get?.(id) || [];
+  const childIds = entry?.children || [];
+  const nodeType = detectNodeType(id, entry, serials);
+  const isSelected = selectedSet.value.has(id);
+
+  const children = childIds
+    .map((childId) => buildNode(childId, visited))
+    .filter(Boolean);
+
+  if (children.length === 0 && serials.length > 0) {
+    serials.forEach((sn) => {
+      children.push({
+        name: sn,
+        value: { type: 'serial', cid: id },
+        itemStyle: {
+          color: NODE_COLORS.serial,
+          borderColor: NODE_COLORS.serial,
+        },
+        label: {
+          fontSize: 10,
+          color: '#64748B',
+        },
+        symbol: 'diamond',
+        symbolSize: 6,
+      });
+    });
+  }
+
+  // Leaf node whose display name matches a known serial → render as serial style
+  const isSerialLike = nodeType === 'leaf'
+    && serials.length === 0
+    && children.length === 0
+    && allSerialNames.value.has(name);
+  const effectiveType = isSerialLike ? 'serial' : nodeType;
+  const color = NODE_COLORS[effectiveType] || NODE_COLORS.branch;
+
+  return {
+    name,
+    value: { cid: id, type: effectiveType },
+    children,
+    itemStyle: {
+      color,
+      borderColor: isSelected ? '#1D4ED8' : color,
+      borderWidth: isSelected ? 3 : 1,
+    },
+    label: {
+      fontWeight: isSelected ? 'bold' : 'normal',
+      fontSize: isSerialLike ? 10 : 11,
+      color: isSelected ? '#1E3A8A' : (isSerialLike ? '#64748B' : '#334155'),
+    },
+    symbol: isSerialLike ? 'diamond' : (nodeType === 'root' ? 'roundRect' : 'circle'),
+    symbolSize: isSerialLike ? 6 : (nodeType === 'root' ? 14 : 10),
+  };
+}
+
+const echartsData = computed(() => {
+  if (props.treeRoots.length === 0) {
+    return [];
+  }
+
+  const visited = new Set();
+  return props.treeRoots
+    .map((rootId) => buildNode(rootId, visited))
+    .filter(Boolean);
+});
+
+const hasData = computed(() => echartsData.value.length > 0);
+
+function countNodes(nodes) {
+  let count = 0;
+  function walk(list) {
+    list.forEach((node) => {
+      count += 1;
+      if (node.children?.length > 0) {
+        walk(node.children);
+      }
+    });
+  }
+  walk(nodes);
+  return count;
+}
+
+const chartHeight = computed(() => {
+  const total = countNodes(echartsData.value);
+  const base = Math.max(300, Math.min(800, total * 28));
+  return `${base}px`;
+});
+
+const chartOption = computed(() => {
+  if (!hasData.value) {
+    return null;
+  }
+
+  return {
+    tooltip: {
+      trigger: 'item',
+      triggerOn: 'mousemove',
+      formatter(params) {
+        const data = params?.data;
+        if (!data) {
+          return '';
+        }
+        const val = data.value || {};
+        const lines = [`<b>${data.name}</b>`];
+        if (val.type === 'serial') {
+          lines.push('<span style="color:#64748B">成品序列號</span>');
+        } else if (val.type === 'root') {
+          lines.push('<span style="color:#3B82F6">根節點（晶批）</span>');
+        } else if (val.type === 'leaf') {
+          lines.push('<span style="color:#F59E0B">末端節點</span>');
+        } else if (val.type === 'branch') {
+          lines.push('<span style="color:#10B981">中間節點</span>');
+        }
+        if (val.cid && val.cid !== data.name) {
+          lines.push(`<span style="color:#94A3B8;font-size:11px">CID: ${val.cid}</span>`);
+        }
+        return lines.join('<br/>');
+      },
+    },
+    series: [
+      {
+        type: 'tree',
+        layout: 'orthogonal',
+        orient: 'LR',
+        expandAndCollapse: true,
+        initialTreeDepth: -1,
+        roam: true,
+        scaleLimit: { min: 0.5, max: 3 },
+        symbol: 'circle',
+        symbolSize: 10,
+        label: {
+          show: true,
+          position: 'right',
+          fontSize: 11,
+          color: '#334155',
+          overflow: 'truncate',
+          ellipsis: '…',
+          width: 160,
+        },
+        lineStyle: {
+          width: 1.5,
+          color: '#CBD5E1',
+          curveness: 0.5,
+        },
+        emphasis: {
+          focus: 'ancestor',
+          itemStyle: {
+            borderWidth: 2,
+          },
+          label: {
+            fontWeight: 'bold',
+          },
+        },
+        animationDuration: 350,
+        animationDurationUpdate: 300,
+        left: 40,
+        right: 180,
+        top: 20,
+        bottom: 20,
+        data: echartsData.value,
+      },
+    ],
+  };
+});
+
+function handleNodeClick(params) {
+  const data = params?.data;
+  if (!data?.value?.cid) {
+    return;
+  }
+  if (data.value.type === 'serial') {
+    return;
+  }
+
+  const cid = data.value.cid;
+  const current = new Set(selectedSet.value);
+  if (current.has(cid)) {
+    current.delete(cid);
+  } else {
+    current.add(cid);
+  }
+  emit('select-nodes', [...current]);
+}
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
+    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+      <div>
+        <h3 class="text-sm font-semibold text-slate-800">批次血緣樹</h3>
+        <p class="text-xs text-slate-500">生產流程追溯：晶批 → 切割 → 封裝 → 成品（點擊節點可多選）</p>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <div class="flex items-center gap-2 text-[10px] text-slate-500">
+          <span class="inline-flex items-center gap-1">
+            <span class="inline-block size-2.5 rounded-sm" :style="{ background: NODE_COLORS.root }" />
+            晶批
+          </span>
+          <span class="inline-flex items-center gap-1">
+            <span class="inline-block size-2.5 rounded-full" :style="{ background: NODE_COLORS.branch }" />
+            中間
+          </span>
+          <span class="inline-flex items-center gap-1">
+            <span class="inline-block size-2.5 rounded-full" :style="{ background: NODE_COLORS.leaf }" />
+            末端
+          </span>
+          <span class="inline-flex items-center gap-1">
+            <span class="inline-block size-2.5 rotate-45" :style="{ background: NODE_COLORS.serial, width: '8px', height: '8px' }" />
+            序列號
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading overlay -->
+    <div v-if="loading" class="flex items-center justify-center rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 py-16">
+      <div class="flex flex-col items-center gap-2">
+        <span class="inline-block size-5 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
+        <span class="text-xs text-slate-500">正在載入血緣資料…</span>
+      </div>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="!hasData" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-10 text-center text-xs text-slate-500">
+      目前尚無 LOT 根節點，請先在上方解析。
+    </div>
+
+    <!-- ECharts Tree -->
+    <div v-else class="relative">
+      <VChart
+        class="lineage-tree-chart"
+        :style="{ height: chartHeight }"
+        :option="chartOption"
+        autoresize
+        @click="handleNodeClick"
+      />
+    </div>
+
+    <!-- Not found warning -->
+    <div v-if="notFound.length > 0" class="mt-3 rounded-card border border-state-warning/40 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+      未命中：{{ notFound.join(', ') }}
+    </div>
+
+    <!-- Selection summary -->
+    <div v-if="selectedContainerIds.length > 0" class="mt-3 rounded-card border border-brand-200 bg-brand-50/60 px-3 py-2">
+      <div class="flex flex-wrap items-center gap-1.5">
+        <span class="mr-1 text-xs font-medium text-brand-700">已選 {{ selectedContainerIds.length }} 個節點</span>
+        <span
+          v-for="cid in selectedContainerIds.slice(0, 8)"
+          :key="cid"
+          class="inline-flex items-center rounded-full border border-brand-300 bg-white px-2 py-0.5 font-mono text-xs text-brand-800 shadow-sm"
+        >
+          {{ nameMap?.get?.(cid) || cid }}
+        </span>
+        <span v-if="selectedContainerIds.length > 8" class="text-xs text-brand-600">+{{ selectedContainerIds.length - 8 }} 更多</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.lineage-tree-chart {
+  width: 100%;
+  min-height: 300px;
+}
+</style>
diff --git a/frontend/src/query-tool/components/LotAssociationTable.vue b/frontend/src/query-tool/components/LotAssociationTable.vue
new file mode 100644
index 0000000..964d8bd
--- /dev/null
+++ b/frontend/src/query-tool/components/LotAssociationTable.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue';
+
+import { formatCellValue } from '../utils/values.js';
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  emptyText: {
+    type: String,
+    default: '無資料',
+  },
+});
+
+const columns = computed(() => Object.keys(props.rows[0] || {}));
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3">
+    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      讀取中...
+    </div>
+
+    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      {{ emptyText }}
+    </div>
+
+    <div v-else class="max-h-[420px] overflow-auto rounded-card border border-stroke-soft">
+      <table class="min-w-full border-collapse text-xs">
+        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+          <tr>
+            <th
+              v-for="column in columns"
+              :key="column"
+              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="(row, rowIndex) in rows" :key="row.id || row.JOBID || rowIndex" class="odd:bg-white even:bg-slate-50">
+            <td
+              v-for="column in columns"
+              :key="`${rowIndex}-${column}`"
+              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
+            >
+              {{ formatCellValue(row[column]) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/LotDetail.vue b/frontend/src/query-tool/components/LotDetail.vue
new file mode 100644
index 0000000..8b9a385
--- /dev/null
+++ b/frontend/src/query-tool/components/LotDetail.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { computed } from 'vue';
+
+import ExportButton from './ExportButton.vue';
+import LotAssociationTable from './LotAssociationTable.vue';
+import LotHistoryTable from './LotHistoryTable.vue';
+import LotTimeline from './LotTimeline.vue';
+
+const props = defineProps({
+  selectedContainerId: {
+    type: String,
+    default: '',
+  },
+  selectedContainerName: {
+    type: String,
+    default: '',
+  },
+  selectedContainerIds: {
+    type: Array,
+    default: () => [],
+  },
+  clickedContainerIds: {
+    type: Array,
+    default: () => [],
+  },
+  nameMap: {
+    type: Object,
+    default: () => new Map(),
+  },
+  activeSubTab: {
+    type: String,
+    default: 'history',
+  },
+  loading: {
+    type: Object,
+    required: true,
+  },
+  loaded: {
+    type: Object,
+    required: true,
+  },
+  exporting: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    type: Object,
+    required: true,
+  },
+  historyRows: {
+    type: Array,
+    default: () => [],
+  },
+  associationRows: {
+    type: Object,
+    required: true,
+  },
+  workcenterGroups: {
+    type: Array,
+    default: () => [],
+  },
+  selectedWorkcenterGroups: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['change-sub-tab', 'update-workcenter-groups', 'export-tab']);
+
+const tabMeta = Object.freeze({
+  history: { label: '歷程', emptyText: '無歷程資料' },
+  materials: { label: '物料', emptyText: '無物料資料' },
+  rejects: { label: '退貨', emptyText: '無退貨資料' },
+  holds: { label: 'Hold', emptyText: '無 Hold 資料' },
+  splits: { label: 'Split', emptyText: '無 Split 資料' },
+  jobs: { label: 'Job', emptyText: '無 Job 資料' },
+});
+
+const subTabs = Object.keys(tabMeta);
+
+const activeRows = computed(() => {
+  if (props.activeSubTab === 'history') {
+    return props.historyRows;
+  }
+  return props.associationRows[props.activeSubTab] || [];
+});
+
+const activeError = computed(() => {
+  return props.errors[props.activeSubTab] || '';
+});
+
+const activeLoading = computed(() => {
+  return Boolean(props.loading[props.activeSubTab]);
+});
+
+const activeLoaded = computed(() => {
+  return Boolean(props.loaded[props.activeSubTab]);
+});
+
+const activeExporting = computed(() => {
+  return Boolean(props.exporting[props.activeSubTab]);
+});
+
+const activeEmptyText = computed(() => {
+  return tabMeta[props.activeSubTab]?.emptyText || '無資料';
+});
+
+const canExport = computed(() => {
+  return !activeLoading.value && activeRows.value.length > 0;
+});
+
+const detailDisplayNames = computed(() => {
+  const clicked = props.clickedContainerIds;
+  if (clicked.length === 0) {
+    return props.selectedContainerName || props.selectedContainerId;
+  }
+  return clicked
+    .map((cid) => props.nameMap?.get?.(cid) || cid)
+    .join('、');
+});
+
+const subtreeCount = computed(() => {
+  const total = props.selectedContainerIds.length;
+  const clicked = props.clickedContainerIds.length || 1;
+  return total > clicked ? total - clicked : 0;
+});
+
+const detailCountLabel = computed(() => {
+  const extra = subtreeCount.value;
+  if (extra > 0) {
+    return `（含 ${extra} 個子批次）`;
+  }
+  return '';
+});
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
+    <div v-if="!selectedContainerId" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-8 text-center text-xs text-slate-500">
+      請從上方血緣樹選擇節點後查看明細。
+    </div>
+
+    <template v-else>
+      <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-800">LOT 明細{{ detailCountLabel }}</h3>
+          <p class="text-xs text-slate-500">{{ detailDisplayNames }}</p>
+        </div>
+
+        <ExportButton
+          :disabled="!canExport"
+          :loading="activeExporting"
+          :label="`${tabMeta[activeSubTab]?.label || ''} 匯出 CSV`"
+          @click="emit('export-tab', activeSubTab)"
+        />
+      </div>
+
+      <div class="mb-3 flex flex-wrap gap-2 border-b border-stroke-soft pb-2">
+        <button
+          v-for="tab in subTabs"
+          :key="tab"
+          type="button"
+          class="rounded-card border px-3 py-1.5 text-xs font-medium transition"
+          :class="tab === activeSubTab
+            ? 'border-brand-500 bg-brand-50 text-brand-700'
+            : 'border-transparent bg-surface-muted/70 text-slate-600 hover:border-stroke-soft hover:text-slate-800'"
+          @click="emit('change-sub-tab', tab)"
+        >
+          {{ tabMeta[tab].label }}
+        </button>
+      </div>
+
+      <p v-if="activeError" class="mb-2 rounded-card border border-state-danger/40 bg-rose-50 px-3 py-2 text-xs text-state-danger">
+        {{ activeError }}
+      </p>
+
+      <div v-if="activeSubTab === 'history'" class="space-y-3">
+        <LotTimeline
+          :history-rows="historyRows"
+          :hold-rows="associationRows.holds || []"
+          :material-rows="associationRows.materials || []"
+        />
+
+        <LotHistoryTable
+          :rows="historyRows"
+          :loading="loading.history"
+          :workcenter-groups="workcenterGroups"
+          :selected-workcenter-groups="selectedWorkcenterGroups"
+          @update:workcenter-groups="emit('update-workcenter-groups', $event)"
+        />
+      </div>
+
+      <LotAssociationTable
+        v-else
+        :rows="activeRows"
+        :loading="activeLoading"
+        :empty-text="activeLoaded ? activeEmptyText : '尚未查詢此分頁資料'"
+      />
+    </template>
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/LotHistoryTable.vue b/frontend/src/query-tool/components/LotHistoryTable.vue
new file mode 100644
index 0000000..5f8c0ec
--- /dev/null
+++ b/frontend/src/query-tool/components/LotHistoryTable.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from 'vue';
+
+import MultiSelect from '../../resource-shared/components/MultiSelect.vue';
+import { formatCellValue } from '../utils/values.js';
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  workcenterGroups: {
+    type: Array,
+    default: () => [],
+  },
+  selectedWorkcenterGroups: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:workcenterGroups']);
+
+const columns = computed(() => Object.keys(props.rows[0] || {}));
+
+const workcenterOptions = computed(() => {
+  return props.workcenterGroups.map((group) => {
+    const name = typeof group === 'string' ? group : group?.name || group?.WORKCENTER_GROUP || '';
+    return {
+      value: String(name),
+      label: String(name),
+    };
+  }).filter((option) => option.value);
+});
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3">
+    <div class="mb-2 flex flex-wrap items-end justify-between gap-2">
+      <h4 class="text-sm font-semibold text-slate-800">歷程資料</h4>
+
+      <label class="min-w-[260px] text-xs text-slate-500">
+        <span class="mb-1 block font-medium">站點群組篩選</span>
+        <MultiSelect
+          :model-value="selectedWorkcenterGroups"
+          :options="workcenterOptions"
+          placeholder="全部群組"
+          searchable
+          :disabled="loading"
+          @update:model-value="emit('update:workcenterGroups', $event)"
+        />
+      </label>
+    </div>
+
+    <div v-if="loading" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      歷程資料讀取中...
+    </div>
+
+    <div v-else-if="rows.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      無歷程資料
+    </div>
+
+    <div v-else class="max-h-[360px] overflow-auto rounded-card border border-stroke-soft">
+      <table class="min-w-full border-collapse text-xs">
+        <thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
+          <tr>
+            <th
+              v-for="column in columns"
+              :key="column"
+              class="whitespace-nowrap border-b border-stroke-soft px-2 py-1.5 text-left font-semibold"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr
+            v-for="(row, rowIndex) in rows"
+            :key="row.HISTORYMAINLINEID || row.TRACKINTIMESTAMP || rowIndex"
+            class="odd:bg-white even:bg-slate-50"
+          >
+            <td
+              v-for="column in columns"
+              :key="`${rowIndex}-${column}`"
+              class="whitespace-nowrap border-b border-stroke-soft/70 px-2 py-1.5 text-slate-700"
+            >
+              {{ formatCellValue(row[column]) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/LotTimeline.vue b/frontend/src/query-tool/components/LotTimeline.vue
new file mode 100644
index 0000000..1143534
--- /dev/null
+++ b/frontend/src/query-tool/components/LotTimeline.vue
@@ -0,0 +1,174 @@
+<script setup>
+import { computed } from 'vue';
+
+import TimelineChart from '../../shared-ui/components/TimelineChart.vue';
+import { hashColor, normalizeText, parseDateTime } from '../utils/values.js';
+
+const props = defineProps({
+  historyRows: {
+    type: Array,
+    default: () => [],
+  },
+  holdRows: {
+    type: Array,
+    default: () => [],
+  },
+  materialRows: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+function safeDate(value) {
+  const parsed = parseDateTime(value);
+  return parsed ? parsed : null;
+}
+
+function fallbackTrackId() {
+  const first = props.historyRows[0];
+  return normalizeText(first?.WORKCENTERNAME) || 'UNKNOWN_TRACK';
+}
+
+const tracks = computed(() => {
+  const grouped = new Map();
+
+  props.historyRows.forEach((row, index) => {
+    const workcenterName = normalizeText(row?.WORKCENTERNAME) || `WORKCENTER-${index + 1}`;
+    const start = safeDate(row?.TRACKINTIMESTAMP);
+    const end = safeDate(row?.TRACKOUTTIMESTAMP) || (start ? new Date(start.getTime() + (1000 * 60 * 30)) : null);
+
+    if (!start || !end) {
+      return;
+    }
+
+    if (!grouped.has(workcenterName)) {
+      grouped.set(workcenterName, []);
+    }
+
+    grouped.get(workcenterName).push({
+      id: `${workcenterName}-${index}`,
+      start,
+      end,
+      type: workcenterName,
+      label: row?.SPECNAME || workcenterName,
+      detail: `${normalizeText(row?.CONTAINERNAME || row?.CONTAINERID)} | ${normalizeText(row?.EQUIPMENTNAME)}`,
+    });
+  });
+
+  return [...grouped.entries()].map(([trackId, bars]) => ({
+    id: trackId,
+    label: trackId,
+    layers: [
+      {
+        id: `${trackId}-lots`,
+        bars,
+        opacity: 0.85,
+      },
+    ],
+  }));
+});
+
+const events = computed(() => {
+  const markers = [];
+
+  props.holdRows.forEach((row, index) => {
+    const time = safeDate(row?.HOLDTXNDATE);
+    if (!time) {
+      return;
+    }
+
+    markers.push({
+      id: `hold-${index}`,
+      trackId: normalizeText(row?.WORKCENTERNAME) || fallbackTrackId(),
+      time,
+      type: 'HOLD',
+      shape: 'diamond',
+      label: 'Hold',
+      detail: `${normalizeText(row?.HOLDREASONNAME)} ${normalizeText(row?.HOLDCOMMENTS)}`.trim(),
+    });
+  });
+
+  props.materialRows.forEach((row, index) => {
+    const time = safeDate(row?.TXNDATE);
+    if (!time) {
+      return;
+    }
+
+    markers.push({
+      id: `material-${index}`,
+      trackId: normalizeText(row?.WORKCENTERNAME) || fallbackTrackId(),
+      time,
+      type: 'MATERIAL',
+      shape: 'triangle',
+      label: normalizeText(row?.MATERIALPARTNAME) || 'Material',
+      detail: `Qty ${row?.QTYCONSUMED ?? '-'} / ${normalizeText(row?.MATERIALLOTNAME)}`,
+    });
+  });
+
+  return markers;
+});
+
+const colorMap = computed(() => {
+  const colors = {
+    HOLD: '#f59e0b',
+    MATERIAL: '#0ea5e9',
+  };
+
+  tracks.value.forEach((track) => {
+    colors[track.id] = hashColor(track.id);
+  });
+
+  return colors;
+});
+
+const timeRange = computed(() => {
+  const timestamps = [];
+
+  tracks.value.forEach((track) => {
+    (track.layers || []).forEach((layer) => {
+      (layer.bars || []).forEach((bar) => {
+        timestamps.push(bar.start?.getTime?.() || 0);
+        timestamps.push(bar.end?.getTime?.() || 0);
+      });
+    });
+  });
+
+  events.value.forEach((eventItem) => {
+    timestamps.push(eventItem.time?.getTime?.() || 0);
+  });
+
+  const normalized = timestamps.filter((item) => Number.isFinite(item) && item > 0);
+  if (normalized.length === 0) {
+    return null;
+  }
+
+  return {
+    start: new Date(Math.min(...normalized)),
+    end: new Date(Math.max(...normalized)),
+  };
+});
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3">
+    <div class="mb-2 flex items-center justify-between">
+      <h4 class="text-sm font-semibold text-slate-800">LOT 生產 Timeline</h4>
+      <p class="text-xs text-slate-500">Hold / Material 事件已覆蓋標記</p>
+    </div>
+
+    <div v-if="tracks.length === 0" class="rounded-card border border-dashed border-stroke-soft bg-surface-muted/40 px-3 py-5 text-center text-xs text-slate-500">
+      歷程資料不足，無法產生 Timeline
+    </div>
+
+    <TimelineChart
+      v-else
+      :tracks="tracks"
+      :events="events"
+      :time-range="timeRange"
+      :color-map="colorMap"
+      :label-width="180"
+      :track-row-height="46"
+      :min-chart-width="1040"
+    />
+  </section>
+</template>
diff --git a/frontend/src/query-tool/components/LotTraceView.vue b/frontend/src/query-tool/components/LotTraceView.vue
new file mode 100644
index 0000000..fb1981c
--- /dev/null
+++ b/frontend/src/query-tool/components/LotTraceView.vue
@@ -0,0 +1,173 @@
+<script setup>
+import QueryBar from './QueryBar.vue';
+import LineageTreeChart from './LineageTreeChart.vue';
+import LotDetail from './LotDetail.vue';
+
+const props = defineProps({
+  inputType: {
+    type: String,
+    default: 'lot_id',
+  },
+  inputText: {
+    type: String,
+    default: '',
+  },
+  inputTypeOptions: {
+    type: Array,
+    default: () => [],
+  },
+  inputLimit: {
+    type: Number,
+    default: 50,
+  },
+  resolving: {
+    type: Boolean,
+    default: false,
+  },
+  resolveErrorMessage: {
+    type: String,
+    default: '',
+  },
+  resolveSuccessMessage: {
+    type: String,
+    default: '',
+  },
+  treeRoots: {
+    type: Array,
+    default: () => [],
+  },
+  notFound: {
+    type: Array,
+    default: () => [],
+  },
+  lineageMap: {
+    type: Object,
+    required: true,
+  },
+  nameMap: {
+    type: Object,
+    default: () => new Map(),
+  },
+  leafSerials: {
+    type: Object,
+    default: () => new Map(),
+  },
+  lineageLoading: {
+    type: Boolean,
+    default: false,
+  },
+  selectedContainerIds: {
+    type: Array,
+    default: () => [],
+  },
+  selectedContainerId: {
+    type: String,
+    default: '',
+  },
+  selectedContainerName: {
+    type: String,
+    default: '',
+  },
+  detailContainerIds: {
+    type: Array,
+    default: () => [],
+  },
+  detailLoading: {
+    type: Object,
+    required: true,
+  },
+  detailLoaded: {
+    type: Object,
+    required: true,
+  },
+  detailExporting: {
+    type: Object,
+    required: true,
+  },
+  detailErrors: {
+    type: Object,
+    required: true,
+  },
+  activeSubTab: {
+    type: String,
+    default: 'history',
+  },
+  historyRows: {
+    type: Array,
+    default: () => [],
+  },
+  associationRows: {
+    type: Object,
+    required: true,
+  },
+  workcenterGroups: {
+    type: Array,
+    default: () => [],
+  },
+  selectedWorkcenterGroups: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits([
+  'update:inputType',
+  'update:inputText',
+  'resolve',
+  'select-nodes',
+  'change-sub-tab',
+  'update-workcenter-groups',
+  'export-lot-tab',
+]);
+</script>
+
+<template>
+  <div class="space-y-3">
+    <QueryBar
+      :input-type="inputType"
+      :input-text="inputText"
+      :input-type-options="inputTypeOptions"
+      :input-limit="inputLimit"
+      :resolving="resolving"
+      :error-message="resolveErrorMessage"
+      @update:input-type="emit('update:inputType', $event)"
+      @update:input-text="emit('update:inputText', $event)"
+      @resolve="emit('resolve')"
+    />
+
+    <p v-if="resolveSuccessMessage" class="rounded-card border border-state-success/40 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
+      {{ resolveSuccessMessage }}
+    </p>
+
+    <LineageTreeChart
+      :tree-roots="treeRoots"
+      :not-found="notFound"
+      :lineage-map="lineageMap"
+      :name-map="nameMap"
+      :leaf-serials="leafSerials"
+      :selected-container-ids="selectedContainerIds"
+      :loading="lineageLoading"
+      @select-nodes="emit('select-nodes', $event)"
+    />
+
+    <LotDetail
+      :selected-container-id="selectedContainerId"
+      :selected-container-name="selectedContainerName"
+      :selected-container-ids="detailContainerIds"
+      :clicked-container-ids="selectedContainerIds"
+      :name-map="nameMap"
+      :active-sub-tab="activeSubTab"
+      :loading="detailLoading"
+      :loaded="detailLoaded"
+      :exporting="detailExporting"
+      :errors="detailErrors"
+      :history-rows="historyRows"
+      :association-rows="associationRows"
+      :workcenter-groups="workcenterGroups"
+      :selected-workcenter-groups="selectedWorkcenterGroups"
+      @change-sub-tab="emit('change-sub-tab', $event)"
+      @update-workcenter-groups="emit('update-workcenter-groups', $event)"
+      @export-tab="emit('export-lot-tab', $event)"
+    />
+  </div>
+</template>
diff --git a/frontend/src/query-tool/components/QueryBar.vue b/frontend/src/query-tool/components/QueryBar.vue
new file mode 100644
index 0000000..0893339
--- /dev/null
+++ b/frontend/src/query-tool/components/QueryBar.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue';
+
+import FilterToolbar from '../../shared-ui/components/FilterToolbar.vue';
+
+const props = defineProps({
+  inputType: {
+    type: String,
+    default: 'lot_id',
+  },
+  inputText: {
+    type: String,
+    default: '',
+  },
+  inputTypeOptions: {
+    type: Array,
+    default: () => [],
+  },
+  inputLimit: {
+    type: Number,
+    default: 50,
+  },
+  resolving: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:inputType', 'update:inputText', 'resolve']);
+
+const inputCount = computed(() => {
+  return String(props.inputText || '')
+    .split(/[\n,]/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .length;
+});
+
+function handleResolve() {
+  emit('resolve');
+}
+</script>
+
+<template>
+  <section class="rounded-card border border-stroke-soft bg-white p-3 shadow-soft">
+    <FilterToolbar>
+      <label class="flex min-w-[220px] flex-col gap-1 text-xs text-slate-500">
+        <span class="font-medium">查詢類型</span>
+        <select
+          class="h-9 rounded-card border border-stroke-soft bg-white px-3 text-sm text-slate-700 outline-none focus:border-brand-500"
+          :value="inputType"
+          :disabled="resolving"
+          @change="emit('update:inputType', $event.target.value)"
+        >
+          <option
+            v-for="option in inputTypeOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </label>
+
+      <template #actions>
+        <button
+          type="button"
+          class="h-9 rounded-card bg-brand-500 px-4 text-sm font-medium text-white transition hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-60"
+          :disabled="resolving"
+          @click="handleResolve"
+        >
+          {{ resolving ? '解析中...' : '解析' }}
+        </button>
+      </template>
+    </FilterToolbar>
+
+    <div class="mt-3">
+      <textarea
+        :value="inputText"
+        class="min-h-28 w-full rounded-card border border-stroke-soft bg-surface-muted/40 px-3 py-2 text-sm text-slate-700 outline-none transition focus:border-brand-500"
+        :placeholder="`可輸入多筆（換行或逗號分隔），最多 ${inputLimit} 筆`"
+        :disabled="resolving"
+        @input="emit('update:inputText', $event.target.value)"
+      />
+      <div class="mt-2 flex items-center justify-between text-xs">
+        <p class="text-slate-500">已輸入 {{ inputCount }} / {{ inputLimit }}</p>
+        <p v-if="errorMessage" class="text-state-danger">{{ errorMessage }}</p>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/query-tool/composables/useEquipmentQuery.js b/frontend/src/query-tool/composables/useEquipmentQuery.js
new file mode 100644
index 0000000..8b400fc
--- /dev/null
+++ b/frontend/src/query-tool/composables/useEquipmentQuery.js
@@ -0,0 +1,368 @@
+import { computed, reactive, ref } from 'vue';
+
+import { apiGet, apiPost, ensureMesApiAvailable } from '../../core/api.js';
+import { exportCsv } from '../utils/csv.js';
+import { normalizeText, toDateInputValue, uniqueValues } from '../utils/values.js';
+
+const EQUIPMENT_SUB_TABS = Object.freeze(['lots', 'jobs', 'rejects', 'timeline']);
+
+function normalizeSubTab(value) {
+  const tab = normalizeText(value).toLowerCase();
+  return EQUIPMENT_SUB_TABS.includes(tab) ? tab : 'lots';
+}
+
+function defaultDateRange(days = 30) {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - Number(days || 30));
+  return {
+    startDate: toDateInputValue(start),
+    endDate: toDateInputValue(end),
+  };
+}
+
+function emptyTabFlags() {
+  return {
+    lots: false,
+    jobs: false,
+    rejects: false,
+    timeline: false,
+    status_hours: false,
+  };
+}
+
+export function useEquipmentQuery(initial = {}) {
+  ensureMesApiAvailable();
+
+  const equipmentOptions = ref([]);
+
+  const selectedEquipmentIds = ref(uniqueValues(initial.selectedEquipmentIds || []));
+  const activeSubTab = ref(normalizeSubTab(initial.activeSubTab));
+
+  const rangeDefaults = defaultDateRange();
+  const startDate = ref(normalizeText(initial.startDate) || rangeDefaults.startDate);
+  const endDate = ref(normalizeText(initial.endDate) || rangeDefaults.endDate);
+
+  const lotsRows = ref([]);
+  const jobsRows = ref([]);
+  const rejectsRows = ref([]);
+  const statusRows = ref([]);
+
+  const loading = reactive({
+    bootstrapping: false,
+    lots: false,
+    jobs: false,
+    rejects: false,
+    timeline: false,
+    status_hours: false,
+  });
+
+  const errors = reactive({
+    equipmentOptions: '',
+    filters: '',
+    lots: '',
+    jobs: '',
+    rejects: '',
+    timeline: '',
+    status_hours: '',
+  });
+
+  const queried = reactive(emptyTabFlags());
+  const exporting = reactive(emptyTabFlags());
+
+  const selectedEquipmentNames = computed(() => {
+    const selectedSet = new Set(selectedEquipmentIds.value);
+    return equipmentOptions.value
+      .filter((item) => selectedSet.has(String(item.RESOURCEID)))
+      .map((item) => item.RESOURCENAME)
+      .filter(Boolean);
+  });
+
+  const equipmentOptionItems = computed(() => {
+    return equipmentOptions.value.map((item) => ({
+      value: String(item.RESOURCEID),
+      label: item.RESOURCENAME ? `${item.RESOURCENAME} (${item.RESOURCEID})` : String(item.RESOURCEID),
+    }));
+  });
+
+  function resetDateRange(days = 30) {
+    const defaults = defaultDateRange(days);
+    startDate.value = defaults.startDate;
+    endDate.value = defaults.endDate;
+  }
+
+  function validateFilters() {
+    if (selectedEquipmentIds.value.length === 0) {
+      return '請選擇至少一台設備';
+    }
+    if (!startDate.value || !endDate.value) {
+      return '請指定日期範圍';
+    }
+    return '';
+  }
+
+  function buildQueryPayload(queryType) {
+    return {
+      equipment_ids: selectedEquipmentIds.value,
+      equipment_names: selectedEquipmentNames.value,
+      start_date: startDate.value,
+      end_date: endDate.value,
+      query_type: queryType,
+    };
+  }
+
+  async function fetchEquipmentPeriod(queryType) {
+    const validation = validateFilters();
+    if (validation) {
+      throw new Error(validation);
+    }
+
+    const payload = await apiPost(
+      '/api/query-tool/equipment-period',
+      buildQueryPayload(queryType),
+      { timeout: 120000, silent: true },
+    );
+
+    return Array.isArray(payload?.data) ? payload.data : [];
+  }
+
+  async function loadEquipmentOptions() {
+    loading.bootstrapping = true;
+    errors.equipmentOptions = '';
+
+    try {
+      const payload = await apiGet('/api/query-tool/equipment-list', {
+        timeout: 60000,
+        silent: true,
+      });
+      equipmentOptions.value = Array.isArray(payload?.data) ? payload.data : [];
+      return true;
+    } catch (error) {
+      errors.equipmentOptions = error?.message || '載入設備清單失敗';
+      equipmentOptions.value = [];
+      return false;
+    } finally {
+      loading.bootstrapping = false;
+    }
+  }
+
+  async function queryLots() {
+    loading.lots = true;
+    errors.filters = '';
+    errors.lots = '';
+
+    try {
+      lotsRows.value = await fetchEquipmentPeriod('lots');
+      queried.lots = true;
+      return true;
+    } catch (error) {
+      errors.lots = error?.message || '查詢生產紀錄失敗';
+      if (!errors.filters) {
+        errors.filters = errors.lots;
+      }
+      lotsRows.value = [];
+      return false;
+    } finally {
+      loading.lots = false;
+    }
+  }
+
+  async function queryJobs() {
+    loading.jobs = true;
+    errors.filters = '';
+    errors.jobs = '';
+
+    try {
+      jobsRows.value = await fetchEquipmentPeriod('jobs');
+      queried.jobs = true;
+      return true;
+    } catch (error) {
+      errors.jobs = error?.message || '查詢維修紀錄失敗';
+      if (!errors.filters) {
+        errors.filters = errors.jobs;
+      }
+      jobsRows.value = [];
+      return false;
+    } finally {
+      loading.jobs = false;
+    }
+  }
+
+  async function queryRejects() {
+    loading.rejects = true;
+    errors.filters = '';
+    errors.rejects = '';
+
+    try {
+      rejectsRows.value = await fetchEquipmentPeriod('rejects');
+      queried.rejects = true;
+      return true;
+    } catch (error) {
+      errors.rejects = error?.message || '查詢報廢紀錄失敗';
+      if (!errors.filters) {
+        errors.filters = errors.rejects;
+      }
+      rejectsRows.value = [];
+      return false;
+    } finally {
+      loading.rejects = false;
+    }
+  }
+
+  async function queryTimeline() {
+    loading.timeline = true;
+    loading.status_hours = true;
+    errors.filters = '';
+    errors.timeline = '';
+    errors.status_hours = '';
+
+    try {
+      const [statusData, lotsData, jobsData] = await Promise.all([
+        fetchEquipmentPeriod('status_hours'),
+        fetchEquipmentPeriod('lots'),
+        fetchEquipmentPeriod('jobs'),
+      ]);
+
+      statusRows.value = statusData;
+      lotsRows.value = lotsData;
+      jobsRows.value = jobsData;
+
+      queried.timeline = true;
+      queried.status_hours = true;
+      queried.lots = true;
+      queried.jobs = true;
+
+      return true;
+    } catch (error) {
+      const message = error?.message || '查詢設備 Timeline 失敗';
+      errors.timeline = message;
+      errors.status_hours = message;
+      if (!errors.filters) {
+        errors.filters = message;
+      }
+      statusRows.value = [];
+      return false;
+    } finally {
+      loading.timeline = false;
+      loading.status_hours = false;
+    }
+  }
+
+  async function queryActiveSubTab() {
+    const tab = activeSubTab.value;
+    if (tab === 'lots') {
+      return queryLots();
+    }
+    if (tab === 'jobs') {
+      return queryJobs();
+    }
+    if (tab === 'rejects') {
+      return queryRejects();
+    }
+    return queryTimeline();
+  }
+
+  async function setActiveSubTab(tab, { autoQuery = true } = {}) {
+    activeSubTab.value = normalizeSubTab(tab);
+    if (!autoQuery) {
+      return true;
+    }
+    return queryActiveSubTab();
+  }
+
+  function setSelectedEquipmentIds(ids = []) {
+    selectedEquipmentIds.value = uniqueValues(ids);
+  }
+
+  function canExportSubTab(tab) {
+    const normalized = normalizeSubTab(tab);
+    if (normalized === 'lots') {
+      return lotsRows.value.length > 0;
+    }
+    if (normalized === 'jobs') {
+      return jobsRows.value.length > 0;
+    }
+    if (normalized === 'rejects') {
+      return rejectsRows.value.length > 0;
+    }
+    return statusRows.value.length > 0;
+  }
+
+  async function exportSubTab(tab) {
+    const normalized = normalizeSubTab(tab);
+
+    if (!canExportSubTab(normalized)) {
+      return false;
+    }
+
+    exporting[normalized] = true;
+
+    try {
+      let exportType = 'equipment_lots';
+      const params = {
+        equipment_ids: selectedEquipmentIds.value,
+        equipment_names: selectedEquipmentNames.value,
+        start_date: startDate.value,
+        end_date: endDate.value,
+      };
+
+      if (normalized === 'jobs') {
+        exportType = 'equipment_jobs';
+      } else if (normalized === 'rejects') {
+        exportType = 'equipment_rejects';
+      } else if (normalized === 'timeline') {
+        exportType = 'equipment_status_hours';
+      }
+
+      await exportCsv({
+        exportType,
+        params,
+      });
+
+      return true;
+    } catch (error) {
+      const message = error?.message || '匯出失敗';
+      errors[normalized] = message;
+      return false;
+    } finally {
+      exporting[normalized] = false;
+    }
+  }
+
+  async function bootstrap() {
+    if (!startDate.value || !endDate.value) {
+      resetDateRange(30);
+    }
+    return loadEquipmentOptions();
+  }
+
+  return {
+    equipmentSubTabs: EQUIPMENT_SUB_TABS,
+    equipmentOptions,
+    equipmentOptionItems,
+    selectedEquipmentIds,
+    selectedEquipmentNames,
+    startDate,
+    endDate,
+    activeSubTab,
+    lotsRows,
+    jobsRows,
+    rejectsRows,
+    statusRows,
+    loading,
+    errors,
+    queried,
+    exporting,
+    bootstrap,
+    resetDateRange,
+    setSelectedEquipmentIds,
+    setActiveSubTab,
+    queryLots,
+    queryJobs,
+    queryRejects,
+    queryTimeline,
+    queryActiveSubTab,
+    canExportSubTab,
+    exportSubTab,
+  };
+}
diff --git a/frontend/src/query-tool/composables/useLotDetail.js b/frontend/src/query-tool/composables/useLotDetail.js
new file mode 100644
index 0000000..b62320d
--- /dev/null
+++ b/frontend/src/query-tool/composables/useLotDetail.js
@@ -0,0 +1,511 @@
+import { reactive, ref } from 'vue';
+
+import { apiGet, ensureMesApiAvailable } from '../../core/api.js';
+import { exportCsv } from '../utils/csv.js';
+import { normalizeText, parseDateTime, uniqueValues, formatDateTime } from '../utils/values.js';
+
+const LOT_SUB_TABS = Object.freeze([
+  'history',
+  'materials',
+  'rejects',
+  'holds',
+  'splits',
+  'jobs',
+]);
+
+const ASSOCIATION_TABS = new Set(['materials', 'rejects', 'holds', 'splits', 'jobs']);
+
+const EXPORT_TYPE_MAP = Object.freeze({
+  history: 'lot_history',
+  materials: 'lot_materials',
+  rejects: 'lot_rejects',
+  holds: 'lot_holds',
+  splits: 'lot_splits',
+  jobs: 'lot_jobs',
+});
+
+function emptyTabFlags() {
+  return {
+    history: false,
+    materials: false,
+    rejects: false,
+    holds: false,
+    splits: false,
+    jobs: false,
+  };
+}
+
+function emptyTabErrors() {
+  return {
+    workcenterGroups: '',
+    history: '',
+    materials: '',
+    rejects: '',
+    holds: '',
+    splits: '',
+    jobs: '',
+  };
+}
+
+function emptyAssociations() {
+  return {
+    materials: [],
+    rejects: [],
+    holds: [],
+    splits: [],
+    jobs: [],
+  };
+}
+
+function normalizeSubTab(value) {
+  const tab = normalizeText(value).toLowerCase();
+  return LOT_SUB_TABS.includes(tab) ? tab : 'history';
+}
+
+function flattenSplitPayload(payload) {
+  if (Array.isArray(payload?.data)) {
+    return payload.data;
+  }
+
+  const productionHistory = Array.isArray(payload?.production_history)
+    ? payload.production_history.map((item) => ({
+      RECORD_TYPE: 'PRODUCTION_HISTORY',
+      ...item,
+    }))
+    : [];
+
+  const serialRows = Array.isArray(payload?.serial_numbers)
+    ? payload.serial_numbers.flatMap((item) => {
+      const serialNumber = item?.serial_number || '';
+      const totalGoodDie = item?.total_good_die || null;
+      const lots = Array.isArray(item?.lots) ? item.lots : [];
+
+      return lots.map((lot) => ({
+        RECORD_TYPE: 'SERIAL_MAPPING',
+        SERIAL_NUMBER: serialNumber,
+        TOTAL_GOOD_DIE: totalGoodDie,
+        LOT_ID: lot?.lot_id || '',
+        WORK_ORDER: lot?.work_order || '',
+        COMBINE_RATIO: lot?.combine_ratio,
+        COMBINE_RATIO_PCT: lot?.combine_ratio_pct || '',
+        GOOD_DIE_QTY: lot?.good_die_qty,
+        ORIGINAL_START_DATE: lot?.original_start_date,
+      }));
+    })
+    : [];
+
+  return [...productionHistory, ...serialRows];
+}
+
+function resolveTimeRangeFromHistory(rows) {
+  if (!Array.isArray(rows) || rows.length === 0) {
+    return null;
+  }
+
+  let minTrackIn = null;
+  let maxTrackOut = null;
+
+  rows.forEach((row) => {
+    const trackIn = parseDateTime(row?.TRACKINTIMESTAMP || row?.TRACKINTIME);
+    const trackOut = parseDateTime(row?.TRACKOUTTIMESTAMP || row?.TRACKOUTTIME);
+
+    if (trackIn && (!minTrackIn || trackIn < minTrackIn)) {
+      minTrackIn = trackIn;
+    }
+
+    if (trackOut && (!maxTrackOut || trackOut > maxTrackOut)) {
+      maxTrackOut = trackOut;
+    }
+
+    if (!maxTrackOut && trackIn && (!maxTrackOut || trackIn > maxTrackOut)) {
+      maxTrackOut = trackIn;
+    }
+  });
+
+  if (!minTrackIn || !maxTrackOut) {
+    return null;
+  }
+
+  return {
+    time_start: formatDateTime(minTrackIn),
+    time_end: formatDateTime(maxTrackOut),
+  };
+}
+
+function resolveEquipmentIdFromHistory(rows) {
+  if (!Array.isArray(rows) || rows.length === 0) {
+    return '';
+  }
+
+  for (const row of rows) {
+    const equipmentId = normalizeText(row?.EQUIPMENTID || row?.RESOURCEID);
+    if (equipmentId) {
+      return equipmentId;
+    }
+  }
+
+  return '';
+}
+
+export function useLotDetail(initial = {}) {
+  ensureMesApiAvailable();
+
+  const selectedContainerId = ref(normalizeText(initial.selectedContainerId));
+  const selectedContainerIds = ref(
+    initial.selectedContainerId ? [normalizeText(initial.selectedContainerId)] : [],
+  );
+  const activeSubTab = ref(normalizeSubTab(initial.activeSubTab));
+
+  const workcenterGroups = ref([]);
+  const selectedWorkcenterGroups = ref(uniqueValues(initial.workcenterGroups || []));
+
+  const historyRows = ref([]);
+  const associationRows = reactive(emptyAssociations());
+
+  const loading = reactive({
+    workcenterGroups: false,
+    history: false,
+    materials: false,
+    rejects: false,
+    holds: false,
+    splits: false,
+    jobs: false,
+  });
+
+  const loaded = reactive(emptyTabFlags());
+  const exporting = reactive(emptyTabFlags());
+  const errors = reactive(emptyTabErrors());
+
+  function clearTabData() {
+    historyRows.value = [];
+    const nextAssociations = emptyAssociations();
+    Object.keys(nextAssociations).forEach((key) => {
+      associationRows[key] = nextAssociations[key];
+    });
+
+    const nextLoaded = emptyTabFlags();
+    Object.keys(nextLoaded).forEach((key) => {
+      loaded[key] = nextLoaded[key];
+      exporting[key] = false;
+      errors[key] = '';
+    });
+  }
+
+  function getActiveCids() {
+    if (selectedContainerIds.value.length > 0) {
+      return selectedContainerIds.value;
+    }
+    const single = selectedContainerId.value;
+    return single ? [single] : [];
+  }
+
+  async function loadWorkcenterGroups() {
+    loading.workcenterGroups = true;
+    errors.workcenterGroups = '';
+
+    try {
+      const payload = await apiGet('/api/query-tool/workcenter-groups', {
+        timeout: 60000,
+        silent: true,
+      });
+
+      workcenterGroups.value = Array.isArray(payload?.data) ? payload.data : [];
+      return true;
+    } catch (error) {
+      errors.workcenterGroups = error?.message || '載入站點群組失敗';
+      workcenterGroups.value = [];
+      return false;
+    } finally {
+      loading.workcenterGroups = false;
+    }
+  }
+
+  async function loadHistory({ force = false } = {}) {
+    const cids = getActiveCids();
+    if (cids.length === 0) {
+      return false;
+    }
+
+    if (!force && loaded.history) {
+      return true;
+    }
+
+    loading.history = true;
+    errors.history = '';
+
+    try {
+      const results = await Promise.allSettled(
+        cids.map((cid) => {
+          const params = new URLSearchParams();
+          params.set('container_id', cid);
+          if (selectedWorkcenterGroups.value.length > 0) {
+            params.set('workcenter_groups', selectedWorkcenterGroups.value.join(','));
+          }
+          return apiGet(`/api/query-tool/lot-history?${params.toString()}`, {
+            timeout: 60000,
+            silent: true,
+          });
+        }),
+      );
+
+      const allRows = [];
+      const failedCids = [];
+      results.forEach((result, index) => {
+        if (result.status === 'fulfilled') {
+          const rows = Array.isArray(result.value?.data) ? result.value.data : [];
+          allRows.push(...rows);
+        } else {
+          failedCids.push(cids[index]);
+        }
+      });
+
+      historyRows.value = allRows;
+      loaded.history = true;
+
+      if (failedCids.length > 0) {
+        errors.history = `部分節點歷程載入失敗：${failedCids.join(', ')}`;
+      }
+
+      return true;
+    } catch (error) {
+      errors.history = error?.message || '載入 LOT 歷程失敗';
+      historyRows.value = [];
+      return false;
+    } finally {
+      loading.history = false;
+    }
+  }
+
+  async function loadAssociation(tab, { force = false, silentError = false } = {}) {
+    const associationType = normalizeSubTab(tab);
+    if (!ASSOCIATION_TABS.has(associationType)) {
+      return false;
+    }
+
+    const cids = getActiveCids();
+    if (cids.length === 0) {
+      return false;
+    }
+
+    if (!force && loaded[associationType]) {
+      return true;
+    }
+
+    loading[associationType] = true;
+    if (!silentError) {
+      errors[associationType] = '';
+    }
+
+    try {
+      if (associationType === 'jobs') {
+        // Jobs derive equipment/time from merged history — use first CID as anchor
+        if (historyRows.value.length === 0) {
+          await loadHistory();
+        }
+
+        const equipmentId = resolveEquipmentIdFromHistory(historyRows.value);
+        const timeRange = resolveTimeRangeFromHistory(historyRows.value);
+
+        if (!equipmentId || !timeRange?.time_start || !timeRange?.time_end) {
+          throw new Error('無法從 LOT 歷程推導 JOB 查詢條件，請先確認歷程資料');
+        }
+
+        const params = new URLSearchParams();
+        params.set('container_id', cids[0]);
+        params.set('type', associationType);
+        params.set('equipment_id', equipmentId);
+        params.set('time_start', timeRange.time_start);
+        params.set('time_end', timeRange.time_end);
+
+        const payload = await apiGet(`/api/query-tool/lot-associations?${params.toString()}`, {
+          timeout: 120000,
+          silent: true,
+        });
+
+        associationRows[associationType] = Array.isArray(payload?.data) ? payload.data : [];
+      } else {
+        // Non-jobs tabs: load in parallel for all selected CIDs
+        const results = await Promise.allSettled(
+          cids.map((cid) => {
+            const params = new URLSearchParams();
+            params.set('container_id', cid);
+            params.set('type', associationType);
+            return apiGet(`/api/query-tool/lot-associations?${params.toString()}`, {
+              timeout: 120000,
+              silent: true,
+            });
+          }),
+        );
+
+        const allRows = [];
+        results.forEach((result) => {
+          if (result.status === 'fulfilled') {
+            const rows = associationType === 'splits'
+              ? flattenSplitPayload(result.value)
+              : (Array.isArray(result.value?.data) ? result.value.data : []);
+            allRows.push(...rows);
+          }
+        });
+        associationRows[associationType] = allRows;
+      }
+
+      loaded[associationType] = true;
+      return true;
+    } catch (error) {
+      associationRows[associationType] = [];
+      if (!silentError) {
+        errors[associationType] = error?.message || '載入關聯資料失敗';
+      }
+      return false;
+    } finally {
+      loading[associationType] = false;
+    }
+  }
+
+  async function ensureActiveSubTabData() {
+    if (activeSubTab.value === 'history') {
+      const historyOk = await loadHistory();
+      if (historyOk) {
+        // History timeline uses hold/material events as marker sources.
+        await Promise.allSettled([
+          loadAssociation('holds', { silentError: true }),
+          loadAssociation('materials', { silentError: true }),
+        ]);
+      }
+      return historyOk;
+    }
+
+    return loadAssociation(activeSubTab.value);
+  }
+
+  async function setActiveSubTab(tab) {
+    activeSubTab.value = normalizeSubTab(tab);
+    return ensureActiveSubTabData();
+  }
+
+  async function setSelectedContainerId(containerId) {
+    const nextId = normalizeText(containerId);
+    selectedContainerIds.value = nextId ? [nextId] : [];
+
+    if (nextId === selectedContainerId.value) {
+      return ensureActiveSubTabData();
+    }
+
+    selectedContainerId.value = nextId;
+    clearTabData();
+
+    if (!nextId) {
+      return false;
+    }
+
+    return ensureActiveSubTabData();
+  }
+
+  async function setSelectedContainerIds(cids) {
+    const normalized = uniqueValues(
+      (Array.isArray(cids) ? cids : []).map(normalizeText).filter(Boolean),
+    );
+    selectedContainerIds.value = normalized;
+    selectedContainerId.value = normalized[0] || '';
+    clearTabData();
+
+    if (normalized.length === 0) {
+      return false;
+    }
+
+    return ensureActiveSubTabData();
+  }
+
+  async function setSelectedWorkcenterGroups(groups) {
+    selectedWorkcenterGroups.value = uniqueValues(groups || []);
+
+    if (!selectedContainerId.value) {
+      return false;
+    }
+
+    loaded.history = false;
+    return loadHistory({ force: true });
+  }
+
+  function getRowsByTab(tab) {
+    const normalized = normalizeSubTab(tab);
+    if (normalized === 'history') {
+      return historyRows.value;
+    }
+    if (!ASSOCIATION_TABS.has(normalized)) {
+      return [];
+    }
+    return associationRows[normalized] || [];
+  }
+
+  async function exportSubTab(tab) {
+    const normalized = normalizeSubTab(tab);
+    const exportType = EXPORT_TYPE_MAP[normalized];
+    const containerId = selectedContainerId.value;
+
+    if (!exportType || !containerId) {
+      return false;
+    }
+
+    exporting[normalized] = true;
+    errors[normalized] = '';
+
+    try {
+      const params = {
+        container_id: containerId,
+      };
+
+      if (normalized === 'jobs') {
+        if (historyRows.value.length === 0) {
+          await loadHistory();
+        }
+        const equipmentId = resolveEquipmentIdFromHistory(historyRows.value);
+        const timeRange = resolveTimeRangeFromHistory(historyRows.value);
+        if (!equipmentId || !timeRange?.time_start || !timeRange?.time_end) {
+          throw new Error('無法取得 JOB 匯出所需條件');
+        }
+        params.equipment_id = equipmentId;
+        params.time_start = timeRange.time_start;
+        params.time_end = timeRange.time_end;
+      }
+
+      await exportCsv({
+        exportType,
+        params,
+      });
+
+      return true;
+    } catch (error) {
+      errors[normalized] = error?.message || '匯出失敗';
+      return false;
+    } finally {
+      exporting[normalized] = false;
+    }
+  }
+
+  return {
+    lotSubTabs: LOT_SUB_TABS,
+    selectedContainerId,
+    selectedContainerIds,
+    activeSubTab,
+    workcenterGroups,
+    selectedWorkcenterGroups,
+    historyRows,
+    associationRows,
+    loading,
+    loaded,
+    exporting,
+    errors,
+    loadWorkcenterGroups,
+    loadHistory,
+    loadAssociation,
+    ensureActiveSubTabData,
+    setActiveSubTab,
+    setSelectedContainerId,
+    setSelectedContainerIds,
+    setSelectedWorkcenterGroups,
+    getRowsByTab,
+    exportSubTab,
+    clearTabData,
+  };
+}
diff --git a/frontend/src/query-tool/composables/useLotLineage.js b/frontend/src/query-tool/composables/useLotLineage.js
new file mode 100644
index 0000000..df07cda
--- /dev/null
+++ b/frontend/src/query-tool/composables/useLotLineage.js
@@ -0,0 +1,493 @@
+import { computed, reactive, ref } from 'vue';
+
+import { apiPost, ensureMesApiAvailable } from '../../core/api.js';
+import { normalizeText, uniqueValues } from '../utils/values.js';
+
+const MAX_CONCURRENCY = 3;
+const MAX_429_RETRY = 3;
+
+function emptyLineageEntry() {
+  return {
+    children: [],
+    loading: false,
+    error: '',
+    fetched: false,
+    lastUpdatedAt: 0,
+  };
+}
+
+function extractContainerId(row) {
+  if (!row || typeof row !== 'object') {
+    return '';
+  }
+  return normalizeText(row.container_id || row.CONTAINERID || row.containerId);
+}
+
+function createSemaphore(maxConcurrency) {
+  const queue = [];
+  let active = 0;
+
+  function pump() {
+    if (active >= maxConcurrency || queue.length === 0) {
+      return;
+    }
+
+    const item = queue.shift();
+    active += 1;
+
+    Promise.resolve()
+      .then(item.task)
+      .then(item.resolve)
+      .catch(item.reject)
+      .finally(() => {
+        active = Math.max(0, active - 1);
+        pump();
+      });
+  }
+
+  return {
+    schedule(task) {
+      return new Promise((resolve, reject) => {
+        queue.push({ task, resolve, reject });
+        pump();
+      });
+    },
+    clear() {
+      queue.length = 0;
+    },
+  };
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function useLotLineage(initial = {}) {
+  ensureMesApiAvailable();
+
+  const lineageMap = reactive(new Map());
+  const nameMap = reactive(new Map());
+  const leafSerials = reactive(new Map());
+  const expandedNodes = ref(new Set());
+  const selectedContainerId = ref(normalizeText(initial.selectedContainerId));
+  const selectedContainerIds = ref(
+    initial.selectedContainerId ? [normalizeText(initial.selectedContainerId)] : [],
+  );
+  const rootRows = ref([]);
+  const rootContainerIds = ref([]);
+  const treeRoots = ref([]);
+
+  const inFlight = new Map();
+  const semaphore = createSemaphore(MAX_CONCURRENCY);
+  let generation = 0;
+
+  function ensureEntry(containerId) {
+    const id = normalizeText(containerId);
+    if (!id) {
+      return null;
+    }
+
+    if (!lineageMap.has(id)) {
+      lineageMap.set(id, emptyLineageEntry());
+    }
+
+    return lineageMap.get(id);
+  }
+
+  function patchEntry(containerId, patch) {
+    const id = normalizeText(containerId);
+    if (!id) {
+      return;
+    }
+
+    const previous = ensureEntry(id) || emptyLineageEntry();
+    lineageMap.set(id, {
+      ...previous,
+      ...patch,
+    });
+  }
+
+  function getEntry(containerId) {
+    const id = normalizeText(containerId);
+    if (!id) {
+      return emptyLineageEntry();
+    }
+    return lineageMap.get(id) || emptyLineageEntry();
+  }
+
+  function getChildren(containerId) {
+    const entry = getEntry(containerId);
+    return Array.isArray(entry.children) ? entry.children : [];
+  }
+
+  function getSerials(containerId) {
+    const id = normalizeText(containerId);
+    return id ? (leafSerials.get(id) || []) : [];
+  }
+
+  function getSubtreeCids(containerId) {
+    const id = normalizeText(containerId);
+    if (!id) {
+      return [];
+    }
+    const result = [];
+    const visited = new Set();
+    function walk(nodeId) {
+      if (!nodeId || visited.has(nodeId)) {
+        return;
+      }
+      visited.add(nodeId);
+      result.push(nodeId);
+      getChildren(nodeId).forEach(walk);
+    }
+    walk(id);
+    return result;
+  }
+
+  function isExpanded(containerId) {
+    const id = normalizeText(containerId);
+    return id ? expandedNodes.value.has(id) : false;
+  }
+
+  function isSelected(containerId) {
+    return normalizeText(containerId) === selectedContainerId.value;
+  }
+
+  function selectNode(containerId) {
+    const id = normalizeText(containerId);
+    selectedContainerId.value = id;
+    if (id && !selectedContainerIds.value.includes(id)) {
+      selectedContainerIds.value = [id];
+    }
+  }
+
+  function setSelectedNodes(cids) {
+    const normalized = (Array.isArray(cids) ? cids : [])
+      .map(normalizeText)
+      .filter(Boolean);
+    selectedContainerIds.value = uniqueValues(normalized);
+    selectedContainerId.value = normalized[0] || '';
+  }
+
+  const lineageLoading = computed(() => {
+    for (const entry of lineageMap.values()) {
+      if (entry.loading) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  function collapseAll() {
+    expandedNodes.value = new Set();
+  }
+
+  async function requestLineageWithRetry(containerIds) {
+    let attempt = 0;
+
+    while (attempt <= MAX_429_RETRY) {
+      try {
+        return await apiPost(
+          '/api/trace/lineage',
+          {
+            profile: 'query_tool',
+            container_ids: containerIds,
+          },
+          { timeout: 60000, silent: true },
+        );
+      } catch (error) {
+        const status = Number(error?.status || 0);
+        if (status !== 429 || attempt >= MAX_429_RETRY) {
+          throw error;
+        }
+
+        const retryAfter = Number(error?.retryAfterSeconds || 0);
+        const fallbackSeconds = 2 ** attempt;
+        const waitSeconds = Math.max(1, Math.min(30, retryAfter || fallbackSeconds));
+        await sleep(waitSeconds * 1000);
+        attempt += 1;
+      }
+    }
+
+    return null;
+  }
+
+  function populateForwardTree(payload) {
+    const childrenMapData = payload?.children_map;
+    const rootsList = payload?.roots || [];
+    const serialsData = payload?.leaf_serials || {};
+    const names = payload?.names;
+
+    // Merge name mapping
+    if (names && typeof names === 'object') {
+      Object.entries(names).forEach(([cid, name]) => {
+        if (cid && name) {
+          nameMap.set(normalizeText(cid), String(name));
+        }
+      });
+    }
+
+    // Store leaf serial numbers
+    Object.entries(serialsData).forEach(([cid, serials]) => {
+      const id = normalizeText(cid);
+      if (id && Array.isArray(serials)) {
+        leafSerials.set(id, serials);
+      }
+    });
+
+    // Populate children_map for all nodes
+    if (childrenMapData && typeof childrenMapData === 'object') {
+      // First pass: set children for all parent nodes
+      Object.entries(childrenMapData).forEach(([parentId, childIds]) => {
+        const normalized = normalizeText(parentId);
+        if (!normalized) {
+          return;
+        }
+        patchEntry(normalized, {
+          children: uniqueValues(childIds || []),
+          loading: false,
+          fetched: true,
+          error: '',
+          lastUpdatedAt: Date.now(),
+        });
+      });
+
+      // Second pass: mark leaf nodes (appear as children but not as parents)
+      const allChildCids = new Set();
+      Object.values(childrenMapData).forEach((childIds) => {
+        (childIds || []).forEach((c) => {
+          const nc = normalizeText(c);
+          if (nc) {
+            allChildCids.add(nc);
+          }
+        });
+      });
+      allChildCids.forEach((childCid) => {
+        if (!childrenMapData[childCid] && !getEntry(childCid).fetched) {
+          patchEntry(childCid, {
+            children: [],
+            loading: false,
+            fetched: true,
+            error: '',
+            lastUpdatedAt: Date.now(),
+          });
+        }
+      });
+
+      // Also mark roots as fetched
+      rootsList.forEach((rootCid) => {
+        const id = normalizeText(rootCid);
+        if (id && !getEntry(id).fetched) {
+          patchEntry(id, {
+            children: uniqueValues(childrenMapData[rootCid] || []),
+            loading: false,
+            fetched: true,
+            error: '',
+            lastUpdatedAt: Date.now(),
+          });
+        }
+      });
+    }
+
+    // Update tree roots
+    treeRoots.value = rootsList.map((r) => normalizeText(r)).filter(Boolean);
+  }
+
+  async function fetchLineage(containerIds, { force = false } = {}) {
+    const ids = (Array.isArray(containerIds) ? containerIds : [containerIds])
+      .map((c) => normalizeText(c))
+      .filter(Boolean);
+
+    if (ids.length === 0) {
+      return null;
+    }
+
+    // Check if all already fetched (for single-node requests)
+    if (!force && ids.length === 1) {
+      const existing = getEntry(ids[0]);
+      if (existing.fetched) {
+        return existing;
+      }
+    }
+
+    const cacheKey = [...ids].sort().join(',');
+    if (inFlight.has(cacheKey)) {
+      return inFlight.get(cacheKey);
+    }
+
+    const runGeneration = generation;
+    ids.forEach((id) => {
+      patchEntry(id, { loading: true, error: '' });
+    });
+
+    const promise = semaphore
+      .schedule(async () => {
+        try {
+          const payload = await requestLineageWithRetry(ids);
+          if (runGeneration !== generation) {
+            return null;
+          }
+
+          populateForwardTree(payload);
+          return ids.length === 1 ? getEntry(ids[0]) : null;
+        } catch (error) {
+          if (runGeneration !== generation) {
+            return null;
+          }
+
+          ids.forEach((id) => {
+            patchEntry(id, {
+              children: [],
+              loading: false,
+              fetched: true,
+              error: error?.message || '血緣查詢失敗',
+              lastUpdatedAt: Date.now(),
+            });
+          });
+
+          return ids.length === 1 ? getEntry(ids[0]) : null;
+        } finally {
+          inFlight.delete(cacheKey);
+        }
+      })
+      .catch((error) => {
+        inFlight.delete(cacheKey);
+        throw error;
+      });
+
+    inFlight.set(cacheKey, promise);
+    return promise;
+  }
+
+  function expandNode(containerId) {
+    const id = normalizeText(containerId);
+    if (!id) {
+      return;
+    }
+
+    const next = new Set(expandedNodes.value);
+    next.add(id);
+    expandedNodes.value = next;
+  }
+
+  function collapseNode(containerId) {
+    const id = normalizeText(containerId);
+    if (!id) {
+      return;
+    }
+
+    const next = new Set(expandedNodes.value);
+    next.delete(id);
+    expandedNodes.value = next;
+  }
+
+  function toggleNode(containerId) {
+    const id = normalizeText(containerId);
+    if (!id) {
+      return;
+    }
+
+    if (expandedNodes.value.has(id)) {
+      collapseNode(id);
+      return;
+    }
+
+    expandNode(id);
+  }
+
+  function expandAll() {
+    const expanded = new Set();
+
+    function walk(nodeId) {
+      const id = normalizeText(nodeId);
+      if (!id || expanded.has(id)) {
+        return;
+      }
+      const entry = getEntry(id);
+      if (entry.children && entry.children.length > 0) {
+        expanded.add(id);
+        entry.children.forEach((childId) => walk(childId));
+      }
+    }
+
+    treeRoots.value.forEach((rootId) => walk(rootId));
+    expandedNodes.value = expanded;
+  }
+
+  function resetLineageState() {
+    generation += 1;
+    semaphore.clear();
+    inFlight.clear();
+    lineageMap.clear();
+    nameMap.clear();
+    leafSerials.clear();
+    expandedNodes.value = new Set();
+    selectedContainerIds.value = [];
+    treeRoots.value = [];
+  }
+
+  async function primeResolvedLots(lots = []) {
+    resetLineageState();
+
+    rootRows.value = Array.isArray(lots) ? [...lots] : [];
+    rootContainerIds.value = rootRows.value
+      .map((row) => extractContainerId(row))
+      .filter(Boolean);
+
+    // Seed name map from resolve data
+    rootRows.value.forEach((row) => {
+      const cid = extractContainerId(row);
+      const name = normalizeText(row?.lot_id || row?.CONTAINERNAME || row?.input_value);
+      if (cid && name) {
+        nameMap.set(cid, name);
+      }
+    });
+
+    if (rootContainerIds.value.length > 0 && !selectedContainerId.value) {
+      selectedContainerId.value = rootContainerIds.value[0];
+    }
+
+    rootContainerIds.value.forEach((containerId) => {
+      patchEntry(containerId, { loading: true });
+    });
+
+    // Send all seed CIDs in a single request for forward tree
+    await fetchLineage(rootContainerIds.value);
+  }
+
+  function clearSelection() {
+    selectedContainerId.value = '';
+    selectedContainerIds.value = [];
+  }
+
+  return {
+    lineageMap,
+    nameMap,
+    leafSerials,
+    expandedNodes,
+    selectedContainerId,
+    selectedContainerIds,
+    lineageLoading,
+    rootRows,
+    rootContainerIds,
+    treeRoots,
+    getEntry,
+    getChildren,
+    getSerials,
+    getSubtreeCids,
+    isExpanded,
+    isSelected,
+    selectNode,
+    setSelectedNodes,
+    fetchLineage,
+    expandNode,
+    collapseNode,
+    toggleNode,
+    expandAll,
+    collapseAll,
+    primeResolvedLots,
+    resetLineageState,
+    clearSelection,
+    extractContainerId,
+  };
+}
diff --git a/frontend/src/query-tool/composables/useLotResolve.js b/frontend/src/query-tool/composables/useLotResolve.js
new file mode 100644
index 0000000..fbfbbcf
--- /dev/null
+++ b/frontend/src/query-tool/composables/useLotResolve.js
@@ -0,0 +1,152 @@
+import { computed, reactive, ref } from 'vue';
+
+import { apiPost, ensureMesApiAvailable } from '../../core/api.js';
+import { parseInputValues } from '../utils/values.js';
+
+const INPUT_TYPE_OPTIONS = Object.freeze([
+  { value: 'lot_id', label: 'LOT ID' },
+  { value: 'serial_number', label: '流水號' },
+  { value: 'work_order', label: '工單' },
+]);
+
+const INPUT_LIMITS = Object.freeze({
+  lot_id: 50,
+  serial_number: 50,
+  work_order: 10,
+});
+
+function normalizeInputType(value) {
+  const text = String(value || '').trim();
+  if (INPUT_LIMITS[text]) {
+    return text;
+  }
+  return 'lot_id';
+}
+
+export function useLotResolve(initial = {}) {
+  ensureMesApiAvailable();
+
+  const inputType = ref(normalizeInputType(initial.inputType));
+  const inputText = ref(String(initial.inputText || ''));
+
+  const resolvedLots = ref([]);
+  const notFound = ref([]);
+  const expansionInfo = ref({});
+
+  const errorMessage = ref('');
+  const successMessage = ref('');
+
+  const loading = reactive({
+    resolving: false,
+  });
+
+  const inputTypeOptions = INPUT_TYPE_OPTIONS;
+  const inputValues = computed(() => parseInputValues(inputText.value));
+  const inputLimit = computed(() => INPUT_LIMITS[inputType.value] || 50);
+
+  function clearMessages() {
+    errorMessage.value = '';
+    successMessage.value = '';
+  }
+
+  function clearResults() {
+    resolvedLots.value = [];
+    notFound.value = [];
+    expansionInfo.value = {};
+  }
+
+  function reset() {
+    inputText.value = '';
+    clearMessages();
+    clearResults();
+  }
+
+  function setInputType(nextType) {
+    inputType.value = normalizeInputType(nextType);
+  }
+
+  function setInputText(text) {
+    inputText.value = String(text || '');
+  }
+
+  function validateInput(values) {
+    if (values.length === 0) {
+      return '請輸入 LOT/流水號/工單條件';
+    }
+
+    const limit = INPUT_LIMITS[inputType.value] || 50;
+    if (values.length > limit) {
+      return `輸入數量超過上限 (${limit} 筆)`;
+    }
+
+    return '';
+  }
+
+  async function resolveLots() {
+    const values = inputValues.value;
+    const validationMessage = validateInput(values);
+
+    if (validationMessage) {
+      errorMessage.value = validationMessage;
+      return {
+        ok: false,
+        reason: 'validation',
+      };
+    }
+
+    clearMessages();
+    clearResults();
+    loading.resolving = true;
+
+    try {
+      const payload = await apiPost(
+        '/api/query-tool/resolve',
+        {
+          input_type: inputType.value,
+          values,
+        },
+        { timeout: 60000, silent: true },
+      );
+
+      resolvedLots.value = Array.isArray(payload?.data) ? payload.data : [];
+      notFound.value = Array.isArray(payload?.not_found) ? payload.not_found : [];
+      expansionInfo.value = payload?.expansion_info || {};
+
+      successMessage.value = `解析完成：${resolvedLots.value.length} 筆，未命中 ${notFound.value.length} 筆`;
+
+      return {
+        ok: true,
+        resolvedLots: resolvedLots.value,
+        notFound: notFound.value,
+      };
+    } catch (error) {
+      errorMessage.value = error?.message || '解析失敗';
+      return {
+        ok: false,
+        reason: 'request',
+      };
+    } finally {
+      loading.resolving = false;
+    }
+  }
+
+  return {
+    inputType,
+    inputText,
+    inputTypeOptions,
+    inputValues,
+    inputLimit,
+    resolvedLots,
+    notFound,
+    expansionInfo,
+    loading,
+    errorMessage,
+    successMessage,
+    clearMessages,
+    clearResults,
+    reset,
+    setInputType,
+    setInputText,
+    resolveLots,
+  };
+}
diff --git a/frontend/src/query-tool/composables/useQueryToolData.js b/frontend/src/query-tool/composables/useQueryToolData.js
deleted file mode 100644
index 181b8d7..0000000
--- a/frontend/src/query-tool/composables/useQueryToolData.js
+++ /dev/null
@@ -1,448 +0,0 @@
-import { computed, reactive, ref } from 'vue';
-
-import { apiGet, apiPost, ensureMesApiAvailable } from '../../core/api.js';
-import { replaceRuntimeHistory } from '../../core/shell-navigation.js';
-
-ensureMesApiAvailable();
-
-function toDateString(date) {
-  return date.toISOString().slice(0, 10);
-}
-
-function parseArrayQuery(params, key) {
-  const repeated = params.getAll(key).map((item) => String(item || '').trim()).filter(Boolean);
-  if (repeated.length > 0) {
-    return repeated;
-  }
-  return String(params.get(key) || '')
-    .split(',')
-    .map((item) => item.trim())
-    .filter(Boolean);
-}
-
-function buildBatchQueryString(state) {
-  const params = new URLSearchParams();
-  if (state.inputType) params.set('input_type', state.inputType);
-  if (state.selectedContainerId) params.set('container_id', state.selectedContainerId);
-  if (state.associationType) params.set('association_type', state.associationType);
-  state.selectedWorkcenterGroups.forEach((item) => params.append('workcenter_groups', item));
-  return params.toString();
-}
-
-function buildEquipmentQueryString(state) {
-  const params = new URLSearchParams();
-  state.selectedEquipmentIds.forEach((item) => params.append('equipment_ids', item));
-  if (state.startDate) params.set('start_date', state.startDate);
-  if (state.endDate) params.set('end_date', state.endDate);
-  if (state.equipmentQueryType) params.set('query_type', state.equipmentQueryType);
-  return params.toString();
-}
-
-function mapEquipmentExportType(queryType) {
-  const normalized = String(queryType || '').trim();
-  const mapping = {
-    status_hours: 'equipment_status_hours',
-    lots: 'equipment_lots',
-    materials: 'equipment_materials',
-    rejects: 'equipment_rejects',
-    jobs: 'equipment_jobs',
-  };
-  return mapping[normalized] || null;
-}
-
-function mapAssociationExportType(associationType) {
-  const normalized = String(associationType || '').trim();
-  const mapping = {
-    materials: 'lot_materials',
-    rejects: 'lot_rejects',
-    holds: 'lot_holds',
-    splits: 'lot_splits',
-    jobs: 'lot_jobs',
-  };
-  return mapping[normalized] || null;
-}
-
-export function useQueryToolData() {
-  const loading = reactive({
-    resolving: false,
-    history: false,
-    association: false,
-    equipment: false,
-    exporting: false,
-    bootstrapping: false,
-  });
-
-  const errorMessage = ref('');
-  const successMessage = ref('');
-
-  const batch = reactive({
-    inputType: 'lot_id',
-    inputText: '',
-    resolvedLots: [],
-    selectedContainerId: '',
-    selectedWorkcenterGroups: [],
-    workcenterGroups: [],
-    lotHistoryRows: [],
-    associationType: 'materials',
-    associationRows: [],
-    lineageCache: {},
-  });
-
-  const equipment = reactive({
-    options: [],
-    selectedEquipmentIds: [],
-    startDate: '',
-    endDate: '',
-    equipmentQueryType: 'status_hours',
-    rows: [],
-  });
-
-  const resolvedColumns = computed(() => Object.keys(batch.resolvedLots[0] || {}));
-  const historyColumns = computed(() => Object.keys(batch.lotHistoryRows[0] || {}));
-  const associationColumns = computed(() => Object.keys(batch.associationRows[0] || {}));
-  const equipmentColumns = computed(() => Object.keys(equipment.rows[0] || {}));
-
-  const selectedEquipmentNames = computed(() => {
-    const selectedSet = new Set(equipment.selectedEquipmentIds);
-    return equipment.options
-      .filter((item) => selectedSet.has(item.RESOURCEID))
-      .map((item) => item.RESOURCENAME)
-      .filter(Boolean);
-  });
-
-  function hydrateFromUrl() {
-    const params = new URLSearchParams(window.location.search);
-    batch.inputType = String(params.get('input_type') || 'lot_id').trim() || 'lot_id';
-    batch.selectedContainerId = String(params.get('container_id') || '').trim();
-    batch.associationType = String(params.get('association_type') || 'materials').trim() || 'materials';
-    batch.selectedWorkcenterGroups = parseArrayQuery(params, 'workcenter_groups');
-
-    equipment.selectedEquipmentIds = parseArrayQuery(params, 'equipment_ids');
-    equipment.startDate = String(params.get('start_date') || '').trim();
-    equipment.endDate = String(params.get('end_date') || '').trim();
-    equipment.equipmentQueryType = String(params.get('query_type') || 'status_hours').trim() || 'status_hours';
-  }
-
-  function resetEquipmentDateRange() {
-    const end = new Date();
-    const start = new Date();
-    start.setDate(start.getDate() - 30);
-    equipment.startDate = toDateString(start);
-    equipment.endDate = toDateString(end);
-  }
-
-  function syncBatchUrlState() {
-    const query = buildBatchQueryString(batch);
-    replaceRuntimeHistory(query ? `/query-tool?${query}` : '/query-tool');
-  }
-
-  function syncEquipmentUrlState() {
-    const query = buildEquipmentQueryString(equipment);
-    replaceRuntimeHistory(query ? `/query-tool?${query}` : '/query-tool');
-  }
-
-  function parseBatchInputValues() {
-    return String(batch.inputText || '')
-      .split(/[\n,]/)
-      .map((item) => item.trim())
-      .filter(Boolean);
-  }
-
-  async function loadEquipmentOptions() {
-    try {
-      const payload = await apiGet('/api/query-tool/equipment-list', { timeout: 60000, silent: true });
-      equipment.options = Array.isArray(payload?.data) ? payload.data : [];
-    } catch (error) {
-      errorMessage.value = error?.message || '載入設備選單失敗';
-      equipment.options = [];
-    }
-  }
-
-  async function loadWorkcenterGroups() {
-    try {
-      const payload = await apiGet('/api/query-tool/workcenter-groups', { timeout: 60000, silent: true });
-      batch.workcenterGroups = Array.isArray(payload?.data) ? payload.data : [];
-    } catch {
-      batch.workcenterGroups = [];
-    }
-  }
-
-  async function bootstrap() {
-    loading.bootstrapping = true;
-    errorMessage.value = '';
-    await Promise.all([loadEquipmentOptions(), loadWorkcenterGroups()]);
-    loading.bootstrapping = false;
-  }
-
-  async function resolveLots() {
-    const values = parseBatchInputValues();
-    if (values.length === 0) {
-      errorMessage.value = '請輸入 LOT/流水號/工單條件';
-      return false;
-    }
-    loading.resolving = true;
-    errorMessage.value = '';
-    successMessage.value = '';
-    batch.selectedContainerId = '';
-    batch.lotHistoryRows = [];
-    batch.associationRows = [];
-    batch.lineageCache = {};
-    syncBatchUrlState();
-    try {
-      const payload = await apiPost(
-        '/api/query-tool/resolve',
-        {
-          input_type: batch.inputType,
-          values,
-        },
-        { timeout: 60000, silent: true },
-      );
-      batch.resolvedLots = Array.isArray(payload?.data) ? payload.data : [];
-      const notFound = Array.isArray(payload?.not_found) ? payload.not_found : [];
-      successMessage.value = `解析完成：${batch.resolvedLots.length} 筆，未命中 ${notFound.length} 筆`;
-      return true;
-    } catch (error) {
-      errorMessage.value = error?.message || '解析失敗';
-      batch.resolvedLots = [];
-      return false;
-    } finally {
-      loading.resolving = false;
-    }
-  }
-
-  async function loadLotHistory(containerId) {
-    const id = String(containerId || '').trim();
-    if (!id) {
-      return false;
-    }
-    loading.history = true;
-    errorMessage.value = '';
-    batch.selectedContainerId = id;
-    syncBatchUrlState();
-    try {
-      const params = new URLSearchParams();
-      params.set('container_id', id);
-      batch.selectedWorkcenterGroups.forEach((item) => params.append('workcenter_groups', item));
-      const payload = await apiGet(`/api/query-tool/lot-history?${params.toString()}`, {
-        timeout: 60000,
-        silent: true,
-      });
-      batch.lotHistoryRows = Array.isArray(payload?.data) ? payload.data : [];
-      return true;
-    } catch (error) {
-      errorMessage.value = error?.message || '查詢 LOT 歷程失敗';
-      batch.lotHistoryRows = [];
-      return false;
-    } finally {
-      loading.history = false;
-    }
-  }
-
-  async function loadLotLineage(containerId) {
-    const id = String(containerId || '').trim();
-    if (!id) {
-      return false;
-    }
-
-    const cached = batch.lineageCache[id];
-    if (cached?.loading || cached?.ancestors) {
-      return true;
-    }
-
-    batch.lineageCache[id] = {
-      ancestors: null,
-      merges: null,
-      loading: true,
-      error: '',
-    };
-
-    try {
-      const payload = await apiPost(
-        '/api/trace/lineage',
-        {
-          profile: 'query_tool',
-          container_ids: [id],
-        },
-        { timeout: 60000, silent: true },
-      );
-
-      batch.lineageCache[id] = {
-        ancestors: payload?.ancestors || {},
-        merges: payload?.merges || {},
-        loading: false,
-        error: '',
-      };
-      return true;
-    } catch (error) {
-      batch.lineageCache[id] = {
-        ancestors: null,
-        merges: null,
-        loading: false,
-        error: error?.message || '血緣查詢失敗',
-      };
-      return false;
-    }
-  }
-
-  async function loadAssociations() {
-    if (!batch.selectedContainerId) {
-      errorMessage.value = '請先選擇一筆 CONTAINERID';
-      return false;
-    }
-    loading.association = true;
-    errorMessage.value = '';
-    syncBatchUrlState();
-    try {
-      const params = new URLSearchParams({
-        container_id: batch.selectedContainerId,
-        type: batch.associationType,
-      });
-      const payload = await apiGet(`/api/query-tool/lot-associations?${params.toString()}`, {
-        timeout: 60000,
-        silent: true,
-      });
-      batch.associationRows = Array.isArray(payload?.data) ? payload.data : [];
-      return true;
-    } catch (error) {
-      errorMessage.value = error?.message || '查詢關聯資料失敗';
-      batch.associationRows = [];
-      return false;
-    } finally {
-      loading.association = false;
-    }
-  }
-
-  async function queryEquipmentPeriod() {
-    if (equipment.selectedEquipmentIds.length === 0) {
-      errorMessage.value = '請選擇至少一台設備';
-      return false;
-    }
-    if (!equipment.startDate || !equipment.endDate) {
-      errorMessage.value = '請指定設備查詢日期範圍';
-      return false;
-    }
-    loading.equipment = true;
-    errorMessage.value = '';
-    successMessage.value = '';
-    syncEquipmentUrlState();
-    try {
-      const payload = await apiPost(
-        '/api/query-tool/equipment-period',
-        {
-          equipment_ids: equipment.selectedEquipmentIds,
-          equipment_names: selectedEquipmentNames.value,
-          start_date: equipment.startDate,
-          end_date: equipment.endDate,
-          query_type: equipment.equipmentQueryType,
-        },
-        { timeout: 120000, silent: true },
-      );
-      equipment.rows = Array.isArray(payload?.data) ? payload.data : [];
-      successMessage.value = `設備查詢完成：${equipment.rows.length} 筆`;
-      return true;
-    } catch (error) {
-      errorMessage.value = error?.message || '設備查詢失敗';
-      equipment.rows = [];
-      return false;
-    } finally {
-      loading.equipment = false;
-    }
-  }
-
-  async function exportCurrentCsv() {
-    loading.exporting = true;
-    errorMessage.value = '';
-    successMessage.value = '';
-
-    let exportType = null;
-    let params = {};
-
-    if (equipment.rows.length > 0) {
-      exportType = mapEquipmentExportType(equipment.equipmentQueryType);
-      params = {
-        equipment_ids: equipment.selectedEquipmentIds,
-        equipment_names: selectedEquipmentNames.value,
-        start_date: equipment.startDate,
-        end_date: equipment.endDate,
-      };
-    } else if (batch.selectedContainerId && batch.associationRows.length > 0) {
-      exportType = mapAssociationExportType(batch.associationType);
-      params = {
-        container_id: batch.selectedContainerId,
-      };
-    } else if (batch.selectedContainerId && batch.lotHistoryRows.length > 0) {
-      exportType = 'lot_history';
-      params = {
-        container_id: batch.selectedContainerId,
-      };
-    }
-
-    if (!exportType) {
-      loading.exporting = false;
-      errorMessage.value = '無可匯出的查詢結果';
-      return false;
-    }
-
-    try {
-      const response = await fetch('/api/query-tool/export-csv', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          export_type: exportType,
-          params,
-        }),
-      });
-
-      if (!response.ok) {
-        let message = `匯出失敗 (${response.status})`;
-        try {
-          const payload = await response.json();
-          message = payload?.error || payload?.message || message;
-        } catch {
-          // ignore parse error
-        }
-        throw new Error(message);
-      }
-
-      const blob = await response.blob();
-      const href = window.URL.createObjectURL(blob);
-      const anchor = document.createElement('a');
-      anchor.href = href;
-      anchor.download = `${exportType}.csv`;
-      document.body.appendChild(anchor);
-      anchor.click();
-      anchor.remove();
-      window.URL.revokeObjectURL(href);
-      successMessage.value = `CSV 匯出成功：${exportType}`;
-      return true;
-    } catch (error) {
-      errorMessage.value = error?.message || '匯出失敗';
-      return false;
-    } finally {
-      loading.exporting = false;
-    }
-  }
-
-  return {
-    loading,
-    errorMessage,
-    successMessage,
-    batch,
-    equipment,
-    resolvedColumns,
-    historyColumns,
-    associationColumns,
-    equipmentColumns,
-    hydrateFromUrl,
-    resetEquipmentDateRange,
-    bootstrap,
-    resolveLots,
-    loadLotLineage,
-    loadLotHistory,
-    loadAssociations,
-    queryEquipmentPeriod,
-    exportCurrentCsv,
-  };
-}
diff --git a/frontend/src/query-tool/main.js b/frontend/src/query-tool/main.js
index 4a04027..f19c686 100644
--- a/frontend/src/query-tool/main.js
+++ b/frontend/src/query-tool/main.js
@@ -1,3139 +1,6 @@
-import { ensureMesApiAvailable } from '../core/api.js';
+import { createApp } from 'vue';
 
-ensureMesApiAvailable();
+import '../styles/tailwind.css';
+import App from './App.vue';
 
-/**
- * Query Tool JavaScript
- *
- * Handles batch tracing and equipment period query functionality.
- */
-
-// ============================================================
-// State Management
-// ============================================================
-
-const QueryToolState = {
-    // LOT query
-    queryType: 'lot_id',
-    resolvedLots: [],
-    selectedLotIndex: 0,
-    lotHistories: {},  // container_id -> history data
-    lotAssociations: {},  // container_id -> { materials, rejects, holds, jobs }
-
-    // Timeline
-    timelineSelectedLots: new Set(),  // Set of indices for timeline display
-    currentLotIndex: 0,  // For association highlight
-
-    // Workcenter group filter
-    workcenterGroups: [],  // All available groups [{name, sequence}]
-    selectedWorkcenterGroups: new Set(),  // Selected group names for filtering
-
-    // Equipment query
-    allEquipments: [],
-    selectedEquipments: new Set(),
-    equipmentResults: null,
-};
-
-// Expose for debugging
-window.QueryToolState = QueryToolState;
-
-// ============================================================
-// State Cleanup (Memory Management)
-// ============================================================
-
-/**
- * Clear all query state to free memory before new query or page unload.
- * This prevents browser memory issues with large datasets.
- */
-function clearQueryState() {
-    // Clear LOT query state
-    QueryToolState.resolvedLots = [];
-    QueryToolState.selectedLotIndex = 0;
-    QueryToolState.lotHistories = {};
-    QueryToolState.lotAssociations = {};
-    QueryToolState.timelineSelectedLots = new Set();
-    QueryToolState.currentLotIndex = 0;
-
-    // Clear workcenter group selection (keep workcenterGroups as it's reused)
-    QueryToolState.selectedWorkcenterGroups = new Set();
-
-    // Hide selection bar (contains LOT selector and workcenter filter)
-    const selectionBar = document.getElementById('selectionBar');
-    if (selectionBar) selectionBar.style.display = 'none';
-
-    // Clear equipment query state
-    QueryToolState.equipmentResults = null;
-    // Note: Keep allEquipments and selectedEquipments as they are reused
-
-    // Clear global timeline data (can be large)
-    if (window._timelineData) {
-        window._timelineData.lotsData = [];
-        window._timelineData.stationColors = {};
-        window._timelineData.allStations = [];
-        window._timelineData.selectedStations = new Set();
-        window._timelineData = null;
-    }
-
-    // Close any open popups
-    closeTimelinePopup();
-
-    // Clear DOM content
-    const lotResultsContent = document.getElementById('lotResultsContent');
-    if (lotResultsContent) {
-        lotResultsContent.innerHTML = '';
-        lotResultsContent.style.display = 'none';
-    }
-
-    // Reset empty state visibility
-    const lotEmptyState = document.getElementById('lotEmptyState');
-    if (lotEmptyState) {
-        lotEmptyState.style.display = 'block';
-    }
-
-    // Hide LOT info bar
-    const lotInfoBar = document.getElementById('lotInfoBar');
-    if (lotInfoBar) lotInfoBar.style.display = 'none';
-
-    console.log('[QueryTool] State cleared for memory management');
-}
-
-// Clear state before page unload to help garbage collection
-window.addEventListener('beforeunload', () => {
-    clearQueryState();
-});
-
-// Expose for manual cleanup if needed
-window.clearQueryState = clearQueryState;
-
-// ============================================================
-// Initialization
-// ============================================================
-
-document.addEventListener('DOMContentLoaded', () => {
-    loadEquipments();
-    loadWorkcenterGroups();  // Load workcenter groups for filtering
-    setLast30Days();
-
-    // Close dropdowns when clicking outside
-    document.addEventListener('click', (e) => {
-        // Equipment dropdown
-        const eqDropdown = document.getElementById('equipmentDropdown');
-        const eqSelector = document.querySelector('.equipment-selector');
-        if (eqSelector && !eqSelector.contains(e.target)) {
-            eqDropdown.classList.remove('show');
-        }
-
-        // LOT selector dropdown
-        const lotDropdown = document.getElementById('lotSelectorDropdown');
-        const lotSelector = document.getElementById('lotSelectorContainer');
-        if (lotSelector && !lotSelector.contains(e.target)) {
-            lotDropdown.classList.remove('show');
-        }
-
-        // Workcenter group dropdown
-        const wcDropdown = document.getElementById('wcGroupDropdown');
-        const wcSelector = document.getElementById('workcenterGroupSelectorContainer');
-        if (wcSelector && !wcSelector.contains(e.target)) {
-            if (wcDropdown) wcDropdown.classList.remove('show');
-        }
-    });
-
-    // Handle Enter key in search input
-    const searchInput = document.getElementById('lotInputField');
-    if (searchInput) {
-        searchInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                executeLotQuery();
-            }
-        });
-    }
-});
-
-// ============================================================
-// Query Mode Switching (Batch vs Equipment)
-// ============================================================
-
-function switchQueryMode(mode) {
-    // Update tabs
-    document.querySelectorAll('.query-mode-tab').forEach(tab => {
-        tab.classList.toggle('active', tab.dataset.mode === mode);
-    });
-
-    // Show/hide filter bars
-    document.getElementById('batchFilterBar').style.display = mode === 'batch' ? 'flex' : 'none';
-    document.getElementById('equipmentFilterBar').style.display = mode === 'equipment' ? 'flex' : 'none';
-
-    // Show/hide results panels
-    document.getElementById('batchResultsPanel').style.display = mode === 'batch' ? 'block' : 'none';
-    document.getElementById('equipmentResultsPanel').style.display = mode === 'equipment' ? 'block' : 'none';
-
-    // Hide LOT info bar when switching to equipment mode
-    if (mode === 'equipment') {
-        document.getElementById('lotInfoBar').style.display = 'none';
-    }
-}
-
-// ============================================================
-// Query Type Selection
-// ============================================================
-
-function setQueryType(type) {
-    QueryToolState.queryType = type;
-
-    // Update select element if called programmatically
-    const select = document.getElementById('queryTypeSelect');
-    if (select && select.value !== type) {
-        select.value = type;
-    }
-
-    // Update input placeholder based on type
-    const placeholders = {
-        'lot_id': '輸入 LOT ID（多筆以逗號分隔）',
-        'serial_number': '輸入流水號（多筆以逗號分隔）',
-        'work_order': '輸入 GA工單（多筆以逗號分隔）',
-    };
-
-    const inputField = document.getElementById('lotInputField');
-    if (inputField) {
-        inputField.placeholder = placeholders[type] || placeholders['lot_id'];
-    }
-}
-
-// ============================================================
-// LOT Query Functions
-// ============================================================
-
-function parseInputValues(text) {
-    // Parse input: split by newlines and commas, trim whitespace, filter empty
-    return text
-        .split(/[\n,]/)
-        .map(s => s.trim())
-        .filter(s => s.length > 0);
-}
-
-async function executeLotQuery() {
-    const input = document.getElementById('lotInputField').value;
-    const values = parseInputValues(input);
-
-    if (values.length === 0) {
-        Toast.error('請輸入查詢條件');
-        return;
-    }
-
-    // Validate limits
-    const limits = { 'lot_id': 50, 'serial_number': 50, 'work_order': 10 };
-    const limit = limits[QueryToolState.queryType];
-    if (values.length > limit) {
-        Toast.error(`輸入數量超過上限 (${limit} 筆)`);
-        return;
-    }
-
-    // Clear previous query state to free memory
-    clearQueryState();
-
-    // Show loading
-    document.getElementById('lotEmptyState').style.display = 'none';
-    document.getElementById('lotResultsContent').style.display = 'block';
-    document.getElementById('lotResultsContent').innerHTML = `
-        <div class="loading">
-            <div class="loading-spinner"></div>
-            <br>解析中...
-        </div>
-    `;
-
-    // Hide LOT info bar and selection bar during loading
-    document.getElementById('lotInfoBar').style.display = 'none';
-    const selectionBar = document.getElementById('selectionBar');
-    if (selectionBar) selectionBar.style.display = 'none';
-
-    document.getElementById('lotQueryBtn').disabled = true;
-
-    try {
-        // Step 1: Resolve to CONTAINERID
-        const resolveResult = await MesApi.post('/api/query-tool/resolve', {
-            input_type: QueryToolState.queryType,
-            values: values
-        });
-
-        if (resolveResult.error) {
-            document.getElementById('lotResultsContent').innerHTML = `<div class="error">${resolveResult.error}</div>`;
-            return;
-        }
-
-        if (!resolveResult.data || resolveResult.data.length === 0) {
-            document.getElementById('lotResultsContent').innerHTML = `
-                <div class="empty-state">
-                    <p>查無符合的批次資料</p>
-                    ${resolveResult.not_found && resolveResult.not_found.length > 0
-                        ? `<p style="font-size: 12px; color: #888;">未找到: ${resolveResult.not_found.join(', ')}</p>`
-                        : ''}
-                </div>
-            `;
-            return;
-        }
-
-        QueryToolState.resolvedLots = resolveResult.data;
-        QueryToolState.selectedLotIndex = 0;
-        QueryToolState.lotHistories = {};
-        QueryToolState.lotAssociations = {};
-
-        // Initialize with empty selection - user must confirm
-        QueryToolState.timelineSelectedLots = new Set();
-
-        // Clear workcenter group selection for new query
-        QueryToolState.selectedWorkcenterGroups = new Set();
-
-        // Hide LOT info bar initially
-        document.getElementById('lotInfoBar').style.display = 'none';
-
-        // Show workcenter group selector for filtering
-        showWorkcenterGroupSelector();
-
-        if (resolveResult.data.length === 1) {
-            // Single result - auto-select and show directly
-            QueryToolState.timelineSelectedLots.add(0);
-            // Hide LOT selector (not needed for single result), but show workcenter filter
-            const lotSelector = document.getElementById('lotSelectorContainer');
-            if (lotSelector) lotSelector.style.display = 'none';
-            // Update hint for single LOT
-            const hint = document.getElementById('selectionHint');
-            if (hint) hint.innerHTML = '<span>選擇站點後點擊「套用篩選」重新載入</span>';
-            // Load and show the single lot's data
-            confirmLotSelection();
-        } else {
-            // Multiple results - show selector for user to choose
-            const lotSelector = document.getElementById('lotSelectorContainer');
-            if (lotSelector) lotSelector.style.display = 'block';
-            showLotSelector(resolveResult.data);
-            // Render empty state
-            renderLotResults(resolveResult);
-            // Auto-open the dropdown
-            document.getElementById('lotSelectorDropdown').classList.add('show');
-        }
-
-    } catch (error) {
-        document.getElementById('lotResultsContent').innerHTML = `<div class="error">查詢失敗: ${error.message}</div>`;
-    } finally {
-        document.getElementById('lotQueryBtn').disabled = false;
-    }
-}
-
-// ============================================================
-// LOT Selector Dropdown
-// ============================================================
-
-function showLotSelector(lots) {
-    const container = document.getElementById('lotSelectorContainer');
-    const dropdown = document.getElementById('lotSelectorDropdown');
-    const display = document.getElementById('lotSelectorDisplay');
-    const badge = document.getElementById('lotCountBadge');
-
-    container.style.display = 'block';
-    display.textContent = '選擇批次...';
-    badge.textContent = lots.length + ' 筆';
-
-    // Group lots by spec_name and sort within groups
-    const groupedLots = {};
-    lots.forEach((lot, idx) => {
-        const spec = lot.spec_name || '未分類';
-        if (!groupedLots[spec]) {
-            groupedLots[spec] = [];
-        }
-        groupedLots[spec].push({ ...lot, originalIndex: idx });
-    });
-
-    // Sort specs alphabetically, sort lots within each group by lot_id
-    const sortedSpecs = Object.keys(groupedLots).sort();
-    sortedSpecs.forEach(spec => {
-        groupedLots[spec].sort((a, b) => {
-            const aId = a.lot_id || a.input_value || '';
-            const bId = b.lot_id || b.input_value || '';
-            return aId.localeCompare(bId);
-        });
-    });
-
-    // Populate dropdown with grouped structure and checkboxes for multi-select
-    let html = `
-        <div style="padding: 8px 12px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
-            <label style="cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px;">
-                <input type="checkbox" id="lotSelectAll" onchange="toggleAllLotsInSelector(this.checked)">
-                全選
-            </label>
-            <span style="font-size: 12px; color: #666;" id="lotSelectedCount">已選 0 筆</span>
-        </div>
-    `;
-
-    sortedSpecs.forEach(spec => {
-        html += `<div class="lot-group-header" style="padding: 6px 12px; background: #f0f0f0; font-size: 12px; font-weight: 600; color: #666;">${spec}</div>`;
-
-        groupedLots[spec].forEach(lot => {
-            const idx = lot.originalIndex;
-            const isSelected = QueryToolState.timelineSelectedLots.has(idx);
-
-            html += `
-                <div class="lot-option ${isSelected ? 'selected' : ''}" data-index="${idx}" onclick="selectLotFromDropdown(${idx})">
-                    <label class="lot-option-checkbox" onclick="event.stopPropagation();" style="display: flex; align-items: center; margin-right: 10px;">
-                        <input type="checkbox" data-lot-index="${idx}" ${isSelected ? 'checked' : ''} onchange="event.stopPropagation(); toggleLotInSelector(${idx}, this.checked)">
-                    </label>
-                    <div class="lot-option-info" style="flex: 1;">
-                        <div class="lot-option-id">${lot.lot_id || lot.input_value}</div>
-                        <div class="lot-option-spec">${lot.work_order || ''}</div>
-                    </div>
-                </div>
-            `;
-        });
-    });
-
-    // Add confirm button at the bottom
-    html += `
-        <div style="padding: 10px 12px; border-top: 1px solid #e0e0e0; background: #f8f9fa; position: sticky; bottom: 0;">
-            <button class="btn btn-primary btn-sm" style="width: 100%;" onclick="confirmLotSelection()">
-                確定選擇
-            </button>
-        </div>
-    `;
-
-    dropdown.innerHTML = html;
-    updateLotSelectorCount();
-}
-
-// Confirm selection and load data for all selected lots
-async function confirmLotSelection() {
-    const selectedIndices = Array.from(QueryToolState.timelineSelectedLots);
-
-    if (selectedIndices.length === 0) {
-        Toast.warning('請至少選擇一個批次');
-        return;
-    }
-
-    // Close dropdowns
-    document.getElementById('lotSelectorDropdown').classList.remove('show');
-    const wcDropdown = document.getElementById('wcGroupDropdown');
-    if (wcDropdown) wcDropdown.classList.remove('show');
-
-    // Build workcenter_groups parameter
-    const wcGroups = Array.from(QueryToolState.selectedWorkcenterGroups);
-    const wcGroupsParam = wcGroups.length > 0 ? wcGroups.join(',') : null;
-
-    // Update display
-    const count = selectedIndices.length;
-    document.getElementById('lotSelectorDisplay').textContent = `已選 ${count} 個批次`;
-
-    // Hide single lot info bar, show loading
-    document.getElementById('lotInfoBar').style.display = 'none';
-
-    const panel = document.getElementById('lotResultsContent');
-    const filterInfo = wcGroupsParam ? ` (篩選: ${wcGroups.length} 個站點群組)` : '';
-    panel.innerHTML = `
-        <div class="loading">
-            <div class="loading-spinner"></div>
-            <br>載入所選批次資料...${filterInfo}
-        </div>
-    `;
-
-    // Clear cached histories when filter changes
-    QueryToolState.lotHistories = {};
-
-    // Load history for all selected lots WITH workcenter filter
-    try {
-        await Promise.all(selectedIndices.map(async (idx) => {
-            const lot = QueryToolState.resolvedLots[idx];
-            const params = { container_id: lot.container_id };
-            if (wcGroupsParam) {
-                params.workcenter_groups = wcGroupsParam;
-            }
-
-            const result = await MesApi.get('/api/query-tool/lot-history', { params });
-            if (!result.error) {
-                QueryToolState.lotHistories[lot.container_id] = result.data || [];
-            }
-        }));
-
-        // Render combined view
-        renderCombinedLotView(selectedIndices);
-
-    } catch (error) {
-        panel.innerHTML = `<div class="error">載入失敗: ${error.message}</div>`;
-    }
-}
-
-function toggleLotInSelector(index, checked) {
-    if (checked) {
-        QueryToolState.timelineSelectedLots.add(index);
-    } else {
-        QueryToolState.timelineSelectedLots.delete(index);
-    }
-
-    // Update visual style
-    const option = document.querySelector(`.lot-option[data-index="${index}"]`);
-    if (option) {
-        option.classList.toggle('selected', checked);
-    }
-
-    updateLotSelectorCount();
-    updateTimelineButton();
-}
-
-function toggleAllLotsInSelector(checked) {
-    const checkboxes = document.querySelectorAll('#lotSelectorDropdown input[type="checkbox"][data-lot-index]');
-    checkboxes.forEach(cb => {
-        cb.checked = checked;
-        const idx = parseInt(cb.dataset.lotIndex);
-        if (checked) {
-            QueryToolState.timelineSelectedLots.add(idx);
-        } else {
-            QueryToolState.timelineSelectedLots.delete(idx);
-        }
-    });
-    updateLotSelectorCount();
-    updateTimelineButton();
-}
-
-function updateLotSelectorCount() {
-    const countEl = document.getElementById('lotSelectedCount');
-    if (countEl) {
-        countEl.textContent = `已選 ${QueryToolState.timelineSelectedLots.size} 筆`;
-    }
-}
-
-function toggleLotSelector() {
-    const dropdown = document.getElementById('lotSelectorDropdown');
-    dropdown.classList.toggle('show');
-}
-
-function selectLotFromDropdown(index) {
-    // Toggle checkbox selection
-    const checkbox = document.querySelector(`#lotSelectorDropdown input[data-lot-index="${index}"]`);
-    if (checkbox) {
-        checkbox.checked = !checkbox.checked;
-        toggleLotInSelector(index, checkbox.checked);
-    }
-}
-
-function updateLotInfoBar(index) {
-    const lot = QueryToolState.resolvedLots[index];
-    if (!lot) return;
-
-    const infoBar = document.getElementById('lotInfoBar');
-    infoBar.style.display = 'flex';
-
-    document.getElementById('infoLotId').textContent = lot.lot_id || lot.input_value || '-';
-    document.getElementById('infoSpec').textContent = lot.spec_name || '-';
-    document.getElementById('infoWorkOrder').textContent = lot.work_order || '-';
-
-    // Step count will be updated after history loads
-    document.getElementById('infoStepCount').textContent = '-';
-}
-
-function renderLotResults(resolveResult) {
-    const lots = QueryToolState.resolvedLots;
-    const notFound = resolveResult.not_found || [];
-
-    let html = `
-        <div class="result-header">
-            <div class="result-info">
-                共找到 ${lots.length} 個批次
-                ${notFound.length > 0 ? `<span style="color: #dc3545;">（${notFound.length} 個未找到）</span>` : ''}
-            </div>
-            <div class="result-actions">
-                <span style="font-size: 13px; color: #666;">請從上方選擇批次後點擊「確定選擇」</span>
-            </div>
-        </div>
-    `;
-
-    html += `<div class="empty-state" style="padding: 40px;"><p>請選擇要查看的批次</p></div>`;
-
-    document.getElementById('lotResultsContent').innerHTML = html;
-}
-
-// Render combined view for multiple selected lots
-function renderCombinedLotView(selectedIndices) {
-    const lots = QueryToolState.resolvedLots;
-    const panel = document.getElementById('lotResultsContent');
-
-    // Collect all history data with LOT ID
-    const allHistory = [];
-    selectedIndices.forEach(idx => {
-        const lot = lots[idx];
-        const history = QueryToolState.lotHistories[lot.container_id] || [];
-        history.forEach(step => {
-            allHistory.push({
-                ...step,
-                LOT_ID: lot.lot_id || lot.input_value,
-                LOT_INDEX: idx
-            });
-        });
-    });
-
-    // Sort by track-in time
-    allHistory.sort((a, b) => {
-        const timeA = a.TRACKINTIMESTAMP ? new Date(a.TRACKINTIMESTAMP).getTime() : 0;
-        const timeB = b.TRACKINTIMESTAMP ? new Date(b.TRACKINTIMESTAMP).getTime() : 0;
-        return timeA - timeB;
-    });
-
-    let html = `
-        <div class="result-header">
-            <div class="result-info">
-                已選擇 ${selectedIndices.length} 個批次，共 ${allHistory.length} 筆生產紀錄
-            </div>
-            <div class="result-actions">
-                <button class="btn btn-success btn-sm" onclick="exportCombinedResults()">匯出 CSV</button>
-            </div>
-        </div>
-    `;
-
-    // Timeline section (auto-displayed)
-    html += `
-        <div id="timelineContainer" style="margin-bottom: 20px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-                <div style="font-weight: 600; font-size: 16px;">
-                    生產時間線
-                    <span style="font-weight: normal; font-size: 13px; color: #666;">(${selectedIndices.length} 個批次)</span>
-                </div>
-                <button class="btn btn-secondary btn-sm" onclick="document.getElementById('timelineContainer').style.display='none'">收起</button>
-            </div>
-            <div id="timelineContent"></div>
-        </div>
-    `;
-
-    // Combined production history table with LOT ID column
-    html += `
-        <div style="font-weight: 600; margin-bottom: 15px; font-size: 16px;">生產歷程</div>
-        <div class="table-container" style="max-height: 400px; overflow: auto;">
-            <table style="min-width: 100%;">
-                <thead>
-                    <tr>
-                        <th style="min-width: 140px; position: sticky; left: 0; background: #f8f9fa; z-index: 2;">LOT ID</th>
-                        <th style="min-width: 100px;">站點</th>
-                        <th style="min-width: 100px;">設備</th>
-                        <th style="min-width: 120px;">規格</th>
-                        <th style="min-width: 80px;">產品類型</th>
-                        <th style="min-width: 80px;">BOP</th>
-                        <th style="min-width: 100px;">Wafer Lot</th>
-                        <th style="min-width: 150px;">上機時間</th>
-                        <th style="min-width: 150px;">下機時間</th>
-                        <th style="width: 70px;">入數</th>
-                        <th style="width: 70px;">出數</th>
-                        <th style="width: 80px; position: sticky; right: 0; background: #f8f9fa; box-shadow: -2px 0 4px rgba(0,0,0,0.1);">操作</th>
-                    </tr>
-                </thead>
-                <tbody>
-    `;
-
-    allHistory.forEach((step, idx) => {
-        html += `
-            <tr class="lot-row" id="combined-row-${idx}">
-                <td style="position: sticky; left: 0; background: white; z-index: 1; font-weight: 500; font-family: monospace; font-size: 12px;">${step.LOT_ID}</td>
-                <td>${step.WORKCENTERNAME || ''}</td>
-                <td>${step.EQUIPMENTNAME || ''}</td>
-                <td title="${step.SPECNAME || ''}">${truncateText(step.SPECNAME, 15)}</td>
-                <td>${step.PJ_TYPE || '-'}</td>
-                <td>${step.PJ_BOP || '-'}</td>
-                <td>${step.WAFER_LOT_ID || '-'}</td>
-                <td>${formatDateTime(step.TRACKINTIMESTAMP)}</td>
-                <td>${formatDateTime(step.TRACKOUTTIMESTAMP)}</td>
-                <td>${step.TRACKINQTY || ''}</td>
-                <td>${step.TRACKOUTQTY || ''}</td>
-                <td style="position: sticky; right: 0; background: white; box-shadow: -2px 0 4px rgba(0,0,0,0.1);">
-                    <button class="btn btn-secondary btn-sm" onclick="showAdjacentLots('${step.EQUIPMENTID}', '${step.EQUIPMENTNAME || step.EQUIPMENTID}', '${step.TRACKINTIMESTAMP}')" title="查詢前後批">
-                        前後批
-                    </button>
-                </td>
-            </tr>
-        `;
-    });
-
-    html += `</tbody></table></div>`;
-
-    // Association tabs for combined data
-    html += `
-        <hr class="section-divider">
-        <div style="font-weight: 600; margin-bottom: 15px;">關聯資料</div>
-        <div class="assoc-tabs">
-            <button class="assoc-tab active" onclick="loadCombinedAssociation('materials', this)">物料消耗</button>
-            <button class="assoc-tab" onclick="loadCombinedAssociation('rejects', this)">不良紀錄</button>
-            <button class="assoc-tab" onclick="loadCombinedAssociation('holds', this)">HOLD 紀錄</button>
-            <button class="assoc-tab" onclick="loadCombinedAssociation('splits', this)">拆併批紀錄</button>
-        </div>
-        <div id="assocContent">
-            <div class="loading"><div class="loading-spinner"></div></div>
-        </div>
-    `;
-
-    panel.innerHTML = html;
-
-    // Store selected indices for association queries
-    QueryToolState.currentSelectedIndices = selectedIndices;
-
-    // Set timeline selected lots for showTimeline() to work
-    QueryToolState.timelineSelectedLots = new Set(selectedIndices);
-
-    // Render timeline
-    renderTimeline(selectedIndices);
-
-    // Load default association
-    loadCombinedAssociation('materials', document.querySelector('.assoc-tab.active'));
-}
-
-// Load combined association data for all selected lots
-async function loadCombinedAssociation(type, tabElement) {
-    // Update tab states
-    document.querySelectorAll('.assoc-tab').forEach(t => t.classList.remove('active'));
-    if (tabElement) tabElement.classList.add('active');
-
-    const content = document.getElementById('assocContent');
-
-    // Show custom loading message for splits (slow query)
-    if (type === 'splits') {
-        content.innerHTML = `
-            <div class="loading" style="flex-direction: column; gap: 12px;">
-                <div class="loading-spinner"></div>
-                <div style="text-align: center; color: #666;">
-                    <div style="font-weight: 500; margin-bottom: 4px;">查詢生產拆併批紀錄中...</div>
-                    <div style="font-size: 12px;">此查詢可能需要 30-60 秒，請耐心等候</div>
-                </div>
-            </div>`;
-    } else {
-        content.innerHTML = `<div class="loading"><div class="loading-spinner"></div></div>`;
-    }
-
-    const selectedIndices = QueryToolState.currentSelectedIndices || [];
-    const lots = QueryToolState.resolvedLots;
-
-    try {
-        // Special handling for 'splits' type - different data structure
-        if (type === 'splits') {
-            const combinedSplitsData = {
-                production_history: [],
-                serial_numbers: [],
-                production_history_skipped: false,
-                production_history_skip_reason: '',
-                production_history_timeout: false,
-                production_history_timeout_message: ''
-            };
-
-            await Promise.all(selectedIndices.map(async (idx) => {
-                const lot = lots[idx];
-                const cacheKey = `${lot.container_id}_${type}`;
-
-                if (!QueryToolState.lotAssociations[cacheKey]) {
-                    const result = await MesApi.get('/api/query-tool/lot-associations', {
-                        params: { container_id: lot.container_id, type: type },
-                        timeout: 120000  // 2 minute timeout for slow queries
-                    });
-                    // 'splits' returns {production_history, serial_numbers, ...} directly
-                    // NOT wrapped in {data: ...}
-                    QueryToolState.lotAssociations[cacheKey] = result || {};
-                    // Debug: log the API response for splits
-                    console.log('[DEBUG] Splits API response for', lot.container_id, ':', result);
-                    console.log('[DEBUG] production_history count:', (result?.production_history || []).length);
-                    console.log('[DEBUG] serial_numbers count:', (result?.serial_numbers || []).length);
-                }
-
-                const data = QueryToolState.lotAssociations[cacheKey];
-                const lotId = lot.lot_id || lot.input_value;
-
-                // Capture skip info from first response
-                if (data.production_history_skipped && !combinedSplitsData.production_history_skipped) {
-                    combinedSplitsData.production_history_skipped = true;
-                    combinedSplitsData.production_history_skip_reason = data.production_history_skip_reason || '';
-                }
-
-                // Capture timeout info
-                if (data.production_history_timeout && !combinedSplitsData.production_history_timeout) {
-                    combinedSplitsData.production_history_timeout = true;
-                    combinedSplitsData.production_history_timeout_message = data.production_history_timeout_message || '查詢逾時';
-                }
-
-                // Merge production_history with LOT_ID
-                (data.production_history || []).forEach(record => {
-                    combinedSplitsData.production_history.push({
-                        ...record,
-                        LOT_ID: lotId
-                    });
-                });
-
-                // Merge serial_numbers with LOT_ID
-                (data.serial_numbers || []).forEach(snGroup => {
-                    // Check if this serial number already exists
-                    const existingSn = combinedSplitsData.serial_numbers.find(
-                        s => s.serial_number === snGroup.serial_number
-                    );
-                    if (existingSn) {
-                        // Merge lots into existing serial number
-                        snGroup.lots.forEach(lot => {
-                            if (!existingSn.lots.some(l => l.container_id === lot.container_id)) {
-                                existingSn.lots.push(lot);
-                            }
-                        });
-                        existingSn.total_good_die = existingSn.lots.reduce(
-                            (sum, l) => sum + (l.good_die_qty || 0), 0
-                        );
-                    } else {
-                        combinedSplitsData.serial_numbers.push({
-                            ...snGroup,
-                            LOT_ID: lotId
-                        });
-                    }
-                });
-            }));
-
-            // Sort production history by date
-            combinedSplitsData.production_history.sort((a, b) => {
-                const dateA = a.txn_date ? new Date(a.txn_date).getTime() : 0;
-                const dateB = b.txn_date ? new Date(b.txn_date).getTime() : 0;
-                return dateA - dateB;
-            });
-
-            // Save to state for export functionality
-            QueryToolState.combinedSplitsData = combinedSplitsData;
-
-            renderCombinedAssociation(type, combinedSplitsData);
-            return;
-        }
-
-        // Standard handling for other types (materials, rejects, holds)
-        const allData = [];
-
-        await Promise.all(selectedIndices.map(async (idx) => {
-            const lot = lots[idx];
-            const cacheKey = `${lot.container_id}_${type}`;
-
-            if (!QueryToolState.lotAssociations[cacheKey]) {
-                const result = await MesApi.get('/api/query-tool/lot-associations', {
-                    params: { container_id: lot.container_id, type: type }
-                });
-                QueryToolState.lotAssociations[cacheKey] = result.data || [];
-            }
-
-            const data = QueryToolState.lotAssociations[cacheKey];
-            data.forEach(row => {
-                allData.push({
-                    ...row,
-                    LOT_ID: lot.lot_id || lot.input_value
-                });
-            });
-        }));
-
-        renderCombinedAssociation(type, allData);
-
-    } catch (error) {
-        content.innerHTML = `<div class="error">載入失敗: ${error.message}</div>`;
-    }
-}
-
-function renderCombinedAssociation(type, data) {
-    const content = document.getElementById('assocContent');
-
-    // Special handling for 'splits' type (different data structure)
-    if (type === 'splits') {
-        renderCombinedSplitsAssociation(data);
-        return;
-    }
-
-    // Check for empty data (array types)
-    if (!data || data.length === 0) {
-        content.innerHTML = `<div class="empty-state" style="padding: 30px;"><p>無${getAssocLabel(type)}資料</p></div>`;
-        return;
-    }
-
-    // Define columns with LOT_ID first
-    const columnDefs = {
-        'materials': ['LOT_ID', 'MATERIALPARTNAME', 'MATERIALLOTNAME', 'QTYCONSUMED', 'WORKCENTERNAME', 'EQUIPMENTNAME', 'TXNDATE'],
-        'rejects': ['LOT_ID', 'REJECTCATEGORYNAME', 'LOSSREASONNAME', 'REJECTQTY', 'WORKCENTERNAME', 'EQUIPMENTNAME', 'TXNDATE'],
-        'holds': ['LOT_ID', 'WORKCENTERNAME', 'HOLDREASONNAME', 'HOLDTXNDATE', 'HOLD_STATUS', 'HOLD_HOURS', 'HOLDEMP', 'RELEASETXNDATE'],
-    };
-
-    const colLabels = {
-        'LOT_ID': 'LOT ID',
-        'MATERIALPARTNAME': '物料名稱',
-        'MATERIALLOTNAME': '物料批號',
-        'QTYCONSUMED': '消耗數量',
-        'WORKCENTERNAME': '站點',
-        'EQUIPMENTNAME': '設備',
-        'TXNDATE': '時間',
-        'REJECTCATEGORYNAME': '不良分類',
-        'LOSSREASONNAME': '損失原因',
-        'REJECTQTY': '不良數量',
-        'HOLDREASONNAME': 'HOLD 原因',
-        'HOLDTXNDATE': 'HOLD 時間',
-        'HOLD_STATUS': '狀態',
-        'HOLD_HOURS': 'HOLD 時數',
-        'HOLDEMP': 'HOLD 人員',
-        'RELEASETXNDATE': 'RELEASE 時間',
-    };
-
-    const cols = columnDefs[type] || ['LOT_ID', ...Object.keys(data[0]).filter(k => k !== 'LOT_ID')];
-
-    let html = `<div class="table-container" style="max-height: 350px;"><table><thead><tr>`;
-    cols.forEach(col => {
-        const isLotId = col === 'LOT_ID';
-        const style = isLotId ? 'position: sticky; left: 0; background: #f8f9fa; z-index: 2;' : '';
-        html += `<th style="${style}">${colLabels[col] || col}</th>`;
-    });
-    html += `</tr></thead><tbody>`;
-
-    data.forEach(row => {
-        html += `<tr>`;
-        cols.forEach(col => {
-            let value = row[col];
-            const isLotId = col === 'LOT_ID';
-            const style = isLotId ? 'position: sticky; left: 0; background: white; z-index: 1; font-weight: 500; font-family: monospace; font-size: 12px;' : '';
-
-            if (col.includes('DATE') || col.includes('TIMESTAMP')) {
-                value = formatDateTime(value);
-            }
-            if (col === 'HOLD_STATUS') {
-                value = value === 'HOLD'
-                    ? `<span class="badge badge-warning">HOLD 中</span>`
-                    : `<span class="badge badge-success">已解除</span>`;
-            }
-            html += `<td style="${style}">${value !== null && value !== undefined ? value : ''}</td>`;
-        });
-        html += `</tr>`;
-    });
-
-    html += `</tbody></table></div>`;
-    content.innerHTML = html;
-}
-
-function renderCombinedSplitsAssociation(data) {
-    const content = document.getElementById('assocContent');
-
-    // New data structure has: production_history, serial_numbers, skip/timeout info
-    const productionHistory = data.production_history || [];
-    const serialNumbers = data.serial_numbers || [];
-    const productionHistorySkipped = data.production_history_skipped || false;
-    const skipReason = data.production_history_skip_reason || '';
-    const productionHistoryTimeout = data.production_history_timeout || false;
-    const timeoutMessage = data.production_history_timeout_message || '';
-    const hasProductionHistory = productionHistory.length > 0;
-    const hasSerialNumbers = serialNumbers.length > 0;
-
-    if (!hasProductionHistory && !hasSerialNumbers && !productionHistorySkipped && !productionHistoryTimeout) {
-        content.innerHTML = '<div class="empty-state" style="padding: 30px;"><p>無拆併批紀錄</p></div>';
-        return;
-    }
-
-    let html = '';
-
-    // Show notice if production history query was skipped
-    if (productionHistorySkipped && skipReason) {
-        html += `
-            <div style="margin-bottom: 16px; padding: 12px 16px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; font-size: 13px; color: #856404;">
-                <strong>注意：</strong>${skipReason}
-            </div>
-        `;
-    }
-
-    // Show warning if production history query timed out
-    if (productionHistoryTimeout) {
-        html += `
-            <div style="margin-bottom: 16px; padding: 12px 16px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 6px; font-size: 13px; color: #721c24;">
-                <strong>⚠ 查詢逾時：</strong>${timeoutMessage || '生產拆併批歷史查詢超時。此表格（DW_MES_HM_LOTMOVEOUT）目前無索引，查詢需較長時間。僅顯示 TMTT 成品流水號對應資料。'}
-            </div>
-        `;
-    }
-
-    // 1. Production Split/Merge History (生產過程拆併批)
-    if (hasProductionHistory) {
-        html += `
-            <div style="margin-bottom: 24px;">
-                <div style="font-weight: 600; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; justify-content: space-between;">
-                    <div style="display: flex; align-items: center; gap: 8px;">
-                        <span>生產過程拆併批紀錄</span>
-                        <span style="font-size: 12px; color: #666; font-weight: normal;">(${productionHistory.length} 筆)</span>
-                    </div>
-                    <button class="btn btn-success btn-sm" onclick="exportProductionHistory('combined')">匯出 CSV</button>
-                </div>
-                <div class="table-container" style="max-height: 300px; overflow: auto;">
-                    <table style="min-width: 100%; font-size: 13px;">
-                        <thead>
-                            <tr>
-                                <th style="min-width: 70px;">操作</th>
-                                <th style="min-width: 120px;">來源批次</th>
-                                <th style="min-width: 120px;">目標批次</th>
-                                <th style="min-width: 60px;">數量</th>
-                                <th style="min-width: 140px;">時間</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-        `;
-
-        productionHistory.forEach(record => {
-            const opBadgeClass = record.operation_type === 'SplitLot' ? 'badge-info' : 'badge-warning';
-            const isCurrentSource = record.is_current_lot_source;
-            const isCurrentTarget = record.is_current_lot_target;
-            const sourceStyle = isCurrentSource ? 'font-weight: 600; color: #4e54c8;' : '';
-            const targetStyle = isCurrentTarget ? 'font-weight: 600; color: #4e54c8;' : '';
-
-            html += `
-                <tr>
-                    <td><span class="badge ${opBadgeClass}">${record.operation_type_display}</span></td>
-                    <td style="${sourceStyle}">${record.source_lot || '-'}</td>
-                    <td style="${targetStyle}">${record.target_lot || '-'}</td>
-                    <td>${record.target_qty || '-'}</td>
-                    <td>${formatDateTime(record.txn_date)}</td>
-                </tr>
-            `;
-        });
-
-        html += `</tbody></table></div></div>`;
-    }
-
-    // 2. TMTT Serial Number Mapping (成品流水號對應)
-    if (hasSerialNumbers) {
-        html += `
-            <div style="margin-bottom: 12px;">
-                <div style="font-weight: 600; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; justify-content: space-between;">
-                    <div style="display: flex; align-items: center; gap: 8px;">
-                        <span>成品流水號對應</span>
-                        <span style="font-size: 12px; color: #666; font-weight: normal;">(${serialNumbers.length} 個流水號)</span>
-                    </div>
-                    <button class="btn btn-success btn-sm" onclick="exportSerialNumbers('combined')">匯出 CSV</button>
-                </div>
-        `;
-
-        serialNumbers.forEach(snGroup => {
-            const sn = snGroup.serial_number || 'Unknown';
-            const lots = snGroup.lots || [];
-            const totalDie = snGroup.total_good_die || 0;
-
-            html += `
-                <div style="margin-bottom: 12px; padding: 12px; border: 1px solid #dee2e6; border-radius: 6px; background: #fafafa;">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                        <span style="font-weight: 600; font-size: 14px;">流水號: ${sn}</span>
-                        <span style="font-size: 12px; color: #666;">總 Good Die: ${totalDie}</span>
-                    </div>
-                    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-            `;
-
-            lots.forEach(lot => {
-                const isCurrentLot = lot.is_current;
-                const lotStyle = isCurrentLot
-                    ? 'background: #e8f4e8; border: 1px solid #4caf50;'
-                    : 'background: white; border: 1px solid #ddd;';
-
-                html += `
-                    <div style="padding: 6px 10px; border-radius: 4px; font-size: 12px; ${lotStyle}">
-                        <div style="font-weight: 500;">${lot.lot_id || '-'}</div>
-                        <div style="color: #666; font-size: 11px;">
-                            ${lot.combine_ratio_pct} · ${lot.good_die_qty || 0} die
-                        </div>
-                    </div>
-                `;
-            });
-
-            html += `</div></div>`;
-        });
-
-        html += `</div>`;
-    }
-
-    content.innerHTML = html;
-}
-
-async function selectLot(index) {
-    QueryToolState.selectedLotIndex = index;
-
-    // Update LOT selector dropdown display
-    const lot = QueryToolState.resolvedLots[index];
-    const display = document.getElementById('lotSelectorDisplay');
-    if (display && lot) {
-        display.textContent = lot.lot_id || lot.input_value;
-    }
-
-    // Update dropdown active state
-    document.querySelectorAll('.lot-option').forEach((el, idx) => {
-        el.classList.toggle('active', idx === index);
-    });
-
-    // Update info bar
-    updateLotInfoBar(index);
-
-    // Load history if not cached
-    loadLotHistory(index);
-}
-
-async function loadLotHistory(index) {
-    const lot = QueryToolState.resolvedLots[index];
-    const containerId = lot.container_id;
-
-    const panel = document.getElementById('lotDetailPanel');
-    panel.innerHTML = `<div class="loading"><div class="loading-spinner"></div><br>載入生產歷程...</div>`;
-
-    // Check cache
-    if (QueryToolState.lotHistories[containerId]) {
-        renderLotDetail(index);
-        // Update step count in info bar
-        const stepCount = QueryToolState.lotHistories[containerId].length;
-        document.getElementById('infoStepCount').textContent = stepCount + ' 站';
-        return;
-    }
-
-    try {
-        const result = await MesApi.get('/api/query-tool/lot-history', {
-            params: { container_id: containerId }
-        });
-
-        if (result.error) {
-            panel.innerHTML = `<div class="error">${result.error}</div>`;
-            return;
-        }
-
-        QueryToolState.lotHistories[containerId] = result.data || [];
-
-        // Update step count in info bar
-        const stepCount = (result.data || []).length;
-        document.getElementById('infoStepCount').textContent = stepCount + ' 站';
-
-        renderLotDetail(index);
-
-    } catch (error) {
-        panel.innerHTML = `<div class="error">載入失敗: ${error.message}</div>`;
-    }
-}
-
-function renderLotDetail(index) {
-    const lot = QueryToolState.resolvedLots[index];
-    const containerId = lot.container_id;
-    const lotId = lot.lot_id || lot.input_value;  // LOT ID for display
-    const history = QueryToolState.lotHistories[containerId] || [];
-
-    const panel = document.getElementById('lotDetailPanel');
-
-    let html = '';
-
-    if (history.length === 0) {
-        html += `<div class="empty-state"><p>無生產歷程資料</p></div>`;
-    } else {
-        // Production history table (full width)
-        html += `
-            <div style="font-weight: 600; margin-bottom: 15px; font-size: 16px;">生產歷程</div>
-            <div class="table-container" style="max-height: 350px; overflow: auto;">
-                <table style="min-width: 100%;">
-                    <thead>
-                        <tr>
-                            <th style="width: 40px;">#</th>
-                            <th style="min-width: 100px;">站點</th>
-                            <th style="min-width: 100px;">設備</th>
-                            <th style="min-width: 120px;">規格</th>
-                            <th style="min-width: 80px;">產品類型</th>
-                            <th style="min-width: 80px;">BOP</th>
-                            <th style="min-width: 100px;">Wafer Lot</th>
-                            <th style="min-width: 150px;">上機時間</th>
-                            <th style="min-width: 150px;">下機時間</th>
-                            <th style="width: 70px;">入數</th>
-                            <th style="width: 70px;">出數</th>
-                            <th style="width: 80px; position: sticky; right: 0; background: #f8f9fa; box-shadow: -2px 0 4px rgba(0,0,0,0.1);">操作</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-        `;
-
-        history.forEach((step, idx) => {
-            html += `
-                <tr class="lot-row" id="history-row-${idx}">
-                    <td>${idx + 1}</td>
-                    <td>${step.WORKCENTERNAME || ''}</td>
-                    <td>${step.EQUIPMENTNAME || ''}</td>
-                    <td title="${step.SPECNAME || ''}">${truncateText(step.SPECNAME, 12)}</td>
-                    <td>${step.PJ_TYPE || '-'}</td>
-                    <td>${step.PJ_BOP || '-'}</td>
-                    <td>${step.WAFER_LOT_ID || '-'}</td>
-                    <td>${formatDateTime(step.TRACKINTIMESTAMP)}</td>
-                    <td>${formatDateTime(step.TRACKOUTTIMESTAMP)}</td>
-                    <td>${step.TRACKINQTY || ''}</td>
-                    <td>${step.TRACKOUTQTY || ''}</td>
-                    <td style="position: sticky; right: 0; background: white; box-shadow: -2px 0 4px rgba(0,0,0,0.1);">
-                        <button class="btn btn-secondary btn-sm" onclick="showAdjacentLots('${step.EQUIPMENTID}', '${step.EQUIPMENTNAME || step.EQUIPMENTID}', '${step.TRACKINTIMESTAMP}')" title="查詢前後批">
-                            前後批
-                        </button>
-                    </td>
-                </tr>
-            `;
-        });
-
-        html += `</tbody></table></div>`;
-    }
-
-    // Association tabs
-    html += `
-        <hr class="section-divider">
-        <div style="font-weight: 600; margin-bottom: 15px;">關聯資料</div>
-        <div class="assoc-tabs">
-            <button class="assoc-tab active" onclick="loadAssociation('${containerId}', 'materials', this)">物料消耗</button>
-            <button class="assoc-tab" onclick="loadAssociation('${containerId}', 'rejects', this)">不良紀錄</button>
-            <button class="assoc-tab" onclick="loadAssociation('${containerId}', 'holds', this)">HOLD 紀錄</button>
-            <button class="assoc-tab" onclick="loadAssociation('${containerId}', 'splits', this)">拆併批紀錄</button>
-        </div>
-        <div id="assocContent">
-            <div class="loading"><div class="loading-spinner"></div></div>
-        </div>
-    `;
-
-    panel.innerHTML = html;
-
-    // Load default association (materials)
-    loadAssociation(containerId, 'materials', document.querySelector('.assoc-tab.active'));
-}
-
-async function loadAssociation(containerId, type, tabElement) {
-    // Update tab states
-    document.querySelectorAll('.assoc-tab').forEach(t => t.classList.remove('active'));
-    if (tabElement) tabElement.classList.add('active');
-
-    // Save current container ID for export functions
-    QueryToolState.currentContainerId = containerId;
-
-    const content = document.getElementById('assocContent');
-
-    // Show custom loading message for splits (slow query)
-    if (type === 'splits') {
-        content.innerHTML = `
-            <div class="loading" style="flex-direction: column; gap: 12px;">
-                <div class="loading-spinner"></div>
-                <div style="text-align: center; color: #666;">
-                    <div style="font-weight: 500; margin-bottom: 4px;">查詢生產拆併批紀錄中...</div>
-                    <div style="font-size: 12px;">此查詢可能需要 30-60 秒，請耐心等候</div>
-                </div>
-            </div>`;
-    } else {
-        content.innerHTML = `<div class="loading"><div class="loading-spinner"></div></div>`;
-    }
-
-    // Check cache
-    const cacheKey = `${containerId}_${type}`;
-    if (QueryToolState.lotAssociations[cacheKey]) {
-        renderAssociation(type, QueryToolState.lotAssociations[cacheKey]);
-        return;
-    }
-
-    try {
-        const result = await MesApi.get('/api/query-tool/lot-associations', {
-            params: { container_id: containerId, type: type },
-            timeout: type === 'splits' ? 120000 : 60000  // 2 minutes for splits, 1 minute for others
-        });
-
-        if (result.error) {
-            content.innerHTML = `<div class="error">${result.error}</div>`;
-            return;
-        }
-
-        // 'splits' returns {production_history, serial_numbers, ...} directly
-        // Other types return {data: [...], ...}
-        if (type === 'splits') {
-            QueryToolState.lotAssociations[cacheKey] = result || {};
-            renderAssociation(type, result || {});
-        } else {
-            QueryToolState.lotAssociations[cacheKey] = result.data || [];
-            renderAssociation(type, result.data || []);
-        }
-
-    } catch (error) {
-        content.innerHTML = `<div class="error">載入失敗: ${error.message}</div>`;
-    }
-}
-
-function renderAssociation(type, data) {
-    const content = document.getElementById('assocContent');
-
-    // Special handling for 'splits' type (object with production_history and serial_numbers)
-    if (type === 'splits') {
-        renderSplitsAssociation(data);
-        return;
-    }
-
-    // Check empty data for array-based types
-    if (!data || data.length === 0) {
-        content.innerHTML = `<div class="empty-state" style="padding: 30px;"><p>無${getAssocLabel(type)}資料</p></div>`;
-        return;
-    }
-
-    let html = `<div class="table-container" style="max-height: 300px;"><table><thead><tr>`;
-
-    // Define columns based on type
-    const columns = {
-        'materials': ['MATERIALPARTNAME', 'MATERIALLOTNAME', 'QTYCONSUMED', 'WORKCENTERNAME', 'EQUIPMENTNAME', 'TXNDATE'],
-        'rejects': ['REJECTCATEGORYNAME', 'LOSSREASONNAME', 'REJECTQTY', 'WORKCENTERNAME', 'EQUIPMENTNAME', 'TXNDATE'],
-        'holds': ['WORKCENTERNAME', 'HOLDREASONNAME', 'HOLDTXNDATE', 'HOLD_STATUS', 'HOLD_HOURS', 'HOLDEMP', 'RELEASETXNDATE'],
-    };
-
-    const colLabels = {
-        'MATERIALPARTNAME': '物料名稱',
-        'MATERIALLOTNAME': '物料批號',
-        'QTYCONSUMED': '消耗數量',
-        'WORKCENTERNAME': '站點',
-        'EQUIPMENTNAME': '設備',
-        'TXNDATE': '時間',
-        'REJECTCATEGORYNAME': '不良分類',
-        'LOSSREASONNAME': '損失原因',
-        'REJECTQTY': '不良數量',
-        'HOLDREASONNAME': 'HOLD 原因',
-        'HOLDTXNDATE': 'HOLD 時間',
-        'HOLD_STATUS': '狀態',
-        'HOLD_HOURS': 'HOLD 時數',
-        'HOLDEMP': 'HOLD 人員',
-        'RELEASETXNDATE': 'RELEASE 時間',
-    };
-
-    const cols = columns[type] || Object.keys(data[0]);
-    cols.forEach(col => {
-        html += `<th>${colLabels[col] || col}</th>`;
-    });
-    html += `</tr></thead><tbody>`;
-
-    data.forEach(row => {
-        html += `<tr>`;
-        cols.forEach(col => {
-            let value = row[col];
-            if (col.includes('DATE') || col.includes('TIMESTAMP')) {
-                value = formatDateTime(value);
-            }
-            if (col === 'HOLD_STATUS') {
-                value = value === 'HOLD'
-                    ? `<span class="badge badge-warning">HOLD 中</span>`
-                    : `<span class="badge badge-success">已解除</span>`;
-            }
-            html += `<td>${value !== null && value !== undefined ? value : ''}</td>`;
-        });
-        html += `</tr>`;
-    });
-
-    html += `</tbody></table></div>`;
-    content.innerHTML = html;
-}
-
-function renderSplitsAssociation(data) {
-    const content = document.getElementById('assocContent');
-
-    // Handle new format: {production_history: [], serial_numbers: [], skip/timeout info, ...}
-    const productionHistory = data.production_history || [];
-    const serialNumbers = data.serial_numbers || [];
-    const productionHistorySkipped = data.production_history_skipped || false;
-    const skipReason = data.production_history_skip_reason || '';
-    const productionHistoryTimeout = data.production_history_timeout || false;
-    const timeoutMessage = data.production_history_timeout_message || '';
-    const hasProductionHistory = productionHistory.length > 0;
-    const hasSerialNumbers = serialNumbers.length > 0;
-
-    if (!hasProductionHistory && !hasSerialNumbers && !productionHistoryTimeout) {
-        let emptyHtml = '';
-        if (productionHistorySkipped && skipReason) {
-            emptyHtml += `
-                <div style="margin-bottom: 16px; padding: 12px 16px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; font-size: 13px; color: #856404;">
-                    <strong>注意：</strong>${skipReason}
-                </div>
-            `;
-        }
-        emptyHtml += '<div class="text-center text-muted py-4">無拆併批紀錄</div>';
-        content.innerHTML = emptyHtml;
-        return;
-    }
-
-    let html = '';
-
-    // Show notice if production history query was skipped
-    if (productionHistorySkipped && skipReason) {
-        html += `
-            <div style="margin-bottom: 16px; padding: 12px 16px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; font-size: 13px; color: #856404;">
-                <strong>注意：</strong>${skipReason}
-            </div>
-        `;
-    }
-
-    // Show warning if production history query timed out
-    if (productionHistoryTimeout) {
-        html += `
-            <div style="margin-bottom: 16px; padding: 12px 16px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 6px; font-size: 13px; color: #721c24;">
-                <strong>⚠ 查詢逾時：</strong>${timeoutMessage || '生產拆併批歷史查詢超時。此表格（DW_MES_HM_LOTMOVEOUT）目前無索引，查詢需較長時間。僅顯示 TMTT 成品流水號對應資料。'}
-            </div>
-        `;
-    }
-
-    // Production history section (if any)
-    if (hasProductionHistory) {
-        html += `
-            <div style="margin-bottom: 24px;">
-                <div style="font-weight: 600; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; justify-content: space-between;">
-                    <div>
-                        生產過程拆併批紀錄 <span style="font-size: 12px; color: #666; font-weight: normal;">(${productionHistory.length} 筆)</span>
-                    </div>
-                    <button class="btn btn-success btn-sm" onclick="exportProductionHistory('single')">匯出 CSV</button>
-                </div>
-                <div class="table-container" style="max-height: 250px; overflow: auto;">
-                    <table style="min-width: 100%; font-size: 13px;">
-                        <thead>
-                            <tr>
-                                <th style="min-width: 70px;">操作</th>
-                                <th style="min-width: 100px;">來源批次</th>
-                                <th style="min-width: 100px;">目標批次</th>
-                                <th style="min-width: 60px;">數量</th>
-                                <th style="min-width: 130px;">時間</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-        `;
-
-        productionHistory.forEach(record => {
-            const opBadgeClass = record.operation_type === 'SplitLot' ? 'badge-info' : 'badge-warning';
-            html += `
-                <tr>
-                    <td><span class="badge ${opBadgeClass}">${record.operation_type_display}</span></td>
-                    <td>${record.source_lot || '-'}</td>
-                    <td>${record.target_lot || '-'}</td>
-                    <td>${record.target_qty || '-'}</td>
-                    <td>${formatDateTime(record.txn_date)}</td>
-                </tr>
-            `;
-        });
-
-        html += `</tbody></table></div></div>`;
-    }
-
-    // Serial numbers section
-    if (!hasSerialNumbers) {
-        if (hasProductionHistory) {
-            html += '<div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 6px; text-align: center; color: #666;">此 LOT 尚未產出成品流水號</div>';
-        }
-        content.innerHTML = html;
-        return;
-    }
-
-    html += `
-        <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
-            <div style="color: #666; font-size: 13px;">
-                此 LOT 參與產出 <strong>${serialNumbers.length}</strong> 個成品流水號，以下顯示各成品的來源批次組成
-            </div>
-            <button class="btn btn-success btn-sm" onclick="exportSerialNumbers('single')">匯出 CSV</button>
-        </div>
-    `;
-
-    serialNumbers.forEach((item, idx) => {
-        const lots = item.lots || [];
-        const totalGoodDie = item.total_good_die || 0;
-        const isCombined = lots.length > 1;
-
-        html += `
-            <div style="margin-bottom: 20px; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);">
-                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;">
-                    <span style="font-weight: 600; font-size: 15px;">
-                        成品流水號: ${item.serial_number || '-'}
-                    </span>
-                    <span style="font-size: 12px; opacity: 0.9;">
-                        ${isCombined ? `${lots.length} 批合併` : '單批產出'} |
-                        良品總數: ${totalGoodDie.toLocaleString()}
-                    </span>
-                </div>
-                <div style="padding: 0; overflow-x: auto;">
-                    <table style="min-width: 100%; margin: 0; border-collapse: collapse;">
-                        <thead>
-                            <tr style="background: #f8f9fa;">
-                                <th style="width: 50px; padding: 10px 12px; text-align: center; border-bottom: 2px solid #dee2e6;">序</th>
-                                <th style="padding: 10px 12px; text-align: left; border-bottom: 2px solid #dee2e6; min-width: 180px;">LOT ID</th>
-                                <th style="padding: 10px 12px; text-align: left; border-bottom: 2px solid #dee2e6; min-width: 120px;">工單</th>
-                                <th style="padding: 10px 12px; text-align: right; border-bottom: 2px solid #dee2e6; width: 100px;">貢獻比例</th>
-                                <th style="padding: 10px 12px; text-align: right; border-bottom: 2px solid #dee2e6; width: 120px;">良品數</th>
-                                <th style="padding: 10px 12px; text-align: left; border-bottom: 2px solid #dee2e6; min-width: 160px;">開始時間</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-        `;
-
-        lots.forEach((lot, lotIdx) => {
-            const isCurrent = lot.is_current;
-            const rowStyle = isCurrent
-                ? 'background: #fff3cd; border-left: 4px solid #ffc107;'
-                : 'border-left: 4px solid transparent;';
-            const ratioValue = lot.combine_ratio || 0;
-            const ratioBarWidth = Math.min(ratioValue * 100, 100);
-
-            html += `
-                <tr style="${rowStyle}">
-                    <td style="padding: 10px 12px; text-align: center; border-bottom: 1px solid #eee;">${lotIdx + 1}</td>
-                    <td style="padding: 10px 12px; border-bottom: 1px solid #eee;">
-                        <div style="font-weight: 500;">${lot.lot_id || '-'}</div>
-                        ${isCurrent ? '<span style="display: inline-block; margin-top: 2px; padding: 2px 6px; background: #856404; color: white; font-size: 10px; border-radius: 3px;">當前查詢批次</span>' : ''}
-                    </td>
-                    <td style="padding: 10px 12px; border-bottom: 1px solid #eee; color: #666;">${lot.work_order || '-'}</td>
-                    <td style="padding: 10px 12px; text-align: right; border-bottom: 1px solid #eee;">
-                        <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px;">
-                            <div style="width: 60px; height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden;">
-                                <div style="width: ${ratioBarWidth}%; height: 100%; background: ${ratioValue >= 1 ? '#28a745' : '#17a2b8'}; border-radius: 3px;"></div>
-                            </div>
-                            <span style="font-weight: 500; min-width: 45px;">${lot.combine_ratio_pct || '-'}</span>
-                        </div>
-                    </td>
-                    <td style="padding: 10px 12px; text-align: right; border-bottom: 1px solid #eee; font-family: monospace;">
-                        ${lot.good_die_qty ? lot.good_die_qty.toLocaleString() : '-'}
-                    </td>
-                    <td style="padding: 10px 12px; border-bottom: 1px solid #eee; color: #666; font-size: 13px;">
-                        ${formatDateTime(lot.original_start_date)}
-                    </td>
-                </tr>
-            `;
-        });
-
-        html += `
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        `;
-    });
-
-    content.innerHTML = html;
-}
-
-function getAssocLabel(type) {
-    const labels = {
-        'materials': '物料消耗',
-        'rejects': '不良紀錄',
-        'holds': 'HOLD 紀錄',
-        'splits': '拆併批紀錄',
-        'jobs': 'JOB 紀錄'
-    };
-    return labels[type] || type;
-}
-
-// ============================================================
-// Timeline Functions
-// ============================================================
-
-function toggleLotForTimeline(index, checked) {
-    // Delegate to the selector function
-    toggleLotInSelector(index, checked);
-}
-
-function toggleAllLotsForTimeline(checked) {
-    // This function is now handled by toggleAllLotsInSelector
-    toggleAllLotsInSelector(checked);
-}
-
-function updateTimelineButton() {
-    const btn = document.getElementById('timelineBtn');
-    const count = QueryToolState.timelineSelectedLots.size;
-    if (btn) {
-        btn.disabled = count === 0;
-        btn.textContent = count > 0 ? `顯示時間線 (${count})` : '顯示時間線';
-    }
-}
-
-async function showTimeline() {
-    const selectedIndices = Array.from(QueryToolState.timelineSelectedLots);
-    if (selectedIndices.length === 0) {
-        Toast.warning('請先勾選要顯示時間線的批次');
-        return;
-    }
-
-    const container = document.getElementById('timelineContainer');
-    const content = document.getElementById('timelineContent');
-    const countSpan = document.getElementById('timelineCount');
-
-    container.style.display = 'block';
-    countSpan.textContent = `(${selectedIndices.length} 個批次)`;
-    content.innerHTML = '<div class="loading"><div class="loading-spinner"></div><br>載入時間線資料...</div>';
-
-    // Scroll to timeline
-    container.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-    // Load history for all selected lots
-    const lotsToLoad = [];
-    for (const idx of selectedIndices) {
-        const lot = QueryToolState.resolvedLots[idx];
-        if (!QueryToolState.lotHistories[lot.container_id]) {
-            lotsToLoad.push({ idx, lot });
-        }
-    }
-
-    // Load missing histories
-    try {
-        await Promise.all(lotsToLoad.map(async ({ idx, lot }) => {
-            const result = await MesApi.get('/api/query-tool/lot-history', {
-                params: { container_id: lot.container_id }
-            });
-            if (!result.error) {
-                QueryToolState.lotHistories[lot.container_id] = result.data || [];
-            }
-        }));
-
-        renderTimeline(selectedIndices);
-    } catch (error) {
-        content.innerHTML = `<div class="error">載入失敗: ${error.message}</div>`;
-    }
-}
-
-function hideTimeline() {
-    document.getElementById('timelineContainer').style.display = 'none';
-}
-
-function renderTimeline(selectedIndices) {
-    const content = document.getElementById('timelineContent');
-
-    // Collect all history data and find time bounds
-    const lotsData = [];
-    let minTime = Infinity;
-    let maxTime = -Infinity;
-
-    // Station color map
-    const stationColors = {};
-    const colorPalette = [
-        '#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
-        '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
-        '#86bcb6', '#8cd17d', '#499894', '#d37295', '#b6992d'
-    ];
-    let colorIndex = 0;
-
-    for (const idx of selectedIndices) {
-        const lot = QueryToolState.resolvedLots[idx];
-        const history = QueryToolState.lotHistories[lot.container_id] || [];
-
-        const steps = history.map((step, stepIdx) => {
-            // Parse track-in time with better handling
-            const trackInRaw = step.TRACKINTIMESTAMP;
-            let trackIn = 0;
-            if (trackInRaw) {
-                // Try parsing - handle both ISO and Oracle formats
-                const parsed = new Date(trackInRaw);
-                if (!isNaN(parsed.getTime())) {
-                    trackIn = parsed.getTime();
-                }
-            }
-
-            // Check if TRACKOUTTIMESTAMP is a valid value (not null, not empty string, not "None")
-            const trackOutRaw = step.TRACKOUTTIMESTAMP;
-            const hasValidTrackOut = trackOutRaw &&
-                trackOutRaw !== '' &&
-                trackOutRaw !== 'None' &&
-                trackOutRaw !== 'null' &&
-                !isNaN(new Date(trackOutRaw).getTime());
-
-            // For ongoing steps (no track-out), use track-in + 1 hour as placeholder
-            // This prevents using Date.now() which can skew the timeline range
-            const trackOut = hasValidTrackOut
-                ? new Date(trackOutRaw).getTime()
-                : (trackIn > 0 ? trackIn + 3600000 : 0);  // trackIn + 1 hour for ongoing
-            const isOngoing = !hasValidTrackOut;
-
-            // Only process steps with valid trackIn (skip pre-scheduled steps)
-            if (trackIn > 0) {
-                if (trackIn < minTime) minTime = trackIn;
-                // For maxTime, use trackOut if valid, otherwise use trackIn
-                const effectiveMax = hasValidTrackOut ? trackOut : trackIn;
-                if (effectiveMax > maxTime) maxTime = effectiveMax;
-            }
-
-            // Assign color to station
-            const station = step.WORKCENTERNAME || 'Unknown';
-            if (!stationColors[station]) {
-                stationColors[station] = colorPalette[colorIndex % colorPalette.length];
-                colorIndex++;
-            }
-
-            return {
-                station,
-                equipment: step.EQUIPMENTNAME || '',
-                spec: step.SPECNAME || '',
-                trackIn,
-                trackOut,
-                color: stationColors[station],
-                isOngoing
-            };
-        });
-
-        lotsData.push({
-            lotId: lot.lot_id || lot.input_value,
-            containerId: lot.container_id,
-            steps
-        });
-    }
-
-    if (lotsData.length === 0 || minTime === Infinity) {
-        content.innerHTML = '<div class="empty-state"><p>無生產歷程資料可顯示</p></div>';
-        return;
-    }
-
-    // Add padding to time range
-    const timeRange = maxTime - minTime;
-    const padding = timeRange * 0.02;
-    minTime -= padding;
-    maxTime += padding;
-
-    // Store timeline data for filtering and popup
-    const allStations = Object.keys(stationColors);
-    window._timelineData = {
-        lotsData,
-        minTime,
-        maxTime,
-        stationColors,
-        allStations,
-        selectedStations: new Set(allStations),  // All selected by default
-        pixelsPerHour: 50
-    };
-
-    // Render compact preview with click to open popup
-    let html = `
-        <div style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
-            <div style="font-size: 12px; color: #666; margin-bottom: 8px;">站點篩選 (點擊切換顯示)</div>
-            <div id="stationFilterLegend" style="display: flex; flex-wrap: wrap; gap: 6px;">
-                ${allStations.map(station => `
-                    <span class="station-filter-item active" data-station="${station}" onclick="toggleStationFilter('${station}')"
-                          style="background: ${stationColors[station]}; color: white; padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: opacity 0.2s;">
-                        ${station}
-                    </span>
-                `).join('')}
-            </div>
-            <div style="margin-top: 10px; display: flex; gap: 8px;">
-                <button class="btn btn-secondary btn-sm" onclick="selectAllStations()">全選</button>
-                <button class="btn btn-secondary btn-sm" onclick="deselectAllStations()">全不選</button>
-            </div>
-        </div>
-
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-            <div style="font-weight: 600;">時間線預覽</div>
-            <span style="font-size: 12px; color: #888;">點擊開啟完整視窗</span>
-        </div>
-
-        <div id="timelinePreview" onclick="openTimelinePopup()" style="cursor: pointer; padding: 15px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; transition: box-shadow 0.2s;" onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow='none'">
-            ${renderTimelinePreview(lotsData, minTime, maxTime, stationColors)}
-        </div>
-
-        <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #888;">
-            支援縮放和橫向捲動
-        </div>
-    `;
-
-    content.innerHTML = html;
-}
-
-function renderTimelinePreview(lotsData, minTime, maxTime, stationColors) {
-    const MS_PER_HOUR = 3600000;
-    const PREVIEW_WIDTH = 600;  // Fixed preview width
-    const timeRange = maxTime - minTime;
-    const selectedStations = window._timelineData?.selectedStations || new Set(Object.keys(stationColors));
-
-    let html = '<div style="position: relative;">';
-
-    lotsData.forEach((lotData, lotIdx) => {
-        html += `
-            <div style="display: flex; align-items: center; margin-bottom: 6px; height: 24px;">
-                <div style="width: 140px; flex-shrink: 0; font-family: monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666;" title="${lotData.lotId}">
-                    ${lotData.lotId}
-                </div>
-                <div style="flex: 1; position: relative; height: 18px; background: #e9ecef; border-radius: 3px;">
-        `;
-
-        lotData.steps.forEach((step) => {
-            if (!step.trackIn || step.trackIn <= 0) return;
-            if (!selectedStations.has(step.station)) return;
-
-            const left = ((step.trackIn - minTime) / timeRange) * 100;
-            const width = Math.max(((step.trackOut - step.trackIn) / timeRange) * 100, 0.5);
-
-            html += `
-                <div style="position: absolute; left: ${left}%; width: ${width}%; height: 100%; background: ${step.color}; border-radius: 2px; ${step.isOngoing ? 'opacity: 0.6;' : ''}"
-                     title="${step.station} - ${step.equipment || ''}"></div>
-            `;
-        });
-
-        html += `
-                </div>
-            </div>
-        `;
-    });
-
-    html += '</div>';
-    return html;
-}
-
-function toggleStationFilter(station) {
-    const data = window._timelineData;
-    if (!data) return;
-
-    if (data.selectedStations.has(station)) {
-        data.selectedStations.delete(station);
-    } else {
-        data.selectedStations.add(station);
-    }
-
-    // Update UI
-    const item = document.querySelector(`.station-filter-item[data-station="${station}"]`);
-    if (item) {
-        item.classList.toggle('active', data.selectedStations.has(station));
-        item.style.opacity = data.selectedStations.has(station) ? '1' : '0.4';
-    }
-
-    // Re-render preview
-    const preview = document.getElementById('timelinePreview');
-    if (preview) {
-        preview.innerHTML = renderTimelinePreview(data.lotsData, data.minTime, data.maxTime, data.stationColors);
-    }
-}
-
-function selectAllStations() {
-    const data = window._timelineData;
-    if (!data) return;
-
-    data.selectedStations = new Set(data.allStations);
-    document.querySelectorAll('.station-filter-item').forEach(item => {
-        item.classList.add('active');
-        item.style.opacity = '1';
-    });
-
-    const preview = document.getElementById('timelinePreview');
-    if (preview) {
-        preview.innerHTML = renderTimelinePreview(data.lotsData, data.minTime, data.maxTime, data.stationColors);
-    }
-}
-
-function deselectAllStations() {
-    const data = window._timelineData;
-    if (!data) return;
-
-    data.selectedStations = new Set();
-    document.querySelectorAll('.station-filter-item').forEach(item => {
-        item.classList.remove('active');
-        item.style.opacity = '0.4';
-    });
-
-    const preview = document.getElementById('timelinePreview');
-    if (preview) {
-        preview.innerHTML = renderTimelinePreview(data.lotsData, data.minTime, data.maxTime, data.stationColors);
-    }
-}
-
-function openTimelinePopup() {
-    const data = window._timelineData;
-    if (!data) return;
-
-    // Create popup overlay
-    const popup = document.createElement('div');
-    popup.id = 'timelinePopup';
-    popup.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000;';
-
-    const popupContent = document.createElement('div');
-    popupContent.style.cssText = 'background: white; border-radius: 12px; width: 95%; max-width: 1400px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3);';
-
-    popupContent.innerHTML = `
-        <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #e0e0e0;">
-            <div style="font-size: 18px; font-weight: 600; color: #333;">
-                生產時間線
-            </div>
-            <div style="display: flex; align-items: center; gap: 20px;">
-                <div style="display: flex; align-items: center; gap: 10px;">
-                    <label style="font-size: 13px; color: #666;">時間比例</label>
-                    <input type="range" id="timelineScaleSlider" min="10" max="200" value="${data.pixelsPerHour}"
-                           oninput="updateTimelineScale(this.value)" style="width: 120px;">
-                    <span id="scaleValue" style="font-size: 13px; color: #666; min-width: 60px;">${data.pixelsPerHour}px/h</span>
-                </div>
-                <button onclick="closeTimelinePopup()" style="background: none; border: none; font-size: 28px; cursor: pointer; color: #999; line-height: 1;">&times;</button>
-            </div>
-        </div>
-        <div id="popupTimelineContent" style="flex: 1; overflow: auto; padding: 20px 25px;"></div>
-    `;
-
-    popup.appendChild(popupContent);
-    document.body.appendChild(popup);
-
-    // Close on backdrop click
-    popup.addEventListener('click', (e) => {
-        if (e.target === popup) closeTimelinePopup();
-    });
-
-    // Close on Escape key
-    document.addEventListener('keydown', function escHandler(e) {
-        if (e.key === 'Escape') {
-            closeTimelinePopup();
-            document.removeEventListener('keydown', escHandler);
-        }
-    });
-
-    // Render full timeline
-    renderFullTimeline(data.pixelsPerHour);
-}
-
-function closeTimelinePopup() {
-    const popup = document.getElementById('timelinePopup');
-    if (popup) {
-        // Clear the popup's inner HTML first to help garbage collection
-        const content = popup.querySelector('#popupTimelineContent');
-        if (content) content.innerHTML = '';
-        popup.remove();
-    }
-}
-
-function updateTimelineScale(value) {
-    const data = window._timelineData;
-    if (!data) return;
-
-    data.pixelsPerHour = parseInt(value);
-    document.getElementById('scaleValue').textContent = value + 'px/h';
-
-    renderFullTimeline(data.pixelsPerHour);
-}
-
-function renderFullTimeline(pixelsPerHour) {
-    const data = window._timelineData;
-    if (!data) return;
-
-    const container = document.getElementById('popupTimelineContent');
-    if (!container) return;
-
-    const { lotsData, minTime, maxTime, stationColors, selectedStations } = data;
-    const MS_PER_HOUR = 3600000;
-    const totalHours = (maxTime - minTime) / MS_PER_HOUR;
-    const timelineWidth = Math.max(800, totalHours * pixelsPerHour);
-
-    let html = `
-        <div style="overflow-x: auto;">
-            <div style="width: ${timelineWidth + 180}px; min-width: 100%;">
-                ${renderTimelineAxisFixed(minTime, maxTime, pixelsPerHour)}
-                <div style="position: relative;">
-    `;
-
-    lotsData.forEach((lotData) => {
-        html += `
-            <div style="display: flex; align-items: stretch; margin-bottom: 12px;">
-                <div style="width: 180px; flex-shrink: 0; padding-right: 15px; padding-top: 10px; font-family: monospace; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: sticky; left: 0; background: white; z-index: 5; color: #333;" title="${lotData.lotId}">
-                    ${lotData.lotId}
-                </div>
-                <div style="width: ${timelineWidth}px; position: relative; min-height: 50px; background: #f8f9fa; border-radius: 4px;">
-        `;
-
-        lotData.steps.forEach((step, stepIdx) => {
-            if (!step.trackIn || step.trackIn <= 0) return;
-            if (!selectedStations.has(step.station)) return;
-
-            const leftPx = ((step.trackIn - minTime) / MS_PER_HOUR) * pixelsPerHour;
-            const durationHours = (step.trackOut - step.trackIn) / MS_PER_HOUR;
-            const widthPx = Math.max(durationHours * pixelsPerHour, 40);
-
-            const equipmentLabel = step.equipment || '';
-            const durationStr = durationHours >= 1
-                ? `${Math.floor(durationHours)}h ${Math.round((durationHours % 1) * 60)}m`
-                : `${Math.round(durationHours * 60)}m`;
-            const timeRangeStr = step.isOngoing ? '進行中' : formatDateTime(new Date(step.trackOut));
-            const tooltipLines = [
-                `${step.station} - ${equipmentLabel}`,
-                `${formatDateTime(new Date(step.trackIn))} ~ ${timeRangeStr}`,
-                `耗時: ${durationStr}`,
-                `規格: ${step.spec}`
-            ];
-
-            html += `
-                <div class="timeline-bar"
-                     style="position: absolute; left: ${leftPx}px; width: ${widthPx}px; height: 100%; background: ${step.color}; border-radius: 4px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 3px 6px; box-sizing: border-box; ${step.isOngoing ? 'background: repeating-linear-gradient(45deg, ' + step.color + ', ' + step.color + ' 5px, ' + step.color + '99 5px, ' + step.color + '99 10px);' : ''}"
-                     title="${tooltipLines.join('&#10;')}"
-                     onclick="showTimelineDetail('${lotData.containerId}', ${stepIdx}); closeTimelinePopup();">
-                    <span style="font-size: 12px; color: white; text-shadow: 0 0 2px rgba(0,0,0,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; font-weight: 500;">${equipmentLabel}</span>
-                    <span style="font-size: 11px; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">${step.station}</span>
-                </div>
-            `;
-        });
-
-        html += `
-                </div>
-            </div>
-        `;
-    });
-
-    html += `
-                </div>
-            </div>
-        </div>
-    `;
-
-    container.innerHTML = html;
-}
-
-function setTimelineScale(pixelsPerHour) {
-    const data = window._timelineData;
-    if (!data) return;
-
-    // Update button states
-    ['scale25', 'scale50', 'scale100', 'scale200'].forEach(id => {
-        const btn = document.getElementById(id);
-        if (btn) {
-            btn.classList.toggle('active', id === `scale${pixelsPerHour}`);
-        }
-    });
-
-    const MS_PER_HOUR = 3600000;
-    const { minTime, maxTime } = data;
-
-    // Recalculate timeline width
-    const totalHours = (maxTime - minTime) / MS_PER_HOUR;
-    const timelineWidth = Math.max(800, totalHours * pixelsPerHour);
-
-    // Update container width
-    const inner = document.getElementById('timelineInner');
-    if (inner) {
-        inner.style.width = timelineWidth + 'px';
-
-        // Update all bar widths (relative part)
-        const barContainers = inner.querySelectorAll('.timeline-bar').forEach(bar => {
-            const durationHours = parseFloat(bar.dataset.durationHours) || 0;
-            const leftHours = (parseFloat(bar.style.left) / (data.pixelsPerHour || 50));
-            const newLeft = leftHours * pixelsPerHour;
-            const newWidth = Math.max(durationHours * pixelsPerHour, 30);
-
-            bar.style.left = newLeft + 'px';
-            bar.style.width = newWidth + 'px';
-        });
-
-        // Update time axis
-        const axisContainer = inner.querySelector('.timeline-axis-container');
-        if (axisContainer) {
-            axisContainer.outerHTML = renderTimelineAxisFixed(minTime, maxTime, pixelsPerHour);
-        }
-
-        // Update lot row widths
-        inner.querySelectorAll('.timeline-bar').forEach(bar => {
-            const parent = bar.parentElement;
-            if (parent) {
-                parent.style.width = (timelineWidth - 180) + 'px';
-            }
-        });
-    }
-
-    // Update stored pixelsPerHour
-    data.pixelsPerHour = pixelsPerHour;
-}
-
-function renderTimelineAxisFixed(minTime, maxTime, pixelsPerHour) {
-    const MS_PER_HOUR = 3600000;
-    const totalHours = (maxTime - minTime) / MS_PER_HOUR;
-    const timelineWidth = totalHours * pixelsPerHour;
-
-    // Generate tick marks - one per day or per 6 hours depending on scale
-    const tickIntervalHours = pixelsPerHour >= 100 ? 6 : (pixelsPerHour >= 50 ? 12 : 24);
-    const ticks = [];
-
-    // Start from the first hour mark after minTime
-    const startDate = new Date(minTime);
-    startDate.setMinutes(0, 0, 0);
-    let tickTime = startDate.getTime();
-    if (tickTime < minTime) tickTime += MS_PER_HOUR;
-
-    // Align to tick interval
-    const tickHour = new Date(tickTime).getHours();
-    const alignOffset = tickHour % tickIntervalHours;
-    if (alignOffset > 0) {
-        tickTime += (tickIntervalHours - alignOffset) * MS_PER_HOUR;
-    }
-
-    while (tickTime <= maxTime) {
-        const date = new Date(tickTime);
-        const pos = ((tickTime - minTime) / MS_PER_HOUR) * pixelsPerHour;
-        const label = `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:00`;
-        ticks.push({ pos, label, isDay: date.getHours() === 0 });
-        tickTime += tickIntervalHours * MS_PER_HOUR;
-    }
-
-    return `
-        <div class="timeline-axis-container" style="position: relative; margin-left: 180px; height: 25px; border-bottom: 1px solid #e0e0e0; margin-bottom: 10px;">
-            ${ticks.map(t => `
-                <div style="position: absolute; left: ${t.pos}px; transform: translateX(-50%);">
-                    <div style="font-family: monospace; font-size: 10px; color: ${t.isDay ? '#4e54c8' : '#888'}; font-weight: ${t.isDay ? '600' : '400'}; white-space: nowrap;">${t.label}</div>
-                    <div style="position: absolute; left: 50%; width: 1px; height: 8px; background: ${t.isDay ? '#4e54c8' : '#ddd'}; top: 17px;"></div>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-function showTimelineDetail(containerId, stepIndex) {
-    // Find the lot and show its detail
-    const lotIndex = QueryToolState.resolvedLots.findIndex(l => l.container_id === containerId);
-    if (lotIndex >= 0) {
-        selectLot(lotIndex);
-        // Scroll to the history row
-        setTimeout(() => {
-            const row = document.getElementById(`history-row-${stepIndex}`);
-            if (row) {
-                row.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                row.style.background = '#fff3cd';
-                setTimeout(() => { row.style.background = ''; }, 2000);
-            }
-        }, 300);
-    }
-}
-
-async function showAdjacentLots(equipmentId, equipmentName, targetTime) {
-    // Open modal or expand section to show adjacent lots
-    const modal = document.createElement('div');
-    modal.className = 'modal-overlay';
-    modal.innerHTML = `
-        <div class="modal-content" style="width: 900px; max-width: 95%; max-height: 80vh; overflow-y: auto;">
-            <div class="modal-header">
-                <h3>前後批查詢</h3>
-                <button class="modal-close" onclick="this.closest('.modal-overlay').remove()">×</button>
-            </div>
-            <div class="modal-body">
-                <div class="info-box" style="margin-bottom: 15px;">
-                    設備: ${equipmentName} | 基準時間: ${formatDateTime(targetTime)}
-                </div>
-                <div id="adjacentLotsContent">
-                    <div class="loading"><div class="loading-spinner"></div></div>
-                </div>
-            </div>
-        </div>
-    `;
-
-    // Add modal styles if not exists
-    if (!document.getElementById('modal-styles')) {
-        const style = document.createElement('style');
-        style.id = 'modal-styles';
-        style.textContent = `
-            .modal-overlay {
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0,0,0,0.5);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                z-index: 10000;
-            }
-            .modal-content {
-                background: white;
-                border-radius: 8px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-            }
-            .modal-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 20px;
-                border-bottom: 1px solid #e0e0e0;
-            }
-            .modal-header h3 {
-                margin: 0;
-                font-size: 18px;
-            }
-            .modal-close {
-                background: none;
-                border: none;
-                font-size: 24px;
-                cursor: pointer;
-                color: #666;
-            }
-            .modal-close:hover {
-                color: #333;
-            }
-            .modal-body {
-                padding: 20px;
-            }
-        `;
-        document.head.appendChild(style);
-    }
-
-    document.body.appendChild(modal);
-
-    // Load adjacent lots
-    try {
-        const result = await MesApi.get('/api/query-tool/adjacent-lots', {
-            params: {
-                equipment_id: equipmentId,
-                target_time: targetTime,
-                time_window: 24
-            }
-        });
-
-        const content = document.getElementById('adjacentLotsContent');
-
-        if (result.error) {
-            content.innerHTML = `<div class="error">${result.error}</div>`;
-            return;
-        }
-
-        if (!result.data || result.data.length === 0) {
-            content.innerHTML = `<div class="empty-state"><p>無前後批資料</p></div>`;
-            return;
-        }
-
-        let html = `
-            <div class="table-container">
-                <table>
-                    <thead>
-                        <tr>
-                            <th>相對位置</th>
-                            <th>LOT ID</th>
-                            <th>產品類型</th>
-                            <th>BOP</th>
-                            <th>Wafer Lot</th>
-                            <th>工單</th>
-                            <th>批次號</th>
-                            <th>上機時間</th>
-                            <th>下機時間</th>
-                            <th>上機數</th>
-                            <th>下機數</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-        `;
-
-        result.data.forEach(lot => {
-            const pos = lot.RELATIVE_POSITION;
-            const posLabel = pos === 0 ? '目標批次' : (pos > 0 ? `+${pos}` : pos);
-            const rowClass = pos === 0 ? 'style="background: #fff3cd;"' : '';
-
-            html += `
-                <tr ${rowClass}>
-                    <td><strong>${posLabel}</strong></td>
-                    <td>${lot.CONTAINERNAME || '-'}</td>
-                    <td>${lot.PJ_TYPE || '-'}</td>
-                    <td>${lot.PJ_BOP || '-'}</td>
-                    <td>${lot.WAFER_LOT_ID || '-'}</td>
-                    <td>${lot.PJ_WORKORDER || '-'}</td>
-                    <td>${lot.FINISHEDRUNCARD || ''}</td>
-                    <td>${formatDateTime(lot.TRACKINTIMESTAMP)}</td>
-                    <td>${formatDateTime(lot.TRACKOUTTIMESTAMP)}</td>
-                    <td>${lot.TRACKINQTY || ''}</td>
-                    <td>${lot.TRACKOUTQTY || ''}</td>
-                </tr>
-            `;
-        });
-
-        html += `</tbody></table></div>`;
-        content.innerHTML = html;
-
-    } catch (error) {
-        document.getElementById('adjacentLotsContent').innerHTML = `<div class="error">查詢失敗: ${error.message}</div>`;
-    }
-}
-
-// ============================================================
-// Workcenter Group Filter Functions
-// ============================================================
-
-async function loadWorkcenterGroups() {
-    try {
-        const result = await MesApi.get('/api/query-tool/workcenter-groups', {
-            silent: true
-        });
-        if (result.error) {
-            console.error('Failed to load workcenter groups:', result.error);
-            return;
-        }
-
-        QueryToolState.workcenterGroups = result.data || [];
-        console.log(`[QueryTool] Loaded ${QueryToolState.workcenterGroups.length} workcenter groups`);
-    } catch (error) {
-        console.error('Error loading workcenter groups:', error);
-    }
-}
-
-function renderWorkcenterGroupSelector() {
-    const container = document.getElementById('workcenterGroupSelector');
-    if (!container) return;
-
-    const groups = QueryToolState.workcenterGroups;
-    const selected = QueryToolState.selectedWorkcenterGroups;
-    const count = selected.size;
-
-    let html = `
-        <div class="wc-group-selector">
-            <button type="button" class="wc-group-btn" onclick="toggleWorkcenterGroupDropdown()">
-                <span id="wcGroupDisplay">${count === 0 ? '全部站點' : `${count} 個站點群組`}</span>
-                <span class="wc-group-badge" id="wcGroupBadge" style="display: ${count > 0 ? 'inline-block' : 'none'};">${count}</span>
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="margin-left: auto;">
-                    <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-            </button>
-            <div class="wc-group-dropdown" id="wcGroupDropdown">
-                <div class="wc-group-header">
-                    <label style="cursor: pointer; display: flex; align-items: center; gap: 6px;">
-                        <input type="checkbox" id="wcGroupSelectAll" onchange="toggleAllWorkcenterGroups(this.checked)"
-                               ${selected.size === groups.length && groups.length > 0 ? 'checked' : ''}>
-                        全選
-                    </label>
-                    <span id="wcGroupSelectedCount">已選 ${count}</span>
-                </div>
-                <div class="wc-group-search">
-                    <input type="text" placeholder="搜尋站點群組..." oninput="filterWorkcenterGroups(this.value)">
-                </div>
-                <div class="wc-group-list" id="wcGroupList">
-    `;
-
-    groups.forEach(group => {
-        const isSelected = selected.has(group.name);
-        html += `
-            <div class="wc-group-item ${isSelected ? 'selected' : ''}" data-group="${group.name}">
-                <label onclick="event.stopPropagation();">
-                    <input type="checkbox" ${isSelected ? 'checked' : ''}
-                           onchange="toggleWorkcenterGroup('${group.name}', this.checked)">
-                    ${group.name}
-                </label>
-            </div>
-        `;
-    });
-
-    html += `
-                </div>
-                <div class="wc-group-footer">
-                    <button type="button" class="btn btn-sm btn-secondary" onclick="clearWorkcenterGroups()">清除</button>
-                    <button type="button" class="btn btn-sm btn-primary" onclick="applyWorkcenterFilter()">套用篩選</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    container.innerHTML = html;
-}
-
-function toggleWorkcenterGroup(groupName, checked) {
-    if (checked) {
-        QueryToolState.selectedWorkcenterGroups.add(groupName);
-    } else {
-        QueryToolState.selectedWorkcenterGroups.delete(groupName);
-    }
-    updateWorkcenterGroupUI();
-}
-
-function toggleAllWorkcenterGroups(checked) {
-    if (checked) {
-        QueryToolState.workcenterGroups.forEach(g => {
-            QueryToolState.selectedWorkcenterGroups.add(g.name);
-        });
-    } else {
-        QueryToolState.selectedWorkcenterGroups.clear();
-    }
-    renderWorkcenterGroupSelector();
-}
-
-function clearWorkcenterGroups() {
-    QueryToolState.selectedWorkcenterGroups.clear();
-    renderWorkcenterGroupSelector();
-}
-
-function updateWorkcenterGroupUI() {
-    const count = QueryToolState.selectedWorkcenterGroups.size;
-    const display = document.getElementById('wcGroupDisplay');
-    const badge = document.getElementById('wcGroupBadge');
-    const countEl = document.getElementById('wcGroupSelectedCount');
-    const selectAll = document.getElementById('wcGroupSelectAll');
-
-    // Update item visual state
-    document.querySelectorAll('.wc-group-item').forEach(item => {
-        const groupName = item.dataset.group;
-        const isSelected = QueryToolState.selectedWorkcenterGroups.has(groupName);
-        item.classList.toggle('selected', isSelected);
-        const checkbox = item.querySelector('input[type="checkbox"]');
-        if (checkbox) checkbox.checked = isSelected;
-    });
-
-    // Update display text and badge
-    if (display) {
-        display.textContent = count === 0 ? '全部站點' : `${count} 個站點群組`;
-    }
-    if (badge) {
-        badge.textContent = count;
-        badge.style.display = count > 0 ? 'inline-block' : 'none';
-    }
-    if (countEl) {
-        countEl.textContent = `已選 ${count}`;
-    }
-    if (selectAll) {
-        selectAll.checked = count === QueryToolState.workcenterGroups.length && count > 0;
-    }
-}
-
-function toggleWorkcenterGroupDropdown() {
-    const dropdown = document.getElementById('wcGroupDropdown');
-    if (dropdown) dropdown.classList.toggle('show');
-}
-
-function closeWorkcenterGroupDropdown() {
-    const dropdown = document.getElementById('wcGroupDropdown');
-    if (dropdown) dropdown.classList.remove('show');
-}
-
-function applyWorkcenterFilter() {
-    // Close dropdown
-    closeWorkcenterGroupDropdown();
-
-    // Check if we have selected lots
-    if (QueryToolState.timelineSelectedLots.size === 0) {
-        Toast.warning('請先選擇批次');
-        return;
-    }
-
-    const wcGroups = QueryToolState.selectedWorkcenterGroups;
-    if (wcGroups.size > 0) {
-        Toast.info(`套用 ${wcGroups.size} 個站點群組篩選...`);
-    } else {
-        Toast.info('顯示全部站點資料...');
-    }
-
-    // Re-run confirmLotSelection to apply the filter
-    confirmLotSelection();
-}
-
-function filterWorkcenterGroups(searchText) {
-    const items = document.querySelectorAll('.wc-group-item');
-    const search = searchText.toLowerCase();
-
-    items.forEach(item => {
-        const groupName = item.dataset.group.toLowerCase();
-        item.style.display = groupName.includes(search) ? 'flex' : 'none';
-    });
-}
-
-function showWorkcenterGroupSelector() {
-    // Show the entire selection bar
-    const selectionBar = document.getElementById('selectionBar');
-    if (selectionBar) {
-        selectionBar.style.display = 'flex';
-    }
-
-    // Render the workcenter group selector if groups are available
-    if (QueryToolState.workcenterGroups.length > 0) {
-        renderWorkcenterGroupSelector();
-    }
-}
-
-// ============================================================
-// Equipment Query Functions
-// ============================================================
-
-async function loadEquipments() {
-    try {
-        const data = await MesApi.get('/api/query-tool/equipment-list');
-        if (data.error) {
-            document.getElementById('equipmentList').innerHTML = `<div class="error">${data.error}</div>`;
-            return;
-        }
-
-        QueryToolState.allEquipments = data.data;
-        renderEquipmentList(data.data);
-    } catch (error) {
-        document.getElementById('equipmentList').innerHTML = `<div class="error">載入失敗: ${error.message}</div>`;
-    }
-}
-
-function renderEquipmentList(equipments) {
-    const container = document.getElementById('equipmentList');
-
-    if (!equipments || equipments.length === 0) {
-        container.innerHTML = '<div class="empty-state">無設備資料</div>';
-        return;
-    }
-
-    let html = '';
-    let currentWorkcenter = null;
-
-    equipments.forEach(eq => {
-        const isSelected = QueryToolState.selectedEquipments.has(eq.RESOURCEID);
-
-        // Group header
-        if (eq.WORKCENTERNAME !== currentWorkcenter) {
-            currentWorkcenter = eq.WORKCENTERNAME;
-            html += `<div style="padding: 8px 15px; background: #f0f0f0; font-weight: 600; font-size: 12px; color: #666;">${currentWorkcenter || '未分類'}</div>`;
-        }
-
-        html += `
-            <div class="equipment-item ${isSelected ? 'selected' : ''}" onclick="toggleEquipment('${eq.RESOURCEID}')">
-                <input type="checkbox" ${isSelected ? 'checked' : ''} onclick="event.stopPropagation(); toggleEquipment('${eq.RESOURCEID}')">
-                <div class="equipment-info">
-                    <div class="equipment-name">${eq.RESOURCENAME}</div>
-                    <div class="equipment-workcenter">${eq.RESOURCEFAMILYNAME || ''}</div>
-                </div>
-            </div>
-        `;
-    });
-
-    container.innerHTML = html;
-}
-
-function toggleEquipmentDropdown() {
-    const dropdown = document.getElementById('equipmentDropdown');
-    dropdown.classList.toggle('show');
-}
-
-function filterEquipments(query) {
-    const q = query.toLowerCase();
-    const filtered = QueryToolState.allEquipments.filter(eq =>
-        (eq.RESOURCENAME && eq.RESOURCENAME.toLowerCase().includes(q)) ||
-        (eq.WORKCENTERNAME && eq.WORKCENTERNAME.toLowerCase().includes(q)) ||
-        (eq.RESOURCEFAMILYNAME && eq.RESOURCEFAMILYNAME.toLowerCase().includes(q))
-    );
-    renderEquipmentList(filtered);
-}
-
-function toggleEquipment(resourceId) {
-    if (QueryToolState.selectedEquipments.has(resourceId)) {
-        QueryToolState.selectedEquipments.delete(resourceId);
-    } else {
-        if (QueryToolState.selectedEquipments.size >= 20) {
-            Toast.warning('最多只能選擇 20 台設備');
-            return;
-        }
-        QueryToolState.selectedEquipments.add(resourceId);
-    }
-    updateSelectedDisplay();
-
-    // Re-render with current filter
-    const search = document.querySelector('.equipment-search');
-    if (search && search.value) {
-        filterEquipments(search.value);
-    } else {
-        renderEquipmentList(QueryToolState.allEquipments);
-    }
-}
-
-function updateSelectedDisplay() {
-    const display = document.getElementById('equipmentDisplay');
-    const count = document.getElementById('selectedCount');
-
-    if (QueryToolState.selectedEquipments.size === 0) {
-        display.textContent = '點擊選擇設備...';
-        count.textContent = '';
-    } else if (QueryToolState.selectedEquipments.size <= 3) {
-        const names = QueryToolState.allEquipments
-            .filter(eq => QueryToolState.selectedEquipments.has(eq.RESOURCEID))
-            .map(eq => eq.RESOURCENAME)
-            .join(', ');
-        display.textContent = names;
-        count.textContent = `已選擇 ${QueryToolState.selectedEquipments.size} 台設備`;
-    } else {
-        display.textContent = `已選擇 ${QueryToolState.selectedEquipments.size} 台設備`;
-        count.textContent = '';
-    }
-}
-
-function setLast30Days() {
-    const today = new Date();
-    const past = new Date();
-    past.setDate(today.getDate() - 30);
-
-    document.getElementById('dateFrom').value = past.toISOString().split('T')[0];
-    document.getElementById('dateTo').value = today.toISOString().split('T')[0];
-}
-
-async function executeEquipmentQuery() {
-    if (QueryToolState.selectedEquipments.size === 0) {
-        Toast.error('請選擇至少一台設備');
-        return;
-    }
-
-    const dateFrom = document.getElementById('dateFrom').value;
-    const dateTo = document.getElementById('dateTo').value;
-
-    if (!dateFrom || !dateTo) {
-        Toast.error('請指定日期範圍');
-        return;
-    }
-
-    // Validate date range
-    const from = new Date(dateFrom);
-    const to = new Date(dateTo);
-
-    if (to < from) {
-        Toast.error('結束日期不可早於起始日期');
-        return;
-    }
-
-    const daysDiff = (to - from) / (1000 * 60 * 60 * 24);
-    if (daysDiff > 90) {
-        Toast.error('日期範圍不可超過 90 天');
-        return;
-    }
-
-    // Clear previous equipment results to free memory
-    QueryToolState.equipmentResults = null;
-    const eqContent = document.getElementById('eqResultsContent');
-    if (eqContent) eqContent.innerHTML = '';
-
-    // Show loading
-    document.getElementById('eqEmptyState').style.display = 'none';
-    document.getElementById('eqResultsContent').style.display = 'block';
-    document.getElementById('eqResultsContent').innerHTML = `
-        <div class="loading">
-            <div class="loading-spinner"></div>
-            <br>查詢中...
-        </div>
-    `;
-
-    document.getElementById('eqQueryBtn').disabled = true;
-
-    const equipmentIds = Array.from(QueryToolState.selectedEquipments);
-    const equipmentNames = QueryToolState.allEquipments
-        .filter(eq => QueryToolState.selectedEquipments.has(eq.RESOURCEID))
-        .map(eq => eq.RESOURCENAME);
-
-    try {
-        // Load status hours first
-        const statusResult = await MesApi.post('/api/query-tool/equipment-period', {
-            equipment_ids: equipmentIds,
-            equipment_names: equipmentNames,
-            start_date: dateFrom,
-            end_date: dateTo,
-            query_type: 'status_hours'
-        });
-
-        QueryToolState.equipmentResults = {
-            status_hours: statusResult,
-            equipment_ids: equipmentIds,
-            equipment_names: equipmentNames,
-            date_range: { start: dateFrom, end: dateTo }
-        };
-
-        renderEquipmentResults();
-
-    } catch (error) {
-        document.getElementById('eqResultsContent').innerHTML = `<div class="error">查詢失敗: ${error.message}</div>`;
-    } finally {
-        document.getElementById('eqQueryBtn').disabled = false;
-    }
-}
-
-function renderEquipmentResults() {
-    const results = QueryToolState.equipmentResults;
-    const content = document.getElementById('eqResultsContent');
-
-    let html = `
-        <div class="result-header">
-            <div class="result-info">
-                ${QueryToolState.selectedEquipments.size} 台設備 | ${results.date_range.start} ~ ${results.date_range.end}
-            </div>
-        </div>
-
-        <div class="assoc-tabs" style="margin-bottom: 20px;">
-            <button class="assoc-tab active" onclick="loadEquipmentTab('status_hours', this)">狀態時數</button>
-            <button class="assoc-tab" onclick="loadEquipmentTab('lots', this)">批次清單</button>
-            <button class="assoc-tab" onclick="loadEquipmentTab('materials', this)">物料消耗</button>
-            <button class="assoc-tab" onclick="loadEquipmentTab('rejects', this)">不良統計</button>
-            <button class="assoc-tab" onclick="loadEquipmentTab('jobs', this)">JOB 紀錄</button>
-        </div>
-
-        <div id="eqTabContent"></div>
-    `;
-
-    content.innerHTML = html;
-
-    // Render initial tab
-    renderEquipmentTab('status_hours', results.status_hours);
-}
-
-async function loadEquipmentTab(tabType, tabElement) {
-    // Update tab states
-    document.querySelectorAll('#eqResultsContent .assoc-tab').forEach(t => t.classList.remove('active'));
-    if (tabElement) tabElement.classList.add('active');
-
-    const content = document.getElementById('eqTabContent');
-    content.innerHTML = `<div class="loading"><div class="loading-spinner"></div></div>`;
-
-    const results = QueryToolState.equipmentResults;
-
-    // Check if already loaded
-    if (results[tabType]) {
-        renderEquipmentTab(tabType, results[tabType]);
-        return;
-    }
-
-    try {
-        const result = await MesApi.post('/api/query-tool/equipment-period', {
-            equipment_ids: results.equipment_ids,
-            equipment_names: results.equipment_names,
-            start_date: results.date_range.start,
-            end_date: results.date_range.end,
-            query_type: tabType
-        });
-
-        results[tabType] = result;
-        renderEquipmentTab(tabType, result);
-
-    } catch (error) {
-        content.innerHTML = `<div class="error">載入失敗: ${error.message}</div>`;
-    }
-}
-
-function renderEquipmentTab(tabType, result) {
-    const content = document.getElementById('eqTabContent');
-
-    if (result.error) {
-        content.innerHTML = `<div class="error">${result.error}</div>`;
-        return;
-    }
-
-    if (!result.data || result.data.length === 0) {
-        content.innerHTML = `<div class="empty-state"><p>無資料</p></div>`;
-        return;
-    }
-
-    const data = result.data;
-
-    // Define columns based on tab type
-    const columnDefs = {
-        'status_hours': {
-            cols: ['RESOURCENAME', 'PRD_HOURS', 'SBY_HOURS', 'UDT_HOURS', 'SDT_HOURS', 'EGT_HOURS', 'NST_HOURS', 'TOTAL_HOURS', 'OU_PERCENT'],
-            labels: { RESOURCENAME: '設備名稱', PRD_HOURS: '生產', SBY_HOURS: '待機', UDT_HOURS: '非計畫停機', SDT_HOURS: '計畫停機', EGT_HOURS: '工程', NST_HOURS: '非排程', TOTAL_HOURS: '總時數', OU_PERCENT: 'OU%' }
-        },
-        'lots': {
-            cols: ['EQUIPMENTNAME', 'WORKCENTERNAME', 'CONTAINERNAME', 'PJ_TYPE', 'PJ_BOP', 'WAFER_LOT_ID', 'FINISHEDRUNCARD', 'SPECNAME', 'TRACKINTIMESTAMP', 'TRACKOUTTIMESTAMP', 'TRACKINQTY', 'TRACKOUTQTY'],
-            labels: { EQUIPMENTNAME: '設備', WORKCENTERNAME: '站點', CONTAINERNAME: 'LOT ID', PJ_TYPE: '產品類型', PJ_BOP: 'BOP', WAFER_LOT_ID: 'Wafer Lot', FINISHEDRUNCARD: '批次號', SPECNAME: '規格', TRACKINTIMESTAMP: '上機時間', TRACKOUTTIMESTAMP: '下機時間', TRACKINQTY: '上機數', TRACKOUTQTY: '下機數' }
-        },
-        'materials': {
-            cols: ['EQUIPMENTNAME', 'MATERIALPARTNAME', 'TOTAL_CONSUMED', 'LOT_COUNT'],
-            labels: { EQUIPMENTNAME: '設備', MATERIALPARTNAME: '物料名稱', TOTAL_CONSUMED: '消耗總量', LOT_COUNT: '批次數' }
-        },
-        'rejects': {
-            cols: ['EQUIPMENTNAME', 'LOSSREASONNAME', 'TOTAL_DEFECT_QTY', 'TOTAL_REJECT_QTY', 'AFFECTED_LOT_COUNT'],
-            labels: { EQUIPMENTNAME: '設備', LOSSREASONNAME: '損失原因', TOTAL_DEFECT_QTY: '不良數量', TOTAL_REJECT_QTY: 'REJECT數量', AFFECTED_LOT_COUNT: '影響批次' }
-        },
-        'jobs': {
-            cols: ['RESOURCENAME', 'JOBID', 'JOBSTATUS', 'JOBMODELNAME', 'CREATEDATE', 'COMPLETEDATE', 'CAUSECODENAME', 'REPAIRCODENAME'],
-            labels: { RESOURCENAME: '設備', JOBID: 'JOB ID', JOBSTATUS: '狀態', JOBMODELNAME: '類型', CREATEDATE: '建立時間', COMPLETEDATE: '完成時間', CAUSECODENAME: '原因代碼', REPAIRCODENAME: '維修代碼' }
-        }
-    };
-
-    const def = columnDefs[tabType] || { cols: Object.keys(data[0]), labels: {} };
-
-    // Add export button
-    let html = `
-        <div style="text-align: right; margin-bottom: 10px;">
-            <button class="btn btn-success btn-sm" onclick="exportEquipmentTab('${tabType}')">匯出 CSV</button>
-        </div>
-    `;
-
-    // Show totals for status_hours
-    if (tabType === 'status_hours' && result.totals) {
-        const t = result.totals;
-        html += `
-            <div class="info-box" style="margin-bottom: 15px;">
-                總計: PRD ${t.PRD_HOURS?.toFixed(1) || 0}h | SBY ${t.SBY_HOURS?.toFixed(1) || 0}h |
-                UDT ${t.UDT_HOURS?.toFixed(1) || 0}h | OU% ${t.OU_PERCENT?.toFixed(1) || 0}%
-            </div>
-        `;
-    }
-
-    html += `<div class="table-container" style="max-height: 500px;"><table><thead><tr>`;
-
-    def.cols.forEach(col => {
-        html += `<th>${def.labels[col] || col}</th>`;
-    });
-    html += `</tr></thead><tbody>`;
-
-    data.forEach(row => {
-        html += `<tr>`;
-        def.cols.forEach(col => {
-            let value = row[col];
-            if (col.includes('DATE') || col.includes('TIMESTAMP')) {
-                value = formatDateTime(value);
-            }
-            if (col === 'OU_PERCENT' && value !== null) {
-                value = `${value}%`;
-            }
-            if ((col.endsWith('_HOURS') || col === 'TOTAL_CONSUMED') && value !== null) {
-                value = Number(value).toFixed(2);
-            }
-            html += `<td>${value !== null && value !== undefined ? value : ''}</td>`;
-        });
-        html += `</tr>`;
-    });
-
-    html += `</tbody></table></div>`;
-    content.innerHTML = html;
-}
-
-// ============================================================
-// Export Functions
-// ============================================================
-
-async function exportLotResults() {
-    if (QueryToolState.resolvedLots.length === 0) {
-        Toast.error('無資料可匯出');
-        return;
-    }
-
-    const lot = QueryToolState.resolvedLots[QueryToolState.selectedLotIndex];
-
-    try {
-        const response = await fetch('/api/query-tool/export-csv', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                export_type: 'lot_history',
-                params: { container_id: lot.container_id }
-            })
-        });
-
-        if (!response.ok) {
-            const data = await response.json();
-            throw new Error(data.error || '匯出失敗');
-        }
-
-        downloadBlob(response, `lot_history_${lot.lot_id || lot.input_value}.csv`);
-        Toast.success('CSV 匯出完成');
-
-    } catch (error) {
-        Toast.error('匯出失敗: ' + error.message);
-    }
-}
-
-async function exportCombinedResults() {
-    const selectedIndices = QueryToolState.currentSelectedIndices || [];
-    if (selectedIndices.length === 0) {
-        Toast.error('無資料可匯出');
-        return;
-    }
-
-    // Collect all history data
-    const lots = QueryToolState.resolvedLots;
-    const allHistory = [];
-
-    selectedIndices.forEach(idx => {
-        const lot = lots[idx];
-        const history = QueryToolState.lotHistories[lot.container_id] || [];
-        history.forEach(step => {
-            allHistory.push({
-                LOT_ID: lot.lot_id || lot.input_value,
-                ...step
-            });
-        });
-    });
-
-    if (allHistory.length === 0) {
-        Toast.error('無資料可匯出');
-        return;
-    }
-
-    // Generate CSV
-    const headers = ['LOT_ID', 'WORKCENTERNAME', 'EQUIPMENTNAME', 'SPECNAME', 'PJ_TYPE', 'PJ_BOP', 'WAFER_LOT_ID', 'TRACKINTIMESTAMP', 'TRACKOUTTIMESTAMP', 'TRACKINQTY', 'TRACKOUTQTY'];
-    let csv = headers.join(',') + '\n';
-
-    allHistory.forEach(row => {
-        csv += headers.map(h => {
-            let val = row[h] || '';
-            if (typeof val === 'string' && (val.includes(',') || val.includes('"'))) {
-                val = '"' + val.replace(/"/g, '""') + '"';
-            }
-            return val;
-        }).join(',') + '\n';
-    });
-
-    // Download
-    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `combined_lot_history_${selectedIndices.length}lots.csv`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-
-    Toast.success('CSV 匯出完成');
-}
-
-// Export Production History (拆併批紀錄)
-function exportProductionHistory(mode = 'single') {
-    let productionHistory = [];
-    let filename = 'production_split_merge_history';
-
-    if (mode === 'combined') {
-        // Get from combined splits data
-        productionHistory = QueryToolState.combinedSplitsData?.production_history || [];
-        const selectedCount = (QueryToolState.currentSelectedIndices || []).length;
-        filename = `production_split_merge_history_${selectedCount}lots`;
-    } else {
-        // Get from current LOT's splits data (cached in lotAssociations)
-        const containerId = QueryToolState.currentContainerId;
-        const cacheKey = `${containerId}_splits`;
-        const splitsData = QueryToolState.lotAssociations?.[cacheKey] || {};
-        productionHistory = splitsData.production_history || [];
-        const lotId = QueryToolState.resolvedLots?.find(l => l.container_id === containerId)?.lot_id || containerId;
-        filename = `production_split_merge_history_${lotId}`;
-    }
-
-    if (!productionHistory || productionHistory.length === 0) {
-        Toast.error('無生產拆併批紀錄可匯出');
-        return;
-    }
-
-    // Generate CSV
-    const headers = ['LOT_ID', '操作類型', '來源批次', '目標批次', '數量', '時間'];
-    const keys = ['LOT_ID', 'operation_type_display', 'source_lot', 'target_lot', 'target_qty', 'txn_date'];
-    let csv = headers.join(',') + '\n';
-
-    productionHistory.forEach(row => {
-        csv += keys.map(k => {
-            let val = row[k] || '';
-            if (typeof val === 'string' && (val.includes(',') || val.includes('"'))) {
-                val = '"' + val.replace(/"/g, '""') + '"';
-            }
-            return val;
-        }).join(',') + '\n';
-    });
-
-    // Download
-    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${filename}.csv`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-
-    Toast.success('CSV 匯出完成');
-}
-
-// Export Serial Numbers (成品流水號對應)
-function exportSerialNumbers(mode = 'single') {
-    let serialNumbers = [];
-    let filename = 'serial_number_mapping';
-
-    if (mode === 'combined') {
-        // Get from combined splits data
-        serialNumbers = QueryToolState.combinedSplitsData?.serial_numbers || [];
-        const selectedCount = (QueryToolState.currentSelectedIndices || []).length;
-        filename = `serial_number_mapping_${selectedCount}lots`;
-    } else {
-        // Get from current LOT's splits data (cached in lotAssociations)
-        const containerId = QueryToolState.currentContainerId;
-        const cacheKey = `${containerId}_splits`;
-        const splitsData = QueryToolState.lotAssociations?.[cacheKey] || {};
-        serialNumbers = splitsData.serial_numbers || [];
-        const lotId = QueryToolState.resolvedLots?.find(l => l.container_id === containerId)?.lot_id || containerId;
-        filename = `serial_number_mapping_${lotId}`;
-    }
-
-    if (!serialNumbers || serialNumbers.length === 0) {
-        Toast.error('無成品流水號對應資料可匯出');
-        return;
-    }
-
-    // Flatten serial numbers data
-    const flatData = [];
-    serialNumbers.forEach(snGroup => {
-        const sn = snGroup.serial_number || '';
-        const totalDie = snGroup.total_good_die || 0;
-        (snGroup.lots || []).forEach(lot => {
-            flatData.push({
-                serial_number: sn,
-                total_good_die: totalDie,
-                lot_id: lot.lot_id || '',
-                combine_ratio_pct: lot.combine_ratio_pct || '',
-                good_die_qty: lot.good_die_qty || 0
-            });
-        });
-    });
-
-    if (flatData.length === 0) {
-        Toast.error('無成品流水號對應資料可匯出');
-        return;
-    }
-
-    // Generate CSV
-    const headers = ['流水號', '總 Good Die', 'LOT ID', '佔比', 'Good Die 數'];
-    const keys = ['serial_number', 'total_good_die', 'lot_id', 'combine_ratio_pct', 'good_die_qty'];
-    let csv = headers.join(',') + '\n';
-
-    flatData.forEach(row => {
-        csv += keys.map(k => {
-            let val = row[k] || '';
-            if (typeof val === 'string' && (val.includes(',') || val.includes('"'))) {
-                val = '"' + val.replace(/"/g, '""') + '"';
-            }
-            return val;
-        }).join(',') + '\n';
-    });
-
-    // Download
-    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${filename}.csv`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-
-    Toast.success('CSV 匯出完成');
-}
-
-async function exportEquipmentTab(tabType) {
-    const results = QueryToolState.equipmentResults;
-
-    if (!results || !results[tabType] || !results[tabType].data) {
-        Toast.error('無資料可匯出');
-        return;
-    }
-
-    try {
-        const params = {
-            start_date: results.date_range.start,
-            end_date: results.date_range.end
-        };
-
-        if (tabType === 'materials' || tabType === 'rejects') {
-            params.equipment_names = results.equipment_names;
-        } else {
-            params.equipment_ids = results.equipment_ids;
-        }
-
-        const response = await fetch('/api/query-tool/export-csv', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                export_type: `equipment_${tabType}`,
-                params: params
-            })
-        });
-
-        if (!response.ok) {
-            const data = await response.json();
-            throw new Error(data.error || '匯出失敗');
-        }
-
-        downloadBlob(response, `equipment_${tabType}.csv`);
-        Toast.success('CSV 匯出完成');
-
-    } catch (error) {
-        Toast.error('匯出失敗: ' + error.message);
-    }
-}
-
-async function downloadBlob(response, filename) {
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-}
-
-// ============================================================
-// Tab Navigation (Legacy - kept for compatibility)
-// ============================================================
-
-function switchMainTab(tabId) {
-    // This function is kept for compatibility but the main UI now uses
-    // query mode switching (batch vs equipment) instead of tabs
-}
-
-// ============================================================
-// Utility Functions
-// ============================================================
-
-function formatDateTime(dateInput) {
-    if (!dateInput) return '';
-
-    // Handle Date objects
-    if (dateInput instanceof Date) {
-        const y = dateInput.getFullYear();
-        const m = (dateInput.getMonth() + 1).toString().padStart(2, '0');
-        const d = dateInput.getDate().toString().padStart(2, '0');
-        const h = dateInput.getHours().toString().padStart(2, '0');
-        const min = dateInput.getMinutes().toString().padStart(2, '0');
-        const s = dateInput.getSeconds().toString().padStart(2, '0');
-        return `${y}-${m}-${d} ${h}:${min}:${s}`;
-    }
-
-    // Handle timestamps (numbers)
-    if (typeof dateInput === 'number') {
-        return formatDateTime(new Date(dateInput));
-    }
-
-    // Handle strings
-    if (typeof dateInput === 'string') {
-        return dateInput.replace('T', ' ').substring(0, 19);
-    }
-
-    return '';
-}
-
-function truncateText(text, maxLength) {
-    if (!text) return '';
-    if (text.length <= maxLength) return text;
-    return text.substring(0, maxLength) + '...';
-}
-
-const __QUERY_TOOL_GLOBAL_FNS = {
-    applyWorkcenterFilter,
-    clearQueryState,
-    clearWorkcenterGroups,
-    closeTimelinePopup,
-    closeWorkcenterGroupDropdown,
-    confirmLotSelection,
-    deselectAllStations,
-    downloadBlob,
-    executeEquipmentQuery,
-    executeLotQuery,
-    exportCombinedResults,
-    exportEquipmentTab,
-    exportLotResults,
-    exportProductionHistory,
-    exportSerialNumbers,
-    filterEquipments,
-    filterWorkcenterGroups,
-    formatDateTime,
-    getAssocLabel,
-    hideTimeline,
-    loadAssociation,
-    loadCombinedAssociation,
-    loadEquipmentTab,
-    loadEquipments,
-    loadLotHistory,
-    loadWorkcenterGroups,
-    openTimelinePopup,
-    parseInputValues,
-    renderAssociation,
-    renderCombinedAssociation,
-    renderCombinedLotView,
-    renderCombinedSplitsAssociation,
-    renderEquipmentList,
-    renderEquipmentResults,
-    renderEquipmentTab,
-    renderFullTimeline,
-    renderLotDetail,
-    renderLotResults,
-    renderSplitsAssociation,
-    renderTimeline,
-    renderTimelineAxisFixed,
-    renderTimelinePreview,
-    renderWorkcenterGroupSelector,
-    selectAllStations,
-    selectLot,
-    selectLotFromDropdown,
-    setLast30Days,
-    setQueryType,
-    setTimelineScale,
-    showAdjacentLots,
-    showLotSelector,
-    showTimeline,
-    showTimelineDetail,
-    showWorkcenterGroupSelector,
-    switchMainTab,
-    switchQueryMode,
-    toggleAllLotsForTimeline,
-    toggleAllLotsInSelector,
-    toggleAllWorkcenterGroups,
-    toggleEquipment,
-    toggleEquipmentDropdown,
-    toggleLotForTimeline,
-    toggleLotInSelector,
-    toggleLotSelector,
-    toggleStationFilter,
-    toggleWorkcenterGroup,
-    toggleWorkcenterGroupDropdown,
-    truncateText,
-    updateLotInfoBar,
-    updateLotSelectorCount,
-    updateSelectedDisplay,
-    updateTimelineButton,
-    updateTimelineScale,
-    updateWorkcenterGroupUI,
-};
-
-Object.assign(window, __QUERY_TOOL_GLOBAL_FNS);
+createApp(App).mount('#app');
diff --git a/frontend/src/query-tool/style.css b/frontend/src/query-tool/style.css
deleted file mode 100644
index 6ddd7d9..0000000
--- a/frontend/src/query-tool/style.css
+++ /dev/null
@@ -1,180 +0,0 @@
-.query-tool-page {
-  max-width: 1680px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.query-tool-header {
-  border-radius: 12px;
-  padding: 22px 24px;
-  margin-bottom: 16px;
-  color: #fff;
-  background: linear-gradient(135deg, var(--portal-brand-start, #667eea) 0%, var(--portal-brand-end, #764ba2) 100%);
-  box-shadow: var(--portal-shadow-panel);
-}
-
-.query-tool-header h1 {
-  margin: 0;
-  font-size: 24px;
-}
-
-.query-tool-header p {
-  margin: 8px 0 0;
-  font-size: 13px;
-  opacity: 0.9;
-}
-
-.query-tool-filter {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: #334155;
-}
-
-.query-tool-filter select,
-.query-tool-filter input {
-  min-width: 160px;
-  border: 1px solid #cbd5e1;
-  border-radius: 8px;
-  padding: 6px 10px;
-  background: #fff;
-}
-
-.query-tool-textarea {
-  width: 100%;
-  min-height: 110px;
-  border: 1px solid #cbd5e1;
-  border-radius: 8px;
-  padding: 10px;
-  font-size: 13px;
-  resize: vertical;
-}
-
-.query-tool-btn {
-  border: none;
-  border-radius: 8px;
-  padding: 8px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.query-tool-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.query-tool-btn-primary {
-  background: #4f46e5;
-  color: #fff;
-}
-
-.query-tool-btn-success {
-  background: #16a34a;
-  color: #fff;
-}
-
-.query-tool-btn-ghost {
-  background: #f1f5f9;
-  color: #334155;
-}
-
-.query-tool-row-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.query-tool-table-wrap {
-  margin-top: 12px;
-  overflow: auto;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-}
-
-.query-tool-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.query-tool-table th,
-.query-tool-table td {
-  padding: 8px 10px;
-  border-bottom: 1px solid #f1f5f9;
-  white-space: nowrap;
-}
-
-.query-tool-table th {
-  position: sticky;
-  top: 0;
-  background: #f8fafc;
-  text-align: left;
-  z-index: 1;
-}
-
-.query-tool-table tr.selected {
-  background: #eef2ff;
-}
-
-.query-tool-lineage-row td {
-  background: #f8fafc;
-  border-top: 1px dashed #dbeafe;
-}
-
-.query-tool-lineage-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 6px 0;
-}
-
-.query-tool-lineage-list {
-  margin: 0;
-  padding-left: 18px;
-  color: #334155;
-  font-size: 12px;
-}
-
-.query-tool-error-inline {
-  padding: 10px;
-  border-radius: 8px;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  color: #b91c1c;
-  font-size: 12px;
-}
-
-.query-tool-empty {
-  margin: 0;
-  padding: 12px;
-  color: #64748b;
-  font-size: 13px;
-}
-
-.query-tool-error {
-  margin: 0;
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1px solid #fecaca;
-  background: #fef2f2;
-  color: #b91c1c;
-  font-size: 13px;
-}
-
-.query-tool-success {
-  margin: 0;
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1px solid #bbf7d0;
-  background: #f0fdf4;
-  color: #166534;
-  font-size: 13px;
-}
-
-@media (max-width: 840px) {
-  .query-tool-page {
-    padding: 12px;
-  }
-}
diff --git a/frontend/src/query-tool/utils/csv.js b/frontend/src/query-tool/utils/csv.js
new file mode 100644
index 0000000..f4cd1b6
--- /dev/null
+++ b/frontend/src/query-tool/utils/csv.js
@@ -0,0 +1,76 @@
+function getCsrfToken() {
+  return document.querySelector('meta[name="csrf-token"]')?.content || '';
+}
+
+function resolveErrorMessage(status, payload) {
+  if (payload?.error?.message) {
+    return String(payload.error.message);
+  }
+  if (typeof payload?.error === 'string') {
+    return payload.error;
+  }
+  if (typeof payload?.message === 'string' && payload.message) {
+    return payload.message;
+  }
+  return `匯出失敗 (${status})`;
+}
+
+function resolveDownloadFilename(response, fallbackName) {
+  const disposition = response.headers.get('Content-Disposition') || '';
+  const match = disposition.match(/filename=([^;]+)/i);
+  if (!match?.[1]) {
+    return fallbackName;
+  }
+  return match[1].replace(/(^['\"]|['\"]$)/g, '').trim() || fallbackName;
+}
+
+export async function exportCsv({ exportType, params = {}, fallbackFilename = null }) {
+  if (!exportType) {
+    throw new Error('缺少匯出類型');
+  }
+
+  const headers = {
+    'Content-Type': 'application/json',
+  };
+
+  const csrfToken = getCsrfToken();
+  if (csrfToken) {
+    headers['X-CSRF-Token'] = csrfToken;
+  }
+
+  const response = await fetch('/api/query-tool/export-csv', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      export_type: exportType,
+      params,
+    }),
+  });
+
+  if (!response.ok) {
+    let payload = null;
+    try {
+      payload = await response.json();
+    } catch {
+      payload = null;
+    }
+    throw new Error(resolveErrorMessage(response.status, payload));
+  }
+
+  const blob = await response.blob();
+  const href = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  const filename = resolveDownloadFilename(
+    response,
+    fallbackFilename || `${exportType}.csv`,
+  );
+
+  link.href = href;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(href);
+
+  return filename;
+}
diff --git a/frontend/src/query-tool/utils/values.js b/frontend/src/query-tool/utils/values.js
new file mode 100644
index 0000000..aac8005
--- /dev/null
+++ b/frontend/src/query-tool/utils/values.js
@@ -0,0 +1,93 @@
+export function normalizeText(value) {
+  return String(value || '').trim();
+}
+
+export function uniqueValues(values = []) {
+  const seen = new Set();
+  const list = [];
+  values.forEach((value) => {
+    const normalized = normalizeText(value);
+    if (!normalized || seen.has(normalized)) {
+      return;
+    }
+    seen.add(normalized);
+    list.push(normalized);
+  });
+  return list;
+}
+
+export function parseInputValues(raw) {
+  return uniqueValues(String(raw || '').split(/[\n,]/));
+}
+
+export function parseArrayParam(params, key) {
+  const repeated = params.getAll(key).map((item) => normalizeText(item)).filter(Boolean);
+  if (repeated.length > 0) {
+    return uniqueValues(repeated);
+  }
+  const fallback = normalizeText(params.get(key));
+  if (!fallback) {
+    return [];
+  }
+  return uniqueValues(fallback.split(','));
+}
+
+export function toDateInputValue(value) {
+  if (!value) {
+    return '';
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return date.toISOString().slice(0, 10);
+}
+
+export function parseDateTime(value) {
+  if (!value) {
+    return null;
+  }
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+  const date = new Date(String(value).replace(' ', 'T'));
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  return date;
+}
+
+export function formatDateTime(value) {
+  const date = parseDateTime(value);
+  if (!date) {
+    return '-';
+  }
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hour = String(date.getHours()).padStart(2, '0');
+  const minute = String(date.getMinutes()).padStart(2, '0');
+  const second = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+}
+
+export function formatCellValue(value) {
+  if (value === null || value === undefined || value === '') {
+    return '-';
+  }
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value.toLocaleString() : '-';
+  }
+  return String(value);
+}
+
+export function hashColor(seed) {
+  const text = normalizeText(seed) || 'fallback';
+  let hash = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    hash = (hash << 5) - hash + text.charCodeAt(i);
+    hash |= 0;
+  }
+  const hue = Math.abs(hash) % 360;
+  return `hsl(${hue} 70% 52%)`;
+}
diff --git a/frontend/src/shared-ui/components/TimelineChart.vue b/frontend/src/shared-ui/components/TimelineChart.vue
new file mode 100644
index 0000000..205d04f
--- /dev/null
+++ b/frontend/src/shared-ui/components/TimelineChart.vue
@@ -0,0 +1,443 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import { formatDateTime, normalizeText, parseDateTime } from '../../query-tool/utils/values.js';
+
+const props = defineProps({
+  tracks: {
+    type: Array,
+    default: () => [],
+  },
+  events: {
+    type: Array,
+    default: () => [],
+  },
+  timeRange: {
+    type: Object,
+    default: null,
+  },
+  colorMap: {
+    type: Object,
+    default: () => ({}),
+  },
+  labelWidth: {
+    type: Number,
+    default: 200,
+  },
+  trackRowHeight: {
+    type: Number,
+    default: 44,
+  },
+  minChartWidth: {
+    type: Number,
+    default: 960,
+  },
+});
+
+const AXIS_HEIGHT = 42;
+const tooltipRef = ref({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  lines: [],
+});
+const containerRef = ref(null);
+
+function toTimestamp(value) {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : null;
+  }
+  const date = parseDateTime(value);
+  return date ? date.getTime() : null;
+}
+
+function collectDomainTimestamps() {
+  const timestamps = [];
+
+  props.tracks.forEach((track) => {
+    const layers = Array.isArray(track?.layers) ? track.layers : [];
+    layers.forEach((layer) => {
+      const bars = Array.isArray(layer?.bars) ? layer.bars : [];
+      bars.forEach((bar) => {
+        const startMs = toTimestamp(bar?.start);
+        const endMs = toTimestamp(bar?.end);
+        if (startMs !== null) timestamps.push(startMs);
+        if (endMs !== null) timestamps.push(endMs);
+      });
+    });
+  });
+
+  props.events.forEach((event) => {
+    const timeMs = toTimestamp(event?.time);
+    if (timeMs !== null) timestamps.push(timeMs);
+  });
+
+  return timestamps;
+}
+
+const normalizedTimeRange = computed(() => {
+  const explicitStart = toTimestamp(props.timeRange?.start);
+  const explicitEnd = toTimestamp(props.timeRange?.end);
+
+  if (explicitStart !== null && explicitEnd !== null && explicitEnd > explicitStart) {
+    return {
+      startMs: explicitStart,
+      endMs: explicitEnd,
+    };
+  }
+
+  const timestamps = collectDomainTimestamps();
+  if (timestamps.length === 0) {
+    const now = Date.now();
+    return {
+      startMs: now - (1000 * 60 * 60),
+      endMs: now + (1000 * 60 * 60),
+    };
+  }
+
+  const startMs = Math.min(...timestamps);
+  const endMs = Math.max(...timestamps);
+  if (endMs === startMs) {
+    return {
+      startMs,
+      endMs: startMs + (1000 * 60 * 60),
+    };
+  }
+
+  return {
+    startMs,
+    endMs,
+  };
+});
+
+const totalDurationMs = computed(() => {
+  return Math.max(1, normalizedTimeRange.value.endMs - normalizedTimeRange.value.startMs);
+});
+
+const trackCount = computed(() => props.tracks.length);
+
+const chartWidth = computed(() => {
+  const hours = totalDurationMs.value / (1000 * 60 * 60);
+  const estimated = Math.round(hours * 36);
+  return Math.max(props.minChartWidth, estimated);
+});
+
+const svgHeight = computed(() => AXIS_HEIGHT + trackCount.value * props.trackRowHeight + 2);
+
+function rowTopByIndex(index) {
+  return AXIS_HEIGHT + index * props.trackRowHeight;
+}
+
+function xByTimestamp(timestamp) {
+  return ((timestamp - normalizedTimeRange.value.startMs) / totalDurationMs.value) * chartWidth.value;
+}
+
+function normalizeBar(bar) {
+  const startMs = toTimestamp(bar?.start);
+  const endMs = toTimestamp(bar?.end);
+  if (startMs === null || endMs === null) {
+    return null;
+  }
+
+  const safeEndMs = endMs > startMs ? endMs : startMs + (1000 * 60);
+  return {
+    ...bar,
+    startMs,
+    endMs: safeEndMs,
+  };
+}
+
+function normalizeEvent(event) {
+  const timeMs = toTimestamp(event?.time);
+  if (timeMs === null) {
+    return null;
+  }
+  return {
+    ...event,
+    timeMs,
+  };
+}
+
+const timelineTicks = computed(() => {
+  const ticks = [];
+  const rangeMs = totalDurationMs.value;
+  const rangeHours = rangeMs / (1000 * 60 * 60);
+
+  const stepMs = rangeHours <= 48
+    ? (1000 * 60 * 60)
+    : (1000 * 60 * 60 * 24);
+
+  const start = normalizedTimeRange.value.startMs;
+  const end = normalizedTimeRange.value.endMs;
+
+  let cursor = start;
+  while (cursor <= end) {
+    const date = new Date(cursor);
+    const label = stepMs < (1000 * 60 * 60 * 24)
+      ? `${String(date.getHours()).padStart(2, '0')}:00`
+      : `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+
+    ticks.push({
+      timeMs: cursor,
+      label,
+    });
+
+    cursor += stepMs;
+  }
+
+  if (ticks.length < 2) {
+    ticks.push({
+      timeMs: end,
+      label: stepMs < (1000 * 60 * 60 * 24) ? 'End' : '結束',
+    });
+  }
+
+  return ticks;
+});
+
+const colorFallback = Object.freeze({
+  default: '#94a3b8',
+});
+
+function resolveColor(type) {
+  const key = normalizeText(type);
+  if (key && props.colorMap[key]) {
+    return props.colorMap[key];
+  }
+  return colorFallback.default;
+}
+
+function layerGeometry(trackIndex, layerIndex, layerCount) {
+  const rowTop = rowTopByIndex(trackIndex);
+  const maxBarHeight = Math.max(16, props.trackRowHeight - 14);
+  const scale = layerCount <= 1
+    ? 1
+    : (layerIndex === 0 ? 1 : Math.max(0.4, 1 - layerIndex * 0.2));
+
+  const height = maxBarHeight * scale;
+  const y = rowTop + 6 + ((maxBarHeight - height) / 2);
+
+  return {
+    y,
+    height,
+  };
+}
+
+const legendItems = computed(() => {
+  const usedTypes = new Set();
+
+  props.tracks.forEach((track) => {
+    const layers = Array.isArray(track?.layers) ? track.layers : [];
+    layers.forEach((layer) => {
+      const bars = Array.isArray(layer?.bars) ? layer.bars : [];
+      bars.forEach((bar) => {
+        const key = normalizeText(bar?.type);
+        if (key) {
+          usedTypes.add(key);
+        }
+      });
+    });
+  });
+
+  props.events.forEach((event) => {
+    const key = normalizeText(event?.type);
+    if (key) {
+      usedTypes.add(key);
+    }
+  });
+
+  const keys = usedTypes.size > 0 ? [...usedTypes] : Object.keys(props.colorMap);
+  return keys.map((key) => ({
+    key,
+    color: resolveColor(key),
+  }));
+});
+
+function showTooltip(event, title, lines = []) {
+  const host = containerRef.value;
+  if (!host) {
+    return;
+  }
+
+  const bounds = host.getBoundingClientRect();
+  tooltipRef.value = {
+    visible: true,
+    x: event.clientX - bounds.left + 12,
+    y: event.clientY - bounds.top + 12,
+    title,
+    lines,
+  };
+}
+
+function hideTooltip() {
+  tooltipRef.value.visible = false;
+}
+
+function handleBarHover(mouseEvent, bar, trackLabel) {
+  const normalized = normalizeBar(bar);
+  if (!normalized) {
+    return;
+  }
+
+  const start = formatDateTime(normalized.start);
+  const end = formatDateTime(normalized.end);
+  const durationHours = ((normalized.endMs - normalized.startMs) / (1000 * 60 * 60)).toFixed(2);
+
+  const title = normalizeText(normalized.label) || normalizeText(normalized.type) || '區段';
+  const lines = [
+    `Track: ${trackLabel}`,
+    `Start: ${start}`,
+    `End: ${end}`,
+    `Duration: ${durationHours}h`,
+    normalizeText(normalized.detail),
+  ].filter(Boolean);
+
+  showTooltip(mouseEvent, title, lines);
+}
+
+function handleEventHover(mouseEvent, eventItem, trackLabel) {
+  const normalized = normalizeEvent(eventItem);
+  if (!normalized) {
+    return;
+  }
+
+  const title = normalizeText(normalized.label) || normalizeText(normalized.type) || '事件';
+  const lines = [
+    `Track: ${trackLabel}`,
+    `Time: ${formatDateTime(normalized.time)}`,
+    normalizeText(normalized.detail),
+  ].filter(Boolean);
+
+  showTooltip(mouseEvent, title, lines);
+}
+
+function eventPath(type, x, y) {
+  const normalizedType = normalizeText(type).toLowerCase();
+
+  if (normalizedType.includes('job') || normalizedType.includes('maint')) {
+    return `M ${x} ${y - 7} L ${x - 7} ${y + 5} L ${x + 7} ${y + 5} Z`;
+  }
+
+  return `M ${x} ${y - 7} L ${x - 7} ${y} L ${x} ${y + 7} L ${x + 7} ${y} Z`;
+}
+</script>
+
+<template>
+  <div class="rounded-card border border-stroke-soft bg-white p-3">
+    <div class="mb-3 flex flex-wrap items-center gap-3 text-xs text-slate-600">
+      <span class="font-medium text-slate-700">Timeline</span>
+      <div v-for="item in legendItems" :key="item.key" class="flex items-center gap-1">
+        <span class="inline-block size-2 rounded-full" :style="{ backgroundColor: item.color }" />
+        <span>{{ item.key }}</span>
+      </div>
+    </div>
+
+    <div
+      ref="containerRef"
+      class="relative overflow-hidden rounded-card border border-stroke-soft bg-surface-muted/30"
+      @mouseleave="hideTooltip"
+    >
+      <div class="grid" :style="{ gridTemplateColumns: `${labelWidth}px minmax(0, 1fr)` }">
+        <div class="sticky left-0 z-20 border-r border-stroke-soft bg-white">
+          <div class="flex h-[42px] items-center border-b border-stroke-soft px-3 text-xs font-semibold tracking-wide text-slate-500">
+            Track
+          </div>
+
+          <div
+            v-for="track in tracks"
+            :key="track.id || track.label"
+            class="flex items-center border-b border-stroke-soft/70 px-3 text-xs text-slate-700"
+            :style="{ height: `${trackRowHeight}px` }"
+          >
+            <span class="line-clamp-1">{{ track.label }}</span>
+          </div>
+        </div>
+
+        <div class="overflow-x-auto">
+          <svg
+            :width="chartWidth"
+            :height="svgHeight"
+            :viewBox="`0 0 ${chartWidth} ${svgHeight}`"
+            class="block"
+          >
+            <rect x="0" y="0" :width="chartWidth" :height="svgHeight" fill="#ffffff" />
+
+            <g>
+              <line x1="0" :x2="chartWidth" y1="41" y2="41" stroke="#cbd5e1" stroke-width="1" />
+              <g v-for="tick in timelineTicks" :key="tick.timeMs">
+                <line
+                  :x1="xByTimestamp(tick.timeMs)"
+                  :x2="xByTimestamp(tick.timeMs)"
+                  y1="0"
+                  :y2="svgHeight"
+                  stroke="#e2e8f0"
+                  stroke-width="1"
+                  stroke-dasharray="2 3"
+                />
+                <text
+                  :x="xByTimestamp(tick.timeMs) + 2"
+                  y="14"
+                  fill="#475569"
+                  font-size="11"
+                >
+                  {{ tick.label }}
+                </text>
+              </g>
+            </g>
+
+            <g v-for="(track, trackIndex) in tracks" :key="track.id || track.label">
+              <rect
+                x="0"
+                :y="rowTopByIndex(trackIndex)"
+                :width="chartWidth"
+                :height="trackRowHeight"
+                :fill="trackIndex % 2 === 0 ? '#f8fafc' : '#f1f5f9'"
+                opacity="0.45"
+              />
+
+              <g v-for="(layer, layerIndex) in (track.layers || [])" :key="layer.id || layerIndex">
+                <template
+                  v-for="(bar, barIndex) in (layer.bars || [])"
+                  :key="bar.id || `${trackIndex}-${layerIndex}-${barIndex}`"
+                >
+                  <rect
+                    v-if="normalizeBar(bar)"
+                    :x="xByTimestamp(normalizeBar(bar).startMs)"
+                    :y="layerGeometry(trackIndex, layerIndex, (track.layers || []).length).y"
+                    :width="Math.max(2, xByTimestamp(normalizeBar(bar).endMs) - xByTimestamp(normalizeBar(bar).startMs))"
+                    :height="layerGeometry(trackIndex, layerIndex, (track.layers || []).length).height"
+                    :fill="bar.color || resolveColor(bar.type)"
+                    :opacity="layer.opacity ?? (layerIndex === 0 ? 0.45 : 0.9)"
+                    rx="3"
+                    @mousemove="handleBarHover($event, bar, track.label)"
+                  />
+                </template>
+              </g>
+
+              <template v-for="(eventItem, eventIndex) in events" :key="eventItem.id || `${trackIndex}-event-${eventIndex}`">
+                <path
+                  v-if="normalizeEvent(eventItem) && normalizeText(eventItem.trackId) === normalizeText(track.id)"
+                  :d="eventPath(eventItem.shape || eventItem.type, xByTimestamp(normalizeEvent(eventItem).timeMs), rowTopByIndex(trackIndex) + (trackRowHeight / 2))"
+                  :fill="eventItem.color || resolveColor(eventItem.type)"
+                  stroke="#0f172a"
+                  stroke-width="0.5"
+                  @mousemove="handleEventHover($event, eventItem, track.label)"
+                />
+              </template>
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <div
+        v-if="tooltipRef.visible"
+        class="pointer-events-none absolute z-30 max-w-72 rounded-card border border-stroke-soft bg-slate-900/95 px-2 py-1.5 text-[11px] text-slate-100 shadow-lg"
+        :style="{ left: `${tooltipRef.x}px`, top: `${tooltipRef.y}px` }"
+      >
+        <p class="font-semibold text-white">{{ tooltipRef.title }}</p>
+        <p v-for="line in tooltipRef.lines" :key="line" class="mt-0.5 text-slate-200">{{ line }}</p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/.openspec.yaml b/openspec/changes/archive/2026-02-13-query-tool-rewrite/.openspec.yaml
new file mode 100644
index 0000000..95d284a
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-12
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/design.md b/openspec/changes/archive/2026-02-13-query-tool-rewrite/design.md
new file mode 100644
index 0000000..d79b151
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/design.md
@@ -0,0 +1,155 @@
+## Context
+
+The query-tool ("批次追蹤工具") is the primary batch tracing page used by production engineers to trace LOT lineage, inspect production history, and query equipment records. The current implementation is a monolithic `App.vue` (343L) + `useQueryToolData.js` (448L) with custom CSS, no component decomposition, and flat `<ul>` lineage display.
+
+The backend is fully ready:
+- `/api/query-tool/resolve` — LOT/Serial/WO resolution (max 50/50/10 inputs)
+- `/api/trace/lineage` — LineageEngine genealogy (ancestors + merges, rate limit 10/60s)
+- `/api/query-tool/lot-history` — production history with workcenter filter
+- `/api/query-tool/lot-associations` — materials/rejects/holds/splits/jobs
+- `/api/query-tool/equipment-period` — 5 query types (status_hours, lots, materials, rejects, jobs)
+- `/api/query-tool/export-csv` — 11 export types
+
+All backend endpoints remain unchanged. This is a pure frontend rewrite.
+
+Existing design patterns from other modernized pages:
+- Tailwind tokens: `brand-500`, `surface-card`, `stroke-soft`, `state-*`, `rounded-card`, `shadow-panel`
+- Shared components: `SectionCard`, `FilterToolbar`, `StatusBadge`, `PaginationControl`, `TraceProgressBar`
+- Shared composables: `useAutoRefresh`, `usePaginationState`, `useQueryState`, `useTraceProgress`
+- Font: Noto Sans TC / Microsoft JhengHei, body 13px
+
+## Goals / Non-Goals
+
+**Goals:**
+- Complete frontend rewrite of query-tool with Tailwind + component architecture
+- Tab-based layout: LOT tracing / Equipment query as independent tabs
+- Lineage decomposition tree with auto-fire + concurrency control + growth animation
+- Production timeline (Gantt-style) for both LOT history and equipment activity
+- Left-right master-detail for LOT tab (tree left, detail right)
+- Per-sub-tab CSV export
+- URL state persistence for tab, filters, and selected lot
+
+**Non-Goals:**
+- No backend API changes
+- No new npm dependencies (timeline is SVG/CSS, no chart library)
+- No changes to other pages (mid-section-defect uses its own TraceProgressBar integration)
+- No real-time/WebSocket features
+- No pagination on lineage or association tables (datasets are bounded by single-lot scope)
+
+## Decisions
+
+### D1: Tab-based separation of LOT and Equipment
+
+LOT tracing and equipment query are completely unrelated workflows. Users never need both simultaneously.
+
+**Decision**: Two top-level tabs with independent state. Tab state tracked via URL `?tab=lot|equipment`.
+
+**Alternative considered**: Keep as single scrollable page → rejected because the page becomes too long and users lose context scrolling between sections.
+
+### D2: Lineage tree as left navigation panel
+
+The lineage decomposition tree serves dual purpose: it IS the lot list AND the genealogy visualization.
+
+**Decision**: After resolve, root nodes (resolved lots) appear in the left panel. Each root can expand to show ancestors. Clicking any node (root or ancestor) selects it and loads detail in the right panel.
+
+**Rationale**: Eliminates the need for a separate "lot list" component. The tree naturally represents the resolve results + their relationships.
+
+**Layout**: Left panel ~300px fixed width, right panel fills remaining space. Below 1024px, stack vertically.
+
+### D3: Auto-fire lineage with concurrency limiter
+
+After resolve, lineage is the primary value — users want to see the genealogy immediately.
+
+**Decision**: Auto-fire `POST /api/trace/lineage` for each resolved lot with `concurrency=3`. Results render progressively as they arrive, animating tree growth.
+
+**Concurrency calculation**: Rate limit is 10/60s. With concurrency=3 and avg ~1.5s per call, we'll sustain ~2 calls/s, comfortably below the limit. For 50 lots, all lineage completes in ~25s with continuous tree growth.
+
+**Alternative considered**: On-demand only (click to expand) → rejected because the user explicitly wants to see the full picture immediately. The auto-fire + animation creates an engaging "tree growing" experience.
+
+**Cache**: Per-lot lineage cached in a reactive Map. Cache cleared on new resolve.
+
+### D4: Progressive tree growth animation
+
+**Decision**: Use Vue `<TransitionGroup>` with CSS transforms:
+- Root nodes: `opacity 0→1` (fade-in on resolve)
+- Branch nodes: `translateX(-16px)→0` + `opacity 0→1` (slide-in from left)
+- Sibling stagger: 30-50ms delay between consecutive siblings
+- Level 2+ nodes animate when their parent's lineage data arrives (same animation)
+
+**Implementation**: `LineageNode.vue` is a recursive component. Each node wraps its children in `<TransitionGroup>`. When the reactive lineage cache updates for a lot, Vue reactivity triggers child insertion, which triggers the enter transition.
+
+### D5: TimelineChart as shared SVG component
+
+Both LOT production timeline and equipment timeline need the same Gantt-style visualization.
+
+**Decision**: Create a `TimelineChart.vue` component that accepts:
+```
+Props:
+  tracks: Array<{ id, label, layers: Array<{ bars: Array<{start, end, type}> }> }>
+  events: Array<{ trackId, time, type, label, detail }>
+  timeRange: { start: Date, end: Date }
+  colorMap: Record<string, string>
+```
+
+**Rendering**: Pure SVG with:
+- Sticky left labels (CSS `position: sticky`)
+- Horizontal time axis with auto-scaled ticks (hours or days)
+- Multi-layer bars per track (background layer + foreground layer)
+- Event markers as SVG icons (diamond shape) with hover tooltips
+- Horizontal scroll container for wide timelines
+
+**No external deps**: SVG + CSS only. Time calculations use native Date. No D3, no ECharts.
+
+### D6: LOT Timeline data mapping
+
+LOT production history records have TRACKINTIMESTAMP and TRACKOUTTIMESTAMP per station.
+
+**Decision**: Map lot-history rows to TimelineChart tracks:
+- Each unique WORKCENTERNAME = one track
+- Each row = one bar (track-in to track-out, colored by workcenter group)
+- Hold events from lot-holds = event markers
+- Workcenter filter shows/hides tracks
+
+### D7: Equipment Timeline multi-source composition
+
+Equipment timeline overlays three data sources on a single track per equipment.
+
+**Decision**: Fetch `status_hours`, `lots`, and `jobs` data, then compose:
+- Layer 0 (background): Status bars (PRD=green, SBY=amber, UDT=red, SDT=blue-gray)
+- Layer 1 (foreground): Lot processing bars (track-in to track-out)
+- Events: Maintenance job markers (JOBID + CAUSECODENAME as label)
+
+**Note**: This requires 3 API calls per equipment tab query. They can fire in parallel since they're independent.
+
+### D8: Composable architecture
+
+Split the monolithic `useQueryToolData.js` (448L) into focused composables:
+
+| Composable | Responsibility | State |
+|-----------|---------------|-------|
+| `useLotResolve` | Input parsing, resolve API, URL state for resolve params | `resolvedLots`, `notFound`, `loading.resolving` |
+| `useLotLineage` | Lineage auto-fire, concurrency limiter, tree expand/collapse state, cache | `lineageMap`, `expandedNodes`, `loadingSet` |
+| `useLotDetail` | Per-lot history + associations, sub-tab active state, sub-tab cache | `activeSubTab`, `historyRows`, `associationRows`, caches |
+| `useEquipmentQuery` | Equipment list, date range, 4 query types, sub-tab state | `equipment.*`, `activeSubTab`, query results |
+
+Each composable manages its own loading/error state. No global error banner — errors display contextually within each section.
+
+### D9: Delete legacy files
+
+- `frontend/src/query-tool/main.js` → rewrite to minimal Vite entry (3-5 lines: import App, createApp, mount)
+- `frontend/src/query-tool/style.css` → delete entirely, all styling via Tailwind
+
+## Risks / Trade-offs
+
+**[100+ lots from work order → tree overwhelm]** → The lineage tree with 100+ root nodes could be visually overwhelming. Mitigation: Virtual scroll or "show first 20, load more" pattern for the tree panel if needed. Start without it and evaluate.
+
+**[Lineage auto-fire rate limit pressure]** → With 50 lots and concurrency=3, we'll make ~50 requests within ~25s. Rate limit is 10/60s which means we'd hit the limit at lot #10. Mitigation: The concurrency limiter must respect 429 responses and back off. If rate limited, pause and retry after `Retry-After` header. Alternatively, batch multiple container_ids per lineage call (backend already supports arrays).
+
+**[Timeline SVG performance with large datasets]** → Equipment timeline spanning 90 days with 20 equipment could generate thousands of SVG elements. Mitigation: Aggregate status bars at coarse granularity for wide ranges, detailed view for narrow ranges. Start with naive rendering and optimize if needed.
+
+**[Left panel width on narrow screens]** → 300px fixed width may be too wide on 1024-1280px screens. Mitigation: Make the left panel collapsible/resizable, or use a narrower default (240px) with a expand-on-hover pattern.
+
+## Resolved Questions
+
+- **Q1 (Resolved)**: Lineage API calls SHALL be per-lot independent (not batched). This preserves the progressive tree growth animation — each API response triggers a visual branch expansion. With concurrency=3 and 429 backoff, this stays within rate limits while providing engaging UX.
+- **Q2 (Resolved)**: Equipment timeline SHALL use the `DW_MES_RESOURCESTATUS_SHIFT` aggregate table (8h shift granularity). This avoids querying raw status change events which are voluminous and not readily available via existing API. The 8h blocks are sufficient for timeline overview; users needing finer granularity can inspect the lots/jobs sub-tabs for exact timestamps.
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/proposal.md b/openspec/changes/archive/2026-02-13-query-tool-rewrite/proposal.md
new file mode 100644
index 0000000..705a29c
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/proposal.md
@@ -0,0 +1,33 @@
+## Why
+
+The query-tool page ("批次追蹤工具") is the last major page still running as a monolithic Vue SFC with custom CSS. Its 343-line App.vue and 448-line useQueryToolData composable pack all three unrelated features (LOT tracing, LOT detail, equipment period query) into one vertical scroll with no component decomposition. Lineage visualization is a flat `<ul><li>` list, production history is a static table with no timeline view, and there is no progressive loading animation despite the staged trace API being available. The page needs a complete frontend rewrite to match the Tailwind + component-based architecture used by all other modernized pages, while significantly improving the tracing UX.
+
+## What Changes
+
+- **Complete rewrite** of `frontend/src/query-tool/` — new component tree, composables, and Tailwind-only styling (no style.css)
+- **Tab-based layout**: Split LOT tracing and equipment query into independent top-level tabs
+- **Lineage decomposition tree**: Replace flat ancestor list with an interactive tree that "grows" progressively as lineage API calls return (limited concurrency, animated node insertion)
+- **Left-right master-detail layout**: Lineage tree as left navigation panel, LOT detail (sub-tabs) on right
+- **Production timeline** (shared `TimelineChart.vue`): Gantt-style visualization for both LOT production history (stations over time) and equipment activity (lots + maintenance + status)
+- **Equipment tab redesign**: Replace 5 generic query types with 4 focused sub-tabs — production lots, maintenance records (with cause/repair/symptom codes), scrap records, and equipment timeline
+- **Auto-fire lineage with concurrency control**: After resolve, lineage API calls fire automatically with concurrency=3, tree grows as results arrive
+- **Per-sub-tab CSV export**: Each detail sub-tab has its own export button instead of one shared context-aware export
+- **Delete legacy `main.js`**: The 448-line vanilla JS module in query-tool is dead code superseded by the Vue SFC
+
+## Capabilities
+
+### New Capabilities
+- `query-tool-lot-trace`: LOT tracing tab — query bar, lineage decomposition tree with progressive growth animation, left-right master-detail layout, LOT detail sub-tabs (history with workcenter filter + timeline, materials, rejects, holds, splits, jobs), per-tab CSV export
+- `query-tool-equipment`: Equipment query tab — equipment/date selection, 4 sub-tabs (production lots, maintenance records, scrap records, equipment timeline), per-tab CSV export
+- `timeline-chart`: Shared Gantt-style timeline visualization component — horizontal time axis, configurable tracks with colored bars, event markers, tooltips, used by both LOT and equipment views
+
+### Modified Capabilities
+- `progressive-trace-ux`: Lineage tree now auto-fires with concurrency-limited parallel requests and animated progressive rendering (expanding the on-demand spec to support auto-fire mode)
+
+## Impact
+
+- **Frontend**: Complete rewrite of `frontend/src/query-tool/` (App.vue, composables, new component tree of ~15 files)
+- **Backend**: Zero changes — all existing `/api/query-tool/*` and `/api/trace/*` endpoints remain unchanged
+- **Shared UI**: New `TimelineChart.vue` component may live in `shared-ui/` or query-tool local components
+- **Dead code**: `frontend/src/query-tool/main.js` (448L) and `frontend/src/query-tool/style.css` deleted
+- **Dependencies**: No new npm packages — timeline rendered with SVG/CSS, tree with recursive Vue components + TransitionGroup
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/progressive-trace-ux/spec.md b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/progressive-trace-ux/spec.md
new file mode 100644
index 0000000..16c6231
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/progressive-trace-ux/spec.md
@@ -0,0 +1,16 @@
+## MODIFIED Requirements
+
+### Requirement: query-tool lineage tab SHALL load on-demand
+The query-tool lineage tree SHALL auto-fire lineage API calls after lot resolution with concurrency-limited parallel requests and progressive rendering, while preserving on-demand expand/collapse for tree navigation.
+
+#### Scenario: Auto-fire lineage after resolve
+- **WHEN** lot resolution completes with N resolved lots
+- **THEN** lineage SHALL be fetched via `POST /api/trace/lineage` for each lot automatically
+- **THEN** concurrent requests SHALL be limited to 3 at a time to respect rate limits (10/60s)
+- **THEN** response time SHALL be ≤3s per individual lot
+
+#### Scenario: Multiple lots lineage results cached
+- **WHEN** lineage data has been fetched for multiple lots
+- **THEN** each lot's lineage data SHALL be preserved independently (not re-fetched)
+- **WHEN** a new resolve query is executed
+- **THEN** all cached lineage data SHALL be cleared
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/query-tool-equipment/spec.md b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/query-tool-equipment/spec.md
new file mode 100644
index 0000000..8f03d42
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/query-tool-equipment/spec.md
@@ -0,0 +1,72 @@
+## ADDED Requirements
+
+### Requirement: Equipment tab SHALL provide equipment selection with date range filtering
+The equipment tab SHALL allow selecting multiple equipment and a date range for all sub-tab queries.
+
+#### Scenario: Equipment and date selection
+- **WHEN** the user opens the equipment tab
+- **THEN** a MultiSelect dropdown SHALL list available equipment from `GET /api/query-tool/equipment-list`
+- **THEN** date inputs SHALL default to the last 30 days
+- **THEN** a query button SHALL trigger data loading for the active sub-tab
+
+#### Scenario: Shared filter state across sub-tabs
+- **WHEN** the user selects equipment and date range then switches sub-tabs
+- **THEN** the filter values SHALL persist across all equipment sub-tabs
+- **THEN** switching to a new sub-tab with the same filters SHALL trigger a fresh query for that sub-tab's data type
+
+### Requirement: Equipment Production Lots sub-tab SHALL display lots processed by selected equipment
+The Production Lots sub-tab SHALL show all lots processed on the selected equipment within the date range.
+
+#### Scenario: Production lots query
+- **WHEN** the user queries with selected equipment and date range
+- **THEN** the system SHALL call `POST /api/query-tool/equipment-period` with `query_type: "lots"`
+- **THEN** results SHALL display in a table showing CONTAINERID, SPECNAME, TRACK_IN, TRACK_OUT, QTY, EQUIPMENTNAME
+
+#### Scenario: Partial track-out handling
+- **WHEN** a lot has multiple track-out records (partial processing)
+- **THEN** all records SHALL be displayed (not deduplicated)
+
+### Requirement: Equipment Maintenance sub-tab SHALL display maintenance job records with expandable detail
+The Maintenance sub-tab SHALL show maintenance jobs from `DW_MES_JOB` with cause/repair/symptom codes.
+
+#### Scenario: Maintenance job list
+- **WHEN** the user queries maintenance records
+- **THEN** the system SHALL call `POST /api/query-tool/equipment-period` with `query_type: "jobs"`
+- **THEN** results SHALL display: JOBID, STATUS, CAUSECODENAME, REPAIRCODENAME, SYMPTOMCODENAME, CREATE/COMPLETE dates
+
+#### Scenario: Job detail expansion
+- **WHEN** the user clicks on a maintenance job row
+- **THEN** the row SHALL expand to show full detail including employee names, secondary codes, and related lot IDs (CONTAINERNAMES)
+
+### Requirement: Equipment Scrap sub-tab SHALL display reject/defect records
+The Scrap sub-tab SHALL show reject statistics grouped by loss reason for the selected equipment and date range.
+
+#### Scenario: Scrap records query
+- **WHEN** the user queries scrap records
+- **THEN** the system SHALL call `POST /api/query-tool/equipment-period` with `query_type: "rejects"`
+- **THEN** results SHALL display: EQUIPMENTNAME, LOSSREASONNAME, TOTAL_REJECT_QTY, TOTAL_DEFECT_QTY, AFFECTED_LOT_COUNT
+
+### Requirement: Equipment Timeline sub-tab SHALL visualize equipment activity over time
+The Timeline sub-tab SHALL render a Gantt-style timeline showing equipment status, lots processed, and maintenance events.
+
+#### Scenario: Multi-layer timeline rendering
+- **WHEN** the user views the equipment timeline
+- **THEN** the timeline SHALL overlay three data layers: status bars (PRD/SBY/UDT/SDT), lot processing bars, and maintenance event markers
+- **THEN** each equipment SHALL appear as a separate track row
+
+#### Scenario: Status color coding
+- **WHEN** the timeline renders status bars
+- **THEN** PRD SHALL be green, SBY SHALL be amber, UDT SHALL be red, SDT SHALL be blue-gray
+- **THEN** a legend SHALL be displayed showing the color mapping
+
+#### Scenario: Maintenance marker interaction
+- **WHEN** the user hovers over or clicks a maintenance event marker on the timeline
+- **THEN** a tooltip or expanded panel SHALL show the job detail (CAUSECODENAME, REPAIRCODENAME, SYMPTOMCODENAME)
+
+### Requirement: Each equipment sub-tab SHALL support CSV export
+Every equipment sub-tab SHALL have its own export button calling the existing export API.
+
+#### Scenario: Equipment CSV export
+- **WHEN** the user clicks export on any equipment sub-tab
+- **THEN** the system SHALL call `POST /api/query-tool/export-csv` with the appropriate `export_type` (equipment_lots, equipment_jobs, equipment_rejects)
+- **THEN** the exported params SHALL include the current equipment_ids/equipment_names and date range
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/query-tool-lot-trace/spec.md b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/query-tool-lot-trace/spec.md
new file mode 100644
index 0000000..fa38790
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/query-tool-lot-trace/spec.md
@@ -0,0 +1,152 @@
+## ADDED Requirements
+
+### Requirement: Query-tool page SHALL use tab-based layout separating LOT tracing from equipment queries
+The query-tool page SHALL present two top-level tabs: "LOT 追蹤" and "設備查詢", each with independent state and UI.
+
+#### Scenario: Tab switching preserves state
+- **WHEN** the user switches from LOT tab to Equipment tab and back
+- **THEN** the LOT tab SHALL retain its resolved lots, lineage tree state, and selected lot detail
+- **THEN** the Equipment tab SHALL retain its query results independently
+
+#### Scenario: URL state reflects active tab
+- **WHEN** the user is on a specific tab
+- **THEN** the URL SHALL include a `tab` parameter (e.g., `?tab=lot` or `?tab=equipment`)
+- **THEN** reloading the page SHALL restore the active tab
+
+### Requirement: QueryBar SHALL resolve LOT/Serial/WorkOrder inputs
+The query bar SHALL accept multi-value input (newline or comma-separated) with input type selection and resolve via `POST /api/query-tool/resolve`.
+
+#### Scenario: Successful LOT resolution
+- **WHEN** the user enters lot IDs and clicks resolve
+- **THEN** the system SHALL call `POST /api/query-tool/resolve` with `input_type` and `values`
+- **THEN** resolved lots SHALL appear as root nodes in the lineage tree
+- **THEN** not-found values SHALL be displayed as warnings below the tree
+
+#### Scenario: Work order expansion
+- **WHEN** the user enters work order IDs (max 10)
+- **THEN** each work order MAY expand to 100+ lots
+- **THEN** all expanded lots SHALL appear as root nodes in the lineage tree
+
+#### Scenario: Input validation
+- **WHEN** the user submits empty input or exceeds limits (50 lot IDs, 50 serial numbers, 10 work orders)
+- **THEN** the system SHALL display a validation error without making an API call
+
+### Requirement: LineageTree SHALL display as a decomposition tree with progressive growth animation
+After resolve completes, the lineage tree SHALL auto-fire lineage API calls for each resolved lot with concurrency control, rendering an animated tree that grows as results arrive.
+
+#### Scenario: Auto-fire lineage after resolve
+- **WHEN** lot resolution completes with N resolved lots
+- **THEN** the system SHALL automatically call `POST /api/trace/lineage` for each lot
+- **THEN** concurrent lineage requests SHALL be limited to 3 at a time
+- **THEN** the lineage tree SHALL render root nodes immediately (resolved lots)
+
+#### Scenario: Progressive tree growth animation
+- **WHEN** a lineage API response returns for a lot
+- **THEN** ancestor nodes SHALL animate into the tree (slide-in + fade, staggered 30-50ms per sibling)
+- **THEN** the animation SHALL give the visual impression of a tree "growing" its branches
+
+#### Scenario: Tree node expand/collapse
+- **WHEN** the user clicks a tree node with children (ancestors)
+- **THEN** children SHALL toggle between expanded and collapsed state
+- **THEN** expand/collapse SHALL be a client-side operation (no additional API call)
+
+#### Scenario: Expand-all and collapse-all
+- **WHEN** the user clicks "全部展開"
+- **THEN** all tree nodes at all levels SHALL expand with staggered animation
+- **WHEN** the user clicks "收合"
+- **THEN** all tree nodes SHALL collapse to show only root nodes
+
+#### Scenario: Merge relationships visually distinct
+- **WHEN** the lineage data includes merge relationships
+- **THEN** merge nodes SHALL display a distinct icon (🔀) and/or color to differentiate from direct ancestor relationships
+
+#### Scenario: Leaf nodes without expand affordance
+- **WHEN** a tree node has no ancestors (leaf/terminal node)
+- **THEN** it SHALL NOT display an expand button or clickable expand area
+
+#### Scenario: Lineage cache prevents duplicate fetches
+- **WHEN** lineage data has already been fetched for a lot
+- **THEN** subsequent interactions SHALL use cached data without re-fetching
+- **WHEN** a new resolve query is executed
+- **THEN** the lineage cache SHALL be cleared
+
+### Requirement: Left-right master-detail layout SHALL show tree and LOT detail side by side
+The LOT tracing tab SHALL use a left-right split layout with the lineage tree on the left and LOT detail on the right.
+
+#### Scenario: LOT selection from tree
+- **WHEN** the user clicks any node in the lineage tree (root lot or ancestor)
+- **THEN** the right panel SHALL load detail for that node's container ID
+- **THEN** the selected node SHALL be visually highlighted in the tree
+
+#### Scenario: Right panel sub-tabs
+- **WHEN** a LOT is selected
+- **THEN** the right panel SHALL display sub-tabs: 歷程 (History), 物料 (Materials), 退貨 (Rejects), Hold, Split, Job
+- **THEN** each sub-tab SHALL load data on-demand when activated (not pre-fetched)
+
+#### Scenario: Responsive behavior
+- **WHEN** the viewport width is below 1024px
+- **THEN** the layout SHALL stack vertically (tree above, detail below)
+
+### Requirement: LOT History sub-tab SHALL display production history with workcenter filter
+The History sub-tab SHALL show production history data from `GET /api/query-tool/lot-history` with workcenter group filtering.
+
+#### Scenario: History table display
+- **WHEN** the user selects the History sub-tab for a LOT
+- **THEN** the system SHALL call `GET /api/query-tool/lot-history?container_id=X`
+- **THEN** results SHALL display in a table with sticky headers and horizontal scroll
+
+#### Scenario: Workcenter group filter
+- **WHEN** the user selects workcenter groups from the filter dropdown
+- **THEN** the history query SHALL include the selected groups as filter parameters
+- **THEN** the history table SHALL refresh with filtered results
+
+### Requirement: LOT Production Timeline SHALL visualize station progression over time
+The History sub-tab SHALL include a timeline visualization showing the lot's journey through production stations.
+
+#### Scenario: Timeline rendering
+- **WHEN** lot history data is loaded
+- **THEN** a horizontal Gantt-style timeline SHALL render with time on the X-axis
+- **THEN** each workcenter/station SHALL appear as a track with a colored bar from track-in to track-out time
+
+#### Scenario: Workcenter filter affects timeline
+- **WHEN** the user filters by workcenter groups
+- **THEN** the timeline SHALL show only stations matching the selected groups
+- **THEN** filtered-out stations SHALL be hidden (not grayed out)
+
+#### Scenario: Timeline event markers
+- **WHEN** hold events or material consumption events exist within the timeline range
+- **THEN** they SHALL be displayed as markers on the timeline with tooltip details on hover
+
+### Requirement: LOT Association sub-tabs SHALL load data on-demand
+Each association sub-tab (Materials, Rejects, Holds, Splits, Jobs) SHALL fetch data independently when activated.
+
+#### Scenario: Association data loading
+- **WHEN** the user activates a sub-tab (e.g., Materials)
+- **THEN** the system SHALL call `GET /api/query-tool/lot-associations?container_id=X&type=materials`
+- **THEN** results SHALL display in a table with dynamic columns
+
+#### Scenario: Sub-tab data caching within session
+- **WHEN** the user switches between sub-tabs for the same LOT
+- **THEN** previously loaded sub-tab data SHALL be preserved (not re-fetched)
+- **WHEN** the user selects a different LOT
+- **THEN** all sub-tab caches SHALL be cleared
+
+### Requirement: Each sub-tab SHALL support independent CSV export
+Every detail sub-tab SHALL have its own export button.
+
+#### Scenario: Per-tab export
+- **WHEN** the user clicks export on the Materials sub-tab
+- **THEN** the system SHALL call `POST /api/query-tool/export-csv` with `export_type: "lot_materials"` and the current container_id
+- **THEN** a CSV file SHALL download with the appropriate filename
+
+#### Scenario: Export disabled when no data
+- **WHEN** a sub-tab has no data loaded or the data is empty
+- **THEN** the export button SHALL be disabled
+
+### Requirement: Legacy dead code SHALL be removed
+The legacy `frontend/src/query-tool/main.js` (448L vanilla JS) and `frontend/src/query-tool/style.css` SHALL be deleted.
+
+#### Scenario: Dead code removal
+- **WHEN** the rewrite is complete
+- **THEN** `frontend/src/query-tool/main.js` SHALL contain only the Vite entry point (createApp + mount)
+- **THEN** `frontend/src/query-tool/style.css` SHALL be deleted (all styling via Tailwind)
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/timeline-chart/spec.md b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/timeline-chart/spec.md
new file mode 100644
index 0000000..651c5af
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/timeline-chart/spec.md
@@ -0,0 +1,50 @@
+## ADDED Requirements
+
+### Requirement: TimelineChart component SHALL render configurable Gantt-style timelines
+A shared `TimelineChart` component SHALL accept structured track/event data and render a horizontal timeline with SVG/CSS.
+
+#### Scenario: Basic track rendering
+- **WHEN** TimelineChart receives tracks with bars (each bar having start time, end time, type)
+- **THEN** it SHALL render a horizontal time axis and one row per track
+- **THEN** each bar SHALL be positioned proportionally along the time axis with width reflecting duration
+
+#### Scenario: Color mapping
+- **WHEN** bars have different `type` values
+- **THEN** each type SHALL be rendered with a color from the provided `colorMap` prop
+- **THEN** a legend SHALL be displayed showing type-to-color mapping
+
+#### Scenario: Event markers
+- **WHEN** the component receives events (point-in-time markers)
+- **THEN** each event SHALL render as a marker (diamond/triangle icon) at the corresponding time position on its track
+- **THEN** hovering over a marker SHALL display a tooltip with the event label and details
+
+#### Scenario: Time axis adapts to data range
+- **WHEN** the timeline data spans hours
+- **THEN** the time axis SHALL show hour ticks (e.g., 06:00, 07:00, ...)
+- **WHEN** the timeline data spans days
+- **THEN** the time axis SHALL show date ticks (e.g., 02-10, 02-11, ...)
+
+#### Scenario: Horizontal scroll for long timelines
+- **WHEN** the timeline data exceeds the visible width
+- **THEN** the component SHALL support horizontal scrolling
+- **THEN** track labels on the left SHALL remain fixed (sticky) during scroll
+
+#### Scenario: Bar tooltip on hover
+- **WHEN** the user hovers over a bar segment
+- **THEN** a tooltip SHALL display the bar's label, start time, end time, and duration
+
+### Requirement: TimelineChart SHALL support multi-layer overlapping tracks
+The component SHALL support rendering multiple bar layers on a single track row (e.g., status bars behind lot bars).
+
+#### Scenario: Overlapping layers
+- **WHEN** a track has multiple layers (e.g., `statusBars` and `lotBars`)
+- **THEN** background layer bars SHALL render behind foreground layer bars
+- **THEN** both layers SHALL be visible (foreground bars shorter in height or semi-transparent)
+
+### Requirement: TimelineChart SHALL have no external charting dependencies
+The component SHALL be implemented using only SVG elements and CSS, with no external charting library.
+
+#### Scenario: Zero additional dependencies
+- **WHEN** the TimelineChart component is used
+- **THEN** it SHALL NOT require any npm package not already in the project
+- **THEN** rendering SHALL use inline SVG elements within the Vue template
diff --git a/openspec/changes/archive/2026-02-13-query-tool-rewrite/tasks.md b/openspec/changes/archive/2026-02-13-query-tool-rewrite/tasks.md
new file mode 100644
index 0000000..fd102f4
--- /dev/null
+++ b/openspec/changes/archive/2026-02-13-query-tool-rewrite/tasks.md
@@ -0,0 +1,67 @@
+## 1. App Shell + Tab Layout
+
+- [x] 1.1 Rewrite `App.vue` as tab shell with "LOT 追蹤" and "設備查詢" top-level tabs using Tailwind (gradient header, tab buttons, active indicator)
+- [x] 1.2 Implement URL `?tab=lot|equipment` sync — persist and restore active tab on page load
+- [x] 1.3 Rewrite `main.js` to minimal Vite entry point (createApp + mount, ~5 lines)
+- [x] 1.4 Delete `style.css` — all styling via Tailwind from this point forward
+
+## 2. QueryBar + Resolve
+
+- [x] 2.1 Create `QueryBar.vue` — input type selector (lot_id/serial_number/work_order), multi-line textarea, resolve button, Tailwind styling consistent with other pages' FilterToolbar patterns
+- [x] 2.2 Create `useLotResolve.js` composable — input parsing (split by newline/comma), validation (empty check, max limits), `POST /api/query-tool/resolve` call, reactive state (`resolvedLots`, `notFound`, `loading.resolving`, `errorMessage`)
+- [x] 2.3 Wire QueryBar into `LotTraceView.vue` — resolve results feed into the lineage tree below
+
+## 3. Lineage Tree with Progressive Growth
+
+- [x] 3.1 Create `useLotLineage.js` composable — auto-fire lineage calls after resolve, concurrency limiter (max 3 concurrent), per-lot reactive cache (`lineageMap: Map<containerId, {ancestors, merges, loading, error}>`), expand/collapse state (`expandedNodes: Set`), cache clearing on new resolve, 429 backoff handling
+- [x] 3.2 Create `LineageNode.vue` recursive component — displays node label (container name, lot type icon for merge 🔀), expand/collapse toggle for non-leaf nodes, emits `select` event on click, highlight for selected node
+- [x] 3.3 Create `LineageTree.vue` — renders resolved lots as root nodes, wraps children in `<TransitionGroup>` for growth animation, "全部展開" / "收合" buttons, not-found warnings below tree
+- [x] 3.4 Implement CSS transitions for tree growth — `translateX(-16px)→0` + `opacity 0→1` enter transition, 30-50ms stagger via `transition-delay` on siblings, root nodes fade-in on resolve
+
+## 4. Left-Right Master-Detail Layout
+
+- [x] 4.1 Create `LotTraceView.vue` — left-right split layout (left panel ~280-300px for lineage tree, right panel fills remaining), responsive stacking below 1024px
+- [x] 4.2 Create `LotDetail.vue` — right panel container with sub-tab bar (歷程, 物料, 退貨, Hold, Split, Job), active tab indicator, on-demand data loading when tab activated, contextual error display
+- [x] 4.3 Wire tree node selection → right panel detail loading — clicking any node in LineageTree sets `selectedContainerId` and triggers active sub-tab data fetch
+
+## 5. LOT Detail Sub-tabs
+
+- [x] 5.1 Create `useLotDetail.js` composable — manages `activeSubTab`, per-tab data cache (invalidated on lot change), `GET /api/query-tool/lot-history` with workcenter group filter, `GET /api/query-tool/lot-associations?type=X` for each association type, loading/error state per sub-tab
+- [x] 5.2 Create `LotHistoryTable.vue` — production history table with sticky headers, workcenter group MultiSelect filter, dynamic columns, horizontal scroll
+- [x] 5.3 Create `LotAssociationTable.vue` — shared table component for materials/rejects/holds/splits/jobs, dynamic columns from response, empty state message
+- [x] 5.4 Add per-sub-tab `ExportButton.vue` — calls `POST /api/query-tool/export-csv` with appropriate `export_type` and `container_id`, disabled when no data, download blob as CSV
+
+## 6. TimelineChart Shared Component
+
+- [x] 6.1 Create `TimelineChart.vue` — props interface (`tracks`, `events`, `timeRange`, `colorMap`), SVG rendering with horizontal time axis, auto-scaled ticks (hour/day granularity), sticky left track labels
+- [x] 6.2 Implement multi-layer bar rendering — background layer behind foreground layer per track, proportional positioning from time range, color from colorMap
+- [x] 6.3 Implement event markers — diamond/triangle SVG icons at time positions, hover tooltip with event label and detail
+- [x] 6.4 Implement horizontal scroll container — overflow-x scroll wrapper, sticky label column, responsive width
+
+## 7. LOT Production Timeline
+
+- [x] 7.1 Create `LotTimeline.vue` — maps lot-history rows to TimelineChart tracks (one track per WORKCENTERNAME, bars from TRACKINTIMESTAMP to TRACKOUTTIMESTAMP), respects workcenter group filter
+- [x] 7.2 Overlay hold/material event markers on timeline — fetches hold events and material consumption events, renders as markers on corresponding time positions
+- [x] 7.3 Integrate into History sub-tab — timeline renders above or alongside the history table, shares the workcenter filter state
+
+## 8. Equipment Tab
+
+- [x] 8.1 Create `EquipmentView.vue` — filter bar (MultiSelect for equipment, date range inputs, query button), sub-tab bar (生產紀錄, 維修紀錄, 報廢紀錄, Timeline), shared filter state across sub-tabs
+- [x] 8.2 Create `useEquipmentQuery.js` composable — equipment list bootstrap from `GET /api/query-tool/equipment-list`, date range default (last 30 days), `POST /api/query-tool/equipment-period` calls per query type, loading/error per sub-tab, URL state sync for equipment_ids + dates
+- [x] 8.3 Create `EquipmentLotsTable.vue` — production lots table (CONTAINERID, SPECNAME, TRACK_IN/OUT, QTY, EQUIPMENTNAME), sticky headers, export button
+- [x] 8.4 Create `EquipmentJobsPanel.vue` — maintenance job table (JOBID, STATUS, CAUSECODENAME, REPAIRCODENAME, SYMPTOMCODENAME, dates), expandable row detail (employee names, secondary codes, CONTAINERNAMES), export button
+- [x] 8.5 Create `EquipmentRejectsTable.vue` — scrap records table (EQUIPMENTNAME, LOSSREASONNAME, TOTAL_REJECT_QTY, TOTAL_DEFECT_QTY, AFFECTED_LOT_COUNT), export button
+
+## 9. Equipment Timeline
+
+- [x] 9.1 Create `EquipmentTimeline.vue` — composes 3 data sources (status_hours + lots + jobs) into TimelineChart tracks, fires 3 API calls in parallel, one track per equipment
+- [x] 9.2 Map status data to background layer bars — PRD=green, SBY=amber, UDT=red, SDT=blue-gray
+- [x] 9.3 Map lot data to foreground layer bars — lot processing bars from track-in to track-out
+- [x] 9.4 Map maintenance jobs to event markers — JOBID + CAUSECODENAME as label, tooltip with full detail
+
+## 10. Polish + Cleanup
+
+- [x] 10.1 Full URL state sync — all filter values (tab, input_type, container_id, workcenter_groups, equipment_ids, dates, sub-tabs) persisted to URL and restored on page load via `useQueryState` or custom sync
+- [x] 10.2 Responsive layout testing — verify left-right split stacks correctly below 1024px, tab layout works on mobile, timeline horizontal scroll works on touch
+- [x] 10.3 Delete dead code — remove old monolithic `useQueryToolData.js`, verify no imports reference deleted files
+- [x] 10.4 Visual consistency audit — verify gradient header, button styles, table styles, card borders match other modernized pages (wip-detail, hold-detail, mid-section-defect)
diff --git a/openspec/changes/reject-history-query-page/.openspec.yaml b/openspec/changes/reject-history-query-page/.openspec.yaml
new file mode 100644
index 0000000..e99c55a
--- /dev/null
+++ b/openspec/changes/reject-history-query-page/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-13
diff --git a/openspec/changes/reject-history-query-page/proposal.md b/openspec/changes/reject-history-query-page/proposal.md
new file mode 100644
index 0000000..e834515
--- /dev/null
+++ b/openspec/changes/reject-history-query-page/proposal.md
@@ -0,0 +1,46 @@
+## Why
+
+目前專案只有在 `query-tool` 的設備子頁籤提供報廢相關查詢，缺少一個可長期追蹤「報廢歷史」的專用報表頁。隨著既有架構已完成 portal-shell、route contract、Vite 多頁治理，現在適合用同一套架構新增 `報廢歷史查詢`，避免再引入獨立樣式或旁路流程。
+
+## What Changes
+
+- 新增 `報廢歷史查詢` 頁面路由 `/reject-history`，採用既有 pure Vite + portal-shell native route 模式。
+- 新增後端 `reject-history` API 群組（摘要、趨勢、原因 Pareto、明細、匯出），提供前端報表所需資料。
+- 新增 `reject-history` service + SQL 模組，統一計算：
+  - 扣帳報廢：`REJECT_TOTAL_QTY = REJECTQTY + STANDBYQTY + QTYTOPROCESS + INPROCESSQTY + PROCESSEDQTY`
+  - 不扣帳報廢：`DEFECT_QTY = DEFECTQTY`
+- 將新頁面納入既有導航與契約治理（page registry、drawer、routeContracts、nativeModuleRegistry、shell coverage）。
+- 補齊對應測試（API/服務單元測試、route contract 治理測試、必要的頁面整合測試）。
+
+## Capabilities
+
+### New Capabilities
+- `reject-history-page`: 新增報廢歷史查詢頁面，提供篩選、KPI、趨勢、原因分析與明細查詢/匯出。
+- `reject-history-api`: 新增報廢歷史 API 能力與資料聚合邏輯，定義扣帳報廢與不扣帳報廢的並列指標語義。
+
+### Modified Capabilities
+- `unified-shell-route-coverage`: 新增 `/reject-history` 後，路由契約清單與前後端契約對照規則需同步更新。
+- `vue-vite-page-architecture`: 新頁面需納入 Vite entry/output 與 Flask static HTML 服務規範，保持既有純 Vite 頁治理一致性。
+
+## Impact
+
+- 前端：
+  - 新增 `frontend/src/reject-history/`（`App.vue`、`main.js`/`index.html`、components、composables、style）
+  - 更新 `frontend/src/portal-shell/nativeModuleRegistry.js`
+  - 更新 `frontend/src/portal-shell/routeContracts.js`
+  - 更新 `frontend/vite.config.js`
+- 後端：
+  - 新增 `src/mes_dashboard/routes/reject_history_routes.py`
+  - 新增 `src/mes_dashboard/services/reject_history_service.py`
+  - 新增 `src/mes_dashboard/sql/reject_history/*.sql`
+  - 更新 `src/mes_dashboard/routes/__init__.py`
+  - 更新 `src/mes_dashboard/app.py`（`/reject-history` 靜態頁 route）
+- 導航/治理：
+  - 更新 `data/page_status.json`（drawer 與頁面可見性）
+  - 更新 shell route contract 對應治理資產與測試基準
+- 測試：
+  - 新增 `tests/test_reject_history_service.py`
+  - 新增 `tests/test_reject_history_routes.py`
+  - 補充 route coverage / contract parity / e2e smoke
+- 依賴：
+  - 不新增第三方套件，沿用現有 Flask + Vue + Vite + SQLLoader + QueryBuilder 架構
diff --git a/openspec/specs/progressive-trace-ux/spec.md b/openspec/specs/progressive-trace-ux/spec.md
index 553e66b..16c6231 100644
--- a/openspec/specs/progressive-trace-ux/spec.md
+++ b/openspec/specs/progressive-trace-ux/spec.md
@@ -1,64 +1,16 @@
-## ADDED Requirements
-
-### Requirement: useTraceProgress composable SHALL orchestrate staged fetching with reactive state
-`useTraceProgress` SHALL provide a shared composable for sequential stage fetching with per-stage reactive state updates.
-
-#### Scenario: Normal three-stage fetch sequence
-- **WHEN** `useTraceProgress` is invoked with profile and params
-- **THEN** it SHALL execute seed-resolve → lineage → events sequentially
-- **THEN** after each stage completes, `current_stage` and `completed_stages` reactive refs SHALL update immediately
-- **THEN** `stage_results` SHALL accumulate results from completed stages
-
-#### Scenario: Stage failure does not block completed results
-- **WHEN** the lineage stage fails after seed-resolve has completed
-- **THEN** seed-resolve results SHALL remain visible and accessible
-- **THEN** the error SHALL be captured in stage-specific error state
-- **THEN** subsequent stages (events) SHALL NOT execute
-
-### Requirement: mid-section-defect SHALL render progressively as stages complete
-The mid-section-defect page SHALL display partial results as each trace stage completes.
-
-#### Scenario: Seed lots visible before lineage completes
-- **WHEN** seed-resolve stage completes (≤3s for ≥10 seed lots)
-- **THEN** the seed lots list SHALL be rendered immediately
-- **THEN** lineage and events sections SHALL show skeleton placeholders
-
-#### Scenario: KPI/charts visible after events complete
-- **WHEN** lineage and events stages complete
-- **THEN** KPI cards and charts SHALL render with fade-in animation
-- **THEN** no layout shift SHALL occur (skeleton placeholders SHALL have matching dimensions)
-
-#### Scenario: Detail table pagination unchanged
-- **WHEN** the user requests detail data
-- **THEN** the existing detail endpoint with pagination SHALL be used (not the staged API)
+## MODIFIED Requirements
 
 ### Requirement: query-tool lineage tab SHALL load on-demand
-The query-tool lineage tab SHALL load lineage data for individual lots on user interaction, not batch-load all lots.
+The query-tool lineage tree SHALL auto-fire lineage API calls after lot resolution with concurrency-limited parallel requests and progressive rendering, while preserving on-demand expand/collapse for tree navigation.
 
-#### Scenario: User clicks a lot to view lineage
-- **WHEN** the user clicks a lot card to expand lineage information
-- **THEN** lineage SHALL be fetched via `/api/trace/lineage` for that single lot's container IDs
-- **THEN** response time SHALL be ≤3s for the individual lot
+#### Scenario: Auto-fire lineage after resolve
+- **WHEN** lot resolution completes with N resolved lots
+- **THEN** lineage SHALL be fetched via `POST /api/trace/lineage` for each lot automatically
+- **THEN** concurrent requests SHALL be limited to 3 at a time to respect rate limits (10/60s)
+- **THEN** response time SHALL be ≤3s per individual lot
 
-#### Scenario: Multiple lots expanded
-- **WHEN** the user expands lineage for multiple lots
-- **THEN** each lot's lineage SHALL be fetched independently (not batch)
-- **THEN** already-fetched lineage data SHALL be preserved (not re-fetched)
-
-### Requirement: Both pages SHALL display a stage progress indicator
-Both mid-section-defect and query-tool SHALL display a progress indicator showing the current trace stage.
-
-#### Scenario: Progress indicator during staged fetch
-- **WHEN** a trace query is in progress
-- **THEN** a progress indicator SHALL display the current stage (seed → lineage → events)
-- **THEN** completed stages SHALL be visually distinct from pending/active stages
-- **THEN** the indicator SHALL replace the existing single loading spinner
-
-### Requirement: Legacy static query-tool.js SHALL be removed
-The pre-Vite static file `src/mes_dashboard/static/js/query-tool.js` (3056L, 126KB) SHALL be deleted as dead code.
-
-#### Scenario: Dead code removal verification
-- **WHEN** `static/js/query-tool.js` is deleted
-- **THEN** grep for `static/js/query-tool.js` SHALL return zero results across the codebase
-- **THEN** `query_tool.html` template SHALL continue to function via `frontend_asset('query-tool.js')` which resolves to the Vite-built bundle
-- **THEN** `frontend/src/query-tool/main.js` (Vue 3 Vite entry) SHALL remain unaffected
+#### Scenario: Multiple lots lineage results cached
+- **WHEN** lineage data has been fetched for multiple lots
+- **THEN** each lot's lineage data SHALL be preserved independently (not re-fetched)
+- **WHEN** a new resolve query is executed
+- **THEN** all cached lineage data SHALL be cleared
diff --git a/openspec/specs/query-tool-equipment/spec.md b/openspec/specs/query-tool-equipment/spec.md
new file mode 100644
index 0000000..8f03d42
--- /dev/null
+++ b/openspec/specs/query-tool-equipment/spec.md
@@ -0,0 +1,72 @@
+## ADDED Requirements
+
+### Requirement: Equipment tab SHALL provide equipment selection with date range filtering
+The equipment tab SHALL allow selecting multiple equipment and a date range for all sub-tab queries.
+
+#### Scenario: Equipment and date selection
+- **WHEN** the user opens the equipment tab
+- **THEN** a MultiSelect dropdown SHALL list available equipment from `GET /api/query-tool/equipment-list`
+- **THEN** date inputs SHALL default to the last 30 days
+- **THEN** a query button SHALL trigger data loading for the active sub-tab
+
+#### Scenario: Shared filter state across sub-tabs
+- **WHEN** the user selects equipment and date range then switches sub-tabs
+- **THEN** the filter values SHALL persist across all equipment sub-tabs
+- **THEN** switching to a new sub-tab with the same filters SHALL trigger a fresh query for that sub-tab's data type
+
+### Requirement: Equipment Production Lots sub-tab SHALL display lots processed by selected equipment
+The Production Lots sub-tab SHALL show all lots processed on the selected equipment within the date range.
+
+#### Scenario: Production lots query
+- **WHEN** the user queries with selected equipment and date range
+- **THEN** the system SHALL call `POST /api/query-tool/equipment-period` with `query_type: "lots"`
+- **THEN** results SHALL display in a table showing CONTAINERID, SPECNAME, TRACK_IN, TRACK_OUT, QTY, EQUIPMENTNAME
+
+#### Scenario: Partial track-out handling
+- **WHEN** a lot has multiple track-out records (partial processing)
+- **THEN** all records SHALL be displayed (not deduplicated)
+
+### Requirement: Equipment Maintenance sub-tab SHALL display maintenance job records with expandable detail
+The Maintenance sub-tab SHALL show maintenance jobs from `DW_MES_JOB` with cause/repair/symptom codes.
+
+#### Scenario: Maintenance job list
+- **WHEN** the user queries maintenance records
+- **THEN** the system SHALL call `POST /api/query-tool/equipment-period` with `query_type: "jobs"`
+- **THEN** results SHALL display: JOBID, STATUS, CAUSECODENAME, REPAIRCODENAME, SYMPTOMCODENAME, CREATE/COMPLETE dates
+
+#### Scenario: Job detail expansion
+- **WHEN** the user clicks on a maintenance job row
+- **THEN** the row SHALL expand to show full detail including employee names, secondary codes, and related lot IDs (CONTAINERNAMES)
+
+### Requirement: Equipment Scrap sub-tab SHALL display reject/defect records
+The Scrap sub-tab SHALL show reject statistics grouped by loss reason for the selected equipment and date range.
+
+#### Scenario: Scrap records query
+- **WHEN** the user queries scrap records
+- **THEN** the system SHALL call `POST /api/query-tool/equipment-period` with `query_type: "rejects"`
+- **THEN** results SHALL display: EQUIPMENTNAME, LOSSREASONNAME, TOTAL_REJECT_QTY, TOTAL_DEFECT_QTY, AFFECTED_LOT_COUNT
+
+### Requirement: Equipment Timeline sub-tab SHALL visualize equipment activity over time
+The Timeline sub-tab SHALL render a Gantt-style timeline showing equipment status, lots processed, and maintenance events.
+
+#### Scenario: Multi-layer timeline rendering
+- **WHEN** the user views the equipment timeline
+- **THEN** the timeline SHALL overlay three data layers: status bars (PRD/SBY/UDT/SDT), lot processing bars, and maintenance event markers
+- **THEN** each equipment SHALL appear as a separate track row
+
+#### Scenario: Status color coding
+- **WHEN** the timeline renders status bars
+- **THEN** PRD SHALL be green, SBY SHALL be amber, UDT SHALL be red, SDT SHALL be blue-gray
+- **THEN** a legend SHALL be displayed showing the color mapping
+
+#### Scenario: Maintenance marker interaction
+- **WHEN** the user hovers over or clicks a maintenance event marker on the timeline
+- **THEN** a tooltip or expanded panel SHALL show the job detail (CAUSECODENAME, REPAIRCODENAME, SYMPTOMCODENAME)
+
+### Requirement: Each equipment sub-tab SHALL support CSV export
+Every equipment sub-tab SHALL have its own export button calling the existing export API.
+
+#### Scenario: Equipment CSV export
+- **WHEN** the user clicks export on any equipment sub-tab
+- **THEN** the system SHALL call `POST /api/query-tool/export-csv` with the appropriate `export_type` (equipment_lots, equipment_jobs, equipment_rejects)
+- **THEN** the exported params SHALL include the current equipment_ids/equipment_names and date range
diff --git a/openspec/specs/query-tool-lot-trace/spec.md b/openspec/specs/query-tool-lot-trace/spec.md
new file mode 100644
index 0000000..2ad18f0
--- /dev/null
+++ b/openspec/specs/query-tool-lot-trace/spec.md
@@ -0,0 +1,152 @@
+## ADDED Requirements
+
+### Requirement: Query-tool page SHALL use tab-based layout separating LOT tracing from equipment queries
+The query-tool page SHALL present two top-level tabs: "LOT 追蹤" and "設備查詢", each with independent state and UI.
+
+#### Scenario: Tab switching preserves state
+- **WHEN** the user switches from LOT tab to Equipment tab and back
+- **THEN** the LOT tab SHALL retain its resolved lots, lineage tree state, and selected lot detail
+- **THEN** the Equipment tab SHALL retain its query results independently
+
+#### Scenario: URL state reflects active tab
+- **WHEN** the user is on a specific tab
+- **THEN** the URL SHALL include a `tab` parameter (e.g., `?tab=lot` or `?tab=equipment`)
+- **THEN** reloading the page SHALL restore the active tab
+
+### Requirement: QueryBar SHALL resolve LOT/Serial/WorkOrder inputs
+The query bar SHALL accept multi-value input (newline or comma-separated) with input type selection and resolve via `POST /api/query-tool/resolve`.
+
+#### Scenario: Successful LOT resolution
+- **WHEN** the user enters lot IDs and clicks resolve
+- **THEN** the system SHALL call `POST /api/query-tool/resolve` with `input_type` and `values`
+- **THEN** resolved lots SHALL appear as root nodes in the lineage tree
+- **THEN** not-found values SHALL be displayed as warnings below the tree
+
+#### Scenario: Work order expansion
+- **WHEN** the user enters work order IDs (max 10)
+- **THEN** each work order MAY expand to 100+ lots
+- **THEN** all expanded lots SHALL appear as root nodes in the lineage tree
+
+#### Scenario: Input validation
+- **WHEN** the user submits empty input or exceeds limits (50 lot IDs, 50 serial numbers, 10 work orders)
+- **THEN** the system SHALL display a validation error without making an API call
+
+### Requirement: LineageTree SHALL display as a decomposition tree with progressive growth animation
+After resolve completes, the lineage tree SHALL auto-fire lineage API calls for each resolved lot with concurrency control, rendering an animated tree that grows as results arrive.
+
+#### Scenario: Auto-fire lineage after resolve
+- **WHEN** lot resolution completes with N resolved lots
+- **THEN** the system SHALL automatically call `POST /api/trace/lineage` for each lot
+- **THEN** concurrent lineage requests SHALL be limited to 3 at a time
+- **THEN** the lineage tree SHALL render root nodes immediately (resolved lots)
+
+#### Scenario: Progressive tree growth animation
+- **WHEN** a lineage API response returns for a lot
+- **THEN** ancestor nodes SHALL animate into the tree (slide-in + fade, staggered 30-50ms per sibling)
+- **THEN** the animation SHALL give the visual impression of a tree "growing" its branches
+
+#### Scenario: Tree node expand/collapse
+- **WHEN** the user clicks a tree node with children (ancestors)
+- **THEN** children SHALL toggle between expanded and collapsed state
+- **THEN** expand/collapse SHALL be a client-side operation (no additional API call)
+
+#### Scenario: Expand-all and collapse-all
+- **WHEN** the user clicks "全部展開"
+- **THEN** all tree nodes at all levels SHALL expand with staggered animation
+- **WHEN** the user clicks "收合"
+- **THEN** all tree nodes SHALL collapse to show only root nodes
+
+#### Scenario: Merge relationships visually distinct
+- **WHEN** the lineage data includes merge relationships
+- **THEN** merge nodes SHALL display a distinct icon and/or color to differentiate from direct ancestor relationships
+
+#### Scenario: Leaf nodes without expand affordance
+- **WHEN** a tree node has no ancestors (leaf/terminal node)
+- **THEN** it SHALL NOT display an expand button or clickable expand area
+
+#### Scenario: Lineage cache prevents duplicate fetches
+- **WHEN** lineage data has already been fetched for a lot
+- **THEN** subsequent interactions SHALL use cached data without re-fetching
+- **WHEN** a new resolve query is executed
+- **THEN** the lineage cache SHALL be cleared
+
+### Requirement: Left-right master-detail layout SHALL show tree and LOT detail side by side
+The LOT tracing tab SHALL use a left-right split layout with the lineage tree on the left and LOT detail on the right.
+
+#### Scenario: LOT selection from tree
+- **WHEN** the user clicks any node in the lineage tree (root lot or ancestor)
+- **THEN** the right panel SHALL load detail for that node's container ID
+- **THEN** the selected node SHALL be visually highlighted in the tree
+
+#### Scenario: Right panel sub-tabs
+- **WHEN** a LOT is selected
+- **THEN** the right panel SHALL display sub-tabs: 歷程 (History), 物料 (Materials), 退貨 (Rejects), Hold, Split, Job
+- **THEN** each sub-tab SHALL load data on-demand when activated (not pre-fetched)
+
+#### Scenario: Responsive behavior
+- **WHEN** the viewport width is below 1024px
+- **THEN** the layout SHALL stack vertically (tree above, detail below)
+
+### Requirement: LOT History sub-tab SHALL display production history with workcenter filter
+The History sub-tab SHALL show production history data from `GET /api/query-tool/lot-history` with workcenter group filtering.
+
+#### Scenario: History table display
+- **WHEN** the user selects the History sub-tab for a LOT
+- **THEN** the system SHALL call `GET /api/query-tool/lot-history?container_id=X`
+- **THEN** results SHALL display in a table with sticky headers and horizontal scroll
+
+#### Scenario: Workcenter group filter
+- **WHEN** the user selects workcenter groups from the filter dropdown
+- **THEN** the history query SHALL include the selected groups as filter parameters
+- **THEN** the history table SHALL refresh with filtered results
+
+### Requirement: LOT Production Timeline SHALL visualize station progression over time
+The History sub-tab SHALL include a timeline visualization showing the lot's journey through production stations.
+
+#### Scenario: Timeline rendering
+- **WHEN** lot history data is loaded
+- **THEN** a horizontal Gantt-style timeline SHALL render with time on the X-axis
+- **THEN** each workcenter/station SHALL appear as a track with a colored bar from track-in to track-out time
+
+#### Scenario: Workcenter filter affects timeline
+- **WHEN** the user filters by workcenter groups
+- **THEN** the timeline SHALL show only stations matching the selected groups
+- **THEN** filtered-out stations SHALL be hidden (not grayed out)
+
+#### Scenario: Timeline event markers
+- **WHEN** hold events or material consumption events exist within the timeline range
+- **THEN** they SHALL be displayed as markers on the timeline with tooltip details on hover
+
+### Requirement: LOT Association sub-tabs SHALL load data on-demand
+Each association sub-tab (Materials, Rejects, Holds, Splits, Jobs) SHALL fetch data independently when activated.
+
+#### Scenario: Association data loading
+- **WHEN** the user activates a sub-tab (e.g., Materials)
+- **THEN** the system SHALL call `GET /api/query-tool/lot-associations?container_id=X&type=materials`
+- **THEN** results SHALL display in a table with dynamic columns
+
+#### Scenario: Sub-tab data caching within session
+- **WHEN** the user switches between sub-tabs for the same LOT
+- **THEN** previously loaded sub-tab data SHALL be preserved (not re-fetched)
+- **WHEN** the user selects a different LOT
+- **THEN** all sub-tab caches SHALL be cleared
+
+### Requirement: Each sub-tab SHALL support independent CSV export
+Every detail sub-tab SHALL have its own export button.
+
+#### Scenario: Per-tab export
+- **WHEN** the user clicks export on the Materials sub-tab
+- **THEN** the system SHALL call `POST /api/query-tool/export-csv` with `export_type: "lot_materials"` and the current container_id
+- **THEN** a CSV file SHALL download with the appropriate filename
+
+#### Scenario: Export disabled when no data
+- **WHEN** a sub-tab has no data loaded or the data is empty
+- **THEN** the export button SHALL be disabled
+
+### Requirement: Legacy dead code SHALL be removed
+The legacy `frontend/src/query-tool/main.js` (448L vanilla JS) and `frontend/src/query-tool/style.css` SHALL be deleted.
+
+#### Scenario: Dead code removal
+- **WHEN** the rewrite is complete
+- **THEN** `frontend/src/query-tool/main.js` SHALL contain only the Vite entry point (createApp + mount)
+- **THEN** `frontend/src/query-tool/style.css` SHALL be deleted (all styling via Tailwind)
diff --git a/openspec/specs/timeline-chart/spec.md b/openspec/specs/timeline-chart/spec.md
new file mode 100644
index 0000000..651c5af
--- /dev/null
+++ b/openspec/specs/timeline-chart/spec.md
@@ -0,0 +1,50 @@
+## ADDED Requirements
+
+### Requirement: TimelineChart component SHALL render configurable Gantt-style timelines
+A shared `TimelineChart` component SHALL accept structured track/event data and render a horizontal timeline with SVG/CSS.
+
+#### Scenario: Basic track rendering
+- **WHEN** TimelineChart receives tracks with bars (each bar having start time, end time, type)
+- **THEN** it SHALL render a horizontal time axis and one row per track
+- **THEN** each bar SHALL be positioned proportionally along the time axis with width reflecting duration
+
+#### Scenario: Color mapping
+- **WHEN** bars have different `type` values
+- **THEN** each type SHALL be rendered with a color from the provided `colorMap` prop
+- **THEN** a legend SHALL be displayed showing type-to-color mapping
+
+#### Scenario: Event markers
+- **WHEN** the component receives events (point-in-time markers)
+- **THEN** each event SHALL render as a marker (diamond/triangle icon) at the corresponding time position on its track
+- **THEN** hovering over a marker SHALL display a tooltip with the event label and details
+
+#### Scenario: Time axis adapts to data range
+- **WHEN** the timeline data spans hours
+- **THEN** the time axis SHALL show hour ticks (e.g., 06:00, 07:00, ...)
+- **WHEN** the timeline data spans days
+- **THEN** the time axis SHALL show date ticks (e.g., 02-10, 02-11, ...)
+
+#### Scenario: Horizontal scroll for long timelines
+- **WHEN** the timeline data exceeds the visible width
+- **THEN** the component SHALL support horizontal scrolling
+- **THEN** track labels on the left SHALL remain fixed (sticky) during scroll
+
+#### Scenario: Bar tooltip on hover
+- **WHEN** the user hovers over a bar segment
+- **THEN** a tooltip SHALL display the bar's label, start time, end time, and duration
+
+### Requirement: TimelineChart SHALL support multi-layer overlapping tracks
+The component SHALL support rendering multiple bar layers on a single track row (e.g., status bars behind lot bars).
+
+#### Scenario: Overlapping layers
+- **WHEN** a track has multiple layers (e.g., `statusBars` and `lotBars`)
+- **THEN** background layer bars SHALL render behind foreground layer bars
+- **THEN** both layers SHALL be visible (foreground bars shorter in height or semi-transparent)
+
+### Requirement: TimelineChart SHALL have no external charting dependencies
+The component SHALL be implemented using only SVG elements and CSS, with no external charting library.
+
+#### Scenario: Zero additional dependencies
+- **WHEN** the TimelineChart component is used
+- **THEN** it SHALL NOT require any npm package not already in the project
+- **THEN** rendering SHALL use inline SVG elements within the Vue template
diff --git a/src/mes_dashboard/routes/trace_routes.py b/src/mes_dashboard/routes/trace_routes.py
index 9d7e193..4a16a7d 100644
--- a/src/mes_dashboard/routes/trace_routes.py
+++ b/src/mes_dashboard/routes/trace_routes.py
@@ -34,6 +34,7 @@ logger = logging.getLogger("mes_dashboard.trace_routes")
 trace_bp = Blueprint("trace", __name__, url_prefix="/api/trace")
 
 TRACE_STAGE_TIMEOUT_SECONDS = 10.0
+TRACE_LINEAGE_TIMEOUT_SECONDS = 60.0
 TRACE_CACHE_TTL_SECONDS = 300
 
 PROFILE_QUERY_TOOL = "query_tool"
@@ -220,7 +221,13 @@ def _seed_resolve_mid_section_defect(
     return result, None
 
 
-def _build_lineage_response(container_ids: List[str], ancestors_raw: Dict[str, Any]) -> Dict[str, Any]:
+def _build_lineage_response(
+    container_ids: List[str],
+    ancestors_raw: Dict[str, Any],
+    cid_to_name: Optional[Dict[str, str]] = None,
+    parent_map: Optional[Dict[str, List[str]]] = None,
+    merge_edges: Optional[Dict[str, List[str]]] = None,
+) -> Dict[str, Any]:
     normalized_ancestors: Dict[str, List[str]] = {}
     all_nodes = set(container_ids)
     for seed in container_ids:
@@ -234,12 +241,28 @@ def _build_lineage_response(container_ids: List[str], ancestors_raw: Dict[str, A
         normalized_ancestors[seed] = normalized_list
         all_nodes.update(normalized_list)
 
-    return {
+    response: Dict[str, Any] = {
         "stage": "lineage",
         "ancestors": normalized_ancestors,
         "merges": {},
         "total_nodes": len(all_nodes),
     }
+    if cid_to_name:
+        response["names"] = {
+            cid: name for cid, name in cid_to_name.items()
+            if cid in all_nodes and name
+        }
+    if parent_map:
+        response["parent_map"] = {
+            child: parents for child, parents in parent_map.items()
+            if child in all_nodes
+        }
+    if merge_edges:
+        response["merge_edges"] = {
+            child: sources for child, sources in merge_edges.items()
+            if child in all_nodes
+        }
+    return response
 
 
 def _flatten_domain_records(events_by_cid: Dict[str, List[Dict[str, Any]]]) -> List[Dict[str, Any]]:
@@ -382,7 +405,7 @@ def lineage():
 
     started = time.monotonic()
     try:
-        ancestors_raw = LineageEngine.resolve_full_genealogy(container_ids)
+        forward_tree = LineageEngine.resolve_forward_tree(container_ids)
     except Exception as exc:
         if _is_timeout_exception(exc):
             return _error("LINEAGE_TIMEOUT", "lineage query timed out", 504)
@@ -390,10 +413,18 @@ def lineage():
         return _error("LINEAGE_FAILED", "lineage stage failed", 500)
 
     elapsed = time.monotonic() - started
-    if elapsed > TRACE_STAGE_TIMEOUT_SECONDS:
+    if elapsed > TRACE_LINEAGE_TIMEOUT_SECONDS:
         return _error("LINEAGE_TIMEOUT", "lineage query timed out", 504)
 
-    response = _build_lineage_response(container_ids, ancestors_raw)
+    cid_to_name = forward_tree.get("cid_to_name") or {}
+    response: Dict[str, Any] = {
+        "stage": "lineage",
+        "roots": forward_tree.get("roots", []),
+        "children_map": forward_tree.get("children_map", {}),
+        "leaf_serials": forward_tree.get("leaf_serials", {}),
+        "names": {cid: name for cid, name in cid_to_name.items() if name},
+        "total_nodes": forward_tree.get("total_nodes", 0),
+    }
     cache_set(lineage_cache_key, response, ttl=TRACE_CACHE_TTL_SECONDS)
     return jsonify(response)
 
diff --git a/src/mes_dashboard/services/lineage_engine.py b/src/mes_dashboard/services/lineage_engine.py
index 82ec0b1..82b91cc 100644
--- a/src/mes_dashboard/services/lineage_engine.py
+++ b/src/mes_dashboard/services/lineage_engine.py
@@ -41,6 +41,44 @@ def _safe_str(value: Any) -> Optional[str]:
     return value if value else None
 
 
+def _build_parent_map(
+    child_to_parent: Dict[str, str],
+    merge_child_to_parent: Dict[str, str],
+    merge_source_map: Dict[str, List[str]],
+    cid_to_name: Dict[str, str],
+) -> tuple:
+    """Build per-node direct parent lists and merge edge lists.
+
+    Returns:
+        (parent_map, merge_edges) where:
+        - parent_map: {child_cid: [direct_parent_cids]}
+        - merge_edges: {child_cid: [merge_source_cids]}
+    """
+    parent_map: Dict[str, List[str]] = defaultdict(list)
+    merge_edges: Dict[str, List[str]] = defaultdict(list)
+
+    for child, parent in child_to_parent.items():
+        parent_map[child].append(parent)
+
+    for child, parent in merge_child_to_parent.items():
+        if parent not in parent_map[child]:
+            parent_map[child].append(parent)
+
+    if merge_source_map and cid_to_name:
+        name_to_cids: Dict[str, List[str]] = defaultdict(list)
+        for cid, name in cid_to_name.items():
+            name_to_cids[name].append(cid)
+
+        for name, source_cids in merge_source_map.items():
+            for owner_cid in name_to_cids.get(name, []):
+                for source_cid in source_cids:
+                    if source_cid != owner_cid and source_cid not in parent_map[owner_cid]:
+                        parent_map[owner_cid].append(source_cid)
+                        merge_edges[owner_cid].append(source_cid)
+
+    return dict(parent_map), dict(merge_edges)
+
+
 class LineageEngine:
     """Unified split/merge genealogy resolver."""
 
@@ -148,19 +186,211 @@ class LineageEngine:
         )
         return mapped
 
+    @staticmethod
+    def resolve_split_descendants(
+        root_cids: List[str],
+    ) -> Dict[str, Any]:
+        """Resolve split lineage downward from root(s) via CONNECT BY.
+
+        Returns:
+            {
+                "children_map": {parent_cid: [child_cids]},
+                "cid_to_name": {cid: container_name},
+            }
+        """
+        normalized_roots = _normalize_list(root_cids)
+        children_map: Dict[str, List[str]] = defaultdict(list)
+        cid_to_name: Dict[str, str] = {}
+
+        if not normalized_roots:
+            return {"children_map": dict(children_map), "cid_to_name": cid_to_name}
+
+        for i in range(0, len(normalized_roots), ORACLE_IN_BATCH_SIZE):
+            batch = normalized_roots[i:i + ORACLE_IN_BATCH_SIZE]
+            builder = QueryBuilder()
+            builder.add_in_condition("c.CONTAINERID", batch)
+
+            sql = SQLLoader.load_with_params(
+                "lineage/split_descendants",
+                ROOT_FILTER=builder.get_conditions_sql(),
+            )
+
+            df = read_sql_df(sql, builder.params)
+            if df is None or df.empty:
+                continue
+
+            for _, row in df.iterrows():
+                cid = _safe_str(row.get("CONTAINERID"))
+                if not cid:
+                    continue
+
+                name = _safe_str(row.get("CONTAINERNAME"))
+                if name:
+                    cid_to_name[cid] = name
+
+                depth_raw = row.get("SPLIT_DEPTH")
+                depth = int(depth_raw) if depth_raw is not None else 0
+                if depth > MAX_SPLIT_DEPTH:
+                    continue
+
+                parent = _safe_str(row.get("SPLITFROMID"))
+                if parent and parent != cid:
+                    if cid not in children_map[parent]:
+                        children_map[parent].append(cid)
+
+        logger.info(
+            "Split descendant resolution completed: roots=%s, edges=%s, names=%s",
+            len(normalized_roots),
+            sum(len(v) for v in children_map.values()),
+            len(cid_to_name),
+        )
+        return {"children_map": dict(children_map), "cid_to_name": cid_to_name}
+
+    @staticmethod
+    def resolve_leaf_serials(
+        container_ids: List[str],
+    ) -> Dict[str, List[str]]:
+        """Find finished product serial numbers for leaf lot CIDs.
+
+        Returns:
+            {cid: [finished_names]}
+        """
+        normalized_cids = _normalize_list(container_ids)
+        if not normalized_cids:
+            return {}
+
+        result: Dict[str, List[str]] = defaultdict(list)
+
+        for i in range(0, len(normalized_cids), ORACLE_IN_BATCH_SIZE):
+            batch = normalized_cids[i:i + ORACLE_IN_BATCH_SIZE]
+            builder = QueryBuilder()
+            builder.add_in_condition("ca.CONTAINERID", batch)
+
+            sql = SQLLoader.load_with_params(
+                "lineage/leaf_serial_numbers",
+                CID_FILTER=builder.get_conditions_sql(),
+            )
+
+            df = read_sql_df(sql, builder.params)
+            if df is None or df.empty:
+                continue
+
+            for _, row in df.iterrows():
+                cid = _safe_str(row.get("CONTAINERID"))
+                finished = _safe_str(row.get("FINISHEDNAME"))
+                if cid and finished and finished not in result[cid]:
+                    result[cid].append(finished)
+
+        logger.info(
+            "Leaf serial resolution completed: leaf_cids=%s, with_serials=%s",
+            len(normalized_cids),
+            len(result),
+        )
+        return dict(result)
+
+    @staticmethod
+    def resolve_forward_tree(
+        container_ids: List[str],
+        initial_names: Optional[Dict[str, str]] = None,
+    ) -> Dict[str, Any]:
+        """Resolve a forward production tree: root(wafer) → splits → leaf → serial numbers.
+
+        1. Trace UP from seed CIDs to find root(s) via split_ancestors
+        2. Trace DOWN from root(s) to get all descendants via split_descendants
+        3. For leaf nodes, query COMBINEDASSYLOTS for finished serial numbers
+
+        Returns:
+            {
+                "roots": [root_cids],
+                "children_map": {parent_cid: [child_cids]},
+                "leaf_serials": {leaf_cid: [finished_names]},
+                "cid_to_name": {cid: container_name},
+                "total_nodes": int,
+            }
+        """
+        seed_cids = _normalize_list(container_ids)
+        empty = {
+            "roots": [],
+            "children_map": {},
+            "leaf_serials": {},
+            "cid_to_name": {},
+            "total_nodes": 0,
+        }
+        if not seed_cids:
+            return empty
+
+        # Step 1: Trace UP to find roots
+        split_result = LineageEngine.resolve_split_ancestors(seed_cids, initial_names)
+        child_to_parent = split_result["child_to_parent"]
+        cid_to_name = dict(split_result["cid_to_name"])
+
+        # Find root CIDs: trace each seed's chain to the top
+        roots_set: Set[str] = set()
+        for seed in seed_cids:
+            current = seed
+            depth = 0
+            while current in child_to_parent and depth < MAX_SPLIT_DEPTH:
+                depth += 1
+                parent = child_to_parent[current]
+                if parent == current:
+                    break
+                current = parent
+            roots_set.add(current)
+
+        roots = sorted(roots_set)
+
+        # Step 2: Trace DOWN from roots to get full tree
+        desc_result = LineageEngine.resolve_split_descendants(roots)
+        children_map = desc_result["children_map"]
+        cid_to_name.update(desc_result["cid_to_name"])
+
+        # Collect all nodes in the tree
+        all_nodes: Set[str] = set(roots)
+        for parent, children in children_map.items():
+            all_nodes.add(parent)
+            all_nodes.update(children)
+
+        # Step 3: Find leaf nodes (nodes with no children in children_map)
+        leaf_cids = [cid for cid in all_nodes if cid not in children_map]
+
+        # Step 4: Query serial numbers for leaf nodes
+        leaf_serials = LineageEngine.resolve_leaf_serials(leaf_cids) if leaf_cids else {}
+
+        logger.info(
+            "Forward tree resolution completed: seeds=%s, roots=%s, nodes=%s, leaves=%s, serials=%s",
+            len(seed_cids),
+            len(roots),
+            len(all_nodes),
+            len(leaf_cids),
+            len(leaf_serials),
+        )
+
+        return {
+            "roots": roots,
+            "children_map": children_map,
+            "leaf_serials": leaf_serials,
+            "cid_to_name": cid_to_name,
+            "total_nodes": len(all_nodes),
+        }
+
     @staticmethod
     def resolve_full_genealogy(
         container_ids: List[str],
         initial_names: Optional[Dict[str, str]] = None,
-    ) -> Dict[str, Set[str]]:
+    ) -> Dict[str, Any]:
         """Resolve combined split + merge genealogy graph.
 
         Returns:
-            {seed_cid: set(ancestor_cids)}
+            {
+                "ancestors": {seed_cid: set(ancestor_cids)},
+                "cid_to_name": {cid: container_name},
+                "parent_map": {child_cid: [direct_parent_cids]},
+                "merge_edges": {child_cid: [merge_source_cids]},
+            }
         """
         seed_cids = _normalize_list(container_ids)
         if not seed_cids:
-            return {}
+            return {"ancestors": {}, "cid_to_name": {}, "parent_map": {}, "merge_edges": {}}
 
         split_result = LineageEngine.resolve_split_ancestors(seed_cids, initial_names)
         child_to_parent = split_result["child_to_parent"]
@@ -183,7 +413,8 @@ class LineageEngine:
         all_names = [name for name in cid_to_name.values() if _safe_str(name)]
         merge_source_map = LineageEngine.resolve_merge_sources(all_names)
         if not merge_source_map:
-            return ancestors
+            pm, me = _build_parent_map(child_to_parent, {}, {}, cid_to_name)
+            return {"ancestors": ancestors, "cid_to_name": cid_to_name, "parent_map": pm, "merge_edges": me}
 
         merge_source_cids_all: Set[str] = set()
         for seed in seed_cids:
@@ -201,10 +432,12 @@ class LineageEngine:
         seen = set(seed_cids) | set(child_to_parent.keys()) | set(child_to_parent.values())
         new_merge_cids = list(merge_source_cids_all - seen)
         if not new_merge_cids:
-            return ancestors
+            pm, me = _build_parent_map(child_to_parent, {}, merge_source_map, cid_to_name)
+            return {"ancestors": ancestors, "cid_to_name": cid_to_name, "parent_map": pm, "merge_edges": me}
 
         merge_split_result = LineageEngine.resolve_split_ancestors(new_merge_cids)
         merge_child_to_parent = merge_split_result["child_to_parent"]
+        cid_to_name.update(merge_split_result["cid_to_name"])
 
         for seed in seed_cids:
             for merge_cid in list(ancestors[seed] & merge_source_cids_all):
@@ -218,4 +451,5 @@ class LineageEngine:
                     ancestors[seed].add(parent)
                     current = parent
 
-        return ancestors
+        pm, me = _build_parent_map(child_to_parent, merge_child_to_parent, merge_source_map, cid_to_name)
+        return {"ancestors": ancestors, "cid_to_name": cid_to_name, "parent_map": pm, "merge_edges": me}
diff --git a/src/mes_dashboard/services/mid_section_defect_service.py b/src/mes_dashboard/services/mid_section_defect_service.py
index 66acfe7..8f92b98 100644
--- a/src/mes_dashboard/services/mid_section_defect_service.py
+++ b/src/mes_dashboard/services/mid_section_defect_service.py
@@ -18,36 +18,36 @@ Attribution Method (Sum):
       rate = attributed_rejectqty / attributed_trackinqty × 100
 """
 
-import csv
-import hashlib
-import io
-import logging
-import math
-import time
-from collections import defaultdict
-from datetime import datetime
-from typing import Optional, Dict, List, Any, Set, Tuple, Generator
-
-import pandas as pd
-
-from mes_dashboard.core.database import read_sql_df
-from mes_dashboard.core.cache import cache_get, cache_set, make_cache_key
-from mes_dashboard.core.redis_client import try_acquire_lock, release_lock
-from mes_dashboard.sql import SQLLoader
-from mes_dashboard.services.event_fetcher import EventFetcher
-from mes_dashboard.services.lineage_engine import LineageEngine
-
-logger = logging.getLogger('mes_dashboard.mid_section_defect')
+import csv
+import hashlib
+import io
+import logging
+import math
+import time
+from collections import defaultdict
+from datetime import datetime
+from typing import Optional, Dict, List, Any, Set, Tuple, Generator
+
+import pandas as pd
+
+from mes_dashboard.core.database import read_sql_df
+from mes_dashboard.core.cache import cache_get, cache_set, make_cache_key
+from mes_dashboard.core.redis_client import try_acquire_lock, release_lock
+from mes_dashboard.sql import SQLLoader
+from mes_dashboard.services.event_fetcher import EventFetcher
+from mes_dashboard.services.lineage_engine import LineageEngine
+
+logger = logging.getLogger('mes_dashboard.mid_section_defect')
 
 # Constants
 MAX_QUERY_DAYS = 180
 CACHE_TTL_TMTT = 300            # 5 min for TMTT detection data
-CACHE_TTL_LOSS_REASONS = 86400  # 24h for loss reason list (daily sync)
-
-# Distributed lock settings for query_analysis cold-cache path
-ANALYSIS_LOCK_TTL_SECONDS = 120
-ANALYSIS_LOCK_WAIT_TIMEOUT_SECONDS = 90
-ANALYSIS_LOCK_POLL_INTERVAL_SECONDS = 0.5
+CACHE_TTL_LOSS_REASONS = 86400  # 24h for loss reason list (daily sync)
+
+# Distributed lock settings for query_analysis cold-cache path
+ANALYSIS_LOCK_TTL_SECONDS = 120
+ANALYSIS_LOCK_WAIT_TIMEOUT_SECONDS = 90
+ANALYSIS_LOCK_POLL_INTERVAL_SECONDS = 0.5
 
 # Top N for chart display (rest grouped as "其他")
 TOP_N = 10
@@ -83,11 +83,11 @@ CSV_COLUMNS = [
 # Public API
 # ============================================================
 
-def query_analysis(
-    start_date: str,
-    end_date: str,
-    loss_reasons: Optional[List[str]] = None,
-) -> Optional[Dict[str, Any]]:
+def query_analysis(
+    start_date: str,
+    end_date: str,
+    loss_reasons: Optional[List[str]] = None,
+) -> Optional[Dict[str, Any]]:
     """Main entry point for mid-section defect traceability analysis.
 
     Args:
@@ -111,268 +111,268 @@ def query_analysis(
             'loss_reasons': sorted(loss_reasons) if loss_reasons else None,
         },
     )
-    cached = cache_get(cache_key)
-    if cached is not None:
-        return cached
-
-    lock_name = (
-        f"mid_section_defect:analysis:{hashlib.md5(cache_key.encode('utf-8')).hexdigest()}"
-    )
-    lock_acquired = False
-
-    # Prevent duplicate cold-cache pipeline execution across workers.
-    lock_acquired = try_acquire_lock(lock_name, ttl_seconds=ANALYSIS_LOCK_TTL_SECONDS)
-    if not lock_acquired:
-        wait_start = time.monotonic()
-        while (
-            time.monotonic() - wait_start
-            < ANALYSIS_LOCK_WAIT_TIMEOUT_SECONDS
-        ):
-            cached = cache_get(cache_key)
-            if cached is not None:
-                return cached
-            time.sleep(ANALYSIS_LOCK_POLL_INTERVAL_SECONDS)
-
-        logger.warning(
-            "Timed out waiting for in-flight mid_section_defect analysis cache; "
-            "continuing with fail-open pipeline execution"
-        )
-    else:
-        # Double-check cache after lock acquisition.
-        cached = cache_get(cache_key)
-        if cached is not None:
-            return cached
-
-    try:
-        # Stage 1: TMTT detection data
-        tmtt_df = _fetch_tmtt_data(start_date, end_date)
-        if tmtt_df is None:
-            return None
-        if tmtt_df.empty:
-            return _empty_result()
-
-        # Extract available loss reasons before filtering
-        available_loss_reasons = sorted(
-            tmtt_df.loc[tmtt_df['REJECTQTY'] > 0, 'LOSSREASONNAME']
-            .dropna().unique().tolist()
-        )
-
-        # Apply loss reason filter if specified
-        if loss_reasons:
-            filtered_df = tmtt_df[
-                (tmtt_df['LOSSREASONNAME'].isin(loss_reasons))
-                | (tmtt_df['REJECTQTY'] == 0)
-                | (tmtt_df['LOSSREASONNAME'].isna())
-            ].copy()
-        else:
-            filtered_df = tmtt_df
-
-        # Stage 2: Genealogy resolution (split chain + merge expansion)
-        tmtt_cids = tmtt_df['CONTAINERID'].unique().tolist()
-        tmtt_names = {}
-        for _, r in tmtt_df.drop_duplicates('CONTAINERID').iterrows():
-            tmtt_names[r['CONTAINERID']] = _safe_str(r.get('CONTAINERNAME'))
-
-        ancestors = {}
-        genealogy_status = 'ready'
-
-        if tmtt_cids:
-            try:
-                ancestors = _resolve_full_genealogy(tmtt_cids, tmtt_names)
-            except Exception as exc:
-                logger.error(f"Genealogy resolution failed: {exc}", exc_info=True)
-                genealogy_status = 'error'
-
-        # Stage 3: Upstream history for ALL CIDs (TMTT lots + ancestors)
-        all_query_cids = set(tmtt_cids)
-        for anc_set in ancestors.values():
-            all_query_cids.update(anc_set)
-        # Filter out any non-string values (NaN/None from pandas)
-        all_query_cids = {c for c in all_query_cids if isinstance(c, str) and c}
-
-        upstream_by_cid = {}
-        if all_query_cids:
-            try:
-                upstream_by_cid = _fetch_upstream_history(list(all_query_cids))
-            except Exception as exc:
-                logger.error(f"Upstream history query failed: {exc}", exc_info=True)
-                genealogy_status = 'error'
-        tmtt_data = _build_tmtt_lookup(filtered_df)
-        attribution = _attribute_defects(
-            tmtt_data, ancestors, upstream_by_cid, loss_reasons,
-        )
-
-        result = {
-            'kpi': _build_kpi(filtered_df, attribution, loss_reasons),
-            'available_loss_reasons': available_loss_reasons,
-            'charts': _build_all_charts(attribution, tmtt_data),
-            'daily_trend': _build_daily_trend(filtered_df, loss_reasons),
-            'detail': _build_detail_table(filtered_df, ancestors, upstream_by_cid),
-            'genealogy_status': genealogy_status,
-        }
-
-        # Only cache successful results (don't cache upstream errors)
-        if genealogy_status == 'ready':
-            cache_set(cache_key, result, ttl=CACHE_TTL_TMTT)
-        return result
-    finally:
-        if lock_acquired:
-            release_lock(lock_name)
-
-
-def parse_loss_reasons_param(loss_reasons: Any) -> Optional[List[str]]:
-    """Normalize loss reason input from API payloads.
-
-    Accepts comma-separated strings or list-like inputs.
-    Returns None when no valid value is provided.
-    """
-    if loss_reasons is None:
-        return None
-
-    values: List[str]
-    if isinstance(loss_reasons, str):
-        values = [item.strip() for item in loss_reasons.split(',') if item.strip()]
-    elif isinstance(loss_reasons, (list, tuple, set)):
-        values = []
-        for item in loss_reasons:
-            if not isinstance(item, str):
-                continue
-            text = item.strip()
-            if text:
-                values.append(text)
-    else:
-        return None
-
-    if not values:
-        return None
-
-    deduped: List[str] = []
-    seen = set()
-    for value in values:
-        if value in seen:
-            continue
-        seen.add(value)
-        deduped.append(value)
-    return deduped or None
-
-
-def resolve_trace_seed_lots(
-    start_date: str,
-    end_date: str,
-) -> Optional[Dict[str, Any]]:
-    """Resolve seed lots for staged mid-section trace API."""
-    error = _validate_date_range(start_date, end_date)
-    if error:
-        return {'error': error}
-
-    tmtt_df = _fetch_tmtt_data(start_date, end_date)
-    if tmtt_df is None:
-        return None
-    if tmtt_df.empty:
-        return {'seeds': [], 'seed_count': 0}
-
-    seeds = []
-    unique_rows = tmtt_df.drop_duplicates(subset=['CONTAINERID'])
-    for _, row in unique_rows.iterrows():
-        cid = _safe_str(row.get('CONTAINERID'))
-        if not cid:
-            continue
-        lot_id = _safe_str(row.get('CONTAINERNAME')) or cid
-        seeds.append({
-            'container_id': cid,
-            'container_name': lot_id,
-            'lot_id': lot_id,
-        })
-
-    seeds.sort(key=lambda item: (item.get('lot_id', ''), item.get('container_id', '')))
-    return {
-        'seeds': seeds,
-        'seed_count': len(seeds),
-    }
-
-
-def build_trace_aggregation_from_events(
-    start_date: str,
-    end_date: str,
-    *,
-    loss_reasons: Optional[List[str]] = None,
-    seed_container_ids: Optional[List[str]] = None,
-    lineage_ancestors: Optional[Dict[str, Any]] = None,
-    upstream_events_by_cid: Optional[Dict[str, List[Dict[str, Any]]]] = None,
-) -> Optional[Dict[str, Any]]:
-    """Build mid-section summary payload from staged events data."""
-    error = _validate_date_range(start_date, end_date)
-    if error:
-        return {'error': error}
-
-    normalized_loss_reasons = parse_loss_reasons_param(loss_reasons)
-
-    tmtt_df = _fetch_tmtt_data(start_date, end_date)
-    if tmtt_df is None:
-        return None
-    if tmtt_df.empty:
-        empty_result = _empty_result()
-        return {
-            'kpi': empty_result['kpi'],
-            'charts': empty_result['charts'],
-            'daily_trend': empty_result['daily_trend'],
-            'available_loss_reasons': empty_result['available_loss_reasons'],
-            'genealogy_status': empty_result['genealogy_status'],
-            'detail_total_count': 0,
-        }
-
-    available_loss_reasons = sorted(
-        tmtt_df.loc[tmtt_df['REJECTQTY'] > 0, 'LOSSREASONNAME']
-        .dropna().unique().tolist()
-    )
-
-    if normalized_loss_reasons:
-        filtered_df = tmtt_df[
-            (tmtt_df['LOSSREASONNAME'].isin(normalized_loss_reasons))
-            | (tmtt_df['REJECTQTY'] == 0)
-            | (tmtt_df['LOSSREASONNAME'].isna())
-        ].copy()
-    else:
-        filtered_df = tmtt_df
-
-    tmtt_data = _build_tmtt_lookup(filtered_df)
-    normalized_ancestors = _normalize_lineage_ancestors(
-        lineage_ancestors,
-        seed_container_ids=seed_container_ids,
-        fallback_seed_ids=list(tmtt_data.keys()),
-    )
-    normalized_upstream = _normalize_upstream_event_records(upstream_events_by_cid or {})
-
-    attribution = _attribute_defects(
-        tmtt_data,
-        normalized_ancestors,
-        normalized_upstream,
-        normalized_loss_reasons,
-    )
-    detail = _build_detail_table(filtered_df, normalized_ancestors, normalized_upstream)
-
-    seed_ids = [
-        cid for cid in (seed_container_ids or list(tmtt_data.keys()))
-        if isinstance(cid, str) and cid.strip()
-    ]
-    genealogy_status = 'ready'
-    if seed_ids and lineage_ancestors is None:
-        genealogy_status = 'error'
-
-    return {
-        'kpi': _build_kpi(filtered_df, attribution, normalized_loss_reasons),
-        'charts': _build_all_charts(attribution, tmtt_data),
-        'daily_trend': _build_daily_trend(filtered_df, normalized_loss_reasons),
-        'available_loss_reasons': available_loss_reasons,
-        'genealogy_status': genealogy_status,
-        'detail_total_count': len(detail),
-    }
-
-
-def query_analysis_detail(
-    start_date: str,
-    end_date: str,
-    loss_reasons: Optional[List[str]] = None,
+    cached = cache_get(cache_key)
+    if cached is not None:
+        return cached
+
+    lock_name = (
+        f"mid_section_defect:analysis:{hashlib.md5(cache_key.encode('utf-8')).hexdigest()}"
+    )
+    lock_acquired = False
+
+    # Prevent duplicate cold-cache pipeline execution across workers.
+    lock_acquired = try_acquire_lock(lock_name, ttl_seconds=ANALYSIS_LOCK_TTL_SECONDS)
+    if not lock_acquired:
+        wait_start = time.monotonic()
+        while (
+            time.monotonic() - wait_start
+            < ANALYSIS_LOCK_WAIT_TIMEOUT_SECONDS
+        ):
+            cached = cache_get(cache_key)
+            if cached is not None:
+                return cached
+            time.sleep(ANALYSIS_LOCK_POLL_INTERVAL_SECONDS)
+
+        logger.warning(
+            "Timed out waiting for in-flight mid_section_defect analysis cache; "
+            "continuing with fail-open pipeline execution"
+        )
+    else:
+        # Double-check cache after lock acquisition.
+        cached = cache_get(cache_key)
+        if cached is not None:
+            return cached
+
+    try:
+        # Stage 1: TMTT detection data
+        tmtt_df = _fetch_tmtt_data(start_date, end_date)
+        if tmtt_df is None:
+            return None
+        if tmtt_df.empty:
+            return _empty_result()
+
+        # Extract available loss reasons before filtering
+        available_loss_reasons = sorted(
+            tmtt_df.loc[tmtt_df['REJECTQTY'] > 0, 'LOSSREASONNAME']
+            .dropna().unique().tolist()
+        )
+
+        # Apply loss reason filter if specified
+        if loss_reasons:
+            filtered_df = tmtt_df[
+                (tmtt_df['LOSSREASONNAME'].isin(loss_reasons))
+                | (tmtt_df['REJECTQTY'] == 0)
+                | (tmtt_df['LOSSREASONNAME'].isna())
+            ].copy()
+        else:
+            filtered_df = tmtt_df
+
+        # Stage 2: Genealogy resolution (split chain + merge expansion)
+        tmtt_cids = tmtt_df['CONTAINERID'].unique().tolist()
+        tmtt_names = {}
+        for _, r in tmtt_df.drop_duplicates('CONTAINERID').iterrows():
+            tmtt_names[r['CONTAINERID']] = _safe_str(r.get('CONTAINERNAME'))
+
+        ancestors = {}
+        genealogy_status = 'ready'
+
+        if tmtt_cids:
+            try:
+                ancestors = _resolve_full_genealogy(tmtt_cids, tmtt_names)
+            except Exception as exc:
+                logger.error(f"Genealogy resolution failed: {exc}", exc_info=True)
+                genealogy_status = 'error'
+
+        # Stage 3: Upstream history for ALL CIDs (TMTT lots + ancestors)
+        all_query_cids = set(tmtt_cids)
+        for anc_set in ancestors.values():
+            all_query_cids.update(anc_set)
+        # Filter out any non-string values (NaN/None from pandas)
+        all_query_cids = {c for c in all_query_cids if isinstance(c, str) and c}
+
+        upstream_by_cid = {}
+        if all_query_cids:
+            try:
+                upstream_by_cid = _fetch_upstream_history(list(all_query_cids))
+            except Exception as exc:
+                logger.error(f"Upstream history query failed: {exc}", exc_info=True)
+                genealogy_status = 'error'
+        tmtt_data = _build_tmtt_lookup(filtered_df)
+        attribution = _attribute_defects(
+            tmtt_data, ancestors, upstream_by_cid, loss_reasons,
+        )
+
+        result = {
+            'kpi': _build_kpi(filtered_df, attribution, loss_reasons),
+            'available_loss_reasons': available_loss_reasons,
+            'charts': _build_all_charts(attribution, tmtt_data),
+            'daily_trend': _build_daily_trend(filtered_df, loss_reasons),
+            'detail': _build_detail_table(filtered_df, ancestors, upstream_by_cid),
+            'genealogy_status': genealogy_status,
+        }
+
+        # Only cache successful results (don't cache upstream errors)
+        if genealogy_status == 'ready':
+            cache_set(cache_key, result, ttl=CACHE_TTL_TMTT)
+        return result
+    finally:
+        if lock_acquired:
+            release_lock(lock_name)
+
+
+def parse_loss_reasons_param(loss_reasons: Any) -> Optional[List[str]]:
+    """Normalize loss reason input from API payloads.
+
+    Accepts comma-separated strings or list-like inputs.
+    Returns None when no valid value is provided.
+    """
+    if loss_reasons is None:
+        return None
+
+    values: List[str]
+    if isinstance(loss_reasons, str):
+        values = [item.strip() for item in loss_reasons.split(',') if item.strip()]
+    elif isinstance(loss_reasons, (list, tuple, set)):
+        values = []
+        for item in loss_reasons:
+            if not isinstance(item, str):
+                continue
+            text = item.strip()
+            if text:
+                values.append(text)
+    else:
+        return None
+
+    if not values:
+        return None
+
+    deduped: List[str] = []
+    seen = set()
+    for value in values:
+        if value in seen:
+            continue
+        seen.add(value)
+        deduped.append(value)
+    return deduped or None
+
+
+def resolve_trace_seed_lots(
+    start_date: str,
+    end_date: str,
+) -> Optional[Dict[str, Any]]:
+    """Resolve seed lots for staged mid-section trace API."""
+    error = _validate_date_range(start_date, end_date)
+    if error:
+        return {'error': error}
+
+    tmtt_df = _fetch_tmtt_data(start_date, end_date)
+    if tmtt_df is None:
+        return None
+    if tmtt_df.empty:
+        return {'seeds': [], 'seed_count': 0}
+
+    seeds = []
+    unique_rows = tmtt_df.drop_duplicates(subset=['CONTAINERID'])
+    for _, row in unique_rows.iterrows():
+        cid = _safe_str(row.get('CONTAINERID'))
+        if not cid:
+            continue
+        lot_id = _safe_str(row.get('CONTAINERNAME')) or cid
+        seeds.append({
+            'container_id': cid,
+            'container_name': lot_id,
+            'lot_id': lot_id,
+        })
+
+    seeds.sort(key=lambda item: (item.get('lot_id', ''), item.get('container_id', '')))
+    return {
+        'seeds': seeds,
+        'seed_count': len(seeds),
+    }
+
+
+def build_trace_aggregation_from_events(
+    start_date: str,
+    end_date: str,
+    *,
+    loss_reasons: Optional[List[str]] = None,
+    seed_container_ids: Optional[List[str]] = None,
+    lineage_ancestors: Optional[Dict[str, Any]] = None,
+    upstream_events_by_cid: Optional[Dict[str, List[Dict[str, Any]]]] = None,
+) -> Optional[Dict[str, Any]]:
+    """Build mid-section summary payload from staged events data."""
+    error = _validate_date_range(start_date, end_date)
+    if error:
+        return {'error': error}
+
+    normalized_loss_reasons = parse_loss_reasons_param(loss_reasons)
+
+    tmtt_df = _fetch_tmtt_data(start_date, end_date)
+    if tmtt_df is None:
+        return None
+    if tmtt_df.empty:
+        empty_result = _empty_result()
+        return {
+            'kpi': empty_result['kpi'],
+            'charts': empty_result['charts'],
+            'daily_trend': empty_result['daily_trend'],
+            'available_loss_reasons': empty_result['available_loss_reasons'],
+            'genealogy_status': empty_result['genealogy_status'],
+            'detail_total_count': 0,
+        }
+
+    available_loss_reasons = sorted(
+        tmtt_df.loc[tmtt_df['REJECTQTY'] > 0, 'LOSSREASONNAME']
+        .dropna().unique().tolist()
+    )
+
+    if normalized_loss_reasons:
+        filtered_df = tmtt_df[
+            (tmtt_df['LOSSREASONNAME'].isin(normalized_loss_reasons))
+            | (tmtt_df['REJECTQTY'] == 0)
+            | (tmtt_df['LOSSREASONNAME'].isna())
+        ].copy()
+    else:
+        filtered_df = tmtt_df
+
+    tmtt_data = _build_tmtt_lookup(filtered_df)
+    normalized_ancestors = _normalize_lineage_ancestors(
+        lineage_ancestors,
+        seed_container_ids=seed_container_ids,
+        fallback_seed_ids=list(tmtt_data.keys()),
+    )
+    normalized_upstream = _normalize_upstream_event_records(upstream_events_by_cid or {})
+
+    attribution = _attribute_defects(
+        tmtt_data,
+        normalized_ancestors,
+        normalized_upstream,
+        normalized_loss_reasons,
+    )
+    detail = _build_detail_table(filtered_df, normalized_ancestors, normalized_upstream)
+
+    seed_ids = [
+        cid for cid in (seed_container_ids or list(tmtt_data.keys()))
+        if isinstance(cid, str) and cid.strip()
+    ]
+    genealogy_status = 'ready'
+    if seed_ids and lineage_ancestors is None:
+        genealogy_status = 'error'
+
+    return {
+        'kpi': _build_kpi(filtered_df, attribution, normalized_loss_reasons),
+        'charts': _build_all_charts(attribution, tmtt_data),
+        'daily_trend': _build_daily_trend(filtered_df, normalized_loss_reasons),
+        'available_loss_reasons': available_loss_reasons,
+        'genealogy_status': genealogy_status,
+        'detail_total_count': len(detail),
+    }
+
+
+def query_analysis_detail(
+    start_date: str,
+    end_date: str,
+    loss_reasons: Optional[List[str]] = None,
     page: int = 1,
     page_size: int = 200,
 ) -> Optional[Dict[str, Any]]:
@@ -578,14 +578,15 @@ def _fetch_tmtt_data(start_date: str, end_date: str) -> Optional[pd.DataFrame]:
 # Query 2: LOT Genealogy
 # ============================================================
 
-def _resolve_full_genealogy(
-    tmtt_cids: List[str],
-    tmtt_names: Dict[str, str],
-) -> Dict[str, Set[str]]:
-    """Resolve full genealogy for TMTT lots via shared LineageEngine."""
-    ancestors = LineageEngine.resolve_full_genealogy(tmtt_cids, tmtt_names)
-    _log_genealogy_summary(ancestors, tmtt_cids, 0)
-    return ancestors
+def _resolve_full_genealogy(
+    tmtt_cids: List[str],
+    tmtt_names: Dict[str, str],
+) -> Dict[str, Set[str]]:
+    """Resolve full genealogy for TMTT lots via shared LineageEngine."""
+    result = LineageEngine.resolve_full_genealogy(tmtt_cids, tmtt_names)
+    ancestors = result.get("ancestors", {}) if isinstance(result, dict) else result
+    _log_genealogy_summary(ancestors, tmtt_cids, 0)
+    return ancestors
 
 
 def _log_genealogy_summary(
@@ -606,92 +607,92 @@ def _log_genealogy_summary(
 # Query 3: Upstream Production History
 # ============================================================
 
-def _fetch_upstream_history(
-    all_cids: List[str],
-) -> Dict[str, List[Dict[str, Any]]]:
+def _fetch_upstream_history(
+    all_cids: List[str],
+) -> Dict[str, List[Dict[str, Any]]]:
     """Fetch upstream production history for ancestor CONTAINERIDs.
 
-    Batches queries to respect Oracle IN clause limit.
-    WORKCENTER_GROUP classification is computed in SQL (CASE WHEN).
+    Batches queries to respect Oracle IN clause limit.
+    WORKCENTER_GROUP classification is computed in SQL (CASE WHEN).
 
     Returns:
         {containerid: [{'workcenter_group': ..., 'equipment_name': ..., ...}, ...]}
     """
-    if not all_cids:
-        return {}
-
-    unique_cids = list(set(all_cids))
-    events_by_cid = EventFetcher.fetch_events(unique_cids, "upstream_history")
-    result = _normalize_upstream_event_records(events_by_cid)
-
-    logger.info(
-        f"Upstream history: {len(result)} lots with classified records, "
-        f"from {len(unique_cids)} queried CIDs"
-    )
-    return dict(result)
-
-
-def _normalize_lineage_ancestors(
-    lineage_ancestors: Optional[Dict[str, Any]],
-    *,
-    seed_container_ids: Optional[List[str]] = None,
-    fallback_seed_ids: Optional[List[str]] = None,
-) -> Dict[str, Set[str]]:
-    """Normalize lineage payload to {seed_cid: set(ancestor_cid)}."""
-    ancestors: Dict[str, Set[str]] = {}
-
-    if isinstance(lineage_ancestors, dict):
-        for seed, raw_values in lineage_ancestors.items():
-            seed_cid = _safe_str(seed)
-            if not seed_cid:
-                continue
-
-            values = raw_values if isinstance(raw_values, (list, tuple, set)) else []
-            normalized_values: Set[str] = set()
-            for value in values:
-                ancestor_cid = _safe_str(value)
-                if ancestor_cid and ancestor_cid != seed_cid:
-                    normalized_values.add(ancestor_cid)
-            ancestors[seed_cid] = normalized_values
-
-    candidate_seeds = []
-    for seed in (seed_container_ids or []):
-        seed_cid = _safe_str(seed)
-        if seed_cid:
-            candidate_seeds.append(seed_cid)
-    if not candidate_seeds:
-        for seed in (fallback_seed_ids or []):
-            seed_cid = _safe_str(seed)
-            if seed_cid:
-                candidate_seeds.append(seed_cid)
-
-    for seed_cid in candidate_seeds:
-        ancestors.setdefault(seed_cid, set())
-
-    return ancestors
-
-
-def _normalize_upstream_event_records(
-    events_by_cid: Dict[str, List[Dict[str, Any]]],
-) -> Dict[str, List[Dict[str, Any]]]:
-    """Normalize EventFetcher upstream payload into attribution-ready records."""
-    result: Dict[str, List[Dict[str, Any]]] = defaultdict(list)
-    for cid, events in events_by_cid.items():
-        cid_value = _safe_str(cid)
-        if not cid_value:
-            continue
-        for event in events:
-            group_name = _safe_str(event.get('WORKCENTER_GROUP'))
-            if not group_name:
-                group_name = '(未知)'
-            result[cid_value].append({
-                'workcenter_group': group_name,
-                'equipment_id': _safe_str(event.get('EQUIPMENTID')),
-                'equipment_name': _safe_str(event.get('EQUIPMENTNAME')),
-                'spec_name': _safe_str(event.get('SPECNAME')),
-                'track_in_time': _safe_str(event.get('TRACKINTIMESTAMP')),
-            })
-    return dict(result)
+    if not all_cids:
+        return {}
+
+    unique_cids = list(set(all_cids))
+    events_by_cid = EventFetcher.fetch_events(unique_cids, "upstream_history")
+    result = _normalize_upstream_event_records(events_by_cid)
+
+    logger.info(
+        f"Upstream history: {len(result)} lots with classified records, "
+        f"from {len(unique_cids)} queried CIDs"
+    )
+    return dict(result)
+
+
+def _normalize_lineage_ancestors(
+    lineage_ancestors: Optional[Dict[str, Any]],
+    *,
+    seed_container_ids: Optional[List[str]] = None,
+    fallback_seed_ids: Optional[List[str]] = None,
+) -> Dict[str, Set[str]]:
+    """Normalize lineage payload to {seed_cid: set(ancestor_cid)}."""
+    ancestors: Dict[str, Set[str]] = {}
+
+    if isinstance(lineage_ancestors, dict):
+        for seed, raw_values in lineage_ancestors.items():
+            seed_cid = _safe_str(seed)
+            if not seed_cid:
+                continue
+
+            values = raw_values if isinstance(raw_values, (list, tuple, set)) else []
+            normalized_values: Set[str] = set()
+            for value in values:
+                ancestor_cid = _safe_str(value)
+                if ancestor_cid and ancestor_cid != seed_cid:
+                    normalized_values.add(ancestor_cid)
+            ancestors[seed_cid] = normalized_values
+
+    candidate_seeds = []
+    for seed in (seed_container_ids or []):
+        seed_cid = _safe_str(seed)
+        if seed_cid:
+            candidate_seeds.append(seed_cid)
+    if not candidate_seeds:
+        for seed in (fallback_seed_ids or []):
+            seed_cid = _safe_str(seed)
+            if seed_cid:
+                candidate_seeds.append(seed_cid)
+
+    for seed_cid in candidate_seeds:
+        ancestors.setdefault(seed_cid, set())
+
+    return ancestors
+
+
+def _normalize_upstream_event_records(
+    events_by_cid: Dict[str, List[Dict[str, Any]]],
+) -> Dict[str, List[Dict[str, Any]]]:
+    """Normalize EventFetcher upstream payload into attribution-ready records."""
+    result: Dict[str, List[Dict[str, Any]]] = defaultdict(list)
+    for cid, events in events_by_cid.items():
+        cid_value = _safe_str(cid)
+        if not cid_value:
+            continue
+        for event in events:
+            group_name = _safe_str(event.get('WORKCENTER_GROUP'))
+            if not group_name:
+                group_name = '(未知)'
+            result[cid_value].append({
+                'workcenter_group': group_name,
+                'equipment_id': _safe_str(event.get('EQUIPMENTID')),
+                'equipment_name': _safe_str(event.get('EQUIPMENTNAME')),
+                'spec_name': _safe_str(event.get('SPECNAME')),
+                'track_in_time': _safe_str(event.get('TRACKINTIMESTAMP')),
+            })
+    return dict(result)
 
 
 # ============================================================
diff --git a/src/mes_dashboard/services/query_tool_service.py b/src/mes_dashboard/services/query_tool_service.py
index 27554b3..76b8048 100644
--- a/src/mes_dashboard/services/query_tool_service.py
+++ b/src/mes_dashboard/services/query_tool_service.py
@@ -18,22 +18,22 @@ Architecture:
 import csv
 import io
 import logging
-from datetime import datetime, timedelta
-from decimal import Decimal
-from typing import Any, Dict, List, Optional, Generator
-
-import pandas as pd
-
-from mes_dashboard.core.database import read_sql_df
-from mes_dashboard.sql import QueryBuilder, SQLLoader
-from mes_dashboard.services.event_fetcher import EventFetcher
-
-try:
-    from mes_dashboard.core.database import read_sql_df_slow
-except ImportError:
-    def read_sql_df_slow(sql: str, params: Optional[Dict[str, Any]] = None, timeout_seconds: int = 120):
-        """Compatibility wrapper when read_sql_df_slow is unavailable."""
-        return read_sql_df(sql, params)
+from datetime import datetime, timedelta
+from decimal import Decimal
+from typing import Any, Dict, List, Optional, Generator
+
+import pandas as pd
+
+from mes_dashboard.core.database import read_sql_df
+from mes_dashboard.sql import QueryBuilder, SQLLoader
+from mes_dashboard.services.event_fetcher import EventFetcher
+
+try:
+    from mes_dashboard.core.database import read_sql_df_slow
+except ImportError:
+    def read_sql_df_slow(sql: str, params: Optional[Dict[str, Any]] = None, timeout_seconds: int = 120):
+        """Compatibility wrapper when read_sql_df_slow is unavailable."""
+        return read_sql_df(sql, params)
 
 logger = logging.getLogger('mes_dashboard.query_tool')
 
@@ -123,7 +123,7 @@ def validate_equipment_input(equipment_ids: List[str]) -> Optional[str]:
     return None
 
 
-def _df_to_records(df: pd.DataFrame) -> List[Dict[str, Any]]:
+def _df_to_records(df: pd.DataFrame) -> List[Dict[str, Any]]:
     """Convert DataFrame to list of records with proper type handling.
 
     Args:
@@ -199,7 +199,7 @@ def resolve_lots(input_type: str, values: List[str]) -> Dict[str, Any]:
         return {'error': f'解析失敗: {str(exc)}'}
 
 
-def _resolve_by_lot_id(lot_ids: List[str]) -> Dict[str, Any]:
+def _resolve_by_lot_id(lot_ids: List[str]) -> Dict[str, Any]:
     """Resolve LOT IDs (CONTAINERNAME) to CONTAINERID.
 
     Args:
@@ -208,14 +208,14 @@ def _resolve_by_lot_id(lot_ids: List[str]) -> Dict[str, Any]:
     Returns:
         Resolution result dict.
     """
-    builder = QueryBuilder()
-    builder.add_in_condition("CONTAINERNAME", lot_ids)
-    sql = SQLLoader.load_with_params(
-        "query_tool/lot_resolve_id",
-        CONTAINER_FILTER=builder.get_conditions_sql(),
-    )
-
-    df = read_sql_df(sql, builder.params)
+    builder = QueryBuilder()
+    builder.add_in_condition("CONTAINERNAME", lot_ids)
+    sql = SQLLoader.load_with_params(
+        "query_tool/lot_resolve_id",
+        CONTAINER_FILTER=builder.get_conditions_sql(),
+    )
+
+    df = read_sql_df(sql, builder.params)
     data = _df_to_records(df)
 
     # Map results
@@ -245,7 +245,7 @@ def _resolve_by_lot_id(lot_ids: List[str]) -> Dict[str, Any]:
     }
 
 
-def _resolve_by_serial_number(serial_numbers: List[str]) -> Dict[str, Any]:
+def _resolve_by_serial_number(serial_numbers: List[str]) -> Dict[str, Any]:
     """Resolve serial numbers (FINISHEDNAME) to CONTAINERID.
 
     Note: One serial number may map to multiple CONTAINERIDs.
@@ -256,14 +256,14 @@ def _resolve_by_serial_number(serial_numbers: List[str]) -> Dict[str, Any]:
     Returns:
         Resolution result dict.
     """
-    builder = QueryBuilder()
-    builder.add_in_condition("p.FINISHEDNAME", serial_numbers)
-    sql = SQLLoader.load_with_params(
-        "query_tool/lot_resolve_serial",
-        SERIAL_FILTER=builder.get_conditions_sql(),
-    )
-
-    df = read_sql_df(sql, builder.params)
+    builder = QueryBuilder()
+    builder.add_in_condition("p.FINISHEDNAME", serial_numbers)
+    sql = SQLLoader.load_with_params(
+        "query_tool/lot_resolve_serial",
+        SERIAL_FILTER=builder.get_conditions_sql(),
+    )
+
+    df = read_sql_df(sql, builder.params)
     data = _df_to_records(df)
 
     # Group by serial number
@@ -303,8 +303,8 @@ def _resolve_by_serial_number(serial_numbers: List[str]) -> Dict[str, Any]:
     }
 
 
-def _resolve_by_work_order(work_orders: List[str]) -> Dict[str, Any]:
-    """Resolve work orders (PJ_WORKORDER) to CONTAINERID.
+def _resolve_by_work_order(work_orders: List[str]) -> Dict[str, Any]:
+    """Resolve work orders (MFGORDERNAME) to CONTAINERID.
 
     Note: One work order may expand to many CONTAINERIDs (can be 100+).
 
@@ -314,20 +314,20 @@ def _resolve_by_work_order(work_orders: List[str]) -> Dict[str, Any]:
     Returns:
         Resolution result dict.
     """
-    builder = QueryBuilder()
-    builder.add_in_condition("h.PJ_WORKORDER", work_orders)
-    sql = SQLLoader.load_with_params(
-        "query_tool/lot_resolve_work_order",
-        WORK_ORDER_FILTER=builder.get_conditions_sql(),
-    )
-
-    df = read_sql_df(sql, builder.params)
+    builder = QueryBuilder()
+    builder.add_in_condition("MFGORDERNAME", work_orders)
+    sql = SQLLoader.load_with_params(
+        "query_tool/lot_resolve_work_order",
+        WORK_ORDER_FILTER=builder.get_conditions_sql(),
+    )
+
+    df = read_sql_df(sql, builder.params)
     data = _df_to_records(df)
 
     # Group by work order
     wo_to_containers = {}
     for r in data:
-        wo = r['PJ_WORKORDER']
+        wo = r['MFGORDERNAME']
         if wo not in wo_to_containers:
             wo_to_containers[wo] = []
         wo_to_containers[wo].append({
@@ -381,10 +381,10 @@ def _get_workcenters_for_groups(groups: List[str]) -> List[str]:
     return get_workcenters_for_groups(groups)
 
 
-def get_lot_history(
-    container_id: str,
-    workcenter_groups: Optional[List[str]] = None
-) -> Dict[str, Any]:
+def get_lot_history(
+    container_id: str,
+    workcenter_groups: Optional[List[str]] = None
+) -> Dict[str, Any]:
     """Get production history for a LOT.
 
     Args:
@@ -397,27 +397,27 @@ def get_lot_history(
     if not container_id:
         return {'error': '請指定 CONTAINERID'}
 
-    try:
-        events_by_cid = EventFetcher.fetch_events([container_id], "history")
-        rows = list(events_by_cid.get(container_id, []))
-
-        if workcenter_groups:
-            workcenters = _get_workcenters_for_groups(workcenter_groups)
-            if workcenters:
-                workcenter_set = set(workcenters)
-                rows = [
-                    row
-                    for row in rows
-                    if row.get('WORKCENTERNAME') in workcenter_set
-                ]
-                logger.debug(
-                    f"Filtering by {len(workcenter_groups)} groups "
-                    f"({len(workcenters)} workcenters)"
-                )
-
-        data = _df_to_records(pd.DataFrame(rows))
-
-        logger.debug(f"LOT history: {len(data)} records for {container_id}")
+    try:
+        events_by_cid = EventFetcher.fetch_events([container_id], "history")
+        rows = list(events_by_cid.get(container_id, []))
+
+        if workcenter_groups:
+            workcenters = _get_workcenters_for_groups(workcenter_groups)
+            if workcenters:
+                workcenter_set = set(workcenters)
+                rows = [
+                    row
+                    for row in rows
+                    if row.get('WORKCENTERNAME') in workcenter_set
+                ]
+                logger.debug(
+                    f"Filtering by {len(workcenter_groups)} groups "
+                    f"({len(workcenters)} workcenters)"
+                )
+
+        data = _df_to_records(pd.DataFrame(rows))
+
+        logger.debug(f"LOT history: {len(data)} records for {container_id}")
 
         return {
             'data': data,
@@ -488,7 +488,7 @@ def get_adjacent_lots(
 # LOT Association Functions
 # ============================================================
 
-def get_lot_materials(container_id: str) -> Dict[str, Any]:
+def get_lot_materials(container_id: str) -> Dict[str, Any]:
     """Get material consumption records for a LOT.
 
     Args:
@@ -500,9 +500,9 @@ def get_lot_materials(container_id: str) -> Dict[str, Any]:
     if not container_id:
         return {'error': '請指定 CONTAINERID'}
 
-    try:
-        events_by_cid = EventFetcher.fetch_events([container_id], "materials")
-        data = _df_to_records(pd.DataFrame(events_by_cid.get(container_id, [])))
+    try:
+        events_by_cid = EventFetcher.fetch_events([container_id], "materials")
+        data = _df_to_records(pd.DataFrame(events_by_cid.get(container_id, [])))
 
         logger.debug(f"LOT materials: {len(data)} records for {container_id}")
 
@@ -517,7 +517,7 @@ def get_lot_materials(container_id: str) -> Dict[str, Any]:
         return {'error': f'查詢失敗: {str(exc)}'}
 
 
-def get_lot_rejects(container_id: str) -> Dict[str, Any]:
+def get_lot_rejects(container_id: str) -> Dict[str, Any]:
     """Get reject (defect) records for a LOT.
 
     Args:
@@ -529,9 +529,9 @@ def get_lot_rejects(container_id: str) -> Dict[str, Any]:
     if not container_id:
         return {'error': '請指定 CONTAINERID'}
 
-    try:
-        events_by_cid = EventFetcher.fetch_events([container_id], "rejects")
-        data = _df_to_records(pd.DataFrame(events_by_cid.get(container_id, [])))
+    try:
+        events_by_cid = EventFetcher.fetch_events([container_id], "rejects")
+        data = _df_to_records(pd.DataFrame(events_by_cid.get(container_id, [])))
 
         logger.debug(f"LOT rejects: {len(data)} records for {container_id}")
 
@@ -546,7 +546,7 @@ def get_lot_rejects(container_id: str) -> Dict[str, Any]:
         return {'error': f'查詢失敗: {str(exc)}'}
 
 
-def get_lot_holds(container_id: str) -> Dict[str, Any]:
+def get_lot_holds(container_id: str) -> Dict[str, Any]:
     """Get HOLD/RELEASE records for a LOT.
 
     Args:
@@ -558,9 +558,9 @@ def get_lot_holds(container_id: str) -> Dict[str, Any]:
     if not container_id:
         return {'error': '請指定 CONTAINERID'}
 
-    try:
-        events_by_cid = EventFetcher.fetch_events([container_id], "holds")
-        data = _df_to_records(pd.DataFrame(events_by_cid.get(container_id, [])))
+    try:
+        events_by_cid = EventFetcher.fetch_events([container_id], "holds")
+        data = _df_to_records(pd.DataFrame(events_by_cid.get(container_id, [])))
 
         logger.debug(f"LOT holds: {len(data)} records for {container_id}")
 
@@ -575,11 +575,11 @@ def get_lot_holds(container_id: str) -> Dict[str, Any]:
         return {'error': f'查詢失敗: {str(exc)}'}
 
 
-def get_lot_split_merge_history(
-    work_order: str,
-    current_container_id: str = None,
-    full_history: bool = False,
-) -> Dict[str, Any]:
+def get_lot_split_merge_history(
+    work_order: str,
+    current_container_id: str = None,
+    full_history: bool = False,
+) -> Dict[str, Any]:
     """Get complete split/merge history for a work order (完整拆併批歷史).
 
     Queries DW_MES_HM_LOTMOVEOUT for SplitLot and CombineLot operations
@@ -596,11 +596,11 @@ def get_lot_split_merge_history(
     - A00-001-01: Split at production station (製程站點拆分)
     - A00-001-01C: Split at TMTT (TMTT 拆分)
 
-    Args:
-        work_order: MFGORDERNAME value (e.g., GA25120713)
-        current_container_id: Current LOT's CONTAINERID for highlighting
-        full_history: If True, query complete history using slow connection.
-            If False (default), query only last 6 months with row limit.
+    Args:
+        work_order: MFGORDERNAME value (e.g., GA25120713)
+        current_container_id: Current LOT's CONTAINERID for highlighting
+        full_history: If True, query complete history using slow connection.
+            If False (default), query only last 6 months with row limit.
 
     Returns:
         Dict with 'data' (split/merge history records) and 'total', or 'error'.
@@ -609,29 +609,29 @@ def get_lot_split_merge_history(
         return {'error': '請指定工單號', 'data': [], 'total': 0}
 
     try:
-        builder = QueryBuilder()
-        builder.add_in_condition("MFGORDERNAME", [work_order])
-        fast_time_window = "AND h.TXNDATE >= ADD_MONTHS(SYSDATE, -6)"
-        fast_row_limit = "FETCH FIRST 500 ROWS ONLY"
-        sql = SQLLoader.load_with_params(
-            "query_tool/lot_split_merge_history",
-            WORK_ORDER_FILTER=builder.get_conditions_sql(),
-            TIME_WINDOW="" if full_history else fast_time_window,
-            ROW_LIMIT="" if full_history else fast_row_limit,
-        )
-        params = builder.params
-
-        mode = "full" if full_history else "fast"
-        logger.info(
-            f"Starting split/merge history query for MFGORDERNAME={work_order} mode={mode}"
-        )
-
-        if full_history:
-            # Full mode uses dedicated slow query timeout path.
-            df = read_sql_df_slow(sql, params, timeout_seconds=120)
-        else:
-            df = read_sql_df(sql, params)
-        data = _df_to_records(df)
+        builder = QueryBuilder()
+        builder.add_in_condition("MFGORDERNAME", [work_order])
+        fast_time_window = "AND h.TXNDATE >= ADD_MONTHS(SYSDATE, -6)"
+        fast_row_limit = "FETCH FIRST 500 ROWS ONLY"
+        sql = SQLLoader.load_with_params(
+            "query_tool/lot_split_merge_history",
+            WORK_ORDER_FILTER=builder.get_conditions_sql(),
+            TIME_WINDOW="" if full_history else fast_time_window,
+            ROW_LIMIT="" if full_history else fast_row_limit,
+        )
+        params = builder.params
+
+        mode = "full" if full_history else "fast"
+        logger.info(
+            f"Starting split/merge history query for MFGORDERNAME={work_order} mode={mode}"
+        )
+
+        if full_history:
+            # Full mode uses dedicated slow query timeout path.
+            df = read_sql_df_slow(sql, params, timeout_seconds=120)
+        else:
+            df = read_sql_df(sql, params)
+        data = _df_to_records(df)
 
         # Process records for display
         processed = []
@@ -666,12 +666,12 @@ def get_lot_split_merge_history(
 
         logger.info(f"Split/merge history completed: {len(processed)} records for MFGORDERNAME={work_order}")
 
-        return {
-            'data': processed,
-            'total': len(processed),
-            'work_order': work_order,
-            'mode': mode,
-        }
+        return {
+            'data': processed,
+            'total': len(processed),
+            'work_order': work_order,
+            'mode': mode,
+        }
 
     except Exception as exc:
         error_str = str(exc)
@@ -717,11 +717,11 @@ def _get_mfg_order_for_lot(container_id: str) -> Optional[str]:
         return None
 
 
-def get_lot_splits(
-    container_id: str,
-    include_production_history: bool = True,
-    full_history: bool = False,
-) -> Dict[str, Any]:
+def get_lot_splits(
+    container_id: str,
+    include_production_history: bool = True,
+    full_history: bool = False,
+) -> Dict[str, Any]:
     """Get combined split/merge data for a LOT (拆併批紀錄).
 
     Data sources:
@@ -732,10 +732,10 @@ def get_lot_splits(
     Production history now queries by MFGORDERNAME (indexed) instead of CONTAINERID
     for much better performance (~1 second vs 40+ seconds).
 
-    Args:
-        container_id: CONTAINERID (16-char hex)
-        include_production_history: If True (default), include production history query.
-        full_history: If True, query split/merge history without fast-mode limits.
+    Args:
+        container_id: CONTAINERID (16-char hex)
+        include_production_history: If True (default), include production history query.
+        full_history: If True, query split/merge history without fast-mode limits.
 
     Returns:
         Dict with 'production_history', 'serial_numbers', and totals.
@@ -768,11 +768,11 @@ def get_lot_splits(
 
         if mfg_order:
             logger.info(f"Querying production history for MFGORDERNAME={mfg_order} (LOT: {container_id})")
-            history_result = get_lot_split_merge_history(
-                work_order=mfg_order,
-                current_container_id=container_id,
-                full_history=full_history,
-            )
+            history_result = get_lot_split_merge_history(
+                work_order=mfg_order,
+                current_container_id=container_id,
+                full_history=full_history,
+            )
             logger.info(f"[DEBUG] history_result keys: {list(history_result.keys())}")
             logger.info(f"[DEBUG] history_result total: {history_result.get('total', 0)}")
 
@@ -941,17 +941,17 @@ def get_equipment_status_hours(
     if validation_error:
         return {'error': validation_error}
 
-    try:
-        builder = QueryBuilder()
-        builder.add_in_condition("r.RESOURCEID", equipment_ids)
-        sql = SQLLoader.load_with_params(
-            "query_tool/equipment_status_hours",
-            EQUIPMENT_FILTER=builder.get_conditions_sql(),
-        )
-
-        params = {'start_date': start_date, 'end_date': end_date}
-        params.update(builder.params)
-        df = read_sql_df(sql, params)
+    try:
+        builder = QueryBuilder()
+        builder.add_in_condition("r.RESOURCEID", equipment_ids)
+        sql = SQLLoader.load_with_params(
+            "query_tool/equipment_status_hours",
+            EQUIPMENT_FILTER=builder.get_conditions_sql(),
+        )
+
+        params = {'start_date': start_date, 'end_date': end_date}
+        params.update(builder.params)
+        df = read_sql_df(sql, params)
         data = _df_to_records(df)
 
         # Calculate totals
@@ -1013,17 +1013,17 @@ def get_equipment_lots(
     if validation_error:
         return {'error': validation_error}
 
-    try:
-        builder = QueryBuilder()
-        builder.add_in_condition("h.EQUIPMENTID", equipment_ids)
-        sql = SQLLoader.load_with_params(
-            "query_tool/equipment_lots",
-            EQUIPMENT_FILTER=builder.get_conditions_sql(),
-        )
-
-        params = {'start_date': start_date, 'end_date': end_date}
-        params.update(builder.params)
-        df = read_sql_df(sql, params)
+    try:
+        builder = QueryBuilder()
+        builder.add_in_condition("h.EQUIPMENTID", equipment_ids)
+        sql = SQLLoader.load_with_params(
+            "query_tool/equipment_lots",
+            EQUIPMENT_FILTER=builder.get_conditions_sql(),
+        )
+
+        params = {'start_date': start_date, 'end_date': end_date}
+        params.update(builder.params)
+        df = read_sql_df(sql, params)
         data = _df_to_records(df)
 
         logger.info(f"Equipment lots: {len(data)} records")
@@ -1063,17 +1063,17 @@ def get_equipment_materials(
     if validation_error:
         return {'error': validation_error}
 
-    try:
-        builder = QueryBuilder()
-        builder.add_in_condition("EQUIPMENTNAME", equipment_names)
-        sql = SQLLoader.load_with_params(
-            "query_tool/equipment_materials",
-            EQUIPMENT_FILTER=builder.get_conditions_sql(),
-        )
-
-        params = {'start_date': start_date, 'end_date': end_date}
-        params.update(builder.params)
-        df = read_sql_df(sql, params)
+    try:
+        builder = QueryBuilder()
+        builder.add_in_condition("EQUIPMENTNAME", equipment_names)
+        sql = SQLLoader.load_with_params(
+            "query_tool/equipment_materials",
+            EQUIPMENT_FILTER=builder.get_conditions_sql(),
+        )
+
+        params = {'start_date': start_date, 'end_date': end_date}
+        params.update(builder.params)
+        df = read_sql_df(sql, params)
         data = _df_to_records(df)
 
         logger.info(f"Equipment materials: {len(data)} records")
@@ -1113,17 +1113,17 @@ def get_equipment_rejects(
     if validation_error:
         return {'error': validation_error}
 
-    try:
-        builder = QueryBuilder()
-        builder.add_in_condition("EQUIPMENTNAME", equipment_names)
-        sql = SQLLoader.load_with_params(
-            "query_tool/equipment_rejects",
-            EQUIPMENT_FILTER=builder.get_conditions_sql(),
-        )
-
-        params = {'start_date': start_date, 'end_date': end_date}
-        params.update(builder.params)
-        df = read_sql_df(sql, params)
+    try:
+        builder = QueryBuilder()
+        builder.add_in_condition("EQUIPMENTNAME", equipment_names)
+        sql = SQLLoader.load_with_params(
+            "query_tool/equipment_rejects",
+            EQUIPMENT_FILTER=builder.get_conditions_sql(),
+        )
+
+        params = {'start_date': start_date, 'end_date': end_date}
+        params.update(builder.params)
+        df = read_sql_df(sql, params)
         data = _df_to_records(df)
 
         logger.info(f"Equipment rejects: {len(data)} records")
@@ -1165,17 +1165,17 @@ def get_equipment_jobs(
     if validation_error:
         return {'error': validation_error}
 
-    try:
-        builder = QueryBuilder()
-        builder.add_in_condition("RESOURCEID", equipment_ids)
-        sql = SQLLoader.load_with_params(
-            "query_tool/equipment_jobs",
-            EQUIPMENT_FILTER=builder.get_conditions_sql(),
-        )
-
-        params = {'start_date': start_date, 'end_date': end_date}
-        params.update(builder.params)
-        df = read_sql_df(sql, params)
+    try:
+        builder = QueryBuilder()
+        builder.add_in_condition("RESOURCEID", equipment_ids)
+        sql = SQLLoader.load_with_params(
+            "query_tool/equipment_jobs",
+            EQUIPMENT_FILTER=builder.get_conditions_sql(),
+        )
+
+        params = {'start_date': start_date, 'end_date': end_date}
+        params.update(builder.params)
+        df = read_sql_df(sql, params)
         data = _df_to_records(df)
 
         logger.info(f"Equipment jobs: {len(data)} records")
diff --git a/src/mes_dashboard/sql/lineage/leaf_serial_numbers.sql b/src/mes_dashboard/sql/lineage/leaf_serial_numbers.sql
new file mode 100644
index 0000000..d4eb01d
--- /dev/null
+++ b/src/mes_dashboard/sql/lineage/leaf_serial_numbers.sql
@@ -0,0 +1,13 @@
+-- Unified LineageEngine - Leaf Serial Numbers
+-- Find finished product serial numbers (FINISHEDNAME) for leaf lot CIDs.
+-- Source: DW_MES_PJ_COMBINEDASSYLOTS (TMTT assembly merge records).
+--
+-- Parameters:
+--   CID_FILTER - QueryBuilder-generated condition on ca.CONTAINERID
+--
+SELECT DISTINCT
+    ca.CONTAINERID,
+    ca.FINISHEDNAME
+FROM DWH.DW_MES_PJ_COMBINEDASSYLOTS ca
+WHERE {{ CID_FILTER }}
+  AND ca.FINISHEDNAME IS NOT NULL
diff --git a/src/mes_dashboard/sql/lineage/split_descendants.sql b/src/mes_dashboard/sql/lineage/split_descendants.sql
new file mode 100644
index 0000000..cf551ab
--- /dev/null
+++ b/src/mes_dashboard/sql/lineage/split_descendants.sql
@@ -0,0 +1,22 @@
+-- Unified LineageEngine - Split Descendants (Forward Tree)
+-- Resolve split genealogy downward from root(s) via DW_MES_CONTAINER.SPLITFROMID
+--
+-- Parameters:
+--   ROOT_FILTER - QueryBuilder-generated condition for START WITH (root CIDs)
+--
+-- Notes:
+--   - CONNECT BY NOCYCLE PRIOR prevents infinite loops on cyclic data.
+--   - LEVEL <= 20 matches MAX_SPLIT_DEPTH guard.
+--   - Direction is reversed from split_ancestors.sql:
+--     ancestors: PRIOR SPLITFROMID = CONTAINERID (child → parent)
+--     descendants: PRIOR CONTAINERID = SPLITFROMID (parent → child)
+--
+SELECT
+    c.CONTAINERID,
+    c.SPLITFROMID,
+    c.CONTAINERNAME,
+    LEVEL AS SPLIT_DEPTH
+FROM DWH.DW_MES_CONTAINER c
+START WITH {{ ROOT_FILTER }}
+CONNECT BY NOCYCLE PRIOR c.CONTAINERID = c.SPLITFROMID
+    AND LEVEL <= 20
diff --git a/src/mes_dashboard/sql/query_tool/lot_resolve_work_order.sql b/src/mes_dashboard/sql/query_tool/lot_resolve_work_order.sql
index a0f24b6..e99e346 100644
--- a/src/mes_dashboard/sql/query_tool/lot_resolve_work_order.sql
+++ b/src/mes_dashboard/sql/query_tool/lot_resolve_work_order.sql
@@ -1,14 +1,14 @@
--- GA Work Order to CONTAINERID Resolution
--- Expands work orders to associated CONTAINERIDs.
+-- Work Order to CONTAINERID Resolution
+-- Expands work orders (MFGORDERNAME) to associated CONTAINERIDs.
+-- Uses DW_MES_CONTAINER directly (same source as LOT ID resolve).
 --
 -- Parameters:
---   WORK_ORDER_FILTER - QueryBuilder filter on h.PJ_WORKORDER
+--   WORK_ORDER_FILTER - QueryBuilder filter on MFGORDERNAME
 --
-SELECT DISTINCT
-    h.CONTAINERID,
-    h.PJ_WORKORDER,
-    c.CONTAINERNAME,
-    c.SPECNAME
-FROM DWH.DW_MES_LOTWIPHISTORY h
-LEFT JOIN DWH.DW_MES_CONTAINER c ON h.CONTAINERID = c.CONTAINERID
+SELECT
+    CONTAINERID,
+    MFGORDERNAME,
+    CONTAINERNAME,
+    SPECNAME
+FROM DWH.DW_MES_CONTAINER
 WHERE {{ WORK_ORDER_FILTER }}
diff --git a/src/mes_dashboard/sql/reject_history/performance_daily.sql b/src/mes_dashboard/sql/reject_history/performance_daily.sql
new file mode 100644
index 0000000..5927956
--- /dev/null
+++ b/src/mes_dashboard/sql/reject_history/performance_daily.sql
@@ -0,0 +1,153 @@
+-- Reject History Performance (Daily Grain)
+-- Aggregates reject history into a performance dataset for reporting.
+--
+-- Parameters:
+--   :start_date - Start date (YYYY-MM-DD)
+--   :end_date   - End date (YYYY-MM-DD)
+--
+-- Source tables:
+--   DWH.DW_MES_LOTREJECTHISTORY   (fact)
+--   DWH.DW_MES_CONTAINER          (lot/product/workorder dimensions)
+--   DWH.DW_MES_SPEC_WORKCENTER_V  (workcenter group mapping)
+--
+-- Important rules:
+--   1) REJECT_TOTAL_QTY = REJECTQTY + STANDBYQTY + QTYTOPROCESS + INPROCESSQTY + PROCESSEDQTY.
+--   2) DEFECT_QTY uses DEFECTQTY field and is tracked separately (non-charge-off).
+--   3) MOVEIN_QTY is de-duplicated at event level by HISTORYMAINLINEID.
+--   4) SPEC_WORKCENTER_V is pre-aggregated to avoid row multiplication.
+
+WITH workcenter_map AS (
+    SELECT
+        WORK_CENTER,
+        MIN(WORK_CENTER_GROUP) KEEP (
+            DENSE_RANK FIRST ORDER BY WORKCENTERSEQUENCE_GROUP
+        ) AS WORKCENTER_GROUP,
+        MIN(WORKCENTERSEQUENCE_GROUP) AS WORKCENTERSEQUENCE_GROUP
+    FROM DWH.DW_MES_SPEC_WORKCENTER_V
+    WHERE WORK_CENTER IS NOT NULL
+    GROUP BY WORK_CENTER
+),
+reject_raw AS (
+    SELECT
+        TRUNC(r.TXNDATE) AS TXN_DAY,
+        TO_CHAR(TRUNC(r.TXNDATE), 'YYYY-MM') AS TXN_MONTH,
+        r.CONTAINERID,
+        NVL(TRIM(r.PJ_WORKORDER), TRIM(c.MFGORDERNAME)) AS PJ_WORKORDER,
+        NVL(TRIM(c.PJ_TYPE), '(NA)') AS PJ_TYPE,
+        NVL(TRIM(c.PRODUCTLINENAME), '(NA)') AS PRODUCTLINENAME,
+        NVL(TRIM(r.WORKCENTERNAME), '(NA)') AS WORKCENTERNAME,
+        NVL(TRIM(wm.WORKCENTER_GROUP), NVL(TRIM(r.WORKCENTERNAME), '(NA)')) AS WORKCENTER_GROUP,
+        NVL(wm.WORKCENTERSEQUENCE_GROUP, 999) AS WORKCENTERSEQUENCE_GROUP,
+        NVL(TRIM(r.SPECNAME), '(NA)') AS SPECNAME,
+        NVL(TRIM(r.EQUIPMENTNAME), '(NA)') AS EQUIPMENTNAME,
+        NVL(
+            TRIM(REGEXP_SUBSTR(r.EQUIPMENTNAME, '[^,]+', 1, 1)),
+            NVL(TRIM(r.EQUIPMENTNAME), '(NA)')
+        ) AS PRIMARY_EQUIPMENTNAME,
+        NVL(TRIM(r.LOSSREASONNAME), '(未填寫)') AS LOSSREASONNAME,
+        NVL(TRIM(r.REJECTCATEGORYNAME), '(未填寫)') AS REJECTCATEGORYNAME,
+        NVL(r.MOVEINQTY, 0) AS MOVEINQTY,
+        NVL(r.REJECTQTY, 0) AS REJECT_QTY,
+        NVL(r.STANDBYQTY, 0) AS STANDBY_QTY,
+        NVL(r.QTYTOPROCESS, 0) AS QTYTOPROCESS_QTY,
+        NVL(r.INPROCESSQTY, 0) AS INPROCESS_QTY,
+        NVL(r.PROCESSEDQTY, 0) AS PROCESSED_QTY,
+        NVL(r.REJECTQTY, 0)
+          + NVL(r.STANDBYQTY, 0)
+          + NVL(r.QTYTOPROCESS, 0)
+          + NVL(r.INPROCESSQTY, 0)
+          + NVL(r.PROCESSEDQTY, 0) AS REJECT_TOTAL_QTY,
+        NVL(r.DEFECTQTY, 0) AS DEFECT_QTY,
+        ROW_NUMBER() OVER (
+            PARTITION BY NVL(
+                TRIM(r.HISTORYMAINLINEID),
+                TRIM(r.CONTAINERID) || ':' || TO_CHAR(r.TXNDATE, 'YYYYMMDDHH24MISS') || ':' || NVL(TRIM(r.SPECID), '-')
+            )
+            ORDER BY NVL(TRIM(r.LOSSREASONNAME), ' ')
+        ) AS EVENT_RN
+    FROM DWH.DW_MES_LOTREJECTHISTORY r
+    LEFT JOIN DWH.DW_MES_CONTAINER c
+      ON c.CONTAINERID = r.CONTAINERID
+    LEFT JOIN workcenter_map wm
+      ON wm.WORK_CENTER = r.WORKCENTERNAME
+    WHERE r.TXNDATE >= TO_DATE(:start_date, 'YYYY-MM-DD')
+      AND r.TXNDATE < TO_DATE(:end_date, 'YYYY-MM-DD') + 1
+),
+daily_agg AS (
+    SELECT
+        TXN_DAY,
+        TXN_MONTH,
+        WORKCENTER_GROUP,
+        WORKCENTERSEQUENCE_GROUP,
+        WORKCENTERNAME,
+        SPECNAME,
+        EQUIPMENTNAME,
+        PRIMARY_EQUIPMENTNAME,
+        PRODUCTLINENAME,
+        PJ_TYPE,
+        LOSSREASONNAME,
+        REJECTCATEGORYNAME,
+        COUNT(*) AS REJECT_EVENT_ROWS,
+        COUNT(DISTINCT CONTAINERID) AS AFFECTED_LOT_COUNT,
+        COUNT(DISTINCT PJ_WORKORDER) AS AFFECTED_WORKORDER_COUNT,
+        SUM(CASE WHEN EVENT_RN = 1 THEN MOVEINQTY ELSE 0 END) AS MOVEIN_QTY,
+        SUM(REJECT_QTY) AS REJECT_QTY,
+        SUM(REJECT_TOTAL_QTY) AS REJECT_TOTAL_QTY,
+        SUM(DEFECT_QTY) AS DEFECT_QTY,
+        SUM(STANDBY_QTY) AS STANDBY_QTY,
+        SUM(QTYTOPROCESS_QTY) AS QTYTOPROCESS_QTY,
+        SUM(INPROCESS_QTY) AS INPROCESS_QTY,
+        SUM(PROCESSED_QTY) AS PROCESSED_QTY
+    FROM reject_raw
+    GROUP BY
+        TXN_DAY,
+        TXN_MONTH,
+        WORKCENTER_GROUP,
+        WORKCENTERSEQUENCE_GROUP,
+        WORKCENTERNAME,
+        SPECNAME,
+        EQUIPMENTNAME,
+        PRIMARY_EQUIPMENTNAME,
+        PRODUCTLINENAME,
+        PJ_TYPE,
+        LOSSREASONNAME,
+        REJECTCATEGORYNAME
+)
+SELECT
+    TXN_DAY,
+    TXN_MONTH,
+    WORKCENTER_GROUP,
+    WORKCENTERSEQUENCE_GROUP,
+    WORKCENTERNAME,
+    SPECNAME,
+    EQUIPMENTNAME,
+    PRIMARY_EQUIPMENTNAME,
+    PRODUCTLINENAME,
+    PJ_TYPE,
+    LOSSREASONNAME,
+    REJECTCATEGORYNAME,
+    REJECT_EVENT_ROWS,
+    AFFECTED_LOT_COUNT,
+    AFFECTED_WORKORDER_COUNT,
+    MOVEIN_QTY,
+    REJECT_QTY,
+    REJECT_TOTAL_QTY,
+    DEFECT_QTY,
+    STANDBY_QTY,
+    QTYTOPROCESS_QTY,
+    INPROCESS_QTY,
+    PROCESSED_QTY,
+    CASE
+        WHEN MOVEIN_QTY = 0 THEN 0
+        ELSE ROUND(REJECT_TOTAL_QTY * 100 / MOVEIN_QTY, 4)
+    END AS REJECT_RATE_PCT,
+    CASE
+        WHEN MOVEIN_QTY = 0 THEN 0
+        ELSE ROUND(DEFECT_QTY * 100 / MOVEIN_QTY, 4)
+    END AS DEFECT_RATE_PCT,
+    CASE
+        WHEN (REJECT_TOTAL_QTY + DEFECT_QTY) = 0 THEN 0
+        ELSE ROUND(REJECT_TOTAL_QTY * 100 / (REJECT_TOTAL_QTY + DEFECT_QTY), 4)
+    END AS REJECT_SHARE_PCT
+FROM daily_agg
+ORDER BY TXN_DAY DESC, WORKCENTERSEQUENCE_GROUP, WORKCENTERNAME, DEFECT_QTY DESC
diff --git a/src/mes_dashboard/templates/query_tool.html b/src/mes_dashboard/templates/query_tool.html
index 083ff07..7398613 100644
--- a/src/mes_dashboard/templates/query_tool.html
+++ b/src/mes_dashboard/templates/query_tool.html
@@ -2,1266 +2,11 @@
 
 {% block title %}批次追蹤工具{% endblock %}
 
-{% block head_extra %}
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Microsoft JhengHei', Arial, sans-serif;
-            background: #f5f5f5;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1800px;
-            margin: 0 auto;
-        }
-
-        .header {
-            background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
-            color: white;
-            padding: 30px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-        }
-
-        .header h1 {
-            font-size: 28px;
-            margin-bottom: 10px;
-        }
-
-        .header p {
-            opacity: 0.9;
-            font-size: 14px;
-        }
-
-        /* Single column layout with full width */
-        .main-content {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        /* Top filter bar */
-        .filter-bar {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 16px 20px;
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-            flex-wrap: wrap;
-        }
-
-        .filter-bar .filter-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .filter-bar label {
-            font-weight: 500;
-            color: #666;
-            font-size: 14px;
-            white-space: nowrap;
-        }
-
-        .filter-bar select {
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-            background: white;
-            cursor: pointer;
-            min-width: 120px;
-        }
-
-        .filter-bar select:focus {
-            outline: none;
-            border-color: #4e54c8;
-        }
-
-        .filter-bar .search-input {
-            flex: 1;
-            min-width: 200px;
-            max-width: 400px;
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-        }
-
-        .filter-bar .search-input:focus {
-            outline: none;
-            border-color: #4e54c8;
-        }
-
-        /* Sticky selection bar for LOT and workcenter filter */
-        .selection-bar {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            padding: 12px 20px;
-            background: linear-gradient(135deg, #f8f9ff 0%, #eef1ff 100%);
-            border: 1px solid #d4d9ff;
-            border-radius: 8px;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            flex-wrap: wrap;
-        }
-
-        .selection-bar .wc-filter-container {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .selection-bar .wc-filter-label {
-            font-size: 13px;
-            font-weight: 500;
-            color: #555;
-            white-space: nowrap;
-        }
-
-        .selection-bar .selection-hint {
-            margin-left: auto;
-            font-size: 12px;
-            color: #888;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .selection-bar .selection-hint::before {
-            content: "💡";
-        }
-
-        /* LOT selector dropdown */
-        .lot-selector {
-            position: relative;
-        }
-
-        .lot-selector-btn {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            background: white;
-            cursor: pointer;
-            font-size: 14px;
-            min-width: 180px;
-        }
-
-        .lot-selector-btn:hover {
-            border-color: #4e54c8;
-        }
-
-        .lot-selector-btn .lot-count-badge {
-            background: #4e54c8;
-            color: white;
-            padding: 2px 8px;
-            border-radius: 10px;
-            font-size: 12px;
-            font-weight: 600;
-        }
-
-        .lot-selector-dropdown {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            min-width: 350px;
-            max-height: 450px;
-            overflow-y: auto;
-            background: white;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            z-index: 1000;
-            display: none;
-        }
-
-        .lot-selector-dropdown.show {
-            display: block;
-        }
-
-        .lot-selector-dropdown .lot-option {
-            display: flex;
-            align-items: center;
-            padding: 8px 12px;
-            border-bottom: 1px solid #f0f0f0;
-            cursor: pointer;
-            transition: background 0.15s;
-        }
-
-        .lot-selector-dropdown .lot-option:hover {
-            background: #f5f7ff;
-        }
-
-        .lot-selector-dropdown .lot-option.selected {
-            background: #e8f4e8;
-        }
-
-        .lot-selector-dropdown .lot-option-checkbox input[type="checkbox"] {
-            width: 16px;
-            height: 16px;
-            cursor: pointer;
-            accent-color: #4e54c8;
-        }
-
-        .lot-selector-dropdown .lot-option-info {
-            flex: 1;
-        }
-
-        .lot-selector-dropdown .lot-option-id {
-            font-weight: 600;
-            color: #333;
-            font-size: 13px;
-        }
-
-        .lot-selector-dropdown .lot-option-spec {
-            font-size: 11px;
-            color: #888;
-        }
-
-        .lot-selector-dropdown .lot-group-header {
-            position: sticky;
-            top: 0;
-            z-index: 1;
-        }
-
-        /* Workcenter Group Selector */
-        .wc-group-selector {
-            position: relative;
-        }
-
-        .wc-group-btn {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            background: white;
-            cursor: pointer;
-            font-size: 14px;
-            min-width: 160px;
-            transition: border-color 0.2s;
-        }
-
-        .wc-group-btn:hover {
-            border-color: #4e54c8;
-        }
-
-        .wc-group-badge {
-            background: #4e54c8;
-            color: white;
-            padding: 2px 8px;
-            border-radius: 10px;
-            font-size: 12px;
-            font-weight: 600;
-        }
-
-        .wc-group-dropdown {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            min-width: 280px;
-            max-height: 400px;
-            background: white;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            z-index: 1000;
-            display: none;
-            margin-top: 4px;
-        }
-
-        .wc-group-dropdown.show {
-            display: block;
-        }
-
-        .wc-group-header {
-            padding: 10px 12px;
-            border-bottom: 1px solid #e0e0e0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 13px;
-            background: #fafafa;
-        }
-
-        .wc-group-search {
-            padding: 8px 12px;
-            border-bottom: 1px solid #f0f0f0;
-        }
-
-        .wc-group-search input {
-            width: 100%;
-            padding: 6px 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 13px;
-        }
-
-        .wc-group-search input:focus {
-            outline: none;
-            border-color: #4e54c8;
-        }
-
-        .wc-group-list {
-            max-height: 280px;
-            overflow-y: auto;
-        }
-
-        .wc-group-item {
-            display: flex;
-            align-items: center;
-            padding: 8px 12px;
-            cursor: pointer;
-            font-size: 13px;
-            border-bottom: 1px solid #f5f5f5;
-            transition: background 0.15s;
-        }
-
-        .wc-group-item:hover {
-            background: #f5f7ff;
-        }
-
-        .wc-group-item.selected {
-            background: #e8f4e8;
-        }
-
-        .wc-group-item label {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-            width: 100%;
-        }
-
-        .wc-group-item input[type="checkbox"] {
-            width: 16px;
-            height: 16px;
-            accent-color: #4e54c8;
-        }
-
-        .wc-group-footer {
-            padding: 10px 12px;
-            border-top: 1px solid #e0e0e0;
-            display: flex;
-            justify-content: flex-end;
-            gap: 8px;
-            background: #fafafa;
-        }
-
-        .wc-group-footer .btn-sm {
-            padding: 6px 12px;
-            font-size: 12px;
-        }
-
-        /* LOT info bar */
-        .lot-info-bar {
-            display: flex;
-            align-items: center;
-            gap: 24px;
-            padding: 12px 20px;
-            background: #f8f9fa;
-            border-radius: 6px;
-            flex-wrap: wrap;
-        }
-
-        .lot-info-bar .info-item {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .lot-info-bar .info-label {
-            font-size: 12px;
-            color: #888;
-        }
-
-        .lot-info-bar .info-value {
-            font-size: 14px;
-            font-weight: 600;
-            color: #333;
-        }
-
-        /* Query mode tabs in filter bar */
-        .query-mode-tabs {
-            display: flex;
-            gap: 4px;
-            background: #f0f0f0;
-            padding: 4px;
-            border-radius: 6px;
-        }
-
-        .query-mode-tab {
-            padding: 6px 12px;
-            border: none;
-            background: transparent;
-            cursor: pointer;
-            font-size: 13px;
-            border-radius: 4px;
-            transition: all 0.2s;
-            white-space: nowrap;
-        }
-
-        .query-mode-tab:hover {
-            background: #e0e0e0;
-        }
-
-        .query-mode-tab.active {
-            background: white;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-            font-weight: 600;
-            color: #4e54c8;
-        }
-
-        /* Card style */
-        .card {
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        }
-
-        .card-header {
-            background: #f8f9fa;
-            padding: 15px 20px;
-            border-bottom: 1px solid #e0e0e0;
-            font-weight: 600;
-            color: #333;
-            border-radius: 8px 8px 0 0;
-        }
-
-        .card-body {
-            padding: 20px;
-            overflow-x: auto;
-        }
-
-        /* Input section */
-        .input-section {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .section-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #4e54c8;
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid #4e54c8;
-        }
-
-        /* Query type selector */
-        .query-type-selector {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-
-        .query-type-btn {
-            padding: 10px 20px;
-            border: 2px solid #e0e0e0;
-            border-radius: 6px;
-            background: white;
-            cursor: pointer;
-            font-size: 14px;
-            transition: all 0.2s;
-        }
-
-        .query-type-btn:hover {
-            border-color: #4e54c8;
-        }
-
-        .query-type-btn.active {
-            border-color: #4e54c8;
-            background: #f0f1ff;
-            color: #4e54c8;
-            font-weight: 600;
-        }
-
-        /* Text input */
-        .filter-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .filter-group label {
-            font-weight: 500;
-            color: #333;
-            font-size: 14px;
-        }
-
-        .filter-group .hint {
-            font-size: 12px;
-            color: #888;
-        }
-
-        textarea {
-            width: 100%;
-            min-height: 150px;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-            font-family: monospace;
-            resize: vertical;
-        }
-
-        textarea:focus {
-            outline: none;
-            border-color: #4e54c8;
-        }
-
-        /* Equipment Selector */
-        .equipment-selector {
-            position: relative;
-        }
-
-        .equipment-input {
-            width: 100%;
-            padding: 10px 15px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-            cursor: pointer;
-            background: white;
-        }
-
-        .equipment-input:focus {
-            outline: none;
-            border-color: #4e54c8;
-        }
-
-        .equipment-dropdown {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            max-height: 350px;
-            overflow-y: auto;
-            background: white;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            z-index: 1000;
-            display: none;
-        }
-
-        .equipment-dropdown.show {
-            display: block;
-        }
-
-        .equipment-search {
-            width: 100%;
-            padding: 10px 15px;
-            border: none;
-            border-bottom: 1px solid #eee;
-            font-size: 14px;
-        }
-
-        .equipment-search:focus {
-            outline: none;
-        }
-
-        .equipment-list {
-            max-height: 280px;
-            overflow-y: auto;
-        }
-
-        .equipment-item {
-            display: flex;
-            align-items: center;
-            padding: 10px 15px;
-            cursor: pointer;
-            border-bottom: 1px solid #f0f0f0;
-        }
-
-        .equipment-item:hover {
-            background: #f5f7ff;
-        }
-
-        .equipment-item.selected {
-            background: #e3e8ff;
-        }
-
-        .equipment-item input[type="checkbox"] {
-            margin-right: 10px;
-        }
-
-        .equipment-info {
-            flex: 1;
-        }
-
-        .equipment-name {
-            font-weight: 500;
-        }
-
-        .equipment-workcenter {
-            font-size: 12px;
-            color: #666;
-        }
-
-        .selected-count {
-            font-size: 12px;
-            color: #4e54c8;
-            margin-top: 5px;
-        }
-
-        /* Date Range */
-        .date-range {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        input[type="date"] {
-            padding: 10px 15px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-        }
-
-        input[type="date"]:focus {
-            outline: none;
-            border-color: #4e54c8;
-        }
-
-        /* Buttons */
-        .btn {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: bold;
-            transition: all 0.2s;
-        }
-
-        .btn-primary {
-            background: #4e54c8;
-            color: white;
-        }
-
-        .btn-primary:hover {
-            background: #3d44a8;
-        }
-
-        .btn-success {
-            background: #28a745;
-            color: white;
-        }
-
-        .btn-success:hover {
-            background: #218838;
-        }
-
-        .btn-secondary {
-            background: #6c757d;
-            color: white;
-        }
-
-        .btn-secondary:hover {
-            background: #5a6268;
-        }
-
-        .btn-sm {
-            padding: 6px 12px;
-            font-size: 12px;
-        }
-
-        .btn:disabled {
-            background: #ccc;
-            cursor: not-allowed;
-        }
-
-        .btn-block {
-            width: 100%;
-        }
-
-        .action-buttons {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-
-        /* Tabs */
-        .tabs {
-            display: flex;
-            border-bottom: 1px solid #e0e0e0;
-            margin-bottom: 20px;
-        }
-
-        .tab {
-            padding: 12px 20px;
-            border: none;
-            background: none;
-            cursor: pointer;
-            font-size: 14px;
-            color: #666;
-            border-bottom: 3px solid transparent;
-            transition: all 0.2s;
-        }
-
-        .tab:hover {
-            color: #4e54c8;
-        }
-
-        .tab.active {
-            color: #4e54c8;
-            border-bottom-color: #4e54c8;
-            font-weight: 600;
-        }
-
-        .tab-content {
-            display: none;
-        }
-
-        .tab-content.active {
-            display: block;
-        }
-
-        /* Table */
-        .table-container {
-            overflow-x: auto;
-            border: 1px solid #e0e0e0;
-            border-radius: 8px;
-        }
-
-        table {
-            width: 100%;
-            min-width: 800px;
-            border-collapse: collapse;
-            font-size: 13px;
-        }
-
-        th, td {
-            padding: 10px 12px;
-            text-align: left;
-            border-bottom: 1px solid #e0e0e0;
-            white-space: nowrap;
-        }
-
-        th {
-            background: #f8f9fa;
-            font-weight: 600;
-            color: #333;
-            position: sticky;
-            top: 0;
-            z-index: 1;
-        }
-
-        /* Sticky action column on right */
-        th.sticky-col, td.sticky-col {
-            position: sticky;
-            right: 0;
-            background: #f8f9fa;
-            box-shadow: -2px 0 4px rgba(0,0,0,0.05);
-            z-index: 2;
-        }
-
-        td.sticky-col {
-            background: white;
-        }
-
-        tr:hover td.sticky-col {
-            background: #f5f7ff;
-        }
-
-        tr:hover {
-            background: #f5f7ff;
-        }
-
-        /* Expandable Row */
-        .expand-btn {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 16px;
-            color: #4e54c8;
-        }
-
-        .expand-btn:hover {
-            background: #e3e8ff;
-        }
-
-        .lot-row.expanded {
-            background: #f5f7ff;
-        }
-
-        .detail-row {
-            display: none;
-        }
-
-        .detail-row.show {
-            display: table-row;
-        }
-
-        .detail-cell {
-            padding: 0;
-            background: #fafafa;
-        }
-
-        .detail-content {
-            padding: 15px 20px;
-        }
-
-        /* LOT List */
-        .lot-list {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-
-        .lot-item {
-            display: flex;
-            align-items: center;
-            padding: 12px 15px;
-            background: #f8f9fa;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .lot-item:hover {
-            background: #e3e8ff;
-        }
-
-        .lot-item.active {
-            background: #4e54c8;
-            color: white;
-        }
-
-        .lot-item .lot-id {
-            font-weight: 600;
-            flex: 1;
-        }
-
-        .lot-item .lot-info {
-            font-size: 12px;
-            opacity: 0.8;
-        }
-
-        /* LOT item with checkbox */
-        .lot-item .lot-checkbox {
-            flex-shrink: 0;
-            margin-right: 10px;
-            display: flex;
-            align-items: center;
-        }
-
-        .lot-item .lot-checkbox input[type="checkbox"] {
-            width: 16px;
-            height: 16px;
-            cursor: pointer;
-            accent-color: #4e54c8;
-        }
-
-        .lot-item .lot-content {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .lot-item.active .lot-checkbox input[type="checkbox"] {
-            accent-color: white;
-        }
-
-        /* Timeline styles */
-        #timelineContainer {
-            border-top: 1px solid #e0e0e0;
-            padding-top: 20px;
-        }
-
-        .timeline-bar {
-            transition: transform 0.15s, box-shadow 0.15s;
-        }
-
-        .timeline-bar:hover {
-            transform: scaleY(1.15);
-            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-            z-index: 10;
-        }
-
-        /* Scale button active state */
-        #timelineContainer .btn.active {
-            background: #4a90d9;
-            color: white;
-            border-color: #4a90d9;
-        }
-
-        /* Timeline bar labels */
-        .timeline-bar-label,
-        .timeline-bar-station {
-            pointer-events: none;
-        }
-
-        /* Sticky LOT ID column when scrolling */
-        #timelineScrollContainer {
-            position: relative;
-        }
-
-        /* Timeline axis styling */
-        .timeline-axis-container {
-            position: sticky;
-            top: 0;
-            background: white;
-            z-index: 3;
-        }
-
-        /* History timeline */
-        .history-timeline {
-            padding: 20px;
-        }
-
-        .history-step {
-            display: flex;
-            gap: 15px;
-            padding: 15px 0;
-            border-left: 3px solid #e0e0e0;
-            padding-left: 20px;
-            margin-left: 10px;
-            position: relative;
-        }
-
-        .history-step::before {
-            content: '';
-            position: absolute;
-            left: -8px;
-            top: 20px;
-            width: 12px;
-            height: 12px;
-            background: #4e54c8;
-            border-radius: 50%;
-        }
-
-        .history-step:last-child {
-            border-left-color: transparent;
-        }
-
-        .step-info {
-            flex: 1;
-        }
-
-        .step-station {
-            font-weight: 600;
-            font-size: 15px;
-            color: #333;
-        }
-
-        .step-equipment {
-            font-size: 13px;
-            color: #666;
-            margin-top: 3px;
-        }
-
-        .step-time {
-            font-size: 12px;
-            color: #888;
-            margin-top: 5px;
-        }
-
-        .step-qty {
-            font-size: 13px;
-            color: #28a745;
-        }
-
-        .step-actions {
-            display: flex;
-            gap: 8px;
-        }
-
-        /* Status badges */
-        .badge {
-            display: inline-block;
-            padding: 3px 8px;
-            border-radius: 4px;
-            font-size: 11px;
-            font-weight: 500;
-        }
-
-        .badge-info { background: #cfe2ff; color: #084298; }
-        .badge-success { background: #d1e7dd; color: #0a3622; }
-        .badge-warning { background: #fff3cd; color: #664d03; }
-        .badge-danger { background: #f8d7da; color: #58151c; }
-
-        /* Loading */
-        .loading {
-            text-align: center;
-            padding: 40px;
-            color: #666;
-        }
-
-        .loading-spinner {
-            display: inline-block;
-            width: 40px;
-            height: 40px;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #4e54c8;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .error {
-            background: #f8d7da;
-            color: #721c24;
-            padding: 15px;
-            border-radius: 6px;
-            margin: 10px 0;
-        }
-
-        .info-box {
-            background: #e3e8ff;
-            color: #4e54c8;
-            padding: 10px 15px;
-            border-radius: 6px;
-            font-size: 13px;
-            margin-bottom: 15px;
-        }
-
-        /* Empty state */
-        .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            color: #666;
-        }
-
-        .empty-state p {
-            margin-bottom: 10px;
-        }
-
-        /* Arrow animation */
-        .arrow-icon {
-            transition: transform 0.2s;
-        }
-
-        .arrow-icon.rotated {
-            transform: rotate(90deg);
-        }
-
-        /* Section divider */
-        .section-divider {
-            border: none;
-            border-top: 1px dashed #ddd;
-            margin: 20px 0;
-        }
-
-        /* Association tabs in detail */
-        .assoc-tabs {
-            display: flex;
-            gap: 5px;
-            margin-bottom: 15px;
-            padding: 5px;
-            background: #f0f0f0;
-            border-radius: 6px;
-        }
-
-        .assoc-tab {
-            padding: 8px 15px;
-            border: none;
-            background: none;
-            cursor: pointer;
-            font-size: 13px;
-            border-radius: 4px;
-            transition: all 0.2s;
-        }
-
-        .assoc-tab:hover {
-            background: #e0e0e0;
-        }
-
-        .assoc-tab.active {
-            background: white;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-            font-weight: 600;
-        }
-
-        /* Result header */
-        .result-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-            padding: 10px 15px;
-            background: #f8f9fa;
-            border-radius: 6px;
-        }
-
-        .result-info {
-            font-size: 14px;
-            color: #666;
-        }
-
-        .result-actions {
-            display: flex;
-            gap: 10px;
-        }
-    </style>
-{% endblock %}
-
 {% block content %}
-    <div class="container">
-        <div class="header">
-            <h1>批次追蹤工具</h1>
-            <p>批次生產歷程追蹤、前後批比對、設備時段綜合查詢</p>
-        </div>
-
-        <div class="main-content">
-            <!-- Top: Query Mode Tabs -->
-            <div class="query-mode-tabs" style="width: fit-content;">
-                <button class="query-mode-tab active" data-mode="batch" onclick="switchQueryMode('batch')">批次追蹤</button>
-                <button class="query-mode-tab" data-mode="equipment" onclick="switchQueryMode('equipment')">設備時段</button>
-            </div>
-
-            <!-- Batch Query Filter Bar -->
-            <div class="filter-bar" id="batchFilterBar">
-                <div class="filter-item">
-                    <label>查詢類型</label>
-                    <select id="queryTypeSelect" onchange="setQueryType(this.value)">
-                        <option value="lot_id">LOT ID</option>
-                        <option value="serial_number">流水號</option>
-                        <option value="work_order">GA工單</option>
-                    </select>
-                </div>
-
-                <div class="filter-item" style="flex: 1;">
-                    <input type="text" class="search-input" id="lotInputField" placeholder="輸入 LOT ID（多筆以逗號分隔）">
-                </div>
-
-                <button class="btn btn-primary" onclick="executeLotQuery()" id="lotQueryBtn">
-                    查詢
-                </button>
-            </div>
-
-            <!-- Sticky Sub-bar for LOT Selection and Workcenter Filter -->
-            <div class="selection-bar" id="selectionBar" style="display: none;">
-                <!-- LOT Selector -->
-                <div class="lot-selector" id="lotSelectorContainer">
-                    <div class="lot-selector-btn" onclick="toggleLotSelector()">
-                        <span id="lotSelectorDisplay">選擇 LOT</span>
-                        <span class="lot-count-badge" id="lotCountBadge">0</span>
-                    </div>
-                    <div class="lot-selector-dropdown" id="lotSelectorDropdown">
-                        <!-- LOT options will be populated here -->
-                    </div>
-                </div>
-
-                <!-- Workcenter Group Filter -->
-                <div class="wc-filter-container" id="workcenterGroupSelectorContainer">
-                    <span class="wc-filter-label">站點篩選:</span>
-                    <div id="workcenterGroupSelector">
-                        <!-- Rendered by JS -->
-                    </div>
-                </div>
-
-                <!-- Quick action hint -->
-                <div class="selection-hint" id="selectionHint">
-                    <span>選擇批次和站點後點擊「套用篩選」</span>
-                </div>
-            </div>
-
-            <!-- Equipment Query Filter Bar (hidden by default) -->
-            <div class="filter-bar" id="equipmentFilterBar" style="display: none;">
-                <div class="filter-item">
-                    <label>選擇設備</label>
-                    <div class="equipment-selector">
-                        <div class="equipment-input" onclick="toggleEquipmentDropdown()" style="min-width: 200px;">
-                            <span id="equipmentDisplay">點擊選擇設備...</span>
-                        </div>
-                        <div class="equipment-dropdown" id="equipmentDropdown">
-                            <input type="text" class="equipment-search" placeholder="搜尋設備名稱或站點..." oninput="filterEquipments(this.value)">
-                            <div class="equipment-list" id="equipmentList">
-                                <div class="loading">
-                                    <div class="loading-spinner"></div>
-                                    <br>載入設備中...
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="filter-item">
-                    <label>日期範圍</label>
-                    <div class="date-range">
-                        <input type="date" id="dateFrom">
-                        <span>~</span>
-                        <input type="date" id="dateTo">
-                    </div>
-                </div>
-
-                <button class="btn btn-secondary btn-sm" onclick="setLast30Days()">近30天</button>
-
-                <button class="btn btn-primary" onclick="executeEquipmentQuery()" id="eqQueryBtn">
-                    查詢
-                </button>
-            </div>
-
-            <!-- LOT Info Bar (shown when a LOT is selected) -->
-            <div class="lot-info-bar" id="lotInfoBar" style="display: none;">
-                <div class="info-item">
-                    <span class="info-label">LOT ID</span>
-                    <span class="info-value" id="infoLotId">-</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">產品規格</span>
-                    <span class="info-value" id="infoSpec">-</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">工單</span>
-                    <span class="info-value" id="infoWorkOrder">-</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">站點數</span>
-                    <span class="info-value" id="infoStepCount">-</span>
-                </div>
-            </div>
-
-            <!-- Results Panel (Full Width) -->
-            <div class="card" style="flex: 1;">
-                <div class="card-body">
-                    <!-- Batch Results -->
-                    <div id="batchResultsPanel">
-                        <div class="empty-state" id="lotEmptyState">
-                            <p>請輸入 LOT ID、流水號或工單後，點擊「查詢」</p>
-                        </div>
-                        <div id="lotResultsContent" style="display: none;"></div>
-                    </div>
-
-                    <!-- Equipment Results (hidden by default) -->
-                    <div id="equipmentResultsPanel" style="display: none;">
-                        <div class="empty-state" id="eqEmptyState">
-                            <p>請選擇設備和日期範圍後，點擊「查詢」</p>
-                        </div>
-                        <div id="eqResultsContent" style="display: none;"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <div id="app"></div>
 {% endblock %}
 
 {% block scripts %}
     {% set query_tool_js = frontend_asset('query-tool.js') %}
     <script type="module" src="{{ query_tool_js }}"></script>
 {% endblock %}
-
diff --git a/tests/e2e/test_query_tool_e2e.py b/tests/e2e/test_query_tool_e2e.py
new file mode 100644
index 0000000..1a6bd30
--- /dev/null
+++ b/tests/e2e/test_query_tool_e2e.py
@@ -0,0 +1,533 @@
+# -*- coding: utf-8 -*-
+"""E2E coverage for the Query Tool page (LOT 追蹤 + 設備查詢 tabs)."""
+
+from __future__ import annotations
+
+import json
+import time
+from urllib.parse import parse_qs, urlparse
+
+import pytest
+import requests
+from playwright.sync_api import Page, expect
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+# The query-tool page is served inside the portal shell as a native Vue SPA.
+# Standalone /query-tool redirects to /portal-shell/query-tool.
+QUERY_TOOL_BASE = "/portal-shell/query-tool"
+
+
+def _intercept_navigation_as_admin(page: Page, app_server: str):
+    """Intercept /api/portal/navigation to inject is_admin=True + query-tool route.
+
+    The query-tool page has status 'dev' in an admin-only drawer.  The server
+    filters out admin-only drawers for non-admin requests, so we must both set
+    ``is_admin=True`` AND inject the query-tool page into the drawers list.
+    """
+
+    def handle_route(route):
+        response = route.fetch()
+        body = response.json()
+
+        body["is_admin"] = True
+
+        # Ensure the query-tool page is present in a drawer
+        query_tool_entry = {
+            "name": "批次追蹤工具",
+            "order": 4,
+            "route": "/query-tool",
+            "status": "dev",
+        }
+
+        drawers = body.get("drawers", [])
+        found = False
+        for drawer in drawers:
+            for pg in drawer.get("pages", []):
+                if pg.get("route") == "/query-tool":
+                    found = True
+                    break
+
+        if not found:
+            # Add to the first non-admin drawer, or create a test drawer
+            target_drawer = None
+            for drawer in drawers:
+                if not drawer.get("admin_only"):
+                    target_drawer = drawer
+                    break
+            if target_drawer:
+                target_drawer["pages"].append(query_tool_entry)
+            else:
+                drawers.append({
+                    "id": "e2e-test",
+                    "name": "E2E Test",
+                    "order": 99,
+                    "admin_only": False,
+                    "pages": [query_tool_entry],
+                })
+
+        body["drawers"] = drawers
+        route.fulfill(
+            status=response.status,
+            headers={**response.headers, "content-type": "application/json"},
+            body=json.dumps(body),
+        )
+
+    page.route("**/api/portal/navigation", handle_route)
+
+
+def _wait_for_api_response(page: Page, url_token: str, timeout_seconds: float = 60.0):
+    """Wait until a response URL contains the given token and return it."""
+    matched = []
+
+    def handle_response(resp):
+        if url_token in resp.url and resp.status < 500:
+            matched.append(resp)
+
+    page.on("response", handle_response)
+    deadline = time.time() + timeout_seconds
+    while time.time() < deadline and not matched:
+        page.wait_for_timeout(300)
+    page.remove_listener("response", handle_response)
+    return matched[0] if matched else None
+
+
+def _collect_api_responses(page: Page, url_tokens: list[str], timeout_seconds: float = 60.0):
+    """Collect responses whose URLs contain any of the given tokens."""
+    collected = {}
+
+    def handle_response(resp):
+        for token in url_tokens:
+            if token in resp.url:
+                collected.setdefault(token, []).append(resp)
+
+    page.on("response", handle_response)
+    deadline = time.time() + timeout_seconds
+    while time.time() < deadline and len(collected) < len(url_tokens):
+        page.wait_for_timeout(300)
+    page.remove_listener("response", handle_response)
+    return collected
+
+
+def _api_post_json(app_server: str, path: str, body: dict, timeout: float = 60.0):
+    """Direct API POST for backend integration checks."""
+    resp = requests.post(
+        f"{app_server}{path}",
+        json=body,
+        timeout=timeout,
+    )
+    return resp
+
+
+# ---------------------------------------------------------------------------
+# Backend Integration Tests (no browser needed)
+# ---------------------------------------------------------------------------
+
+@pytest.mark.e2e
+class TestQueryToolBackendIntegration:
+    """Verify query-tool API endpoints are functional."""
+
+    def test_resolve_work_order(self, app_server: str):
+        """POST /api/query-tool/resolve with work_order returns lots."""
+        resp = _api_post_json(app_server, "/api/query-tool/resolve", {
+            "input_type": "work_order",
+            "values": ["GA26010001"],
+        })
+        assert resp.status_code == 200, f"resolve returned {resp.status_code}: {resp.text[:300]}"
+        payload = resp.json()
+        assert "data" in payload, f"response missing 'data': {list(payload.keys())}"
+        assert isinstance(payload["data"], list)
+        assert len(payload["data"]) > 0, "Expected at least 1 resolved lot for GA26010001"
+
+    def test_resolve_returns_not_found_for_garbage(self, app_server: str):
+        """POST /api/query-tool/resolve returns not_found for non-existent values."""
+        resp = _api_post_json(app_server, "/api/query-tool/resolve", {
+            "input_type": "lot_id",
+            "values": ["NONEXISTENT_LOT_12345"],
+        })
+        assert resp.status_code == 200
+        payload = resp.json()
+        not_found = payload.get("not_found", [])
+        assert "NONEXISTENT_LOT_12345" in not_found
+
+    def test_workcenter_groups_endpoint(self, app_server: str):
+        """GET /api/query-tool/workcenter-groups returns list."""
+        resp = requests.get(f"{app_server}/api/query-tool/workcenter-groups", timeout=30)
+        assert resp.status_code == 200
+        payload = resp.json()
+        assert "data" in payload
+        assert isinstance(payload["data"], list)
+
+    def test_equipment_list_endpoint(self, app_server: str):
+        """GET /api/query-tool/equipment-list returns equipment options."""
+        resp = requests.get(f"{app_server}/api/query-tool/equipment-list", timeout=30)
+        assert resp.status_code == 200
+        payload = resp.json()
+        assert "data" in payload
+        assert isinstance(payload["data"], list)
+        assert len(payload["data"]) > 0, "Expected at least 1 equipment option"
+
+    def test_lot_history_with_resolved_container(self, app_server: str):
+        """Resolve a work order then fetch lot history for first container."""
+        resolve_resp = _api_post_json(app_server, "/api/query-tool/resolve", {
+            "input_type": "work_order",
+            "values": ["GA26010001"],
+        })
+        assert resolve_resp.status_code == 200
+        lots = resolve_resp.json().get("data", [])
+        assert len(lots) > 0
+
+        container_id = str(
+            lots[0].get("container_id")
+            or lots[0].get("CONTAINERID")
+            or lots[0].get("containerId")
+            or ""
+        )
+        assert container_id, "Could not extract container_id from resolved lot"
+
+        history_resp = requests.get(
+            f"{app_server}/api/query-tool/lot-history",
+            params={"container_id": container_id},
+            timeout=60,
+        )
+        assert history_resp.status_code == 200
+        history_payload = history_resp.json()
+        assert "data" in history_payload
+        assert isinstance(history_payload["data"], list)
+
+    def test_lot_associations_materials(self, app_server: str):
+        """Fetch materials association for a resolved container."""
+        resolve_resp = _api_post_json(app_server, "/api/query-tool/resolve", {
+            "input_type": "work_order",
+            "values": ["GA26010001"],
+        })
+        lots = resolve_resp.json().get("data", [])
+        if not lots:
+            pytest.skip("No lots resolved for GA26010001")
+
+        container_id = str(
+            lots[0].get("container_id")
+            or lots[0].get("CONTAINERID")
+            or ""
+        )
+        resp = requests.get(
+            f"{app_server}/api/query-tool/lot-associations",
+            params={"container_id": container_id, "type": "materials"},
+            timeout=60,
+        )
+        assert resp.status_code == 200
+
+    def test_lineage_for_resolved_container(self, app_server: str):
+        """POST /api/trace/lineage for a resolved container."""
+        resolve_resp = _api_post_json(app_server, "/api/query-tool/resolve", {
+            "input_type": "work_order",
+            "values": ["GA26010001"],
+        })
+        lots = resolve_resp.json().get("data", [])
+        if not lots:
+            pytest.skip("No lots resolved for GA26010001")
+
+        container_id = str(
+            lots[0].get("container_id")
+            or lots[0].get("CONTAINERID")
+            or ""
+        )
+        lineage_resp = _api_post_json(app_server, "/api/trace/lineage", {
+            "profile": "query_tool",
+            "container_ids": [container_id],
+        })
+        assert lineage_resp.status_code == 200
+        payload = lineage_resp.json()
+        assert "ancestors" in payload or "data" in payload
+
+
+# ---------------------------------------------------------------------------
+# Browser E2E Tests
+# ---------------------------------------------------------------------------
+
+@pytest.mark.e2e
+class TestQueryToolPageE2E:
+    """Browser-based E2E tests for the query-tool page."""
+
+    def test_page_loads_with_tab_shell(self, page: Page, app_server: str):
+        """Query tool page loads and displays both top-level tabs."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}", wait_until="commit", timeout=60000)
+        page.wait_for_timeout(3000)
+
+        # Header should be visible (portal shell has its own h1, use the page heading)
+        heading = page.get_by_role("heading", name="批次追蹤工具")
+        expect(heading).to_be_visible()
+
+        # Both tab buttons should exist
+        lot_tab = page.locator("button", has_text="LOT 追蹤")
+        equipment_tab = page.locator("button", has_text="設備查詢")
+        expect(lot_tab).to_be_visible()
+        expect(equipment_tab).to_be_visible()
+
+    def test_lot_tab_resolve_work_order(self, page: Page, app_server: str):
+        """Enter work order, click resolve, verify lineage tree and detail panel appear."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}?tab=lot", wait_until="commit", timeout=60000)
+        page.wait_for_timeout(2000)
+
+        # Select work_order input type
+        select = page.locator("select")
+        select.select_option("work_order")
+
+        # Enter work order in textarea
+        textarea = page.locator("textarea")
+        textarea.fill("GA26010001")
+
+        # Collect API responses during resolve
+        api_tokens = ["/api/query-tool/resolve", "/api/trace/lineage"]
+        collected = {}
+
+        def handle_response(resp):
+            for token in api_tokens:
+                if token in resp.url:
+                    collected.setdefault(token, []).append(resp)
+
+        page.on("response", handle_response)
+
+        # Click resolve button
+        resolve_btn = page.locator("button", has_text="解析")
+        resolve_btn.click()
+
+        # Wait for resolve + lineage responses
+        deadline = time.time() + 60
+        while time.time() < deadline and len(collected) < 2:
+            page.wait_for_timeout(500)
+        page.remove_listener("response", handle_response)
+
+        # Verify resolve API was called
+        assert "/api/query-tool/resolve" in collected, "Resolve API was not called"
+        resolve_resp = collected["/api/query-tool/resolve"][0]
+        assert resolve_resp.ok, f"Resolve API returned {resolve_resp.status}"
+
+        # Verify lineage API was auto-fired
+        assert "/api/trace/lineage" in collected, "Lineage API was not auto-fired after resolve"
+
+        # Lineage tree should show nodes
+        page.wait_for_timeout(2000)
+        tree_section = page.locator("text=批次血緣樹")
+        expect(tree_section).to_be_visible()
+
+    def test_lot_tab_url_state_sync(self, page: Page, app_server: str):
+        """URL params are written after resolve and restored on reload."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(
+            f"{app_server}{QUERY_TOOL_BASE}?tab=lot&input_type=work_order&values=GA26010001",
+            wait_until="commit",
+            timeout=60000,
+        )
+        page.wait_for_timeout(2000)
+
+        # Verify URL params are preserved
+        url = page.url
+        assert "tab=lot" in url
+        assert "input_type=work_order" in url
+        assert "values=GA26010001" in url or "GA26010001" in url
+
+    def test_lot_detail_sub_tabs_render(self, page: Page, app_server: str):
+        """After resolve, clicking a tree node shows detail panel with sub-tabs."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}?tab=lot", wait_until="commit", timeout=60000)
+        page.wait_for_timeout(3000)
+
+        # Select work_order and resolve
+        page.locator("select").select_option("work_order")
+        page.locator("textarea").fill("GA26010001")
+        page.locator("button", has_text="解析").click()
+
+        # Wait for resolve + lineage + detail loading
+        resolve_done = _wait_for_api_response(page, "/api/query-tool/resolve", timeout_seconds=60)
+        if not resolve_done:
+            pytest.fail("Resolve did not complete within timeout")
+
+        page.wait_for_timeout(8000)
+
+        # Detail panel sub-tabs should be visible
+        detail_tabs = ["歷程", "物料", "退貨", "Hold", "Split", "Job"]
+        for tab_label in detail_tabs:
+            tab_btn = page.locator(f"button:has-text('{tab_label}')")
+            if tab_btn.count() > 0:
+                expect(tab_btn.first).to_be_visible()
+
+    def test_equipment_tab_loads_filter_bar(self, page: Page, app_server: str):
+        """Switching to equipment tab shows filter bar with equipment MultiSelect."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}?tab=equipment", wait_until="commit", timeout=60000)
+
+        # Wait for equipment list to bootstrap
+        equipment_resp = _wait_for_api_response(page, "/api/query-tool/equipment-list", timeout_seconds=30)
+        assert equipment_resp is not None, "Equipment list API was not called"
+        assert equipment_resp.ok
+
+        # Filter bar should show date inputs
+        start_date = page.locator("input[type='date']").first
+        expect(start_date).to_be_visible()
+
+        # Equipment sub-tabs should be visible
+        for label in ["生產紀錄", "維修紀錄", "報廢紀錄", "Timeline"]:
+            tab_btn = page.locator(f"button:has-text('{label}')")
+            if tab_btn.count() > 0:
+                expect(tab_btn.first).to_be_visible()
+
+    def test_tab_switching_preserves_state(self, page: Page, app_server: str):
+        """Switching between LOT and equipment tabs preserves entered data."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}?tab=lot", wait_until="commit", timeout=60000)
+        page.wait_for_timeout(1500)
+
+        # Enter text in LOT tab
+        textarea = page.locator("textarea")
+        textarea.fill("GA26010001")
+
+        # Switch to equipment tab
+        equipment_tab = page.locator("button", has_text="設備查詢")
+        equipment_tab.click()
+        page.wait_for_timeout(500)
+
+        # Switch back to LOT tab
+        lot_tab = page.locator("button", has_text="LOT 追蹤")
+        lot_tab.click()
+        page.wait_for_timeout(500)
+
+        # Verify textarea still has the value (v-show preserves state)
+        expect(textarea).to_have_value("GA26010001")
+
+    def test_lineage_tree_expand_collapse(self, page: Page, app_server: str):
+        """After resolve, expand-all and collapse-all buttons work."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}?tab=lot", wait_until="commit", timeout=60000)
+        page.wait_for_timeout(1500)
+
+        page.locator("select").select_option("work_order")
+        page.locator("textarea").fill("GA26010001")
+        page.locator("button", has_text="解析").click()
+
+        # Wait for resolve + lineage
+        page.wait_for_timeout(8000)
+
+        # Try expand all
+        expand_btn = page.locator("button", has_text="全部展開")
+        if expand_btn.count() > 0 and expand_btn.is_visible():
+            expand_btn.click()
+            page.wait_for_timeout(5000)
+
+            # Try collapse all
+            collapse_btn = page.locator("button", has_text="收合")
+            if collapse_btn.count() > 0:
+                collapse_btn.click()
+                page.wait_for_timeout(1000)
+
+    def test_export_button_present_when_data_loaded(self, page: Page, app_server: str):
+        """After resolving and selecting a lot, export button should appear."""
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}?tab=lot", wait_until="commit", timeout=60000)
+        page.wait_for_timeout(1500)
+
+        page.locator("select").select_option("work_order")
+        page.locator("textarea").fill("GA26010001")
+        page.locator("button", has_text="解析").click()
+
+        # Wait for resolve + detail load
+        page.wait_for_timeout(8000)
+
+        # Look for export button (should appear in detail panel)
+        export_btn = page.locator("button", has_text="匯出")
+        # May or may not be visible depending on data state, just verify no crash
+        page.wait_for_timeout(1000)
+
+
+# ---------------------------------------------------------------------------
+# Full Flow Integration (API → UI round-trip)
+# ---------------------------------------------------------------------------
+
+@pytest.mark.e2e
+class TestQueryToolFullFlowE2E:
+    """End-to-end full workflow: resolve → lineage → history → association."""
+
+    def test_work_order_full_flow(self, page: Page, app_server: str):
+        """
+        Complete flow:
+        1. Navigate to query-tool
+        2. Select work_order, enter GA26010001
+        3. Click resolve
+        4. Verify resolve API → lineage auto-fire → history load
+        5. Click through sub-tabs
+        """
+        _intercept_navigation_as_admin(page, app_server)
+        page.goto(f"{app_server}{QUERY_TOOL_BASE}?tab=lot", wait_until="commit", timeout=60000)
+        page.wait_for_timeout(2000)
+
+        # Step 1: Configure input
+        page.locator("select").select_option("work_order")
+        page.locator("textarea").fill("GA26010001")
+
+        # Step 2: Track all API calls
+        api_calls = {}
+
+        def track_response(resp):
+            for key in [
+                "/api/query-tool/resolve",
+                "/api/trace/lineage",
+                "/api/query-tool/lot-history",
+                "/api/query-tool/lot-associations",
+            ]:
+                if key in resp.url:
+                    api_calls.setdefault(key, []).append({
+                        "status": resp.status,
+                        "url": resp.url,
+                    })
+
+        page.on("response", track_response)
+
+        # Step 3: Click resolve
+        page.locator("button", has_text="解析").click()
+
+        # Step 4: Wait for cascade of API calls
+        deadline = time.time() + 90
+        while time.time() < deadline:
+            page.wait_for_timeout(500)
+            # Minimum: resolve + lineage + history
+            if (
+                "/api/query-tool/resolve" in api_calls
+                and "/api/trace/lineage" in api_calls
+                and "/api/query-tool/lot-history" in api_calls
+            ):
+                break
+
+        page.remove_listener("response", track_response)
+
+        # Step 5: Verify API cascade
+        assert "/api/query-tool/resolve" in api_calls, \
+            f"resolve not called. Calls seen: {list(api_calls.keys())}"
+        assert api_calls["/api/query-tool/resolve"][0]["status"] == 200
+
+        assert "/api/trace/lineage" in api_calls, \
+            f"lineage not auto-fired. Calls seen: {list(api_calls.keys())}"
+
+        assert "/api/query-tool/lot-history" in api_calls, \
+            f"lot-history not loaded. Calls seen: {list(api_calls.keys())}"
+
+        # Step 6: Verify URL state updated
+        current_url = page.url
+        assert "tab=lot" in current_url
+        assert "work_order" in current_url
+
+        # Step 7: Click through sub-tabs if available
+        for tab_label in ["物料", "Hold", "歷程"]:
+            tab_btn = page.locator(f"button:has-text('{tab_label}')")
+            if tab_btn.count() > 0 and tab_btn.first.is_visible():
+                tab_btn.first.click()
+                page.wait_for_timeout(2000)
+
+        # Step 8: Success message should be visible
+        success_msg = page.locator("text=解析完成")
+        if success_msg.count() > 0:
+            expect(success_msg.first).to_be_visible()
diff --git a/tests/test_lineage_engine.py b/tests/test_lineage_engine.py
index 4b12e2f..b319fa7 100644
--- a/tests/test_lineage_engine.py
+++ b/tests/test_lineage_engine.py
@@ -130,7 +130,20 @@ def test_resolve_full_genealogy_combines_split_and_merge(
 
     result = LineageEngine.resolve_full_genealogy(["A"], {"A": "LOT-A"})
 
-    assert result == {"A": {"B", "C", "M1", "M0"}}
+    assert result["ancestors"] == {"A": {"B", "C", "M1", "M0"}}
+    assert result["cid_to_name"]["A"] == "LOT-A"
+    assert result["cid_to_name"]["M0"] == "LOT-M0"
+
+    # parent_map should have direct edges only
+    pm = result["parent_map"]
+    assert pm["A"] == ["B"]
+    assert pm["B"] == ["C", "M1"] or set(pm["B"]) == {"C", "M1"}
+    assert pm["M1"] == ["M0"]
+
+    # merge_edges: B → M1 (LOT-B matched merge source)
+    me = result["merge_edges"]
+    assert "M1" in me.get("B", [])
+
     assert mock_resolve_split_ancestors.call_count == 2
     mock_resolve_merge_sources.assert_called_once()
 
diff --git a/tests/test_query_tool_service.py b/tests/test_query_tool_service.py
index 4c83dc6..2fe98ee 100644
--- a/tests/test_query_tool_service.py
+++ b/tests/test_query_tool_service.py
@@ -8,17 +8,17 @@ Tests the core service functions without database dependencies:
 """
 
 import pytest
-from mes_dashboard.services.query_tool_service import (
-    validate_date_range,
-    validate_lot_input,
-    validate_equipment_input,
-    _resolve_by_lot_id,
-    _resolve_by_serial_number,
-    _resolve_by_work_order,
-    get_lot_split_merge_history,
-    BATCH_SIZE,
-    MAX_LOT_IDS,
-    MAX_SERIAL_NUMBERS,
+from mes_dashboard.services.query_tool_service import (
+    validate_date_range,
+    validate_lot_input,
+    validate_equipment_input,
+    _resolve_by_lot_id,
+    _resolve_by_serial_number,
+    _resolve_by_work_order,
+    get_lot_split_merge_history,
+    BATCH_SIZE,
+    MAX_LOT_IDS,
+    MAX_SERIAL_NUMBERS,
     MAX_WORK_ORDERS,
     MAX_EQUIPMENTS,
     MAX_DATE_RANGE_DAYS,
@@ -186,124 +186,124 @@ class TestValidateEquipmentInput:
         assert result is None
 
 
-class TestResolveQueriesUseBindParams:
-    """Queries with user input should always use bind params."""
-
-    def test_resolve_by_lot_id_uses_query_builder_params(self):
-        from unittest.mock import patch
-        import pandas as pd
-
-        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
-            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_read:
-                mock_load.return_value = "SELECT * FROM DUAL"
-                mock_read.return_value = pd.DataFrame([
-                    {
-                        'CONTAINERID': 'CID-1',
-                        'CONTAINERNAME': 'LOT-1',
-                        'SPECNAME': 'SPEC-1',
-                        'QTY': 100,
-                    }
-                ])
-
-                result = _resolve_by_lot_id(['LOT-1'])
-
-                assert result['total'] == 1
-                mock_load.assert_called_once()
-                sql_params = mock_load.call_args.kwargs
-                assert 'CONTAINER_FILTER' in sql_params
-                assert ':p0' in sql_params['CONTAINER_FILTER']
-                _, query_params = mock_read.call_args.args
-                assert query_params == {'p0': 'LOT-1'}
-
-    def test_resolve_by_serial_number_uses_query_builder_params(self):
-        from unittest.mock import patch
-        import pandas as pd
-
-        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
-            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_read:
-                mock_load.return_value = "SELECT * FROM DUAL"
-                mock_read.return_value = pd.DataFrame([
-                    {
-                        'CONTAINERID': 'CID-1',
-                        'FINISHEDNAME': 'SN-1',
-                        'CONTAINERNAME': 'LOT-1',
-                        'SPECNAME': 'SPEC-1',
-                    }
-                ])
-
-                result = _resolve_by_serial_number(['SN-1'])
-
-                assert result['total'] == 1
-                sql_params = mock_load.call_args.kwargs
-                assert ':p0' in sql_params['SERIAL_FILTER']
-                _, query_params = mock_read.call_args.args
-                assert query_params == {'p0': 'SN-1'}
-
-    def test_resolve_by_work_order_uses_query_builder_params(self):
-        from unittest.mock import patch
-        import pandas as pd
-
-        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
-            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_read:
-                mock_load.return_value = "SELECT * FROM DUAL"
-                mock_read.return_value = pd.DataFrame([
-                    {
-                        'CONTAINERID': 'CID-1',
-                        'PJ_WORKORDER': 'WO-1',
-                        'CONTAINERNAME': 'LOT-1',
-                        'SPECNAME': 'SPEC-1',
-                    }
-                ])
-
-                result = _resolve_by_work_order(['WO-1'])
-
-                assert result['total'] == 1
-                sql_params = mock_load.call_args.kwargs
-                assert ':p0' in sql_params['WORK_ORDER_FILTER']
-                _, query_params = mock_read.call_args.args
-                assert query_params == {'p0': 'WO-1'}
-
-
-class TestSplitMergeHistoryMode:
-    """Fast mode should use read_sql_df, full mode should use read_sql_df_slow."""
-
-    def test_fast_mode_uses_time_window_and_row_limit(self):
-        from unittest.mock import patch
-        import pandas as pd
-
-        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
-            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_fast:
-                with patch('mes_dashboard.services.query_tool_service.read_sql_df_slow') as mock_slow:
-                    mock_load.return_value = "SELECT * FROM DUAL"
-                    mock_fast.return_value = pd.DataFrame([])
-
-                    result = get_lot_split_merge_history('WO-1', full_history=False)
-
-                    assert result['mode'] == 'fast'
-                    kwargs = mock_load.call_args.kwargs
-                    assert "ADD_MONTHS(SYSDATE, -6)" in kwargs['TIME_WINDOW']
-                    assert "FETCH FIRST 500 ROWS ONLY" == kwargs['ROW_LIMIT']
-                    mock_fast.assert_called_once()
-                    mock_slow.assert_not_called()
-
-    def test_full_mode_uses_slow_query_without_limits(self):
-        from unittest.mock import patch
-        import pandas as pd
-
-        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
-            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_fast:
-                with patch('mes_dashboard.services.query_tool_service.read_sql_df_slow') as mock_slow:
-                    mock_load.return_value = "SELECT * FROM DUAL"
-                    mock_slow.return_value = pd.DataFrame([])
-
-                    result = get_lot_split_merge_history('WO-1', full_history=True)
-
-                    assert result['mode'] == 'full'
-                    kwargs = mock_load.call_args.kwargs
-                    assert kwargs['TIME_WINDOW'] == ''
-                    assert kwargs['ROW_LIMIT'] == ''
-                    mock_fast.assert_not_called()
-                    mock_slow.assert_called_once()
+class TestResolveQueriesUseBindParams:
+    """Queries with user input should always use bind params."""
+
+    def test_resolve_by_lot_id_uses_query_builder_params(self):
+        from unittest.mock import patch
+        import pandas as pd
+
+        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
+            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_read:
+                mock_load.return_value = "SELECT * FROM DUAL"
+                mock_read.return_value = pd.DataFrame([
+                    {
+                        'CONTAINERID': 'CID-1',
+                        'CONTAINERNAME': 'LOT-1',
+                        'SPECNAME': 'SPEC-1',
+                        'QTY': 100,
+                    }
+                ])
+
+                result = _resolve_by_lot_id(['LOT-1'])
+
+                assert result['total'] == 1
+                mock_load.assert_called_once()
+                sql_params = mock_load.call_args.kwargs
+                assert 'CONTAINER_FILTER' in sql_params
+                assert ':p0' in sql_params['CONTAINER_FILTER']
+                _, query_params = mock_read.call_args.args
+                assert query_params == {'p0': 'LOT-1'}
+
+    def test_resolve_by_serial_number_uses_query_builder_params(self):
+        from unittest.mock import patch
+        import pandas as pd
+
+        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
+            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_read:
+                mock_load.return_value = "SELECT * FROM DUAL"
+                mock_read.return_value = pd.DataFrame([
+                    {
+                        'CONTAINERID': 'CID-1',
+                        'FINISHEDNAME': 'SN-1',
+                        'CONTAINERNAME': 'LOT-1',
+                        'SPECNAME': 'SPEC-1',
+                    }
+                ])
+
+                result = _resolve_by_serial_number(['SN-1'])
+
+                assert result['total'] == 1
+                sql_params = mock_load.call_args.kwargs
+                assert ':p0' in sql_params['SERIAL_FILTER']
+                _, query_params = mock_read.call_args.args
+                assert query_params == {'p0': 'SN-1'}
+
+    def test_resolve_by_work_order_uses_query_builder_params(self):
+        from unittest.mock import patch
+        import pandas as pd
+
+        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
+            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_read:
+                mock_load.return_value = "SELECT * FROM DUAL"
+                mock_read.return_value = pd.DataFrame([
+                    {
+                        'CONTAINERID': 'CID-1',
+                        'MFGORDERNAME': 'WO-1',
+                        'CONTAINERNAME': 'LOT-1',
+                        'SPECNAME': 'SPEC-1',
+                    }
+                ])
+
+                result = _resolve_by_work_order(['WO-1'])
+
+                assert result['total'] == 1
+                sql_params = mock_load.call_args.kwargs
+                assert ':p0' in sql_params['WORK_ORDER_FILTER']
+                _, query_params = mock_read.call_args.args
+                assert query_params == {'p0': 'WO-1'}
+
+
+class TestSplitMergeHistoryMode:
+    """Fast mode should use read_sql_df, full mode should use read_sql_df_slow."""
+
+    def test_fast_mode_uses_time_window_and_row_limit(self):
+        from unittest.mock import patch
+        import pandas as pd
+
+        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
+            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_fast:
+                with patch('mes_dashboard.services.query_tool_service.read_sql_df_slow') as mock_slow:
+                    mock_load.return_value = "SELECT * FROM DUAL"
+                    mock_fast.return_value = pd.DataFrame([])
+
+                    result = get_lot_split_merge_history('WO-1', full_history=False)
+
+                    assert result['mode'] == 'fast'
+                    kwargs = mock_load.call_args.kwargs
+                    assert "ADD_MONTHS(SYSDATE, -6)" in kwargs['TIME_WINDOW']
+                    assert "FETCH FIRST 500 ROWS ONLY" == kwargs['ROW_LIMIT']
+                    mock_fast.assert_called_once()
+                    mock_slow.assert_not_called()
+
+    def test_full_mode_uses_slow_query_without_limits(self):
+        from unittest.mock import patch
+        import pandas as pd
+
+        with patch('mes_dashboard.services.query_tool_service.SQLLoader.load_with_params') as mock_load:
+            with patch('mes_dashboard.services.query_tool_service.read_sql_df') as mock_fast:
+                with patch('mes_dashboard.services.query_tool_service.read_sql_df_slow') as mock_slow:
+                    mock_load.return_value = "SELECT * FROM DUAL"
+                    mock_slow.return_value = pd.DataFrame([])
+
+                    result = get_lot_split_merge_history('WO-1', full_history=True)
+
+                    assert result['mode'] == 'full'
+                    kwargs = mock_load.call_args.kwargs
+                    assert kwargs['TIME_WINDOW'] == ''
+                    assert kwargs['ROW_LIMIT'] == ''
+                    mock_fast.assert_not_called()
+                    mock_slow.assert_called_once()
 
 
 class TestServiceConstants:
@@ -363,78 +363,78 @@ class TestGetWorkcenterForGroups:
             assert result == []
 
 
-class TestGetLotHistoryWithWorkcenterFilter:
-    """Tests for get_lot_history with workcenter_groups filter."""
-
-    def test_no_filter_returns_all(self):
-        """When no workcenter_groups, should not add filter to SQL."""
-        from unittest.mock import patch
-        from mes_dashboard.services.query_tool_service import get_lot_history
-
-        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
-            mock_fetch.return_value = {
-                'abc123': [
-                    {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'},
-                    {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'WB_1'},
-                ]
-            }
-
-            result = get_lot_history('abc123', workcenter_groups=None)
-
-            assert 'error' not in result
-            assert result['filtered_by_groups'] == []
-            assert result['total'] == 2
-
-    def test_with_filter_adds_condition(self):
-        """When workcenter_groups provided, should filter by workcenters."""
-        from unittest.mock import patch
-        from mes_dashboard.services.query_tool_service import get_lot_history
-
-        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
-            with patch('mes_dashboard.services.filter_cache.get_workcenters_for_groups') as mock_get_wc:
-                mock_fetch.return_value = {
-                    'abc123': [
-                        {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'},
-                        {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'WB_1'},
-                    ]
-                }
-                mock_get_wc.return_value = ['DB_1']
-
-                result = get_lot_history('abc123', workcenter_groups=['DB'])
-
-                mock_get_wc.assert_called_once_with(['DB'])
-                assert result['filtered_by_groups'] == ['DB']
-                assert result['total'] == 1
-                assert result['data'][0]['WORKCENTERNAME'] == 'DB_1'
-
-    def test_empty_groups_list_no_filter(self):
-        """Empty groups list should return all (no filter)."""
-        from unittest.mock import patch
-        from mes_dashboard.services.query_tool_service import get_lot_history
-
-        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
-            mock_fetch.return_value = {
-                'abc123': [{'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'}]
-            }
-
-            result = get_lot_history('abc123', workcenter_groups=[])
-
-            assert result['filtered_by_groups'] == []
-            assert result['total'] == 1
-
-    def test_filter_with_empty_workcenters_result(self):
-        """When group has no workcenters, should not add filter."""
-        from unittest.mock import patch
-        from mes_dashboard.services.query_tool_service import get_lot_history
-
-        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
-            with patch('mes_dashboard.services.filter_cache.get_workcenters_for_groups') as mock_get_wc:
-                mock_fetch.return_value = {
-                    'abc123': [{'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'}]
-                }
-                mock_get_wc.return_value = []
-
-                result = get_lot_history('abc123', workcenter_groups=['UNKNOWN'])
-
-                assert 'error' not in result
-                assert result['total'] == 1
+class TestGetLotHistoryWithWorkcenterFilter:
+    """Tests for get_lot_history with workcenter_groups filter."""
+
+    def test_no_filter_returns_all(self):
+        """When no workcenter_groups, should not add filter to SQL."""
+        from unittest.mock import patch
+        from mes_dashboard.services.query_tool_service import get_lot_history
+
+        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
+            mock_fetch.return_value = {
+                'abc123': [
+                    {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'},
+                    {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'WB_1'},
+                ]
+            }
+
+            result = get_lot_history('abc123', workcenter_groups=None)
+
+            assert 'error' not in result
+            assert result['filtered_by_groups'] == []
+            assert result['total'] == 2
+
+    def test_with_filter_adds_condition(self):
+        """When workcenter_groups provided, should filter by workcenters."""
+        from unittest.mock import patch
+        from mes_dashboard.services.query_tool_service import get_lot_history
+
+        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
+            with patch('mes_dashboard.services.filter_cache.get_workcenters_for_groups') as mock_get_wc:
+                mock_fetch.return_value = {
+                    'abc123': [
+                        {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'},
+                        {'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'WB_1'},
+                    ]
+                }
+                mock_get_wc.return_value = ['DB_1']
+
+                result = get_lot_history('abc123', workcenter_groups=['DB'])
+
+                mock_get_wc.assert_called_once_with(['DB'])
+                assert result['filtered_by_groups'] == ['DB']
+                assert result['total'] == 1
+                assert result['data'][0]['WORKCENTERNAME'] == 'DB_1'
+
+    def test_empty_groups_list_no_filter(self):
+        """Empty groups list should return all (no filter)."""
+        from unittest.mock import patch
+        from mes_dashboard.services.query_tool_service import get_lot_history
+
+        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
+            mock_fetch.return_value = {
+                'abc123': [{'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'}]
+            }
+
+            result = get_lot_history('abc123', workcenter_groups=[])
+
+            assert result['filtered_by_groups'] == []
+            assert result['total'] == 1
+
+    def test_filter_with_empty_workcenters_result(self):
+        """When group has no workcenters, should not add filter."""
+        from unittest.mock import patch
+        from mes_dashboard.services.query_tool_service import get_lot_history
+
+        with patch('mes_dashboard.services.query_tool_service.EventFetcher.fetch_events') as mock_fetch:
+            with patch('mes_dashboard.services.filter_cache.get_workcenters_for_groups') as mock_get_wc:
+                mock_fetch.return_value = {
+                    'abc123': [{'CONTAINERID': 'abc123', 'WORKCENTERNAME': 'DB_1'}]
+                }
+                mock_get_wc.return_value = []
+
+                result = get_lot_history('abc123', workcenter_groups=['UNKNOWN'])
+
+                assert 'error' not in result
+                assert result['total'] == 1
diff --git a/tests/test_trace_routes.py b/tests/test_trace_routes.py
index 02f8e1d..6fafd9c 100644
--- a/tests/test_trace_routes.py
+++ b/tests/test_trace_routes.py
@@ -91,10 +91,14 @@ def test_seed_resolve_rate_limited_returns_429(_mock_rate_limit):
     assert payload['error']['code'] == 'TOO_MANY_REQUESTS'
 
 
-@patch('mes_dashboard.routes.trace_routes.LineageEngine.resolve_full_genealogy')
-def test_lineage_success_returns_snake_case(mock_resolve_genealogy):
-    mock_resolve_genealogy.return_value = {
-        'CID-001': {'CID-A', 'CID-B'}
+@patch('mes_dashboard.routes.trace_routes.LineageEngine.resolve_forward_tree')
+def test_lineage_success_returns_forward_tree(mock_resolve_tree):
+    mock_resolve_tree.return_value = {
+        'roots': ['CID-ROOT'],
+        'children_map': {'CID-ROOT': ['CID-A'], 'CID-A': ['CID-001']},
+        'leaf_serials': {'CID-001': ['SN-001']},
+        'cid_to_name': {'CID-ROOT': 'WAFER-001', 'CID-A': 'LOT-A', 'CID-001': 'LOT-001'},
+        'total_nodes': 3,
     }
 
     client = _client()
@@ -109,16 +113,20 @@ def test_lineage_success_returns_snake_case(mock_resolve_genealogy):
     assert response.status_code == 200
     payload = response.get_json()
     assert payload['stage'] == 'lineage'
-    assert sorted(payload['ancestors']['CID-001']) == ['CID-A', 'CID-B']
+    assert payload['roots'] == ['CID-ROOT']
+    assert payload['children_map']['CID-ROOT'] == ['CID-A']
+    assert payload['children_map']['CID-A'] == ['CID-001']
+    assert payload['leaf_serials']['CID-001'] == ['SN-001']
     assert payload['total_nodes'] == 3
-    assert 'totalNodes' not in payload
+    assert payload['names']['CID-ROOT'] == 'WAFER-001'
+    assert payload['names']['CID-A'] == 'LOT-A'
 
 
 @patch(
-    'mes_dashboard.routes.trace_routes.LineageEngine.resolve_full_genealogy',
+    'mes_dashboard.routes.trace_routes.LineageEngine.resolve_forward_tree',
     side_effect=TimeoutError('lineage timed out'),
 )
-def test_lineage_timeout_returns_504(_mock_resolve_genealogy):
+def test_lineage_timeout_returns_504(_mock_resolve_tree):
     client = _client()
     response = client.post(
         '/api/trace/lineage',