stage 3: static dashboard shell wrapper

Scope: add render_dashboard(state) static shell with totem-shell/sidebar/main wrappers and placeholder topbar/hero/status/metrics/lower sections.

Validation: py_compile + render smoke checks passed; existing tabs/callback wiring preserved.

app.py

@@ -291,6 +291,144 @@ TOTEM_CSS = """
 
   --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
   --font-ui: Inter, Aptos, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+  min-height: 880px;
+  display: flex;
+  background: linear-gradient(180deg, #040816 0%, #07122d 100%);
+  color: var(--totem-ivory);
+}
+
+.totem-sidebar {
+  width: 256px;
+  flex: 0 0 256px;
+  min-height: 100%;
+  border-right: 1px solid rgba(242, 193, 78, 0.22);
+  background: linear-gradient(180deg, #050d24 0%, #07122d 65%, #091733 100%);
+  padding: 20px 18px;
+}
+
+.totem-main {
+  flex: 1;
+  min-width: 0;
+  padding: 20px 22px;
+  background: linear-gradient(180deg, #07122d 0%, #0b1633 100%);
+}
+
+.totem-main-inner {
+  width: 100%;
+}
+
+.totem-topbar,
+.totem-hero,
+.totem-status-row,
+.totem-metrics-grid,
+.totem-lower-grid {
+  border-radius: var(--radius-panel);
+  border: 1px solid rgba(242, 193, 78, 0.22);
+  background: linear-gradient(180deg, rgba(16, 26, 58, 0.96), rgba(17, 30, 68, 0.95));
+  margin-bottom: var(--space-4);
+}
+
+.totem-topbar {
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-5);
+}
+
+.totem-hero {
+  min-height: 222px;
+  padding: 44px 52px;
+}
+
+.totem-status-row {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-5);
+}
+
+.totem-metrics-grid {
+  min-height: 168px;
+  padding: var(--space-5);
+}
+
+.totem-lower-grid {
+  min-height: 240px;
+  padding: var(--space-5);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+}
+
+.totem-shell .totem-brand {
+  font-family: var(--font-display);
+  font-size: 34px;
+  color: var(--totem-gold);
+  line-height: 1.1;
+  margin-bottom: var(--space-6);
+}
+
+.totem-shell .totem-nav-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  border-radius: 12px;
+  color: rgba(246, 241, 232, 0.88);
+  margin-bottom: var(--space-2);
+  border: 1px solid transparent;
+  font-family: var(--font-ui);
+}
+
+.totem-shell .totem-nav-item.active {
+  border-color: rgba(242, 193, 78, 0.45);
+  background: linear-gradient(90deg, rgba(242, 193, 78, 0.2), rgba(138, 77, 255, 0.2));
+}
+
+.totem-shell .totem-muted {
+  color: var(--totem-muted);
+  font-family: var(--font-ui);
+}
+
+.totem-shell .totem-placeholder {
+  border: 1px dashed rgba(174, 183, 204, 0.45);
+  border-radius: var(--radius-card);
+  min-height: 78px;
+  display: grid;
+  place-items: center;
+  color: rgba(174, 183, 204, 0.95);
+  font-family: var(--font-ui);
+}
+
+.totem-shell .totem-row {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+@media (max-width: 1200px) {
+  .totem-shell .totem-row {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .totem-lower-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .totem-shell {
+    flex-direction: column;
+  }
+  .totem-sidebar {
+    width: 100%;
+    flex-basis: auto;
+  }
+  .totem-shell .totem-row {
+    grid-template-columns: 1fr;
+  }
 }
 """
 
@@ -523,6 +661,64 @@ def _clean_path(uploaded_file) -> Path:
     return workbook_path(uploaded_file)
 
 
+def render_dashboard(state: dict) -> str:
+    """
+    Stage 3 static shell wrapper.
+    Callbacks are intentionally not rewired in this stage.
+    """
+    s = normalize_dashboard_state(state)
+    project_name = esc(s.get("project_name", "Editorial Workspace"))
+    analysis_status = esc(s.get("analysis_status", "idle")).upper()
+    signal = int(s.get("totem_signal", 0) or 0)
+    return f"""
+    <div class="totem-shell">
+      <aside class="totem-sidebar">
+        <div class="totem-brand">TOTEM Studio</div>
+        <div class="totem-nav-item active">Home</div>
+        <div class="totem-nav-item">Projects</div>
+        <div class="totem-nav-item">Workbook Upload</div>
+        <div class="totem-nav-item">TOTEM Analytics</div>
+        <div class="totem-nav-item">Revision Queue</div>
+        <div class="totem-nav-item">Risk Clusters</div>
+        <div class="totem-nav-item">Codex Extractor</div>
+        <div class="totem-nav-item">Export</div>
+      </aside>
+      <main class="totem-main">
+        <div class="totem-main-inner">
+          <section class="totem-topbar">
+            <div>{project_name}</div>
+            <div class="totem-muted">STATUS: {analysis_status}</div>
+          </section>
+          <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>
+          <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>
+          <section class="totem-lower-grid">
+            <div class="totem-placeholder">Revision Queue Placeholder</div>
+            <div class="totem-placeholder">Risk Clusters Placeholder</div>
+          </section>
+        </div>
+      </main>
+    </div>
+    """
+
+
 def _validate_workbook_path(path: Path) -> Path:
     if not path.exists():
         raise gr.Error(f"Workbook path does not exist: {path}")
@@ -1380,18 +1576,16 @@ def initial_dashboard_html() -> str:
     Render dashboard shell at startup so sidebar/nav are visible immediately.
     Falls back gracefully if workbook read fails.
     """
-    try:
-        return dashboard_html(DEFAULT_WORKBOOK, "Dashboard ready. Click Run TOTEM Analysis to refresh metrics.")
-    except Exception as exc:
-        return (
-            "<div style='padding:24px;font-family:system-ui,sans-serif'>"
-            "<h3 style='margin:0 0 8px'>TOTEM Dashboard</h3>"
-            "<p style='margin:0 0 12px;color:#666'>"
-            "Dashboard shell is ready. Click <b>Run TOTEM Analysis</b> to load workbook data."
-            "</p>"
-            f"<p style='margin:0;color:#888;font-size:12px'>Startup note: {escape(str(exc))}</p>"
-            "</div>"
-        )
+    state = get_initial_dashboard_state()
+    state["workbook_loaded"] = bool(DEFAULT_WORKBOOK.exists())
+    state["analysis_status"] = "ready" if state["workbook_loaded"] else "idle"
+    state["project_name"] = "Editorial Workspace"
+    state["totem_signal"] = compute_totem_signal(
+        state["metrics"],
+        workbook_loaded=state["workbook_loaded"],
+        analysis_timestamp=state["last_analysis_at"],
+    )
+    return render_dashboard(state)
 
 
 # ── GRADIO INTERFACE ──────────────────────────────────────────────────────────