Align observability UI with V3 spec
All checks were successful
CD Pipeline / deploy (push) Successful in 59s

This commit is contained in:
OoO
2026-05-12 20:08:02 +08:00
parent fe6180b8ad
commit ef98eb507e
4 changed files with 462 additions and 12 deletions

View File

@@ -688,7 +688,7 @@ def business_intel_dashboard():
rec_by_strategy=[], latest_recommendations=[], loop_records=[],
verdict_stats=[], match_stats=[], recent_competitor_prices=[],
unfollowed_count=0,
error=f'查詢失敗: {type(e).__name__}: {str(e)[:200]}',
error='商業 AI 資料暫時不可用,已切換安全空狀態。',
)
finally:
session.close()
@@ -1361,7 +1361,7 @@ def promotion_review_list():
episode_distribution_30d={},
latest_insights=[],
strategy_weights=[],
error=f'查詢失敗: {type(e).__name__}: {str(e)[:200]}',
error='RAG 晉升資料暫時不可用,已切換安全空狀態。',
)
finally:
session.close()
@@ -1551,7 +1551,7 @@ def quality_trend_dashboard():
days=days, trends=[], recommendations=[],
episode_distribution={}, rag_root_causes=[],
action_outcomes_stats=[], action_plans_status=[], rag_overall_dist=[],
error=f'查詢失敗: {type(e).__name__}: {str(e)[:200]}',
error='AI 品質資料暫時不可用,已切換安全空狀態。',
)

View File

@@ -43,7 +43,7 @@ TEMPLATE_RULES = [
Rule(
"raw_error_copy",
re.compile(
r"(查詢失敗:|ProgrammingError|UndefinedError|Traceback|Internal Server Error|relation\s+"|relation\s+\"|alert\(['\"]Error[:]|載入錯誤:\$\{e\}|unknown)"
r"(查詢失敗:|ProgrammingError|OperationalError|SQLAlchemyError|sqlite3\.|UndefinedError|Traceback|Internal Server Error|relation\s+"|relation\s+\"|alert\(['\"]Error[:]|載入錯誤:\$\{e\}|unknown)"
),
"不得把 SQL/Jinja exception 或 raw failure 文案直接顯示給使用者。",
),

View File

@@ -20,13 +20,13 @@
--obs-amber: #b8792f;
--obs-red: #b94b45;
--obs-blue: #4f6f8f;
--obs-radius-lg: 24px;
--obs-radius-md: 18px;
--obs-radius-lg: 8px;
--obs-radius-md: 8px;
--obs-shadow: 0 18px 44px rgba(70, 46, 28, 0.09);
--obs-dot:
radial-gradient(circle, rgba(201, 100, 66, 0.18) 1px, transparent 1.3px);
--obs-title-size: clamp(1.9rem, 3.2vw, 2.75rem);
--obs-value-size: clamp(1.45rem, 2.8vw, 2.25rem);
--obs-title-size: 2.25rem;
--obs-value-size: 2rem;
}
.momo-observability-mode .momo-content {
@@ -1081,3 +1081,228 @@
grid-template-columns: 1fr !important;
}
}
/* v3 alignment: the observability cockpit must obey the same production UI
* guardrails as the refreshed V3 pages, even when older page-level inline CSS
* is still present in individual templates.
*/
.momo-observability-mode {
--obs-title-size: 2.25rem;
--obs-value-size: 2rem;
--obs-radius-lg: 8px;
--obs-radius-md: 8px;
--obs-card: rgba(255, 252, 246, 0.94);
--obs-surface-warm: rgba(255, 248, 238, 0.72);
--obs-surface-glass: rgba(255, 252, 246, 0.82);
}
.momo-observability-mode .momo-content {
background:
var(--obs-dot),
linear-gradient(180deg, rgba(255, 248, 239, 0.72), rgba(255, 253, 248, 0.96)) !important;
background-size: 18px 18px, auto !important;
}
.momo-observability-mode .container-fluid > h2:first-child,
.momo-observability-mode .obs-hero,
.momo-observability-mode .agent-hero,
.momo-observability-mode .biz-command,
.momo-observability-mode .runtime-hero,
.momo-observability-mode .calls-hero,
.momo-observability-mode .gov-hero,
.momo-observability-mode .gate-hero,
.momo-observability-mode .rag-hero,
.momo-observability-mode .quality-hero,
.momo-observability-mode .ppt-hero {
border-radius: 8px !important;
background:
linear-gradient(135deg, rgba(255, 248, 239, 0.98), rgba(247, 234, 219, 0.88)) !important;
}
.momo-observability-mode .card,
.momo-observability-mode .obs-signal,
.momo-observability-mode .agent-signal,
.momo-observability-mode .biz-signal,
.momo-observability-mode .runtime-signal,
.momo-observability-mode .calls-signal,
.momo-observability-mode .gov-signal,
.momo-observability-mode .gate-signal,
.momo-observability-mode .rag-signal,
.momo-observability-mode .quality-signal,
.momo-observability-mode .ppt-signal,
.momo-observability-mode .obs-panel,
.momo-observability-mode .agent-panel,
.momo-observability-mode .biz-panel,
.momo-observability-mode .runtime-panel,
.momo-observability-mode .calls-panel,
.momo-observability-mode .gov-panel,
.momo-observability-mode .gate-panel,
.momo-observability-mode .rag-panel,
.momo-observability-mode .quality-panel,
.momo-observability-mode .ppt-panel,
.momo-observability-mode .obs-table-shell,
.momo-observability-mode [class$="-table-shell"],
.momo-observability-mode .agent-card,
.momo-observability-mode .rec-card,
.momo-observability-mode .fix-card,
.momo-observability-mode .root-card,
.momo-observability-mode .episode-card,
.momo-observability-mode .biz-decision-card,
.momo-observability-mode .obs-route-card,
.momo-observability-mode [class$="-mini"],
.momo-observability-mode .strategy-card,
.momo-observability-mode .episode-text,
.momo-observability-mode .similar-box,
.momo-observability-mode .host-lane,
.momo-observability-mode .list-group-item,
.momo-observability-mode .dropdown-menu,
.momo-observability-mode .modal-content,
.momo-observability-mode .alert,
.momo-observability-mode .obs-chart-frame,
.momo-observability-mode .chart-frame,
.momo-observability-mode .chart-container,
.momo-observability-mode .obs-modal-preview,
.momo-observability-mode .table-responsive {
border-radius: 8px !important;
}
.momo-observability-mode .obs-panel,
.momo-observability-mode .agent-panel,
.momo-observability-mode .biz-panel,
.momo-observability-mode .runtime-panel,
.momo-observability-mode .calls-panel,
.momo-observability-mode .gov-panel,
.momo-observability-mode .gate-panel,
.momo-observability-mode .rag-panel,
.momo-observability-mode .quality-panel,
.momo-observability-mode .ppt-panel,
.momo-observability-mode .card,
.momo-observability-mode .obs-signal,
.momo-observability-mode .agent-signal,
.momo-observability-mode .biz-signal,
.momo-observability-mode .runtime-signal,
.momo-observability-mode .calls-signal,
.momo-observability-mode .gov-signal,
.momo-observability-mode .gate-signal,
.momo-observability-mode .rag-signal,
.momo-observability-mode .quality-signal,
.momo-observability-mode .ppt-signal {
background:
linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(255, 248, 241, 0.9)) !important;
}
.momo-observability-mode .obs-title,
.momo-observability-mode .agent-title,
.momo-observability-mode .biz-command h1,
.momo-observability-mode .runtime-title,
.momo-observability-mode .calls-title,
.momo-observability-mode .gov-title,
.momo-observability-mode .gate-title,
.momo-observability-mode .rag-title,
.momo-observability-mode .quality-title,
.momo-observability-mode .ppt-title {
font-size: var(--obs-title-size) !important;
letter-spacing: 0 !important;
line-height: 1.14 !important;
}
.momo-observability-mode .obs-signal-value,
.momo-observability-mode .obs-value,
.momo-observability-mode .agent-value,
.momo-observability-mode .biz-value,
.momo-observability-mode .biz-signal .value,
.momo-observability-mode .runtime-value,
.momo-observability-mode .calls-value,
.momo-observability-mode .gov-value,
.momo-observability-mode .gate-value,
.momo-observability-mode .rag-value,
.momo-observability-mode .quality-value,
.momo-observability-mode .ppt-value,
.momo-observability-mode .display-4,
.momo-observability-mode .display-5,
.momo-observability-mode .h1,
.momo-observability-mode [class$="-mini"] strong {
font-size: var(--obs-value-size) !important;
letter-spacing: 0 !important;
}
.momo-observability-mode .obs-panel-title,
.momo-observability-mode .agent-panel-title,
.momo-observability-mode .biz-panel-title,
.momo-observability-mode .biz-panel-head h3,
.momo-observability-mode .runtime-panel-title,
.momo-observability-mode .calls-panel-title,
.momo-observability-mode .gov-panel-title,
.momo-observability-mode .gate-panel-title,
.momo-observability-mode .rag-panel-title,
.momo-observability-mode .quality-panel-title,
.momo-observability-mode .ppt-panel-title,
.momo-observability-mode [class$="-table-title"] h3,
.momo-observability-mode .card-title {
font-size: 1.1rem !important;
letter-spacing: 0 !important;
}
.momo-observability-mode .btn,
.momo-observability-mode .form-control,
.momo-observability-mode .form-select {
border-radius: 8px !important;
}
.momo-observability-mode .table tbody td:first-child,
.momo-observability-mode table tbody td:first-child {
border-radius: 8px 0 0 8px !important;
}
.momo-observability-mode .table tbody td:last-child,
.momo-observability-mode table tbody td:last-child {
border-radius: 0 8px 8px 0 !important;
}
@media (max-width: 768px) {
.momo-observability-mode {
--obs-title-size: 1.75rem;
--obs-value-size: 1.55rem;
}
.momo-observability-mode .obs-command-strip,
.momo-observability-mode .agent-command,
.momo-observability-mode .biz-signal-grid,
.momo-observability-mode .runtime-command,
.momo-observability-mode .calls-command,
.momo-observability-mode .gov-command,
.momo-observability-mode .gate-command,
.momo-observability-mode .rag-command,
.momo-observability-mode .quality-command,
.momo-observability-mode .ppt-command {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.65rem !important;
}
.momo-observability-mode .obs-hero,
.momo-observability-mode .agent-hero,
.momo-observability-mode .biz-command,
.momo-observability-mode .runtime-hero,
.momo-observability-mode .calls-hero,
.momo-observability-mode .gov-hero,
.momo-observability-mode .gate-hero,
.momo-observability-mode .rag-hero,
.momo-observability-mode .quality-hero,
.momo-observability-mode .ppt-hero {
padding: 1rem !important;
}
.momo-observability-mode .obs-signal,
.momo-observability-mode .agent-signal,
.momo-observability-mode .biz-signal,
.momo-observability-mode .runtime-signal,
.momo-observability-mode .calls-signal,
.momo-observability-mode .gov-signal,
.momo-observability-mode .gate-signal,
.momo-observability-mode .rag-signal,
.momo-observability-mode .quality-signal,
.momo-observability-mode .ppt-signal {
min-height: 84px !important;
padding: 0.78rem !important;
}
}

View File

@@ -20,13 +20,13 @@
--obs-amber: #b8792f;
--obs-red: #b94b45;
--obs-blue: #4f6f8f;
--obs-radius-lg: 24px;
--obs-radius-md: 18px;
--obs-radius-lg: 8px;
--obs-radius-md: 8px;
--obs-shadow: 0 18px 44px rgba(70, 46, 28, 0.09);
--obs-dot:
radial-gradient(circle, rgba(201, 100, 66, 0.18) 1px, transparent 1.3px);
--obs-title-size: clamp(1.9rem, 3.2vw, 2.75rem);
--obs-value-size: clamp(1.45rem, 2.8vw, 2.25rem);
--obs-title-size: 2.25rem;
--obs-value-size: 2rem;
}
.momo-observability-mode .momo-content {
@@ -1081,3 +1081,228 @@
grid-template-columns: 1fr !important;
}
}
/* v3 alignment: the observability cockpit must obey the same production UI
* guardrails as the refreshed V3 pages, even when older page-level inline CSS
* is still present in individual templates.
*/
.momo-observability-mode {
--obs-title-size: 2.25rem;
--obs-value-size: 2rem;
--obs-radius-lg: 8px;
--obs-radius-md: 8px;
--obs-card: rgba(255, 252, 246, 0.94);
--obs-surface-warm: rgba(255, 248, 238, 0.72);
--obs-surface-glass: rgba(255, 252, 246, 0.82);
}
.momo-observability-mode .momo-content {
background:
var(--obs-dot),
linear-gradient(180deg, rgba(255, 248, 239, 0.72), rgba(255, 253, 248, 0.96)) !important;
background-size: 18px 18px, auto !important;
}
.momo-observability-mode .container-fluid > h2:first-child,
.momo-observability-mode .obs-hero,
.momo-observability-mode .agent-hero,
.momo-observability-mode .biz-command,
.momo-observability-mode .runtime-hero,
.momo-observability-mode .calls-hero,
.momo-observability-mode .gov-hero,
.momo-observability-mode .gate-hero,
.momo-observability-mode .rag-hero,
.momo-observability-mode .quality-hero,
.momo-observability-mode .ppt-hero {
border-radius: 8px !important;
background:
linear-gradient(135deg, rgba(255, 248, 239, 0.98), rgba(247, 234, 219, 0.88)) !important;
}
.momo-observability-mode .card,
.momo-observability-mode .obs-signal,
.momo-observability-mode .agent-signal,
.momo-observability-mode .biz-signal,
.momo-observability-mode .runtime-signal,
.momo-observability-mode .calls-signal,
.momo-observability-mode .gov-signal,
.momo-observability-mode .gate-signal,
.momo-observability-mode .rag-signal,
.momo-observability-mode .quality-signal,
.momo-observability-mode .ppt-signal,
.momo-observability-mode .obs-panel,
.momo-observability-mode .agent-panel,
.momo-observability-mode .biz-panel,
.momo-observability-mode .runtime-panel,
.momo-observability-mode .calls-panel,
.momo-observability-mode .gov-panel,
.momo-observability-mode .gate-panel,
.momo-observability-mode .rag-panel,
.momo-observability-mode .quality-panel,
.momo-observability-mode .ppt-panel,
.momo-observability-mode .obs-table-shell,
.momo-observability-mode [class$="-table-shell"],
.momo-observability-mode .agent-card,
.momo-observability-mode .rec-card,
.momo-observability-mode .fix-card,
.momo-observability-mode .root-card,
.momo-observability-mode .episode-card,
.momo-observability-mode .biz-decision-card,
.momo-observability-mode .obs-route-card,
.momo-observability-mode [class$="-mini"],
.momo-observability-mode .strategy-card,
.momo-observability-mode .episode-text,
.momo-observability-mode .similar-box,
.momo-observability-mode .host-lane,
.momo-observability-mode .list-group-item,
.momo-observability-mode .dropdown-menu,
.momo-observability-mode .modal-content,
.momo-observability-mode .alert,
.momo-observability-mode .obs-chart-frame,
.momo-observability-mode .chart-frame,
.momo-observability-mode .chart-container,
.momo-observability-mode .obs-modal-preview,
.momo-observability-mode .table-responsive {
border-radius: 8px !important;
}
.momo-observability-mode .obs-panel,
.momo-observability-mode .agent-panel,
.momo-observability-mode .biz-panel,
.momo-observability-mode .runtime-panel,
.momo-observability-mode .calls-panel,
.momo-observability-mode .gov-panel,
.momo-observability-mode .gate-panel,
.momo-observability-mode .rag-panel,
.momo-observability-mode .quality-panel,
.momo-observability-mode .ppt-panel,
.momo-observability-mode .card,
.momo-observability-mode .obs-signal,
.momo-observability-mode .agent-signal,
.momo-observability-mode .biz-signal,
.momo-observability-mode .runtime-signal,
.momo-observability-mode .calls-signal,
.momo-observability-mode .gov-signal,
.momo-observability-mode .gate-signal,
.momo-observability-mode .rag-signal,
.momo-observability-mode .quality-signal,
.momo-observability-mode .ppt-signal {
background:
linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(255, 248, 241, 0.9)) !important;
}
.momo-observability-mode .obs-title,
.momo-observability-mode .agent-title,
.momo-observability-mode .biz-command h1,
.momo-observability-mode .runtime-title,
.momo-observability-mode .calls-title,
.momo-observability-mode .gov-title,
.momo-observability-mode .gate-title,
.momo-observability-mode .rag-title,
.momo-observability-mode .quality-title,
.momo-observability-mode .ppt-title {
font-size: var(--obs-title-size) !important;
letter-spacing: 0 !important;
line-height: 1.14 !important;
}
.momo-observability-mode .obs-signal-value,
.momo-observability-mode .obs-value,
.momo-observability-mode .agent-value,
.momo-observability-mode .biz-value,
.momo-observability-mode .biz-signal .value,
.momo-observability-mode .runtime-value,
.momo-observability-mode .calls-value,
.momo-observability-mode .gov-value,
.momo-observability-mode .gate-value,
.momo-observability-mode .rag-value,
.momo-observability-mode .quality-value,
.momo-observability-mode .ppt-value,
.momo-observability-mode .display-4,
.momo-observability-mode .display-5,
.momo-observability-mode .h1,
.momo-observability-mode [class$="-mini"] strong {
font-size: var(--obs-value-size) !important;
letter-spacing: 0 !important;
}
.momo-observability-mode .obs-panel-title,
.momo-observability-mode .agent-panel-title,
.momo-observability-mode .biz-panel-title,
.momo-observability-mode .biz-panel-head h3,
.momo-observability-mode .runtime-panel-title,
.momo-observability-mode .calls-panel-title,
.momo-observability-mode .gov-panel-title,
.momo-observability-mode .gate-panel-title,
.momo-observability-mode .rag-panel-title,
.momo-observability-mode .quality-panel-title,
.momo-observability-mode .ppt-panel-title,
.momo-observability-mode [class$="-table-title"] h3,
.momo-observability-mode .card-title {
font-size: 1.1rem !important;
letter-spacing: 0 !important;
}
.momo-observability-mode .btn,
.momo-observability-mode .form-control,
.momo-observability-mode .form-select {
border-radius: 8px !important;
}
.momo-observability-mode .table tbody td:first-child,
.momo-observability-mode table tbody td:first-child {
border-radius: 8px 0 0 8px !important;
}
.momo-observability-mode .table tbody td:last-child,
.momo-observability-mode table tbody td:last-child {
border-radius: 0 8px 8px 0 !important;
}
@media (max-width: 768px) {
.momo-observability-mode {
--obs-title-size: 1.75rem;
--obs-value-size: 1.55rem;
}
.momo-observability-mode .obs-command-strip,
.momo-observability-mode .agent-command,
.momo-observability-mode .biz-signal-grid,
.momo-observability-mode .runtime-command,
.momo-observability-mode .calls-command,
.momo-observability-mode .gov-command,
.momo-observability-mode .gate-command,
.momo-observability-mode .rag-command,
.momo-observability-mode .quality-command,
.momo-observability-mode .ppt-command {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.65rem !important;
}
.momo-observability-mode .obs-hero,
.momo-observability-mode .agent-hero,
.momo-observability-mode .biz-command,
.momo-observability-mode .runtime-hero,
.momo-observability-mode .calls-hero,
.momo-observability-mode .gov-hero,
.momo-observability-mode .gate-hero,
.momo-observability-mode .rag-hero,
.momo-observability-mode .quality-hero,
.momo-observability-mode .ppt-hero {
padding: 1rem !important;
}
.momo-observability-mode .obs-signal,
.momo-observability-mode .agent-signal,
.momo-observability-mode .biz-signal,
.momo-observability-mode .runtime-signal,
.momo-observability-mode .calls-signal,
.momo-observability-mode .gov-signal,
.momo-observability-mode .gate-signal,
.momo-observability-mode .rag-signal,
.momo-observability-mode .quality-signal,
.momo-observability-mode .ppt-signal {
min-height: 84px !important;
padding: 0.78rem !important;
}
}