stage 5: hero, status banner, and totem signal gauge

Scope: implement render_hero/state-driven status row and functional SVG render_signal_gauge(value) with aria labeling and progress ring binding.

Validation: 0/35/75/100 gauge checks and status variant checks passed; callbacks remain unchanged.

app.py

@@ -339,8 +339,95 @@ TOTEM_CSS = """
 }
 
 .totem-hero {
+  position: relative;
   min-height: 222px;
   padding: 44px 52px;
+  overflow: hidden;
+  border: 1px solid rgba(242, 193, 78, 0.35);
+  background:
+    radial-gradient(circle at 85% 50%, rgba(138, 77, 255, 0.24), transparent 30%),
+    linear-gradient(120deg, rgba(13, 23, 51, 0.98), rgba(35, 15, 62, 0.92) 58%, rgba(8, 18, 45, 0.98));
+}
+
+.totem-hero::after {
+  content: "";
+  position: absolute;
+  left: 18%;
+  right: 10%;
+  top: 44%;
+  height: 76px;
+  transform: rotate(-10deg);
+  border-radius: 999px;
+  filter: blur(12px);
+  background: linear-gradient(90deg, transparent, rgba(138, 77, 255, 0.45), rgba(242, 193, 78, 0.38), transparent);
+}
+
+.totem-hero-title {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 44px;
+  line-height: 1.05;
+  color: var(--totem-gold);
+}
+
+.totem-hero-subtitle {
+  position: relative;
+  z-index: 1;
+  margin-top: 10px;
+  font-size: 22px;
+  color: rgba(246, 241, 232, 0.92);
+  font-family: var(--font-ui);
+}
+
+.totem-signal-wrap {
+  position: absolute;
+  right: 46px;
+  top: 31px;
+  width: 160px;
+  height: 160px;
+}
+
+.totem-signal {
+  width: 100%;
+  height: 100%;
+}
+
+.signal-track {
+  fill: none;
+  stroke: rgba(174, 183, 204, 0.28);
+  stroke-width: 8;
+}
+
+.signal-progress {
+  fill: none;
+  stroke: var(--totem-gold);
+  stroke-width: 8;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: 80px 80px;
+}
+
+.signal-core-ring {
+  fill: rgba(7, 18, 45, 0.7);
+  stroke: rgba(57, 201, 255, 0.55);
+  stroke-width: 1.5;
+}
+
+.signal-star {
+  fill: var(--totem-gold);
+}
+
+.totem-signal-label {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -18px;
+  text-align: center;
+  font-family: var(--font-ui);
+  font-size: 12px;
+  color: rgba(174, 183, 204, 0.98);
 }
 
 .totem-status-row {
@@ -349,6 +436,34 @@ TOTEM_CSS = """
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--space-5);
+  border-radius: 10px;
+}
+
+.totem-status-row.state-ready,
+.totem-status-row.state-complete {
+  background: rgba(34, 181, 115, 0.1);
+  border-color: rgba(34, 181, 115, 0.35);
+}
+
+.totem-status-row.state-running {
+  background: rgba(242, 169, 59, 0.1);
+  border-color: rgba(242, 169, 59, 0.35);
+}
+
+.totem-status-row.state-error {
+  background: rgba(224, 75, 69, 0.1);
+  border-color: rgba(224, 75, 69, 0.35);
+}
+
+.totem-run-btn {
+  min-height: 34px;
+  border-radius: 8px;
+  border: 1px solid rgba(34, 181, 115, 0.5);
+  background: linear-gradient(180deg, rgba(34, 181, 115, 0.25), rgba(10, 40, 29, 0.45));
+  color: rgba(217, 251, 232, 0.95);
+  padding: 0 var(--space-4);
+  font-family: var(--font-ui);
+  font-weight: 600;
 }
 
 .totem-metrics-grid {
@@ -499,6 +614,11 @@ TOTEM_CSS = """
   .totem-lower-grid {
     grid-template-columns: 1fr;
   }
+  .totem-signal-wrap {
+    width: 132px;
+    height: 132px;
+    right: 28px;
+  }
 }
 
 @media (max-width: 900px) {
@@ -512,6 +632,15 @@ TOTEM_CSS = """
   .totem-topbar {
     grid-template-columns: 1fr;
   }
+  .totem-hero {
+    padding: 30px 24px;
+  }
+  .totem-signal-wrap {
+    position: relative;
+    right: auto;
+    top: auto;
+    margin-top: 24px;
+  }
   .totem-shell .totem-row {
     grid-template-columns: 1fr;
   }
@@ -803,30 +932,75 @@ def render_topbar(state: dict) -> str:
     """
 
 
+def render_signal_gauge(value: int) -> str:
+    clamped = max(0, min(100, int(value or 0)))
+    circumference = 427.26
+    progress = clamped / 100.0
+    dash_offset = circumference * (1 - progress)
+    return f"""
+    <div class="totem-signal-wrap">
+      <svg class="totem-signal" viewBox="0 0 160 160" role="img" aria-label="TOTEM Signal {clamped} percent">
+        <circle class="signal-track" cx="80" cy="80" r="68"></circle>
+        <circle
+          class="signal-progress"
+          cx="80"
+          cy="80"
+          r="68"
+          style="stroke-dasharray:{circumference:.2f};stroke-dashoffset:{dash_offset:.2f};"
+        ></circle>
+        <circle class="signal-core-ring" cx="80" cy="80" r="34"></circle>
+        <circle class="signal-core-ring" cx="80" cy="80" r="22"></circle>
+        <path class="signal-star" d="M80 58 L84.7 73.5 L100.9 73.5 L87.8 82.9 L92.6 98.4 L80 89.1 L67.4 98.4 L72.2 82.9 L59.1 73.5 L75.3 73.5 Z"></path>
+      </svg>
+      <div class="totem-signal-label">TOTEM Signal {clamped}%</div>
+    </div>
+    """
+
+
+def render_hero(state: dict) -> str:
+    signal = int(state.get("totem_signal", 0) or 0)
+    return f"""
+    <section class="totem-hero">
+      <h2 class="totem-hero-title">TOTEM Studio</h2>
+      <p class="totem-hero-subtitle">Data-driven insight for stronger stories.</p>
+      {render_signal_gauge(signal)}
+    </section>
+    """
+
+
+def render_status_row(state: dict) -> str:
+    status = str(state.get("analysis_status", "idle") or "idle").strip().lower()
+    text_by_status = {
+        "idle": "Dashboard ready. Click Run TOTEM Analysis to refresh metrics.",
+        "ready": "Dashboard ready. Click Run TOTEM Analysis to refresh metrics.",
+        "running": "TOTEM analysis running. Updating dashboard metrics...",
+        "complete": "TOTEM analysis complete. Dashboard metrics updated.",
+        "error": "TOTEM analysis error. Review logs and retry.",
+    }
+    css_state = status if status in {"ready", "running", "complete", "error"} else "ready"
+    message = esc(text_by_status.get(status, text_by_status["ready"]))
+    return f"""
+    <section class="totem-status-row state-{css_state}">
+      <div>{message}</div>
+      <button class="totem-run-btn" type="button" aria-label="Run TOTEM Analysis visual button">Run TOTEM Analysis</button>
+    </section>
+    """
+
+
 def render_dashboard(state: dict) -> str:
     """
     Stage 3/4 static shell wrapper.
     Callback wiring remains untouched until later stages.
     """
     s = normalize_dashboard_state(state)
-    signal = int(s.get("totem_signal", 0) or 0)
     return f"""
     <div class="totem-shell">
       {render_sidebar(active='Home')}
       <main class="totem-main">
         <div class="totem-main-inner">
           {render_topbar(s)}
-          <section class="totem-hero">
-            <h2 style="margin:0;font-family:var(--font-display);font-size:44px;color:var(--totem-gold);">TOTEM Studio</h2>
-            <p style="margin:10px 0 0 0;font-size:22px;color:rgba(246,241,232,.92);font-family:var(--font-ui);">
-              Data-driven insight for stronger stories.
-            </p>
-            <p class="totem-muted" style="margin-top:14px;">TOTEM Signal {signal}%</p>
-          </section>
-          <section class="totem-status-row">
-            <div>Dashboard shell ready. Stage 3 static layout.</div>
-            <div class="totem-muted">Signal {signal}%</div>
-          </section>
+          {render_hero(s)}
+          {render_status_row(s)}
           <section class="totem-metrics-grid">
             <div class="totem-row">
               <div class="totem-placeholder">Metrics Placeholder</div>