@bolt-foundry/gambit 0.8.5 → 0.8.6-rc.2

package/esm/simulator-ui/src/shared.js

@@ -0,0 +1,595 @@
+// deno-lint-ignore-file gambit/no-useeffect-setstate gambit/no-useeffect-setstate
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { classNames, flattenSchemaLeaves, formatJson, getPathValue, renderMarkdown, SCORE_VALUES, setPathValue, } from "./utils.js";
+import Badge from "./gds/Badge.js";
+export { CopyBadge } from "./CopyBadge.js";
+import Panel from "./gds/Panel.js";
+import Tabs from "./gds/Tabs.js";
+export function useHttpSchema(opts) {
+    const [schemaResponse, setSchemaResponse] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const params = new URLSearchParams();
+            if (opts?.workspaceId)
+                params.set("workspaceId", opts.workspaceId);
+            const query = params.toString() ? `?${params.toString()}` : "";
+            const res = await fetch(`/schema${query}`);
+            if (!res.ok)
+                throw new Error(res.statusText);
+            const data = await res.json();
+            setSchemaResponse(data);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load schema");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [opts?.workspaceId]);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    return { schemaResponse, loading, error, refresh };
+}
+export function ConversationView(props) {
+    const { messages, header, onScore, onReasonChange, emptyState } = props;
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const frame = requestAnimationFrame(() => {
+            el.scrollTop = el.scrollHeight;
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [messages.length]);
+    return (React.createElement(Panel, { className: "chat-column", ref: containerRef },
+        header,
+        messages.map((entry, idx) => (React.createElement(MessageBubble, { key: entry.id ?? idx, entry: entry, onScore: onScore, onReasonChange: onReasonChange }))),
+        messages.length === 0 && (emptyState ?? (React.createElement("div", { className: "empty-state" },
+            React.createElement("p", null, "No conversation yet. Start a new chat to begin testing."))))));
+}
+export function MessageBubble(props) {
+    const { entry, onScore, onReasonChange } = props;
+    const hasReasoning = Boolean(entry.reasoning);
+    const role = entry.message.role;
+    const isRespond = Boolean(entry.respond);
+    const isTool = role === "tool" && !isRespond;
+    const className = classNames("bubble", role === "user"
+        ? "bubble-user"
+        : role === "system"
+            ? "bubble-system"
+            : "bubble-assistant", hasReasoning && "bubble-reasoning");
+    const messageRefId = entry.id;
+    const content = entry.message.content ?? "";
+    return (React.createElement("div", { className: "chat-row" },
+        React.createElement("div", { className: className },
+            React.createElement("div", { className: "bubble-role" }, role),
+            hasReasoning && entry.reasoning && (React.createElement(ReasoningBubble, { detail: entry.reasoning })),
+            isRespond && (React.createElement("div", { className: "respond-summary" },
+                React.createElement("div", { className: "respond-meta" },
+                    React.createElement(Badge, null, "legacy respond envelope"),
+                    typeof entry.respond?.status === "number" && (React.createElement(Badge, { variant: "ghost" },
+                        "status ",
+                        entry.respond.status)),
+                    entry.respond?.code && (React.createElement(Badge, { variant: "ghost" },
+                        "code ",
+                        entry.respond.code))),
+                entry.respond?.message && (React.createElement("div", { className: "respond-message" }, entry.respond.message)),
+                entry.respond?.payload !== undefined && (React.createElement("pre", { className: "bubble-json" }, formatJson(entry.respond.payload))),
+                entry.respond?.meta && (React.createElement("details", { className: "respond-meta-details" },
+                    React.createElement("summary", null, "Meta"),
+                    React.createElement("pre", { className: "bubble-json" }, formatJson(entry.respond.meta)))))),
+            !hasReasoning && !isRespond && content && !isTool && (React.createElement("div", { className: "bubble-text", dangerouslySetInnerHTML: { __html: renderMarkdown(content) } })),
+            !hasReasoning && !isRespond && content && isTool && (React.createElement("pre", { className: "bubble-json" }, formatJson(content))),
+            !hasReasoning && !content && entry.message.tool_calls && (React.createElement("pre", { className: "bubble-json" }, formatJson(entry.message.tool_calls))),
+            messageRefId && role === "assistant" && !hasReasoning && (React.createElement(FeedbackControls, { messageRefId: messageRefId, feedback: entry.feedback, onScore: onScore, onReasonChange: onReasonChange })))));
+}
+export function ReasoningBubble(props) {
+    const { detail } = props;
+    const meta = [];
+    if (detail.model)
+        meta.push(detail.model);
+    if (detail.actionCallId)
+        meta.push(`call ${detail.actionCallId}`);
+    return (React.createElement("div", { className: "reasoning-bubble" },
+        React.createElement("div", { className: "reasoning-header" },
+            React.createElement(Badge, { variant: "ghost" }, "Reasoning"),
+            meta.length > 0 && (React.createElement("span", { className: "reasoning-meta" }, meta.join(" · ")))),
+        React.createElement("div", { className: "reasoning-text" }, detail.text),
+        React.createElement("details", { className: "reasoning-details" },
+            React.createElement("summary", null, "Details"),
+            React.createElement("pre", { className: "bubble-json" }, formatJson(detail.event)))));
+}
+export function FeedbackControls(props) {
+    const { messageRefId, feedback, onScore, onReasonChange } = props;
+    const [reason, setReason] = useState(feedback?.reason ?? "");
+    const [opened, setOpened] = useState(false);
+    const [localScore, setLocalScore] = useState(null);
+    const [status, setStatus] = useState("idle");
+    const [errorMessage, setErrorMessage] = useState(null);
+    const requestSeqRef = useRef(0);
+    useEffect(() => {
+        setReason(feedback?.reason ?? "");
+        if (typeof feedback?.score === "number" || feedback?.reason !== undefined) {
+            setStatus("saved");
+        }
+        else {
+            setStatus("idle");
+        }
+        setErrorMessage(null);
+    }, [feedback?.reason, feedback?.score]);
+    useEffect(() => {
+        if (typeof feedback?.score === "number") {
+            setLocalScore(feedback.score);
+            setOpened(true);
+        }
+    }, [feedback?.score]);
+    const effectiveScore = typeof feedback?.score === "number"
+        ? feedback.score
+        : localScore;
+    const persistScore = useCallback(async (score) => {
+        const requestSeq = ++requestSeqRef.current;
+        setStatus("saving");
+        setErrorMessage(null);
+        try {
+            const nextReason = score === null ? undefined : reason;
+            await Promise.resolve(onScore(messageRefId, score, nextReason));
+            if (requestSeqRef.current !== requestSeq)
+                return;
+            setStatus(score === null ? "idle" : "saved");
+        }
+        catch (err) {
+            if (requestSeqRef.current !== requestSeq)
+                return;
+            setStatus("error");
+            setErrorMessage(err instanceof Error ? err.message : "Failed to save feedback");
+        }
+    }, [messageRefId, onScore, reason]);
+    const persistReason = useCallback(async (score, nextReason) => {
+        const requestSeq = ++requestSeqRef.current;
+        setStatus("saving");
+        setErrorMessage(null);
+        try {
+            await Promise.resolve(onReasonChange(messageRefId, score, nextReason));
+            if (requestSeqRef.current !== requestSeq)
+                return;
+            setStatus("saved");
+        }
+        catch (err) {
+            if (requestSeqRef.current !== requestSeq)
+                return;
+            setStatus("error");
+            setErrorMessage(err instanceof Error ? err.message : "Failed to save feedback reason");
+        }
+    }, [messageRefId, onReasonChange]);
+    useEffect(() => {
+        if (typeof effectiveScore !== "number")
+            return;
+        if (status !== "unsaved")
+            return;
+        const handle = globalThis.setTimeout(() => {
+            persistReason(effectiveScore, reason);
+        }, 650);
+        return () => globalThis.clearTimeout(handle);
+    }, [effectiveScore, persistReason, reason, status]);
+    const showReason = opened ||
+        typeof effectiveScore === "number" ||
+        (feedback?.reason !== undefined && feedback.reason.length > 0);
+    return (React.createElement("div", { className: "feedback-controls" },
+        React.createElement("div", { className: "feedback-scores" }, SCORE_VALUES.map((value) => (React.createElement("button", { key: value, type: "button", className: classNames("score-button", effectiveScore === value && "score-button-active"), onClick: () => {
+                if (effectiveScore === value) {
+                    setLocalScore(null);
+                    setOpened(false);
+                    setReason("");
+                    persistScore(null);
+                    return;
+                }
+                setOpened(true);
+                setLocalScore(value);
+                persistScore(value);
+            } }, value)))),
+        showReason && (React.createElement(React.Fragment, null,
+            React.createElement("textarea", { className: "feedback-reason", placeholder: "Why?", value: reason, onChange: (e) => {
+                    setReason(e.target.value);
+                    setStatus("unsaved");
+                    setErrorMessage(null);
+                }, onBlur: () => {
+                    if (typeof effectiveScore !== "number")
+                        return;
+                    if (status !== "unsaved")
+                        return;
+                    persistReason(effectiveScore, reason);
+                } }),
+            React.createElement("div", { className: classNames("feedback-status", status === "saving" && "saving", status === "unsaved" && "unsaved", status === "error" && "error") },
+                status === "saving" && "Saving…",
+                status === "saved" && "Saved",
+                status === "unsaved" && "Unsaved changes…",
+                status === "error" && (React.createElement(React.Fragment, null,
+                    "Save failed",
+                    " ",
+                    React.createElement("button", { type: "button", className: "link-button", onClick: () => {
+                            if (typeof effectiveScore === "number") {
+                                persistReason(effectiveScore, reason);
+                                return;
+                            }
+                            persistScore(null);
+                        } }, "Retry")))),
+            status === "error" && errorMessage && (React.createElement("div", { className: "error" }, errorMessage))))));
+}
+export function TraceList(props) {
+    const { traces } = props;
+    const ordered = traces;
+    const panelRef = useRef(null);
+    const codexHighlights = useMemo(() => {
+        const asRecord = (value) => {
+            if (value && typeof value === "object" && !Array.isArray(value)) {
+                return value;
+            }
+            return null;
+        };
+        const asString = (value) => typeof value === "string" ? value : "";
+        const asOptionalString = (value) => {
+            const text = asString(value).trim();
+            return text.length > 0 ? text : undefined;
+        };
+        const extractPayload = (value) => {
+            const record = asRecord(value);
+            if (!record)
+                return null;
+            if (record.type === "codex.event") {
+                return asRecord(record.payload);
+            }
+            return record;
+        };
+        const summaries = [];
+        const toolItems = [];
+        for (const trace of ordered) {
+            if (!trace || typeof trace !== "object")
+                continue;
+            if (trace.type !== "model.stream.event")
+                continue;
+            const event = trace.event;
+            const payload = extractPayload(event);
+            if (!payload)
+                continue;
+            const payloadType = asString(payload.type);
+            if (payloadType.startsWith("response.reasoning")) {
+                let text = "";
+                if (payloadType === "response.reasoning.delta") {
+                    text = asString(payload.delta);
+                }
+                else if (payloadType === "response.reasoning.done") {
+                    text = asString(payload.text);
+                }
+                else if (payloadType === "response.reasoning_summary_text.delta") {
+                    text = asString(payload.delta);
+                }
+                else if (payloadType === "response.reasoning_summary_text.done") {
+                    text = asString(payload.text);
+                }
+                else if (payloadType === "response.reasoning_summary_part.added" ||
+                    payloadType === "response.reasoning_summary_part.done") {
+                    const part = asRecord(payload.part);
+                    text = part ? asString(part.text) : "";
+                }
+                if (text.trim()) {
+                    summaries.push({
+                        id: asOptionalString(payload.item_id),
+                        text: text.trim(),
+                        raw: payload,
+                    });
+                }
+                continue;
+            }
+            const item = asRecord(payload.item);
+            if (!item)
+                continue;
+            const itemType = asString(item.type);
+            if (!itemType)
+                continue;
+            if (itemType === "reasoning") {
+                let text = "";
+                const summary = item.summary;
+                if (Array.isArray(summary)) {
+                    text = summary.map((part) => {
+                        const partRecord = asRecord(part);
+                        return partRecord && typeof partRecord.text === "string"
+                            ? partRecord.text
+                            : "";
+                    }).join("");
+                }
+                else if (typeof summary === "string") {
+                    text = summary;
+                }
+                else if (typeof item.text === "string") {
+                    text = item.text;
+                }
+                if (text.trim()) {
+                    summaries.push({
+                        id: asOptionalString(item.id),
+                        text: text.trim(),
+                        raw: item,
+                    });
+                }
+            }
+            else if (itemType === "function_call" || itemType === "mcp_tool_call") {
+                toolItems.push({
+                    id: asOptionalString(item.id),
+                    name: asOptionalString(item.name) ?? asOptionalString(item.tool),
+                    status: asOptionalString(item.status),
+                    args: item.arguments,
+                    result: item.result,
+                    error: item.error,
+                    raw: item,
+                });
+            }
+        }
+        return { summaries, toolItems };
+    }, [ordered]);
+    const entries = useMemo(() => {
+        const depthMap = new Map();
+        return ordered.map((trace) => {
+            let depth = 0;
+            if ("actionCallId" in trace &&
+                typeof trace.actionCallId === "string") {
+                const parentId = "parentActionCallId" in trace &&
+                    typeof trace.parentActionCallId === "string" &&
+                    trace.parentActionCallId.length
+                    ? trace.parentActionCallId
+                    : undefined;
+                if (trace.type === "deck.start" || trace.type === "action.start") {
+                    const parentDepth = parentId && depthMap.has(parentId)
+                        ? depthMap.get(parentId)
+                        : -1;
+                    depth = parentDepth + 1;
+                    depthMap.set(trace.actionCallId, depth);
+                }
+                else {
+                    const existing = depthMap.get(trace.actionCallId);
+                    if (existing !== undefined) {
+                        depth = existing;
+                    }
+                    else if (parentId && depthMap.has(parentId)) {
+                        depth = depthMap.get(parentId) + 1;
+                    }
+                }
+            }
+            return { trace, depth };
+        });
+    }, [ordered]);
+    useEffect(() => {
+        const el = panelRef.current;
+        if (!el)
+            return;
+        const frame = requestAnimationFrame(() => {
+            el.scrollTop = el.scrollHeight;
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [traces.length]);
+    return (React.createElement("div", { className: "trace-panel", ref: panelRef },
+        React.createElement("h3", null, "Traces & Tools"),
+        (codexHighlights.summaries.length > 0 ||
+            codexHighlights.toolItems.length > 0) && (React.createElement("div", { className: "trace-codex-highlights" },
+            codexHighlights.summaries.length > 0 && (React.createElement("details", { open: true },
+                React.createElement("summary", null,
+                    "Codex reasoning summaries (",
+                    codexHighlights.summaries.length,
+                    ")"),
+                React.createElement("div", { className: "trace-list" }, codexHighlights.summaries.map((entry, idx) => (React.createElement("div", { key: `codex-summary-${entry.id ?? idx}` },
+                    React.createElement("div", { className: "trace-text" }, entry.text),
+                    React.createElement("pre", { className: "trace-json" }, formatJson(entry.raw)))))))),
+            codexHighlights.toolItems.length > 0 && (React.createElement("details", null,
+                React.createElement("summary", null,
+                    "Codex tool calls (",
+                    codexHighlights.toolItems.length,
+                    ")"),
+                React.createElement("div", { className: "trace-list" }, codexHighlights.toolItems.map((entry, idx) => (React.createElement("div", { key: `codex-tool-${entry.id ?? idx}` },
+                    React.createElement("div", { className: "trace-text" },
+                        entry.name ?? "tool call",
+                        entry.status ? ` · ${entry.status}` : ""),
+                    (entry.args !== undefined ||
+                        entry.result !== undefined ||
+                        entry.error !== undefined) && (React.createElement("pre", { className: "trace-json" }, formatJson({
+                        args: entry.args,
+                        result: entry.result,
+                        error: entry.error,
+                    }))),
+                    (entry.args === undefined &&
+                        entry.result === undefined &&
+                        entry.error === undefined) && (React.createElement("pre", { className: "trace-json" }, formatJson(entry.raw))))))))))),
+        React.createElement("div", { className: "trace-list" },
+            entries.map(({ trace, depth }, idx) => {
+                const isUser = trace.type === "message.user";
+                return (React.createElement("div", { key: idx, className: classNames("trace-row", isUser && "trace-row-user"), style: depth > 0
+                        ? {
+                            marginLeft: depth * 12,
+                            borderLeft: "2px solid #e2e8f0",
+                            paddingLeft: 8,
+                        }
+                        : undefined },
+                    React.createElement("strong", null, trace.type ?? "trace"),
+                    trace.message?.content && (React.createElement("div", { className: "trace-text" }, trace.message.content)),
+                    !trace.message?.content && (React.createElement("pre", { className: "trace-json" }, formatJson(trace)))));
+            }),
+            traces.length === 0 && (React.createElement("div", { className: "trace-empty" }, "No trace events yet.")))));
+}
+export function JsonInputField(props) {
+    const { value, optional, placeholder, onChange, onErrorChange } = props;
+    const formatInputValue = (input) => {
+        if (input === undefined)
+            return "";
+        if (typeof input === "string")
+            return input;
+        try {
+            return JSON.stringify(input, null, 2);
+        }
+        catch {
+            return String(input);
+        }
+    };
+    const onChangeRef = useRef(onChange);
+    const onErrorChangeRef = useRef(onErrorChange);
+    const [text, setText] = useState(() => {
+        if (value === undefined)
+            return "";
+        return formatInputValue(value);
+    });
+    const [dirty, setDirty] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+        onErrorChangeRef.current = onErrorChange;
+    }, [onChange, onErrorChange]);
+    useEffect(() => {
+        if (dirty)
+            return;
+        if (value === undefined) {
+            setText("");
+            return;
+        }
+        setText(formatInputValue(value));
+    }, [value, dirty]);
+    useEffect(() => {
+        onErrorChangeRef.current?.(error);
+    }, [error]);
+    useEffect(() => {
+        if (!dirty)
+            return;
+        const handle = globalThis.setTimeout(() => {
+            const trimmed = text.trim();
+            if (trimmed === "") {
+                if (optional) {
+                    setError(null);
+                    onChangeRef.current(undefined);
+                }
+                else {
+                    setError("Required");
+                }
+                return;
+            }
+            try {
+                const parsed = JSON.parse(text);
+                setError(null);
+                onChangeRef.current(parsed);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : "Invalid JSON");
+            }
+        }, 500);
+        return () => globalThis.clearTimeout(handle);
+    }, [dirty, text, optional]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("textarea", { value: text, placeholder: placeholder, onChange: (e) => {
+                setText(e.target.value);
+                setDirty(true);
+            } }),
+        error && React.createElement("div", { className: "error" }, error)));
+}
+export function InitForm(props) {
+    const { schema, value, onChange, onJsonErrorChange } = props;
+    const leaves = useMemo(() => flattenSchemaLeaves(schema), [schema]);
+    return (React.createElement("div", { className: "init-grid" }, leaves.map(({ path, schema: fieldSchema }) => {
+        const pathKey = path.join(".");
+        const label = pathKey || "input";
+        const fieldValue = getPathValue(value, path);
+        const badgeText = fieldSchema.optional ? "optional" : "required";
+        const description = fieldSchema.description;
+        const setFieldValue = (nextFieldValue) => {
+            const nextRoot = setPathValue(value, path, nextFieldValue);
+            onChange(nextRoot);
+        };
+        return (React.createElement("div", { className: "init-field", key: pathKey },
+            React.createElement("label", null,
+                React.createElement("span", null, label),
+                React.createElement(Badge, null, badgeText)),
+            description && React.createElement("div", { className: "secondary-note" }, description),
+            fieldSchema.kind === "string" && (React.createElement("input", { value: typeof fieldValue === "string" ? fieldValue : "", placeholder: fieldSchema.optional ? "" : "required", onChange: (e) => setFieldValue(e.target.value === "" && fieldSchema.optional
+                    ? undefined
+                    : e.target.value) })),
+            fieldSchema.kind === "number" && (React.createElement("input", { type: "number", value: typeof fieldValue === "number" ? String(fieldValue) : "", placeholder: fieldSchema.optional ? "" : "required", onChange: (e) => {
+                    const raw = e.target.value;
+                    if (raw === "" && fieldSchema.optional) {
+                        setFieldValue(undefined);
+                        return;
+                    }
+                    const parsed = Number(raw);
+                    setFieldValue(Number.isFinite(parsed) ? parsed : undefined);
+                } })),
+            fieldSchema.kind === "boolean" && (React.createElement("label", { style: { fontWeight: 600, justifyContent: "flex-start" } },
+                React.createElement("input", { type: "checkbox", checked: Boolean(fieldValue), onChange: (e) => setFieldValue(e.target.checked) }),
+                React.createElement("span", null, fieldValue ? "true" : "false"))),
+            fieldSchema.kind === "enum" && (React.createElement("select", { value: fieldValue === undefined ? "" : String(fieldValue), onChange: (e) => {
+                    const raw = e.target.value;
+                    if (raw === "" && fieldSchema.optional) {
+                        setFieldValue(undefined);
+                        return;
+                    }
+                    setFieldValue(raw);
+                } },
+                React.createElement("option", { value: "" }, fieldSchema.optional ? "— optional —" : "Select"),
+                (fieldSchema.enumValues ?? []).map((opt) => (React.createElement("option", { key: String(opt), value: String(opt) }, String(opt)))))),
+            (fieldSchema.kind === "array" || fieldSchema.kind === "unknown" ||
+                fieldSchema.kind === "object") &&
+                (React.createElement(JsonInputField, { value: fieldValue, optional: fieldSchema.optional, placeholder: "JSON", onChange: (nextVal) => {
+                        onJsonErrorChange(pathKey, null);
+                        setFieldValue(nextVal);
+                    }, onErrorChange: (err) => onJsonErrorChange(pathKey, err) }))));
+    })));
+}
+export function InitPanel(props) {
+    const { schema, value, lockedValue, editable, mode, open, onOpenChange, onModeChange, missingRequired, jsonErrorCount, rootJsonText, rootJsonError, onRootJsonChange, schemaError, onChange, onJsonErrorChange, } = props;
+    const summaryLabel = editable
+        ? "Init input (required before chat)"
+        : "Init input (locked)";
+    const summaryValue = editable ? value : lockedValue;
+    return (React.createElement("details", { className: "init-panel", open: open, onToggle: (e) => onOpenChange(e.currentTarget.open) },
+        React.createElement("summary", null, summaryLabel),
+        schemaError && React.createElement("div", { className: "error" },
+            "Schema error: ",
+            schemaError),
+        React.createElement("div", { className: "hint" }, "Fields are generated from the deck input schema. You can use the form or a raw JSON payload. Start a new chat to change init."),
+        editable && (React.createElement(React.Fragment, null,
+            React.createElement(Tabs, { className: "panel-tabs", size: "small", activeId: mode, onChange: (next) => onModeChange(next), tabs: [
+                    { id: "form", label: "Form" },
+                    { id: "json", label: "JSON" },
+                ] }),
+            mode === "form"
+                ? (React.createElement(InitForm, { schema: schema, value: value, onChange: onChange, onJsonErrorChange: onJsonErrorChange }))
+                : (React.createElement("div", { className: "init-field" },
+                    React.createElement("label", null,
+                        React.createElement("span", null, "Init JSON"),
+                        React.createElement(Badge, null, "root")),
+                    React.createElement("textarea", { className: "json-input", value: rootJsonText, placeholder: "Paste full init JSON payload", onChange: (e) => {
+                            const text = e.target.value;
+                            let error = null;
+                            let parsed = undefined;
+                            if (text.trim() === "") {
+                                parsed = undefined;
+                            }
+                            else {
+                                try {
+                                    parsed = JSON.parse(text);
+                                }
+                                catch (err) {
+                                    error = err instanceof Error
+                                        ? err.message
+                                        : "Invalid JSON";
+                                }
+                            }
+                            onRootJsonChange(text, error, parsed);
+                        }, style: { minHeight: 140 } }),
+                    rootJsonError && React.createElement("div", { className: "error" }, rootJsonError),
+                    !rootJsonError && (React.createElement("div", { className: "secondary-note" }, "Leave blank to unset init. Parsed JSON replaces the form.")))),
+            (missingRequired.length > 0 || jsonErrorCount > 0) && (React.createElement("div", { className: "init-missing" },
+                missingRequired.length > 0 && (React.createElement("div", null,
+                    "Missing required: ",
+                    missingRequired.slice(0, 6).join(", "),
+                    missingRequired.length > 6 ? "…" : "")),
+                jsonErrorCount > 0 && (React.createElement("div", null, "Fix invalid JSON fields to continue.")))))),
+        !editable && (React.createElement("pre", { className: "init-summary-json" }, formatJson(summaryValue ?? {})))));
+}