@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/chat/MessageContent.js

@@ -1,414 +1,77 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { stripAssistantStageDirections } from "@elizaos/shared";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { client } from "../../api/client.js";
 import { splitLeadingSlashCommand } from "../../chat/slash-menu.js";
 import { useRenderGuard } from "../../hooks/useRenderGuard.js";
 import { isDesktopPlatform, isNative } from "../../platform/index.js";
 import { createMobileSignalsPermissionsRegistry, openMobilePermissionSettings, } from "../../platform/mobile-permissions-client.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { useChatComposer } from "../../state/ChatComposerContext.hooks.js";
-import { useApp } from "../../state/useApp.js";
-import { PermissionCard } from "../composites/chat/permission-card.js";
-import { createClientPermissionsRegistry, parsePermissionRequestFromText, } from "../composites/chat/permission-card.helpers.js";
+import { createClientPermissionsRegistry, } from "../composites/chat/permission-card.helpers.js";
+import { renderPermissionCardFromPayload } from "../composites/chat/permission-card.render.js";
 import { ConfigRenderer } from "../config-ui/config-renderer.js";
 import { defaultRegistry } from "../config-ui/config-renderer.helpers.js";
 import { UiRenderer } from "../config-ui/ui-renderer.js";
-import { paramsToSchema } from "../pages/plugin-list-utils.js";
 import { Button } from "../ui/button.js";
+import { CodeBlock } from "../ui/code-block.js";
 import { MessageAttachments } from "./MessageAttachments.js";
+import { buildInlinePluginConfigModel, isSafeNormalizedPluginId, normalizePluginId, parseSegments, sensitiveRequestStatusLabel, splitInlineCode, } from "./message-parser-helpers.js";
 import { ThinkingBlock } from "./ThinkingBlock.js";
 // Side effect: registers the built-in inline widgets (choice/followups/form/task).
 import "./widgets/inline-builtins.js";
-import { getInlineWidget, getInlineWidgets, } from "./widgets/inline-registry.js";
-/** Reject prototype-pollution keys that should never be traversed or rendered. */
-const BLOCKED_IDS = new Set(["__proto__", "constructor", "prototype"]);
-const SAFE_PLUGIN_ID_RE = /^[\w-]+$/;
-function createSafeRecord() {
-    return Object.create(null);
-}
-function sanitizePatchValue(value) {
-    if (Array.isArray(value)) {
-        return value.map((item) => sanitizePatchValue(item));
-    }
-    if (!value || typeof value !== "object") {
-        return value;
-    }
-    const safe = createSafeRecord();
-    for (const [key, nestedValue] of Object.entries(value)) {
-        if (BLOCKED_IDS.has(key))
-            continue;
-        safe[key] = sanitizePatchValue(nestedValue);
-    }
-    return safe;
-}
-function isSafeNormalizedPluginId(id) {
-    return !BLOCKED_IDS.has(id) && SAFE_PLUGIN_ID_RE.test(id);
-}
+import { getInlineWidget } from "./widgets/inline-registry.js";
+import { useInlineWidgetContext } from "./widgets/use-inline-widget-context.js";
 /**
- * Render a plain-text message body. When the message is a user-typed slash
- * command (e.g. `/imagine a cat`), the leading `/command` token is rendered in
- * bold so it reads as a command in the transcript — matching the inline
- * autocomplete the composer shows while typing.
+ * Render a text run, wrapping any inline `` `code` `` spans in the CodeBlock
+ * inline primitive so they keep their place in the sentence. Returns the raw
+ * string unchanged when there is no backticked span (the common case).
  */
-function MessageTextBody({ text, boldSlashCommand, }) {
-    const slash = boldSlashCommand ? splitLeadingSlashCommand(text) : null;
-    return (_jsx("div", { className: "whitespace-pre-wrap", children: slash ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-bold text-txt", "data-testid": "slash-command-token", children: slash.command }), slash.rest] })) : (text) }));
-}
-// ── Detection ───────────────────────────────────────────────────────
-const CONFIG_RE = /\[CONFIG:([@\w][\w@./:-]*)\]/g;
-const FENCED_JSON_RE = /```(?:json)?\s*\n([\s\S]*?)```/g;
-const HIDDEN_TAG_BLOCK_RE = /<(think|analysis|reasoning|tool_calls?|tools?)\b[^>]*>[\s\S]*?(?:<\/\1>|$)/gi;
 /**
- * Strip trailing partial hidden tags at the end of a streaming text chunk.
- * During streaming, the buffer may end mid-tag (e.g. `"Hello<thi"`,
- * `"Hello</respon"`, or just `"Hello<"`).  These fragments are not
- * user-facing content and must be hidden from both the display and voice
- * pipelines.
+ * An OAuth authorizationUrl is an agent/cloud-supplied field that flows into
+ * window.open(). A hosted consent screen is always https, so require https and
+ * reject anything else — a `javascript:`/`data:` value would otherwise execute
+ * in the opened window. `new URL()` also normalizes away control-char scheme
+ * obfuscation (e.g. `java\tscript:`).
  */
-const TRAILING_PARTIAL_TAG_RE = /<\/?[a-zA-Z][^>]*$|<\/?$/s;
-function normalizeDisplayText(text) {
-    // Bound input length to keep the regex passes linear in adversarial cases.
-    const MAX_DISPLAY_LEN = 200_000;
-    let normalized = text.length > MAX_DISPLAY_LEN ? text.slice(0, MAX_DISPLAY_LEN) : text;
-    // Hide hidden reasoning/tool blocks from chat bubbles.
-    normalized = normalized.replace(HIDDEN_TAG_BLOCK_RE, " ");
-    // During streaming, a chunk may end mid-tag (e.g. "<thi").
-    // Strip any unterminated opening or closing tag at the very end so the
-    // user never sees hidden-tag fragments while tokens arrive.
-    normalized = normalized.replace(TRAILING_PARTIAL_TAG_RE, "");
-    normalized = stripAssistantStageDirections(normalized);
-    return normalized.trim();
-}
-function tryParse(s) {
-    try {
-        return JSON.parse(s);
-    }
-    catch {
-        return null;
-    }
-}
-function isUiSpec(obj) {
-    if (!obj || typeof obj !== "object")
+function isHttpsAuthorizationUrl(url) {
+    if (typeof url !== "string" || url.length === 0)
         return false;
-    const c = obj;
-    return (typeof c.root === "string" &&
-        typeof c.elements === "object" &&
-        c.elements !== null);
-}
-// ── JSONL patch support (Chat Mode) ─────────────────────────────────
-/**
- * Quick pre-check: does this line look like a JSON patch object?
- * Handles both compact `{"op":` and spaced `{ "op":` formats.
- */
-function looksLikePatch(trimmed) {
-    if (!trimmed.startsWith("{"))
-        return false;
-    return trimmed.includes('"op"') && trimmed.includes('"path"');
-}
-/** Try to parse a single line as an RFC 6902 JSON Patch operation. */
-function tryParsePatch(line) {
-    const t = line.trim();
-    if (!looksLikePatch(t))
-        return null;
     try {
-        const obj = JSON.parse(t);
-        if (typeof obj.op === "string" && typeof obj.path === "string")
-            return obj;
-        return null;
+        return new URL(url).protocol === "https:";
     }
     catch {
-        return null;
+        return false;
     }
 }
-/**
- * Apply a list of RFC 6902 patches to build a UiSpec.
- *
- * Only handles the paths the catalog emits:
- *   /root              → spec.root
- *   /elements/<id>     → spec.elements[id]
- *   /state/<key>       → spec.state[key]
- *   /state             → spec.state (whole object)
- */
-function compilePatches(patches) {
-    const spec = { elements: {}, state: createSafeRecord() };
-    for (const patch of patches) {
-        if (patch.op !== "add" && patch.op !== "replace")
-            continue;
-        const { path, value } = patch;
-        const parts = path.split("/").filter(Boolean);
-        if (parts.length === 0)
-            continue;
-        if (parts[0] === "root" && parts.length === 1) {
-            spec.root = value;
-        }
-        else if (parts[0] === "elements" && parts.length === 2) {
-            spec.elements[parts[1]] = value;
-        }
-        else if (parts[0] === "state" && parts.length === 1) {
-            const nextState = sanitizePatchValue(value);
-            spec.state =
-                nextState && typeof nextState === "object" && !Array.isArray(nextState)
-                    ? nextState
-                    : createSafeRecord();
-        }
-        else if (parts[0] === "state" && parts.length >= 2) {
-            // Nested state path: /state/key or /state/key/subkey
-            let cursor = spec.state;
-            let blockedPath = false;
-            for (let i = 1; i < parts.length - 1; i++) {
-                const k = parts[i];
-                if (BLOCKED_IDS.has(k)) {
-                    blockedPath = true;
-                    break;
-                }
-                if (!cursor[k] ||
-                    typeof cursor[k] !== "object" ||
-                    Array.isArray(cursor[k])) {
-                    cursor[k] = createSafeRecord();
-                }
-                cursor = cursor[k];
-            }
-            if (blockedPath)
-                continue;
-            const leaf = parts[parts.length - 1];
-            if (BLOCKED_IDS.has(leaf))
-                continue;
-            cursor[leaf] = sanitizePatchValue(value);
-        }
-    }
-    return isUiSpec(spec) ? spec : null;
+function renderInlineText(text) {
+    if (!text.includes("`"))
+        return text;
+    const parts = splitInlineCode(text);
+    if (parts.length === 1 && parts[0].kind === "text")
+        return text;
+    // Key by the part's character offset in the source run (not the array index)
+    // so keys stay stable across re-renders and don't trip noArrayIndexKey.
+    let offset = 0;
+    return parts.map((part) => {
+        const content = part.kind === "code" ? part.code : part.text;
+        const key = `${part.kind}:${offset}`;
+        offset += content.length;
+        return part.kind === "code" ? (_jsx(CodeBlock, { variant: "inline", value: part.code, "data-testid": "inline-code" }, key)) : (_jsx("span", { children: part.text }, key));
+    });
 }
 /**
- * Scan `text` for blocks of consecutive JSONL patch lines and return
- * their character regions plus the compiled UiSpec.
- *
- * A patch block is a run of lines where each non-empty line parses as a
- * valid PatchOp. A single empty line between patch lines is allowed.
+ * Render a plain-text message body. When the message is a user-typed slash
+ * command (e.g. `/imagine a cat`), the leading `/command` token is rendered in
+ * bold so it reads as a command in the transcript — matching the inline
+ * autocomplete the composer shows while typing. Inline `` `code` `` spans render
+ * in the inline code primitive while staying in the flow of the sentence.
  */
-function findPatchRegions(text) {
-    const results = [];
-    const lines = text.split("\n");
-    let blockStart = -1;
-    let blockEnd = 0;
-    let patches = [];
-    let rawLines = [];
-    let pos = 0;
-    const flush = () => {
-        if (patches.length >= 1) {
-            const spec = compilePatches(patches);
-            if (spec) {
-                results.push({
-                    start: blockStart,
-                    end: blockEnd,
-                    spec,
-                    raw: rawLines.join("\n"),
-                });
-            }
-        }
-        blockStart = -1;
-        patches = [];
-        rawLines = [];
-    };
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        // +1 for the newline that split() consumed (except the very last line)
-        const lineLen = line.length + (i < lines.length - 1 ? 1 : 0);
-        const trimmed = line.trim();
-        if (looksLikePatch(trimmed)) {
-            const patch = tryParsePatch(trimmed);
-            if (patch) {
-                if (blockStart === -1)
-                    blockStart = pos;
-                patches.push(patch);
-                rawLines.push(line);
-                blockEnd = pos + lineLen;
-                pos += lineLen;
-                continue;
-            }
-        }
-        // Empty line: peek ahead to see if the next non-empty line is a patch
-        if (trimmed.length === 0 && blockStart !== -1) {
-            const nextPatch = lines.slice(i + 1).find((l) => l.trim().length > 0);
-            if (nextPatch && tryParsePatch(nextPatch) !== null) {
-                // Allow the gap and keep going
-                pos += lineLen;
-                continue;
-            }
-        }
-        // Non-patch content — flush any open block
-        if (blockStart !== -1)
-            flush();
-        pos += lineLen;
-    }
-    if (blockStart !== -1)
-        flush();
-    return results;
-}
-function parseSegments(text, analysisMode) {
-    // If analysis mode is enabled, we parse the raw text to extract XML blocks,
-    // otherwise we use the normalized text which strips them.
-    const targetText = analysisMode ? text : normalizeDisplayText(text);
-    if (!targetText)
-        return [{ kind: "text", text: "" }];
-    const permissionRequest = analysisMode
-        ? null
-        : parsePermissionRequestFromText(targetText);
-    if (permissionRequest) {
-        const segments = [];
-        if (permissionRequest.display.trim()) {
-            segments.push({ kind: "text", text: permissionRequest.display });
-        }
-        segments.push({ kind: "permission", payload: permissionRequest.payload });
-        return segments;
-    }
-    // Build a list of match regions sorted by position
-    const regions = [];
-    if (analysisMode) {
-        const XML_RE = /<(thought|analysis|reasoning|tool_calls?|tools?|action|providers?|response|text)\b[^>]*>([\s\S]*?)(?:<\/\1>|$)/gi;
-        let m = XML_RE.exec(targetText);
-        while (m !== null) {
-            regions.push({
-                start: m.index,
-                end: m.index + m[0].length,
-                segment: {
-                    kind: "analysis-xml",
-                    tag: m[1].toLowerCase(),
-                    content: m[2],
-                },
-            });
-            m = XML_RE.exec(targetText);
-        }
-    }
-    // 1. Find [CONFIG:pluginId] markers
-    CONFIG_RE.lastIndex = 0;
-    let m = CONFIG_RE.exec(targetText);
-    while (m !== null) {
-        regions.push({
-            start: m.index,
-            end: m.index + m[0].length,
-            segment: { kind: "config", pluginId: m[1] },
-        });
-        m = CONFIG_RE.exec(targetText);
-    }
-    // 1b. Registry-driven inline widgets (choice/followups/form/task and any
-    // plugin-registered marker). Each widget owns its parsing semantics; we only
-    // collect the regions and tag them with the widget kind for render dispatch.
-    for (const widget of getInlineWidgets()) {
-        for (const match of widget.parse(targetText)) {
-            regions.push({
-                start: match.start,
-                end: match.end,
-                segment: {
-                    kind: "widget",
-                    widgetKind: widget.kind,
-                    data: match.data,
-                },
-            });
-        }
-    }
-    // 2. Find fenced JSON that is a UiSpec (Generate Mode / legacy format)
-    FENCED_JSON_RE.lastIndex = 0;
-    m = FENCED_JSON_RE.exec(targetText);
-    while (m !== null) {
-        const json = m[1].trim();
-        const parsed = tryParse(json);
-        if (parsed && isUiSpec(parsed)) {
-            regions.push({
-                start: m.index,
-                end: m.index + m[0].length,
-                segment: { kind: "ui-spec", spec: parsed, raw: json },
-            });
-        }
-        m = FENCED_JSON_RE.exec(targetText);
-    }
-    // 3. Find inline JSONL patch blocks (Chat Mode)
-    for (const patch of findPatchRegions(targetText)) {
-        // Skip if this region overlaps with an already-found fenced block
-        const overlaps = regions.some((r) => patch.start < r.end && patch.end > r.start);
-        if (!overlaps) {
-            regions.push({
-                start: patch.start,
-                end: patch.end,
-                segment: { kind: "ui-spec", spec: patch.spec, raw: patch.raw },
-            });
-        }
-    }
-    // No special content found — return plain text
-    if (regions.length === 0) {
-        return [{ kind: "text", text: targetText }];
-    }
-    // Sort by start position, then interleave with text segments
-    regions.sort((a, b) => a.start - b.start);
-    const segments = [];
-    let cursor = 0;
-    for (const r of regions) {
-        // Skip overlapping regions
-        if (r.start < cursor)
-            continue;
-        // Push preceding text
-        if (r.start > cursor) {
-            const t = targetText.slice(cursor, r.start);
-            if (t.trim())
-                segments.push({ kind: "text", text: t });
-        }
-        segments.push(r.segment);
-        cursor = r.end;
-    }
-    // Trailing text
-    if (cursor < targetText.length) {
-        const t = targetText.slice(cursor);
-        if (t.trim())
-            segments.push({ kind: "text", text: t });
-    }
-    return segments;
+function MessageTextBody({ text, boldSlashCommand, }) {
+    const slash = boldSlashCommand ? splitLeadingSlashCommand(text) : null;
+    return (_jsx("div", { className: "whitespace-pre-wrap", children: slash ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-bold text-txt", "data-testid": "slash-command-token", children: slash.command }), renderInlineText(slash.rest)] })) : (renderInlineText(text)) }));
 }
 // ── InlinePluginConfig ──────────────────────────────────────────────
-/** Normalize plugin ID: strip @scope/plugin- prefix so both "discord" and "@elizaos/plugin-discord" resolve. */
-function normalizePluginId(id) {
-    return id.replace(/^@[^/]+\/plugin-/, "");
-}
-function buildInlinePluginConfigModel(plugin, values) {
-    const pluginParams = plugin?.parameters ?? [];
-    const hasConfigurableParams = pluginParams.length > 0;
-    if (!hasConfigurableParams || !plugin?.id) {
-        return {
-            hasConfigurableParams: false,
-            hints: {},
-            mergedValues: values,
-            schema: null,
-            setKeys: new Set(),
-        };
-    }
-    const auto = paramsToSchema(pluginParams, plugin.id);
-    if (plugin.configUiHints) {
-        for (const [key, serverHint] of Object.entries(plugin.configUiHints)) {
-            auto.hints[key] = { ...auto.hints[key], ...serverHint };
-        }
-    }
-    const initialValues = {};
-    const setKeys = new Set();
-    for (const param of pluginParams) {
-        if (param.isSet) {
-            setKeys.add(param.key);
-        }
-        if (param.isSet && !param.sensitive && param.currentValue != null) {
-            initialValues[param.key] = param.currentValue;
-        }
-    }
-    for (const [key, value] of Object.entries(values)) {
-        if (value != null && value !== "") {
-            setKeys.add(key);
-        }
-    }
-    return {
-        hasConfigurableParams: true,
-        hints: auto.hints,
-        mergedValues: { ...initialValues, ...values },
-        schema: auto.schema,
-        setKeys,
-    };
-}
-function InlinePluginConfig({ pluginId: rawPluginId }) {
+export function InlinePluginConfig({ pluginId: rawPluginId, }) {
     const pluginId = normalizePluginId(rawPluginId);
     const [plugin, setPlugin] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -420,7 +83,11 @@ function InlinePluginConfig({ pluginId: rawPluginId }) {
     const [dismissed, setDismissed] = useState(false);
     const mountedRef = useRef(true);
     const refreshTimerRef = useRef(null);
-    const { setActionNotice, loadPlugins, t } = useApp();
+    const { setActionNotice, loadPlugins, t } = useAppSelectorShallow((s) => ({
+        setActionNotice: s.setActionNotice,
+        loadPlugins: s.loadPlugins,
+        t: s.t,
+    }));
     // Track mount state — reset to true on each mount (needed for StrictMode
     // which unmounts/remounts and would leave the ref false otherwise).
     useEffect(() => {
@@ -595,9 +262,11 @@ function InlinePluginConfig({ pluginId: rawPluginId }) {
                             }) })), saved && _jsx("span", { className: "text-xs text-ok", children: t("common.saved") }), error && _jsx("span", { className: "text-xs text-danger", children: error })] })] }));
 }
 // ── UiSpec block ────────────────────────────────────────────────────
-function UiSpecBlock({ spec, raw }) {
-    const { t } = useApp();
-    const { sendActionMessage } = useApp();
+export function MessageUiSpecBlock({ spec, raw, }) {
+    const { t, sendActionMessage } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        sendActionMessage: s.sendActionMessage,
+    }));
     const [showRaw, setShowRaw] = useState(false);
     const handleAction = useCallback((action, params) => {
         // Plugin actions are handled directly via the API instead of
@@ -647,23 +316,7 @@ function UiSpecBlock({ spec, raw }) {
                                 defaultValue: "View JSON",
                             }) })] }), showRaw && (_jsx("div", { className: "px-3 py-2 bg-card overflow-x-auto", children: _jsx("pre", { className: "text-2xs text-muted font-mono whitespace-pre-wrap break-words m-0", children: raw }) })), _jsx("div", { className: "p-3", children: _jsx(UiRenderer, { spec: spec, onAction: handleAction }) })] }));
 }
-function sensitiveRequestStatusLabel(status) {
-    switch (status) {
-        case "saved":
-        case "submitted":
-        case "fulfilled":
-            return "Saved";
-        case "expired":
-            return "Expired";
-        case "cancelled":
-            return "Cancelled";
-        case "failed":
-            return "Failed";
-        default:
-            return "Pending";
-    }
-}
-function SensitiveRequestBlock({ request, }) {
+export function SensitiveRequestBlock({ request, }) {
     const [status, setStatus] = useState(request.status);
     const [values, setValues] = useState({});
     const [saving, setSaving] = useState(false);
@@ -683,8 +336,7 @@ function SensitiveRequestBlock({ request, }) {
         fields.length > 0;
     const canStartOAuth = status === "pending" &&
         request.form?.kind === "oauth" &&
-        typeof request.form.authorizationUrl === "string" &&
-        request.form.authorizationUrl.length > 0;
+        isHttpsAuthorizationUrl(request.form.authorizationUrl);
     const canSubmit = fields.every((field) => {
         if (!field.required)
             return true;
@@ -718,6 +370,43 @@ function SensitiveRequestBlock({ request, }) {
     }, [canCollectSecret, canSubmit, fields, values]);
     return (_jsxs("div", { "data-testid": "sensitive-request", className: "my-2 border border-border bg-card p-3 text-sm space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "font-medium", children: request.key }), _jsx("div", { "data-testid": "sensitive-request-status", className: "text-xs text-muted", children: sensitiveRequestStatusLabel(status) })] }), request.reason && (_jsx("div", { className: "text-xs text-muted", children: request.reason })), request.delivery?.instruction && (_jsx("div", { className: "text-xs text-muted", children: request.delivery.instruction })), canCollectSecret && (_jsxs("form", { className: "space-y-3", onSubmit: handleSubmit, children: [fields.map((field) => {
                         const label = field.label ?? field.name;
+                        const isUpload = field.input === "image" || field.input === "file";
+                        if (isUpload) {
+                            const accept = field.mimeTypes && field.mimeTypes.length > 0
+                                ? field.mimeTypes.join(",")
+                                : field.input === "image"
+                                    ? "image/*"
+                                    : undefined;
+                            const hasValue = Boolean(values[field.name]);
+                            return (_jsxs("label", { className: "block text-xs space-y-1", children: [_jsx("span", { className: "font-medium", children: label }), _jsx("input", { "aria-label": label, "data-testid": `sensitive-request-file-${field.name}`, className: "w-full border border-border bg-bg px-2 py-1.5 text-sm", type: "file", accept: accept, 
+                                        // Mobile: prefer the rear camera for image capture (2FA QR/seed).
+                                        capture: field.input === "image" ? "environment" : undefined, required: field.required && !hasValue, onChange: (event) => {
+                                            const file = event.currentTarget.files?.[0];
+                                            if (!file) {
+                                                setValues((previous) => {
+                                                    const next = { ...previous };
+                                                    delete next[field.name];
+                                                    return next;
+                                                });
+                                                return;
+                                            }
+                                            if (field.maxBytes && file.size > field.maxBytes) {
+                                                setError(`${label} is too large (max ${Math.round(field.maxBytes / 1024)} KB).`);
+                                                event.currentTarget.value = "";
+                                                return;
+                                            }
+                                            const reader = new FileReader();
+                                            reader.onload = () => {
+                                                setError(null);
+                                                setValues((previous) => ({
+                                                    ...previous,
+                                                    [field.name]: String(reader.result ?? ""),
+                                                }));
+                                            };
+                                            reader.onerror = () => setError(`Could not read ${label}.`);
+                                            reader.readAsDataURL(file);
+                                        } })] }, field.name));
+                        }
                         return (_jsxs("label", { className: "block text-xs space-y-1", children: [_jsx("span", { className: "font-medium", children: label }), _jsx("input", { "aria-label": label, className: "w-full border border-border bg-bg px-2 py-1.5 text-sm", type: field.input === "secret" ? "password" : "text", value: values[field.name] ?? "", onChange: (event) => {
                                         const nextValue = event.currentTarget.value;
                                         setValues((previous) => ({
@@ -727,8 +416,12 @@ function SensitiveRequestBlock({ request, }) {
                                     }, required: field.required })] }, field.name));
                     }), _jsx(Button, { type: "submit", size: "sm", disabled: saving || !canSubmit, "data-testid": "sensitive-request-submit", children: saving ? "Saving..." : (request.form?.submitLabel ?? "Save") })] })), canStartOAuth && request.form?.kind === "oauth" && (_jsx(OAuthRequestPanel, { form: request.form, authorizing: authorizing, onStart: () => {
                     const url = request.form?.authorizationUrl;
-                    if (!url)
+                    // Re-validate at the sink (defense-in-depth): only an https consent
+                    // URL may reach window.open.
+                    if (!isHttpsAuthorizationUrl(url)) {
+                        setError("Invalid authorization URL.");
                         return;
+                    }
                     try {
                         // SECURITY: we never embed the authorizationUrl in chat text.
                         // It is only opened in a popup. We deliberately do NOT pass
@@ -764,6 +457,32 @@ function SensitiveRequestBlock({ request, }) {
                     }
                 } })), error && _jsx("div", { className: "text-xs text-danger", children: error })] }));
 }
+export function MessagePermissionCard({ payload, }) {
+    const { sendActionMessage } = useAppSelectorShallow((s) => ({
+        sendActionMessage: s.sendActionMessage,
+    }));
+    const permissionRegistry = useMemo(() => isNative && !isDesktopPlatform()
+        ? createMobileSignalsPermissionsRegistry(undefined, client)
+        : createClientPermissionsRegistry(client), []);
+    const handlePermissionFallback = useCallback((feature, permission) => {
+        void sendActionMessage(`__permission_card__:use_fallback feature=${feature} permission=${permission}`);
+    }, [sendActionMessage]);
+    const handlePermissionGranted = useCallback((feature, permission) => {
+        void sendActionMessage(`__permission_card__:granted feature=${feature} permission=${permission}`);
+    }, [sendActionMessage]);
+    return renderPermissionCardFromPayload(payload, {
+        registry: permissionRegistry,
+        onOpenSettings: async (permission) => {
+            if (isNative && !isDesktopPlatform()) {
+                await openMobilePermissionSettings(permission);
+                return;
+            }
+            await client.openPermissionSettings(permission);
+        },
+        onFallback: ({ feature, permission }) => handlePermissionFallback(feature, permission),
+        onGranted: () => handlePermissionGranted(payload.feature, payload.permission),
+    });
+}
 function OAuthRequestPanel({ form, authorizing, onStart, }) {
     const provider = form.provider ?? "provider";
     const label = form.submitLabel ?? `Connect ${provider}`;
@@ -772,8 +491,11 @@ function OAuthRequestPanel({ form, authorizing, onStart, }) {
 // ── Main component ──────────────────────────────────────────────────
 export function MessageContent({ message, analysisMode = false, }) {
     useRenderGuard(`MessageContent:${message.id ?? "unknown"}`);
-    const app = useApp();
-    const { sendActionMessage } = app;
+    const { sendActionMessage, setTab, handleChatRetry } = useAppSelectorShallow((s) => ({
+        sendActionMessage: s.sendActionMessage,
+        setTab: s.setTab,
+        handleChatRetry: s.handleChatRetry,
+    }));
     // Composer prefill for followup `prompt` chips. Outside the chat provider,
     // `useChatComposer` returns an inert setter, so this is safe everywhere.
     const { setChatInput } = useChatComposer();
@@ -789,50 +511,14 @@ export function MessageContent({ message, analysisMode = false, }) {
             return [{ kind: "text", text: message.text }];
         }
     }, [message.text, analysisMode]);
-    const handleChoice = useCallback((value) => {
-        void sendActionMessage(value);
-    }, [sendActionMessage]);
-    // Followup `navigate` chip: deliver the passive view-switch SUGGESTION as the
-    // same `eliza:navigate:view` event the VIEWS action uses. A `/`-prefixed
-    // payload is a viewPath; anything else is treated as a viewId.
-    const handleNavigate = useCallback((payload) => {
-        if (typeof window === "undefined")
-            return;
-        const detail = payload.startsWith("/")
-            ? { viewPath: payload }
-            : { viewId: payload };
-        window.dispatchEvent(new CustomEvent("eliza:navigate:view", { detail }));
-    }, []);
-    // Followup `prompt` chip: prefill the composer (falls back to send inside the
-    // widget when no composer is mounted).
-    const handlePrompt = useCallback((payload) => {
-        setChatInput(payload);
-    }, [setChatInput]);
-    // Generic in-chat form submit: send the structured result back as a message
-    // through the existing action-message pipeline.
-    const handleFormSubmit = useCallback((formId, values) => {
-        void sendActionMessage(`[form:submit ${formId}] ${JSON.stringify(values)}`);
-    }, [sendActionMessage]);
-    // Handlers handed to every inline widget at render. Self-contained widgets
-    // (the task card) ignore them; interactive ones drive the chat surface.
-    const inlineWidgetCtx = useMemo(() => ({
-        sendAction: handleChoice,
-        navigate: handleNavigate,
-        prefillComposer: handlePrompt,
-        submitForm: handleFormSubmit,
-    }), [handleChoice, handleNavigate, handlePrompt, handleFormSubmit]);
-    const permissionRegistry = useMemo(() => isNative && !isDesktopPlatform()
-        ? createMobileSignalsPermissionsRegistry(undefined, client)
-        : createClientPermissionsRegistry(client), []);
-    const handlePermissionFallback = useCallback((feature, permission) => {
-        void sendActionMessage(`__permission_card__:use_fallback feature=${feature} permission=${permission}`);
-    }, [sendActionMessage]);
-    const handlePermissionGranted = useCallback((feature, permission) => {
-        void sendActionMessage(`__permission_card__:granted feature=${feature} permission=${permission}`);
-    }, [sendActionMessage]);
+    // Handlers handed to every inline widget at render: the SAME shared contract
+    // the overlay surface (InlineWidgetText) uses, so a CHOICE pick / FOLLOWUPS
+    // chip / FORM submit behaves identically on both. Self-contained widgets (the
+    // task card) ignore them; interactive ones drive the chat surface.
+    const inlineWidgetCtx = useInlineWidgetContext(sendActionMessage, setChatInput);
     const handleOpenSettings = useCallback(() => {
-        app.setTab?.("settings");
-    }, [app.setTab]);
+        setTab?.("settings");
+    }, [setTab]);
     const handleDownloadDefaultLocalModel = useCallback(async () => {
         const modelId = message.localInference?.modelId;
         if (!modelId) {
@@ -880,6 +566,18 @@ export function MessageContent({ message, analysisMode = false, }) {
     if (message.failureKind === "no_provider") {
         return (_jsxs("div", { className: "border border-warn/30 bg-warn/5 rounded-sm p-3 text-sm", children: [_jsx("div", { className: "font-medium mb-1", children: "Connect a provider to chat" }), _jsx("div", { className: "text-muted whitespace-pre-wrap mb-2", children: message.text }), _jsx(Button, { type: "button", size: "sm", onClick: handleOpenSettings, children: "Open Settings" })] }));
     }
+    // Transient server failures (the agent was rate-limited or the provider had a
+    // hiccup) render the graceful message plus a one-tap Retry that resends the
+    // preceding user turn, so a stalled turn isn't a dead end the user has to
+    // retype. `no_provider`/`insufficient_credits` are excluded — a retry can't
+    // fix those (they have their own Settings / billing affordances).
+    if (message.failureKind === "rate_limited" ||
+        message.failureKind === "provider_issue") {
+        return (_jsxs("div", { className: "border border-warn/30 bg-warn/5 rounded-sm p-3 text-sm", children: [_jsx("div", { className: "text-muted whitespace-pre-wrap mb-2", children: message.text }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
+                        if (message.id)
+                            handleChatRetry(message.id);
+                    }, children: "Retry" })] }));
+    }
     // Fast path: single plain-text segment (most messages)
     if (segments.length === 1 && segments[0].kind === "text") {
         return (_jsx(MessageTextBody, { text: segments[0].text, boldSlashCommand: message.role === "user" }));
@@ -894,20 +592,24 @@ export function MessageContent({ message, analysisMode = false, }) {
                 return segments.map((seg) => {
                     const baseKey = seg.kind === "text"
                         ? `text:${seg.text.slice(0, 80)}`
-                        : seg.kind === "config"
-                            ? `config:${seg.pluginId}`
-                            : seg.kind === "widget"
-                                ? (getInlineWidget(seg.widgetKind)?.keyFor?.(seg.data) ??
-                                    `widget:${seg.widgetKind}`)
-                                : seg.kind === "permission"
-                                    ? `permission:${seg.payload.feature}`
-                                    : seg.kind === "analysis-xml"
-                                        ? `analysis:${seg.tag}`
-                                        : `ui:${seg.raw.slice(0, 80)}`;
+                        : seg.kind === "code"
+                            ? `code:${seg.code.slice(0, 80)}`
+                            : seg.kind === "config"
+                                ? `config:${seg.pluginId}`
+                                : seg.kind === "widget"
+                                    ? (getInlineWidget(seg.widgetKind)?.keyFor?.(seg.data) ??
+                                        `widget:${seg.widgetKind}`)
+                                    : seg.kind === "permission"
+                                        ? `permission:${seg.payload.feature}`
+                                        : seg.kind === "analysis-xml"
+                                            ? `analysis:${seg.tag}`
+                                            : `ui:${seg.raw.slice(0, 80)}`;
                     const segmentKey = nextKey(baseKey);
                     switch (seg.kind) {
                         case "text":
                             return (_jsx(MessageTextBody, { text: seg.text, boldSlashCommand: message.role === "user" }, segmentKey));
+                        case "code":
+                            return (_jsx(CodeBlock, { className: "my-2", value: seg.code, wrap: true, copyable: true, "data-testid": "code-block", ...(seg.lang ? { "data-lang": seg.lang } : {}) }, segmentKey));
                         case "analysis-xml":
                             return (_jsxs("div", { className: "my-2 border border-accent/20 rounded-sm bg-accent/5 overflow-hidden", children: [_jsxs("div", { className: "bg-accent/10 px-3 py-1 text-xs font-mono font-bold text-accent uppercase tracking-wider", children: ["<", seg.tag, ">"] }), _jsx("pre", { className: "px-3 py-2 text-xs font-mono whitespace-pre-wrap break-words text-muted m-0 overflow-x-auto", children: seg.content.trim() })] }, segmentKey));
                         case "config":
@@ -916,7 +618,7 @@ export function MessageContent({ message, analysisMode = false, }) {
                             }
                             return (_jsx(InlinePluginConfig, { pluginId: seg.pluginId }, segmentKey));
                         case "ui-spec":
-                            return (_jsx(UiSpecBlock, { spec: seg.spec, raw: seg.raw }, segmentKey));
+                            return (_jsx(MessageUiSpecBlock, { spec: seg.spec, raw: seg.raw }, segmentKey));
                         case "widget": {
                             const widget = getInlineWidget(seg.widgetKind);
                             return widget
@@ -924,13 +626,7 @@ export function MessageContent({ message, analysisMode = false, }) {
                                 : null;
                         }
                         case "permission":
-                            return (_jsx(PermissionCard, { permission: seg.payload.permission, reason: seg.payload.reason, feature: seg.payload.feature, fallbackOffered: seg.payload.fallbackOffered, fallbackLabel: seg.payload.fallbackLabel, registry: permissionRegistry, onOpenSettings: async (permission) => {
-                                    if (isNative && !isDesktopPlatform()) {
-                                        await openMobilePermissionSettings(permission);
-                                        return;
-                                    }
-                                    await client.openPermissionSettings(permission);
-                                }, onFallback: ({ feature, permission }) => handlePermissionFallback(feature, permission), onGranted: () => handlePermissionGranted(seg.payload.feature, seg.payload.permission) }, segmentKey));
+                            return (_jsx(MessagePermissionCard, { payload: seg.payload }, segmentKey));
                         default:
                             return null;
                     }