@agent-native/core 0.76.1 → 0.76.2

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @agent-native/core
 
+## 0.76.2
+
+### Patch Changes
+
+- 93c06b0: Make durable background agent runs opt-in (default-off) again. Both the runtime
+  gate (`isFlagEnabled` in durable-background.ts) and the deploy-time `-background`
+  emit gate (`isDurableBackgroundDeployEnabled` in deploy/build.ts) now default to
+  OFF when `AGENT_CHAT_DURABLE_BACKGROUND` is unset; an app opts in only with an
+  explicit truthy value (`true`/`1`/`yes`/`on`). A premature fleet-wide default-on
+  caused real-user incidents (apps hit "Failed to dispatch background run" + chat
+  stalls) because the async background-function worker path is not yet proven
+  end-to-end and the deploy-time env opt-out is not reliably baked into a given
+  deploy. Re-enable default-on only after the 15-min background-function worker is
+  verified live in production.
+
 ## 0.76.1
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.76.1",
+  "version": "0.76.2",
   "type": "module",
   "engines": {
     "node": ">=22"

package/corpus/core/src/agent/durable-background.ts

@@ -237,30 +237,34 @@ function isFlagEnabled(): boolean {
   // can statically verify it against the allowlisted `AGENT_*` prefix. Keep this
   // in sync with AGENT_CHAT_DURABLE_BACKGROUND_ENV.
   //
-  // DEFAULT-ON: durable background runs are the desired behavior for every
-  // hosted app. So an unset/empty/unknown flag means ON; an app opts OUT only
-  // with an explicit falsy value. This still composes with the hosted +
-  // A2A_SECRET gates below, so non-hosted / unconfigured apps stay synchronous.
-  // Safety net: a failed dispatch degrades to a synchronous inline run (see
-  // production-agent.ts), so default-on cannot break chat even if the
-  // self-dispatch can't be delivered on a given app.
+  // DEFAULT-OFF (opt-in): durable background runs are still being hardened. A
+  // premature fleet-wide default-on caused real-user incidents (Assets/Analytics
+  // hit "Failed to dispatch" + stalls, 2026-06-24) because the async background
+  // worker path is not yet proven end-to-end and the deploy-time env opt-out is
+  // not reliably baked into a given deploy. So an unset/empty/unknown flag means
+  // OFF; an app opts IN only with an explicit truthy value
+  // (AGENT_CHAT_DURABLE_BACKGROUND=true). This still composes with the hosted +
+  // A2A_SECRET gates below. Flip back to default-on only after the 15-min
+  // background-function worker is verified live in production (see the
+  // project_durable_bg_prod_verified memory).
   const raw = process.env.AGENT_CHAT_DURABLE_BACKGROUND;
-  if (raw == null) return true;
+  if (raw == null) return false;
   const normalized = raw.trim().toLowerCase();
-  return !(
-    normalized === "0" ||
-    normalized === "false" ||
-    normalized === "no" ||
-    normalized === "off"
+  return (
+    normalized === "1" ||
+    normalized === "true" ||
+    normalized === "yes" ||
+    normalized === "on"
   );
 }
 
 /**
- * The single gate. True when the flag is not explicitly disabled (default-on)
+ * The single gate. True when the flag is explicitly enabled (opt-in/default-off)
  * AND the runtime is hosted AND A2A_SECRET is configured. False otherwise — and
  * false means the current synchronous behavior is used, unchanged. So a local /
- * non-hosted / unconfigured app stays synchronous even with the flag defaulting
- * on; durable only engages where the runtime actually supports it.
+ * non-hosted / unconfigured app stays synchronous, and an app that has not opted
+ * in stays synchronous; durable only engages where it is explicitly enabled and
+ * the runtime actually supports it.
  */
 export function isAgentChatDurableBackgroundEnabled(): boolean {
   return (

package/corpus/core/src/deploy/build.ts

@@ -1485,10 +1485,12 @@ export function findInstalledResvgPackages(
  * Reads the same env flag the runtime gate uses
  * (`AGENT_CHAT_DURABLE_BACKGROUND`).
  *
- * DEFAULT-ON, matching the runtime gate (`isFlagEnabled` in
- * durable-background.ts): unset/empty/unknown means enabled; an app opts OUT
- * only with an explicit falsy value (`false`/`0`/`no`/`off`). This is what
- * actually emits the 15-min `-background` function so the `_process-run`
+ * DEFAULT-OFF (opt-in), matching the runtime gate (`isFlagEnabled` in
+ * durable-background.ts): unset/empty/unknown means DISABLED; an app opts IN
+ * only with an explicit truthy value (`true`/`1`/`yes`/`on`). A premature
+ * fleet-wide default-on caused real-user incidents (2026-06-24) before the
+ * async worker path was proven, so durable is opt-in until verified live. This
+ * gate is what emits the 15-min `-background` function so the `_process-run`
  * dispatch lands on it (async 202 → the worker runs with the real 15-min budget
  * → its ~13-min soft-timeout fits). The deploy gate and runtime gate MUST agree:
  * if the deploy emitted no `-background` function but the runtime still routed
@@ -1499,9 +1501,9 @@ export function findInstalledResvgPackages(
  */
 export function isDurableBackgroundDeployEnabled(): boolean {
   const raw = process.env.AGENT_CHAT_DURABLE_BACKGROUND;
-  if (raw == null) return true;
+  if (raw == null) return false;
   const v = raw.trim().toLowerCase();
-  return !(v === "0" || v === "false" || v === "no" || v === "off");
+  return v === "1" || v === "true" || v === "yes" || v === "on";
 }
 
 /**

package/corpus/templates/dispatch/app/routes/integrations.tsx

@@ -1072,7 +1072,7 @@ function Modal({
   return (
     <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
       <DialogContent className="max-h-[92vh] max-w-2xl overflow-y-auto p-0">
-        <DialogHeader className="border-b p-4 pr-10">
+        <DialogHeader className="border-b p-4 pe-10">
           <DialogTitle className="text-base">{title}</DialogTitle>
           {description ? (
             <DialogDescription>{description}</DialogDescription>
@@ -1784,7 +1784,7 @@ function SetupWizard({
             onClick={() => onStepChange(step - 1)}
             disabled={saving}
           >
-            <IconArrowLeft size={14} />
+            <IconArrowLeft size={14} className="rtl:-scale-x-100" />
             Back
           </Button>
         ) : null}
@@ -1795,7 +1795,7 @@ function SetupWizard({
             disabled={!canAdvance || loading || saving}
           >
             Next
-            <IconArrowRight size={14} />
+            <IconArrowRight size={14} className="rtl:-scale-x-100" />
           </Button>
         ) : (
           <Button

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

@@ -1119,7 +1119,7 @@ export function EmailThread({
                 onClick={goBack}
                 className="mt-0.5 flex h-9 w-9 sm:h-7 sm:w-7 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
               >
-                <IconArrowLeft className="h-[14px] w-[14px]" />
+                <IconArrowLeft className="h-[14px] w-[14px] rtl:-scale-x-100" />
               </button>
             </TooltipTrigger>
             <TooltipContent>Back (Esc)</TooltipContent>
@@ -1166,7 +1166,7 @@ export function EmailThread({
                 )}
                 <button
                   onClick={() => goToSibling(-1)}
-                  className="flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors ml-1"
+                  className="flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors ms-1"
                 >
                   <IconChevronUp className="h-3.5 w-3.5" />
                 </button>
@@ -1181,7 +1181,7 @@ export function EmailThread({
                     <TooltipTrigger asChild>
                       <button
                         onClick={onToggleMaximize}
-                        className="flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors ml-1"
+                        className="flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors ms-1"
                         aria-label={isMaximized ? "Minimize" : "Maximize"}
                         aria-pressed={isMaximized}
                       >
@@ -1498,7 +1498,7 @@ function ThreadLoadingState({
                 onClick={onBack}
                 className="mt-0.5 flex h-9 w-9 sm:h-7 sm:w-7 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
               >
-                <IconArrowLeft className="h-[14px] w-[14px]" />
+                <IconArrowLeft className="h-[14px] w-[14px] rtl:-scale-x-100" />
               </button>
             </TooltipTrigger>
             <TooltipContent>Back (Esc)</TooltipContent>
@@ -1639,7 +1639,7 @@ const CollapsedMessageRow = forwardRef<
       <span className="text-[13px] text-muted-foreground truncate flex-1">
         {email.snippet}
       </span>
-      <span className="text-[12px] text-muted-foreground/60 tabular-nums shrink-0 ml-2">
+      <span className="text-[12px] text-muted-foreground/60 tabular-nums shrink-0 ms-2">
         {formatEmailDate(email.date)}
       </span>
     </div>
@@ -1795,7 +1795,7 @@ const ExpandedMessageCard = forwardRef<
                 e.stopPropagation();
                 setShowDetails(true);
               }}
-              className="text-[12px] text-muted-foreground/50 hover:text-muted-foreground transition-colors truncate text-left"
+              className="text-[12px] text-muted-foreground/50 hover:text-muted-foreground transition-colors truncate text-start"
             >
               to {recipients}
             </button>
@@ -1812,7 +1812,7 @@ const ExpandedMessageCard = forwardRef<
                   }}
                   className="flex h-9 w-9 sm:h-6 sm:w-6 items-center justify-center rounded text-muted-foreground/40 hover:text-foreground transition-colors"
                 >
-                  <IconArrowBackUp className="h-4 w-4 sm:h-[14px] sm:w-[14px]" />
+                  <IconArrowBackUp className="h-4 w-4 sm:h-[14px] sm:w-[14px] rtl:-scale-x-100" />
                 </button>
               </TooltipTrigger>
               <TooltipContent>Reply</TooltipContent>
@@ -1826,7 +1826,7 @@ const ExpandedMessageCard = forwardRef<
                   }}
                   className="flex h-9 w-9 sm:h-6 sm:w-6 items-center justify-center rounded text-muted-foreground/40 hover:text-foreground transition-colors"
                 >
-                  <IconArrowBackUpDouble className="h-4 w-4 sm:h-[14px] sm:w-[14px]" />
+                  <IconArrowBackUpDouble className="h-4 w-4 sm:h-[14px] sm:w-[14px] rtl:-scale-x-100" />
                 </button>
               </TooltipTrigger>
               <TooltipContent>Reply All</TooltipContent>
@@ -1840,7 +1840,7 @@ const ExpandedMessageCard = forwardRef<
                   }}
                   className="flex h-9 w-9 sm:h-6 sm:w-6 items-center justify-center rounded text-muted-foreground/40 hover:text-foreground transition-colors"
                 >
-                  <IconArrowForwardUp className="h-4 w-4 sm:h-[14px] sm:w-[14px]" />
+                  <IconArrowForwardUp className="h-4 w-4 sm:h-[14px] sm:w-[14px] rtl:-scale-x-100" />
                 </button>
               </TooltipTrigger>
               <TooltipContent>Forward</TooltipContent>
@@ -3409,7 +3409,7 @@ function ThreadSearchBar({
           <TooltipTrigger asChild>
             <button
               onClick={onClose}
-              className="flex h-8 w-8 sm:h-6 sm:w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors ml-1"
+              className="flex h-8 w-8 sm:h-6 sm:w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors ms-1"
             >
               <IconX className="h-3.5 w-3.5 sm:h-3 sm:w-3" />
             </button>

package/corpus/templates/mail/app/pages/DraftQueuePage.tsx

@@ -303,7 +303,7 @@ function QueueList({
             key={draft.id}
             onClick={() => onSelect(draft.id)}
             className={cn(
-              "mb-1.5 w-full rounded-md border px-3 py-2.5 text-left transition-colors",
+              "mb-1.5 w-full rounded-md border px-3 py-2.5 text-start transition-colors",
               isActive
                 ? "border-primary/40 bg-primary/10"
                 : "border-border/20 bg-card/40 hover:border-border/50 hover:bg-accent/30",
@@ -488,7 +488,7 @@ function DraftDetail({
                 {sendDraft.isPending ? (
                   <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
                 ) : (
-                  <IconSend className="h-3.5 w-3.5" />
+                  <IconSend className="h-3.5 w-3.5 rtl:-scale-x-100" />
                 )}
                 Send
               </Button>
@@ -718,7 +718,7 @@ export function DraftQueuePage() {
         </div>
       ) : (
         <div className="flex min-h-0 flex-1 flex-col sm:flex-row">
-          <aside className="h-[34dvh] shrink-0 border-b border-border/30 sm:h-auto sm:w-[340px] sm:border-b-0 sm:border-r">
+          <aside className="h-[34dvh] shrink-0 border-b border-border/30 sm:h-auto sm:w-[340px] sm:border-b-0 sm:border-e">
             <QueueList
               drafts={queue.drafts}
               selectedId={selectedId}

package/corpus/templates/mail/app/pages/InboxPage.tsx

@@ -125,7 +125,7 @@ function ThreadListSidebar({
   useKeyboardShortcuts([{ key: "a", meta: true, handler: selectAllThreads }]);
 
   return (
-    <div className="flex h-full w-[220px] min-w-0 shrink-0 flex-col overflow-hidden border-r border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)]">
+    <div className="flex h-full w-[220px] min-w-0 shrink-0 flex-col overflow-hidden border-e border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)]">
       <div className="flex-1 overflow-y-auto">
         {threads.map((thread) => {
           const email = thread.latestMessage;
@@ -151,7 +151,7 @@ function ThreadListSidebar({
                 navigate(`/${view}/${threadKey}${routeSearchSuffix}`);
               }}
               className={cn(
-                "w-full text-left px-3 h-[38px] flex items-center border-b border-border/10 transition-colors",
+                "w-full text-start px-3 h-[38px] flex items-center border-b border-border/10 transition-colors",
                 isMultiSelected
                   ? "bg-primary/20 ring-1 ring-inset ring-primary/40"
                   : isActive
@@ -682,7 +682,7 @@ export function InboxPage() {
 
       {/* Right contact panel — hidden during initial load or when maximized */}
       {!emailListLoading && !(hasThread && isMaximized) && (
-        <div className="hidden lg:flex w-[260px] shrink-0 flex-col border-l border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)]">
+        <div className="hidden lg:flex w-[260px] shrink-0 flex-col border-s border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)]">
           <ContactPanel
             emailId={contactEmailId}
             contactEmail={sidebarContactEmail}

package/corpus/templates/mail/app/pages/SettingsPage.tsx

@@ -1510,7 +1510,7 @@ export function SettingsPage() {
   return (
     <div className="flex flex-1 flex-col sm:flex-row overflow-hidden">
       {/* Top tabs on mobile, left sidebar on desktop */}
-      <div className="sm:w-[200px] shrink-0 sm:border-r border-b sm:border-b-0 border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)] sm:p-3 flex sm:flex-col gap-0.5 overflow-x-auto">
+      <div className="sm:w-[200px] shrink-0 sm:border-e border-b sm:border-b-0 border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)] sm:p-3 flex sm:flex-col gap-0.5 overflow-x-auto">
         <p className="hidden sm:block px-2 py-1.5 text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">
           {t("settings.title")}
         </p>
@@ -1523,7 +1523,7 @@ export function SettingsPage() {
               key={item.id}
               onClick={() => setActiveSection(item.id)}
               className={cn(
-                "flex items-center gap-2.5 sm:w-full rounded-md px-3 sm:px-2.5 py-2.5 sm:py-2 text-[13px] transition-colors text-left whitespace-nowrap",
+                "flex items-center gap-2.5 sm:w-full rounded-md px-3 sm:px-2.5 py-2.5 sm:py-2 text-[13px] transition-colors text-start whitespace-nowrap",
                 isActive
                   ? "bg-indigo-500/15 text-indigo-300 font-medium"
                   : "text-muted-foreground hover:text-foreground hover:bg-accent/50",

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -7271,12 +7271,12 @@ function LocalPlanLoadError({
         </div>
         <div className="mt-5 flex flex-wrap gap-2">
           <Button type="button" variant="outline" onClick={onRetry}>
-            <IconRefresh className="mr-2 size-4" />
+            <IconRefresh className="me-2 size-4" />
             Retry
           </Button>
           <Button asChild type="button" variant="ghost">
             <Link to="/plans">
-              <IconArrowLeft className="mr-2 size-4" />
+              <IconArrowLeft className="me-2 size-4 rtl:-scale-x-100" />
               Plans
             </Link>
           </Button>
@@ -7443,7 +7443,7 @@ function PlanLoadError({
 
   return (
     <div className="flex h-full flex-col items-center justify-center bg-background p-8">
-      <div className="w-full max-w-md rounded-lg border border-border bg-background p-5 text-left shadow-sm">
+      <div className="w-full max-w-md rounded-lg border border-border bg-background p-5 text-start shadow-sm">
         <div className={cn("flex items-start", !showAccessHelp && "gap-3")}>
           {!showAccessHelp && !planMissing && (
             <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-amber-500/25 bg-amber-500/10 text-amber-600 dark:text-amber-300">

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -139,7 +139,7 @@ export default function DeckCard({
       </Link>
 
       {/* Menu Button - always visible on touch devices */}
-      <div className="absolute top-2 right-2 sm:opacity-0 sm:group-hover:opacity-100">
+      <div className="absolute top-2 end-2 sm:opacity-0 sm:group-hover:opacity-100">
         <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
           <DropdownMenuTrigger asChild>
             <button
@@ -170,7 +170,7 @@ export default function DeckCard({
                 startRename();
               }}
             >
-              <IconPencil className="w-3.5 h-3.5 mr-2" />
+              <IconPencil className="w-3.5 h-3.5 me-2" />
               Rename
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -182,7 +182,7 @@ export default function DeckCard({
               }}
               disabled={isDuplicating}
             >
-              <IconCopy className="w-3.5 h-3.5 mr-2" />
+              <IconCopy className="w-3.5 h-3.5 me-2" />
               {isDuplicating ? "Duplicating..." : "Duplicate"}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -194,7 +194,7 @@ export default function DeckCard({
               }}
               className="text-red-400 focus:text-red-400"
             >
-              <IconTrash className="w-3.5 h-3.5 mr-2" />
+              <IconTrash className="w-3.5 h-3.5 me-2" />
               Delete
             </DropdownMenuItem>
           </DropdownMenuContent>

package/corpus/templates/slides/app/components/layout/Layout.tsx

@@ -85,7 +85,7 @@ export function Layout({ children }: LayoutProps) {
           )}
           <div
             className={cn(
-              "fixed inset-y-0 left-0 z-50 md:static md:z-auto",
+              "fixed inset-y-0 start-0 z-50 md:static md:z-auto",
               sidebarOpen
                 ? "translate-x-0"
                 : "-translate-x-full md:translate-x-0",

package/corpus/templates/slides/app/components/layout/Sidebar.tsx

@@ -51,7 +51,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
 
   if (collapsed) {
     return (
-      <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-r border-border bg-sidebar py-2 text-sidebar-foreground">
+      <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-e border-border bg-sidebar py-2 text-sidebar-foreground">
         {onToggleCollapsed && (
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
@@ -60,7 +60,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
                 aria-label={t("sidebar.expandSidebar")}
                 className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
               >
-                <IconLayoutSidebarLeftExpand className="h-4 w-4" />
+                <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="right">
@@ -98,7 +98,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
   }
 
   return (
-    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r border-border bg-sidebar text-sidebar-foreground">
+    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground">
       <div className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
         <div className="flex items-center gap-2">
           <img
@@ -125,7 +125,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
                 aria-label={t("sidebar.collapseSidebar")}
                 className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
               >
-                <IconLayoutSidebarLeftCollapse className="h-4 w-4" />
+                <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
               </button>
             </TooltipTrigger>
             <TooltipContent>{t("sidebar.collapseSidebar")}</TooltipContent>

package/corpus/templates/slides/app/pages/Index.tsx

@@ -506,7 +506,7 @@ export default function Index() {
                 aria-label="Show all decks"
                 className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
               >
-                <IconStack2 className="mr-1.5 h-3.5 w-3.5" />
+                <IconStack2 className="me-1.5 h-3.5 w-3.5" />
                 All
               </ToggleGroupItem>
               <ToggleGroupItem
@@ -514,7 +514,7 @@ export default function Index() {
                 aria-label="Show decks created by me"
                 className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
               >
-                <IconUserCircle className="mr-1.5 h-3.5 w-3.5" />
+                <IconUserCircle className="me-1.5 h-3.5 w-3.5" />
                 Mine
               </ToggleGroupItem>
             </ToggleGroup>
@@ -533,7 +533,7 @@ export default function Index() {
             {/* New deck card */}
             <button
               onClick={openNewDeck}
-              className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-left cursor-pointer"
+              className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-start cursor-pointer"
             >
               <div className="aspect-video flex items-center justify-center bg-muted/30">
                 <div className="w-12 h-12 rounded-xl bg-accent/50 flex items-center justify-center group-hover:bg-accent">

package/corpus/templates/videos/app/components/layout/NavSidebar.tsx

@@ -37,7 +37,7 @@ export function NavSidebar() {
   const t = useT();
 
   return (
-    <aside className="flex h-full w-56 shrink-0 flex-col border-r border-border bg-sidebar text-sidebar-foreground">
+    <aside className="flex h-full w-56 shrink-0 flex-col border-e border-border bg-sidebar text-sidebar-foreground">
       <div className="flex h-12 shrink-0 items-center gap-2 px-4 border-b border-border">
         <img
           src={appPath("/agent-native-icon-light.svg")}

package/corpus/templates/videos/app/pages/ComponentLibraryView.tsx

@@ -302,7 +302,7 @@ export function ComponentLibraryView({
                 Press <strong>Play</strong> to see the cursor demonstrate hover
                 and click interactions:
               </p>
-              <ul className="text-xs text-muted-foreground space-y-1 ml-4 list-disc">
+              <ul className="text-xs text-muted-foreground space-y-1 ms-4 list-disc">
                 <li>
                   <strong>0.0s - 1.3s</strong>: Cursor approaches
                 </li>

package/corpus/templates/videos/app/pages/DesignSystems.tsx

@@ -106,7 +106,7 @@ export default function DesignSystems() {
                   setEditingId(null);
                   setShowSetup(true);
                 }}
-                className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-left cursor-pointer"
+                className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-start cursor-pointer"
               >
                 <div className="aspect-video flex items-center justify-center bg-muted/30">
                   <div className="w-12 h-12 rounded-xl bg-accent/50 flex items-center justify-center group-hover:bg-accent">

package/dist/agent/durable-background.d.ts

@@ -102,11 +102,12 @@ export declare function isHostedRuntimeForDurableBackground(): boolean;
  */
 export declare function isInBackgroundFunctionRuntime(): boolean;
 /**
- * The single gate. True when the flag is not explicitly disabled (default-on)
+ * The single gate. True when the flag is explicitly enabled (opt-in/default-off)
  * AND the runtime is hosted AND A2A_SECRET is configured. False otherwise — and
  * false means the current synchronous behavior is used, unchanged. So a local /
- * non-hosted / unconfigured app stays synchronous even with the flag defaulting
- * on; durable only engages where the runtime actually supports it.
+ * non-hosted / unconfigured app stays synchronous, and an app that has not opted
+ * in stays synchronous; durable only engages where it is explicitly enabled and
+ * the runtime actually supports it.
  */
 export declare function isAgentChatDurableBackgroundEnabled(): boolean;
 /** Decision returned by `prepareProcessRunRequest`. */

package/dist/agent/durable-background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"durable-background.d.ts","sourceRoot":"","sources":["../../src/agent/durable-background.ts"],"names":[],"mappings":"AA6CA;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,2CACE,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,8BAA8B,4BAA4B,CAAC;AAExE;;;;;;;;;GASG;AACH,eAAO,MAAM,kCAAkC,gDAA0D,CAAC;AAsB1G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,sCAAsC,IAAI,MAAM,CAY/D;AAED;;;GAGG;AACH,eAAO,MAAM,iCAAiC,kCACb,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,oBAAoB,CAAC;AAEjE;;;;GAIG;AACH,wBAAgB,mCAAmC,IAAI,OAAO,CAsB7D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,6BAA6B,IAAI,OAAO,CAsBvD;AAyBD;;;;;;GAMG;AACH,wBAAgB,mCAAmC,IAAI,OAAO,CAM7D;AAED,uDAAuD;AACvD,MAAM,MAAM,qBAAqB,GAC7B;IACE,EAAE,EAAE,IAAI,CAAC;IACT,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B,GACD;IACE,EAAE,EAAE,KAAK,CAAC;IACV,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEN;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAahE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,qBAAqB,CAiDvB"}
+{"version":3,"file":"durable-background.d.ts","sourceRoot":"","sources":["../../src/agent/durable-background.ts"],"names":[],"mappings":"AA6CA;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,2CACE,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,8BAA8B,4BAA4B,CAAC;AAExE;;;;;;;;;GASG;AACH,eAAO,MAAM,kCAAkC,gDAA0D,CAAC;AAsB1G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,sCAAsC,IAAI,MAAM,CAY/D;AAED;;;GAGG;AACH,eAAO,MAAM,iCAAiC,kCACb,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,oBAAoB,CAAC;AAEjE;;;;GAIG;AACH,wBAAgB,mCAAmC,IAAI,OAAO,CAsB7D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,6BAA6B,IAAI,OAAO,CAsBvD;AA4BD;;;;;;;GAOG;AACH,wBAAgB,mCAAmC,IAAI,OAAO,CAM7D;AAED,uDAAuD;AACvD,MAAM,MAAM,qBAAqB,GAC7B;IACE,EAAE,EAAE,IAAI,CAAC;IACT,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B,GACD;IACE,EAAE,EAAE,KAAK,CAAC;IACV,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEN;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAahE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,qBAAqB,CAiDvB"}

package/dist/agent/durable-background.js

@@ -207,28 +207,32 @@ function isFlagEnabled() {
     // can statically verify it against the allowlisted `AGENT_*` prefix. Keep this
     // in sync with AGENT_CHAT_DURABLE_BACKGROUND_ENV.
     //
-    // DEFAULT-ON: durable background runs are the desired behavior for every
-    // hosted app. So an unset/empty/unknown flag means ON; an app opts OUT only
-    // with an explicit falsy value. This still composes with the hosted +
-    // A2A_SECRET gates below, so non-hosted / unconfigured apps stay synchronous.
-    // Safety net: a failed dispatch degrades to a synchronous inline run (see
-    // production-agent.ts), so default-on cannot break chat even if the
-    // self-dispatch can't be delivered on a given app.
+    // DEFAULT-OFF (opt-in): durable background runs are still being hardened. A
+    // premature fleet-wide default-on caused real-user incidents (Assets/Analytics
+    // hit "Failed to dispatch" + stalls, 2026-06-24) because the async background
+    // worker path is not yet proven end-to-end and the deploy-time env opt-out is
+    // not reliably baked into a given deploy. So an unset/empty/unknown flag means
+    // OFF; an app opts IN only with an explicit truthy value
+    // (AGENT_CHAT_DURABLE_BACKGROUND=true). This still composes with the hosted +
+    // A2A_SECRET gates below. Flip back to default-on only after the 15-min
+    // background-function worker is verified live in production (see the
+    // project_durable_bg_prod_verified memory).
     const raw = process.env.AGENT_CHAT_DURABLE_BACKGROUND;
     if (raw == null)
-        return true;
+        return false;
     const normalized = raw.trim().toLowerCase();
-    return !(normalized === "0" ||
-        normalized === "false" ||
-        normalized === "no" ||
-        normalized === "off");
+    return (normalized === "1" ||
+        normalized === "true" ||
+        normalized === "yes" ||
+        normalized === "on");
 }
 /**
- * The single gate. True when the flag is not explicitly disabled (default-on)
+ * The single gate. True when the flag is explicitly enabled (opt-in/default-off)
  * AND the runtime is hosted AND A2A_SECRET is configured. False otherwise — and
  * false means the current synchronous behavior is used, unchanged. So a local /
- * non-hosted / unconfigured app stays synchronous even with the flag defaulting
- * on; durable only engages where the runtime actually supports it.
+ * non-hosted / unconfigured app stays synchronous, and an app that has not opted
+ * in stays synchronous; durable only engages where it is explicitly enabled and
+ * the runtime actually supports it.
  */
 export function isAgentChatDurableBackgroundEnabled() {
     return (isFlagEnabled() &&