From 449d2cb38242cc757ed4ff5ffd6306086225912d Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Sun, 15 Mar 2026 14:43:31 +0100
Subject: [PATCH] feat: logos and flux

---
 frontend/src/app/canvas/CanvasPage.tsx        |  73 ++++---
 .../app/recollections/RecollectionLayout.tsx  |  43 ++++
 .../app/recollections/RecollectionMenubar.tsx |  59 ++++++
 .../RecollectionMenubarContext.tsx            |  36 ++++
 .../flux/FluxMenubarContent.tsx}              | 184 +++++++-----------
 .../flux/FluxRoute.tsx}                       |  19 +-
 .../src/app/recollections/logos/LogosPage.tsx |  21 ++
 frontend/src/main.tsx                         |  10 +-
 8 files changed, 285 insertions(+), 160 deletions(-)
 create mode 100644 frontend/src/app/recollections/RecollectionLayout.tsx
 create mode 100644 frontend/src/app/recollections/RecollectionMenubar.tsx
 create mode 100644 frontend/src/app/recollections/RecollectionMenubarContext.tsx
 rename frontend/src/app/{canvas/CanvasMenubar.tsx => recollections/flux/FluxMenubarContent.tsx} (60%)
 rename frontend/src/app/{canvas/CanvasRoute.tsx => recollections/flux/FluxRoute.tsx} (50%)
 create mode 100644 frontend/src/app/recollections/logos/LogosPage.tsx

diff --git a/frontend/src/app/canvas/CanvasPage.tsx b/frontend/src/app/canvas/CanvasPage.tsx
index 37875b6..169aa15 100644
--- a/frontend/src/app/canvas/CanvasPage.tsx
+++ b/frontend/src/app/canvas/CanvasPage.tsx
@@ -36,7 +36,8 @@ import { ContextMenu, ContextMenuTrigger } from '@/components/ui/context-menu'
 import { CanvasContextMenuContent } from '@/app/canvas/CanvasContextMenuContent'
 import { useCanvasConnectionPathFromStore } from '@/app/canvas/useCanvasConnectionPathFromStore'
 import { dispatchCanvasCommand } from '@/app/canvas/canvasStore'
-import { CanvasMenubar } from '@/app/canvas/CanvasMenubar'
+import { useRecollectionMenubar } from '@/app/recollections/RecollectionMenubarContext'
+import { FluxMenubarContent } from '@/app/recollections/flux/FluxMenubarContent'
 import { createContextualNode } from '@/app/canvas/ContextualZoomNode'
 import { ViewportDisplayProvider } from '@/app/canvas/ViewportDisplayContext'
 import { FlowKeyboardShortcuts } from '@/components/graph/FlowKeyboardShortcuts'
@@ -427,6 +428,52 @@ export function CanvasPage({ recollectionId }: CanvasPageProps) {
     flowActionsRef.current?.pasteAtViewportCenter?.()
   }, [])
 
+  const { setCustomContent } = useRecollectionMenubar()
+  useEffect(() => {
+    setCustomContent(
+      <FluxMenubarContent
+        onImport={handleImportRecollection}
+        onExport={handleExportRecollection}
+        onSave={
+          recollectionId
+            ? () => {
+                save()
+                toast.success('Saved')
+              }
+            : undefined
+        }
+        canSave={Boolean(recollectionId)}
+        saveStatus={saveStatus}
+        undo={undo}
+        redo={redo}
+        canUndo={canUndo}
+        canRedo={canRedo}
+        onDuplicate={handleDuplicate}
+        onCopy={handleCopy}
+        onPaste={handlePaste}
+        canDuplicate={selectedNodes.length > 0}
+        canCopy={selectedNodes.length === 1}
+        onFitView={() => flowActionsRef.current?.fitView?.()}
+      />
+    )
+    return () => setCustomContent(null)
+  }, [
+    setCustomContent,
+    recollectionId,
+    saveStatus,
+    canUndo,
+    canRedo,
+    selectedNodes.length,
+    save,
+    undo,
+    redo,
+    handleDuplicate,
+    handleCopy,
+    handlePaste,
+    handleImportRecollection,
+    handleExportRecollection,
+  ])
+
   const graphContextValue = useMemo(
     () => ({ setNodes, setEdges, graphRef, edges }),
     [setNodes, setEdges, edges]
@@ -646,30 +693,6 @@ export function CanvasPage({ recollectionId }: CanvasPageProps) {
         onChange={onImportFileChange}
         aria-hidden
       />
-      <CanvasMenubar
-        onImport={handleImportRecollection}
-        onExport={handleExportRecollection}
-        onSave={
-          recollectionId
-            ? () => {
-                save()
-                toast.success('Saved')
-              }
-            : undefined
-        }
-        canSave={Boolean(recollectionId)}
-        saveStatus={saveStatus}
-        undo={undo}
-        redo={redo}
-        canUndo={canUndo}
-        canRedo={canRedo}
-        onDuplicate={handleDuplicate}
-        onCopy={handleCopy}
-        onPaste={handlePaste}
-        canDuplicate={selectedNodes.length > 0}
-        canCopy={selectedNodes.length === 1}
-        onFitView={() => flowActionsRef.current?.fitView?.()}
-      />
       <div className="flex-1 min-h-0 relative flex flex-col">
         <div className="flex-1 min-h-0 flex flex-col">
           <GraphContext.Provider value={graphContextValue}>
diff --git a/frontend/src/app/recollections/RecollectionLayout.tsx b/frontend/src/app/recollections/RecollectionLayout.tsx
new file mode 100644
index 0000000..dce0eba
--- /dev/null
+++ b/frontend/src/app/recollections/RecollectionLayout.tsx
@@ -0,0 +1,43 @@
+/**
+ * Layout for a single recollection: shared menubar (with optional custom content from active page) and outlet.
+ */
+
+import React, { useEffect } from 'react'
+import { Link, Outlet, useParams } from 'react-router-dom'
+import { usePlatform } from '@/app/kosmos/KosmosContext'
+import { RecollectionMenubarProvider } from './RecollectionMenubarContext'
+import { RecollectionMenubar } from './RecollectionMenubar'
+
+export function RecollectionLayout() {
+  const { recollectionId } = useParams<{ recollectionId: string }>()
+  const { recollections, recordRecollectionAccess } = usePlatform()
+
+  useEffect(() => {
+    if (recollectionId) recordRecollectionAccess(recollectionId)
+  }, [recollectionId, recordRecollectionAccess])
+
+  const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
+
+  if (!recollectionId) return null
+  if (!recollection) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8">
+        <p className="text-sm text-muted-foreground">Recollection not found.</p>
+        <Link to="/recollections" className="text-sm text-primary hover:underline">
+          Back to recollections
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <RecollectionMenubarProvider>
+      <div className="flex min-h-0 flex-1 flex-col">
+        <RecollectionMenubar />
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          <Outlet />
+        </div>
+      </div>
+    </RecollectionMenubarProvider>
+  )
+}
diff --git a/frontend/src/app/recollections/RecollectionMenubar.tsx b/frontend/src/app/recollections/RecollectionMenubar.tsx
new file mode 100644
index 0000000..3be451a
--- /dev/null
+++ b/frontend/src/app/recollections/RecollectionMenubar.tsx
@@ -0,0 +1,59 @@
+/**
+ * Shared base menubar for a recollection: Back, optional custom content (from context), Logos/Flux switcher.
+ */
+
+import React from 'react'
+import { Link, NavLink, useParams } from 'react-router-dom'
+import { usePlatform } from '@/app/kosmos/KosmosContext'
+import { ArrowLeft, BookOpen, Workflow } from 'lucide-react'
+import { useRecollectionMenubar } from './RecollectionMenubarContext'
+
+export function RecollectionMenubar() {
+  const { recollectionId } = useParams<{ recollectionId: string }>()
+  const { recollections } = usePlatform()
+  const { customContent } = useRecollectionMenubar()
+
+  const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
+  const base = recollectionId ? `/recollections/${recollectionId}` : ''
+  const defaultMiddle = recollection ? (
+    <span className="truncate text-sm font-medium text-muted-foreground">{recollection.name}</span>
+  ) : null
+
+  return (
+    <div className="flex h-9 w-full shrink-0 items-center gap-2 border-b border-border/40 bg-background px-2">
+      <Link
+        to="/recollections"
+        aria-label="Back to recollections"
+        className="flex shrink-0 items-center rounded-sm px-2 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
+      >
+        <ArrowLeft className="size-4" />
+      </Link>
+      <div className="flex min-w-0 flex-1 items-center">
+        {customContent ?? defaultMiddle}
+      </div>
+      {base && (
+        <nav className="flex shrink-0 items-center gap-0.5" aria-label="Recollection pages">
+          <NavLink
+            to={`${base}/logos`}
+            end
+            className={({ isActive }) =>
+              `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
+            }
+          >
+            <BookOpen className="size-3.5" />
+            Logos
+          </NavLink>
+          <NavLink
+            to={`${base}/flux`}
+            className={({ isActive }) =>
+              `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
+            }
+          >
+            <Workflow className="size-3.5" />
+            Flux
+          </NavLink>
+        </nav>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/app/recollections/RecollectionMenubarContext.tsx b/frontend/src/app/recollections/RecollectionMenubarContext.tsx
new file mode 100644
index 0000000..7b809c9
--- /dev/null
+++ b/frontend/src/app/recollections/RecollectionMenubarContext.tsx
@@ -0,0 +1,36 @@
+/**
+ * Context for the recollection menubar: pages (Logos, Flux) can register custom content
+ * to show in the middle of the shared menubar.
+ */
+
+import React, { createContext, useCallback, useContext, useState } from 'react'
+
+export type RecollectionMenubarContextValue = {
+  /** Content to show in the middle of the menubar (menus, title, etc.). Set to null to use default (recollection name only). */
+  customContent: React.ReactNode
+  setCustomContent: (content: React.ReactNode) => void
+}
+
+const RecollectionMenubarContext = createContext<RecollectionMenubarContextValue | null>(null)
+
+export function RecollectionMenubarProvider({ children }: { children: React.ReactNode }) {
+  const [customContent, setCustomContentState] = useState<React.ReactNode>(null)
+  const setCustomContent = useCallback((content: React.ReactNode) => {
+    setCustomContentState(() => content)
+  }, [])
+  const value: RecollectionMenubarContextValue = React.useMemo(
+    () => ({ customContent, setCustomContent }),
+    [customContent, setCustomContent]
+  )
+  return (
+    <RecollectionMenubarContext.Provider value={value}>
+      {children}
+    </RecollectionMenubarContext.Provider>
+  )
+}
+
+export function useRecollectionMenubar(): RecollectionMenubarContextValue {
+  const ctx = useContext(RecollectionMenubarContext)
+  if (!ctx) throw new Error('useRecollectionMenubar must be used within RecollectionMenubarProvider')
+  return ctx
+}
diff --git a/frontend/src/app/canvas/CanvasMenubar.tsx b/frontend/src/app/recollections/flux/FluxMenubarContent.tsx
similarity index 60%
rename from frontend/src/app/canvas/CanvasMenubar.tsx
rename to frontend/src/app/recollections/flux/FluxMenubarContent.tsx
index 9f8b9c6..ba72061 100644
--- a/frontend/src/app/canvas/CanvasMenubar.tsx
+++ b/frontend/src/app/recollections/flux/FluxMenubarContent.tsx
@@ -1,9 +1,10 @@
 /**
- * Menubar for the canvas page: Recollection (Import/Export), Edit (Undo/Redo, Duplicate/Copy/Paste, Rename), View (Fit View, Minimap).
+ * Flux-specific menubar content: Recollection/Edit/View menus and centered title with save status.
+ * Registered with the recollection menubar when the Flux page is active.
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import {
   Menubar,
   MenubarContent,
@@ -14,17 +15,16 @@ import {
 } from '@/components/ui/menubar'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { usePlatform } from '@/app/kosmos/KosmosContext'
-import { ArrowLeft, CheckCircle2, CircleDot, ClipboardPaste, Copy, CopyPlus, Download, FolderOpen, Loader2, Pencil, Redo2, Save, Undo2 } from 'lucide-react'
+import { CheckCircle2, CircleDot, ClipboardPaste, Copy, CopyPlus, Download, FolderOpen, Loader2, Pencil, Redo2, Save, Undo2 } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import type { SaveStatus } from '@/app/canvas/useCanvasGraph'
 
-export type CanvasMenubarProps = {
+export type FluxMenubarContentProps = {
   onImport: () => void
   onExport: () => void
   onSave?: () => void
   canSave?: boolean
-  /** Shown next to recollection title: unsaved | saving | saved */
   saveStatus?: SaveStatus
   undo: () => void
   redo: () => void
@@ -47,7 +47,7 @@ function matchKey(ev: KeyboardEvent, want: { key: string; shiftKey: boolean }) {
   return ev.key.toLowerCase() === want.key && !!mod && !!ev.shiftKey === want.shiftKey
 }
 
-export function CanvasMenubar({
+export function FluxMenubarContent({
   onImport,
   onExport,
   onSave,
@@ -63,7 +63,7 @@ export function CanvasMenubar({
   canDuplicate = false,
   canCopy = false,
   onFitView,
-}: CanvasMenubarProps) {
+}: FluxMenubarContentProps) {
   const { recollectionId } = useParams<{ recollectionId: string }>()
   const { recollections, renameRecollection } = usePlatform()
   const recollectionName = useMemo(
@@ -110,7 +110,6 @@ export function CanvasMenubar({
     if (isRenamingRecollection) {
       setRenameValue(recollectionName ?? '')
       ignoreNextBlurRef.current = true
-      // Delay focus so the Recollection dropdown can close first and not steal focus back (which would trigger blur)
       const t = setTimeout(() => {
         renameInputRef.current?.focus()
         renameInputRef.current?.select()
@@ -126,9 +125,7 @@ export function CanvasMenubar({
     setIsRenamingRecollection(false)
   }, [recollectionId, renameRecollection, renameValue])
 
-  const cancelRename = useCallback(() => {
-    setIsRenamingRecollection(false)
-  }, [])
+  const cancelRename = useCallback(() => setIsRenamingRecollection(false), [])
 
   const handleRenameBlur = useCallback(() => {
     if (ignoreNextBlurRef.current) {
@@ -169,19 +166,12 @@ export function CanvasMenubar({
   }, [undo, redo, canUndo, canRedo, onSave, canSave])
 
   return (
-    <div className="relative flex h-9 w-full shrink-0 items-center border-b border-border/40 bg-background">
-      <Menubar className="flex-1 shrink-0 rounded-none border-0 border-b-0 bg-transparent p-0 shadow-none">
-        <Link
-          to="/recollections"
-          aria-label="Back to recollections"
-          className="flex shrink-0 items-center rounded-sm px-2 py-1 ml-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
-        >
-          <ArrowLeft className="size-4" />
-        </Link>
+    <div className="relative flex flex-1 min-w-0 items-center">
+      <Menubar className="flex-1 shrink-0 rounded-none border-0 border-b-0 bg-transparent p-0 shadow-none min-w-0">
         <MenubarMenu>
           <MenubarTrigger className="font-normal text-muted-foreground">Recollection</MenubarTrigger>
           <MenubarContent>
-                {recollectionId && (
+            {recollectionId && (
               <>
                 {onSave != null && (
                   <>
@@ -189,18 +179,13 @@ export function CanvasMenubar({
                       <Save className="h-4 w-4" />
                       Save
                       <span className="ml-auto pl-4">
-                        <KbdGroup>
-                          <Kbd>⌘S</Kbd>
-                        </KbdGroup>
+                        <KbdGroup><Kbd>⌘S</Kbd></KbdGroup>
                       </span>
                     </MenubarItem>
                     <MenubarSeparator />
                   </>
                 )}
-                <MenubarItem
-                  onClick={() => setIsRenamingRecollection(true)}
-                  className="gap-2"
-                >
+                <MenubarItem onClick={() => setIsRenamingRecollection(true)} className="gap-2">
                   <Pencil className="h-4 w-4" />
                   Rename
                 </MenubarItem>
@@ -223,53 +208,33 @@ export function CanvasMenubar({
             <MenubarItem onClick={undo} disabled={!canUndo} className="gap-2">
               <Undo2 className="h-4 w-4" />
               Undo
-              <span className="ml-auto pl-4">
-                <KbdGroup>
-                  <Kbd>⌘ + Z</Kbd>
-                </KbdGroup>
-              </span>
+              <span className="ml-auto pl-4"><KbdGroup><Kbd>⌘ + Z</Kbd></KbdGroup></span>
             </MenubarItem>
             <MenubarItem onClick={redo} disabled={!canRedo} className="gap-2">
               <Redo2 className="h-4 w-4" />
               Redo
-              <span className="ml-auto pl-4">
-                <KbdGroup>
-                  <Kbd>⌘ + ⇧ + Z</Kbd>
-                </KbdGroup>
-              </span>
+              <span className="ml-auto pl-4"><KbdGroup><Kbd>⌘ + ⇧ + Z</Kbd></KbdGroup></span>
             </MenubarItem>
             {(onDuplicate != null || onCopy != null || onPaste != null) && <MenubarSeparator />}
             {onDuplicate != null && (
               <MenubarItem onClick={onDuplicate} disabled={!canDuplicate} className="gap-2">
                 <CopyPlus className="h-4 w-4" />
                 Duplicate
-                <span className="ml-auto pl-4">
-                  <KbdGroup>
-                    <Kbd>⌘D</Kbd>
-                  </KbdGroup>
-                </span>
+                <span className="ml-auto pl-4"><KbdGroup><Kbd>⌘D</Kbd></KbdGroup></span>
               </MenubarItem>
             )}
             {onCopy != null && (
               <MenubarItem onClick={onCopy} disabled={!canCopy} className="gap-2">
                 <Copy className="h-4 w-4" />
                 Copy
-                <span className="ml-auto pl-4">
-                  <KbdGroup>
-                    <Kbd>⌘C</Kbd>
-                  </KbdGroup>
-                </span>
+                <span className="ml-auto pl-4"><KbdGroup><Kbd>⌘C</Kbd></KbdGroup></span>
               </MenubarItem>
             )}
             {onPaste != null && (
               <MenubarItem onClick={onPaste} className="gap-2">
                 <ClipboardPaste className="h-4 w-4" />
                 Paste
-                <span className="ml-auto pl-4">
-                  <KbdGroup>
-                    <Kbd>⌘V</Kbd>
-                  </KbdGroup>
-                </span>
+                <span className="ml-auto pl-4"><KbdGroup><Kbd>⌘V</Kbd></KbdGroup></span>
               </MenubarItem>
             )}
           </MenubarContent>
@@ -280,78 +245,59 @@ export function CanvasMenubar({
             {onFitView && (
               <MenubarItem onClick={onFitView} className="gap-2">
                 Fit View
-                <span className="ml-auto pl-4">
-                  <KbdGroup>
-                    <Kbd>⌘0</Kbd>
-                  </KbdGroup>
-                </span>
+                <span className="ml-auto pl-4"><KbdGroup><Kbd>⌘0</Kbd></KbdGroup></span>
               </MenubarItem>
             )}
           </MenubarContent>
         </MenubarMenu>
       </Menubar>
       {recollectionId && (
-        <div className="absolute left-1/2 -translate-x-1/2 flex items-center justify-center gap-2 max-w-[50%] min-w-[120px]">
-          {isRenamingRecollection ? (
-            <Input
-              ref={renameInputRef}
-              type="text"
-              value={renameValue}
-              onChange={(e) => setRenameValue(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  e.preventDefault()
-                  applyRename()
-                } else if (e.key === 'Escape') {
-                  e.preventDefault()
-                  cancelRename()
-                }
-              }}
-              onBlur={handleRenameBlur}
-              className="h-7 text-sm font-medium text-center font-serif"
-              aria-label="Recollection name"
-            />
-          ) : (
-            <>
-              <span className="pointer-events-none truncate text-sm font-medium text-foreground font-serif">
-                {recollectionName ?? 'Untitled'}
-              </span>
-              <TooltipProvider delayDuration={300}>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span
-                      className="shrink-0 flex items-center text-muted-foreground cursor-default"
-                      aria-live="polite"
-                      aria-label={
-                        saveStatus === 'saving'
-                          ? 'Saving'
-                          : saveStatus === 'unsaved'
-                            ? 'Unsaved changes'
-                            : 'All changes saved'
-                      }
-                    >
-                      {saveStatus === 'saving' && (
-                        <Loader2 className="size-3.5 animate-spin" aria-hidden />
-                      )}
-                      {saveStatus === 'unsaved' && (
-                        <CircleDot className="size-3.5" aria-hidden />
-                      )}
-                      {saveStatus !== 'unsaved' && (saveStatus === 'saved' || showSavedBriefly) && (
-                        <CheckCircle2 className="size-3.5 text-muted-foreground/70" aria-hidden />
-                      )}
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">
-                    {saveStatus === 'saving'
-                      ? 'Saving…'
-                      : saveStatus === 'unsaved'
-                        ? 'Unsaved changes'
-                        : 'All changes saved'}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </>
-          )}
+        <div className="absolute left-1/2 top-0 flex h-full -translate-x-1/2 items-center justify-center gap-2 max-w-[50%] min-w-[120px] pointer-events-none">
+          <div className="pointer-events-auto flex items-center justify-center gap-2">
+            {isRenamingRecollection ? (
+              <Input
+                ref={renameInputRef}
+                type="text"
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') { e.preventDefault(); applyRename() }
+                  else if (e.key === 'Escape') { e.preventDefault(); cancelRename() }
+                }}
+                onBlur={handleRenameBlur}
+                className="h-7 text-sm font-medium text-center font-serif"
+                aria-label="Recollection name"
+              />
+            ) : (
+              <>
+                <span className="truncate text-sm font-medium text-foreground font-serif">
+                  {recollectionName ?? 'Untitled'}
+                </span>
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span
+                        className="shrink-0 flex items-center text-muted-foreground cursor-default"
+                        aria-live="polite"
+                        aria-label={
+                          saveStatus === 'saving' ? 'Saving' : saveStatus === 'unsaved' ? 'Unsaved changes' : 'All changes saved'
+                        }
+                      >
+                        {saveStatus === 'saving' && <Loader2 className="size-3.5 animate-spin" aria-hidden />}
+                        {saveStatus === 'unsaved' && <CircleDot className="size-3.5" aria-hidden />}
+                        {saveStatus !== 'unsaved' && (saveStatus === 'saved' || showSavedBriefly) && (
+                          <CheckCircle2 className="size-3.5 text-muted-foreground/70" aria-hidden />
+                        )}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      {saveStatus === 'saving' ? 'Saving…' : saveStatus === 'unsaved' ? 'Unsaved changes' : 'All changes saved'}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </>
+            )}
+          </div>
         </div>
       )}
     </div>
diff --git a/frontend/src/app/canvas/CanvasRoute.tsx b/frontend/src/app/recollections/flux/FluxRoute.tsx
similarity index 50%
rename from frontend/src/app/canvas/CanvasRoute.tsx
rename to frontend/src/app/recollections/flux/FluxRoute.tsx
index 71947b9..84fd8bd 100644
--- a/frontend/src/app/canvas/CanvasRoute.tsx
+++ b/frontend/src/app/recollections/flux/FluxRoute.tsx
@@ -1,35 +1,26 @@
 /**
- * Route wrapper for the canvas: resolves recollectionId from URL and updates lastEditedAt on open.
+ * Flux route: renders the graph canvas (CanvasPage) for the current recollection.
  */
 
 import React, { useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
-import { CanvasPage } from './CanvasPage'
+import { CanvasPage } from '@/app/canvas/CanvasPage'
 import { usePlatform } from '@/app/kosmos/KosmosContext'
 
-export function CanvasRoute() {
+export function FluxRoute() {
   const { recollectionId } = useParams<{ recollectionId: string }>()
-  const { recollections, updateLastEdited } = usePlatform()
+  const { updateLastEdited } = usePlatform()
   const updateLastEditedRef = useRef(updateLastEdited)
   updateLastEditedRef.current = updateLastEdited
 
-  const recollection = recollections.find((p) => p.id === recollectionId)
-
   useEffect(() => {
     if (recollectionId) updateLastEditedRef.current(recollectionId)
   }, [recollectionId])
 
   if (!recollectionId) return null
-  if (!recollection) {
-    return (
-      <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8">
-        <p className="text-sm text-muted-foreground">Recollection not found.</p>
-      </div>
-    )
-  }
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col">
+    <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
       <CanvasPage key={recollectionId} recollectionId={recollectionId} />
     </div>
   )
diff --git a/frontend/src/app/recollections/logos/LogosPage.tsx b/frontend/src/app/recollections/logos/LogosPage.tsx
new file mode 100644
index 0000000..3d0d1db
--- /dev/null
+++ b/frontend/src/app/recollections/logos/LogosPage.tsx
@@ -0,0 +1,21 @@
+/**
+ * Logos page: default view for a recollection. Placeholder for now.
+ */
+
+import React, { useEffect } from 'react'
+import { useRecollectionMenubar } from '../RecollectionMenubarContext'
+
+export function LogosPage() {
+  const { setCustomContent } = useRecollectionMenubar()
+  useEffect(() => {
+    setCustomContent(null)
+    return () => setCustomContent(null)
+  }, [setCustomContent])
+
+  return (
+    <div className="flex h-full min-h-0 flex-1 flex-col items-center justify-center p-8 text-muted-foreground">
+      <p className="text-sm">Logos</p>
+      <p className="mt-1 text-xs">This page is empty for now.</p>
+    </div>
+  )
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 8b7da35..366283d 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -7,7 +7,9 @@ import { registerBuiltinNodes } from './lib/graph/registerBuiltinNodes'
 import { registerBuiltinConfigTypes } from './lib/graph/configTypes'
 import { KosmosPage } from './app/kosmos/KosmosPage'
 import { RecollectionsPage } from './app/recollections/RecollectionsPage'
-import { CanvasRoute } from './app/canvas/CanvasRoute'
+import { RecollectionLayout } from './app/recollections/RecollectionLayout'
+import { LogosPage } from './app/recollections/logos/LogosPage'
+import { FluxRoute } from './app/recollections/flux/FluxRoute'
 import './lib/prismSetup'
 import 'prismjs/themes/prism.css'
 import './styles.css'
@@ -24,7 +26,11 @@ createRoot(document.getElementById('root')!).render(
           <Route path="/" element={<KosmosPage />}>
             <Route index element={<Navigate to="/recollections" replace />} />
             <Route path="recollections" element={<RecollectionsPage />} />
-            <Route path="recollections/:recollectionId" element={<CanvasRoute />} />
+            <Route path="recollections/:recollectionId" element={<RecollectionLayout />}>
+              <Route index element={<Navigate to="logos" replace />} />
+              <Route path="logos" element={<LogosPage />} />
+              <Route path="flux" element={<FluxRoute />} />
+            </Route>
           </Route>
         </Routes>
       </BrowserRouter>