the open page lists its bands in the nav

A third level, under the selected page only — every page has bands, and listing
all of them would make the nav longer than the site.

Announced by the builder rather than fetched again: it already reads them to know
what it is looking at in the document, and it mounts exactly when a page is open.
Cleared on unmount, or the nav keeps listing the last page's bands.

Clicking one writes a third URL segment and the preview scrolls to it, keyed on
the render count too so the position survives a save replacing the frame.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/NavPanel.tsx

@@ -5,7 +5,7 @@ import { GripVertical, Lock } from 'lucide-react';
 import { SECTIONS, sectionOpen } from './sections';
 import { href, useNav } from './routes';
 import { useReady } from './useReady';
-import { pageParam, usePages, type Page } from './usePages';
+import { pageParam, usePages, useSections, type Page } from './usePages';
 import { useFofosChanged } from './channel';
 
 /**
@@ -54,7 +54,8 @@ const rowClass = (active: boolean) =>
 
 export const NavPanel = () => {
   const { pages, announce } = usePages();
-  const { section: active, item } = useNav();
+  const { section: active, item, part } = useNav();
+  const { sections } = useSections();
   const { ready, rootSet } = useReady();
 
   /*
@@ -202,8 +203,8 @@ export const NavPanel = () => {
           const current = active === 'pages' && item === pageParam(page);
 
           return (
-            <div
-              key={page.id}
+            <div key={page.id} className="flex flex-col">
+              <div
               /*
                 The ROW is the drop target and the HANDLE is what drags.
 
@@ -253,6 +254,28 @@ export const NavPanel = () => {
                     tells them apart. Home's is `/`, which is short enough not to need explaining. */}
                 <span className="shrink-0 font-mono text-[10px] text-muted-foreground">{page.path}</span>
               </Link>
+              </div>
+
+              {/*
+                The open page's bands, one level further in.
+
+                Only under the page that is SELECTED — every page has bands, and listing all of them
+                would make the nav longer than the site. Announced by the builder, which is mounted
+                exactly when a page is open; see useSections.
+              */}
+              {current &&
+                sections?.map((band) => (
+                  <Link
+                    key={band.id}
+                    to={href('pages', pageParam(page), String(band.id))}
+                    replace
+                    className={`flex items-baseline border-b border-border py-1.5 pr-3 pl-14 text-left transition-colors ${
+                      part === String(band.id) ? 'bg-muted' : 'hover:bg-muted/50'
+                    }`}
+                  >
+                    <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">{band.name}</span>
+                  </Link>
+                ))}
             </div>
           );
         })}