feat: logos and flux

2026-03-15 14:43:31 +01:00
parent 04c039bdde
commit 449d2cb382
8 changed files with 285 additions and 160 deletions
--- 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}>
--- a/frontend/src/app/recollections/RecollectionLayout.tsx
+++ 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>
+  )
+}
--- a/frontend/src/app/recollections/RecollectionMenubar.tsx
+++ 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>
+  )
+}
--- a/frontend/src/app/recollections/RecollectionMenubarContext.tsx
+++ 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
+}
--- a/frontend/src/app/recollections/flux/FluxMenubarContent.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,15 +166,8 @@ 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>
@@ -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,18 +245,15 @@ 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]">
+        <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}
@@ -299,13 +261,8 @@ export function CanvasMenubar({
                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()
-                }
+                  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"
@@ -313,7 +270,7 @@ export function CanvasMenubar({
              />
            ) : (
              <>
-              <span className="pointer-events-none truncate text-sm font-medium text-foreground font-serif">
+                <span className="truncate text-sm font-medium text-foreground font-serif">
                  {recollectionName ?? 'Untitled'}
                </span>
                <TooltipProvider delayDuration={300}>
@@ -323,36 +280,25 @@ export function CanvasMenubar({
                        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' ? '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 === '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'}
+                      {saveStatus === 'saving' ? 'Saving…' : saveStatus === 'unsaved' ? 'Unsaved changes' : 'All changes saved'}
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </>
            )}
          </div>
+        </div>
      )}
    </div>
  )
--- a/frontend/src/app/recollections/flux/FluxRoute.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>
  )
--- a/frontend/src/app/recollections/logos/LogosPage.tsx
+++ 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>
+  )
+}
--- 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>