From 9dbf0792adaa8023ce3595fba83ab7b85428f28a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Jul 2026 05:48:41 +0000
Subject: [PATCH 1/3] tokens(publisher): formalize font, type-scale and spacing
 tokens for the UI refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The publisher redesign wireframes specify a flat, dark, sans-chrome /
mono-data console. Colors, radii, and the accent-opacity ramp already
exist as tokens and match the wireframe; the font-family, type-scale,
and spacing scales were only ever inline fallbacks. Formalize them in
the hand-maintained composite block of the token generator so the
restyle PRs can reference var(--font-mono), var(--text-md),
var(--space-lg), etc. consistently:

- --font-sans / --font-mono (system stacks, zero web-font fetch)
- --text-2xs … --text-3xl (dense, rem-based, base 0.75rem)
- --space-2xs … --space-2xl + --space-edge (dense, rem-based)

Additive: the only prior consumer, var(--font-mono, monospace), now
resolves to the real stack instead of the bare fallback. tokens.css is
regenerated on build (npm run tokens).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0127MmwB678BaV8Pfg1KG18E
Signed-off-by: Claude <noreply@anthropic.com>
---
 tokens/multi-mode-css.mjs | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/tokens/multi-mode-css.mjs b/tokens/multi-mode-css.mjs
index 1b29d359c..bb4b1d3b9 100644
--- a/tokens/multi-mode-css.mjs
+++ b/tokens/multi-mode-css.mjs
@@ -198,11 +198,30 @@ export default {
     lines.push('  /* ── Composite (hand-maintained) ───────────────────────────────── */');
     lines.push('  --glass-border: 1px solid var(--color-surface-border-subtle);');
     lines.push('');
-    lines.push('  /* ── Spacing (reserved for future use) ──────────────────────────── */');
-    lines.push('  /* --space-xs: 4px; */');
-    lines.push('  /* --space-sm: 8px; */');
-    lines.push('  /* --space-md: 12px; */');
-    lines.push('  /* --space-lg: 16px; */');
+    lines.push('  /* ── Typography (publisher redesign — sans chrome, mono data) ───── */');
+    lines.push("  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;");
+    lines.push("  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;");
+    lines.push('');
+    lines.push('  /* Type scale — dense, rem-based (base 0.75rem). */');
+    lines.push('  --text-2xs:  0.6rem;');
+    lines.push('  --text-xs:   0.65rem;');
+    lines.push('  --text-sm:   0.7rem;');
+    lines.push('  --text-base: 0.75rem;');
+    lines.push('  --text-md:   0.8rem;');
+    lines.push('  --text-lg:   0.875rem;');
+    lines.push('  --text-xl:   1rem;');
+    lines.push('  --text-2xl:  1.4rem;');
+    lines.push('  --text-3xl:  2rem;');
+    lines.push('');
+    lines.push('  /* ── Spacing — dense, rem-based ─────────────────────────────────── */');
+    lines.push('  --space-2xs:  0.2rem;');
+    lines.push('  --space-xs:   0.25rem;');
+    lines.push('  --space-sm:   0.4rem;');
+    lines.push('  --space-md:   0.5rem;');
+    lines.push('  --space-lg:   0.75rem;');
+    lines.push('  --space-xl:   1rem;');
+    lines.push('  --space-2xl:  1.5rem;');
+    lines.push('  --space-edge: 0.75rem;');
     lines.push('');
     lines.push('  /* ── Safe Area (runtime-only — env() values) ────────────────────── */');
     lines.push('  --safe-top: env(safe-area-inset-top, 0px);');

From 79472ec6a2709fedd1af0b84b403e82a73984f0c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Jul 2026 06:13:22 +0000
Subject: [PATCH 2/3] feat(publisher): grouped left-sidebar app-shell (UI
 refresh)

Replace the horizontal glass topbar with the wireframe's left-rail
sidebar: a 212px flat rail down the inline-start edge with the brand +
back-to-Terraviz, section links clustered into labelled groups
(Catalog / Current events / Insights / Settings) with mono uppercase
eyebrows, and an account footer (Profile + Sign out) pinned to the
block-end. Active links carry an accent inline-start border + tint.

- components/sidebar.ts replaces components/topbar.ts (same router
  wiring, SPA-intercept, aria-current, route-change listener; grouped
  nav + admin-gated visibility + account footer). teardownSidebar for
  tests. 18 unit tests port + extend the topbar suite.
- index.ts boots renderSidebar; .publisher-portal becomes a two-column
  flex shell (rail + scrollable content column).
- publisher.css: flat rail surfaces (--color-surface-alt + subtle
  border, no glass), grouped nav, sans chrome / mono group eyebrows,
  and a mobile fallback that stacks the rail into a horizontal
  top strip.
- i18n: publisher.nav.group.{catalog,events,insights,settings}.
- scenes/smoke: shell selector .publisher-topbar -> .publisher-sidebar.
- CLAUDE.md module-map row updated.

Colors/type/spacing all reference the design tokens formalized in the
prior commit. tsc + 477 publisher tests + doc-coverage + locales green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0127MmwB678BaV8Pfg1KG18E
Signed-off-by: Claude <noreply@anthropic.com>
---
 CLAUDE.md                                     |   2 +-
 locales/en.json                               |   4 +
 scripts/screenshots/scenes.ts                 |   2 +-
 scripts/screenshots/smoke.ts                  |  14 +-
 src/styles/publisher.css                      | 183 +++++++++---
 .../{topbar.test.ts => sidebar.test.ts}       | 129 +++++----
 src/ui/publisher/components/sidebar.ts        | 262 ++++++++++++++++++
 src/ui/publisher/components/topbar.ts         | 194 -------------
 src/ui/publisher/index.ts                     |  24 +-
 9 files changed, 501 insertions(+), 313 deletions(-)
 rename src/ui/publisher/components/{topbar.test.ts => sidebar.test.ts} (64%)
 create mode 100644 src/ui/publisher/components/sidebar.ts
 delete mode 100644 src/ui/publisher/components/topbar.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 9ef31b61f..087073a54 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -218,7 +218,7 @@ npm run screenshots:smoke   # gating interaction tests (search, Orbit, nav)
 | `src/ui/publisher/components/asset-uploader.ts` | Asset uploader component (Phase 3pd image-sequence pipeline) |
 | `src/ui/publisher/components/chip-input.ts` | Chip-input control — entries become removable chips as the user types |
 | `src/ui/publisher/components/markdown-toolbar.ts` | GitHub-issue-style markdown toolbar over a `<textarea>` |
-| `src/ui/publisher/components/topbar.ts` | Glass-surface top bar with section tabs |
+| `src/ui/publisher/components/sidebar.ts` | Left-rail sidebar nav — grouped section links (Catalog / Current events / Insights / Settings) + account footer; the publisher app-shell nav (replaced the horizontal topbar in the UI refresh) |
 | `src/ui/publisher/components/error-card.ts` | Shared error-card renderer used by every portal page |
 | `src/ui/publisher/components/events/match-badge.ts` | Events-tab **Match Badge** primitive — Topic/Time/Geo facet tags + composite %, threshold-toned (`docs/events-tab-handoff/EVENTS_TAB_IMPLEMENTATION_BRIEF.md` §5) |
 | `src/ui/publisher/components/events/events-model.ts` | Events-tab wire types + pure helpers (`AUTO_PAIR_THRESHOLD`, `autoPairTargets`, `compositePercent`, `locatorPoint`, `primaryCategory`) shared by the queue/detail components |
diff --git a/locales/en.json b/locales/en.json
index 0fb32e7d7..013de0a98 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1182,6 +1182,10 @@
   "publisher.nav.featuredHero": "Right now",
   "publisher.nav.feedback": "Feedback",
   "publisher.nav.feeds": "Feeds",
+  "publisher.nav.group.catalog": "Catalog",
+  "publisher.nav.group.events": "Current events",
+  "publisher.nav.group.insights": "Insights",
+  "publisher.nav.group.settings": "Settings",
   "publisher.nav.import": "Import",
   "publisher.nav.nodeProfile": "Node profile",
   "publisher.nav.profile": "Profile",
diff --git a/scripts/screenshots/scenes.ts b/scripts/screenshots/scenes.ts
index f5551ec89..99a29384b 100644
--- a/scripts/screenshots/scenes.ts
+++ b/scripts/screenshots/scenes.ts
@@ -122,7 +122,7 @@ async function openCatalog(page: Page): Promise<void> {
  */
 async function openPublish(page: Page, path: string): Promise<void> {
   await gotoApp(page, path)
-  await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+  await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
 }
 
 /**
diff --git a/scripts/screenshots/smoke.ts b/scripts/screenshots/smoke.ts
index b8e2f4a81..e075a0a4c 100644
--- a/scripts/screenshots/smoke.ts
+++ b/scripts/screenshots/smoke.ts
@@ -197,7 +197,7 @@ const checks: Check[] = [
     fixtures: publisherFixtures({ admin: true }),
     async run(page) {
       await gotoApp(page, '/publish/datasets')
-      await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+      await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
       await page
         .locator('#publisher-root', { hasText: 'Global Sea Surface Temperature' })
         .waitFor({ timeout: 15_000 })
@@ -208,7 +208,7 @@ const checks: Check[] = [
     fixtures: publisherFixtures({ admin: true }),
     async run(page) {
       await gotoApp(page, '/publish/events')
-      await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+      await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
       // Direction A master–detail: the queue (left) lists events; the
       // first auto-selects into the detail (right).
       await page.locator('.publisher-events-queue-list').first().waitFor({ timeout: 15_000 })
@@ -250,7 +250,7 @@ const checks: Check[] = [
     fixtures: publisherFixtures({ admin: true }),
     async run(page) {
       await gotoApp(page, '/publish/node-profile')
-      await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+      await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
       const org = page.locator('#nodeprofile-org')
       await org.waitFor({ timeout: 15_000 })
       assert(
@@ -270,7 +270,7 @@ const checks: Check[] = [
       // Authoring: the editor's three sections mount, with the picker
       // enabled once the catalog fixture loads.
       await gotoApp(page, '/publish/blog/new')
-      await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+      await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
       await page.locator('#blog-title').waitFor({ timeout: 15_000 })
       await page.locator('.publisher-blog-generate-btn').waitFor()
       await page.locator('#publisher-root input[type="search"]:not([disabled])').first().waitFor({ timeout: 10_000 })
@@ -292,7 +292,7 @@ const checks: Check[] = [
     fixtures: publisherFixtures({ admin: true }),
     async run(page) {
       await gotoApp(page, '/publish/feeds')
-      await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+      await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
       // The registered connectors render with state dots + bookkeeping.
       await page
         .locator('.publisher-feeds-row', { hasText: 'NASA EONET' })
@@ -331,7 +331,7 @@ const checks: Check[] = [
     fixtures: publisherFixtures(),
     async run(page) {
       await gotoApp(page, '/publish/workflows/new')
-      await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+      await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
 
       // Pick the curated drought template via the template <select>,
       // identified by its option value (the visible label is i18n).
@@ -369,7 +369,7 @@ const checks: Check[] = [
     fixtures: publisherFixtures(),
     async run(page) {
       await gotoApp(page, '/publish/datasets/01HEXAMPLEDATASET00000001/edit')
-      await page.locator('#publisher-root .publisher-topbar').waitFor({ state: 'visible' })
+      await page.locator('#publisher-root .publisher-sidebar').waitFor({ state: 'visible' })
       // The thumbnail uploader's globe-thumbnail generator block.
       await page
         .locator('.publisher-asset-uploader-generate')
diff --git a/src/styles/publisher.css b/src/styles/publisher.css
index 0bcd483f8..962a68dba 100644
--- a/src/styles/publisher.css
+++ b/src/styles/publisher.css
@@ -11,9 +11,13 @@
 
 .publisher-portal {
   min-height: 100vh;
+  /* Two-column app shell: the fixed-width sidebar rail down the
+     inline-start edge + the scrollable content column. */
+  display: flex;
+  align-items: stretch;
   background: var(--color-bg, #0a0d14);
   color: var(--color-text, #e6e8ec);
-  font-family: var(--font-family-sans, system-ui, sans-serif);
+  font-family: var(--font-sans, system-ui, sans-serif);
   box-sizing: border-box;
   /* Declare the whole portal as a dark color scheme so the browser
      renders every native control — <select> dropdown lists, the
@@ -25,96 +29,199 @@
 }
 
 .publisher-content {
+  flex: 1 1 auto;
+  min-width: 0;
   padding: calc(2rem * var(--ui-scale));
 }
 
 .publisher-shell {
-  max-width: calc(960px * var(--ui-scale));
+  max-width: calc(1080px * var(--ui-scale));
   margin: 0 auto;
 }
 
-/* --- Topbar (glass-surface, sticky) --- */
+/* --- Sidebar rail (flat, sticky, grouped nav) --- */
 
-.publisher-topbar {
+.publisher-sidebar {
   position: sticky;
   top: 0;
-  z-index: 100;
+  align-self: flex-start;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: calc(212px * var(--ui-scale));
+  height: 100vh;
   display: flex;
-  align-items: center;
-  gap: calc(2rem * var(--ui-scale));
-  padding: calc(0.75rem * var(--ui-scale)) calc(2rem * var(--ui-scale));
-  border-radius: 0;
-  border-block-start: 0;
-  border-inline-start: 0;
-  border-inline-end: 0;
+  flex-direction: column;
+  gap: var(--space-lg, 0.75rem);
+  padding: var(--space-lg, 0.75rem) var(--space-md, 0.5rem);
+  background: var(--color-surface-alt, rgba(255, 255, 255, 0.04));
+  border-inline-end: 1px solid var(--color-surface-border-subtle, rgba(255, 255, 255, 0.08));
+  overflow-y: auto;
 }
 
-.publisher-topbar-title-block {
+.publisher-sidebar-brand {
   display: flex;
   align-items: center;
-  gap: calc(0.75rem * var(--ui-scale));
+  gap: var(--space-sm, 0.4rem);
+  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.4rem);
 }
 
-.publisher-topbar-back {
+.publisher-sidebar-back {
   color: var(--color-text-muted, #999999);
   text-decoration: none;
-  font-size: calc(1.1rem * var(--ui-scale));
-  padding: calc(0.25rem * var(--ui-scale)) calc(0.5rem * var(--ui-scale));
-  border-radius: calc(6px * var(--ui-scale));
+  font-size: var(--text-xl, 1rem);
+  line-height: 1;
+  padding: var(--space-2xs, 0.2rem) var(--space-sm, 0.4rem);
+  border-radius: var(--radius-md, 6px);
 }
 
-.publisher-topbar-back:hover {
-  background: var(--white-o08, rgba(255, 255, 255, 0.08));
+.publisher-sidebar-back:hover {
+  background: var(--color-surface-hover, rgba(255, 255, 255, 0.12));
   color: var(--color-text, #e8eaf0);
 }
 
-.publisher-topbar-back:focus-visible {
-  outline: 2px solid var(--white-o20, rgba(255, 255, 255, 0.2));
+.publisher-sidebar-back:focus-visible {
+  outline: 2px solid var(--color-accent, #4da6ff);
   outline-offset: 2px;
 }
 
-.publisher-topbar-title {
-  font-size: calc(0.95rem * var(--ui-scale));
+.publisher-sidebar-title {
+  font-size: var(--text-md, 0.8rem);
   font-weight: 600;
+  letter-spacing: 0.02em;
   color: var(--color-text, #e8eaf0);
 }
 
 .publisher-nav {
   display: flex;
-  gap: calc(0.25rem * var(--ui-scale));
+  flex-direction: column;
+  gap: var(--space-lg, 0.75rem);
+  flex: 1 1 auto;
+}
+
+.publisher-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.publisher-nav-group-label {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-2xs, 0.6rem);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-faint, #666666);
+  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.4rem);
 }
 
 .publisher-nav-link {
-  color: var(--color-text-muted, #999999);
+  color: var(--color-text-secondary, #bbbbbb);
   text-decoration: none;
-  font-size: calc(0.875rem * var(--ui-scale));
-  padding: calc(0.5rem * var(--ui-scale)) calc(0.875rem * var(--ui-scale));
-  border-radius: calc(6px * var(--ui-scale));
-  border: 1px solid transparent;
+  font-size: var(--text-md, 0.8rem);
+  padding: var(--space-sm, 0.4rem) var(--space-sm, 0.4rem);
+  border-radius: var(--radius-md, 6px);
+  border-inline-start: 2px solid transparent;
   transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
 }
 
 .publisher-nav-link:hover {
   color: var(--color-text, #e8eaf0);
-  background: var(--white-o05, rgba(255, 255, 255, 0.05));
+  background: var(--color-surface, rgba(255, 255, 255, 0.06));
 }
 
 .publisher-nav-link:focus-visible {
-  outline: 2px solid var(--white-o20, rgba(255, 255, 255, 0.2));
+  outline: 2px solid var(--color-accent, #4da6ff);
   outline-offset: 2px;
 }
 
 .publisher-nav-link-active {
   color: var(--color-text, #e8eaf0);
-  background: var(--white-o10, rgba(255, 255, 255, 0.1));
-  border-color: var(--white-o12, rgba(255, 255, 255, 0.12));
+  background: var(--accent-o08, rgba(77, 166, 255, 0.08));
+  border-inline-start-color: var(--color-accent, #4da6ff);
+}
+
+/* Account footer — the account link + sign-out, pinned to the rail's
+ * block-end edge, divided from the grouped nav. */
+.publisher-sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-block-start: var(--space-md, 0.5rem);
+  border-block-start: 1px solid var(--color-surface-border-subtle, rgba(255, 255, 255, 0.08));
 }
 
-/* Sign out lives at the far right, visually separated from the
- * section tabs. The `margin-inline-start: auto` shoves it across
- * the flex row, leaving the section nav on the left. */
 .publisher-nav-link-signout {
-  margin-inline-start: auto;
+  color: var(--color-text-muted, #999999);
+}
+
+/* Mobile: the rail can't hold a 212px column beside the content on a
+ * phone, so stack — the portal becomes a column and the sidebar a
+ * full-width top strip whose groups lay out in a horizontally
+ * scrolling row. */
+@media (max-width: 768px) {
+  .publisher-portal {
+    flex-direction: column;
+  }
+
+  .publisher-sidebar {
+    position: static;
+    width: 100%;
+    height: auto;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-md, 0.5rem);
+    overflow-x: auto;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--color-surface-border-subtle, rgba(255, 255, 255, 0.08));
+  }
+
+  .publisher-sidebar-brand {
+    flex-shrink: 0;
+  }
+
+  .publisher-nav {
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--space-md, 0.5rem);
+  }
+
+  /* Group labels are noise in the horizontal strip — the links carry
+   * the meaning; hide the eyebrows but keep them for screen readers. */
+  .publisher-nav-group {
+    flex-direction: row;
+    align-items: center;
+    gap: 1px;
+  }
+
+  .publisher-nav-group-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  .publisher-nav-link {
+    white-space: nowrap;
+    border-inline-start: 0;
+    border-block-end: 2px solid transparent;
+  }
+
+  .publisher-nav-link-active {
+    border-inline-start: 0;
+    border-block-end-color: var(--color-accent, #4da6ff);
+  }
+
+  .publisher-sidebar-footer {
+    flex-direction: row;
+    flex-shrink: 0;
+    padding-block-start: 0;
+    padding-inline-start: var(--space-md, 0.5rem);
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--color-surface-border-subtle, rgba(255, 255, 255, 0.08));
+  }
 }
 
 /* --- Lifecycle tabs (Drafts / Published / Retracted) --- */
diff --git a/src/ui/publisher/components/topbar.test.ts b/src/ui/publisher/components/sidebar.test.ts
similarity index 64%
rename from src/ui/publisher/components/topbar.test.ts
rename to src/ui/publisher/components/sidebar.test.ts
index 518ec01fe..d785307cc 100644
--- a/src/ui/publisher/components/topbar.test.ts
+++ b/src/ui/publisher/components/sidebar.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { renderTopbar, teardownTopbar } from './topbar'
+import { renderSidebar, teardownSidebar } from './sidebar'
 import { PublisherRouter, ROUTE_CHANGE_EVENT } from '../router'
 
 function clickWith(el: HTMLElement, init: Partial<MouseEventInit> = {}): MouseEvent {
@@ -13,7 +13,15 @@ function clickWith(el: HTMLElement, init: Partial<MouseEventInit> = {}): MouseEv
   return e
 }
 
-describe('renderTopbar', () => {
+/** Section links live inside the grouped `<nav>`, excluding the
+ *  account footer (Profile + Sign out). */
+function sectionLabels(host: HTMLElement): (string | null)[] {
+  return Array.from(
+    host.querySelectorAll<HTMLAnchorElement>('.publisher-nav a.publisher-nav-link'),
+  ).map(a => a.textContent)
+}
+
+describe('renderSidebar', () => {
   const originalPath = window.location.pathname
   let host: HTMLDivElement
   let router: PublisherRouter
@@ -25,57 +33,70 @@ describe('renderTopbar', () => {
   })
 
   afterEach(() => {
-    teardownTopbar(host)
+    teardownSidebar(host)
     router.stop()
     host.remove()
     window.history.replaceState(null, '', originalPath)
   })
 
-  it('renders all section tabs in order', () => {
-    renderTopbar(host, router)
-    const links = host.querySelectorAll<HTMLAnchorElement>(
-      'a.publisher-nav-link:not(.publisher-nav-link-signout)',
-    )
-    expect(Array.from(links).map(a => a.textContent)).toEqual([
-      'Profile',
+  it('renders the grouped section nav in order (non-admin)', () => {
+    renderSidebar(host, router)
+    expect(sectionLabels(host)).toEqual([
       'Datasets',
-      'Tours',
       'Workflows',
+      'Import',
       'Right now',
+      'Tours',
       'Analytics',
       'Feedback',
-      'Import',
     ])
   })
 
-  it('hides the admin-only Users tab by default', () => {
-    renderTopbar(host, router)
+  it('renders group headings', () => {
+    renderSidebar(host, router)
     const labels = Array.from(
-      host.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
-    ).map(a => a.textContent)
-    expect(labels).not.toContain('Users')
+      host.querySelectorAll('.publisher-nav-group-label'),
+    ).map(el => el.textContent)
+    // The Settings group is admin-only (Node profile + Users), so it
+    // is omitted entirely for a non-admin caller.
+    expect(labels).toEqual(['Catalog', 'Current events', 'Insights'])
   })
 
-  it('hides the Users tab when isAdmin is false', () => {
-    renderTopbar(host, router, { isAdmin: false })
-    const labels = Array.from(
-      host.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
-    ).map(a => a.textContent)
+  it('hides the admin-only links by default', () => {
+    renderSidebar(host, router)
+    const labels = sectionLabels(host)
     expect(labels).not.toContain('Users')
+    expect(labels).not.toContain('Events')
+    expect(labels).not.toContain('Feeds')
   })
 
-  it('shows the Users tab when isAdmin is true', () => {
-    renderTopbar(host, router, { isAdmin: true })
+  it('shows the admin-only links (and the Settings group) when isAdmin is true', () => {
+    renderSidebar(host, router, { isAdmin: true })
+    const labels = sectionLabels(host)
+    expect(labels).toContain('Events')
+    expect(labels).toContain('Feeds')
+    expect(labels).toContain('Node profile')
     const usersLink = Array.from(
       host.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
     ).find(a => a.textContent === 'Users')
-    expect(usersLink).toBeTruthy()
     expect(usersLink?.getAttribute('href')).toBe('/publish/users')
+    expect(
+      Array.from(host.querySelectorAll('.publisher-nav-group-label')).map(el => el.textContent),
+    ).toContain('Settings')
+  })
+
+  it('renders the account link + sign-out in the footer', () => {
+    renderSidebar(host, router)
+    const footer = host.querySelector('.publisher-sidebar-footer')!
+    const links = Array.from(
+      footer.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
+    ).map(a => a.textContent)
+    expect(links).toEqual(['Profile', 'Sign out'])
   })
 
   it('marks the link that matches the current path as active', () => {
     window.history.replaceState(null, '', '/publish/datasets')
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     const active = host.querySelector<HTMLAnchorElement>('.publisher-nav-link-active')
     expect(active?.textContent).toBe('Datasets')
     expect(active?.getAttribute('aria-current')).toBe('page')
@@ -83,34 +104,31 @@ describe('renderTopbar', () => {
 
   it('does not stamp aria-current on inactive links', () => {
     window.history.replaceState(null, '', '/publish/datasets')
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     const inactive = Array.from(
       host.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
     ).filter(a => !a.classList.contains('publisher-nav-link-active'))
     expect(inactive.length).toBeGreaterThan(0)
     for (const link of inactive) {
-      // Absence of the attribute is the spec-correct
-      // "not current" state. `aria-current="false"` confuses
-      // some assistive tech.
       expect(link.hasAttribute('aria-current')).toBe(false)
     }
   })
 
-  it('keeps the parent tab active on sub-paths (e.g., /publish/datasets/abc)', () => {
+  it('keeps the parent link active on sub-paths (e.g., /publish/datasets/abc)', () => {
     window.history.replaceState(null, '', '/publish/datasets/some-id')
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     const active = host.querySelector<HTMLAnchorElement>('.publisher-nav-link-active')
     expect(active?.textContent).toBe('Datasets')
   })
 
   it('does not mark any link active on an unknown path', () => {
     window.history.replaceState(null, '', '/publish/unknown')
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     expect(host.querySelector('.publisher-nav-link-active')).toBeNull()
   })
 
   it('intercepts plain left-clicks and calls router.navigate()', () => {
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     const datasets = Array.from(
       host.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
     ).find(a => a.textContent === 'Datasets')!
@@ -122,7 +140,7 @@ describe('renderTopbar', () => {
   })
 
   it('lets cmd/ctrl-click fall through to the browser default', () => {
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     const datasets = Array.from(
       host.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
     ).find(a => a.textContent === 'Datasets')!
@@ -137,7 +155,7 @@ describe('renderTopbar', () => {
   })
 
   it('lets middle-click fall through', () => {
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     const datasets = Array.from(
       host.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link'),
     ).find(a => a.textContent === 'Datasets')!
@@ -150,7 +168,7 @@ describe('renderTopbar', () => {
 
   it('updates active state when the route-change event fires', () => {
     window.history.replaceState(null, '', '/publish/me')
-    renderTopbar(host, router)
+    renderSidebar(host, router)
     expect(
       host.querySelector<HTMLAnchorElement>('.publisher-nav-link-active')?.textContent,
     ).toBe('Profile')
@@ -164,38 +182,31 @@ describe('renderTopbar', () => {
   })
 
   it('removes the prior listener and DOM on re-render', () => {
-    renderTopbar(host, router)
-    const first = host.querySelector('.publisher-topbar')!
-    renderTopbar(host, router)
-    const second = host.querySelector('.publisher-topbar')!
-    expect(host.querySelectorAll('.publisher-topbar').length).toBe(1)
+    renderSidebar(host, router)
+    const first = host.querySelector('.publisher-sidebar')!
+    renderSidebar(host, router)
+    const second = host.querySelector('.publisher-sidebar')!
+    expect(host.querySelectorAll('.publisher-sidebar').length).toBe(1)
     expect(first).not.toBe(second)
   })
 
   it('mounts the back-to-Terraviz link with the correct aria-label and href', () => {
-    renderTopbar(host, router)
-    const back = host.querySelector<HTMLAnchorElement>('.publisher-topbar-back')
+    renderSidebar(host, router)
+    const back = host.querySelector<HTMLAnchorElement>('.publisher-sidebar-back')
     expect(back?.getAttribute('aria-label')).toBe('Back to Terraviz')
     expect(back?.getAttribute('href')).toBe('/')
   })
 
   it('mounts a Sign out link pointing at /api/v1/logout', () => {
-    renderTopbar(host, router)
-    const signOut = host.querySelector<HTMLAnchorElement>(
-      '.publisher-nav-link-signout',
-    )
+    renderSidebar(host, router)
+    const signOut = host.querySelector<HTMLAnchorElement>('.publisher-nav-link-signout')
     expect(signOut?.textContent).toBe('Sign out')
     expect(signOut?.getAttribute('href')).toBe('/api/v1/logout')
   })
 
-  it('Sign out is NOT a section tab (no SPA navigation intercept)', () => {
-    renderTopbar(host, router)
-    const signOut = host.querySelector<HTMLAnchorElement>(
-      '.publisher-nav-link-signout',
-    )!
-    // Distinct from the section tabs: no aria-current toggling,
-    // and a plain left-click should NOT be intercepted (the server
-    // endpoint at /api/v1/logout handles the redirect to Access).
+  it('Sign out is NOT a section link (no SPA navigation intercept)', () => {
+    renderSidebar(host, router)
+    const signOut = host.querySelector<HTMLAnchorElement>('.publisher-nav-link-signout')!
     const navSpy = vi.spyOn(router, 'navigate').mockResolvedValue()
     const event = clickWith(signOut)
     expect(event.defaultPrevented).toBe(false)
@@ -204,10 +215,8 @@ describe('renderTopbar', () => {
 
   it('Sign out is not marked active on any route', () => {
     window.history.replaceState(null, '', '/publish/me')
-    renderTopbar(host, router)
-    const signOut = host.querySelector<HTMLAnchorElement>(
-      '.publisher-nav-link-signout',
-    )!
+    renderSidebar(host, router)
+    const signOut = host.querySelector<HTMLAnchorElement>('.publisher-nav-link-signout')!
     expect(signOut.classList.contains('publisher-nav-link-active')).toBe(false)
     expect(signOut.getAttribute('aria-current')).not.toBe('page')
   })
diff --git a/src/ui/publisher/components/sidebar.ts b/src/ui/publisher/components/sidebar.ts
new file mode 100644
index 000000000..5e620d45c
--- /dev/null
+++ b/src/ui/publisher/components/sidebar.ts
@@ -0,0 +1,262 @@
+/**
+ * Left-rail sidebar navigation (publisher UI refresh).
+ *
+ * Lives down the inline-start edge of every portal page. Renders the
+ * portal title + a Back-to-Terraviz link, then the section nav grouped
+ * into labelled clusters (Catalog / Current events / Insights /
+ * Settings), and finally an account footer (Account + Sign out).
+ * Replaces the earlier horizontal `topbar.ts`.
+ *
+ * Active-state tracking is decoupled from the router via the
+ * `publisher:routechange` CustomEvent so the sidebar doesn't need to
+ * hold a router reference past initial setup.
+ *
+ * Click handling: nav links keep real `href`s so middle-click /
+ * cmd-click / right-click → Open in new tab continue to work; the
+ * click handler short-circuits same-window navigations to
+ * `router.navigate()` for SPA-style transitions.
+ */
+
+import { t } from '../../../i18n'
+import {
+  ROUTE_CHANGE_EVENT,
+  type PublisherRouter,
+  type RouteChangeDetail,
+} from '../router'
+
+type NavLabelKey =
+  | 'publisher.nav.profile'
+  | 'publisher.nav.datasets'
+  | 'publisher.nav.tours'
+  | 'publisher.nav.workflows'
+  | 'publisher.nav.featuredHero'
+  | 'publisher.nav.nodeProfile'
+  | 'publisher.nav.blog'
+  | 'publisher.nav.events'
+  | 'publisher.nav.feeds'
+  | 'publisher.nav.analytics'
+  | 'publisher.nav.feedback'
+  | 'publisher.nav.import'
+  | 'publisher.nav.users'
+
+type GroupLabelKey =
+  | 'publisher.nav.group.catalog'
+  | 'publisher.nav.group.events'
+  | 'publisher.nav.group.insights'
+  | 'publisher.nav.group.settings'
+
+export interface NavLink {
+  path: string
+  labelKey: NavLabelKey
+  /** When true the link is only shown to admins (role === 'admin'). */
+  adminOnly?: boolean
+}
+
+interface NavGroup {
+  labelKey: GroupLabelKey
+  links: ReadonlyArray<NavLink>
+}
+
+/**
+ * The section nav, grouped to mirror the wireframe's clustered rail
+ * (and the design board's frame organisation). Each page + API gates
+ * independently; `adminOnly` only controls visibility.
+ */
+const NAV_GROUPS: ReadonlyArray<NavGroup> = [
+  {
+    labelKey: 'publisher.nav.group.catalog',
+    links: [
+      { path: '/publish/datasets', labelKey: 'publisher.nav.datasets' },
+      { path: '/publish/workflows', labelKey: 'publisher.nav.workflows' },
+      { path: '/publish/import', labelKey: 'publisher.nav.import' },
+    ],
+  },
+  {
+    labelKey: 'publisher.nav.group.events',
+    links: [
+      { path: '/publish/featured-hero', labelKey: 'publisher.nav.featuredHero' },
+      { path: '/publish/events', labelKey: 'publisher.nav.events', adminOnly: true },
+      { path: '/publish/feeds', labelKey: 'publisher.nav.feeds', adminOnly: true },
+      { path: '/publish/tours', labelKey: 'publisher.nav.tours' },
+      { path: '/publish/blog', labelKey: 'publisher.nav.blog', adminOnly: true },
+    ],
+  },
+  {
+    labelKey: 'publisher.nav.group.insights',
+    links: [
+      { path: '/publish/analytics', labelKey: 'publisher.nav.analytics' },
+      { path: '/publish/feedback', labelKey: 'publisher.nav.feedback' },
+    ],
+  },
+  {
+    labelKey: 'publisher.nav.group.settings',
+    links: [
+      { path: '/publish/node-profile', labelKey: 'publisher.nav.nodeProfile', adminOnly: true },
+      { path: '/publish/users', labelKey: 'publisher.nav.users', adminOnly: true },
+    ],
+  },
+]
+
+/** The account footer link (its own cluster at the rail's end). */
+const ACCOUNT_LINK: NavLink = { path: '/publish/me', labelKey: 'publisher.nav.profile' }
+
+export interface SidebarOptions {
+  /** Show admin-only nav links (e.g. the Users tab). The page and
+   *  API still gate independently — this only controls visibility. */
+  isAdmin?: boolean
+}
+
+/**
+ * A modified-key click (cmd/ctrl/shift/middle/right) should fall
+ * through to the browser's default behaviour so power users can
+ * open a portal section in a new tab. Only intercept plain left-
+ * clicks.
+ */
+function isPlainLeftClick(e: MouseEvent): boolean {
+  return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey
+}
+
+/**
+ * `pathname` is "active" for a nav link if the current page either
+ * equals that link's path exactly OR sits beneath it as a sub-path.
+ * So `/publish/datasets/abc` keeps the Datasets link highlighted on
+ * the detail view.
+ */
+function isActive(linkPath: string, currentPath: string): boolean {
+  if (currentPath === linkPath) return true
+  return currentPath.startsWith(linkPath + '/')
+}
+
+function applyActiveState(rail: HTMLElement, currentPath: string): void {
+  rail.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link').forEach(a => {
+    const active = isActive(a.pathname, currentPath)
+    a.classList.toggle('publisher-nav-link-active', active)
+    // `aria-current` is set on the matching link and *removed* from
+    // every other one. Some assistive technologies announce
+    // `aria-current="false"` as "not current" on every inactive link,
+    // which is noise — the spec treats absence as the implicit
+    // non-current state.
+    if (active) {
+      a.setAttribute('aria-current', 'page')
+    } else {
+      a.removeAttribute('aria-current')
+    }
+  })
+}
+
+/** Build one nav link anchor wired for SPA navigation. */
+function navLink(link: NavLink, router: PublisherRouter): HTMLAnchorElement {
+  const a = document.createElement('a')
+  a.href = link.path
+  a.className = 'publisher-nav-link'
+  a.textContent = t(link.labelKey)
+  a.addEventListener('click', e => {
+    if (!isPlainLeftClick(e)) return
+    e.preventDefault()
+    void router.navigate(link.path)
+  })
+  return a
+}
+
+/**
+ * Render the sidebar into `host`. Idempotent — calling twice removes
+ * the prior sidebar before mounting a fresh one (the route-change
+ * listener and DOM both get replaced cleanly).
+ */
+export function renderSidebar(
+  host: HTMLElement,
+  router: PublisherRouter,
+  options: SidebarOptions = {},
+): void {
+  // Remove any prior sidebar + listener.
+  const prior = host.querySelector('.publisher-sidebar')
+  if (prior) prior.remove()
+  const priorListener = (host as HostWithListener).__publisherSidebarListener
+  if (priorListener) {
+    window.removeEventListener(ROUTE_CHANGE_EVENT, priorListener as EventListener)
+  }
+
+  const rail = document.createElement('aside')
+  rail.className = 'publisher-sidebar'
+
+  // ── Brand ───────────────────────────────────────────────────────
+  const brand = document.createElement('div')
+  brand.className = 'publisher-sidebar-brand'
+
+  const back = document.createElement('a')
+  back.href = '/'
+  back.className = 'publisher-sidebar-back'
+  back.setAttribute('aria-label', t('publisher.nav.backToTerraviz'))
+  back.textContent = '←'
+  brand.appendChild(back)
+
+  const title = document.createElement('span')
+  title.className = 'publisher-sidebar-title'
+  title.textContent = t('publisher.portal.title')
+  brand.appendChild(title)
+
+  rail.appendChild(brand)
+
+  // ── Grouped nav ─────────────────────────────────────────────────
+  const nav = document.createElement('nav')
+  nav.className = 'publisher-nav'
+  nav.setAttribute('aria-label', t('publisher.nav.aria'))
+
+  for (const group of NAV_GROUPS) {
+    const links = group.links.filter(l => !l.adminOnly || options.isAdmin)
+    if (links.length === 0) continue
+
+    const section = document.createElement('div')
+    section.className = 'publisher-nav-group'
+
+    const heading = document.createElement('div')
+    heading.className = 'publisher-nav-group-label'
+    heading.textContent = t(group.labelKey)
+    section.appendChild(heading)
+
+    for (const link of links) section.appendChild(navLink(link, router))
+    nav.appendChild(section)
+  }
+  rail.appendChild(nav)
+
+  // ── Account footer ──────────────────────────────────────────────
+  const footer = document.createElement('div')
+  footer.className = 'publisher-sidebar-footer'
+  footer.appendChild(navLink(ACCOUNT_LINK, router))
+
+  // "Sign out" — plain anchor, no SPA intercept; the server endpoint
+  // at /api/v1/logout handles the cross-origin redirect to Cloudflare
+  // Access's team-level logout.
+  const signOut = document.createElement('a')
+  signOut.href = '/api/v1/logout'
+  signOut.className = 'publisher-nav-link publisher-nav-link-signout'
+  signOut.textContent = t('publisher.nav.signOut')
+  footer.appendChild(signOut)
+
+  rail.appendChild(footer)
+
+  host.insertBefore(rail, host.firstChild)
+
+  applyActiveState(rail, window.location.pathname)
+  const listener = (e: Event): void => {
+    const detail = (e as CustomEvent<RouteChangeDetail>).detail
+    applyActiveState(rail, detail?.path ?? window.location.pathname)
+  }
+  ;(host as HostWithListener).__publisherSidebarListener = listener
+  window.addEventListener(ROUTE_CHANGE_EVENT, listener as EventListener)
+}
+
+interface HostWithListener extends HTMLElement {
+  __publisherSidebarListener?: (e: Event) => void
+}
+
+/** Tear down the sidebar listener; only used by tests. */
+export function teardownSidebar(host: HTMLElement): void {
+  const listener = (host as HostWithListener).__publisherSidebarListener
+  if (listener) {
+    window.removeEventListener(ROUTE_CHANGE_EVENT, listener as EventListener)
+    delete (host as HostWithListener).__publisherSidebarListener
+  }
+  const rail = host.querySelector('.publisher-sidebar')
+  if (rail) rail.remove()
+}
diff --git a/src/ui/publisher/components/topbar.ts b/src/ui/publisher/components/topbar.ts
deleted file mode 100644
index 092dc4260..000000000
--- a/src/ui/publisher/components/topbar.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * Glass-surface top bar with section tabs.
- *
- * Lives at the top of every portal page. Renders the portal title,
- * a Back-to-Terraviz link, and a tab nav with one entry per
- * section. Active-state tracking is decoupled from the router via
- * the `publisher:routechange` CustomEvent so the topbar doesn't
- * need to hold a router reference past initial setup.
- *
- * Click handling: nav links keep real `href`s so middle-click /
- * cmd-click / right-click → Open in new tab continue to work; the
- * click handler short-circuits same-window navigations to
- * `router.navigate()` for SPA-style transitions.
- */
-
-import { t } from '../../../i18n'
-import {
-  ROUTE_CHANGE_EVENT,
-  type PublisherRouter,
-  type RouteChangeDetail,
-} from '../router'
-
-export interface NavLink {
-  path: string
-  labelKey:
-    | 'publisher.nav.profile'
-    | 'publisher.nav.datasets'
-    | 'publisher.nav.tours'
-    | 'publisher.nav.workflows'
-    | 'publisher.nav.featuredHero'
-    | 'publisher.nav.nodeProfile'
-    | 'publisher.nav.blog'
-    | 'publisher.nav.events'
-    | 'publisher.nav.feeds'
-    | 'publisher.nav.analytics'
-    | 'publisher.nav.feedback'
-    | 'publisher.nav.import'
-    | 'publisher.nav.users'
-  /** When true the link is only shown to admins (role === 'admin'). */
-  adminOnly?: boolean
-}
-
-const NAV_LINKS: ReadonlyArray<NavLink> = [
-  { path: '/publish/me', labelKey: 'publisher.nav.profile' },
-  { path: '/publish/datasets', labelKey: 'publisher.nav.datasets' },
-  { path: '/publish/tours', labelKey: 'publisher.nav.tours' },
-  { path: '/publish/workflows', labelKey: 'publisher.nav.workflows' },
-  { path: '/publish/featured-hero', labelKey: 'publisher.nav.featuredHero' },
-  { path: '/publish/events', labelKey: 'publisher.nav.events', adminOnly: true },
-  { path: '/publish/feeds', labelKey: 'publisher.nav.feeds', adminOnly: true },
-  { path: '/publish/node-profile', labelKey: 'publisher.nav.nodeProfile', adminOnly: true },
-  { path: '/publish/blog', labelKey: 'publisher.nav.blog', adminOnly: true },
-  { path: '/publish/analytics', labelKey: 'publisher.nav.analytics' },
-  { path: '/publish/feedback', labelKey: 'publisher.nav.feedback' },
-  { path: '/publish/import', labelKey: 'publisher.nav.import' },
-  { path: '/publish/users', labelKey: 'publisher.nav.users', adminOnly: true },
-]
-
-export interface TopbarOptions {
-  /** Show admin-only nav links (e.g. the Users tab). The page and
-   *  API still gate independently — this only controls visibility. */
-  isAdmin?: boolean
-}
-
-/**
- * A modified-key click (cmd/ctrl/shift/middle/right) should fall
- * through to the browser's default behaviour so power users can
- * open a portal section in a new tab. Only intercept plain left-
- * clicks.
- */
-function isPlainLeftClick(e: MouseEvent): boolean {
-  return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey
-}
-
-/**
- * `pathname` is "active" for a nav link if the current page
- * either equals that link's path exactly OR sits beneath it as a
- * sub-path. So `/publish/datasets/abc` keeps the Datasets tab
- * highlighted on the detail view.
- */
-function isActive(linkPath: string, currentPath: string): boolean {
-  if (currentPath === linkPath) return true
-  return currentPath.startsWith(linkPath + '/')
-}
-
-function applyActiveState(nav: HTMLElement, currentPath: string): void {
-  nav.querySelectorAll<HTMLAnchorElement>('a.publisher-nav-link').forEach(a => {
-    const active = isActive(a.pathname, currentPath)
-    a.classList.toggle('publisher-nav-link-active', active)
-    // `aria-current` is set on the matching link and *removed*
-    // from every other one. Some assistive technologies announce
-    // `aria-current="false"` as "not current" on every inactive
-    // link, which is noise — the spec treats absence as the
-    // implicit non-current state.
-    if (active) {
-      a.setAttribute('aria-current', 'page')
-    } else {
-      a.removeAttribute('aria-current')
-    }
-  })
-}
-
-/**
- * Render the topbar into `host`. Idempotent — calling twice
- * removes the prior topbar before mounting a fresh one (the
- * route-change listener and DOM both get replaced cleanly).
- */
-export function renderTopbar(
-  host: HTMLElement,
-  router: PublisherRouter,
-  options: TopbarOptions = {},
-): void {
-  // Remove any prior topbar + listener.
-  const prior = host.querySelector('.publisher-topbar')
-  if (prior) prior.remove()
-  const priorListener = (host as HostWithListener).__publisherTopbarListener
-  if (priorListener) {
-    window.removeEventListener(ROUTE_CHANGE_EVENT, priorListener as EventListener)
-  }
-
-  const bar = document.createElement('header')
-  bar.className = 'publisher-topbar publisher-glass'
-
-  const titleBlock = document.createElement('div')
-  titleBlock.className = 'publisher-topbar-title-block'
-
-  const back = document.createElement('a')
-  back.href = '/'
-  back.className = 'publisher-topbar-back'
-  back.setAttribute('aria-label', t('publisher.nav.backToTerraviz'))
-  back.textContent = '←'
-  titleBlock.appendChild(back)
-
-  const title = document.createElement('span')
-  title.className = 'publisher-topbar-title'
-  title.textContent = t('publisher.portal.title')
-  titleBlock.appendChild(title)
-
-  bar.appendChild(titleBlock)
-
-  const nav = document.createElement('nav')
-  nav.className = 'publisher-nav'
-  nav.setAttribute('aria-label', t('publisher.nav.aria'))
-
-  for (const link of NAV_LINKS) {
-    if (link.adminOnly && !options.isAdmin) continue
-    const a = document.createElement('a')
-    a.href = link.path
-    a.className = 'publisher-nav-link'
-    a.textContent = t(link.labelKey)
-    a.addEventListener('click', e => {
-      if (!isPlainLeftClick(e)) return
-      e.preventDefault()
-      void router.navigate(link.path)
-    })
-    nav.appendChild(a)
-  }
-  bar.appendChild(nav)
-
-  // "Sign out" sits to the far right, visually separated from
-  // the section tabs. Plain anchor — no SPA intercept; the
-  // server endpoint at /api/v1/logout handles the cross-origin
-  // redirect to Cloudflare Access's team-level logout.
-  const signOut = document.createElement('a')
-  signOut.href = '/api/v1/logout'
-  signOut.className = 'publisher-nav-link publisher-nav-link-signout'
-  signOut.textContent = t('publisher.nav.signOut')
-  bar.appendChild(signOut)
-
-  host.insertBefore(bar, host.firstChild)
-
-  applyActiveState(nav, window.location.pathname)
-  const listener = (e: Event): void => {
-    const detail = (e as CustomEvent<RouteChangeDetail>).detail
-    applyActiveState(nav, detail?.path ?? window.location.pathname)
-  }
-  ;(host as HostWithListener).__publisherTopbarListener = listener
-  window.addEventListener(ROUTE_CHANGE_EVENT, listener as EventListener)
-}
-
-interface HostWithListener extends HTMLElement {
-  __publisherTopbarListener?: (e: Event) => void
-}
-
-/** Tear down the topbar listener; only used by tests. */
-export function teardownTopbar(host: HTMLElement): void {
-  const listener = (host as HostWithListener).__publisherTopbarListener
-  if (listener) {
-    window.removeEventListener(ROUTE_CHANGE_EVENT, listener as EventListener)
-    delete (host as HostWithListener).__publisherTopbarListener
-  }
-  const bar = host.querySelector('.publisher-topbar')
-  if (bar) bar.remove()
-}
diff --git a/src/ui/publisher/index.ts b/src/ui/publisher/index.ts
index 1597acba7..1243c76b3 100644
--- a/src/ui/publisher/index.ts
+++ b/src/ui/publisher/index.ts
@@ -40,7 +40,7 @@ import { renderEventsPage } from './pages/events'
 import { renderAnalyticsPage } from './pages/analytics'
 import { renderUsersPage } from './pages/users'
 import { renderFeedbackPage } from './pages/feedback'
-import { renderTopbar } from './components/topbar'
+import { renderSidebar } from './components/sidebar'
 import { publisherGet } from './api'
 import '../../styles/publisher.css'
 
@@ -111,10 +111,10 @@ function ensureMount(): PortalMount {
     root.className = 'publisher-portal'
     document.body.appendChild(root)
   }
-  // Build (or reuse) the content slot. The topbar mounts ahead of
-  // it on each boot via `renderTopbar(root, ...)`; pages render
+  // Build (or reuse) the content slot. The sidebar mounts ahead of
+  // it on each boot via `renderSidebar(root, ...)`; pages render
   // into `content` so a route change replaces page contents
-  // without touching the topbar.
+  // without touching the sidebar.
   let content = document.getElementById(PORTAL_CONTENT_ID)
   if (!content) {
     // Plain <div>, not <main>. Each page renderer mounts its own
@@ -386,13 +386,13 @@ export async function bootPublisherPortal(): Promise<void> {
     ],
     notFoundPage(content),
   )
-  // Render the topbar immediately (without admin-only tabs) so the
-  // portal never blocks on the network. The admin-tab probe is
-  // best-effort and only controls visibility of the Users tab, so we
-  // fire it in the background and re-render the topbar if it resolves
-  // true. The page and API both gate independently.
+  // Render the sidebar immediately (without admin-only links) so the
+  // portal never blocks on the network. The admin probe is
+  // best-effort and only controls visibility of the admin links, so
+  // we fire it in the background and re-render the sidebar if it
+  // resolves true. The page and API both gate independently.
   const bootedRouter = activeRouter
-  renderTopbar(root, bootedRouter, { isAdmin: false })
+  renderSidebar(root, bootedRouter, { isAdmin: false })
   await bootedRouter.start()
   // One emit per portal-chunk load — the publisher visits
   // /publish/*, the chunk resolves, the first route dispatches,
@@ -407,9 +407,9 @@ export async function bootPublisherPortal(): Promise<void> {
 
   void resolveIsAdmin().then(isAdmin => {
     // Guard against a teardown (or re-boot) that happened while the
-    // probe was in flight — only re-render the topbar we mounted.
+    // probe was in flight — only re-render the sidebar we mounted.
     if (isAdmin && activeRouter === bootedRouter) {
-      renderTopbar(root, bootedRouter, { isAdmin: true })
+      renderSidebar(root, bootedRouter, { isAdmin: true })
     }
   })
 }

From 61c4f3bf45d31d0ef00ed1d5417a12698d2c73ed Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Jul 2026 06:14:30 +0000
Subject: [PATCH 3/3] =?UTF-8?q?style(publisher):=20drop=20glass=20?=
 =?UTF-8?q?=E2=80=94=20flat=20surfaces=20for=20the=20portal=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The redesign removes frosted glass everywhere. Redefine the shared
.publisher-glass hook to a flat white-alpha surface (--color-surface-alt
+ subtle border, --radius-2xl) instead of a backdrop-filter blur, so all
~30 call sites flatten at once with no churn. Completes the Foundation
PR's no-glass discipline (the Events tab already flattened in #241; the
sidebar shell landed flat in the prior commit).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0127MmwB678BaV8Pfg1KG18E
Signed-off-by: Claude <noreply@anthropic.com>
---
 src/styles/publisher.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/styles/publisher.css b/src/styles/publisher.css
index 962a68dba..502b8c62b 100644
--- a/src/styles/publisher.css
+++ b/src/styles/publisher.css
@@ -1190,14 +1190,16 @@
   margin: 0;
 }
 
-/* --- Glass-surface card (SPA-matched) --- */
+/* --- Surface card (flat app-shell — UI refresh) --- */
 
+/* Formerly a frosted-glass surface (backdrop-filter blur). The
+ * redesign drops glass everywhere in favour of flat white-alpha
+ * surfaces. The `publisher-glass` class name is kept as the shared
+ * hook so the ~30 call sites need no churn; only its look changed. */
 .publisher-glass {
-  background: var(--glass-bg, rgba(13, 13, 18, 0.92));
-  backdrop-filter: var(--glass-blur, blur(12px));
-  -webkit-backdrop-filter: var(--glass-blur, blur(12px));
-  border: 1px solid var(--white-o08, rgba(255, 255, 255, 0.08));
-  border-radius: calc(12px * var(--ui-scale));
+  background: var(--color-surface-alt, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--color-surface-border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: var(--radius-2xl, 12px);
 }
 
 .publisher-card {