diff --git a/CHANGELOG.md b/CHANGELOG.md
index 406ef37..3eb9797 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,58 @@
 
 All notable changes to Armature are documented here.
 
+## v0.7.0 — Shell Contract + Surface Audit + Rebrand
+
+**Shell Infrastructure**
+- Kernel-injected two-slot topbar for all surfaces (home, left slot, center slot, bell, user menu)
+- `sw.shell.topbar` SDK API: `setLeft()`, `setSlot()`, `setTitle()`, `hide()`, `show()`
+- `.sw-topbar__tabs` / `.sw-topbar__tab` CSS classes for consistent tab styling
+- Shell topbar auto-mounts on extension surfaces via `#shell-topbar` div
+
+**Backend WS Events**
+- `package.changed` event broadcast on install/uninstall/enable/disable/update
+- `auth.changed` event targeted to affected user on team/group membership changes
+- `notification.all_read` event split from `notification.read` for cleaner badge sync
+- `Hub.Broadcast()` method for untargeted all-client events
+
+**User Menu + Bell Reactivity**
+- User menu re-fetches surface list on `package.changed` and `auth.changed` events
+- Notification bell syncs on `notification.read` and `notification.all_read` across tabs
+
+**Surface Migrations**
+- Settings: Pattern B (flat tabs in topbar, no sidebar, full-width content)
+- Admin: Pattern C (category tabs in topbar, surface-owned sidebar below)
+- Team Admin: Pattern B (flat tabs, no sidebar, Groups tab removed)
+- Docs: Pattern A (shell topbar auto-renders, removed explicit Topbar import)
+- All 4 surfaces now have notification bell and user menu via shell topbar
+
+**Error Handling + Empty States**
+- `.sw-inline-error` CSS primitive for inline error + retry pattern
+- `.sw-empty-state` CSS primitive for guided empty states
+- Admin Workflows, Packages, Groups: inline error on list fetch failure
+- Admin Workflows, Groups: descriptive empty state guidance
+
+**Announcement Global Dismiss**
+- Announcement dismiss state persisted to localStorage keyed by content hash
+- Dismissed once on any surface, dismissed everywhere
+
+**Rebrand Assets**
+- `favicon-light.svg` renamed to `wordmark.svg` (was a 520x80 wordmark, not an icon)
+- New `favicon-light.svg`: actual square light-mode icon
+- New `wordmark-dark.svg`, `wordmark-light.svg` for dark/light backgrounds
+- New `favicon-light-32.png`, `favicon-light-256.png` raster icons
+- Full icon library deployed to `src/icons/` (both b/e variants, animated SVGs)
+- `manifest.json` description updated to "Self-hosted extension platform"
+- Light-mode icon entries added to PWA manifest
+
+**Bug Fixes**
+- Docs: "On this page" outline links now scroll to headings (IDs were missing from rendered HTML)
+- ICD security tier: tightened path traversal assertion (400/422, not 409), added `finally` cleanup
+- Workflow demo: replaced silent catch with inline error + retry
+- Team Admin: signoff panel shows display names instead of raw UUIDs
+- Deleted `packages/hello-dashboard/` (dead package)
+- Deleted `team-admin/groups.js` (37-line dead-end, no CRUD)
+
 ## v0.6.18 — CI Bundle Wiring
 
 Wire `BUNDLED_PACKAGES` env var into the Gitea CI pipeline so each
diff --git a/ROADMAP-UI.md b/ROADMAP-UI.md
deleted file mode 100644
index 9c93ff8..0000000
--- a/ROADMAP-UI.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# Armature — v0.6.x UI Hardening Roadmap
-
-> **Goal**: Fix all viewport scaling, banner integration, and styling inconsistencies
-> so Claude Code can run a meaningful automated usability survey against a
-> stable, uniform UI.
-
----
-
-## Problem Inventory
-
-### P1 — Viewport & Scaling (blocks everything)
-
-| # | Issue | Where | Impact |
-|---|-------|-------|--------|
-| 1 | **Dual layout systems** — `base.html` template has its own banner→surface→footer column; `app-shell.js` Preact shell has a separate `sw-shell` → `sw-shell__body` → `sw-shell__surface` column. They never coordinate. | `server/pages/templates/base.html` ↔ `src/js/sw/shell/app-shell.js` | Every surface inherits an ambiguous viewport ancestor. |
-| 2 | **Transform-based scaling is broken** — `transform: scale()` on `#surfaceInner` doesn't reflow layout. Breaks `getBoundingClientRect` (menu.js already carries a scale-correction hack at line 20), scroll containment, pointer events, and the inverse-width/height hack (`100/s%`) doesn't account for banners consuming viewport space. | `base.html:56-67`, `appearance.js:41-53`, `menu.js:20-33` | Menus, tooltips, dropdowns all mis-positioned at any non-100% scale. Click targets wrong. |
-| 3 | **Banner height desync** — `base.html` hardcodes `--banner-h: 28px` and renders banners in-flow. `app-shell.js` ShellBanner measures `offsetHeight` into `--banner-top-height` / `--banner-bottom-height` and uses `position: fixed` + body padding. Two independent banner systems. | `base.html:31,72-75,103-107` ↔ `app-shell.js:25-42`, `sw-shell.css:22-37,63-69` | With banners enabled, content overflows by the banner height or gets double-inset depending on which code path is active. |
-| 4 | **`100vh` on mobile** — `.sw-shell`, `.chat-app`, `.chat-loading`, `.login-shell` use `100vh` which doesn't subtract mobile browser chrome (address bar, toolbar). | `sw-shell.css:9`, `chat/css/main.css:15,25`, `sw-login.css:7` | Content overflows on iOS Safari, Android Chrome. |
-| 5 | **Chat uses `100vh` not `100%`** — `.chat-app { height: 100vh }` ignores parent container (which already excludes banners/footer). Notes correctly uses `height: 100%`. Every extension surface that copies chat's pattern will inherit the bug. | `packages/chat/css/main.css:15` | Chat surface overflows behind banners. |
-
-### P2 — CSS Architecture
-
-| # | Issue | Where | Impact |
-|---|-------|-------|--------|
-| 6 | **Class name collisions** — `.settings-section` defined in both `modals.css:41-43` and `surfaces.css:75-83` with different padding, margin, and border-bottom rules. `.sw-dropdown` in `primitives.css:443` (styled `<select>`) vs `sw-primitives.css:262` (custom dropdown component). `.sw-tabs` in `primitives.css:459` vs `sw-primitives.css:234`. | Kernel CSS | Styles randomly win depending on load order. Bug reports differ by surface. |
-| 7 | **Old/new primitive duplication** — Two button systems (`.btn-primary`/`.btn-small` in `primitives.css` vs `.sw-btn--primary`/`.sw-btn--sm` in `sw-primitives.css`). Two toast systems (`.toast` vs `.sw-toast`). Two dropdown, two tabs implementations. | `primitives.css` ↔ `sw-primitives.css` | No single source of truth for any component. Extension authors can't know which to use. |
-| 8 | **Extension CSS bleeds globally** — Extension `main.css` loaded via `<link>` at document level, no scoping. Any class name can override kernel or sibling extension styles. | `base.html:26-28`, `extension-surface.css` | Package CSS fights with kernel. Two packages with `.sidebar` both lose. |
-| 9 | **No intermediate breakpoint** — Only `768px` mobile breakpoint. No tablet (768–1024px). Secondary workspace pane hardcoded `480px`. Admin nav hardcoded `200px`. | `layout.css:263`, `surfaces.css:305` | Cramped layout on iPad/small laptops. |
-
-### P3 — Visual Consistency
-
-| # | Issue | Where | Impact |
-|---|-------|-------|--------|
-| 10 | **Mixed unit systems** — `px`, `rem`, `em` used interchangeably with no rationale. Some font-sizes in `px` (primitives), others in `rem` (sw-primitives), others in `em` (user-picker). | All CSS files | Zoom/scale behaves differently per element. |
-| 11 | **Google Fonts CDN dependency** — `@import url(...)` in `variables.css:5` blocks rendering if CDN is slow; breaks entirely on air-gapped deployments. | `variables.css:5` | FOUT or blank page on slow networks. No offline support. |
-| 12 | **No spacing scale** — Padding/margins are ad-hoc values (10px, 12px, 14px, 16px, 20px, 24px, 28px…). No design-token spacing scale. | All CSS | Inconsistent visual rhythm across surfaces. |
-| 13 | **Hardcoded fallback colors in component CSS** — `sw-shell.css`, `sw-primitives.css` have inline fallbacks like `var(--accent, #b38a4e)` — a gold color from a previous theme that doesn't match the current blue `#6c9fff`. | `sw-shell.css`, `sw-primitives.css` | Wrong colors flash briefly if variables load late. |
-
----
-
-## Roadmap
-
-### v0.6.9 — Session Lifetime Config ✅
-
-Shipped. Admin-configurable TTLs, "keep me logged in" checkbox, idle timeout,
-config-driven `generateTokens()`, 7 new tests. See CHANGELOG.md for details.
-
-### v0.6.10 — Viewport Foundation ✅
-
-Shipped. Single layout model: `body → shell → surface`. CSS `zoom` replaces
-`transform: scale()`. `100dvh` fallbacks everywhere. Extension surfaces use
-`100%` instead of `100vh`. Dead shell layout code deprecated. See CHANGELOG.md.
-
-### v0.6.11 — CSS Deduplication ✅
-
-Shipped. Old primitive system retired. One class per concept. See CHANGELOG.md.
-
-| Step | Description |
-|------|-------------|
-| Audit collision inventory | Script that finds all duplicate class selectors across kernel CSS files. Produce a machine-readable collision report (JSON). |
-| Migrate `.settings-section` | Remove `modals.css:41-43` definition. The `surfaces.css` definition is authoritative. Modals that used the old styles get explicit overrides scoped to `.modal .settings-section`. |
-| Retire `primitives.css` old components | `.btn-primary`, `.btn-small`, `.btn-danger`, `.btn-full` → migrate all usages to `.sw-btn--*`. `.toast-container` / `.toast` → migrate to `.sw-toast-container` / `.sw-toast`. Old `.popup-menu` → migrate to `.sw-menu`. Old `.sw-dropdown` (styled select in primitives.css) → rename to `.sw-native-select` or delete if unused. Old `.sw-tabs` / `.sw-tab-btn` in primitives.css → delete (sw-primitives.css version is authoritative). |
-| Mark deprecated classes | Any remaining old classes get a `/* DEPRECATED v0.6.11 — use .sw-btn--* */` comment and a 1-version grace period for package authors. |
-| Package CSS audit | Scan all `packages/*/css/main.css` for references to deprecated kernel classes. Fix in-tree packages. |
-
-### v0.6.12 — Extension CSS Isolation ✅
-
-Shipped. Prefix enforcement via linter. All 12 in-tree packages migrated.
-See CHANGELOG.md.
-
-| Step | Description |
-|------|-------------|
-| Scoping strategy | Prefix enforcement (option B). `@scope` support still patchy; prefix works everywhere, trivially lintable. |
-| Linter | `scripts/lint-package-css.sh` — validates first class selector in every rule starts with `.ext-{slug}`. Exempts `:root`, `@keyframes`, `@font-face`, `@media`, `.sw-*` kernel classes, `.cm-*` CodeMirror classes. |
-| Kernel CSS contract | `docs/EXTENSION-CSS.md` — stable public classes (`.sw-btn--*`, `.sw-input`, `.sw-field`, `.sw-dialog`, `.sw-toast`, `.sw-menu`, `.sw-tabs`, etc.) and all CSS variables. Everything else internal. |
-| Migrate in-tree packages | `data-ext="{{.Surface}}"` on extension mount. All 12 packages prefixed to `.ext-{slug}-*`. CSS + JS updated in lockstep. |
-
-### v0.6.13 — Responsive & Spacing ✅
-
-Shipped. Spacing token scale (`--sp-1` through `--sp-12`, 4px grid) in
-`variables.css`. Tablet breakpoint (`max-width: 1024px`) in layout, surfaces,
-login. All kernel CSS and 12 in-tree packages migrated to spacing tokens.
-`EXTENSION-CSS.md` updated with spacing table and breakpoint guide.
-Font-size scale deferred to v0.6.14. See CHANGELOG.md.
-
-### v0.6.14 — Visual Polish ✅
-
-Shipped. Stale fallback colors purged (~65 instances), fonts self-hosted
-(DM Sans + JetBrains Mono woff2), border-radius standardized to three tokens
-(`--radius-sm`, `--radius`, `--radius-lg`). Also fixed v0.6.13 spacing
-regressions (half-step tokens), theme settings default, surface overflow,
-and user menu zoom drift. See CHANGELOG.md.
-
-### v0.6.15 — User Display Audit ✅
-
-Shipped. `GET /api/v1/users/resolve?ids=...` batch endpoint, `sw.users`
-SDK module with `resolve()`, `resolveMany()`, `displayName()` + 60s cache.
-Chat participants resolved from users table instead of snapshot. All admin
-surfaces show `display_name || username || 'Unknown'`. Chat-core snapshot
-column deprecated. 5 new handler tests. See CHANGELOG.md.
-
-### v0.6.16 — Usability Survey Gate ✅
-
-Shipped. Four audit scripts, structured survey prompt, contrast/touch-target
-fixes, Docker docs corrected. All 48 contrast pairings pass, all close buttons
-have 44px mobile targets, focus-visible on all key primitives. See CHANGELOG.md.
-
----
-
-## Sequencing Rationale
-
-```
-v0.6.9  Session Lifetime Config ✅ SHIPPED
-  ↓
-v0.6.10 Viewport Foundation     ✅ SHIPPED
-  ↓
-v0.6.11 CSS Deduplication       ✅ SHIPPED
-  ↓
-v0.6.12 Extension CSS Isolation ✅ SHIPPED
-  ↓
-v0.6.13 Responsive & Spacing    ✅ SHIPPED
-  ↓
-v0.6.14 Visual Polish           ✅ SHIPPED
-  ↓
-v0.6.15 User Display Audit     ✅ SHIPPED
-  ↓
-v0.6.16 Usability Survey Gate  ✅ SHIPPED
-```
-
-Each version is independently shippable and testable. No version depends on
-anything after it.
-
----
-
-## What "Usability Survey by Code" Means
-
-The v0.6.16 deliverables give Claude Code (or any automated tool) three things:
-
-1. **A structured inventory** (`ui-inventory.json`) of every component, on every
-   surface, with its CSS file and line number.
-
-2. **Automated checks** (contrast, touch targets, token usage) that produce
-   machine-readable pass/fail reports.
-
-3. **A survey prompt** (`USABILITY-SURVEY.md`) with explicit criteria and file
-   paths, so Claude Code can `cat` the relevant files, run the scripts, and
-   produce a scored report without human guidance.
-
-The survey is not a substitute for real user testing — it's a structural
-quality gate that catches the class of bugs (overflow, contrast, misalignment,
-inconsistent styling) that have historically slipped through.
diff --git a/ROADMAP.md b/ROADMAP.md
index 20082a5..6859948 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,6 +1,6 @@
 # Armature — Roadmap
 
-## Current: v0.6.14 — Visual Polish
+## Current: v0.6.18 — CI Bundle Wiring
 
 Self-hosted extensible platform. Auth, identity, packages, Starlark sandbox,
 storage, realtime, and ops are kernel primitives. Everything else is an extension.
@@ -19,152 +19,168 @@ upgrade test harness, cluster registry + HA.
 
 ---
 
-## v0.6.0 — MVP
+## v0.6.x — Completed (MVP + Hardening)
 
-Extension, communication, and operations tracks converge. First
-externally usable release.
+All v0.6.x work is shipped and documented in `CHANGELOG.md`. Summary:
 
-Design docs: `docs/DESIGN-cluster-registry.md` — PG-backed cluster registry and self-assembling mesh.
-
-### v0.6.0 — Cluster Registry + HA
-
-PG is the consensus layer. Zero new infrastructure. `UNLOGGED` table + `LISTEN/NOTIFY` replaces etcd/Consul/Redis for homelab-to-small-team scale.
-
-| Step | Status | Description |
-|------|--------|-------------|
-| `node_registry` table | ✅ | `UNLOGGED TABLE` — node_id, endpoint, seq, registered_at, heartbeat, stats JSONB. Postgres migration 013. |
-| Node registration | ✅ | Self-registration on startup: `INSERT ... ON CONFLICT DO UPDATE`. `node_id` = `hostname-PID` or `CLUSTER_NODE_ID` env override. |
-| Heartbeat tick | ✅ | Every 10s: update own heartbeat + collect runtime stats (goroutines, heap, GC, uptime, ws_clients). |
-| Stale sweep | ✅ | Every heartbeat tick: `DELETE WHERE heartbeat < now() - 30s`. All nodes run it — idempotent, no ring topology. |
-| Self-eviction | ✅ | If heartbeat UPDATE returns 0 rows: node was swept by peer → log error + `os.Exit(1)`. K8s restarts → re-register. |
-| LISTEN/NOTIFY routing | ✅ | Durable events (messages, state changes) fan-out via `pg_notify`. All replicas receive, push to local WS subscribers, drop if irrelevant. Phase 1: ephemeral events (typing, presence) also via NOTIFY (8KB limit, ~60 bytes each). |
-| Cluster API | ✅ | `GET /api/v1/admin/cluster` — returns `{data: [...]}` envelope with all registered nodes. |
-| Admin cluster dashboard | ✅ | `cluster-dashboard` surface package renders one card per node: node_id, endpoint, uptime, ws_clients, heap, GC pause. JSONB stats — future keys render automatically, no schema migration. Auto-refresh every 10s. |
-| Health endpoint | ✅ | `GET /health` includes `node_id` and `cluster: {size, peers, heartbeat_age_ms}`. |
-| Config | ✅ | `CLUSTER_NODE_ID`, `CLUSTER_HEARTBEAT_INTERVAL` (default 10s), `CLUSTER_STALE_THRESHOLD` (default 30s), `CLUSTER_ENDPOINT` (Phase 2 mesh, auto-detect). |
-| Single-node regression | ✅ | One-node behavior identical to pre-cluster: one registry row, NOTIFY delivers back to same instance. No special-casing. SQLite returns nil store — all cluster code guarded. |
-| Multi-node integration test | ✅ | Docker Compose: 3 instances, shared PG. `ci/e2e-cluster-test.sh`: registration, stale sweep on stop, re-registration on restart. 3 unit tests + 2 handler tests. |
-
-### v0.6.1 — Backup/Restore + Documentation
-
-| Step | Status | Description |
-|------|--------|-------------|
-| Backup handler | ✅ | `POST /api/v1/admin/backup` streams `.swb` ZIP (JSONL core + ext_data tables + package assets). `POST /api/v1/admin/restore` wipes DB and restores from archive. Dialect-neutral (SQLite + Postgres). |
-| Server-side backups | ✅ | `GET /api/v1/admin/backups` list, `GET /download`, `DELETE`. Store backups in `{STORAGE_PATH}/backups/`. |
-| Admin backup section | ✅ | New "Backup" section under `/admin/backup`. Create (download or server-side), list, download, delete, restore with destructive confirmation. |
-| Documentation API | ✅ | `GET /api/v1/docs` lists, `GET /api/v1/docs/:name` returns raw markdown. Authenticated (not admin-only). |
-| Docs surface | ✅ | Builtin surface at `/docs/:section`. Sidebar navigation, client-side markdown renderer. 5 new docs: Getting Started, Extension Guide, API Reference, Deployment, Package Format. |
-| Tests | ✅ | 6 handler tests (basic backup, ext_data backup, round-trip restore, schema mismatch, dump/restore table, list empty). E2E script `ci/e2e-backup-test.sh`. |
-
-### v0.6.2 — Docs Polish + Dynamic OpenAPI
-
-| Step | Status | Description |
-|------|--------|-------------|
-| Dark mode fix | ✅ | Added `--bg-code` to CSS variables (dark + light). Replaced all hardcoded light-mode fallbacks in docs CSS with theme-aware variables. Table styling, code blocks, nav items all readable in dark mode. |
-| Loading & error handling | ✅ | Replaced borrowed `settings-placeholder` with docs-specific pulse animation. Added error state with retry button for failed doc list fetch. |
-| Topbar navigation | ✅ | Imported `Topbar` + `UserMenu` into docs surface. Users can now navigate to other surfaces via the avatar menu. |
-| Docs icon + menu entry | ✅ | Added `📖 Docs` entry to UserMenu standard items. Docs accessible from any surface's user menu. |
-| `api_schema` manifest field | ✅ | Optional `api_schema` array in `manifest.json`. Parsed lazily by spec builder. Malformed entries logged and skipped — never blocks extension loading. |
-| OpenAPI spec builder | ✅ | `BuildOpenAPISpec()` merges static kernel spec with extension routes. Tier 1: auto-generated stubs for all `api_routes`. Tier 2: `api_schema` replaces stubs with rich path items (params, body, response). |
-| Dynamic spec endpoint | ✅ | `GET /api/docs/openapi.json` serves merged spec. Swagger UI updated to use JSON endpoint. Static YAML preserved for backward compat. |
-| Tests | ✅ | 7 new handler tests: zero extensions, stubs, rich schema, multi-extension, malformed schema, disabled exclusion, required fields. |
+| Version | Title | Key Deliverables |
+|---------|-------|-----------------|
+| v0.6.0 | Cluster Registry + HA | PG-backed node registry, heartbeat sweep, LISTEN/NOTIFY routing, self-eviction |
+| v0.6.1 | Backup/Restore + Docs | `.swb` archive format, server-side backups, docs surface + 5 guides |
+| v0.6.2 | Docs Polish + OpenAPI | Dark mode fix, topbar nav, `api_schema` manifest field, dynamic spec builder |
+| v0.6.3 | Dead Code Sweep | Registry install fix, dead Go/JS/HTML deletion, narrowed default bundle |
+| v0.6.4 | Admin Health/Metrics | Cluster dashboard merged into Admin tab, block renderer `requires` removed |
+| v0.6.5 | Renderer Pipeline | `sw.renderers.register()` kernel primitive, unified markdown, docs rewrite |
+| v0.6.6 | Final Hardening | Dependency auto-activation, `ValidateManifest()`, OIDC nonce, ICD/SDK update |
+| v0.6.7 | Native mTLS | `TLS_MODE` config, `MTLSNativeProvider`, node-to-node mTLS, `armature-ca.sh` |
+| v0.6.8 | Cookie Fix + UI Roadmap | Cookie SameSite fix, UI hardening roadmap published |
+| v0.6.9 | Session Lifetime Config | Admin-configurable TTLs, idle timeout, "keep me logged in" |
+| v0.6.10 | Viewport Foundation | Single layout model, CSS zoom, 100dvh, dead shell deprecated |
+| v0.6.11 | CSS Deduplication | Old primitive system retired, one class per concept |
+| v0.6.12 | Extension CSS Isolation | Prefix enforcement via linter, all 12 in-tree packages migrated |
+| v0.6.13 | Responsive & Spacing | Spacing token scale (4px grid), tablet breakpoint |
+| v0.6.14 | Visual Polish | Stale fallback colors purged, fonts self-hosted, radius tokens |
+| v0.6.15 | User Display Audit | Batch user resolve API, `sw.users` SDK module |
+| v0.6.16 | Usability Survey Gate | Four audit scripts, contrast/touch-target fixes |
+| v0.6.17 | Bug Fixes & Welcome | Notes folder fix, team member add fix, welcome auto-disable, zero default bundle |
+| v0.6.18 | CI Bundle Wiring | `BUNDLED_PACKAGES` env var wired into Gitea CI pipeline |
 
 ---
 
-## v0.6.x — Hardening
+## v0.7.x — Test Infrastructure + Quality Gate
 
-Closes every audit finding before the public release. No new features — only correctness, dead code elimination, and architectural cleanup. Sequence is fixed: each version is a gate for the next.
+The v0.6.x series built the kernel. v0.7.x makes it provably correct.
 
-### v0.6.3 — Dead Code Sweep + Registry Fix
+A full surface audit (docs/AUDIT-surfaces.md) found 7 cross-surface issues
+and 18 surface-specific issues across Settings, Admin, Team Admin, and Docs.
+Only Docs is properly built. The fix is three phases: (1) establish a shell
+contract and bring all four primary surfaces to parity, (2) build a runner
+framework for end-to-end browser tests, (3) automate those runners headlessly
+in CI.
 
-Pure cleanup. No behavior changes except fixing the broken registry install flow.
+Design docs:
+- `docs/DESIGN-shell-contract.md` — two-slot topbar, three navigation patterns, surface migrations
+- `docs/DESIGN-surface-runners.md` — runner framework, requires declarations, headless E2E
+- `docs/AUDIT-surfaces.md` — full audit findings
+
+### v0.7.0 — Shell Contract + Surface Audit + Rebrand Cleanup
+
+Design doc: `docs/DESIGN-shell-contract.md`
+
+**Shell Infrastructure**
 
 | Step | Status | Description |
 |------|--------|-------------|
-| Fix registry install | ✅ | SDK sends `{ url }`, handler expects `{ download_url }`. Fix `api-domains.js` to send `{ download_url: url }`. Every Install click currently returns 400. |
-| Registry settings UI | ✅ | Add "Package Registry" section to admin settings with URL input field. Only way to configure registry today is a raw `PUT /api/v1/admin/settings/package_registry` — no user will find it. |
-| Registry tooling + docs | ✅ | `scripts/generate-registry.sh` scans a directory of `.pkg` files and emits registry JSON. `docs/PACKAGE-REGISTRY.md` documents the format. |
-| Delete dead kernel Go | ✅ | `store/interfaces.go:178–183` — orphaned ChannelListFilter comments. `pages/pages.go:922–930` — `roleFilterType()` + template registration (chat vestige, maps nonexistent roles). `main.go:67` — orphaned provider-type comment. |
-| Delete dead vendor JS | ✅ | `vendor/marked.min.js` and `vendor/purify.min.js` — 62KB, zero production imports. Only referenced in test helpers. |
-| Delete `dev.html` | ✅ | 676 lines, not imported by anything. Dead. |
-| Remove `dashboard` from default bundle | ✅ | Requires `legacy-sdk` (doesn't exist), auto-installs as dormant on fresh installs. Confusing. Remove from `defaultBundledPackages`. |
-| Remove `hello-dashboard` | ✅ | Proof-of-concept from early development. Move to `examples/` or delete. |
-| Strip stale version comments | ✅ | 60+ files had legacy version annotations (`// v0.29.x:`, `// v0.33.x:`). Single sed pass. |
-| Narrow default bundle | ✅ | Default: `notes`, `chat`, `chat-core`, `mermaid-renderer`, `schedules`. Everything else available via registry or `BUNDLED_PACKAGES=*`. |
+| Shell topbar (two-slot model) | done | Kernel injects topbar into `surface-extension` template. Two named slots: **left** (defaults to manifest title) and **center** (`flex: 1`, for tabs/pickers/search). Home link, notification bell, and user menu always present. |
+| Topbar customization API | done | `sw.shell.topbar.setLeft(vnode)` overrides left slot. `sw.shell.topbar.setSlot(vnode)` sets center slot. `sw.shell.topbar.setTitle(str)` shorthand for text-only left. `sw.shell.topbar.hide()` / `.show()` for full-bleed surfaces. |
+| Kernel tab CSS | done | `.sw-topbar__tabs` and `.sw-topbar__tab` classes for consistent tab styling in the center slot. Surfaces use these for free or style their own slot content. |
+| Notification read broadcast | done | Backend emits `notification.read` and `notification.all_read` WS events. Bell listens for `.created`, `.read`, `.all_read`. Cross-surface sync without refetch. |
+| User menu reactivity | done | Emit `package.changed` (install/uninstall/enable/disable) and `auth.changed` (role/membership) WS events. UserMenu listens and re-fetches surface list. Most impactful single fix. |
+| Shell announcement global dismiss | done | Dismissed state persisted to localStorage keyed by content hash. Dismiss once, dismissed everywhere. |
 
-### v0.6.4 — Admin Health/Metrics Tab + Cluster Merge
-
-Structural move: cluster dashboard becomes an Admin tab. Better home for health/metrics — shared context with other admin panels, no separate nav entry.
+**Surface Migrations**
 
 | Step | Status | Description |
 |------|--------|-------------|
-| "Health / Metrics" admin tab | ✅ | New tab in Admin surface. DB-agnostic metrics for all deployments. Cluster cards conditional on PG + multi-node detection. |
-| Runtime metrics | ✅ | Per-node: goroutines, heap alloc/sys, stack in use, GC cycles, last GC pause, GC CPU %, uptime, WebSocket clients, extensions loaded, open FDs. |
-| DB pool metrics | ✅ | All deployments: DB latency (`SELECT 1` round-trip), pool active/idle/max, wait count, wait duration. PG-only: table bloat (`n_dead_tup`), active backends (`pg_stat_activity`). |
-| Cluster metrics | ✅ | PG multi-node only: cluster size, peer list with endpoint + uptime, heartbeat age per node, event bus publish/deliver rates. |
-| Extension runtime metrics | ✅ | Starlark exec/min, errors/min, avg duration, HTTP outbound requests/min, trigger fires/min, schedule overruns. |
-| Fatten heartbeat payload | ✅ | Heartbeat JSONB carries full metric set. `GET /api/v1/admin/metrics` for single-node SQLite fallback (same shape). |
-| Retire `cluster-dashboard` | ✅ | Remove package once Admin Health tab ships. Update `defaultBundledPackages`. |
-| Fix block renderer `requires` | ✅ | `mermaid-renderer`, `katex-renderer`, `csv-table`, `diff-viewer` all have `"requires": ["chat"]`. These are content renderers, not chat features. Remove constraint — they should activate without chat. |
-| Health endpoint consolidation | ✅ | `/health` and `/api/v1/health` return near-identical JSON. Merge or clearly differentiate with docs. |
+| Settings → Pattern B (flat tabs) | done | Delete custom topbar + sidebar nav. 6 sections become flat tabs in topbar center slot. Content full-width. Fix Teams section: add team admin link, role display, leave action. Remove sessionStorage return URL logic. |
+| Admin → Pattern C (category tabs + sidebar) | done | Delete custom `admin-topbar`. `setLeft()` for favicon + "Administration". `setSlot()` for category tabs (People / Workflows / System / Monitoring). Admin sidebar (sub-navigation) unchanged — surface-owned, below the topbar. Bell + user menu come free from shell. Delete bespoke CatIcon renderer if using standard SVGs. |
+| Team Admin → Pattern B (flat tabs) | done | Delete custom topbar + sidebar nav. 5 sections (Members / Connections / Workflows / Settings / Activity — Groups removed) become flat tabs. Content full-width. `setTitle()` for team-specific name. Remove sessionStorage return URL. Fix signoff user display (`user_id` → `sw.users.displayName()`). |
+| Team Admin: remove Groups tab | done | 37-line dead-end. Read-only "No groups" with no create/docs/link. Remove until team-scoped group management is properly designed. |
+| Docs → Pattern A (default) | done | Delete explicit Topbar import. Shell topbar auto-renders with manifest title. Docs sidebar (document list) is in content area, unaffected. |
 
-### v0.6.5 — Renderer Pipeline + Docs Rewrite
-
-Most complex sub-version. Lifts block rendering to a kernel SDK primitive so all surfaces share it, then rewrites the docs for an external audience.
+**Error Handling + UX Pass**
 
 | Step | Status | Description |
 |------|--------|-------------|
-| SDK renderer primitive | ✅ | `sw.renderers.register(pattern, handler)` — kernel-level registration. Extensions call once; all surfaces consume. Decouples renderer discovery from chat surface. |
-| Notes hooks SDK renderer pipeline | ✅ | Notes delegates to `sw.markdown.renderSync()` + `sw.renderers.runPostRenderers()`. Hand-rolled renderer deleted. |
-| Docs hooks SDK renderer pipeline | ✅ | Docs delegates to `sw.markdown.renderSync()` + `sw.renderers.runPostRenderers()`. Hand-rolled renderer deleted (~160 lines). |
-| Unify markdown renderer | ✅ | `sw.markdown` module lazy-loads `marked` v16 (vendored). Notes, Docs, Chat all consume it. Two hand-rolled parsers deleted. |
-| Sanitize HTML output | ✅ | DOMPurify wired as default post-render step in `sw.markdown`. SVG-safe config allows mermaid output. Notes sanitizes; Docs opts out (system-authored). |
-| Mermaid/KaTeX/CSV/Diff work everywhere | ✅ | Browser extension loader injects renderer scripts into all pages. Extensions register via `sw:ready` event. All four render in Notes, Docs, and Chat. |
-| Docs rewrite for external audience | ✅ | All fork references removed from docs, CHANGELOG, ROADMAP. DESIGN-WORKFLOW-REDESIGN-0.2.6.md replaced with DESIGN-WORKFLOWS.md. |
-| Add Mermaid architecture diagrams | ✅ | Six diagrams in ARCHITECTURE.md: system overview, request flow, extension lifecycle, realtime events, settings cascade, cluster topology. |
-| Surface alias decision | ✅ | Migrated SDK + ICD runner to `/admin/packages/`; aliases removed from main.go. |
-| `CONTRIBUTING.md` + tutorial | ✅ | CONTRIBUTING.md at repo root + docs/TUTORIAL-FIRST-EXTENSION.md walkthrough. |
+| Inline error states | done | Replace `catch { toast }` with inline error + retry on all list endpoints. New `.sw-inline-error` CSS primitive. Systematic pass across Settings, Admin, Team Admin. |
+| Empty state guidance | done | Every "No X" message gets one-line explanation + primary action (create button or doc link). Admin Groups, Workflows, Teams; Team Admin Workflows; Settings Notifications. |
 
-### v0.6.7 — Native mTLS
-
-End-to-end mutual TLS without a reverse proxy. Targets systemd+podman deployments where every connection (client→server, node→node) is mTLS. Design: `docs/DESIGN-native-mtls.md`.
+**Bug Fixes**
 
 | Step | Status | Description |
 |------|--------|-------------|
-| `TLS_MODE` config | ✅ | Three values: `none` (default, plain HTTP) · `server` (TLS, no client cert) · `mtls` (mutual TLS, client cert required). Independent of `AUTH_MODE`. |
-| TLS server mode | ✅ | Go binary calls `ListenAndServeTLS` directly. `TLS_CERT`, `TLS_KEY`, `TLS_CA` path config. TLS 1.3 minimum, no fallback. `server/config/tls.go` loader + validation. |
-| `MTLSNativeProvider` | ✅ | Reads `r.TLS.PeerCertificates[0]` — no header trust. `Subject.CommonName` → username. `sha256(Raw)` → `external_id`. Auto-provisions `auth_source=mtls`. Renamed existing `mtls.go` → `mtls_proxy.go`. Shared helpers in `mtls_helpers.go`. |
-| Node-to-node mTLS | ✅ | `BuildPeerTLSConfig()` constructs outbound TLS config with node cert + CA pool. Forward-looking — cluster registry is DB-backed (PG LISTEN/NOTIFY), no HTTP peer calls yet. |
-| `armature-ca.sh` | ✅ | Shell wrapper around openssl. Three commands: `init` (CA keypair) · `issue-node --name <n> --san <addrs>` (365d) · `issue-user --cn <name>` (90d). All output PEM. |
-| Unit tests | ✅ | Ephemeral CA via `crypto/x509`. Fabricated `PeerCertificates`. Valid cert → user provisioned · no TLS → `ErrNoCert` · empty certs → `ErrNoCert` · no CN → `ErrInvalidCreds`. |
-| Integration tests | ✅ | Real TLS listener on localhost. No cert / wrong CA / expired → TLS handshake rejected. Valid cert → 200. Peer certificate CN + email visibility verified. |
+| evil-chat cleanup | done | ICD security tier: `finally` cleanup block + tighten `409` assertion. |
+| Workflow demo error surfacing | done | Replace silent `catch` with inline error + retry. |
+| Hello dashboard removal | done | Delete `packages/hello-dashboard/`. |
 
-### v0.6.6 — Final Hardening
-
-Final pass before public release. Security, correctness, and developer experience.
+**Rebrand**
 
 | Step | Status | Description |
 |------|--------|-------------|
-| Extension dependency auto-activation | ✅ | Installing a package with unmet `depends`/`requires` auto-installs dependencies from the bundled set. If not bundled: clear error listing what's missing. |
-| `ValidateManifest()` gate | ✅ | Single `ValidateManifest()` function in `package_validate.go`. Called at install time (both upload and bundled). 12 unit tests. |
-| Package signing hook | ✅ | Optional `signature` field in manifest (reserved). `PACKAGE_VERIFY_SIGNATURES` env var (default false, log-only). No cryptographic code yet — schema slot reserved. |
-| OIDC state nonce validation | ✅ | `oidcClaims.Nonce` field added. `ValidateIDTokenNonce()` compares ID token nonce against stored state. Callback rejects mismatched nonces. |
-| Schema migration stub decision | ✅ | Stub replaced with log-only function documenting additive-only policy. Downgrade rejection preserved. |
-| ICD/SDK runner update pass | ✅ | ICD smoke tier: added metrics, cluster, backups, docs, OpenAPI JSON endpoints. SDK admin domain: added metrics, cluster, backups tests. |
-| Stale TODO resolution | ✅ | `main.go` session middleware: replaced with `OptionalAuth()` (auth if token present, anonymous pass-through). `auth.go:221` OIDC nonce: resolved. `starlark_helpers.go:96` migration stub: resolved. |
+| Light-mode icon SVG | done | New `favicon-light.svg` — square icon, transparent bg, dark node fills. Rename current `favicon-light.svg` (wordmark) to `wordmark.svg`. |
+| Dark-mode wordmark SVG | done | New `wordmark-dark.svg` — light text for dark backgrounds. |
+| Light-mode raster assets | done | `favicon-light-32.png`, `favicon-light-256.png`. |
+| PWA manifest description | done | "Self-hosted extension platform — build, compose, and run extensions." |
+| REBRAND-SPEC.md | | Land into `docs/`. Find/replace patterns, validation checklist, asset inventory. |
+| base.html favicon swap | done | Verify theme swap works with new square light icon. |
 
-Then ship.
+**Tests**
+
+| Step | Status | Description |
+|------|--------|-------------|
+| Shell topbar renders for extensions | done | Home, left slot, center slot, bell, user menu present. |
+| Topbar API (setLeft, setSlot, hide) | done | Custom content renders. Hide removes topbar. |
+| All 4 surfaces use shell topbar | done | No double topbars. Each pattern (A/B/C) renders correctly. |
+| User menu reactive to package install | | Install → menu updates without reload. |
+| Notification bell cross-surface sync | | Dismiss on Notes → clears on Chat. |
+| Inline error on API failure | | Error + retry shown, not empty list. |
+
+### v0.7.1 — Surface Runner Framework
+
+Design doc: `docs/DESIGN-surface-runners.md`
+
+| Step | Status | Description |
+|------|--------|-------------|
+| Runner framework (`sw.testing`) | | SDK module: suite/test/assert, lifecycle hooks, structured JSON results. |
+| `requires` declarations | | Runner manifests declare dependencies. Missing packages → clean skip. |
+| Cleanup enforcement | | `s.track(type, id)` auto-deletes in `afterAll`. No leaked state. |
+| Warning tier | | pass / fail / warning. No silent catch swallowing. |
+| ICD runner migration | | Refactor to `sw.testing`. Test logic preserved. |
+| SDK runner migration | | Refactor to `sw.testing`. Domain suites preserved. |
+| Runner registry surface | | `/s/test-runners` — list runners, run-all, results dashboard. |
+
+### v0.7.2 — Package Runners + CI Gate
+
+| Step | Status | Description |
+|------|--------|-------------|
+| Notes runner | | CRUD, folders, tags, backlinks, search, rendering. |
+| Chat runner | | `requires: ["chat", "chat-core"]`. Channels, messaging, renderers. |
+| Schedules runner | | CRUD, cron, toggle, Starlark exec. |
+| Workflow runner | | `requires: ["content-approval"]`. Install detection, stages, signoff. |
+| Renderer runner | | `requires: ["mermaid-renderer"]`. Register contract, post-render hooks. |
+| Runner result API | | `POST /api/v1/test-runners/run`, `GET /results`. CI can curl and assert. |
+| CI integration | | `test-runners` stage in Gitea CI. PG + SQLite. Zero failures = pass. |
+
+### v0.7.3 — Headless E2E Automation
+
+| Step | Status | Description |
+|------|--------|-------------|
+| Playwright test harness | | `ci/e2e-surface-test.sh` — docker-compose, chromium, run-all, assert. |
+| Screenshot-on-failure | | Full-page screenshot + console log. CI artifacts. |
+| Navigation smoke test | | Playwright visits every surface. Asserts topbar, no JS errors, home link works. |
+| Visual regression baseline | | Optional screenshot diff. Not a gate — report for review. |
+| CI pipeline integration | | After unit tests + API runners. Failure blocks merge. |
+
+### v0.7.4 — Documentation + Deferred Surface Work
+
+| Step | Status | Description |
+|------|--------|-------------|
+| Permissions & Groups guide | | RBAC model, permission slugs with descriptions, group scoping, settings cascade. |
+| Workflows user guide | | Entry modes, stages, team roles, signoff gates, SLA, public forms. |
+| Docs content refresh | | Review all 5 existing docs for accuracy at v0.7.x. |
+| Extension config section docs | | Document `config_section` manifest field for Settings/Admin extensibility. |
+| Team Admin Workflows evaluation | | 723-line inline designer — extract to surface or split into files. Decision doc if needed. |
 
 ---
 
-## Post-MVP
+## Post-v0.7.x
 
-- LLM participation (`llm-bridge` extension: subscribes to `chat.message.created`, calls `provider.complete()`, streams response via `realtime.publish`, posts via `chat.send()`. Bot participants with persona config. Multi-model conversations.)
-- Rich media extensions: image generation, code sandbox, STT/TTS
-- Desktop app (Tauri or Electron)
-- Sidecar tier: container-based extensions
-- Federation: cross-instance package sharing
-- Plugin marketplace with signing and review
+- **LLM participation** (`llm-bridge` extension)
+- **Rich media extensions:** image generation, code sandbox, STT/TTS
+- **Desktop app** (Tauri or Electron)
+- **Sidecar tier:** container-based extensions
+- **Federation:** cross-instance package sharing
+- **Plugin marketplace** with signing and review
 
 ---
 
@@ -172,22 +188,24 @@ Then ship.
 
 | Decision | Rationale |
 |----------|-----------|
-| Tasks → extension | Scheduler was the most entangled kernel component (~3,400 lines). Rebuilding as extension validates the trigger system and removes the worst compilation debt. Three trigger primitives (time, webhook, event) replace the monolithic scheduler. |
-| Sessions removed | Kernel-managed sessions replaced by workflow instances with dedicated storage (ext_data tables or kernel table). |
-| `custom` stage mode | Stage mode `custom` delegates to a surface package, proving extension composability. Chat-in-workflow is handled by the chat extension, not the kernel. |
-| Providers removed from kernel | Provider configs, model catalog, routing policies — all moved to extension track. Kernel provides credential storage (connections) and the Starlark `provider.complete` module as the interface. |
-| Kernel permissions simplified | 6 platform permissions. Extensions define their own capability requirements in manifests. |
-| Preact+htm retained | 3KB runtime, no build step, works for extension authors without bundler config. KISS. |
-| Single Docker image | Drop the frontend/backend split. Go binary + assets + migrations in one image. Simpler deployment, fewer moving parts. |
-| Admin → RBAC group | The `role` column is pre-RBAC. v0.2.0 replaces it with a seeded "Admins" group + `surface.admin.access` grant. All users auto-join "Everyone" group. Admin middleware becomes a grant check, not a role check. |
-| Settings cascade | RBAC controls scope auth (who can set at what level). `user_overridable` flag controls whether lower scopes can override higher. Two orthogonal axes, composes cleanly with extension manifests. |
-| No new migrations pre-MVP | Edit existing migration SQL files in place. No migration chains until schema is in production. |
-| Notes over Editor | First surface is Obsidian-style notes (rich text, folders, backlinks) instead of a code editor. Notes is a stronger E2E proof — it exercises ext_data, storage, and the SDK more fully than a pure-browser CM6 editor. |
-| No built-in auto-install | Extensions ship in the repo but are not auto-installed. Distribution model TBD — explicit install only. Keeps the kernel clean and avoids opinionated defaults. |
-| Chat as extension, not kernel | Human-to-human chat built entirely as library + surface packages. Zero kernel awareness of conversations, messages, or participants. Kernel gains one generic `realtime` module. Proves near-infinite extensibility. LLM participation layers on top via a separate bridge extension — the chat system doesn't know or care whether a participant is human or AI. |
-| PG as consensus layer | Horizontal scaling uses PG as the sole coordinator (UNLOGGED node_registry + LISTEN/NOTIFY). No etcd, Consul, Redis, or Raft. Rationale: system is already tightly coupled to PG; adding a second consensus layer doubles operational complexity for zero benefit at homelab-to-small-team scale. UNLOGGED table is visible to all connections, survives session disconnect, and cleans up automatically on PG crash — correct behavior since all nodes are dead anyway. Sweep-all for health (every node deletes stale rows) is simpler than ring topology and has no edge cases. |
-| Two trigger tiers | Event + webhook triggers are extension-declared (manifest contract, full sandbox). Scheduled tasks are user-created ad-hoc (restricted sandbox — no raw HTTP, no DB table creation, connections-only outbound). Separation keeps extension contracts static and user automation safe. |
-| Scheduled task identity | Tasks run as their creator (RBAC-scoped). Admin-created tasks can opt into system context. Creator deactivation pauses the schedule. Ensures audit trail and permission boundaries. |
-| Builtin package rationale | A builtin must enhance kernel surfaces or be required to demonstrate the platform's own capabilities. **notes** — primary content surface, exercises ext_data/storage/SDK/settings/realtime fully. **chat + chat-core** — primary communication surface, proves the extensibility thesis (100% extension, zero kernel awareness). **mermaid-renderer** — docs surface uses Mermaid diagrams to explain the architecture; without it the platform's own documentation doesn't render (self-bootstrapping). **schedules** — UI for the kernel's scheduled task system; without it users can't manage cron jobs (kernel primitive UI). All others are domain features, examples, dormant, or LLM-only tools — available via registry or `BUNDLED_PACKAGES=*`. |
-| Cluster dashboard retired | `cluster-dashboard` shipped as a standalone surface package (v0.6.0) as an expedient. Health/metrics belong inside the Admin surface as a tab — shared context, no separate nav entry, no install required. Merged in v0.6.4. |
-| Block renderers decoupled from chat | `mermaid-renderer`, `katex-renderer`, `csv-table`, `diff-viewer` shipped with `"requires": ["chat"]` because renderer discovery lived inside the chat surface. These are content renderers, not chat features. v0.6.4 removes the constraint; v0.6.5 lifts renderer registration to the kernel SDK so all surfaces share it without reimplementing discovery. |
+| Tasks → extension | Three trigger primitives replace the monolithic scheduler. |
+| Sessions removed | Workflow instances with dedicated storage replace kernel sessions. |
+| `custom` stage mode | Delegates to a surface package, proving extension composability. |
+| Providers removed from kernel | Connections + Starlark `provider.complete` as the interface. |
+| Kernel permissions simplified | 6 platform permissions. Extensions define their own. |
+| Preact+htm retained | 3KB runtime, no build step, KISS. |
+| Single Docker image | Go binary + assets + migrations. |
+| Admin → RBAC group | Grant check replaces role check. |
+| Settings cascade | Scope auth + `user_overridable`. Two orthogonal axes. |
+| No new migrations pre-MVP | Proper versioned migrations post-MVP. |
+| Chat as extension, not kernel | Zero kernel awareness. Proves extensibility thesis. |
+| PG as consensus layer | UNLOGGED node_registry + LISTEN/NOTIFY. No etcd/Consul/Redis. |
+| Two trigger tiers | Extension-declared (full sandbox) vs user ad-hoc (restricted). |
+| Builtin package rationale | Must enhance kernel surfaces or demonstrate platform capabilities. |
+| Two-slot topbar model | Left slot (title/branding) + center slot (`flex: 1`, tabs/pickers). Two named slots cover every navigation pattern: simple title (Pattern A), flat tabs full-width (Pattern B), category tabs + surface-owned sidebar (Pattern C). Surfaces without sub-items get full content width; surfaces with hierarchical navigation add their own sidebar below the topbar. Shell provides the stage; surface decides the theater. |
+| All four primary surfaces migrate to shell topbar | Admin was "keep custom topbar" initially. The two-slot model makes it unnecessary — category tabs fit in the center slot, sidebar is surface-owned below. One topbar implementation replaces four. Bell + user menu + reactivity come free on every surface. |
+| Settings / Team Admin → flat tabs (Pattern B) | Both had thin sidebars (~140px) that consumed width without justification. 5–6 sections fit cleanly in topbar tabs. Full-width content is a better use of space for these surfaces. |
+| Team Admin Groups removed | 37-line read-only dead-end. Admin Groups has full CRUD. Restore when properly designed. |
+| Docs is the reference surface | Only surface with shell Topbar, bell, user menu, inline errors. Others converge. |
+| Surface runners over expanding ICD | Different test tier, different failure class. |
+| Headless E2E via Playwright | Runners produce structured JSON; Playwright navigates and reads output. |
diff --git a/VERSION b/VERSION
index 724e8d9..faef31a 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.6.18
+0.7.0
diff --git a/docs/AUDIT-surfaces.md b/docs/AUDIT-surfaces.md
new file mode 100644
index 0000000..da4b0a9
--- /dev/null
+++ b/docs/AUDIT-surfaces.md
@@ -0,0 +1,209 @@
+# Surface Audit — Settings, Admin, Team Admin, Docs
+
+## Audit Methodology
+
+For each surface: read the index.js (tab/section structure), read every
+section module, check the HTML template, trace the topbar/navigation
+pattern, identify bugs, missing features, dead ends, and legacy baggage.
+
+---
+
+## 1. Settings Surface
+
+**Files:** `src/js/sw/surfaces/settings/` (7 files, ~868 lines)
+**Template:** `surfaces/settings.html` — mounts into `#settings-mount`
+**Topbar:** Custom — back arrow + user icon + "Settings" title. No bell. No user menu.
+
+### Sections
+
+| Section | Lines | Status | Notes |
+|---------|-------|--------|-------|
+| General | 62 | ✅ OK | Default surface picker. Clean. |
+| Appearance | 78 | ✅ OK | Theme toggle (light/dark/system) + UI scale slider. |
+| Profile | 180 | ✅ OK | Display name, email, avatar upload, password change. |
+| Teams | 47 | ⚠️ Thin | Read-only list of your teams. No actions. No link to team admin. |
+| Connections | 222 | ✅ OK | Personal BYOK connection CRUD. Functional. |
+| Notifications | 96 | ✅ OK | Toggle notification types on/off. |
+
+### Issues Found
+
+| # | Severity | Issue |
+|---|----------|-------|
+| S1 | **P1** | **No notification bell.** Custom topbar renders back arrow + icon + "Settings" — no bell, no user menu dropdown. User can't see notifications or navigate to other surfaces without using the back button. |
+| S2 | **P2** | **Teams section is a dead-end.** Lists your teams with no actions — can't leave team, can't navigate to team admin, can't see team details. Just names. Should either link to team admin or show useful info. |
+| S3 | **P2** | **Back button uses sessionStorage return URL.** `sb_settings_return` stash means: open settings in a new tab → back goes to `/` (correct). But open settings from a deep link → back goes to referrer, which might be unexpected. Shell topbar with consistent home link would fix this. |
+| S4 | **P3** | **Extension config sections.** `__CONFIG_SECTIONS__` injection works but has no documentation. Extension authors don't know they can add settings sections. Needs a docs entry. |
+
+### Shell Topbar Migration
+
+Settings renders its own `settings-topbar`. With shell topbar injection:
+- **Option A (simple):** `sw.shell.topbar.hide()` and keep custom topbar. Works immediately.
+- **Option B (ideal):** Remove custom topbar. Shell topbar provides back + title + bell + user menu. Settings nav stays in the sidebar.
+- **Recommendation:** Option B. Settings topbar adds nothing the shell topbar doesn't. The back arrow just navigates to `/`.
+
+---
+
+## 2. Admin Surface
+
+**Files:** `src/js/sw/surfaces/admin/` (13 files, ~2,522 lines)
+**Template:** `surfaces/admin.html` — mounts into `#admin-mount`
+**Topbar:** Custom — favicon + "Administration" + category tabs (People/Workflows/System/Monitoring) + UserMenu component. No notification bell.
+
+### Sections
+
+| Section | Category | Lines | Status | Notes |
+|---------|----------|-------|--------|-------|
+| Users | People | 152 | ✅ OK | User list, create, edit status/role. Functional. |
+| Teams | People | 178 | ✅ OK | Team list, create, member management. |
+| Groups | People | 207 | ✅ OK | Full CRUD — create, delete, permission toggles, member add/remove. Functional but **undocumented** (see issues). |
+| Workflows | Workflows | 163 | ⚠️ | CRUD + stage editor. `sw.api.workflows.list()` — needs same error-surfacing treatment as workflow-demo. |
+| Settings | System | 242 | ✅ OK | Comprehensive: default surface, registration, banner, message bar, footer, session TTLs, vault, package registry, email test. Actually solid. |
+| Storage | System | 76 | ✅ OK | Status cards, orphan cleanup. Clean. |
+| Packages | System | 391 | ⚠️ | Core feature. Large. Package list, install, uninstall, registry browse. **User menu doesn't update after install/uninstall** (main bug Jeff reported). |
+| Connections | System | 210 | ✅ OK | Global connection CRUD. |
+| Broadcast | System | 44 | ✅ OK | Send broadcast. Minimal. |
+| Backup | System | 162 | ✅ OK | Create/restore/download/delete. Works. |
+| Health | Monitoring | 209 | ✅ OK | Runtime, DB pool, cluster, extension metrics. |
+| Audit | Monitoring | 88 | ✅ OK | Audit log viewer with pagination. |
+
+### Issues Found
+
+| # | Severity | Issue |
+|---|----------|-------|
+| A1 | **P1** | **User menu not reactive to package changes.** `UserMenu` fetches surface list once on mount (`useEffect([authenticated])`). Installing/uninstalling a package doesn't trigger re-fetch. User must refresh the page to see new surfaces in the menu. Same for role changes (adding as team-admin). |
+| A2 | **P1** | **No notification bell.** Admin topbar has category tabs + UserMenu but no NotificationBell component. |
+| A3 | **P2** | **Groups: no documentation or inline help.** Admin Groups has full CRUD but zero explanation of what groups are, what permissions mean, or how the RBAC model works. "No groups" → user creates one → sees a list of permission slugs like `surface.admin.access` with no description. Every permission should have a human-readable description. |
+| A4 | **P2** | **Workflows: silent error potential.** `sw.api.workflows.list()` — if this fails, `catch (e) { sw.toast(e.message, 'error'); }` fires a toast but leaves the list empty. Better than workflow-demo's silent swallow, but the toast disappears and the user is left with an empty list + no context. Should show inline error state. |
+| A5 | **P2** | **Packages: no post-install feedback.** After installing a package, the package list refreshes (good) but the user menu doesn't update (bad — A1). User installs Notes, doesn't see it in the menu, thinks it's broken. |
+| A6 | **P3** | **Admin topbar favicon is hardcoded.** Line 142: `<img src="${BASE}/favicon.svg">`. Should respect light/dark theme favicon swap. |
+| A7 | **P3** | **Category icon rendering is fragile.** Custom compact SVG format (`C12 12 3\|M19.4 15...`) in `CatIcon`. Works but is unmaintainable — any icon change requires understanding the custom format. Should use standard SVG paths or lucide/feather icons. |
+
+### Shell Topbar Migration
+
+Admin has the most complex custom topbar — category tabs are genuinely useful navigation. Options:
+- **Option A (recommended):** `sw.shell.topbar.hide()`. Admin keeps its custom topbar but adds NotificationBell component to its existing right-side area next to UserMenu.
+- **Option B:** Shell topbar with `sw.shell.topbar.setSlot()` for category tabs. Works but requires rethinking the layout since shell topbar has fixed structure (home | title | slot | bell | user).
+- **Recommendation:** Option A for v0.7.0. Admin's custom topbar is bespoke enough to warrant keeping. Just wire in the bell.
+
+---
+
+## 3. Team Admin Surface
+
+**Files:** `src/js/sw/surfaces/team-admin/` (7 files, ~1,119 lines)
+**Template:** `surfaces/team-admin.html` — mounts into `#team-admin-mount`
+**Topbar:** Custom — back arrow + "Team Admin: {team name}" title. No bell. No user menu.
+
+### Sections
+
+| Section | Lines | Status | Notes |
+|---------|-------|--------|-------|
+| Members | ~90 | ✅ OK | Member list, add, remove. Functional. |
+| Groups | 37 | ❌ Dead-end | Read-only "No groups" display. No create, no docs, no link to admin. |
+| Connections | ~120 | ✅ OK | Team-scoped connections. Same pattern as user/admin connections. |
+| Workflows | 723 | ⚠️ Massive | Three tabs: Workflows (CRUD + inline stage editor), Assignments (claim/release/complete), Monitor (active instances + signoff). This is 65% of the surface's code. |
+| Settings | 72 | ✅ OK | Team name + description. Clean. |
+| Activity | ~80 | ✅ OK | Audit log. Works. |
+
+### Issues Found
+
+| # | Severity | Issue |
+|---|----------|-------|
+| T1 | **P1** | **Groups is a dead-end.** 37 lines. Read-only list of team groups. No "Create Group" button. No explanation of what groups are. No link to Admin > Groups where creation actually happens. A team admin user who isn't a platform admin literally cannot create team groups. The Admin groups page supports `scope: team` but that creates a global group with team scope — it's unclear if team-admin should even see groups at all. |
+| T2 | **P1** | **Workflows "Adopt Global" — same silent-error class.** `sw.api.teams.availableWorkflows(teamId)` — if this fails, the catch fires a toast but the adopt panel shows "No global workflows available" — indistinguishable from "there genuinely aren't any" vs "the API errored." |
+| T3 | **P1** | **Workflows is disproportionately complex.** 723 lines — inline stage editor with mode/type selectors, SLA fields, stage reordering, team role assignment per stage. This is a full workflow designer embedded in a tab. It works but it's a maintenance burden and the UX is dense. Question: should this complexity live here or be a separate workflow-designer surface? |
+| T4 | **P1** | **No notification bell.** Same as Settings — custom topbar with no bell. |
+| T5 | **P2** | **No user menu.** Unlike Admin (which renders UserMenu), Team Admin has no user menu in its topbar. User can't navigate to other surfaces except via the back button. |
+| T6 | **P2** | **Signoff panel shows raw user_id.** Line 714: `<span>${s.user_id}</span>` — shows UUID instead of display name. Should use `sw.users.displayName(s.user_id)`. |
+| T7 | **P3** | **Back button uses sessionStorage.** Same pattern as Settings (`sb_team_admin_return`). Shell topbar would fix. |
+
+### Shell Topbar Migration
+
+Team Admin has a simple topbar (back + title). Direct replacement:
+- Shell topbar provides: home link + "Team Admin: {name}" title + bell + user menu.
+- Team name from `sw.api.teams.get(teamId)` → `sw.shell.topbar.setTitle('Team Admin: ' + team.name)`.
+- Delete the custom topbar entirely.
+
+---
+
+## 4. Docs Surface
+
+**Files:** `src/js/sw/surfaces/docs/` (1 file, 313 lines)
+**Template:** `surfaces/docs.html` — mounts into `#docs-mount`
+**Topbar:** Imports and renders `shell/topbar.js` (the SDK Topbar component). **Only surface that uses the shell Topbar.**
+
+### Features
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Document list sidebar | ✅ OK | Fetches from `/api/v1/docs`, renders nav links. |
+| Markdown rendering | ✅ OK | Uses `sw.markdown.renderSync()` + post-renderers (mermaid, katex). |
+| Document outline | ✅ OK | Parses H1-H4 from markdown, renders table of contents. |
+| Search | ✅ OK | Filters documents in sidebar. |
+| URL updates | ✅ OK | `history.replaceState` on doc change. |
+| Topbar | ✅ OK | Uses shell `Topbar` component — has title, bell, user menu. |
+
+### Issues Found
+
+| # | Severity | Issue |
+|---|----------|-------|
+| D1 | **P2** | **Stale content.** The docs themselves may be outdated — GETTING-STARTED, EXTENSION-GUIDE, API-REFERENCE, DEPLOYMENT, PACKAGE-FORMAT were written in v0.6.1. 18 versions later, some content is likely stale. Needs a content review pass. |
+| D2 | **P3** | **No docs for RBAC/Groups.** Admin Groups exists with full CRUD but there's no documentation explaining the permission model, what each permission slug means, how groups interact with teams, or how the settings cascade works. This directly causes the "groups WTF" reaction. |
+| D3 | **P3** | **No docs for Workflows.** The workflow engine is complex (multi-stage, team roles, signoff gates, SLA, public entry) but has no user-facing documentation. `DESIGN-WORKFLOWS.md` exists but is a design doc, not a user guide. |
+| D4 | **P3** | **Shell topbar migration.** Docs already imports `shell/topbar.js` — when shell topbar injection lands, Docs will get a double topbar. Needs migration: delete the import, let shell topbar handle it. Docs currently passes no custom slot content, so it's a pure delete. |
+
+---
+
+## Cross-Surface Issues
+
+These affect multiple or all surfaces:
+
+| # | Severity | Issue | Surfaces |
+|---|----------|-------|----------|
+| X1 | **P0** | **User menu not reactive.** Package install/uninstall, role changes, team membership changes — none trigger a menu refresh. User must reload the page. | All (via UserMenu component) |
+| X2 | **P1** | **No notification bell on 3/4 surfaces.** Only Docs has a bell (via Topbar import). Settings, Admin, and Team Admin all lack it. | Settings, Admin, Team Admin |
+| X3 | **P1** | **No user menu on 2/4 surfaces.** Settings and Team Admin have no user menu at all. Admin and Docs have one. | Settings, Team Admin |
+| X4 | **P2** | **Every surface has its own topbar.** Four different topbar implementations. None use the (not-yet-existing) shell topbar injection. Shell topbar (v0.7.0) eliminates this duplication. | All |
+| X5 | **P2** | **Silent error swallowing.** Multiple sections use `catch (e) { toast }` which fires a toast and leaves an empty/stale UI. Toast disappears after seconds; user is left confused. Every list endpoint needs an inline error state with retry. | Admin Workflows, Team Admin Workflows, Packages |
+| X6 | **P2** | **Empty states provide no guidance.** "No groups", "No workflows", "No notifications" — no explanation of what the feature is, why it's empty, or what action to take. Every empty state should have a one-line explanation and a primary action (create, link to docs, etc.). | Admin Groups, Team Admin Groups, Workflows |
+| X7 | **P3** | **Raw IDs in UI.** Team Admin signoff panel shows `user_id` UUIDs. Any surface showing IDs should resolve via `sw.users.displayName()`. | Team Admin Workflows |
+
+---
+
+## Recommendations
+
+### Immediate (fold into v0.7.0)
+
+1. **User menu reactivity** — emit `package.changed` and `auth.changed` events over WS + local custom events. UserMenu listens and re-fetches surface list. This is the single most impactful fix.
+
+2. **Shell topbar migration for Settings + Team Admin** — both have simple topbars that the shell topbar directly replaces. Docs deletes its Topbar import. Admin keeps its custom topbar but adds NotificationBell.
+
+3. **Remove Team Admin Groups tab** — it's 37 lines of dead-end. Team-scoped group management should either (a) be added properly with create/edit/delete or (b) removed until it's properly designed. Showing "No groups" with no path forward is worse than not showing the tab.
+
+4. **Error states** — replace `catch { toast }` with inline error + retry UI on every list endpoint. Systematic pass across all four surfaces.
+
+5. **Empty state copy** — every "No X" message gets a one-line explanation + primary action button or doc link.
+
+### Deferred (v0.7.1+ / runner coverage)
+
+6. **Admin Groups documentation** — write a "Permissions & Groups" doc for the docs surface. Explain the RBAC model, list all permission slugs with descriptions, explain group scoping.
+
+7. **Workflow user guide** — write a "Workflows" doc. Entry modes, stage types, team roles, signoff gates, SLA.
+
+8. **Team Admin Workflows simplification** — the 723-line inline stage editor is the most complex piece of UI in the entire application. Consider extracting to a dedicated workflow-designer surface or at minimum breaking into separate files.
+
+9. **Docs content refresh** — review all 5 docs for accuracy at v0.6.18+.
+
+10. **Settings Teams section** — either add useful actions (link to team admin, show team role, leave team) or remove the tab.
+
+---
+
+## Asset Inventory
+
+| Surface | Lines (total) | Sections | Custom Topbar | Bell | UserMenu | Error Handling |
+|---------|--------------|----------|---------------|------|----------|---------------|
+| Settings | 868 | 6 | Yes (back+icon) | ❌ | ❌ | Toast only |
+| Admin | 2,522 | 12 | Yes (tabs+menu) | ❌ | ✅ | Toast only |
+| Team Admin | 1,119 | 6 | Yes (back+title) | ❌ | ❌ | Toast only |
+| Docs | 313 | 1 | Shell Topbar ✅ | ✅ | ✅ | Inline error ✅ |
+
+Docs is the gold standard. The other three need to converge toward its pattern.
diff --git a/docs/DESIGN-shell-contract.md b/docs/DESIGN-shell-contract.md
new file mode 100644
index 0000000..a327f66
--- /dev/null
+++ b/docs/DESIGN-shell-contract.md
@@ -0,0 +1,448 @@
+# DESIGN: Shell Contract — v0.7.0
+
+## Status: Proposed
+
+## Problem
+
+Extension surfaces render into `#extension-mount` with no shell chrome.
+A full audit (docs/AUDIT-surfaces.md) found: 3/4 primary surfaces lack a
+notification bell, 2/4 lack a user menu, 4 different topbar implementations,
+user menu never updates on package/role changes, toast-and-forget error
+handling, and empty states that explain nothing.
+
+## Solution
+
+### 1. Shell Topbar — Two-Slot Model
+
+The kernel injects a topbar for all extension surfaces. Two named slots
+(left + center) let surfaces customize without replacing the entire bar.
+
+**Layout:**
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  ←  │ [left]        │  [center: flex-1]         │ 🔔 │ 👤  │
+└──────────────────────────────────────────────────────────────┘
+```
+
+- **← (home):** Always visible. Navigates to `__BASE__/`. Simple `<a>`.
+- **Left slot:** Defaults to manifest title. Surfaces override with `setLeft()`.
+- **Center slot:** Empty by default. Surfaces inject tabs, search, pickers.
+  `flex: 1` — expands to fill available space.
+- **Bell + User Menu:** Always visible. Kernel-managed.
+
+**Template change** (`surfaces/extension.html`):
+
+```html
+{{define "surface-extension"}}
+<div id="extension-surface" class="extension-surface"
+     data-surface-id="{{.Surface}}">
+    <div id="shell-topbar" class="sw-topbar sw-topbar--shell"></div>
+    <div id="extension-mount" class="extension-mount" data-ext="{{.Surface}}"></div>
+</div>
+{{end}}
+```
+
+**SDK API:**
+
+```js
+sw.shell.topbar.setLeft(vnode)      // Override left slot (default: title)
+sw.shell.topbar.setSlot(vnode)      // Set center slot content
+sw.shell.topbar.setTitle(str)       // Shorthand: setLeft with plain text
+sw.shell.topbar.hide()              // Remove topbar entirely
+sw.shell.topbar.show()              // Restore after hiding
+```
+
+### 2. Three Navigation Patterns
+
+The shell topbar provides the top bar. What happens below it is the
+surface's business. Three patterns emerge naturally:
+
+#### Pattern A — Default (simple extensions, Docs)
+
+```
+┌──────────────────────────────────────────┐
+│  ←  │  Surface Title        │  🔔 │ 👤  │
+├──────────────────────────────────────────┤
+│                                          │
+│           Content (full width)           │
+│                                          │
+└──────────────────────────────────────────┘
+```
+
+Title only, no tabs, no sidebar. Content gets everything.
+Zero code required — kernel defaults handle it.
+
+**Used by:** Docs, Notes, Chat, simple extensions.
+
+#### Pattern B — Flat Tabs (no sidebar, full width)
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  ←  │ Title │ Tab1 │ Tab2 │ Tab3 │ Tab4 │    │  🔔 │ 👤 │
+├──────────────────────────────────────────────────────────┤
+│                                                          │
+│              Content (full width, no sidebar)            │
+│                                                          │
+└──────────────────────────────────────────────────────────┘
+```
+
+Tabs in the topbar center slot. No sidebar — content fills the full
+viewport width. For surfaces with 3–7 sections that don't have sub-items.
+More real estate for content than a sidebar layout.
+
+**Surface code:**
+
+```js
+sw.shell.topbar.setSlot(html`
+    <div class="sw-topbar__tabs">
+        ${sections.map(s => html`
+            <a class="sw-topbar__tab ${active === s.key ? 'active' : ''}"
+               href=${s.href} onClick=${navigate}>${s.label}</a>
+        `)}
+    </div>
+`);
+```
+
+**Used by:** Team Admin (Members / Connections / Workflows / Settings / Activity),
+Settings, Schedules.
+
+#### Pattern C — Category Tabs + Sidebar (two-level)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  ←  │ Title │ People │ Workflows │ System │ Mon │ 🔔 │ 👤  │
+├──────────┬──────────────────────────────────────────────────┤
+│ Users    │                                                  │
+│ Teams    │         Content                                  │
+│ Groups   │                                                  │
+│          │                                                  │
+└──────────┴──────────────────────────────────────────────────┘
+```
+
+Major categories in the topbar (via center slot). Surface renders its own
+sidebar inside the content area for sub-navigation within the active
+category. The shell topbar doesn't know about the sidebar — it's a
+surface-level div below `#extension-mount`.
+
+**Surface code:**
+
+```js
+// Topbar: major categories
+sw.shell.topbar.setLeft(html`
+    <img src="${BASE}/favicon.svg" width="18" height="18" style="vertical-align:-3px" />
+    <span style="margin-left:6px">Administration</span>
+`);
+sw.shell.topbar.setSlot(html`
+    <div class="sw-topbar__tabs">
+        ${categories.map(c => html`
+            <a class="sw-topbar__tab ${activeCat === c.key ? 'active' : ''}"
+               href=${c.href} onClick=${navigate}>
+                <${CatIcon} paths=${c.icon} /> ${c.label}
+            </a>
+        `)}
+    </div>
+`);
+
+// Content area: sidebar is surface-owned
+return html`
+    <div class="admin-body">
+        <div class="admin-nav">
+            ${sidebarSections.map(s => html`...`)}
+        </div>
+        <div class="admin-content">
+            <${SectionComponent} />
+        </div>
+    </div>
+`;
+```
+
+**Used by:** Admin.
+
+### 3. Kernel-Provided Tab CSS
+
+The kernel provides `.sw-topbar__tabs` and `.sw-topbar__tab` CSS so
+surfaces get consistent tab styling. Not required — surfaces can style
+their own slot content however they want.
+
+```css
+.sw-topbar__tabs {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-1);
+    height: 100%;
+}
+
+.sw-topbar__tab {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-3);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-2);
+    text-decoration: none;
+    border-radius: var(--radius-sm);
+    transition: color var(--transition), background var(--transition);
+    white-space: nowrap;
+}
+
+.sw-topbar__tab:hover {
+    color: var(--text);
+    background: var(--bg-hover);
+}
+
+.sw-topbar__tab.active {
+    color: var(--text);
+    background: var(--bg-2);
+}
+```
+
+### 4. Primary Surface Migrations
+
+#### Settings → Pattern B (flat tabs)
+
+Currently: custom topbar (back + icon + "Settings"), sidebar nav.
+After: shell topbar with flat tabs, no sidebar. Content full width.
+
+Settings has 6 sections (General / Appearance / Profile / Teams /
+Connections / Notifications) — perfect for flat tabs. The sidebar was
+thin (~140px) and ate width from the content area for no good reason.
+
+**Migration:**
+- Delete `settings-topbar` div and CSS.
+- Delete sidebar nav. Move section links into `sw.shell.topbar.setSlot()`.
+- Remove `sb_settings_return` sessionStorage — shell home link handles it.
+- Content area becomes full-width.
+- Fix Teams section: add "Open Team Admin →" link, show role, add leave action.
+
+Extension config sections (`__CONFIG_SECTIONS__`) render as additional
+tabs after the divider. Same as today, just in the topbar instead of sidebar.
+
+#### Admin → Pattern C (category tabs + sidebar)
+
+Currently: custom topbar (favicon + "Administration" + category tabs + UserMenu).
+After: shell topbar with category tabs in center slot, surface-owned sidebar.
+
+**Migration:**
+- Delete custom `admin-topbar` div and CSS.
+- `sw.shell.topbar.setLeft()` with favicon + "Administration".
+- `sw.shell.topbar.setSlot()` with category tabs (People / Workflows / System / Monitoring).
+- Bell and user menu come from the shell — delete the explicit `<${UserMenu}>`.
+- Admin sidebar and content area unchanged — they're below the topbar.
+- Delete custom `CatIcon` renderer if category tab icons use standard SVG.
+- Fix hardcoded `favicon.svg` — left slot can use theme-aware image.
+
+**Result:** Admin looks identical to today but its topbar is kernel-managed.
+Bell added for free. User menu reactive for free.
+
+#### Team Admin → Pattern B (flat tabs)
+
+Currently: custom topbar (back + "Team Admin: {name}"), sidebar nav.
+After: shell topbar with flat tabs, no sidebar.
+
+With Groups removed, Team Admin has 5 sections: Members / Connections /
+Workflows / Settings / Activity. Perfect for flat tabs.
+
+**Migration:**
+- Delete `team-admin-topbar` div and CSS.
+- `sw.shell.topbar.setTitle('Team Admin: ' + team.name)` after team fetch.
+- Section tabs into `sw.shell.topbar.setSlot()`.
+- Delete sidebar nav. Content full-width.
+- Remove `sb_team_admin_return` sessionStorage.
+- Remove Groups tab entirely (37-line dead-end).
+- Fix signoff display: `user_id` → `sw.users.displayName()`.
+
+#### Docs → Pattern A (default)
+
+Currently: imports `shell/topbar.js` and renders it explicitly.
+After: shell topbar auto-renders. No surface code needed.
+
+**Migration:**
+- Delete `import { Topbar }` and `<${Topbar}>` render.
+- Shell topbar provides title + bell + user menu automatically.
+- Docs sidebar (document list) is in the content area, unaffected.
+
+### 5. User Menu Reactivity
+
+**The single most impactful fix.**
+
+**Backend — new WS events:**
+
+```go
+// After package install/uninstall/enable/disable:
+h.hub.BroadcastToUser(userID, "package.changed", map[string]string{
+    "action": "installed", "id": packageID,
+})
+
+// After team role/membership change:
+h.hub.BroadcastToUser(userID, "auth.changed", map[string]string{
+    "reason": "team_role",
+})
+```
+
+**Frontend** (`user-menu.js`):
+
+```js
+useEffect(() => {
+    if (!sw?.api?.surfaces?.list) return;
+
+    function fetchSurfaces() {
+        sw.api.surfaces.list().then(data => {
+            const raw = Array.isArray(data) ? data : data?.data || [];
+            setAllSurfaces(raw);
+        }).catch(() => {});
+    }
+
+    fetchSurfaces();
+
+    const off1 = sw.on?.('package.changed', fetchSurfaces);
+    const off2 = sw.on?.('auth.changed', fetchSurfaces);
+
+    return () => {
+        if (typeof off1 === 'function') off1();
+        if (typeof off2 === 'function') off2();
+    };
+}, [authenticated]);
+```
+
+**Event inventory:**
+
+| Event | Trigger | Payload |
+|-------|---------|---------|
+| `package.changed` | Install, uninstall, enable, disable | `{ action, id }` |
+| `auth.changed` | Team role change, group membership change | `{ reason }` |
+| `notification.read` | Mark notification read | `{ id }` |
+| `notification.all_read` | Mark all read | `{}` |
+
+### 6. Notification Read Broadcast
+
+**Backend** — after `MarkRead()` / `MarkAllRead()`:
+
+```go
+h.hub.BroadcastToUser(userID, "notification.read", map[string]string{"id": id})
+h.hub.BroadcastToUser(userID, "notification.all_read", nil)
+```
+
+**Frontend** — `NotificationBell` listens for `.created`, `.read`, `.all_read`:
+
+```js
+const onRead = (e) => {
+    setNotifications(prev => prev.map(n =>
+        n.id === e.id ? { ...n, read_at: new Date().toISOString() } : n
+    ));
+};
+const onAllRead = () => {
+    setNotifications(prev => prev.map(n => ({
+        ...n, read_at: n.read_at || new Date().toISOString()
+    })));
+};
+```
+
+### 7. Shell Announcement Global Dismiss
+
+On dismiss, write: `localStorage.setItem('armature_dismissed_' + hash(text), '1')`.
+On mount, check. New announcements (changed text) show again.
+
+Implementation: inline `<script>` in `base.html` — checks localStorage on
+DOMContentLoaded. Dismiss button writes the key. Works on every surface
+including login.
+
+### 8. Error Handling Pass
+
+**Pattern** — inline error + retry replaces toast-and-forget:
+
+```js
+const [error, setError] = useState(null);
+
+async function load() {
+    setError(null);
+    try {
+        const data = await sw.api.whatever.list();
+        setItems(data || []);
+    } catch (e) { setError(e.message); }
+}
+
+// In render:
+${error && html`
+    <div class="sw-inline-error">
+        <span>${error}</span>
+        <button class="sw-btn sw-btn--secondary sw-btn--sm"
+                onClick=${load}>Retry</button>
+    </div>
+`}
+```
+
+**New CSS class** (`sw-primitives.css`):
+
+```css
+.sw-inline-error {
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-3) var(--sp-4);
+    background: var(--bg-2); border: 1px solid var(--danger);
+    border-radius: var(--radius); font-size: 13px; color: var(--danger);
+}
+```
+
+**Sections requiring this pass:**
+
+| Surface | Section | Current | After |
+|---------|---------|---------|-------|
+| Admin | Workflows | Toast + empty | Inline error + retry |
+| Admin | Packages | Toast + empty | Inline error + retry |
+| Admin | Groups | Toast + empty | Inline error + retry |
+| Team Admin | Workflows (adopt) | Toast + "No global workflows" | Inline error + retry |
+| Team Admin | Members | Toast + empty | Inline error + retry |
+| Settings | General | Console warn | Inline error + retry |
+| Settings | Teams | Toast + empty | Inline error + retry |
+| Workflow Demo (pkg) | Main | Silent swallow | Inline error + retry |
+
+### 9. Empty State Guidance
+
+Every "No X" empty state gets: one-line explanation, primary action or doc link.
+
+| Surface | Section | Current | After |
+|---------|---------|---------|-------|
+| Admin | Groups | "No groups" | "Groups control access to surfaces and features via permissions." + Create button |
+| Admin | Workflows | "No workflows" | "Workflows define multi-stage approval processes with team roles and SLA tracking." + Create button |
+| Admin | Teams | "No teams" | "Teams group users for shared connections, workflows, and access control." + Create button |
+| Team Admin | Workflows | "No workflows — create one or adopt" | Add: "Adopt copies a global workflow for this team to customize." |
+| Settings | Notifications | "No notification preferences" | "Preferences appear when notification types are configured by an administrator." |
+
+## Rebrand Asset Inventory
+
+### Current → Target
+
+| File | Current | Target |
+|------|---------|--------|
+| `favicon.svg` | Dark icon ✅ | Unchanged |
+| `favicon-light.svg` | **MISNAMED** (520×80 wordmark) | Square icon, light mode **(NEW)** |
+| `favicon-32.png` | Dark raster ✅ | Unchanged |
+| `favicon-256.png` | Dark raster ✅ | Unchanged |
+| `favicon-light-32.png` | Missing | Light raster **(NEW)** |
+| `favicon-light-256.png` | Missing | Light raster **(NEW)** |
+| `favicon.ico` | Dark ✅ | Unchanged |
+| `wordmark.svg` | Missing | **RENAMED** from current `favicon-light.svg` |
+| `wordmark-dark.svg` | Missing | Light text #E5E5E5 on transparent **(NEW)** |
+| `manifest.json` | "Self-hosted AI chat..." | "Self-hosted extension platform..." |
+
+## Bug Fixes (bundled)
+
+- **evil-chat:** `finally` cleanup + tighten `409` assertion.
+- **Workflow demo:** Silent `catch` → inline error + retry.
+- **Hello dashboard:** Delete `packages/hello-dashboard/`.
+
+## Changeset Plan
+
+| CS | Scope | Description |
+|----|-------|-------------|
+| CS-1 | Backend (Go) | WS events: `notification.read`, `notification.all_read`, `package.changed`, `auth.changed`. Tests. |
+| CS-2 | Frontend (JS + HTML) | Shell topbar component, SDK API (`setLeft`/`setSlot`/`setTitle`/`hide`), extension.html template, SDK boot auto-mount. |
+| CS-3 | Frontend (JS) | User menu reactivity: listen for `package.changed` + `auth.changed`. Notification bell: listen for `.read` + `.all_read`. |
+| CS-4 | Frontend (JS + HTML) | Surface migrations: Settings → Pattern B, Admin → Pattern C, Team Admin → Pattern B, Docs → Pattern A. Delete custom topbars. |
+| CS-5 | Frontend (JS + CSS) | Error handling pass + empty state guidance. `sw-inline-error` CSS. All sections from inventory. |
+| CS-6 | Frontend (JS) | Announcement global dismiss (localStorage). |
+| CS-7 | Static + docs | Rebrand assets, manifest.json, REBRAND-SPEC.md. |
+| CS-8 | Frontend (JS) | Bug fixes: evil-chat cleanup, workflow demo error, hello-dashboard deletion. |
+
+Each changeset independently CI-green.
diff --git a/docs/DESIGN-surface-runners.md b/docs/DESIGN-surface-runners.md
new file mode 100644
index 0000000..139511d
--- /dev/null
+++ b/docs/DESIGN-surface-runners.md
@@ -0,0 +1,407 @@
+# DESIGN: Surface Runners — v0.7.1–v0.7.3
+
+## Status: Proposed
+
+## Problem
+
+Armature has two test tiers today:
+
+1. **Go unit tests** — test store methods, handlers, middleware, sandbox.
+   Run in CI on every push. Coverage is good for kernel internals.
+
+2. **ICD/SDK test runners** — browser-based test suites that validate API
+   endpoint contracts and SDK domain methods. Run manually by navigating
+   to `/s/icd-test-runner` or `/s/sdk-test-runner`.
+
+Neither tier catches the class of bugs discovered during manual testing:
+
+- **Cross-surface state:** Notification bell state not syncing, announcement
+  dismiss not persisting across surface navigations.
+- **Package integration:** Workflow demo shows "not installed" because its
+  API call fails silently. The API works (unit tests pass); the surface's
+  integration with the API is broken.
+- **Test side-effects:** ICD security tests install `evil.surface` with no
+  cleanup — it leaks into the menu.
+- **Surface lifecycle:** Surfaces fail to load, mount into wrong containers,
+  miss SDK boot, or render without shell chrome.
+
+These are integration bugs — they live at the boundary between kernel and
+package, between surface and surface, between API and UI. They require a
+new test tier.
+
+## Solution Overview
+
+Three deliverables across three versions:
+
+| Version | Deliverable | What it catches |
+|---------|-------------|-----------------|
+| v0.7.1 | Runner framework (`sw.testing`) | Framework bugs, standardizes existing runners |
+| v0.7.2 | Package runners + CI gate | Package integration bugs, regressions |
+| v0.7.3 | Headless E2E (Playwright) | DOM rendering bugs, navigation flows, visual regressions |
+
+## v0.7.1 — Runner Framework
+
+### `sw.testing` SDK Module
+
+New kernel SDK module at `src/js/sw/sdk/testing.js`. Provides structured
+test authoring, lifecycle hooks, cleanup tracking, and machine-readable
+results.
+
+```js
+// Extension runner registers suites during load
+sw.testing.suite('notes-crud', async (s) => {
+    let folderId, noteId;
+
+    s.beforeAll(async () => {
+        // Setup: create a test folder
+        const r = await sw.api.post('/api/v1/ext/notes/folders', {
+            name: 'test-' + Date.now()
+        });
+        folderId = r.id;
+        s.track('folder', folderId); // auto-cleanup
+    });
+
+    s.test('create note', async (t) => {
+        const r = await sw.api.post('/api/v1/ext/notes/notes', {
+            title: 'Test Note', folder_id: folderId, content: '# Hello'
+        });
+        t.assert.ok(r.id, 'note has ID');
+        t.assert.eq(r.title, 'Test Note');
+        noteId = r.id;
+        t.track('note', noteId); // auto-cleanup
+    });
+
+    s.test('renderers fire', async (t) => {
+        // Test that mermaid block in note content triggers renderer
+        await sw.api.patch('/api/v1/ext/notes/notes/' + noteId, {
+            content: '```mermaid\ngraph LR; A-->B\n```'
+        });
+        // Renderer integration tested via DOM assertion
+        // (only meaningful in headless E2E — marked as browser-only)
+        t.browserOnly(() => {
+            const el = document.querySelector('.mermaid svg');
+            t.assert.ok(el, 'mermaid rendered to SVG');
+        });
+    });
+
+    s.afterAll(async () => {
+        // s.track() resources auto-cleaned here
+        // Manual cleanup for anything not tracked
+    });
+});
+```
+
+### Core API
+
+```js
+sw.testing.suite(name, fn)        // Register a test suite
+sw.testing.run(name?)             // Run one suite or all
+sw.testing.results()              // Get structured results (JSON)
+sw.testing.on('complete', fn)     // Event when run finishes
+
+// Inside suite:
+s.test(name, fn)                  // Register a test
+s.beforeAll(fn)                   // Runs once before all tests
+s.afterAll(fn)                    // Runs once after all tests (always, even on failure)
+s.beforeEach(fn)                  // Runs before each test
+s.afterEach(fn)                   // Runs after each test
+s.track(type, id)                 // Register resource for auto-cleanup
+s.skip(reason)                    // Skip entire suite
+
+// Inside test:
+t.assert.ok(val, msg)             // Truthy
+t.assert.eq(a, b, msg)           // Deep equality
+t.assert.neq(a, b, msg)          // Not equal
+t.assert.gt(a, b, msg)           // Greater than
+t.assert.match(str, re, msg)     // Regex match
+t.assert.throws(fn, msg)         // Expects throw
+t.assert.status(resp, code, msg) // HTTP status check
+t.track(type, id)                // Register resource for auto-cleanup
+t.warn(msg)                      // Emit warning (non-fatal)
+t.browserOnly(fn)                // Only runs in headless E2E, skipped in API-only mode
+t.skip(reason)                   // Skip this test
+```
+
+### `requires` Declarations
+
+Runner packages declare dependencies in their manifest:
+
+```json
+{
+    "id": "chat-runner",
+    "type": "test-runner",
+    "title": "Chat Runner",
+    "requires": ["chat", "chat-core"],
+    "version": "0.1.0"
+}
+```
+
+On load, the framework calls `GET /api/v1/surfaces` (or equivalent) to
+check which packages are installed. If any `requires` entry is missing:
+
+- Suite is marked `skipped` with reason: `"Missing required package: chat-core"`
+- No tests execute — clean skip, not a failure
+- The runner registry surface shows the skip reason prominently
+
+This directly solves the "workflow demo shows not-installed" pattern:
+the runner *knows* what should be installed and reports clearly when it isn't.
+
+### Auto-Cleanup
+
+The `track(type, id)` method registers resources for deletion in `afterAll`.
+Supported resource types and their cleanup endpoints:
+
+| Type | Cleanup Action |
+|------|---------------|
+| `channel` | `DELETE /api/v1/channels/:id` |
+| `note` | `DELETE /api/v1/ext/notes/notes/:id` |
+| `folder` | `DELETE /api/v1/ext/notes/folders/:id` |
+| `workflow` | `DELETE /api/v1/workflows/:id` |
+| `schedule` | `DELETE /api/v1/schedules/:id` |
+| `package` | `DELETE /api/v1/admin/packages/:id` |
+| `user` | `DELETE /api/v1/admin/users/:id` |
+| `team` | `DELETE /api/v1/admin/teams/:id` |
+
+Cleanup runs in reverse order (LIFO) in `afterAll`, regardless of
+test pass/fail. Cleanup failures are reported as warnings, not failures.
+The framework never swallows cleanup errors silently.
+
+### Result Structure
+
+```json
+{
+    "runner": "notes-runner",
+    "timestamp": "2026-04-01T12:00:00Z",
+    "duration_ms": 1234,
+    "summary": { "total": 5, "passed": 4, "failed": 0, "warned": 1, "skipped": 0 },
+    "suites": [
+        {
+            "name": "notes-crud",
+            "status": "passed",
+            "duration_ms": 890,
+            "tests": [
+                {
+                    "name": "create note",
+                    "status": "passed",
+                    "duration_ms": 120,
+                    "warnings": [],
+                    "cleanup": { "tracked": 1, "cleaned": 1, "failed": 0 }
+                }
+            ]
+        }
+    ],
+    "requires": { "met": ["notes"], "missing": [] }
+}
+```
+
+### Warning Tier
+
+Three result statuses:
+
+- **`passed`** — assertions all passed, cleanup succeeded
+- **`failed`** — at least one assertion failed
+- **`warned`** — assertions passed but something non-fatal happened:
+  - API returned unexpected shape (extra/missing fields) but test doesn't depend on the exact field
+  - Cleanup failed for a tracked resource
+  - Timing exceeded a soft threshold
+  - `t.warn(msg)` called explicitly
+
+Warnings are **never silent.** They appear in the UI and structured results.
+The difference from the current `catch (e) { /* ignore */ }` pattern is
+that warnings are *visible* — a human or CI system can decide whether
+to investigate.
+
+### ICD/SDK Runner Migration
+
+The existing runners use a hand-rolled framework (`T.test()`, `T.assert()`,
+`T.authFetch()`). Migration preserves all test logic:
+
+| Current | New |
+|---------|-----|
+| `T.test(tier, group, name, fn)` | `s.test(name, fn)` inside `sw.testing.suite(tier + '/' + group, fn)` |
+| `T.assert(cond, msg)` | `t.assert.ok(cond, msg)` |
+| `T.authFetch(token, method, path, body)` | Kept as utility — not an assertion primitive |
+| `T.apiPost(...)` | Kept as utility |
+| Result rendering (`ui.js`) | Delegated to runner registry surface |
+| No cleanup hooks | `s.track()` + `s.afterAll()` |
+
+The ICD and SDK runners become packages with `"type": "test-runner"` in
+their manifests. Their existing surfaces (`/s/icd-test-runner`,
+`/s/sdk-test-runner`) are replaced by the unified runner registry at
+`/s/test-runners`.
+
+## v0.7.2 — Package Runners
+
+### Runner Inventory
+
+| Runner | `requires` | Key Assertions |
+|--------|-----------|---------------|
+| `notes-runner` | `["notes"]` | CRUD, folders, tags, backlinks, search, markdown rendering, SDK integration |
+| `chat-runner` | `["chat", "chat-core"]` | Channel CRUD, messaging, participant display, renderer blocks in messages |
+| `schedules-runner` | `["schedules"]` | Schedule CRUD, cron expression, toggle, Starlark exec |
+| `workflow-runner` | `["content-approval"]` | Install detection, stage progression, form submission, signoff |
+| `renderer-runner` | `["mermaid-renderer"]` | `sw.renderers.register` contract, post-render hooks, block rendering |
+
+### Runner Result API
+
+New kernel endpoints (no package required — kernel-provided):
+
+```
+POST /api/v1/test-runners/run          → Run all installed runners
+POST /api/v1/test-runners/run/:id      → Run specific runner
+GET  /api/v1/test-runners/results      → Last run results (JSON)
+GET  /api/v1/test-runners/results/:id  → Last run results for specific runner
+```
+
+These endpoints enable CI to trigger and consume runner results via
+`curl` without browser automation. The v0.7.3 Playwright harness is
+additive — not required for CI gating.
+
+**Auth:** Admin-only. Runners create/delete resources — they must run
+with elevated permissions.
+
+### CI Integration
+
+New stage in `.gitea/workflows/ci.yaml`:
+
+```yaml
+test-runners:
+    needs: [unit-tests]
+    steps:
+        - name: Boot server
+          run: |
+              docker compose up -d
+              ./ci/wait-for-healthy.sh
+        - name: Run surface runners
+          run: |
+              RESULT=$(curl -s -X POST http://localhost:8080/api/v1/test-runners/run \
+                  -H "Authorization: Bearer $ADMIN_TOKEN")
+              FAILED=$(echo "$RESULT" | jq '.summary.failed')
+              if [ "$FAILED" != "0" ]; then
+                  echo "$RESULT" | jq '.suites[] | select(.status == "failed")'
+                  exit 1
+              fi
+```
+
+Runs in both PG and SQLite pipelines. Server boots with `BUNDLED_PACKAGES=*`
+so all packages and their runners are installed.
+
+## v0.7.3 — Headless E2E
+
+### Playwright Harness
+
+`ci/e2e-surface-test.sh`:
+
+1. `docker compose up -d` (server + DB)
+2. `npx playwright install chromium` (CI caches this)
+3. Run `ci/e2e-surfaces.spec.ts`
+4. Collect screenshots on failure
+5. `docker compose down`
+
+### Surface Navigation Smoke Test
+
+```ts
+test('all surfaces reachable', async ({ page }) => {
+    // Login
+    await page.goto('/');
+    await page.fill('#username', 'admin');
+    await page.fill('#password', 'admin');
+    await page.click('button[type="submit"]');
+
+    // Navigate through every installed surface
+    const surfaces = ['notes', 'chat', 'admin', 'settings', 'docs'];
+    for (const s of surfaces) {
+        await page.goto(`/s/${s}`);
+        // Assert: page loaded, no uncaught JS errors
+        await expect(page.locator('.sw-topbar')).toBeVisible();
+        // Assert: home link works
+        await page.click('.sw-topbar__home');
+        await expect(page).toHaveURL('/');
+    }
+});
+```
+
+This is the automated version of "hello dashboard has no way out" — if
+any surface fails to render a topbar or its home link doesn't work, CI
+catches it.
+
+### Screenshot on Failure
+
+```ts
+test.afterEach(async ({ page }, testInfo) => {
+    if (testInfo.status !== 'passed') {
+        await page.screenshot({
+            path: `ci/artifacts/failure-${testInfo.title}.png`,
+            fullPage: true
+        });
+        const logs = await page.evaluate(() =>
+            (window.__consoleErrors || []).join('\n')
+        );
+        fs.writeFileSync(
+            `ci/artifacts/console-${testInfo.title}.log`, logs
+        );
+    }
+});
+```
+
+Artifacts saved to CI workspace. On failure, the developer gets a
+screenshot + console log dump without needing to reproduce locally.
+
+### Visual Regression (Optional)
+
+Not a CI gate in v0.7.3 — produces a diff report for human review:
+
+```ts
+test('visual baseline - notes', async ({ page }) => {
+    await page.goto('/s/notes');
+    await expect(page.locator('.sw-topbar')).toBeVisible();
+    await expect(page).toHaveScreenshot('notes.png', {
+        maxDiffPixelRatio: 0.01
+    });
+});
+```
+
+Playwright stores baseline screenshots in `ci/visual-baselines/`.
+`toHaveScreenshot` compares against baseline and produces a diff image
+on mismatch. Foundation for future visual regression gating.
+
+## Sequencing
+
+```
+v0.7.0  Shell Contract        ← prerequisite: surfaces need topbar before
+  │                              runners can assert on it
+  ↓
+v0.7.1  Runner Framework      ← standardize test authoring
+  │
+  ↓
+v0.7.2  Package Runners + CI  ← write the actual tests, wire into CI
+  │
+  ↓
+v0.7.3  Headless E2E          ← automate browser-based runner execution
+```
+
+Each version is independently shippable. v0.7.2's API-based CI gate
+works without v0.7.3's Playwright. v0.7.3 adds coverage for DOM-level
+bugs that API-only runners can't catch.
+
+## Open Questions
+
+1. **Runner package type.** Should `"type": "test-runner"` be a new
+   manifest type, or should runners be `"type": "surface"` with a
+   `"tags": ["test-runner"]` convention? New type is cleaner but requires
+   a `ValidateManifest()` update.
+
+2. **Runner discovery.** The registry surface needs to find all installed
+   runners. Options: (a) scan installed packages for `type: "test-runner"`,
+   (b) runners register themselves via `sw.testing.register()` during SDK
+   boot. Option (a) is declarative and doesn't require runner JS to load
+   before discovery.
+
+3. **Parallel vs sequential.** Should runners execute in parallel?
+   Probably not initially — shared DB state means test isolation is hard.
+   Sequential is safer. Parallel can be a future optimization.
+
+4. **SQLite limitations.** Some runners (cluster, multi-node) are
+   PG-only. The `requires` mechanism should support
+   `"requires_db": "postgres"` for these cases, or runners should
+   self-skip when `sw.config.db_driver === 'sqlite'`.
diff --git a/icons/apple-touch-icon-b-dark.png b/icons/apple-touch-icon-b-dark.png
new file mode 100644
index 0000000..056ff41
Binary files /dev/null and b/icons/apple-touch-icon-b-dark.png differ
diff --git a/icons/apple-touch-icon-b-light.png b/icons/apple-touch-icon-b-light.png
new file mode 100644
index 0000000..ac5ec28
Binary files /dev/null and b/icons/apple-touch-icon-b-light.png differ
diff --git a/icons/apple-touch-icon-e-dark.png b/icons/apple-touch-icon-e-dark.png
new file mode 100644
index 0000000..25077bb
Binary files /dev/null and b/icons/apple-touch-icon-e-dark.png differ
diff --git a/icons/apple-touch-icon-e-light.png b/icons/apple-touch-icon-e-light.png
new file mode 100644
index 0000000..2703752
Binary files /dev/null and b/icons/apple-touch-icon-e-light.png differ
diff --git a/icons/favicon-16-b-dark.png b/icons/favicon-16-b-dark.png
new file mode 100644
index 0000000..f46e984
Binary files /dev/null and b/icons/favicon-16-b-dark.png differ
diff --git a/icons/favicon-16-b-light.png b/icons/favicon-16-b-light.png
new file mode 100644
index 0000000..ab002e3
Binary files /dev/null and b/icons/favicon-16-b-light.png differ
diff --git a/icons/favicon-16-e-dark.png b/icons/favicon-16-e-dark.png
new file mode 100644
index 0000000..8db958e
Binary files /dev/null and b/icons/favicon-16-e-dark.png differ
diff --git a/icons/favicon-16-e-light.png b/icons/favicon-16-e-light.png
new file mode 100644
index 0000000..0933c11
Binary files /dev/null and b/icons/favicon-16-e-light.png differ
diff --git a/icons/favicon-32-b-dark.png b/icons/favicon-32-b-dark.png
new file mode 100644
index 0000000..b78d0fe
Binary files /dev/null and b/icons/favicon-32-b-dark.png differ
diff --git a/icons/favicon-32-b-light.png b/icons/favicon-32-b-light.png
new file mode 100644
index 0000000..64188c6
Binary files /dev/null and b/icons/favicon-32-b-light.png differ
diff --git a/icons/favicon-32-e-dark.png b/icons/favicon-32-e-dark.png
new file mode 100644
index 0000000..581af13
Binary files /dev/null and b/icons/favicon-32-e-dark.png differ
diff --git a/icons/favicon-32-e-light.png b/icons/favicon-32-e-light.png
new file mode 100644
index 0000000..30cb807
Binary files /dev/null and b/icons/favicon-32-e-light.png differ
diff --git a/icons/favicon-animated.svg b/icons/favicon-animated.svg
new file mode 100644
index 0000000..75b2e4b
--- /dev/null
+++ b/icons/favicon-animated.svg
@@ -0,0 +1,20 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes p { 0%,100%{r:2.5;opacity:1} 50%{r:3;opacity:0.8} }
+    .c { animation: p 2.4s ease-in-out infinite; }
+  </style>
+  <rect width="32" height="32" rx="6" fill="#14142a"/>
+  <line x1="16" y1="8" x2="26" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="26" y1="16" x2="16" y2="24" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="16" y1="24" x2="6" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="8" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="26" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="8" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="16" x2="16" y2="24" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <circle cx="16" cy="8" r="2" fill="#3B82F6"/>
+  <circle cx="6" cy="16" r="2" fill="#3B82F6"/>
+  <circle cx="26" cy="16" r="2" fill="#EF4444"/>
+  <circle cx="16" cy="24" r="2" fill="#3B82F6"/>
+  <circle cx="16" cy="16" r="2.5" fill="#3B82F6" class="c"/>
+</svg>
diff --git a/icons/favicon.svg b/icons/favicon.svg
new file mode 100644
index 0000000..9b3b932
--- /dev/null
+++ b/icons/favicon.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="6" fill="#14142a"/>
+  <line x1="16" y1="7" x2="26" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="26" y1="16" x2="16" y2="25" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="16" y1="25" x2="6" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="7" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="26" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="7" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="16" x2="16" y2="25" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <circle cx="16" cy="7" r="2" fill="#3B82F6"/>
+  <circle cx="6" cy="16" r="2" fill="#3B82F6"/>
+  <circle cx="26" cy="16" r="2" fill="#EF4444"/>
+  <circle cx="16" cy="25" r="2" fill="#3B82F6"/>
+  <circle cx="16" cy="16" r="2.5" fill="#3B82F6"/>
+</svg>
diff --git a/icons/icon-128-b-dark.png b/icons/icon-128-b-dark.png
new file mode 100644
index 0000000..15b9790
Binary files /dev/null and b/icons/icon-128-b-dark.png differ
diff --git a/icons/icon-128-b-light.png b/icons/icon-128-b-light.png
new file mode 100644
index 0000000..0af1d28
Binary files /dev/null and b/icons/icon-128-b-light.png differ
diff --git a/icons/icon-128-e-dark.png b/icons/icon-128-e-dark.png
new file mode 100644
index 0000000..f7f8114
Binary files /dev/null and b/icons/icon-128-e-dark.png differ
diff --git a/icons/icon-128-e-light.png b/icons/icon-128-e-light.png
new file mode 100644
index 0000000..820555f
Binary files /dev/null and b/icons/icon-128-e-light.png differ
diff --git a/icons/icon-192-b-dark.png b/icons/icon-192-b-dark.png
new file mode 100644
index 0000000..7668a27
Binary files /dev/null and b/icons/icon-192-b-dark.png differ
diff --git a/icons/icon-192-b-light.png b/icons/icon-192-b-light.png
new file mode 100644
index 0000000..b39439a
Binary files /dev/null and b/icons/icon-192-b-light.png differ
diff --git a/icons/icon-192-e-dark.png b/icons/icon-192-e-dark.png
new file mode 100644
index 0000000..dce47bc
Binary files /dev/null and b/icons/icon-192-e-dark.png differ
diff --git a/icons/icon-192-e-light.png b/icons/icon-192-e-light.png
new file mode 100644
index 0000000..17df65f
Binary files /dev/null and b/icons/icon-192-e-light.png differ
diff --git a/icons/icon-256-b-dark.png b/icons/icon-256-b-dark.png
new file mode 100644
index 0000000..81a328a
Binary files /dev/null and b/icons/icon-256-b-dark.png differ
diff --git a/icons/icon-256-b-light.png b/icons/icon-256-b-light.png
new file mode 100644
index 0000000..e420b6d
Binary files /dev/null and b/icons/icon-256-b-light.png differ
diff --git a/icons/icon-256-e-dark.png b/icons/icon-256-e-dark.png
new file mode 100644
index 0000000..bd195de
Binary files /dev/null and b/icons/icon-256-e-dark.png differ
diff --git a/icons/icon-256-e-light.png b/icons/icon-256-e-light.png
new file mode 100644
index 0000000..c3acafc
Binary files /dev/null and b/icons/icon-256-e-light.png differ
diff --git a/icons/icon-48-b-dark.png b/icons/icon-48-b-dark.png
new file mode 100644
index 0000000..c274949
Binary files /dev/null and b/icons/icon-48-b-dark.png differ
diff --git a/icons/icon-48-b-light.png b/icons/icon-48-b-light.png
new file mode 100644
index 0000000..7892b55
Binary files /dev/null and b/icons/icon-48-b-light.png differ
diff --git a/icons/icon-48-e-dark.png b/icons/icon-48-e-dark.png
new file mode 100644
index 0000000..c84b05f
Binary files /dev/null and b/icons/icon-48-e-dark.png differ
diff --git a/icons/icon-48-e-light.png b/icons/icon-48-e-light.png
new file mode 100644
index 0000000..ef9b72a
Binary files /dev/null and b/icons/icon-48-e-light.png differ
diff --git a/icons/icon-512-b-dark.png b/icons/icon-512-b-dark.png
new file mode 100644
index 0000000..6e0c3ec
Binary files /dev/null and b/icons/icon-512-b-dark.png differ
diff --git a/icons/icon-512-b-light.png b/icons/icon-512-b-light.png
new file mode 100644
index 0000000..eac0a45
Binary files /dev/null and b/icons/icon-512-b-light.png differ
diff --git a/icons/icon-512-e-dark.png b/icons/icon-512-e-dark.png
new file mode 100644
index 0000000..44186c2
Binary files /dev/null and b/icons/icon-512-e-dark.png differ
diff --git a/icons/icon-512-e-light.png b/icons/icon-512-e-light.png
new file mode 100644
index 0000000..d33f4a5
Binary files /dev/null and b/icons/icon-512-e-light.png differ
diff --git a/icons/icon-64-b-dark.png b/icons/icon-64-b-dark.png
new file mode 100644
index 0000000..7336cee
Binary files /dev/null and b/icons/icon-64-b-dark.png differ
diff --git a/icons/icon-64-b-light.png b/icons/icon-64-b-light.png
new file mode 100644
index 0000000..173a247
Binary files /dev/null and b/icons/icon-64-b-light.png differ
diff --git a/icons/icon-64-e-dark.png b/icons/icon-64-e-dark.png
new file mode 100644
index 0000000..f5c5793
Binary files /dev/null and b/icons/icon-64-e-dark.png differ
diff --git a/icons/icon-64-e-light.png b/icons/icon-64-e-light.png
new file mode 100644
index 0000000..86787cd
Binary files /dev/null and b/icons/icon-64-e-light.png differ
diff --git a/icons/icon-b-dark-animated.svg b/icons/icon-b-dark-animated.svg
new file mode 100644
index 0000000..072d040
--- /dev/null
+++ b/icons/icon-b-dark-animated.svg
@@ -0,0 +1,48 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 10; opacity: 1; }
+      50% { r: 12; opacity: 0.85; }
+    }
+    @keyframes glow-pulse {
+      0%, 100% { r: 16; opacity: 0.12; }
+      50% { r: 22; opacity: 0.06; }
+    }
+    @keyframes node-breathe {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.8; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+    .center-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
+    .node-tl { animation: node-breathe 2.4s ease-in-out infinite 0.3s; }
+    .node-tr { animation: node-breathe 2.4s ease-in-out infinite 0.6s; }
+    .node-bl { animation: node-breathe 2.4s ease-in-out infinite 0.9s; }
+    .node-br { animation: node-breathe 2.4s ease-in-out infinite 1.2s; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+
+  <!-- Diamond outline -->
+  <line x1="100" y1="51" x2="145" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="145" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="100" y1="149" x2="55" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="55" y1="100" x2="100" y2="51" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+
+  <!-- Cross lines -->
+  <line x1="55" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="145" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="51" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+
+  <!-- Center glow -->
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12" class="center-glow"/>
+
+  <!-- Nodes -->
+  <circle cx="100" cy="51" r="8" fill="#3B82F6" class="node-tl"/>
+  <circle cx="55" cy="100" r="8" fill="#3B82F6" class="node-tr"/>
+  <circle cx="145" cy="100" r="8" fill="#EF4444" class="node-bl"/>
+  <circle cx="100" cy="149" r="8" fill="#3B82F6" class="node-br"/>
+
+  <!-- Center -->
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node"/>
+</svg>
diff --git a/icons/icon-b-dark.svg b/icons/icon-b-dark.svg
new file mode 100644
index 0000000..fecb325
--- /dev/null
+++ b/icons/icon-b-dark.svg
@@ -0,0 +1,21 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+  <!-- Diamond outline -->
+  <line x1="100" y1="55" x2="142" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="142" y1="100" x2="100" y2="145" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="100" y1="145" x2="58" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="58" y1="100" x2="100" y2="55" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <!-- Cross lines -->
+  <line x1="58" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="142" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="55" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="100" x2="100" y2="145" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <!-- Center glow -->
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12"/>
+  <!-- Nodes -->
+  <circle cx="100" cy="55" r="8" fill="#3B82F6"/>
+  <circle cx="58" cy="100" r="8" fill="#3B82F6"/>
+  <circle cx="142" cy="100" r="8" fill="#EF4444"/>
+  <circle cx="100" cy="145" r="8" fill="#3B82F6"/>
+  <circle cx="100" cy="100" r="10" fill="#3B82F6"/>
+</svg>
diff --git a/icons/icon-b-light-animated.svg b/icons/icon-b-light-animated.svg
new file mode 100644
index 0000000..a737dcc
--- /dev/null
+++ b/icons/icon-b-light-animated.svg
@@ -0,0 +1,43 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 10; opacity: 1; }
+      50% { r: 12; opacity: 0.85; }
+    }
+    @keyframes glow-pulse {
+      0%, 100% { r: 16; opacity: 0.1; }
+      50% { r: 22; opacity: 0.05; }
+    }
+    @keyframes node-breathe {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.8; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+    .center-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
+    .node-tl { animation: node-breathe 2.4s ease-in-out infinite 0.3s; }
+    .node-tr { animation: node-breathe 2.4s ease-in-out infinite 0.6s; }
+    .node-bl { animation: node-breathe 2.4s ease-in-out infinite 0.9s; }
+    .node-br { animation: node-breathe 2.4s ease-in-out infinite 1.2s; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+
+  <line x1="100" y1="51" x2="145" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="145" y1="100" x2="100" y2="149" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="100" y1="149" x2="55" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="55" y1="100" x2="100" y2="51" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+
+  <line x1="55" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="145" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="51" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="100" x2="100" y2="149" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1" class="center-glow"/>
+
+  <circle cx="100" cy="51" r="8" fill="#3B82F6" class="node-tl"/>
+  <circle cx="55" cy="100" r="8" fill="#3B82F6" class="node-tr"/>
+  <circle cx="145" cy="100" r="8" fill="#EF4444" class="node-bl"/>
+  <circle cx="100" cy="149" r="8" fill="#3B82F6" class="node-br"/>
+
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node"/>
+</svg>
diff --git a/icons/icon-b-light.svg b/icons/icon-b-light.svg
new file mode 100644
index 0000000..484622f
--- /dev/null
+++ b/icons/icon-b-light.svg
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+  <line x1="100" y1="55" x2="142" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="142" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="100" y1="145" x2="58" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="58" y1="100" x2="100" y2="55" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="58" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="142" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="55" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1"/>
+  <circle cx="100" cy="55" r="8" fill="#3B82F6"/>
+  <circle cx="58" cy="100" r="8" fill="#3B82F6"/>
+  <circle cx="142" cy="100" r="8" fill="#EF4444"/>
+  <circle cx="100" cy="145" r="8" fill="#3B82F6"/>
+  <circle cx="100" cy="100" r="10" fill="#3B82F6"/>
+</svg>
diff --git a/icons/icon-e-dark-animated.svg b/icons/icon-e-dark-animated.svg
new file mode 100644
index 0000000..257e265
--- /dev/null
+++ b/icons/icon-e-dark-animated.svg
@@ -0,0 +1,67 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes draw-edge {
+      from { stroke-dashoffset: 120; }
+      to { stroke-dashoffset: 0; }
+    }
+    @keyframes pop-node {
+      0% { r: 0; opacity: 0; }
+      70% { r: 8; }
+      100% { r: 6; opacity: 1; }
+    }
+    @keyframes pop-center {
+      0% { r: 0; opacity: 0; }
+      70% { r: 10; }
+      100% { r: 8; opacity: 0.7; }
+    }
+    @keyframes center-idle {
+      0%, 100% { r: 8; opacity: 0.7; }
+      50% { r: 9.5; opacity: 0.6; }
+    }
+
+    .edge { stroke-dasharray: 120; stroke-dashoffset: 120; }
+    .e-back-1 { animation: draw-edge 0.5s ease-out 0.0s forwards; }
+    .e-back-2 { animation: draw-edge 0.5s ease-out 0.1s forwards; }
+    .e-back-3 { animation: draw-edge 0.5s ease-out 0.2s forwards; }
+    .e-mid-1  { animation: draw-edge 0.5s ease-out 0.35s forwards; }
+    .e-mid-2  { animation: draw-edge 0.5s ease-out 0.45s forwards; }
+    .e-mid-3  { animation: draw-edge 0.5s ease-out 0.55s forwards; }
+    .e-frt-1  { animation: draw-edge 0.5s ease-out 0.7s forwards; }
+    .e-frt-2  { animation: draw-edge 0.5s ease-out 0.8s forwards; }
+    .e-frt-3  { animation: draw-edge 0.5s ease-out 0.9s forwards; }
+
+    .v-topback    { animation: pop-node 0.3s ease-out 0.05s forwards; r: 0; opacity: 0; }
+    .v-backleft   { animation: pop-node 0.3s ease-out 0.15s forwards; r: 0; opacity: 0; }
+    .v-backright  { animation: pop-node 0.3s ease-out 0.25s forwards; r: 0; opacity: 0; }
+    .v-center     { animation: pop-center 0.3s ease-out 0.5s forwards, center-idle 2.4s ease-in-out 1s infinite; r: 0; opacity: 0; }
+    .v-frontleft  { animation: pop-node 0.3s ease-out 0.75s forwards; r: 0; opacity: 0; }
+    .v-frontright { animation: pop-node 0.3s ease-out 0.85s forwards; r: 0; opacity: 0; }
+    .v-bottom     { animation: pop-node 0.3s ease-out 0.95s forwards; r: 0; opacity: 0; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+
+  <!-- Back edges -->
+  <line x1="100" y1="42" x2="46" y2="72" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-1"/>
+  <line x1="100" y1="42" x2="154" y2="72" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-2"/>
+  <line x1="154" y1="72" x2="154" y2="128" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-3"/>
+
+  <!-- Mid edges -->
+  <line x1="46" y1="72" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-1"/>
+  <line x1="154" y1="72" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-2"/>
+  <line x1="100" y1="100" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-3"/>
+
+  <!-- Front edges -->
+  <line x1="46" y1="72" x2="46" y2="128" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-1"/>
+  <line x1="46" y1="128" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-2"/>
+  <line x1="154" y1="128" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-3"/>
+
+  <!-- Vertices -->
+  <circle cx="100" cy="42" fill="#3B82F6" opacity="0.55" class="v-topback"/>
+  <circle cx="46" cy="72" fill="#3B82F6" opacity="0.55" class="v-backleft"/>
+  <circle cx="154" cy="72" fill="#EF4444" opacity="0.55" class="v-backright"/>
+  <circle cx="100" cy="100" fill="#3B82F6" class="v-center"/>
+  <circle cx="46" cy="128" fill="#EF4444" class="v-frontleft"/>
+  <circle cx="154" cy="128" fill="#3B82F6" class="v-frontright"/>
+  <circle cx="100" cy="158" fill="#3B82F6" class="v-bottom"/>
+</svg>
diff --git a/icons/icon-e-dark.svg b/icons/icon-e-dark.svg
new file mode 100644
index 0000000..ac7902f
--- /dev/null
+++ b/icons/icon-e-dark.svg
@@ -0,0 +1,23 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+  <!-- Back edges -->
+  <line x1="100" y1="48" x2="150" y2="74" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
+  <line x1="100" y1="48" x2="50" y2="74" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
+  <line x1="150" y1="74" x2="150" y2="126" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
+  <!-- Mid edges -->
+  <line x1="50" y1="74" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="150" y1="74" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="100" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <!-- Front edges -->
+  <line x1="50" y1="74" x2="50" y2="126" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
+  <line x1="50" y1="126" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
+  <line x1="150" y1="126" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
+  <!-- Vertices -->
+  <circle cx="100" cy="48" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="50" cy="74" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="150" cy="74" r="6" fill="#EF4444" opacity="0.55"/>
+  <circle cx="100" cy="100" r="8" fill="#3B82F6" opacity="0.7"/>
+  <circle cx="50" cy="126" r="6" fill="#EF4444"/>
+  <circle cx="150" cy="126" r="6" fill="#3B82F6"/>
+  <circle cx="100" cy="152" r="6" fill="#3B82F6"/>
+</svg>
diff --git a/icons/icon-e-light-animated.svg b/icons/icon-e-light-animated.svg
new file mode 100644
index 0000000..9303228
--- /dev/null
+++ b/icons/icon-e-light-animated.svg
@@ -0,0 +1,63 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes draw-edge {
+      from { stroke-dashoffset: 120; }
+      to { stroke-dashoffset: 0; }
+    }
+    @keyframes pop-node {
+      0% { r: 0; opacity: 0; }
+      70% { r: 8; }
+      100% { r: 6; opacity: 1; }
+    }
+    @keyframes pop-center {
+      0% { r: 0; opacity: 0; }
+      70% { r: 10; }
+      100% { r: 8; opacity: 0.7; }
+    }
+    @keyframes center-idle {
+      0%, 100% { r: 8; opacity: 0.7; }
+      50% { r: 9.5; opacity: 0.6; }
+    }
+
+    .edge { stroke-dasharray: 120; stroke-dashoffset: 120; }
+    .e-back-1 { animation: draw-edge 0.5s ease-out 0.0s forwards; }
+    .e-back-2 { animation: draw-edge 0.5s ease-out 0.1s forwards; }
+    .e-back-3 { animation: draw-edge 0.5s ease-out 0.2s forwards; }
+    .e-mid-1  { animation: draw-edge 0.5s ease-out 0.35s forwards; }
+    .e-mid-2  { animation: draw-edge 0.5s ease-out 0.45s forwards; }
+    .e-mid-3  { animation: draw-edge 0.5s ease-out 0.55s forwards; }
+    .e-frt-1  { animation: draw-edge 0.5s ease-out 0.7s forwards; }
+    .e-frt-2  { animation: draw-edge 0.5s ease-out 0.8s forwards; }
+    .e-frt-3  { animation: draw-edge 0.5s ease-out 0.9s forwards; }
+
+    .v-topback    { animation: pop-node 0.3s ease-out 0.05s forwards; r: 0; opacity: 0; }
+    .v-backleft   { animation: pop-node 0.3s ease-out 0.15s forwards; r: 0; opacity: 0; }
+    .v-backright  { animation: pop-node 0.3s ease-out 0.25s forwards; r: 0; opacity: 0; }
+    .v-center     { animation: pop-center 0.3s ease-out 0.5s forwards, center-idle 2.4s ease-in-out 1s infinite; r: 0; opacity: 0; }
+    .v-frontleft  { animation: pop-node 0.3s ease-out 0.75s forwards; r: 0; opacity: 0; }
+    .v-frontright { animation: pop-node 0.3s ease-out 0.85s forwards; r: 0; opacity: 0; }
+    .v-bottom     { animation: pop-node 0.3s ease-out 0.95s forwards; r: 0; opacity: 0; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+
+  <line x1="100" y1="42" x2="46" y2="72" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-1"/>
+  <line x1="100" y1="42" x2="154" y2="72" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-2"/>
+  <line x1="154" y1="72" x2="154" y2="128" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-3"/>
+
+  <line x1="46" y1="72" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-1"/>
+  <line x1="154" y1="72" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-2"/>
+  <line x1="100" y1="100" x2="100" y2="158" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-3"/>
+
+  <line x1="46" y1="72" x2="46" y2="128" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-1"/>
+  <line x1="46" y1="128" x2="100" y2="158" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-2"/>
+  <line x1="154" y1="128" x2="100" y2="158" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-3"/>
+
+  <circle cx="100" cy="42" fill="#3B82F6" opacity="0.55" class="v-topback"/>
+  <circle cx="46" cy="72" fill="#3B82F6" opacity="0.55" class="v-backleft"/>
+  <circle cx="154" cy="72" fill="#EF4444" opacity="0.55" class="v-backright"/>
+  <circle cx="100" cy="100" fill="#3B82F6" class="v-center"/>
+  <circle cx="46" cy="128" fill="#EF4444" class="v-frontleft"/>
+  <circle cx="154" cy="128" fill="#3B82F6" class="v-frontright"/>
+  <circle cx="100" cy="158" fill="#3B82F6" class="v-bottom"/>
+</svg>
diff --git a/icons/icon-e-light.svg b/icons/icon-e-light.svg
new file mode 100644
index 0000000..897906c
--- /dev/null
+++ b/icons/icon-e-light.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+  <line x1="100" y1="48" x2="150" y2="74" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
+  <line x1="100" y1="48" x2="50" y2="74" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
+  <line x1="150" y1="74" x2="150" y2="126" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
+  <line x1="50" y1="74" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="150" y1="74" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="100" x2="100" y2="152" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="50" y1="74" x2="50" y2="126" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+  <line x1="50" y1="126" x2="100" y2="152" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+  <line x1="150" y1="126" x2="100" y2="152" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+  <circle cx="100" cy="48" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="50" cy="74" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="150" cy="74" r="6" fill="#EF4444" opacity="0.55"/>
+  <circle cx="100" cy="100" r="8" fill="#3B82F6" opacity="0.7"/>
+  <circle cx="50" cy="126" r="6" fill="#EF4444"/>
+  <circle cx="150" cy="126" r="6" fill="#3B82F6"/>
+  <circle cx="100" cy="152" r="6" fill="#3B82F6"/>
+</svg>
diff --git a/icons/icon-morph-dark-animated.svg b/icons/icon-morph-dark-animated.svg
new file mode 100644
index 0000000..3cae65c
--- /dev/null
+++ b/icons/icon-morph-dark-animated.svg
@@ -0,0 +1,174 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 8; }
+      50% { r: 9.5; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+
+  <!--
+    B-state (flat diamond) positions:
+      top:    100,51   left: 55,100   right: 145,100   bottom: 100,149   center: 100,100
+    
+    E-state (wireframe cube) positions:
+      topBack:    100,42    backLeft:  46,72    backRight: 154,72
+      center:     100,100   frontLeft: 46,128   frontRight: 154,128   bottom: 100,158
+    
+    Mapping B→E:
+      top    → topBack     (100,51  → 100,42)
+      left   → backLeft    (55,100  → 46,72)   AND spawns frontLeft  (55,100  → 46,128)
+      right  → backRight   (145,100 → 154,72)  AND spawns frontRight (145,100 → 154,128)
+      bottom → bottom      (100,149 → 100,158)
+      center → center      (100,100 → 100,100) stays
+    
+    Timing: 1.5s hold B, 1s morph to E, 2s hold E, 1s morph back, repeat
+  -->
+
+  <!-- ═══ EDGES ═══ -->
+  <!-- Diamond outline (B) that morphs to cube edges (E) -->
+
+  <!-- top→right becomes topBack→backRight -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
+        x1="100" y1="51" x2="145" y2="100">
+    <animate attributeName="x1" values="100;100;100;100;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="145;145;154;154;145"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;72;72;100"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- right→bottom becomes backRight→frontRight -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
+        x1="145" y1="100" x2="100" y2="149">
+    <animate attributeName="x1" values="145;145;154;154;145"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- bottom→left becomes frontRight→bottom (front bottom-right) -->
+  <line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.25"
+        x1="100" y1="149" x2="55" y2="100">
+    <animate attributeName="x1" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;100;100;55"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;158;158;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.25;0.25;0.9;0.9;0.25" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- left→top becomes backLeft→topBack -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
+        x1="55" y1="100" x2="100" y2="51">
+    <animate attributeName="x1" values="55;55;46;46;55"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="100;100;100;100;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: left→center becomes backLeft→center -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="55" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: right→center becomes backRight→center -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="145" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: center→bottom stays vertical but bottom moves -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="100" y1="100" x2="100" y2="149">
+    <animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: top→center vertical -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="100" y1="51" x2="100" y2="100">
+    <animate attributeName="y1" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- NEW edges that appear in E-state (start invisible) -->
+  <!-- frontLeft→bottom -->
+  <line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="100" y2="149" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;158;158;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.9;0.9;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- backLeft→frontLeft (left vertical) -->
+  <line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="55" y2="100" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.9;0.9;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- ═══ NODES ═══ -->
+
+  <!-- Top → TopBack -->
+  <circle cx="100" cy="51" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="51;51;42;42;51"              keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Left → BackLeft -->
+  <circle cx="55" cy="100" r="8" fill="#3B82F6">
+    <animate attributeName="cx" values="55;55;46;46;55"              keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"           keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Right → BackRight -->
+  <circle cx="145" cy="100" r="8" fill="#EF4444">
+    <animate attributeName="cx" values="145;145;154;154;145"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"           keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Bottom → Bottom (slight shift) -->
+  <circle cx="100" cy="149" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="149;149;158;158;149"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- FrontLeft: spawns from Left position, invisible in B -->
+  <circle cx="55" cy="100" r="0" fill="#EF4444" opacity="0">
+    <animate attributeName="cx" values="55;55;46;46;55"              keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- FrontRight: spawns from Right position, invisible in B -->
+  <circle cx="145" cy="100" r="0" fill="#3B82F6" opacity="0">
+    <animate attributeName="cx" values="145;145;154;154;145"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Center (always visible, pulse) -->
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node">
+    <animate attributeName="r" values="10;10;8;8;10"                 keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.7;0.7;1"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Center glow -->
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12">
+    <animate attributeName="r" values="16;16;12;12;16"               keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.12;0.12;0.06;0.06;0.12" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+</svg>
diff --git a/icons/icon-morph-light-animated.svg b/icons/icon-morph-light-animated.svg
new file mode 100644
index 0000000..ec26d79
--- /dev/null
+++ b/icons/icon-morph-light-animated.svg
@@ -0,0 +1,127 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 8; }
+      50% { r: 9.5; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+
+  <!-- Diamond/cube edges -->
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
+        x1="100" y1="51" x2="145" y2="100">
+    <animate attributeName="y1" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="145;145;154;154;145"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
+        x1="145" y1="100" x2="100" y2="149">
+    <animate attributeName="x1" values="145;145;154;154;145"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <line stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.18"
+        x1="100" y1="149" x2="55" y2="100">
+    <animate attributeName="x1" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;100;100;55"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;158;158;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.18;0.18;0.7;0.7;0.18" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
+        x1="55" y1="100" x2="100" y2="51">
+    <animate attributeName="x1" values="55;55;46;46;55"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross lines -->
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="55" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="145" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="100" y1="100" x2="100" y2="149">
+    <animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="100" y1="51" x2="100" y2="100">
+    <animate attributeName="y1" values="51;51;42;42;51"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- E-only edges (spawn) -->
+  <line stroke="#333" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="100" y2="149" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;158;158;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.7;0.7;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="55" y2="100" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.7;0.7;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Nodes -->
+  <circle cx="100" cy="51" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="51;51;42;42;51"        keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="55" cy="100" r="8" fill="#3B82F6">
+    <animate attributeName="cx" values="55;55;46;46;55"        keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="145" cy="100" r="8" fill="#EF4444">
+    <animate attributeName="cx" values="145;145;154;154;145"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="100" cy="149" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="149;149;158;158;149"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Spawn nodes -->
+  <circle cx="55" cy="100" r="0" fill="#EF4444" opacity="0">
+    <animate attributeName="cx" values="55;55;46;46;55"        keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="145" cy="100" r="0" fill="#3B82F6" opacity="0">
+    <animate attributeName="cx" values="145;145;154;154;145"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Center -->
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node">
+    <animate attributeName="r" values="10;10;8;8;10"           keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.7;0.7;1"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1">
+    <animate attributeName="r" values="16;16;12;12;16"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.1;0.1;0.05;0.05;0.1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+</svg>
diff --git a/icons/preview-sheet.png b/icons/preview-sheet.png
new file mode 100644
index 0000000..e0d57bc
Binary files /dev/null and b/icons/preview-sheet.png differ
diff --git a/icons/wordmark-dark.svg b/icons/wordmark-dark.svg
new file mode 100644
index 0000000..863a5a9
--- /dev/null
+++ b/icons/wordmark-dark.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
+  <!-- A-frame lettermark -->
+  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
+  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
+  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
+  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
+  <!-- "rmature" text -->
+  <text x="58" y="62" fill="#dddddd" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+</svg>
diff --git a/icons/wordmark-light.svg b/icons/wordmark-light.svg
new file mode 100644
index 0000000..5682907
--- /dev/null
+++ b/icons/wordmark-light.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
+  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
+  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
+  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
+  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
+  <text x="58" y="62" fill="#222222" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+</svg>
diff --git a/packages/hello-dashboard/css/main.css b/packages/hello-dashboard/css/main.css
deleted file mode 100644
index 577f496..0000000
--- a/packages/hello-dashboard/css/main.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Hello Dashboard — sample extension surface styles.
-   Uses CSS custom properties from the platform theme system (variables.css).
-   See EXTENSION-SURFACES.md for the full property reference. */
-
-.ext-hello-dashboard { max-width: 720px; margin: 0 auto; padding: var(--sp-10) var(--sp-6); }
-.ext-hello-dashboard-header { margin-bottom: var(--sp-8); }
-.ext-hello-dashboard-header h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 var(--sp-2) 0; }
-.ext-hello-dashboard-subtitle { font-size: 14px; color: var(--text-2); margin: 0; }
-.ext-hello-dashboard-subtitle code,
-.ext-hello-dashboard-card-value code { background: var(--bg-raised); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 13px; }
-.ext-hello-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
-.ext-hello-dashboard-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
-.ext-hello-dashboard-card-title { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-2); }
-.ext-hello-dashboard-card-value { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); }
-.ext-hello-dashboard-card-detail { font-size: 12px; color: var(--text-3); }
-.ext-hello-dashboard-actions { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); }
-.ext-hello-dashboard-manifest { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); font-size: 12px; color: var(--text-2); overflow-x: auto; white-space: pre-wrap; font-family: var(--mono); line-height: 1.5; }
diff --git a/packages/hello-dashboard/js/main.js b/packages/hello-dashboard/js/main.js
deleted file mode 100644
index e5c9093..0000000
--- a/packages/hello-dashboard/js/main.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Hello Dashboard — sample extension surface.
- *
- * Platform contract:
- *   - Mounts into #extension-mount
- *   - window.__MANIFEST__ — surface manifest (json, lowercase keys)
- *   - sw.auth.user         — authenticated user (from SDK boot)
- *   - UI.toast(msg, type) — platform toast (success/error/info/warning)
- *   - API._get(path)      — authenticated fetch (returns parsed JSON)
- */
-(function() {
-    'use strict';
-
-    var mount = document.getElementById('extension-mount');
-    if (!mount) return;
-
-    var manifest = window.__MANIFEST__ || {};
-    var user = window.sw?.auth?.user || {};
-    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-    var name = user.display_name || user.username || 'World';
-
-    mount.innerHTML =
-        '<div class="ext-hello-dashboard">' +
-            '<div class="ext-hello-dashboard-header">' +
-                '<h1>Hello, ' + esc(name) + '!</h1>' +
-                '<p class="ext-hello-dashboard-subtitle">Extension surface <code>' + esc(manifest.id || 'unknown') + '</code> loaded successfully.</p>' +
-            '</div>' +
-            '<div class="ext-hello-dashboard-cards">' +
-                card('Platform Access', (typeof UI !== 'undefined' ? '\u2713 Connected' : '\u2717 Unavailable'),
-                     'API, Theme, UI primitives available', 'var(--accent)') +
-                card('Theme', isDark ? '\uD83C\uDF19 Dark' : '\u2600\uFE0F Light',
-                     'Reads from platform theme system', '') +
-                card('Route', '<code>' + esc(manifest.route || '/s/hello-dashboard') + '</code>',
-                     'Registered via surface manifest', '') +
-            '</div>' +
-            '<div class="ext-hello-dashboard-actions">' +
-                '<button class="sw-btn sw-btn--primary sw-btn--md" id="helloToast">Show Toast</button>' +
-                '<button class="sw-btn sw-btn--secondary sw-btn--md" id="helloApi">Test API</button>' +
-            '</div>' +
-            '<pre class="ext-hello-dashboard-manifest">' + esc(JSON.stringify(manifest, null, 2)) + '</pre>' +
-        '</div>';
-
-    // Wire toast button
-    document.getElementById('helloToast').addEventListener('click', function() {
-        if (typeof UI !== 'undefined' && UI.toast) {
-            UI.toast('Extension surface is working!', 'success');
-        } else {
-            alert('Extension surface is working! (UI.toast not available)');
-        }
-    });
-
-    // Wire API test button
-    document.getElementById('helloApi').addEventListener('click', function() {
-        if (typeof API === 'undefined' || !API._get) {
-            toast('API module not available', 'error');
-            return;
-        }
-        API._get('/api/v1/surfaces').then(function(resp) {
-            toast('API returned ' + (resp.surfaces || []).length + ' registered surfaces', 'info');
-        }).catch(function(e) {
-            toast('API error: ' + e.message, 'error');
-        });
-    });
-
-    function toast(msg, type) {
-        if (typeof UI !== 'undefined' && UI.toast) UI.toast(msg, type);
-        else alert(msg);
-    }
-
-    function card(title, value, detail, color) {
-        var style = color ? ' style="color:' + color + ';"' : '';
-        return '<div class="ext-hello-dashboard-card">' +
-            '<div class="ext-hello-dashboard-card-title">' + esc(title) + '</div>' +
-            '<div class="ext-hello-dashboard-card-value"' + style + '>' + value + '</div>' +
-            '<div class="ext-hello-dashboard-card-detail">' + esc(detail) + '</div>' +
-        '</div>';
-    }
-
-    function esc(s) {
-        var el = document.createElement('span');
-        el.textContent = s;
-        return el.innerHTML;
-    }
-})();
diff --git a/packages/hello-dashboard/manifest.json b/packages/hello-dashboard/manifest.json
deleted file mode 100644
index e6521cf..0000000
--- a/packages/hello-dashboard/manifest.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "id": "hello-dashboard",
-  "icon": "👋",
-  "type": "surface",
-  "title": "Hello Dashboard",
-  "route": "/s/hello-dashboard",
-  "auth": "authenticated",
-  "layout": "single",
-  "components": [],
-  "hooks": ["surface"],
-  "version": "0.1.0",
-  "description": "Sample extension surface — verifies the /s/:slug pipeline works end-to-end."
-}
diff --git a/packages/icd-test-runner/js/tier-security.js b/packages/icd-test-runner/js/tier-security.js
index 92af526..fa742ef 100644
--- a/packages/icd-test-runner/js/tier-security.js
+++ b/packages/icd-test-runner/js/tier-security.js
@@ -542,16 +542,22 @@
 
     await T.test('security', 'input-validation', '[P0] path traversal in surface archive', async function () {
       var blob = new Blob([JSON.stringify({ id: '../../../etc/evil', title: 'Path Traversal Test' })], { type: 'application/json' });
+      var d;
       try {
-        var d = await T.apiUpload('/admin/packages/install', blob, 'evil.surface');
-        T.assert(d._status === 400 || d._status === 409,
+        d = await T.apiUpload('/admin/packages/install', blob, 'evil.surface');
+        T.assert(d._status === 400 || d._status === 422,
           'path traversal surface accepted! got ' + d._status);
       } catch (e) {
         if (e.message.indexOf('502') !== -1) {
           throw new Error('INCONCLUSIVE (502): proxy returned 502 on surface upload');
         }
-        T.assert(e.message.indexOf('400') !== -1 || e.message.indexOf('409') !== -1 || e.message.indexOf('415') !== -1,
+        T.assert(e.message.indexOf('400') !== -1 || e.message.indexOf('422') !== -1 || e.message.indexOf('415') !== -1,
           'unexpected error: ' + e.message);
+      } finally {
+        // Cleanup: if the evil package was somehow installed, delete it
+        if (d && (d._status === 200 || d._status === 201) && d.id) {
+          T.registerCleanup(function () { return T.safeDelete('/admin/packages/' + d.id); });
+        }
       }
     });
 
diff --git a/packages/workflow-demo/js/main.js b/packages/workflow-demo/js/main.js
index fb843c3..e659c28 100644
--- a/packages/workflow-demo/js/main.js
+++ b/packages/workflow-demo/js/main.js
@@ -134,7 +134,17 @@
             for (const wf of list) {
                 if (wf.slug) installed[wf.slug] = wf;
             }
-        } catch (e) { /* ignore — show all as not-installed */ }
+        } catch (e) {
+            const errDiv = document.createElement('div');
+            errDiv.className = 'sw-inline-error';
+            errDiv.innerHTML = '<span>' + _esc(e.message || 'Failed to load workflows') + '</span>';
+            const retryBtn = document.createElement('button');
+            retryBtn.className = 'sw-btn sw-btn--secondary sw-btn--sm';
+            retryBtn.textContent = 'Retry';
+            retryBtn.onclick = () => { errDiv.remove(); _mount(surface); };
+            errDiv.appendChild(retryBtn);
+            grid.appendChild(errDiv);
+        }
 
         for (const wf of WORKFLOWS) {
             grid.appendChild(_buildCard(wf, installed[wf.slug]));
diff --git a/server/events/bus_test.go b/server/events/bus_test.go
index 9e5b6be..7a6e0b7 100644
--- a/server/events/bus_test.go
+++ b/server/events/bus_test.go
@@ -236,3 +236,29 @@ func TestToolResultRouteBoth(t *testing.T) {
 		t.Error("tool.result.* should route DirBoth (filtered by WS subscriber, not routing table)")
 	}
 }
+
+func TestShellContractEventRoutes(t *testing.T) {
+	// package.changed — broadcast to all clients
+	if !ShouldSendToClient("package.changed") {
+		t.Error("package.changed should be sent to client")
+	}
+	if ShouldAcceptFromClient("package.changed") {
+		t.Error("package.changed should NOT be accepted from client")
+	}
+
+	// auth.changed — targeted to specific user
+	if !ShouldSendToClient("auth.changed") {
+		t.Error("auth.changed should be sent to client")
+	}
+	if ShouldAcceptFromClient("auth.changed") {
+		t.Error("auth.changed should NOT be accepted from client")
+	}
+
+	// notification.all_read — targeted to specific user
+	if !ShouldSendToClient("notification.all_read") {
+		t.Error("notification.all_read should be sent to client")
+	}
+	if ShouldAcceptFromClient("notification.all_read") {
+		t.Error("notification.all_read should NOT be accepted from client")
+	}
+}
diff --git a/server/events/types.go b/server/events/types.go
index 5ade823..0ad9c0a 100644
--- a/server/events/types.go
+++ b/server/events/types.go
@@ -51,8 +51,15 @@ var routeTable = map[string]Direction{
 	"role.fallback":     DirToClient,
 
 	// Notifications
-	"notification.new":  DirToClient, // targeted via Hub.PublishToUser, not room-based
-	"notification.read": DirToClient, // badge sync across tabs
+	"notification.new":      DirToClient, // targeted via Hub.PublishToUser, not room-based
+	"notification.read":     DirToClient, // badge sync across tabs
+	"notification.all_read": DirToClient, // mark-all-read badge sync
+
+	// Package lifecycle (broadcast to all clients)
+	"package.changed": DirToClient, // install/uninstall/enable/disable
+
+	// Auth changes (targeted to affected user)
+	"auth.changed": DirToClient, // role/membership change → menu refresh
 
 	// Workspace
 
diff --git a/server/events/ws.go b/server/events/ws.go
index 46d83ae..f684b21 100644
--- a/server/events/ws.go
+++ b/server/events/ws.go
@@ -173,6 +173,12 @@ func (h *Hub) IsConnected(userID string) bool {
 	return false
 }
 
+// Broadcast sends an event to all connected clients via the bus.
+// No TargetUserID — every WS subscriber receives it.
+func (h *Hub) Broadcast(event Event) {
+	h.bus.Publish(event)
+}
+
 // PublishToUser sends an event to a specific user via the bus.
 // All replicas receive the event; only the one with the user's connection delivers it.
 func (h *Hub) PublishToUser(userID string, event Event) {
diff --git a/server/handlers/groups.go b/server/handlers/groups.go
index addcd1b..9bbc09b 100644
--- a/server/handlers/groups.go
+++ b/server/handlers/groups.go
@@ -4,11 +4,13 @@ import (
 	"database/sql"
 	"errors"
 	"net/http"
+	"time"
 
 	"github.com/gin-gonic/gin"
 
 	"armature/auth"
 	"armature/database"
+	"armature/events"
 	"armature/models"
 	"armature/notifications"
 	"armature/store"
@@ -43,12 +45,30 @@ type setResourceGrantRequest struct {
 
 type GroupHandler struct {
 	stores store.Stores
+	hub    *events.Hub
 }
 
 func NewGroupHandler(s store.Stores) *GroupHandler {
 	return &GroupHandler{stores: s}
 }
 
+// SetHub attaches the event hub for auth change notifications.
+func (h *GroupHandler) SetHub(hub *events.Hub) {
+	h.hub = hub
+}
+
+// notifyAuthChanged sends an auth.changed event to a specific user.
+func (h *GroupHandler) notifyAuthChanged(userID, reason string) {
+	if h.hub == nil {
+		return
+	}
+	h.hub.PublishToUser(userID, events.Event{
+		Label:   "auth.changed",
+		Payload: events.MustJSON(map[string]string{"reason": reason}),
+		Ts:      time.Now().UnixMilli(),
+	})
+}
+
 // ── Admin: List All Groups ──────────────────
 
 func (h *GroupHandler) ListGroups(c *gin.Context) {
@@ -249,6 +269,7 @@ func (h *GroupHandler) AddMember(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{"ok": true})
+	h.notifyAuthChanged(req.UserID, "group_member_added")
 	AuditLog(h.stores.Audit, c, "group.member.add", "group", groupID, map[string]interface{}{
 		"user_id": req.UserID,
 	})
@@ -279,6 +300,7 @@ func (h *GroupHandler) RemoveMember(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{"ok": true})
+	h.notifyAuthChanged(userID, "group_member_removed")
 	AuditLog(h.stores.Audit, c, "group.member.remove", "group", groupID, map[string]interface{}{
 		"user_id": userID,
 	})
diff --git a/server/handlers/notifications.go b/server/handlers/notifications.go
index 6a89f22..366c340 100644
--- a/server/handlers/notifications.go
+++ b/server/handlers/notifications.go
@@ -137,10 +137,9 @@ func (h *NotificationHandler) MarkAllRead(c *gin.Context) {
 
 	// Sync badge across tabs
 	if h.hub != nil {
-		payload, _ := json.Marshal(map[string]string{"action": "mark_all_read"})
 		h.hub.PublishToUser(userID, events.Event{
-			Label:   "notification.read",
-			Payload: payload,
+			Label:   "notification.all_read",
+			Payload: events.MustJSON(map[string]string{}),
 			Ts:      time.Now().UnixMilli(),
 		})
 	}
diff --git a/server/handlers/packages.go b/server/handlers/packages.go
index 2fb5d25..464eb63 100644
--- a/server/handlers/packages.go
+++ b/server/handlers/packages.go
@@ -11,11 +11,13 @@ import (
 	"path/filepath"
 	"regexp"
 	"strings"
+	"time"
 
 	"github.com/gin-gonic/gin"
 	"go.starlark.net/starlark"
 
 	"armature/database"
+	"armature/events"
 	"armature/models"
 	"armature/sandbox"
 	"armature/store"
@@ -34,6 +36,7 @@ type PackageHandler struct {
 	bundledDir     string           // e.g. /app/bundled-packages — .pkg archive source
 	sandbox        *sandbox.Sandbox
 	runner         *sandbox.Runner
+	hub            *events.Hub
 }
 
 func NewPackageHandler(s store.Stores, packagesDir ...string) *PackageHandler {
@@ -60,6 +63,23 @@ func (h *PackageHandler) SetRunner(r *sandbox.Runner) {
 	h.runner = r
 }
 
+// SetHub attaches the event hub for broadcasting package lifecycle events.
+func (h *PackageHandler) SetHub(hub *events.Hub) {
+	h.hub = hub
+}
+
+// broadcastPackageChanged emits a package.changed event to all clients.
+func (h *PackageHandler) broadcastPackageChanged(action, id string) {
+	if h.hub == nil {
+		return
+	}
+	h.hub.Broadcast(events.Event{
+		Label:   "package.changed",
+		Payload: events.MustJSON(map[string]string{"action": action, "id": id}),
+		Ts:      time.Now().UnixMilli(),
+	})
+}
+
 // ListPackages returns all registered packages.
 // GET /api/v1/admin/packages
 func (h *PackageHandler) ListPackages(c *gin.Context) {
@@ -116,6 +136,7 @@ func (h *PackageHandler) EnablePackage(c *gin.Context) {
 		return
 	}
 	c.JSON(http.StatusOK, gin.H{"id": id, "enabled": true})
+	h.broadcastPackageChanged("enabled", id)
 }
 
 // DisablePackage disables a package. Admin cannot be disabled.
@@ -133,6 +154,7 @@ func (h *PackageHandler) DisablePackage(c *gin.Context) {
 		return
 	}
 	c.JSON(http.StatusOK, gin.H{"id": id, "enabled": false})
+	h.broadcastPackageChanged("disabled", id)
 }
 
 // DeletePackage uninstalls a package. Core packages cannot be deleted.
@@ -180,6 +202,7 @@ func (h *PackageHandler) DeletePackage(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{"id": id, "deleted": true})
+	h.broadcastPackageChanged("deleted", id)
 }
 
 // InstallPackage uploads and installs a .pkg/.surface archive.
@@ -586,6 +609,7 @@ func (h *PackageHandler) InstallPackage(c *gin.Context) {
 		resp["status"] = "dormant"
 	}
 	c.JSON(http.StatusOK, resp)
+	h.broadcastPackageChanged("installed", pkgID)
 }
 
 // extractableRelPath returns the relative path for a zip entry if it
@@ -1073,6 +1097,7 @@ func (h *PackageHandler) UpdatePackage(c *gin.Context) {
 		"previous_version": previousVersion,
 		"changes":          schemaChanges,
 	})
+	h.broadcastPackageChanged("updated", pkgID)
 }
 
 // mergePackageSettings merges existing settings with a new manifest's settings schema.
diff --git a/server/handlers/teams.go b/server/handlers/teams.go
index 9d2c856..6977e2c 100644
--- a/server/handlers/teams.go
+++ b/server/handlers/teams.go
@@ -7,11 +7,13 @@ import (
 	"fmt"
 	"net/http"
 	"strconv"
+	"time"
 
 	"github.com/gin-gonic/gin"
 
 	"armature/crypto"
 	"armature/database"
+	"armature/events"
 	"armature/models"
 	"armature/store"
 )
@@ -44,12 +46,30 @@ type updateMemberRequest struct {
 type TeamHandler struct{
 	stores store.Stores
 	vault  *crypto.KeyResolver
+	hub    *events.Hub
 }
 
 func NewTeamHandler(s store.Stores, vault *crypto.KeyResolver) *TeamHandler {
 	return &TeamHandler{stores: s, vault: vault}
 }
 
+// SetHub attaches the event hub for auth change notifications.
+func (h *TeamHandler) SetHub(hub *events.Hub) {
+	h.hub = hub
+}
+
+// notifyAuthChanged sends an auth.changed event to a specific user.
+func (h *TeamHandler) notifyAuthChanged(userID, reason string) {
+	if h.hub == nil {
+		return
+	}
+	h.hub.PublishToUser(userID, events.Event{
+		Label:   "auth.changed",
+		Payload: events.MustJSON(map[string]string{"reason": reason}),
+		Ts:      time.Now().UnixMilli(),
+	})
+}
+
 // ── Admin: List All Teams ───────────────────
 
 func (h *TeamHandler) ListTeams(c *gin.Context) {
@@ -278,6 +298,7 @@ func (h *TeamHandler) AddMember(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusCreated, gin.H{"id": id})
+	h.notifyAuthChanged(req.UserID, "team_member_added")
 	AuditLog(h.stores.Audit, c, "team.add_member", "team", getTeamID(c), map[string]interface{}{
 		"user_id": req.UserID, "role": req.Role,
 	})
@@ -312,6 +333,9 @@ func (h *TeamHandler) UpdateMember(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{"ok": true})
+	if uid := h.memberUserID(c.Request.Context(), teamID, memberID); uid != "" {
+		h.notifyAuthChanged(uid, "team_role")
+	}
 	AuditLog(h.stores.Audit, c, "team.update_member", "team", getTeamID(c), map[string]interface{}{
 		"member_id": memberID, "role": req.Role,
 	})
@@ -323,6 +347,9 @@ func (h *TeamHandler) RemoveMember(c *gin.Context) {
 	teamID := getTeamID(c)
 	memberID := c.Param("memberId")
 
+	// Look up user_id before delete for auth notification
+	affectedUID := h.memberUserID(c.Request.Context(), teamID, memberID)
+
 	n, err := h.stores.Teams.DeleteMemberByID(c.Request.Context(), memberID, teamID)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "remove failed"})
@@ -334,6 +361,9 @@ func (h *TeamHandler) RemoveMember(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{"ok": true})
+	if affectedUID != "" {
+		h.notifyAuthChanged(affectedUID, "team_member_removed")
+	}
 	AuditLog(h.stores.Audit, c, "team.remove_member", "team", getTeamID(c), map[string]interface{}{
 		"member_id": memberID,
 	})
@@ -467,9 +497,39 @@ func (h *TeamHandler) UpdateRoles(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{"data": roles})
+	// Notify all team members — role definitions changed
+	h.notifyTeamMembers(c.Request.Context(), teamID, "team_roles_updated")
 	AuditLog(h.stores.Audit, c, "team.update_roles", "team", teamID, map[string]interface{}{"roles": roles})
 }
 
+// memberUserID looks up the user_id for a team member by row ID.
+func (h *TeamHandler) memberUserID(ctx context.Context, teamID, memberID string) string {
+	members, err := h.stores.Teams.ListMembers(ctx, teamID)
+	if err != nil {
+		return ""
+	}
+	for _, m := range members {
+		if m.ID == memberID {
+			return m.UserID
+		}
+	}
+	return ""
+}
+
+// notifyTeamMembers sends an auth.changed event to all members of a team.
+func (h *TeamHandler) notifyTeamMembers(ctx context.Context, teamID, reason string) {
+	if h.hub == nil {
+		return
+	}
+	members, err := h.stores.Teams.ListMembers(ctx, teamID)
+	if err != nil {
+		return
+	}
+	for _, m := range members {
+		h.notifyAuthChanged(m.UserID, reason)
+	}
+}
+
 // getTeamRoles reads the roles array from team settings, falling back to builtins.
 func getTeamRoles(ctx context.Context, stores store.Stores, teamID string) []string {
 	team, err := stores.Teams.GetByID(ctx, teamID)
diff --git a/server/main.go b/server/main.go
index 9fc7e25..c2a8ddf 100644
--- a/server/main.go
+++ b/server/main.go
@@ -588,10 +588,12 @@ func main() {
 
 			// Teams (user: my teams)
 			teams := handlers.NewTeamHandler(stores, keyResolver)
+			teams.SetHub(hub)
 			protected.GET("/teams/mine", teams.MyTeams)
 
 			// Groups (user: my groups
 			groupH := handlers.NewGroupHandler(stores)
+			groupH.SetHub(hub)
 			protected.GET("/groups/mine", groupH.MyGroups)
 
 			// Team admin self-service
@@ -710,6 +712,7 @@ func main() {
 
 			// Teams (admin)
 			teamAdm := handlers.NewTeamHandler(stores, keyResolver)
+			teamAdm.SetHub(hub)
 			admin.GET("/teams", teamAdm.ListTeams)
 			admin.POST("/teams", teamAdm.CreateTeam)
 			admin.GET("/teams/:id", teamAdm.GetTeam)
@@ -730,6 +733,7 @@ func main() {
 
 			// Groups (admin
 			groupAdm := handlers.NewGroupHandler(stores)
+			groupAdm.SetHub(hub)
 			admin.GET("/groups", groupAdm.ListGroups)
 			admin.POST("/groups", groupAdm.CreateGroup)
 			admin.GET("/groups/:id", groupAdm.GetGroup)
@@ -789,6 +793,7 @@ func main() {
 			pkgAdm := handlers.NewPackageHandler(stores, packagesDir)
 			pkgAdm.SetSandbox(sandbox.New(sandbox.DefaultConfig()))
 			pkgAdm.SetBundledDir(cfg.BundledPackagesDir)
+			pkgAdm.SetHub(hub)
 
 			// Package registry — must be registered before /packages/:id
 			registryH := handlers.NewRegistryHandler(stores, packagesDir, pkgAdm)
diff --git a/server/pages/templates/base.html b/server/pages/templates/base.html
index 19968e5..20a28fe 100644
--- a/server/pages/templates/base.html
+++ b/server/pages/templates/base.html
@@ -75,12 +75,16 @@
     {{end}}
 
     {{if .Message.Visible}}
-    <div class="sw-shell__announcement" id="shellMessage">
+    <div class="sw-shell__announcement" id="shellMessage" data-msg-text="{{.Message.Text}}">
         <div class="sw-shell__announcement-inner sw-shell__announcement--{{.Message.Variant}}">
             <span class="sw-shell__announcement-text">{{.Message.Text}}</span>
-            <button class="sw-shell__banner-close" onclick="this.closest('.sw-shell__announcement').remove()" aria-label="Dismiss">&times;</button>
+            <button class="sw-shell__banner-close" aria-label="Dismiss"
+                    onclick="var el=this.closest('.sw-shell__announcement');var t=el.dataset.msgText||'';var k='armature_dismissed_'+Array.from(t).reduce(function(h,c){return((h<<5)-h)+c.charCodeAt(0)|0;},0);localStorage.setItem(k,'1');el.remove();">&times;</button>
         </div>
     </div>
+    <script nonce="{{.CSPNonce}}">
+    (function(){var el=document.getElementById('shellMessage');if(!el)return;var t=el.dataset.msgText||'';var k='armature_dismissed_'+Array.from(t).reduce(function(h,c){return((h<<5)-h)+c.charCodeAt(0)|0;},0);if(localStorage.getItem(k))el.remove();})();
+    </script>
     {{end}}
 
     <div class="surface" id="surface">
diff --git a/server/pages/templates/surfaces/admin.html b/server/pages/templates/surfaces/admin.html
index 02d3454..9ab2f34 100644
--- a/server/pages/templates/surfaces/admin.html
+++ b/server/pages/templates/surfaces/admin.html
@@ -5,6 +5,7 @@
 */}}
 
 {{define "surface-admin"}}
+<div id="shell-topbar"></div>
 <div id="admin-mount" class="surface-admin" style="flex-direction:column;">
     {{/* Preact renders into this div. Show a loading state until it mounts. */}}
     <div class="settings-placeholder" style="padding:40px;text-align:center;">Loading admin&hellip;</div>
diff --git a/server/pages/templates/surfaces/docs.html b/server/pages/templates/surfaces/docs.html
index 4675115..293201e 100644
--- a/server/pages/templates/surfaces/docs.html
+++ b/server/pages/templates/surfaces/docs.html
@@ -4,6 +4,7 @@
 */}}
 
 {{define "surface-docs"}}
+<div id="shell-topbar"></div>
 <div id="docs-mount" class="surface-docs">
     <div style="padding:40px;text-align:center;color:var(--text-3);">Loading docs&hellip;</div>
 </div>
diff --git a/server/pages/templates/surfaces/extension.html b/server/pages/templates/surfaces/extension.html
index e5a6333..11f269e 100644
--- a/server/pages/templates/surfaces/extension.html
+++ b/server/pages/templates/surfaces/extension.html
@@ -13,6 +13,7 @@
 {{define "surface-extension"}}
 <div id="extension-surface" class="extension-surface"
      data-surface-id="{{.Surface}}">
+    <div id="shell-topbar"></div>
     <div id="extension-mount" class="extension-mount" data-ext="{{.Surface}}"></div>
 </div>
 {{end}}
diff --git a/server/pages/templates/surfaces/settings.html b/server/pages/templates/surfaces/settings.html
index b500731..6cdcdfb 100644
--- a/server/pages/templates/surfaces/settings.html
+++ b/server/pages/templates/surfaces/settings.html
@@ -4,6 +4,7 @@
 */}}
 
 {{define "surface-settings"}}
+<div id="shell-topbar"></div>
 <div id="settings-mount" class="surface-settings" style="flex-direction:column;">
     {{/* Preact renders into this div. Show a loading state until it mounts. */}}
     <div class="settings-placeholder" style="padding:40px;text-align:center;">Loading settings&hellip;</div>
diff --git a/server/pages/templates/surfaces/team-admin.html b/server/pages/templates/surfaces/team-admin.html
index 5543da9..8a89b8d 100644
--- a/server/pages/templates/surfaces/team-admin.html
+++ b/server/pages/templates/surfaces/team-admin.html
@@ -5,6 +5,7 @@
 */}}
 
 {{define "surface-team-admin"}}
+<div id="shell-topbar"></div>
 <div id="team-admin-mount" class="surface-team-admin" style="height:100%;overflow:hidden;">
     <div class="settings-placeholder" style="padding:40px;text-align:center;">Loading team admin&hellip;</div>
 </div>
diff --git a/src/apple-touch-icon.png b/src/apple-touch-icon.png
new file mode 100644
index 0000000..056ff41
Binary files /dev/null and b/src/apple-touch-icon.png differ
diff --git a/src/css/sw-primitives.css b/src/css/sw-primitives.css
index 5c07ea7..994f66d 100644
--- a/src/css/sw-primitives.css
+++ b/src/css/sw-primitives.css
@@ -292,6 +292,25 @@
 .sw-dropdown__option--disabled:hover { background: transparent; }
 .sw-dropdown__empty { padding: var(--sp-3); text-align: center; color: var(--text-3); font-size: 0.85rem; }
 
+/* ── Inline Error ─────────────────────────── */
+
+.sw-inline-error {
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-3) var(--sp-4);
+    background: var(--bg-2); border: 1px solid var(--danger);
+    border-radius: var(--radius); font-size: 13px; color: var(--danger);
+}
+
+/* ── Empty State ──────────────────────────── */
+
+.sw-empty-state {
+    padding: var(--sp-6) var(--sp-4);
+    text-align: center; color: var(--text-3); font-size: 13px;
+}
+.sw-empty-state__text {
+    margin-bottom: var(--sp-3);
+}
+
 /* ── Focus Indicators ─────────────────────── */
 
 .sw-btn:focus-visible {
diff --git a/src/css/sw-shell.css b/src/css/sw-shell.css
index d1e7085..9fea6de 100644
--- a/src/css/sw-shell.css
+++ b/src/css/sw-shell.css
@@ -156,6 +156,89 @@
     gap: var(--sp-2);
 }
 
+/* ── Shell Topbar — kernel-injected two-slot model ── */
+
+.sw-topbar--shell {
+    gap: var(--sp-2);
+}
+
+.sw-topbar__home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    color: var(--text-3);
+    text-decoration: none;
+    border-radius: var(--radius);
+    transition: color var(--transition), background var(--transition);
+    flex-shrink: 0;
+}
+
+.sw-topbar__home:hover {
+    color: var(--text);
+    background: var(--bg-hover);
+}
+
+.sw-topbar__left {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-2);
+    flex-shrink: 0;
+}
+
+.sw-topbar__center {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow-x: auto;
+}
+
+/* ── Topbar Tabs — consistent tab styling in center slot ── */
+
+.sw-topbar__tabs {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-1);
+    height: 100%;
+}
+
+.sw-topbar__tab {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-3);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-2);
+    text-decoration: none;
+    border-radius: var(--radius-sm);
+    transition: color var(--transition), background var(--transition);
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.sw-topbar__tab:hover {
+    color: var(--text);
+    background: var(--bg-hover);
+}
+
+.sw-topbar__tab.active {
+    color: var(--text);
+    background: var(--bg-2);
+}
+
+@media (max-width: 768px) {
+    .sw-topbar__tabs {
+        gap: 0;
+    }
+    .sw-topbar__tab {
+        padding: var(--sp-2);
+        font-size: 12px;
+    }
+}
+
 /* ── User menu trigger ───────────────────── */
 
 .sw-user-menu__trigger {
diff --git a/src/favicon-light-256.png b/src/favicon-light-256.png
new file mode 100644
index 0000000..e420b6d
Binary files /dev/null and b/src/favicon-light-256.png differ
diff --git a/src/favicon-light-32.png b/src/favicon-light-32.png
new file mode 100644
index 0000000..64188c6
Binary files /dev/null and b/src/favicon-light-32.png differ
diff --git a/src/favicon-light.svg b/src/favicon-light.svg
index 5682907..484622f 100644
--- a/src/favicon-light.svg
+++ b/src/favicon-light.svg
@@ -1,10 +1,17 @@
-<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
-  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
-  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
-  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
-  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
-  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
-  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
-  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
-  <text x="58" y="62" fill="#222222" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+  <line x1="100" y1="55" x2="142" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="142" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="100" y1="145" x2="58" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="58" y1="100" x2="100" y2="55" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="58" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="142" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="55" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1"/>
+  <circle cx="100" cy="55" r="8" fill="#3B82F6"/>
+  <circle cx="58" cy="100" r="8" fill="#3B82F6"/>
+  <circle cx="142" cy="100" r="8" fill="#EF4444"/>
+  <circle cx="100" cy="145" r="8" fill="#3B82F6"/>
+  <circle cx="100" cy="100" r="10" fill="#3B82F6"/>
 </svg>
diff --git a/src/icons/apple-touch-icon-b-dark.png b/src/icons/apple-touch-icon-b-dark.png
new file mode 100644
index 0000000..056ff41
Binary files /dev/null and b/src/icons/apple-touch-icon-b-dark.png differ
diff --git a/src/icons/apple-touch-icon-b-light.png b/src/icons/apple-touch-icon-b-light.png
new file mode 100644
index 0000000..ac5ec28
Binary files /dev/null and b/src/icons/apple-touch-icon-b-light.png differ
diff --git a/src/icons/apple-touch-icon-e-dark.png b/src/icons/apple-touch-icon-e-dark.png
new file mode 100644
index 0000000..25077bb
Binary files /dev/null and b/src/icons/apple-touch-icon-e-dark.png differ
diff --git a/src/icons/apple-touch-icon-e-light.png b/src/icons/apple-touch-icon-e-light.png
new file mode 100644
index 0000000..2703752
Binary files /dev/null and b/src/icons/apple-touch-icon-e-light.png differ
diff --git a/src/icons/favicon-16-b-dark.png b/src/icons/favicon-16-b-dark.png
new file mode 100644
index 0000000..f46e984
Binary files /dev/null and b/src/icons/favicon-16-b-dark.png differ
diff --git a/src/icons/favicon-16-b-light.png b/src/icons/favicon-16-b-light.png
new file mode 100644
index 0000000..ab002e3
Binary files /dev/null and b/src/icons/favicon-16-b-light.png differ
diff --git a/src/icons/favicon-16-e-dark.png b/src/icons/favicon-16-e-dark.png
new file mode 100644
index 0000000..8db958e
Binary files /dev/null and b/src/icons/favicon-16-e-dark.png differ
diff --git a/src/icons/favicon-16-e-light.png b/src/icons/favicon-16-e-light.png
new file mode 100644
index 0000000..0933c11
Binary files /dev/null and b/src/icons/favicon-16-e-light.png differ
diff --git a/src/icons/favicon-32-b-dark.png b/src/icons/favicon-32-b-dark.png
new file mode 100644
index 0000000..b78d0fe
Binary files /dev/null and b/src/icons/favicon-32-b-dark.png differ
diff --git a/src/icons/favicon-32-b-light.png b/src/icons/favicon-32-b-light.png
new file mode 100644
index 0000000..64188c6
Binary files /dev/null and b/src/icons/favicon-32-b-light.png differ
diff --git a/src/icons/favicon-32-e-dark.png b/src/icons/favicon-32-e-dark.png
new file mode 100644
index 0000000..581af13
Binary files /dev/null and b/src/icons/favicon-32-e-dark.png differ
diff --git a/src/icons/favicon-32-e-light.png b/src/icons/favicon-32-e-light.png
new file mode 100644
index 0000000..30cb807
Binary files /dev/null and b/src/icons/favicon-32-e-light.png differ
diff --git a/src/icons/favicon-animated.svg b/src/icons/favicon-animated.svg
new file mode 100644
index 0000000..75b2e4b
--- /dev/null
+++ b/src/icons/favicon-animated.svg
@@ -0,0 +1,20 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes p { 0%,100%{r:2.5;opacity:1} 50%{r:3;opacity:0.8} }
+    .c { animation: p 2.4s ease-in-out infinite; }
+  </style>
+  <rect width="32" height="32" rx="6" fill="#14142a"/>
+  <line x1="16" y1="8" x2="26" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="26" y1="16" x2="16" y2="24" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="16" y1="24" x2="6" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="8" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="26" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="8" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="16" x2="16" y2="24" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <circle cx="16" cy="8" r="2" fill="#3B82F6"/>
+  <circle cx="6" cy="16" r="2" fill="#3B82F6"/>
+  <circle cx="26" cy="16" r="2" fill="#EF4444"/>
+  <circle cx="16" cy="24" r="2" fill="#3B82F6"/>
+  <circle cx="16" cy="16" r="2.5" fill="#3B82F6" class="c"/>
+</svg>
diff --git a/src/icons/favicon.svg b/src/icons/favicon.svg
new file mode 100644
index 0000000..9b3b932
--- /dev/null
+++ b/src/icons/favicon.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="6" fill="#14142a"/>
+  <line x1="16" y1="7" x2="26" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="26" y1="16" x2="16" y2="25" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="16" y1="25" x2="6" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="7" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
+  <line x1="6" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="26" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="7" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <line x1="16" y1="16" x2="16" y2="25" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
+  <circle cx="16" cy="7" r="2" fill="#3B82F6"/>
+  <circle cx="6" cy="16" r="2" fill="#3B82F6"/>
+  <circle cx="26" cy="16" r="2" fill="#EF4444"/>
+  <circle cx="16" cy="25" r="2" fill="#3B82F6"/>
+  <circle cx="16" cy="16" r="2.5" fill="#3B82F6"/>
+</svg>
diff --git a/src/icons/icon-128-b-dark.png b/src/icons/icon-128-b-dark.png
new file mode 100644
index 0000000..15b9790
Binary files /dev/null and b/src/icons/icon-128-b-dark.png differ
diff --git a/src/icons/icon-128-b-light.png b/src/icons/icon-128-b-light.png
new file mode 100644
index 0000000..0af1d28
Binary files /dev/null and b/src/icons/icon-128-b-light.png differ
diff --git a/src/icons/icon-128-e-dark.png b/src/icons/icon-128-e-dark.png
new file mode 100644
index 0000000..f7f8114
Binary files /dev/null and b/src/icons/icon-128-e-dark.png differ
diff --git a/src/icons/icon-128-e-light.png b/src/icons/icon-128-e-light.png
new file mode 100644
index 0000000..820555f
Binary files /dev/null and b/src/icons/icon-128-e-light.png differ
diff --git a/src/icons/icon-192-b-dark.png b/src/icons/icon-192-b-dark.png
new file mode 100644
index 0000000..7668a27
Binary files /dev/null and b/src/icons/icon-192-b-dark.png differ
diff --git a/src/icons/icon-192-b-light.png b/src/icons/icon-192-b-light.png
new file mode 100644
index 0000000..b39439a
Binary files /dev/null and b/src/icons/icon-192-b-light.png differ
diff --git a/src/icons/icon-192-e-dark.png b/src/icons/icon-192-e-dark.png
new file mode 100644
index 0000000..dce47bc
Binary files /dev/null and b/src/icons/icon-192-e-dark.png differ
diff --git a/src/icons/icon-192-e-light.png b/src/icons/icon-192-e-light.png
new file mode 100644
index 0000000..17df65f
Binary files /dev/null and b/src/icons/icon-192-e-light.png differ
diff --git a/src/icons/icon-256-b-dark.png b/src/icons/icon-256-b-dark.png
new file mode 100644
index 0000000..81a328a
Binary files /dev/null and b/src/icons/icon-256-b-dark.png differ
diff --git a/src/icons/icon-256-b-light.png b/src/icons/icon-256-b-light.png
new file mode 100644
index 0000000..e420b6d
Binary files /dev/null and b/src/icons/icon-256-b-light.png differ
diff --git a/src/icons/icon-256-e-dark.png b/src/icons/icon-256-e-dark.png
new file mode 100644
index 0000000..bd195de
Binary files /dev/null and b/src/icons/icon-256-e-dark.png differ
diff --git a/src/icons/icon-256-e-light.png b/src/icons/icon-256-e-light.png
new file mode 100644
index 0000000..c3acafc
Binary files /dev/null and b/src/icons/icon-256-e-light.png differ
diff --git a/src/icons/icon-48-b-dark.png b/src/icons/icon-48-b-dark.png
new file mode 100644
index 0000000..c274949
Binary files /dev/null and b/src/icons/icon-48-b-dark.png differ
diff --git a/src/icons/icon-48-b-light.png b/src/icons/icon-48-b-light.png
new file mode 100644
index 0000000..7892b55
Binary files /dev/null and b/src/icons/icon-48-b-light.png differ
diff --git a/src/icons/icon-48-e-dark.png b/src/icons/icon-48-e-dark.png
new file mode 100644
index 0000000..c84b05f
Binary files /dev/null and b/src/icons/icon-48-e-dark.png differ
diff --git a/src/icons/icon-48-e-light.png b/src/icons/icon-48-e-light.png
new file mode 100644
index 0000000..ef9b72a
Binary files /dev/null and b/src/icons/icon-48-e-light.png differ
diff --git a/src/icons/icon-512-b-dark.png b/src/icons/icon-512-b-dark.png
new file mode 100644
index 0000000..6e0c3ec
Binary files /dev/null and b/src/icons/icon-512-b-dark.png differ
diff --git a/src/icons/icon-512-b-light.png b/src/icons/icon-512-b-light.png
new file mode 100644
index 0000000..eac0a45
Binary files /dev/null and b/src/icons/icon-512-b-light.png differ
diff --git a/src/icons/icon-512-e-dark.png b/src/icons/icon-512-e-dark.png
new file mode 100644
index 0000000..44186c2
Binary files /dev/null and b/src/icons/icon-512-e-dark.png differ
diff --git a/src/icons/icon-512-e-light.png b/src/icons/icon-512-e-light.png
new file mode 100644
index 0000000..d33f4a5
Binary files /dev/null and b/src/icons/icon-512-e-light.png differ
diff --git a/src/icons/icon-64-b-dark.png b/src/icons/icon-64-b-dark.png
new file mode 100644
index 0000000..7336cee
Binary files /dev/null and b/src/icons/icon-64-b-dark.png differ
diff --git a/src/icons/icon-64-b-light.png b/src/icons/icon-64-b-light.png
new file mode 100644
index 0000000..173a247
Binary files /dev/null and b/src/icons/icon-64-b-light.png differ
diff --git a/src/icons/icon-64-e-dark.png b/src/icons/icon-64-e-dark.png
new file mode 100644
index 0000000..f5c5793
Binary files /dev/null and b/src/icons/icon-64-e-dark.png differ
diff --git a/src/icons/icon-64-e-light.png b/src/icons/icon-64-e-light.png
new file mode 100644
index 0000000..86787cd
Binary files /dev/null and b/src/icons/icon-64-e-light.png differ
diff --git a/src/icons/icon-b-dark-animated.svg b/src/icons/icon-b-dark-animated.svg
new file mode 100644
index 0000000..072d040
--- /dev/null
+++ b/src/icons/icon-b-dark-animated.svg
@@ -0,0 +1,48 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 10; opacity: 1; }
+      50% { r: 12; opacity: 0.85; }
+    }
+    @keyframes glow-pulse {
+      0%, 100% { r: 16; opacity: 0.12; }
+      50% { r: 22; opacity: 0.06; }
+    }
+    @keyframes node-breathe {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.8; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+    .center-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
+    .node-tl { animation: node-breathe 2.4s ease-in-out infinite 0.3s; }
+    .node-tr { animation: node-breathe 2.4s ease-in-out infinite 0.6s; }
+    .node-bl { animation: node-breathe 2.4s ease-in-out infinite 0.9s; }
+    .node-br { animation: node-breathe 2.4s ease-in-out infinite 1.2s; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+
+  <!-- Diamond outline -->
+  <line x1="100" y1="51" x2="145" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="145" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="100" y1="149" x2="55" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="55" y1="100" x2="100" y2="51" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+
+  <!-- Cross lines -->
+  <line x1="55" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="145" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="51" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+
+  <!-- Center glow -->
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12" class="center-glow"/>
+
+  <!-- Nodes -->
+  <circle cx="100" cy="51" r="8" fill="#3B82F6" class="node-tl"/>
+  <circle cx="55" cy="100" r="8" fill="#3B82F6" class="node-tr"/>
+  <circle cx="145" cy="100" r="8" fill="#EF4444" class="node-bl"/>
+  <circle cx="100" cy="149" r="8" fill="#3B82F6" class="node-br"/>
+
+  <!-- Center -->
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node"/>
+</svg>
diff --git a/src/icons/icon-b-dark.svg b/src/icons/icon-b-dark.svg
new file mode 100644
index 0000000..fecb325
--- /dev/null
+++ b/src/icons/icon-b-dark.svg
@@ -0,0 +1,21 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+  <!-- Diamond outline -->
+  <line x1="100" y1="55" x2="142" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="142" y1="100" x2="100" y2="145" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="100" y1="145" x2="58" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <line x1="58" y1="100" x2="100" y2="55" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
+  <!-- Cross lines -->
+  <line x1="58" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="142" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="55" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="100" x2="100" y2="145" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <!-- Center glow -->
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12"/>
+  <!-- Nodes -->
+  <circle cx="100" cy="55" r="8" fill="#3B82F6"/>
+  <circle cx="58" cy="100" r="8" fill="#3B82F6"/>
+  <circle cx="142" cy="100" r="8" fill="#EF4444"/>
+  <circle cx="100" cy="145" r="8" fill="#3B82F6"/>
+  <circle cx="100" cy="100" r="10" fill="#3B82F6"/>
+</svg>
diff --git a/src/icons/icon-b-light-animated.svg b/src/icons/icon-b-light-animated.svg
new file mode 100644
index 0000000..a737dcc
--- /dev/null
+++ b/src/icons/icon-b-light-animated.svg
@@ -0,0 +1,43 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 10; opacity: 1; }
+      50% { r: 12; opacity: 0.85; }
+    }
+    @keyframes glow-pulse {
+      0%, 100% { r: 16; opacity: 0.1; }
+      50% { r: 22; opacity: 0.05; }
+    }
+    @keyframes node-breathe {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.8; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+    .center-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
+    .node-tl { animation: node-breathe 2.4s ease-in-out infinite 0.3s; }
+    .node-tr { animation: node-breathe 2.4s ease-in-out infinite 0.6s; }
+    .node-bl { animation: node-breathe 2.4s ease-in-out infinite 0.9s; }
+    .node-br { animation: node-breathe 2.4s ease-in-out infinite 1.2s; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+
+  <line x1="100" y1="51" x2="145" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="145" y1="100" x2="100" y2="149" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="100" y1="149" x2="55" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="55" y1="100" x2="100" y2="51" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+
+  <line x1="55" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="145" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="51" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="100" x2="100" y2="149" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1" class="center-glow"/>
+
+  <circle cx="100" cy="51" r="8" fill="#3B82F6" class="node-tl"/>
+  <circle cx="55" cy="100" r="8" fill="#3B82F6" class="node-tr"/>
+  <circle cx="145" cy="100" r="8" fill="#EF4444" class="node-bl"/>
+  <circle cx="100" cy="149" r="8" fill="#3B82F6" class="node-br"/>
+
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node"/>
+</svg>
diff --git a/src/icons/icon-b-light.svg b/src/icons/icon-b-light.svg
new file mode 100644
index 0000000..484622f
--- /dev/null
+++ b/src/icons/icon-b-light.svg
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+  <line x1="100" y1="55" x2="142" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="142" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="100" y1="145" x2="58" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="58" y1="100" x2="100" y2="55" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+  <line x1="58" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="142" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="55" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1"/>
+  <circle cx="100" cy="55" r="8" fill="#3B82F6"/>
+  <circle cx="58" cy="100" r="8" fill="#3B82F6"/>
+  <circle cx="142" cy="100" r="8" fill="#EF4444"/>
+  <circle cx="100" cy="145" r="8" fill="#3B82F6"/>
+  <circle cx="100" cy="100" r="10" fill="#3B82F6"/>
+</svg>
diff --git a/src/icons/icon-e-dark-animated.svg b/src/icons/icon-e-dark-animated.svg
new file mode 100644
index 0000000..257e265
--- /dev/null
+++ b/src/icons/icon-e-dark-animated.svg
@@ -0,0 +1,67 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes draw-edge {
+      from { stroke-dashoffset: 120; }
+      to { stroke-dashoffset: 0; }
+    }
+    @keyframes pop-node {
+      0% { r: 0; opacity: 0; }
+      70% { r: 8; }
+      100% { r: 6; opacity: 1; }
+    }
+    @keyframes pop-center {
+      0% { r: 0; opacity: 0; }
+      70% { r: 10; }
+      100% { r: 8; opacity: 0.7; }
+    }
+    @keyframes center-idle {
+      0%, 100% { r: 8; opacity: 0.7; }
+      50% { r: 9.5; opacity: 0.6; }
+    }
+
+    .edge { stroke-dasharray: 120; stroke-dashoffset: 120; }
+    .e-back-1 { animation: draw-edge 0.5s ease-out 0.0s forwards; }
+    .e-back-2 { animation: draw-edge 0.5s ease-out 0.1s forwards; }
+    .e-back-3 { animation: draw-edge 0.5s ease-out 0.2s forwards; }
+    .e-mid-1  { animation: draw-edge 0.5s ease-out 0.35s forwards; }
+    .e-mid-2  { animation: draw-edge 0.5s ease-out 0.45s forwards; }
+    .e-mid-3  { animation: draw-edge 0.5s ease-out 0.55s forwards; }
+    .e-frt-1  { animation: draw-edge 0.5s ease-out 0.7s forwards; }
+    .e-frt-2  { animation: draw-edge 0.5s ease-out 0.8s forwards; }
+    .e-frt-3  { animation: draw-edge 0.5s ease-out 0.9s forwards; }
+
+    .v-topback    { animation: pop-node 0.3s ease-out 0.05s forwards; r: 0; opacity: 0; }
+    .v-backleft   { animation: pop-node 0.3s ease-out 0.15s forwards; r: 0; opacity: 0; }
+    .v-backright  { animation: pop-node 0.3s ease-out 0.25s forwards; r: 0; opacity: 0; }
+    .v-center     { animation: pop-center 0.3s ease-out 0.5s forwards, center-idle 2.4s ease-in-out 1s infinite; r: 0; opacity: 0; }
+    .v-frontleft  { animation: pop-node 0.3s ease-out 0.75s forwards; r: 0; opacity: 0; }
+    .v-frontright { animation: pop-node 0.3s ease-out 0.85s forwards; r: 0; opacity: 0; }
+    .v-bottom     { animation: pop-node 0.3s ease-out 0.95s forwards; r: 0; opacity: 0; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+
+  <!-- Back edges -->
+  <line x1="100" y1="42" x2="46" y2="72" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-1"/>
+  <line x1="100" y1="42" x2="154" y2="72" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-2"/>
+  <line x1="154" y1="72" x2="154" y2="128" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-3"/>
+
+  <!-- Mid edges -->
+  <line x1="46" y1="72" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-1"/>
+  <line x1="154" y1="72" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-2"/>
+  <line x1="100" y1="100" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-3"/>
+
+  <!-- Front edges -->
+  <line x1="46" y1="72" x2="46" y2="128" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-1"/>
+  <line x1="46" y1="128" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-2"/>
+  <line x1="154" y1="128" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-3"/>
+
+  <!-- Vertices -->
+  <circle cx="100" cy="42" fill="#3B82F6" opacity="0.55" class="v-topback"/>
+  <circle cx="46" cy="72" fill="#3B82F6" opacity="0.55" class="v-backleft"/>
+  <circle cx="154" cy="72" fill="#EF4444" opacity="0.55" class="v-backright"/>
+  <circle cx="100" cy="100" fill="#3B82F6" class="v-center"/>
+  <circle cx="46" cy="128" fill="#EF4444" class="v-frontleft"/>
+  <circle cx="154" cy="128" fill="#3B82F6" class="v-frontright"/>
+  <circle cx="100" cy="158" fill="#3B82F6" class="v-bottom"/>
+</svg>
diff --git a/src/icons/icon-e-dark.svg b/src/icons/icon-e-dark.svg
new file mode 100644
index 0000000..ac7902f
--- /dev/null
+++ b/src/icons/icon-e-dark.svg
@@ -0,0 +1,23 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+  <!-- Back edges -->
+  <line x1="100" y1="48" x2="150" y2="74" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
+  <line x1="100" y1="48" x2="50" y2="74" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
+  <line x1="150" y1="74" x2="150" y2="126" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
+  <!-- Mid edges -->
+  <line x1="50" y1="74" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="150" y1="74" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="100" y1="100" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
+  <!-- Front edges -->
+  <line x1="50" y1="74" x2="50" y2="126" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
+  <line x1="50" y1="126" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
+  <line x1="150" y1="126" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
+  <!-- Vertices -->
+  <circle cx="100" cy="48" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="50" cy="74" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="150" cy="74" r="6" fill="#EF4444" opacity="0.55"/>
+  <circle cx="100" cy="100" r="8" fill="#3B82F6" opacity="0.7"/>
+  <circle cx="50" cy="126" r="6" fill="#EF4444"/>
+  <circle cx="150" cy="126" r="6" fill="#3B82F6"/>
+  <circle cx="100" cy="152" r="6" fill="#3B82F6"/>
+</svg>
diff --git a/src/icons/icon-e-light-animated.svg b/src/icons/icon-e-light-animated.svg
new file mode 100644
index 0000000..9303228
--- /dev/null
+++ b/src/icons/icon-e-light-animated.svg
@@ -0,0 +1,63 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes draw-edge {
+      from { stroke-dashoffset: 120; }
+      to { stroke-dashoffset: 0; }
+    }
+    @keyframes pop-node {
+      0% { r: 0; opacity: 0; }
+      70% { r: 8; }
+      100% { r: 6; opacity: 1; }
+    }
+    @keyframes pop-center {
+      0% { r: 0; opacity: 0; }
+      70% { r: 10; }
+      100% { r: 8; opacity: 0.7; }
+    }
+    @keyframes center-idle {
+      0%, 100% { r: 8; opacity: 0.7; }
+      50% { r: 9.5; opacity: 0.6; }
+    }
+
+    .edge { stroke-dasharray: 120; stroke-dashoffset: 120; }
+    .e-back-1 { animation: draw-edge 0.5s ease-out 0.0s forwards; }
+    .e-back-2 { animation: draw-edge 0.5s ease-out 0.1s forwards; }
+    .e-back-3 { animation: draw-edge 0.5s ease-out 0.2s forwards; }
+    .e-mid-1  { animation: draw-edge 0.5s ease-out 0.35s forwards; }
+    .e-mid-2  { animation: draw-edge 0.5s ease-out 0.45s forwards; }
+    .e-mid-3  { animation: draw-edge 0.5s ease-out 0.55s forwards; }
+    .e-frt-1  { animation: draw-edge 0.5s ease-out 0.7s forwards; }
+    .e-frt-2  { animation: draw-edge 0.5s ease-out 0.8s forwards; }
+    .e-frt-3  { animation: draw-edge 0.5s ease-out 0.9s forwards; }
+
+    .v-topback    { animation: pop-node 0.3s ease-out 0.05s forwards; r: 0; opacity: 0; }
+    .v-backleft   { animation: pop-node 0.3s ease-out 0.15s forwards; r: 0; opacity: 0; }
+    .v-backright  { animation: pop-node 0.3s ease-out 0.25s forwards; r: 0; opacity: 0; }
+    .v-center     { animation: pop-center 0.3s ease-out 0.5s forwards, center-idle 2.4s ease-in-out 1s infinite; r: 0; opacity: 0; }
+    .v-frontleft  { animation: pop-node 0.3s ease-out 0.75s forwards; r: 0; opacity: 0; }
+    .v-frontright { animation: pop-node 0.3s ease-out 0.85s forwards; r: 0; opacity: 0; }
+    .v-bottom     { animation: pop-node 0.3s ease-out 0.95s forwards; r: 0; opacity: 0; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+
+  <line x1="100" y1="42" x2="46" y2="72" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-1"/>
+  <line x1="100" y1="42" x2="154" y2="72" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-2"/>
+  <line x1="154" y1="72" x2="154" y2="128" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-3"/>
+
+  <line x1="46" y1="72" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-1"/>
+  <line x1="154" y1="72" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-2"/>
+  <line x1="100" y1="100" x2="100" y2="158" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-3"/>
+
+  <line x1="46" y1="72" x2="46" y2="128" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-1"/>
+  <line x1="46" y1="128" x2="100" y2="158" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-2"/>
+  <line x1="154" y1="128" x2="100" y2="158" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-3"/>
+
+  <circle cx="100" cy="42" fill="#3B82F6" opacity="0.55" class="v-topback"/>
+  <circle cx="46" cy="72" fill="#3B82F6" opacity="0.55" class="v-backleft"/>
+  <circle cx="154" cy="72" fill="#EF4444" opacity="0.55" class="v-backright"/>
+  <circle cx="100" cy="100" fill="#3B82F6" class="v-center"/>
+  <circle cx="46" cy="128" fill="#EF4444" class="v-frontleft"/>
+  <circle cx="154" cy="128" fill="#3B82F6" class="v-frontright"/>
+  <circle cx="100" cy="158" fill="#3B82F6" class="v-bottom"/>
+</svg>
diff --git a/src/icons/icon-e-light.svg b/src/icons/icon-e-light.svg
new file mode 100644
index 0000000..897906c
--- /dev/null
+++ b/src/icons/icon-e-light.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+  <line x1="100" y1="48" x2="150" y2="74" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
+  <line x1="100" y1="48" x2="50" y2="74" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
+  <line x1="150" y1="74" x2="150" y2="126" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
+  <line x1="50" y1="74" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="150" y1="74" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="100" y1="100" x2="100" y2="152" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+  <line x1="50" y1="74" x2="50" y2="126" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+  <line x1="50" y1="126" x2="100" y2="152" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+  <line x1="150" y1="126" x2="100" y2="152" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
+  <circle cx="100" cy="48" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="50" cy="74" r="6" fill="#3B82F6" opacity="0.55"/>
+  <circle cx="150" cy="74" r="6" fill="#EF4444" opacity="0.55"/>
+  <circle cx="100" cy="100" r="8" fill="#3B82F6" opacity="0.7"/>
+  <circle cx="50" cy="126" r="6" fill="#EF4444"/>
+  <circle cx="150" cy="126" r="6" fill="#3B82F6"/>
+  <circle cx="100" cy="152" r="6" fill="#3B82F6"/>
+</svg>
diff --git a/src/icons/icon-morph-dark-animated.svg b/src/icons/icon-morph-dark-animated.svg
new file mode 100644
index 0000000..3cae65c
--- /dev/null
+++ b/src/icons/icon-morph-dark-animated.svg
@@ -0,0 +1,174 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 8; }
+      50% { r: 9.5; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#14142a"/>
+
+  <!--
+    B-state (flat diamond) positions:
+      top:    100,51   left: 55,100   right: 145,100   bottom: 100,149   center: 100,100
+    
+    E-state (wireframe cube) positions:
+      topBack:    100,42    backLeft:  46,72    backRight: 154,72
+      center:     100,100   frontLeft: 46,128   frontRight: 154,128   bottom: 100,158
+    
+    Mapping B→E:
+      top    → topBack     (100,51  → 100,42)
+      left   → backLeft    (55,100  → 46,72)   AND spawns frontLeft  (55,100  → 46,128)
+      right  → backRight   (145,100 → 154,72)  AND spawns frontRight (145,100 → 154,128)
+      bottom → bottom      (100,149 → 100,158)
+      center → center      (100,100 → 100,100) stays
+    
+    Timing: 1.5s hold B, 1s morph to E, 2s hold E, 1s morph back, repeat
+  -->
+
+  <!-- ═══ EDGES ═══ -->
+  <!-- Diamond outline (B) that morphs to cube edges (E) -->
+
+  <!-- top→right becomes topBack→backRight -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
+        x1="100" y1="51" x2="145" y2="100">
+    <animate attributeName="x1" values="100;100;100;100;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="145;145;154;154;145"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;72;72;100"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- right→bottom becomes backRight→frontRight -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
+        x1="145" y1="100" x2="100" y2="149">
+    <animate attributeName="x1" values="145;145;154;154;145"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- bottom→left becomes frontRight→bottom (front bottom-right) -->
+  <line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.25"
+        x1="100" y1="149" x2="55" y2="100">
+    <animate attributeName="x1" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;100;100;55"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;158;158;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.25;0.25;0.9;0.9;0.25" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- left→top becomes backLeft→topBack -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
+        x1="55" y1="100" x2="100" y2="51">
+    <animate attributeName="x1" values="55;55;46;46;55"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="100;100;100;100;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: left→center becomes backLeft→center -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="55" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: right→center becomes backRight→center -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="145" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: center→bottom stays vertical but bottom moves -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="100" y1="100" x2="100" y2="149">
+    <animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross: top→center vertical -->
+  <line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
+        x1="100" y1="51" x2="100" y2="100">
+    <animate attributeName="y1" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- NEW edges that appear in E-state (start invisible) -->
+  <!-- frontLeft→bottom -->
+  <line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="100" y2="149" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;158;158;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.9;0.9;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- backLeft→frontLeft (left vertical) -->
+  <line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="55" y2="100" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.9;0.9;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- ═══ NODES ═══ -->
+
+  <!-- Top → TopBack -->
+  <circle cx="100" cy="51" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="51;51;42;42;51"              keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Left → BackLeft -->
+  <circle cx="55" cy="100" r="8" fill="#3B82F6">
+    <animate attributeName="cx" values="55;55;46;46;55"              keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"           keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Right → BackRight -->
+  <circle cx="145" cy="100" r="8" fill="#EF4444">
+    <animate attributeName="cx" values="145;145;154;154;145"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"           keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Bottom → Bottom (slight shift) -->
+  <circle cx="100" cy="149" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="149;149;158;158;149"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- FrontLeft: spawns from Left position, invisible in B -->
+  <circle cx="55" cy="100" r="0" fill="#EF4444" opacity="0">
+    <animate attributeName="cx" values="55;55;46;46;55"              keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- FrontRight: spawns from Right position, invisible in B -->
+  <circle cx="145" cy="100" r="0" fill="#3B82F6" opacity="0">
+    <animate attributeName="cx" values="145;145;154;154;145"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"                   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Center (always visible, pulse) -->
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node">
+    <animate attributeName="r" values="10;10;8;8;10"                 keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.7;0.7;1"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Center glow -->
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12">
+    <animate attributeName="r" values="16;16;12;12;16"               keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.12;0.12;0.06;0.06;0.12" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+</svg>
diff --git a/src/icons/icon-morph-light-animated.svg b/src/icons/icon-morph-light-animated.svg
new file mode 100644
index 0000000..ec26d79
--- /dev/null
+++ b/src/icons/icon-morph-light-animated.svg
@@ -0,0 +1,127 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes center-pulse {
+      0%, 100% { r: 8; }
+      50% { r: 9.5; }
+    }
+    .center-node { animation: center-pulse 2.4s ease-in-out infinite; }
+  </style>
+
+  <rect width="200" height="200" rx="32" fill="#e8e8ee"/>
+
+  <!-- Diamond/cube edges -->
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
+        x1="100" y1="51" x2="145" y2="100">
+    <animate attributeName="y1" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="145;145;154;154;145"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
+        x1="145" y1="100" x2="100" y2="149">
+    <animate attributeName="x1" values="145;145;154;154;145"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <line stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.18"
+        x1="100" y1="149" x2="55" y2="100">
+    <animate attributeName="x1" values="100;100;154;154;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="149;149;128;128;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;100;100;55"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;158;158;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.18;0.18;0.7;0.7;0.18" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
+        x1="55" y1="100" x2="100" y2="51">
+    <animate attributeName="x1" values="55;55;46;46;55"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="51;51;42;42;51"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Cross lines -->
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="55" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="145" y1="100" x2="100" y2="100">
+    <animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="100" y1="100" x2="100" y2="149">
+    <animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
+        x1="100" y1="51" x2="100" y2="100">
+    <animate attributeName="y1" values="51;51;42;42;51"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- E-only edges (spawn) -->
+  <line stroke="#333" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="100" y2="149" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="149;149;158;158;149"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.7;0.7;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+  <line stroke="#333" stroke-width="2.5" stroke-linecap="round"
+        x1="55" y1="100" x2="55" y2="100" opacity="0">
+    <animate attributeName="x1" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y1" values="100;100;72;72;100"    keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="55;55;46;46;55"      keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="y2" values="100;100;128;128;100"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.7;0.7;0"  keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Nodes -->
+  <circle cx="100" cy="51" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="51;51;42;42;51"        keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="55" cy="100" r="8" fill="#3B82F6">
+    <animate attributeName="cx" values="55;55;46;46;55"        keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="145" cy="100" r="8" fill="#EF4444">
+    <animate attributeName="cx" values="145;145;154;154;145"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;72;72;100"     keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="100" cy="149" r="8" fill="#3B82F6">
+    <animate attributeName="cy" values="149;149;158;158;149"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="8;8;6;6;8"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Spawn nodes -->
+  <circle cx="55" cy="100" r="0" fill="#EF4444" opacity="0">
+    <animate attributeName="cx" values="55;55;46;46;55"        keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="145" cy="100" r="0" fill="#3B82F6" opacity="0">
+    <animate attributeName="cx" values="145;145;154;154;145"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="100;100;128;128;100"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="0;0;6;6;0"             keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;1;1;0"       keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Center -->
+  <circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node">
+    <animate attributeName="r" values="10;10;8;8;10"           keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="1;1;0.7;0.7;1"   keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1">
+    <animate attributeName="r" values="16;16;12;12;16"         keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.1;0.1;0.05;0.05;0.1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
+  </circle>
+</svg>
diff --git a/src/icons/preview-sheet.png b/src/icons/preview-sheet.png
new file mode 100644
index 0000000..e0d57bc
Binary files /dev/null and b/src/icons/preview-sheet.png differ
diff --git a/src/icons/wordmark-dark.svg b/src/icons/wordmark-dark.svg
new file mode 100644
index 0000000..863a5a9
--- /dev/null
+++ b/src/icons/wordmark-dark.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
+  <!-- A-frame lettermark -->
+  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
+  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
+  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
+  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
+  <!-- "rmature" text -->
+  <text x="58" y="62" fill="#dddddd" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+</svg>
diff --git a/src/icons/wordmark-light.svg b/src/icons/wordmark-light.svg
new file mode 100644
index 0000000..5682907
--- /dev/null
+++ b/src/icons/wordmark-light.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
+  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
+  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
+  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
+  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
+  <text x="58" y="62" fill="#222222" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+</svg>
diff --git a/src/js/sw/sdk/index.js b/src/js/sw/sdk/index.js
index bed8c81..525d9c6 100644
--- a/src/js/sw/sdk/index.js
+++ b/src/js/sw/sdk/index.js
@@ -154,7 +154,7 @@ export async function boot() {
         sw.ui = Object.freeze({});
     }
 
-    // Topbar — standard navigation bar for surfaces
+    // Topbar — standard navigation bar for surfaces (legacy API)
     try {
         const topbarMod = await import('../shell/topbar.js');
         _shell.Topbar = topbarMod.Topbar;
@@ -162,7 +162,16 @@ export async function boot() {
         console.warn('[sw] Topbar import failed:', e.message);
     }
 
-    // Freeze shell now that Topbar is loaded
+    // Shell Topbar — kernel-injected two-slot topbar
+    try {
+        const shellTopbarMod = await import('../shell/shell-topbar.js');
+        _shell.topbar = shellTopbarMod.shellTopbarAPI;
+        _shell._ShellTopbar = shellTopbarMod.ShellTopbar;
+    } catch (e) {
+        console.warn('[sw] ShellTopbar import failed:', e.message);
+    }
+
+    // Freeze shell now that all shell modules are loaded
     sw.shell = Object.freeze(_shell);
 
     // UserMenu render helper — surfaces call sw.userMenu(container, opts)
@@ -174,7 +183,7 @@ export async function boot() {
     };
 
     // Marker for idempotency
-    sw._sdk = '0.6.5';
+    sw._sdk = '0.7.0';
 
     // 8. Expose globally
     window.sw = sw;
@@ -210,7 +219,18 @@ export async function boot() {
         console.warn('[sw] Imperative host mount failed:', e.message);
     }
 
-    // 11. Signal ready
+    // 11. Auto-mount shell topbar if #shell-topbar exists
+    try {
+        const shellMount = document.getElementById('shell-topbar');
+        if (shellMount && sw.shell._ShellTopbar && auth.isAuthenticated) {
+            const { render } = preact;
+            render(html`<${sw.shell._ShellTopbar} />`, shellMount);
+        }
+    } catch (e) {
+        console.warn('[sw] Shell topbar mount failed:', e.message);
+    }
+
+    // 12. Signal ready
     events.emit('sdk.ready', {}, { localOnly: true });
     document.dispatchEvent(new CustomEvent('sw:ready', { detail: { sw } }));
     console.log(`[sw] SDK v${sw._sdk} ready`);
diff --git a/src/js/sw/shell/notification-bell.js b/src/js/sw/shell/notification-bell.js
index b93091c..31fddff 100644
--- a/src/js/sw/shell/notification-bell.js
+++ b/src/js/sw/shell/notification-bell.js
@@ -39,9 +39,35 @@ export function NotificationBell({ onNavigate } = {}) {
     // ── WebSocket live updates ──────────
     useEffect(() => {
         if (!window.sw?.on) return;
-        const handler = () => reload();
-        window.sw.on('notification.created', handler);
-        return () => window.sw.off?.('notification.created', handler);
+
+        // New notification — refetch the list
+        const onCreated = () => reload();
+
+        // Single notification marked read (from another tab/surface)
+        const onRead = (e) => {
+            const id = e?.id;
+            if (!id) return;
+            setNotifications(prev => prev.map(n =>
+                n.id === id ? { ...n, read_at: n.read_at || new Date().toISOString() } : n
+            ));
+        };
+
+        // All notifications marked read (from another tab/surface)
+        const onAllRead = () => {
+            setNotifications(prev => prev.map(n => ({
+                ...n, read_at: n.read_at || new Date().toISOString()
+            })));
+        };
+
+        window.sw.on('notification.created', onCreated);
+        window.sw.on('notification.read', onRead);
+        window.sw.on('notification.all_read', onAllRead);
+
+        return () => {
+            window.sw.off?.('notification.created', onCreated);
+            window.sw.off?.('notification.read', onRead);
+            window.sw.off?.('notification.all_read', onAllRead);
+        };
     }, [reload]);
 
     // ── Close on outside click ──────────
diff --git a/src/js/sw/shell/shell-topbar.js b/src/js/sw/shell/shell-topbar.js
new file mode 100644
index 0000000..262f357
--- /dev/null
+++ b/src/js/sw/shell/shell-topbar.js
@@ -0,0 +1,95 @@
+/**
+ * ShellTopbar — Kernel-injected topbar for all surfaces
+ *
+ * Two named slots: left (defaults to manifest title) and center (flex:1).
+ * Home link, notification bell, and user menu always present.
+ *
+ * Surfaces customize via sw.shell.topbar.setLeft/setSlot/setTitle/hide/show.
+ * This component is auto-mounted by the SDK boot if #shell-topbar exists.
+ */
+const { html } = window;
+const { useState, useEffect } = hooks;
+
+import { NotificationBell } from './notification-bell.js';
+import { UserMenu }         from './user-menu.js';
+
+// ── Shared state — SDK API writes here, component reads ──
+
+let _leftContent = null;
+let _centerContent = null;
+let _titleOverride = null;
+let _visible = true;
+let _listeners = new Set();
+
+function notify() {
+    _listeners.forEach(fn => fn());
+}
+
+/** SDK-facing API — exported for sw.shell.topbar.* */
+export const shellTopbarAPI = {
+    /** Override left slot with a vnode */
+    setLeft(vnode) {
+        _leftContent = vnode;
+        _titleOverride = null;
+        notify();
+    },
+    /** Set center slot content (tabs, pickers, search) */
+    setSlot(vnode) {
+        _centerContent = vnode;
+        notify();
+    },
+    /** Shorthand: set left slot to plain text title */
+    setTitle(str) {
+        _titleOverride = str;
+        _leftContent = null;
+        notify();
+    },
+    /** Hide the entire topbar (full-bleed surfaces) */
+    hide() {
+        _visible = false;
+        notify();
+    },
+    /** Show the topbar after hiding */
+    show() {
+        _visible = true;
+        notify();
+    },
+};
+
+export function ShellTopbar() {
+    const [, setTick] = useState(0);
+
+    useEffect(() => {
+        const listener = () => setTick(t => t + 1);
+        _listeners.add(listener);
+        return () => _listeners.delete(listener);
+    }, []);
+
+    if (!_visible) return null;
+
+    const BASE = window.__BASE__ || '';
+    const manifestTitle = window.__MANIFEST__?.title || '';
+
+    // Left slot: custom vnode > title override > manifest title
+    const leftSlot = _leftContent
+        ? _leftContent
+        : html`<span class="sw-topbar__title">${_titleOverride || manifestTitle}</span>`;
+
+    return html`
+        <div class="sw-topbar sw-topbar--shell">
+            <a class="sw-topbar__home" href="${BASE}/" title="Home">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="1 8 8 1 15 8" />
+                    <polyline points="3 10 3 15 6.5 15 6.5 11 9.5 11 9.5 15 13 15 13 10" />
+                </svg>
+            </a>
+            <div class="sw-topbar__left">${leftSlot}</div>
+            <div class="sw-topbar__center">${_centerContent}</div>
+            <div class="sw-topbar__right">
+                <${NotificationBell} />
+                <${UserMenu} placement="down-right" />
+            </div>
+        </div>
+    `;
+}
diff --git a/src/js/sw/shell/user-menu.js b/src/js/sw/shell/user-menu.js
index 9ef31e7..377ef54 100644
--- a/src/js/sw/shell/user-menu.js
+++ b/src/js/sw/shell/user-menu.js
@@ -34,15 +34,29 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
     const user = sw?.auth?.user;
     const authenticated = sw?.auth?.isAuthenticated;
 
-    // Fetch installed surfaces once on mount.
+    // Fetch installed surfaces on mount and when packages/auth change.
     const CORE_IDS = new Set(['admin', 'settings', 'team-admin', 'workflow', 'workflow-landing', 'docs', 'welcome']);
 
     useEffect(() => {
         if (!sw?.api?.surfaces?.list) return;
-        sw.api.surfaces.list().then(data => {
-            const raw = Array.isArray(data) ? data : data?.data || [];
-            setAllSurfaces(raw);
-        }).catch(() => {});
+
+        function fetchSurfaces() {
+            sw.api.surfaces.list().then(data => {
+                const raw = Array.isArray(data) ? data : data?.data || [];
+                setAllSurfaces(raw);
+            }).catch(() => {});
+        }
+
+        fetchSurfaces();
+
+        // Re-fetch when packages or auth change (WS events from CS-1)
+        const off1 = sw.on?.('package.changed', fetchSurfaces);
+        const off2 = sw.on?.('auth.changed', fetchSurfaces);
+
+        return () => {
+            if (typeof off1 === 'function') off1();
+            if (typeof off2 === 'function') off2();
+        };
     }, [authenticated]);
 
     const extSurfaces = allSurfaces.filter(s => !CORE_IDS.has(s.id));
diff --git a/src/js/sw/surfaces/admin/groups.js b/src/js/sw/surfaces/admin/groups.js
index 6f4bad7..9851984 100644
--- a/src/js/sw/surfaces/admin/groups.js
+++ b/src/js/sw/surfaces/admin/groups.js
@@ -15,11 +15,14 @@ export default function GroupsSection() {
     const [showCreate, setShowCreate] = useState(false);
     const [showAddMember, setShowAddMember] = useState(false);
 
+    const [error, setError] = useState(null);
+
     const loadGroups = useCallback(async () => {
+        setError(null);
         try {
             const data = await sw.api.admin.groups.list();
             setGroups(data || []);
-        } catch (e) { sw.toast(e.message, 'error'); }
+        } catch (e) { setError(e.message); }
         finally { setLoading(false); }
     }, []);
 
@@ -109,6 +112,13 @@ export default function GroupsSection() {
 
     if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
 
+    if (error) return html`
+        <div class="sw-inline-error">
+            <span>${error}</span>
+            <button class="sw-btn sw-btn--secondary sw-btn--sm" onClick=${loadGroups}>Retry</button>
+        </div>
+    `;
+
     if (detail) return html`
         <div>
             <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
@@ -194,7 +204,7 @@ export default function GroupsSection() {
             `}
 
             <div class="admin-list">
-                ${groups.length === 0 && html`<div class="empty-hint">No groups</div>`}
+                ${groups.length === 0 && html`<div class="sw-empty-state"><div class="sw-empty-state__text">Groups control access to surfaces and features via permissions.</div></div>`}
                 ${groups.map(g => html`
                     <div class="admin-surface-row" key=${g.id} style="cursor:pointer;" onClick=${() => openDetail(g)}>
                         <strong style="flex:1;">${g.name}</strong>
diff --git a/src/js/sw/surfaces/admin/index.js b/src/js/sw/surfaces/admin/index.js
index daedfbc..eaa0889 100644
--- a/src/js/sw/surfaces/admin/index.js
+++ b/src/js/sw/surfaces/admin/index.js
@@ -15,7 +15,6 @@ const { render } = preact;
 
 import { ToastContainer } from '../../primitives/toast.js';
 import { DialogStack } from '../../shell/dialog-stack.js';
-import { UserMenu } from '../../shell/user-menu.js';
 
 // ── Category → Section mapping ──────────────
 const ADMIN_SECTIONS = {
@@ -131,36 +130,36 @@ function AdminSurface() {
         if (href) location.replace(href);
     }, []);
 
+    // Shell topbar: Pattern C — favicon + title in left slot, category tabs in center
+    useEffect(() => {
+        if (!window.sw?.shell?.topbar) return;
+
+        window.sw.shell.topbar.setLeft(html`
+            <img src="${BASE}/favicon.svg" alt="" width="18" height="18" style="vertical-align:-3px;" />
+            <span style="margin-left:6px;font-weight:600;font-size:0.9rem;color:var(--text);">Administration</span>
+        `);
+
+        window.sw.shell.topbar.setSlot(html`
+            <div class="sw-topbar__tabs">
+                ${Object.entries(CATEGORY_META).map(([cat, meta]) => html`
+                    <a key=${cat} class="sw-topbar__tab ${activeCat === cat ? 'active' : ''}"
+                       href="${BASE}/admin/${meta.first}"
+                       onClick=${navClick}>
+                        <${CatIcon} paths=${meta.icon} />
+                        ${meta.label}
+                    </a>
+                `)}
+            </div>
+        `);
+    }, [activeCat, navClick]);
+
     const title = ADMIN_LABELS[section] || 'Admin';
     const sidebarSections = ADMIN_SECTIONS[activeCat] || [];
 
     return html`
         <div class="surface-admin">
-            ${/* Top Bar */``}
-            <div class="admin-topbar">
-                <span class="admin-topbar-title">
-                    <img src="${BASE}/favicon.svg" alt="" width="18" height="18" style="vertical-align:-3px;" />
-                    Administration
-                </span>
-
-                <div class="admin-category-tabs">
-                    ${Object.entries(CATEGORY_META).map(([cat, meta]) => html`
-                        <a key=${cat} href="${BASE}/admin/${meta.first}"
-                           class="admin-cat-btn ${activeCat === cat ? 'active' : ''}"
-                           onClick=${navClick}>
-                            <${CatIcon} paths=${meta.icon} />
-                            ${meta.label}
-                        </a>
-                    `)}
-                </div>
-
-                <div style="margin-left:auto;">
-                    <${UserMenu} placement="down-right" />
-                </div>
-            </div>
-
             <div class="admin-body">
-                ${/* Left Nav */``}
+                ${/* Left Nav — surface-owned, below topbar */``}
                 <div class="admin-nav">
                     ${sidebarSections.map(key => html`
                         <a key=${key} href="${BASE}/admin/${key}"
diff --git a/src/js/sw/surfaces/admin/packages.js b/src/js/sw/surfaces/admin/packages.js
index e6aaf45..7bc01eb 100644
--- a/src/js/sw/surfaces/admin/packages.js
+++ b/src/js/sw/surfaces/admin/packages.js
@@ -51,13 +51,16 @@ export default function PackagesSection() {
 
     const BASE = window.__BASE__ || '';
 
+    const [error, setError] = useState(null);
+
     // ── Load packages ───────────────────────────
     const load = useCallback(async () => {
+        setError(null);
         try {
             const opts = typeFilter !== 'all' ? { type: typeFilter } : undefined;
             const data = await sw.api.admin.packages.list(opts);
             setPackages(data || []);
-        } catch (e) { sw.toast(e.message, 'error'); }
+        } catch (e) { setError(e.message); }
         finally { setLoading(false); }
     }, [typeFilter]);
 
@@ -228,6 +231,13 @@ export default function PackagesSection() {
     // ── Render ───────────────────────────────────
     if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
 
+    if (error) return html`
+        <div class="sw-inline-error">
+            <span>${error}</span>
+            <button class="sw-btn sw-btn--secondary sw-btn--sm" onClick=${load}>Retry</button>
+        </div>
+    `;
+
     const enabled = packages.filter(p => p.enabled).length;
     const dormant = packages.filter(p => p.status === 'dormant').length;
     const hasManifestSettings = (pkg) =>
diff --git a/src/js/sw/surfaces/admin/workflows.js b/src/js/sw/surfaces/admin/workflows.js
index f924750..cae00c3 100644
--- a/src/js/sw/surfaces/admin/workflows.js
+++ b/src/js/sw/surfaces/admin/workflows.js
@@ -13,12 +13,14 @@ export default function WorkflowsSection() {
     const [editing, setEditing] = useState(null); // null | 'new' | workflow
     const [stages, setStages] = useState([]);
     const [showCreate, setShowCreate] = useState(false);
+    const [error, setError] = useState(null);
 
     const load = useCallback(async () => {
+        setError(null);
         try {
             const data = await sw.api.workflows.list();
             setWorkflows(data || []);
-        } catch (e) { sw.toast(e.message, 'error'); }
+        } catch (e) { setError(e.message); }
         finally { setLoading(false); }
     }, []);
 
@@ -77,6 +79,13 @@ export default function WorkflowsSection() {
 
     if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
 
+    if (error) return html`
+        <div class="sw-inline-error">
+            <span>${error}</span>
+            <button class="sw-btn sw-btn--secondary sw-btn--sm" onClick=${load}>Retry</button>
+        </div>
+    `;
+
     if (editing) return html`
         <form onSubmit=${updateWorkflow}>
             <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
@@ -145,7 +154,7 @@ export default function WorkflowsSection() {
             `}
 
             <div class="admin-list">
-                ${workflows.length === 0 && html`<div class="empty-hint">No workflows</div>`}
+                ${workflows.length === 0 && html`<div class="sw-empty-state"><div class="sw-empty-state__text">Workflows define multi-stage approval processes with team roles and SLA tracking.</div></div>`}
                 ${workflows.map(w => html`
                     <div class="admin-surface-row" key=${w.id} style="cursor:pointer;" onClick=${() => openEdit(w)}>
                         <div style="flex:1;min-width:0;">
diff --git a/src/js/sw/surfaces/docs/index.js b/src/js/sw/surfaces/docs/index.js
index d827504..847fc29 100644
--- a/src/js/sw/surfaces/docs/index.js
+++ b/src/js/sw/surfaces/docs/index.js
@@ -16,8 +16,6 @@ const { render } = preact;
 // Preload marked so renderSync works in useMemo
 if (sw?.markdown) sw.markdown.preload();
 
-import { Topbar } from '../../shell/topbar.js';
-
 function DocsSurface() {
     const [docs, setDocs] = useState([]);
     const [active, setActive] = useState(window.__SECTION__ || 'GETTING-STARTED');
@@ -98,6 +96,14 @@ function DocsSurface() {
         const el = articleRef.current;
         if (!el || !renderedHtml) return;
         if (sw?.renderers) sw.renderers.runPostRenderers(el);
+
+        // Inject IDs onto headings so outline links can scroll to them
+        el.querySelectorAll('h1, h2, h3, h4').forEach(h => {
+            if (!h.id) {
+                h.id = h.textContent.trim().toLowerCase()
+                    .replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+            }
+        });
     }, [renderedHtml]);
 
     function retryList() {
@@ -108,7 +114,6 @@ function DocsSurface() {
     }
 
     return html`
-        <${Topbar} title="Documentation" />
         <div class="docs-layout">
             <nav class="docs-sidebar">
                 <h3 class="docs-sidebar__heading">Documentation</h3>
diff --git a/src/js/sw/surfaces/settings/index.js b/src/js/sw/surfaces/settings/index.js
index 22ac63a..c05db07 100644
--- a/src/js/sw/surfaces/settings/index.js
+++ b/src/js/sw/surfaces/settings/index.js
@@ -70,14 +70,12 @@ function SettingsSurface() {
 
         if (sectionModules[section]) {
             sectionModules[section]().then(mod => {
-                // Module exports the component as the first named export
                 const Comp = mod.default || Object.values(mod)[0];
                 setSectionComponent(() => Comp);
             }).catch(e => {
                 console.error('[settings] Failed to load section:', section, e);
             });
         }
-        // Bridge sections are handled inline
     }, [section]);
 
     const onNavClick = useCallback((e) => {
@@ -86,86 +84,36 @@ function SettingsSurface() {
         if (href) location.replace(href);
     }, []);
 
-    const backClick = useCallback((e) => {
-        e.preventDefault();
-        const RETURN_KEY = 'sb_settings_return';
-        const returnURL = sessionStorage.getItem(RETURN_KEY);
-        sessionStorage.removeItem(RETURN_KEY);
-        location.href = returnURL || BASE + '/';
-    }, []);
-
-    // Stash return URL on first load
+    // Shell topbar: flat tabs (Pattern B)
     useEffect(() => {
-        const RETURN_KEY = 'sb_settings_return';
-        if (!sessionStorage.getItem(RETURN_KEY)) {
-            const ref = document.referrer;
-            if (ref && ref.startsWith(location.origin) && !ref.includes('/settings')) {
-                sessionStorage.setItem(RETURN_KEY, ref);
-            } else {
-                sessionStorage.setItem(RETURN_KEY, location.origin + BASE + '/');
-            }
-        }
-    }, []);
+        if (!window.sw?.shell?.topbar) return;
+
+        const allTabs = [...NAV_ITEMS, ...EXT_NAV_ITEMS];
+
+        window.sw.shell.topbar.setSlot(html`
+            <div class="sw-topbar__tabs">
+                ${allTabs.map(item => html`
+                    <a class="sw-topbar__tab ${section === item.key ? 'active' : ''}"
+                       href="${BASE}/settings/${item.key}"
+                       onClick=${onNavClick}>
+                        ${item.label}
+                    </a>
+                `)}
+            </div>
+        `);
+    }, [section, onNavClick]);
 
     const title = SECTION_TITLES[section] || 'Settings';
 
     return html`
         <div class="surface-settings" style="flex-direction:column;">
-            ${/* Top Bar */''}
-            <div class="settings-topbar">
-                <a href="${BASE}/" class="settings-topbar-back" onClick=${backClick}>
-                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="19" y1="12" x2="5" y2="12"/>
-                        <polyline points="12 19 5 12 12 5"/>
-                    </svg>
-                    Back
-                </a>
-                <div class="settings-topbar-sep"></div>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                     style="color:var(--text-2)">
-                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-                    <circle cx="9" cy="7" r="4"/>
-                </svg>
-                <span class="settings-topbar-title">Settings</span>
-            </div>
+            <div class="settings-content" style="flex:1;min-height:0;overflow:auto;">
+                <h2>${title}</h2>
 
-            <div style="display:flex;flex:1;min-height:0;">
-                ${/* Left Nav */''}
-                <div class="settings-nav">
-                    ${NAV_ITEMS.map(item => html`
-                        <a href="${BASE}/settings/${item.key}"
-                           class="settings-nav-link ${section === item.key ? 'active' : ''}"
-                           onClick=${onNavClick}>
-                            ${item.label}
-                        </a>
-                    `)}
-
-                    ${EXT_NAV_ITEMS.length > 0 && html`
-                        <div>
-                            <div class="settings-nav-sep"></div>
-                            <div class="settings-nav-label" style="font-size:10px;font-weight:600;color:var(--text-3);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:0.5px;">Extensions</div>
-                            ${EXT_NAV_ITEMS.map(item => html`
-                                <a href="${BASE}/settings/${item.key}"
-                                   class="settings-nav-link ${section === item.key ? 'active' : ''}"
-                                   onClick=${onNavClick}>
-                                    ${item.label}
-                                </a>
-                            `)}
-                        </div>
-                    `}
-                </div>
-
-                ${/* Content */''}
-                <div class="settings-content">
-                    <h2>${title}</h2>
-
-                    ${SectionComponent
-                        ? html`<${SectionComponent} />`
-                        : html`<div class="settings-placeholder">Loading\u2026</div>`
-                    }
-                </div>
+                ${SectionComponent
+                    ? html`<${SectionComponent} />`
+                    : html`<div class="settings-placeholder">Loading\u2026</div>`
+                }
             </div>
         </div>
         <${ToastContainer} />
diff --git a/src/js/sw/surfaces/team-admin/groups.js b/src/js/sw/surfaces/team-admin/groups.js
deleted file mode 100644
index c0ecb99..0000000
--- a/src/js/sw/surfaces/team-admin/groups.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Team Admin > Groups
- */
-const { html } = window;
-const { useState, useEffect, useCallback } = hooks;
-
-export default function GroupsSection({ teamId }) {
-    const [groups, setGroups] = useState([]);
-    const [loading, setLoading] = useState(true);
-
-    const load = useCallback(async () => {
-        try {
-            const data = await sw.api.teams.groups(teamId);
-            setGroups(data || []);
-        } catch (e) { sw.toast(e.message, 'error'); }
-        finally { setLoading(false); }
-    }, [teamId]);
-
-    useEffect(() => { load(); }, [load]);
-
-    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
-
-    return html`
-        <div>
-            <div class="admin-list">
-                ${groups.length === 0 && html`<div class="empty-hint">No groups</div>`}
-                ${groups.map(g => html`
-                    <div class="admin-surface-row" key=${g.id}>
-                        <strong style="flex:1;">${g.name}</strong>
-                        <span class="text-muted" style="font-size:12px;">${g.member_count || 0} members</span>
-                        <span class="badge">${(g.permissions || []).length} permissions</span>
-                    </div>
-                `)}
-            </div>
-        </div>
-    `;
-}
diff --git a/src/js/sw/surfaces/team-admin/index.js b/src/js/sw/surfaces/team-admin/index.js
index c101fa8..421ddcc 100644
--- a/src/js/sw/surfaces/team-admin/index.js
+++ b/src/js/sw/surfaces/team-admin/index.js
@@ -17,9 +17,9 @@ import { ToastContainer } from '../../primitives/toast.js';
 import { DialogStack } from '../../shell/dialog-stack.js';
 
 // ── Section config ──────────────────────────
+// Groups removed (37-line dead-end — no CRUD, just "No groups" display)
 const SECTIONS = [
     { key: 'members',     label: 'Members' },
-    { key: 'groups',      label: 'Groups' },
     { key: 'connections', label: 'Connections' },
     { key: 'workflows',   label: 'Workflows' },
     { key: 'settings',    label: 'Settings' },
@@ -29,7 +29,6 @@ const SECTIONS = [
 // ── Lazy section imports ────────────────────
 const sectionModules = {
     members:     () => import('./members.js'),
-    groups:      () => import('./groups.js'),
     connections: () => import('./connections.js'),
     workflows:   () => import('./workflows.js'),
     settings:    () => import('./settings.js'),
@@ -79,27 +78,6 @@ function TeamAdminSurface() {
         }
     }, [section]);
 
-    // Back button with return URL stash
-    useEffect(() => {
-        const RETURN_KEY = 'sb_team_admin_return';
-        if (!sessionStorage.getItem(RETURN_KEY)) {
-            const ref = document.referrer;
-            if (ref && ref.startsWith(location.origin) && !ref.includes('/team-admin')) {
-                sessionStorage.setItem(RETURN_KEY, ref);
-            } else {
-                sessionStorage.setItem(RETURN_KEY, location.origin + BASE + '/');
-            }
-        }
-    }, []);
-
-    const backClick = useCallback((e) => {
-        e.preventDefault();
-        const RETURN_KEY = 'sb_team_admin_return';
-        const returnURL = sessionStorage.getItem(RETURN_KEY);
-        sessionStorage.removeItem(RETURN_KEY);
-        location.href = returnURL || BASE + '/';
-    }, []);
-
     const navClick = useCallback((e) => {
         e.preventDefault();
         const href = e.currentTarget.getAttribute('href');
@@ -110,33 +88,52 @@ function TeamAdminSurface() {
     const teamName = selectedTeam?.name || selectedTeam?.team_name || 'Team';
     const sectionLabel = SECTIONS.find(s => s.key === section)?.label || 'Members';
 
+    // Shell topbar: set title and tabs
+    useEffect(() => {
+        if (!window.sw?.shell?.topbar) return;
+
+        if (selectedTeam) {
+            const titleContent = html`
+                <span style="font-weight:600;font-size:0.9rem;color:var(--text);">
+                    Team Admin: ${teamName}
+                </span>
+                ${adminTeams.length > 1 && html`
+                    <button class="sw-btn sw-btn--ghost sw-btn--sm" style="margin-left:8px;font-size:11px;"
+                            onClick=${() => setSelectedTeam(null)}>Switch</button>
+                `}
+            `;
+            window.sw.shell.topbar.setLeft(titleContent);
+
+            window.sw.shell.topbar.setSlot(html`
+                <div class="sw-topbar__tabs">
+                    ${SECTIONS.map(s => html`
+                        <a key=${s.key} class="sw-topbar__tab ${section === s.key ? 'active' : ''}"
+                           href="${BASE}/team-admin/${s.key}"
+                           onClick=${navClick}>
+                            ${s.label}
+                        </a>
+                    `)}
+                </div>
+            `);
+        } else {
+            window.sw.shell.topbar.setTitle('Team Administration');
+            window.sw.shell.topbar.setSlot(null);
+        }
+    }, [selectedTeam, section, navClick]);
+
     // Team picker if multiple teams
     if (!selectedTeam && adminTeams.length > 1) {
         return html`
-            <div class="surface-settings" style="flex-direction:column;">
-                <div class="settings-topbar">
-                    <a href="${BASE}/" class="settings-topbar-back" onClick=${backClick}>
-                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <line x1="19" y1="12" x2="5" y2="12"/>
-                            <polyline points="12 19 5 12 12 5"/>
-                        </svg>
-                        Back
-                    </a>
-                    <div class="settings-topbar-sep"></div>
-                    <span class="settings-topbar-title">Team Administration</span>
-                </div>
-                <div style="padding:32px;max-width:480px;margin:0 auto;">
-                    <h3 style="margin:0 0 16px;">Select a Team</h3>
-                    <div class="admin-list">
-                        ${adminTeams.map(t => html`
-                            <div class="admin-surface-row" key=${t.id || t.team_id}
-                                 style="cursor:pointer;" onClick=${() => setSelectedTeam(t)}>
-                                <strong style="flex:1;">${t.name || t.team_name}</strong>
-                                <span class="badge">${t.my_role || 'admin'}</span>
-                            </div>
-                        `)}
-                    </div>
+            <div style="padding:32px;max-width:480px;margin:0 auto;">
+                <h3 style="margin:0 0 16px;">Select a Team</h3>
+                <div class="admin-list">
+                    ${adminTeams.map(t => html`
+                        <div class="admin-surface-row" key=${t.id || t.team_id}
+                             style="cursor:pointer;" onClick=${() => setSelectedTeam(t)}>
+                            <strong style="flex:1;">${t.name || t.team_name}</strong>
+                            <span class="badge">${t.my_role || 'admin'}</span>
+                        </div>
+                    `)}
                 </div>
             </div>
             <${ToastContainer} />
@@ -147,22 +144,8 @@ function TeamAdminSurface() {
     // No teams
     if (!selectedTeam && adminTeams.length === 0) {
         return html`
-            <div class="surface-settings" style="flex-direction:column;">
-                <div class="settings-topbar">
-                    <a href="${BASE}/" class="settings-topbar-back" onClick=${backClick}>
-                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <line x1="19" y1="12" x2="5" y2="12"/>
-                            <polyline points="12 19 5 12 12 5"/>
-                        </svg>
-                        Back
-                    </a>
-                    <div class="settings-topbar-sep"></div>
-                    <span class="settings-topbar-title">Team Administration</span>
-                </div>
-                <div style="padding:32px;text-align:center;">
-                    <div class="empty-hint">You are not an admin of any team.</div>
-                </div>
+            <div style="padding:32px;text-align:center;">
+                <div class="empty-hint">You are not an admin of any team.</div>
             </div>
             <${ToastContainer} />
             <${DialogStack} />
@@ -170,48 +153,12 @@ function TeamAdminSurface() {
     }
 
     return html`
-        <div class="surface-settings" style="flex-direction:column;">
-            ${/* Top Bar */``}
-            <div class="settings-topbar">
-                <a href="${BASE}/" class="settings-topbar-back" onClick=${backClick}>
-                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="19" y1="12" x2="5" y2="12"/>
-                        <polyline points="12 19 5 12 12 5"/>
-                    </svg>
-                    Back
-                </a>
-                <div class="settings-topbar-sep"></div>
-                <span class="settings-topbar-title">
-                    ${teamName}
-                    ${adminTeams.length > 1 && html`
-                        <button class="sw-btn sw-btn--ghost sw-btn--sm" style="margin-left:8px;font-size:11px;"
-                                onClick=${() => setSelectedTeam(null)}>Switch Team</button>
-                    `}
-                </span>
-            </div>
-
-            <div style="display:flex;flex:1;min-height:0;">
-                ${/* Left Nav */``}
-                <div class="settings-nav">
-                    ${SECTIONS.map(s => html`
-                        <a key=${s.key} href="${BASE}/team-admin/${s.key}"
-                           class="settings-nav-link ${section === s.key ? 'active' : ''}"
-                           onClick=${navClick}>
-                            ${s.label}
-                        </a>
-                    `)}
-                </div>
-
-                ${/* Content */``}
-                <div class="settings-content">
-                    <h2>${sectionLabel}</h2>
-                    ${SectionComponent && teamId
-                        ? html`<${SectionComponent} teamId=${teamId} />`
-                        : html`<div class="settings-placeholder">Loading\u2026</div>`
-                    }
-                </div>
-            </div>
+        <div style="flex:1;min-height:0;overflow:auto;padding:var(--sp-4) var(--sp-5);">
+            <h2>${sectionLabel}</h2>
+            ${SectionComponent && teamId
+                ? html`<${SectionComponent} teamId=${teamId} />`
+                : html`<div class="settings-placeholder">Loading\u2026</div>`
+            }
         </div>
         <${ToastContainer} />
         <${DialogStack} />
diff --git a/src/js/sw/surfaces/team-admin/workflows.js b/src/js/sw/surfaces/team-admin/workflows.js
index 5ef739f..c6b497c 100644
--- a/src/js/sw/surfaces/team-admin/workflows.js
+++ b/src/js/sw/surfaces/team-admin/workflows.js
@@ -711,7 +711,7 @@ function SignoffPanel({ instanceId, teamId }) {
                     ${signoffs.map(s => html`
                         <div key=${s.id} style="display:flex;gap:4px;align-items:center;font-size:11px;margin-top:2px;">
                             <span class="badge ${s.decision === 'approve' ? 'badge-success' : 'badge-danger'}">${s.decision}</span>
-                            <span>${s.user_id}</span>
+                            <span>${sw.users?.displayName?.(s.user_id) || s.user_id}</span>
                             ${s.comment && html`<span class="text-muted">\u2014 ${s.comment}</span>`}
                         </div>
                     `)}
diff --git a/src/manifest.json b/src/manifest.json
index 4ebd3a2..d92636a 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Armature",
   "short_name": "Armature",
-  "description": "Self-hosted AI chat — unified interface for multiple providers",
+  "description": "Self-hosted extension platform — build, compose, and run extensions.",
   "start_url": "./",
   "scope": "./",
   "display": "standalone",
@@ -14,16 +14,31 @@
       "sizes": "32x32",
       "type": "image/png"
     },
+    {
+      "src": "favicon-light-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
     {
       "src": "favicon-256.png",
       "sizes": "256x256",
       "type": "image/png",
       "purpose": "any maskable"
     },
+    {
+      "src": "favicon-light-256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
     {
       "src": "favicon.svg",
       "sizes": "any",
       "type": "image/svg+xml"
+    },
+    {
+      "src": "favicon-light.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
     }
   ]
 }
diff --git a/src/wordmark-dark.svg b/src/wordmark-dark.svg
new file mode 100644
index 0000000..863a5a9
--- /dev/null
+++ b/src/wordmark-dark.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
+  <!-- A-frame lettermark -->
+  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
+  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
+  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
+  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
+  <!-- "rmature" text -->
+  <text x="58" y="62" fill="#dddddd" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+</svg>
diff --git a/src/wordmark-light.svg b/src/wordmark-light.svg
new file mode 100644
index 0000000..5682907
--- /dev/null
+++ b/src/wordmark-light.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
+  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
+  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
+  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
+  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
+  <text x="58" y="62" fill="#222222" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+</svg>
diff --git a/src/wordmark.svg b/src/wordmark.svg
new file mode 100644
index 0000000..5682907
--- /dev/null
+++ b/src/wordmark.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
+  <line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
+  <line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="28" cy="8" r="4" fill="#3B82F6"/>
+  <circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
+  <circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
+  <circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
+  <text x="58" y="62" fill="#222222" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
+</svg>