feat(cutover): add live fullscreen monitoring wall

web/src/index.css

@@ -11213,6 +11213,9 @@ html.login-page--paused .login-page__flare {
 .bm-sampling { border: 1px solid rgba(148,163,184,.25); border-radius: 4px; min-width: 0; }
 .bm-sampling > summary { padding: 8px 12px; cursor: pointer; font-size: 12px; }
 .app-heroui-modal .bm-sampling .pt-list-table-wrap { max-width: 100%; min-height: 0; }
+.bm-live-header__actions { display: flex; gap: 8px; align-items: center; }
+.bm-board-controls > summary { display: none; }
+.bm-board-controls > .bm-live-filters { margin-top: 8px; }
 @media (max-width: 720px) {
   .bm-live-sources { grid-template-columns: 1fr; }
   .bm-live-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
@@ -15787,3 +15790,106 @@ option {
 .pager__jump-input {
   width: 4.25rem;
 }
+
+/* Cutover wall: keep one board/poller alive in native or window fullscreen. */
+.app-heroui-modal.bm-wall-modal {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  height: 100dvh;
+  max-height: 100dvh;
+  padding: 0;
+  margin: 0;
+  transform: none;
+  box-sizing: border-box;
+  border: 0;
+}
+.app-heroui-modal.bm-wall-modal .app-heroui-modal__dialog {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  transform: none;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.bm-wall-modal .modal__header,
+.bm-wall-modal .modal__footer,
+.bm-wall-modal .bm-detail__chrome,
+.bm-wall-modal .nm-config-modal__tabs { display: none; }
+.app-heroui-modal.bm-wall-modal .bm-detail {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  overflow: hidden;
+}
+.bm-board.is-wall,
+.bm-board:fullscreen {
+  width: 100%;
+  min-width: 0;
+  height: 100dvh;
+  min-height: 0;
+  max-height: 100dvh;
+  margin: 0;
+  padding: clamp(12px, 1.25vw, 28px);
+  gap: 12px;
+  border-radius: 0;
+  background: #0b1220;
+  color: #e2e8f0;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.bm-board.is-wall > * { flex-shrink: 0; }
+.bm-wall-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-width: 0; }
+.bm-wall-heading > div { min-width: 0; }
+.bm-wall-heading__label { color: #94a3b8; font-size: 13px; letter-spacing: .08em; }
+.bm-wall-heading h2 { margin: 4px 0 0; font-size: clamp(22px, 2vw, 36px); line-height: 1.2; overflow-wrap: anywhere; }
+.bm-wall-heading__status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+.bm-wall-heading time { color: #94a3b8; font: 14px ui-monospace, monospace; white-space: nowrap; }
+.bm-wall-state { padding: 6px 12px; font-size: 15px; border: 1px solid currentColor; border-radius: 3px; }
+.bm-wall-state.is-normal { color: #34d399; }
+.bm-wall-state.is-anomaly { color: #f87171; }
+.bm-wall-state.is-waiting, .bm-wall-state.is-unknown { color: #fbbf24; }
+.bm-board.is-wall .bm-live-header { position: sticky; top: 0; z-index: 5; background: #0b1220; padding: 8px 0; }
+.bm-board.is-wall .bm-live-header strong { font-size: 17px; }
+.bm-board.is-wall .bm-live-sources strong { font-size: 19px; }
+.bm-board.is-wall .bm-live-kpis > div { padding: 16px 20px; }
+.bm-board.is-wall .bm-live-kpis span { font-size: 16px; }
+.bm-board.is-wall .bm-live-kpis strong { font-size: clamp(40px, 3.5vw, 68px); }
+.bm-board.is-wall .bm-live-kpis strong small { font-size: 20px; }
+.bm-board.is-wall .bm-live-warning { font-size: 14px; }
+.bm-wall-progress { display: flex; align-items: center; gap: 20px; padding: 4px 0; color: #34d399; }
+.bm-wall-progress > div:first-child { display: flex; align-items: baseline; gap: 16px; }
+.bm-wall-progress span { font-size: 13px; }
+.bm-wall-progress strong { font: 600 24px ui-monospace, monospace; }
+.bm-wall-progress.is-unknown { color: #fbbf24; }
+.bm-wall-progress__track { flex: 1; height: 8px; min-width: 60px; background: #243044; border-radius: 2px; overflow: hidden; }
+.bm-wall-progress__track > span { display: block; height: 100%; background: currentColor; }
+.bm-board.is-wall .bm-board-controls > summary { display: list-item; cursor: pointer; color: #94a3b8; font-size: 13px; padding: 6px 0; }
+.bm-board.is-wall .bm-sampling { max-height: 240px; overflow: auto; }
+.bm-board.is-wall .bm-sampling td, .bm-board.is-wall .bm-sampling th { font-size: 14px; }
+.bm-board.is-wall .bs-cmp-board__body { flex: 1 0 260px; min-height: 260px; }
+.bm-board.is-wall .bs-cmp-main { display: flex; min-height: 0; }
+.bm-board.is-wall .bm-board__table { flex: 1; width: 100%; min-height: 0; max-height: none; }
+.bm-board.is-wall .bm-board__table td { font-size: 15px; }
+.bm-board.is-wall .bs-cmp-nav__list { max-height: none; }
+@media (max-width: 720px) {
+  .bm-wall-heading { align-items: flex-start; gap: 12px; }
+  .bm-wall-heading__status { max-width: 48%; }
+  .bm-wall-heading time { font-size: 10px; white-space: normal; }
+  .bm-wall-state { font-size: 12px; padding: 4px 6px; }
+  .bm-board.is-wall .bm-live-kpis > div { padding: 12px; }
+  .bm-board.is-wall .bm-live-kpis strong { font-size: 36px; }
+  .bm-board.is-wall .bm-live-kpis span { font-size: 13px; }
+  .bm-wall-progress { flex-wrap: wrap; gap: 8px; }
+  .bm-wall-progress__track { flex-basis: 100%; }
+  .bm-board.is-wall .bs-cmp-board__body { flex-basis: auto; }
+  .bm-board.is-wall .bm-board__table { max-height: 50dvh; }
+}