Update server/dashboard.py

server/dashboard.py

@@ -84,6 +84,10 @@ DIFF_COL = {
     "Trivial": "#94a3b8", "Easy": "#34d399", "Medium": "#22d3ee",
     "Hard": "#fbbf24", "Very Hard": "#fb923c", "Expert": "#fb7185",
 }
+DIFF_SHORT = {
+    "Trivial": "Trivial", "Easy": "Easy", "Medium": "Medium",
+    "Hard": "Hard", "Very Hard": "V.Hard", "Expert": "Expert",
+}
 
 PLOT_HEIGHT = 440
 PLOT_HEIGHT_TALL = 500
@@ -322,30 +326,45 @@ def create_topology_graph(obs_dict: Dict[str, Any]) -> go.Figure:
 # ═══════════════════════════════════════════════════════════════════
 # PANEL 2 — FREQUENCY GAUGE
 # ═══════════════════════════════════════════════════════════════════
+def _freq_zone(freq_hz: float) -> tuple[str, str]:
+    """Return (accent_color, zone_label) for a grid frequency reading."""
+    f = round(freq_hz, 3)
+    if f < 59.0:
+        return C["crimson"], "BLACKOUT"
+    if f < 59.2:
+        return C["red"], "CRITICAL"
+    if f < 59.5:
+        return C["orange"], "DANGER"
+    if f < 59.7:
+        return C["amber"], "WARNING"
+    if f <= 60.3:
+        return C["green"], "NOMINAL"
+    return C["amber"], "ELEVATED"
+
+
+def format_freq_status(freq_hz: float) -> str:
+    """HTML status strip above the gauge — keeps titles out of the Plotly canvas."""
+    col, zone = _freq_zone(freq_hz)
+    delta = round(freq_hz - 60.0, 3)
+    sign = "+" if delta >= 0 else ""
+    return (
+        f'<div class="freq-status-bar">'
+        f'<span class="freq-status-zone" style="color:{col}">Grid Frequency · {zone}</span>'
+        f'<span class="freq-status-delta">Δ {sign}{delta:.3f} Hz from nominal</span>'
+        f'<span class="freq-status-val" style="color:{col}">{freq_hz:.3f} Hz</span>'
+        f'</div>'
+    )
+
+
 def create_frequency_gauge(freq_hz: float,
                            history: List[float] | None = None) -> go.Figure:
     freq_hz = round(freq_hz, 3)
-
-    if freq_hz < 59.0:
-        col, zone = C["crimson"], "BLACKOUT"
-    elif freq_hz < 59.2:
-        col, zone = C["red"], "CRITICAL"
-    elif freq_hz < 59.5:
-        col, zone = C["orange"], "DANGER"
-    elif freq_hz < 59.7:
-        col, zone = C["amber"], "WARNING"
-    elif freq_hz <= 60.3:
-        col, zone = C["green"], "NOMINAL"
-    else:
-        col, zone = C["amber"], "ELEVATED"
-
-    delta = round(freq_hz - 60.0, 3)
-    delta_sign = "+" if delta >= 0 else ""
+    col, zone = _freq_zone(freq_hz)
 
     fig = make_subplots(
         rows=2, cols=1,
-        row_heights=[0.58, 0.42],
-        vertical_spacing=0.22,
+        row_heights=[0.52, 0.48],
+        vertical_spacing=0.26,
         specs=[[{"type": "indicator"}], [{"type": "scatter"}]],
     )
 
@@ -354,7 +373,7 @@ def create_frequency_gauge(freq_hz: float,
         value=freq_hz,
         number=dict(
             suffix=" Hz",
-            font=dict(size=30, color=col, family="Inter, sans-serif"),
+            font=dict(size=28, color=col, family="Inter, sans-serif"),
             valueformat=".3f",
         ),
         title=dict(text=""),
@@ -364,7 +383,7 @@ def create_frequency_gauge(freq_hz: float,
                 tickvals=[59.0, 59.5, 60.0, 60.5, 61.0],
                 tickwidth=1,
                 tickcolor=C["text_mid"],
-                tickfont=dict(size=11, color=C["text_mid"]),
+                tickfont=dict(size=10, color=C["text_mid"]),
             ),
             bar=dict(color=col, thickness=0.30),
             bgcolor="#1e293b",
@@ -407,21 +426,7 @@ def create_frequency_gauge(freq_hz: float,
         row=2, col=1,
     )
     fig.update_layout(
-        **_pro_layout(height=PLOT_HEIGHT, margin=dict(l=36, r=36, t=88, b=36)),
-        annotations=[
-            dict(
-                text=f"Grid Frequency · {zone}",
-                xref="paper", yref="paper", x=0.5, y=1.0,
-                showarrow=False, xanchor="center", yanchor="bottom",
-                font=dict(size=FS["zone"], color=col),
-            ),
-            dict(
-                text=f"Δ {delta_sign}{delta:.3f} Hz from nominal",
-                xref="paper", yref="paper", x=0.5, y=0.955,
-                showarrow=False, xanchor="center", yanchor="bottom",
-                font=dict(size=11, color=C["text_mid"]),
-            ),
-        ],
+        **_pro_layout(height=PLOT_HEIGHT, margin=dict(l=32, r=32, t=16, b=32)),
     )
     return fig
 
@@ -995,16 +1000,16 @@ def format_mission_board(scores: Dict[int, float], active_id: int) -> str:
         pct = int(sc * 100)
         cards.append(f"""
         <div class="mission-card {active}">
-          <div class="mission-top">
+          <div class="mission-head">
             <span class="mission-id">T{tid}</span>
-            <span class="mission-diff" style="color:{dcol}">{diff}</span>
+            <span class="mission-diff-badge" style="color:{dcol};border-color:{dcol}">{DIFF_SHORT.get(diff, diff)}</span>
           </div>
           <div class="mission-name">{t['name']}</div>
           <div class="mission-bar"><div class="mission-fill" style="width:{pct}%;background:{dcol}"></div></div>
           <div class="mission-score">{sc:.2f} / 1.00</div>
         </div>
         """)
-    return f'<div class="mission-board">{"".join(cards)}</div>'
+    return f'<div class="mission-wrap"><div class="mission-board">{"".join(cards)}</div></div>'
 
 
 # ═══════════════════════════════════════════════════════════════════
@@ -1194,6 +1199,7 @@ def _refresh():
     return (
         _safe_chart(create_topology_graph, obs),
         _safe_chart(create_frequency_gauge, st.frequency_hz, st.freq_history),
+        format_freq_status(st.frequency_hz),
         _safe_chart(create_power_flow_sankey, obs),
         _safe_chart(create_task_radar, st.task_scores),
         _safe_chart(create_reward_breakdown, st.reward_history),
@@ -1389,6 +1395,10 @@ body, .gradio-container, .main, .wrap, .app {{
   position: relative !important;
   z-index: 3 !important;
   isolation: isolate !important;
+  flex: 0 0 min(340px, 100%) !important;
+  max-width: 100% !important;
+  overflow-x: hidden !important;
+  overflow-y: visible !important;
 }}
 .layout-main-col {{
   position: relative !important;
@@ -1435,6 +1445,18 @@ body, .gradio-container, .main, .wrap, .app {{
 .plot-panel-wide .js-plotly-plot, .plot-panel-wide .plotly-graph-div {{
   min-height: {PLOT_HEIGHT_WIDE}px !important;
 }}
+.plot-panel-reward {{
+  width: 100% !important;
+  max-width: 100% !important;
+  margin-top: 4px !important;
+}}
+.layout-reward-section {{
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  clear: both !important;
+  margin-bottom: 20px !important;
+}}
 .mission-board, .legend-block, .ctrl-box, .kpi-grid, .fleet-strip {{
   position: relative;
   z-index: 1;
@@ -1573,6 +1595,53 @@ body, .gradio-container, .main, .wrap, .app {{
   margin-left: auto;
 }}
 
+/* Frequency status — lives outside Plotly so titles never collide with the gauge */
+.freq-status-bar {{
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  background: {C['surface_hi']};
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}}
+.freq-status-zone {{
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}}
+.freq-status-delta {{
+  font-size: 0.72rem;
+  color: var(--text-mid);
+}}
+.freq-status-val {{
+  font-family: "JetBrains Mono", monospace;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-top: 2px;
+}}
+.freq-col {{
+  min-width: 0 !important;
+  max-width: 100% !important;
+}}
+.plot-panel-freq .js-plotly-plot, .plot-panel-freq .plotly-graph-div {{
+  min-height: {PLOT_HEIGHT}px !important;
+}}
+
+.mission-wrap {{
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  margin-bottom: 12px;
+}}
+.layout-sidebar .mission-board {{
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  grid-template-columns: unset;
+}}
 .mission-board {{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -1584,15 +1653,48 @@ body, .gradio-container, .main, .wrap, .app {{
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 10px 12px;
+  min-width: 0;
+  overflow: hidden;
 }}
 .mission-active {{
   border-color: {C['accent']};
   box-shadow: 0 0 0 1px rgba(34,211,238,0.25);
 }}
-.mission-top {{ display: flex; justify-content: space-between; align-items: center; }}
-.mission-id {{ font-family: "JetBrains Mono", monospace; font-weight: 700; color: {C['accent']}; }}
-.mission-diff {{ font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }}
-.mission-name {{ font-size: 0.78rem; color: var(--text); margin: 6px 0; font-weight: 600; }}
+.mission-head {{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 26px;
+  margin-bottom: 4px;
+}}
+.mission-id {{
+  flex-shrink: 0;
+  font-family: "JetBrains Mono", monospace;
+  font-weight: 700;
+  font-size: 0.9rem;
+  color: {C['accent']};
+}}
+.mission-diff-badge {{
+  flex-shrink: 0;
+  font-size: 0.58rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid;
+  background: rgba(0,0,0,0.25);
+  white-space: nowrap;
+}}
+.mission-name {{
+  font-size: 0.78rem;
+  color: var(--text);
+  margin: 4px 0 6px;
+  font-weight: 600;
+  line-height: 1.35;
+  word-break: break-word;
+}}
 .mission-bar {{ height: 4px; background: {C['border']}; border-radius: 2px; overflow: hidden; }}
 .mission-fill {{ height: 100%; border-radius: 2px; }}
 .mission-score {{ font-family: "JetBrains Mono", monospace; font-size: 0.68rem; color: var(--text-mid); margin-top: 6px; }}
@@ -1614,7 +1716,7 @@ body, .gradio-container, .main, .wrap, .app {{
 
 @media (max-width: 1100px) {{
   .kpi-grid, .fleet-strip {{ grid-template-columns: repeat(3, 1fr); }}
-  .mission-board {{ grid-template-columns: repeat(2, 1fr); }}
+  .layout-main-col .mission-board {{ grid-template-columns: repeat(2, 1fr); }}
 }}
 @media (max-width: 900px) {{
   .layout-main-row {{
@@ -1698,7 +1800,7 @@ def create_dashboard() -> gr.Blocks:
         )
 
         with gr.Row(equal_height=False, elem_classes=["layout-main-row"]):
-            with gr.Column(scale=1, min_width=240, elem_classes=["layout-sidebar"]):
+            with gr.Column(scale=1, min_width=300, elem_classes=["layout-sidebar"]):
                 gr.HTML('<div class="ctrl-box"><h3>Episode Control</h3></div>')
                 task_select = gr.Slider(0, 5, value=0, step=1, label="Mission / Task ID")
                 seed_input = gr.Number(value=42, label="Random seed", precision=0)
@@ -1752,9 +1854,10 @@ def create_dashboard() -> gr.Blocks:
                     with gr.Column(scale=3):
                         gr.HTML(_shell('Grid Topology · 20-node network', C['accent']))
                         topo_plot = gr.Plot(label='', elem_classes=['plot-panel', 'plot-panel-tall'])
-                    with gr.Column(scale=2):
+                    with gr.Column(scale=2, elem_classes=["freq-col"]):
                         gr.HTML(_shell('Grid Frequency Monitor', C['green']))
-                        freq_plot = gr.Plot(label='', elem_classes=['plot-panel'])
+                        freq_status = gr.HTML(format_freq_status(dashboard_state.frequency_hz))
+                        freq_plot = gr.Plot(label='', elem_classes=['plot-panel', 'plot-panel-freq'])
 
                 with gr.Row(equal_height=False, elem_classes=["layout-chart-row"]):
                     with gr.Column(scale=3):
@@ -1764,9 +1867,10 @@ def create_dashboard() -> gr.Blocks:
                         gr.HTML(_shell('Mission Performance Radar', C['purple']))
                         radar_plot = gr.Plot(label='', elem_classes=['plot-panel'])
 
-                gr.HTML(_section('02', 'Agent Training', 'Reward rubric signals'))
-                gr.HTML(_shell('Reward Signal Decomposition', C['green']))
-                reward_plot = gr.Plot(label='', elem_classes=['plot-panel'])
+                with gr.Column(elem_classes=["layout-reward-section"]):
+                    gr.HTML(_section('02', 'Agent Training', 'Reward rubric signals'))
+                    gr.HTML(_shell('Reward Signal Decomposition', C['green']))
+                    reward_plot = gr.Plot(label='', elem_classes=['plot-panel', 'plot-panel-reward'])
 
                 gr.HTML(_section('03', 'Cyber Layer', 'SCADA · Kirchhoff oracle · agent log'))
                 with gr.Row(equal_height=False, elem_classes=["layout-chart-row"]):
@@ -1785,7 +1889,7 @@ def create_dashboard() -> gr.Blocks:
 
 
         all_out = [
-            topo_plot, freq_plot, sankey_plot, radar_plot, reward_plot,
+            topo_plot, freq_plot, freq_status, sankey_plot, radar_plot, reward_plot,
             threat_feed, action_trace, status_bar, kpi_panel, mission_panel,
         ]
         reset_btn.click(fn=on_reset, inputs=[task_select, seed_input], outputs=all_out)