@medicine-wheel/app 0.6.3 → 0.7.0

package/app/episodes/[id]/page.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+/**
+ * One episode: what it is, what it still holds open, and what it touches.
+ *
+ * The three panels answer the three things the graph could not. What this is,
+ * from the node itself. What is open, from `?kind=attention&parent_id=<id>` —
+ * a query the API has always accepted and no page ever sent. What it relates to,
+ * from `/api/nodes/[id]/web`, which walks the traversal that shipped in
+ * `relational-query` and went unimported.
+ *
+ * The relations panel is where the wheel's current honesty shows. 101 of 106
+ * containment links live only in `metadata.parent_id` and were never written as
+ * edges, so most episodes will show a parent here that has no relation behind
+ * it. The panel names that rather than rendering an empty box, because an empty
+ * box reads as "this episode touches nothing" when the truth is "the edge was
+ * never written".
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { use } from "react";
+import Link from "next/link";
+import type { RelationalNode, RelationalEdge } from "@/lib/types";
+
+// `description` lives on the store's node, not on ontology-core's — the same
+// widening `app/nodes/page.tsx` declares as `NodeRecord`. Named EpisodeNode
+// rather than Node so it cannot be confused with the DOM's global `Node`.
+type EpisodeNode = RelationalNode & {
+  description?: string;
+  metadata?: Record<string, unknown>;
+};
+
+const DIRECTION_ICONS: Record<string, string> = {
+  east: "🌅",
+  south: "🔥",
+  west: "🌊",
+  north: "❄️",
+};
+
+function metaString(node: EpisodeNode | null, key: string): string | null {
+  const value = node?.metadata?.[key];
+  return typeof value === "string" && value ? value : null;
+}
+
+export default function EpisodePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id: rawId } = use(params);
+  const id = decodeURIComponent(rawId);
+
+  const [episode, setEpisode] = useState<EpisodeNode | null>(null);
+  const [attention, setAttention] = useState<EpisodeNode[]>([]);
+  const [web, setWeb] = useState<{ nodes: EpisodeNode[]; edges: RelationalEdge[] } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const encoded = encodeURIComponent(id);
+      const [nodeRes, attentionRes, webRes] = await Promise.all([
+        fetch(`/api/nodes?kind=chronicle_episode&limit=all`),
+        fetch(`/api/nodes?kind=attention&parent_id=${encoded}&limit=all`),
+        fetch(`/api/nodes/${encoded}/web?depth=1`),
+      ]);
+
+      if (!nodeRes.ok) throw new Error(`Episodes: ${nodeRes.status}`);
+      const all: EpisodeNode[] = (await nodeRes.json()).nodes ?? [];
+      const found = all.find((n) => n.id === id) ?? null;
+      setEpisode(found);
+
+      setAttention(attentionRes.ok ? ((await attentionRes.json()).nodes ?? []) : []);
+
+      // A 404 here means the node is not in the wheel at all — distinct from a
+      // node with no relations, which is a 200 carrying only its own root.
+      setWeb(webRes.ok ? await webRes.json() : null);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const parentId = metaString(episode, "parent_id");
+  const neighbours = (web?.nodes ?? []).filter((n) => n.id !== id);
+  const parentHasEdge = Boolean(parentId && neighbours.some((n) => n.id === parentId));
+
+  if (loading) {
+    return <div className="p-6 max-w-4xl mx-auto text-sm text-muted-foreground">Loading…</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="p-6 max-w-4xl mx-auto">
+        <Link href="/episodes" className="text-sm text-muted-foreground hover:underline">
+          ← Episodes
+        </Link>
+        <div className="mt-4 p-4 border rounded-lg bg-card">
+          <p className="text-sm font-medium">The chronicle did not answer.</p>
+          <p className="text-sm text-muted-foreground">{error}</p>
+          <button onClick={load} className="mw-btn mw-btn--ghost mt-2">
+            Try again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!episode) {
+    return (
+      <div className="p-6 max-w-4xl mx-auto">
+        <Link href="/episodes" className="text-sm text-muted-foreground hover:underline">
+          ← Episodes
+        </Link>
+        <p className="mt-4 text-sm text-muted-foreground">
+          No episode node with id <code className="font-mono">{id}</code>. The wheel answered and
+          does not hold it — 102 of 185 episode folders on disk have no node yet.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto space-y-6">
+      <div>
+        <Link href="/episodes" className="text-sm text-muted-foreground hover:underline">
+          ← Episodes
+        </Link>
+        <div className="flex items-start justify-between gap-3 flex-wrap mt-2">
+          <h1 className="text-2xl font-bold">{episode.name}</h1>
+          {episode.direction && (
+            <span className={`mw-badge mw-badge--${episode.direction}`}>
+              {DIRECTION_ICONS[episode.direction]} {episode.direction}
+            </span>
+          )}
+        </div>
+        <p className="font-mono text-xs text-muted-foreground mt-1 break-all">{episode.id}</p>
+        {episode.description && <p className="text-sm mt-3">{episode.description}</p>}
+      </div>
+
+      <section>
+        <h2 className="text-sm font-semibold mb-2">
+          Open attention {attention.length > 0 && `(${attention.length})`}
+        </h2>
+        {attention.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            Nothing held open against this episode.
+          </p>
+        ) : (
+          <ul className="space-y-2">
+            {attention.map((item) => (
+              <li key={item.id} className="p-3 border rounded-lg bg-card">
+                <p className="text-sm font-medium">{item.name}</p>
+                {item.description && (
+                  <p className="text-sm text-muted-foreground mt-1">{item.description}</p>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <h2 className="text-sm font-semibold mb-2">
+          Relations {neighbours.length > 0 && `(${neighbours.length})`}
+        </h2>
+
+        {parentId && !parentHasEdge && (
+          <p className="mb-2 text-xs text-muted-foreground border rounded-lg p-3 bg-card">
+            This episode records a parent in <code>metadata.parent_id</code> (
+            <code className="break-all">{parentId}</code>) that was never written as a relation, so
+            it does not appear below and the graph cannot draw it. 101 of 106 containment links in
+            this wheel are in that state.
+          </p>
+        )}
+
+        {neighbours.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No relation reaches this episode. {parentId ? "See the note above." : ""}
+          </p>
+        ) : (
+          <ul className="space-y-2">
+            {neighbours.map((n) => {
+              const edge = (web?.edges ?? []).find(
+                (e) =>
+                  (e.from_id === id && e.to_id === n.id) ||
+                  (e.to_id === id && e.from_id === n.id),
+              );
+              return (
+                <li
+                  key={n.id}
+                  className="p-3 border rounded-lg bg-card flex items-baseline justify-between gap-3 flex-wrap"
+                >
+                  <span className="min-w-0">
+                    <span className="text-sm font-medium">{n.name}</span>
+                    <span className="font-mono text-xs text-muted-foreground block break-all">
+                      {n.id}
+                    </span>
+                  </span>
+                  {edge && (
+                    <span className="mw-badge shrink-0" title="relationship_type">
+                      {edge.from_id === id ? "→" : "←"} {edge.relationship_type}
+                    </span>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+
+        <Link
+          href={`/graph?scope=${encodeURIComponent(id)}`}
+          className="mw-btn mw-btn--ghost mt-3 inline-block"
+        >
+          Open in graph
+        </Link>
+      </section>
+    </div>
+  );
+}

package/app/episodes/page.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+/**
+ * The episodes surface — "what am I working on, and what came before it".
+ *
+ * `/api/nodes` has accepted `?kind=` and `?parent_id=` for some time, and no
+ * page ever passed either. So the only way to see an episode in this app was to
+ * find its dot on a wheel of 205, where 37% of the mass has no edge at all and
+ * the largest hubs are systemd units. The wheel could answer this question and
+ * was never asked it.
+ *
+ * Sorted by `metadata.occurred_at` when present, falling back to `created_at`.
+ * That fallback is not a nicety: `created_at` records when the wheel *learned*
+ * of an episode, not when the episode happened — 41 of 83 episodes disagree with
+ * their own date, and twelve May episodes all carry the same September timestamp
+ * from one import batch. Until `occurred_at` is backfilled this list is ordered
+ * by registration for those rows, and it says so rather than implying a history
+ * it does not have.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import type { RelationalNode } from "@/lib/types";
+
+// `description` lives on the store's node, not on ontology-core's — the same
+// widening `app/nodes/page.tsx` declares as `NodeRecord`.
+type Episode = RelationalNode & {
+  description?: string;
+  metadata?: Record<string, unknown>;
+};
+
+const DIRECTION_ICONS: Record<string, string> = {
+  east: "🌅",
+  south: "🔥",
+  west: "🌊",
+  north: "❄️",
+};
+
+/** `chronicle:2026-06-19-episode-068-extending-…` → `068`, or null. */
+function episodeNumber(id: string): string | null {
+  const match = id.match(/episode-(\d+)/i);
+  return match ? match[1] : null;
+}
+
+/** The date the episode happened, if the wheel knows it apart from registration. */
+function occurredAt(node: Episode): string | null {
+  const value = node.metadata?.occurred_at;
+  return typeof value === "string" && value ? value : null;
+}
+
+function sortKey(node: Episode): string {
+  return occurredAt(node) ?? node.created_at ?? "";
+}
+
+function formatDate(iso: string): string {
+  if (!iso) return "—";
+  return iso.slice(0, 10);
+}
+
+export default function EpisodesPage() {
+  const [episodes, setEpisodes] = useState<Episode[]>([]);
+  const [attentionCounts, setAttentionCounts] = useState<Record<string, number>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      // limit=all, not the provider's 100-row default. The chronicle holds more
+      // episodes than a default page, and a list that silently ends is worse
+      // than one that refuses to load.
+      const [episodesRes, attentionRes] = await Promise.all([
+        fetch("/api/nodes?kind=chronicle_episode&limit=all"),
+        fetch("/api/nodes?kind=attention&limit=all"),
+      ]);
+
+      if (!episodesRes.ok) throw new Error(`Episodes: ${episodesRes.status}`);
+      const episodesBody = await episodesRes.json();
+      const list: Episode[] = episodesBody.nodes ?? [];
+
+      const counts: Record<string, number> = {};
+      if (attentionRes.ok) {
+        const attentionBody = await attentionRes.json();
+        for (const item of (attentionBody.nodes ?? []) as Episode[]) {
+          const parent = item.metadata?.parent_id;
+          if (typeof parent === "string") counts[parent] = (counts[parent] ?? 0) + 1;
+        }
+      }
+
+      setEpisodes([...list].sort((a, b) => sortKey(b).localeCompare(sortKey(a))));
+      setAttentionCounts(counts);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const visible = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return episodes;
+    return episodes.filter(
+      (e) =>
+        e.name.toLowerCase().includes(needle) ||
+        e.id.toLowerCase().includes(needle) ||
+        (e.description ?? "").toLowerCase().includes(needle),
+    );
+  }, [episodes, query]);
+
+  /** How many rows are ordered by registration rather than by when they happened. */
+  const undatedCount = useMemo(
+    () => episodes.filter((e) => !occurredAt(e)).length,
+    [episodes],
+  );
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      <div className="flex items-start justify-between mb-6 gap-4 flex-wrap">
+        <div>
+          <h1 className="text-2xl font-bold">Episodes</h1>
+          <p className="text-sm text-muted-foreground">
+            {loading ? "Reading the chronicle…" : `${episodes.length} episodes in the wheel`}
+          </p>
+        </div>
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Filter by name or id"
+          className="mw-input max-w-xs"
+          aria-label="Filter episodes"
+        />
+      </div>
+
+      {undatedCount > 0 && !loading && (
+        <p className="mb-4 text-xs text-muted-foreground border rounded-lg p-3 bg-card">
+          {undatedCount} of {episodes.length} episodes have no <code>occurred_at</code>, so they
+          are ordered by when the wheel recorded them rather than by when they happened. That is
+          registration order, not history.
+        </p>
+      )}
+
+      {error && (
+        <div className="mb-4 p-4 border rounded-lg bg-card">
+          <p className="text-sm font-medium">The chronicle did not answer.</p>
+          <p className="text-sm text-muted-foreground">{error}</p>
+          <button onClick={load} className="mw-btn mw-btn--ghost mt-2">
+            Try again
+          </button>
+        </div>
+      )}
+
+      {!loading && episodes.length === 0 && !error && (
+        <p className="text-sm text-muted-foreground">
+          No node carries <code>metadata.kind: &quot;chronicle_episode&quot;</code>. The wheel is
+          reachable and holds no episodes — which is a different thing from the wheel being
+          unreachable.
+        </p>
+      )}
+
+      <ul className="space-y-2">
+        {visible.map((episode) => {
+          const number = episodeNumber(episode.id);
+          const open = attentionCounts[episode.id] ?? 0;
+          const dated = occurredAt(episode);
+          return (
+            <li key={episode.id}>
+              <Link
+                href={`/episodes/${encodeURIComponent(episode.id)}`}
+                className="block p-4 border rounded-lg bg-card hover:bg-secondary/50 transition-colors"
+              >
+                <div className="flex items-baseline justify-between gap-3 flex-wrap">
+                  <div className="flex items-baseline gap-2 min-w-0">
+                    {number && (
+                      <span className="font-mono text-xs text-muted-foreground shrink-0">
+                        {number}
+                      </span>
+                    )}
+                    <span className="font-medium truncate">{episode.name}</span>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    {open > 0 && (
+                      <span className="mw-badge" title={`${open} open attention items`}>
+                        {open} attention
+                      </span>
+                    )}
+                    {episode.direction && (
+                      <span className={`mw-badge mw-badge--${episode.direction}`}>
+                        {DIRECTION_ICONS[episode.direction]} {episode.direction}
+                      </span>
+                    )}
+                    <span
+                      className="font-mono text-xs text-muted-foreground"
+                      title={dated ? "occurred_at" : "created_at — when the wheel learned this"}
+                    >
+                      {formatDate(dated ?? episode.created_at ?? "")}
+                      {!dated && "*"}
+                    </span>
+                  </div>
+                </div>
+                {episode.description && (
+                  <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                    {episode.description}
+                  </p>
+                )}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+
+      {!loading && visible.length === 0 && episodes.length > 0 && (
+        <p className="text-sm text-muted-foreground">Nothing matches “{query}”.</p>
+      )}
+    </div>
+  );
+}