@medicine-wheel/app 0.2.8 → 0.4.0

package/app/api/charts/route.ts

@@ -0,0 +1,74 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+
+function getChartsFile(): string {
+  const dataDir = process.env.MW_DATA_DIR ?? path.join(process.cwd(), ".mw", "store");
+  return path.join(dataDir, "charts.jsonl");
+}
+
+function readJsonl<T>(filePath: string): T[] {
+  if (!fs.existsSync(filePath)) return [];
+  const content = fs.readFileSync(filePath, "utf-8");
+  return content
+    .split("\n")
+    .filter((line) => line.trim())
+    .map((line) => JSON.parse(line) as T);
+}
+
+function appendJsonl<T>(filePath: string, item: T): void {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.appendFileSync(filePath, JSON.stringify(item) + "\n", "utf-8");
+}
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const direction = searchParams.get("direction");
+
+    let charts = readJsonl<any>(getChartsFile());
+
+    if (direction) {
+      charts = charts.filter((c) => c.direction === direction);
+    }
+
+    charts.sort(
+      (a: any, b: any) =>
+        Date.parse(b.updated_at ?? b.created_at) -
+        Date.parse(a.updated_at ?? a.created_at)
+    );
+
+    return NextResponse.json(charts);
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    const chart = {
+      id: body.id || crypto.randomUUID(),
+      desired_outcome: body.desired_outcome,
+      current_reality: body.current_reality,
+      direction: body.direction || "east",
+      action_steps: body.action_steps ?? [],
+      due_date: body.due_date,
+      created_at: body.created_at || new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      phase: body.phase || "current_reality",
+      ceremonies_linked: body.ceremonies_linked ?? [],
+      wilson_alignment: body.wilson_alignment,
+      cycle_id: body.cycle_id,
+    };
+
+    appendJsonl(getChartsFile(), chart);
+    return NextResponse.json({ success: true, chart }, { status: 201 });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/app/api/mcp/route.ts

@@ -0,0 +1,138 @@
+/**
+ * StreamableHTTP MCP endpoint
+ *
+ * Enables MCP clients to connect to the Medicine Wheel server
+ * via HTTP POST instead of stdio. Accepts JSON-RPC MCP messages
+ * and dispatches them to the same tool/resource/prompt registry
+ * that the stdio transport uses.
+ *
+ * Supported methods:
+ *   - tools/list   → lists all registered MCP tools
+ *   - tools/call   → invokes a tool by name with arguments
+ *
+ * @see https://github.com/jgwill/medicine-wheel/issues/69
+ */
+import { NextRequest, NextResponse } from "next/server";
+import { allTools } from "@medicine-wheel/mcp/all-tools";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    if (!body.jsonrpc || body.jsonrpc !== "2.0") {
+      return NextResponse.json(
+        {
+          jsonrpc: "2.0",
+          error: {
+            code: -32600,
+            message: "Invalid Request: expected JSON-RPC 2.0",
+          },
+          id: body.id ?? null,
+        },
+        { status: 400 }
+      );
+    }
+
+    const { method, params, id } = body;
+
+    // ── tools/list ──
+    if (method === "tools/list") {
+      return NextResponse.json({
+        jsonrpc: "2.0",
+        result: {
+          tools: allTools.map((t) => ({
+            name: t.name,
+            description: t.description,
+            inputSchema: t.inputSchema,
+          })),
+        },
+        id: id ?? null,
+      });
+    }
+
+    // ── tools/call ──
+    if (method === "tools/call") {
+      const toolName = params?.name;
+      const tool = allTools.find((t) => t.name === toolName);
+      if (!tool) {
+        return NextResponse.json({
+          jsonrpc: "2.0",
+          error: {
+            code: -32602,
+            message: `Unknown tool: ${toolName}`,
+          },
+          id: id ?? null,
+        });
+      }
+
+      try {
+        const result = await tool.handler(params?.arguments || {});
+        return NextResponse.json({
+          jsonrpc: "2.0",
+          result: {
+            content: [
+              { type: "text", text: JSON.stringify(result, null, 2) },
+            ],
+          },
+          id: id ?? null,
+        });
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        return NextResponse.json({
+          jsonrpc: "2.0",
+          result: {
+            content: [
+              {
+                type: "text",
+                text: JSON.stringify(
+                  {
+                    error: errorMessage,
+                    direction:
+                      "Please ensure all required parameters are provided",
+                  },
+                  null,
+                  2
+                ),
+              },
+            ],
+            isError: true,
+          },
+          id: id ?? null,
+        });
+      }
+    }
+
+    // ── Unsupported method ──
+    return NextResponse.json(
+      {
+        jsonrpc: "2.0",
+        error: {
+          code: -32601,
+          message: `Method '${method}' is not supported. Available: tools/list, tools/call`,
+        },
+        id: id ?? null,
+      },
+      { status: 200 }
+    );
+  } catch {
+    return NextResponse.json(
+      {
+        jsonrpc: "2.0",
+        error: { code: -32700, message: "Parse error" },
+        id: null,
+      },
+      { status: 400 }
+    );
+  }
+}
+
+export async function GET() {
+  return NextResponse.json({
+    status: "available",
+    transport: "StreamableHTTP",
+    description:
+      "Medicine Wheel MCP StreamableHTTP endpoint. Send JSON-RPC 2.0 POST requests to interact.",
+    capabilities: ["tools", "resources", "prompts"],
+  });
+}

package/app/api/mmots/route.ts

@@ -0,0 +1,64 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+
+function getMmotsFile(): string {
+  const dataDir = process.env.MW_DATA_DIR ?? path.join(process.cwd(), ".mw", "store");
+  return path.join(dataDir, "mmots.jsonl");
+}
+
+function readJsonl<T>(filePath: string): T[] {
+  if (!fs.existsSync(filePath)) return [];
+  const content = fs.readFileSync(filePath, "utf-8");
+  return content
+    .split("\n")
+    .filter((line) => line.trim())
+    .map((line) => JSON.parse(line) as T);
+}
+
+function appendJsonl<T>(filePath: string, item: T): void {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.appendFileSync(filePath, JSON.stringify(item) + "\n", "utf-8");
+}
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const chartId = searchParams.get("chart_id");
+
+    let mmots = readJsonl<any>(getMmotsFile());
+
+    if (chartId) {
+      mmots = mmots.filter((m) => m.chart_id === chartId);
+    }
+
+    return NextResponse.json(mmots);
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    const mmot = {
+      id: body.id || crypto.randomUUID(),
+      chart_id: body.chart_id,
+      timestamp: new Date().toISOString(),
+      step1_expected: body.step1_expected,
+      step1_actual: body.step1_actual,
+      step2_analysis: body.step2_analysis,
+      step3_adjustments: body.step3_adjustments ?? [],
+      step4_feedback: body.step4_feedback,
+    };
+
+    appendJsonl(getMmotsFile(), mmot);
+    return NextResponse.json({ success: true, mmot }, { status: 201 });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/app/graph/page.tsx

@@ -1,30 +1,37 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import "@xyflow/react/dist/style.css";
+
+import { useEffect, useState, useCallback, useMemo } from "react";
+import dynamic from "next/dynamic";
 import { type RelationalNode, type RelationalEdge, DIRECTION_COLORS } from "@/lib/types";
+import {
+  buildGraphData,
+  type MWGraphData,
+  type MWGraphNode,
+} from "@medicine-wheel/graph-viz";
 import { toast } from "sonner";
 
-interface GraphNode {
-  id: string;
-  label: string;
-  type: string;
-  direction?: string;
-  x: number;
-  y: number;
-}
-
-interface GraphLink {
-  source: string;
-  target: string;
-  label: string;
-  ceremonyHonored: boolean;
-  strength: number;
-}
+// React Flow touches `window`/`document`, so the interactive renderer is
+// loaded client-side only via the `./interactive` subpath export.
+const MedicineWheelFlowGraph = dynamic(
+  () =>
+    import("@medicine-wheel/graph-viz/interactive").then(
+      (m) => m.MedicineWheelFlowGraph,
+    ),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex items-center justify-center h-[600px] text-gray-500">
+        Loading interactive graph…
+      </div>
+    ),
+  },
+);
 
 export default function GraphPage() {
-  const [nodes, setNodes] = useState<GraphNode[]>([]);
-  const [links, setLinks] = useState<GraphLink[]>([]);
-  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
+  const [graph, setGraph] = useState<MWGraphData>({ nodes: [], links: [] });
+  const [selectedNode, setSelectedNode] = useState<MWGraphNode | null>(null);
   const [loading, setLoading] = useState(true);
   const [showLabels, setShowLabels] = useState(true);
 
@@ -33,39 +40,13 @@ export default function GraphPage() {
       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 || []);
-
-      // Position nodes by direction on a circular layout
-      const CX = 350, CY = 300, R = 220;
-      const dirAngles: Record<string, number> = { east: 0, south: 90, west: 180, north: 270 };
 
-      const graphNodes = nodesData.map((n, i) => {
-        const baseAngle = n.direction ? dirAngles[n.direction] ?? 0 : (360 * i) / nodesData.length;
-        const jitter = (Math.random() - 0.5) * 60;
-        const angle = ((baseAngle + jitter) * Math.PI) / 180;
-        const r = R * (0.5 + Math.random() * 0.4);
-        return {
-          id: n.id,
-          label: n.name,
-          type: n.type,
-          direction: n.direction,
-          x: CX + r * Math.cos(angle),
-          y: CY + r * Math.sin(angle),
-        };
-      });
-
-      const graphLinks = edgesData.map((e) => ({
-        source: e.from_id,
-        target: e.to_id,
-        label: e.relationship_type,
-        ceremonyHonored: e.ceremony_honored,
-        strength: e.strength,
-      }));
+      // API returns { nodes: [...], provider: '...', count: N }
+      const nodesData: RelationalNode[] = Array.isArray(nodesResponse)
+        ? nodesResponse
+        : nodesResponse.nodes || [];
 
-      setNodes(graphNodes);
-      setLinks(graphLinks);
+      setGraph(buildGraphData(nodesData, edgesData));
     } catch {
       toast.error("Failed to load graph data");
     } finally {
@@ -73,9 +54,18 @@ export default function GraphPage() {
     }
   }, []);
 
-  useEffect(() => { loadData(); }, [loadData]);
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
 
-  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const ceremoniedCount = useMemo(
+    () => graph.links.filter((l) => l.ceremonyHonored).length,
+    [graph.links],
+  );
+  const directionCount = useMemo(
+    () => new Set(graph.nodes.map((n) => n.direction).filter(Boolean)).size,
+    [graph.nodes],
+  );
 
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-white p-6">
@@ -85,7 +75,9 @@ export default function GraphPage() {
             <h1 className="text-2xl font-bold flex items-center gap-2">
               <span className="text-3xl">🔮</span> Medicine Wheel Graph
             </h1>
-            <p className="text-gray-400 text-sm mt-1">Relational visualization across four directions</p>
+            <p className="text-gray-400 text-sm mt-1">
+              Interactive relational web — drag, pan, zoom across the four directions
+            </p>
           </div>
           <div className="flex gap-2">
             <button
@@ -94,7 +86,9 @@ 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>
+            <button onClick={loadData} className="px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10">
+              ↻ Refresh
+            </button>
           </div>
         </div>
 
@@ -102,64 +96,20 @@ export default function GraphPage() {
           <div className="flex-1 rounded-xl border border-white/10 overflow-hidden">
             {loading ? (
               <div className="flex items-center justify-center h-[600px] text-gray-500">Loading graph data...</div>
-            ) : nodes.length === 0 ? (
+            ) : graph.nodes.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-[600px] text-gray-500">
                 <span className="text-4xl mb-3">🌀</span>
                 <p>No relational nodes yet.</p>
                 <p className="text-sm mt-1">Create nodes via the Nodes page.</p>
               </div>
             ) : (
-              <svg viewBox="0 0 700 600" className="w-full h-[600px]">
-                {/* Quadrant backgrounds */}
-                {[
-                  { dir: "east", cx: 525, cy: 300 },
-                  { dir: "south", cx: 350, cy: 475 },
-                  { dir: "west", cx: 175, cy: 300 },
-                  { dir: "north", cx: 350, cy: 125 },
-                ].map(({ dir, cx, cy }) => (
-                  <g key={dir}>
-                    <circle cx={cx} cy={cy} r={40} fill={(DIRECTION_COLORS as any)[dir]} opacity={0.1} />
-                    <text x={cx} y={cy + 4} textAnchor="middle" fill={(DIRECTION_COLORS as any)[dir]} className="text-xs font-bold capitalize" opacity={0.6}>
-                      {dir}
-                    </text>
-                  </g>
-                ))}
-
-                {/* Links */}
-                {links.map((link, i) => {
-                  const source = nodeMap.get(link.source);
-                  const target = nodeMap.get(link.target);
-                  if (!source || !target) return null;
-                  return (
-                    <line
-                      key={i}
-                      x1={source.x} y1={source.y} x2={target.x} y2={target.y}
-                      stroke={link.ceremonyHonored ? "#FFD700" : "#555"}
-                      strokeWidth={1 + link.strength * 2}
-                      strokeDasharray={link.ceremonyHonored ? "none" : "6,4"}
-                      opacity={0.5}
-                    />
-                  );
-                })}
-
-                {/* Nodes */}
-                {nodes.map((node) => (
-                  <g key={node.id} className="cursor-pointer" onClick={() => setSelectedNode(node)}>
-                    <circle
-                      cx={node.x} cy={node.y} r={selectedNode?.id === node.id ? 18 : 14}
-                      fill={node.direction ? (DIRECTION_COLORS as any)[node.direction] || "#888" : "#888"}
-                      stroke={selectedNode?.id === node.id ? "#FFD700" : "#333"}
-                      strokeWidth={selectedNode?.id === node.id ? 3 : 1}
-                      opacity={0.9}
-                    />
-                    {showLabels && (
-                      <text x={node.x} y={node.y + 26} textAnchor="middle" fill="#ccc" className="text-[10px]">
-                        {node.label.length > 15 ? node.label.slice(0, 14) + "…" : node.label}
-                      </text>
-                    )}
-                  </g>
-                ))}
-              </svg>
+              <MedicineWheelFlowGraph
+                data={graph}
+                height={600}
+                darkMode
+                showNodeLabels={showLabels}
+                onNodeClick={(node) => setSelectedNode(node)}
+              />
             )}
           </div>
 
@@ -189,10 +139,10 @@ export default function GraphPage() {
             <div className="rounded-xl border border-white/10 p-4">
               <h3 className="text-sm font-semibold text-gray-400 mb-3">Graph Stats</h3>
               <div className="grid grid-cols-2 gap-3 text-center">
-                <div><p className="text-2xl font-bold">{nodes.length}</p><p className="text-xs text-gray-500">Nodes</p></div>
-                <div><p className="text-2xl font-bold">{links.length}</p><p className="text-xs text-gray-500">Relations</p></div>
-                <div><p className="text-2xl font-bold">{links.filter((l) => l.ceremonyHonored).length}</p><p className="text-xs text-gray-500">Ceremonied</p></div>
-                <div><p className="text-2xl font-bold">{new Set(nodes.map((n) => n.direction).filter(Boolean)).size}</p><p className="text-xs text-gray-500">Directions</p></div>
+                <div><p className="text-2xl font-bold">{graph.nodes.length}</p><p className="text-xs text-gray-500">Nodes</p></div>
+                <div><p className="text-2xl font-bold">{graph.links.length}</p><p className="text-xs text-gray-500">Relations</p></div>
+                <div><p className="text-2xl font-bold">{ceremoniedCount}</p><p className="text-xs text-gray-500">Ceremonied</p></div>
+                <div><p className="text-2xl font-bold">{directionCount}</p><p className="text-xs text-gray-500">Directions</p></div>
               </div>
             </div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medicine-wheel/app",
-  "version": "0.2.8",
+  "version": "0.4.0",
   "description": "Medicine Wheel — Interactive visual layer for Indigenous relational research with Four Directions, ceremonies, and narrative arcs",
   "bin": {
     "mw": "dist/cli/mw.js",
@@ -52,6 +52,8 @@
     "build": "next build",
     "start": "next start -p 3940",
     "lint": "next lint",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "version:patch": "node scripts/bump-versions.mjs patch && node scripts/sync-versions.mjs && shx rm -rf node_modules src/*/node_modules package-lock.json && npm install --legacy-peer-deps",
     "version:minor": "node scripts/bump-versions.mjs minor && node scripts/sync-versions.mjs && shx rm -rf node_modules src/*/node_modules package-lock.json && npm install --legacy-peer-deps",
     "version:major": "node scripts/bump-versions.mjs major && node scripts/sync-versions.mjs && shx rm -rf node_modules src/*/node_modules package-lock.json && npm install --legacy-peer-deps",
@@ -72,33 +74,35 @@
     "release:major": "npm run version:major && npm run publish:all && npm run release:commit"
   },
   "dependencies": {
+    "@medicine-wheel/ceremony-protocol": "^0.4.0",
+    "@medicine-wheel/community-review": "^0.4.0",
+    "@medicine-wheel/consent-lifecycle": "^0.4.0",
+    "@medicine-wheel/data-store": "^0.4.0",
+    "@medicine-wheel/data-store-postgres": "^0.4.0",
+    "@medicine-wheel/fire-keeper": "^0.4.0",
+    "@medicine-wheel/graph-viz": "^0.4.0",
+    "@medicine-wheel/importance-unit": "^0.4.0",
+    "@medicine-wheel/mcp": "^4.3.0",
+    "@medicine-wheel/narrative-engine": "^0.4.0",
+    "@medicine-wheel/ontology-core": "^0.4.0",
+    "@medicine-wheel/prompt-decomposition": "^0.4.0",
+    "@medicine-wheel/relational-index": "^0.4.0",
+    "@medicine-wheel/relational-query": "^0.4.0",
+    "@medicine-wheel/session-reader": "^0.4.0",
+    "@medicine-wheel/storage-provider": "^0.4.0",
+    "@medicine-wheel/transformation-tracker": "^0.4.0",
+    "@medicine-wheel/ui-components": "^0.4.0",
+    "@neondatabase/serverless": "^0.10.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
     "next": "^15.3.0",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next-themes": "^0.4.6",
+    "recharts": "^2.15.4",
     "sonner": "^1.7.0",
-    "lucide-react": "^0.475.0",
-    "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.2",
-    "recharts": "^2.15.4",
-    "@medicine-wheel/ontology-core": "^0.2.8",
-    "@medicine-wheel/ceremony-protocol": "^0.2.8",
-    "@medicine-wheel/narrative-engine": "^0.2.8",
-    "@medicine-wheel/graph-viz": "^0.2.8",
-    "@medicine-wheel/relational-query": "^0.2.8",
-    "@medicine-wheel/prompt-decomposition": "^0.2.8",
-    "@medicine-wheel/ui-components": "^0.2.8",
-    "@medicine-wheel/data-store": "^0.2.8",
-    "@medicine-wheel/session-reader": "^0.2.8",
-    "@medicine-wheel/fire-keeper": "^0.2.8",
-    "@medicine-wheel/importance-unit": "^0.2.8",
-    "@medicine-wheel/relational-index": "^0.2.8",
-    "@medicine-wheel/transformation-tracker": "^0.2.8",
-    "@medicine-wheel/storage-provider": "^0.2.8",
-    "@medicine-wheel/community-review": "^0.2.8",
-    "@medicine-wheel/consent-lifecycle": "^0.2.8",
-    "@medicine-wheel/data-store-postgres": "^0.2.8",
-    "@neondatabase/serverless": "^0.10.0"
+    "@xyflow/react": "^12.3.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.0",
@@ -107,6 +111,7 @@
     "@types/react-dom": "^19.0.0",
     "shx": "^0.4.0",
     "tailwindcss": "^4.1.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vitest": "^4.1.8"
   }
 }