@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/action-requests/components/ActionRequestAnswerForm.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 import { Button } from "@ai-matrx/design-system/controls";
 import { Eye, EyeOff } from "lucide-react";
@@ -76,16 +77,35 @@ function ActionRequestAnswerForm({
 }) {
   const card = layout === "card";
   const idPrefix = `q${useId().replace(/:/g, "")}`;
-  const problem = refusal ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-destructive" }, refusal.message, " ", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: refusal.message })), refusal.remedy ? /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground" }, refusal.remedy, " ", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: refusal.remedy })) : null) : null;
-  const head = (title) => !card || render.subtitle ? /* @__PURE__ */ React.createElement("header", { className: "flex flex-col gap-2" }, card ? null : /* @__PURE__ */ React.createElement("h1", { className: "text-xl font-medium" }, title), render.subtitle ? /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground" }, render.subtitle) : null) : null;
-  const foot = render.footnote ? /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, render.footnote) : null;
-  const shell = (body, title = render.title) => /* @__PURE__ */ React.createElement("section", { className: cn("flex flex-col", card ? "gap-4 p-4" : "gap-5 py-10") }, head(title), problem, body, foot);
+  const problem = refusal ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive", children: [
+      refusal.message,
+      " ",
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: refusal.message })
+    ] }),
+    refusal.remedy ? /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      refusal.remedy,
+      " ",
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: refusal.remedy })
+    ] }) : null
+  ] }) : null;
+  const head = (title) => !card || render.subtitle ? /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+    card ? null : /* @__PURE__ */ jsx("h1", { className: "text-xl font-medium", children: title }),
+    render.subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: render.subtitle }) : null
+  ] }) : null;
+  const foot = render.footnote ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: render.footnote }) : null;
+  const shell = (body, title = render.title) => /* @__PURE__ */ jsxs("section", { className: cn("flex flex-col", card ? "gap-4 p-4" : "gap-5 py-10"), children: [
+    head(title),
+    problem,
+    body,
+    foot
+  ] });
   const common = { busy, onSubmit, idPrefix, autoFocus: !card };
   switch (render.form) {
     // THE ASKCARD WIZARD, from the server's stored questions. It carries its
     // own card chrome, so it is not wrapped in `shell` inside a chat card.
     case "questions": {
-      const wizard = /* @__PURE__ */ React.createElement(
+      const wizard = /* @__PURE__ */ jsx(
         QuestionsAskForm,
         {
           askKey: askKey ?? idPrefix,
@@ -95,59 +115,71 @@ function ActionRequestAnswerForm({
           onSubmit: (body) => void onSubmit({ result: body })
         }
       );
-      return card ? /* @__PURE__ */ React.createElement("div", { className: "p-2" }, wizard) : /* @__PURE__ */ React.createElement("section", { className: "flex flex-col gap-5 py-10" }, head(render.title), wizard, foot);
+      return card ? /* @__PURE__ */ jsx("div", { className: "p-2", children: wizard }) : /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-5 py-10", children: [
+        head(render.title),
+        wizard,
+        foot
+      ] });
     }
     case "approve":
       return shell(
-        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, render.consequence_note ? /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-card p-3 text-sm" }, render.consequence_note) : null, render.choices.map((choice) => /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            key: choice.value,
-            variant: choice.tone === "primary" ? "primary" : "quiet",
-            className: "w-full",
-            disabled: busy,
-            onClick: () => void onSubmit({ result: { approved: choice.value === "yes" } })
-          },
-          choice.label
-        )))
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          render.consequence_note ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-card p-3 text-sm", children: render.consequence_note }) : null,
+          render.choices.map((choice) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: choice.tone === "primary" ? "primary" : "quiet",
+              className: "w-full",
+              disabled: busy,
+              onClick: () => void onSubmit({ result: { approved: choice.value === "yes" } }),
+              children: choice.label
+            },
+            choice.value
+          ))
+        ] })
       );
     case "approve_spend":
-      return /* @__PURE__ */ React.createElement(ApproveSpend, { render, frame: shell, ...common });
+      return /* @__PURE__ */ jsx(ApproveSpend, { render, frame: shell, ...common });
     case "choose_one":
       return shell(
-        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, render.choices.map((choice) => /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: render.choices.map((choice) => /* @__PURE__ */ jsxs(
           SurfaceButton,
           {
-            key: choice.value,
             variant: "outline",
             className: "h-auto w-full flex-col items-start gap-1 whitespace-normal py-3 text-left",
             disabled: busy,
-            onClick: () => void onSubmit({ result: { value: choice.value } })
+            onClick: () => void onSubmit({ result: { value: choice.value } }),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: choice.label }),
+              choice.detail ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: choice.detail }) : null
+            ]
           },
-          /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, choice.label),
-          choice.detail ? /* @__PURE__ */ React.createElement("span", { className: "text-xs font-normal text-muted-foreground" }, choice.detail) : null
-        )))
+          choice.value
+        )) })
       );
     case "confirm_details":
-      return shell(/* @__PURE__ */ React.createElement(ConfirmDetails, { render, ...common }));
+      return shell(/* @__PURE__ */ jsx(ConfirmDetails, { render, ...common }));
     case "pick_time":
-      return shell(/* @__PURE__ */ React.createElement(PickTime, { render, ...common }));
+      return shell(/* @__PURE__ */ jsx(PickTime, { render, ...common }));
     case "credential":
-      return shell(/* @__PURE__ */ React.createElement(Credential, { render, ...common }));
+      return shell(/* @__PURE__ */ jsx(Credential, { render, ...common }));
     case "vault_item":
-      return shell(/* @__PURE__ */ React.createElement(VaultItem, { render, ...common }));
+      return shell(/* @__PURE__ */ jsx(VaultItem, { render, ...common }));
     case "browser_takeover":
       return shell(
-        /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, render.detail ? /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-card p-3 text-sm" }, render.detail) : null, /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            variant: "primary",
-            className: "w-full",
-            disabled: busy,
-            onClick: () => void onSubmit({ result: { taking_over: true }, origin: render.origin })
-          },
-          render.submit_label
-        ))
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          render.detail ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-card p-3 text-sm", children: render.detail }) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              className: "w-full",
+              disabled: busy,
+              onClick: () => void onSubmit({ result: { taking_over: true }, origin: render.origin }),
+              children: render.submit_label
+            }
+          )
+        ] })
       );
     // NO FILE DOOR YET, AND A PICKER THAT CANNOT SEND ANYTHING IS WORSE THAN
     // NONE. aidream's `upload_file` result is a list of file ids and nothing on
@@ -155,10 +187,10 @@ function ActionRequestAnswerForm({
     // and the screen says plainly what to do instead.
     case "upload_file":
       return shell(
-        /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-card p-3 text-sm" }, "Files cannot be sent from here yet. Reply to the message your agent sent you with the file attached, and it will pick it up there.")
+        /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-card p-3 text-sm", children: "Files cannot be sent from here yet. Reply to the message your agent sent you with the file attached, and it will pick it up there." })
       );
     case "one_time_code":
-      return shell(/* @__PURE__ */ React.createElement(OneTimeCode, { render, ...common }));
+      return shell(/* @__PURE__ */ jsx(OneTimeCode, { render, ...common }));
   }
 }
 function prefilledValues(fields) {
@@ -172,52 +204,67 @@ function prefilledValues(fields) {
 }
 function ConfirmDetails({ render, busy, idPrefix, onSubmit }) {
   const [edits, setEdits] = useState({});
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, render.rows.map(
-    (row) => row.editable ? /* @__PURE__ */ React.createElement("div", { key: row.key, className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-${row.key}` }, row.label), /* @__PURE__ */ React.createElement(
-      Input,
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    render.rows.map(
+      (row) => row.editable ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-${row.key}`, children: row.label }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${idPrefix}-${row.key}`,
+            className: "text-base",
+            value: edits[row.key] ?? row.value,
+            onChange: (event) => setEdits((current) => ({ ...current, [row.key]: event.target.value }))
+          }
+        )
+      ] }, row.key) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: row.label }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: row.value })
+      ] }, row.key)
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
       {
-        id: `${idPrefix}-${row.key}`,
-        className: "text-base",
-        value: edits[row.key] ?? row.value,
-        onChange: (event) => setEdits((current) => ({ ...current, [row.key]: event.target.value }))
-      }
-    )) : /* @__PURE__ */ React.createElement("div", { key: row.key, className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground" }, row.label), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, row.value))
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "primary",
-      className: "w-full",
-      disabled: busy,
-      onClick: () => {
-        const corrections = {};
-        for (const row of render.rows) {
-          const edited = edits[row.key];
-          if (edited !== void 0 && edited !== row.value) corrections[row.key] = edited;
-        }
-        void onSubmit({ result: { confirmed: true, corrections } });
+        variant: "primary",
+        className: "w-full",
+        disabled: busy,
+        onClick: () => {
+          const corrections = {};
+          for (const row of render.rows) {
+            const edited = edits[row.key];
+            if (edited !== void 0 && edited !== row.value) corrections[row.key] = edited;
+          }
+          void onSubmit({ result: { confirmed: true, corrections } });
+        },
+        children: render.submit_label
       }
-    },
-    render.submit_label
-  ));
+    )
+  ] });
 }
 function PickTime({ render, busy, onSubmit }) {
   const format = timeFormat(render.timezone);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, render.options.map((option) => /* @__PURE__ */ React.createElement(
-    SurfaceButton,
-    {
-      key: option,
-      variant: "outline",
-      className: "h-auto w-full justify-start whitespace-normal py-3 text-left",
-      disabled: busy,
-      onClick: () => void onSubmit({
-        result: {
-          chosen_at: option,
-          ...render.timezone ? { timezone: render.timezone } : {}
-        }
-      })
-    },
-    safeFormat(format, option)
-  )), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, render.timezone ? `Times are ${render.timezone}.` : "Times are in your device's timezone.", render.duration_minutes ? ` ${render.duration_minutes} minutes.` : ""));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    render.options.map((option) => /* @__PURE__ */ jsx(
+      SurfaceButton,
+      {
+        variant: "outline",
+        className: "h-auto w-full justify-start whitespace-normal py-3 text-left",
+        disabled: busy,
+        onClick: () => void onSubmit({
+          result: {
+            chosen_at: option,
+            ...render.timezone ? { timezone: render.timezone } : {}
+          }
+        }),
+        children: safeFormat(format, option)
+      },
+      option
+    )),
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      render.timezone ? `Times are ${render.timezone}.` : "Times are in your device's timezone.",
+      render.duration_minutes ? ` ${render.duration_minutes} minutes.` : ""
+    ] })
+  ] });
 }
 function FieldList({
   fields,
@@ -226,20 +273,23 @@ function FieldList({
   idPrefix
 }) {
   const firstPlain = fields.find((field) => !field.secret)?.key;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, fields.map((field) => /* @__PURE__ */ React.createElement("div", { key: field.key, className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-${field.key}` }, field.label), /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      id: `${idPrefix}-${field.key}`,
-      className: "text-base",
-      type: field.secret ? "password" : "text",
-      autoComplete: field.secret ? "current-password" : field.key === firstPlain ? "username" : "off",
-      autoCapitalize: "none",
-      autoCorrect: "off",
-      spellCheck: false,
-      value: values[field.key] ?? "",
-      onChange: (event) => setValues((current) => ({ ...current, [field.key]: event.target.value }))
-    }
-  ))));
+  return /* @__PURE__ */ jsx(Fragment, { children: fields.map((field) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-${field.key}`, children: field.label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: `${idPrefix}-${field.key}`,
+        className: "text-base",
+        type: field.secret ? "password" : "text",
+        autoComplete: field.secret ? "current-password" : field.key === firstPlain ? "username" : "off",
+        autoCapitalize: "none",
+        autoCorrect: "off",
+        spellCheck: false,
+        value: values[field.key] ?? "",
+        onChange: (event) => setValues((current) => ({ ...current, [field.key]: event.target.value }))
+      }
+    )
+  ] }, field.key)) });
 }
 function Credential({ render, busy, idPrefix, onSubmit }) {
   const [values, setValues] = useState(
@@ -247,73 +297,88 @@ function Credential({ render, busy, idPrefix, onSubmit }) {
   );
   const [authenticator, setAuthenticator] = useState("");
   const [showAuthenticator, setShowAuthenticator] = useState(false);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-card p-3 text-sm" }, render.origin), /* @__PURE__ */ React.createElement(
-    FieldList,
-    {
-      fields: render.fields,
-      values,
-      setValues,
-      idPrefix
-    }
-  ), render.allow_authenticator_secret ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-authenticator` }, "Authenticator setup key (optional)"), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      id: `${idPrefix}-authenticator`,
-      className: "pr-10 text-base",
-      type: showAuthenticator ? "text" : "password",
-      autoComplete: "off",
-      autoCapitalize: "none",
-      autoCorrect: "off",
-      spellCheck: false,
-      value: authenticator,
-      onChange: (event) => setAuthenticator(event.target.value),
-      placeholder: "The long code shown beside the QR when you set up two-factor."
-    }
-  ), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: showAuthenticator ? /* @__PURE__ */ React.createElement(EyeOff, null) : /* @__PURE__ */ React.createElement(Eye, null), "aria-label": showAuthenticator ? "Hide setup key" : "Show setup key", "aria-pressed": showAuthenticator, onClick: () => setShowAuthenticator((shown) => !shown), className: "absolute inset-y-0 right-0" }))) : null, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "primary",
-      className: "w-full",
-      disabled: busy,
-      onClick: () => void onSubmit({
-        field_values: Object.fromEntries(
-          render.fields.map((field) => [field.key, values[field.key] ?? ""])
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-card p-3 text-sm", children: render.origin }),
+    /* @__PURE__ */ jsx(
+      FieldList,
+      {
+        fields: render.fields,
+        values,
+        setValues,
+        idPrefix
+      }
+    ),
+    render.allow_authenticator_secret ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-authenticator`, children: "Authenticator setup key (optional)" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${idPrefix}-authenticator`,
+            className: "pr-10 text-base",
+            type: showAuthenticator ? "text" : "password",
+            autoComplete: "off",
+            autoCapitalize: "none",
+            autoCorrect: "off",
+            spellCheck: false,
+            value: authenticator,
+            onChange: (event) => setAuthenticator(event.target.value),
+            placeholder: "The long code shown beside the QR when you set up two-factor."
+          }
         ),
-        ...authenticator.trim() ? { authenticator_secret: authenticator.trim() } : {},
-        // THE ECHO. aidream compares this to the origin stored on the row and
-        // saves nothing if they differ — scheme, host and port, exactly.
-        origin: render.origin
-      })
-    },
-    render.submit_label
-  ));
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: showAuthenticator ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {}), "aria-label": showAuthenticator ? "Hide setup key" : "Show setup key", "aria-pressed": showAuthenticator, onClick: () => setShowAuthenticator((shown) => !shown), className: "absolute inset-y-0 right-0" })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        className: "w-full",
+        disabled: busy,
+        onClick: () => void onSubmit({
+          field_values: Object.fromEntries(
+            render.fields.map((field) => [field.key, values[field.key] ?? ""])
+          ),
+          ...authenticator.trim() ? { authenticator_secret: authenticator.trim() } : {},
+          // THE ECHO. aidream compares this to the origin stored on the row and
+          // saves nothing if they differ — scheme, host and port, exactly.
+          origin: render.origin
+        }),
+        children: render.submit_label
+      }
+    )
+  ] });
 }
 function VaultItem({ render, busy, idPrefix, onSubmit }) {
   const [values, setValues] = useState(
     () => prefilledValues(render.fields)
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, render.note ? /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-card p-3 text-sm" }, render.note) : null, /* @__PURE__ */ React.createElement(
-    FieldList,
-    {
-      fields: render.fields,
-      values,
-      setValues,
-      idPrefix
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "primary",
-      className: "w-full",
-      disabled: busy,
-      onClick: () => void onSubmit({
-        field_values: Object.fromEntries(
-          render.fields.map((field) => [field.key, values[field.key] ?? ""])
-        )
-      })
-    },
-    render.submit_label
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    render.note ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-card p-3 text-sm", children: render.note }) : null,
+    /* @__PURE__ */ jsx(
+      FieldList,
+      {
+        fields: render.fields,
+        values,
+        setValues,
+        idPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        className: "w-full",
+        disabled: busy,
+        onClick: () => void onSubmit({
+          field_values: Object.fromEntries(
+            render.fields.map((field) => [field.key, values[field.key] ?? ""])
+          )
+        }),
+        children: render.submit_label
+      }
+    )
+  ] });
 }
 function OneTimeCode({ render, busy, idPrefix, autoFocus, onSubmit }) {
   const [code, setCode] = useState("");
@@ -324,27 +389,34 @@ function OneTimeCode({ render, busy, idPrefix, autoFocus, onSubmit }) {
     setCode("");
     void onSubmit({ field_values: { code: cleaned }, origin: render.origin });
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-card p-3 text-sm" }, render.origin), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-one-time-code` }, "Verification code"), /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      id: `${idPrefix}-one-time-code`,
-      className: "text-center font-mono text-2xl tracking-[0.3em]",
-      type: "text",
-      inputMode: "numeric",
-      autoComplete: "one-time-code",
-      autoFocus,
-      autoCapitalize: "none",
-      autoCorrect: "off",
-      spellCheck: false,
-      maxLength: 12,
-      placeholder: "000000",
-      value: code,
-      onChange: (event) => setCode(event.target.value),
-      onKeyDown: (event) => {
-        if (event.key === "Enter") send();
-      }
-    }
-  )), /* @__PURE__ */ React.createElement(Button, { variant: "primary", className: "w-full", disabled: !ready, onClick: send }, render.submit_label));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-card p-3 text-sm", children: render.origin }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-one-time-code`, children: "Verification code" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${idPrefix}-one-time-code`,
+          className: "text-center font-mono text-2xl tracking-[0.3em]",
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          autoFocus,
+          autoCapitalize: "none",
+          autoCorrect: "off",
+          spellCheck: false,
+          maxLength: 12,
+          placeholder: "000000",
+          value: code,
+          onChange: (event) => setCode(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") send();
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "primary", className: "w-full", disabled: !ready, onClick: send, children: render.submit_label })
+  ] });
 }
 function ApproveSpend({
   render,
@@ -387,38 +459,70 @@ function ApproveSpend({
   };
   const title = amount !== null && amount > 0 ? `Approve up to ${money(amount)}?` : `Approve up to ${money(render.amount_usd)}?`;
   return frame(
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, render.consequence_note ? /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-card p-3 text-sm" }, render.consequence_note) : null, /* @__PURE__ */ React.createElement("dl", { className: "flex flex-col gap-3 rounded-md border border-border bg-card p-3 text-sm" }, render.what_it_buys ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement("dt", { className: "text-xs text-muted-foreground" }, "What it buys"), /* @__PURE__ */ React.createElement("dd", null, render.what_it_buys)) : null, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline justify-between gap-3" }, /* @__PURE__ */ React.createElement("dt", { className: "text-xs text-muted-foreground" }, "Estimated cost"), /* @__PURE__ */ React.createElement("dd", { className: "font-medium tabular-nums" }, money(render.estimate_usd))), cap !== null ? /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline justify-between gap-3" }, /* @__PURE__ */ React.createElement("dt", { className: "text-xs text-muted-foreground" }, "Your organization's remaining limit"), /* @__PURE__ */ React.createElement("dd", { className: "font-medium tabular-nums" }, money(cap))) : null), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-amount` }, "Amount you approve"), /* @__PURE__ */ React.createElement("div", { className: "relative" }, unit === "usd" ? /* @__PURE__ */ React.createElement("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex w-8 items-center justify-center text-muted-foreground" }, "$") : /* @__PURE__ */ React.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-muted-foreground" }, "points"), /* @__PURE__ */ React.createElement(
-      Input,
-      {
-        ref: input,
-        id: `${idPrefix}-amount`,
-        className: cn("text-base tabular-nums", unit === "usd" ? "pl-8" : "pr-16"),
-        type: "text",
-        inputMode: "decimal",
-        autoComplete: "off",
-        autoFocus,
-        readOnly: !render.amount_editable,
-        "aria-invalid": problem ? true : void 0,
-        "aria-describedby": `${idPrefix}-amount-help`,
-        value: text,
-        onChange: (event) => {
-          setText(event.target.value);
-          setProblem(null);
-        },
-        onKeyDown: (event) => {
-          if (event.key === "Enter" && !busy) approve();
-        }
-      }
-    )), /* @__PURE__ */ React.createElement("div", { id: `${idPrefix}-amount-help`, className: "flex flex-col gap-1" }, problem ? /* @__PURE__ */ React.createElement("p", { className: "text-sm text-destructive" }, problem) : null, advisories.map((line) => /* @__PURE__ */ React.createElement("p", { key: line, className: "text-sm text-muted-foreground" }, line)), !problem && advisories.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, "Your agent can spend up to this amount on this job, and no more.") : null)), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement(Button, { variant: "primary", className: "w-full", disabled: busy, onClick: approve }, yes?.label ?? "Approve this amount"), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "quiet",
-        className: "w-full",
-        disabled: busy,
-        onClick: () => void onSubmit({ result: { approved: false } })
-      },
-      no?.label ?? "Don't spend"
-    ))),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      render.consequence_note ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-card p-3 text-sm", children: render.consequence_note }) : null,
+      /* @__PURE__ */ jsxs("dl", { className: "flex flex-col gap-3 rounded-md border border-border bg-card p-3 text-sm", children: [
+        render.what_it_buys ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: "What it buys" }),
+          /* @__PURE__ */ jsx("dd", { children: render.what_it_buys })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: "Estimated cost" }),
+          /* @__PURE__ */ jsx("dd", { className: "font-medium tabular-nums", children: money(render.estimate_usd) })
+        ] }),
+        cap !== null ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: "Your organization's remaining limit" }),
+          /* @__PURE__ */ jsx("dd", { className: "font-medium tabular-nums", children: money(cap) })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: `${idPrefix}-amount`, children: "Amount you approve" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          unit === "usd" ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex w-8 items-center justify-center text-muted-foreground", children: "$" }) : /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-muted-foreground", children: "points" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: input,
+              id: `${idPrefix}-amount`,
+              className: cn("text-base tabular-nums", unit === "usd" ? "pl-8" : "pr-16"),
+              type: "text",
+              inputMode: "decimal",
+              autoComplete: "off",
+              autoFocus,
+              readOnly: !render.amount_editable,
+              "aria-invalid": problem ? true : void 0,
+              "aria-describedby": `${idPrefix}-amount-help`,
+              value: text,
+              onChange: (event) => {
+                setText(event.target.value);
+                setProblem(null);
+              },
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !busy) approve();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { id: `${idPrefix}-amount-help`, className: "flex flex-col gap-1", children: [
+          problem ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: problem }) : null,
+          advisories.map((line) => /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: line }, line)),
+          !problem && advisories.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Your agent can spend up to this amount on this job, and no more." }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "primary", className: "w-full", disabled: busy, onClick: approve, children: yes?.label ?? "Approve this amount" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "quiet",
+            className: "w-full",
+            disabled: busy,
+            onClick: () => void onSubmit({ result: { approved: false } }),
+            children: no?.label ?? "Don't spend"
+          }
+        )
+      ] })
+    ] }),
     title
   );
 }