fix(observability): 統一觀測台 UI 設計系統

static/css/observability-system.css

@@ -14,13 +14,47 @@
   --obs-amber: #b8792f;
   --obs-red: #b94b45;
   --obs-blue: #4f6f8f;
+  --obs-radius-lg: 24px;
+  --obs-radius-md: 18px;
+  --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);
 }
 
 .momo-observability-mode .momo-content {
   background:
+    var(--obs-dot),
     radial-gradient(circle at 8% 4%, rgba(201, 100, 66, 0.12), transparent 24rem),
     radial-gradient(circle at 100% 20%, rgba(79, 111, 143, 0.11), transparent 26rem),
     linear-gradient(180deg, rgba(255, 248, 239, 0.65), rgba(255, 253, 248, 0.96));
+  background-size: 18px 18px, auto, auto, auto;
+  color: var(--obs-ink);
+  font-family: 'Noto Sans TC', 'Inter', sans-serif;
+}
+
+.momo-observability-mode .momo-content::before {
+  content: "";
+  position: fixed;
+  inset: 64px 0 auto 260px;
+  height: 180px;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(255, 248, 239, 0.92), rgba(255, 248, 239, 0));
+  z-index: 0;
+}
+
+.momo-observability-mode .container-fluid,
+.momo-observability-mode .obs-warroom,
+.momo-observability-mode .agent-page,
+.momo-observability-mode .biz-warroom,
+.momo-observability-mode .runtime-page,
+.momo-observability-mode .calls-page,
+.momo-observability-mode .gov-page,
+.momo-observability-mode .gate-page,
+.momo-observability-mode .rag-page,
+.momo-observability-mode .quality-page,
+.momo-observability-mode .ppt-page {
+  position: relative;
+  z-index: 1;
 }
 
 .momo-observability-mode .container-fluid > h2:first-child {
@@ -83,6 +117,181 @@
   letter-spacing: -0.035em;
 }
 
+.momo-observability-mode h1,
+.momo-observability-mode h2,
+.momo-observability-mode h3,
+.momo-observability-mode h4,
+.momo-observability-mode h5,
+.momo-observability-mode h6 {
+  color: var(--obs-ink);
+  font-family: 'Noto Sans TC', 'Inter', sans-serif !important;
+  font-weight: 850;
+}
+
+.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 {
+  max-width: 780px;
+  font-family: 'Noto Sans TC', 'Inter', sans-serif !important;
+  font-size: clamp(2.1rem, 4vw, 3.35rem) !important;
+  line-height: 1.05 !important;
+  letter-spacing: -0.055em !important;
+  font-weight: 900 !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 {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(201, 100, 66, 0.16) !important;
+  border-radius: 28px !important;
+  box-shadow: var(--obs-shadow) !important;
+}
+
+.momo-observability-mode .obs-hero::after,
+.momo-observability-mode .agent-hero::after,
+.momo-observability-mode .biz-command::after,
+.momo-observability-mode .runtime-hero::after,
+.momo-observability-mode .calls-hero::after,
+.momo-observability-mode .gov-hero::after,
+.momo-observability-mode .gate-hero::after,
+.momo-observability-mode .rag-hero::after,
+.momo-observability-mode .quality-hero::after,
+.momo-observability-mode .ppt-hero::after,
+.momo-observability-mode .obs-panel::after,
+.momo-observability-mode .agent-panel::after,
+.momo-observability-mode .biz-panel::after,
+.momo-observability-mode .runtime-panel::after,
+.momo-observability-mode .calls-panel::after,
+.momo-observability-mode .gov-panel::after,
+.momo-observability-mode .gate-panel::after,
+.momo-observability-mode .rag-panel::after,
+.momo-observability-mode .quality-panel::after,
+.momo-observability-mode .ppt-panel::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 auto;
+  width: 220px;
+  height: 120px;
+  pointer-events: none;
+  opacity: 0.46;
+  background-image: var(--obs-dot);
+  background-size: 12px 12px;
+  mask-image: linear-gradient(135deg, transparent, #000);
+}
+
+.momo-observability-mode .obs-kicker,
+.momo-observability-mode .agent-kicker,
+.momo-observability-mode .biz-kicker,
+.momo-observability-mode .runtime-kicker,
+.momo-observability-mode .calls-kicker,
+.momo-observability-mode .gov-kicker,
+.momo-observability-mode .gate-kicker,
+.momo-observability-mode .rag-kicker,
+.momo-observability-mode .quality-kicker,
+.momo-observability-mode .ppt-kicker,
+.momo-observability-mode [class$="-label"] {
+  color: color-mix(in srgb, var(--obs-accent) 74%, var(--obs-muted)) !important;
+  font-size: 0.74rem !important;
+  font-weight: 850 !important;
+  letter-spacing: 0.11em !important;
+  text-transform: uppercase;
+}
+
+.momo-observability-mode .obs-subtitle,
+.momo-observability-mode .agent-subtitle,
+.momo-observability-mode .biz-command p,
+.momo-observability-mode .runtime-subtitle,
+.momo-observability-mode .calls-subtitle,
+.momo-observability-mode .gov-subtitle,
+.momo-observability-mode .gate-subtitle,
+.momo-observability-mode .rag-subtitle,
+.momo-observability-mode .quality-subtitle,
+.momo-observability-mode .ppt-subtitle {
+  color: color-mix(in srgb, var(--obs-ink) 62%, var(--obs-muted)) !important;
+  font-size: 0.98rem !important;
+  line-height: 1.75 !important;
+  letter-spacing: 0 !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,
+.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 [class$="-table-shell"] {
+  position: relative;
+  border: 1px solid var(--obs-line) !important;
+  border-radius: var(--obs-radius-lg) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(255, 248, 241, 0.9)),
+    var(--obs-dot) !important;
+  background-size: auto, 14px 14px !important;
+  box-shadow: var(--obs-shadow) !important;
+}
+
+.momo-observability-mode .obs-signal-value,
+.momo-observability-mode .agent-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 {
+  font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
+  line-height: 1.05 !important;
+  letter-spacing: -0.055em !important;
+  font-weight: 900 !important;
+}
+
+.momo-observability-mode .obs-panel-title,
+.momo-observability-mode .agent-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 {
+  font-size: clamp(1.05rem, 2vw, 1.45rem) !important;
+  line-height: 1.25 !important;
+  letter-spacing: -0.035em !important;
+}
+
 .momo-observability-mode code,
 .momo-observability-mode .momo-mono,
 .momo-observability-mode table td,
@@ -95,6 +304,7 @@
   --bs-table-striped-bg: rgba(255, 248, 239, 0.46);
   color: var(--obs-ink);
   margin-bottom: 0;
+  font-size: 0.9rem;
 }
 
 .momo-observability-mode .table thead,
@@ -110,12 +320,50 @@
 .momo-observability-mode .table th {
   border-color: rgba(86, 64, 48, 0.1);
   vertical-align: middle;
+  padding: 0.78rem 0.82rem;
+}
+
+.momo-observability-mode .table-responsive {
+  border-radius: 18px;
+  overflow-x: auto;
+}
+
+.momo-observability-mode table code,
+.momo-observability-mode .biz-table code {
+  color: #7c402e;
+  background: rgba(201, 100, 66, 0.08);
+  border-radius: 0.45rem;
+  padding: 0.12rem 0.36rem;
+}
+
+.momo-observability-mode .biz-panel-body.table-responsive {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.momo-observability-mode .biz-table {
+  min-width: 760px;
+  max-width: 100%;
+}
+
+.momo-observability-mode .biz-table td,
+.momo-observability-mode .biz-table th {
+  overflow-wrap: anywhere;
+}
+
+.momo-observability-mode .biz-table td:nth-child(3),
+.momo-observability-mode .biz-table td:last-child {
+  max-width: 220px;
 }
 
 .momo-observability-mode .btn {
   border-radius: 999px;
   font-weight: 760;
   letter-spacing: -0.01em;
+  min-height: 2.25rem;
+  padding-inline: 0.9rem;
+  box-shadow: none;
+  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
 }
 
 .momo-observability-mode .btn-primary,
@@ -171,6 +419,25 @@
   color: var(--obs-amber);
 }
 
+.momo-observability-mode .obs-empty,
+.momo-observability-mode .agent-empty,
+.momo-observability-mode .biz-empty,
+.momo-observability-mode .runtime-empty,
+.momo-observability-mode .calls-empty,
+.momo-observability-mode .gov-empty,
+.momo-observability-mode .gate-empty,
+.momo-observability-mode .rag-empty,
+.momo-observability-mode .quality-empty,
+.momo-observability-mode .ppt-empty,
+.momo-observability-mode .text-center.text-muted {
+  border: 1px dashed rgba(201, 100, 66, 0.24);
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, rgba(255, 248, 239, 0.74), rgba(255, 252, 247, 0.82)),
+    var(--obs-dot);
+  background-size: auto, 14px 14px;
+}
+
 .momo-observability-mode canvas {
   max-width: 100%;
 }
@@ -197,4 +464,21 @@
   .momo-observability-mode .card-body.p-0 {
     overflow-x: auto;
   }
+
+  .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: clamp(1.8rem, 10vw, 2.45rem) !important;
+  }
+
+  .momo-observability-mode .momo-content::before {
+    left: 0;
+  }
 }