@medicine-wheel/app 0.2.3

package/app/page.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import { DIRECTIONS, DIRECTION_COLORS, type DirectionName } from "@/lib/types";
+import { DirectionPanel } from "@/components/direction-panel";
+
+export default function HomePage() {
+  const [selected, setSelected] = useState<DirectionName | null>(null);
+  const [hovered, setHovered] = useState<DirectionName | null>(null);
+
+  const selectedDir = selected ? DIRECTIONS.find((d) => d.name === selected) : null;
+
+  const R = 200;
+  const CX = 250;
+  const CY = 250;
+
+  function quadrantPath(startAngle: number, endAngle: number) {
+    const toRad = (a: number) => (a * Math.PI) / 180;
+    const x1 = CX + R * Math.cos(toRad(startAngle));
+    const y1 = CY + R * Math.sin(toRad(startAngle));
+    const x2 = CX + R * Math.cos(toRad(endAngle));
+    const y2 = CY + R * Math.sin(toRad(endAngle));
+    return `M ${CX} ${CY} L ${x1} ${y1} A ${R} ${R} 0 0 1 ${x2} ${y2} Z`;
+  }
+
+  const quadrants: { dir: DirectionName; start: number; end: number }[] = [
+    { dir: "east", start: -45, end: 45 },
+    { dir: "south", start: 45, end: 135 },
+    { dir: "west", start: 135, end: 225 },
+    { dir: "north", start: 225, end: 315 },
+  ];
+
+  return (
+    <div className="flex flex-col items-center gap-8 p-6">
+      <div className="text-center max-w-2xl">
+        <h1 className="text-3xl font-bold mb-2">Medicine Wheel</h1>
+        <p className="text-muted-foreground">
+          Navigate the Four Directions — click a direction to explore its teachings, ceremonies, and relational obligations.
+        </p>
+      </div>
+
+      <div className="relative">
+        <svg viewBox="0 0 500 500" className="w-full max-w-[500px]" aria-label="Medicine Wheel">
+          {quadrants.map(({ dir, start, end }) => {
+            const dirData = DIRECTIONS.find((d) => d.name === dir)!;
+            const isHovered = hovered === dir;
+            const isSelected = selected === dir;
+            const toRad = (a: number) => (a * Math.PI) / 180;
+            const midAngle = (start + end) / 2;
+            const labelR = R * 0.6;
+            const lx = CX + labelR * Math.cos(toRad(midAngle));
+            const ly = CY + labelR * Math.sin(toRad(midAngle));
+
+            return (
+              <g key={dir}>
+                <path
+                  d={quadrantPath(start, end)}
+                  fill={DIRECTION_COLORS[dir]}
+                  stroke="var(--color-border)"
+                  strokeWidth={2}
+                  opacity={isHovered || isSelected ? 1 : 0.75}
+                  className="cursor-pointer transition-all duration-300"
+                  style={{
+                    filter: isHovered ? "brightness(1.25)" : undefined,
+                    transform: isSelected ? `scale(1.02)` : undefined,
+                    transformOrigin: `${CX}px ${CY}px`,
+                  }}
+                  onClick={() => setSelected(selected === dir ? null : dir)}
+                  onMouseEnter={() => setHovered(dir)}
+                  onMouseLeave={() => setHovered(null)}
+                />
+                <text
+                  x={lx}
+                  y={ly - 8}
+                  textAnchor="middle"
+                  className="pointer-events-none text-sm font-bold"
+                  style={{ fill: dir === "east" || dir === "north" ? "#1a1a2e" : "#f5f5f5" }}
+                >
+                  {dirData.ojibwe}
+                </text>
+                <text
+                  x={lx}
+                  y={ly + 10}
+                  textAnchor="middle"
+                  className="pointer-events-none text-xs"
+                  style={{ fill: dir === "east" || dir === "north" ? "#333" : "#ccc" }}
+                >
+                  {dirData.season} · {dirData.medicine[0]}
+                </text>
+              </g>
+            );
+          })}
+
+          {/* Center circle */}
+          <circle
+            cx={CX}
+            cy={CY}
+            r={30}
+            fill="var(--color-background)"
+            stroke="var(--color-border)"
+            strokeWidth={2}
+            className="animate-pulse-center"
+          />
+          <text
+            x={CX}
+            y={CY + 4}
+            textAnchor="middle"
+            className="pointer-events-none text-[10px] font-semibold fill-foreground"
+          >
+            Balance
+          </text>
+        </svg>
+      </div>
+
+      {/* Direction cards grid */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full max-w-4xl">
+        {DIRECTIONS.map((dir) => (
+          <button
+            key={dir.name}
+            onClick={() => setSelected(selected === dir.name ? null : dir.name)}
+            className={`p-4 rounded-lg border text-left transition-all hover:scale-[1.02] ${
+              selected === dir.name ? "ring-2 ring-primary" : ""
+            }`}
+            style={{ borderColor: DIRECTION_COLORS[dir.name] + "60" }}
+          >
+            <div className="flex items-center gap-2 mb-2">
+              <span
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: DIRECTION_COLORS[dir.name] }}
+              />
+              <span className="font-semibold capitalize">{dir.name}</span>
+            </div>
+            <p className="text-xs text-muted-foreground">{dir.ojibwe}</p>
+            <p className="text-xs text-muted-foreground">{dir.season}</p>
+          </button>
+        ))}
+      </div>
+
+      {/* Direction Panel */}
+      {selectedDir && (
+        <DirectionPanel
+          direction={selectedDir}
+          onClose={() => setSelected(null)}
+        />
+      )}
+    </div>
+  );
+}

package/app/relations/page.tsx

@@ -0,0 +1,191 @@
+"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 { toast } from "sonner";
+
+interface GraphNode extends RelationalNode {
+  x: number;
+  y: number;
+}
+
+export default function RelationsPage() {
+  const [nodes, setNodes] = useState<GraphNode[]>([]);
+  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 loadData = useCallback(async () => {
+    try {
+      const [nodesRes, edgesRes] = await Promise.all([fetch("/api/nodes"), fetch("/api/edges")]);
+      const nodesData: RelationalNode[] = await nodesRes.json();
+      const edgesData: RelationalEdge[] = await edgesRes.json();
+
+      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);
+      setEdges(Array.isArray(edgesData) ? edgesData : []);
+    } catch { console.error("Failed to load"); }
+  }, []);
+
+  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>) {
+    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"); }
+  }
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">Relational 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>
+        </div>
+      </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>
+        </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">
+          <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="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> {new Date(selectedNode.created_at).toLocaleDateString()}</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>
+          ) : (
+            <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>
+          )}
+        </div>
+      </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>
+            </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>
+      )}
+    </div>
+  );
+}

package/components/direction-panel.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { type Direction, DIRECTION_COLORS, CEREMONY_ICONS } from "@/lib/types";
+import { X } from "lucide-react";
+import Link from "next/link";
+
+interface DirectionPanelProps {
+  direction: Direction;
+  onClose: () => void;
+}
+
+export function DirectionPanel({ direction, onClose }: DirectionPanelProps) {
+  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="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] }}
+            />
+            {direction.ojibwe}
+            <span className="text-muted-foreground text-lg capitalize">({direction.name})</span>
+          </h2>
+          <p className="text-muted-foreground">
+            {direction.season} · {direction.lifeStage} · {direction.ages}
+          </p>
+        </div>
+        <button onClick={onClose} className="p-1 rounded hover:bg-secondary" aria-label="Close">
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div>
+          <h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground">
+            Medicines
+          </h3>
+          <div className="flex flex-wrap gap-2">
+            {direction.medicine.map((m) => (
+              <span
+                key={m}
+                className="px-3 py-1 rounded-full text-sm border"
+                style={{ borderColor: DIRECTION_COLORS[direction.name] }}
+              >
+                🌿 {m}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground">
+            Teachings
+          </h3>
+          <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] }} />
+                {t}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="md:col-span-2">
+          <h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground">
+            Practices
+          </h3>
+          <div className="flex flex-wrap gap-2">
+            {direction.practices.map((p) => (
+              <span key={p} className="px-3 py-1 rounded-md text-sm bg-secondary">
+                {p}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-3 mt-6 pt-4 border-t">
+        <Link
+          href={`/ceremonies?direction=${direction.name}`}
+          className="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90"
+        >
+          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
+        </Link>
+      </div>
+    </div>
+  );
+}

package/components/navigation.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { Menu, X, ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { WorkspacesPanel, WORKSPACES, type Workspace } from "@/components/workspaces-panel";
+
+const NAV_ITEMS = [
+  { href: "/", label: "Medicine Wheel", color: "#FFD700" },
+  { href: "/graph", label: "Graph", color: "#d4b844" },
+  { href: "/nodes", label: "Nodes", color: "#4a9e5c" },
+  { href: "/relations", label: "Relations", color: "#5a9ec6" },
+  { href: "/ceremonies", label: "Ceremonies", color: "#DC143C" },
+  { href: "/narrative", label: "Narrative", color: "#9a5cc6" },
+  { href: "/narrative/beats", label: "Beats", color: "#c9a23a" },
+  { href: "/narrative/cycles", label: "Cycles", color: "#e8913a" },
+  { href: "/accountability", label: "Accountability", color: "#E8E8E8" },
+];
+
+export function Navigation() {
+  const pathname = usePathname();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [wsOpen, setWsOpen] = useState(false);
+  const [activeWs, setActiveWs] = useState<Workspace>(WORKSPACES[0]);
+
+  return (
+    <>
+      <nav className="fixed top-0 left-0 right-0 z-40 border-b border-border bg-background/80 backdrop-blur-md">
+        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-3 px-4">
+          <button
+            onClick={() => setWsOpen(true)}
+            className="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-secondary"
+            aria-label="Open workspaces"
+          >
+            <span className="h-2 w-2 rounded-full" style={{ background: activeWs.color }} />
+            <span
+              className="hidden sm:inline text-base"
+              style={{ fontFamily: "var(--font-display)" }}
+            >
+              {activeWs.name}
+            </span>
+            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          </button>
+
+          <div className="hidden md:flex items-center gap-1 overflow-hidden">
+            {NAV_ITEMS.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "whitespace-nowrap px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                  pathname === item.href
+                    ? "bg-secondary text-foreground"
+                    : "text-muted-foreground hover:text-foreground hover:bg-secondary/50"
+                )}
+                style={pathname === item.href ? { borderBottom: `2px solid ${item.color}` } : {}}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setMobileOpen(!mobileOpen)}
+              className="md:hidden p-2 rounded-md hover:bg-secondary"
+              aria-label="Toggle menu"
+            >
+              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </button>
+          </div>
+        </div>
+
+        {mobileOpen && (
+          <div className="md:hidden border-t border-border bg-background px-4 pb-4">
+            {NAV_ITEMS.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setMobileOpen(false)}
+                className={cn(
+                  "block px-3 py-2 rounded-md text-sm font-medium",
+                  pathname === item.href
+                    ? "bg-secondary text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </div>
+        )}
+      </nav>
+
+      <WorkspacesPanel
+        open={wsOpen}
+        activeId={activeWs.id}
+        onClose={() => setWsOpen(false)}
+        onSelect={(ws) => { setActiveWs(ws); setWsOpen(false); }}
+      />
+    </>
+  );
+}

package/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/components/workspaces-panel.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type Workspace = {
+  id: string;
+  name: string;
+  direction: "east" | "south" | "west" | "north";
+  color: string;
+  status: "active" | "idle" | "archived";
+  repo: string;
+  blurb: string;
+};
+
+export const WORKSPACES: Workspace[] = [
+  { id: "medicine-wheel", name: "Medicine Wheel",  direction: "east",  color: "#FFD700", status: "active", repo: "jgwill/medicine-wheel",         blurb: "Relational ontology + Four Directions web app" },
+  { id: "iaip",           name: "IAIP Platform",   direction: "south", color: "#DC143C", status: "active", repo: "jgwill/iaip",                   blurb: "Three Universes multi-agent orchestration" },
+  { id: "stc",            name: "STC Workspaces",  direction: "west",  color: "#8888cc", status: "active", repo: "jgwill/stcraft",                blurb: "Structural tension charts across repos" },
+  { id: "tushell",        name: "Tushell Magic Land", direction: "north", color: "#E8E8E8", status: "idle", repo: "jgwill/tushellplatform",        blurb: "Child-friendly knowledge platform" },
+  { id: "articles",       name: "Articles",        direction: "east",  color: "#c9a23a", status: "idle",   repo: "jgwill/medicine-wheel#articles", blurb: "Narrative-technical research" },
+  { id: "pde",            name: "PDE",             direction: "south", color: "#9a5cc6", status: "active", repo: "jgwill/medicine-wheel#pde",      blurb: "Four Directions prompt decomposition" },
+];
+
+const STATUS_DOT: Record<Workspace["status"], string> = {
+  active:   "bg-[var(--mw-wilson-high)]",
+  idle:     "bg-[var(--mw-muted)]",
+  archived: "bg-[var(--mw-wilson-low)]",
+};
+
+export function WorkspacesPanel({
+  open,
+  activeId,
+  onClose,
+  onSelect,
+}: {
+  open: boolean;
+  activeId: string;
+  onClose: () => void;
+  onSelect: (ws: Workspace) => void;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  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"
+        )}
+      />
+      <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"
+        )}
+      >
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+          <div className="mw-h2" style={{ fontSize: "1.25rem" }}>Workspaces</div>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
+            aria-label="Close workspaces panel"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="overflow-y-auto px-3 py-3" style={{ maxHeight: "calc(100vh - 60px)" }}>
+          {WORKSPACES.map((ws) => {
+            const selected = ws.id === activeId;
+            return (
+              <button
+                key={ws.id}
+                onClick={() => onSelect(ws)}
+                className={cn(
+                  "mb-2 w-full rounded-lg border p-3 text-left transition-colors",
+                  selected
+                    ? "bg-secondary"
+                    : "border-border bg-background hover:bg-secondary/50"
+                )}
+                style={{
+                  borderLeft: `3px solid ${ws.color}`,
+                  borderTopColor: selected ? ws.color + "60" : undefined,
+                  borderRightColor: selected ? ws.color + "60" : undefined,
+                  borderBottomColor: selected ? ws.color + "60" : undefined,
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  <span className={cn("h-2 w-2 rounded-full", STATUS_DOT[ws.status])} />
+                  <span className="text-sm font-semibold">{ws.name}</span>
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">{ws.blurb}</div>
+                <div className="mt-1 font-mono text-[11px] text-muted-foreground/80">{ws.repo}</div>
+              </button>
+            );
+          })}
+        </div>
+      </aside>
+    </>
+  );
+}