修正 AI 觀測台 V3 排版規範

config.py

@@ -320,7 +320,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
 # ==========================================
 # 系統版本與路徑
 # ==========================================
-SYSTEM_VERSION = "V10.112"
+SYSTEM_VERSION = "V10.113"
 LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
 public_url = PUBLIC_URL  # 用於模板顯示
 

scripts/check_responsive_overflow.js

@@ -48,6 +48,21 @@ const DEFAULT_VIEWPORTS = [
 const LOCAL_SCROLL_SELECTORS = [
   '.table-responsive',
   '.chart-responsive',
+  '.obs-table-shell',
+  '.agent-table-shell',
+  '.biz-table-shell',
+  '.runtime-table-shell',
+  '.calls-table-shell',
+  '.gov-table-shell',
+  '.gate-table-shell',
+  '.rag-table-shell',
+  '.qa-table-shell',
+  '.quality-table-shell',
+  '.ppt-table-shell',
+  '[class*="-table-shell"]',
+  '.obs-chart-frame',
+  '.chart-frame',
+  '.chart-container',
   '.daily-calendar',
   '.campaign-switcher',
   '.campaign-filterbar',
@@ -258,6 +273,8 @@ async function main() {
             error = `HTTP ${status}`;
           } else if (metrics.overflow > options.maxOverflow) {
             error = `body horizontal overflow ${metrics.overflow}px`;
+          } else if (metrics.offenders.length > 0) {
+            error = `visual overflow offenders ${metrics.offenders.length}`;
           }
         } catch (err) {
           error = err.message || String(err);

static/css/observability-system.css

@@ -1760,3 +1760,275 @@
     grid-template-columns: 1fr !important;
   }
 }
+
+/* v3.3 observability hardening: shared visual system, bounded data surfaces, mobile-safe widths. */
+.momo-observability-mode {
+  --obs-title-size: 1.8rem;
+  --obs-value-size: 1.85rem;
+  --obs-shadow: var(--momo-shadow-md, 0 0 0 1px rgba(42, 37, 32, 0.1));
+  --obs-dot: radial-gradient(color-mix(in srgb, var(--obs-muted) 14%, transparent) 0.8px, transparent 0.8px);
+}
+
+.momo-observability-mode,
+.momo-observability-mode :where(*) {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.momo-observability-mode .momo-content,
+.momo-observability-mode .container-fluid {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.momo-observability-mode :is(
+  .obs-hero,
+  .agent-hero,
+  .biz-command,
+  .runtime-hero,
+  .calls-hero,
+  .gov-hero,
+  .gate-hero,
+  .rag-hero,
+  .qa-hero,
+  .quality-hero,
+  .ppt-hero,
+  .obs-panel,
+  .agent-panel,
+  .biz-panel,
+  .runtime-panel,
+  .calls-panel,
+  .gov-panel,
+  .gate-panel,
+  .rag-panel,
+  .qa-panel,
+  .quality-panel,
+  .ppt-panel,
+  .obs-signal,
+  .agent-signal,
+  .biz-signal,
+  .runtime-signal,
+  .calls-signal,
+  .gov-signal,
+  .gate-signal,
+  .rag-signal,
+  .qa-signal,
+  .quality-signal,
+  .ppt-signal,
+  .card
+) {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: none !important;
+  border: 1px solid var(--obs-line) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--obs-shadow) !important;
+  color: var(--obs-ink) !important;
+}
+
+.momo-observability-mode :is(
+  .obs-table-shell,
+  .agent-table-shell,
+  .biz-table-shell,
+  .runtime-table-shell,
+  .calls-table-shell,
+  .gov-table-shell,
+  .gate-table-shell,
+  .rag-table-shell,
+  .qa-table-shell,
+  .quality-table-shell,
+  .ppt-table-shell,
+  .table-responsive,
+  .obs-chart-frame,
+  .chart-frame,
+  .chart-container
+) {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 14px 14px !important;
+  border-color: var(--obs-line) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--obs-shadow) !important;
+}
+
+.momo-observability-mode :is(
+  .container-fluid > h2:first-child,
+  .obs-title,
+  .agent-title,
+  .biz-title,
+  .runtime-title,
+  .calls-title,
+  .gov-title,
+  .gate-title,
+  .rag-title,
+  .qa-title,
+  .quality-title,
+  .ppt-title
+) {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  font-size: var(--obs-title-size) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.25 !important;
+}
+
+.momo-observability-mode :is(
+  .obs-value,
+  .agent-value,
+  .biz-value,
+  .runtime-value,
+  .calls-value,
+  .gov-value,
+  .gate-value,
+  .rag-value,
+  .qa-value,
+  .quality-value,
+  .ppt-value,
+  .kpi-value
+) {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
+  font-size: var(--obs-value-size) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.1 !important;
+}
+
+.momo-observability-mode :is(
+  code,
+  pre,
+  .table td,
+  .table th,
+  .episode-text,
+  .similar-box,
+  .fix-card,
+  .root-card,
+  .rec-card,
+  .agent-card,
+  .caller-card,
+  .biz-decision-card,
+  .host-lane,
+  .obs-route-card,
+  .biz-panel-head,
+  .biz-badge
+) {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.momo-observability-mode .table {
+  margin-bottom: 0 !important;
+  min-width: 760px;
+}
+
+.momo-observability-mode .table-responsive {
+  max-width: 100%;
+  overflow: auto !important;
+  overscroll-behavior: contain;
+}
+
+.momo-observability-mode .table-responsive .table {
+  min-width: 100%;
+  width: max-content;
+}
+
+.momo-observability-mode :is(
+  .calls-table-shell .table-responsive,
+  .gate-table-shell .table-responsive,
+  .runtime-table-shell .table-responsive,
+  .biz-panel-body.table-responsive,
+  .ppt-table-shell .table-responsive,
+  .qa-table-shell .table-responsive,
+  .rag-table-shell .table-responsive,
+  .agent-table-shell .table-responsive,
+  .quality-table-shell .table-responsive
+) {
+  max-height: min(62vh, 640px);
+  overflow: auto !important;
+}
+
+.momo-observability-mode :is(
+  .biz-warroom,
+  .biz-hero,
+  .biz-layout,
+  .biz-panel,
+  .biz-panel-head,
+  .biz-panel-body,
+  .biz-strategy-grid,
+  .biz-strategy-card,
+  .biz-decision-list,
+  .biz-decision-card,
+  .biz-table
+) {
+  max-width: 100% !important;
+  min-width: 0 !important;
+}
+
+.momo-observability-mode .biz-panel {
+  overflow: hidden !important;
+}
+
+.momo-observability-mode .biz-panel-head {
+  align-items: flex-start !important;
+  flex-wrap: wrap !important;
+}
+
+.momo-observability-mode .biz-panel-head > div {
+  flex: 1 1 220px;
+  min-width: 0 !important;
+}
+
+.momo-observability-mode .biz-badge {
+  max-width: 100%;
+  white-space: normal;
+}
+
+.momo-observability-mode .biz-strategy-card .metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+}
+
+.momo-observability-mode .calls-signal {
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+.momo-observability-mode .calls-signal canvas[data-spark] {
+  display: block !important;
+  height: 28px !important;
+  margin-top: 0.45rem;
+  max-height: 28px !important;
+  width: 100% !important;
+}
+
+@media (max-width: 768px) {
+  .momo-observability-mode {
+    --obs-title-size: 1.55rem;
+    --obs-value-size: 1.35rem;
+  }
+
+  .momo-observability-mode :is(
+    .calls-table-shell .table-responsive,
+    .gate-table-shell .table-responsive,
+    .runtime-table-shell .table-responsive,
+    .biz-panel-body.table-responsive,
+    .ppt-table-shell .table-responsive,
+    .qa-table-shell .table-responsive,
+    .rag-table-shell .table-responsive,
+    .agent-table-shell .table-responsive,
+    .quality-table-shell .table-responsive
+  ) {
+    max-height: min(58vh, 460px);
+  }
+}
+
+@media (max-width: 560px) {
+  .momo-observability-mode .host-lane,
+  .momo-observability-mode .biz-strategy-card .metrics,
+  .momo-observability-mode .biz-decision-card {
+    grid-template-columns: 1fr !important;
+  }
+
+  .momo-observability-mode :is(.obs-hero, .agent-hero, .biz-command, .runtime-hero, .calls-hero, .gov-hero, .gate-hero, .rag-hero, .qa-hero, .quality-hero, .ppt-hero) {
+    gap: 0.8rem !important;
+  }
+}

web/static/css/observability-system.css

@@ -1760,3 +1760,275 @@
     grid-template-columns: 1fr !important;
   }
 }
+
+/* v3.3 observability hardening: shared visual system, bounded data surfaces, mobile-safe widths. */
+.momo-observability-mode {
+  --obs-title-size: 1.8rem;
+  --obs-value-size: 1.85rem;
+  --obs-shadow: var(--momo-shadow-md, 0 0 0 1px rgba(42, 37, 32, 0.1));
+  --obs-dot: radial-gradient(color-mix(in srgb, var(--obs-muted) 14%, transparent) 0.8px, transparent 0.8px);
+}
+
+.momo-observability-mode,
+.momo-observability-mode :where(*) {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.momo-observability-mode .momo-content,
+.momo-observability-mode .container-fluid {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.momo-observability-mode :is(
+  .obs-hero,
+  .agent-hero,
+  .biz-command,
+  .runtime-hero,
+  .calls-hero,
+  .gov-hero,
+  .gate-hero,
+  .rag-hero,
+  .qa-hero,
+  .quality-hero,
+  .ppt-hero,
+  .obs-panel,
+  .agent-panel,
+  .biz-panel,
+  .runtime-panel,
+  .calls-panel,
+  .gov-panel,
+  .gate-panel,
+  .rag-panel,
+  .qa-panel,
+  .quality-panel,
+  .ppt-panel,
+  .obs-signal,
+  .agent-signal,
+  .biz-signal,
+  .runtime-signal,
+  .calls-signal,
+  .gov-signal,
+  .gate-signal,
+  .rag-signal,
+  .qa-signal,
+  .quality-signal,
+  .ppt-signal,
+  .card
+) {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: none !important;
+  border: 1px solid var(--obs-line) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--obs-shadow) !important;
+  color: var(--obs-ink) !important;
+}
+
+.momo-observability-mode :is(
+  .obs-table-shell,
+  .agent-table-shell,
+  .biz-table-shell,
+  .runtime-table-shell,
+  .calls-table-shell,
+  .gov-table-shell,
+  .gate-table-shell,
+  .rag-table-shell,
+  .qa-table-shell,
+  .quality-table-shell,
+  .ppt-table-shell,
+  .table-responsive,
+  .obs-chart-frame,
+  .chart-frame,
+  .chart-container
+) {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 14px 14px !important;
+  border-color: var(--obs-line) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--obs-shadow) !important;
+}
+
+.momo-observability-mode :is(
+  .container-fluid > h2:first-child,
+  .obs-title,
+  .agent-title,
+  .biz-title,
+  .runtime-title,
+  .calls-title,
+  .gov-title,
+  .gate-title,
+  .rag-title,
+  .qa-title,
+  .quality-title,
+  .ppt-title
+) {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  font-size: var(--obs-title-size) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.25 !important;
+}
+
+.momo-observability-mode :is(
+  .obs-value,
+  .agent-value,
+  .biz-value,
+  .runtime-value,
+  .calls-value,
+  .gov-value,
+  .gate-value,
+  .rag-value,
+  .qa-value,
+  .quality-value,
+  .ppt-value,
+  .kpi-value
+) {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
+  font-size: var(--obs-value-size) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.1 !important;
+}
+
+.momo-observability-mode :is(
+  code,
+  pre,
+  .table td,
+  .table th,
+  .episode-text,
+  .similar-box,
+  .fix-card,
+  .root-card,
+  .rec-card,
+  .agent-card,
+  .caller-card,
+  .biz-decision-card,
+  .host-lane,
+  .obs-route-card,
+  .biz-panel-head,
+  .biz-badge
+) {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.momo-observability-mode .table {
+  margin-bottom: 0 !important;
+  min-width: 760px;
+}
+
+.momo-observability-mode .table-responsive {
+  max-width: 100%;
+  overflow: auto !important;
+  overscroll-behavior: contain;
+}
+
+.momo-observability-mode .table-responsive .table {
+  min-width: 100%;
+  width: max-content;
+}
+
+.momo-observability-mode :is(
+  .calls-table-shell .table-responsive,
+  .gate-table-shell .table-responsive,
+  .runtime-table-shell .table-responsive,
+  .biz-panel-body.table-responsive,
+  .ppt-table-shell .table-responsive,
+  .qa-table-shell .table-responsive,
+  .rag-table-shell .table-responsive,
+  .agent-table-shell .table-responsive,
+  .quality-table-shell .table-responsive
+) {
+  max-height: min(62vh, 640px);
+  overflow: auto !important;
+}
+
+.momo-observability-mode :is(
+  .biz-warroom,
+  .biz-hero,
+  .biz-layout,
+  .biz-panel,
+  .biz-panel-head,
+  .biz-panel-body,
+  .biz-strategy-grid,
+  .biz-strategy-card,
+  .biz-decision-list,
+  .biz-decision-card,
+  .biz-table
+) {
+  max-width: 100% !important;
+  min-width: 0 !important;
+}
+
+.momo-observability-mode .biz-panel {
+  overflow: hidden !important;
+}
+
+.momo-observability-mode .biz-panel-head {
+  align-items: flex-start !important;
+  flex-wrap: wrap !important;
+}
+
+.momo-observability-mode .biz-panel-head > div {
+  flex: 1 1 220px;
+  min-width: 0 !important;
+}
+
+.momo-observability-mode .biz-badge {
+  max-width: 100%;
+  white-space: normal;
+}
+
+.momo-observability-mode .biz-strategy-card .metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+}
+
+.momo-observability-mode .calls-signal {
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+.momo-observability-mode .calls-signal canvas[data-spark] {
+  display: block !important;
+  height: 28px !important;
+  margin-top: 0.45rem;
+  max-height: 28px !important;
+  width: 100% !important;
+}
+
+@media (max-width: 768px) {
+  .momo-observability-mode {
+    --obs-title-size: 1.55rem;
+    --obs-value-size: 1.35rem;
+  }
+
+  .momo-observability-mode :is(
+    .calls-table-shell .table-responsive,
+    .gate-table-shell .table-responsive,
+    .runtime-table-shell .table-responsive,
+    .biz-panel-body.table-responsive,
+    .ppt-table-shell .table-responsive,
+    .qa-table-shell .table-responsive,
+    .rag-table-shell .table-responsive,
+    .agent-table-shell .table-responsive,
+    .quality-table-shell .table-responsive
+  ) {
+    max-height: min(58vh, 460px);
+  }
+}
+
+@media (max-width: 560px) {
+  .momo-observability-mode .host-lane,
+  .momo-observability-mode .biz-strategy-card .metrics,
+  .momo-observability-mode .biz-decision-card {
+    grid-template-columns: 1fr !important;
+  }
+
+  .momo-observability-mode :is(.obs-hero, .agent-hero, .biz-command, .runtime-hero, .calls-hero, .gov-hero, .gate-hero, .rag-hero, .qa-hero, .quality-hero, .ppt-hero) {
+    gap: 0.8rem !important;
+  }
+}