@manta-eu/horns-client 0.1.0 → 0.1.2

package/dist/app/horn-page.js

@@ -1,25 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isPresent } from "@manta-eu/lib/present";
 import { useParams, useSearchParams } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { variablesFromSearch } from "@manta-eu/horns/render";
 import { BackLink, DatastoreMissing, ErrorState, Loading } from "../components/states";
 import { hornsPath } from "./paths";
 import { HornStudio } from "./horn-studio";
 import { useSavedHorn } from "./saved-horn";
 import { VariableBar } from "./variable-bar";
-import { MantaSparqlProvider } from "../lib/manta/providers";
-import { useMantaSession } from "../lib/manta/session";
 // A saved Horn, as the Studio's whole screen: the document comes back from the datastore and the snapshot is
 // built from it, so what is on screen is what is stored rather than what a client happened to be holding.
 export function HornPage() {
-    const { datastoreId, slug } = useParams();
-    const { datastores } = useMantaSession();
-    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
-    if (!isPresent(datastore)) {
+    const { datastoreId } = useActiveDatastore();
+    const { slug } = useParams();
+    if (!isPresent(datastoreId)) {
         return (_jsx(Centered, { children: _jsx(DatastoreMissing, {}) }));
     }
-    // The provider supplies the query client, so the reader has to sit inside it.
-    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(SavedHornPage, { slug: slug ?? "", datastoreId: datastore.id }) }));
+    return _jsx(SavedHornPage, { slug: slug ?? "", datastoreId: datastoreId });
 }
 /** Until there is a Horn to put in the Studio, the screen is just this. */
 function Centered({ children }) {
@@ -29,10 +26,10 @@ function SavedHornPage({ datastoreId, slug }) {
     const [search] = useSearchParams();
     const horn = useSavedHorn(datastoreId, slug);
     if (horn.isError) {
-        return (_jsxs(Centered, { children: [_jsx(BackLink, { to: hornsPath(datastoreId), label: "All Horns" }), _jsx(ErrorState, { title: "That Horn could not be opened", hint: horn.error instanceof Error ? horn.error.message : "It may have been removed." })] }));
+        return (_jsxs(Centered, { children: [_jsx(BackLink, { to: hornsPath(), label: "All Horns" }), _jsx(ErrorState, { title: "That Horn could not be opened", hint: horn.error instanceof Error ? horn.error.message : "It may have been removed." })] }));
     }
     if (!isPresent(horn.data)) {
         return (_jsx(Centered, { children: _jsx(Loading, { label: "Opening the Horn\u2026" }) }));
     }
-    return (_jsx(HornStudio, { datastoreId: datastoreId, slug: slug, stored: horn.data.horn, revision: horn.data.revision, backTo: hornsPath(datastoreId), variables: variablesFromSearch(horn.data.horn, search.toString()), toolbar: _jsx(VariableBar, { horn: horn.data.horn }) }));
+    return (_jsx(HornStudio, { datastoreId: datastoreId, slug: slug, stored: horn.data.horn, revision: horn.data.revision, backTo: hornsPath(), variables: variablesFromSearch(horn.data.horn, search.toString()), toolbar: _jsx(VariableBar, { horn: horn.data.horn }) }));
 }

package/dist/app/horn-studio.js

@@ -11,10 +11,10 @@ import { describeHornChange, minViewWidth, visualEditOps } from "@manta-eu/horns
 import { HornSnapshotView } from "@manta-eu/horns-kit";
 import { writtenHornView } from "../components/written-horn-view";
 import { catalogCardView } from "../components/catalog-card-view";
-import { ReadTheCode, writtenReviewStates } from "../components/read-the-code";
+import { ReadTheCode, ReadTheCodeDialog, writtenReviewStates } from "../components/read-the-code";
 import { PlanRunDialog, usePlanRuns } from "../components/plan-runs";
 import { sendHornScreenshot } from "../components/rasterize";
-import { reviewHorn } from "../lib/horn-review";
+import { nameOfView, reviewHorn } from "../lib/horn-review";
 import { StudioChat } from "../components/studio-chat";
 import { ErrorState, Loading } from "../components/states";
 import { isRecord } from "@manta-eu/horns";
@@ -42,12 +42,13 @@ function failureOf(body, status) {
 }
 /** How much a card grows or shrinks by: a third of the twelve columns, so the page keeps its rhythm. */
 const widthStep = 4;
+// Trimmed after the cut, not before it: a slug ending in a dash is not one the schema accepts.
 const kebab = (name) => name
     .trim()
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 60);
+    .slice(0, 60)
+    .replace(/^-+|-+$/g, "");
 /**
  * The Studio as a whole screen, the way Lovable lays out a project: the conversation down the left, the Horn in
  * a frame on the right, and saving in the bar across the top.
@@ -87,6 +88,10 @@ export function HornStudio(props) {
     // Hashing is async, so the states are held rather than derived: a card shows what was last worked out for
     // the draft it is drawing.
     const [reviewStates, setReviewStates] = useState({});
+    // Save does not refuse a Horn whose code nobody read; it offers the reading, then goes on saving.
+    const [toRead, setToRead] = useState([]);
+    const [savingAfterReading, setSavingAfterReading] = useState(false);
+    const [readingTotal, setReadingTotal] = useState(0);
     useEffect(() => {
         let live = true;
         void writtenReviewStates(shown.horn).then((states) => {
@@ -182,7 +187,8 @@ export function HornStudio(props) {
                 setProgress([...thinking]);
                 review = await reviewHorn({ datastoreId, horn: reply.horn, asked, variables });
                 for (const problem of review.problems) {
-                    thinking.push({ title: `“${problem.viewId}” would not draw`, detail: problem.message });
+                    const named = nameOfView(reply.horn, problem.viewId);
+                    thinking.push({ title: `“${named}” would not draw`, detail: problem.message });
                 }
                 if (isPresent(review.advice)) {
                     const count = review.advice.length;
@@ -198,7 +204,7 @@ export function HornStudio(props) {
             }
             const said = [
                 // A view that would not draw is not an opinion; it goes first, and it is a fact the Studio can act on.
-                ...review.problems.map((problem) => `“${problem.viewId}” does not draw: ${problem.message}`),
+                ...review.problems.map((problem) => `“${nameOfView(reply.horn, problem.viewId)}” does not draw: ${problem.message}`),
                 ...review.advice,
             ];
             setEntries([
@@ -350,14 +356,37 @@ export function HornStudio(props) {
             setSaveFailure("Give the Horn a title before saving it: its address is made from the title.");
             return;
         }
+        // Asked of the Horn being saved rather than the one on screen, which may be an earlier version. The
+        // save route refuses unread code, so meeting it here turns a dead end into the reading it asks for.
+        const states = await writtenReviewStates(saving.horn);
+        const unread = saving.horn.views
+            .map((view) => view.id)
+            .filter((id) => states[id] === "unread" || states[id] === "stale");
+        if (unread.length > 0) {
+            setSaveFailure(undefined);
+            setToRead(unread);
+            setReadingTotal(unread.length);
+            setSavingAfterReading(true);
+            return;
+        }
         setSaveState("saving");
         setSaveFailure(undefined);
         try {
-            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/${encodeURIComponent(name)}`, {
+            const put = (at) => fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/${encodeURIComponent(at)}`, {
                 method: "PUT",
                 headers: { "content-type": "application/json" },
                 body: JSON.stringify({ horn: saving.horn, ...(isPresent(baseRevision) ? { baseRevision } : {}) }),
             });
+            // A Horn that has never been saved takes its address from its title, and two Horns can be given the
+            // same title — every Horn built for a plan nobody named is "Suggested changes". The name is taken, not
+            // the Horn: saving under the next one free is what a person means, and a 409 here can mean nothing
+            // else, because revising a Horn is what carries a `baseRevision`.
+            let at = name;
+            let response = await put(at);
+            for (let next = 2; response.status === 409 && !isPresent(baseRevision) && next <= 20; next += 1) {
+                at = `${name}-${next}`;
+                response = await put(at);
+            }
             const body = await response.json().catch(() => undefined);
             if (!response.ok) {
                 setSaveState("failed");
@@ -365,13 +394,13 @@ export function HornStudio(props) {
                 return;
             }
             setBaseRevision(isRecord(body) && typeof body["revision"] === "string" ? body["revision"] : baseRevision);
-            setSlug(name);
+            setSlug(at);
             setSavedId(saving.id);
             setSaveState("idle");
             // The showcase leads with a picture of the Horn, and this browser has it drawn already. A saved Horn is
             // saved whether or not the picture was taken, so this cannot fail the save and is never waited on.
             if (isPresent(snapshot.data)) {
-                void sendHornScreenshot({ datastoreId, slug: name, snapshot: snapshot.data });
+                void sendHornScreenshot({ datastoreId, slug: at, snapshot: snapshot.data });
             }
         }
         catch (caught) {
@@ -379,6 +408,13 @@ export function HornStudio(props) {
             setSaveFailure(caught instanceof Error ? caught.message : String(caught));
         }
     }
+    useEffect(() => {
+        if (!savingAfterReading || toRead.length > 0)
+            return;
+        setSavingAfterReading(false);
+        // The queue emptying is the event; `save` is redefined every render and is not one.
+        void save();
+    }, [savingAfterReading, toRead]);
     // Where things stand, as a sentence: a badge says less, and an address like "/spend-watch" says nothing.
     const status = saveState === "saving"
         ? "Saving…"
@@ -391,7 +427,24 @@ export function HornStudio(props) {
                     : "Not saved yet";
     const showChat = !mobile || pane === "chat";
     const showPreview = !mobile || pane === "preview";
-    return (_jsxs("div", { "data-horn-studio": true, className: "flex h-svh w-full flex-col bg-sidebar", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-3 px-3", children: [mobile ? (_jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: ArrowLeft, "aria-label": "All Horns", onClick: () => navigate(backTo) })) : (_jsx(Button, { variant: "ghost", size: "sm", icon: ArrowLeft, showLeftIcon: true, onClick: () => navigate(backTo), children: "All Horns" })), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-default-foreground", children: latest.horn.title }), _jsx("span", { "data-save-status": true, className: "truncate text-xs text-muted-foreground", children: status })] }), mobile ? (_jsx("div", { className: "flex items-center gap-1 rounded-full bg-muted p-1", role: "group", "aria-label": "Show", children: ["chat", "preview"].map((each) => (_jsx(Button, { variant: pane === each ? "secondary" : "ghost", size: "xs", "aria-pressed": pane === each, onClick: () => setPane(each), children: each === "chat" ? "Chat" : "Preview" }, each))) })) : null, _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [unsaved ? (_jsx(Button, { variant: "secondary", size: "sm", disabled: saveState === "saving" || pending, onClick: discard, children: mobile ? "Discard" : "Discard changes" })) : null, _jsx(Button, { variant: "primary", size: "sm", disabled: !unsaved || saveState === "saving" || pending, onClick: () => void save(), children: saveState === "saving" ? "Saving…" : mobile ? "Save" : "Save changes" })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [showChat ? (_jsxs("aside", { ref: panelRef, "aria-label": "Studio chat", className: "flex min-h-0 shrink-0 flex-col", style: mobile ? { width: "100%" } : { width: panelWidth }, children: [isPresent(saveFailure) ? (_jsx("div", { className: "px-4 pt-2", children: _jsx(ErrorState, { title: "That save did not go through", hint: saveFailure }) })) : null, _jsx(StudioChat, { entries: entries, pending: pending, progress: progress, previewing: shown.id, welcome: welcome ?? "What would you like to change?", reassurance: reassurance ?? "Say it in your own words. Nothing is saved until you choose Save changes.", starters: starters ?? restyleStarters, placeholder: placeholder ?? "Describe a change, in your own words…", onSend: (text) => void send(text), onPreview: (id) => {
+    const reading = (() => {
+        const [first] = toRead;
+        if (first === undefined)
+            return undefined;
+        const view = latest.horn.views.find((candidate) => candidate.id === first);
+        if (view === undefined || "ref" in view || view.render.kind !== "tsx")
+            return undefined;
+        return { id: first, title: view.title, source: view.render.source, state: reviewStates[first] ?? "unread" };
+    })();
+    return (_jsxs("div", { "data-horn-studio": true, className: "flex h-svh w-full flex-col bg-sidebar", children: [reading === undefined ? null : (_jsx(ReadTheCodeDialog, { viewId: reading.id, title: reading.title, source: reading.source, state: reading.state, open: true, standing: { at: readingTotal - toRead.length + 1, of: readingTotal }, onClose: () => {
+                    // "Not yet" stops the whole save, rather than moving on to the next one unread.
+                    setToRead([]);
+                    setSavingAfterReading(false);
+                }, onKeep: (change) => {
+                    // Only once the keep is in the draft: the save that follows the last one reads the draft, and
+                    // a draft still missing it looks exactly like code nobody read.
+                    void edit(change, `Read and kept the code for "${reading.title}".`).then(() => setToRead((was) => was.slice(1)));
+                } })), _jsxs("header", { className: "flex h-14 shrink-0 items-center gap-3 px-3", children: [mobile ? (_jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: ArrowLeft, "aria-label": "All Horns", onClick: () => navigate(backTo) })) : (_jsx(Button, { variant: "ghost", size: "sm", icon: ArrowLeft, showLeftIcon: true, onClick: () => navigate(backTo), children: "All Horns" })), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-default-foreground", children: latest.horn.title }), _jsx("span", { "data-save-status": true, className: "truncate text-xs text-muted-foreground", children: status })] }), mobile ? (_jsx("div", { className: "flex items-center gap-1 rounded-full bg-muted p-1", role: "group", "aria-label": "Show", children: ["chat", "preview"].map((each) => (_jsx(Button, { variant: pane === each ? "secondary" : "ghost", size: "xs", "aria-pressed": pane === each, onClick: () => setPane(each), children: each === "chat" ? "Chat" : "Preview" }, each))) })) : null, _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [unsaved ? (_jsx(Button, { variant: "secondary", size: "sm", disabled: saveState === "saving" || pending, onClick: discard, children: mobile ? "Discard" : "Discard changes" })) : null, _jsx(Button, { variant: "primary", size: "sm", disabled: !unsaved || saveState === "saving" || pending, onClick: () => void save(), children: saveState === "saving" ? "Saving…" : mobile ? "Save" : "Save changes" })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [showChat ? (_jsxs("aside", { ref: panelRef, "aria-label": "Studio chat", className: "flex min-h-0 shrink-0 flex-col", style: mobile ? { width: "100%" } : { width: panelWidth }, children: [isPresent(saveFailure) ? (_jsx("div", { className: "px-4 pt-2", children: _jsx(ErrorState, { title: "That save did not go through", hint: saveFailure }) })) : null, _jsx(StudioChat, { entries: entries, pending: pending, progress: progress, previewing: shown.id, welcome: welcome ?? "What would you like to change?", reassurance: reassurance ?? "Say it in your own words. Nothing is saved until you choose Save changes.", starters: starters ?? restyleStarters, placeholder: placeholder ?? "Describe a change, in your own words…", onSend: (text) => void send(text), onPreview: (id) => {
                                     setViewing(id === latest.id ? undefined : id);
                                     if (mobile)
                                         setPane("preview");

package/dist/app/horn-view-page.js

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { isPresent } from "@manta-eu/lib/present";
 import { Link, useParams, useSearchParams } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { Camera, Link2, Pencil } from "lucide-react";
 import { Button, Input } from "@manta-eu/react";
 import { hornSnapshotSchema, variablesFromSearch } from "@manta-eu/horns/render";
@@ -11,24 +12,23 @@ import { writtenHornView } from "../components/written-horn-view";
 import { catalogCardView } from "../components/catalog-card-view";
 import { PlanRunDialog, usePlanRuns } from "../components/plan-runs";
 import { sendHornScreenshot } from "../components/rasterize";
+import { useExplainDialog } from "../components/explain-dialog";
+import { useHornVariables } from "../lib/horn-variables";
 import { DatastoreMissing, ErrorState, Loading } from "../components/states";
 import { hornPath, hornsPath } from "./paths";
 import { useSavedHorn } from "./saved-horn";
 import { VariableBar } from "./variable-bar";
 import { isRecord } from "@manta-eu/horns";
-import { MantaSparqlProvider } from "../lib/manta/providers";
-import { useMantaSession } from "../lib/manta/session";
 import { appTheme } from "../lib/theme";
 // A saved Horn as the thing itself: what a shared link opens. No chat, nothing to save — the URL is the state,
 // so the link somebody is sent draws exactly the Horn they were looking at, filters and all. The plans behind a
 // view are still offered here, because a person who can open the Horn is a person who can act on it.
 export function HornViewPage() {
-    const { datastoreId, slug } = useParams();
-    const { datastores } = useMantaSession();
-    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
-    if (!isPresent(datastore))
+    const { datastoreId } = useActiveDatastore();
+    const { slug } = useParams();
+    if (!isPresent(datastoreId))
         return _jsx(DatastoreMissing, {});
-    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(Viewer, { datastoreId: datastore.id, slug: slug ?? "" }) }));
+    return _jsx(Viewer, { datastoreId: datastoreId, slug: slug ?? "" });
 }
 function ShareLink() {
     const [shown, setShown] = useState();
@@ -60,10 +60,14 @@ function UpdatePicture({ datastoreId, slug, snapshot }) {
     return (_jsxs(_Fragment, { children: [problem === undefined ? null : (_jsx("span", { role: "alert", className: "text-xs text-muted-foreground", children: problem })), _jsxs(Button, { variant: "secondary", size: "sm", disabled: state === "working", onClick: () => void take(), children: [_jsx(Camera, { size: 14, "aria-hidden": "true" }), state === "working" ? "Taking…" : state === "kept" ? "Picture updated" : "Update picture"] })] }));
 }
 function Viewer({ datastoreId, slug }) {
+    const explain = useExplainDialog();
     const [search] = useSearchParams();
     const saved = useSavedHorn(datastoreId, slug);
     const horn = saved.data?.horn;
     const variables = horn ? variablesFromSearch(horn, search.toString()) : {};
+    // Writing goes through nuqs, which owns the URL; reading stays with `variablesFromSearch`, which is what
+    // types a value against the variable that declared it.
+    const urlVariables = useHornVariables(horn);
     const snapshot = useQuery({
         enabled: isPresent(horn),
         queryKey: ["horn-view", datastoreId, slug, saved.data?.revision ?? "", variables],
@@ -90,7 +94,7 @@ function Viewer({ datastoreId, slug }) {
     }
     if (!isPresent(horn))
         return _jsx(Loading, { label: "Opening the Horn\u2026", rows: 3 });
-    return (_jsxs("div", { "data-horn-viewer": true, className: "flex w-full flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(Link, { to: hornsPath(datastoreId), className: "text-sm text-muted-foreground hover:text-default-foreground", children: "All Horns" }), _jsx(VariableBar, { horn: horn })] }), _jsxs("div", { className: "flex items-center gap-2", children: [planRuns.problem === undefined ? null : (_jsx("span", { role: "alert", className: "text-xs text-muted-foreground", children: planRuns.problem })), _jsx(UpdatePicture, { datastoreId: datastoreId, slug: slug, snapshot: snapshot.data }), _jsx(ShareLink, {}), _jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: hornPath(datastoreId, slug), children: [_jsx(Pencil, { size: 14, "aria-hidden": "true" }), "Change it"] }) })] })] }), snapshot.isError ? (_jsx(ErrorState, { title: "The Horn could not be drawn", hint: snapshot.error.message })) : !isPresent(snapshot.data) ? (_jsx(Loading, { label: "Drawing the Horn\u2026", rows: 4 })) : (
+    return (_jsxs("div", { "data-horn-viewer": true, className: "flex w-full flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(Link, { to: hornsPath(), className: "text-sm text-muted-foreground hover:text-default-foreground", children: "All Horns" }), _jsx(VariableBar, { horn: horn })] }), _jsxs("div", { className: "flex items-center gap-2", children: [planRuns.problem === undefined ? null : (_jsx("span", { role: "alert", className: "text-xs text-muted-foreground", children: planRuns.problem })), _jsx(UpdatePicture, { datastoreId: datastoreId, slug: slug, snapshot: snapshot.data }), _jsx(ShareLink, {}), _jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: hornPath(slug), children: [_jsx(Pencil, { size: 14, "aria-hidden": "true" }), "Change it"] }) })] })] }), snapshot.isError ? (_jsx(ErrorState, { title: "The Horn could not be drawn", hint: snapshot.error.message })) : !isPresent(snapshot.data) ? (_jsx(Loading, { label: "Drawing the Horn\u2026", rows: 4 })) : (
             // The Horn draws its own page, title and canvas.
-            _jsxs("div", { "data-horn-preview": true, className: "w-full overflow-hidden rounded-xl", children: [_jsx(HornSnapshotView, { snapshot: snapshot.data, mode: "page", theme: appTheme(), planActions: planRuns.actions, writtenView: writtenHornView, catalogCard: catalogCardView }), _jsx(PlanRunDialog, { runs: planRuns, labels: snapshot.data.labels })] }))] }));
+            _jsxs("div", { "data-horn-preview": true, className: "w-full overflow-hidden rounded-xl", children: [_jsx(HornSnapshotView, { snapshot: snapshot.data, mode: "page", theme: appTheme(), planActions: planRuns.actions, writtenView: writtenHornView, catalogCard: catalogCardView, explain: explain.open, onVariableChange: urlVariables.set }), _jsx(PlanRunDialog, { runs: planRuns, labels: snapshot.data.labels }), explain.dialog] }))] }));
 }

package/dist/app/horns-page.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isPresent } from "@manta-eu/lib/present";
-import { Link, useParams } from "react-router";
+import { Link } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { ChevronRight, Columns3, Plus } from "lucide-react";
 import { Button } from "@manta-eu/react";
 import { PageHeader } from "../components/page-header";
@@ -8,15 +9,11 @@ import { DatastoreMissing, EmptyState, ErrorState, Loading } from "../components
 import { hornViewPath, newHornPath } from "./paths";
 import { useQuery } from "@tanstack/react-query";
 import { isRecord } from "@manta-eu/horns";
-import { MantaSparqlProvider } from "../lib/manta/providers";
-import { useMantaSession } from "../lib/manta/session";
 export function HornsPage() {
-    const { datastoreId } = useParams();
-    const { datastores } = useMantaSession();
-    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
-    if (!isPresent(datastore))
+    const { datastoreId } = useActiveDatastore();
+    if (!isPresent(datastoreId))
         return _jsx(DatastoreMissing, {});
-    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(HornsIn, { datastoreId: datastore.id }) }));
+    return _jsx(HornsIn, { datastoreId: datastoreId });
 }
 function HornsIn({ datastoreId }) {
     const horns = useQuery({
@@ -39,5 +36,5 @@ function HornsIn({ datastoreId }) {
                 : []);
         },
     });
-    return (_jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsx(PageHeader, { title: "Horns", description: "Dashboards and apps made from your data. Open one to look at it or change it, or describe a new one.", actions: _jsx(Button, { variant: "primary", asChild: true, children: _jsxs(Link, { to: newHornPath(datastoreId), children: [_jsx(Plus, { size: 16, "aria-hidden": "true" }), "New Horn"] }) }) }), horns.isPending ? (_jsx(Loading, { label: "Reading this datastore's Horns\u2026" })) : horns.isError ? (_jsx(ErrorState, { title: "Your Horns could not be loaded", hint: "Try again in a moment. If it keeps happening, the data service may be down." })) : !isPresent(horns.data) ? (_jsx(EmptyState, { title: "No Horns yet", hint: "Describe what you want to see, in your own words, and it is built for you from this datastore's data.", icon: _jsx(Columns3, { size: 20 }), action: _jsx(Button, { variant: "primary", size: "sm", asChild: true, children: _jsxs(Link, { to: newHornPath(datastoreId), children: [_jsx(Plus, { size: 14, "aria-hidden": "true" }), "Make your first Horn"] }) }) })) : (_jsx("ul", { "data-horns": true, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: horns.data.map((horn) => (_jsx("li", { children: _jsxs(Link, { to: hornViewPath(datastoreId, horn.slug), className: "flex items-center gap-3 rounded-lg border border-default-border bg-card px-4 py-3 transition-colors hover:bg-card/70", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Columns3, { size: 16 }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-default-foreground", children: horn.title }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: horn.number === 1 ? "Saved once" : `Saved ${horn.number} times` })] }), _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "shrink-0 text-muted-foreground" })] }) }, horn.slug))) }))] }));
+    return (_jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsx(PageHeader, { title: "Horns", description: "Dashboards and apps made from your data. Open one to look at it or change it, or describe a new one.", actions: _jsx(Button, { variant: "primary", asChild: true, children: _jsxs(Link, { to: newHornPath(), children: [_jsx(Plus, { size: 16, "aria-hidden": "true" }), "New Horn"] }) }) }), horns.isPending ? (_jsx(Loading, { label: "Reading this datastore's Horns\u2026" })) : horns.isError ? (_jsx(ErrorState, { title: "Your Horns could not be loaded", hint: "Try again in a moment. If it keeps happening, the data service may be down." })) : !isPresent(horns.data) ? (_jsx(EmptyState, { title: "No Horns yet", hint: "Describe what you want to see, in your own words, and it is built for you from this datastore's data.", icon: _jsx(Columns3, { size: 20 }), action: _jsx(Button, { variant: "primary", size: "sm", asChild: true, children: _jsxs(Link, { to: newHornPath(), children: [_jsx(Plus, { size: 14, "aria-hidden": "true" }), "Make your first Horn"] }) }) })) : (_jsx("ul", { "data-horns": true, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: horns.data.map((horn) => (_jsx("li", { children: _jsxs(Link, { to: hornViewPath(horn.slug), className: "flex items-center gap-3 rounded-lg border border-default-border bg-card px-4 py-3 transition-colors hover:bg-card/70", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Columns3, { size: 16 }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-default-foreground", children: horn.title }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: horn.number === 1 ? "Saved once" : `Saved ${horn.number} times` })] }), _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "shrink-0 text-muted-foreground" })] }) }, horn.slug))) }))] }));
 }

package/dist/app/new-horn-page.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useSearchParams } from "react-router";
+import { z } from "zod";
 import { isPresent } from "@manta-eu/lib/present";
-import { useParams } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
+import { hornSchema } from "@manta-eu/horns";
 import { standaloneHorn } from "@manta-eu/horns/shapes";
-import { DatastoreMissing } from "../components/states";
+import { DatastoreMissing, ErrorState, Loading } from "../components/states";
 import { hornsPath } from "./paths";
 import { HornStudio } from "./horn-studio";
-import { MantaSparqlProvider } from "../lib/manta/providers";
-import { useMantaSession } from "../lib/manta/session";
+import { problemFrom } from "../lib/problem";
 import { shapesRealm } from "../lib/shapes/catalog";
 // The way in: a Horn from nothing. It opens straight into the Studio with an empty document, the way a new
 // Lovable project opens on its composer: the first thing typed is what it should show, the model names it as
@@ -18,17 +21,56 @@ const starterPrompts = [
     "What happened in search last week that I should look at?",
 ];
 export function NewHornPage() {
-    const { datastoreId } = useParams();
-    const { datastores } = useMantaSession();
-    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
-    if (!isPresent(datastore)) {
+    const { datastoreId } = useActiveDatastore();
+    const [search] = useSearchParams();
+    const about = search.get("about");
+    if (!isPresent(datastoreId)) {
         return (_jsx("main", { className: "flex h-svh w-full items-center justify-center bg-sidebar p-6", children: _jsx(DatastoreMissing, {}) }));
     }
-    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(NewHorn, { datastoreId: datastore.id }) }));
+    return isPresent(about) ? (_jsx(NewHornAbout, { datastoreId: datastoreId, about: about })) : (_jsx(NewHorn, { datastoreId: datastoreId }));
+}
+/**
+ * What the lookup answers with: the Horn, and whether it is one somebody kept. A kept Horn brings its slug
+ * and the revision it is at, which is what saving an edit of it needs — without them a save would write a
+ * second Horn about the same thing, or be refused for revising a Horn it never read.
+ */
+const aboutAnswer = z.object({
+    horn: hornSchema,
+    kept: z.boolean(),
+    slug: z.string().min(1).optional(),
+    revision: z.string().min(1).optional(),
+});
+/**
+ * A Horn started from the thing it is about, rather than from nothing.
+ *
+ * The worker already builds one for a rule or a plan that nobody has kept — that is what the route answers
+ * with — so this opens the Studio on it. Still a draft: it becomes the Horn for that thing when somebody
+ * saves it, and `about` is what makes the next lookup find it. One somebody already kept opens as itself,
+ * so that saving revises it rather than making another.
+ */
+function NewHornAbout({ datastoreId, about }) {
+    const seed = useQuery({
+        queryKey: ["horn-about", datastoreId, about],
+        queryFn: async ({ signal }) => {
+            const at = `/api/d/${encodeURIComponent(datastoreId)}/horns/by/about?iri=${encodeURIComponent(about)}`;
+            const response = await fetch(at, { signal });
+            if (!response.ok)
+                throw new Error(await problemFrom(response, `The answer was ${response.status}.`));
+            return aboutAnswer.parse(await response.json());
+        },
+    });
+    if (seed.isPending) {
+        return (_jsx("main", { className: "flex h-svh w-full items-center justify-center bg-sidebar p-6", children: _jsx(Loading, { label: "Building a Horn for this\u2026" }) }));
+    }
+    if (seed.isError) {
+        return (_jsx("main", { className: "flex h-svh w-full items-center justify-center bg-sidebar p-6", children: _jsx(ErrorState, { title: "Nothing could be built for this", hint: seed.error.message }) }));
+    }
+    const { horn, kept, slug, revision } = seed.data;
+    return (_jsx(HornStudio, { datastoreId: datastoreId, stored: horn, ...(isPresent(slug) ? { slug } : {}), ...(isPresent(revision) ? { revision } : {}), backTo: hornsPath(), welcome: "Here is what this shows. What would you change?", reassurance: kept ? "Saving keeps your changes to this Horn." : "Nothing is saved until you save it.", placeholder: "Describe what you want to see\u2026" }));
 }
 function NewHorn({ datastoreId }) {
     // Made once: the route owns the IRI and the revision on save, and this is a document that has never been
     // stored. A new render must not make a new one underneath the draft.
     const [horn] = useState(() => standaloneHorn({ id: "untitled", title: "Untitled Horn", views: [], realm: shapesRealm(), datastoreId }));
-    return (_jsx(HornStudio, { datastoreId: datastoreId, stored: horn, backTo: hornsPath(datastoreId), welcome: "What should this Horn show?", reassurance: "Say it in your own words, and I will build it from this datastore's data.", placeholder: "Describe what you want to see\u2026", starters: starterPrompts }));
+    return (_jsx(HornStudio, { datastoreId: datastoreId, stored: horn, backTo: hornsPath(), welcome: "What should this Horn show?", reassurance: "Say it in your own words, and I will build it from this datastore's data.", placeholder: "Describe what you want to see\u2026", starters: starterPrompts }));
 }

package/dist/app/paths.d.ts

@@ -1,13 +1,18 @@
-export declare function hornsPath(datastoreId: string): string;
-export declare function newHornPath(datastoreId: string): string;
-export declare function hornPath(datastoreId: string, slug: string): string;
+export declare const hornsPath: () => string;
+export declare const newHornPath: () => string;
+/** A new Horn started from the thing it is about: a rule, an action plan. The IRI rides as a parameter. */
+export declare const newHornAboutPath: (iri: string) => string;
+export declare const hornPath: (slug: string) => string;
 /** A saved Horn as the thing itself: what a shared link opens, with the variables it carries. */
-export declare function hornViewPath(datastoreId: string, slug: string): string;
-export declare function shapesPath(datastoreId: string): string;
-export declare function shapeZooPath(datastoreId: string, schema: string): string;
-export declare function shapeEntityPath(datastoreId: string, schema: string, entity: string): string;
+export declare const hornViewPath: (slug: string) => string;
 /** A datastore's Horns as cards: what each one answers, who it is for, what it reads. */
-export declare const showcasePath: (datastoreId: string) => string;
+export declare const showcasePath: () => string;
 /** What Manta works out about a datastore: every rule, and whether it can be looked at. */
-export declare function rulesPath(datastoreId: string): string;
-export declare function rulePath(datastoreId: string, ruleId: string): string;
+export declare const rulesPath: () => string;
+export declare const plansPath: () => string;
+export declare const rulePath: (ruleId: string) => string;
+/** The reference Horn drawn against a fixture. Dev only; see docs/standard.md. */
+export declare const referencePath: () => string;
+export declare const shapesPath: () => string;
+export declare const shapeZooPath: (schema: string) => string;
+export declare const shapeEntityPath: (schema: string, entity: string) => string;

package/dist/app/paths.js

@@ -1,32 +1,21 @@
-export function hornsPath(datastoreId) {
-    return `/d/${encodeURIComponent(datastoreId)}/horns`;
-}
-export function newHornPath(datastoreId) {
-    return `${hornsPath(datastoreId)}/new`;
-}
-export function hornPath(datastoreId, slug) {
-    return `${hornsPath(datastoreId)}/${encodeURIComponent(slug)}`;
-}
+// Relative to the datastore: `ActiveDatastoreProvider` scopes the router's basename to `/d/<datastoreId>`,
+// so a helper that wrote the prefix itself would double it.
+export const hornsPath = () => "/horns";
+export const newHornPath = () => "/horns/new";
+/** A new Horn started from the thing it is about: a rule, an action plan. The IRI rides as a parameter. */
+export const newHornAboutPath = (iri) => `/horns/new?about=${encodeURIComponent(iri)}`;
+export const hornPath = (slug) => `/horns/${encodeURIComponent(slug)}`;
 /** A saved Horn as the thing itself: what a shared link opens, with the variables it carries. */
-export function hornViewPath(datastoreId, slug) {
-    return `${hornPath(datastoreId, slug)}/view`;
-}
-export function shapesPath(datastoreId) {
-    return `/d/${encodeURIComponent(datastoreId)}/shapes`;
-}
-export function shapeZooPath(datastoreId, schema) {
-    return `${shapesPath(datastoreId)}/${encodeURIComponent(schema)}`;
-}
-// An entity IRI carries slashes and colons, so the entity travels as a query parameter rather than a segment.
-export function shapeEntityPath(datastoreId, schema, entity) {
-    return `${shapeZooPath(datastoreId, schema)}/entity?iri=${encodeURIComponent(entity)}`;
-}
+export const hornViewPath = (slug) => `${hornPath(slug)}/view`;
 /** A datastore's Horns as cards: what each one answers, who it is for, what it reads. */
-export const showcasePath = (datastoreId) => `/d/${encodeURIComponent(datastoreId)}/showcase`;
+export const showcasePath = () => "/horns/showcase";
 /** What Manta works out about a datastore: every rule, and whether it can be looked at. */
-export function rulesPath(datastoreId) {
-    return `/d/${encodeURIComponent(datastoreId)}/rules`;
-}
-export function rulePath(datastoreId, ruleId) {
-    return `${rulesPath(datastoreId)}/${encodeURIComponent(ruleId)}`;
-}
+export const rulesPath = () => "/horns/rules";
+export const plansPath = () => "/horns/plans";
+export const rulePath = (ruleId) => `${rulesPath()}/${encodeURIComponent(ruleId)}`;
+/** The reference Horn drawn against a fixture. Dev only; see docs/standard.md. */
+export const referencePath = () => "/horns/reference";
+export const shapesPath = () => "/horns/shapes";
+export const shapeZooPath = (schema) => `${shapesPath()}/${encodeURIComponent(schema)}`;
+// An entity IRI carries slashes and colons, so the entity travels as a query parameter rather than a segment.
+export const shapeEntityPath = (schema, entity) => `${shapeZooPath(schema)}/entity?iri=${encodeURIComponent(entity)}`;

package/dist/app/plans-page.d.ts

@@ -0,0 +1 @@
+export declare function PlansPage(): import("react").JSX.Element;

package/dist/app/plans-page.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
+import { ChevronRight } from "lucide-react";
+import { Badge, Skeleton } from "@manta-eu/react";
+import { planNameFromIri, plansQuery, readPlans, planStatusQuery, readPlanStatus, } from "@manta-eu/horns/render";
+import { newHornAboutPath } from "./paths";
+import { Card, CardTitle, PageHeader } from "../components/page-header";
+import { DatastoreMissing, EmptyState, ErrorState } from "../components/states";
+import { useSparqlSelect } from "../lib/manta/sparql-select";
+import { shapesRealm } from "../lib/shapes/catalog";
+// The work Manta has drafted, and the way to make a Horn out of one. A plan is a named graph, so it has no
+// page of its own here: the Horn is the page, and this is where you start one.
+const stateWords = {
+    draft: { text: "Not run yet", variant: "info" },
+    running: { text: "Running", variant: "info" },
+    completed: { text: "Done", variant: "success" },
+    failed: { text: "Did not go through", variant: "warning" },
+    "timed-out": { text: "Took too long", variant: "warning" },
+};
+// Not the SDK's `PlanRow` (`@manta-eu/react/plan-row`): its `PlanRowPlan` wants `actionCount`,
+// `completedActionCount`, `subjects` and a `GQLIntegration`, which come from agents' GraphQL — and the
+// browser gets no GraphQL route (AGENTS.md §Writes). This list reads the plans graph over SPARQL, so it
+// holds the IRI, the name and the state and nothing that would fill those fields honestly.
+function ListedPlan({ plan }) {
+    const said = stateWords[plan.status.state];
+    return (_jsxs("li", { "data-plan": plan.iri, className: "flex flex-wrap items-center justify-between gap-3 px-4 py-2.5", children: [_jsx("span", { className: "flex min-w-0 flex-col", children: _jsx("span", { className: "text-default-foreground truncate text-sm font-medium", children: plan.status.name ?? planNameFromIri(plan.iri) ?? "Untitled plan" }) }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx(Badge, { variant: said.variant, children: said.text }), _jsxs(Link, { className: "text-muted-foreground hover:text-default-foreground flex items-center gap-1 text-sm", to: newHornAboutPath(plan.iri), children: ["Make a Horn from this", _jsx(ChevronRight, { size: 14, "aria-hidden": "true" })] })] })] }));
+}
+function Plans({ datastoreId }) {
+    const select = useSparqlSelect();
+    const realm = shapesRealm();
+    const listed = useQuery({
+        queryKey: ["plans", datastoreId],
+        queryFn: async ({ signal }) => {
+            const iris = readPlans(await select(plansQuery(realm), signal));
+            if (iris.length === 0)
+                return [];
+            // Names and states come from the plans graph, not from the IRIs, which say nothing.
+            const statuses = readPlanStatus(await select(planStatusQuery(realm, iris), signal));
+            return iris.map((iri) => ({ iri, status: statuses.get(iri) ?? { state: "draft" } }));
+        },
+    });
+    if (listed.isPending)
+        return _jsx(Skeleton, { className: "h-64 w-full" });
+    if (listed.isError)
+        return _jsx(ErrorState, { title: "The plans could not be read.", hint: listed.error.message });
+    if (!isPresent(listed.data)) {
+        return (_jsx(EmptyState, { title: "No action plans yet", hint: "Manta drafts these when a rule finds work to do. When one appears, you can make a Horn from it here." }));
+    }
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: "What Manta has drafted" }), _jsx("ul", { className: "divide-default-border divide-y", children: listed.data.map((plan) => (_jsx(ListedPlan, { plan: plan }, plan.iri))) })] }));
+}
+export function PlansPage() {
+    const { datastoreId } = useActiveDatastore();
+    if (!isPresent(datastoreId))
+        return _jsx(DatastoreMissing, {});
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: "Action plans", description: "The changes Manta has worked out and not made. Open one as a Horn to see what it would do." }), _jsx(Plans, { datastoreId: datastoreId })] }));
+}

package/dist/app/reference-page.d.ts

@@ -0,0 +1 @@
+export declare function ReferencePage(): import("react").JSX.Element;

package/dist/app/reference-page.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { hornSchema } from "@manta-eu/horns";
+import { buildHornSnapshot } from "@manta-eu/horns/render";
+import { HornSnapshotView } from "@manta-eu/horns-kit";
+import { writtenHornView } from "../components/written-horn-view";
+import { catalogCardView } from "../components/catalog-card-view";
+import { useExplainDialog } from "../components/explain-dialog";
+import { ErrorState, Loading } from "../components/states";
+import { PageHeader } from "../components/page-header";
+import { useHornVariables } from "../lib/horn-variables";
+import { fakeSparqlSelect, referenceEntity } from "../lib/reference/fake-sparql";
+import { appTheme } from "../lib/theme";
+// The reference Horn from docs/standard.md, drawn against a datastore that does not exist. Dev only, and the
+// document and its fixture are imported lazily so neither reaches a deployed bundle.
+//
+// It is the whole real path — the binding compiles, the label pass runs, the written source is transpiled and
+// bound to the design system — with `select` swapped for a stub. That is what makes it worth looking at: what
+// is on screen is what a datastore holding this data would show.
+/** Parsed once: the document is a static import and re-parsing it per render would rebuild every view. */
+function useReferenceHorn() {
+    return useMemo(async () => {
+        const document = (await import("../reference/supply-chain-360.horn.json")).default;
+        return hornSchema.parse(document);
+    }, []);
+}
+export function ReferencePage() {
+    const explain = useExplainDialog();
+    const pending = useReferenceHorn();
+    const loaded = useQuery({ queryKey: ["reference-horn-document"], queryFn: () => pending });
+    // What the page is narrowed to, in the URL. A view sets one and every binding taking it as a parameter is
+    // asked again, which is the whole of how one card filters another.
+    const filters = useHornVariables(loaded.data);
+    const drawn = useQuery({
+        enabled: loaded.data !== undefined,
+        // The page it drew stays up while the next one is asked for, so narrowing does not blink.
+        placeholderData: keepPreviousData,
+        queryKey: ["reference-horn", filters.values],
+        queryFn: async ({ signal }) => {
+            const horn = loaded.data;
+            if (horn === undefined)
+                throw new Error("The reference Horn has not loaded.");
+            return await buildHornSnapshot({
+                horn,
+                select: fakeSparqlSelect,
+                variables: { entity: referenceEntity, ...filters.values },
+                // Plans come from a datastore, and there is none.
+                plans: false,
+                signal,
+            });
+        },
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: "Supply Chain 360", description: "The reference Horn from docs/standard.md, drawn against a fixture. No datastore is read." }), drawn.isPending && drawn.data === undefined ? (_jsx(Loading, { label: "Drawing the reference Horn\u2026", rows: 4 })) : drawn.isError ? (_jsx(ErrorState, { title: "The reference Horn could not be drawn", hint: drawn.error.message })) : (_jsxs("div", { "data-horn-preview": true, className: "w-full overflow-hidden rounded-xl", children: [_jsx(HornSnapshotView, { snapshot: drawn.data, mode: "page", theme: appTheme(), writtenView: writtenHornView, catalogCard: catalogCardView, explain: explain.open, onVariableChange: filters.set }), explain.dialog] }))] }));
+}