@agent-native/core 0.98.4 → 0.98.6

package/corpus/templates/forms/app/pages/FormsListPage.tsx

@@ -118,7 +118,7 @@ export function FormsListPage() {
       <Button
         onClick={handleCreate}
         size="sm"
-        className="shrink-0 cursor-pointer"
+        className="min-h-10 shrink-0 cursor-pointer active:scale-[0.96] transition-[background-color,box-shadow,transform]"
       >
         <IconPlus className="h-3.5 w-3.5" />
         <span className="hidden sm:inline">{t("forms.newForm")}</span>
@@ -269,7 +269,7 @@ export function FormsListPage() {
   if (isLoading) {
     return (
       <div className="p-3 sm:p-6 max-w-5xl mx-auto">
-        <div className="overflow-hidden rounded-lg border border-border bg-card">
+        <div className="forms-list-shell overflow-hidden bg-card">
           {Array.from({ length: 6 }).map((_, i) => (
             <div
               key={i}
@@ -280,8 +280,10 @@ export function FormsListPage() {
                 <Skeleton className="h-3 w-1/2" />
               </div>
               <Skeleton className="h-5 w-20 rounded-full" />
+              <Skeleton className="h-5 w-20 rounded-full" />
+              <Skeleton className="h-4 w-24" />
               <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-8 w-8 rounded-md md:ms-auto" />
+              <Skeleton className="h-10 w-10 rounded-lg md:ms-auto" />
             </div>
           ))}
         </div>
@@ -300,6 +302,7 @@ export function FormsListPage() {
           <Button
             variant="outline"
             size="sm"
+            className="min-h-10 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={() => {
               const next = encodeURIComponent(
                 window.location.pathname + window.location.search,
@@ -322,8 +325,8 @@ export function FormsListPage() {
         <Button
           variant="outline"
           size="sm"
+          className="min-h-10 gap-2 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
           onClick={() => refetch()}
-          className="gap-2"
         >
           <IconRefresh className="h-3.5 w-3.5" />
           {t("common.retry")}
@@ -344,11 +347,17 @@ export function FormsListPage() {
           value={view}
           onValueChange={(v) => setView(v as "active" | "archive")}
         >
-          <TabsList>
-            <TabsTrigger value="active" className="text-xs gap-1.5">
+          <TabsList className="h-12">
+            <TabsTrigger
+              value="active"
+              className="min-h-10 gap-1.5 text-xs active:scale-[0.96] transition-[background-color,box-shadow,color,transform]"
+            >
               {t("header.forms")}
             </TabsTrigger>
-            <TabsTrigger value="archive" className="text-xs gap-1.5">
+            <TabsTrigger
+              value="archive"
+              className="min-h-10 gap-1.5 text-xs active:scale-[0.96] transition-[background-color,box-shadow,color,transform]"
+            >
               <IconArchive className="h-3.5 w-3.5" />
               {t("forms.archive")}
             </TabsTrigger>
@@ -359,7 +368,7 @@ export function FormsListPage() {
           <Button
             variant={selectionMode ? "secondary" : "ghost"}
             size="sm"
-            className="h-8 gap-1.5 text-xs"
+            className="min-h-10 gap-1.5 text-xs active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={() => {
               setSelectionMode((current) => {
                 if (current) setSelectedIds(new Set());
@@ -374,7 +383,7 @@ export function FormsListPage() {
       </div>
 
       {selectionMode && forms.length > 0 && (
-        <div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2">
+        <div className="forms-selection-toolbar mb-4 flex flex-wrap items-center gap-2 rounded-xl bg-muted/30 px-3 py-2">
           <span className="text-xs font-medium text-foreground">
             {t("forms.selectedCount", {
               count: selectedCount,
@@ -385,7 +394,7 @@ export function FormsListPage() {
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 text-xs"
+            className="min-h-10 text-xs active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={toggleSelectAll}
           >
             {allFormsSelected ? t("common.clearAll") : t("common.selectAll")}
@@ -393,7 +402,7 @@ export function FormsListPage() {
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 gap-1.5 text-xs text-destructive hover:text-destructive"
+            className="min-h-10 gap-1.5 text-xs text-destructive hover:text-destructive active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             onClick={() =>
               isArchive ? setBulkPurgeOpen(true) : handleBulkDelete(false)
             }
@@ -405,7 +414,7 @@ export function FormsListPage() {
           <Button
             variant="ghost"
             size="icon"
-            className="ms-auto h-8 w-8"
+            className="relative ms-auto size-10 transition-[background-color,box-shadow,transform] active:scale-[0.96] sm:size-8 sm:before:absolute sm:before:-inset-1 sm:before:content-['']"
             onClick={clearSelection}
             aria-label={t("forms.exitSelectionMode")}
           >
@@ -415,7 +424,7 @@ export function FormsListPage() {
       )}
 
       {forms.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 border border-dashed border-border rounded-xl">
+        <div className="forms-empty-state flex flex-col items-center justify-center rounded-xl border border-dashed border-border bg-card py-20">
           {isArchive ? (
             <>
               <h3 className="font-medium mb-1">
@@ -431,7 +440,11 @@ export function FormsListPage() {
               <p className="text-sm text-muted-foreground mb-4">
                 {t("forms.emptyDescription")}
               </p>
-              <Button onClick={handleCreate} size="sm" className="gap-2">
+              <Button
+                onClick={handleCreate}
+                size="sm"
+                className="min-h-10 gap-2 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
+              >
                 <IconPlus className="h-4 w-4" />
                 {t("forms.createForm")}
               </Button>
@@ -439,7 +452,7 @@ export function FormsListPage() {
           )}
         </div>
       ) : (
-        <div className="overflow-hidden rounded-lg border border-border bg-card">
+        <div className="forms-list-shell overflow-hidden bg-card">
           {forms.map((form: any) => {
             const selected = selectedIds.has(form.id);
             const dateLabel =
@@ -515,10 +528,6 @@ export function FormsListPage() {
                       <h3 className="min-w-0 flex-1 truncate text-sm font-medium">
                         {form.title}
                       </h3>
-                      <VisibilityBadge
-                        visibility={(form as any).visibility}
-                        className="shrink-0"
-                      />
                     </div>
                     {form.description && (
                       <p className="mt-0.5 truncate text-xs text-muted-foreground">
@@ -528,6 +537,10 @@ export function FormsListPage() {
                   </div>
                 </div>
 
+                <div className="flex min-w-0 items-center">
+                  <VisibilityBadge visibility={(form as any).visibility} />
+                </div>
+
                 <div className="flex items-center md:justify-start">
                   <Badge
                     variant="outline"
@@ -558,7 +571,7 @@ export function FormsListPage() {
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="h-10 w-10 sm:h-8 sm:w-8 p-0 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100"
+                          className="relative size-10 rounded-lg p-0 transition-[background-color,opacity,transform] duration-150 ease-out active:scale-[0.96] focus:opacity-100 sm:size-8 sm:opacity-0 sm:before:absolute sm:before:-inset-1 sm:before:content-[''] sm:group-hover:opacity-100"
                           aria-label={t("forms.formActions")}
                         >
                           <IconDots className="h-4 w-4" />
@@ -695,10 +708,12 @@ export function FormsListPage() {
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogCancel className="min-h-10 active:scale-[0.96] transition-[background-color,box-shadow,transform]">
+              {t("common.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction
               onClick={handlePurge}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className="min-h-10 bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             >
               {t("forms.deleteForever")}
             </AlertDialogAction>
@@ -718,13 +733,16 @@ export function FormsListPage() {
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={bulkDeletePending}>
+            <AlertDialogCancel
+              disabled={bulkDeletePending}
+              className="min-h-10 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
+            >
               {t("common.cancel")}
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={() => handleBulkDelete(true)}
               disabled={bulkDeletePending}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className="min-h-10 bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
             >
               {t("forms.deleteForever")}
             </AlertDialogAction>

package/corpus/templates/forms/app/pages/ResponseInsightsPage.tsx

@@ -52,7 +52,7 @@ function Metric({
   detail?: string;
 }) {
   return (
-    <div className="min-w-0 rounded-md border border-border bg-background px-3 py-2">
+    <div className="min-w-0 rounded-xl border border-border/80 bg-background px-3 py-3 shadow-sm">
       <div className="text-[11px] font-medium uppercase tracking-normal text-muted-foreground">
         {label}
       </div>
@@ -97,7 +97,7 @@ function SubmissionBars({
               <div className="flex h-40 w-full items-end rounded-sm bg-muted/40 px-0.5">
                 <div
                   className={cn(
-                    "w-full rounded-sm bg-primary/80 transition-colors",
+                    "w-full rounded-sm bg-primary/80 shadow-sm transition-[height,background-color,box-shadow] duration-300 ease-out hover:bg-primary hover:shadow-md motion-reduce:transition-none",
                     point.submissions === 0 && "bg-muted-foreground/30",
                   )}
                   style={{ height }}
@@ -121,11 +121,11 @@ function LoadingState() {
       <Skeleton className="h-10 w-72" />
       <div className="forms-response-metrics-grid grid gap-3">
         {Array.from({ length: 4 }).map((_, index) => (
-          <Skeleton key={index} className="h-20 rounded-md" />
+          <Skeleton key={index} className="h-20 rounded-xl" />
         ))}
       </div>
-      <Skeleton className="h-64 rounded-md" />
-      <Skeleton className="h-72 rounded-md" />
+      <Skeleton className="h-64 rounded-xl" />
+      <Skeleton className="h-72 rounded-xl" />
     </div>
   );
 }
@@ -160,7 +160,7 @@ export function ResponseInsightsPage() {
           type="button"
           variant="outline"
           size="sm"
-          className="gap-1.5"
+          className="min-h-10 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
           onClick={() => refetch()}
         >
           <IconRefresh className="size-3.5" />
@@ -176,7 +176,12 @@ export function ResponseInsightsPage() {
     <div className="flex min-h-full flex-col bg-background">
       <header className="flex min-h-14 shrink-0 items-center justify-between gap-3 border-b border-border pl-12 pr-3 sm:px-4 md:pl-4">
         <div className="flex min-w-0 items-center gap-2">
-          <Button variant="ghost" size="sm" asChild className="gap-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            asChild
+            className="min-h-10 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
+          >
             <Link to="/forms">
               <IconArrowLeft className="size-3.5" />
               Forms
@@ -196,7 +201,12 @@ export function ResponseInsightsPage() {
             </div>
           </div>
         </div>
-        <Button variant="outline" size="sm" asChild className="gap-1.5">
+        <Button
+          variant="outline"
+          size="sm"
+          asChild
+          className="min-h-10 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
+        >
           <Link to={display.primaryAction.href}>
             {display.primaryAction.label}
             <IconExternalLink className="size-3.5" />
@@ -204,7 +214,7 @@ export function ResponseInsightsPage() {
         </Button>
       </header>
 
-      <main className="forms-response-insights-grid grid gap-4 p-4">
+      <main className="forms-response-insights-grid grid gap-4 bg-muted/20 p-4">
         <section className="space-y-4">
           <div className="forms-response-metrics-grid grid gap-3">
             <Metric
@@ -233,7 +243,7 @@ export function ResponseInsightsPage() {
             />
           </div>
 
-          <div className="rounded-md border border-border bg-background p-4">
+          <div className="rounded-xl border border-border/80 bg-background p-4 shadow-sm">
             <div className="mb-3 flex items-center justify-between gap-3">
               <div>
                 <h2 className="text-sm font-semibold">{chartSeries.title}</h2>
@@ -249,7 +259,7 @@ export function ResponseInsightsPage() {
           </div>
         </section>
 
-        <section className="min-w-0 rounded-md border border-border bg-background">
+        <section className="min-w-0 overflow-hidden rounded-xl border border-border/80 bg-background shadow-sm">
           <div className="flex min-h-12 items-center justify-between gap-3 border-b border-border px-3">
             <div className="min-w-0">
               <h2 className="truncate text-sm font-semibold">{table.title}</h2>
@@ -268,13 +278,13 @@ export function ResponseInsightsPage() {
           ) : (
             <div className="max-h-[calc(100vh-15rem)] overflow-auto">
               <Table>
-                <TableHeader className="sticky top-0 z-10 bg-background">
+                <TableHeader className="sticky top-0 z-10 bg-background shadow-sm">
                   <TableRow>
                     {table.columns.map((column) => (
                       <TableHead
                         key={column.key}
                         className={cn(
-                          "h-9 whitespace-nowrap px-3 text-xs",
+                          "h-11 whitespace-nowrap px-3 text-xs",
                           column.align === "right" && "text-right",
                         )}
                       >
@@ -285,12 +295,15 @@ export function ResponseInsightsPage() {
                 </TableHeader>
                 <TableBody>
                   {table.rows.map((row) => (
-                    <TableRow key={String(row.id)}>
+                    <TableRow
+                      key={String(row.id)}
+                      className="transition-[background-color] duration-150 hover:bg-muted/30 motion-reduce:transition-none"
+                    >
                       {table.columns.map((column) => (
                         <TableCell
                           key={column.key}
                           className={cn(
-                            "max-w-56 truncate px-3 py-2 text-xs",
+                            "max-w-56 truncate px-3 py-3 text-xs",
                             column.align === "right" && "text-right",
                           )}
                           title={formatCell(row[column.key])}

package/corpus/templates/forms/app/pages/ResponsesPage.tsx

@@ -254,7 +254,7 @@ export function ResponsesPage() {
           variant="outline"
           size="sm"
           onClick={() => refetch()}
-          className="gap-2"
+          className="min-h-10 gap-2 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
         >
           <IconRefresh className="h-3.5 w-3.5" />
           {t("common.retry")}
@@ -272,7 +272,7 @@ export function ResponsesPage() {
             variant="ghost"
             size="sm"
             asChild
-            className="gap-1.5 shrink-0"
+            className="min-h-10 shrink-0 gap-1.5 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
           >
             <Link to={`/forms/${id}`}>
               <IconArrowLeft className="h-3.5 w-3.5" />
@@ -305,14 +305,14 @@ export function ResponsesPage() {
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder={t("responses.filterPlaceholder")}
-                className="h-8 pl-7 w-48 text-xs"
+                className="h-10 w-48 pl-7 text-xs transition-[background-color,border-color,box-shadow] duration-150 motion-reduce:transition-none"
               />
             </div>
           ) : null}
           <Button
             variant="outline"
             size="sm"
-            className="gap-1.5 text-xs shrink-0"
+            className="min-h-10 shrink-0 gap-1.5 text-xs transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
             onClick={exportCsv}
             disabled={filteredSorted.length === 0}
           >
@@ -332,7 +332,7 @@ export function ResponsesPage() {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder={t("responses.filterPlaceholder")}
-              className="h-8 pl-7 text-xs"
+              className="h-10 pl-7 text-xs transition-[background-color,border-color,box-shadow] duration-150 motion-reduce:transition-none"
             />
           </div>
         </div>
@@ -355,10 +355,10 @@ export function ResponsesPage() {
         </div>
       ) : (
         <div className="flex-1 min-w-0 overflow-auto overscroll-x-contain">
-          <div className="min-w-full">
+          <div className="w-full min-w-full">
             <table
-              className="min-w-full table-fixed text-sm"
-              style={{ minWidth: responseTableMinWidth }}
+              className="w-full min-w-full table-fixed text-sm"
+              style={{ width: "100%", minWidth: responseTableMinWidth }}
             >
               <colgroup>
                 <col className="w-16" />
@@ -366,15 +366,18 @@ export function ResponsesPage() {
                 {hasSubmitterEmail ? <col className="w-56" /> : null}
                 {hasPageUrl ? <col className="w-64" /> : null}
                 {hasClientSurface ? <col className="w-40" /> : null}
-                {fields.map((f) => (
-                  <col key={f.id} className="w-80" />
+                {fields.map((f, index) => (
+                  <col
+                    key={f.id}
+                    className={index === fields.length - 1 ? "w-auto" : "w-80"}
+                  />
                 ))}
               </colgroup>
               <thead>
-                <tr className="border-b border-border bg-muted/30">
+                <tr className="border-b border-border bg-muted/40">
                   <th
                     scope="col"
-                    className="min-w-16 px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+                    className="min-w-16 px-4 py-3 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
                   >
                     #
                   </th>
@@ -423,7 +426,7 @@ export function ResponsesPage() {
                 {filteredSorted.map((response, idx) => (
                   <tr
                     key={response.id}
-                    className="border-b border-border hover:bg-muted/20"
+                    className="border-b border-border transition-[background-color] duration-150 hover:bg-muted/20 motion-reduce:transition-none"
                   >
                     <td className="px-4 py-2.5 text-xs text-muted-foreground">
                       {filteredSorted.length - idx}
@@ -525,27 +528,50 @@ function SortableHeader(props: {
 }) {
   const t = useT();
   const { label, active, dir, onClick } = props;
-  const Icon = !active
-    ? IconArrowsSort
+  const sortState: "neutral" | "asc" | "desc" = !active
+    ? "neutral"
     : dir === "asc"
-      ? IconArrowUp
-      : IconArrowDown;
+      ? "asc"
+      : "desc";
+  const iconBase =
+    "absolute inset-0 transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)]";
+  const iconVisible = "scale-100 opacity-60 blur-none";
+  const iconHidden = "scale-[0.25] opacity-0 blur-[4px]";
   return (
     <th
       scope="col"
-      className="min-w-40 px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+      className="min-w-40 px-4 py-1 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
     >
       <button
         type="button"
         onClick={onClick}
         className={cn(
-          "inline-flex items-center gap-1 cursor-pointer hover:text-foreground",
+          "relative -mx-2 inline-flex min-h-10 cursor-pointer items-center gap-1 rounded-md px-2 transition-[scale,background-color,color,box-shadow] duration-150 ease-out hover:bg-accent hover:text-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none motion-reduce:active:scale-100 sm:min-h-0 sm:before:absolute sm:before:-inset-2.5 sm:before:content-['']",
           active && "text-foreground",
         )}
         aria-label={t("responses.sortBy", { label })}
       >
         {label}
-        <Icon className="h-3 w-3 opacity-60" />
+        <span className="relative inline-block h-3 w-3 shrink-0">
+          <IconArrowsSort
+            className={cn(
+              iconBase,
+              sortState === "neutral" ? iconVisible : iconHidden,
+            )}
+          />
+          <IconArrowUp
+            className={cn(
+              iconBase,
+              sortState === "asc" ? iconVisible : iconHidden,
+            )}
+          />
+          <IconArrowDown
+            className={cn(
+              iconBase,
+              sortState === "desc" ? iconVisible : iconHidden,
+            )}
+          />
+        </span>
       </button>
     </th>
   );

package/corpus/templates/forms/app/routes/_app.settings.tsx

@@ -54,7 +54,7 @@ export default function SettingsRoute() {
             {t("settings.description")}
           </p>
 
-          <Card id="language" className="scroll-mt-16">
+          <Card id="language" className="forms-settings-card scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.languageTitle")}

package/corpus/templates/forms/changelog/2026-07-12-ask-forms-suggestions-now-sit-beneath-the-composer-for-a-tig.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-12
+---
+
+Ask Forms suggestions now sit beneath the composer and prefill it when clicked

package/corpus/templates/forms/changelog/2026-07-12-builder-response-tables-now-fill-the-view-without-a-redundan.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-12
+---
+
+Builder response tables now fill the view without a redundant response count badge

package/corpus/templates/forms/changelog/2026-07-12-form-builder-surfaces-are-calmer-fields-stay-stable-on-hover.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-12
+---
+
+Form builder surfaces are calmer, fields stay stable on hover, and integration icons load correctly

package/corpus/templates/forms/changelog/2026-07-12-response-tables-now-fill-the-available-pane-with-a-flexible-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-12
+---
+
+Response tables now fill the available pane with a flexible trailing cell

package/corpus/templates/forms/changelog/2026-07-12-smoother-more-tactile-controls-throughout-animated-icon-and-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-12
+---
+
+Smoother, more tactile controls throughout: animated icon and sort toggles, press feedback on buttons and cards, and larger click targets

package/corpus/templates/mail/AGENTS.md

@@ -61,7 +61,9 @@ Detailed draft, queue, and contact-resolution patterns live in
   (`draft-queue` skill), not `send-email` directly. The requester and reviewer
   must both be members of the active organization; Slack intake resolves the
   sender's real email via `users.info` (requires `users:read.email` bot scope)
-  before it will queue anything.
+  before it will queue anything. Managed installs request that scope through
+  the generated OAuth manifest; reconnect an existing Slack install after
+  granting it. Legacy bot-token installs must add the scope in Slack manually.
 - Never edit the email store to change a draft the user is currently composing;
   use `manage-draft` or the `compose-{id}` application-state key described in
   `email-drafts`.

package/corpus/templates/mail/app/components/email/EmailThread.tsx

@@ -74,6 +74,7 @@ import {
   formatShortcut,
 } from "@/lib/utils";
 
+import { buildEmailIframeDocument } from "./email-iframe-document";
 import {
   InlineReplyComposer,
   type InlineReplyHandle,
@@ -2558,6 +2559,7 @@ function HtmlEmailBody({
   const frameHostRef = useRef<HTMLDivElement>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [height, setHeight] = useState(200);
+  const [iframeLoadVersion, setIframeLoadVersion] = useState(0);
   const { resolvedTheme } = useTheme();
   const isDark = getResolvedTheme(resolvedTheme) === "dark";
   const sanitizedHtml = useMemo(() => sanitizeEmailHtml(html), [html]);
@@ -2603,6 +2605,14 @@ function HtmlEmailBody({
       blockedCount: headBlockedCount + bodyBlockedCount,
     };
   }, [sanitizedHtml.headHtml, sanitizedHtml.bodyHtml, effectivePolicy]);
+  const iframeDocument = useMemo(
+    () =>
+      buildEmailIframeDocument(
+        processedEmailHtml.headHtml,
+        processedEmailHtml.bodyHtml,
+      ),
+    [processedEmailHtml.bodyHtml, processedEmailHtml.headHtml],
+  );
 
   const handleAlwaysTrust = () => {
     if (!senderDomain) return;
@@ -2623,7 +2633,6 @@ function HtmlEmailBody({
     const doc = iframe.contentDocument;
     if (!doc) return;
 
-    doc.open();
     const iframeCss = useDarkIframeCss
       ? `
     html, body {
@@ -2694,16 +2703,10 @@ function HtmlEmailBody({
     .quote-toggle:hover, .sig-toggle:hover { color: rgba(0,0,0,0.7); }
 `;
 
-    doc.write(`<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  ${processedEmailHtml.headHtml}
-  <style>${iframeCss}  </style>
-</head>
-<body>${processedEmailHtml.bodyHtml}</body>
-</html>`);
-    doc.close();
+    const themeStyle = doc.createElement("style");
+    themeStyle.setAttribute("data-mail-theme", "");
+    themeStyle.textContent = iframeCss;
+    doc.head.appendChild(themeStyle);
 
     const resize = () => {
       if (doc.body) {
@@ -3195,6 +3198,7 @@ function HtmlEmailBody({
       clearTimeout(timer);
       clearTimeout(timer2);
       images.forEach((img) => img.removeEventListener("load", resize));
+      themeStyle.remove();
     };
   }, [
     processedEmailHtml.bodyHtml,
@@ -3202,6 +3206,7 @@ function HtmlEmailBody({
     isDark,
     useDarkIframeCss,
     IFRAME_BG,
+    iframeLoadVersion,
   ]);
 
   // Inject / clear search highlights in the iframe whenever searchTerm or content changes
@@ -3268,7 +3273,7 @@ function HtmlEmailBody({
     // Small delay to ensure iframe DOM is ready after a processedHtml rewrite
     const timer = setTimeout(injectHighlights, 60);
     return () => clearTimeout(timer);
-  }, [searchTerm, processedEmailHtml.bodyHtml]);
+  }, [searchTerm, processedEmailHtml.bodyHtml, iframeLoadVersion]);
 
   // Update which mark is "active" and scroll it into view
   useEffect(() => {
@@ -3289,7 +3294,7 @@ function HtmlEmailBody({
       active.style.color = "#000";
       active.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
-  }, [activeLocalIdx, searchTerm]);
+  }, [activeLocalIdx, searchTerm, iframeLoadVersion]);
 
   const showBanner =
     effectivePolicy === "block-all" &&
@@ -3330,6 +3335,8 @@ function HtmlEmailBody({
       )}
       <iframe
         ref={iframeRef}
+        data-agent-native-session-replay=""
+        srcDoc={iframeDocument}
         sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
         style={{
           width: "100%",
@@ -3340,6 +3347,7 @@ function HtmlEmailBody({
           borderRadius: hasDesignedBg && isDark ? "6px" : undefined,
         }}
         title={t("mail.thread.emailContent")}
+        onLoad={() => setIframeLoadVersion((version) => version + 1)}
       />
     </div>
   );