From fce42047c1c55c9b33bae6364c1d0405c31a4ccd Mon Sep 17 00:00:00 2001 From: ogt Date: Fri, 3 Jul 2026 01:17:47 +0800 Subject: [PATCH] style(ux): repair third sitewide workbench batch --- docs/AI_INTELLIGENCE_MODULE_SOT.md | 2 +- .../guides/external_professional_benchmark.md | 2 +- .../current_execution_queue_20260524.md | 2 +- templates/growth_analysis.html | 9 +++++- templates/pchome_crawler.html | 31 ++++++++++++++++++- templates/price_comparison.html | 31 ++++++++++++++++++- templates/sales_analysis.html | 8 ++++- templates/vendor_stockout_history_v2.html | 11 ++++++- tests/test_ai_automation_smoke_service.py | 9 ++++-- web/static/css/page-vendor-tools.css | 22 +++++++++++++ 10 files changed, 117 insertions(+), 10 deletions(-) diff --git a/docs/AI_INTELLIGENCE_MODULE_SOT.md b/docs/AI_INTELLIGENCE_MODULE_SOT.md index 49117dd..69db6a2 100644 --- a/docs/AI_INTELLIGENCE_MODULE_SOT.md +++ b/docs/AI_INTELLIGENCE_MODULE_SOT.md @@ -109,7 +109,7 @@ - 2026-07-03 起 `/observability/ppt_audit_history` 必須採密集 AI 視覺 QA 工作台：首屏使用 `data-density-guardrail="compact-ppt-workbench"`，以「預覽就緒、視覺審核、修復閉環」短標籤承接 PPT 產線狀態；hero 說明、KPI 小註、runtime/env var、DB/table wording 與頁尾重複標題不得佔用第一層視覺，畫面先保留最新簡報、產線健康度、最近可預覽簡報、工作隊列、視覺問題追蹤、產出紀錄與修復流程。 - 2026-07-03 起高可見 AI observability surfaces 必須有 route-level rendered HTML readback guard；`/observability/overview`、`/observability/ai_calls`、`/observability/quality_trend`、`/observability/budget`、`/observability/business_intel`、`/observability/host_health`、`/observability/rag_queries`、`/observability/agent_orchestration`、`/observability/promotion_review`、`/observability/ppt_audit_history` 必須在 Flask client render 後仍保留 compact density marker，且不得漏出 `PPT_VISION_ENABLED=`、`PPT_AUTO_GENERATION_ENABLED=`、`ppt_generation_runs`、DB write raw wording、manual/human gate primary wording、Artifact retention / Compact 回讀等產品面不該可見的 engineering copy。 - 2026-07-03 起高可見 AI surface HTML readback 必須納入 runtime AI smoke：`/api/ai-automation/surface-html-readback` 會 read-only 檢查 10 個 AI observability template contract，`/api/ai-automation/smoke` 需包含 `AI surface HTML readback` 檢查，`/api/ai-automation/scheduled-health-summary` 需輸出 `ai_surface_html_readback` family；此檢查不得寫 DB、不得送通知、不得要求 browser，失敗時下一個機器動作是 `repair_ai_surface_html_contract`。 -- 2026-07-03 起整站 UI/UX 專業化必須由 Sitewide UI/UX Agent 管理：`/api/ai-automation/sitewide-ui-ux-agent` 會掃描真正頁面模板、排除 partial/components/base layouts，輸出高優先頁、compact guardrail、raw engineering issue 與 next machine action；`/api/ai-automation/sitewide-ui-ux-repair-package` 會產生 no-write controlled repair package。當前 Agent 判定為 55 個頁面模板、31 個高優先模板、19 個已具 compact guardrail、10 個待專業化、0 個 raw engineering leak；`ai_history`、`ai_recommend`、`admin/ppt_audit_preview`、`cicd_dashboard`、`daily_sales`、`dashboard` 與 `edm_dashboard` 已完成 controlled UI/UX repair，下一個機器動作為繼續套用 `apply_sitewide_ui_ux_controlled_repairs` 到 `growth_analysis`、`pchome_crawler`、`price_comparison`、`sales_analysis` 與 vendor stockout 頁群。 +- 2026-07-03 起整站 UI/UX 專業化必須由 Sitewide UI/UX Agent 管理：`/api/ai-automation/sitewide-ui-ux-agent` 會掃描真正頁面模板、排除 partial/components/base layouts，輸出高優先頁、compact guardrail、raw engineering issue 與 next machine action；`/api/ai-automation/sitewide-ui-ux-repair-package` 會產生 no-write controlled repair package。當前 Agent 判定為 55 個頁面模板、31 個高優先模板、24 個已具 compact guardrail、5 個待專業化、0 個 raw engineering leak；`ai_history`、`ai_recommend`、`admin/ppt_audit_preview`、`cicd_dashboard`、`daily_sales`、`dashboard`、`edm_dashboard`、`growth_analysis`、`pchome_crawler`、`price_comparison`、`sales_analysis` 與 `vendor_stockout_history_v2` 已完成 controlled UI/UX repair，下一個機器動作為繼續套用 `apply_sitewide_ui_ux_controlled_repairs` 到 `vendor_stockout_import_v2`、`vendor_stockout_index_v2`、`vendor_stockout_list_v2`、`vendor_stockout_send_email_v2` 與 `vendor_stockout_vendor_management_v2`。 - 2026-07-02 起 `/ai_intelligence` 商品明細與單品作戰詳情的四格價格證據必須可測：PChome 價格、MOMO 參考價、差距、可信度需以 `data-evidence` 固定，並以 `aria-label="價格證據"` 對應可掃描區塊；候選待確認或缺資料只能顯示「候選待確認 / 待補」，不得捏造價格或讓使用者打開 raw payload 才知道判斷依據。 - 2026-07-02 起 `/ai_intelligence` 必須是密集 AI 工作台，不得退回大段文字說明頁：首屏與明細可見內容只保留短狀態、數字、四格證據與下一步按鈕；KPI note、benchmark detail、alert 副句、策略說明、decision copy、來源長句與單品 reason list 不得佔用第一層視覺。`tests/test_ai_intelligence_text_density_guardrails.py` 必須鎖住 `data-density-guardrail="compact-ai-workbench"`、短任務文案、detail meta 與 hidden explanatory copy。 - 2026-07-02 起 `/observability/overview` 也必須採密集 AI 觀測工作台：首屏以 `data-density-guardrail="compact-observability-workbench"`、`AI 觀測 / 風險優先 / 下一步` 與 golden signals 先呈現狀態、數字與操作入口；hero lede、signal note、route desc、host meta 與資料來源長句不得佔用第一層視覺。`tests/test_observability_text_density_guardrails.py` 必須鎖住 compact marker 與 hidden explanatory copy。 diff --git a/docs/guides/external_professional_benchmark.md b/docs/guides/external_professional_benchmark.md index 5437b25..28060f1 100644 --- a/docs/guides/external_professional_benchmark.md +++ b/docs/guides/external_professional_benchmark.md @@ -83,7 +83,7 @@ Baymard 的商品頁與比較 UX 研究強調：使用者需要清楚的 product - AI visual QA surface rollout: `/observability/ppt_audit_history` 已套用 compact AI visual QA workbench guardrails；`tests/test_ppt_audit_text_density_guardrails.py` 鎖住首屏短標籤、預覽/審核/修復核心訊號與 non-raw env/table wording。 - Route HTML readback rollout: high-visibility AI observability surfaces 已新增 Flask route-level rendered HTML guard；`tests/test_admin_observability_routes.py::test_high_visibility_ai_surfaces_route_html_readback_keeps_compact_contract` 鎖住 10 個 route 的 compact density marker 與 non-raw engineering wording。 - Runtime HTML readback rollout: `/api/ai-automation/surface-html-readback` 與 AI smoke 已接入 high-visibility AI surface contract readback；`tests/test_ai_automation_smoke_service.py` 鎖住 10 個 surface、退化偵測、smoke check 與 scheduled health family。 -- Sitewide UI/UX Agent rollout: `/api/ai-automation/sitewide-ui-ux-agent` 掃描真正頁面模板並產生整站專業化 inventory；`/api/ai-automation/sitewide-ui-ux-repair-package` 會輸出 no-write controlled repair package，把主流產品頁原則轉成可排序、可驗證的修復項。第二批 controlled repair 已把 PPT 預覽、服務更新監控、當日業績、商品舊入口與 EDM 舊入口加入 compact workbench guardrails，Agent 基線收斂到 19 個 compact guardrail / 10 個待專業化 surface。 +- Sitewide UI/UX Agent rollout: `/api/ai-automation/sitewide-ui-ux-agent` 掃描真正頁面模板並產生整站專業化 inventory；`/api/ai-automation/sitewide-ui-ux-repair-package` 會輸出 no-write controlled repair package，把主流產品頁原則轉成可排序、可驗證的修復項。第二批 controlled repair 已把 PPT 預覽、服務更新監控、當日業績、商品舊入口與 EDM 舊入口加入 compact workbench guardrails；第三批已把成長報表、PChome 商品監控、比價決策台、業績作戰分析與缺貨歷史納入 compact workbench guardrails，Agent 基線收斂到 24 個 compact guardrail / 5 個待專業化 surface。 ## 下一步 TODO 候選 diff --git a/docs/memory/current_execution_queue_20260524.md b/docs/memory/current_execution_queue_20260524.md index cce6f45..80f9869 100644 --- a/docs/memory/current_execution_queue_20260524.md +++ b/docs/memory/current_execution_queue_20260524.md @@ -172,7 +172,7 @@ - 10 個 AI 觀測台頁面必須符合新版字體、字級、暖墨色、焦糖 accent、點陣視覺與 responsive 規範。 - 全站主要頁面需通過 desktop / mobile overflow guard。 - 表格與圖表只允許在局部容器橫向滾動，不可造成整頁無限延伸。 -- 2026-07-03 起以 Sitewide UI/UX Agent 排序全站專業化工作，不再靠人工逐頁猜測；目前 55 個頁面模板 / 31 個高優先頁中，compact guardrail 已由 14 提升到 19，待專業化 surface 由 15 降到 10，下一批依 Agent repair package 順序處理 `growth_analysis`、`pchome_crawler`、`price_comparison`、`sales_analysis` 與 vendor stockout 頁群。 +- 2026-07-03 起以 Sitewide UI/UX Agent 排序全站專業化工作，不再靠人工逐頁猜測；目前 55 個頁面模板 / 31 個高優先頁中，compact guardrail 已由 14 提升到 24，待專業化 surface 由 15 降到 5。第三批已完成 `growth_analysis`、`pchome_crawler`、`price_comparison`、`sales_analysis` 與 `vendor_stockout_history_v2`，下一批依 Agent repair package 順序處理 vendor stockout 剩餘五頁。 ## 8. 效能與可觀測性 diff --git a/templates/growth_analysis.html b/templates/growth_analysis.html index a001fa4..1cce14d 100644 --- a/templates/growth_analysis.html +++ b/templates/growth_analysis.html @@ -22,7 +22,11 @@ {% endmacro %} {% block ewooo_content %} -
+
{% include 'components/_analysis_report_tabs.html' %} {# ── Page head ──────────────────────────────────── #} @@ -32,6 +36,9 @@

營運成長策略報表

用月趨勢評估成長缺口、價差壓力與毛利品質。

+ + 成長缺口 / 價差壓力 / 毛利品質 +
diff --git a/templates/pchome_crawler.html b/templates/pchome_crawler.html index 1f02e34..02d066b 100644 --- a/templates/pchome_crawler.html +++ b/templates/pchome_crawler.html @@ -29,6 +29,27 @@ color: var(--momo-text-secondary) !important; } +.pchome-mode-rail { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: var(--momo-space-3); +} + +.pchome-mode-pill { + display: inline-flex; + align-items: center; + gap: 6px; + min-height: 28px; + padding: 4px 9px; + border: 1px solid var(--momo-border-light); + border-radius: var(--momo-radius-sm); + background: var(--momo-bg-elevated); + color: var(--momo-text-secondary); + font-size: var(--momo-text-label); + font-weight: 800; +} + .pchome-card-head { background: var(--momo-bg-paper); border-bottom: 1px solid var(--momo-border-light); @@ -149,10 +170,18 @@ {% endblock %} {% block content %} -
+

PChome 24h 商品監控

補齊 PChome 商品資料、售價、庫存與賣場連結，支援同款確認、價差與促銷監控。

+
+ 商品取得 + 同款證據 + 價差監控 +
diff --git a/templates/price_comparison.html b/templates/price_comparison.html index 9906ce9..2eceba0 100644 --- a/templates/price_comparison.html +++ b/templates/price_comparison.html @@ -33,6 +33,27 @@ color: var(--momo-text-secondary) !important; } +.price-mode-rail { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 10px; +} + +.price-mode-pill { + display: inline-flex; + align-items: center; + gap: 6px; + min-height: 28px; + padding: 4px 9px; + border: 1px solid var(--momo-border-light); + border-radius: var(--momo-radius-sm); + background: var(--momo-bg-elevated); + color: var(--momo-text-secondary); + font-size: var(--momo-text-label); + font-weight: 800; +} + .price-hero-copy { display: flex; flex-direction: column; @@ -706,11 +727,19 @@ {% endblock %} {% block content %} -
+

PChome 商品比價決策台

PChome 反查 MOMO：確認同款、判斷價差、決定下一步。

+
+ 同款確認 + 價差判讀 + 行動排序 +
diff --git a/templates/sales_analysis.html b/templates/sales_analysis.html index 182cc52..52d6ccb 100644 --- a/templates/sales_analysis.html +++ b/templates/sales_analysis.html @@ -45,7 +45,12 @@
先整理可主推、需守價與待補資料的商品
-
+
{% include 'components/_analysis_report_tabs.html' %}
@@ -84,6 +89,7 @@ 主推高業績 守住高毛利 補齊價差證據 + AI 下一步 回今日作戰 diff --git a/templates/vendor_stockout_history_v2.html b/templates/vendor_stockout_history_v2.html index 8eff8c7..d5230e8 100644 --- a/templates/vendor_stockout_history_v2.html +++ b/templates/vendor_stockout_history_v2.html @@ -5,12 +5,21 @@ {% endblock %} {% block content %} -
+
供貨風險

發送歷史

回看缺貨處理紀錄，找出需要補救的供貨風險。

+
+ 發送紀錄 + 補救追蹤 + 供貨風險 +
總覽 diff --git a/tests/test_ai_automation_smoke_service.py b/tests/test_ai_automation_smoke_service.py index fd02f31..0f3281f 100644 --- a/tests/test_ai_automation_smoke_service.py +++ b/tests/test_ai_automation_smoke_service.py @@ -360,8 +360,8 @@ def test_sitewide_ui_ux_agent_inventory_scans_real_pages(): assert inventory["policy"] == "read_only_sitewide_ui_ux_agent_inventory_v1" assert inventory["summary"]["template_count"] >= 50 assert inventory["summary"]["high_priority_template_count"] >= 20 - assert inventory["summary"]["compact_guardrail_count"] >= 19 - assert inventory["summary"]["issue_surface_count"] <= 10 + assert inventory["summary"]["compact_guardrail_count"] >= 24 + assert inventory["summary"]["issue_surface_count"] <= 5 assert inventory["summary"]["primary_human_gate_count"] == 0 assert inventory["summary"]["writes_database_count"] == 0 assert inventory["safety"]["writes_database"] is False @@ -377,6 +377,11 @@ def test_sitewide_ui_ux_agent_inventory_scans_real_pages(): assert "templates/daily_sales.html" not in issue_templates assert "templates/dashboard.html" not in issue_templates assert "templates/edm_dashboard.html" not in issue_templates + assert "templates/growth_analysis.html" not in issue_templates + assert "templates/pchome_crawler.html" not in issue_templates + assert "templates/price_comparison.html" not in issue_templates + assert "templates/sales_analysis.html" not in issue_templates + assert "templates/vendor_stockout_history_v2.html" not in issue_templates def test_sitewide_ui_ux_repair_package_prioritizes_controlled_template_repairs(): diff --git a/web/static/css/page-vendor-tools.css b/web/static/css/page-vendor-tools.css index 2e01b74..3263eb0 100644 --- a/web/static/css/page-vendor-tools.css +++ b/web/static/css/page-vendor-tools.css @@ -51,6 +51,28 @@ line-height: 1.65; } +.vendor-tools-modebar { + display: flex; + flex-wrap: wrap; + gap: var(--momo-space-2); + margin-top: var(--momo-space-3); +} + +.vendor-tools-modebar span { + display: inline-flex; + align-items: center; + min-height: 28px; + padding: 0 var(--momo-space-3); + border: 1px solid var(--momo-border-light); + border-radius: var(--momo-radius-sm); + background: var(--momo-bg-elevated); + color: var(--momo-text-secondary); + font-family: var(--momo-font-mono); + font-size: var(--momo-text-label-tiny); + font-weight: 800; + letter-spacing: 0; +} + .vendor-tools-nav { display: flex; flex-wrap: wrap;