@medicine-wheel/app 0.6.3 → 0.7.0

package/app/graph/page.tsx

@@ -17,8 +17,11 @@ import {
   Route,
   Save,
   ShieldCheck,
+  SlidersHorizontal,
+  X,
 } from "lucide-react";
 import { type RelationalNode, type RelationalEdge, DIRECTION_COLORS } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import {
   applyWheelLayout,
   buildGraphData,
@@ -95,10 +98,34 @@ export default function GraphPage() {
   const [graph, setGraph] = useState<MWGraphData>({ nodes: [], links: [] });
   const [selectedNode, setSelectedNode] = useState<MWGraphNode | null>(null);
   const [focusedNodeId, setFocusedNodeId] = useState<string | undefined>(undefined);
+  /**
+   * Scope is not focus.
+   *
+   * `focusedNodeId` zooms the viewport at a node and leaves all 205 mounted —
+   * useful, and not an answer to "I cannot navigate", because the field is still
+   * there behind the zoom. `scopeId` replaces the graph with one node's
+   * neighbourhood, so the canvas holds only what was asked for. Two names
+   * because they are two questions; collapsing them would make the control
+   * silently mean different things depending on how the page was entered.
+   */
+  const [scopeId, setScopeId] = useState<string | null>(null);
+  // 1, not 2. With the chronicle root at degree 82, depth 2 from any episode
+  // used to return the whole corpus — see the route's DEFAULT_DEPTH.
+  const [scopeDepth, setScopeDepth] = useState(1);
+  const [scopeMeta, setScopeMeta] = useState<{
+    count: number;
+    truncated: boolean;
+    hubs: { id: string; name: string; degree: number; reason: string; unexpanded: number }[];
+    rootName: string | null;
+  } | null>(null);
+  const [storeTotal, setStoreTotal] = useState<number | null>(null);
   const [highlightDirection, setHighlightDirection] = useState<DirectionParam | undefined>(undefined);
   const [radialSnap, setRadialSnap] = useState<"off" | "ring" | "sector">("off");
   const [loading, setLoading] = useState(true);
-  const [showLabels, setShowLabels] = useState(true);
+  // `null` means "nobody has chosen" — the default then follows the crowding
+  // (see labelsAutoSuppressed). Once the user touches the toggle their choice
+  // sticks, including across a scope change.
+  const [showLabels, setShowLabels] = useState<boolean | null>(null);
   const [animationsEnabled, setAnimationsEnabled] = useState(
     DEFAULT_GRAPH_ANIMATION_ENABLED,
   );
@@ -109,6 +136,40 @@ export default function GraphPage() {
   );
   const layoutStoreRef = useRef(layoutStore);
 
+  // Mobile presentation: the side panel becomes a slide-up sheet so the
+  // canvas can own the screen, and the canvas height fills the viewport.
+  const [isMobile, setIsMobile] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [graphHeight, setGraphHeight] = useState<number | string>(600);
+  const selectedPanelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 1023px)");
+    const apply = () => {
+      setIsMobile(mq.matches);
+      setGraphHeight(
+        mq.matches ? Math.max(360, Math.round(window.innerHeight * 0.66)) : 600,
+      );
+    };
+    apply();
+    mq.addEventListener("change", apply);
+    window.addEventListener("resize", apply);
+    return () => {
+      mq.removeEventListener("change", apply);
+      window.removeEventListener("resize", apply);
+    };
+  }, []);
+
+  // When a being is tapped on mobile the sheet opens; bring its details into
+  // view once the slide-up transition settles.
+  useEffect(() => {
+    if (!isMobile || !sheetOpen || !selectedNode) return;
+    const t = window.setTimeout(() => {
+      selectedPanelRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
+    }, 320);
+    return () => window.clearTimeout(t);
+  }, [isMobile, sheetOpen, selectedNode]);
+
   const saveLayoutStore = useCallback(
     (
       nextStore: GraphLayoutStore,
@@ -129,22 +190,54 @@ export default function GraphPage() {
 
   const loadData = useCallback(async () => {
     try {
-      const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes"), fetch("/api/edges")]);
+      // Scoped and whole-wheel are different questions, not the same question
+      // with a filter. `focusedNodeId` already existed and only zooms the
+      // viewport — every one of the 205 nodes stays mounted, so "focus" was
+      // never a way to look at less. Scope replaces the data.
+      if (scopeId) {
+        const res = await fetch(
+          `/api/nodes/${encodeURIComponent(scopeId)}/web?depth=${scopeDepth}`,
+        );
+        if (!res.ok) {
+          toast.error(
+            res.status === 404
+              ? "That node is not in the wheel."
+              : "Could not read that neighbourhood.",
+          );
+          setScopeId(null);
+          return;
+        }
+        const web = await res.json();
+        setGraph(buildGraphData(web.nodes ?? [], web.edges ?? []));
+        setScopeMeta({
+          count: web.count ?? 0,
+          truncated: Boolean(web.truncated),
+          hubs: web.hubs ?? [],
+          rootName: web.root?.name ?? null,
+        });
+        return;
+      }
+
+      const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes?limit=all"), fetch("/api/edges?limit=all")]);
       const nodesResponse = await nodesRes.json();
       const edgesData: RelationalEdge[] = await edgesRes.json();
 
-      // API returns { nodes: [...], provider: '...', count: N }
+      // API returns { nodes: [...], provider: '...', count: N, total, truncated }
       const nodesData: RelationalNode[] = Array.isArray(nodesResponse)
         ? nodesResponse
         : nodesResponse.nodes || [];
 
       setGraph(buildGraphData(nodesData, edgesData));
+      setScopeMeta(null);
+      setStoreTotal(
+        Array.isArray(nodesResponse) ? nodesData.length : (nodesResponse.total ?? nodesData.length),
+      );
     } catch {
       toast.error("Failed to load graph data");
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [scopeId, scopeDepth]);
 
   useEffect(() => {
     loadData();
@@ -167,12 +260,31 @@ export default function GraphPage() {
     const params = new URLSearchParams(window.location.search);
     const node = params.get("node");
     if (node) setFocusedNodeId(node);
+    // ?scope=<id> arrives from an episode page's "Open in graph" and means
+    // "show me this and its neighbours", not "zoom at this".
+    const scope = params.get("scope");
+    if (scope) {
+      setScopeId(scope);
+      setFocusedNodeId(scope);
+    }
     const direction = params.get("direction");
     if (direction && (DIRECTION_NAMES as readonly string[]).includes(direction)) {
       setHighlightDirection(direction as DirectionParam);
     }
   }, []);
 
+  // Escape leaves the neighbourhood and returns the whole wheel. It is the only
+  // way out that needs no aiming, which matters when the reason you scoped was
+  // that you could not find anything.
+  useEffect(() => {
+    if (!scopeId) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setScopeId(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [scopeId]);
+
   // Surface the deep-linked node in the side panel once data arrives.
   useEffect(() => {
     if (!focusedNodeId || graph.nodes.length === 0) return;
@@ -180,10 +292,58 @@ export default function GraphPage() {
     if (node) setSelectedNode(node);
   }, [focusedNodeId, graph.nodes]);
 
-  const graphData = useMemo<MWGraphData>(
-    () => (focusedNodeId ? { ...graph, focusedNodeId } : graph),
-    [graph, focusedNodeId],
-  );
+  /**
+   * The node you asked about must be findable in the picture.
+   *
+   * Before this, arriving from an episode page put your episode somewhere in a
+   * field of identical dots — the graph knew which node you meant (it zoomed at
+   * it) and gave you no way to see which one it was once you panned. Marking is
+   * done here rather than in `graph-viz` because `MedicineWheelNode` already
+   * reads `size`, `color` and `opacity` off each node; the renderer needs no
+   * new concept, only better data.
+   *
+   * Hubs are dimmed rather than hidden. The chronicle root genuinely is in your
+   * neighbourhood — every episode belongs to it — but it is context, not the
+   * subject, and drawing it at full weight makes the one true container compete
+   * with the thing you were looking at.
+   */
+  const graphData = useMemo<MWGraphData>(() => {
+    const hubIds = new Set((scopeMeta?.hubs ?? []).map((h) => h.id));
+    const marked =
+      scopeId || hubIds.size > 0
+        ? {
+            ...graph,
+            nodes: graph.nodes.map((n) => {
+              if (n.id === scopeId) {
+                return {
+                  ...n,
+                  size: (n.size ?? 8) * 1.9,
+                  color: "#ffd75e",
+                  opacity: 1,
+                };
+              }
+              if (hubIds.has(n.id)) {
+                return { ...n, size: (n.size ?? 8) * 1.25, opacity: 0.45 };
+              }
+              return n;
+            }),
+          }
+        : graph;
+
+    return focusedNodeId ? { ...marked, focusedNodeId } : marked;
+  }, [graph, focusedNodeId, scopeId, scopeMeta]);
+
+  /**
+   * Labels are legible up to a point and then they are texture.
+   *
+   * At 83 nodes crushed into one quadrant the labels stacked into unreadable
+   * bands — worse than absent, because they cost the whole canvas its clarity
+   * while conveying nothing. Off past the threshold, and the existing toggle
+   * still wins: this sets the default, it does not take the control away.
+   */
+  const LABEL_LEGIBLE_UP_TO = 35;
+  const labelsAutoSuppressed = graph.nodes.length > LABEL_LEGIBLE_UP_TO;
+  const labelsVisible = showLabels ?? !labelsAutoSuppressed;
 
   useEffect(() => {
     layoutStoreRef.current = layoutStore;
@@ -380,40 +540,103 @@ export default function GraphPage() {
   );
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-white p-6">
+    <div className="min-h-screen bg-[#0a0a1a] text-white p-3 sm:p-6">
       <div className="max-w-7xl mx-auto">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-col gap-3 mb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
           <div>
-            <h1 className="text-2xl font-bold flex items-center gap-2">
-              <span className="text-3xl">🔮</span> Medicine Wheel Graph
+            <h1 className="text-xl sm:text-2xl font-bold flex items-center gap-2">
+              <span className="text-2xl sm:text-3xl">🔮</span> Medicine Wheel Graph
             </h1>
-            <p className="text-gray-400 text-sm mt-1">
-              Interactive relational web — drag, pan, zoom across the four directions
+            <p className="text-gray-400 text-xs sm:text-sm mt-1">
+              Interactive relational web — tap a being, drag, pan, and pinch to zoom
             </p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <button
-              onClick={() => setShowLabels(!showLabels)}
-              className={`px-3 py-1.5 rounded text-sm ${showLabels ? "bg-white/10" : "bg-white/5"}`}
+              onClick={() => setShowLabels(!labelsVisible)}
+              className={`min-h-11 px-3 py-1.5 rounded text-sm ${labelsVisible ? "bg-white/10" : "bg-white/5"}`}
+              title={
+                showLabels === null && labelsAutoSuppressed
+                  ? `Off by default above ${LABEL_LEGIBLE_UP_TO} nodes — they overlap into bands`
+                  : undefined
+              }
             >
-              Labels {showLabels ? "ON" : "OFF"}
+              Labels {labelsVisible ? "ON" : "OFF"}
             </button>
             <button
               onClick={() =>
                 setRadialSnap((s) => (s === "off" ? "ring" : s === "ring" ? "sector" : "off"))
               }
-              className={`px-3 py-1.5 rounded text-sm ${radialSnap !== "off" ? "bg-white/10" : "bg-white/5"}`}
+              className={`min-h-11 px-3 py-1.5 rounded text-sm ${radialSnap !== "off" ? "bg-white/10" : "bg-white/5"}`}
               title="Radial snapping: the wheel guides dragged beings — ring keeps them in their band, sector also inside their quadrant"
             >
               Snap {radialSnap === "off" ? "OFF" : radialSnap.toUpperCase()}
             </button>
-            <button onClick={loadData} className="px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10 inline-flex items-center gap-2">
+            <button onClick={loadData} className="min-h-11 px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10 inline-flex items-center gap-2">
               <RefreshCw className="h-4 w-4" /> Refresh
             </button>
           </div>
         </div>
 
-        <div className="flex gap-6">
+        {scopeId && (
+          <div className="mb-3 rounded-xl border border-yellow-400/30 bg-yellow-400/5 px-3 py-2 text-sm">
+            {/* min-w-0 on the growing child, so a long chronicle id truncates
+                instead of pushing the depth control and the exit off-screen —
+                the banner clipped its own warning at this width before. */}
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+              <span className="min-w-0 flex-1 text-gray-300">
+                <strong className="text-yellow-300">
+                  {scopeMeta?.count ?? graph.nodes.length}
+                </strong>{" "}
+                nodes, {scopeDepth} {scopeDepth === 1 ? "hop" : "hops"} from{" "}
+                <span className="text-gray-100">{scopeMeta?.rootName ?? scopeId}</span>
+              </span>
+              <label className="inline-flex shrink-0 items-center gap-1.5 text-xs text-gray-400">
+                Depth
+                <select
+                  value={scopeDepth}
+                  onChange={(e) => setScopeDepth(Number(e.target.value))}
+                  className="rounded bg-white/5 px-1.5 py-0.5 text-gray-200"
+                  aria-label="Neighbourhood depth"
+                >
+                  {[1, 2, 3, 4, 5, 6].map((d) => (
+                    <option key={d} value={d}>
+                      {d}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <button
+                onClick={() => setScopeId(null)}
+                className="min-h-8 shrink-0 rounded bg-white/5 px-2 py-1 text-xs hover:bg-white/10 inline-flex items-center gap-1.5"
+              >
+                <X className="h-3.5 w-3.5" /> Whole wheel
+                <span className="text-gray-500">(Esc)</span>
+              </button>
+            </div>
+
+            {/* Say what was held back. A neighbourhood that quietly stopped at a
+                container is the same class of lie as a list that quietly
+                stopped at 100 rows. */}
+            {(scopeMeta?.hubs?.length ?? 0) > 0 && (
+              <p className="mt-1.5 text-xs text-gray-500">
+                {scopeMeta!.hubs.map((h) => (
+                  <span key={h.id} className="mr-3 inline-block">
+                    <span className="text-gray-400">{h.name}</span> holds {h.degree} relations —
+                    shown, not expanded{h.unexpanded > 0 ? ` (${h.unexpanded} beyond it)` : ""}
+                  </span>
+                ))}
+              </p>
+            )}
+            {scopeMeta?.truncated && (
+              <p className="mt-1 text-xs text-gray-500">
+                stopped at the depth limit — there is more further out
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className="flex flex-col lg:flex-row gap-4 lg:gap-6">
           <div className="relative flex-1 rounded-xl border border-white/10 overflow-hidden">
             {!loading && graph.nodes.length > 0 && (
               <label className="absolute right-3 top-3 z-10 inline-flex items-center gap-2 rounded-md border border-white/10 bg-[#0a0a1a]/80 px-2 py-1 text-[11px] text-gray-300 shadow-sm backdrop-blur">
@@ -428,9 +651,9 @@ export default function GraphPage() {
               </label>
             )}
             {loading ? (
-              <div className="flex items-center justify-center h-[600px] text-gray-500">Loading graph data...</div>
+              <div className="flex items-center justify-center text-gray-500" style={{ height: graphHeight }}>Loading graph data...</div>
             ) : graph.nodes.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-[600px] text-gray-500">
+              <div className="flex flex-col items-center justify-center text-gray-500" style={{ height: graphHeight }}>
                 <span className="text-4xl mb-3">🌀</span>
                 <p>No relational nodes yet.</p>
                 <p className="text-sm mt-1">Create nodes via the Nodes page.</p>
@@ -438,12 +661,16 @@ export default function GraphPage() {
             ) : (
               <MedicineWheelFlowGraph
                 data={graphData}
-                height={600}
+                height={graphHeight}
                 darkMode
-                showNodeLabels={showLabels}
+                showNodeLabels={labelsVisible}
+                showMiniMap={!isMobile}
                 animationsEnabled={animationsEnabled}
                 nodePositions={activeLayout.positions}
-                onNodeClick={(node) => setSelectedNode(node)}
+                onNodeClick={(node) => {
+                  setSelectedNode(node);
+                  if (isMobile) setSheetOpen(true);
+                }}
                 onNodeDoubleClick={navigateToNode}
                 onNodePositionsChange={handleNodePositionsChange}
                 enableConnections
@@ -458,7 +685,53 @@ export default function GraphPage() {
             )}
           </div>
 
-          <div className="w-72 space-y-4">
+          {/* Mobile: floating toggle opens the panels as a slide-up sheet so
+              the canvas keeps the whole screen. */}
+          {isMobile && !sheetOpen && (
+            <button
+              onClick={() => setSheetOpen(true)}
+              className="fixed bottom-4 right-4 z-30 inline-flex min-h-11 max-w-[70vw] items-center gap-2 rounded-full border border-white/15 bg-[#12122a]/95 px-4 py-2 text-sm font-medium text-white shadow-lg backdrop-blur"
+              aria-label="Open graph panels"
+            >
+              <SlidersHorizontal className="h-4 w-4 shrink-0" />
+              <span className="truncate">{selectedNode ? selectedNode.label : "Panels"}</span>
+            </button>
+          )}
+
+          {/* Mobile: dim backdrop behind the open sheet. */}
+          {isMobile && sheetOpen && (
+            <div
+              onClick={() => setSheetOpen(false)}
+              className="fixed inset-0 z-40 bg-black/60"
+              aria-hidden="true"
+            />
+          )}
+
+          <div
+            className={cn(
+              isMobile
+                ? cn(
+                    "fixed inset-x-0 bottom-0 z-50 max-h-[82vh] overflow-y-auto rounded-t-2xl border-t border-white/10 bg-[#0a0a1a] px-4 pb-8 shadow-2xl transition-transform duration-300 ease-out",
+                    sheetOpen ? "translate-y-0" : "translate-y-full",
+                  )
+                : "w-72",
+            )}
+            aria-hidden={isMobile && !sheetOpen ? "true" : undefined}
+          >
+            {isMobile && (
+              <div className="sticky top-0 z-10 -mx-4 mb-3 flex items-center justify-between gap-2 border-b border-white/10 bg-[#0a0a1a] px-4 pb-3 pt-3">
+                <span className="text-sm font-semibold text-gray-300">Graph panels</span>
+                <button
+                  onClick={() => setSheetOpen(false)}
+                  aria-label="Close panels"
+                  className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-white/10 text-white hover:bg-white/15"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+            )}
+
+            <div className="space-y-4">
             <div className="rounded-lg border border-white/10 p-4">
               <h3 className="text-sm font-semibold text-gray-400 mb-3">Dispositions</h3>
               <div className="space-y-3">
@@ -539,13 +812,21 @@ export default function GraphPage() {
             </div>
 
             {selectedNode && (
-              <div className="rounded-xl border border-white/10 p-4">
+              <div ref={selectedPanelRef} className="rounded-xl border border-white/10 p-4 scroll-mt-16">
                 <h3 className="text-sm font-semibold text-gray-400 mb-2">Selected Node</h3>
                 <div className="space-y-2">
                   <div><span className="text-xs text-gray-500">Name</span><p className="font-medium">{selectedNode.label}</p></div>
                   <div><span className="text-xs text-gray-500">Type</span><p className="capitalize">{selectedNode.type}</p></div>
                   {selectedNode.direction && <div><span className="text-xs text-gray-500">Direction</span><p className="capitalize">{selectedNode.direction}</p></div>}
                   <div><span className="text-xs text-gray-500">ID</span><p className="text-xs text-gray-400 font-mono break-all">{selectedNode.id}</p></div>
+                  {scopeId !== selectedNode.id && (
+                    <button
+                      onClick={() => setScopeId(selectedNode.id)}
+                      className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-yellow-400/15 px-3 py-2 text-sm text-yellow-200 hover:bg-yellow-400/25"
+                    >
+                      <Route className="h-4 w-4" /> Show only its neighbourhood
+                    </button>
+                  )}
                   <Link
                     href={`/nodes?node=${encodeURIComponent(selectedNode.id)}`}
                     className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-white/10 px-3 py-2 text-sm text-white hover:bg-white/15"
@@ -557,14 +838,31 @@ export default function GraphPage() {
             )}
 
             <div className="rounded-xl border border-white/10 p-4">
-              <h3 className="text-sm font-semibold text-gray-400 mb-3">Graph Stats</h3>
+              <h3 className="text-sm font-semibold text-gray-400 mb-3">
+                Graph Stats
+                {/* This panel read "100 Nodes / 100 Relations" against a store of
+                    205 and 191 until 2026-09-03, because the page fetched without
+                    a limit and took the provider's default page in silence. A
+                    count with nothing to compare it to cannot be doubted, which
+                    is what made it a lie rather than a number. */}
+                {scopeId && <span className="ml-2 font-normal text-yellow-300/80">scoped</span>}
+              </h3>
               <div className="grid grid-cols-2 gap-3 text-center">
-                <div><p className="text-2xl font-bold">{graph.nodes.length}</p><p className="text-xs text-gray-500">Nodes</p></div>
+                <div>
+                  <p className="text-2xl font-bold">{graph.nodes.length}</p>
+                  <p className="text-xs text-gray-500">
+                    Nodes
+                    {storeTotal !== null && graph.nodes.length < storeTotal && (
+                      <span className="text-gray-600"> of {storeTotal}</span>
+                    )}
+                  </p>
+                </div>
                 <div><p className="text-2xl font-bold">{graph.links.length}</p><p className="text-xs text-gray-500">Relations</p></div>
                 <div><p className="text-2xl font-bold">{ceremoniedCount}</p><p className="text-xs text-gray-500">Ceremonied</p></div>
                 <div><p className="text-2xl font-bold">{directionCount}</p><p className="text-xs text-gray-500">Directions</p></div>
               </div>
             </div>
+            </div>
           </div>
         </div>
       </div>

package/app/nodes/page.tsx

@@ -50,13 +50,16 @@ export default function NodesPage() {
   const loadNodes = useCallback(async () => {
     setLoading(true);
     try {
-      const params = new URLSearchParams();
+      // The list is client-side paginated below, so it needs the whole store.
+      // Without this the route applies its 100-row default and the table silently
+      // ends at 100 of 205 with no page control to reveal the rest.
+      const params = new URLSearchParams({ limit: "all" });
       if (filterType !== "all") params.set("type", filterType);
       if (filterDirection !== "all") params.set("direction", filterDirection);
 
       const [nodesRes, edgesRes] = await Promise.all([
         fetch(`/api/nodes?${params.toString()}`),
-        fetch("/api/edges"),
+        fetch("/api/edges?limit=all"),
       ]);
       const nodesResponse = await nodesRes.json();
       const edgesData: RelationalEdge[] = edgesRes.ok ? await edgesRes.json() : [];

package/app/relations/page.tsx

@@ -64,7 +64,7 @@ export default function RelationsPage() {
   const loadData = useCallback(async () => {
     setLoading(true);
     try {
-      const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes"), fetch("/api/edges")]);
+      const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes?limit=all"), fetch("/api/edges?limit=all")]);
       const nodesResponse = await nodesRes.json();
       const edgesData = await edgesRes.json();
       const nodesData: NodeRecord[] = Array.isArray(nodesResponse) ? nodesResponse : (nodesResponse.nodes || []);

package/components/navigation.tsx

@@ -13,6 +13,7 @@ import { WorkspacesPanel, WORKSPACES, type Workspace } from "@/components/worksp
 const NAV_ITEMS = [
   { href: "/", label: "Wheel", color: "var(--mw-east)" },
   { href: "/graph", label: "Graph", color: "var(--mw-primary)" },
+  { href: "/episodes", label: "Episodes", color: "var(--mw-node-ancestor)" },
   { href: "/nodes", label: "Nodes", color: "var(--mw-node-land)" },
   { href: "/relations", label: "Relations", color: "var(--mw-node-future)" },
   { href: "/ceremonies", label: "Ceremonies", color: "var(--mw-south)" },

package/components/workspaces-panel.tsx

@@ -47,22 +47,20 @@ export function WorkspacesPanel({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
 
+  // Robustness: when closed, render nothing at all so the panel can never
+  // occupy layout space — not even if the CSS bundle that hides it (transform)
+  // fails to load. This is what keeps the switcher discreet on first paint.
+  if (!open) return null;
+
   return (
     <>
       <div
-        aria-hidden={!open}
         onClick={onClose}
-        className={cn(
-          "fixed inset-0 z-40 bg-background/60 backdrop-blur-sm transition-opacity",
-          open ? "opacity-100" : "pointer-events-none opacity-0"
-        )}
+        className="fixed inset-0 z-40 bg-background/60 backdrop-blur-sm"
       />
       <aside
         aria-label="Workspaces"
-        className={cn(
-          "fixed left-0 top-0 z-50 h-full w-[340px] border-r border-border bg-card transition-transform",
-          open ? "translate-x-0" : "-translate-x-full"
-        )}
+        className="fixed left-0 top-0 z-50 h-full w-[340px] max-w-[85vw] border-r border-border bg-card"
       >
         <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="mw-h2">Workspaces</div>

package/lib/api-paging.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared paging contract for the wheel's read routes.
+ *
+ * The provider's `getAllNodes()` / `getAllEdges()` default to 100 rows. A bare
+ * `GET /api/nodes` therefore returned 100 of the store's 205 nodes, and the graph
+ * page — which sends no parameters — drew that window while its own panel read
+ * "100 Nodes / 100 Relations". Of the 100 it drew, 53 had no drawable edge,
+ * because 27 of the 100 delivered edges pointed at nodes that were never sent.
+ *
+ * Nothing was broken. Every layer did what it was told. The lie was that no layer
+ * ever said how much it had left out.
+ *
+ * So both routes accept the same `limit`, and both report enough for a caller to
+ * know it holds a page: `?limit=all` for the whole store, `?limit=<n>` for n.
+ * This lives in `lib/` rather than in either route because a second hand-written
+ * copy of a validation rule is how the two drift apart — the same defect this
+ * repo just removed from `PersonRole`.
+ */
+import { NextResponse } from "next/server";
+
+/** The provider's own default page size, restated so a route can report honestly. */
+export const DEFAULT_PAGE_SIZE = 100;
+
+/** Sentinel meaning "the whole store", distinct from "no limit given". */
+export const LIMIT_ALL = "all";
+
+/**
+ * Returns the requested page size, `null` for "everything", or a 400 response.
+ *
+ * An unparseable limit is refused rather than coerced. Falling back to the
+ * default on bad input would reintroduce the silent truncation this parameter
+ * exists to close, and would do it precisely when a caller had tried to ask.
+ */
+export function parseLimit(raw: string | null): number | null | NextResponse {
+  if (raw === null || raw === "") return DEFAULT_PAGE_SIZE;
+  if (raw === LIMIT_ALL) return null;
+
+  const parsed = Number(raw);
+  if (!Number.isInteger(parsed) || parsed < 1) {
+    return NextResponse.json(
+      {
+        error: `Invalid limit: ${raw} — nothing was returned.`,
+        hint: `limit must be a positive integer, or "${LIMIT_ALL}" for the whole store.`,
+      },
+      { status: 400 },
+    );
+  }
+  return parsed;
+}

package/lib/ceremony-response.ts

@@ -50,6 +50,27 @@ export function normalizeCeremonyLog(value: unknown): CeremonyLog | null {
   };
 }
 
+export function ceremonyEpisodePath(value: unknown): string | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  const researchContext = (value as Record<string, unknown>).research_context;
+  if (typeof researchContext !== "string") return undefined;
+
+  try {
+    const parsed = JSON.parse(researchContext) as Record<string, unknown> | null;
+    if (!parsed || typeof parsed !== "object") return undefined;
+    const episodePath = parsed.episode_path ?? parsed.episodePath;
+    return typeof episodePath === "string" && episodePath.length > 0
+      ? episodePath
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function ceremonyBelongsToEpisode(value: unknown, episodePath: string): boolean {
+  return ceremonyEpisodePath(value) === episodePath;
+}
+
 export function extractCeremonyLogs(response: unknown): CeremonyLog[] {
   const candidate = Array.isArray(response)
     ? response