@cat-factory/app 0.54.4 → 0.55.0

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

@@ -190,7 +190,7 @@ async function resetRun() {
                  model, subtasks + the prose output when there is one). -->
             <button
               type="button"
-              class="flex min-w-0 cursor-pointer items-center gap-2 text-left transition hover:text-white"
+              class="flex min-w-0 cursor-pointer items-center gap-2 text-start transition hover:text-white"
               :title="
                 s.output
                   ? t('inspector.execution.viewDetailsOutput')
@@ -220,7 +220,7 @@ async function resetRun() {
             </button>
             <span
               v-if="s.subtasks && s.subtasks.total > 0"
-              class="ml-auto font-mono text-[10px] tabular-nums text-slate-300"
+              class="ms-auto font-mono text-[10px] tabular-nums text-slate-300"
               :title="
                 s.subtasks.inProgress > 0
                   ? t('inspector.execution.subtasksProgress', {
@@ -240,7 +240,7 @@ async function resetRun() {
               class="inline-flex items-center gap-1 text-[10px]"
               :class="[
                 stepFailed(s) ? 'text-rose-400' : 'text-slate-400',
-                { 'ml-auto': !s.subtasks },
+                { 'ms-auto': !s.subtasks },
               ]"
             >
               <UIcon v-if="stepFailed(s)" name="i-lucide-circle-x" class="h-3 w-3 shrink-0" />
@@ -300,7 +300,7 @@ async function resetRun() {
           </div>
           <div
             v-if="s.subtasks && s.subtasks.total > 0"
-            class="mt-1 ml-6 h-1 overflow-hidden rounded-full bg-slate-700/60"
+            class="mt-1 ms-6 h-1 overflow-hidden rounded-full bg-slate-700/60"
           >
             <div
               class="h-full rounded-full bg-indigo-400 transition-all duration-500"
@@ -309,7 +309,7 @@ async function resetRun() {
           </div>
           <div
             v-if="s.model"
-            class="mt-0.5 flex items-center gap-1 pl-6 text-[10px] text-slate-500"
+            class="mt-0.5 flex items-center gap-1 ps-6 text-[10px] text-slate-500"
             :title="s.model"
           >
             <UIcon name="i-lucide-cpu" class="h-3 w-3" />
@@ -318,7 +318,7 @@ async function resetRun() {
           <!-- Prompt-fragment standards the library selected for this step. -->
           <div
             v-if="s.selectedFragmentIds && s.selectedFragmentIds.length"
-            class="mt-0.5 flex flex-wrap items-center gap-1 pl-6 text-[10px] text-slate-500"
+            class="mt-0.5 flex flex-wrap items-center gap-1 ps-6 text-[10px] text-slate-500"
             :title="
               t('inspector.execution.fragmentsTooltip', {
                 fragments: s.selectedFragmentIds.join(', '),
@@ -338,7 +338,7 @@ async function resetRun() {
                completed/skipped, so it's clear whether a fix pass ran. -->
           <div
             v-if="gateCompanionFor(s, runFailed)"
-            class="mt-0.5 flex items-center gap-1.5 pl-6 text-[10px]"
+            class="mt-0.5 flex items-center gap-1.5 ps-6 text-[10px]"
           >
             <UIcon
               :name="agentKindMeta(gateCompanionFor(s, runFailed)!.kind).icon"
@@ -356,7 +356,7 @@ async function resetRun() {
               }}
             </span>
             <span
-              class="ml-auto"
+              class="ms-auto"
               :class="COMPANION_STATE_META[gateCompanionFor(s, runFailed)!.state].text"
             >
               {{ COMPANION_STATE_META[gateCompanionFor(s, runFailed)!.state].label }}
@@ -388,7 +388,7 @@ async function resetRun() {
       >
         <span class="flex w-full items-center gap-2">
           {{ prLabel }}
-          <UBadge :color="prMerged ? 'success' : 'info'" variant="subtle" size="sm" class="ml-auto">
+          <UBadge :color="prMerged ? 'success' : 'info'" variant="subtle" size="sm" class="ms-auto">
             {{ prMerged ? t('inspector.execution.merged') : t('inspector.execution.open') }}
           </UBadge>
         </span>

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

@@ -246,7 +246,7 @@ const technicalLabel = computed(() => {
           class="cursor-pointer"
           @click="setPipeline('')"
         >
-          {{ selectedPipeline.name }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+          {{ selectedPipeline.name }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
         </UBadge>
       </div>
       <div v-else class="text-[11px] text-slate-500">
@@ -461,7 +461,7 @@ const technicalLabel = computed(() => {
           class="cursor-pointer"
           @click="setResponsible('')"
         >
-          {{ responsibleLabel }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+          {{ responsibleLabel }}<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/TaskStructure.vue

@@ -112,7 +112,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/pipeline/IterationCapPrompt.vue

@@ -53,6 +53,7 @@ const emit = defineEmits<{ resolve: [choice: IterationCapChoice] }>()
         variant="soft"
         size="xs"
         icon="i-lucide-arrow-right"
+        :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
         :loading="loading"
         @click="emit('resolve', 'proceed')"
       >

package/app/components/pipeline/PipelineBuilder.vue

@@ -241,7 +241,7 @@ async function clone(p: Pipeline) {
               {{ t('pipeline.builder.addAgent') }}
             </UButton>
           </div>
-          <div class="flex-1 pr-1 lg:min-h-0 lg:overflow-y-auto">
+          <div class="flex-1 pe-1 lg:min-h-0 lg:overflow-y-auto">
             <AgentPalette @add="add" />
           </div>
         </div>
@@ -309,7 +309,7 @@ async function clone(p: Pipeline) {
             {{ t('pipeline.builder.emptyDraft') }}
           </div>
 
-          <ol v-else class="flex-1 space-y-2 pr-1 lg:min-h-0 lg:overflow-y-auto">
+          <ol v-else class="flex-1 space-y-2 pe-1 lg:min-h-0 lg:overflow-y-auto">
             <li
               v-for="(unit, vi) in pipelines.units"
               :key="unit.index"
@@ -455,7 +455,7 @@ async function clone(p: Pipeline) {
                  gated on the task estimate. -->
               <div
                 v-if="unit.companionIndex !== null"
-                class="ml-6 space-y-2 rounded-md border border-fuchsia-800/40 bg-fuchsia-950/20 p-2 text-xs"
+                class="ms-6 space-y-2 rounded-md border border-fuchsia-800/40 bg-fuchsia-950/20 p-2 text-xs"
               >
                 <div class="flex items-center gap-1.5">
                   <UIcon name="i-lucide-corner-down-right" class="h-3.5 w-3.5 text-slate-500" />
@@ -524,7 +524,7 @@ async function clone(p: Pipeline) {
               <!-- Consensus config (shown when the step is consensus-enabled). -->
               <div
                 v-if="pipelines.draftConsensus[unit.index]?.enabled"
-                class="ml-6 space-y-2 rounded-md border border-emerald-800/40 bg-emerald-950/20 p-2 text-xs"
+                class="ms-6 space-y-2 rounded-md border border-emerald-800/40 bg-emerald-950/20 p-2 text-xs"
               >
                 <div class="flex items-center gap-2">
                   <label class="text-slate-400">{{ t('pipeline.builder.strategy') }}</label>
@@ -538,7 +538,7 @@ async function clone(p: Pipeline) {
                   </select>
                   <label
                     v-if="pipelines.draftConsensus[unit.index]!.strategy === 'debate'"
-                    class="ml-2 text-slate-400"
+                    class="ms-2 text-slate-400"
                     >{{ t('pipeline.builder.rounds') }}</label
                   >
                   <input
@@ -681,7 +681,7 @@ async function clone(p: Pipeline) {
             </UBadge>
           </div>
 
-          <ul class="flex-1 space-y-1.5 pr-1 lg:min-h-0 lg:overflow-y-auto">
+          <ul class="flex-1 space-y-1.5 pe-1 lg:min-h-0 lg:overflow-y-auto">
             <li
               v-for="p in visiblePipelines"
               :key="p.id"
@@ -691,7 +691,7 @@ async function clone(p: Pipeline) {
               <div class="flex items-center gap-2 px-2 py-1.5">
                 <button
                   type="button"
-                  class="flex min-w-0 flex-1 items-center gap-2 text-left"
+                  class="flex min-w-0 flex-1 items-center gap-2 text-start"
                   @click="toggleSaved(p.id)"
                 >
                   <UIcon
@@ -784,7 +784,7 @@ async function clone(p: Pipeline) {
               <!-- Full ordered step list, revealed on click. -->
               <ol
                 v-if="expandedSaved.has(p.id)"
-                class="space-y-1 border-t border-slate-800 px-2 py-2 pl-7"
+                class="space-y-1 border-t border-slate-800 px-2 py-2 ps-7"
               >
                 <li
                   v-for="(k, i) in p.agentKinds"

package/app/components/pipeline/PipelineProgress.vue

@@ -213,7 +213,7 @@ const ITEM_ICON: Record<string, string> = {
         <span v-if="currentAgent && instance.status === 'running'" class="text-xs text-slate-500">
           · {{ t('pipeline.progress.currently', { agent: currentAgent }) }}
         </span>
-        <span class="ml-auto font-mono text-sm tabular-nums text-slate-200">{{
+        <span class="ms-auto font-mono text-sm tabular-nums text-slate-200">{{
           t('pipeline.progress.percent', { value: overallPct })
         }}</span>
       </div>
@@ -241,7 +241,7 @@ const ITEM_ICON: Record<string, string> = {
         <!-- connector line to the next step -->
         <span
           v-if="i < steps.length - 1"
-          class="absolute top-9 bottom-0 left-[17px] w-0.5 -translate-x-1/2"
+          class="absolute top-9 bottom-0 start-[17px] w-0.5 -translate-x-1/2"
           :class="connectorDone(i) ? 'bg-emerald-500/60' : 'bg-slate-700'"
         />
 
@@ -306,7 +306,7 @@ const ITEM_ICON: Record<string, string> = {
               </div>
             </div>
             <span
-              class="ml-auto shrink-0 text-[11px] font-medium"
+              class="ms-auto shrink-0 text-[11px] font-medium"
               :style="{ color: stepVisual(s.state).color }"
             >
               {{ stepVisual(s.state).label }}
@@ -495,7 +495,7 @@ const ITEM_ICON: Record<string, string> = {
           <button
             v-if="s.followUps?.enabled"
             type="button"
-            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed px-2.5 py-1.5 text-left transition hover:border-pink-400/60"
+            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed px-2.5 py-1.5 text-start transition hover:border-pink-400/60"
             :class="
               followUpPending(s) > 0
                 ? 'border-pink-500/50 bg-pink-500/10 followup-blink'

package/app/components/providers/ApiKeysSection.vue

@@ -287,7 +287,7 @@ async function remove(k: ApiKey) {
 
     <!-- where to get the key -->
     <ol
-      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
+      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 ps-8 text-sm text-slate-300"
     >
       <li v-for="(step, i) in selected.steps" :key="i">{{ step }}</li>
       <li>
@@ -351,7 +351,7 @@ async function remove(k: ApiKey) {
       >
         <div>
           <span class="font-medium text-slate-200">{{ k.label }}</span>
-          <span class="ml-2 text-xs text-slate-500">{{ providerLabel(k.provider) }}</span>
+          <span class="ms-2 text-xs text-slate-500">{{ providerLabel(k.provider) }}</span>
           <div class="text-[11px] tabular-nums text-slate-500">
             {{
               t(

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -179,7 +179,7 @@ async function disconnect(v: SubscriptionVendor) {
     >
       <div>
         <span class="font-medium text-slate-200">{{ sub.label }}</span>
-        <span class="ml-2 text-xs text-slate-500">{{ vendorLabel(sub.vendor) }}</span>
+        <span class="ms-2 text-xs text-slate-500">{{ vendorLabel(sub.vendor) }}</span>
         <div class="text-[11px] text-slate-500">
           <template v-if="sub.expiresAt">
             {{ t('personalSubscriptions.expires', { date: d(new Date(sub.expiresAt), 'short') }) }}
@@ -210,7 +210,7 @@ async function disconnect(v: SubscriptionVendor) {
 
     <!-- connect / replace form -->
     <ol
-      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
+      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 ps-8 text-sm text-slate-300"
     >
       <li v-for="(step, i) in selectedMeta.steps" :key="i">{{ step }}</li>
     </ol>

package/app/components/providers/VendorCredentialsModal.vue

@@ -192,7 +192,7 @@ function vendorLabel(v: SubscriptionVendor): string {
 
             <!-- guided steps -->
             <ol
-              class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
+              class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 ps-8 text-sm text-slate-300"
             >
               <li v-for="(step, i) in steps" :key="i">{{ step }}</li>
             </ol>
@@ -239,7 +239,7 @@ function vendorLabel(v: SubscriptionVendor): string {
               >
                 <div>
                   <span class="font-medium text-slate-200">{{ c.label }}</span>
-                  <span class="ml-2 text-xs text-slate-500">{{ vendorLabel(c.vendor) }}</span>
+                  <span class="ms-2 text-xs text-slate-500">{{ vendorLabel(c.vendor) }}</span>
                   <div class="text-[11px] tabular-nums text-slate-500">
                     {{
                       t(

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -94,7 +94,7 @@ function when(epochMs: number): string {
             "
             >{{ OUTCOME_LABEL[entry.outcome] }}</span
           >
-          <span class="ml-auto text-[11px] text-slate-500">{{ when(entry.createdAt) }}</span>
+          <span class="ms-auto text-[11px] text-slate-500">{{ when(entry.createdAt) }}</span>
         </div>
         <div v-if="entry.targetId" class="mt-0.5 text-[11px] text-slate-500">
           {{ entry.providerId ? `${entry.providerId} · ` : '' }}{{ entry.targetId }}

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -428,7 +428,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </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="review" color="neutral" variant="subtle" size="sm">
               {{ t('requirements.iteration', { current: iteration, max: maxIterations }) }}
             </UBadge>
@@ -538,7 +538,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                           size="xs"
                           variant="soft"
                           :color="STATUS_COLOR[item.status]"
-                          class="ml-auto"
+                          class="ms-auto"
                         >
                           {{ STATUS_LABELS[item.status] }}
                         </UBadge>
@@ -551,7 +551,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                            ones the answer lives in the textarea below, seeded from the reply) -->
                       <div
                         v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
-                        class="mt-2 rounded-md border-l-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                        class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
                       >
                         <span class="text-[10px] uppercase tracking-wide text-slate-500">
                           {{ t('requirements.answerLabel') }}
@@ -641,7 +641,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   }}</span>
                   <span
                     v-if="recommendationProgress"
-                    class="ml-auto flex items-center gap-1.5 normal-case text-indigo-300/80"
+                    class="ms-auto flex items-center gap-1.5 normal-case text-indigo-300/80"
                   >
                     <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
                     {{
@@ -764,7 +764,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 <div v-for="s in outline.sections" :key="s.id" class="mb-2">
                   <button
                     v-if="s.title"
-                    class="group flex w-full items-center gap-2 text-left"
+                    class="group flex w-full items-center gap-2 text-start"
                     @click="toggle(s.id)"
                   >
                     <UIcon
@@ -780,7 +780,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   </button>
                   <div
                     v-show="!s.title || !collapsed[s.id]"
-                    class="reader-prose mt-1 pl-5.5 text-[13px] leading-relaxed text-slate-300"
+                    class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
                     v-html="s.bodyHtml"
                   />
                 </div>
@@ -789,7 +789,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
 
           <!-- right action rail -->
-          <aside class="hidden w-72 shrink-0 flex-col border-l border-slate-800 lg:flex">
+          <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
             <div class="flex flex-col gap-4 px-4 py-5">
               <div v-if="review" class="space-y-2 text-xs text-slate-400">
                 <div class="flex items-center justify-between">
@@ -806,7 +806,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 </div>
                 <div v-if="review.model" class="flex items-center justify-between">
                   <span>{{ t('requirements.stats.model') }}</span>
-                  <span class="truncate pl-2 text-slate-500">{{ review.model }}</span>
+                  <span class="truncate ps-2 text-slate-500">{{ review.model }}</span>
                 </div>
               </div>
 
@@ -821,6 +821,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   size="sm"
                   block
                   icon="i-lucide-arrow-right"
+                  :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
                   :loading="acting"
                   @click="proceed"
                 >

package/app/components/sandbox/SandboxPanel.vue

@@ -279,7 +279,7 @@ async function archive(prompt: SandboxPromptVersion) {
               <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
                 {{ t('sandbox.builder.promptVersions') }}
               </span>
-              <div class="max-h-28 space-y-1 overflow-auto pr-1">
+              <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="p in kindPrompts"
                   :key="p.id"
@@ -311,7 +311,7 @@ async function archive(prompt: SandboxPromptVersion) {
               <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
                 {{ t('sandbox.builder.models') }}
               </span>
-              <div class="max-h-28 space-y-1 overflow-auto pr-1">
+              <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="m in store.selectableModels"
                   :key="m.id"
@@ -335,7 +335,7 @@ async function archive(prompt: SandboxPromptVersion) {
               <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
                 {{ t('sandbox.builder.fixtures') }}
               </span>
-              <div class="max-h-28 space-y-1 overflow-auto pr-1">
+              <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="f in kindFixtures"
                   :key="f.id"
@@ -401,13 +401,13 @@ async function archive(prompt: SandboxPromptVersion) {
                 }}</UBadge>
               </div>
               <div class="overflow-auto">
-                <table class="w-full text-left text-xs">
+                <table class="w-full text-start text-xs">
                   <thead class="text-slate-500">
                     <tr>
-                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.prompt') }}</th>
-                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.model') }}</th>
-                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.fixture') }}</th>
-                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.score') }}</th>
+                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.prompt') }}</th>
+                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.model') }}</th>
+                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.fixture') }}</th>
+                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.score') }}</th>
                       <th class="py-1 font-medium">{{ t('sandbox.results.col.objective') }}</th>
                     </tr>
                   </thead>
@@ -418,12 +418,12 @@ async function archive(prompt: SandboxPromptVersion) {
                       class="cursor-pointer border-t border-slate-800 hover:bg-slate-800/40"
                       @click="selectedRun = run"
                     >
-                      <td class="py-1 pr-2 text-slate-300">{{ run.promptLabel }}</td>
-                      <td class="py-1 pr-2 font-mono text-[11px] text-slate-400">
+                      <td class="py-1 pe-2 text-slate-300">{{ run.promptLabel }}</td>
+                      <td class="py-1 pe-2 font-mono text-[11px] text-slate-400">
                         {{ run.model }}
                       </td>
-                      <td class="py-1 pr-2 text-slate-400">{{ fixtureName }}</td>
-                      <td class="py-1 pr-2">
+                      <td class="py-1 pe-2 text-slate-400">{{ fixtureName }}</td>
+                      <td class="py-1 pe-2">
                         <span
                           v-if="grade"
                           :class="scoreColor(grade.weightedTotal)"
@@ -470,8 +470,8 @@ async function archive(prompt: SandboxPromptVersion) {
                     class="text-[11px] text-slate-400"
                   >
                     <span :class="scoreColor(d.score)" class="font-semibold">{{ d.score }}</span>
-                    <span class="ml-1 text-slate-300">{{ d.key }}</span>
-                    <span v-if="d.rationale" class="ml-1 text-slate-500">— {{ d.rationale }}</span>
+                    <span class="ms-1 text-slate-300">{{ d.key }}</span>
+                    <span v-if="d.rationale" class="ms-1 text-slate-500">— {{ d.rationale }}</span>
                   </p>
                 </div>
               </div>
@@ -484,7 +484,7 @@ async function archive(prompt: SandboxPromptVersion) {
               <button
                 v-for="x in store.experiments"
                 :key="x.id"
-                class="flex w-full items-center justify-between rounded-md border border-slate-800 bg-slate-900/40 px-2 py-1.5 text-left text-sm hover:bg-slate-800/50"
+                class="flex w-full items-center justify-between rounded-md border border-slate-800 bg-slate-900/40 px-2 py-1.5 text-start text-sm hover:bg-slate-800/50"
                 @click="store.openExperiment(x.id)"
               >
                 <span class="truncate text-slate-300">{{ x.name }}</span>
@@ -499,7 +499,7 @@ async function archive(prompt: SandboxPromptVersion) {
 
         <!-- ============================== PROMPTS ============================== -->
         <div v-else-if="tab === 'prompts'" class="grid gap-4 lg:grid-cols-2">
-          <div class="max-h-[28rem] space-y-1.5 overflow-auto pr-1">
+          <div class="max-h-[28rem] space-y-1.5 overflow-auto pe-1">
             <div
               v-for="p in store.prompts"
               :key="p.id"
@@ -581,7 +581,7 @@ async function archive(prompt: SandboxPromptVersion) {
         </div>
 
         <!-- ============================== FIXTURES ============================== -->
-        <div v-else class="max-h-[28rem] space-y-1.5 overflow-auto pr-1">
+        <div v-else class="max-h-[28rem] space-y-1.5 overflow-auto pe-1">
           <div
             v-for="f in store.fixtures"
             :key="f.id"

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -191,7 +191,7 @@ async function remove(p: LocalRunner) {
         >
           <div>
             <span class="font-medium text-slate-200">{{ e.label }}</span>
-            <span class="ml-2 text-xs text-slate-500">{{ LOCAL_RUNNER_LABELS[e.provider] }}</span>
+            <span class="ms-2 text-xs text-slate-500">{{ LOCAL_RUNNER_LABELS[e.provider] }}</span>
             <div class="text-[11px] text-slate-500">
               {{ e.baseUrl }} ·
               {{

package/app/components/settings/ModelConfigurationPanel.vue

@@ -267,10 +267,11 @@ function fail(title: string, e: unknown) {
           <UButton
             v-if="editor"
             icon="i-lucide-arrow-left"
+            :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
             color="neutral"
             variant="ghost"
             size="sm"
-            class="ml-auto"
+            class="ms-auto"
             @click="editor = null"
           >
             {{ t('settings.modelConfiguration.back') }}
@@ -280,7 +281,7 @@ function fail(title: string, e: unknown) {
             color="neutral"
             variant="ghost"
             size="sm"
-            :class="editor ? '' : 'ml-auto'"
+            :class="editor ? '' : 'ms-auto'"
             :title="t('settings.modelConfiguration.closeEsc')"
             @click="open = false"
           />
@@ -330,7 +331,7 @@ function fail(title: string, e: unknown) {
                     <UBadge v-if="p.isDefault" color="primary" variant="subtle" size="xs">
                       {{ t('settings.modelConfiguration.list.default') }}
                     </UBadge>
-                    <div class="ml-auto flex items-center gap-1">
+                    <div class="ms-auto flex items-center gap-1">
                       <UButton
                         v-if="!p.isDefault"
                         size="xs"

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -235,7 +235,7 @@ function manageKeys() {
           <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
             {{ t('settings.openRouterCatalog.connectHeading') }}
           </h4>
-          <ol class="list-decimal space-y-1 pl-5 text-sm text-slate-300">
+          <ol class="list-decimal space-y-1 ps-5 text-sm text-slate-300">
             <li>
               <i18n-t keypath="settings.openRouterCatalog.step1" tag="span" scope="global">
                 <template #link>
@@ -343,7 +343,7 @@ function manageKeys() {
 
           <p v-if="store.refreshError" class="text-xs text-rose-400">{{ store.refreshError }}</p>
 
-          <div v-if="visible.length" class="max-h-96 space-y-1 overflow-y-auto pr-1">
+          <div v-if="visible.length" class="max-h-96 space-y-1 overflow-y-auto pe-1">
             <label
               v-for="m in visible"
               :key="m.id"
@@ -357,7 +357,7 @@ function manageKeys() {
                 <span class="block truncate text-slate-200">{{ m.name }}</span>
                 <span class="block truncate font-mono text-[11px] text-slate-500">{{ m.id }}</span>
               </span>
-              <span class="shrink-0 text-right text-[11px] text-slate-500">
+              <span class="shrink-0 text-end text-[11px] text-slate-500">
                 <span v-if="m.contextLength" class="block">{{
                   contextLabel(m.contextLength)
                 }}</span>

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -97,7 +97,7 @@ function remove(id: string) {
         :title="f.summary"
         @click="remove(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>
     <p v-else class="text-[11px] text-slate-500">

package/app/components/spec/ServiceSpecWindow.vue

@@ -137,7 +137,7 @@ function kindLabel(item: RequirementItem): string {
               {{ spec?.service || block.title }}
             </p>
           </div>
-          <div class="ml-auto flex items-center gap-1.5">
+          <div class="ms-auto flex items-center gap-1.5">
             <!-- view toggle: Gherkin only when the spec (and its feature files) are on main -->
             <div v-if="present" class="flex items-center rounded-lg border border-slate-700 p-0.5">
               <UButton
@@ -200,7 +200,7 @@ function kindLabel(item: RequirementItem): string {
         <!-- spec body: navigable tree + detail -->
         <div v-else class="flex min-h-0 flex-1">
           <!-- nav: modules → feature groups -->
-          <nav class="w-64 shrink-0 overflow-y-auto border-r border-slate-800 px-3 py-4">
+          <nav class="w-64 shrink-0 overflow-y-auto border-e border-slate-800 px-3 py-4">
             <UButton
               block
               class="mb-2 justify-start"
@@ -222,7 +222,7 @@ function kindLabel(item: RequirementItem): string {
                 <li v-for="(group, gi) in mod.groups ?? []" :key="gi">
                   <button
                     type="button"
-                    class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition"
+                    class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-start text-[13px] transition"
                     :class="
                       selected?.m === mi && selected?.g === gi
                         ? 'bg-indigo-500/15 text-indigo-200'

package/app/components/tasks/ContextIssuePicker.vue

@@ -203,12 +203,12 @@ onMounted(() => {
         v-for="row in importedRows"
         :key="`imp:${row.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickImported(row)"
       >
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
         <span class="truncate">{{ row.externalId }} · {{ row.title }}</span>
-        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">{{
+        <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
           t('tasks.picker.imported')
         }}</UBadge>
       </button>
@@ -218,12 +218,12 @@ onMounted(() => {
         v-for="r in searchRows"
         :key="`hit:${r.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickSearch(r)"
       >
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
         <span class="truncate">{{ r.externalId }} · {{ r.title }}</span>
-        <UBadge v-if="r.status" color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">
+        <UBadge v-if="r.status" color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
           {{ r.status }}
         </UBadge>
       </button>
@@ -232,7 +232,7 @@ onMounted(() => {
       <button
         v-if="refRow"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickRef(refRow)"
       >
         <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />

package/app/components/tasks/TaskContextIssues.vue

@@ -79,7 +79,7 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
           class="h-3.5 w-3.5 shrink-0 text-indigo-400"
         />
         <span class="truncate">{{ task.externalId }} · {{ task.title }}</span>
-        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">
+        <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
           {{ task.status }}
         </UBadge>
       </a>