@agent-native/core 0.76.3 → 0.76.5

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @agent-native/core
 
+## 0.76.5
+
+### Patch Changes
+
+- ba634f4: Durable background agent runs: add a foreground **circuit-breaker** so a dead
+  background worker can no longer break chat. A Netlify async background function
+  returns `202` the instant it enqueues the invocation, but the worker may never
+  execute — e.g. the generated function wrapper fails to import `./main.mjs` or
+  hand off to the Nitro `_process-run` route, so it never reaches
+  `claimBackgroundRun` and the run is reaped as "worker never claimed the run".
+  After a successful dispatch the foreground now polls briefly for the worker to
+  actually claim the run; if it doesn't within the grace window, the turn is
+  recovered **inline** (the same safe atomic-claim path used for a fast dispatch
+  failure), so a dead worker degrades to a working synchronous turn instead of a
+  reaped failure. Also harden the generated background-function wrapper to pass
+  Netlify's `context` through to the Nitro handler and wrap the handoff in
+  try/catch so a pre-route failure is logged loudly instead of silently swallowed
+  behind the async 202.
+
+## 0.76.4
+
+### Patch Changes
+
+- 6067f27: Fix right-to-left (`ar-SA`) layout in shared framework chrome. Physical directional CSS in the agent panel, command menu, language picker, shadcn `ui/*` primitives, settings/composer/org/sharing/onboarding panels, and the agent-conversation/blocks/rich-markdown styles is converted to logical utilities (`ms`/`me`, `ps`/`pe`, `start`/`end`, `text-start`/`text-end`, `border-s`/`border-e`), and directional icons are mirrored with `rtl:-scale-x-100`. No change to left-to-right rendering (logical utilities are identical to physical in LTR).
+
 ## 0.76.3
 
 ### Patch Changes

package/corpus/core/package.json

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

package/corpus/core/src/agent/production-agent.ts

@@ -109,6 +109,7 @@ import {
   updateRunHeartbeat,
   updateRunStatusIfRunning,
   claimBackgroundRun,
+  readBackgroundRunClaim,
   recordRunDiagnostic,
   RUN_DIAG_STAGE,
 } from "./run-store.js";
@@ -149,6 +150,96 @@ registerBuiltinEngines();
 
 export { PROVIDER_TO_ENV };
 
+/**
+ * Grace window + poll interval for the foreground circuit-breaker that confirms
+ * a background worker actually CLAIMED a 202-dispatched run before recovering
+ * inline. The grace is long enough for a cold-start worker to win the claim
+ * (~1-2s typical) and short enough to recover quickly within the foreground's
+ * ~40s soft-timeout.
+ */
+export const BACKGROUND_CLAIM_GRACE_MS = 8_000;
+export const BACKGROUND_CLAIM_POLL_MS = 400;
+
+export type BackgroundDispatchOutcome =
+  | { action: "stream" }
+  | { action: "subscribe" }
+  | {
+      action: "inline";
+      reason: "dispatch-failed" | "worker-never-claimed" | "no-row";
+    };
+
+/**
+ * Decide what the foreground should do after attempting a durable background
+ * dispatch. A Netlify async background function returns 202 the instant it
+ * ENQUEUES the invocation — that is NOT proof the worker executed. If the
+ * generated wrapper fails to import/hand off to the route, the worker never
+ * reaches `claimBackgroundRun` and the run is reaped as "worker never claimed".
+ *
+ * So after a successful dispatch we poll briefly for the worker to CLAIM the run:
+ *   - claimed within grace        → "stream"    (subscribe to the worker)
+ *   - dispatch failed OR no claim  → recover inline by atomically claiming the
+ *       run ourselves: if we win → "inline"; if a (delayed) worker already won
+ *       it → "subscribe" (never double-run).
+ *
+ * Pure except for the injected `readClaim`/`claim`/`now`/`sleep` deps, so each
+ * branch is unit-testable.
+ */
+export async function resolveBackgroundDispatchOutcome(opts: {
+  dispatched: boolean;
+  backgroundRowInserted: boolean;
+  runId: string;
+  graceMs: number;
+  pollIntervalMs: number;
+  readClaim: (
+    runId: string,
+  ) => Promise<{ dispatchMode: string | null; status: string | null } | null>;
+  claim: (runId: string) => Promise<boolean>;
+  now?: () => number;
+  sleep?: (ms: number) => Promise<void>;
+}): Promise<BackgroundDispatchOutcome> {
+  const now = opts.now ?? (() => Date.now());
+  const sleep =
+    opts.sleep ?? ((ms: number) => new Promise<void>((r) => setTimeout(r, ms)));
+
+  if (opts.dispatched) {
+    const deadline = now() + opts.graceMs;
+    for (;;) {
+      const claim = await opts.readClaim(opts.runId).catch(() => null);
+      if (
+        claim &&
+        ((claim.dispatchMode && claim.dispatchMode !== "background") ||
+          (claim.status && claim.status !== "running"))
+      ) {
+        return { action: "stream" };
+      }
+      if (now() >= deadline) break;
+      await sleep(opts.pollIntervalMs);
+    }
+  }
+
+  // Dispatch fast-failed OR no worker claimed within grace → recover inline.
+  if (!opts.backgroundRowInserted) {
+    // No row to reconcile (insert failed / non-duplicate) — run a fresh inline
+    // turn; `startRun` inserts the row.
+    return { action: "inline", reason: "no-row" };
+  }
+  let claimedInline = false;
+  try {
+    claimedInline = await opts.claim(opts.runId);
+  } catch {
+    claimedInline = false;
+  }
+  if (claimedInline) {
+    return {
+      action: "inline",
+      reason: opts.dispatched ? "worker-never-claimed" : "dispatch-failed",
+    };
+  }
+  // The atomic claim was lost: a (delayed) background worker already owns the
+  // run — subscribe to it, never run a second copy.
+  return { action: "subscribe" };
+}
+
 const SAFE_BROWSER_TAB_ID_RE = /^[A-Za-z0-9_-]{1,96}$/;
 
 function normalizeBrowserTabId(value: unknown): string | undefined {
@@ -4425,7 +4516,33 @@ export function createProductionAgentHandler(
         );
       }
 
-      if (dispatched) {
+      // ─── Circuit-breaker: a 202 only ENQUEUES the background invocation ─────
+      // It is NOT proof the worker executed. If the generated background-function
+      // wrapper fails to import `./main.mjs` or hand off to the Nitro
+      // `_process-run` route, the worker never reaches `claimBackgroundRun`: the
+      // row sits at `dispatch_mode='background'` until the reaper errors it
+      // ("worker never claimed the run"). `resolveBackgroundDispatchOutcome`
+      // polls briefly for the claim and decides:
+      //   - "stream":    a worker claimed the run → subscribe to it.
+      //   - "subscribe": a (delayed) worker already owns it → subscribe, NEVER
+      //                  run a second copy.
+      //   - "inline":    dispatch failed OR no worker claimed within grace → we
+      //                  atomically own the run; recover by running it inline so a
+      //                  dead worker degrades to a working synchronous turn.
+      const backgroundOutcome = await resolveBackgroundDispatchOutcome({
+        dispatched,
+        backgroundRowInserted,
+        runId,
+        graceMs: BACKGROUND_CLAIM_GRACE_MS,
+        pollIntervalMs: BACKGROUND_CLAIM_POLL_MS,
+        readClaim: readBackgroundRunClaim,
+        claim: claimBackgroundRun,
+      });
+
+      if (
+        backgroundOutcome.action === "stream" ||
+        backgroundOutcome.action === "subscribe"
+      ) {
         const stream = subscribeToRun(runId, 0);
         if (stream) {
           setResponseHeader(event, "Content-Type", "text/event-stream");
@@ -4434,65 +4551,39 @@ export function createProductionAgentHandler(
           setResponseHeader(event, "X-Run-Id", runId);
           return stream;
         }
-        // Subscription failed even though dispatch landed — surface an error
-        // rather than silently running inline (the background worker is already
-        // processing this runId, so an inline second run would double-execute).
+        // A background worker owns this run but we cannot subscribe — surface an
+        // error rather than risk a double-run by falling through to inline.
+        await updateRunStatusIfRunning(runId, "errored").catch(() => {});
         setResponseStatus(event, 500);
-        return { error: "Failed to subscribe to background run" };
+        return {
+          error:
+            backgroundOutcome.action === "stream"
+              ? "Failed to subscribe to background run"
+              : "Failed to dispatch background run",
+        };
       }
 
-      // ─── Dispatch failed → degrade to a normal synchronous (inline) run ────
-      // `fireInternalDispatch` throws ONLY when the self-POST failed *fast*
-      // (rejected the connection, or returned a non-2xx within the ~250ms settle
-      // race). The `_process-run` route verifies the HMAC token and validates
-      // the body BEFORE it ever reaches the SQL atomic claim, so a fast throw
-      // means NO background worker claimed this run — there is nothing to
-      // double-execute. Rather than break the chat with "Failed to dispatch
-      // background run", we run the turn inline (the same synchronous path the
-      // flag-off branch below takes), reusing the already-inserted run row.
-      //
-      // Safety against a (very improbable) delayed background delivery: claim the
-      // run atomically here via `claimBackgroundRun`, which flips the row's
-      // dispatch_mode `background → background-processing` in one conditional
-      // UPDATE. If a delayed dispatch DID land and a worker already won the
-      // claim, our claim returns false and we must NOT run inline (that would
-      // double-execute) — fall back to subscribing to the worker's run instead.
-      // The SQL atomic claim is the single source of truth for ownership, so at
-      // most one of {inline fallback, background worker} ever executes this run.
-      if (backgroundRowInserted) {
-        let claimedInline = false;
-        try {
-          claimedInline = await claimBackgroundRun(runId);
-        } catch (err) {
-          console.error(
-            "[agent-chat] inline-fallback claim failed:",
-            err instanceof Error ? err.message : err,
-          );
-        }
-        if (!claimedInline) {
-          // A background worker already owns this run (a delayed delivery landed
-          // after our fast throw). Stream its events instead of running a second
-          // copy. If we somehow can't subscribe, surface an error rather than
-          // risk a double-run.
-          const stream = subscribeToRun(runId, 0);
-          if (stream) {
-            setResponseHeader(event, "Content-Type", "text/event-stream");
-            setResponseHeader(event, "Cache-Control", "no-cache");
-            setResponseHeader(event, "Connection", "keep-alive");
-            setResponseHeader(event, "X-Run-Id", runId);
-            return stream;
-          }
-          await updateRunStatusIfRunning(runId, "errored").catch(() => {});
-          setResponseStatus(event, 500);
-          return { error: "Failed to dispatch background run" };
-        }
-        // We own the run. `startRun` (below) calls `insertRun` again, but its
-        // duplicate-PK collision is swallowed (`insertRun(...).catch(() => {})`),
-        // so the existing `background-processing` row is reused — no double row.
+      // backgroundOutcome.action === "inline": we atomically own the run (or
+      // there was no row to reconcile), so falling through to the inline
+      // `startRun` path below cannot double-execute. `startRun` calls `insertRun`
+      // again, but its duplicate-PK collision is swallowed, so an existing
+      // `background-processing` row is reused — no double row.
+      if (backgroundOutcome.reason === "worker-never-claimed") {
+        // The async 202 landed but no worker claimed within grace — the generated
+        // wrapper never reached the route. Record it so the failure is visible on
+        // the run even though the user still gets a working (inline) turn.
+        console.error(
+          "[agent-chat] background worker did not claim the 202-dispatched run " +
+            "within grace; recovering inline:",
+          runId,
+        );
+        await recordRunDiagnostic(
+          runId,
+          RUN_DIAG_STAGE.foregroundInlineRecovery,
+          "202 dispatched but no worker claimed within the foreground grace window",
+        ).catch(() => {});
       }
-      // Fall through to the inline `startRun` path below (the same one the
-      // flag-off branch uses). If the row was never inserted, `startRun` inserts
-      // it fresh; if it was, the claim above made us the sole owner.
+      // Fall through to the inline `startRun` path below.
     }
 
     const trackedProgressOwner =

package/corpus/core/src/agent/run-store.ts

@@ -378,6 +378,35 @@ export async function claimBackgroundRun(runId: string): Promise<boolean> {
   return (rowsAffected ?? 0) > 0;
 }
 
+/**
+ * Read the claim/lifecycle state of a single run by id — for the foreground
+ * circuit-breaker that confirms a background worker actually CLAIMED a run that
+ * was dispatched with a Netlify async 202. A 202 only means the invocation was
+ * ENQUEUED; if the generated background-function wrapper fails to import/hand off
+ * to the route it never reaches `claimBackgroundRun`, leaving the row stuck at
+ * `dispatch_mode = 'background'`. `'background-processing'` means a worker won
+ * the claim; a terminal `status` means the run already resolved. Returns null if
+ * the row is missing.
+ */
+export async function readBackgroundRunClaim(
+  runId: string,
+): Promise<{ dispatchMode: string | null; status: string | null } | null> {
+  await ensureRunTables();
+  const client = getDbExec();
+  const { rows } = await client.execute({
+    sql: `SELECT dispatch_mode, status FROM agent_runs WHERE id = ? LIMIT 1`,
+    args: [runId],
+  });
+  const row = rows?.[0] as
+    | { dispatch_mode?: string | null; status?: string | null }
+    | undefined;
+  if (!row) return null;
+  return {
+    dispatchMode: row.dispatch_mode ?? null,
+    status: row.status ?? null,
+  };
+}
+
 /**
  * Atomically acquire a run lease for a thread. Succeeds (returns true) only
  * when no other run for the same thread is currently status='running' with a
@@ -481,6 +510,13 @@ export const RUN_DIAG_STAGE = {
   workerThrew: "worker_threw",
   /** The route handler caught an error from the worker invocation. */
   routeThrew: "route_threw",
+  /**
+   * The foreground circuit-breaker fired: a Netlify async 202 was returned but
+   * no background worker CLAIMED the run within the foreground grace window
+   * (the generated function wrapper never reached the route), so the foreground
+   * recovered by running the turn inline. The run still completes for the user.
+   */
+  foregroundInlineRecovery: "foreground_inline_recovery",
 } as const;
 
 export type RunDiagStage = (typeof RUN_DIAG_STAGE)[keyof typeof RUN_DIAG_STAGE];

package/corpus/core/src/client/AgentPanel.tsx

@@ -1038,7 +1038,7 @@ function AgentPanelInner({
               type="button"
               tabIndex={-1}
               aria-hidden="true"
-              className="pointer-events-none absolute right-0 top-full h-px w-px opacity-0"
+              className="pointer-events-none absolute end-0 top-full h-px w-px opacity-0"
             />
           }
         />
@@ -1344,7 +1344,7 @@ function AgentPanelInner({
                                   : "text-muted-foreground hover:bg-accent hover:text-foreground",
                               )}
                             >
-                              <span className="truncate pr-1">{tab.label}</span>
+                              <span className="truncate pe-1">{tab.label}</span>
                               {tab.status === "running" && (
                                 <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" />
                               )}
@@ -1458,7 +1458,7 @@ function AgentPanelInner({
                               : "text-muted-foreground hover:bg-accent hover:text-foreground",
                           )}
                         >
-                          <span className="truncate pr-1">
+                          <span className="truncate pe-1">
                             {tab.subAgentName || tab.label}
                           </span>
                           {tab.status === "running" && (

package/corpus/core/src/client/AgentTaskCard.tsx

@@ -185,7 +185,7 @@ export function AgentTaskCard({
       <button
         type="button"
         aria-expanded={expanded}
-        className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-muted/45"
+        className="flex w-full items-center gap-2 px-3 py-2 text-start transition-colors hover:bg-muted/45"
         onClick={() => setExpanded(!expanded)}
       >
         <span className="inline-flex h-5 shrink-0 items-center gap-1 rounded-md border border-border/60 bg-background/70 px-1.5 text-[10px] font-medium text-muted-foreground">
@@ -212,6 +212,7 @@ export function AgentTaskCard({
           className={cn(
             "h-3 w-3 shrink-0 text-muted-foreground/40 transition-transform duration-150",
             expanded && "rotate-90",
+            "rtl:-scale-x-100",
           )}
         />
       </button>

package/corpus/core/src/client/AppearancePicker.tsx

@@ -59,7 +59,7 @@ export function AppearancePicker({
                     style={{ background: preset.swatch }}
                   />
                   {active && (
-                    <span className="pointer-events-none absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full border border-border bg-background">
+                    <span className="pointer-events-none absolute -end-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full border border-border bg-background">
                       <IconCheck
                         className="h-3 w-3 text-foreground"
                         stroke={3}

package/corpus/core/src/client/AssistantChat.tsx

@@ -392,8 +392,8 @@ function ComposerAttachmentPreviewCard({
         className={cn(
           "absolute flex h-6 w-6 items-center justify-center rounded-full border border-border/60 bg-background/95 text-muted-foreground shadow-sm transition hover:text-foreground",
           isImage
-            ? "right-1.5 top-1.5 opacity-100 md:opacity-0 md:group-hover:opacity-100"
-            : "right-1.5 top-1.5",
+            ? "end-1.5 top-1.5 opacity-100 md:opacity-0 md:group-hover:opacity-100"
+            : "end-1.5 top-1.5",
         )}
         aria-label={`Remove ${attachment.name}`}
       >
@@ -3133,7 +3133,7 @@ const AssistantChatInner = forwardRef<
                                   content: [{ type: "text", text: suggestion }],
                                 });
                               }}
-                              className="w-full rounded-lg border border-border px-3 py-2 text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground"
+                              className="w-full rounded-lg border border-border px-3 py-2 text-start text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground"
                             >
                               {suggestion}
                             </button>

package/corpus/core/src/client/CommandMenu.tsx

@@ -179,7 +179,7 @@ function CommandShortcut({ children, className }: CommandShortcutProps) {
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
     >
@@ -514,7 +514,7 @@ export function CommandMenu({
             >
               {/* Search input */}
               <div className="flex items-center border-b px-3">
-                <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                <IconSearch className="me-2 h-4 w-4 shrink-0 opacity-50" />
                 <input
                   ref={inputRef}
                   value={search}
@@ -554,7 +554,7 @@ export function CommandMenu({
                         <span>{changelogLabel}</span>
                         {changelogUnseen && (
                           <span
-                            className="ml-auto h-2 w-2 rounded-full bg-primary"
+                            className="ms-auto h-2 w-2 rounded-full bg-primary"
                             aria-label="New updates available"
                           />
                         )}
@@ -600,7 +600,7 @@ export function CommandMenu({
                           )}
                         </span>
                         {search.trim() && (
-                          <span className="ml-auto text-xs text-muted-foreground">
+                          <span className="ms-auto text-xs text-muted-foreground">
                             ↵
                           </span>
                         )}

package/corpus/core/src/client/ErrorBoundary.tsx

@@ -132,7 +132,7 @@ function ErrorScreen({ error }: { error: unknown }) {
           Reload
         </button>
         {stack && (
-          <pre className="mt-6 w-full text-left text-xs overflow-auto p-4 bg-muted rounded">
+          <pre className="mt-6 w-full text-start text-xs overflow-auto p-4 bg-muted rounded">
             <code>{stack}</code>
           </pre>
         )}

package/corpus/core/src/client/MultiTabAssistantChat.tsx

@@ -196,7 +196,7 @@ function ChatSkeleton({
       {header ?? (
         <div className="flex items-center px-1 py-1 border-b border-border shrink-0 gap-0.5">
           <div className="h-[22px] w-20 rounded-md bg-muted animate-pulse" />
-          <div className="ml-auto flex gap-0.5">
+          <div className="ms-auto flex gap-0.5">
             <div className="h-[22px] w-[22px] rounded-md bg-muted animate-pulse" />
             <div className="h-[22px] w-[22px] rounded-md bg-muted animate-pulse" />
           </div>
@@ -290,7 +290,7 @@ function ScopeBadge({
             <span className="min-w-0 truncate">{heading}</span>
             {otherCount > 0 && (
               <span
-                className="ml-0.5 shrink-0 rounded-full bg-muted px-1.5 py-px text-[10px] leading-none text-muted-foreground"
+                className="ms-0.5 shrink-0 rounded-full bg-muted px-1.5 py-px text-[10px] leading-none text-muted-foreground"
                 aria-label={`${otherCount} other chats for ${objectLabel}`}
               >
                 +{otherCount}
@@ -373,7 +373,7 @@ function PreviousScopedChatsHint({
             key={thread.id}
             type="button"
             onClick={() => onSelectThread(thread.id)}
-            className="flex items-baseline justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-left hover:bg-accent cursor-pointer"
+            className="flex items-baseline justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-start hover:bg-accent cursor-pointer"
           >
             <span className="truncate text-[12px] text-foreground">
               {thread.title || thread.preview || "Chat"}
@@ -443,7 +443,7 @@ function renderThreadRow(
         onClose();
       }}
       className={cn(
-        "w-full px-3 py-2 text-left hover:bg-accent/50 cursor-pointer",
+        "w-full px-3 py-2 text-start hover:bg-accent/50 cursor-pointer",
         isActive && "bg-accent/30",
       )}
     >
@@ -568,7 +568,7 @@ function HistoryPopover({
   return (
     <Popover open onOpenChange={(open) => !open && onClose()}>
       <PopoverAnchor asChild>
-        <span aria-hidden className="absolute right-2 top-0 h-px w-px" />
+        <span aria-hidden className="absolute end-2 top-0 h-px w-px" />
       </PopoverAnchor>
       <PopoverContent
         align="end"
@@ -682,7 +682,7 @@ function HelpPopover({ onClose }: { onClose: () => void }) {
   return (
     <>
       <div className="fixed inset-0 z-40" onClick={onClose} />
-      <div className="absolute right-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg">
+      <div className="absolute end-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg">
         <div className="flex items-center justify-between px-3 py-2 border-b border-border">
           <span className="text-xs font-medium text-foreground">
             Available Commands
@@ -2548,9 +2548,9 @@ export function MultiTabAssistantChat({
                             <button
                               type="button"
                               onClick={() => switchThread(tab.id)}
-                              className="flex items-center gap-1 px-2.5 py-1.5 min-w-0 flex-1 text-left"
+                              className="flex items-center gap-1 px-2.5 py-1.5 min-w-0 flex-1 text-start"
                             >
-                              <span className="truncate pr-1">{tab.label}</span>
+                              <span className="truncate pe-1">{tab.label}</span>
                               {tab.status === "running" && (
                                 <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0 animate-pulse" />
                               )}
@@ -2583,7 +2583,7 @@ export function MultiTabAssistantChat({
                       })}
                     </div>
                     <TooltipProvider delayDuration={200}>
-                      <div className="flex items-center gap-px shrink-0 ml-auto">
+                      <div className="flex items-center gap-px shrink-0 ms-auto">
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <button
@@ -2646,9 +2646,9 @@ export function MultiTabAssistantChat({
                             <button
                               type="button"
                               onClick={() => switchThread(tab.id)}
-                              className="flex items-center gap-1 px-2 py-1 min-w-0 flex-1 text-left"
+                              className="flex items-center gap-1 px-2 py-1 min-w-0 flex-1 text-start"
                             >
-                              <span className="truncate pr-1">
+                              <span className="truncate pe-1">
                                 {tab.subAgentName || tab.label}
                               </span>
                               {tab.status === "running" && (

package/corpus/core/src/client/NewWorkspaceAppFlow.tsx

@@ -344,7 +344,7 @@ export function NewWorkspaceAppFlow({
                   href={branchUrl}
                   target="_blank"
                   rel="noreferrer"
-                  className="ml-2 inline-flex items-center gap-1 font-medium text-foreground underline"
+                  className="ms-2 inline-flex items-center gap-1 font-medium text-foreground underline"
                 >
                   Open branch <IconArrowUpRight className="h-3 w-3" />
                 </a>
@@ -394,7 +394,7 @@ export function NewWorkspaceAppFlow({
                       type="button"
                       aria-pressed={selected}
                       onClick={() => toggleSecret(secret.id)}
-                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                     >
                       <span
                         className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border transition ${
@@ -421,7 +421,7 @@ export function NewWorkspaceAppFlow({
                         <IconChevronDown className="h-3 w-3 transition-transform group-open/details:rotate-180" />
                         Details
                       </summary>
-                      <div className="mt-1.5 space-y-1 pb-0.5 pl-4">
+                      <div className="mt-1.5 space-y-1 pb-0.5 ps-4">
                         <div className="truncate">
                           Provider: {secret.provider || "Not specified"}
                         </div>
@@ -470,7 +470,7 @@ export function NewWorkspaceAppFlow({
                       type="button"
                       aria-pressed={selected}
                       onClick={() => toggleResource(resource.id)}
-                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                     >
                       <span
                         className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border transition ${
@@ -498,7 +498,7 @@ export function NewWorkspaceAppFlow({
                         <IconChevronDown className="h-3 w-3 transition-transform group-open/details:rotate-180" />
                         Details
                       </summary>
-                      <div className="mt-1.5 space-y-1 pb-0.5 pl-4">
+                      <div className="mt-1.5 space-y-1 pb-0.5 ps-4">
                         <div className="truncate">
                           Scope:{" "}
                           {resource.scope === "all"