@medicine-wheel/app 0.4.1 → 0.4.3

package/app/api/ceremonies/route.ts

@@ -12,7 +12,9 @@ export async function GET(request: Request) {
 
     if (direction) {
       ceremonies = ceremonies.filter((c) => c.direction === direction);
-    } else if (type) {
+    }
+
+    if (type) {
       ceremonies = ceremonies.filter((c) => c.type === type);
     }
 

package/app/ceremonies/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useEffect, useState, Suspense, useMemo } from "react";
+import { useCallback, useEffect, useState, Suspense, useMemo } from "react";
 import type { FormEvent } from "react";
 import { useSearchParams } from "next/navigation";
 import { type CeremonyLog, DIRECTION_COLORS, CEREMONY_ICONS, type DirectionName, type CeremonyType } from "@/lib/types";
+import { extractCeremonyLogs } from "@/lib/ceremony-response";
 import { toast } from "sonner";
 
 function CeremoniesContent() {
@@ -14,16 +15,25 @@ function CeremoniesContent() {
   const [showForm, setShowForm] = useState(false);
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
-  useEffect(() => {
+  const loadCeremonies = useCallback(async () => {
     const params = new URLSearchParams();
     if (filterDir !== "all") params.set("direction", filterDir);
     if (filterType !== "all") params.set("type", filterType);
-    fetch(`/api/ceremonies?${params}`)
-      .then((r) => r.json())
-      .then((data) => setCeremonies(Array.isArray(data) ? data : []))
-      .catch(() => setCeremonies([]));
+
+    try {
+      const res = await fetch(`/api/ceremonies?${params}`);
+      if (!res.ok) throw new Error("Failed to load ceremonies");
+      const data = await res.json();
+      setCeremonies(extractCeremonyLogs(data));
+    } catch {
+      setCeremonies([]);
+    }
   }, [filterDir, filterType]);
 
+  useEffect(() => {
+    loadCeremonies();
+  }, [loadCeremonies]);
+
   async function logCeremony(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     const form = new FormData(e.currentTarget);
@@ -39,8 +49,7 @@ function CeremoniesContent() {
     if (res.ok) {
       toast.success("Ceremony logged");
       setShowForm(false);
-      const data = await fetch("/api/ceremonies").then((r) => r.json());
-      setCeremonies(Array.isArray(data) ? data : []);
+      await loadCeremonies();
     } else { toast.error("Failed to log ceremony"); }
   }
 

package/app/graph/page.tsx

@@ -2,14 +2,44 @@
 
 import "@xyflow/react/dist/style.css";
 
-import { useEffect, useState, useCallback, useMemo } from "react";
+import { useEffect, useState, useCallback, useMemo, useRef } from "react";
+import type { ChangeEvent } from "react";
 import dynamic from "next/dynamic";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  BookOpen,
+  CircleDot,
+  Flame,
+  GitFork,
+  RefreshCw,
+  Route,
+  Save,
+  ShieldCheck,
+} from "lucide-react";
 import { type RelationalNode, type RelationalEdge, DIRECTION_COLORS } from "@/lib/types";
 import {
+  applyWheelLayout,
   buildGraphData,
   type MWGraphData,
   type MWGraphNode,
+  type MWGraphNodePositions,
 } from "@medicine-wheel/graph-viz";
+import {
+  CURRENT_GRAPH_LAYOUT_ID,
+  getActiveGraphLayout,
+  loadStoredGraphLayoutStore,
+  persistGraphLayoutStore,
+  saveNamedGraphLayout,
+  selectGraphLayout,
+  upsertCurrentGraphLayout,
+  type GraphLayoutStore,
+} from "@/lib/graph-layout-storage";
+import {
+  DEFAULT_GRAPH_ANIMATION_ENABLED,
+  loadStoredGraphAnimationPreference,
+  persistGraphAnimationPreference,
+} from "@/lib/graph-animation-storage";
 import { toast } from "sonner";
 
 // React Flow touches `window`/`document`, so the interactive renderer is
@@ -29,11 +59,64 @@ const MedicineWheelFlowGraph = dynamic(
   },
 );
 
+const GRAPH_COMPONENT_LINKS = [
+  { href: "/nodes", label: "Nodes", icon: CircleDot },
+  { href: "/relations", label: "Relations", icon: GitFork },
+  { href: "/ceremonies", label: "Ceremonies", icon: Flame },
+  { href: "/narrative", label: "Narrative", icon: BookOpen },
+  { href: "/narrative/beats", label: "Beats", icon: Route },
+  { href: "/accountability", label: "Accountability", icon: ShieldCheck },
+];
+
+function graphNodePositions(data: MWGraphData): MWGraphNodePositions {
+  const laidOut = applyWheelLayout({
+    nodes: data.nodes.map((node) => ({ ...node })),
+    links: data.links,
+  });
+  const positions: MWGraphNodePositions = {};
+
+  for (const node of laidOut.nodes) {
+    if (typeof node.x === "number" && typeof node.y === "number") {
+      positions[node.id] = { x: node.x, y: node.y };
+    }
+  }
+
+  return positions;
+}
+
 export default function GraphPage() {
+  const router = useRouter();
   const [graph, setGraph] = useState<MWGraphData>({ nodes: [], links: [] });
   const [selectedNode, setSelectedNode] = useState<MWGraphNode | null>(null);
   const [loading, setLoading] = useState(true);
   const [showLabels, setShowLabels] = useState(true);
+  const [animationsEnabled, setAnimationsEnabled] = useState(
+    DEFAULT_GRAPH_ANIMATION_ENABLED,
+  );
+  const [layoutName, setLayoutName] = useState("");
+  const [layoutsHydrated, setLayoutsHydrated] = useState(false);
+  const [layoutStore, setLayoutStore] = useState<GraphLayoutStore>(() =>
+    loadStoredGraphLayoutStore(null),
+  );
+  const layoutStoreRef = useRef(layoutStore);
+
+  const saveLayoutStore = useCallback(
+    (
+      nextStore: GraphLayoutStore,
+      options: { notifyOnFailure?: boolean } = {},
+    ) => {
+      layoutStoreRef.current = nextStore;
+      setLayoutStore(nextStore);
+
+      const persisted = persistGraphLayoutStore(nextStore);
+      if (!persisted && options.notifyOnFailure) {
+        toast.error("Could not save graph disposition");
+      }
+
+      return persisted;
+    },
+    [],
+  );
 
   const loadData = useCallback(async () => {
     try {
@@ -58,6 +141,32 @@ export default function GraphPage() {
     loadData();
   }, [loadData]);
 
+  useEffect(() => {
+    const storedLayouts = loadStoredGraphLayoutStore();
+    layoutStoreRef.current = storedLayouts;
+    setLayoutStore(storedLayouts);
+    setLayoutsHydrated(true);
+  }, []);
+
+  useEffect(() => {
+    setAnimationsEnabled(loadStoredGraphAnimationPreference());
+  }, []);
+
+  useEffect(() => {
+    layoutStoreRef.current = layoutStore;
+  }, [layoutStore]);
+
+  useEffect(() => {
+    if (!layoutsHydrated || graph.nodes.length === 0) return;
+
+    const activeLayout = getActiveGraphLayout(layoutStoreRef.current);
+    if (Object.keys(activeLayout.positions).length > 0) return;
+
+    saveLayoutStore(
+      upsertCurrentGraphLayout(layoutStoreRef.current, graphNodePositions(graph)),
+    );
+  }, [graph, layoutsHydrated, saveLayoutStore]);
+
   const ceremoniedCount = useMemo(
     () => graph.links.filter((l) => l.ceremonyHonored).length,
     [graph.links],
@@ -66,6 +175,70 @@ export default function GraphPage() {
     () => new Set(graph.nodes.map((n) => n.direction).filter(Boolean)).size,
     [graph.nodes],
   );
+  const activeLayout = useMemo(() => getActiveGraphLayout(layoutStore), [layoutStore]);
+  const savedLayouts = useMemo(
+    () => layoutStore.layouts.filter((layout) => layout.id !== CURRENT_GRAPH_LAYOUT_ID),
+    [layoutStore.layouts],
+  );
+  const rememberedPositionCount = useMemo(
+    () => Object.keys(activeLayout.positions).length,
+    [activeLayout.positions],
+  );
+
+  const handleNodePositionsChange = useCallback(
+    (positions: MWGraphNodePositions) => {
+      saveLayoutStore(upsertCurrentGraphLayout(layoutStoreRef.current, positions));
+    },
+    [saveLayoutStore],
+  );
+
+  const saveNamedLayout = useCallback(() => {
+    const name = layoutName.trim();
+    if (!name) {
+      toast.error("Name the disposition first");
+      return;
+    }
+
+    const positions = getActiveGraphLayout(layoutStoreRef.current).positions;
+    if (Object.keys(positions).length === 0) {
+      toast.error("Move a node before saving");
+      return;
+    }
+
+    const nextStore = saveNamedGraphLayout(layoutStoreRef.current, name, positions);
+    const persisted = saveLayoutStore(nextStore, { notifyOnFailure: true });
+    if (persisted) toast.success(`Saved ${name}`);
+    setLayoutName("");
+  }, [layoutName, saveLayoutStore]);
+
+  const loadNamedLayout = useCallback(
+    (layoutId: string) => {
+      const nextStore = selectGraphLayout(layoutStoreRef.current, layoutId);
+      const active = getActiveGraphLayout(nextStore);
+      const persisted = saveLayoutStore(nextStore, { notifyOnFailure: true });
+      if (persisted) toast.success(`Loaded ${active.name}`);
+    },
+    [saveLayoutStore],
+  );
+
+  const navigateToNode = useCallback(
+    (node: MWGraphNode) => {
+      router.push(`/nodes?node=${encodeURIComponent(node.id)}`);
+    },
+    [router],
+  );
+
+  const handleAnimationsEnabledChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const enabled = event.target.checked;
+      setAnimationsEnabled(enabled);
+
+      if (!persistGraphAnimationPreference(enabled)) {
+        toast.error("Could not save graph animation preference");
+      }
+    },
+    [],
+  );
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-white p-6">
@@ -86,14 +259,26 @@ export default function GraphPage() {
             >
               Labels {showLabels ? "ON" : "OFF"}
             </button>
-            <button onClick={loadData} className="px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10">
-              ↻ Refresh
+            <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">
+              <RefreshCw className="h-4 w-4" /> Refresh
             </button>
           </div>
         </div>
 
         <div className="flex gap-6">
-          <div className="flex-1 rounded-xl border border-white/10 overflow-hidden">
+          <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">
+                <input
+                  type="checkbox"
+                  checked={animationsEnabled}
+                  onChange={handleAnimationsEnabledChange}
+                  className="h-3 w-3 accent-yellow-400"
+                  aria-label="Animate graph edges"
+                />
+                <span>Animation</span>
+              </label>
+            )}
             {loading ? (
               <div className="flex items-center justify-center h-[600px] text-gray-500">Loading graph data...</div>
             ) : graph.nodes.length === 0 ? (
@@ -108,12 +293,81 @@ export default function GraphPage() {
                 height={600}
                 darkMode
                 showNodeLabels={showLabels}
+                animationsEnabled={animationsEnabled}
+                nodePositions={activeLayout.positions}
                 onNodeClick={(node) => setSelectedNode(node)}
+                onNodeDoubleClick={navigateToNode}
+                onNodePositionsChange={handleNodePositionsChange}
               />
             )}
           </div>
 
           <div className="w-72 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">
+                <select
+                  value={layoutStore.activeLayoutId}
+                  onChange={(event) => loadNamedLayout(event.target.value)}
+                  className="w-full rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white"
+                  aria-label="Graph disposition"
+                >
+                  <option className="bg-[#101020]" value={CURRENT_GRAPH_LAYOUT_ID}>
+                    Last positioning
+                  </option>
+                  {savedLayouts.map((layout) => (
+                    <option className="bg-[#101020]" key={layout.id} value={layout.id}>
+                      {layout.name}
+                    </option>
+                  ))}
+                </select>
+
+                <div className="flex gap-2">
+                  <input
+                    value={layoutName}
+                    onChange={(event) => setLayoutName(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") saveNamedLayout();
+                    }}
+                    placeholder="Name disposition"
+                    className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder:text-gray-500"
+                  />
+                  <button
+                    onClick={saveNamedLayout}
+                    className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/10 text-white hover:bg-white/15"
+                    aria-label="Save named disposition"
+                    title="Save named disposition"
+                  >
+                    <Save className="h-4 w-4" />
+                  </button>
+                </div>
+
+                <p className="text-xs text-gray-500">
+                  {rememberedPositionCount} positions remembered
+                </p>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-white/10 p-4">
+              <h3 className="text-sm font-semibold text-gray-400 mb-3">Related</h3>
+              <div className="grid grid-cols-2 gap-2">
+                {GRAPH_COMPONENT_LINKS.map((item) => {
+                  const Icon = item.icon;
+
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className="inline-flex min-h-10 items-center gap-2 rounded-md bg-white/5 px-2 text-xs text-gray-200 hover:bg-white/10"
+                    >
+                      <Icon className="h-4 w-4 shrink-0 text-gray-400" />
+                      <span className="truncate">{item.label}</span>
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+
             <div className="rounded-xl border border-white/10 p-4">
               <h3 className="text-sm font-semibold text-gray-400 mb-3">Directions</h3>
               {(["east", "south", "west", "north"] as const).map((dir) => (
@@ -132,6 +386,12 @@ export default function GraphPage() {
                   <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>
+                  <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"
+                  >
+                    <CircleDot className="h-4 w-4" /> Open node
+                  </Link>
                 </div>
               </div>
             )}

package/app/nodes/page.tsx

@@ -26,6 +26,7 @@ export default function NodesPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [expandedNode, setExpandedNode] = useState<string | null>(null);
   const [showAddNode, setShowAddNode] = useState(false);
+  const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);
 
   const loadNodes = useCallback(async () => {
     setLoading(true);
@@ -54,6 +55,23 @@ export default function NodesPage() {
 
   useEffect(() => { loadNodes(); }, [loadNodes]);
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    setFocusedNodeId(params.get("node"));
+  }, []);
+
+  useEffect(() => {
+    if (loading || !focusedNodeId || !nodes.some((node) => node.id === focusedNodeId)) return;
+
+    setExpandedNode(focusedNodeId);
+    window.requestAnimationFrame(() => {
+      document.getElementById(`node-${focusedNodeId}`)?.scrollIntoView({
+        block: "center",
+        behavior: "smooth",
+      });
+    });
+  }, [focusedNodeId, loading, nodes]);
+
   const filteredNodes = nodes.filter((node) => {
     if (!searchQuery) return true;
     const q = searchQuery.toLowerCase();
@@ -145,7 +163,11 @@ export default function NodesPage() {
       ) : (
         <div className="space-y-2">
           {filteredNodes.map((node) => (
-            <div key={node.id} className={`border rounded-lg bg-card overflow-hidden transition-all ${expandedNode === node.id ? "ring-2 ring-primary" : ""}`}>
+            <div
+              key={node.id}
+              id={`node-${node.id}`}
+              className={`border rounded-lg bg-card overflow-hidden transition-all ${expandedNode === node.id ? "ring-2 ring-primary" : ""}`}
+            >
               <button
                 onClick={() => setExpandedNode(expandedNode === node.id ? null : node.id)}
                 className="w-full px-4 py-3 flex items-center gap-3 text-left hover:bg-secondary/30"

package/lib/ceremony-response.ts

@@ -0,0 +1,16 @@
+import type { CeremonyLog } from "@/lib/types";
+
+interface CeremonyListResponse {
+  ceremonies?: unknown;
+}
+
+export function extractCeremonyLogs(response: unknown): CeremonyLog[] {
+  if (Array.isArray(response)) return response as CeremonyLog[];
+
+  if (!response || typeof response !== "object") return [];
+
+  const candidate = response as CeremonyListResponse;
+  return Array.isArray(candidate.ceremonies)
+    ? (candidate.ceremonies as CeremonyLog[])
+    : [];
+}

package/lib/graph-animation-storage.ts

@@ -0,0 +1,84 @@
+export const GRAPH_ANIMATION_STORAGE_VERSION = 1;
+export const GRAPH_ANIMATION_STORAGE_KEY = "medicine-wheel:graph-animation:v1";
+export const DEFAULT_GRAPH_ANIMATION_ENABLED = true;
+
+interface StorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+interface GraphAnimationPreference {
+  version: typeof GRAPH_ANIMATION_STORAGE_VERSION;
+  animationsEnabled: boolean;
+}
+
+function safeStorage(): StorageLike | null {
+  if (typeof window === "undefined") return null;
+
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function serializeGraphAnimationPreference(
+  animationsEnabled: boolean,
+): string {
+  const value: GraphAnimationPreference = {
+    version: GRAPH_ANIMATION_STORAGE_VERSION,
+    animationsEnabled,
+  };
+
+  return JSON.stringify(value);
+}
+
+export function parseGraphAnimationPreference(raw: string | null): boolean {
+  if (!raw) return DEFAULT_GRAPH_ANIMATION_ENABLED;
+
+  try {
+    const parsed = JSON.parse(raw) as Partial<GraphAnimationPreference>;
+
+    if (
+      parsed.version === GRAPH_ANIMATION_STORAGE_VERSION &&
+      typeof parsed.animationsEnabled === "boolean"
+    ) {
+      return parsed.animationsEnabled;
+    }
+  } catch {
+    return DEFAULT_GRAPH_ANIMATION_ENABLED;
+  }
+
+  return DEFAULT_GRAPH_ANIMATION_ENABLED;
+}
+
+export function loadStoredGraphAnimationPreference(
+  storage: StorageLike | null = safeStorage(),
+): boolean {
+  if (!storage) return DEFAULT_GRAPH_ANIMATION_ENABLED;
+
+  try {
+    return parseGraphAnimationPreference(
+      storage.getItem(GRAPH_ANIMATION_STORAGE_KEY),
+    );
+  } catch {
+    return DEFAULT_GRAPH_ANIMATION_ENABLED;
+  }
+}
+
+export function persistGraphAnimationPreference(
+  animationsEnabled: boolean,
+  storage: StorageLike | null = safeStorage(),
+): boolean {
+  if (!storage) return false;
+
+  try {
+    storage.setItem(
+      GRAPH_ANIMATION_STORAGE_KEY,
+      serializeGraphAnimationPreference(animationsEnabled),
+    );
+    return true;
+  } catch {
+    return false;
+  }
+}

package/lib/graph-layout-storage.ts

@@ -0,0 +1,265 @@
+import type { MWGraphNodePositions } from "@medicine-wheel/graph-viz";
+
+export const GRAPH_LAYOUT_STORE_VERSION = 1;
+export const GRAPH_LAYOUT_STORAGE_KEY = "medicine-wheel:graph-layouts:v1";
+export const CURRENT_GRAPH_LAYOUT_ID = "current";
+
+export interface GraphLayoutDisposition {
+  id: string;
+  name: string;
+  positions: MWGraphNodePositions;
+  updatedAt: string;
+  nodeCount: number;
+}
+
+export interface GraphLayoutStore {
+  version: typeof GRAPH_LAYOUT_STORE_VERSION;
+  activeLayoutId: string;
+  layouts: GraphLayoutDisposition[];
+}
+
+interface StorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+function nowIso(): string {
+  return new Date().toISOString();
+}
+
+function safeStorage(): StorageLike | null {
+  if (typeof window === "undefined") return null;
+
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function currentLayout(
+  positions: MWGraphNodePositions = {},
+  updatedAt: string = nowIso(),
+): GraphLayoutDisposition {
+  return {
+    id: CURRENT_GRAPH_LAYOUT_ID,
+    name: "Last positioning",
+    positions,
+    updatedAt,
+    nodeCount: Object.keys(positions).length,
+  };
+}
+
+function slugLayoutName(name: string): string {
+  const slug = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+
+  return slug || "layout";
+}
+
+function layoutIdForName(name: string): string {
+  return `layout:${slugLayoutName(name)}`;
+}
+
+export function sanitizeGraphPositions(
+  positions: unknown,
+): MWGraphNodePositions {
+  if (!positions || typeof positions !== "object" || Array.isArray(positions)) {
+    return {};
+  }
+
+  const sanitized: MWGraphNodePositions = {};
+
+  for (const [nodeId, value] of Object.entries(positions)) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) continue;
+
+    const x = (value as { x?: unknown }).x;
+    const y = (value as { y?: unknown }).y;
+
+    if (typeof x === "number" && typeof y === "number" && Number.isFinite(x) && Number.isFinite(y)) {
+      sanitized[nodeId] = {
+        x: Number(x.toFixed(2)),
+        y: Number(y.toFixed(2)),
+      };
+    }
+  }
+
+  return sanitized;
+}
+
+export function createEmptyGraphLayoutStore(
+  updatedAt: string = nowIso(),
+): GraphLayoutStore {
+  return {
+    version: GRAPH_LAYOUT_STORE_VERSION,
+    activeLayoutId: CURRENT_GRAPH_LAYOUT_ID,
+    layouts: [currentLayout({}, updatedAt)],
+  };
+}
+
+export function normalizeGraphLayoutStore(value: unknown): GraphLayoutStore {
+  const empty = createEmptyGraphLayoutStore();
+
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return empty;
+  }
+
+  const candidate = value as {
+    version?: unknown;
+    activeLayoutId?: unknown;
+    layouts?: unknown;
+  };
+
+  if (candidate.version !== GRAPH_LAYOUT_STORE_VERSION || !Array.isArray(candidate.layouts)) {
+    return empty;
+  }
+
+  const layouts = candidate.layouts.flatMap((layout): GraphLayoutDisposition[] => {
+    if (!layout || typeof layout !== "object" || Array.isArray(layout)) return [];
+
+    const item = layout as {
+      id?: unknown;
+      name?: unknown;
+      positions?: unknown;
+      updatedAt?: unknown;
+    };
+
+    if (typeof item.id !== "string" || typeof item.name !== "string") {
+      return [];
+    }
+
+    const positions = sanitizeGraphPositions(item.positions);
+
+    return [{
+      id: item.id,
+      name: item.name,
+      positions,
+      updatedAt: typeof item.updatedAt === "string" ? item.updatedAt : empty.layouts[0].updatedAt,
+      nodeCount: Object.keys(positions).length,
+    }];
+  });
+
+  const withoutDuplicateCurrent = layouts.filter((layout) => layout.id !== CURRENT_GRAPH_LAYOUT_ID);
+  const current = layouts.find((layout) => layout.id === CURRENT_GRAPH_LAYOUT_ID) ?? empty.layouts[0];
+  const normalizedLayouts = [current, ...withoutDuplicateCurrent];
+  const activeLayoutId =
+    typeof candidate.activeLayoutId === "string" &&
+    normalizedLayouts.some((layout) => layout.id === candidate.activeLayoutId)
+      ? candidate.activeLayoutId
+      : CURRENT_GRAPH_LAYOUT_ID;
+
+  return {
+    version: GRAPH_LAYOUT_STORE_VERSION,
+    activeLayoutId,
+    layouts: normalizedLayouts,
+  };
+}
+
+export function parseGraphLayoutStore(raw: string | null): GraphLayoutStore {
+  if (!raw) return createEmptyGraphLayoutStore();
+
+  try {
+    return normalizeGraphLayoutStore(JSON.parse(raw));
+  } catch {
+    return createEmptyGraphLayoutStore();
+  }
+}
+
+export function loadStoredGraphLayoutStore(
+  storage: StorageLike | null = safeStorage(),
+): GraphLayoutStore {
+  if (!storage) return createEmptyGraphLayoutStore();
+
+  try {
+    return parseGraphLayoutStore(storage.getItem(GRAPH_LAYOUT_STORAGE_KEY));
+  } catch {
+    return createEmptyGraphLayoutStore();
+  }
+}
+
+export function persistGraphLayoutStore(
+  store: GraphLayoutStore,
+  storage: StorageLike | null = safeStorage(),
+): boolean {
+  if (!storage) return false;
+
+  try {
+    storage.setItem(GRAPH_LAYOUT_STORAGE_KEY, JSON.stringify(normalizeGraphLayoutStore(store)));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function getActiveGraphLayout(
+  store: GraphLayoutStore,
+): GraphLayoutDisposition {
+  return (
+    store.layouts.find((layout) => layout.id === store.activeLayoutId) ??
+    store.layouts.find((layout) => layout.id === CURRENT_GRAPH_LAYOUT_ID) ??
+    currentLayout()
+  );
+}
+
+export function upsertCurrentGraphLayout(
+  store: GraphLayoutStore,
+  positions: MWGraphNodePositions,
+  updatedAt: string = nowIso(),
+): GraphLayoutStore {
+  const current = currentLayout(sanitizeGraphPositions(positions), updatedAt);
+  const savedLayouts = store.layouts.filter((layout) => layout.id !== CURRENT_GRAPH_LAYOUT_ID);
+
+  return {
+    version: GRAPH_LAYOUT_STORE_VERSION,
+    activeLayoutId: CURRENT_GRAPH_LAYOUT_ID,
+    layouts: [current, ...savedLayouts],
+  };
+}
+
+export function saveNamedGraphLayout(
+  store: GraphLayoutStore,
+  name: string,
+  positions: MWGraphNodePositions,
+  updatedAt: string = nowIso(),
+): GraphLayoutStore {
+  const trimmedName = name.trim() || "Untitled disposition";
+  const id = layoutIdForName(trimmedName);
+  const sanitized = sanitizeGraphPositions(positions);
+  const namedLayout: GraphLayoutDisposition = {
+    id,
+    name: trimmedName,
+    positions: sanitized,
+    updatedAt,
+    nodeCount: Object.keys(sanitized).length,
+  };
+
+  const current =
+    store.layouts.find((layout) => layout.id === CURRENT_GRAPH_LAYOUT_ID) ??
+    currentLayout(sanitized, updatedAt);
+  const savedLayouts = store.layouts.filter(
+    (layout) => layout.id !== CURRENT_GRAPH_LAYOUT_ID && layout.id !== id,
+  );
+
+  return {
+    version: GRAPH_LAYOUT_STORE_VERSION,
+    activeLayoutId: id,
+    layouts: [current, namedLayout, ...savedLayouts],
+  };
+}
+
+export function selectGraphLayout(
+  store: GraphLayoutStore,
+  layoutId: string,
+): GraphLayoutStore {
+  const activeLayoutId = store.layouts.some((layout) => layout.id === layoutId)
+    ? layoutId
+    : CURRENT_GRAPH_LAYOUT_ID;
+
+  return {
+    ...store,
+    activeLayoutId,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medicine-wheel/app",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Medicine Wheel — Interactive visual layer for Indigenous relational research with Four Directions, ceremonies, and narrative arcs",
   "bin": {
     "mw": "dist/cli/mw.js",
@@ -74,24 +74,24 @@
     "release:major": "npm run version:major && npm run publish:all && npm run release:commit"
   },
   "dependencies": {
-    "@medicine-wheel/ceremony-protocol": "^0.4.1",
-    "@medicine-wheel/community-review": "^0.4.1",
-    "@medicine-wheel/consent-lifecycle": "^0.4.1",
-    "@medicine-wheel/data-store": "^0.4.1",
-    "@medicine-wheel/data-store-postgres": "^0.4.1",
-    "@medicine-wheel/fire-keeper": "^0.4.1",
-    "@medicine-wheel/graph-viz": "^0.4.1",
-    "@medicine-wheel/importance-unit": "^0.4.1",
-    "@medicine-wheel/mcp": "^4.4.1",
-    "@medicine-wheel/narrative-engine": "^0.4.1",
-    "@medicine-wheel/ontology-core": "^0.4.1",
-    "@medicine-wheel/prompt-decomposition": "^0.4.1",
-    "@medicine-wheel/relational-index": "^0.4.1",
-    "@medicine-wheel/relational-query": "^0.4.1",
-    "@medicine-wheel/session-reader": "^0.4.1",
-    "@medicine-wheel/storage-provider": "^0.4.1",
-    "@medicine-wheel/transformation-tracker": "^0.4.1",
-    "@medicine-wheel/ui-components": "^0.4.1",
+    "@medicine-wheel/ceremony-protocol": "^0.4.3",
+    "@medicine-wheel/community-review": "^0.4.3",
+    "@medicine-wheel/consent-lifecycle": "^0.4.3",
+    "@medicine-wheel/data-store": "^0.4.3",
+    "@medicine-wheel/data-store-postgres": "^0.4.3",
+    "@medicine-wheel/fire-keeper": "^0.4.3",
+    "@medicine-wheel/graph-viz": "^0.4.3",
+    "@medicine-wheel/importance-unit": "^0.4.3",
+    "@medicine-wheel/mcp": "^4.4.2",
+    "@medicine-wheel/narrative-engine": "^0.4.3",
+    "@medicine-wheel/ontology-core": "^0.4.3",
+    "@medicine-wheel/prompt-decomposition": "^0.4.3",
+    "@medicine-wheel/relational-index": "^0.4.3",
+    "@medicine-wheel/relational-query": "^0.4.3",
+    "@medicine-wheel/session-reader": "^0.4.3",
+    "@medicine-wheel/storage-provider": "^0.4.3",
+    "@medicine-wheel/transformation-tracker": "^0.4.3",
+    "@medicine-wheel/ui-components": "^0.4.3",
     "@neondatabase/serverless": "^0.10.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",