@manta-eu/horns-client 0.1.0

package/dist/app/horn-studio.js

@@ -0,0 +1,428 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { isPresent } from "@manta-eu/lib/present";
+import { useNavigate } from "react-router";
+import { ArrowLeft, ChevronLeft, ChevronRight, Database, Eye, Maximize2, Minimize2, Pencil, RefreshCw, Trash2, } from "lucide-react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, cn, useIsMobile, useResizablePanel, } from "@manta-eu/react";
+import { gridColumns, hornSchema, maxBindingLimit } from "@manta-eu/horns";
+import { hornSnapshotSchema } from "@manta-eu/horns/render";
+import { describeHornChange, minViewWidth, visualEditOps } from "@manta-eu/horns/studio";
+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 { PlanRunDialog, usePlanRuns } from "../components/plan-runs";
+import { sendHornScreenshot } from "../components/rasterize";
+import { reviewHorn } from "../lib/horn-review";
+import { StudioChat } from "../components/studio-chat";
+import { ErrorState, Loading } from "../components/states";
+import { isRecord } from "@manta-eu/horns";
+import { readNdjson } from "@manta-eu/horns-server/shared";
+import { problemOf } from "../lib/problem";
+import { studioProgressLine } from "../lib/studio-progress";
+import { appTheme } from "../lib/theme";
+const restyleStarters = [
+    "Make it dark and give it a calmer accent",
+    "Turn the biggest chart into a donut",
+    "Tighter cards, and a KPI row across the top",
+];
+function readReply(body) {
+    if (!isRecord(body))
+        return undefined;
+    const horn = hornSchema.safeParse(body["horn"]);
+    const reply = body["reply"];
+    if (!horn.success || typeof reply !== "string")
+        return undefined;
+    const status = body["status"];
+    return { horn: horn.data, reply, ...(typeof status === "string" ? { status } : {}) };
+}
+function failureOf(body, status) {
+    return problemOf(body, `The Studio could not answer (${status}).`);
+}
+/** How much a card grows or shrinks by: a third of the twelve columns, so the page keeps its rhythm. */
+const widthStep = 4;
+const kebab = (name) => name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+/**
+ * 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.
+ *
+ * The draft lives here and nowhere else. Each turn that changes it adds a version, the chat keeps a card for
+ * each, and the preview shows whichever one is picked — the latest unless someone went back to look. Saving is
+ * a separate, deliberate act, which is what makes the conversation free to be wrong.
+ */
+export function HornStudio(props) {
+    const { datastoreId, stored, revision, backTo, welcome, reassurance, placeholder, starters, variables, toolbar } = props;
+    const navigate = useNavigate();
+    const mobile = useIsMobile();
+    const [pane, setPane] = useState("preview");
+    const [versions, setVersions] = useState([{ id: 0, horn: stored }]);
+    const nextId = useRef(1);
+    const [viewing, setViewing] = useState();
+    const [entries, setEntries] = useState([]);
+    const [pending, setPending] = useState(false);
+    const [progress, setProgress] = useState([]);
+    const [slug, setSlug] = useState(props.slug);
+    const [baseRevision, setBaseRevision] = useState(revision);
+    const [savedId, setSavedId] = useState(isPresent(revision) ? 0 : undefined);
+    const [hovered, setHovered] = useState();
+    const [renaming, setRenaming] = useState();
+    const [rebinding, setRebinding] = useState();
+    const [editFailure, setEditFailure] = useState();
+    const [saveState, setSaveState] = useState("idle");
+    const [saveFailure, setSaveFailure] = useState();
+    const { panelRef, panelWidth, handleResizeStart } = useResizablePanel({
+        initialWidth: 440,
+        minWidth: 340,
+        maxWidthRatio: 0.5,
+        resizeFrom: "right",
+    });
+    const latest = versions[versions.length - 1] ?? { id: 0, horn: stored };
+    const shown = versions.find((version) => version.id === viewing) ?? latest;
+    // 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({});
+    useEffect(() => {
+        let live = true;
+        void writtenReviewStates(shown.horn).then((states) => {
+            if (live)
+                setReviewStates(states);
+        });
+        return () => {
+            live = false;
+        };
+    }, [shown.horn]);
+    // A new Horn with nothing in it yet has nothing to save; one that was saved and then discarded does.
+    const unsaved = latest.id !== savedId && (versions.length > 1 || isPresent(savedId));
+    // Nothing to draw is not something to wait for.
+    const empty = !isPresent(shown.horn.views);
+    const snapshot = useQuery({
+        enabled: !empty,
+        // The version id stands for the document: versions are never edited, only added. The variables are part of
+        // the key because a link that sets one is a different Horn to draw.
+        queryKey: ["horn-draft", datastoreId, props.slug ?? "new", shown.id, variables ?? {}],
+        queryFn: async ({ signal }) => {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/snapshot`, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ horn: shown.horn, ...(variables ? { variables } : {}) }),
+                signal,
+            });
+            if (!response.ok)
+                throw new Error(`The draft could not be drawn (${response.status}).`);
+            const body = await response.json();
+            return hornSnapshotSchema.parse(isRecord(body) ? body["snapshot"] : undefined);
+        },
+    });
+    const planRuns = usePlanRuns({
+        datastoreId,
+        realm: shown.horn.realm,
+        onChanged: () => void snapshot.refetch(),
+    });
+    async function send(asked) {
+        const conversation = [...entries, { kind: "user", content: asked }];
+        setEntries(conversation);
+        setPending(true);
+        setProgress([]);
+        setPane("chat");
+        const started = Date.now();
+        const thinking = [];
+        const base = latest;
+        const fail = (content) => setEntries([...conversation, { kind: "failure", content }]);
+        try {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/studio`, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({
+                    horn: base.horn,
+                    // Failures are the app's, not the conversation's; the model is shown only what was said.
+                    messages: conversation.flatMap((entry) => entry.kind === "failure" ? [] : [{ role: entry.kind, content: entry.content }]),
+                }),
+            });
+            if (!response.ok) {
+                fail(failureOf(await response.json().catch(() => undefined), response.status));
+                return;
+            }
+            const body = await readNdjson(response, (line) => {
+                const said = line["type"] === "progress" ? studioProgressLine(line) : undefined;
+                if (!isPresent(said))
+                    return;
+                thinking.push(said);
+                setProgress([...thinking]);
+            });
+            if (body?.["type"] === "error") {
+                fail(problemOf(body, "The Studio failed."));
+                return;
+            }
+            const reply = readReply(body);
+            if (!isPresent(reply)) {
+                fail("The Studio answered with something that is not a Horn.");
+                return;
+            }
+            const summary = describeHornChange(base.horn, reply.horn);
+            const changed = isPresent(summary.details);
+            const version = { id: nextId.current, horn: reply.horn };
+            if (changed) {
+                nextId.current += 1;
+                setVersions((was) => [...was, version]);
+                setViewing(undefined);
+                setPane("preview");
+            }
+            // A second model looks at what was drawn. The browser is the only thing that can draw a Horn, so the
+            // picture is taken here; the advice is the reviewer's, never a verdict, and a review that fails is a
+            // turn without one.
+            let review = { advice: [], problems: [] };
+            if (changed) {
+                thinking.push({ title: "Looking at what it drew" });
+                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 });
+                }
+                if (isPresent(review.advice)) {
+                    const count = review.advice.length;
+                    thinking.push({ title: `Found ${count === 1 ? "one thing" : `${count} things`} to fix` });
+                }
+                else if (isPresent(review.unavailable)) {
+                    // Said out loud: a reviewer nobody configured looks exactly like a reviewer that liked it.
+                    thinking.push({ title: "Nobody could look at it", detail: review.unavailable });
+                }
+                else if (!isPresent(review.problems)) {
+                    thinking.push({ title: "Looked at it and found nothing to fix" });
+                }
+            }
+            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.advice,
+            ];
+            setEntries([
+                ...conversation,
+                {
+                    kind: "assistant",
+                    content: isPresent(reply.reply) ? reply.reply : summary.title,
+                    thinking,
+                    seconds: Math.max(1, Math.round((Date.now() - started) / 1000)),
+                    ...(changed ? { change: { summary, versionId: version.id } } : {}),
+                    ...(isPresent(said) ? { advice: said } : {}),
+                    // A turn that ran out of room is one click from going on, not a message to retype.
+                    ...(reply.status === "step-limit" ? { unfinished: true } : {}),
+                },
+            ]);
+        }
+        catch (caught) {
+            fail(caught instanceof Error ? caught.message : String(caught));
+        }
+        finally {
+            setPending(false);
+            setProgress([]);
+        }
+    }
+    /**
+     * A change made by hand rather than by asking. It is the same patch a turn would propose, checked by the same
+     * gate on the worker, and it lands as a version like any other — so going back, saving and asking for the next
+     * change all work on it without knowing where it came from.
+     */
+    async function edit(change, said) {
+        const base = latest;
+        const ops = visualEditOps(base.horn, change);
+        if (!ops.ok) {
+            setEditFailure(ops.message);
+            return;
+        }
+        setEditFailure(undefined);
+        try {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/edit`, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ horn: base.horn, ops: ops.ops }),
+            });
+            const body = await response.json().catch(() => undefined);
+            if (!response.ok) {
+                setEditFailure(failureOf(body, response.status));
+                return;
+            }
+            const changed = hornSchema.parse(isRecord(body) ? body["horn"] : undefined);
+            const summary = describeHornChange(base.horn, changed);
+            const version = { id: nextId.current, horn: changed };
+            nextId.current += 1;
+            setVersions((was) => [...was, version]);
+            setViewing(undefined);
+            setEntries((was) => [
+                ...was,
+                {
+                    kind: "assistant",
+                    content: said,
+                    thinking: [],
+                    seconds: 0,
+                    ...(isPresent(summary.details) ? { change: { summary, versionId: version.id } } : {}),
+                },
+            ]);
+        }
+        catch (caught) {
+            setEditFailure(caught instanceof Error ? caught.message : String(caught));
+        }
+    }
+    /**
+     * The query a view runs, as written in the document. A view that reads through a lens, or through a pinned
+     * library query, is not a query anybody typed — so it is not one to retype here.
+     */
+    function openBinding(viewId, title) {
+        const view = latest.horn.views.find((candidate) => candidate.id === viewId);
+        if (!view || "ref" in view) {
+            setEditFailure("This view comes from the library. Change it there, not here.");
+            return;
+        }
+        if (view.binding.kind !== "select") {
+            setEditFailure("This view reads a shape rather than a query somebody wrote, so there is nothing to type here.");
+            return;
+        }
+        setEditFailure(undefined);
+        setRebinding({ viewId, title, sparql: view.binding.sparql, limit: String(view.binding.limit) });
+    }
+    async function saveBinding() {
+        const asked = rebinding;
+        setRebinding(undefined);
+        if (!asked)
+            return;
+        const view = latest.horn.views.find((candidate) => candidate.id === asked.viewId);
+        if (!view || "ref" in view || view.binding.kind !== "select")
+            return;
+        const asked_limit = Number(asked.limit);
+        const binding = {
+            ...view.binding,
+            sparql: asked.sparql.trim(),
+            limit: Number.isFinite(asked_limit)
+                ? Math.min(Math.max(Math.round(asked_limit), 1), maxBindingLimit)
+                : view.binding.limit,
+        };
+        await edit({ kind: "rebind", viewId: asked.viewId, binding }, `Changed the query behind "${asked.title}".`);
+    }
+    /** A card is widened or narrowed by a third of the page, which is what the grid divides into evenly. */
+    async function resize(viewId, title, by) {
+        const placed = latest.horn.layout.items.find((item) => item.viewId === viewId);
+        if (!placed)
+            return;
+        const wanted = placed.w + by;
+        if (wanted === placed.w || wanted < minViewWidth || wanted > gridColumns)
+            return;
+        await edit({ kind: "resize", viewId, w: wanted }, `Made "${title}" ${by > 0 ? "wider" : "narrower"}.`);
+    }
+    // Going back is a new version, not a rewind: the history stays, and the next turn builds on what is shown.
+    function restore() {
+        const target = shown;
+        if (target.id === latest.id)
+            return;
+        const version = { id: nextId.current, horn: target.horn };
+        nextId.current += 1;
+        setVersions((was) => [...was, version]);
+        setViewing(undefined);
+        const summary = describeHornChange(latest.horn, target.horn);
+        setEntries((was) => [
+            ...was,
+            {
+                kind: "assistant",
+                content: "Restored the Horn to that earlier version.",
+                thinking: [],
+                seconds: 0,
+                ...(isPresent(summary.details) ? { change: { summary, versionId: version.id } } : {}),
+            },
+        ]);
+    }
+    // The Horn the page loaded, and a conversation that never happened.
+    function discard() {
+        setVersions([{ id: 0, horn: stored }]);
+        setViewing(undefined);
+        setEntries([]);
+        setSaveState("idle");
+        setSaveFailure(undefined);
+    }
+    async function save() {
+        const saving = latest;
+        const name = slug ?? kebab(saving.horn.title);
+        if (!isPresent(name)) {
+            setSaveState("failed");
+            setSaveFailure("Give the Horn a title before saving it: its address is made from the title.");
+            return;
+        }
+        setSaveState("saving");
+        setSaveFailure(undefined);
+        try {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/${encodeURIComponent(name)}`, {
+                method: "PUT",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ horn: saving.horn, ...(isPresent(baseRevision) ? { baseRevision } : {}) }),
+            });
+            const body = await response.json().catch(() => undefined);
+            if (!response.ok) {
+                setSaveState("failed");
+                setSaveFailure(failureOf(body, response.status));
+                return;
+            }
+            setBaseRevision(isRecord(body) && typeof body["revision"] === "string" ? body["revision"] : baseRevision);
+            setSlug(name);
+            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 });
+            }
+        }
+        catch (caught) {
+            setSaveState("failed");
+            setSaveFailure(caught instanceof Error ? caught.message : String(caught));
+        }
+    }
+    // Where things stand, as a sentence: a badge says less, and an address like "/spend-watch" says nothing.
+    const status = saveState === "saving"
+        ? "Saving…"
+        : unsaved
+            ? "Unsaved changes"
+            : versions.length > 1
+                ? "All changes saved"
+                : isPresent(savedId)
+                    ? "No changes yet"
+                    : "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) => {
+                                    setViewing(id === latest.id ? undefined : id);
+                                    if (mobile)
+                                        setPane("preview");
+                                } })] })) : null, !mobile ? (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize the chat", onMouseDown: handleResizeStart, className: "w-1 shrink-0 cursor-col-resize rounded-full hover:bg-muted" })) : null, showPreview ? (_jsx("main", { className: cn("flex min-h-0 min-w-0 flex-1 flex-col pr-2 pb-2", mobile ? "pl-2" : "pl-1"), children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-muted-border bg-base-background", children: [_jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-muted-border px-3", children: [_jsxs("span", { className: "flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-xs text-default-foreground", children: [_jsx(Eye, { size: 12, "aria-hidden": "true" }), "Preview"] }), shown.id !== latest.id ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-xs text-muted-foreground", children: "You are looking at an earlier version" }), _jsx(Button, { variant: "primary", size: "xs", onClick: restore, children: "Restore this version" }), _jsx(Button, { variant: "ghost", size: "xs", onClick: () => setViewing(undefined), children: "Back to latest" })] })) : null, _jsxs("div", { className: "ml-auto flex min-w-0 items-center gap-2", children: [toolbar, _jsx(Button, { variant: "ghost", size: "xs", icon: RefreshCw, showLeftIcon: true, disabled: empty || snapshot.isFetching, onClick: () => void snapshot.refetch(), children: snapshot.isFetching && !empty ? "Refreshing…" : "Refresh data" })] })] }), _jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto", snapshot.isFetching && "opacity-80"), children: empty ? (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-8 text-center", children: [_jsx(Eye, { size: 24, "aria-hidden": "true", className: "text-muted-foreground" }), _jsx("p", { className: "text-base font-medium text-default-foreground", children: "Your Horn will appear here" }), _jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: pending
+                                                    ? "It is being built now. You can watch the steps on the left."
+                                                    : "Tell me on the left what it should show, and it takes shape here as I build it." })] })) : snapshot.isPending ? (_jsx("div", { className: "p-6", children: _jsx(Loading, { label: "Drawing the Horn\u2026", rows: 4 }) })) : snapshot.isError ? (_jsx("div", { className: "p-6", children: _jsx(ErrorState, { title: "The Horn could not be drawn", hint: snapshot.error.message }) })) : (
+                                    // The Horn draws its own page, canvas and title included, at the width it is given.
+                                    _jsxs("div", { "data-horn-preview": true, className: "w-full", onMouseOver: (event) => {
+                                            const target = event.target;
+                                            const card = target instanceof Element ? target.closest("[data-horn-view]") : undefined;
+                                            setHovered(card?.getAttribute("data-horn-view") ?? undefined);
+                                        }, onMouseLeave: () => setHovered(undefined), children: [editFailure === undefined ? null : (_jsxs("div", { role: "alert", className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-muted-border bg-muted px-3 py-2 text-sm text-default-foreground", children: [_jsx("span", { className: "whitespace-pre-wrap", children: editFailure }), _jsx(Button, { variant: "ghost", size: "xs", onClick: () => setEditFailure(undefined), children: "Dismiss" })] })), planRuns.problem === undefined ? null : (_jsxs("div", { role: "alert", className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-muted-border bg-muted px-3 py-2 text-sm text-default-foreground", children: [_jsx("span", { children: planRuns.problem }), _jsx(Button, { variant: "ghost", size: "xs", onClick: planRuns.dismiss, children: "Dismiss" })] })), _jsx(HornSnapshotView, { snapshot: snapshot.data, mode: "page", theme: appTheme(), planActions: planRuns.actions, writtenView: writtenHornView, catalogCard: catalogCardView, ...(shown.id === latest.id
+                                                    ? {
+                                                        viewControls: (view) => (
+                                                        // Six controls on every card is furniture; they belong to the card being reached
+                                                        // for. Focus keeps them reachable without a pointer.
+                                                        _jsxs("span", { onMouseEnter: () => setHovered(view.id), onMouseLeave: () => setHovered(undefined), className: cn("flex items-center gap-1 transition-opacity focus-within:opacity-100", hovered === view.id ? "opacity-100" : "opacity-0"), children: [(() => {
+                                                                    const written = shown.horn.views.find((candidate) => candidate.id === view.id);
+                                                                    const state = reviewStates[view.id];
+                                                                    if (written === undefined || "ref" in written)
+                                                                        return null;
+                                                                    if (written.render.kind !== "tsx" || state === undefined)
+                                                                        return null;
+                                                                    return (_jsx(ReadTheCode, { viewId: view.id, title: view.title, source: written.render.source, state: state, onKeep: (change) => void edit(change, `Read and kept the code for "${view.title}".`) }));
+                                                                })(), _jsx(Button, { variant: "ghost", size: "xs", "aria-label": `Move ${view.title} earlier`, onClick: () => void edit({ kind: "reorder", viewId: view.id, direction: "earlier" }, `Moved "${view.title}" earlier.`), children: _jsx(ChevronLeft, { size: 12, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "xs", "aria-label": `Move ${view.title} later`, onClick: () => void edit({ kind: "reorder", viewId: view.id, direction: "later" }, `Moved "${view.title}" later.`), children: _jsx(ChevronRight, { size: 12, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "xs", "aria-label": `Make ${view.title} narrower`, onClick: () => void resize(view.id, view.title, -widthStep), children: _jsx(Minimize2, { size: 12, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "xs", "aria-label": `Make ${view.title} wider`, onClick: () => void resize(view.id, view.title, widthStep), children: _jsx(Maximize2, { size: 12, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "xs", "aria-label": `Edit the query behind ${view.title}`, onClick: () => openBinding(view.id, view.title), children: _jsx(Database, { size: 12, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "xs", "aria-label": `Rename ${view.title}`, onClick: () => setRenaming({ viewId: view.id, title: view.title }), children: _jsx(Pencil, { size: 12, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "xs", "aria-label": `Remove ${view.title}`, onClick: () => void edit({ kind: "remove", viewId: view.id }, `Took out "${view.title}".`), children: _jsx(Trash2, { size: 12, "aria-hidden": "true" }) })] })),
+                                                    }
+                                                    : {}) }), _jsx(PlanRunDialog, { runs: planRuns, labels: snapshot.data.labels }), _jsx(Dialog, { open: rebinding !== undefined, onOpenChange: (open) => (open ? undefined : setRebinding(undefined)), children: _jsxs(DialogContent, { className: "sm:max-w-3xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { text: "The query behind this view" }), _jsx(DialogDescription, { children: "What the datastore is asked for, and how many rows come back. The columns it returns are what the chart draws, so a query that stops returning one is refused with the reason." })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: ["Query", _jsx("textarea", { "data-query-editor": true, "aria-label": "Query", spellCheck: false, rows: 12, className: "w-full rounded-md border border-default-border bg-card p-3 font-mono text-xs text-default-foreground", value: rebinding?.sparql ?? "", onChange: (event) => setRebinding((was) => (was ? { ...was, sparql: event.target.value } : was)) })] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: ["Most rows to draw", _jsx(Input, { "aria-label": "Most rows to draw", className: "h-8 w-28", inputMode: "numeric", value: rebinding?.limit ?? "", onChange: (event) => setRebinding((was) => (was ? { ...was, limit: event.target.value } : was)) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setRebinding(undefined), children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: () => void saveBinding(), children: "Run it" })] })] }) }), _jsx(Dialog, { open: renaming !== undefined, onOpenChange: (open) => (open ? undefined : setRenaming(undefined)), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { text: "What should this be called?" }), _jsx(DialogDescription, { children: "The name is what the card says above the chart. Nothing else about the view changes." })] }), _jsx(Input, { "aria-label": "View name", value: renaming?.title ?? "", onChange: (event) => setRenaming((was) => (was ? { ...was, title: event.target.value } : was)) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setRenaming(undefined), children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: () => {
+                                                                        const asked = renaming;
+                                                                        setRenaming(undefined);
+                                                                        if (asked && isPresent(asked.title.trim())) {
+                                                                            void edit({ kind: "rename", viewId: asked.viewId, title: asked.title.trim() }, `Renamed it to "${asked.title.trim()}".`);
+                                                                        }
+                                                                    }, children: "Rename it" })] })] }) })] })) })] }) })) : null] })] }));
+}

package/dist/app/horn-view-page.d.ts

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

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { Camera, Link2, Pencil } from "lucide-react";
+import { Button, Input } from "@manta-eu/react";
+import { hornSnapshotSchema, variablesFromSearch } 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 { PlanRunDialog, usePlanRuns } from "../components/plan-runs";
+import { sendHornScreenshot } from "../components/rasterize";
+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))
+        return _jsx(DatastoreMissing, {});
+    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(Viewer, { datastoreId: datastore.id, slug: slug ?? "" }) }));
+}
+function ShareLink() {
+    const [shown, setShown] = useState();
+    const share = () => {
+        const here = window.location.href;
+        setShown(here);
+        // The clipboard is a convenience; the link is on screen either way, which is what makes it shareable.
+        void navigator.clipboard?.writeText(here).catch(() => undefined);
+    };
+    return (_jsxs("span", { className: "flex items-center gap-2", children: [shown === undefined ? null : (_jsx(Input, { "data-share-url": true, readOnly: true, "aria-label": "Link to this Horn", className: "h-8 w-72", value: shown, onFocus: (event) => event.currentTarget.select() })), _jsxs(Button, { variant: "secondary", size: "sm", onClick: share, children: [_jsx(Link2, { size: 14, "aria-hidden": "true" }), shown === undefined ? "Share" : "Copied"] })] }));
+}
+/**
+ * Take the picture the showcase shows. The browser draws the Horn already, so this is the same drawing read
+ * back as a PNG — nothing is rendered anywhere else and no other browser is started to do it.
+ */
+function UpdatePicture({ datastoreId, slug, snapshot }) {
+    const [state, setState] = useState("idle");
+    const [problem, setProblem] = useState();
+    if (!isPresent(snapshot))
+        return null;
+    const take = async () => {
+        setState("working");
+        setProblem(undefined);
+        const kept = await sendHornScreenshot({ datastoreId, slug, snapshot });
+        setState(kept.ok ? "kept" : "idle");
+        if (!kept.ok)
+            setProblem(kept.error);
+    };
+    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 [search] = useSearchParams();
+    const saved = useSavedHorn(datastoreId, slug);
+    const horn = saved.data?.horn;
+    const variables = horn ? variablesFromSearch(horn, search.toString()) : {};
+    const snapshot = useQuery({
+        enabled: isPresent(horn),
+        queryKey: ["horn-view", datastoreId, slug, saved.data?.revision ?? "", variables],
+        queryFn: async ({ signal }) => {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/snapshot`, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ horn, variables }),
+                signal,
+            });
+            if (!response.ok)
+                throw new Error(`The Horn could not be drawn (${response.status}).`);
+            const body = await response.json();
+            return hornSnapshotSchema.parse(isRecord(body) ? body["snapshot"] : undefined);
+        },
+    });
+    const planRuns = usePlanRuns({
+        datastoreId,
+        realm: horn?.realm ?? "hiremanta-com",
+        onChanged: () => void snapshot.refetch(),
+    });
+    if (saved.isError) {
+        return (_jsx(ErrorState, { title: "That Horn could not be opened", hint: saved.error instanceof Error ? saved.error.message : "It may have been removed." }));
+    }
+    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 })) : (
+            // 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 })] }))] }));
+}

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

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

package/dist/app/horns-page.js

@@ -0,0 +1,43 @@
+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 { ChevronRight, Columns3, Plus } from "lucide-react";
+import { Button } from "@manta-eu/react";
+import { PageHeader } from "../components/page-header";
+import { DatastoreMissing, EmptyState, ErrorState, Loading } from "../components/states";
+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))
+        return _jsx(DatastoreMissing, {});
+    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(HornsIn, { datastoreId: datastore.id }) }));
+}
+function HornsIn({ datastoreId }) {
+    const horns = useQuery({
+        queryKey: ["horns", datastoreId],
+        enabled: isPresent(datastoreId),
+        queryFn: async ({ signal }) => {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns`, { signal });
+            if (!response.ok)
+                throw new Error(`The datastore answered ${response.status}.`);
+            const body = await response.json();
+            const listed = isRecord(body) && Array.isArray(body["horns"]) ? body["horns"] : [];
+            return listed.flatMap((entry) => isRecord(entry) && typeof entry["slug"] === "string"
+                ? [
+                    {
+                        slug: entry["slug"],
+                        title: typeof entry["title"] === "string" ? entry["title"] : entry["slug"],
+                        number: typeof entry["number"] === "number" ? entry["number"] : 1,
+                    },
+                ]
+                : []);
+        },
+    });
+    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))) }))] }));
+}

package/dist/app/new-horn-page.d.ts

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { isPresent } from "@manta-eu/lib/present";
+import { useParams } from "react-router";
+import { standaloneHorn } from "@manta-eu/horns/shapes";
+import { DatastoreMissing } 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 { 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
+// it builds it, and the first save makes its address from that name.
+const starterPrompts = [
+    "Which campaigns are spending the most, and where is the waste?",
+    "Show me the accounts with the most pipeline movement this month",
+    "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)) {
+        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 }) }));
+}
+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 }));
+}