@medicine-wheel/app 0.4.12 → 0.5.0

package/app/relations/page.tsx

@@ -1,200 +1,381 @@
 "use client";
 
-import { useEffect, useState, useCallback, useRef } from "react";
-import type { MouseEvent, FormEvent } from "react";
-import { type RelationalNode, type RelationalEdge, NODE_TYPE_COLORS, type NodeType } from "@/lib/types";
+import { useEffect, useMemo, useState, useCallback } from "react";
+import type { SubmitEvent } from "react";
+import Link from "next/link";
+import {
+  type RelationalNode,
+  type RelationalEdge,
+  type DirectionName,
+} from "@/lib/types";
 import { relativeTime, absoluteTime } from "@/lib/format-time";
 import { toast } from "sonner";
 
-interface GraphNode extends RelationalNode {
-  x: number;
-  y: number;
+type NodeRecord = RelationalNode & { description?: string };
+
+const DIRECTION_ICONS: Record<DirectionName, string> = { east: "🌅", south: "🌞", west: "🌄", north: "❄️" };
+
+function edgeKey(edge: Pick<RelationalEdge, "from_id" | "to_id">): string {
+  return `${edge.from_id}:${edge.to_id}`;
+}
+
+function NodeChip({ node, id }: { node?: NodeRecord; id: string }) {
+  if (!node) {
+    return <span className="mw-badge" title={id}>missing node</span>;
+  }
+  const directionClass = node.direction ? ` mw-badge--${node.direction}` : "";
+  return (
+    <Link
+      href={`/graph?node=${node.id}`}
+      className={`mw-badge${directionClass} hover:brightness-125 transition-all`}
+      title={node.direction ? `${node.name} · ${node.direction} — see on the wheel` : `${node.name} — see on the wheel`}
+    >
+      <span className="w-2 h-2 rounded-full mr-1.5" style={{ backgroundColor: `var(--mw-node-${node.type})` }} aria-hidden />
+      {node.name}
+      {node.direction && <span className="ml-1.5" aria-hidden>{DIRECTION_ICONS[node.direction]}</span>}
+    </Link>
+  );
+}
+
+function CeremonyMark({ honored }: { honored: boolean }) {
+  return honored ? (
+    <span className="inline-flex items-center gap-1 text-xs" style={{ color: "var(--mw-ceremony)" }} title="This relation has been honored in ceremony">
+      <span aria-hidden>✦</span> honored
+    </span>
+  ) : (
+    <span className="text-xs text-muted-foreground">not yet honored</span>
+  );
 }
 
 export default function RelationsPage() {
-  const [nodes, setNodes] = useState<GraphNode[]>([]);
+  const [nodes, setNodes] = useState<NodeRecord[]>([]);
   const [edges, setEdges] = useState<RelationalEdge[]>([]);
-  const [selected, setSelected] = useState<string | null>(null);
-  const [filterType, setFilterType] = useState<string>("all");
-  const [showAddNode, setShowAddNode] = useState(false);
-  const svgRef = useRef<SVGSVGElement>(null);
-  const [dragging, setDragging] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [filterType, setFilterType] = useState<string>("all");
+  const [filterCeremony, setFilterCeremony] = useState<string>("all");
+  const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
+  const [showWeave, setShowWeave] = useState(false);
+  const [editingKey, setEditingKey] = useState<string | null>(null);
+  const [deletingEdge, setDeletingEdge] = useState<RelationalEdge | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [weaveStrength, setWeaveStrength] = useState(0.5);
+  const [editStrength, setEditStrength] = useState(0.5);
 
   const loadData = useCallback(async () => {
     setLoading(true);
     try {
       const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes"), fetch("/api/edges")]);
       const nodesResponse = await nodesRes.json();
-      const edgesData: RelationalEdge[] = await edgesRes.json();
-      
-      // API returns { nodes: [...], provider: '...', count: N }
-      const nodesData: RelationalNode[] = Array.isArray(nodesResponse) ? nodesResponse : (nodesResponse.nodes || []);
-
-      const cx = 400, cy = 300, radius = 220;
-      const graphNodes = nodesData.map((n, i) => {
-        const angle = (2 * Math.PI * i) / Math.max(nodesData.length, 1);
-        return { ...n, x: cx + radius * Math.cos(angle) + (Math.random() - 0.5) * 40, y: cy + radius * Math.sin(angle) + (Math.random() - 0.5) * 40 };
-      });
-      setNodes(graphNodes);
+      const edgesData = await edgesRes.json();
+      const nodesData: NodeRecord[] = Array.isArray(nodesResponse) ? nodesResponse : (nodesResponse.nodes || []);
+      setNodes(nodesData);
       setEdges(Array.isArray(edgesData) ? edgesData : []);
-    } catch (err) { console.error("Failed to load relational data:", err); }
-    finally { setLoading(false); }
+    } catch {
+      toast.error("Relations did not load — check the connection and try again");
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
   useEffect(() => { loadData(); }, [loadData]);
 
-  const handleMouseDown = (id: string) => setDragging(id);
-  const handleMouseUp = () => setDragging(null);
-  const handleMouseMove = (e: MouseEvent<SVGSVGElement>) => {
-    if (!dragging || !svgRef.current) return;
-    const rect = svgRef.current.getBoundingClientRect();
-    const x = ((e.clientX - rect.left) / rect.width) * 800;
-    const y = ((e.clientY - rect.top) / rect.height) * 600;
-    setNodes((prev) => prev.map((n) => (n.id === dragging ? { ...n, x, y } : n)));
-  };
-
-  const filteredNodes = filterType === "all" ? nodes : nodes.filter((n) => n.type === filterType);
-  const filteredNodeIds = new Set(filteredNodes.map((n) => n.id));
-  const filteredEdges = edges.filter((e) => filteredNodeIds.has(e.from_id) && filteredNodeIds.has(e.to_id));
-  const selectedNode = nodes.find((n) => n.id === selected);
-  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-
-  const types: NodeType[] = ["human", "land", "spirit", "ancestor", "future", "knowledge"];
-
-  // Simple accountability stats
-  const totalEdges = edges.length;
-  const ceremonied = edges.filter((e) => e.ceremony_honored).length;
-  const unceremonied = totalEdges - ceremonied;
-  const avgStrength = totalEdges > 0 ? edges.reduce((s, e) => s + e.strength, 0) / totalEdges : 0;
-
-  async function addNode(e: FormEvent<HTMLFormElement>) {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    setFocusNodeId(params.get("node"));
+  }, []);
+
+  const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+  const relationTypes = useMemo(
+    () => Array.from(new Set(edges.map((e) => e.relationship_type))).sort(),
+    [edges],
+  );
+
+  const filteredEdges = edges.filter((e) => {
+    if (filterType !== "all" && e.relationship_type !== filterType) return false;
+    if (filterCeremony === "honored" && !e.ceremony_honored) return false;
+    if (filterCeremony === "unhonored" && e.ceremony_honored) return false;
+    if (focusNodeId && e.from_id !== focusNodeId && e.to_id !== focusNodeId) return false;
+    return true;
+  });
+
+  const honored = edges.filter((e) => e.ceremony_honored).length;
+  const avgStrength = edges.length > 0 ? edges.reduce((s, e) => s + e.strength, 0) / edges.length : 0;
+  const focusNode = focusNodeId ? nodeMap.get(focusNodeId) : undefined;
+
+  async function weaveRelation(e: SubmitEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const obligationsRaw = (form.get("obligations") as string) || "";
+    const body = {
+      from_id: form.get("from_id") as string,
+      to_id: form.get("to_id") as string,
+      relationship_type: form.get("relationship_type") as string,
+      strength: weaveStrength,
+      obligations: obligationsRaw.split(",").map((s) => s.trim()).filter(Boolean),
+    };
+    setBusy(true);
+    try {
+      const res = await fetch("/api/edges", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.issues?.join("; ") || data.error || "Relation was not woven");
+      toast.success(data.replaced ? "Relation rewoven — the previous thread was replaced" : "Relation woven");
+      setShowWeave(false);
+      setWeaveStrength(0.5);
+      loadData();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Relation was not woven");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function saveRelation(e: SubmitEvent<HTMLFormElement>, edge: RelationalEdge) {
     e.preventDefault();
     const form = new FormData(e.currentTarget);
-    const body = { name: form.get("name") as string, type: form.get("type") as string, direction: (form.get("direction") as string) || undefined };
-    const res = await fetch("/api/nodes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
-    if (res.ok) { toast.success("Node created"); setShowAddNode(false); loadData(); } else { toast.error("Failed"); }
+    const obligationsRaw = (form.get("obligations") as string) || "";
+    const body = {
+      relationship_type: form.get("relationship_type") as string,
+      strength: editStrength,
+      obligations: obligationsRaw.split(",").map((s) => s.trim()).filter(Boolean),
+    };
+    setBusy(true);
+    try {
+      const res = await fetch(`/api/edges?from=${encodeURIComponent(edge.from_id)}&to=${encodeURIComponent(edge.to_id)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.issues?.join("; ") || data.error || "Changes were not saved");
+      toast.success("Relation changes saved");
+      setEditingKey(null);
+      loadData();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Changes were not saved");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function releaseRelation(edge: RelationalEdge) {
+    setBusy(true);
+    try {
+      const res = await fetch(`/api/edges?from=${encodeURIComponent(edge.from_id)}&to=${encodeURIComponent(edge.to_id)}`, { method: "DELETE" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Relation was not released");
+      toast.success("Relation released — both nodes remain in the wheel");
+      setDeletingEdge(null);
+      loadData();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Relation was not released");
+    } finally {
+      setBusy(false);
+    }
   }
 
   return (
     <div className="p-6 max-w-7xl mx-auto">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
         <div>
-          <h1 className="text-2xl font-bold">Relational Web</h1>
-          <p className="text-sm text-muted-foreground">{nodes.length} nodes · {edges.length} edges</p>
-        </div>
-        <div className="flex gap-2">
-          <select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="px-3 py-1.5 rounded-md border bg-background text-sm">
-            <option value="all">All Types</option>
-            {types.map((t) => <option key={t} value={t}>{t}</option>)}
-          </select>
-          <button onClick={() => setShowAddNode(!showAddNode)} className="px-4 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium">+ Add Node</button>
+          <h1 className="text-2xl font-bold">Relations</h1>
+          <p className="text-sm text-muted-foreground">
+            {edges.length} relation{edges.length === 1 ? "" : "s"} · {honored} honored in ceremony · average strength {Math.round(avgStrength * 100)}%
+          </p>
         </div>
+        <button
+          onClick={() => setShowWeave(!showWeave)}
+          className="mw-btn mw-btn--primary"
+          disabled={nodes.length < 2 && !showWeave}
+          title={nodes.length < 2 ? "The wheel needs at least two nodes before a relation can be woven" : undefined}
+        >
+          {showWeave ? "Close form" : "Weave relation"}
+        </button>
       </div>
 
-      {showAddNode && (
-        <form onSubmit={addNode} className="mb-6 p-4 border rounded-lg bg-card grid grid-cols-1 sm:grid-cols-4 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">{types.map((t) => <option key={t} value={t}>{t}</option>)}</select>
-          <select name="direction" className="px-3 py-2 rounded-md border bg-background text-sm">
-            <option value="">No direction</option><option value="east">East</option><option value="south">South</option><option value="west">West</option><option value="north">North</option>
-          </select>
-          <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm">Create</button>
+      {showWeave && (
+        <form onSubmit={weaveRelation} className="mb-6 p-4 border rounded-lg bg-card space-y-3">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+            <label className="text-sm space-y-1">
+              <span className="text-muted-foreground">From</span>
+              <select name="from_id" required className="mw-input" defaultValue={focusNodeId ?? ""}>
+                <option value="" disabled>Choose a node</option>
+                {nodes.map((n) => <option key={n.id} value={n.id}>{n.name}</option>)}
+              </select>
+            </label>
+            <label className="text-sm space-y-1">
+              <span className="text-muted-foreground">Relation</span>
+              <input name="relationship_type" required list="relation-types" placeholder="mentorship, stewardship…" className="mw-input" />
+              <datalist id="relation-types">
+                {relationTypes.map((t) => <option key={t} value={t} />)}
+              </datalist>
+            </label>
+            <label className="text-sm space-y-1">
+              <span className="text-muted-foreground">To</span>
+              <select name="to_id" required className="mw-input" defaultValue="">
+                <option value="" disabled>Choose a node</option>
+                {nodes.map((n) => <option key={n.id} value={n.id}>{n.name}</option>)}
+              </select>
+            </label>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <label className="text-sm space-y-1">
+              <span className="text-muted-foreground">Strength · {Math.round(weaveStrength * 100)}%</span>
+              <input type="range" min="0" max="1" step="0.05" value={weaveStrength} onChange={(e) => setWeaveStrength(Number(e.target.value))} className="w-full" />
+            </label>
+            <label className="text-sm space-y-1">
+              <span className="text-muted-foreground">Obligations (comma-separated, optional)</span>
+              <input name="obligations" placeholder="teaching, land care…" className="mw-input" />
+            </label>
+          </div>
+          <div className="flex gap-2">
+            <button type="submit" disabled={busy} className="mw-btn mw-btn--primary">Weave relation</button>
+            <button type="button" onClick={() => setShowWeave(false)} className="mw-btn mw-btn--ghost">Cancel</button>
+          </div>
         </form>
       )}
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2 border rounded-lg bg-card overflow-hidden relative">
-          {(loading || nodes.length === 0) && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center text-center text-muted-foreground pointer-events-none">
-              {loading ? "Loading relational web…" : "No nodes yet — add one to begin mapping relations."}
-            </div>
-          )}
-          <svg ref={svgRef} viewBox="0 0 800 600" className="w-full h-[600px] cursor-crosshair"
-            onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp}>
-            {filteredEdges.map((edge) => {
-              const from = nodeMap.get(edge.from_id);
-              const to = nodeMap.get(edge.to_id);
-              if (!from || !to) return null;
-              return (
-                <line key={edge.id} x1={from.x} y1={from.y} x2={to.x} y2={to.y}
-                  stroke={edge.ceremony_honored ? "var(--color-primary)" : "var(--color-muted-foreground)"}
-                  strokeWidth={1 + edge.strength * 3} strokeDasharray={edge.ceremony_honored ? "none" : "6,4"} opacity={0.6} />
-              );
-            })}
-            {filteredNodes.map((node) => (
-              <g key={node.id} className="cursor-grab" onMouseDown={() => handleMouseDown(node.id)} onClick={() => setSelected(node.id)}>
-                <circle cx={node.x} cy={node.y} r={selected === node.id ? 20 : 16}
-                  fill={NODE_TYPE_COLORS[node.type]} stroke={selected === node.id ? "var(--color-ring)" : "var(--color-border)"}
-                  strokeWidth={selected === node.id ? 3 : 1} opacity={0.9} />
-                <text x={node.x} y={node.y + 28} textAnchor="middle" className="fill-foreground text-[10px] pointer-events-none">
-                  {node.name.length > 15 ? node.name.slice(0, 14) + "…" : node.name}
-                </text>
-              </g>
-            ))}
-          </svg>
-        </div>
+      <div className="flex flex-wrap gap-3 mb-6 items-center">
+        <select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="mw-input" style={{ width: "auto" }} aria-label="Filter by relation type">
+          <option value="all">All relation types</option>
+          {relationTypes.map((t) => <option key={t} value={t}>{t}</option>)}
+        </select>
+        <select value={filterCeremony} onChange={(e) => setFilterCeremony(e.target.value)} className="mw-input" style={{ width: "auto" }} aria-label="Filter by ceremony status">
+          <option value="all">All ceremony states</option>
+          <option value="honored">Honored in ceremony</option>
+          <option value="unhonored">Not yet honored</option>
+        </select>
+        {focusNode && (
+          <span className="mw-badge">
+            relations of {focusNode.name}
+            <button onClick={() => setFocusNodeId(null)} className="ml-2 hover:text-foreground" aria-label={`Stop filtering by ${focusNode.name}`}>✕</button>
+          </span>
+        )}
+        {(filterType !== "all" || filterCeremony !== "all") && (
+          <button onClick={() => { setFilterType("all"); setFilterCeremony("all"); }} className="mw-btn mw-btn--ghost">Clear filters</button>
+        )}
+      </div>
 
-        <div className="border rounded-lg bg-card p-4">
-          {selectedNode ? (
-            <div>
-              <h3 className="text-lg font-semibold flex items-center gap-2">
-                <span className="w-3 h-3 rounded-full" style={{ backgroundColor: NODE_TYPE_COLORS[selectedNode.type] }} />
-                {selectedNode.name}
-              </h3>
-              <div className="mt-3 space-y-2 text-sm">
-                <div><span className="text-muted-foreground">Type:</span> {selectedNode.type}</div>
-                {selectedNode.direction && <div><span className="text-muted-foreground">Direction:</span> {selectedNode.direction}</div>}
-                <div><span className="text-muted-foreground">Created:</span> <span title={absoluteTime(selectedNode.created_at)}>{relativeTime(selectedNode.created_at)}</span></div>
-              </div>
-              <div className="mt-4">
-                <h4 className="text-sm font-medium mb-2">Connected Edges</h4>
-                {edges.filter((e) => e.from_id === selectedNode.id || e.to_id === selectedNode.id).map((e) => {
-                  const other = e.from_id === selectedNode.id ? nodeMap.get(e.to_id) : nodeMap.get(e.from_id);
-                  return (
-                    <div key={e.id} className="py-1 text-sm border-b border-border/50">
-                      <span className="text-muted-foreground">{e.relationship_type}</span> → {other?.name || "?"}
-                      <span className="ml-2 text-xs text-muted-foreground">({Math.round(e.strength * 100)}%)</span>
-                      {e.ceremony_honored && <span className="ml-1 text-green-500">✓</span>}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
+      {loading ? (
+        <div className="text-center py-12 text-muted-foreground">Loading relations…</div>
+      ) : filteredEdges.length === 0 ? (
+        <div className="text-center py-12 text-muted-foreground border rounded-lg bg-card">
+          {edges.length === 0 ? (
+            nodes.length < 2 ? (
+              <>
+                <p>Relations need two nodes to hold between.</p>
+                <Link href="/nodes" className="mw-btn mw-btn--primary mt-4 inline-flex">Create nodes first</Link>
+              </>
+            ) : (
+              <>
+                <p>No relations yet.</p>
+                <button onClick={() => setShowWeave(true)} className="mw-btn mw-btn--primary mt-4">Weave the first thread</button>
+              </>
+            )
           ) : (
-            <div className="text-center text-muted-foreground py-8">
-              <p className="text-sm">Click a node to view details</p>
-              <div className="mt-4 text-left">
-                <h4 className="text-sm font-medium mb-2">Legend</h4>
-                {types.map((t) => (
-                  <div key={t} className="flex items-center gap-2 text-sm py-0.5">
-                    <span className="w-3 h-3 rounded-full" style={{ backgroundColor: NODE_TYPE_COLORS[t] }} /> <span className="capitalize">{t}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <p>No relations match these filters — clear them to see the full weave.</p>
           )}
         </div>
-      </div>
+      ) : (
+        <div className="border rounded-lg bg-card overflow-x-auto">
+          <table className="w-full text-sm min-w-[640px]">
+            <thead>
+              <tr className="border-b text-left text-muted-foreground">
+                <th className="px-4 py-3 font-medium">From</th>
+                <th className="px-4 py-3 font-medium">Relation</th>
+                <th className="px-4 py-3 font-medium">To</th>
+                <th className="px-4 py-3 font-medium">Ceremony</th>
+                <th className="px-4 py-3 font-medium">Woven</th>
+                <th className="px-4 py-3 font-medium text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredEdges.map((edge) => {
+                const key = edgeKey(edge);
+                const isEditing = editingKey === key;
+                return (
+                  <tr key={key} className="border-b border-border/50 hover:bg-secondary/30 align-top">
+                    {isEditing ? (
+                      <td colSpan={6} className="px-4 py-3">
+                        <form onSubmit={(e) => saveRelation(e, edge)} className="space-y-3">
+                          <div className="flex items-center gap-2 flex-wrap text-sm">
+                            <NodeChip node={nodeMap.get(edge.from_id)} id={edge.from_id} />
+                            <span className="text-muted-foreground" aria-hidden>→</span>
+                            <NodeChip node={nodeMap.get(edge.to_id)} id={edge.to_id} />
+                          </div>
+                          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                            <label className="text-sm space-y-1">
+                              <span className="text-muted-foreground">Relation</span>
+                              <input name="relationship_type" defaultValue={edge.relationship_type} required list="relation-types" className="mw-input" />
+                            </label>
+                            <label className="text-sm space-y-1">
+                              <span className="text-muted-foreground">Strength · {Math.round(editStrength * 100)}%</span>
+                              <input type="range" min="0" max="1" step="0.05" value={editStrength} onChange={(e) => setEditStrength(Number(e.target.value))} className="w-full" />
+                            </label>
+                            <label className="text-sm space-y-1">
+                              <span className="text-muted-foreground">Obligations (comma-separated)</span>
+                              <input name="obligations" defaultValue={(edge.obligations ?? []).join(", ")} className="mw-input" />
+                            </label>
+                          </div>
+                          <div className="flex gap-2">
+                            <button type="submit" disabled={busy} className="mw-btn mw-btn--primary">Save changes</button>
+                            <button type="button" onClick={() => setEditingKey(null)} className="mw-btn mw-btn--ghost">Cancel</button>
+                          </div>
+                        </form>
+                      </td>
+                    ) : (
+                      <>
+                        <td className="px-4 py-3"><NodeChip node={nodeMap.get(edge.from_id)} id={edge.from_id} /></td>
+                        <td className="px-4 py-3">
+                          <div className="font-medium">{edge.relationship_type}</div>
+                          <div className="flex items-center gap-2 mt-1">
+                            <div className="mw-progress-track w-16"><div className="mw-progress-fill" style={{ width: `${edge.strength * 100}%` }} /></div>
+                            <span className="text-xs text-muted-foreground">{Math.round(edge.strength * 100)}%</span>
+                          </div>
+                          {(edge.obligations?.length ?? 0) > 0 && (
+                            <div className="text-xs text-muted-foreground mt-1">carries: {edge.obligations.join(", ")}</div>
+                          )}
+                        </td>
+                        <td className="px-4 py-3"><NodeChip node={nodeMap.get(edge.to_id)} id={edge.to_id} /></td>
+                        <td className="px-4 py-3"><CeremonyMark honored={edge.ceremony_honored} /></td>
+                        <td className="px-4 py-3 text-muted-foreground whitespace-nowrap" title={absoluteTime(edge.created_at)}>{relativeTime(edge.created_at)}</td>
+                        <td className="px-4 py-3 text-right whitespace-nowrap">
+                          <button
+                            onClick={() => { setEditingKey(key); setEditStrength(edge.strength); }}
+                            className="mw-btn mw-btn--secondary mr-2"
+                          >
+                            Edit
+                          </button>
+                          <button onClick={() => setDeletingEdge(edge)} className="mw-btn mw-btn--danger">Release</button>
+                        </td>
+                      </>
+                    )}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
 
-      {/* Relational Health */}
-      {nodes.length > 0 && (
-        <div className="mt-6 border rounded-lg bg-card p-4">
-          <h3 className="text-sm font-semibold text-muted-foreground uppercase mb-4">Relational Health</h3>
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
-            <div>
-              <svg viewBox="0 0 48 48" className="w-12 h-12 mx-auto">
-                <circle cx="24" cy="24" r="20" fill="none" stroke="var(--color-muted)" strokeWidth="4" />
-                <circle cx="24" cy="24" r="20" fill="none" stroke="var(--color-primary)" strokeWidth="4"
-                  strokeDasharray={`${avgStrength * 125.6} 125.6`} strokeLinecap="round" transform="rotate(-90 24 24)" />
-                <text x="24" y="28" textAnchor="middle" className="text-[10px] fill-foreground font-bold">{Math.round(avgStrength * 100)}%</text>
-              </svg>
-              <p className="text-xs text-muted-foreground mt-1">Average strength</p>
+      {deletingEdge && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" role="dialog" aria-modal="true" aria-labelledby="release-relation-title">
+          <div className="w-full max-w-md rounded-lg border bg-card p-6 space-y-4">
+            <h2 id="release-relation-title" className="text-lg font-semibold">Release this relation?</h2>
+            <p className="text-sm">
+              The thread “{deletingEdge.relationship_type}” from{" "}
+              <strong>{nodeMap.get(deletingEdge.from_id)?.name ?? deletingEdge.from_id}</strong> to{" "}
+              <strong>{nodeMap.get(deletingEdge.to_id)?.name ?? deletingEdge.to_id}</strong> will be severed.
+              Both nodes remain in the wheel. This cannot be undone.
+            </p>
+            {deletingEdge.ceremony_honored && (
+              <p className="text-sm" style={{ color: "var(--mw-ceremony)" }}>
+                ✦ This relation was honored in ceremony — release it with intention.
+              </p>
+            )}
+            <div className="flex gap-2 justify-end">
+              <button onClick={() => setDeletingEdge(null)} className="mw-btn mw-btn--ghost">Keep the relation</button>
+              <button onClick={() => releaseRelation(deletingEdge)} disabled={busy} className="mw-btn mw-btn--danger border border-current">Release relation</button>
             </div>
-            <div><p className="text-2xl font-bold">{ceremonied}</p><p className="text-xs text-muted-foreground">Ceremonied</p></div>
-            <div><p className="text-2xl font-bold">{unceremonied}</p><p className="text-xs text-muted-foreground">Unceremonied</p></div>
-            <div><p className="text-2xl font-bold text-green-500">{ceremonied}</p><p className="text-xs text-muted-foreground">Ceremonies honored</p></div>
-            <div><p className="text-2xl font-bold">{unceremonied}</p><p className="text-xs text-muted-foreground">Obligations</p></div>
           </div>
         </div>
       )}

package/components/direction-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type Direction, DIRECTION_COLORS, CEREMONY_ICONS } from "@/lib/types";
+import { type Direction } from "@/lib/types";
 import { X } from "lucide-react";
 import Link from "next/link";
 
@@ -10,14 +10,20 @@ interface DirectionPanelProps {
 }
 
 export function DirectionPanel({ direction, onClose }: DirectionPanelProps) {
+  const dirVar = `var(--mw-${direction.name})`;
+  const inkVar = `var(--mw-${direction.name}-ink)`;
+
   return (
-    <div className="w-full max-w-2xl rounded-xl border bg-card p-6 shadow-lg animate-in slide-in-from-bottom-4">
+    <div
+      className="w-full max-w-2xl rounded-xl border bg-card p-6 shadow-lg animate-in slide-in-from-bottom-4"
+      style={{ borderColor: `var(--mw-${direction.name}-border)` }}
+    >
       <div className="flex items-start justify-between mb-4">
         <div>
           <h2 className="text-2xl font-bold flex items-center gap-3">
             <span
               className="w-4 h-4 rounded-full inline-block"
-              style={{ backgroundColor: DIRECTION_COLORS[direction.name] }}
+              style={{ backgroundColor: dirVar }}
             />
             {direction.ojibwe}
             <span className="text-muted-foreground text-lg capitalize">({direction.name})</span>
@@ -41,7 +47,7 @@ export function DirectionPanel({ direction, onClose }: DirectionPanelProps) {
               <span
                 key={m}
                 className="px-3 py-1 rounded-full text-sm border"
-                style={{ borderColor: DIRECTION_COLORS[direction.name] }}
+                style={{ borderColor: dirVar, color: inkVar }}
               >
                 🌿 {m}
               </span>
@@ -56,7 +62,7 @@ export function DirectionPanel({ direction, onClose }: DirectionPanelProps) {
           <ul className="space-y-1">
             {direction.teachings.map((t) => (
               <li key={t} className="text-sm flex items-center gap-2">
-                <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: DIRECTION_COLORS[direction.name] }} />
+                <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: dirVar }} />
                 {t}
               </li>
             ))}
@@ -77,18 +83,24 @@ export function DirectionPanel({ direction, onClose }: DirectionPanelProps) {
         </div>
       </div>
 
-      <div className="flex gap-3 mt-6 pt-4 border-t">
+      <div className="flex flex-wrap gap-3 mt-6 pt-4 border-t">
         <Link
-          href={`/ceremonies?direction=${direction.name}`}
+          href={`/graph?direction=${direction.name}`}
           className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90"
         >
-          View Ceremonies
+          Open in graph
+        </Link>
+        <Link
+          href={`/ceremonies?direction=${direction.name}`}
+          className="px-4 py-2 rounded-md border text-sm font-medium hover:bg-secondary"
+        >
+          View ceremonies
         </Link>
         <Link
           href={`/relations?direction=${direction.name}`}
           className="px-4 py-2 rounded-md border text-sm font-medium hover:bg-secondary"
         >
-          View Relations
+          View relations
         </Link>
       </div>
     </div>