@tangle-network/agent-app 0.60.177 → 0.60.178

package/dist/hub-approvals-react/index.js

@@ -7,17 +7,16 @@ import {
   formatWhen,
   hubActionReceipt,
   presentHubAction
-} from "../chunk-MCAIZKQ5.js";
+} from "../chunk-CPNJRLPN.js";
 
 // src/hub-approvals-react/dock.tsx
-import { useEffect, useMemo, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect3, useMemo, useRef, useState as useState4 } from "react";
 import { Check, ChevronDown, ExternalLink, Loader2, X } from "lucide-react";
-import { Button as Button2, Label, RadioGroup, RadioGroupItem } from "@tangle-network/ui/primitives";
+import { Button as Button3, Label as Label2, RadioGroup, RadioGroupItem } from "@tangle-network/ui/primitives";
 
 // src/hub-approvals-react/parts.tsx
 import { useState } from "react";
 import { ChevronRight, Clock, Zap } from "lucide-react";
-import { ProviderIcon } from "@tangle-network/sandbox-ui/integrations";
 import { Button, StatusPill } from "@tangle-network/ui/primitives";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PHASE_TONES = {
@@ -47,13 +46,15 @@ function HubApprovalWaitNote({ wait, className = "" }) {
   ] });
 }
 function HubProviderMark({ providerId, name, size = 28 }) {
-  const inner = Math.round(size * 0.64);
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: "flex shrink-0 items-center justify-center rounded-lg border border-border bg-background",
       style: { width: size, height: size },
-      children: /* @__PURE__ */ jsx(ProviderIcon, { id: providerId, displayName: name, size: inner, className: "rounded-sm" })
+      title: name,
+      "data-provider": providerId,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground", children: name.charAt(0).toUpperCase() })
     }
   );
 }
@@ -115,121 +116,196 @@ function relativeTime(at, now = Date.now()) {
 // src/hub-approvals-react/preview.tsx
 import { ArrowRight, CalendarDays, GitBranch, GitCommitHorizontal, GitPullRequest, MapPin, Phone, Users } from "lucide-react";
 import { ApprovalDiffSummary } from "@tangle-network/ui/run";
+
+// src/hub-approvals-react/email.tsx
+import { useEffect, useState as useState2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function plainText(body, html) {
-  if (!html) return body;
-  return body.replace(/<(script|style)[\s\S]*?<\/\1>/gi, "").replace(/<br\s*\/?>/gi, "\n").replace(/<\/(p|div|li|h[1-6]|tr)>/gi, "\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\n{3,}/g, "\n\n").trim();
+var EMAIL_TAGS = new Set("a abbr b blockquote br caption center code col colgroup dd del div dl dt em font h1 h2 h3 h4 h5 h6 hr i img li ol p pre s small span strong sub sup table tbody td tfoot th thead tr u ul".split(" "));
+var EMAIL_ATTRIBUTES = new Set("align alt bgcolor border cellpadding cellspacing class color colspan dir face height lang rowspan size style title valign width".split(" "));
+function embeddedPreviewImage(value) {
+  return value && /^data:image\/(?:png|jpeg|jpg|gif|webp);base64,[a-z0-9+/=\s]+$/i.test(value) ? value : void 0;
+}
+function emailDocument(body) {
+  const template = document.createElement("template");
+  template.innerHTML = body;
+  const target = document.createElement("div");
+  function copy(source, parent) {
+    if (source.nodeType === Node.TEXT_NODE) {
+      parent.appendChild(document.createTextNode(source.textContent ?? ""));
+      return;
+    }
+    if (!(source instanceof HTMLElement) || !EMAIL_TAGS.has(source.localName)) return;
+    const element = document.createElement(source.localName);
+    for (const attribute of source.attributes) {
+      if (EMAIL_ATTRIBUTES.has(attribute.name)) element.setAttribute(attribute.name, attribute.value);
+    }
+    if (source.localName === "a") {
+      const href = source.getAttribute("href") ?? "";
+      if (/^(https?:|mailto:)/i.test(href.trim())) element.setAttribute("href", href);
+      element.setAttribute("target", "_blank");
+      element.setAttribute("rel", "noopener noreferrer");
+    }
+    if (source.localName === "img") {
+      const image = embeddedPreviewImage(source.getAttribute("src") ?? void 0);
+      if (image) element.setAttribute("src", image);
+    }
+    for (const child of source.childNodes) copy(child, element);
+    parent.appendChild(element);
+  }
+  for (const child of template.content.childNodes) copy(child, target);
+  return {
+    document: `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; form-action 'none'; base-uri 'none'"><meta name="referrer" content="no-referrer"><style>body{margin:0;padding:16px 20px;color:#202124;background:#fff;font:14px/1.6 Arial,sans-serif;overflow-wrap:anywhere}a{color:#1155cc}img{max-width:100%;height:auto}table{max-width:100%}pre{white-space:pre-wrap}</style></head><body>${target.innerHTML}</body></html>`,
+    text: target.textContent ?? ""
+  };
+}
+function EmailPreview({ preview, account }) {
+  const [html, setHtml] = useState2(null);
+  useEffect(() => {
+    if (preview.html && preview.body) setHtml({ source: preview.body, ...emailDocument(preview.body) });
+    else setHtml(null);
+  }, [preview.body, preview.html]);
+  const sender = preview.from ?? account ?? "Sender unavailable";
+  const mailbox = /^(.*?)\s*<([^>]+)>$/.exec(sender);
+  const name = preview.fromName ?? mailbox?.[1]?.replace(/^"|"$/g, "") ?? sender;
+  const address = mailbox?.[2] ?? sender;
+  const currentHtml = html?.source === preview.body ? html : null;
+  const snippet = preview.previewText ?? (preview.html ? currentHtml?.text : preview.body)?.replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsxs2("div", { "data-hub-email-preview": true, className: "overflow-hidden rounded-lg border border-border bg-white font-[Arial,sans-serif] text-[#202124] [color-scheme:light]", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-baseline gap-3 border-b border-[#e8eaed] bg-[#f2f6fc] px-4 py-3 text-sm", "aria-label": "Inbox preview", children: [
+      /* @__PURE__ */ jsx2("span", { className: "max-w-[30%] shrink-0 truncate font-semibold", children: name }),
+      /* @__PURE__ */ jsxs2("span", { className: "min-w-0 truncate", children: [
+        /* @__PURE__ */ jsx2("strong", { children: preview.subject ?? "(no subject)" }),
+        snippet && /* @__PURE__ */ jsxs2("span", { className: "text-[#5f6368]", children: [
+          " \u2014 ",
+          snippet
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "px-4 pt-5 sm:px-5", children: [
+      /* @__PURE__ */ jsx2("h4", { className: "break-words text-[22px] font-normal leading-7", children: preview.subject ?? (preview.reply ? "Reply" : "(no subject)") }),
+      /* @__PURE__ */ jsxs2("div", { className: "mb-4 mt-5 flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-[#e8eaed] text-base text-[#5f6368]", children: name.charAt(0).toUpperCase() }),
+        /* @__PURE__ */ jsxs2("dl", { className: "min-w-0 space-y-1 text-[13px]", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "break-words", children: [
+            /* @__PURE__ */ jsx2("dt", { className: "sr-only", children: "From" }),
+            /* @__PURE__ */ jsxs2("dd", { children: [
+              /* @__PURE__ */ jsx2("strong", { children: name }),
+              name !== address && /* @__PURE__ */ jsxs2("span", { className: "text-[#5f6368]", children: [
+                " <",
+                address,
+                ">"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "break-words text-[#5f6368]", children: [
+            /* @__PURE__ */ jsx2("dt", { className: "inline", children: "To " }),
+            /* @__PURE__ */ jsx2("dd", { className: "inline", children: preview.to.join(", ") || "Recipient unavailable" })
+          ] }),
+          preview.cc.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "break-words text-[#5f6368]", children: [
+            /* @__PURE__ */ jsx2("dt", { className: "inline", children: "Cc " }),
+            /* @__PURE__ */ jsx2("dd", { className: "inline", children: preview.cc.join(", ") })
+          ] })
+        ] })
+      ] })
+    ] }),
+    preview.html ? currentHtml ? /* @__PURE__ */ jsx2("iframe", { title: "Email body", sandbox: "", referrerPolicy: "no-referrer", srcDoc: currentHtml.document, className: "h-[360px] w-full border-0 sm:h-[440px]" }) : /* @__PURE__ */ jsx2("p", { role: "status", className: "px-5 pb-5 text-sm", children: "Rendering email\u2026" }) : /* @__PURE__ */ jsx2("div", { className: "whitespace-pre-wrap break-words px-4 pb-6 text-[14px] leading-[1.6] sm:px-5", children: linkedText(preview.body ?? "") }),
+    preview.bcc.length > 0 && /* @__PURE__ */ jsxs2("p", { className: "border-t border-[#e8eaed] px-4 py-2 text-[13px] text-[#5f6368]", children: [
+      "Bcc (sender only): ",
+      preview.bcc.join(", ")
+    ] })
+  ] });
 }
+function linkedText(value) {
+  return value.split(/(https?:\/\/[^\s<>"']+)/g).map((part, index) => /^https?:\/\//i.test(part) ? /* @__PURE__ */ jsx2("a", { href: part, onClick: (event) => event.preventDefault(), title: "Link shown for review", className: "text-[#1155cc] underline", children: part }, index) : part);
+}
+
+// src/hub-approvals-react/preview.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function initial(name) {
   return (name?.trim().replace(/^@/, "").charAt(0) || "?").toUpperCase();
 }
 function Panel({ children, className = "" }) {
-  return /* @__PURE__ */ jsx2("div", { className: `rounded-lg border border-border bg-background ${className}`, children });
+  return /* @__PURE__ */ jsx3("div", { className: `rounded-lg border border-border bg-background ${className}`, children });
 }
 function PullRequestPreview({ preview }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs2(Panel, { className: "px-3 py-3", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx2(GitPullRequest, { "aria-hidden": true, className: "size-4 shrink-0" }),
-        preview.repository && /* @__PURE__ */ jsx2("span", { className: "font-medium text-foreground", children: preview.repository }),
-        preview.head && preview.base && /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx2(Chip, { mono: true, children: preview.head }),
-          /* @__PURE__ */ jsx2(ArrowRight, { "aria-label": "into", className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx2(Chip, { mono: true, children: preview.base })
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3(GitPullRequest, { "aria-hidden": true, className: "size-4 shrink-0" }),
+        preview.repository && /* @__PURE__ */ jsx3("span", { className: "font-medium text-foreground", children: preview.repository }),
+        preview.head && preview.base && /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx3(Chip, { mono: true, children: preview.head }),
+          /* @__PURE__ */ jsx3(ArrowRight, { "aria-label": "into", className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx3(Chip, { mono: true, children: preview.base })
         ] }),
-        preview.draft && /* @__PURE__ */ jsx2("span", { className: "rounded-md border border-border px-1.5 py-0.5 text-sm text-muted-foreground", children: "Draft" })
-      ] }),
-      preview.title && /* @__PURE__ */ jsx2("p", { className: "mt-2 text-base font-semibold leading-6 text-foreground", children: preview.title }),
-      preview.body && /* @__PURE__ */ jsx2("p", { className: "mt-1 line-clamp-3 whitespace-pre-line text-sm leading-6 text-muted-foreground sm:line-clamp-4", children: preview.body })
-    ] }),
-    preview.files.length > 0 && /* @__PURE__ */ jsx2(ApprovalDiffSummary, { files: preview.files })
-  ] });
-}
-function EmailPreview({ preview, account }) {
-  const rows = [
-    ...account ? [["From", account]] : [],
-    ...preview.to.length ? [["To", preview.to.join(", ")]] : [],
-    ...preview.cc.length ? [["Cc", preview.cc.join(", ")]] : [],
-    ...preview.bcc.length ? [["Bcc", preview.bcc.join(", ")]] : []
-  ];
-  const body = preview.body ? plainText(preview.body, preview.html) : "";
-  return /* @__PURE__ */ jsxs2(Panel, { className: "overflow-hidden", children: [
-    /* @__PURE__ */ jsxs2("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 border-b border-border px-3 py-2.5 text-sm", children: [
-      rows.map(([label, value]) => /* @__PURE__ */ jsxs2("div", { className: "contents", children: [
-        /* @__PURE__ */ jsx2("dt", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsx2("dd", { className: "break-words text-foreground", children: value })
-      ] }, label)),
-      preview.subject && /* @__PURE__ */ jsxs2("div", { className: "contents", children: [
-        /* @__PURE__ */ jsx2("dt", { className: "text-muted-foreground", children: "Subject" }),
-        /* @__PURE__ */ jsx2("dd", { className: "break-words font-semibold text-foreground", children: preview.subject })
+        preview.draft && /* @__PURE__ */ jsx3("span", { className: "rounded-md border border-border px-1.5 py-0.5 text-sm text-muted-foreground", children: "Draft" })
       ] }),
-      preview.reply && !preview.subject && /* @__PURE__ */ jsxs2("div", { className: "contents", children: [
-        /* @__PURE__ */ jsx2("dt", { className: "text-muted-foreground", children: "Reply" }),
-        /* @__PURE__ */ jsx2("dd", { className: "text-foreground", children: "In the existing conversation" })
-      ] })
+      preview.title && /* @__PURE__ */ jsx3("p", { className: "mt-2 text-base font-semibold leading-6 text-foreground", children: preview.title }),
+      preview.body && /* @__PURE__ */ jsx3("p", { className: "mt-1 line-clamp-3 whitespace-pre-line text-sm leading-6 text-muted-foreground sm:line-clamp-4", children: preview.body })
     ] }),
-    body && /* @__PURE__ */ jsx2("div", { className: "max-h-60 overflow-y-auto whitespace-pre-wrap break-words px-3 py-3 text-sm leading-6 text-foreground", children: body })
+    preview.files.length > 0 && /* @__PURE__ */ jsx3(ApprovalDiffSummary, { files: preview.files })
   ] });
 }
 function PostPreview({ preview, account }) {
   if (preview.channel === "slack") {
-    return /* @__PURE__ */ jsxs2(Panel, { className: "px-3 py-3", children: [
-      /* @__PURE__ */ jsx2("p", { className: "text-sm font-semibold text-foreground", children: preview.where ?? "Slack" }),
-      /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex gap-3", children: [
-        /* @__PURE__ */ jsx2("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-foreground", children: initial(account) }),
-        /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx2("p", { className: "text-sm font-semibold text-foreground", children: account ?? "Your account" }),
-          /* @__PURE__ */ jsx2("p", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-foreground", children: preview.text })
+    return /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
+      /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold text-foreground", children: preview.where ?? "Slack" }),
+      /* @__PURE__ */ jsxs3("div", { className: "mt-2 flex gap-3", children: [
+        /* @__PURE__ */ jsx3("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-foreground", children: initial(account) }),
+        /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold text-foreground", children: account ?? "Your account" }),
+          /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-foreground", children: linkedText(preview.text) })
         ] })
       ] })
     ] });
   }
   const x = preview.channel === "x";
   const length = [...preview.text].length;
-  return /* @__PURE__ */ jsxs2(Panel, { className: "px-4 py-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsx2("span", { className: `flex size-10 shrink-0 items-center justify-center rounded-full text-base font-semibold ${x ? "bg-foreground text-background" : "bg-[#0a66c2] text-white"}`, children: initial(account) }),
-      /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs2("p", { className: "flex flex-wrap items-baseline gap-x-1.5 text-sm", children: [
-          /* @__PURE__ */ jsx2("span", { className: "font-semibold text-foreground", children: account ?? "Your account" }),
-          /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: x ? "\xB7 now" : "\xB7 Post \xB7 Anyone" })
+  return /* @__PURE__ */ jsxs3(Panel, { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx3("span", { className: `flex size-10 shrink-0 items-center justify-center rounded-full text-base font-semibold ${x ? "bg-foreground text-background" : "bg-[#0a66c2] text-white"}`, children: initial(account) }),
+      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs3("p", { className: "flex flex-wrap items-baseline gap-x-1.5 text-sm", children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-semibold text-foreground", children: account ?? "Your account" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: x ? "\xB7 now" : "\xB7 Post \xB7 Anyone" })
         ] }),
-        /* @__PURE__ */ jsx2("p", { className: `mt-1 whitespace-pre-wrap break-words text-foreground ${x ? "text-base leading-6" : "text-sm leading-6"}`, children: preview.text }),
-        preview.link && /* @__PURE__ */ jsx2("div", { className: "mt-3 overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxs2("div", { className: "px-3 py-2", children: [
-          /* @__PURE__ */ jsx2("p", { className: "truncate text-sm text-muted-foreground", children: preview.link.url.replace(/^https?:\/\//, "") }),
-          preview.link.title && /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-semibold text-foreground", children: preview.link.title }),
-          preview.link.description && /* @__PURE__ */ jsx2("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: preview.link.description })
+        /* @__PURE__ */ jsx3("p", { className: `mt-1 whitespace-pre-wrap break-words text-foreground ${x ? "text-base leading-6" : "text-sm leading-6"}`, children: linkedText(preview.text) }),
+        preview.images && preview.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "mt-3 grid grid-cols-2 gap-0.5 overflow-hidden rounded-xl border border-border", children: preview.images.map((image, index) => /* @__PURE__ */ jsx3("div", { className: `${preview.images.length === 1 ? "col-span-2 aspect-[16/9]" : "aspect-square"} overflow-hidden bg-muted`, children: embeddedPreviewImage(image.url) ? /* @__PURE__ */ jsx3("img", { src: image.url, alt: image.alt ?? `Post image ${index + 1}`, className: "size-full object-cover" }) : /* @__PURE__ */ jsx3("p", { className: "p-3 text-sm text-muted-foreground", children: "Image not embedded in this preview" }) }, index)) }),
+        preview.link && /* @__PURE__ */ jsx3("div", { className: "mt-3 overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxs3("div", { className: "px-3 py-2", children: [
+          /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-muted-foreground", children: preview.link.url.replace(/^https?:\/\//, "") }),
+          preview.link.title && /* @__PURE__ */ jsx3("p", { className: "truncate text-sm font-semibold text-foreground", children: preview.link.title }),
+          preview.link.description && /* @__PURE__ */ jsx3("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: preview.link.description })
         ] }) })
       ] })
     ] }),
-    x && /* @__PURE__ */ jsxs2("p", { className: `mt-2 text-right text-sm tabular-nums ${length > 280 ? "text-[var(--surface-danger-text)]" : "text-muted-foreground"}`, children: [
+    /* @__PURE__ */ jsxs3("p", { className: "mt-2 text-right text-sm tabular-nums text-muted-foreground", children: [
       length,
-      " / 280"
+      " characters"
     ] })
   ] });
 }
 function PaymentPreview({ preview }) {
-  return /* @__PURE__ */ jsxs2(Panel, { className: "px-4 py-3", children: [
-    /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: preview.label.charAt(0).toUpperCase() + preview.label.slice(1) }),
-    preview.amount !== void 0 && /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-2xl font-semibold tabular-nums text-foreground", children: formatMinorAmount(preview.amount, preview.currency) }),
-    /* @__PURE__ */ jsxs2("div", { className: "mt-2 space-y-1 text-sm", children: [
-      preview.customer && /* @__PURE__ */ jsxs2("p", { className: "text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs3(Panel, { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: preview.label.charAt(0).toUpperCase() + preview.label.slice(1) }),
+    preview.amount !== void 0 && /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-2xl font-semibold tabular-nums text-foreground", children: formatMinorAmount(preview.amount, preview.currency) }),
+    /* @__PURE__ */ jsxs3("div", { className: "mt-2 space-y-1 text-sm", children: [
+      preview.customer && /* @__PURE__ */ jsxs3("p", { className: "text-muted-foreground", children: [
         "Customer ",
-        /* @__PURE__ */ jsx2("span", { className: `text-foreground ${preview.customer.startsWith("cus_") ? "font-mono" : ""}`, children: preview.customer })
+        /* @__PURE__ */ jsx3("span", { className: `text-foreground ${preview.customer.startsWith("cus_") ? "font-mono" : ""}`, children: preview.customer })
       ] }),
-      preview.description && /* @__PURE__ */ jsx2("p", { className: "text-foreground", children: preview.description })
+      preview.description && /* @__PURE__ */ jsx3("p", { className: "text-foreground", children: preview.description })
     ] })
   ] });
 }
 function SpeechPreview({ preview }) {
-  return /* @__PURE__ */ jsxs2(Panel, { className: "px-4 py-3", children: [
-    /* @__PURE__ */ jsx2("blockquote", { className: "border-l-2 border-[var(--accent-text)] pl-3 text-base leading-7 text-foreground", children: preview.text }),
-    (preview.voice || preview.seconds) && /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-      preview.voice && /* @__PURE__ */ jsxs2(Chip, { children: [
+  return /* @__PURE__ */ jsxs3(Panel, { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsx3("blockquote", { className: "border-l-2 border-[var(--accent-text)] pl-3 text-base leading-7 text-foreground", children: preview.text }),
+    (preview.voice || preview.seconds) && /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+      preview.voice && /* @__PURE__ */ jsxs3(Chip, { children: [
         "Voice: ",
         preview.voice
       ] }),
-      preview.seconds && /* @__PURE__ */ jsxs2(Chip, { children: [
+      preview.seconds && /* @__PURE__ */ jsxs3(Chip, { children: [
         "About ",
         preview.seconds,
         " s"
@@ -238,97 +314,245 @@ function SpeechPreview({ preview }) {
   ] });
 }
 function CallPreview({ preview }) {
-  return /* @__PURE__ */ jsxs2(Panel, { className: "flex gap-3 px-4 py-3", children: [
-    /* @__PURE__ */ jsx2("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx2(Phone, { "aria-hidden": true, className: "size-5 text-foreground" }) }),
-    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 space-y-1 text-sm", children: [
-      /* @__PURE__ */ jsx2("p", { className: "text-base font-semibold tabular-nums text-foreground", children: preview.to ?? "Unknown number" }),
-      preview.from && /* @__PURE__ */ jsxs2("p", { className: "text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs3(Panel, { className: "flex gap-3 px-4 py-3", children: [
+    /* @__PURE__ */ jsx3("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx3(Phone, { "aria-hidden": true, className: "size-5 text-foreground" }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 space-y-1 text-sm", children: [
+      /* @__PURE__ */ jsx3("p", { className: "text-base font-semibold tabular-nums text-foreground", children: preview.to ?? "Unknown number" }),
+      preview.from && /* @__PURE__ */ jsxs3("p", { className: "text-muted-foreground", children: [
         "From ",
-        /* @__PURE__ */ jsx2("span", { className: "tabular-nums text-foreground", children: preview.from })
+        /* @__PURE__ */ jsx3("span", { className: "tabular-nums text-foreground", children: preview.from })
       ] }),
-      preview.purpose && /* @__PURE__ */ jsx2("p", { className: "leading-6 text-foreground", children: preview.purpose })
+      preview.purpose && /* @__PURE__ */ jsx3("p", { className: "leading-6 text-foreground", children: preview.purpose })
     ] })
   ] });
 }
 function EventPreview({ preview }) {
   const start = preview.start ? new Date(preview.start) : null;
   const valid = start && !Number.isNaN(start.getTime());
-  return /* @__PURE__ */ jsxs2(Panel, { className: "flex gap-4 px-4 py-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex w-14 shrink-0 flex-col items-center overflow-hidden rounded-lg border border-border text-center", children: [
-      /* @__PURE__ */ jsx2("span", { className: "w-full bg-[var(--surface-danger-bg)] py-0.5 text-sm font-semibold uppercase text-[var(--surface-danger-text)]", children: valid ? start.toLocaleDateString(void 0, { month: "short" }) : /* @__PURE__ */ jsx2(CalendarDays, { "aria-hidden": true, className: "mx-auto size-4" }) }),
-      /* @__PURE__ */ jsx2("span", { className: "py-1 text-xl font-semibold tabular-nums text-foreground", children: valid ? start.getDate() : "\u2013" })
+  return /* @__PURE__ */ jsxs3(Panel, { className: "flex gap-4 px-4 py-3", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex w-14 shrink-0 flex-col items-center overflow-hidden rounded-lg border border-border text-center", children: [
+      /* @__PURE__ */ jsx3("span", { className: "w-full bg-[var(--surface-danger-bg)] py-0.5 text-sm font-semibold uppercase text-[var(--surface-danger-text)]", children: valid ? start.toLocaleDateString(void 0, { month: "short" }) : /* @__PURE__ */ jsx3(CalendarDays, { "aria-hidden": true, className: "mx-auto size-4" }) }),
+      /* @__PURE__ */ jsx3("span", { className: "py-1 text-xl font-semibold tabular-nums text-foreground", children: valid ? start.getDate() : "\u2013" })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 space-y-1 text-sm", children: [
-      /* @__PURE__ */ jsx2("p", { className: "text-base font-semibold text-foreground", children: preview.title ?? "Untitled event" }),
-      preview.start && /* @__PURE__ */ jsx2("p", { className: "text-foreground", children: formatWhen(preview.start, preview.end) }),
-      preview.location && /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx2(MapPin, { "aria-hidden": true, className: "size-4 shrink-0" }),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 space-y-1 text-sm", children: [
+      /* @__PURE__ */ jsx3("p", { className: "text-base font-semibold text-foreground", children: preview.title ?? "Untitled event" }),
+      preview.start && /* @__PURE__ */ jsx3("p", { className: "text-foreground", children: formatWhen(preview.start, preview.end) }),
+      preview.location && /* @__PURE__ */ jsxs3("p", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3(MapPin, { "aria-hidden": true, className: "size-4 shrink-0" }),
         preview.location
       ] }),
-      preview.attendees.length > 0 && /* @__PURE__ */ jsxs2("p", { className: "flex items-start gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx2(Users, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }),
-        /* @__PURE__ */ jsx2("span", { className: "break-words", children: preview.attendees.join(", ") })
+      preview.attendees.length > 0 && /* @__PURE__ */ jsxs3("p", { className: "flex items-start gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3(Users, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }),
+        /* @__PURE__ */ jsx3("span", { className: "break-words", children: preview.attendees.join(", ") })
       ] }),
-      preview.description && /* @__PURE__ */ jsx2("p", { className: "line-clamp-3 leading-6 text-foreground", children: preview.description })
+      preview.description && /* @__PURE__ */ jsx3("p", { className: "line-clamp-3 leading-6 text-foreground", children: preview.description })
     ] })
   ] });
 }
 function HubActionPreviewView({ preview, account }) {
   switch (preview.kind) {
     case "pull-request":
-      return /* @__PURE__ */ jsx2(PullRequestPreview, { preview });
+      return /* @__PURE__ */ jsx3(PullRequestPreview, { preview });
     case "files":
-      return preview.files.length > 0 ? /* @__PURE__ */ jsx2(ApprovalDiffSummary, { files: preview.files }) : null;
+      return preview.files.length > 0 ? /* @__PURE__ */ jsx3(ApprovalDiffSummary, { files: preview.files }) : null;
     case "commit":
-      return /* @__PURE__ */ jsxs2(Panel, { className: "px-3 py-3", children: [
-        /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx2(GitCommitHorizontal, { "aria-hidden": true, className: "size-4 shrink-0" }),
+      return /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
+        /* @__PURE__ */ jsxs3("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx3(GitCommitHorizontal, { "aria-hidden": true, className: "size-4 shrink-0" }),
           preview.repository ?? "Commit"
         ] }),
-        preview.message && /* @__PURE__ */ jsx2("p", { className: "mt-2 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.message }),
-        /* @__PURE__ */ jsx2("div", { className: "mt-2", children: /* @__PURE__ */ jsx2(HubFieldList, { fields: [
+        preview.message && /* @__PURE__ */ jsx3("p", { className: "mt-2 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.message }),
+        /* @__PURE__ */ jsx3("div", { className: "mt-2", children: /* @__PURE__ */ jsx3(HubFieldList, { fields: [
           ...preview.tree ? [{ label: "Tree", value: preview.tree.slice(0, 7), mono: true }] : [],
           ...preview.parents.map((parent) => ({ label: "Parent", value: parent.slice(0, 7), mono: true }))
         ] }) })
       ] });
     case "branch":
-      return /* @__PURE__ */ jsxs2(Panel, { className: "flex flex-wrap items-center gap-2 px-3 py-3 text-sm", children: [
-        /* @__PURE__ */ jsx2(GitBranch, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
-        preview.branch && /* @__PURE__ */ jsx2(Chip, { mono: true, children: preview.branch }),
-        preview.sha && /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground", children: [
+      return /* @__PURE__ */ jsxs3(Panel, { className: "flex flex-wrap items-center gap-2 px-3 py-3 text-sm", children: [
+        /* @__PURE__ */ jsx3(GitBranch, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
+        preview.branch && /* @__PURE__ */ jsx3(Chip, { mono: true, children: preview.branch }),
+        preview.sha && /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
           "at ",
-          /* @__PURE__ */ jsx2("span", { className: "font-mono text-foreground", children: preview.sha.slice(0, 7) })
+          /* @__PURE__ */ jsx3("span", { className: "font-mono text-foreground", children: preview.sha.slice(0, 7) })
         ] })
       ] });
     case "issue":
-      return /* @__PURE__ */ jsxs2(Panel, { className: "px-3 py-3", children: [
-        preview.verdict && /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium capitalize text-foreground", children: preview.verdict }),
-        preview.title && /* @__PURE__ */ jsx2("p", { className: "text-base font-semibold leading-6 text-foreground", children: preview.title }),
-        preview.body && /* @__PURE__ */ jsx2("p", { className: "mt-1 line-clamp-6 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.body })
+      return /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
+        preview.verdict && /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium capitalize text-foreground", children: preview.verdict }),
+        preview.title && /* @__PURE__ */ jsx3("p", { className: "text-base font-semibold leading-6 text-foreground", children: preview.title }),
+        preview.body && /* @__PURE__ */ jsx3("p", { className: "mt-1 line-clamp-6 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.body })
       ] });
     case "email":
-      return /* @__PURE__ */ jsx2(EmailPreview, { preview, account });
+      return /* @__PURE__ */ jsx3(EmailPreview, { preview, account });
     case "post":
-      return /* @__PURE__ */ jsx2(PostPreview, { preview, account });
+      return /* @__PURE__ */ jsx3(PostPreview, { preview, account });
+    case "ad":
+      return /* @__PURE__ */ jsxs3(Panel, { className: "overflow-hidden", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-1 px-4 py-3", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold text-foreground", children: preview.advertiser ?? account ?? "Advertiser unavailable" }),
+          /* @__PURE__ */ jsxs3("p", { className: "text-sm text-muted-foreground", children: [
+            "Sponsored \xB7 ",
+            preview.placement
+          ] }),
+          preview.text && /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-foreground", children: preview.text })
+        ] }),
+        preview.image && (embeddedPreviewImage(preview.image) ? /* @__PURE__ */ jsx3("img", { src: preview.image, alt: preview.headline ?? "Ad creative", className: "aspect-[1.91/1] w-full object-cover" }) : /* @__PURE__ */ jsx3("p", { className: "bg-muted p-4 text-sm text-muted-foreground", children: "Creative image not embedded in this preview" })),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-3 bg-muted/40 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+            preview.destination && /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-muted-foreground", children: preview.destination }),
+            preview.headline && /* @__PURE__ */ jsx3("p", { className: "break-words font-semibold text-foreground", children: preview.headline })
+          ] }),
+          preview.callToAction && /* @__PURE__ */ jsx3("span", { className: "rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground", children: preview.callToAction })
+        ] })
+      ] });
+    case "page":
+      return /* @__PURE__ */ jsxs3(Panel, { className: "overflow-hidden", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "border-b border-border px-4 py-2", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium text-foreground", children: preview.title ?? "Page preview" }),
+          preview.url && /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-muted-foreground", children: preview.url })
+        ] }),
+        embeddedPreviewImage(preview.screenshot) ? /* @__PURE__ */ jsx3("img", { src: preview.screenshot, alt: preview.title ?? "Page screenshot", className: "h-auto w-full" }) : /* @__PURE__ */ jsx3("p", { className: "p-4 text-sm text-muted-foreground", children: "A captured screenshot is needed to preview this page." })
+      ] });
     case "payment":
-      return /* @__PURE__ */ jsx2(PaymentPreview, { preview });
+      return /* @__PURE__ */ jsx3(PaymentPreview, { preview });
     case "speech":
-      return /* @__PURE__ */ jsx2(SpeechPreview, { preview });
+      return /* @__PURE__ */ jsx3(SpeechPreview, { preview });
     case "call":
-      return /* @__PURE__ */ jsx2(CallPreview, { preview });
+      return /* @__PURE__ */ jsx3(CallPreview, { preview });
     case "event":
-      return /* @__PURE__ */ jsx2(EventPreview, { preview });
+      return /* @__PURE__ */ jsx3(EventPreview, { preview });
     case "fields":
-      return preview.fields.length > 0 ? /* @__PURE__ */ jsx2(Panel, { className: "px-3 py-3", children: /* @__PURE__ */ jsx2(HubFieldList, { fields: preview.fields }) }) : null;
+      return preview.fields.length > 0 ? /* @__PURE__ */ jsx3(Panel, { className: "px-3 py-3", children: /* @__PURE__ */ jsx3(HubFieldList, { fields: preview.fields }) }) : null;
+  }
+}
+
+// src/hub-approvals-react/feedback.tsx
+import { useEffect as useEffect2, useId, useState as useState3 } from "react";
+import { Button as Button2, Input, Label, Textarea } from "@tangle-network/ui/primitives";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function HubPreviewFeedback({ item, onFeedback, drafts }) {
+  const id = useId();
+  const saved = item.feedback;
+  const original = item.input && typeof item.input === "object" && !Array.isArray(item.input) ? item.input : {};
+  const prior = saved?.editedInput && typeof saved.editedInput === "object" && !Array.isArray(saved.editedInput) ? saved.editedInput : original;
+  const kind = presentHubAction(item).preview.kind;
+  const field = kind === "email" ? typeof original.html === "string" ? "html" : typeof original.body === "string" ? "body" : "text" : typeof original.commentary === "string" ? "commentary" : "text";
+  const draft = drafts?.get(item.id);
+  const [score, setScore] = useState3(draft?.score ?? (saved ? String(saved.score) : ""));
+  const [comment, setComment] = useState3(draft?.comment ?? saved?.comment ?? "");
+  const [editing, setEditing] = useState3(draft?.editing ?? false);
+  const [edited, setEdited] = useState3(draft?.edited ?? saved?.editedInput !== void 0);
+  const [subject, setSubject] = useState3(draft?.subject ?? String(prior.subject ?? ""));
+  const [body, setBody] = useState3(draft?.body ?? String(prior[field] ?? ""));
+  const [payload, setPayload] = useState3(draft?.payload ?? JSON.stringify(prior, null, 2));
+  const [busy, setBusy] = useState3(false);
+  const [status, setStatus] = useState3((draft ? draft.saved : saved) ? "Feedback saved" : "");
+  const [error, setError] = useState3("");
+  useEffect2(() => {
+    drafts?.set(item.id, { score, comment, editing, edited, subject, body, payload, saved: status === "Feedback saved" });
+  }, [drafts, item.id, score, comment, editing, edited, subject, body, payload, status]);
+  async function save() {
+    if (busy) return;
+    if (score.trim() === "" || !Number.isInteger(Number(score)) || Number(score) < 0 || Number(score) > 100) {
+      setError("Enter a score from 0 to 100.");
+      return;
+    }
+    setBusy(true);
+    setError("");
+    setStatus("");
+    try {
+      const editedInput = edited ? kind === "email" ? { ...original, subject, [field]: body } : kind === "post" ? { ...original, [field]: body } : JSON.parse(payload) : saved?.editedInput;
+      await onFeedback(item, {
+        score: Number(score),
+        comment,
+        ...editedInput !== void 0 && JSON.stringify(editedInput) !== JSON.stringify(item.input) ? { editedInput } : {}
+      });
+      setStatus("Feedback saved");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Feedback could not be saved. Your edits are kept here.");
+    } finally {
+      setBusy(false);
+    }
   }
+  return /* @__PURE__ */ jsxs4("form", { "aria-label": "Preview feedback", className: "space-y-3 border-t border-border pt-3", onSubmit: (event) => {
+    event.preventDefault();
+    void save();
+  }, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-end gap-3", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "w-36 space-y-1", children: [
+        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-score`, children: "Score (0\u2013100)" }),
+        /* @__PURE__ */ jsx4(
+          Input,
+          {
+            id: `${id}-score`,
+            type: "number",
+            inputMode: "numeric",
+            min: 0,
+            max: 100,
+            step: 1,
+            required: true,
+            value: score,
+            placeholder: "Unscored",
+            disabled: busy,
+            onChange: (event) => {
+              setScore(event.target.value);
+              setStatus("");
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx4(Button2, { type: "button", variant: "outline", "aria-expanded": editing, disabled: busy, onClick: () => {
+        setEditing((value) => !value);
+        setStatus("");
+      }, children: "Edit to teach" })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-comment`, children: "Comment" }),
+      /* @__PURE__ */ jsx4(Textarea, { id: `${id}-comment`, value: comment, rows: 2, disabled: busy, onChange: (event) => {
+        setComment(event.target.value);
+        setStatus("");
+      } })
+    ] }),
+    editing && /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: "Your edit is saved as a teaching example. Live approval applies to the original held payload." }),
+      kind === "email" && /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-subject`, children: "Subject" }),
+        /* @__PURE__ */ jsx4(Input, { id: `${id}-subject`, value: subject, disabled: busy, onChange: (event) => {
+          setSubject(event.target.value);
+          setEdited(true);
+          setStatus("");
+        } })
+      ] }),
+      kind === "email" || kind === "post" ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-body`, children: kind === "email" ? "Body" : "Post text" }),
+        /* @__PURE__ */ jsx4(Textarea, { id: `${id}-body`, value: body, rows: 6, disabled: busy, onChange: (event) => {
+          setBody(event.target.value);
+          setEdited(true);
+          setStatus("");
+        } })
+      ] }) : /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-payload`, children: "Payload" }),
+        /* @__PURE__ */ jsx4(Textarea, { id: `${id}-payload`, value: payload, rows: 6, disabled: busy, onChange: (event) => {
+          setPayload(event.target.value);
+          setEdited(true);
+          setStatus("");
+        } })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx4("p", { role: "alert", className: "text-sm text-[var(--surface-danger-text)]", children: error }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx4(Button2, { type: "submit", variant: "outline", disabled: busy, children: busy ? "Saving feedback\u2026" : "Save feedback" }),
+      /* @__PURE__ */ jsx4("p", { role: "status", className: "text-sm text-muted-foreground", children: status })
+    ] })
+  ] });
 }
 
 // src/hub-approvals-react/dock.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var DONE_VISIBLE_MS = 6e3;
 function useNow(intervalMs) {
-  const [now, setNow] = useState2(() => Date.now());
-  useEffect(() => {
+  const [now, setNow] = useState4(() => Date.now());
+  useEffect3(() => {
     const timer = setInterval(() => setNow(Date.now()), intervalMs);
     return () => clearInterval(timer);
   }, [intervalMs]);
@@ -337,48 +561,50 @@ function useNow(intervalMs) {
 function Progress({ item }) {
   const provider = presentHubAction(item).provider.name;
   if (item.phase === "queued" || item.phase === "running") {
-    return /* @__PURE__ */ jsxs3("p", { role: "status", className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
-      /* @__PURE__ */ jsx3(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--surface-info-text)]" }),
+    return /* @__PURE__ */ jsxs5("p", { role: "status", className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+      /* @__PURE__ */ jsx5(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--surface-info-text)]" }),
       item.phase === "queued" ? "Approved. It runs when the agent\u2019s turn finishes\u2026" : `Running on ${provider}\u2026`
     ] });
   }
   if (item.phase === "done") {
     const receipt = hubActionReceipt(item);
-    return /* @__PURE__ */ jsxs3("p", { role: "status", className: "flex min-w-0 items-center gap-2 text-sm font-medium text-foreground", children: [
-      /* @__PURE__ */ jsx3(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-[var(--surface-success-text)]" }),
-      receipt.href ? /* @__PURE__ */ jsxs3("a", { href: receipt.href, target: "_blank", rel: "noreferrer", className: "inline-flex min-w-0 items-center gap-1 hover:underline", children: [
-        /* @__PURE__ */ jsx3("span", { className: "truncate", children: receipt.title }),
-        /* @__PURE__ */ jsx3(ExternalLink, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })
-      ] }) : /* @__PURE__ */ jsx3("span", { className: "truncate", children: receipt.title })
+    return /* @__PURE__ */ jsxs5("p", { role: "status", className: "flex min-w-0 items-center gap-2 text-sm font-medium text-foreground", children: [
+      /* @__PURE__ */ jsx5(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-[var(--surface-success-text)]" }),
+      receipt.href ? /* @__PURE__ */ jsxs5("a", { href: receipt.href, target: "_blank", rel: "noreferrer", className: "inline-flex min-w-0 items-center gap-1 hover:underline", children: [
+        /* @__PURE__ */ jsx5("span", { className: "truncate", children: receipt.title }),
+        /* @__PURE__ */ jsx5(ExternalLink, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })
+      ] }) : /* @__PURE__ */ jsx5("span", { className: "truncate", children: receipt.title })
     ] });
   }
   if (item.phase === "unknown") {
-    return /* @__PURE__ */ jsxs3("p", { role: "alert", className: "break-words text-sm text-[var(--surface-warning-text)]", children: [
-      /* @__PURE__ */ jsx3("span", { className: "font-medium", children: "May have run." }),
+    return /* @__PURE__ */ jsxs5("p", { role: "alert", className: "break-words text-sm text-[var(--surface-warning-text)]", children: [
+      /* @__PURE__ */ jsx5("span", { className: "font-medium", children: "May have run." }),
       " ",
       HUB_APPROVAL_UNKNOWN_WARNING
     ] });
   }
   if (item.phase === "failed") {
-    return /* @__PURE__ */ jsxs3("p", { role: "alert", className: "break-words text-sm text-[var(--surface-danger-text)]", children: [
+    return /* @__PURE__ */ jsxs5("p", { role: "alert", className: "break-words text-sm text-[var(--surface-danger-text)]", children: [
       hubActionReceipt(item).title,
       item.error ? `: ${item.error}` : "."
     ] });
   }
   return null;
 }
-function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, className = "" }) {
+function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, onFeedback, className = "" }) {
   const now = useNow(3e4);
   const watched = useRef(/* @__PURE__ */ new Map());
-  const [settled, setSettled] = useState2({});
-  const [dismissed, setDismissed] = useState2(/* @__PURE__ */ new Set());
-  const [submitting, setSubmitting] = useState2(null);
-  const [error, setError] = useState2(null);
-  const [activeId, setActiveId] = useState2(null);
-  const [collapsed, setCollapsed] = useState2(false);
-  const [permissionsOpen, setPermissionsOpen] = useState2(false);
-  const [scope, setScope] = useState2(null);
-  useEffect(() => {
+  const [settled, setSettled] = useState4({});
+  const [dismissed, setDismissed] = useState4(/* @__PURE__ */ new Set());
+  const [submitting, setSubmitting] = useState4(null);
+  const [error, setError] = useState4(null);
+  const [activeId, setActiveId] = useState4(null);
+  const [collapsed, setCollapsed] = useState4(false);
+  const [permissionsOpen, setPermissionsOpen] = useState4(false);
+  const [scope, setScope] = useState4(null);
+  const feedbackDrafts = useRef(/* @__PURE__ */ new Map());
+  const [feedbackSaving, setFeedbackSaving] = useState4(false);
+  useEffect3(() => {
     const finishedNow = {};
     for (const item of items) {
       const before = watched.current.get(item.id);
@@ -388,7 +614,7 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, classN
     }
     if (Object.keys(finishedNow).length > 0) setSettled((current) => ({ ...current, ...finishedNow }));
   }, [items]);
-  useEffect(() => {
+  useEffect3(() => {
     const doneIds = Object.entries(settled).filter(([id]) => items.find((item) => item.id === id)?.phase === "done");
     if (doneIds.length === 0) return;
     const oldest = Math.min(...doneIds.map(([, at]) => at));
@@ -399,26 +625,26 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, classN
     return () => clearTimeout(timer);
   }, [settled, items]);
   const queue = useMemo(() => items.filter((item) => !dismissed.has(item.id) && (HUB_APPROVAL_OPEN_PHASES.has(item.phase) || HUB_APPROVAL_ACTIVE_PHASES.has(item.phase) || item.phase === "unknown" || item.id in settled || submitting?.id === item.id)), [items, dismissed, settled, submitting]);
-  useEffect(() => {
-    if (focusId && queue.some((item) => item.id === focusId)) {
+  useEffect3(() => {
+    if (!feedbackSaving && focusId && queue.some((item) => item.id === focusId)) {
       setActiveId(focusId);
       setCollapsed(false);
     }
-  }, [focusId, queue]);
+  }, [focusId, queue, feedbackSaving]);
   const activeIndex = Math.max(0, queue.findIndex((item) => item.id === activeId));
   const active = queue[activeIndex];
-  useEffect(() => {
+  useEffect3(() => {
     if (!active || activeId === active.id) return;
     setActiveId(active.id);
   }, [active, activeId]);
-  useEffect(() => {
+  useEffect3(() => {
     setPermissionsOpen(false);
     setScope(null);
   }, [active?.id]);
   if (!active) return null;
   const presentation = presentHubAction(active);
   const waitingCount = queue.filter((item) => HUB_APPROVAL_OPEN_PHASES.has(item.phase)).length;
-  const choices = permissions?.(active) ?? null;
+  const choices = active.executionMode === "dry-run" ? null : permissions?.(active) ?? null;
   const scopes = choices && "scopes" in choices ? choices.scopes : [];
   const chosenScope = scope ?? scopes[0]?.id ?? null;
   const busy = submitting?.id === active.id;
@@ -438,104 +664,115 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, classN
       setSubmitting(null);
     }
   }
-  const card = /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3 px-4 pt-3", children: [
-      /* @__PURE__ */ jsx3(HubProviderMark, { providerId: presentation.provider.id, name: presentation.provider.name, size: 28 }),
-      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx3("h3", { className: "line-clamp-2 break-words text-base font-semibold leading-6 text-foreground", title: presentation.title, children: presentation.title }),
-        /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-muted-foreground", children: subtitle })
+  const card = /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-3 px-4 pt-3", children: [
+      /* @__PURE__ */ jsx5(HubProviderMark, { providerId: presentation.provider.id, name: presentation.provider.name, size: 28 }),
+      /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx5("h3", { className: "line-clamp-2 break-words text-base font-semibold leading-6 text-foreground", title: presentation.title, children: presentation.title }),
+        /* @__PURE__ */ jsx5("p", { className: "truncate text-sm text-muted-foreground", children: subtitle })
       ] }),
-      /* @__PURE__ */ jsx3(
-        Button2,
+      /* @__PURE__ */ jsx5(
+        Button3,
         {
           variant: "ghost",
           size: "icon-sm",
           "aria-label": collapsed ? "Show the request" : "Hide the preview",
           "aria-expanded": !collapsed,
+          disabled: feedbackSaving,
           onClick: () => setCollapsed((value) => !value),
-          children: /* @__PURE__ */ jsx3(ChevronDown, { className: `transition-transform ${collapsed ? "-rotate-90" : ""}` })
+          children: /* @__PURE__ */ jsx5(ChevronDown, { className: `transition-transform ${collapsed ? "-rotate-90" : ""}` })
         }
       )
     ] }),
-    !collapsed && /* @__PURE__ */ jsxs3("div", { className: "max-h-48 space-y-3 overflow-y-auto px-4 pt-3 sm:max-h-80", children: [
-      active.bundle?.steps && active.bundle.steps.length > 0 && /* @__PURE__ */ jsx3("ol", { className: "space-y-1 text-sm", "aria-label": "Steps this approval covers", children: active.bundle.steps.map((stepItem, index) => /* @__PURE__ */ jsxs3("li", { className: `flex items-center gap-2 ${stepItem.state === "current" ? "font-medium text-foreground" : "text-muted-foreground"}`, children: [
-        /* @__PURE__ */ jsx3("span", { className: `flex size-5 shrink-0 items-center justify-center rounded-full border text-sm tabular-nums ${stepItem.state === "done" ? "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "border-border"}`, children: stepItem.state === "done" ? /* @__PURE__ */ jsx3(Check, { "aria-hidden": true, className: "size-3.5" }) : index + 1 }),
+    !collapsed && /* @__PURE__ */ jsxs5("div", { className: "max-h-[55vh] space-y-3 overflow-y-auto px-4 pt-3 sm:max-h-[60vh]", children: [
+      active.bundle?.steps && active.bundle.steps.length > 0 && /* @__PURE__ */ jsx5("ol", { className: "space-y-1 text-sm", "aria-label": "Steps this approval covers", children: active.bundle.steps.map((stepItem, index) => /* @__PURE__ */ jsxs5("li", { className: `flex items-center gap-2 ${stepItem.state === "current" ? "font-medium text-foreground" : "text-muted-foreground"}`, children: [
+        /* @__PURE__ */ jsx5("span", { className: `flex size-5 shrink-0 items-center justify-center rounded-full border text-sm tabular-nums ${stepItem.state === "done" ? "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "border-border"}`, children: stepItem.state === "done" ? /* @__PURE__ */ jsx5(Check, { "aria-hidden": true, className: "size-3.5" }) : index + 1 }),
         stepItem.label
       ] }, index)) }),
-      /* @__PURE__ */ jsx3(HubActionPreviewView, { preview: presentation.preview, account: active.account }),
-      /* @__PURE__ */ jsx3(HubRawDetails, { sections: [{ label: "Call", value: { action: active.actionPath, input: active.input } }] })
+      /* @__PURE__ */ jsx5(HubActionPreviewView, { preview: presentation.preview, account: active.account }),
+      /* @__PURE__ */ jsx5(HubRawDetails, { sections: [{ label: "Call", value: { action: active.actionPath, input: active.input } }] }),
+      onFeedback && /* @__PURE__ */ jsx5(HubPreviewFeedback, { item: active, drafts: feedbackDrafts.current, onFeedback: async (item, feedback) => {
+        setFeedbackSaving(true);
+        try {
+          await onFeedback(item, feedback);
+        } finally {
+          setFeedbackSaving(false);
+        }
+      } }, active.id)
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "space-y-3 px-4 pb-4 pt-3", children: [
-      busy && submitting && !HUB_APPROVAL_ACTIVE_PHASES.has(active.phase) && active.phase === "waiting" && /* @__PURE__ */ jsxs3("p", { role: "status", className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
-        /* @__PURE__ */ jsx3(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--surface-info-text)]" }),
+    /* @__PURE__ */ jsxs5("div", { className: "space-y-3 px-4 pb-4 pt-3", children: [
+      busy && submitting && !HUB_APPROVAL_ACTIVE_PHASES.has(active.phase) && active.phase === "waiting" && /* @__PURE__ */ jsxs5("p", { role: "status", className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+        /* @__PURE__ */ jsx5(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--surface-info-text)]" }),
         submitting.label
       ] }),
-      /* @__PURE__ */ jsx3(Progress, { item: active }),
-      error?.id === active.id && active.phase === "waiting" && /* @__PURE__ */ jsx3("p", { role: "alert", className: "text-sm text-[var(--surface-danger-text)]", children: error.message }),
-      HUB_APPROVAL_OPEN_PHASES.has(active.phase) && active.wait && /* @__PURE__ */ jsx3(HubApprovalWaitNote, { wait: active.wait }),
-      active.phase === "blocked" && !active.wait && /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: "The workspace owner approves this request." }),
-      decidable && permissionsOpen && scopes.length > 0 && /* @__PURE__ */ jsxs3("fieldset", { className: "space-y-2 rounded-xl border border-border bg-muted/30 px-3 py-3", children: [
-        /* @__PURE__ */ jsx3("legend", { className: "sr-only", children: "Standing permission" }),
-        scopes.length > 1 && /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx5(Progress, { item: active }),
+      HUB_APPROVAL_OPEN_PHASES.has(active.phase) && active.executionMode === "dry-run" && /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "Dry run. This exact payload stays held until you approve this action live." }),
+      error?.id === active.id && active.phase === "waiting" && /* @__PURE__ */ jsx5("p", { role: "alert", className: "text-sm text-[var(--surface-danger-text)]", children: error.message }),
+      HUB_APPROVAL_OPEN_PHASES.has(active.phase) && active.wait && /* @__PURE__ */ jsx5(HubApprovalWaitNote, { wait: active.wait }),
+      active.phase === "blocked" && !active.wait && /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "The workspace owner approves this request." }),
+      decidable && permissionsOpen && scopes.length > 0 && /* @__PURE__ */ jsxs5("fieldset", { className: "space-y-2 rounded-xl border border-border bg-muted/30 px-3 py-3", children: [
+        /* @__PURE__ */ jsx5("legend", { className: "sr-only", children: "Standing permission" }),
+        scopes.length > 1 && /* @__PURE__ */ jsx5(
           RadioGroup,
           {
             "aria-label": "What the permission covers",
             value: chosenScope ?? void 0,
             onValueChange: setScope,
             className: "gap-1.5",
-            children: scopes.map((option) => /* @__PURE__ */ jsxs3("div", { className: "flex min-h-8 items-center gap-2", children: [
-              /* @__PURE__ */ jsx3(RadioGroupItem, { id: `hub-scope-${active.id}-${option.id}`, value: option.id }),
-              /* @__PURE__ */ jsx3(Label, { htmlFor: `hub-scope-${active.id}-${option.id}`, className: "cursor-pointer text-sm font-normal text-foreground", children: option.label })
+            children: scopes.map((option) => /* @__PURE__ */ jsxs5("div", { className: "flex min-h-8 items-center gap-2", children: [
+              /* @__PURE__ */ jsx5(RadioGroupItem, { id: `hub-scope-${active.id}-${option.id}`, value: option.id }),
+              /* @__PURE__ */ jsx5(Label2, { htmlFor: `hub-scope-${active.id}-${option.id}`, className: "cursor-pointer text-sm font-normal text-foreground", children: option.label })
             ] }, option.id))
           }
         ),
-        scopes.length === 1 && /* @__PURE__ */ jsx3("p", { className: "text-sm text-foreground", children: scopes[0]?.label }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ jsx3(Button2, { variant: "outline", onClick: () => chosenScope && void decide({ kind: "allow", duration: "24h", scope: chosenScope }, "Approving and allowing for 24 hours\u2026"), children: "Approve and allow for 24 hours" }),
-          /* @__PURE__ */ jsx3(Button2, { variant: "outline", onClick: () => chosenScope && void decide({ kind: "allow", duration: "always", scope: chosenScope }, "Approving and allowing from now on\u2026"), children: "Approve and always allow" })
+        scopes.length === 1 && /* @__PURE__ */ jsx5("p", { className: "text-sm text-foreground", children: scopes[0]?.label }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx5(Button3, { variant: "outline", onClick: () => chosenScope && void decide({ kind: "allow", duration: "24h", scope: chosenScope }, "Approving and allowing for 24 hours\u2026"), children: "Approve and allow for 24 hours" }),
+          /* @__PURE__ */ jsx5(Button3, { variant: "outline", onClick: () => chosenScope && void decide({ kind: "allow", duration: "always", scope: chosenScope }, "Approving and allowing from now on\u2026"), children: "Approve and always allow" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
-        decidable && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Button2, { onClick: () => void decide({ kind: "approve" }, "Approving\u2026"), children: "Approve" }),
-          /* @__PURE__ */ jsx3(Button2, { variant: "outline", onClick: () => void decide({ kind: "deny" }, "Denying\u2026"), children: "Deny" }),
-          scopes.length > 0 && /* @__PURE__ */ jsx3(Button2, { variant: "ghost", "aria-expanded": permissionsOpen, onClick: () => setPermissionsOpen((value) => !value), children: permissionsOpen ? "Fewer options" : "Allow future calls\u2026" })
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2", children: [
+        decidable && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5(Button3, { disabled: feedbackSaving, onClick: () => void decide({ kind: "approve" }, "Approving\u2026"), children: active.executionMode === "dry-run" ? "Approve live" : "Approve" }),
+          /* @__PURE__ */ jsx5(Button3, { disabled: feedbackSaving, variant: "outline", onClick: () => void decide({ kind: "deny" }, "Denying\u2026"), children: "Deny" }),
+          scopes.length > 0 && /* @__PURE__ */ jsx5(Button3, { variant: "ghost", "aria-expanded": permissionsOpen, onClick: () => setPermissionsOpen((value) => !value), children: permissionsOpen ? "Fewer options" : "Allow future calls\u2026" })
         ] }),
-        (active.phase === "failed" || active.phase === "unknown") && /* @__PURE__ */ jsxs3(Button2, { variant: "outline", onClick: () => setDismissed((current) => /* @__PURE__ */ new Set([...current, active.id])), children: [
-          /* @__PURE__ */ jsx3(X, { "aria-hidden": true }),
+        (active.phase === "failed" || active.phase === "unknown") && /* @__PURE__ */ jsxs5(Button3, { variant: "outline", onClick: () => setDismissed((current) => /* @__PURE__ */ new Set([...current, active.id])), children: [
+          /* @__PURE__ */ jsx5(X, { "aria-hidden": true }),
           " Dismiss"
         ] }),
-        /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
-        decidable && choices && "never" in choices && !active.wait && /* @__PURE__ */ jsx3("span", { className: "text-sm text-muted-foreground", children: choices.never }),
-        onOpen && /* @__PURE__ */ jsx3(Button2, { variant: "ghost", onClick: () => onOpen(active), children: "View in chat" })
+        /* @__PURE__ */ jsx5("span", { className: "flex-1" }),
+        decidable && choices && "never" in choices && !active.wait && /* @__PURE__ */ jsx5("span", { className: "text-sm text-muted-foreground", children: choices.never }),
+        onOpen && /* @__PURE__ */ jsx5(Button3, { variant: "ghost", onClick: () => onOpen(active), children: "View in chat" })
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "section",
     {
       "aria-label": active.phase === "unknown" ? "Action may have run" : "Waiting for your approval",
       "data-hub-approval-dock": active.id,
       className: `overflow-hidden rounded-2xl border border-[var(--surface-warning-border)] bg-card shadow-md ${className}`,
-      children: queue.length > 1 ? /* @__PURE__ */ jsxs3("div", { className: "max-h-[70vh] overflow-y-auto pt-2.5", children: [
-        /* @__PURE__ */ jsx3("p", { className: "px-4 pb-1.5 text-sm font-medium text-muted-foreground", "aria-live": "polite", children: waitingCount === 0 ? `${queue.length} requests` : waitingCount === 1 ? "1 request waiting" : `${waitingCount} requests waiting` }),
-        /* @__PURE__ */ jsx3("ul", { "aria-label": "Requests in this conversation", className: "divide-y divide-border border-t border-border", children: queue.map((item) => {
-          if (item.id === active.id) return /* @__PURE__ */ jsx3("li", { "aria-current": "true", children: card }, item.id);
+      children: queue.length > 1 ? /* @__PURE__ */ jsxs5("div", { className: "max-h-[70vh] overflow-y-auto pt-2.5", children: [
+        /* @__PURE__ */ jsx5("p", { className: "px-4 pb-1.5 text-sm font-medium text-muted-foreground", "aria-live": "polite", children: waitingCount === 0 ? `${queue.length} requests` : waitingCount === 1 ? "1 request waiting" : `${waitingCount} requests waiting` }),
+        /* @__PURE__ */ jsx5("ul", { "aria-label": "Requests in this conversation", className: "divide-y divide-border border-t border-border", children: queue.map((item) => {
+          if (item.id === active.id) return /* @__PURE__ */ jsx5("li", { "aria-current": "true", children: card }, item.id);
           const shown = presentHubAction(item);
-          return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(
-            Button2,
+          return /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs5(
+            Button3,
             {
               variant: "bare",
               "data-hub-approval-dock-row": item.id,
+              disabled: feedbackSaving,
               onClick: () => {
                 setActiveId(item.id);
                 setCollapsed(false);
               },
               className: "flex min-h-11 w-full items-center gap-2.5 px-4 text-left transition-colors hover:bg-muted/60",
               children: [
-                /* @__PURE__ */ jsx3(HubProviderMark, { providerId: shown.provider.id, name: shown.provider.name, size: 24 }),
-                /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: item.phase === "done" ? hubActionReceipt(item).title : shown.title }),
-                /* @__PURE__ */ jsx3("span", { className: item.phase === "waiting" ? "hidden sm:inline-flex" : "inline-flex", children: /* @__PURE__ */ jsx3(HubApprovalPhasePill, { phase: item.phase, label: openPhaseLabel(item) }) })
+                /* @__PURE__ */ jsx5(HubProviderMark, { providerId: shown.provider.id, name: shown.provider.name, size: 24 }),
+                /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: item.phase === "done" ? hubActionReceipt(item).title : shown.title }),
+                /* @__PURE__ */ jsx5("span", { className: item.phase === "waiting" ? "hidden sm:inline-flex" : "inline-flex", children: /* @__PURE__ */ jsx5(HubApprovalPhasePill, { phase: item.phase, label: openPhaseLabel(item) }) })
               ]
             }
           ) }, item.id);
@@ -546,10 +783,10 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, classN
 }
 
 // src/hub-approvals-react/list.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { ChevronRight as ChevronRight2, ShieldCheck } from "lucide-react";
-import { Button as Button3 } from "@tangle-network/ui/primitives";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Button as Button4 } from "@tangle-network/ui/primitives";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var GROUPS = [
   { id: "waiting", label: "Waiting", phases: ["waiting", "blocked"] },
   { id: "running", label: "Running", phases: ["queued", "running"] },
@@ -560,55 +797,55 @@ var GROUPS = [
   { id: "closed", label: "Denied or expired", phases: ["denied", "expired"] }
 ];
 function HubApprovalsList({ items, onSelect, selectedId, className = "" }) {
-  const [now, setNow] = useState3(() => Date.now());
-  useEffect2(() => {
+  const [now, setNow] = useState5(() => Date.now());
+  useEffect4(() => {
     const timer = setInterval(() => setNow(Date.now()), 3e4);
     return () => clearInterval(timer);
   }, []);
   const waiting = items.filter((item) => item.phase === "waiting" || item.phase === "blocked").length;
   const groups = GROUPS.map((group) => ({ ...group, items: items.filter((item) => group.phases.includes(item.phase)).slice().reverse() })).filter((group) => group.items.length > 0);
-  return /* @__PURE__ */ jsxs4("div", { className: `flex h-full min-h-0 flex-col ${className}`, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "shrink-0 border-b border-border px-4 py-3", children: [
-      /* @__PURE__ */ jsx4("h2", { className: "text-base font-semibold text-foreground", children: "Approvals" }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", "aria-live": "polite", children: waiting === 0 ? "Nothing is waiting for you" : waiting === 1 ? "1 request is waiting" : `${waiting} requests are waiting` })
+  return /* @__PURE__ */ jsxs6("div", { className: `flex h-full min-h-0 flex-col ${className}`, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "shrink-0 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsx6("h2", { className: "text-base font-semibold text-foreground", children: "Approvals" }),
+      /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", "aria-live": "polite", children: waiting === 0 ? "Nothing is waiting for you" : waiting === 1 ? "1 request is waiting" : `${waiting} requests are waiting` })
     ] }),
-    groups.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 py-10 text-center", children: [
-      /* @__PURE__ */ jsx4("span", { className: "flex size-10 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsx4(ShieldCheck, { "aria-hidden": true, className: "size-5 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium text-foreground", children: "No approvals in this conversation" }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: "Requests to act on your connected accounts appear here." })
-    ] }) : /* @__PURE__ */ jsx4("div", { className: "min-h-0 flex-1 space-y-5 overflow-y-auto px-2 py-3", children: groups.map((group) => /* @__PURE__ */ jsxs4("section", { "aria-label": group.label, children: [
-      /* @__PURE__ */ jsxs4("h3", { className: "px-2 pb-1 text-sm font-medium text-muted-foreground", children: [
+    groups.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 py-10 text-center", children: [
+      /* @__PURE__ */ jsx6("span", { className: "flex size-10 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsx6(ShieldCheck, { "aria-hidden": true, className: "size-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium text-foreground", children: "No approvals in this conversation" }),
+      /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: "Requests to act on your connected accounts appear here." })
+    ] }) : /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 space-y-5 overflow-y-auto px-2 py-3", children: groups.map((group) => /* @__PURE__ */ jsxs6("section", { "aria-label": group.label, children: [
+      /* @__PURE__ */ jsxs6("h3", { className: "px-2 pb-1 text-sm font-medium text-muted-foreground", children: [
         group.label,
         " ",
-        /* @__PURE__ */ jsxs4("span", { className: "tabular-nums", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "tabular-nums", children: [
           "\xB7 ",
           group.items.length
         ] })
       ] }),
-      /* @__PURE__ */ jsx4("ul", { className: "space-y-1", children: group.items.map((item) => {
+      /* @__PURE__ */ jsx6("ul", { className: "space-y-1", children: group.items.map((item) => {
         const presentation = presentHubAction(item);
         const title = item.phase === "done" ? hubActionReceipt(item).title : presentation.title;
         const when = item.phase === "waiting" ? closesIn(item.expiresAt, now) ?? relativeTime(item.requestedAt, now) : relativeTime(item.requestedAt, now);
         const detail = [presentation.provider.name, distinctAccount(item.account, presentation.provider.name), when].filter(Boolean).join(" \xB7 ");
         const selected = selectedId === item.id;
-        return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs4(
-          Button3,
+        return /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs6(
+          Button4,
           {
             variant: "bare",
             onClick: () => onSelect?.(item),
             "aria-current": selected ? "true" : void 0,
             className: `flex w-full items-start gap-3 rounded-lg px-2 py-2.5 text-left transition-colors hover:bg-muted ${selected ? "bg-muted" : ""}`,
             children: [
-              /* @__PURE__ */ jsx4(HubProviderMark, { providerId: presentation.provider.id, name: presentation.provider.name, size: 28 }),
-              /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx4("span", { className: "line-clamp-2 text-sm font-medium leading-5 text-foreground", children: title }),
-                /* @__PURE__ */ jsx4("span", { className: "mt-0.5 block truncate text-sm text-muted-foreground", children: detail }),
-                item.phase === "unknown" && /* @__PURE__ */ jsx4("span", { className: "mt-1 block text-sm text-[var(--surface-warning-text)]", children: HUB_APPROVAL_UNKNOWN_WARNING }),
-                (item.phase === "waiting" || item.phase === "blocked") && item.wait && /* @__PURE__ */ jsx4("span", { className: "mt-1 line-clamp-2 block text-sm text-muted-foreground", children: item.wait.reason })
+              /* @__PURE__ */ jsx6(HubProviderMark, { providerId: presentation.provider.id, name: presentation.provider.name, size: 28 }),
+              /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 text-sm font-medium leading-5 text-foreground", children: title }),
+                /* @__PURE__ */ jsx6("span", { className: "mt-0.5 block truncate text-sm text-muted-foreground", children: detail }),
+                item.phase === "unknown" && /* @__PURE__ */ jsx6("span", { className: "mt-1 block text-sm text-[var(--surface-warning-text)]", children: HUB_APPROVAL_UNKNOWN_WARNING }),
+                (item.phase === "waiting" || item.phase === "blocked") && item.wait && /* @__PURE__ */ jsx6("span", { className: "mt-1 line-clamp-2 block text-sm text-muted-foreground", children: item.wait.reason })
               ] }),
-              /* @__PURE__ */ jsxs4("span", { className: "flex shrink-0 items-center gap-1", children: [
-                /* @__PURE__ */ jsx4(HubApprovalPhasePill, { phase: item.phase, label: openPhaseLabel(item, "Owner") }),
-                /* @__PURE__ */ jsx4(ChevronRight2, { "aria-hidden": true, className: "size-4 text-muted-foreground" })
+              /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsx6(HubApprovalPhasePill, { phase: item.phase, label: openPhaseLabel(item, "Owner") }),
+                /* @__PURE__ */ jsx6(ChevronRight2, { "aria-hidden": true, className: "size-4 text-muted-foreground" })
               ] })
             ]
           }
@@ -619,19 +856,19 @@ function HubApprovalsList({ items, onSelect, selectedId, className = "" }) {
 }
 
 // src/hub-approvals-react/row.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef2, useState as useState7 } from "react";
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { Button as Button4 } from "@tangle-network/ui/primitives";
+import { Button as Button5 } from "@tangle-network/ui/primitives";
 
 // src/hub-approvals-react/receipt.tsx
-import { useState as useState4 } from "react";
+import { useState as useState6 } from "react";
 import { ExternalLink as ExternalLink2 } from "lucide-react";
 import { ApprovalDiffSummary as ApprovalDiffSummary2 } from "@tangle-network/ui/run";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function AudioPlayer({ src }) {
-  const [failed, setFailed] = useState4(false);
-  if (failed) return /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "The audio link has expired. Ask the agent for a new one." });
-  return /* @__PURE__ */ jsx5("audio", { controls: true, preload: "metadata", src, onError: () => setFailed(true), className: "h-10 w-full" });
+  const [failed, setFailed] = useState6(false);
+  if (failed) return /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: "The audio link has expired. Ask the agent for a new one." });
+  return /* @__PURE__ */ jsx7("audio", { controls: true, preload: "metadata", src, onError: () => setFailed(true), className: "h-10 w-full" });
 }
 function HubActionReceiptCard({ item, className = "" }) {
   const receipt = hubActionReceipt(item);
@@ -639,27 +876,27 @@ function HubActionReceiptCard({ item, className = "" }) {
   const account = distinctAccount(item.account, receipt.provider.name);
   const subtitle = [receipt.provider.name, account ? `as ${account}` : null, presentation.target && !receipt.title.includes(presentation.target) ? presentation.target : null].filter(Boolean).join(" \xB7 ");
   const phase = item.phase;
-  return /* @__PURE__ */ jsxs5("article", { "aria-label": receipt.title, className: `rounded-xl border border-border bg-card px-4 py-3 shadow-sm ${className}`, children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx5(HubProviderMark, { providerId: receipt.provider.id, name: receipt.provider.name }),
-      /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx5("p", { className: "text-base font-semibold leading-6 text-foreground", children: receipt.href ? /* @__PURE__ */ jsxs5("a", { href: receipt.href, target: "_blank", rel: "noreferrer", className: "inline-flex max-w-full items-center gap-1.5 hover:underline", children: [
-          /* @__PURE__ */ jsx5("span", { className: "truncate", children: receipt.title }),
-          /* @__PURE__ */ jsx5(ExternalLink2, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })
-        ] }) : /* @__PURE__ */ jsx5("span", { className: "break-words", children: receipt.title }) }),
-        subtitle && /* @__PURE__ */ jsx5("p", { className: "truncate text-sm text-muted-foreground", children: subtitle })
+  return /* @__PURE__ */ jsxs7("article", { "aria-label": receipt.title, className: `rounded-xl border border-border bg-card px-4 py-3 shadow-sm ${className}`, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx7(HubProviderMark, { providerId: receipt.provider.id, name: receipt.provider.name }),
+      /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx7("p", { className: "text-base font-semibold leading-6 text-foreground", children: receipt.href ? /* @__PURE__ */ jsxs7("a", { href: receipt.href, target: "_blank", rel: "noreferrer", className: "inline-flex max-w-full items-center gap-1.5 hover:underline", children: [
+          /* @__PURE__ */ jsx7("span", { className: "truncate", children: receipt.title }),
+          /* @__PURE__ */ jsx7(ExternalLink2, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })
+        ] }) : /* @__PURE__ */ jsx7("span", { className: "break-words", children: receipt.title }) }),
+        subtitle && /* @__PURE__ */ jsx7("p", { className: "truncate text-sm text-muted-foreground", children: subtitle })
       ] }),
-      /* @__PURE__ */ jsx5(HubApprovalPhasePill, { phase })
+      /* @__PURE__ */ jsx7(HubApprovalPhasePill, { phase })
     ] }),
-    (receipt.fields.length > 0 || receipt.media || receipt.files || receipt.error || receipt.warning) && /* @__PURE__ */ jsxs5("div", { className: "mt-3 space-y-3", children: [
-      /* @__PURE__ */ jsx5(HubFieldList, { fields: receipt.fields }),
-      receipt.media && /* @__PURE__ */ jsx5(AudioPlayer, { src: receipt.media.src }),
-      receipt.files && /* @__PURE__ */ jsx5(ApprovalDiffSummary2, { files: receipt.files }),
-      receipt.warning && /* @__PURE__ */ jsx5("p", { className: "break-words rounded-lg border border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] px-3 py-2 text-sm text-[var(--surface-warning-text)]", children: receipt.warning }),
-      receipt.error && /* @__PURE__ */ jsx5("p", { className: "break-words rounded-lg border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2 text-sm text-[var(--surface-danger-text)]", children: receipt.error })
+    (receipt.fields.length > 0 || receipt.media || receipt.files || receipt.error || receipt.warning) && /* @__PURE__ */ jsxs7("div", { className: "mt-3 space-y-3", children: [
+      /* @__PURE__ */ jsx7(HubFieldList, { fields: receipt.fields }),
+      receipt.media && /* @__PURE__ */ jsx7(AudioPlayer, { src: receipt.media.src }),
+      receipt.files && /* @__PURE__ */ jsx7(ApprovalDiffSummary2, { files: receipt.files }),
+      receipt.warning && /* @__PURE__ */ jsx7("p", { className: "break-words rounded-lg border border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] px-3 py-2 text-sm text-[var(--surface-warning-text)]", children: receipt.warning }),
+      receipt.error && /* @__PURE__ */ jsx7("p", { className: "break-words rounded-lg border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2 text-sm text-[var(--surface-danger-text)]", children: receipt.error })
     ] }),
-    (item.grant || item.autoApproved) && /* @__PURE__ */ jsx5("p", { className: "mt-3 text-sm text-muted-foreground", children: item.autoApproved ?? `Allowed ${item.grant?.expiresAt ? "for 24 hours" : "from now on"}: ${item.grant?.scope}` }),
-    /* @__PURE__ */ jsx5("div", { className: "mt-2", children: /* @__PURE__ */ jsx5(HubRawDetails, { sections: [
+    (item.grant || item.autoApproved) && /* @__PURE__ */ jsx7("p", { className: "mt-3 text-sm text-muted-foreground", children: item.autoApproved ?? `Allowed ${item.grant?.expiresAt ? "for 24 hours" : "from now on"}: ${item.grant?.scope}` }),
+    /* @__PURE__ */ jsx7("div", { className: "mt-2", children: /* @__PURE__ */ jsx7(HubRawDetails, { sections: [
       { label: "Call", value: { action: item.actionPath, input: item.input } },
       { label: "Result", value: item.result }
     ] }) })
@@ -675,63 +912,74 @@ function HubApprovalReceipts({ items, message, at }) {
   const verbs = [approved ? `approved ${actions(approved)}` : null, denied ? `denied ${actions(denied)}` : null].filter(Boolean);
   const summary = verbs.length ? `You ${verbs.join(" and ")}${expired ? `; ${actions(expired)} expired` : ""}` : expired ? `${actions(expired)} expired` : "Your decisions";
   const when = at ? new Date(at) : null;
-  return /* @__PURE__ */ jsxs5("section", { "aria-label": "Approval results", className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs5("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx5("span", { children: summary }),
-      when && !Number.isNaN(when.getTime()) && /* @__PURE__ */ jsxs5("time", { dateTime: when.toISOString(), children: [
+  return /* @__PURE__ */ jsxs7("section", { "aria-label": "Approval results", className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs7("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx7("span", { children: summary }),
+      when && !Number.isNaN(when.getTime()) && /* @__PURE__ */ jsxs7("time", { dateTime: when.toISOString(), children: [
         "\xB7 ",
         when.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" })
       ] })
     ] }),
-    decided.map((item) => /* @__PURE__ */ jsx5(HubActionReceiptCard, { item }, item.id)),
-    message && /* @__PURE__ */ jsx5(HubRawDetails, { label: "Message sent to the agent", sections: [{ label: "The agent received", value: message }] })
+    decided.map((item) => /* @__PURE__ */ jsx7(HubActionReceiptCard, { item }, item.id)),
+    message && /* @__PURE__ */ jsx7(HubRawDetails, { label: "Message sent to the agent", sections: [{ label: "The agent received", value: message }] })
   ] });
 }
 
 // src/hub-approvals-react/row.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function HubApprovalRow({ item, expanded: controlled, onExpandedChange, onReview, actions }) {
-  const [own, setOwn] = useState5(false);
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function HubApprovalRow({ item, expanded: controlled, onExpandedChange, onReview, actions, onFeedback }) {
+  const [own, setOwn] = useState7(false);
   const expanded = controlled ?? own;
   const ref = useRef2(null);
+  const feedbackDrafts = useRef2(/* @__PURE__ */ new Map());
+  const [feedbackSaving, setFeedbackSaving] = useState7(false);
   const presentation = presentHubAction(item);
   const title = item.phase === "done" ? hubActionReceipt(item).title : presentation.title;
-  useEffect3(() => {
+  useEffect5(() => {
     if (controlled) ref.current?.scrollIntoView({ block: "center", behavior: "smooth" });
   }, [controlled]);
   const toggle = () => {
     setOwn(!expanded);
     onExpandedChange?.(!expanded);
   };
-  return /* @__PURE__ */ jsxs6("div", { ref, "data-hub-approval-row": item.id, className: `rounded-xl border bg-card ${expanded ? "border-border shadow-sm" : "border-border/80"}`, children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 px-3 py-2", children: [
-      /* @__PURE__ */ jsxs6(
-        Button4,
+  return /* @__PURE__ */ jsxs8("div", { ref, "data-hub-approval-row": item.id, className: `rounded-xl border bg-card ${expanded ? "border-border shadow-sm" : "border-border/80"}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs8(
+        Button5,
         {
           variant: "bare",
           "aria-expanded": expanded,
+          disabled: feedbackSaving,
           onClick: toggle,
           className: "flex min-h-9 min-w-0 flex-1 items-center gap-3 rounded-md text-left",
           children: [
-            /* @__PURE__ */ jsx6(HubProviderMark, { providerId: presentation.provider.id, name: presentation.provider.name, size: 24 }),
-            /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: title }),
-            /* @__PURE__ */ jsx6(HubApprovalPhasePill, { phase: item.phase, label: openPhaseLabel(item) }),
-            /* @__PURE__ */ jsx6(ChevronDown2, { "aria-hidden": true, className: `size-4 shrink-0 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx8(HubProviderMark, { providerId: presentation.provider.id, name: presentation.provider.name, size: 24 }),
+            /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: title }),
+            /* @__PURE__ */ jsx8(HubApprovalPhasePill, { phase: item.phase, label: openPhaseLabel(item) }),
+            /* @__PURE__ */ jsx8(ChevronDown2, { "aria-hidden": true, className: `size-4 shrink-0 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
           ]
         }
       ),
       item.phase === "waiting" && onReview && // On a phone the dock sits just below; the row keeps its width for the title.
-      /* @__PURE__ */ jsx6(Button4, { variant: "outline", className: "hidden sm:inline-flex", onClick: () => onReview(item), children: "Review" })
+      /* @__PURE__ */ jsx8(Button5, { variant: "outline", className: "hidden sm:inline-flex", onClick: () => onReview(item), children: "Review" })
     ] }),
-    !expanded && item.phase === "unknown" && /* @__PURE__ */ jsx6("p", { className: "px-3 pb-3 text-sm text-[var(--surface-warning-text)]", children: HUB_APPROVAL_UNKNOWN_WARNING }),
-    expanded && /* @__PURE__ */ jsxs6("div", { className: "space-y-3 border-t border-border px-3 pb-3 pt-3", children: [
-      item.phase === "done" || item.phase === "failed" || item.phase === "unknown" ? /* @__PURE__ */ jsx6(HubActionReceiptCard, { item, className: "border-0 px-0 py-0 shadow-none" }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx6(HubActionPreviewView, { preview: presentation.preview, account: item.account }),
-        /* @__PURE__ */ jsx6(HubRawDetails, { sections: [{ label: "Call", value: { action: item.actionPath, input: item.input } }] })
+    !expanded && item.phase === "unknown" && /* @__PURE__ */ jsx8("p", { className: "px-3 pb-3 text-sm text-[var(--surface-warning-text)]", children: HUB_APPROVAL_UNKNOWN_WARNING }),
+    expanded && /* @__PURE__ */ jsxs8("div", { className: "space-y-3 border-t border-border px-3 pb-3 pt-3", children: [
+      item.phase === "done" || item.phase === "failed" || item.phase === "unknown" ? /* @__PURE__ */ jsx8(HubActionReceiptCard, { item, className: "border-0 px-0 py-0 shadow-none" }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        /* @__PURE__ */ jsx8(HubActionPreviewView, { preview: presentation.preview, account: item.account }),
+        /* @__PURE__ */ jsx8(HubRawDetails, { sections: [{ label: "Call", value: { action: item.actionPath, input: item.input } }] })
       ] }),
-      item.phase !== "unknown" && actions
+      item.phase !== "unknown" && actions,
+      onFeedback && /* @__PURE__ */ jsx8(HubPreviewFeedback, { item, drafts: feedbackDrafts.current, onFeedback: async (source, feedback) => {
+        setFeedbackSaving(true);
+        try {
+          await onFeedback(source, feedback);
+        } finally {
+          setFeedbackSaving(false);
+        }
+      } }, item.id)
     ] }),
-    !expanded && actions && (item.phase === "expired" || item.phase === "failed") && /* @__PURE__ */ jsx6("div", { className: "border-t border-border px-3 py-2", children: actions })
+    !expanded && actions && (item.phase === "expired" || item.phase === "failed") && /* @__PURE__ */ jsx8("div", { className: "border-t border-border px-3 py-2", children: actions })
   ] });
 }
 export {
@@ -743,6 +991,7 @@ export {
   HubApprovalRow,
   HubApprovalWaitNote,
   HubApprovalsList,
+  HubPreviewFeedback,
   HubProviderMark,
   openPhaseLabel
 };