stage 6: metric cards

Scope: render five metric cards from dashboard state metrics with deterministic 12-bar history strips and manual footer hints.

Validation: labels/scores/bar-count/empty-state checks passed; callbacks unchanged.

app.py

@@ -603,6 +603,74 @@ TOTEM_CSS = """
   gap: var(--space-3);
 }
 
+.totem-metric-card {
+  min-height: 178px;
+  padding: 18px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(16, 26, 58, 0.96), rgba(8, 18, 45, 0.98));
+  border: 1px solid rgba(174, 183, 204, 0.3);
+  font-family: var(--font-ui);
+}
+
+.totem-metric-head {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 12px;
+  align-items: center;
+}
+
+.totem-metric-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 24px;
+  background: rgba(7, 18, 45, 0.45);
+  border: 1px solid var(--metric-color);
+  box-shadow: 0 0 22px color-mix(in srgb, var(--metric-color), transparent 55%);
+}
+
+.totem-metric-label {
+  font-size: 14px;
+  color: rgba(246, 241, 232, 0.95);
+}
+
+.totem-metric-score {
+  margin-top: 12px;
+  font-size: 42px;
+  line-height: 1;
+  color: var(--metric-color);
+  font-variant-numeric: tabular-nums;
+}
+
+.totem-metric-score small {
+  font-size: 17px;
+  color: rgba(174, 183, 204, 0.95);
+}
+
+.totem-metric-bars {
+  display: flex;
+  align-items: end;
+  gap: 6px;
+  height: 32px;
+  margin-top: 14px;
+}
+
+.totem-metric-bars span {
+  width: 4px;
+  border-radius: 3px 3px 0 0;
+  background: var(--metric-color);
+  opacity: .95;
+}
+
+.totem-metric-hint {
+  margin-top: 12px;
+  font-size: 12px;
+  color: rgba(174, 183, 204, 0.98);
+}
+
 @media (max-width: 1200px) {
   .totem-topbar {
     grid-template-columns: auto minmax(200px, 1fr);
@@ -987,6 +1055,62 @@ def render_status_row(state: dict) -> str:
     """
 
 
+def _metric_bar_heights(score: int, history_values: list) -> list[int]:
+    history = []
+    if isinstance(history_values, list):
+        for v in history_values:
+            history.append(max(0, min(100, int(round(_state_float(v, score))))))
+    if len(history) >= 12:
+        values = history[-12:]
+    else:
+        # Deterministic fallback wave around current score when no/short history is available.
+        base = max(0, min(100, int(score)))
+        offsets = [-16, -10, -6, -4, -2, 0, 2, 4, 6, 8, 10, 12]
+        values = [max(0, min(100, base + off)) for off in offsets]
+        if history:
+            values[: len(history)] = history
+    return [max(6, min(34, int(round(6 + (v * 0.28))))) for v in values]
+
+
+def render_metric_cards(state: dict) -> str:
+    metrics = state.get("metrics", {}) if isinstance(state, dict) else {}
+    history = state.get("metric_history", {}) if isinstance(state, dict) else {}
+    card_defs = [
+        ("overall_publishability", "Overall Publishability", "✦", "var(--totem-gold)", "Source: viability lens"),
+        ("read_aloud_flow", "Read-Aloud Flow", "≋", "var(--totem-pink)", "Weakest live pressure"),
+        ("emotional_truth", "Emotional Truth", "❤", "var(--totem-emerald)", "Strongest story signal"),
+        ("visual_strength", "Visual Strength", "◉", "var(--totem-cyan)", "Drawable page value"),
+        ("commercial_viability", "Commercial Viability", "↗", "var(--totem-violet)", "Publisher-facing lens"),
+    ]
+
+    cards = []
+    for key, label, icon, color, hint in card_defs:
+        score = max(0, min(100, int(round(_state_float(metrics.get(key, 0), 0)))))
+        bars = _metric_bar_heights(score, history.get(key, []) if isinstance(history, dict) else [])
+        bars_html = "".join(f"<span style='height:{h}px'></span>" for h in bars)
+        cards.append(
+            f"""
+            <article class="totem-metric-card" style="--metric-color:{color};" aria-label="{esc(label)} {score} out of 100. {esc(hint)}">
+              <div class="totem-metric-head">
+                <div class="totem-metric-icon">{icon}</div>
+                <div class="totem-metric-label">{esc(label)}</div>
+              </div>
+              <div class="totem-metric-score">{score}<small>/100</small></div>
+              <div class="totem-metric-bars">{bars_html}</div>
+              <div class="totem-metric-hint">{esc(hint)}</div>
+            </article>
+            """
+        )
+
+    return f"""
+    <section class="totem-metrics-grid">
+      <div class="totem-row">
+        {''.join(cards)}
+      </div>
+    </section>
+    """
+
+
 def render_dashboard(state: dict) -> str:
     """
     Stage 3/4 static shell wrapper.
@@ -1001,15 +1125,7 @@ def render_dashboard(state: dict) -> str:
           {render_topbar(s)}
           {render_hero(s)}
           {render_status_row(s)}
-          <section class="totem-metrics-grid">
-            <div class="totem-row">
-              <div class="totem-placeholder">Metrics Placeholder</div>
-              <div class="totem-placeholder">Metrics Placeholder</div>
-              <div class="totem-placeholder">Metrics Placeholder</div>
-              <div class="totem-placeholder">Metrics Placeholder</div>
-              <div class="totem-placeholder">Metrics Placeholder</div>
-            </div>
-          </section>
+          {render_metric_cards(s)}
           <section class="totem-lower-grid">
             <div class="totem-placeholder">Revision Queue Placeholder</div>
             <div class="totem-placeholder">Risk Clusters Placeholder</div>