stage 7: revision priority queue and risk clusters

app.py

@@ -479,6 +479,205 @@ TOTEM_CSS = """
   gap: var(--space-4);
 }
 
+.totem-panel {
+  min-width: 0;
+  border-radius: var(--radius-card);
+  border: 1px solid rgba(174, 183, 204, 0.3);
+  background: linear-gradient(180deg, rgba(16, 26, 58, 0.95), rgba(8, 18, 45, 0.98));
+  overflow: hidden;
+}
+
+.totem-panel-title {
+  margin: 0;
+  padding: 16px 18px;
+  border-bottom: 1px solid rgba(174, 183, 204, 0.22);
+  color: rgba(246, 241, 232, 0.98);
+  font-family: var(--font-display);
+  font-size: 34px;
+  line-height: 1.15;
+}
+
+.totem-panel-title small {
+  margin-left: var(--space-2);
+  font-family: var(--font-ui);
+  font-size: 14px;
+  color: rgba(174, 183, 204, 0.92);
+}
+
+.totem-empty-state {
+  min-height: 132px;
+  padding: 18px;
+  display: grid;
+  align-items: center;
+  color: rgba(174, 183, 204, 0.95);
+  font-family: var(--font-ui);
+  font-size: 14px;
+}
+
+.totem-queue-table {
+  width: 100%;
+}
+
+.totem-queue-head,
+.totem-queue-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr .86fr .72fr 1.34fr;
+  gap: 10px;
+  align-items: start;
+  padding: 12px 18px;
+}
+
+.totem-queue-head {
+  font-family: var(--font-ui);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  color: rgba(174, 183, 204, 0.9);
+  border-bottom: 1px solid rgba(174, 183, 204, 0.22);
+}
+
+.totem-queue-row {
+  font-family: var(--font-ui);
+  font-size: 13px;
+  color: rgba(246, 241, 232, 0.95);
+  border-bottom: 1px solid rgba(174, 183, 204, 0.15);
+}
+
+.totem-queue-row:last-child {
+  border-bottom: none;
+}
+
+.totem-queue-row span:last-child {
+  line-height: 1.35;
+  color: rgba(174, 183, 204, 0.98);
+}
+
+.totem-pill {
+  justify-self: start;
+  border-radius: 999px;
+  padding: 4px 10px;
+  border: 1px solid transparent;
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.totem-pill.tone-high {
+  color: #ffd7ea;
+  border-color: rgba(224, 75, 69, 0.55);
+  background: rgba(224, 75, 69, 0.2);
+}
+
+.totem-pill.tone-medium {
+  color: #ffe9b2;
+  border-color: rgba(242, 169, 59, 0.55);
+  background: rgba(242, 169, 59, 0.18);
+}
+
+.totem-pill.tone-low {
+  color: #c5ffeb;
+  border-color: rgba(57, 201, 255, 0.55);
+  background: rgba(57, 201, 255, 0.15);
+}
+
+.totem-risk-list {
+  width: 100%;
+}
+
+.totem-risk-row {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr) auto 150px;
+  gap: 12px;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(174, 183, 204, 0.15);
+}
+
+.totem-risk-row:last-child {
+  border-bottom: none;
+}
+
+.totem-risk-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  font-family: var(--font-ui);
+  font-size: 18px;
+  font-weight: 700;
+  color: rgba(246, 241, 232, 0.98);
+  border: 1px solid rgba(174, 183, 204, 0.45);
+  background: rgba(7, 18, 45, 0.45);
+}
+
+.totem-risk-icon.tone-high {
+  border-color: rgba(224, 75, 69, 0.6);
+  box-shadow: 0 0 20px rgba(224, 75, 69, 0.25);
+}
+
+.totem-risk-icon.tone-medium {
+  border-color: rgba(242, 169, 59, 0.62);
+  box-shadow: 0 0 20px rgba(242, 169, 59, 0.22);
+}
+
+.totem-risk-icon.tone-low {
+  border-color: rgba(57, 201, 255, 0.6);
+  box-shadow: 0 0 20px rgba(57, 201, 255, 0.22);
+}
+
+.totem-risk-body {
+  min-width: 0;
+}
+
+.totem-risk-body b {
+  display: block;
+  font-family: var(--font-display);
+  font-size: 36px;
+  line-height: 1.05;
+  color: rgba(246, 241, 232, 0.98);
+}
+
+.totem-risk-body small {
+  display: block;
+  margin-top: 5px;
+  font-family: var(--font-ui);
+  font-size: 13px;
+  line-height: 1.3;
+  color: rgba(174, 183, 204, 0.98);
+  white-space: normal;
+  word-break: break-word;
+}
+
+.totem-sparkline {
+  width: 150px;
+  height: 40px;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 5px;
+}
+
+.totem-sparkline span {
+  flex: 1;
+  border-radius: 3px 3px 0 0;
+  background: rgba(174, 183, 204, 0.85);
+}
+
+.totem-sparkline.tone-high span {
+  background: linear-gradient(180deg, #ff7ea6, #e04b45);
+}
+
+.totem-sparkline.tone-medium span {
+  background: linear-gradient(180deg, #ffd37a, #f2a93b);
+}
+
+.totem-sparkline.tone-low span {
+  background: linear-gradient(180deg, #6ce6ff, #39c9ff);
+}
+
 .totem-shell .totem-brand {
   font-family: var(--font-display);
   font-size: 34px;
@@ -682,6 +881,12 @@ TOTEM_CSS = """
   .totem-lower-grid {
     grid-template-columns: 1fr;
   }
+  .totem-panel-title {
+    font-size: 30px;
+  }
+  .totem-risk-body b {
+    font-size: 32px;
+  }
   .totem-signal-wrap {
     width: 132px;
     height: 132px;
@@ -712,6 +917,27 @@ TOTEM_CSS = """
   .totem-shell .totem-row {
     grid-template-columns: 1fr;
   }
+  .totem-queue-head {
+    display: none;
+  }
+  .totem-queue-row {
+    grid-template-columns: 1fr;
+    gap: 7px;
+    border-bottom: 1px solid rgba(174, 183, 204, 0.2);
+  }
+  .totem-risk-row {
+    grid-template-columns: 40px minmax(0, 1fr);
+  }
+  .totem-risk-row .totem-pill,
+  .totem-risk-row .totem-sparkline {
+    grid-column: 2;
+  }
+  .totem-panel-title {
+    font-size: 27px;
+  }
+  .totem-risk-body b {
+    font-size: 28px;
+  }
 }
 """
 
@@ -1111,6 +1337,157 @@ def render_metric_cards(state: dict) -> str:
     """
 
 
+def _risk_tone(value: str) -> tuple[str, str]:
+    text = str(value or "").strip().lower()
+    if "high" in text:
+        return "tone-high", "High Risk"
+    if "low" in text:
+        return "tone-low", "Low Risk"
+    return "tone-medium", "Medium Risk"
+
+
+def _priority_tone(value: str, gate: str) -> tuple[str, str]:
+    raw = str(value or "").strip().lower()
+    if not raw:
+        gate_value = str(gate or "").strip().lower()
+        if "hard fail" in gate_value:
+            raw = "high"
+        elif "soft fail" in gate_value:
+            raw = "medium"
+        else:
+            raw = "low"
+
+    if raw.startswith("high"):
+        return "tone-high", "High"
+    if raw.startswith("low"):
+        return "tone-low", "Low"
+    return "tone-medium", "Medium"
+
+
+def _sparkline_values(values, tone_class: str) -> list[int]:
+    parsed: list[int] = []
+    if isinstance(values, list):
+        for value in values:
+            try:
+                parsed.append(int(round(float(value))))
+            except Exception:
+                continue
+
+    if not parsed:
+        if tone_class == "tone-high":
+            parsed = [22, 30, 19, 34, 28, 37, 24, 31, 27]
+        elif tone_class == "tone-low":
+            parsed = [9, 13, 8, 15, 10, 14, 9, 13, 11]
+        else:
+            parsed = [14, 18, 12, 20, 16, 22, 14, 19, 16]
+
+    if len(parsed) < 8:
+        parsed.extend(parsed[-1:] * (8 - len(parsed)))
+    parsed = parsed[:10]
+    return [max(6, min(40, v)) for v in parsed]
+
+
+def render_revision_queue(state: dict) -> str:
+    items = state.get("revision_queue", []) if isinstance(state, dict) else []
+    rows_html: list[str] = []
+    if isinstance(items, list):
+        for item in items[:10]:
+            if not isinstance(item, dict):
+                continue
+            block = item.get("block") or item.get("Block") or item.get("stanza_id") or item.get("sequence") or "Block"
+            weakest = (
+                item.get("weakest_dimension")
+                or item.get("weakestDimension")
+                or item.get("metric")
+                or item.get("Priority Fix")
+                or "Read-aloud Flow"
+            )
+            gate = item.get("gate") or item.get("Gate") or "Soft Fail"
+            priority_source = item.get("priority") or item.get("Priority") or ""
+            tone_class, priority_label = _priority_tone(priority_source, gate)
+            action = (
+                item.get("recommended_action")
+                or item.get("recommendedAction")
+                or item.get("Next action")
+                or REVISION_ACTIONS.get(str(weakest), "Revise this block before the next pass.")
+            )
+            rows_html.append(
+                f"""
+                <div class="totem-queue-row" role="row">
+                  <span>{esc(block)}</span>
+                  <span>{esc(weakest)}</span>
+                  <span>{esc(gate)}</span>
+                  <span class="totem-pill {tone_class}">{esc(priority_label)}</span>
+                  <span>{esc(action)}</span>
+                </div>
+                """
+            )
+
+    live_count = len(rows_html)
+    if not rows_html:
+        body = '<div class="totem-empty-state">No priority revisions yet. Run analysis to generate the queue.</div>'
+    else:
+        body = f"""
+        <div class="totem-queue-table" role="table" aria-label="Revision Priority Queue">
+          <div class="totem-queue-head" role="row">
+            <span>Block</span>
+            <span>Weakest Dimension</span>
+            <span>Gate</span>
+            <span>Priority</span>
+            <span>Recommended Action</span>
+          </div>
+          {''.join(rows_html)}
+        </div>
+        """
+
+    return f"""
+    <section class="totem-panel">
+      <h3 class="totem-panel-title">Revision Priority Queue <small>{live_count} live item(s)</small></h3>
+      {body}
+    </section>
+    """
+
+
+def render_risk_clusters(state: dict) -> str:
+    clusters = state.get("risk_clusters", []) if isinstance(state, dict) else []
+    rows_html: list[str] = []
+    if isinstance(clusters, list):
+        for item in clusters[:10]:
+            if not isinstance(item, dict):
+                continue
+            name = item.get("name") or item.get("metric") or item.get("cluster") or "Risk Cluster"
+            description = item.get("description") or item.get("detail") or "No detail provided."
+            tone_class, risk_label = _risk_tone(item.get("risk") or item.get("level"))
+            icon = str(item.get("icon") or str(name)[:1] or "!")
+            bars = _sparkline_values(item.get("sparkline"), tone_class)
+            bars_html = "".join(f"<span style='height:{height}px'></span>" for height in bars)
+            rows_html.append(
+                f"""
+                <div class="totem-risk-row">
+                  <span class="totem-risk-icon {tone_class}" aria-hidden="true">{esc(icon[:1].upper())}</span>
+                  <div class="totem-risk-body">
+                    <b>{esc(name)}</b>
+                    <small>{esc(description)}</small>
+                  </div>
+                  <span class="totem-pill {tone_class}">{esc(risk_label)}</span>
+                  <div class="totem-sparkline {tone_class}" aria-label="{esc(name)} sparkline">{bars_html}</div>
+                </div>
+                """
+            )
+
+    if not rows_html:
+        body = '<div class="totem-empty-state">No risk clusters detected.</div>'
+    else:
+        body = f'<div class="totem-risk-list">{"" .join(rows_html)}</div>'
+
+    return f"""
+    <section class="totem-panel">
+      <h3 class="totem-panel-title">Risk Clusters</h3>
+      {body}
+    </section>
+    """
+
+
 def render_dashboard(state: dict) -> str:
     """
     Stage 3/4 static shell wrapper.
@@ -1127,8 +1504,8 @@ def render_dashboard(state: dict) -> str:
           {render_status_row(s)}
           {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>
+            {render_revision_queue(s)}
+            {render_risk_clusters(s)}
           </section>
         </div>
       </main>