@medicine-wheel/app 0.6.2 → 0.6.4

package/app/api/ceremonies/[id]/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import { createProvider, detectProvider } from "@medicine-wheel/storage-provider";
+
+type RouteContext = { params: Promise<{ id: string }> };
+
+export async function GET(_request: Request, context: RouteContext) {
+  try {
+    const { id } = await context.params;
+    const store = await createProvider();
+    const ceremony = await store.getCeremony(id);
+
+    if (!ceremony) {
+      return NextResponse.json(
+        { error: `Ceremony not found: ${id}` },
+        { status: 404 },
+      );
+    }
+
+    return NextResponse.json({ ceremony, provider: detectProvider() });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/app/api/ceremonies/route.ts

@@ -1,14 +1,21 @@
 import { NextResponse } from "next/server";
 import { createProvider, detectProvider } from "@medicine-wheel/storage-provider";
+import { ceremonyBelongsToEpisode } from "@/lib/ceremony-response";
 
 export async function GET(request: Request) {
   try {
     const { searchParams } = new URL(request.url);
     const direction = searchParams.get("direction");
     const type = searchParams.get("type");
+    const episodePath = searchParams.get("episode_path");
 
     const store = await createProvider();
-    let ceremonies = await store.getAllCeremonies();
+    // Provider list methods intentionally default to one page (100). A scoped
+    // episode query must search the complete ceremony store before filtering,
+    // or an older but valid ceremony silently disappears from its episode.
+    let ceremonies = await store.getAllCeremonies(
+      episodePath ? Number.MAX_SAFE_INTEGER : undefined,
+    );
 
     if (direction) {
       ceremonies = ceremonies.filter((c) => c.direction === direction);
@@ -18,6 +25,12 @@ export async function GET(request: Request) {
       ceremonies = ceremonies.filter((c) => c.type === type);
     }
 
+    if (episodePath) {
+      ceremonies = ceremonies.filter((ceremony) =>
+        ceremonyBelongsToEpisode(ceremony, episodePath),
+      );
+    }
+
     return NextResponse.json({ 
       ceremonies, 
       provider: detectProvider(),

package/app/graph/page.tsx

@@ -17,8 +17,11 @@ import {
   Route,
   Save,
   ShieldCheck,
+  SlidersHorizontal,
+  X,
 } from "lucide-react";
 import { type RelationalNode, type RelationalEdge, DIRECTION_COLORS } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import {
   applyWheelLayout,
   buildGraphData,
@@ -109,6 +112,40 @@ export default function GraphPage() {
   );
   const layoutStoreRef = useRef(layoutStore);
 
+  // Mobile presentation: the side panel becomes a slide-up sheet so the
+  // canvas can own the screen, and the canvas height fills the viewport.
+  const [isMobile, setIsMobile] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [graphHeight, setGraphHeight] = useState<number | string>(600);
+  const selectedPanelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 1023px)");
+    const apply = () => {
+      setIsMobile(mq.matches);
+      setGraphHeight(
+        mq.matches ? Math.max(360, Math.round(window.innerHeight * 0.66)) : 600,
+      );
+    };
+    apply();
+    mq.addEventListener("change", apply);
+    window.addEventListener("resize", apply);
+    return () => {
+      mq.removeEventListener("change", apply);
+      window.removeEventListener("resize", apply);
+    };
+  }, []);
+
+  // When a being is tapped on mobile the sheet opens; bring its details into
+  // view once the slide-up transition settles.
+  useEffect(() => {
+    if (!isMobile || !sheetOpen || !selectedNode) return;
+    const t = window.setTimeout(() => {
+      selectedPanelRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
+    }, 320);
+    return () => window.clearTimeout(t);
+  }, [isMobile, sheetOpen, selectedNode]);
+
   const saveLayoutStore = useCallback(
     (
       nextStore: GraphLayoutStore,
@@ -380,21 +417,21 @@ export default function GraphPage() {
   );
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-white p-6">
+    <div className="min-h-screen bg-[#0a0a1a] text-white p-3 sm:p-6">
       <div className="max-w-7xl mx-auto">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-col gap-3 mb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
           <div>
-            <h1 className="text-2xl font-bold flex items-center gap-2">
-              <span className="text-3xl">🔮</span> Medicine Wheel Graph
+            <h1 className="text-xl sm:text-2xl font-bold flex items-center gap-2">
+              <span className="text-2xl sm:text-3xl">🔮</span> Medicine Wheel Graph
             </h1>
-            <p className="text-gray-400 text-sm mt-1">
-              Interactive relational web — drag, pan, zoom across the four directions
+            <p className="text-gray-400 text-xs sm:text-sm mt-1">
+              Interactive relational web — tap a being, drag, pan, and pinch to zoom
             </p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <button
               onClick={() => setShowLabels(!showLabels)}
-              className={`px-3 py-1.5 rounded text-sm ${showLabels ? "bg-white/10" : "bg-white/5"}`}
+              className={`min-h-11 px-3 py-1.5 rounded text-sm ${showLabels ? "bg-white/10" : "bg-white/5"}`}
             >
               Labels {showLabels ? "ON" : "OFF"}
             </button>
@@ -402,18 +439,18 @@ export default function GraphPage() {
               onClick={() =>
                 setRadialSnap((s) => (s === "off" ? "ring" : s === "ring" ? "sector" : "off"))
               }
-              className={`px-3 py-1.5 rounded text-sm ${radialSnap !== "off" ? "bg-white/10" : "bg-white/5"}`}
+              className={`min-h-11 px-3 py-1.5 rounded text-sm ${radialSnap !== "off" ? "bg-white/10" : "bg-white/5"}`}
               title="Radial snapping: the wheel guides dragged beings — ring keeps them in their band, sector also inside their quadrant"
             >
               Snap {radialSnap === "off" ? "OFF" : radialSnap.toUpperCase()}
             </button>
-            <button onClick={loadData} className="px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10 inline-flex items-center gap-2">
+            <button onClick={loadData} className="min-h-11 px-3 py-1.5 rounded text-sm bg-white/5 hover:bg-white/10 inline-flex items-center gap-2">
               <RefreshCw className="h-4 w-4" /> Refresh
             </button>
           </div>
         </div>
 
-        <div className="flex gap-6">
+        <div className="flex flex-col lg:flex-row gap-4 lg:gap-6">
           <div className="relative flex-1 rounded-xl border border-white/10 overflow-hidden">
             {!loading && graph.nodes.length > 0 && (
               <label className="absolute right-3 top-3 z-10 inline-flex items-center gap-2 rounded-md border border-white/10 bg-[#0a0a1a]/80 px-2 py-1 text-[11px] text-gray-300 shadow-sm backdrop-blur">
@@ -428,9 +465,9 @@ export default function GraphPage() {
               </label>
             )}
             {loading ? (
-              <div className="flex items-center justify-center h-[600px] text-gray-500">Loading graph data...</div>
+              <div className="flex items-center justify-center text-gray-500" style={{ height: graphHeight }}>Loading graph data...</div>
             ) : graph.nodes.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-[600px] text-gray-500">
+              <div className="flex flex-col items-center justify-center text-gray-500" style={{ height: graphHeight }}>
                 <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>
@@ -438,12 +475,16 @@ export default function GraphPage() {
             ) : (
               <MedicineWheelFlowGraph
                 data={graphData}
-                height={600}
+                height={graphHeight}
                 darkMode
                 showNodeLabels={showLabels}
+                showMiniMap={!isMobile}
                 animationsEnabled={animationsEnabled}
                 nodePositions={activeLayout.positions}
-                onNodeClick={(node) => setSelectedNode(node)}
+                onNodeClick={(node) => {
+                  setSelectedNode(node);
+                  if (isMobile) setSheetOpen(true);
+                }}
                 onNodeDoubleClick={navigateToNode}
                 onNodePositionsChange={handleNodePositionsChange}
                 enableConnections
@@ -458,7 +499,53 @@ export default function GraphPage() {
             )}
           </div>
 
-          <div className="w-72 space-y-4">
+          {/* Mobile: floating toggle opens the panels as a slide-up sheet so
+              the canvas keeps the whole screen. */}
+          {isMobile && !sheetOpen && (
+            <button
+              onClick={() => setSheetOpen(true)}
+              className="fixed bottom-4 right-4 z-30 inline-flex min-h-11 max-w-[70vw] items-center gap-2 rounded-full border border-white/15 bg-[#12122a]/95 px-4 py-2 text-sm font-medium text-white shadow-lg backdrop-blur"
+              aria-label="Open graph panels"
+            >
+              <SlidersHorizontal className="h-4 w-4 shrink-0" />
+              <span className="truncate">{selectedNode ? selectedNode.label : "Panels"}</span>
+            </button>
+          )}
+
+          {/* Mobile: dim backdrop behind the open sheet. */}
+          {isMobile && sheetOpen && (
+            <div
+              onClick={() => setSheetOpen(false)}
+              className="fixed inset-0 z-40 bg-black/60"
+              aria-hidden="true"
+            />
+          )}
+
+          <div
+            className={cn(
+              isMobile
+                ? cn(
+                    "fixed inset-x-0 bottom-0 z-50 max-h-[82vh] overflow-y-auto rounded-t-2xl border-t border-white/10 bg-[#0a0a1a] px-4 pb-8 shadow-2xl transition-transform duration-300 ease-out",
+                    sheetOpen ? "translate-y-0" : "translate-y-full",
+                  )
+                : "w-72",
+            )}
+            aria-hidden={isMobile && !sheetOpen ? "true" : undefined}
+          >
+            {isMobile && (
+              <div className="sticky top-0 z-10 -mx-4 mb-3 flex items-center justify-between gap-2 border-b border-white/10 bg-[#0a0a1a] px-4 pb-3 pt-3">
+                <span className="text-sm font-semibold text-gray-300">Graph panels</span>
+                <button
+                  onClick={() => setSheetOpen(false)}
+                  aria-label="Close panels"
+                  className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-white/10 text-white hover:bg-white/15"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+            )}
+
+            <div className="space-y-4">
             <div className="rounded-lg border border-white/10 p-4">
               <h3 className="text-sm font-semibold text-gray-400 mb-3">Dispositions</h3>
               <div className="space-y-3">
@@ -539,7 +626,7 @@ export default function GraphPage() {
             </div>
 
             {selectedNode && (
-              <div className="rounded-xl border border-white/10 p-4">
+              <div ref={selectedPanelRef} className="rounded-xl border border-white/10 p-4 scroll-mt-16">
                 <h3 className="text-sm font-semibold text-gray-400 mb-2">Selected Node</h3>
                 <div className="space-y-2">
                   <div><span className="text-xs text-gray-500">Name</span><p className="font-medium">{selectedNode.label}</p></div>
@@ -565,6 +652,7 @@ export default function GraphPage() {
                 <div><p className="text-2xl font-bold">{directionCount}</p><p className="text-xs text-gray-500">Directions</p></div>
               </div>
             </div>
+            </div>
           </div>
         </div>
       </div>

package/components/workspaces-panel.tsx

@@ -47,22 +47,20 @@ export function WorkspacesPanel({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
 
+  // Robustness: when closed, render nothing at all so the panel can never
+  // occupy layout space — not even if the CSS bundle that hides it (transform)
+  // fails to load. This is what keeps the switcher discreet on first paint.
+  if (!open) return null;
+
   return (
     <>
       <div
-        aria-hidden={!open}
         onClick={onClose}
-        className={cn(
-          "fixed inset-0 z-40 bg-background/60 backdrop-blur-sm transition-opacity",
-          open ? "opacity-100" : "pointer-events-none opacity-0"
-        )}
+        className="fixed inset-0 z-40 bg-background/60 backdrop-blur-sm"
       />
       <aside
         aria-label="Workspaces"
-        className={cn(
-          "fixed left-0 top-0 z-50 h-full w-[340px] border-r border-border bg-card transition-transform",
-          open ? "translate-x-0" : "-translate-x-full"
-        )}
+        className="fixed left-0 top-0 z-50 h-full w-[340px] max-w-[85vw] border-r border-border bg-card"
       >
         <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="mw-h2">Workspaces</div>

package/lib/ceremony-response.ts

@@ -50,6 +50,27 @@ export function normalizeCeremonyLog(value: unknown): CeremonyLog | null {
   };
 }
 
+export function ceremonyEpisodePath(value: unknown): string | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  const researchContext = (value as Record<string, unknown>).research_context;
+  if (typeof researchContext !== "string") return undefined;
+
+  try {
+    const parsed = JSON.parse(researchContext) as Record<string, unknown> | null;
+    if (!parsed || typeof parsed !== "object") return undefined;
+    const episodePath = parsed.episode_path ?? parsed.episodePath;
+    return typeof episodePath === "string" && episodePath.length > 0
+      ? episodePath
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function ceremonyBelongsToEpisode(value: unknown, episodePath: string): boolean {
+  return ceremonyEpisodePath(value) === episodePath;
+}
+
 export function extractCeremonyLogs(response: unknown): CeremonyLog[] {
   const candidate = Array.isArray(response)
     ? response

package/package.json

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