@medicine-wheel/app 0.2.3

package/app/narrative/beats/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import { type NarrativeBeat, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
+import { toast } from "sonner";
+
+export default function BeatsPage() {
+  const [beats, setBeats] = useState<NarrativeBeat[]>([]);
+  const [viewMode, setViewMode] = useState<"timeline" | "direction">("timeline");
+  const [filterDir, setFilterDir] = useState<string>("all");
+  const [expandedBeat, setExpandedBeat] = useState<string | null>(null);
+  const [showForm, setShowForm] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/narrative/beats").then((r) => r.json()).then((d) => setBeats(Array.isArray(d) ? d : [])).catch(() => setBeats([]));
+  }, []);
+
+  const directions: DirectionName[] = ["east", "south", "west", "north"];
+  const filteredBeats = filterDir === "all" ? beats : beats.filter((b) => b.direction === filterDir);
+
+  async function addBeat(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const body = {
+      direction: form.get("direction") as string,
+      title: form.get("title") as string,
+      description: form.get("description") as string,
+      prose: form.get("prose") as string || undefined,
+      act: parseInt(form.get("act") as string) || 1,
+      learnings: (form.get("learnings") as string).split(",").map((s) => s.trim()).filter(Boolean),
+      ceremonies: [],
+      relations_honored: [],
+    };
+    const res = await fetch("/api/narrative/beats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+    if (res.ok) {
+      toast.success("Beat created");
+      setShowForm(false);
+      const data = await fetch("/api/narrative/beats").then((r) => r.json());
+      setBeats(Array.isArray(data) ? data : []);
+    } else { toast.error("Failed"); }
+  }
+
+  // Direction summary
+  const dirCounts = directions.reduce((acc, d) => { acc[d] = beats.filter((b) => b.direction === d).length; return acc; }, {} as Record<DirectionName, number>);
+
+  // Cadence: which phases are covered
+  const dirToPhase: Record<DirectionName, string> = { east: "Opening", south: "Deepening", west: "Integrating", north: "Closing" };
+  const visitedDirs = new Set(beats.map((b) => b.direction));
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">Narrative Beats</h1>
+          <p className="text-sm text-muted-foreground">{beats.length} beats across the Four Directions</p>
+        </div>
+        <div className="flex gap-2">
+          <button onClick={() => setViewMode(viewMode === "timeline" ? "direction" : "timeline")}
+            className="px-3 py-1.5 rounded-md border text-sm">{viewMode === "timeline" ? "By Direction" : "Timeline"}</button>
+          <button onClick={() => setShowForm(!showForm)} className="px-4 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium">+ Add Beat</button>
+        </div>
+      </div>
+
+      {/* Direction Summary + Cadence */}
+      <div className="grid grid-cols-4 gap-3 mb-6">
+        {directions.map((dir) => (
+          <button key={dir} onClick={() => setFilterDir(filterDir === dir ? "all" : dir)}
+            className={`p-3 rounded-lg border text-center transition-all ${filterDir === dir ? "ring-2 ring-primary" : ""}`}
+            style={{ borderColor: DIRECTION_COLORS[dir] + "40" }}>
+            <span className="w-3 h-3 rounded-full inline-block mb-1" style={{ backgroundColor: DIRECTION_COLORS[dir] }} />
+            <p className="text-sm capitalize font-medium">{dir}</p>
+            <p className="text-lg font-bold">{dirCounts[dir]}</p>
+            <p className="text-xs text-muted-foreground">{dirToPhase[dir]} {visitedDirs.has(dir) ? "✓" : ""}</p>
+          </button>
+        ))}
+      </div>
+
+      {showForm && (
+        <form onSubmit={addBeat} className="mb-6 p-4 border rounded-lg bg-card grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <input name="title" placeholder="Beat title" required className="px-3 py-2 rounded-md border bg-background text-sm" />
+          <select name="direction" required className="px-3 py-2 rounded-md border bg-background text-sm">
+            {directions.map((d) => <option key={d} value={d}>{d}</option>)}
+          </select>
+          <textarea name="description" placeholder="Description" rows={2} required className="px-3 py-2 rounded-md border bg-background text-sm sm:col-span-2" />
+          <textarea name="prose" placeholder="Prose (optional)" rows={2} className="px-3 py-2 rounded-md border bg-background text-sm" />
+          <select name="act" className="px-3 py-2 rounded-md border bg-background text-sm">
+            <option value="1">Act 1 (East)</option><option value="2">Act 2 (South)</option><option value="3">Act 3 (West)</option><option value="4">Act 4 (North)</option>
+          </select>
+          <input name="learnings" placeholder="Learnings (comma-separated)" className="px-3 py-2 rounded-md border bg-background text-sm sm:col-span-2" />
+          <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm">Create Beat</button>
+        </form>
+      )}
+
+      {viewMode === "timeline" ? (
+        <div className="relative pl-8">
+          <div className="absolute left-3 top-0 bottom-0 w-0.5 bg-border" />
+          {filteredBeats.length === 0 && <div className="text-center py-8 text-muted-foreground">No beats yet.</div>}
+          {filteredBeats.map((beat) => (
+            <div key={beat.id} className="relative mb-4" onClick={() => setExpandedBeat(expandedBeat === beat.id ? null : beat.id)}>
+              <div className="absolute -left-5 top-4 w-3 h-3 rounded-full border-2 border-background" style={{ backgroundColor: DIRECTION_COLORS[beat.direction as DirectionName] }} />
+              <div className="border rounded-lg bg-card p-4 cursor-pointer hover:border-ring/50"
+                style={{ borderLeftColor: DIRECTION_COLORS[beat.direction as DirectionName], borderLeftWidth: 3 }}>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-medium">{beat.title}</h3>
+                    <p className="text-sm text-muted-foreground">{beat.description}</p>
+                  </div>
+                  <div className="text-xs text-muted-foreground text-right">
+                    <div className="capitalize">{beat.direction} · Act {beat.act}</div>
+                    <div>{new Date(beat.timestamp).toLocaleDateString()}</div>
+                  </div>
+                </div>
+                {expandedBeat === beat.id && (
+                  <div className="mt-3 pt-3 border-t space-y-2">
+                    {beat.prose && <p className="text-sm italic">{beat.prose}</p>}
+                    {beat.learnings.length > 0 && <div><span className="text-xs font-medium text-muted-foreground">Learnings:</span><ul className="text-sm mt-1">{beat.learnings.map((l, i) => <li key={i}>• {l}</li>)}</ul></div>}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          {directions.map((dir) => (
+            <div key={dir} className="space-y-2">
+              <h3 className="font-semibold capitalize text-center py-2 rounded-md" style={{ backgroundColor: DIRECTION_COLORS[dir] + "20", color: DIRECTION_COLORS[dir] }}>
+                {dir} ({dirCounts[dir]})
+              </h3>
+              {beats.filter((b) => b.direction === dir).map((beat) => (
+                <div key={beat.id} className="border rounded-md bg-card p-3 text-sm cursor-pointer hover:border-ring/50"
+                  onClick={() => setExpandedBeat(expandedBeat === beat.id ? null : beat.id)}>
+                  <p className="font-medium">{beat.title}</p>
+                  <p className="text-xs text-muted-foreground">Act {beat.act} · {new Date(beat.timestamp).toLocaleDateString()}</p>
+                  {expandedBeat === beat.id && beat.prose && <p className="mt-2 text-xs italic border-t pt-2">{beat.prose}</p>}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/narrative/cycles/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import { type MedicineWheelCycle, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
+import { toast } from "sonner";
+
+export default function CyclesPage() {
+  const [cycles, setCycles] = useState<MedicineWheelCycle[]>([]);
+  const [showForm, setShowForm] = useState(false);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/narrative/cycles").then((r) => r.json()).then((d) => setCycles(Array.isArray(d) ? d : [])).catch(() => setCycles([]));
+  }, []);
+
+  async function createCycle(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const body = { research_question: form.get("question") as string };
+    const res = await fetch("/api/narrative/cycles", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+    if (res.ok) {
+      toast.success("Cycle created");
+      setShowForm(false);
+      const data = await fetch("/api/narrative/cycles").then((r) => r.json());
+      setCycles(Array.isArray(data) ? data : []);
+    } else { toast.error("Failed"); }
+  }
+
+  const dirOrder: DirectionName[] = ["east", "south", "west", "north"];
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">Medicine Wheel Cycles</h1>
+          <p className="text-sm text-muted-foreground">{cycles.length} research cycles</p>
+        </div>
+        <button onClick={() => setShowForm(!showForm)} className="px-4 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium">+ New Cycle</button>
+      </div>
+
+      {showForm && (
+        <form onSubmit={createCycle} className="mb-6 p-4 border rounded-lg bg-card">
+          <textarea name="question" placeholder="What is your research question?" rows={3} required className="w-full px-3 py-2 rounded-md border bg-background text-sm mb-3" />
+          <div className="flex gap-2">
+            <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm">Create Cycle</button>
+            <button type="button" onClick={() => setShowForm(false)} className="px-4 py-2 rounded-md border text-sm">Cancel</button>
+          </div>
+        </form>
+      )}
+
+      <div className="space-y-4">
+        {cycles.length === 0 && <div className="text-center py-12 text-muted-foreground">No cycles yet. Create one to begin your research journey.</div>}
+        {cycles.map((cycle) => {
+          const dirIdx = dirOrder.indexOf(cycle.current_direction as DirectionName);
+          const progress = ((dirIdx + 1) / 4) * 100;
+
+          return (
+            <div key={cycle.id} className="border rounded-xl bg-card overflow-hidden cursor-pointer hover:border-ring/50"
+              onClick={() => setExpandedId(expandedId === cycle.id ? null : cycle.id)}>
+              <div className="p-6">
+                <div className="flex items-start gap-4">
+                  {/* Mini wheel */}
+                  <svg viewBox="0 0 48 48" className="w-12 h-12 flex-shrink-0">
+                    {dirOrder.map((dir, i) => {
+                      const startAngle = i * 90 - 45;
+                      const endAngle = startAngle + 90;
+                      const toRad = (a: number) => (a * Math.PI) / 180;
+                      const x1 = 24 + 20 * Math.cos(toRad(startAngle));
+                      const y1 = 24 + 20 * Math.sin(toRad(startAngle));
+                      const x2 = 24 + 20 * Math.cos(toRad(endAngle));
+                      const y2 = 24 + 20 * Math.sin(toRad(endAngle));
+                      const completed = dirOrder.indexOf(dir) <= dirIdx;
+                      return (
+                        <path key={dir}
+                          d={`M 24 24 L ${x1} ${y1} A 20 20 0 0 1 ${x2} ${y2} Z`}
+                          fill={DIRECTION_COLORS[dir]}
+                          opacity={completed ? 0.9 : 0.2}
+                        />
+                      );
+                    })}
+                    <circle cx="24" cy="24" r="4" fill="var(--color-background)" />
+                  </svg>
+
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-semibold mb-1">{cycle.research_question}</h3>
+                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                      <span className="capitalize" style={{ color: DIRECTION_COLORS[cycle.current_direction as DirectionName] }}>
+                        ● {cycle.current_direction}
+                      </span>
+                      <span>{cycle.beats.length} beats</span>
+                      <span>{cycle.ceremonies_conducted} ceremonies</span>
+                      <span>Started {new Date(cycle.start_date).toLocaleDateString()}</span>
+                    </div>
+
+                    {/* Progress bar */}
+                    <div className="mt-3 h-2 bg-secondary rounded-full overflow-hidden">
+                      <div className="h-full rounded-full transition-all" style={{
+                        width: `${progress}%`,
+                        background: `linear-gradient(to right, ${DIRECTION_COLORS.east}, ${DIRECTION_COLORS.south}, ${DIRECTION_COLORS.west}, ${DIRECTION_COLORS.north})`,
+                      }} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {expandedId === cycle.id && (
+                <div className="px-6 pb-6 border-t pt-4">
+                  <div className="grid grid-cols-4 gap-3 mb-4">
+                    {dirOrder.map((dir) => {
+                      const active = dirOrder.indexOf(dir) <= dirIdx;
+                      return (
+                        <div key={dir} className="text-center p-2 rounded-md border" style={{ borderColor: active ? DIRECTION_COLORS[dir] : "var(--color-border)", opacity: active ? 1 : 0.4 }}>
+                          <p className="text-xs capitalize font-medium">{dir}</p>
+                          <p className="text-sm">{active ? "✓" : "○"}</p>
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <div className="grid grid-cols-3 gap-4 text-center text-sm">
+                    <div>
+                      <p className="text-muted-foreground">Wilson Alignment</p>
+                      <p className="font-bold">{Math.round(cycle.wilson_alignment * 100)}%</p>
+                    </div>
+                    <div>
+                      <p className="text-muted-foreground">OCAP</p>
+                      <p className="font-bold">{cycle.ocap_compliant ? "✅ Compliant" : "⚠️ Pending"}</p>
+                    </div>
+                    <div>
+                      <p className="text-muted-foreground">Relations Mapped</p>
+                      <p className="font-bold">{cycle.relations_mapped}</p>
+                    </div>
+                  </div>
+                  <p className="mt-3 text-xs text-muted-foreground">Cycle ID: {cycle.id}</p>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/app/narrative/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { type NarrativeBeat, type MedicineWheelCycle, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
+
+export default function NarrativePage() {
+  const [beats, setBeats] = useState<NarrativeBeat[]>([]);
+  const [cycles, setCycles] = useState<MedicineWheelCycle[]>([]);
+  const [expandedBeat, setExpandedBeat] = useState<string | null>(null);
+
+  useEffect(() => {
+    Promise.all([fetch("/api/narrative/beats").then((r) => r.json()), fetch("/api/narrative/cycles").then((r) => r.json())])
+      .then(([b, c]) => { setBeats(Array.isArray(b) ? b : []); setCycles(Array.isArray(c) ? c : []); })
+      .catch(() => {});
+  }, []);
+
+  const activeCycle = cycles[0];
+  const dirOrder: DirectionName[] = ["east", "south", "west", "north"];
+  const dirIdx = activeCycle ? dirOrder.indexOf(activeCycle.current_direction as DirectionName) : 0;
+  const progress = ((dirIdx + 1) / 4) * 100;
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      <h1 className="text-2xl font-bold mb-2">Narrative Arc</h1>
+      <p className="text-sm text-muted-foreground mb-6">Journey through the Four Directions</p>
+
+      {activeCycle && (
+        <div className="mb-8 p-6 rounded-xl border bg-card">
+          <div className="flex items-start justify-between mb-4">
+            <div>
+              <h2 className="text-lg font-semibold">Active Cycle</h2>
+              <p className="text-sm text-muted-foreground italic">&ldquo;{activeCycle.research_question}&rdquo;</p>
+            </div>
+            <span className="text-xs text-muted-foreground">Started {new Date(activeCycle.start_date).toLocaleDateString()}</span>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
+            <div>
+              <p className="text-sm text-muted-foreground">Current Direction</p>
+              <p className="text-lg font-bold capitalize" style={{ color: DIRECTION_COLORS[activeCycle.current_direction as DirectionName] }}>
+                {activeCycle.current_direction}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">Ceremonies</p>
+              <p className="text-lg font-bold">{activeCycle.ceremonies_conducted}</p>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">Wilson Alignment</p>
+              <p className="text-lg font-bold">{Math.round(activeCycle.wilson_alignment * 100)}%</p>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">OCAP</p>
+              <p className="text-lg font-bold">{activeCycle.ocap_compliant ? "✅ Compliant" : "⚠️ Pending"}</p>
+            </div>
+          </div>
+          <div className="mt-4">
+            <div className="h-2 bg-secondary rounded-full overflow-hidden">
+              <div className="h-full rounded-full transition-all" style={{ width: `${progress}%`, background: `linear-gradient(to right, ${DIRECTION_COLORS.east}, ${DIRECTION_COLORS.south}, ${DIRECTION_COLORS.west}, ${DIRECTION_COLORS.north})` }} />
+            </div>
+            <div className="flex justify-between mt-1 text-xs text-muted-foreground">
+              {dirOrder.map((d) => <span key={d} className="capitalize">{d}</span>)}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Direction Summary */}
+      <div className="grid grid-cols-4 gap-3 mb-6">
+        {dirOrder.map((dir) => {
+          const count = beats.filter((b) => b.direction === dir).length;
+          return (
+            <div key={dir} className="p-3 rounded-lg border text-center" style={{ borderColor: DIRECTION_COLORS[dir] + "40" }}>
+              <span className="w-3 h-3 rounded-full inline-block mb-1" style={{ backgroundColor: DIRECTION_COLORS[dir] }} />
+              <p className="text-sm capitalize font-medium">{dir}</p>
+              <p className="text-lg font-bold">{count}</p>
+              <p className="text-xs text-muted-foreground">beats</p>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Beat List */}
+      <h2 className="text-lg font-semibold mb-3">Narrative Beats ({beats.length})</h2>
+      <div className="space-y-3">
+        {beats.length === 0 && <div className="text-center py-8 text-muted-foreground">No beats recorded yet.</div>}
+        {beats.map((beat) => (
+          <div key={beat.id} className="border rounded-lg bg-card overflow-hidden cursor-pointer hover:border-ring/50"
+            style={{ borderLeftColor: DIRECTION_COLORS[beat.direction as DirectionName], borderLeftWidth: 4 }}
+            onClick={() => setExpandedBeat(expandedBeat === beat.id ? null : beat.id)}>
+            <div className="p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="font-medium">{beat.title}</h3>
+                  <p className="text-sm text-muted-foreground">{beat.description}</p>
+                </div>
+                <div className="text-right text-xs text-muted-foreground">
+                  <div className="capitalize">{beat.direction} · Act {beat.act}</div>
+                  <div>{new Date(beat.timestamp).toLocaleDateString()}</div>
+                </div>
+              </div>
+            </div>
+            {expandedBeat === beat.id && (
+              <div className="px-4 pb-4 border-t pt-3 space-y-2">
+                {beat.prose && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Prose</div><p className="text-sm italic">{beat.prose}</p></div>}
+                {beat.learnings.length > 0 && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Learnings</div><ul className="text-sm space-y-1">{beat.learnings.map((l, i) => <li key={i}>• {l}</li>)}</ul></div>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/nodes/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import type { FormEvent } from "react";
+import {
+  type RelationalNode,
+  type RelationalEdge,
+  type NodeType,
+  type DirectionName,
+  NODE_TYPE_COLORS,
+  DIRECTION_COLORS,
+} from "@/lib/types";
+import { toast } from "sonner";
+
+const NODE_TYPES: NodeType[] = ["human", "land", "spirit", "ancestor", "future", "knowledge"];
+const DIRECTIONS: DirectionName[] = ["east", "south", "west", "north"];
+const NODE_TYPE_ICONS: Record<NodeType, string> = { human: "👤", land: "🌍", spirit: "✨", ancestor: "🪶", future: "🌱", knowledge: "📚" };
+const DIRECTION_ICONS: Record<DirectionName, string> = { east: "🌅", south: "🌞", west: "🌄", north: "❄️" };
+
+export default function NodesPage() {
+  const [nodes, setNodes] = useState<RelationalNode[]>([]);
+  const [edges, setEdges] = useState<RelationalEdge[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filterType, setFilterType] = useState<string>("all");
+  const [filterDirection, setFilterDirection] = useState<string>("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedNode, setExpandedNode] = useState<string | null>(null);
+  const [showAddNode, setShowAddNode] = useState(false);
+
+  const loadNodes = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      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"),
+      ]);
+      const nodesData: RelationalNode[] = await nodesRes.json();
+      const edgesData: RelationalEdge[] = edgesRes.ok ? await edgesRes.json() : [];
+      setNodes(nodesData);
+      setEdges(Array.isArray(edgesData) ? edgesData : []);
+    } catch {
+      toast.error("Failed to load nodes");
+    } finally {
+      setLoading(false);
+    }
+  }, [filterType, filterDirection]);
+
+  useEffect(() => { loadNodes(); }, [loadNodes]);
+
+  const filteredNodes = nodes.filter((node) => {
+    if (!searchQuery) return true;
+    const q = searchQuery.toLowerCase();
+    return node.name.toLowerCase().includes(q) || node.type.toLowerCase().includes(q) || (node.direction && node.direction.toLowerCase().includes(q));
+  });
+
+  async function addNode(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const description = form.get("description") as string;
+    const body = {
+      name: form.get("name") as string,
+      type: form.get("type") as string,
+      direction: (form.get("direction") as string) || undefined,
+      metadata: description ? { description } : {},
+    };
+    try {
+      const res = await fetch("/api/nodes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+      if (!res.ok) throw new Error("Failed");
+      toast.success("Node created");
+      setShowAddNode(false);
+      loadNodes();
+    } catch { toast.error("Failed to create node"); }
+  }
+
+  const typeCounts = NODE_TYPES.reduce((acc, t) => { acc[t] = nodes.filter((n) => n.type === t).length; return acc; }, {} as Record<NodeType, number>);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">🔗 Relational Nodes</h1>
+          <p className="text-sm text-muted-foreground">{nodes.length} nodes in the relational web</p>
+        </div>
+        <button onClick={() => setShowAddNode(!showAddNode)} className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium">+ Add Node</button>
+      </div>
+
+      {showAddNode && (
+        <form onSubmit={addNode} className="mb-6 p-4 border rounded-lg bg-card space-y-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <input name="name" placeholder="Node name" required className="px-3 py-2 rounded-md border bg-background text-sm" />
+            <select name="type" required className="px-3 py-2 rounded-md border bg-background text-sm">
+              {NODE_TYPES.map((t) => <option key={t} value={t}>{NODE_TYPE_ICONS[t]} {t}</option>)}
+            </select>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <select name="direction" className="px-3 py-2 rounded-md border bg-background text-sm">
+              <option value="">No direction</option>
+              {DIRECTIONS.map((d) => <option key={d} value={d}>{DIRECTION_ICONS[d]} {d}</option>)}
+            </select>
+            <input name="description" placeholder="Description (optional)" className="px-3 py-2 rounded-md border bg-background text-sm" />
+          </div>
+          <div className="flex gap-2">
+            <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm">Create Node</button>
+            <button type="button" onClick={() => setShowAddNode(false)} className="px-4 py-2 rounded-md border text-sm">Cancel</button>
+          </div>
+        </form>
+      )}
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 mb-6">
+        {NODE_TYPES.map((t) => (
+          <button key={t} onClick={() => setFilterType(filterType === t ? "all" : t)}
+            className={`p-3 rounded-lg border text-center transition-all ${filterType === t ? "ring-2 ring-primary bg-secondary" : "hover:bg-secondary/50"}`}>
+            <div className="text-2xl mb-1">{NODE_TYPE_ICONS[t]}</div>
+            <div className="text-sm font-medium capitalize">{t}</div>
+            <div className="text-lg font-bold" style={{ color: NODE_TYPE_COLORS[t] }}>{typeCounts[t]}</div>
+          </button>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap gap-3 mb-6">
+        <input type="text" placeholder="Search nodes..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="px-3 py-2 rounded-md border bg-background text-sm flex-1 min-w-[200px]" />
+        <select value={filterDirection} onChange={(e) => setFilterDirection(e.target.value)} className="px-3 py-2 rounded-md border bg-background text-sm">
+          <option value="all">All Directions</option>
+          {DIRECTIONS.map((d) => <option key={d} value={d}>{DIRECTION_ICONS[d]} {d}</option>)}
+        </select>
+        {(filterType !== "all" || filterDirection !== "all" || searchQuery) && (
+          <button onClick={() => { setFilterType("all"); setFilterDirection("all"); setSearchQuery(""); }} className="px-3 py-2 rounded-md border text-sm text-muted-foreground hover:text-foreground">Clear filters</button>
+        )}
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12 text-muted-foreground">Loading nodes...</div>
+      ) : filteredNodes.length === 0 ? (
+        <div className="text-center py-12 text-muted-foreground">
+          <p>No nodes found</p>
+          {(filterType !== "all" || filterDirection !== "all" || searchQuery) && <p className="text-sm mt-2">Try adjusting your filters</p>}
+        </div>
+      ) : (
+        <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" : ""}`}>
+              <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"
+              >
+                <span className="w-10 h-10 rounded-full flex items-center justify-center text-xl" style={{ backgroundColor: NODE_TYPE_COLORS[node.type] + "30" }}>
+                  {NODE_TYPE_ICONS[node.type]}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium truncate">{node.name}</div>
+                  <div className="text-sm text-muted-foreground flex gap-2">
+                    <span className="capitalize">{node.type}</span>
+                    {node.direction && (
+                      <>
+                        <span>·</span>
+                        <span className="capitalize" style={{ color: DIRECTION_COLORS[node.direction] }}>{DIRECTION_ICONS[node.direction]} {node.direction}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+                <span className="text-muted-foreground">{expandedNode === node.id ? "▲" : "▼"}</span>
+              </button>
+
+              {expandedNode === node.id && (
+                <div className="border-t p-4 space-y-3">
+                  <div className="grid grid-cols-2 gap-4 text-sm">
+                    <div><span className="text-muted-foreground">Type:</span> <span className="capitalize">{node.type}</span></div>
+                    {node.direction && <div><span className="text-muted-foreground">Direction:</span> <span className="capitalize">{node.direction}</span></div>}
+                    <div><span className="text-muted-foreground">Created:</span> {new Date(node.created_at).toLocaleDateString()}</div>
+                    <div><span className="text-muted-foreground">ID:</span> <code className="text-xs">{node.id.slice(0, 8)}…</code></div>
+                  </div>
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">Connected Edges ({edges.filter((e) => e.from_id === node.id || e.to_id === node.id).length})</h4>
+                    {edges.filter((e) => e.from_id === node.id || e.to_id === node.id).map((e) => {
+                      const otherId = e.from_id === node.id ? e.to_id : e.from_id;
+                      const other = nodes.find((n) => n.id === otherId);
+                      return (
+                        <div key={e.id} className="py-1 text-sm border-b border-border/50 flex items-center gap-2">
+                          <span className="text-muted-foreground">{e.relationship_type}</span>
+                          → {other?.name || "?"}
+                          <span className="text-xs text-muted-foreground">({Math.round(e.strength * 100)}%)</span>
+                          {e.ceremony_honored && <span className="text-green-500">✓</span>}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}