@cat-factory/app 0.54.3 → 0.55.0

package/app/components/kaizen/KaizenPanel.vue

@@ -69,7 +69,7 @@ function statusLabel(g: KaizenGrading): string {
               {{ t('kaizen.subtitle') }}
             </p>
           </div>
-          <div class="ml-auto flex items-center gap-2">
+          <div class="ms-auto flex items-center gap-2">
             <UButton
               icon="i-lucide-refresh-cw"
               size="xs"
@@ -124,9 +124,9 @@ function statusLabel(g: KaizenGrading): string {
                   <UIcon
                     v-if="c.verified"
                     name="i-lucide-badge-check"
-                    class="ml-auto h-3.5 w-3.5 text-emerald-400"
+                    class="ms-auto h-3.5 w-3.5 text-emerald-400"
                   />
-                  <span v-else class="ml-auto text-[11px] text-slate-500">
+                  <span v-else class="ms-auto text-[11px] text-slate-500">
                     {{ t('kaizen.verifiedCombos.progress', { count: c.consecutiveHighGrades }) }}
                   </span>
                 </div>
@@ -152,7 +152,7 @@ function statusLabel(g: KaizenGrading): string {
               {{ t('kaizen.history.title') }}
             </h2>
             <div class="overflow-hidden rounded-lg border border-slate-800">
-              <table class="w-full text-left text-xs">
+              <table class="w-full text-start text-xs">
                 <thead class="bg-slate-900/60 text-[11px] uppercase tracking-wide text-slate-500">
                   <tr>
                     <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.when') }}</th>
@@ -189,7 +189,7 @@ function statusLabel(g: KaizenGrading): string {
                       {{ statusLabel(g) }}
                     </td>
                     <td class="px-3 py-2 text-slate-400">
-                      <ul v-if="g.recommendations.length" class="list-disc space-y-0.5 pl-4">
+                      <ul v-if="g.recommendations.length" class="list-disc space-y-0.5 ps-4">
                         <li v-for="(r, i) in g.recommendations" :key="i">{{ r }}</li>
                       </ul>
                       <span v-else-if="g.status === 'complete'" class="text-slate-600">—</span>

package/app/components/kaizen/KaizenStepStatus.vue

@@ -47,7 +47,7 @@ const tone = computed(() => {
     <div class="flex items-center gap-2">
       <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-teal-400" />
       <h3 class="text-sm font-semibold text-slate-200">{{ t('kaizen.grading.title') }}</h3>
-      <span class="ml-auto flex items-center gap-1.5 text-xs">
+      <span class="ms-auto flex items-center gap-1.5 text-xs">
         <template v-if="grading.status === 'scheduled'">
           <UIcon name="i-lucide-clock" class="h-3.5 w-3.5 text-slate-500" />
           <span class="text-slate-400">{{ t('kaizen.status.scheduled') }}</span>
@@ -78,7 +78,7 @@ const tone = computed(() => {
         <p class="text-[11px] font-medium uppercase tracking-wide text-slate-500">
           {{ t('kaizen.recommendations') }}
         </p>
-        <ul class="mt-1 list-disc space-y-0.5 pl-4 text-xs text-slate-300">
+        <ul class="mt-1 list-disc space-y-0.5 ps-4 text-xs text-slate-300">
           <li v-for="(r, i) in grading.recommendations" :key="i">{{ r }}</li>
         </ul>
       </div>

package/app/components/layout/BoardSwitcher.vue

@@ -232,7 +232,7 @@ async function submitPrompt() {
     >
       <button
         type="button"
-        class="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left transition hover:bg-slate-800/60"
+        class="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-start transition hover:bg-slate-800/60"
         :disabled="busy"
       >
         <UIcon
@@ -244,7 +244,7 @@ async function submitPrompt() {
         </span>
         <UIcon
           name="i-lucide-chevrons-up-down"
-          class="ml-auto h-3.5 w-3.5 shrink-0 text-slate-600"
+          class="ms-auto h-3.5 w-3.5 shrink-0 text-slate-600"
         />
       </button>
     </UDropdownMenu>
@@ -253,14 +253,14 @@ async function submitPrompt() {
     <UDropdownMenu :items="boardItems" :content="{ align: 'start' }" class="w-full">
       <button
         type="button"
-        class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-2.5 py-1.5 text-left transition hover:bg-slate-800/60"
+        class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-2.5 py-1.5 text-start transition hover:bg-slate-800/60"
         :disabled="busy"
       >
         <UIcon name="i-lucide-layout-dashboard" class="h-4 w-4 shrink-0 text-indigo-400" />
         <span class="truncate text-sm font-medium text-white">
           {{ workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback') }}
         </span>
-        <UIcon name="i-lucide-chevron-down" class="ml-auto h-4 w-4 shrink-0 text-slate-500" />
+        <UIcon name="i-lucide-chevron-down" class="ms-auto h-4 w-4 shrink-0 text-slate-500" />
       </button>
     </UDropdownMenu>
 

package/app/components/layout/CommandBar.vue

@@ -321,7 +321,7 @@ function indexOf(cmd: Command) {
               v-for="cmd in group.items"
               :key="cmd.id"
               type="button"
-              class="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition"
+              class="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-start text-sm transition"
               :class="
                 indexOf(cmd) === activeIndex
                   ? 'bg-slate-800 text-slate-100'

package/app/components/layout/IntegrationBackTitle.vue

@@ -23,10 +23,11 @@ const backLabel = computed(() =>
     <UButton
       v-if="cameFromHub"
       icon="i-lucide-arrow-left"
+      :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
       color="neutral"
       variant="ghost"
       size="xs"
-      class="-ml-1.5 shrink-0"
+      class="-ms-1.5 shrink-0"
       :aria-label="backLabel"
       @click.stop="emit('back')"
     />

package/app/components/layout/IntegrationsHub.vue

@@ -390,7 +390,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
               v-for="item in group.items"
               :key="item.key"
               type="button"
-              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-left transition hover:border-slate-700 hover:bg-slate-900"
+              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-start transition hover:border-slate-700 hover:bg-slate-900"
               @click="item.onClick()"
             >
               <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
@@ -417,7 +417,10 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
                 </div>
                 <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
               </div>
-              <UIcon name="i-lucide-chevron-right" class="h-4 w-4 shrink-0 text-slate-500" />
+              <UIcon
+                name="i-lucide-chevron-right"
+                class="h-4 w-4 shrink-0 text-slate-500 rtl:-scale-x-100"
+              />
             </button>
           </div>
 
@@ -425,7 +428,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
           <button
             v-if="group.footerLink"
             type="button"
-            class="mt-1.5 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-xs text-slate-400 transition hover:bg-slate-900/60 hover:text-slate-200"
+            class="mt-1.5 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-start text-xs text-slate-400 transition hover:bg-slate-900/60 hover:text-slate-200"
             @click="group.footerLink.onClick()"
           >
             <UIcon :name="group.footerLink.icon" class="h-3.5 w-3.5 shrink-0" />
@@ -433,7 +436,10 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
             <span v-if="group.footerLink.status" class="shrink-0 text-slate-500">{{
               group.footerLink.status
             }}</span>
-            <UIcon name="i-lucide-chevron-right" class="h-3.5 w-3.5 shrink-0 text-slate-600" />
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="h-3.5 w-3.5 shrink-0 text-slate-600 rtl:-scale-x-100"
+            />
           </button>
         </section>
       </div>

package/app/components/layout/LanguageSwitcher.vue

@@ -39,7 +39,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
       type="button"
       data-testid="language-switcher"
       :aria-label="t('language.switcher')"
-      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-left transition hover:bg-slate-800/60"
+      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-start transition hover:bg-slate-800/60"
     >
       <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-slate-400" />
       <div class="min-w-0 flex-1">

package/app/components/layout/NotificationsInbox.vue

@@ -226,7 +226,7 @@ function revealDecision(n: Notification) {
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-1.5">
                 <button
-                  class="block min-w-0 flex-1 truncate text-left text-sm font-medium text-slate-200 hover:underline"
+                  class="block min-w-0 flex-1 truncate text-start text-sm font-medium text-slate-200 hover:underline"
                   :title="n.title"
                   @click="reveal(n)"
                 >

package/app/components/layout/PersonalSetupModal.vue

@@ -125,7 +125,7 @@ const groups = computed<PersonalGroup[]>(() => {
               v-for="item in group.items"
               :key="item.key"
               type="button"
-              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-left transition hover:border-slate-700 hover:bg-slate-900"
+              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-start transition hover:border-slate-700 hover:bg-slate-900"
               @click="item.onClick()"
             >
               <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
@@ -141,7 +141,10 @@ const groups = computed<PersonalGroup[]>(() => {
                 </div>
                 <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
               </div>
-              <UIcon name="i-lucide-chevron-right" class="h-4 w-4 shrink-0 text-slate-500" />
+              <UIcon
+                name="i-lucide-chevron-right"
+                class="h-4 w-4 shrink-0 text-slate-500 rtl:-scale-x-100"
+              />
             </button>
           </div>
         </section>

package/app/components/layout/SideBar.vue

@@ -139,8 +139,10 @@ watch(
     :aria-modal="drawerOpen ? 'true' : undefined"
     :aria-label="isCompact ? t('nav.menu') : undefined"
     :inert="isCompact && !ui.mobileNavOpen"
-    class="fixed inset-y-0 left-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-r border-slate-800 bg-slate-900/95 p-3 backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
-    :class="ui.mobileNavOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
+    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-slate-800 bg-slate-900/95 p-3 backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
+    :class="
+      ui.mobileNavOpen ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full lg:translate-x-0'
+    "
   >
     <BoardSwitcher />
 
@@ -149,7 +151,7 @@ watch(
          and reach every action below. -->
       <button
         type="button"
-        class="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/60 px-2.5 py-2 text-left text-sm text-slate-400 transition hover:border-slate-500 hover:bg-slate-800"
+        class="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/60 px-2.5 py-2 text-start text-sm text-slate-400 transition hover:border-slate-500 hover:bg-slate-800"
         @click="ui.openCommandBar()"
       >
         <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0" />

package/app/components/media/ArtifactLightbox.vue

@@ -206,7 +206,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
             <UIcon name="i-lucide-maximize" class="h-4 w-4" />
           </button>
           <button
-            class="ml-1 rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            class="ms-1 rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
             :title="t('media.lightbox.close')"
             @click="close"
           >
@@ -223,11 +223,11 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
       >
         <button
           v-if="total > 1"
-          class="absolute left-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
+          class="absolute start-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
           :title="t('media.lightbox.prev')"
           @click="go(-1)"
         >
-          <UIcon name="i-lucide-chevron-left" class="h-5 w-5" />
+          <UIcon name="i-lucide-chevron-left" class="h-5 w-5 rtl:-scale-x-100" />
         </button>
 
         <img
@@ -267,11 +267,11 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
 
         <button
           v-if="total > 1"
-          class="absolute right-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
+          class="absolute end-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
           :title="t('media.lightbox.next')"
           @click="go(1)"
         >
-          <UIcon name="i-lucide-chevron-right" class="h-5 w-5" />
+          <UIcon name="i-lucide-chevron-right" class="h-5 w-5 rtl:-scale-x-100" />
         </button>
       </div>
     </div>

package/app/components/media/ImageCompare.vue

@@ -208,7 +208,7 @@ function onRefInput(e: Event) {
             class="w-full cursor-zoom-in"
           />
           <span
-            class="absolute bottom-1 right-1 rounded bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300 opacity-0 group-hover:opacity-100"
+            class="absolute bottom-1 end-1 rounded bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300 opacity-0 group-hover:opacity-100"
             @click.stop="refInput?.click()"
           >
             {{ t('media.compare.replace') }}
@@ -282,6 +282,11 @@ function onRefInput(e: Event) {
           class="absolute inset-0 block h-full w-full object-contain"
         />
       </div>
+      <!-- The split geometry is physical and unmirrored (the divider is positioned by a
+           `left` percent, the clip-path insets from the right, and the pointer math reads
+           `clientX - rect.left`), so the handle and the corner labels stay PHYSICAL too.
+           Logical (`start-`/`end-`) here would flip the labels under RTL while the image
+           regions stayed put, mislabeling actual vs reference. -->
       <div class="absolute inset-y-0 w-0.5 bg-amber-400" :style="{ left: `${splitPct}%` }">
         <span
           class="absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-amber-400 text-slate-950 shadow"

package/app/components/observability/StepMetricsBar.vue

@@ -61,14 +61,18 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
           })
         }}
       </span>
-      <div class="ml-auto flex items-center gap-1">
+      <div class="ms-auto flex items-center gap-1">
         <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
           {{ t('observability.metricsBar.errors', { count: m.errors }, m.errors) }}
         </UBadge>
         <UBadge v-if="m.warnings > 0" color="warning" variant="subtle" size="sm">
           {{ t('observability.metricsBar.warnings', { count: m.warnings }, m.warnings) }}
         </UBadge>
-        <UIcon v-if="clickable" name="i-lucide-chevron-right" class="h-3.5 w-3.5 text-slate-600" />
+        <UIcon
+          v-if="clickable"
+          name="i-lucide-chevron-right"
+          class="h-3.5 w-3.5 text-slate-600 rtl:-scale-x-100"
+        />
       </div>
     </div>
 

package/app/components/palettes/AgentPalette.vue

@@ -50,7 +50,7 @@ function toggle(id: string) {
       <section v-for="g in groups" :key="g.id">
         <button
           type="button"
-          class="flex w-full items-center gap-1.5 rounded px-1 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-slate-400 transition hover:text-slate-200"
+          class="flex w-full items-center gap-1.5 rounded px-1 py-1 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-400 transition hover:text-slate-200"
           @click="toggle(g.id)"
         >
           <UIcon
@@ -58,14 +58,14 @@ function toggle(id: string) {
             class="h-3.5 w-3.5 shrink-0"
           />
           <span>{{ g.label }}</span>
-          <span class="ml-auto text-slate-600">{{ g.agents.length }}</span>
+          <span class="ms-auto text-slate-600">{{ g.agents.length }}</span>
         </button>
         <div v-if="!isCollapsed(g.id)" class="mt-1 space-y-1.5">
           <button
             v-for="a in g.agents"
             :key="a.kind"
             type="button"
-            class="flex w-full items-center gap-2.5 rounded-lg border border-slate-700 bg-slate-800/60 p-2 text-left transition hover:border-slate-500 hover:bg-slate-800"
+            class="flex w-full items-center gap-2.5 rounded-lg border border-slate-700 bg-slate-800/60 p-2 text-start transition hover:border-slate-500 hover:bg-slate-800"
             :title="a.description"
             @click="$emit('add', a.kind)"
           >
@@ -79,7 +79,7 @@ function toggle(id: string) {
               <div class="text-xs font-semibold text-slate-100">{{ a.label }}</div>
               <div class="truncate text-[10px] text-slate-400">{{ a.description }}</div>
             </div>
-            <UIcon name="i-lucide-plus" class="ml-auto h-4 w-4 shrink-0 text-slate-500" />
+            <UIcon name="i-lucide-plus" class="ms-auto h-4 w-4 shrink-0 text-slate-500" />
           </button>
         </div>
       </section>

package/app/components/panels/AgentStepDetail.vue

@@ -185,7 +185,7 @@ async function copyOutput() {
         <!-- ToC sidebar (only meaningful when there are prose headings) -->
         <aside
           v-if="outline.hasToc"
-          class="hidden w-72 shrink-0 flex-col border-r border-slate-800 bg-slate-900/60 md:flex"
+          class="hidden w-72 shrink-0 flex-col border-e border-slate-800 bg-slate-900/60 md:flex"
         >
           <div class="border-b border-slate-800 px-4 py-3">
             <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
@@ -194,7 +194,7 @@ async function copyOutput() {
           </div>
           <nav class="flex-1 space-y-0.5 overflow-auto px-2 py-3">
             <button
-              class="block w-full truncate rounded-md px-2 py-1 text-left text-[13px] transition"
+              class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
               :class="
                 activeId === 'step-details'
                   ? 'bg-indigo-500/15 font-medium text-indigo-200'
@@ -207,7 +207,7 @@ async function copyOutput() {
             <button
               v-for="s in tocSections"
               :key="s.id"
-              class="block w-full truncate rounded-md px-2 py-1 text-left text-[13px] transition"
+              class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
               :class="
                 activeId === s.id
                   ? 'bg-indigo-500/15 font-medium text-indigo-200'
@@ -235,15 +235,15 @@ async function copyOutput() {
               <h1 class="truncate text-base font-semibold text-white">{{ agent.label }}</h1>
               <p v-if="block" class="truncate text-xs text-slate-500">{{ block.title }}</p>
             </div>
-            <div class="ml-auto flex items-center gap-1.5">
+            <div class="ms-auto flex items-center gap-1.5">
               <UBadge
                 v-if="approvalPending && !companionExceeded"
                 color="warning"
                 variant="subtle"
                 size="sm"
-                class="mr-1"
+                class="me-1"
               >
-                <UIcon name="i-lucide-shield-check" class="mr-1 h-3 w-3" />
+                <UIcon name="i-lucide-shield-check" class="me-1 h-3 w-3" />
                 {{ t('panels.stepDetail.approvalRequired') }}
               </UBadge>
               <UBadge
@@ -251,9 +251,9 @@ async function copyOutput() {
                 color="warning"
                 variant="subtle"
                 size="sm"
-                class="mr-1"
+                class="me-1"
               >
-                <UIcon name="i-lucide-alert-triangle" class="mr-1 h-3 w-3" />
+                <UIcon name="i-lucide-alert-triangle" class="me-1 h-3 w-3" />
                 {{ t('panels.stepDetail.decisionRequired') }}
               </UBadge>
               <UButton
@@ -403,7 +403,7 @@ async function copyOutput() {
                 >
                   <button
                     v-if="s.depth > 0"
-                    class="group flex w-full items-center gap-2 rounded-md py-1 text-left transition hover:text-white"
+                    class="group flex w-full items-center gap-2 rounded-md py-1 text-start transition hover:text-white"
                     @click="toggle(s.id)"
                   >
                     <UIcon
@@ -422,7 +422,7 @@ async function copyOutput() {
                     v-show="!collapsed[s.id]"
                     class="reader-prose mt-1 text-[13px] leading-relaxed text-slate-300"
                     :class="[
-                      s.depth > 0 ? 'pl-6' : '',
+                      s.depth > 0 ? 'ps-6' : '',
                       approvalPending && !editing && !companionExceeded ? 'review-mode' : '',
                     ]"
                     @click="onProseClick"
@@ -442,11 +442,11 @@ async function copyOutput() {
         </div>
 
         <!-- review rail (approval mode): per-block comments + overall feedback +
-             Approve / Request changes / Reject. A right-side rail on wide screens; a
+             Approve / Request changes / Reject. A end-side rail on wide screens; a
              bottom sheet (still reachable) below lg, so the gate is always actionable. -->
         <aside
           v-if="approvalPending && !companionExceeded"
-          class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-l lg:border-t-0 lg:border-slate-800 lg:bg-slate-900/60 lg:shadow-none lg:backdrop-blur-none"
+          class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-s lg:border-t-0 lg:border-slate-800 lg:bg-slate-900/60 lg:shadow-none lg:backdrop-blur-none"
         >
           <div class="border-b border-slate-800 px-4 py-3">
             <div class="text-[11px] font-semibold uppercase tracking-wide text-amber-400">

package/app/components/panels/GenericStructuredResultView.vue

@@ -122,7 +122,7 @@ const customJson = computed<string | null>(() => {
 
           <!-- Sidebar: shared run metadata + observability rollup -->
           <aside
-            class="hidden w-60 shrink-0 flex-col gap-4 border-l border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+            class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
           >
             <StepRunMeta
               v-if="step"

package/app/components/panels/InspectorPanel.vue

@@ -207,7 +207,7 @@ const showOriginalDescription = ref(false)
   <div
     v-if="block && statusMeta && typeMeta"
     data-testid="inspector-panel"
-    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:right-4 lg:top-4 lg:w-80 lg:rounded-2xl"
+    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-4 lg:w-80 lg:rounded-2xl"
   >
     <div class="h-1.5 w-full" :style="{ backgroundColor: statusMeta.color }" />
     <!-- A tall task (execution steps + scenarios + docs) can overflow the
@@ -487,7 +487,7 @@ const showOriginalDescription = ref(false)
           variant="ghost"
           size="sm"
           icon="i-lucide-trash-2"
-          class="ml-auto"
+          class="ms-auto"
           :title="deleteLabel"
           @click="remove"
         >

package/app/components/panels/ObservabilityPanel.vue

@@ -158,8 +158,8 @@ function exportJson() {
               {{ block.title }} · {{ instance?.pipelineName }}
             </p>
           </div>
-          <div class="ml-auto flex items-center gap-1.5">
-            <div class="mr-1 flex rounded-lg border border-slate-800 p-0.5 text-[12px]">
+          <div class="ms-auto flex items-center gap-1.5">
+            <div class="me-1 flex rounded-lg border border-slate-800 p-0.5 text-[12px]">
               <button
                 class="rounded-md px-2.5 py-1 transition"
                 :class="
@@ -304,7 +304,7 @@ function exportJson() {
                 :class="!c.ok ? 'border-rose-900/60' : ''"
               >
                 <button
-                  class="flex w-full items-center gap-3 px-4 py-2.5 text-left transition hover:bg-slate-900/70"
+                  class="flex w-full items-center gap-3 px-4 py-2.5 text-start transition hover:bg-slate-900/70"
                   @click="toggle(c)"
                 >
                   <UIcon
@@ -325,7 +325,7 @@ function exportJson() {
                     {{ c.provider }}:{{ c.model }}
                   </span>
                   <div
-                    class="ml-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
+                    class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
                   >
                     <span
                       :title="
@@ -456,7 +456,7 @@ function exportJson() {
                 class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900/40"
               >
                 <button
-                  class="flex w-full items-center gap-3 px-4 py-2.5 text-left transition hover:bg-slate-900/70"
+                  class="flex w-full items-center gap-3 px-4 py-2.5 text-start transition hover:bg-slate-900/70"
                   @click="toggleCtx(s)"
                 >
                   <UIcon
@@ -474,7 +474,7 @@ function exportJson() {
                     {{ s.model }}
                   </span>
                   <div
-                    class="ml-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
+                    class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
                   >
                     <span :title="t('observability.context.injectedFiles')">{{
                       t('observability.context.filesCount', { count: s.contextFiles.length })

package/app/components/panels/StepMetadataCard.vue

@@ -275,7 +275,7 @@ async function copyRunId() {
             <span :class="v.passed ? 'text-emerald-300' : 'text-amber-300'">
               {{ pctOf(v.rating) }} {{ v.passed ? '≥' : '<' }} {{ pctOf(v.threshold) }}
             </span>
-            <span v-if="v.feedback" class="ml-1 text-slate-400">— {{ v.feedback }}</span>
+            <span v-if="v.feedback" class="ms-1 text-slate-400">— {{ v.feedback }}</span>
           </div>
         </li>
       </ol>

package/app/components/panels/inspector/ContainerSummary.vue

@@ -35,7 +35,7 @@ function addTask() {
         >
           <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-violet-400" />
           <span class="truncate text-xs text-slate-200">{{ m.title }}</span>
-          <span class="ml-auto text-[10px] text-slate-500">{{
+          <span class="ms-auto text-[10px] text-slate-500">{{
             t(
               'inspector.container.taskCount',
               { count: board.tasksOf(m.id).length },
@@ -71,7 +71,7 @@ function addTask() {
             :style="{ backgroundColor: STATUS_META[task.status].color }"
           />
           <span class="truncate text-xs text-slate-200">{{ task.title }}</span>
-          <span class="ml-auto text-[10px] text-slate-500">{{
+          <span class="ms-auto text-[10px] text-slate-500">{{
             STATUS_META[task.status].label
           }}</span>
         </li>

package/app/components/panels/inspector/EpicChildren.vue

@@ -69,7 +69,7 @@ const groups = computed(() => {
           <UIcon name="i-lucide-box" class="h-3 w-3 text-slate-500" />
           {{ group.service?.title ?? t('inspector.epicChildren.unassigned') }}
         </div>
-        <div v-for="(mod, mi) in [...group.modules.values()]" :key="mi" class="pl-1">
+        <div v-for="(mod, mi) in [...group.modules.values()]" :key="mi" class="ps-1">
           <div v-if="mod.module" class="text-[10px] uppercase tracking-wide text-slate-500">
             {{ mod.module.title }}
           </div>
@@ -77,7 +77,7 @@ const groups = computed(() => {
             v-for="task in mod.tasks"
             :key="task.id"
             type="button"
-            class="flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-xs text-slate-200 hover:bg-slate-800"
+            class="flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-start text-xs text-slate-200 hover:bg-slate-800"
             @click="ui.select(task.id)"
           >
             <span
@@ -85,7 +85,7 @@ const groups = computed(() => {
               :style="{ backgroundColor: STATUS_META[task.status].color }"
             />
             <span class="truncate">{{ task.title }}</span>
-            <span class="ml-auto shrink-0 text-[10px] text-slate-500">
+            <span class="ms-auto shrink-0 text-[10px] text-slate-500">
               {{ STATUS_META[task.status].label }}
             </span>
           </button>

package/app/components/panels/inspector/RecurringScheduleSettings.vue

@@ -212,7 +212,7 @@ function fmtTime(ms: number) {
           {{ runStatusLabel(run.status) }}
         </span>
         <span class="truncate text-slate-500">{{ fmtTime(run.startedAt) }}</span>
-        <span v-if="run.outcome" class="ml-auto truncate text-slate-500">{{ run.outcome }}</span>
+        <span v-if="run.outcome" class="ms-auto truncate text-slate-500">{{ run.outcome }}</span>
       </div>
     </div>
   </div>

package/app/components/panels/inspector/ServiceFragments.vue

@@ -99,7 +99,7 @@ function removeFragment(id: string) {
         :title="f.summary"
         @click="removeFragment(f.id)"
       >
-        {{ f.title }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
     <div v-else class="text-[11px] text-slate-500">

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -222,7 +222,7 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
     <div class="border-t border-slate-800 pt-2">
       <button
         type="button"
-        class="flex w-full items-center gap-1.5 text-left text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
         @click="showProvisioning = !showProvisioning"
       >
         <UIcon

package/app/components/panels/inspector/TaskDependencies.vue

@@ -64,7 +64,7 @@ function removeDep(depId: string) {
         @click="removeDep(d.id)"
       >
         {{ label(d) }}
-        <UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        <UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
     <div v-else class="text-[11px] text-slate-500">{{ t('inspector.dependencies.empty') }}</div>

package/app/components/panels/inspector/TaskEstimateBadge.vue

@@ -45,7 +45,7 @@ function barClass(n: number): string {
             :style="{ width: `${Math.round(estimate[axis.key] * 100)}%` }"
           />
         </div>
-        <span class="w-9 shrink-0 text-right text-xs tabular-nums text-slate-300">{{
+        <span class="w-9 shrink-0 text-end text-xs tabular-nums text-slate-300">{{
           n(estimate[axis.key], { key: 'percent' })
         }}</span>
       </div>