stage 4: sidebar and topbar

Scope: implement render_sidebar(active='Home') and render_topbar(state) with required navigation labels and topbar chips/search/workspace visuals.

Validation: compile/import + label/chip/home-active checks passed; tabs/callback wiring unchanged.

app.py

@@ -331,9 +331,10 @@ TOTEM_CSS = """
 
 .totem-topbar {
   min-height: 64px;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto minmax(260px, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--space-3);
   padding: 0 var(--space-5);
 }
 
@@ -371,6 +372,28 @@ TOTEM_CSS = """
   margin-bottom: var(--space-6);
 }
 
+.totem-shell .totem-brand small {
+  display: block;
+  margin-top: var(--space-2);
+  font-family: var(--font-ui);
+  font-size: 12px;
+  letter-spacing: 1.5px;
+  color: rgba(174, 183, 204, 0.9);
+}
+
+.totem-shell .totem-quote-card {
+  margin-top: calc(var(--space-8) + var(--space-8));
+  padding: var(--space-5);
+  border-radius: var(--radius-card);
+  border: 1px solid rgba(242, 193, 78, 0.28);
+  background: radial-gradient(circle at 82% 70%, rgba(138, 77, 255, 0.22), transparent 45%),
+    linear-gradient(180deg, rgba(16, 26, 58, 0.95), rgba(11, 23, 51, 0.96));
+  color: rgba(246, 241, 232, 0.95);
+  font-family: var(--font-display);
+  font-size: 24px;
+  line-height: 1.25;
+}
+
 .totem-shell .totem-nav-item {
   height: 48px;
   display: flex;
@@ -393,6 +416,62 @@ TOTEM_CSS = """
   font-family: var(--font-ui);
 }
 
+.totem-shell .totem-chip {
+  min-height: 36px;
+  border-radius: 10px;
+  border: 1px solid rgba(174, 183, 204, 0.3);
+  background: rgba(7, 18, 45, 0.5);
+  color: rgba(246, 241, 232, 0.9);
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  font-family: var(--font-ui);
+  margin-right: var(--space-2);
+}
+
+.totem-shell .totem-chip.active {
+  border-color: rgba(242, 193, 78, 0.5);
+  background: linear-gradient(90deg, rgba(242, 193, 78, 0.18), rgba(138, 77, 255, 0.18));
+}
+
+.totem-shell .totem-search {
+  min-height: 38px;
+  border-radius: 10px;
+  border: 1px solid rgba(174, 183, 204, 0.35);
+  background: rgba(7, 18, 45, 0.42);
+  color: rgba(174, 183, 204, 0.95);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  font-family: var(--font-ui);
+}
+
+.totem-shell .totem-workspace {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: rgba(246, 241, 232, 0.96);
+  font-family: var(--font-ui);
+}
+
+.totem-shell .totem-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid rgba(242, 193, 78, 0.45);
+  display: grid;
+  place-items: center;
+  background: rgba(242, 193, 78, 0.16);
+}
+
+.totem-shell .totem-badge {
+  border: 1px solid rgba(242, 193, 78, 0.45);
+  border-radius: 8px;
+  padding: 3px 7px;
+  color: var(--totem-gold);
+  font-size: 12px;
+}
+
 .totem-shell .totem-placeholder {
   border: 1px dashed rgba(174, 183, 204, 0.45);
   border-radius: var(--radius-card);
@@ -410,6 +489,10 @@ TOTEM_CSS = """
 }
 
 @media (max-width: 1200px) {
+  .totem-topbar {
+    grid-template-columns: auto minmax(200px, 1fr);
+    row-gap: var(--space-2);
+  }
   .totem-shell .totem-row {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -426,6 +509,9 @@ TOTEM_CSS = """
     width: 100%;
     flex-basis: auto;
   }
+  .totem-topbar {
+    grid-template-columns: 1fr;
+  }
   .totem-shell .totem-row {
     grid-template-columns: 1fr;
   }
@@ -661,34 +747,75 @@ def _clean_path(uploaded_file) -> Path:
     return workbook_path(uploaded_file)
 
 
+def render_sidebar(active: str = "Home") -> str:
+    nav_labels = [
+        "Home",
+        "Projects",
+        "Workbook Upload",
+        "TOTEM Analytics",
+        "Revision Queue",
+        "Risk Clusters",
+        "Codex Extractor",
+        "Export",
+    ]
+    active_label = str(active or "").strip()
+    items = []
+    for label in nav_labels:
+        classes = ["totem-nav-item"]
+        attrs = []
+        if label == active_label:
+            classes.append("active")
+        if label == "Codex Extractor":
+            classes.append("js-open-codex")
+            attrs.append('role="button"')
+            attrs.append('tabindex="0"')
+            attrs.append('aria-label="Open Codex Extractor tab"')
+        class_attr = " ".join(classes)
+        extra_attrs = f" {' '.join(attrs)}" if attrs else ""
+        items.append(f'<div class="{class_attr}"{extra_attrs}>{esc(label)}</div>')
+
+    return f"""
+    <aside class="totem-sidebar">
+      <div class="totem-brand">TOTEM Studio<small>Story intelligence OS</small></div>
+      {''.join(items)}
+      <div class="totem-quote-card">Story intelligence turns inspiration into impact.</div>
+    </aside>
+    """
+
+
+def render_topbar(state: dict) -> str:
+    project_name = esc(state.get("project_name", "Editorial Workspace"))
+    return f"""
+    <section class="totem-topbar">
+      <div>
+        <span class="totem-chip active">Dashboard</span>
+        <span class="totem-chip">Codex Extractor</span>
+        <span class="totem-chip">Smoke Signal</span>
+      </div>
+      <div class="totem-search">Search projects, workbooks, blocks...</div>
+      <div class="totem-workspace">
+        <span>{project_name}</span>
+        <span aria-hidden="true">🔔</span>
+        <span class="totem-avatar">T</span>
+        <span class="totem-badge">TOTEM Studio</span>
+      </div>
+    </section>
+    """
+
+
 def render_dashboard(state: dict) -> str:
     """
-    Stage 3 static shell wrapper.
-    Callbacks are intentionally not rewired in this stage.
+    Stage 3/4 static shell wrapper.
+    Callback wiring remains untouched until later stages.
     """
     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>
+      {render_sidebar(active='Home')}
       <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>
+          {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);">