Merge dev: add rApp/Space switcher dropdowns to all headers

Resolves merge conflicts to keep both new features from main
(bodyJson, cardType, parent notes, OpenNotebookEmbed, attachments)
and the new shared Header with AppSwitcher + SpaceSwitcher dropdowns.
Also excludes scripts/ from tsconfig to fix pre-existing type errors
and regenerates Prisma client.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/api/spaces/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+
+/**
+ * GET /api/spaces — List spaces available to the current user.
+ * Proxies to rSpace API when available, otherwise returns empty list.
+ */
+export async function GET(request: Request) {
+  const rspaceUrl = process.env.RSPACE_INTERNAL_URL || process.env.NEXT_PUBLIC_RSPACE_URL;
+
+  if (!rspaceUrl) {
+    return NextResponse.json({ spaces: [] });
+  }
+
+  try {
+    // Forward auth header to rSpace
+    const authHeader = request.headers.get('Authorization');
+    const headers: Record<string, string> = {};
+    if (authHeader) headers['Authorization'] = authHeader;
+
+    const res = await fetch(`${rspaceUrl}/api/spaces`, {
+      headers,
+      next: { revalidate: 60 },
+    });
+
+    if (res.ok) {
+      const data = await res.json();
+      return NextResponse.json(data);
+    }
+  } catch {
+    // rSpace not reachable
+  }
+
+  return NextResponse.json({ spaces: [] });
+}

src/app/auth/signin/page.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import Link from 'next/link';
 import { useEncryptID } from '@encryptid/sdk/ui/react';
+import { Header } from '@/components/Header';
 
 function SignInForm() {
   const router = useRouter();
@@ -68,16 +68,7 @@ function SignInForm() {
 
   return (
     <div className="min-h-screen bg-[#0a0a0a] flex flex-col">
-      <nav className="border-b border-slate-800 px-6 py-4">
+      <Header breadcrumbs={[{ label: 'Sign In' }]} />
-        <div className="max-w-6xl mx-auto flex items-center gap-3">
-          <Link href="/" className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
-              rN
-            </div>
-            <span className="text-white font-semibold">rNotes</span>
-          </Link>
-        </div>
-      </nav>
 
       <main className="flex-1 flex items-center justify-center px-6">
         <div className="w-full max-w-sm">

src/app/demo/demo-content.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useState, useMemo, useCallback } from 'react'
 import { useDemoSync, type DemoShape } from '@/lib/demo-sync'
 import { TranscriptionDemo } from '@/components/TranscriptionDemo'
+import { Header } from '@/components/Header'
 
 /* --- Types -------------------------------------------------------------- */
 
@@ -587,21 +588,11 @@ export default function DemoContent() {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
-      {/* Nav */}
+      <Header
-      <nav className="border-b border-slate-700/50 backdrop-blur-sm">
+        maxWidth="max-w-7xl"
-        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+        breadcrumbs={[{ label: 'Demo' }]}
-          <div className="flex items-center gap-3">
+        actions={
-            <Link href="/" className="flex items-center gap-2">
+          <>
-              <div className="w-8 h-8 bg-gradient-to-br from-amber-400 to-orange-500 rounded-lg flex items-center justify-center font-bold text-slate-900 text-sm">
-                rN
-              </div>
-              <span className="font-semibold text-lg">rNotes</span>
-            </Link>
-            <span className="text-slate-600">/</span>
-            <span className="text-sm text-slate-400">Demo</span>
-          </div>
-          <div className="flex items-center gap-3">
-            {/* Connection indicator */}
             <div className="flex items-center gap-1.5 text-xs text-slate-400">
               <span
                 className={`w-2 h-2 rounded-full ${
@@ -610,28 +601,15 @@ export default function DemoContent() {
               />
               <span className="hidden sm:inline">{connected ? 'Connected' : 'Disconnected'}</span>
             </div>
-
-            <Link
-              href="/"
-              className="text-sm text-slate-400 hover:text-white transition-colors hidden sm:inline"
-            >
-              Home
-            </Link>
-            <Link
-              href="/demo"
-              className="text-sm text-amber-400 hover:text-amber-300 transition-colors hidden sm:inline"
-            >
-              Demo
-            </Link>
             <Link
               href="/notebooks/new"
               className="text-sm px-4 py-2 bg-amber-500 hover:bg-amber-400 rounded-lg transition-colors font-medium text-slate-900"
             >
               Start Taking Notes
             </Link>
-          </div>
+          </>
-        </div>
+        }
-      </nav>
+      />
 
       {/* Hero Section */}
       <section className="max-w-7xl mx-auto px-6 pt-12 pb-8">

src/app/notebooks/[id]/page.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { NoteCard } from '@/components/NoteCard';
 import { CanvasEmbed } from '@/components/CanvasEmbed';
 import { OpenNotebookEmbed } from '@/components/OpenNotebookEmbed';
-import { UserMenu } from '@/components/UserMenu';
+import { Header } from '@/components/Header';
 import { authFetch } from '@/lib/authFetch';
 import type { CanvasShapeMessage } from '@/lib/canvas-sync';
 
@@ -117,20 +117,13 @@ export default function NotebookDetailPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
-      <nav className="border-b border-slate-800 px-4 md:px-6 py-4">
+      <Header
-        <div className="max-w-6xl mx-auto flex items-center justify-between gap-2">
+        breadcrumbs={[
-          <div className="flex items-center gap-2 md:gap-3 min-w-0">
+          { label: 'Notebooks', href: '/notebooks' },
-            <Link href="/" className="flex-shrink-0">
+          { label: notebook.title },
-              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
+        ]}
-                rN
+        actions={
-              </div>
+          <>
-            </Link>
-            <span className="text-slate-600 hidden sm:inline">/</span>
-            <Link href="/notebooks" className="text-slate-400 hover:text-white transition-colors hidden sm:inline">Notebooks</Link>
-            <span className="text-slate-600 hidden sm:inline">/</span>
-            <span className="text-white truncate">{notebook.title}</span>
-          </div>
-          <div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
             {notebook.canvasSlug ? (
               <button
                 onClick={() => setShowCanvas(!showCanvas)}
@@ -166,10 +159,9 @@ export default function NotebookDetailPage() {
               <span className="hidden sm:inline">Delete</span>
               <svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
             </button>
-            <UserMenu />
+          </>
-          </div>
+        }
-        </div>
+      />
-      </nav>
 
       <div className={`flex ${showCanvas ? 'gap-0' : ''}`}>
         {/* Notes panel */}

src/app/notebooks/new/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { UserMenu } from '@/components/UserMenu';
+import { Header } from '@/components/Header';
 import { authFetch } from '@/lib/authFetch';
 
 const COVER_COLORS = [
@@ -42,20 +42,7 @@ export default function NewNotebookPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
-      <nav className="border-b border-slate-800 px-4 md:px-6 py-4">
+      <Header breadcrumbs={[{ label: 'Notebooks', href: '/notebooks' }, { label: 'New' }]} />
-        <div className="max-w-6xl mx-auto flex items-center gap-3">
-          <Link href="/" className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
-              rN
-            </div>
-          </Link>
-          <span className="text-slate-600 hidden sm:inline">/</span>
-          <Link href="/notebooks" className="text-slate-400 hover:text-white transition-colors hidden sm:inline">Notebooks</Link>
-          <span className="text-slate-600 hidden sm:inline">/</span>
-          <span className="text-white">New</span>
-          <div className="ml-auto"><UserMenu /></div>
-        </div>
-      </nav>
 
       <main className="max-w-2xl mx-auto px-4 md:px-6 py-8 md:py-12">
         <h1 className="text-2xl md:text-3xl font-bold text-white mb-6 md:mb-8">Create Notebook</h1>

src/app/notebooks/page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { NotebookCard } from '@/components/NotebookCard';
 import { SearchBar } from '@/components/SearchBar';
-import { UserMenu } from '@/components/UserMenu';
+import { Header } from '@/components/Header';
 
 interface NotebookData {
   id: string;
@@ -29,19 +29,10 @@ export default function NotebooksPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
-      <nav className="border-b border-slate-800 px-4 md:px-6 py-4">
+      <Header
-        <div className="max-w-6xl mx-auto flex items-center justify-between">
+        breadcrumbs={[{ label: 'Notebooks' }]}
-          <div className="flex items-center gap-3">
+        actions={
-            <Link href="/" className="flex items-center gap-3">
+          <>
-              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
-                rN
-              </div>
-              <span className="text-lg font-semibold text-white hidden sm:inline">rNotes</span>
-            </Link>
-            <span className="text-slate-600">/</span>
-            <span className="text-slate-400">Notebooks</span>
-          </div>
-          <div className="flex items-center gap-2 md:gap-4">
             <div className="hidden md:block w-64">
               <SearchBar />
             </div>
@@ -52,10 +43,9 @@ export default function NotebooksPage() {
               <span className="hidden sm:inline">New Notebook</span>
               <svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
             </Link>
-            <UserMenu />
+          </>
-          </div>
+        }
-        </div>
+      />
-      </nav>
       {/* Mobile search */}
       <div className="md:hidden px-4 py-3 border-b border-slate-800">
         <SearchBar />

src/app/notes/[id]/page.tsx

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { NoteEditor } from '@/components/NoteEditor';
 import { TagBadge } from '@/components/TagBadge';
-import { UserMenu } from '@/components/UserMenu';
+import { Header } from '@/components/Header';
 import { authFetch } from '@/lib/authFetch';
 
 const TYPE_COLORS: Record<string, string> = {
@@ -218,34 +218,19 @@ export default function NoteDetailPage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
-      <nav className="border-b border-slate-800 px-4 md:px-6 py-4">
+      <Header
-        <div className="max-w-4xl mx-auto flex items-center justify-between gap-2">
+        maxWidth="max-w-4xl"
-          <div className="flex items-center gap-2 md:gap-3 min-w-0">
+        breadcrumbs={[
-            <Link href="/" className="flex-shrink-0">
+          ...(note.parent
-              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
+            ? [{ label: note.parent.title, href: `/notes/${note.parent.id}` }]
-                rN
+            : []),
-              </div>
+          ...(note.notebook
-            </Link>
+            ? [{ label: note.notebook.title, href: `/notebooks/${note.notebook.id}` }]
-            <span className="text-slate-600 hidden sm:inline">/</span>
+            : []),
-            {note.parent && (
+          { label: note.title },
+        ]}
+        actions={
           <>
-                <Link href={`/notes/${note.parent.id}`} className="text-slate-400 hover:text-white transition-colors hidden sm:inline truncate max-w-[120px]">
-                  {note.parent.title}
-                </Link>
-                <span className="text-slate-600 hidden sm:inline">/</span>
-              </>
-            )}
-            {note.notebook ? (
-              <>
-                <Link href={`/notebooks/${note.notebook.id}`} className="text-slate-400 hover:text-white transition-colors hidden sm:inline truncate max-w-[120px]">
-                  {note.notebook.title}
-                </Link>
-                <span className="text-slate-600 hidden sm:inline">/</span>
-              </>
-            ) : null}
-            <span className="text-white truncate max-w-[120px] md:max-w-[200px]">{note.title}</span>
-          </div>
-          <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
             <button
               onClick={handleTogglePin}
               className={`px-2 md:px-3 py-1.5 text-sm rounded-lg border transition-colors ${
@@ -293,10 +278,9 @@ export default function NoteDetailPage() {
               <span className="hidden sm:inline">Forget</span>
               <svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
             </button>
-            <UserMenu />
+          </>
-          </div>
+        }
-        </div>
+      />
-      </nav>
 
       <main className="max-w-4xl mx-auto px-4 md:px-6 py-6 md:py-8">
         {/* Metadata */}

src/app/notes/new/page.tsx

@@ -2,11 +2,10 @@
 
 import { Suspense, useState, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import Link from 'next/link';
 import { NoteEditor } from '@/components/NoteEditor';
 import { FileUpload } from '@/components/FileUpload';
 import { VoiceRecorder } from '@/components/VoiceRecorder';
-import { UserMenu } from '@/components/UserMenu';
+import { Header } from '@/components/Header';
 import { authFetch } from '@/lib/authFetch';
 
 const NOTE_TYPES = [
@@ -120,18 +119,7 @@ function NewNoteForm() {
 
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
-      <nav className="border-b border-slate-800 px-4 md:px-6 py-4">
+      <Header breadcrumbs={[{ label: 'New Note' }]} />
-        <div className="max-w-6xl mx-auto flex items-center gap-3">
-          <Link href="/" className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
-              rN
-            </div>
-          </Link>
-          <span className="text-slate-600">/</span>
-          <span className="text-white">New Note</span>
-          <div className="ml-auto"><UserMenu /></div>
-        </div>
-      </nav>
 
       <main className="max-w-3xl mx-auto px-4 md:px-6 py-8 md:py-12">
         <h1 className="text-2xl md:text-3xl font-bold text-white mb-6 md:mb-8">Create Note</h1>

src/app/page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { NotebookCard } from '@/components/NotebookCard';
 import { SearchBar } from '@/components/SearchBar';
-import { UserMenu } from '@/components/UserMenu';
+import { Header } from '@/components/Header';
 import { TranscriptionDemo } from '@/components/TranscriptionDemo';
 
 interface NotebookData {
@@ -30,16 +30,9 @@ export default function HomePage() {
 
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
-      {/* Nav */}
+      <Header
-      <nav className="border-b border-slate-800 px-4 md:px-6 py-4">
+        actions={
-        <div className="max-w-6xl mx-auto flex items-center justify-between">
+          <>
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
-              rN
-            </div>
-            <span className="text-lg font-semibold text-white">rNotes</span>
-          </div>
-          <div className="flex items-center gap-2 md:gap-4">
             <div className="hidden md:block w-64">
               <SearchBar />
             </div>
@@ -62,10 +55,9 @@ export default function HomePage() {
               <span className="hidden sm:inline">Create Notebook</span>
               <svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
             </Link>
-            <UserMenu />
+          </>
-          </div>
+        }
-        </div>
+      />
-      </nav>
 
       {/* Mobile search */}
       <div className="md:hidden px-4 py-3 border-b border-slate-800">

src/app/voice/page.tsx

@@ -2,6 +2,9 @@
 
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { AppSwitcher } from '@/components/AppSwitcher';
+import { SpaceSwitcher } from '@/components/SpaceSwitcher';
+import { UserMenu } from '@/components/UserMenu';
 import { authFetch } from '@/lib/authFetch';
 
 // --- Types ---
@@ -509,17 +512,20 @@ export default function VoicePage() {
   return (
     <div className="min-h-screen bg-[#0a0a0a] flex flex-col">
       {/* Header */}
-      <header className="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
+      <header className="border-b border-slate-800 backdrop-blur-sm bg-[#0a0a0a]/90 sticky top-0 z-50">
-        <div className="flex items-center gap-3">
+        <div className="px-4 py-3 flex items-center justify-between">
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-red-500 to-rose-600 flex items-center justify-center">
+          <div className="flex items-center gap-1">
-            <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
+            <AppSwitcher current="notes" />
+            <SpaceSwitcher />
+            <span className="text-slate-600 hidden sm:inline">/</span>
+            <div className="flex items-center gap-2 ml-1">
+              <div className="w-6 h-6 rounded-md bg-gradient-to-br from-red-500 to-rose-600 flex items-center justify-center">
+                <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
                   <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
                 </svg>
               </div>
-          <div>
+              <span className="text-white font-bold text-sm hidden sm:inline">rVoice</span>
-            <h1 className="text-white font-bold text-sm">rVoice</h1>
-            <p className="text-[10px] text-slate-500 uppercase tracking-wider">Voice notes for rNotes</p>
             </div>
           </div>
           <div className="flex items-center gap-2">
@@ -535,6 +541,8 @@ export default function VoicePage() {
                 Local
               </span>
             )}
+            <UserMenu />
+          </div>
         </div>
       </header>
 

src/components/AppSwitcher.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+export interface AppModule {
+  id: string;
+  name: string;
+  icon: string;
+  description: string;
+  domain?: string;
+}
+
+const MODULES: AppModule[] = [
+  // Creating
+  { id: 'canvas', name: 'Canvas', icon: '🎨', description: 'Collaborative workspace', domain: 'rspace.online' },
+  { id: 'notes', name: 'Notes', icon: '📝', description: 'Rich note-taking', domain: 'rnotes.online' },
+  { id: 'pubs', name: 'Pubs', icon: '📰', description: 'Publishing platform', domain: 'rpubs.online' },
+  // Planning
+  { id: 'cal', name: 'Calendar', icon: '📅', description: 'Scheduling & events', domain: 'rcal.online' },
+  { id: 'trips', name: 'Trips', icon: '✈️', description: 'Travel planning', domain: 'rtrips.online' },
+  { id: 'stack', name: 'Stack', icon: '📋', description: 'Task management', domain: 'rstack.online' },
+  // Discussing & Deciding
+  { id: 'inbox', name: 'Inbox', icon: '📬', description: 'Messaging & email', domain: 'rinbox.online' },
+  { id: 'choices', name: 'Choices', icon: '🔀', description: 'Decision making', domain: 'rchoices.online' },
+  { id: 'vote', name: 'Vote', icon: '🗳️', description: 'Polls & voting', domain: 'rvote.online' },
+  // Funding & Commerce
+  { id: 'funds', name: 'Funds', icon: '💰', description: 'Fundraising', domain: 'rfunds.online' },
+  { id: 'wallet', name: 'Wallet', icon: '👛', description: 'Crypto wallet', domain: 'rwallet.online' },
+  { id: 'cart', name: 'Cart', icon: '🛒', description: 'Shopping & commerce', domain: 'rcart.online' },
+  { id: 'auctions', name: 'Auctions', icon: '🔨', description: 'Auction platform', domain: 'rauctions.online' },
+  // Sharing & Media
+  { id: 'files', name: 'Files', icon: '📁', description: 'File storage', domain: 'rfiles.online' },
+  { id: 'tube', name: 'Tube', icon: '🎬', description: 'Video platform', domain: 'rtube.online' },
+  { id: 'data', name: 'Data', icon: '📊', description: 'Analytics', domain: 'rdata.online' },
+  { id: 'maps', name: 'Maps', icon: '🗺️', description: 'Mapping tool', domain: 'rmaps.online' },
+  { id: 'network', name: 'Network', icon: '🌐', description: 'Social network', domain: 'rnetwork.online' },
+];
+
+const MODULE_CATEGORIES: Record<string, string> = {
+  canvas: 'Creating',
+  notes: 'Creating',
+  pubs: 'Creating',
+  cal: 'Planning',
+  trips: 'Planning',
+  stack: 'Planning',
+  inbox: 'Discussing & Deciding',
+  choices: 'Discussing & Deciding',
+  vote: 'Discussing & Deciding',
+  funds: 'Funding & Commerce',
+  wallet: 'Funding & Commerce',
+  cart: 'Funding & Commerce',
+  auctions: 'Funding & Commerce',
+  files: 'Sharing & Media',
+  tube: 'Sharing & Media',
+  data: 'Sharing & Media',
+  maps: 'Sharing & Media',
+  network: 'Sharing & Media',
+};
+
+const CATEGORY_ORDER = [
+  'Creating',
+  'Planning',
+  'Discussing & Deciding',
+  'Funding & Commerce',
+  'Sharing & Media',
+];
+
+interface AppSwitcherProps {
+  current?: string;
+}
+
+export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  const currentMod = MODULES.find((m) => m.id === current);
+  const label = currentMod ? `${currentMod.icon} ${currentMod.name}` : '📝 rNotes';
+
+  // Group modules by category
+  const groups = new Map<string, AppModule[]>();
+  for (const m of MODULES) {
+    const cat = MODULE_CATEGORIES[m.id] || 'Other';
+    if (!groups.has(cat)) groups.set(cat, []);
+    groups.get(cat)!.push(m);
+  }
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-semibold bg-white/[0.08] hover:bg-white/[0.12] text-slate-200 transition-colors"
+      >
+        {label}
+        <span className="text-[0.7em] opacity-60">&#9662;</span>
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1.5 min-w-[260px] max-h-[70vh] overflow-y-auto rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
+          {CATEGORY_ORDER.map((cat) => {
+            const items = groups.get(cat);
+            if (!items || items.length === 0) return null;
+            return (
+              <div key={cat}>
+                <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none border-t border-white/[0.06] first:border-t-0">
+                  {cat}
+                </div>
+                {items.map((m) => (
+                  <div
+                    key={m.id}
+                    className={`flex items-center group ${
+                      m.id === current ? 'bg-cyan-500/10' : 'hover:bg-white/[0.05]'
+                    } transition-colors`}
+                  >
+                    <a
+                      href={m.domain ? `https://${m.domain}` : '#'}
+                      className="flex items-center gap-3 flex-1 px-3.5 py-2.5 text-slate-200 no-underline"
+                      onClick={() => setOpen(false)}
+                    >
+                      <span className="text-lg w-7 text-center flex-shrink-0">{m.icon}</span>
+                      <div className="flex flex-col min-w-0">
+                        <span className="text-sm font-semibold">{m.name}</span>
+                        <span className="text-xs text-slate-400 truncate">{m.description}</span>
+                      </div>
+                    </a>
+                    {m.domain && (
+                      <a
+                        href={`https://${m.domain}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="w-8 flex items-center justify-center text-xs text-cyan-400 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity flex-shrink-0"
+                        title={m.domain}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        &#8599;
+                      </a>
+                    )}
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Header.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { AppSwitcher } from './AppSwitcher';
+import { SpaceSwitcher } from './SpaceSwitcher';
+import { UserMenu } from './UserMenu';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface HeaderProps {
+  /** Breadcrumb trail after the switchers (e.g. [{label: 'Notebooks', href: '/notebooks'}, {label: 'My Notebook'}]) */
+  breadcrumbs?: BreadcrumbItem[];
+  /** Right-side actions (rendered between breadcrumbs and UserMenu) */
+  actions?: React.ReactNode;
+  /** Max width class for the inner container */
+  maxWidth?: string;
+}
+
+export function Header({ breadcrumbs, actions, maxWidth = 'max-w-6xl' }: HeaderProps) {
+  return (
+    <nav className="border-b border-slate-800 backdrop-blur-sm bg-[#0a0a0a]/90 sticky top-0 z-50">
+      <div className={`${maxWidth} mx-auto px-4 md:px-6 py-3 flex items-center justify-between gap-2`}>
+        {/* Left: App switcher + Space switcher + Breadcrumbs */}
+        <div className="flex items-center gap-1 min-w-0">
+          <AppSwitcher current="notes" />
+          <SpaceSwitcher />
+          {breadcrumbs && breadcrumbs.length > 0 && (
+            <>
+              {breadcrumbs.map((crumb, i) => (
+                <div key={i} className="flex items-center gap-1 min-w-0">
+                  <span className="text-slate-600 hidden sm:inline">/</span>
+                  {crumb.href ? (
+                    <Link
+                      href={crumb.href}
+                      className="text-slate-400 hover:text-white transition-colors text-sm hidden sm:inline truncate max-w-[140px]"
+                    >
+                      {crumb.label}
+                    </Link>
+                  ) : (
+                    <span className="text-white text-sm truncate max-w-[140px] md:max-w-[200px]">{crumb.label}</span>
+                  )}
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+
+        {/* Right: Actions + UserMenu */}
+        <div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
+          {actions}
+          <UserMenu />
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/SpaceSwitcher.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useEncryptID } from '@encryptid/sdk/ui/react';
+
+interface SpaceInfo {
+  slug: string;
+  name: string;
+  icon?: string;
+  role?: string;
+}
+
+interface SpaceSwitcherProps {
+  current?: string;
+  name?: string;
+}
+
+export function SpaceSwitcher({ current = 'personal', name }: SpaceSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const [spaces, setSpaces] = useState<SpaceInfo[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const { isAuthenticated } = useEncryptID();
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  const loadSpaces = async () => {
+    if (loaded) return;
+    try {
+      const res = await fetch('/api/spaces');
+      if (res.ok) {
+        const data = await res.json();
+        setSpaces(data.spaces || []);
+      }
+    } catch {
+      // API not available — show empty
+    }
+    setLoaded(true);
+  };
+
+  const handleOpen = async () => {
+    const nowOpen = !open;
+    setOpen(nowOpen);
+    if (nowOpen && !loaded) {
+      await loadSpaces();
+    }
+  };
+
+  const displayName = name || current;
+
+  const mySpaces = spaces.filter((s) => s.role);
+  const publicSpaces = spaces.filter((s) => !s.role);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={(e) => { e.stopPropagation(); handleOpen(); }}
+        className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-400 hover:bg-white/[0.05] transition-colors"
+      >
+        <span className="opacity-40 font-light mr-0.5">/</span>
+        <span className="max-w-[160px] truncate">{displayName}</span>
+        <span className="text-[0.7em] opacity-50">&#9662;</span>
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1.5 min-w-[240px] max-h-[400px] overflow-y-auto rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
+          {!loaded ? (
+            <div className="px-4 py-4 text-center text-sm text-slate-400">Loading spaces...</div>
+          ) : spaces.length === 0 ? (
+            <>
+              <div className="px-4 py-4 text-center text-sm text-slate-400">
+                {isAuthenticated ? 'No spaces yet' : 'Sign in to see your spaces'}
+              </div>
+              <a
+                href="https://rspace.online/new"
+                className="flex items-center px-3.5 py-2.5 text-sm font-semibold text-cyan-400 hover:bg-cyan-500/[0.08] transition-colors no-underline"
+                onClick={() => setOpen(false)}
+              >
+                + Create new space
+              </a>
+            </>
+          ) : (
+            <>
+              {mySpaces.length > 0 && (
+                <>
+                  <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
+                    Your spaces
+                  </div>
+                  {mySpaces.map((s) => (
+                    <a
+                      key={s.slug}
+                      href={`https://rspace.online/${s.slug}/notes`}
+                      className={`flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors ${
+                        s.slug === current ? 'bg-cyan-500/10' : 'hover:bg-white/[0.05]'
+                      }`}
+                      onClick={() => setOpen(false)}
+                    >
+                      <span className="text-base">{s.icon || '🌐'}</span>
+                      <span className="text-sm font-medium flex-1">{s.name}</span>
+                      {s.role && (
+                        <span className="text-[0.6rem] font-bold uppercase bg-cyan-500/15 text-cyan-300 px-1.5 py-0.5 rounded tracking-wide">
+                          {s.role}
+                        </span>
+                      )}
+                    </a>
+                  ))}
+                </>
+              )}
+
+              {publicSpaces.length > 0 && (
+                <>
+                  {mySpaces.length > 0 && <div className="h-px bg-white/[0.08] my-1" />}
+                  <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
+                    Public spaces
+                  </div>
+                  {publicSpaces.map((s) => (
+                    <a
+                      key={s.slug}
+                      href={`https://rspace.online/${s.slug}/notes`}
+                      className={`flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors ${
+                        s.slug === current ? 'bg-cyan-500/10' : 'hover:bg-white/[0.05]'
+                      }`}
+                      onClick={() => setOpen(false)}
+                    >
+                      <span className="text-base">{s.icon || '🌐'}</span>
+                      <span className="text-sm font-medium flex-1">{s.name}</span>
+                    </a>
+                  ))}
+                </>
+              )}
+
+              <div className="h-px bg-white/[0.08] my-1" />
+              <a
+                href="https://rspace.online/new"
+                className="flex items-center px-3.5 py-2.5 text-sm font-semibold text-cyan-400 hover:bg-cyan-500/[0.08] transition-colors no-underline"
+                onClick={() => setOpen(false)}
+              >
+                + Create new space
+              </a>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

tsconfig.json

@@ -22,5 +22,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "scripts"]
 }