From 2168a2c68c95c4f489f10c41534a73590cad9a4f Mon Sep 17 00:00:00 2001 From: ogt Date: Fri, 3 Jul 2026 00:58:35 +0800 Subject: [PATCH] style(ux): repair next sitewide workbench batch --- docs/AI_INTELLIGENCE_MODULE_SOT.md | 2 +- .../guides/external_professional_benchmark.md | 2 +- .../current_execution_queue_20260524.md | 1 + templates/admin/ppt_audit_preview.html | 10 ++++++- templates/cicd_dashboard.html | 30 ++++++++++++++++++- .../components/_legacy_bridge_panel.html | 9 +++++- templates/daily_sales.html | 4 +++ templates/dashboard.html | 2 ++ templates/edm_dashboard.html | 2 ++ tests/test_ai_automation_smoke_service.py | 9 ++++-- web/static/css/page-legacy-bridge.css | 22 ++++++++++++++ web/static/css/page-ppt-preview.css | 20 +++++++++++++ 12 files changed, 106 insertions(+), 7 deletions(-) diff --git a/docs/AI_INTELLIGENCE_MODULE_SOT.md b/docs/AI_INTELLIGENCE_MODULE_SOT.md index 18a7a62..49117dd 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 個高優先模板、14 個已具 compact guardrail、15 個待專業化、0 個 raw engineering leak；`ai_history` 與 `ai_recommend` 已完成第一批 controlled UI/UX repair，下一個機器動作為 `apply_sitewide_ui_ux_controlled_repairs`。 +- 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-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 2fcb8ca..5437b25 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，把主流產品頁原則轉成可排序、可驗證的修復項。 +- 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。 ## 下一步 TODO 候選 diff --git a/docs/memory/current_execution_queue_20260524.md b/docs/memory/current_execution_queue_20260524.md index f16a010..cce6f45 100644 --- a/docs/memory/current_execution_queue_20260524.md +++ b/docs/memory/current_execution_queue_20260524.md @@ -172,6 +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 頁群。 ## 8. 效能與可觀測性 diff --git a/templates/admin/ppt_audit_preview.html b/templates/admin/ppt_audit_preview.html index ce4127c..48defdd 100644 --- a/templates/admin/ppt_audit_preview.html +++ b/templates/admin/ppt_audit_preview.html @@ -8,11 +8,19 @@ {% block ewooo_content %}
-
+
簡報線上預覽

{{ filename }}

檔案大小 {{ file_size_kb }} KB · 修改時間 {{ file_mtime }} · 預覽以 PDF 快取呈現，簡報檔仍可下載。

+
+ 預覽就緒 + 頁面檢查 + 修復回路 +
回產線 diff --git a/templates/cicd_dashboard.html b/templates/cicd_dashboard.html index 84dc66a..85ae4d4 100644 --- a/templates/cicd_dashboard.html +++ b/templates/cicd_dashboard.html @@ -40,6 +40,26 @@ font-weight: 800; } + .cicd-mode-rail { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 0.9rem; + } + + .cicd-mode-pill { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.3rem 0.65rem; + 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; + } + .status-indicator { width: 12px; height: 12px; @@ -467,7 +487,10 @@ {% endblock %} {% block content %} -
+
@@ -475,6 +498,11 @@

服務更新監控

PChome 業績成長自動化作戰系統 · 正式服務更新與可用性監控

+
+ 部署健康 + 版本真相 + 回滾準備 +
diff --git a/templates/components/_legacy_bridge_panel.html b/templates/components/_legacy_bridge_panel.html index e7053ba..3436b22 100644 --- a/templates/components/_legacy_bridge_panel.html +++ b/templates/components/_legacy_bridge_panel.html @@ -1,4 +1,4 @@ -
+
@@ -7,6 +7,13 @@

{{ legacy_bridge_heading|default(legacy_bridge_title|default('頁面已升級')) }}

{{ legacy_bridge_body|default('請前往新版工作台完成同一個業績任務。') }}

+ {% if legacy_bridge_status_items|default([]) %} +
+ {% for item in legacy_bridge_status_items %} + {{ item }} + {% endfor %} +
+ {% endif %}
diff --git a/templates/daily_sales.html b/templates/daily_sales.html index eddb024..d7c5a67 100644 --- a/templates/daily_sales.html +++ b/templates/daily_sales.html @@ -73,6 +73,8 @@ {% block ewooo_content %}
@@ -120,6 +122,8 @@ 月度總計 {% endif %} + 異動追蹤 + 下一步
diff --git a/templates/dashboard.html b/templates/dashboard.html index 354bdc6..01dfd20 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -9,6 +9,8 @@ {% set legacy_bridge_secondary_target = '/observability/overview' %} {% set legacy_bridge_secondary_cta = 'AI 觀測台' %} {% set legacy_bridge_meta = '已整併到正式首頁' %} +{% set legacy_bridge_shell_attr = 'data-density-guardrail="compact-dashboard-workbench" data-benchmark-guardrail="mainstream-command-center-redirect"' %} +{% set legacy_bridge_status_items = ['營運總覽', '風險優先', '下一步'] %} {% extends "ewoooc_base.html" %} {% block title %}商品看板已升級 - EwoooC{% endblock %} diff --git a/templates/edm_dashboard.html b/templates/edm_dashboard.html index a442d64..d50b534 100644 --- a/templates/edm_dashboard.html +++ b/templates/edm_dashboard.html @@ -9,6 +9,8 @@ {% set legacy_bridge_secondary_target = '/festival' %} {% set legacy_bridge_secondary_cta = '節慶活動' %} {% set legacy_bridge_meta = '已整併到活動看板' %} +{% set legacy_bridge_shell_attr = 'data-density-guardrail="compact-edm-workbench" data-benchmark-guardrail="mainstream-campaign-command-center"' %} +{% set legacy_bridge_status_items = ['名單準備', '內容成效', '發送節奏'] %} {% extends "ewoooc_base.html" %} {% block title %}活動看板已升級 - EwoooC{% endblock %} diff --git a/tests/test_ai_automation_smoke_service.py b/tests/test_ai_automation_smoke_service.py index 1113564..fd02f31 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"] >= 14 - assert inventory["summary"]["issue_surface_count"] <= 15 + assert inventory["summary"]["compact_guardrail_count"] >= 19 + assert inventory["summary"]["issue_surface_count"] <= 10 assert inventory["summary"]["primary_human_gate_count"] == 0 assert inventory["summary"]["writes_database_count"] == 0 assert inventory["safety"]["writes_database"] is False @@ -372,6 +372,11 @@ def test_sitewide_ui_ux_agent_inventory_scans_real_pages(): assert not any("/." in item or item.startswith("templates/.") for item in templates) assert "templates/ai_history.html" not in issue_templates assert "templates/ai_recommend.html" not in issue_templates + assert "templates/admin/ppt_audit_preview.html" not in issue_templates + assert "templates/cicd_dashboard.html" not in issue_templates + 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 def test_sitewide_ui_ux_repair_package_prioritizes_controlled_template_repairs(): diff --git a/web/static/css/page-legacy-bridge.css b/web/static/css/page-legacy-bridge.css index ce58c92..4cc34b5 100644 --- a/web/static/css/page-legacy-bridge.css +++ b/web/static/css/page-legacy-bridge.css @@ -48,6 +48,28 @@ line-height: 1.8; } +.legacy-bridge__modebar { + display: flex; + flex-wrap: wrap; + gap: var(--momo-space-2); + margin-top: calc(var(--momo-space-4) * -0.25); +} + +.legacy-bridge__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; +} + .legacy-bridge__actions { display: flex; flex-wrap: wrap; diff --git a/web/static/css/page-ppt-preview.css b/web/static/css/page-ppt-preview.css index 16e4fee..b558e28 100644 --- a/web/static/css/page-ppt-preview.css +++ b/web/static/css/page-ppt-preview.css @@ -47,6 +47,26 @@ gap: var(--momo-space-2, 8px); } +.ppt-preview-modebar { + display: flex; + flex-wrap: wrap; + gap: var(--momo-space-2, 8px); + margin-top: var(--momo-space-3, 12px); +} + +.ppt-preview-modebar span { + display: inline-flex; + align-items: center; + gap: 6px; + padding: var(--momo-space-1, 4px) var(--momo-space-2, 8px); + border: 1px solid var(--obs-line); + border-radius: var(--momo-radius-sm, 6px); + color: var(--obs-muted); + background: rgba(255, 255, 255, 0.62); + font-size: var(--momo-text-caption, 12px); + font-weight: var(--momo-font-weight-bold, 700); +} + .ppt-preview-frame { height: min(76vh, 920px); min-height: 560px;