@medicine-wheel/app 0.4.9 → 0.4.12

package/app/accountability/page.tsx

@@ -16,6 +16,7 @@ export default function AccountabilityPage() {
   const [ceremonies, setCeremonies] = useState<any[]>([]);
   const [beats, setBeats] = useState<any[]>([]);
   const [expandedRes, setExpandedRes] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     Promise.all([
@@ -32,7 +33,7 @@ export default function AccountabilityPage() {
       setEdges(Array.isArray(e) ? e : []);
       setCeremonies(Array.isArray(c) ? c : []);
       setBeats(Array.isArray(b) ? b : []);
-    }).catch(() => {});
+    }).catch(() => {}).finally(() => setLoading(false));
   }, []);
 
   const ceremoniedCount = edges.filter((e: any) => e.ceremony_honored).length;
@@ -42,6 +43,8 @@ export default function AccountabilityPage() {
       <h1 className="text-2xl font-bold mb-2">Accountability & Frameworks</h1>
       <p className="text-sm text-muted-foreground mb-6">Relational accountability metrics and Indigenous research frameworks</p>
 
+      {loading && <div className="text-center py-16 text-muted-foreground">Loading accountability metrics…</div>}
+      {!loading && (<>
       {/* Metric Cards */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
         <div className="p-4 rounded-lg border bg-card text-center">
@@ -92,6 +95,7 @@ export default function AccountabilityPage() {
           </div>
         ))}
       </div>
+      </>)}
     </div>
   );
 }

package/app/api/inquiry-weaves/[id]/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+import { createProvider, detectProvider } from "@medicine-wheel/storage-provider";
+
+export async function GET(
+  _request: Request,
+  context: { params: Promise<{ id: string }> },
+) {
+  try {
+    const params = await context.params;
+    const store = await createProvider();
+    const inquiryWeave = await store.getInquiryWeave(params.id);
+
+    if (!inquiryWeave) {
+      return NextResponse.json({
+        inquiry_weave: null,
+        provider: detectProvider(),
+      });
+    }
+
+    return NextResponse.json({
+      inquiry_weave: inquiryWeave,
+      provider: detectProvider(),
+    });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/app/api/inquiry-weaves/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from "next/server";
+import {
+  createProvider,
+  detectProvider,
+  type InquiryWeaveFilters,
+  type WeaveRecord,
+} from "@medicine-wheel/storage-provider";
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const filters = inquiryWeaveFiltersFromSearchParams(searchParams);
+    const store = await createProvider();
+    const inquiryWeaves = await store.listInquiryWeaves(filters);
+
+    return NextResponse.json({
+      inquiry_weaves: inquiryWeaves,
+      provider: detectProvider(),
+      count: inquiryWeaves.length,
+    });
+  } 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 store = await createProvider();
+    const record = (await request.json()) as WeaveRecord;
+
+    if (!record || typeof record.id !== "string" || record.id.length === 0) {
+      return NextResponse.json(
+        { error: "Inquiry Weave registration requires a non-empty id" },
+        { status: 400 },
+      );
+    }
+
+    await store.registerInquiryWeave(record);
+
+    return NextResponse.json(
+      {
+        success: true,
+        inquiry_weave: record,
+        provider: detectProvider(),
+      },
+      { status: 201 },
+    );
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+function inquiryWeaveFiltersFromSearchParams(searchParams: URLSearchParams): InquiryWeaveFilters {
+  const filters: InquiryWeaveFilters = {};
+  const episodePath = searchParams.get("episode_path");
+  const episodeNumber = searchParams.get("episode_number");
+  const issue = searchParams.get("issue");
+  const artefact = searchParams.get("artefact");
+
+  if (episodePath) filters.episode_path = episodePath;
+  if (episodeNumber) {
+    const parsed = Number(episodeNumber);
+    if (Number.isInteger(parsed)) filters.episode_number = parsed;
+  }
+  if (issue) filters.issue = issue;
+  if (artefact) filters.artefact = artefact;
+
+  return filters;
+}

package/app/ceremonies/page.tsx

@@ -5,6 +5,7 @@ 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 { relativeTime, absoluteTime } from "@/lib/format-time";
 import { toast } from "sonner";
 
 function CeremoniesContent() {
@@ -14,12 +15,14 @@ function CeremoniesContent() {
   const [filterType, setFilterType] = useState<string>("all");
   const [showForm, setShowForm] = useState(false);
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
   const loadCeremonies = useCallback(async () => {
     const params = new URLSearchParams();
     if (filterDir !== "all") params.set("direction", filterDir);
     if (filterType !== "all") params.set("type", filterType);
 
+    setLoading(true);
     try {
       const res = await fetch(`/api/ceremonies?${params}`);
       if (!res.ok) throw new Error("Failed to load ceremonies");
@@ -27,9 +30,14 @@ function CeremoniesContent() {
       setCeremonies(extractCeremonyLogs(data));
     } catch {
       setCeremonies([]);
+    } finally {
+      setLoading(false);
     }
   }, [filterDir, filterType]);
 
+  const filtersActive = filterDir !== "all" || filterType !== "all";
+  const clearFilters = () => { setFilterDir("all"); setFilterType("all"); };
+
   useEffect(() => {
     loadCeremonies();
   }, [loadCeremonies]);
@@ -55,6 +63,7 @@ function CeremoniesContent() {
 
   const directions: DirectionName[] = ["east", "south", "west", "north"];
   const cTypes: CeremonyType[] = ["smudging", "talking_circle", "spirit_feeding", "opening", "closing"];
+  const DIRECTION_ICONS: Record<DirectionName, string> = { east: "🌅", south: "🌞", west: "🌄", north: "❄️" };
 
   const phaseMap: Record<DirectionName, string> = { east: "opening", south: "council", west: "integration", north: "closure" };
   const currentPhase = useMemo(() => {
@@ -110,6 +119,9 @@ function CeremoniesContent() {
           <option value="all">All Types</option>
           {cTypes.map((t) => <option key={t} value={t}>{t.replace("_", " ")}</option>)}
         </select>
+        {filtersActive && (
+          <button onClick={clearFilters} className="px-3 py-1 rounded-md border text-xs text-muted-foreground hover:text-foreground">Clear filters</button>
+        )}
       </div>
 
       {showForm && (
@@ -129,21 +141,34 @@ function CeremoniesContent() {
       )}
 
       <div className="space-y-3">
-        {ceremonies.length === 0 && <div className="text-center py-12 text-muted-foreground"><p>No ceremonies found. Log your first ceremony to begin.</p></div>}
-        {ceremonies.map((c) => (
+        {loading && <div className="text-center py-12 text-muted-foreground">Loading ceremonies…</div>}
+        {!loading && ceremonies.length === 0 && (
+          <div className="text-center py-12 text-muted-foreground">
+            <p>{filtersActive ? "No ceremonies match these filters." : "No ceremonies found. Log your first ceremony to begin."}</p>
+            {filtersActive && <button onClick={clearFilters} className="text-sm mt-2 underline hover:text-foreground">Clear filters</button>}
+          </div>
+        )}
+        {!loading && ceremonies.map((c) => (
           <div key={c.id} className="border rounded-lg bg-card overflow-hidden cursor-pointer hover:border-ring/50 transition-colors"
             style={{ borderTopColor: DIRECTION_COLORS[c.direction], borderTopWidth: 3 }} onClick={() => setExpandedId(expandedId === c.id ? null : c.id)}>
-            <div className="p-4 flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <span className="text-2xl">{CEREMONY_ICONS[c.type]}</span>
-                <div>
-                  <div className="font-medium text-sm capitalize">{c.type.replace("_", " ")}</div>
-                  <div className="text-xs text-muted-foreground">{c.direction} · {new Date(c.timestamp).toLocaleString()}</div>
+            <div className="p-4 flex items-center justify-between gap-3">
+              <div className="flex items-center gap-3 min-w-0">
+                <span className="text-2xl shrink-0">{CEREMONY_ICONS[c.type]}</span>
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium text-sm capitalize">{c.type.replace("_", " ")}</span>
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium capitalize border"
+                      style={{ borderColor: DIRECTION_COLORS[c.direction], color: DIRECTION_COLORS[c.direction] }}>
+                      {DIRECTION_ICONS[c.direction]} {c.direction}
+                    </span>
+                  </div>
+                  <div className="text-xs text-muted-foreground" title={absoluteTime(c.timestamp)}>{relativeTime(c.timestamp)}</div>
                 </div>
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 shrink-0">
                 {c.participants.length > 0 && <span className="px-2 py-0.5 rounded-full bg-secondary text-xs">{c.participants.length} participant{c.participants.length !== 1 ? "s" : ""}</span>}
                 {c.medicines_used.length > 0 && <span className="px-2 py-0.5 rounded-full bg-secondary text-xs">🌿 {c.medicines_used.length}</span>}
+                <span className="text-muted-foreground text-sm w-4 text-center" aria-hidden>{expandedId === c.id ? "▲" : "▼"}</span>
               </div>
             </div>
             {expandedId === c.id && (
@@ -151,7 +176,7 @@ function CeremoniesContent() {
                 {c.intentions.length > 0 && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Intentions</div>{c.intentions.map((int, i) => <p key={i} className="text-sm">{int}</p>)}</div>}
                 {c.participants.length > 0 && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Participants</div><div className="flex flex-wrap gap-1">{c.participants.map((p) => <span key={p} className="px-2 py-0.5 rounded bg-secondary text-xs">{p}</span>)}</div></div>}
                 {c.medicines_used.length > 0 && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Medicines</div><div className="flex flex-wrap gap-1">{c.medicines_used.map((m) => <span key={m} className="px-2 py-0.5 rounded bg-secondary text-xs">🌿 {m}</span>)}</div></div>}
-                {c.research_context && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Research Context</div><p className="text-sm">{c.research_context}</p></div>}
+                {c.research_context && <div><div className="text-xs font-medium text-muted-foreground uppercase mb-1">Research Context</div><code className="inline-block px-2 py-1 rounded bg-secondary/60 text-xs font-mono text-muted-foreground break-all">{c.research_context}</code></div>}
               </div>
             )}
           </div>

package/app/narrative/page.tsx

@@ -3,16 +3,19 @@
 import { useEffect, useState } from "react";
 import { type NarrativeBeat, type MedicineWheelCycle, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
 import { extractCycles } from "@/lib/cycle-response";
+import { relativeTime, absoluteTime } from "@/lib/format-time";
 
 export default function NarrativePage() {
   const [beats, setBeats] = useState<NarrativeBeat[]>([]);
   const [cycles, setCycles] = useState<MedicineWheelCycle[]>([]);
   const [expandedBeat, setExpandedBeat] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
   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(extractCycles(c)); })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setLoading(false));
   }, []);
 
   const activeCycle = cycles[0];
@@ -32,7 +35,7 @@ export default function NarrativePage() {
               <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>
+            <span className="text-xs text-muted-foreground" title={absoluteTime(activeCycle.start_date)}>Started {relativeTime(activeCycle.start_date)}</span>
           </div>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
             <div>
@@ -83,8 +86,9 @@ export default function NarrativePage() {
       {/* 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) => (
+        {loading && <div className="text-center py-8 text-muted-foreground">Loading narrative beats…</div>}
+        {!loading && beats.length === 0 && <div className="text-center py-8 text-muted-foreground">No beats recorded yet.</div>}
+        {!loading && 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)}>
@@ -96,7 +100,7 @@ export default function NarrativePage() {
                 </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 title={absoluteTime(beat.timestamp)}>{relativeTime(beat.timestamp)}</div>
                 </div>
               </div>
             </div>

package/app/nodes/page.tsx

@@ -10,6 +10,7 @@ import {
   NODE_TYPE_COLORS,
   DIRECTION_COLORS,
 } from "@/lib/types";
+import { relativeTime, absoluteTime } from "@/lib/format-time";
 import { toast } from "sonner";
 
 const NODE_TYPES: NodeType[] = ["human", "land", "spirit", "ancestor", "future", "knowledge"];
@@ -195,7 +196,7 @@ export default function NodesPage() {
                   <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">Created:</span> <span title={absoluteTime(node.created_at)}>{relativeTime(node.created_at)}</span></div>
                     <div><span className="text-muted-foreground">ID:</span> <code className="text-xs">{node.id.slice(0, 8)}…</code></div>
                   </div>
                   <div>

package/app/relations/page.tsx

@@ -3,6 +3,7 @@
 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 { relativeTime, absoluteTime } from "@/lib/format-time";
 import { toast } from "sonner";
 
 interface GraphNode extends RelationalNode {
@@ -18,8 +19,10 @@ export default function RelationsPage() {
   const [showAddNode, setShowAddNode] = useState(false);
   const svgRef = useRef<SVGSVGElement>(null);
   const [dragging, setDragging] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
   const loadData = useCallback(async () => {
+    setLoading(true);
     try {
       const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes"), fetch("/api/edges")]);
       const nodesResponse = await nodesRes.json();
@@ -36,6 +39,7 @@ export default function RelationsPage() {
       setNodes(graphNodes);
       setEdges(Array.isArray(edgesData) ? edgesData : []);
     } catch (err) { console.error("Failed to load relational data:", err); }
+    finally { setLoading(false); }
   }, []);
 
   useEffect(() => { loadData(); }, [loadData]);
@@ -100,7 +104,12 @@ export default function RelationsPage() {
       )}
 
       <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">
+        <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) => {
@@ -136,7 +145,7 @@ export default function RelationsPage() {
               <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> {new Date(selectedNode.created_at).toLocaleDateString()}</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>

package/lib/format-time.ts

@@ -0,0 +1,43 @@
+/**
+ * format-time — human-readable, recency-aware timestamps shared across views.
+ *
+ * relativeTime() gives a glanceable sense of recency ("3 hours ago"), falling
+ * back to an absolute short date once an entry is older than a month.
+ * absoluteTime() gives the exact moment — used as the `title` tooltip so the
+ * precise timestamp is always one hover away.
+ */
+
+export function relativeTime(iso: string | number | Date): string {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+
+  const diff = Date.now() - then; // positive = past
+  const future = diff < 0;
+  const abs = Math.abs(diff);
+
+  const sec = Math.round(abs / 1000);
+  const min = Math.round(sec / 60);
+  const hr = Math.round(min / 60);
+  const day = Math.round(hr / 24);
+
+  const suffix = future ? "from now" : "ago";
+  const unit = (n: number, u: string) => `${n} ${u}${n !== 1 ? "s" : ""} ${suffix}`;
+
+  if (sec < 45) return "just now";
+  if (min < 60) return unit(min, "minute");
+  if (hr < 24) return unit(hr, "hour");
+  if (day < 30) return unit(day, "day");
+
+  // Older than ~a month: an absolute short date reads cleaner than "47 days ago".
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function absoluteTime(iso: string | number | Date): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return String(iso);
+  return d.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+}

package/package.json

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