@graview/primitives 0.1.65 → 0.1.66

package/dist/page-better.js

@@ -0,0 +1,714 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "@graview/core";
+import { useGraview } from "@graview/react/provider";
+import { viewPlaceOf } from "@graview/react/drawing";
+import { CONTROL_WORDS, describeChange, draftPageSpec, drawnFindings, forkManifest, IT_DOES_NOT_WORK, lookOf, mayChangeDeclaration, pressFindings, pressSaid, runDesignAgent, specCanSay } from "@graview/tools/section";
+import { interactionId } from "@graview/tools/inline-ai";
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
+import { Highlighter, readPart } from "./section-better.js";
+import { readDrawn, Redesigning } from "./better-bar.js";
+import { BetterPanel } from "./better-panel.js";
+import { aboutOf, nameParts, partLines } from "./section-words.js";
+import "./frame.js"; // A door: tied to what the page drew first (TIED DOORS, packages/primitives/src/frame.ts).
+const words = (text) => (text ?? "").replace(/\s+/g, " ").trim();
+const frame = () => new Promise((done) => requestAnimationFrame(() => done()));
+const wait = (ms) => new Promise((done) => setTimeout(done, ms));
+/** A heading's own words, without a count or a disclosure's arrow drawn beside them: "Someday", from "▾ Someday · 3". */
+function headingWords(heading) {
+    const copy = heading.cloneNode(true);
+    for (const span of copy.querySelectorAll("span"))
+        span.remove();
+    return words(copy.textContent).replace(/^[▸▾]\s*/, "");
+}
+/** What a page shows, as a fingerprint: its words and its shape. A draft that leaves it the same changed nothing drawn here. */
+export function drawnSignature(main) {
+    if (!main || !main.isConnected)
+        return "";
+    const text = main.innerText ?? main.textContent ?? "";
+    return `${main.querySelectorAll("*").length}|${words(text)}`;
+}
+/** The page as it stands, a line each: its headings, its rows and cards, its facts — what a view of it is seeded from. */
+export function outlineOf(main, most = 80) {
+    if (!main)
+        return "";
+    const lines = [];
+    const taken = new Set();
+    const ROW = 'li, tr, article, [data-graview-listed], [data-graview-record], [data-graview-field]';
+    for (const element of main.querySelectorAll(`h1, h2, h3, h4, ${ROW}`)) {
+        if (lines.length >= most)
+            break;
+        if ([...taken].some((one) => one.contains(element)))
+            continue;
+        if (element.closest("[data-graview-popover], [hidden], nav, [aria-hidden='true']"))
+            continue;
+        const heading = /^h([1-4])$/i.exec(element.localName);
+        const said = (heading ? headingWords(element) : words(element.innerText ?? element.textContent)).slice(0, 140);
+        if (!said)
+            continue;
+        if (heading)
+            lines.push(`${"#".repeat(Number(heading[1]))} ${said}`);
+        else {
+            const field = element.getAttribute("data-graview-field");
+            lines.push(field ? `${field}: ${said}` : `- ${said}`);
+            taken.add(element);
+        }
+    }
+    return lines.join("\n");
+}
+/** The records a view of the page reads, a few of each, as the view is handed them. */
+function dataOf(here, part) {
+    const { store } = here;
+    const plain = (node) => Object.fromEntries(Object.entries(node).filter(([, value]) => value !== undefined && typeof value !== "object").map(([key, value]) => [key, typeof value === "string" ? value.slice(0, 80) : value]));
+    const kinds = part.kind ? [part.kind] : store.schema.kinds.slice(0, 6);
+    return {
+        kinds: kinds.map((kind) => {
+            const nodes = store.graph.nodesOfKind(kind);
+            const definition = store.schema.tryDefinition(kind);
+            return { kind, count: nodes.length, fields: Object.keys(definition?.fields?.shape ?? {}), relations: Object.keys(definition?.edges ?? {}), some: (part.record ? nodes.filter((node) => node.id === part.record) : nodes.slice(0, 3)).map(plain) };
+        }),
+    };
+}
+/** The kinds and relations a view of this page reads: the kind's links, both ways; the home, everything. */
+function linksOf(here, part) {
+    const schema = here.store.schema;
+    const kinds = new Set();
+    const edges = new Set();
+    for (const definition of schema.definitions) {
+        for (const [name, edge] of Object.entries((definition.edges ?? {}))) {
+            const to = Array.isArray(edge?.to) ? edge.to : [];
+            const touches = part.kind === undefined || definition.kind === part.kind || to.includes(part.kind);
+            if (!touches)
+                continue;
+            edges.add(name);
+            for (const kind of [definition.kind, ...to])
+                if (kind !== part.kind && schema.tryDefinition(kind))
+                    kinds.add(kind);
+        }
+    }
+    if (part.kind === undefined)
+        for (const kind of schema.kinds)
+            kinds.add(kind);
+    return { kinds: [...kinds], edges: [...edges] };
+}
+/** Why a view could not be drawn, in words a model can act on, from the mark its host left where it fell back. */
+const FELL_BACK = {
+    manifest: "The view could not start: what it reads is not this app's.",
+    source: "The script is too long: make it shorter.",
+    start: "The script did not start: it must be one plain script, with no syntax errors, that calls graview.onProps and graview.render.",
+    error: "The script threw while drawing: read only what props gives (props.nodes for a list, props.node for one record), guard each value that may be missing, and call no function that does not exist.",
+};
+/** The view's place on the page, once the host has drawn the view of this name there: its handle — or why it fell back. */
+async function placeOfView(name, source, ms = 15000) {
+    const until = Date.now() + ms;
+    while (Date.now() < until) {
+        for (const element of document.querySelectorAll("[data-worker-view-place]")) {
+            const handle = viewPlaceOf(element);
+            // The place drawn now, with something in it: never one the page is tearing down, nor one not yet drawn after the page was drawn again.
+            const drawn = handle?.name === name ? handle.drawing().root : undefined;
+            // And the draft itself, where one was asked for: a design kept under the same name is not it.
+            if (handle && element.isConnected && drawn?.isConnected && drawn.childElementCount > 0 && (source === undefined || (await handle.source()) === source))
+                return { element, handle };
+        }
+        const fell = document.querySelector(`[data-worker-view-fell-back="${CSS.escape(name)}"]`);
+        if (fell)
+            return { failed: FELL_BACK[fell.getAttribute("data-worker-view-failed") ?? ""] ?? FELL_BACK["error"] };
+        await wait(80);
+    }
+    return { failed: "The view did not draw in time: keep it simple and quick to draw." };
+}
+const CARDS = /* @__PURE__ */ new Map();
+const cardOf = (at, first) => {
+    let held = CARDS.get(at);
+    if (!held)
+        CARDS.set(at, (held = { phase: first(), steps: [], before: false, putBack: null, began: false, original: null, markup: null, talk: [], events: [], since: Date.now(), stop: null, covering: false, pointed: null, about: null, kept: null, pressed: null, version: 0, heard: new Set() }));
+    return held;
+};
+/** The labels of the records the page showed: what a draft must still show. */
+function labelsShown(here, part, text) {
+    const { store } = here;
+    const nodes = part.record ? [store.graph.getNode(part.record)].filter(Boolean) : part.kind ? store.graph.nodesOfKind(part.kind) : store.schema.kinds.flatMap((kind) => store.graph.nodesOfKind(kind));
+    const read = words(text).toLowerCase();
+    return nodes
+        .map((node) => String(node["label"] ?? ""))
+        .filter((label) => label.length > 1 && read.includes(words(label).toLowerCase()))
+        .slice(0, 40);
+}
+/** The fields of the part's kind, by name: words a draft must not show as they are kept. */
+function fieldsOf(here, part) {
+    const kinds = part.kind ? [part.kind] : here.store.schema.kinds;
+    return kinds.flatMap((kind) => Object.keys((here.store.schema.tryDefinition(kind)?.fields?.shape ?? {})));
+}
+export function PageCard({ ask, close }) {
+    const here = useGraview();
+    const { ai, aiDesk, aiHere, session, principal, keptViews, store, onProposeChange, composeChange, onDraftChange, app } = here;
+    const part = ask.part;
+    const held = useMemo(() => cardOf(ask.at, () => (ask.mode === "highlight" ? { at: "highlighting" } : { at: "open" })), [ask]);
+    const subscribe = useCallback((listener) => (held.heard.add(listener), () => void held.heard.delete(listener)), [held]);
+    const phase = useSyncExternalStore(subscribe, () => held.phase, () => held.phase);
+    const version = useSyncExternalStore(subscribe, () => held.version, () => held.version);
+    void version;
+    const tell = useCallback(() => {
+        held.version += 1;
+        held.heard.forEach((listener) => listener());
+    }, [held]);
+    const setPhase = useCallback((next) => {
+        held.phase = next;
+        tell();
+    }, [held, tell]);
+    const backFromDraft = useCallback(async () => {
+        const back = held.putBack;
+        held.putBack = null;
+        if (back)
+            await back();
+    }, [held]);
+    /* Put away for good: a draft not kept goes with it, and the page stands as it was. */
+    const putAway = useCallback(() => {
+        held.stop?.abort();
+        held.stop = null;
+        void backFromDraft();
+        CARDS.delete(ask.at);
+        close();
+    }, [backFromDraft, ask.at, close, held]);
+    /* The page's own region now: the one the part was read in, or the one drawn again since. */
+    const mainNow = useCallback(() => (part.main?.isConnected ? part.main : document_main()), [part]);
+    const said = { name: part.name, slot: part.slot, ...(part.kind ? { kind: part.kind } : {}), ...(part.group ? { group: part.group } : {}) };
+    const placeName = part.place ?? (part.kind ? `${part.kind}-${part.slot}` : "home");
+    const scope = ask.fromScene ? `From the scene: Better UI changes how “${part.name}” looks on its page here, for everyone in this app.` : `This changes how ${part.name} looks for everyone in this app.`;
+    const entryOf = useCallback((asked, outcome, stages, extra = {}) => ({
+        id: interactionId(),
+        at: new Date().toISOString(),
+        by: principal,
+        target: { on: "place", place: placeName },
+        targetLabel: part.name,
+        ask: { kind: "section", said: asked },
+        offered: [],
+        outcome,
+        stages: stages.map((one) => ({ stage: one.stage, ms: one.ms, model: one.model })),
+        usage: stages.flatMap((one) => (one.usage ? [{ tier: one.stage === "light" ? "fast" : "thinking", model: one.model, inputTokens: one.usage.inputTokens, outputTokens: one.usage.outputTokens }] : [])),
+        ...extra,
+    }), [principal, placeName, part.name]);
+    /* What this seat may do here: change the app's settings through the host, and give the page a new design. */
+    const specHost = onProposeChange !== undefined && composeChange !== undefined && mayChangeDeclaration(store, principal);
+    const acts = useMemo(() => actsOf(here, part), [here, part]);
+    const manifest = forkManifest(said, linksOf(here, part), acts.map((one) => one.act));
+    const forkHost = manifest !== undefined && typeof keptViews?.fork === "function" && typeof keptViews.draftFork === "function" && keptViews.current().may.views === true;
+    const from = part.slot === "record" ? { page: "record", kind: part.kind } : part.slot === "home" ? { page: "home" } : { page: "list", kind: part.kind ?? "" };
+    const forkOf = useCallback((source) => ({ manifest: manifest, source, from, said: "" }), [manifest, from]);
+    /* GRAVIEW IS HERE WHILE IT WORKS, as it is beside the quick ask: on the part, among who is here. */
+    const working = phase.at === "working";
+    useEffect(() => {
+        if (!working)
+            return;
+        const at = part.record ?? (part.kind ? `kind:${part.kind}` : null);
+        aiHere({ participant: `agent:graview-for-${principal.id ?? "anyone"}:${session}`, kind: "agent", name: "Graview", ...(principal.id ? { onBehalfOf: principal.id } : {}), over: at, robot: { at, mode: "thinking" } });
+        return () => aiHere(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [working]);
+    /** The page as it was, read once before any draft: what every draft is judged against and compared with. */
+    const original = useCallback(() => {
+        if (held.original)
+            return held.original;
+        const main = mainNow();
+        const text = main?.innerText ?? "";
+        held.original = readDrawn(regionOf(main), labelsShown(here, part, text));
+        return held.original;
+    }, [held, mainNow, here, part]);
+    /** The page now, read as the original was. */
+    const drawnNow = useCallback(() => readDrawn(regionOf(mainNow()), original().records.map((one) => one.label)), [mainNow, original]);
+    /** A step shown on the page: the settings' edits laid over this page alone, or the new design drawn in its place. */
+    const show = useCallback(async (step) => {
+        await backFromDraft();
+        if (step.kind === "spec") {
+            const shown = await onDraftChange(proposalOf(step.edits, step.said, ai.name));
+            held.putBack = shown.undo;
+        }
+        else {
+            keptViews.draftFork(forkOf(step.source));
+            held.putBack = () => keptViews.draftFork(null);
+        }
+    }, [backFromDraft, onDraftChange, held, keptViews, forkOf, ai.name]);
+    /** The page as the person last saw it: the newest draft, or the page as it was. */
+    const showLatest = useCallback(async () => {
+        const step = held.steps.at(-1);
+        held.before = false;
+        if (step)
+            await show(step);
+        else
+            await backFromDraft();
+    }, [held, show, backFromDraft]);
+    const say = useCallback((who, words) => {
+        held.talk.push({ who, said: words });
+        tell();
+    }, [held, tell]);
+    const step = useCallback((event) => {
+        // The words as the model writes them stand in for the step it is on, and give way to the step once it is said.
+        if (held.events.at(-1)?.kind === "streaming")
+            held.events.pop();
+        held.events.push(event);
+        tell();
+    }, [held, tell]);
+    /** What the person has asked of it, all of it: a fact or a group they asked away is theirs to change. */
+    const askedWords = () => held.talk.filter((one) => one.who === "person").map((one) => one.said).join(" ");
+    /**
+     * THE QUICK WAY FIRST: where the Fast slot says the page's settings can say
+     * it, the least edits that do, checked by the host's composer and drawn
+     * on this page only — in seconds, with no conversation needed. Answers
+     * whether it made a draft; where it could not, the agent takes it.
+     */
+    const bySettings = useCallback(async (asked) => {
+        if (!specHost || !onDraftChange)
+            return false;
+        const reshape = await import("@graview/tools/reshape");
+        const remembered = reshape.documentOfApp(app ?? {});
+        if (!remembered)
+            return false;
+        const after = held.steps.at(-1);
+        if (after && after.kind !== "spec")
+            return false;
+        const before = after?.edits ?? [];
+        const composedBefore = before.length > 0 ? composeChange({ document: remembered, edits: before }) : undefined;
+        const document = composedBefore?.ok ? composedBefore.document : remembered;
+        const can = asked.mode === "just" ? { can: true } : await specCanSay(ai, asked.words, said);
+        if (!can.can)
+            return false;
+        step({ kind: "look", text: `Looking at how ${part.name} is set up` });
+        let lines = [];
+        const drafted = await draftPageSpec({
+            ai,
+            document,
+            part: said,
+            mode: asked.mode === "choose" ? "just" : asked.mode,
+            ...(asked.words ? { words: asked.words } : {}),
+            ...(asked.pointed ? { highlighted: [asked.pointed.name, ...asked.pointed.lines] } : {}),
+            shows: outlineOf(mainNow(), 30),
+            judge: async (edits) => {
+                const composed = composeChange({ document: remembered, edits: [...before, ...edits] });
+                if (!composed.ok)
+                    return [composed.refused];
+                lines = composed.said;
+                return [];
+            },
+        });
+        if (!drafted.ok)
+            return false;
+        const edits = [...before, ...drafted.edits];
+        const entry = entryOf(`Make “${part.name}” better: ${asked.words}`, "offered", drafted.stages);
+        const was = drawnSignature(mainNow());
+        const next = { kind: "spec", edits, said: lines[lines.length - 1] ?? lines[0] ?? `${part.name} changed.`, entry };
+        held.covering = true;
+        tell();
+        try {
+            await show(next);
+            let now = was;
+            for (const until = Date.now() + 1500; Date.now() < until && now === was;) {
+                await frame();
+                now = drawnSignature(mainNow());
+            }
+            const findings = now === was ? ["nothing changed"] : drawnFindings(original(), drawnNow(), { fields: fieldsOf(here, part), asked: askedWords() });
+            if (findings.length > 0) {
+                await showLatest();
+                aiDesk.record({ ...entry, outcome: "failed", failed: findings.join(" ") });
+                return false;
+            }
+        }
+        catch {
+            await showLatest();
+            return false;
+        }
+        finally {
+            held.covering = false;
+            tell();
+        }
+        held.steps.push(next);
+        held.before = false;
+        step({ kind: "passed", text: "Changed its settings — it's on the page" });
+        say("graview", `Done: ${next.said.replace(/\.$/, "")}.`);
+        return true;
+    }, [ai, aiDesk, app, composeChange, entryOf, held, here, mainNow, onDraftChange, original, drawnNow, part, said, show, showLatest, specHost, step, say, tell]);
+    /**
+     * A DRAFT THE AGENT MADE, drawn where nobody sees it — under a cover over
+     * the part — and judged: the host's checks of its code and of what it
+     * drew, and the page read again against the page as it was. What passes
+     * is left on the page as the newest draft; what does not is taken away
+     * again, and its findings go back to the agent.
+     */
+    const judgeDraft = useCallback(async (source) => {
+        if (!manifest || !keptViews?.draftFork)
+            return { findings: ["This page cannot be drawn anew here."], drew: undefined };
+        const was = original();
+        held.covering = true;
+        tell();
+        try {
+            keptViews.draftFork(forkOf(source));
+            held.putBack = () => keptViews.draftFork(null);
+            const drawn = await placeOfView(manifest.name, source);
+            let findings;
+            if ("failed" in drawn)
+                findings = [drawn.failed];
+            else {
+                const refused = [...(await drawn.handle.check(source)), ...drawn.handle.refused()];
+                if (refused.length > 0)
+                    findings = refused;
+                else {
+                    await frame();
+                    await frame();
+                    // Read where the draft was drawn: the page's region holding that place, whatever the page drew again meanwhile.
+                    const region = drawn.element.closest("[data-graview-page-main], main") ?? regionOf(mainNow());
+                    findings = drawnFindings(was, readDrawn(region, was.records.map((one) => one.label)), { fields: fieldsOf(here, part), asked: askedWords() });
+                    // Every control it drew pressed, headless and nothing applied, and what a person could do on each record kept.
+                    const pressed = drawn.handle.presses ? await drawn.handle.presses(source).catch(() => undefined) : undefined;
+                    if (pressed) {
+                        held.pressed = pressed;
+                        findings = [...findings, ...pressFindings(pressed, wantedOf(was, idsOf(here, part, was)), acts.filter((one) => one.toggle).map((one) => one.act), nounOf(part))];
+                    }
+                }
+            }
+            const drew = lookOf(drawnNow());
+            if (findings.length === 0) {
+                const entry = entryOf(`Draw “${part.name}” anew: ${askedWords()}`, "offered", []);
+                held.steps.push({ kind: "view", source, said: describeChange(part.name, was, drawnNow()) ?? `${part.name} has a new design. Compare Before and After.`, entry });
+                held.before = false;
+            }
+            else
+                await showLatest();
+            return { findings, drew };
+        }
+        finally {
+            held.covering = false;
+            tell();
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [manifest, keptViews, original, held, tell, forkOf, drawnNow, here, part, entryOf, showLatest]);
+    /** One turn of the agent, from the person's last words: it looks, reads, drafts, is told what the checks found, and drafts again. */
+    const agentTurn = useCallback(async (pressedLines = []) => {
+        if (!manifest || !forkHost) {
+            say("graview", "Its settings can't do that, and a new design can't be drawn for it here.");
+            return;
+        }
+        const stop = new AbortController();
+        held.stop = stop;
+        held.markup ??= markupOf(mainNow());
+        const stepsBefore = held.steps.length;
+        const latest = [...held.steps].reverse().find((one) => one.kind === "view");
+        const result = await runDesignAgent({
+            ai,
+            part: said,
+            manifest,
+            talk: held.talk,
+            keep: keepsOf(original(), mainNow(), part.name, here, part),
+            ...(held.markup ? { markup: held.markup } : {}),
+            ...(latest ? { current: latest.source } : held.kept ? { current: held.kept } : {}),
+            host: { look: () => lookOf(drawnNow()), read: () => dataOf(here, part), draft: judgeDraft },
+            onEvent: (event) => step(event),
+            ...(held.about ? { about: held.about } : {}),
+            acts,
+            ...(pressedLines.length > 0 ? { pressed: pressedLines } : {}),
+            noun: nounOf(part),
+            signal: stop.signal,
+        });
+        // Stopped: the page was put back when Stop was pressed; nothing more of this turn.
+        if (held.stop !== stop)
+            return;
+        held.stop = null;
+        if (held.events.at(-1)?.kind === "streaming")
+            held.events.pop();
+        aiDesk.record(entryOf(`Draw “${part.name}” anew: ${askedWords()}`, held.steps.length > stepsBefore ? "offered" : "failed", result.stages, held.steps.length > stepsBefore ? {} : { failed: result.last?.findings.join(" ") ?? result.said }));
+        /*
+         * NEVER A CLAIM NOBODY CHECKED: what the controls of a draft do is said by
+         * the press check — what was pressed and accepted — and a sentence of
+         * the model's that says what a control does is not said for it.
+         */
+        if (result.passed) {
+            const checked = held.pressed ? pressSaid(held.pressed, acts, nounOf(part)) : undefined;
+            const own = CONTROL_WORDS.test(result.said) ? undefined : result.said;
+            say("graview", [own ?? (checked ? undefined : "Here it is on the page."), checked].filter(Boolean).join(" "));
+        }
+        else
+            say("graview", result.said);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ai, aiDesk, acts, drawnNow, entryOf, forkHost, held, here, judgeDraft, mainNow, manifest, original, part, said, say, step]);
+    /**
+     * "IT DOESN'T WORK": the design on the page — the newest draft, or the
+     * one kept — has every control pressed, headless and nothing applied,
+     * and what came of it is said to the person and handed to the agent,
+     * before it says anything of its own.
+     */
+    const pressTheDesign = useCallback(async () => {
+        const latest = [...held.steps].reverse().find((one) => one.kind === "view");
+        const source = latest?.source ?? held.kept;
+        if (!source || !manifest)
+            return [];
+        step({ kind: "look", text: "Pressing every control on the page" });
+        const drawn = await placeOfView(manifest.name);
+        if ("failed" in drawn || !drawn.handle.presses)
+            return [];
+        const pressed = await drawn.handle.presses(source).catch(() => undefined);
+        if (!pressed)
+            return [];
+        held.pressed = pressed;
+        const was = original();
+        const broken = pressFindings(pressed, wantedOf(was, idsOf(here, part, was)), acts.filter((one) => one.toggle).map((one) => one.act), nounOf(part));
+        const lines = broken.length > 0 ? broken : pressed.controls.slice(0, 8).map((one) => `${one.control}: ${one.says}`);
+        step(broken.length > 0 ? { kind: "check", text: `Check: ${broken.length} ${broken.length === 1 ? "control doesn't" : "controls don't"} work — fixing` } : { kind: "passed", text: "Check: every control works" });
+        say("graview", broken.length > 0 ? `I pressed every control: ${broken.join(" ")}` : `I pressed every control. ${pressSaid(pressed, acts, nounOf(part)) ?? "Each one did what it says."}`);
+        return lines;
+    }, [acts, held, here, manifest, original, part, say, step]);
+    /** The person's words: the settings where they can say it, else the agent — one turn. */
+    const askFor = useCallback(async (words, mode = "describe") => {
+        if (held.phase.at === "working")
+            return;
+        const pointed = held.pointed;
+        held.pointed = null;
+        const asked = { mode, words, ...(pointed ? { pointed } : {}) };
+        // The person's words as they typed them: what they are about is said beside them, never glued on.
+        held.about = pointed ?? held.about;
+        say("person", words);
+        held.events = [];
+        held.since = Date.now();
+        setPhase({ at: "working" });
+        original();
+        held.markup ??= markupOf(mainNow());
+        // Told a control does not work, the design on the page is pressed first, and what was found goes to the agent.
+        const complaint = IT_DOES_NOT_WORK.test(words) ? await pressTheDesign().catch(() => []) : [];
+        // A control that does not work is never a setting: those words go to the agent, with the press check behind them.
+        const quick = !IT_DOES_NOT_WORK.test(words) && (await bySettings(asked).catch(() => false));
+        if (!quick)
+            await agentTurn(complaint);
+        if (held.phase.at === "working")
+            setPhase(held.steps.length > 0 ? { at: "draft" } : { at: "open" });
+    }, [agentTurn, bySettings, held, mainNow, original, pressTheDesign, say, setPhase]);
+    /** Stop: at once — the turn's drafts gone, the page as it was before it began. */
+    const stopTurn = useCallback(() => {
+        if (held.phase.at !== "working")
+            return;
+        const stop = held.stop;
+        held.stop = null;
+        stop?.abort();
+        held.covering = false;
+        held.steps = held.steps.filter((one) => one.entry.at < new Date(held.since).toISOString());
+        void showLatest();
+        say("graview", "Stopped. The page is as it was.");
+        setPhase(held.steps.length > 0 ? { at: "draft" } : { at: "open" });
+    }, [held, say, setPhase, showLatest]);
+    const compare = useCallback(async (before) => {
+        const latest = held.steps.at(-1);
+        if (!latest || before === held.before)
+            return;
+        held.before = before;
+        tell();
+        if (before)
+            await backFromDraft();
+        else
+            await show(latest);
+    }, [held, backFromDraft, show, tell]);
+    const keep = useCallback(async () => {
+        const latest = held.steps.at(-1);
+        if (!latest || held.phase.at !== "draft")
+            return;
+        setPhase({ at: "keeping" });
+        try {
+            let undo;
+            let note;
+            if (latest.kind === "spec") {
+                await backFromDraft();
+                const answer = await onProposeChange(proposalOf(latest.edits, latest.said, ai.name));
+                if (answer === "declined") {
+                    say("graview", "It wasn't kept.");
+                    return setPhase({ at: "draft" });
+                }
+                if (typeof answer === "object")
+                    [undo, note] = [answer.undo, answer.note];
+            }
+            else {
+                const answer = await keptViews.fork(forkOf(latest.source));
+                held.putBack = null;
+                keptViews.draftFork?.(null);
+                held.kept = latest.source;
+                if (answer)
+                    [undo, note] = [answer.undo, answer.note];
+            }
+            aiDesk.record({ ...latest.entry, outcome: "accepted" });
+            held.steps = [];
+            held.before = false;
+            setPhase({ at: "kept", ...(undo ? { undo } : {}), ...(note ? { note } : {}) });
+        }
+        catch {
+            say("graview", "It couldn't be kept.");
+            setPhase({ at: "draft" });
+        }
+    }, [held, setPhase, backFromDraft, onProposeChange, ai.name, keptViews, forkOf, aiDesk, say]);
+    const discard = useCallback(() => {
+        const latest = held.steps.at(-1);
+        if (latest)
+            aiDesk.record({ ...latest.entry, outcome: "dismissed" });
+        held.steps = [];
+        held.before = false;
+        void backFromDraft();
+        say("graview", "Put back as it was.");
+        setPhase({ at: "open" });
+    }, [held, aiDesk, backFromDraft, say, setPhase]);
+    const undo = useCallback(async () => {
+        if (held.phase.at !== "kept" || !held.phase.undo)
+            return;
+        try {
+            await held.phase.undo();
+            held.kept = null;
+            say("graview", "Undone. The page is as it was.");
+            setPhase({ at: "undone" });
+        }
+        catch {
+            say("graview", "It couldn't be put back.");
+        }
+    }, [held, say, setPhase]);
+    /* Words that came with the ask — typed in the menu, or a suggestion taken — are asked at once. */
+    useEffect(() => {
+        if (held.began || !(ask.mode === "just" || (ask.mode === "describe" && ask.words)))
+            return;
+        held.began = true;
+        void askFor(ask.mode === "just" ? "Make it easier to read at a glance" : ask.words, ask.mode);
+    }, [held, ask.mode, ask.words, askFor]);
+    /* Escape: Stop while it works, else put it away. */
+    useEffect(() => {
+        const key = (event) => {
+            if (event.key !== "Escape" || held.phase.at === "highlighting")
+                return;
+            event.preventDefault();
+            if (held.phase.at === "working")
+                return stopTurn();
+            putAway();
+            const back = ask.returnTo?.isConnected ? ask.returnTo : document.querySelector("[data-graview-page-title], main h1");
+            if (back && !back.hasAttribute("tabindex") && !back.matches("a[href], button, input, select, textarea"))
+                back.setAttribute("tabindex", "-1");
+            back?.focus?.();
+        };
+        document.addEventListener("keydown", key);
+        return () => document.removeEventListener("keydown", key);
+    }, [held, putAway, stopTurn, ask.returnTo]);
+    if (phase.at === "highlighting") {
+        return (_jsx(Highlighter, { box: mainNow(), root: mainNow(), whole: part.elements, wholeSaid: "The whole page", cancel: () => setPhase({ at: "open" }), chose: (elements) => {
+                held.pointed = { name: aboutOf(elements) ?? nameParts(elements.map(readPart)), lines: partLines(elements.map(readPart)) };
+                setPhase({ at: "open" });
+            } }));
+    }
+    const latest = held.steps.at(-1);
+    return (_jsxs(_Fragment, { children: [held.covering ? _jsx(Redesigning, { over: mainNow(), name: part.name, said: `Graview is drafting “${part.name}”…` }) : null, _jsx(BetterPanel, { name: part.name, scope: scope, phase: phase.at, talk: held.talk, steps: held.events, since: held.since, working: phase.at === "working" || phase.at === "keeping", ...(latest && phase.at === "draft" ? { draft: { said: latest.said, before: held.before } } : {}), ...(phase.at === "kept" ? { kept: { ...(phase.note ? { note: phase.note } : {}), ...(phase.undo ? { undo: () => void undo() } : {}) } } : {}), about: (held.pointed ?? held.about)?.name ?? part.name, ask: (words) => void askFor(words), just: () => void askFor("Make it easier to read at a glance", "just"), point: () => setPhase({ at: "highlighting" }), stop: stopTurn, compare: (before) => void compare(before), keep: () => void keep(), discard: discard, close: putAway })] }));
+}
+/** What the host is handed for the settings' edits: the change to the app, said by the checker. */
+function proposalOf(edits, said, model) {
+    return { said, add: [], drop: [], card: { said, adds: [], keeps: [], drops: [], breaking: [] }, edits, via: `ai:${model ?? "model"}` };
+}
+/** What a new design must keep of the page: the title the page draws above it (never again), its other headings, the records it showed. */
+function keepsOf(was, main, name, here, part) {
+    // The page's own title, never the app's name in the bar above it: the page draws it, so a draft never does.
+    const page = regionOf(main);
+    // The home's body is all a new design replaces: what is drawn over it — the app's name in the bar — is its title.
+    const above = part.slot === "home" ? [...(main?.querySelectorAll("h1") ?? [])].find((one) => page !== main && !page?.contains(one)) : undefined;
+    const title = words(above?.textContent) || words(page?.querySelector("[data-graview-page-title]")?.textContent) || (part.slot === "home" ? "" : words(page?.querySelector("h1")?.textContent)) || (part.record ? words(String(here.store.graph.getNode(part.record)?.["label"] ?? "")) : "") || name;
+    const ids = idsOf(here, part, was);
+    const says = Object.fromEntries(was.records.flatMap((one) => (one.facts?.length || (one.under && one.under !== title) ? [[one.label, { ...(ids[one.label] ? { id: ids[one.label] } : {}), ...(one.facts?.length ? { shows: one.facts } : {}), ...(one.under && one.under !== title ? { under: one.under } : {}) }]] : [])));
+    const grouping = groupingOf(here, was, ids, title);
+    return { title, headings: was.headings.filter((one) => one !== title), records: was.records.map((one) => one.label), ...(Object.keys(says).length > 0 ? { says } : {}), ...(grouping ? { grouping } : {}) };
+}
+/** Each record the page showed, by its words: its id, for the checklist a draft is held to. */
+function idsOf(here, part, was) {
+    const { store } = here;
+    const nodes = part.record ? [store.graph.getNode(part.record)].filter((one) => one !== undefined) : part.kind ? store.graph.nodesOfKind(part.kind) : store.schema.kinds.flatMap((kind) => store.graph.nodesOfKind(kind));
+    const out = {};
+    for (const one of was.records) {
+        const node = nodes.find((each) => words(String(each["label"] ?? "")) === words(one.label));
+        if (node)
+            out[one.label] = node.id;
+    }
+    return out;
+}
+/**
+ * HOW THE PAGE GROUPED ITS RECORDS, read from the graph: each record sits
+ * under the heading that is the name of a record it is linked to (a task
+ * under its list's name) — the link's kind, the kind of the record named,
+ * and which end the grouped record is. Undefined where no one link says it
+ * for most of them: the checklist's headings stand alone then.
+ */
+function groupingOf(here, was, ids, title) {
+    const { store } = here;
+    const grouped = was.records.filter((one) => one.under && one.under !== title && ids[one.label]);
+    if (grouped.length < 2)
+        return undefined;
+    const edges = store.graph.allEdges();
+    const count = new Map();
+    for (const one of grouped) {
+        const id = ids[one.label];
+        for (const edge of edges) {
+            const other = edge.from === id ? edge.to : edge.to === id ? edge.from : undefined;
+            const named = other !== undefined ? store.graph.getNode(other) : undefined;
+            if (!named || words(String(named["label"] ?? "")) !== words(one.under))
+                continue;
+            const key = `${edge.kind}\u0000${named.kind}\u0000${edge.from === id ? "from" : "to"}`;
+            count.set(key, (count.get(key) ?? 0) + 1);
+        }
+    }
+    const best = [...count].sort((a, b) => b[1] - a[1])[0];
+    if (!best || best[1] < grouped.length / 2)
+        return undefined;
+    const [edge, kind, end] = best[0].split("\u0000");
+    return { edge, kind, record: end };
+}
+/** The page's own region inside the face: its <main>, never the app's bar and footer around it. */
+const regionOf = (face) => face?.querySelector("main") ?? face;
+/**
+ * THE PAGE AS IT WAS DRAWN, its markup for a new design to start from:
+ * elements and their words, the classes and data a person never reads
+ * left out, what is hidden and what draws no words left out, kept short.
+ */
+function markupOf(main) {
+    if (!main?.isConnected)
+        return null;
+    // The page's own region, not the app's bar and footer around it.
+    const copy = (main.querySelector("main") ?? main).cloneNode(true);
+    for (const gone of copy.querySelectorAll("script, style, svg, button, input, select, textarea, [hidden], [aria-hidden='true'], [data-graview-popover]"))
+        gone.remove();
+    for (const element of [copy, ...copy.querySelectorAll("*")])
+        for (const name of [...element.getAttributeNames()])
+            element.removeAttribute(name);
+    const html = copy.outerHTML.replace(/\s+/g, " ").replace(/<(div|span)>\s*<\/\1>/g, "").trim();
+    return html.length > 6000 ? html.slice(0, 6000) : html;
+}
+/** What the records of the part are called in the agent's steps: "tasks". */
+const nounOf = (part) => (part.slot === "list" || part.slot === "group" ? part.name.toLowerCase() : part.slot === "record" ? "parts" : "records");
+/** Each record the page showed, with its id and what a person could do on it there. */
+function wantedOf(was, ids) {
+    return was.records.flatMap((one) => (ids[one.label] ? [{ label: one.label, id: ids[one.label], ...(one.presses ? { presses: true } : {}), ...(one.opens ? { opens: true } : {}) }] : []));
+}
+/**
+ * THE ACTS A PRESS MAY ASK FOR ON THE PART'S RECORDS: each act whose
+ * subject is the kind (none that makes a record), its title, the argument
+ * the record goes in, and — where it writes one yes-or-no field — what it
+ * marks ("done"), so a new design can finish a task as the page did.
+ */
+function actsOf(here, part) {
+    const { store } = here;
+    const kinds = part.kind ? [part.kind] : store.schema.kinds;
+    const shapeOf = (kind) => (store.schema.tryDefinition(kind)?.fields?.shape ?? {});
+    const yesOrNo = (field) => {
+        let def = field?._zod?.def;
+        for (let depth = 0; depth < 6 && def && def.type !== "boolean" && def.innerType !== undefined; depth++)
+            def = def.innerType._zod?.def;
+        return def?.type === "boolean";
+    };
+    return store.allMutations().flatMap((mutation) => {
+        const subject = mutation.subject;
+        if (!subject || mutation.creates?.length)
+            return [];
+        const kind = kinds.find((one) => subject.kinds === "*" || subject.kinds.includes(one));
+        if (!kind)
+            return [];
+        const writes = mutation.writes ?? [];
+        const toggle = writes.length === 1 && yesOrNo(shapeOf(kind)[writes[0]]) ? writes[0] : undefined;
+        return [{ act: mutation.name, title: String(mutation.title ?? mutation.name), record: subject.arg, ...(toggle ? { toggle } : {}) }];
+    }).slice(0, 24);
+}
+/** The page's own region, found again where the draft drew the page anew. */
+function document_main() {
+    return document.querySelector("[data-graview-page-main], main") ?? document.querySelector("[data-graview-face]");
+}
+//# sourceMappingURL=page-better.js.map