@manta-eu/horns-client 0.1.0

package/dist/components/plan-runs.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { planStatusQuery, readPlanStatus } from "@manta-eu/horns/render";
+import { planSummary } from "@manta-eu/horns-kit";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@manta-eu/react";
+import { browserSparqlSelect } from "../lib/manta/sparql-select";
+import { planPollAttempts, planPollInterval, runSeen, runSettled, startPlanRun } from "../lib/plan-runs";
+/**
+ * Previews and runs of the action plans a Horn shows. A preview starts straight away: it changes nothing. A real
+ * run waits for a yes in `PlanRunDialog`. Either way the graph is then asked every few seconds how the run went,
+ * and a real run that finished redraws the Horn, because the things it changed now look different.
+ */
+export function usePlanRuns(args) {
+    const { datastoreId, realm, onChanged } = args;
+    const [status, setStatus] = useState({});
+    const [pending, setPending] = useState(new Set());
+    const [confirming, setConfirming] = useState();
+    const [problem, setProblem] = useState();
+    const alive = useRef(true);
+    const changed = useRef(onChanged);
+    changed.current = onChanged;
+    useEffect(() => {
+        alive.current = true;
+        return () => {
+            alive.current = false;
+        };
+    }, []);
+    const follow = async (plan, preview, startedBefore) => {
+        const select = browserSparqlSelect(datastoreId);
+        for (let attempt = 0; attempt < planPollAttempts && alive.current; attempt += 1) {
+            await new Promise((resolve) => setTimeout(resolve, planPollInterval));
+            if (!alive.current)
+                return;
+            const now = await select(planStatusQuery(realm, [plan.iri]))
+                .then((results) => readPlanStatus(results).get(plan.iri))
+                .catch(() => undefined);
+            if (now === undefined || !runSeen(now, startedBefore))
+                continue;
+            setStatus((before) => ({ ...before, [plan.iri]: now }));
+            if (runSettled(now, startedBefore)) {
+                if (!preview && now.state === "completed")
+                    changed.current();
+                return;
+            }
+        }
+    };
+    const start = async (plan, preview) => {
+        const startedBefore = (status[plan.iri] ?? plan).lastRun?.startedAt;
+        setProblem(undefined);
+        setPending((before) => new Set([...before, plan.iri]));
+        try {
+            await startPlanRun({ datastoreId, plan: plan.iri, preview });
+            setStatus((before) => ({
+                ...before,
+                [plan.iri]: { ...(before[plan.iri] ?? plan), state: "running", lastRun: { startedAt: "", preview } },
+            }));
+            void follow(plan, preview, startedBefore);
+        }
+        catch (caught) {
+            setProblem(caught instanceof Error ? caught.message : String(caught));
+        }
+        finally {
+            setPending((before) => new Set([...before].filter((one) => one !== plan.iri)));
+        }
+    };
+    return {
+        actions: {
+            onPreview: (plan) => void start(plan, true),
+            onRun: (plan) => setConfirming(plan),
+            status,
+            pending,
+        },
+        confirming,
+        confirm: () => {
+            const plan = confirming;
+            setConfirming(undefined);
+            if (plan !== undefined)
+                void start(plan, false);
+        },
+        cancel: () => setConfirming(undefined),
+        problem,
+        dismiss: () => setProblem(undefined),
+    };
+}
+export function PlanRunDialog(props) {
+    const { runs, labels } = props;
+    const plan = runs.confirming;
+    const count = plan?.changes.length ?? 0;
+    return (_jsx(Dialog, { open: plan !== undefined, onOpenChange: (open) => (open ? undefined : runs.cancel()), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { text: count === 1 ? "Make this change?" : `Make these ${count} changes?` }), _jsxs(DialogDescription, { children: [plan === undefined ? "" : planSummary(plan, labels), " Manta will change them in the platforms they came from, the same way the preview checked. This cannot be undone from here."] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: runs.cancel, children: "Not now" }), _jsx(Button, { variant: "destructive", onClick: runs.confirm, children: "Make the changes" })] })] }) }));
+}

package/dist/components/rasterize.d.ts

@@ -0,0 +1,34 @@
+import { type HornSnapshot } from "@manta-eu/horns/render";
+/** A view that would not draw, and what it said. */
+export type RenderProblem = {
+    viewId: string;
+    message: string;
+};
+export type Rasterized = {
+    png: Blob;
+    problems: RenderProblem[];
+};
+/**
+ * The Horn drawn off-screen at the capture width, handed back as a PNG with whatever would not draw.
+ *
+ * The problems come free: this is a real draw of every view, so a view that throws throws here. It is the
+ * only place the app draws a Horn where somebody is waiting for the answer.
+ */
+export declare function rasterizeHorn(snapshot: HornSnapshot): Promise<Rasterized>;
+export type ScreenshotKept = {
+    ok: true;
+    capturedAt?: string;
+} | {
+    ok: false;
+    error: string;
+};
+/**
+ * Take the picture and hand it to the worker, which stores it where Manta keeps files. Never throws: a Horn
+ * that saved is saved whether or not anyone managed to photograph it, so a caller after a save can ignore the
+ * answer and a caller who asked for it can show what went wrong.
+ */
+export declare function sendHornScreenshot(args: {
+    datastoreId: string;
+    slug: string;
+    snapshot: HornSnapshot;
+}): Promise<ScreenshotKept>;

package/dist/components/rasterize.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { toBlob } from "html-to-image";
+import { captureDeviceScaleFactor, captureWidth } from "@manta-eu/horns/render";
+import { HornSnapshotView } from "@manta-eu/horns-kit";
+import { makeWrittenHornView } from "./written-horn-view";
+import { isRecord } from "@manta-eu/horns";
+import { problemOf } from "../lib/problem";
+// A picture of a Horn, taken by the browser that already has it.
+//
+// The browser is the only thing that can draw a Horn now: a view is model-written TSX composing
+// `@manta-eu/react`, so it needs a transpiler, the design system and a stylesheet. `html-to-image` clones the
+// drawn node, inlines the computed style of every element and embeds the fonts, which is what carries the
+// design system into the picture — serializing the markup alone would lose all of it.
+//
+// Drawn off-screen at the capture width rather than photographing what is on screen, so the picture is the
+// same whatever size the window is and whatever the page around it is doing.
+// A tall Horn would otherwise produce a picture measured in megabytes; a card shows the top of it anyway.
+const maxCaptureHeight = 2000;
+/** Long enough for a written view to transpile and draw; past it the picture is taken of whatever is there. */
+const settleTimeoutMs = 8000;
+/** No mutation for this long means the views have finished drawing. */
+const quietMs = 150;
+/**
+ * Waits for the off-screen tree to stop changing.
+ *
+ * A written view draws after a dynamic import and two effects, and nothing in the kit says when it is done, so
+ * quiet is the signal: no mutation for `quietMs`, and the deadline wins either way. A picture of a view still
+ * showing its placeholder is worth more than no picture.
+ */
+function settled(node) {
+    return new Promise((resolve) => {
+        let quiet;
+        const observer = new MutationObserver(() => {
+            clearTimeout(quiet);
+            quiet = setTimeout(done, quietMs);
+        });
+        const done = () => {
+            clearTimeout(quiet);
+            clearTimeout(deadline);
+            observer.disconnect();
+            resolve();
+        };
+        const deadline = setTimeout(done, settleTimeoutMs);
+        quiet = setTimeout(done, quietMs);
+        observer.observe(node, { subtree: true, childList: true, attributes: true, characterData: true });
+    });
+}
+/**
+ * The Horn drawn off-screen at the capture width, handed back as a PNG with whatever would not draw.
+ *
+ * The problems come free: this is a real draw of every view, so a view that throws throws here. It is the
+ * only place the app draws a Horn where somebody is waiting for the answer.
+ */
+export async function rasterizeHorn(snapshot) {
+    const problems = [];
+    const seen = new Set();
+    const writtenView = makeWrittenHornView((problem) => {
+        if (seen.has(problem.viewId))
+            return;
+        seen.add(problem.viewId);
+        problems.push(problem);
+    });
+    const holder = document.createElement("div");
+    holder.setAttribute("aria-hidden", "true");
+    holder.style.position = "fixed";
+    holder.style.top = "0";
+    holder.style.left = "-20000px";
+    holder.style.width = `${captureWidth}px`;
+    holder.style.pointerEvents = "none";
+    document.body.append(holder);
+    const root = createRoot(holder);
+    try {
+        root.render(_jsx(HornSnapshotView, { snapshot: snapshot, mode: "capture", writtenView: writtenView }));
+        await settled(holder);
+        const drawing = holder.firstElementChild;
+        if (!(drawing instanceof HTMLElement))
+            throw new Error("The Horn drew nothing to take a picture of.");
+        const height = Math.min(Math.ceil(drawing.getBoundingClientRect().height), maxCaptureHeight);
+        const png = await toBlob(drawing, {
+            width: captureWidth,
+            height,
+            pixelRatio: captureDeviceScaleFactor,
+            // The clone is measured from the top: a Horn taller than the cap shows its first screens, not a squeeze.
+            style: { margin: "0", height: `${height}px` },
+        });
+        if (png === null)
+            throw new Error("The picture could not be encoded.");
+        return { png, problems };
+    }
+    finally {
+        root.unmount();
+        holder.remove();
+    }
+}
+/**
+ * Take the picture and hand it to the worker, which stores it where Manta keeps files. Never throws: a Horn
+ * that saved is saved whether or not anyone managed to photograph it, so a caller after a save can ignore the
+ * answer and a caller who asked for it can show what went wrong.
+ */
+export async function sendHornScreenshot(args) {
+    try {
+        const { png } = await rasterizeHorn(args.snapshot);
+        const response = await fetch(`/api/d/${encodeURIComponent(args.datastoreId)}/horns/${encodeURIComponent(args.slug)}/screenshot`, { method: "POST", headers: { "content-type": "image/png" }, body: png });
+        const body = await response.json().catch(() => undefined);
+        if (!response.ok) {
+            return { ok: false, error: problemOf(body, `The picture was not kept (${response.status}).`) };
+        }
+        const capturedAt = isRecord(body) && typeof body["capturedAt"] === "string" ? body["capturedAt"] : undefined;
+        return { ok: true, ...(capturedAt === undefined ? {} : { capturedAt }) };
+    }
+    catch (caught) {
+        return { ok: false, error: caught instanceof Error ? caught.message : String(caught) };
+    }
+}

package/dist/components/read-the-code.d.ts

@@ -0,0 +1,14 @@
+import { type ReviewState } from "@manta-eu/horns/render";
+import type { Horn } from "@manta-eu/horns";
+import type { VisualEdit } from "@manta-eu/horns/studio";
+export type ReadTheCodeProps = {
+    viewId: string;
+    title: string;
+    /** The code as it would run. */
+    source: string;
+    state: ReviewState["state"];
+    onKeep: (edit: VisualEdit) => void;
+};
+export declare function ReadTheCode({ viewId, title, source, state, onKeep }: ReadTheCodeProps): import("react").JSX.Element;
+/** The review state of every written view in a draft, by view id, for the Studio to show on each card. */
+export declare function writtenReviewStates(horn: Horn): Promise<Record<string, ReviewState["state"]>>;

package/dist/components/read-the-code.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@manta-eu/react";
+import { reviewOf, reviewStateOf } from "@manta-eu/horns/render";
+const wording = {
+    unread: {
+        badge: "Not read yet",
+        title: "Read the code before you keep it",
+        lead: "The Studio wrote this view. It draws with Manta's own components and can reach nothing else, but nobody has read what it does yet. This Horn will not save until someone has.",
+        action: "I have read this — keep it",
+    },
+    stale: {
+        badge: "Changed since it was read",
+        title: "This changed after it was read",
+        lead: "Someone read an earlier version of this view and kept it; it has been rewritten since. What was read is not what would run, so it needs reading again.",
+        action: "I have read this — keep it",
+    },
+    reviewed: {
+        badge: "Read and kept",
+        title: "This code has been read",
+        lead: "Someone read this exact code and kept it. Change a character and it will need reading again.",
+        action: "Close",
+    },
+};
+export function ReadTheCode({ viewId, title, source, state, onKeep }) {
+    const [open, setOpen] = useState(false);
+    const words = wording[state];
+    async function keep() {
+        onKeep({ kind: "keep-code", viewId, reviewed: await reviewOf(source, new Date()) });
+        setOpen(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: state === "reviewed" ? "ghost" : "secondary", size: "xs", onClick: () => setOpen(true), "aria-label": `${words.title}: ${title}`, children: words.badge }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { text: words.title }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { children: title }), _jsx("span", { className: "text-muted-foreground text-sm", children: words.badge })] }), _jsx("p", { className: "text-muted-foreground m-0 text-sm", children: words.lead }), _jsx("pre", { className: "border-muted-border max-h-[50vh] overflow-auto rounded-lg border p-3 text-xs leading-relaxed", children: _jsx("code", { children: source }) }), _jsx("div", { className: "flex justify-end gap-2", children: state === "reviewed" ? (_jsx(Button, { onClick: () => setOpen(false), children: words.action })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: () => setOpen(false), children: "Not yet" }), _jsx(Button, { onClick: () => void keep(), children: words.action })] })) })] })] }) })] }));
+}
+/** The review state of every written view in a draft, by view id, for the Studio to show on each card. */
+export async function writtenReviewStates(horn) {
+    const pairs = await Promise.all(horn.views.map(async (view) => {
+        if ("ref" in view || view.render.kind !== "tsx")
+            return [];
+        const { state } = await reviewStateOf(view.render);
+        return [[view.id, state]];
+    }));
+    return Object.fromEntries(pairs.flat());
+}

package/dist/components/snapshot-view.d.ts

@@ -0,0 +1,12 @@
+import type { HornSnapshot, SnapshotView } from "@manta-eu/horns/render";
+/**
+ * One view of a snapshot, drawn on its own.
+ *
+ * `HornSnapshotView` draws a whole Horn with its frame; a zoo card, a coverage run and an entity page each
+ * want one view and their own chrome around it. Both go through `writtenHornView`, so what a person reviews
+ * on one page is what they see on the others.
+ */
+export declare function SnapshotViewBody(props: {
+    snapshot: HornSnapshot;
+    view: SnapshotView;
+}): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/components/snapshot-view.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { entityLinks } from "@manta-eu/horns-kit";
+import { ErrorState } from "./states";
+import { writtenHornView } from "./written-horn-view";
+/**
+ * One view of a snapshot, drawn on its own.
+ *
+ * `HornSnapshotView` draws a whole Horn with its frame; a zoo card, a coverage run and an entity page each
+ * want one view and their own chrome around it. Both go through `writtenHornView`, so what a person reviews
+ * on one page is what they see on the others.
+ */
+export function SnapshotViewBody(props) {
+    const { snapshot, view } = props;
+    const { content } = view;
+    if (content.lane === "error")
+        return _jsx(ErrorState, { title: view.title, hint: content.message });
+    if (content.lane !== "sandbox")
+        return null;
+    const context = {
+        labels: snapshot.labels,
+        links: entityLinks(snapshot),
+        datastoreId: snapshot.horn.datastoreId,
+    };
+    return writtenHornView(content, view, context);
+}

package/dist/components/states.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+type EmptyStateProps = {
+    title: string;
+    hint?: string;
+    icon?: ReactNode;
+    /** What to do about it: an empty state that offers the way out of itself. */
+    action?: ReactNode;
+};
+export declare function EmptyState(props: EmptyStateProps): import("react").JSX.Element;
+export declare function ErrorState({ title, hint }: {
+    title: string;
+    hint?: string;
+}): import("react").JSX.Element;
+export declare function Loading({ label, rows }: {
+    label?: string;
+    rows?: number;
+}): import("react").JSX.Element;
+export declare function DatastoreMissing(): import("react").JSX.Element;
+export declare function BackLink({ to, label }: {
+    to: string;
+    label: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/states.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link } from "react-router";
+import { CircleAlert, Inbox } from "lucide-react";
+import { Skeleton } from "@manta-eu/react";
+export function EmptyState(props) {
+    const { title, hint, icon, action } = props;
+    return (_jsxs("div", { "data-empty-state": true, className: "flex flex-col items-center gap-2 rounded-lg border border-default-border bg-card px-6 py-12 text-center", children: [_jsx("span", { className: "text-muted-foreground", "aria-hidden": "true", children: icon ?? _jsx(Inbox, { size: 20 }) }), _jsx("p", { className: "font-medium text-default-foreground", children: title }), isPresent(hint) ? _jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: hint }) : null, isPresent(action) ? _jsx("div", { className: "mt-2", children: action }) : null] }));
+}
+export function ErrorState({ title, hint }) {
+    return (_jsxs("div", { role: "alert", "data-error-state": true, className: "flex items-start gap-3 rounded-lg border border-error bg-error/10 px-4 py-3 text-sm", children: [_jsx(CircleAlert, { className: "mt-0.5 shrink-0 text-[var(--color-error)]", size: 16, "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "font-medium text-default-foreground", children: title }), isPresent(hint) ? _jsx("p", { className: "text-muted-foreground", children: hint }) : null] })] }));
+}
+export function Loading({ label = "Loading…", rows = 3 }) {
+    return (_jsx("div", { "data-loading": true, className: "flex flex-col gap-3", "aria-busy": "true", "aria-label": label, children: Array.from({ length: rows }, (_unused, index) => (_jsx(Skeleton, { className: "h-12 w-full rounded-lg" }, index))) }));
+}
+// Every datastore-scoped page refuses the same way, because the session's grants decide what exists.
+export function DatastoreMissing() {
+    return (_jsx(EmptyState, { title: "This datastore is not available to your account.", hint: "Pick another datastore from the sidebar, or ask an operator for access." }));
+}
+export function BackLink({ to, label }) {
+    return (_jsx(Link, { className: "text-sm text-muted-foreground hover:text-default-foreground", to: to, children: label }));
+}

package/dist/components/studio-chat.d.ts

@@ -0,0 +1,47 @@
+import type { HornChange } from "@manta-eu/horns/studio";
+import type { StudioStep } from "../lib/studio-progress";
+/**
+ * One line of a Studio conversation. An answer that changed the Horn carries the change and the version it
+ * made, which is what its card previews; what the turn did on the way there is kept as its thinking.
+ */
+export type StudioEntry = {
+    kind: "user";
+    content: string;
+} | {
+    kind: "assistant";
+    content: string;
+    thinking: readonly StudioStep[];
+    seconds: number;
+    change?: {
+        summary: HornChange;
+        versionId: number;
+    };
+    /** What a second model said about the picture of what was drawn. Advice, never a verdict. */
+    advice?: readonly string[];
+    /** The turn ran out of steps with work left. */
+    unfinished?: boolean;
+} | {
+    kind: "failure";
+    content: string;
+};
+type StudioChatProps = {
+    entries: readonly StudioEntry[];
+    pending: boolean;
+    /** What the running turn has done so far. */
+    progress: readonly StudioStep[];
+    /** The version the preview shows. */
+    previewing: number;
+    welcome: string;
+    /** Said under the welcome: what to do, and that trying something is safe. */
+    reassurance: string;
+    starters: readonly string[];
+    placeholder: string;
+    onSend: (text: string) => void;
+    onPreview: (versionId: number) => void;
+};
+/**
+ * The Studio's conversation as a rail beside the preview: what was asked, what the turn did while it thought,
+ * what it said, and a card for each change that can put that version back in the preview.
+ */
+export declare function StudioChat(props: StudioChatProps): import("react").JSX.Element;
+export {};

package/dist/components/studio-chat.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { isPresent } from "@manta-eu/lib/present";
+import { ArrowUp, CircleAlert, Eye, GitCommitHorizontal } from "lucide-react";
+import { Button, ChatConversationStarters, ChatInput, ChatInputSubmit, ChatInputTextarea, ChatMessage, ChatReasoning, ChatWelcome, cn, } from "@manta-eu/react";
+/**
+ * One step, with what it was actually on folded under it.
+ *
+ * "Querying the datastore" fifteen times says nothing. The query itself is too long for a line and too
+ * useful to drop, so it sits under the step for whoever wants it.
+ */
+function stepItem(step) {
+    return {
+        icon: null,
+        title: step.title,
+        ...(step.detail === undefined
+            ? {}
+            : {
+                children: (_jsx("pre", { className: "text-muted-foreground mt-1 max-h-48 overflow-auto rounded-md bg-muted/40 p-2 font-mono text-[11px] leading-relaxed whitespace-pre-wrap", children: step.detail })),
+            }),
+    };
+}
+/**
+ * What the reviewer saw, and the one button that acts on it.
+ *
+ * The reviewer is a second model looking at a picture of what was drawn, so its advice is a reading rather
+ * than a verdict — the person decides whether it is worth another turn.
+ */
+function ReviewCard({ advice, onSend }) {
+    return (_jsxs("section", { "data-review-card": true, className: "border-default-border flex flex-col gap-2 rounded-lg border p-3", children: [_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(Eye, { size: 14, "aria-hidden": "true", className: "text-muted-foreground" }), "What a second look found"] }), _jsx("ul", { className: "text-muted-foreground flex list-disc flex-col gap-1 pl-4 text-sm", children: advice.map((line) => (_jsx("li", { children: line }, line))) }), _jsx(Button, { size: "sm", variant: "secondary", className: "self-start", onClick: () => onSend(fixRequest(advice)), children: "Fix these" })] }));
+}
+function fixRequest(advice) {
+    return `Fix these, and keep everything else as it is:\n${advice.map((line) => `- ${line}`).join("\n")}`;
+}
+function ChangeCard(props) {
+    const { change, previewing, onPreview } = props;
+    const [open, setOpen] = useState(false);
+    return (_jsxs("section", { "data-change-card": true, className: cn("flex flex-col gap-3 rounded-xl border bg-base-background p-3", previewing ? "border-primary" : "border-muted-border"), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(GitCommitHorizontal, { size: 16, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-muted-foreground" }), _jsx("p", { className: "text-sm font-medium text-default-foreground", children: change.title })] }), open ? (_jsx("ul", { className: "flex list-disc flex-col gap-1 pl-9 text-xs text-muted-foreground", children: change.details.map((detail) => (_jsx("li", { children: detail }, detail))) })) : null, _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", "aria-expanded": open, onClick: () => setOpen((was) => !was), children: "Details" }), _jsx(Button, { variant: previewing ? "tertiary" : "secondary", size: "sm", disabled: previewing, onClick: onPreview, children: previewing ? "Previewing" : "Preview" })] })] }));
+}
+/**
+ * The Studio's conversation as a rail beside the preview: what was asked, what the turn did while it thought,
+ * what it said, and a card for each change that can put that version back in the preview.
+ */
+export function StudioChat(props) {
+    const { entries, pending, progress, previewing, welcome, reassurance, starters, placeholder, onSend, onPreview } = props;
+    const scroller = useRef(null);
+    // The newest line is the one being read, so the rail follows it down.
+    useEffect(() => {
+        const element = scroller.current;
+        if (isPresent(element))
+            element.scrollTop = element.scrollHeight;
+    }, [entries, progress]);
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { ref: scroller, "data-chat-history": true, className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4", children: [!isPresent(entries) && !pending ? (_jsxs(_Fragment, { children: [_jsx(ChatWelcome, { channel: "MANTA", title: welcome, subtitle: reassurance }), _jsx(ChatConversationStarters, { starters: starters.map((title, index) => ({ id: `starter-${index}`, title })), onStarterClick: (starter) => onSend(starter.title) })] })) : null, entries.map((entry, index) => {
+                        if (entry.kind === "user") {
+                            return (_jsx(ChatMessage, { role: "user", children: entry.content }, index));
+                        }
+                        if (entry.kind === "failure") {
+                            return (_jsxs("p", { role: "alert", className: "flex items-start gap-2 text-sm text-muted-foreground", children: [_jsx(CircleAlert, { size: 16, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-[var(--color-error)]" }), entry.content] }, index));
+                        }
+                        const change = entry.change;
+                        return (_jsxs("div", { className: "flex flex-col gap-3", children: [isPresent(entry.thinking) ? (_jsx(ChatReasoning, { phase: "done", text: "Finished thinking", seconds: entry.seconds, items: entry.thinking.map(stepItem) })) : null, _jsx(ChatMessage, { role: "assistant", children: entry.content }), isPresent(change) ? (_jsx(ChangeCard, { change: change.summary, previewing: previewing === change.versionId, onPreview: () => onPreview(change.versionId) })) : null, isPresent(entry.advice) ? _jsx(ReviewCard, { advice: entry.advice, onSend: onSend }) : null, entry.unfinished === true ? (_jsx(Button, { size: "sm", variant: "secondary", className: "self-start", onClick: () => onSend("Continue where you left off."), children: "Keep going" })) : null] }, index));
+                    }), pending ? (_jsx(ChatReasoning, { phase: "pending", text: "Thinking", items: (isPresent(progress) ? progress : [{ title: "Sending" }]).map(stepItem) })) : null] }), _jsx("div", { className: "shrink-0 border-t border-muted-border p-3", children: _jsxs(ChatInput, { onSubmit: (value) => onSend(value), children: [_jsx(ChatInputTextarea, { placeholder: placeholder, "aria-label": placeholder }), _jsx(ChatInputSubmit, { icon: ArrowUp, "aria-label": "Send", isLoading: pending, disabled: pending })] }) })] }));
+}

package/dist/components/written-horn-view.d.ts

@@ -0,0 +1,15 @@
+import type { HornSnapshotViewProps } from "@manta-eu/horns-kit";
+/**
+ * Draws a written view, telling `onError` when one will not draw.
+ *
+ * A view that throws is caught by the kit's boundary and shown to the person, and nothing else ever hears
+ * about it — so the Studio cannot fix what it just wrote. A caller that wants to know passes `onError`; the
+ * off-screen draw the picture is taken from passes one, which is how a broken view reaches the next turn.
+ */
+export declare function makeWrittenHornView(onError?: (problem: {
+    viewId: string;
+    message: string;
+}) => void): NonNullable<HornSnapshotViewProps["writtenView"]>;
+export declare const writtenHornView: (content: Extract<import("@manta-eu/horns/render").SnapshotView["content"], {
+    lane: "sandbox";
+}>, view: import("@manta-eu/horns/render").SnapshotView, context: import("@manta-eu/horns-kit").WrittenViewContext) => import("react").ReactNode;

package/dist/components/written-horn-view.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense } from "react";
+import { Loader } from "@manta-eu/react";
+import { loadWrittenSurface, writtenHooks } from "../lib/written-surface";
+// Behind `lazy` because the runtime carries a transpiler; the server's placeholder stays until it resolves.
+// Not passed on the capture path, which runs with JavaScript off.
+const WrittenView = lazy(async () => {
+    const written = await import("@manta-eu/horns-kit/written");
+    return { default: written.WrittenView };
+});
+/**
+ * Draws a written view, telling `onError` when one will not draw.
+ *
+ * A view that throws is caught by the kit's boundary and shown to the person, and nothing else ever hears
+ * about it — so the Studio cannot fix what it just wrote. A caller that wants to know passes `onError`; the
+ * off-screen draw the picture is taken from passes one, which is how a broken view reaches the next turn.
+ */
+export function makeWrittenHornView(onError) {
+    return (content, view, context) => (_jsx(Suspense, { fallback: _jsx(Loader, {}), children: _jsx(WrittenView, { source: content.source, rows: content.rows, columns: content.columns.map((column) => column.name), labels: context.labels, links: context.links, loadSurface: loadWrittenSurface, hooks: writtenHooks, fallback: _jsx(Loader, {}), renderError: (message) => {
+                onError?.({ viewId: view.id, message });
+                // Plain words: the person reading this asked for a view, not a stack trace.
+                return (_jsx("p", { role: "alert", className: "text-destructive-foreground m-0 text-sm", children: message }));
+            } }) }));
+}
+export const writtenHornView = makeWrittenHornView();

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { AppRoutes, hornsRoutes } from "./app/routes.tsx";
+export { AppShell } from "./components/app-shell.tsx";
+export { MantaSparqlProvider, datastoreSparqlPath, queryClientFor } from "./lib/manta/providers.tsx";
+export { MantaSessionProvider, useMantaSession } from "./lib/manta/session.tsx";
+export { browserSparqlSelect } from "./lib/manta/sparql-select.ts";
+export { ldkitShapeCatalog, provideShapeCatalog, shapesRealm, type ShapeCatalogSource } from "./lib/shapes/catalog.ts";
+export { rasterizeHorn, sendHornScreenshot } from "./components/rasterize.tsx";
+export { reviewHorn, type HornReview } from "./lib/horn-review.ts";
+export { writtenHornView, makeWrittenHornView } from "./components/written-horn-view.tsx";
+export { catalogCardView } from "./components/catalog-card-view.tsx";
+export { hornPath, hornsPath } from "./app/paths.ts";

package/dist/index.js

@@ -0,0 +1,16 @@
+// The Horns app, as a library.
+//
+// A host mounts `<HornsRoutes />` inside its own router, or takes `mountHorns` for a page of its own. What
+// the browser needs beyond this is the stylesheet: `@manta-eu/horns-client/styles.css`, built here rather
+// than compiled by the host, so a host with no Tailwind still gets the app looking like Manta.
+export { AppRoutes, hornsRoutes } from "./app/routes.js";
+export { AppShell } from "./components/app-shell.js";
+export { MantaSparqlProvider, datastoreSparqlPath, queryClientFor } from "./lib/manta/providers.js";
+export { MantaSessionProvider, useMantaSession } from "./lib/manta/session.js";
+export { browserSparqlSelect } from "./lib/manta/sparql-select.js";
+export { ldkitShapeCatalog, provideShapeCatalog, shapesRealm } from "./lib/shapes/catalog.js";
+export { rasterizeHorn, sendHornScreenshot } from "./components/rasterize.js";
+export { reviewHorn } from "./lib/horn-review.js";
+export { writtenHornView, makeWrittenHornView } from "./components/written-horn-view.js";
+export { catalogCardView } from "./components/catalog-card-view.js";
+export { hornPath, hornsPath } from "./app/paths.js";

package/dist/lib/horn-review.d.ts

@@ -0,0 +1,27 @@
+import type { Horn } from "@manta-eu/horns";
+import { type RenderProblem } from "../components/rasterize";
+/**
+ * What the draw found: what a second model said about it, any view that would not draw at all, and why
+ * there is no advice when there is none.
+ *
+ * `unavailable` matters: a reviewer that is simply not configured looks exactly like a reviewer that found
+ * nothing wrong, and those are opposite things to know.
+ */
+export type HornReview = {
+    advice: string[];
+    problems: RenderProblem[];
+    unavailable?: string;
+};
+/**
+ * Draw the Horn that was just made, look at it, and say what is wrong.
+ *
+ * The browser is the only thing that can draw a Horn, so both answers come from one off-screen draw: a view
+ * that throws throws here, and the picture of the rest goes to a second model. Never throws — a Horn that
+ * changed has changed whether or not anyone managed to look at it.
+ */
+export declare function reviewHorn(args: {
+    datastoreId: string;
+    horn: Horn;
+    asked: string;
+    variables?: Readonly<Record<string, unknown>> | undefined;
+}): Promise<HornReview>;