@cat-factory/app 0.46.0 → 0.46.2

package/app/components/board/nodes/BlockNode.vue

@@ -9,6 +9,7 @@ import AgentStopButton from '~/components/board/AgentStopButton.vue'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameResize } from '~/composables/useFrameResize'
 import { useFrameStacking } from '~/composables/useFrameStacking'
+import { useViewport } from '~/composables/useViewport'
 
 // Vue Flow passes the node's `id` and `data` as props to custom node components.
 // Only frames are rendered as board nodes; their tasks live inside the card.
@@ -22,6 +23,9 @@ const agentRuns = useAgentRunsStore()
 const services = useServicesStore()
 const reviews = useReviewStage()
 const { lod } = useSemanticZoom()
+// Coarse-pointer (touch) bumps the frame-header actions from `xs` to `sm` so
+// they clear a comfortable tap target on phones without affecting mouse desktops.
+const { isTouch } = useViewport()
 
 const block = computed<Block | undefined>(() => board.getBlock(props.id))
 /** This service frame is mounted on more than one board in the org. */
@@ -412,7 +416,7 @@ const ITEM_ICON: Record<string, string> = {
               <UButton
                 class="nodrag"
                 data-testid="frame-add-task"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-plus"
@@ -422,7 +426,7 @@ const ITEM_ICON: Record<string, string> = {
               <UButton
                 v-if="tasks.anyOffered"
                 class="nodrag"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-ticket"
@@ -431,7 +435,7 @@ const ITEM_ICON: Record<string, string> = {
               />
               <UButton
                 class="nodrag"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-repeat"
@@ -440,7 +444,7 @@ const ITEM_ICON: Record<string, string> = {
               />
               <UButton
                 class="nodrag"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-chevron-up"
@@ -481,17 +485,17 @@ const ITEM_ICON: Record<string, string> = {
                `nopan` (alongside `nodrag`) so the pane doesn't pan while resizing —
                same reason as the header handle above. -->
           <div
-            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20 pointer-coarse:w-4"
             title="Drag to resize"
             @pointerdown="onResize($event, 'e')"
           />
           <div
-            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20 pointer-coarse:h-4"
             title="Drag to resize"
             @pointerdown="onResize($event, 's')"
           />
           <div
-            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize pointer-coarse:h-11 pointer-coarse:w-11"
             title="Drag to resize"
             @pointerdown="onResize($event, 'se')"
           >

package/app/components/board/nodes/DraggableTask.vue

@@ -41,11 +41,14 @@ function onHandle(e: PointerEvent) {
     >
       <!-- drag handle (`nopan` so the pane doesn't pan on a left-drag from here) -->
       <div
-        class="nodrag nopan flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing"
+        class="nodrag nopan flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
         title="Drag task"
         @pointerdown="onHandle"
       >
-        <UIcon name="i-lucide-grip-horizontal" class="h-3 w-3 text-slate-500" />
+        <UIcon
+          name="i-lucide-grip-horizontal"
+          class="h-3 w-3 text-slate-500 pointer-coarse:h-5 pointer-coarse:w-5"
+        />
       </div>
       <TaskCard :task-id="taskId" class="!rounded-t-none" />
     </div>

package/app/components/board/nodes/ModuleFrame.vue

@@ -76,17 +76,17 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
     <!-- resize handles (drag the borders to resize the module, Miro-style).
          `nopan` (with `nodrag`) so resizing doesn't pan the pane. -->
     <div
-      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20 pointer-coarse:w-4"
       title="Drag to resize"
       @pointerdown="onResize($event, 'e')"
     />
     <div
-      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20 pointer-coarse:h-4"
       title="Drag to resize"
       @pointerdown="onResize($event, 's')"
     />
     <div
-      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize pointer-coarse:h-11 pointer-coarse:w-11"
       title="Drag to resize"
       @pointerdown="onResize($event, 'se')"
     >

package/app/components/board/nodes/TaskCard.vue

@@ -210,12 +210,12 @@ function selectTask() {
       <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
       <button
         type="button"
-        class="nodrag shrink-0 cursor-crosshair rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400"
+        class="nodrag shrink-0 cursor-crosshair rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400 pointer-coarse:p-2.5"
         title="Drag onto another task to make it depend on this one"
         @pointerdown.stop="startConnect(task.id, $event)"
         @click.stop
       >
-        <UIcon name="i-lucide-spline" class="h-3 w-3" />
+        <UIcon name="i-lucide-spline" class="h-3 w-3 pointer-coarse:h-5 pointer-coarse:w-5" />
       </button>
     </div>
 

package/app/components/brainstorm/BrainstormWindow.vue

@@ -220,11 +220,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/clarity/ClarityReviewWindow.vue

@@ -217,11 +217,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -67,11 +67,11 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/followUp/FollowUpWindow.vue

@@ -73,7 +73,7 @@ const STATUS_META: Record<
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/gates/GateResultView.vue

@@ -140,7 +140,7 @@ const conflictVerdict = computed(() => {
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/humanTest/HumanTestWindow.vue

@@ -100,7 +100,7 @@ const canDestroy = computed(
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/layout/LanguageSwitcher.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { computed } from 'vue'
+import { useLocaleStore } from '~/stores/locale'
+
+// Language picker for the SPA's supported locales, shown at the sidebar bottom next to
+// the user menu. The list is data-driven from the i18n config (`useI18n().locales`), so
+// adding a locale in nuxt.config.ts surfaces it here automatically. Selecting one switches
+// the live locale AND persists the choice (the locale store) so it survives a reload.
+const { t, locale, locales, setLocale } = useI18n()
+const localeStore = useLocaleStore()
+
+const current = computed(
+  () => locales.value.find((l) => l.code === locale.value)?.name ?? locale.value,
+)
+
+// The typed-messages guard narrows the locale to the configured union, so take the same
+// type setLocale expects rather than a bare string.
+async function choose(code: typeof locale.value) {
+  if (code === locale.value) return
+  await setLocale(code)
+  localeStore.set(code)
+}
+
+const items = computed<DropdownMenuItem[][]>(() => [
+  locales.value.map((l) => ({
+    label: l.name ?? l.code,
+    icon: l.code === locale.value ? 'i-lucide-check' : undefined,
+    onSelect: () => {
+      void choose(l.code)
+    },
+  })),
+])
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
+    <button
+      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"
+    >
+      <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-slate-400" />
+      <div class="min-w-0 flex-1">
+        <div class="truncate text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('language.switcher') }}
+        </div>
+        <div class="truncate text-xs font-medium text-white">{{ current }}</div>
+      </div>
+      <UIcon name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-slate-500" />
+    </button>
+  </UDropdownMenu>
+</template>

package/app/components/layout/SideBar.vue

@@ -7,6 +7,7 @@
 // default models).
 import { useEventListener, useScrollLock } from '@vueuse/core'
 import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
+import LanguageSwitcher from '~/components/layout/LanguageSwitcher.vue'
 import UserMenu from '~/components/auth/UserMenu.vue'
 import { useViewport } from '~/composables/useViewport'
 
@@ -306,6 +307,9 @@ watch(
       </section>
     </div>
 
-    <UserMenu class="mt-auto" />
+    <div class="mt-auto space-y-2">
+      <LanguageSwitcher />
+      <UserMenu />
+    </div>
   </aside>
 </template>

package/app/components/layout/TranslationWarningBanner.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+// Shown whenever the active locale is NOT English: the non-English catalogs are
+// community/AI-provided and may be inaccurate, so warn the user and point them at the
+// repository to report mistakes or open a fix PR. Rendered as a slim full-width strip at
+// the very top (distinct from the centered config-warning cards below it, so they don't
+// overlap). Dismissible per session; re-appears the next time the user switches locale.
+const REPO_URL = 'https://github.com/kibertoad/cat-factory'
+
+const { t, locale } = useI18n()
+
+const dismissed = ref(false)
+const show = computed(() => locale.value !== 'en' && !dismissed.value)
+
+// A fresh switch is a new context for the warning, so un-dismiss on every locale change.
+watch(locale, () => {
+  dismissed.value = false
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="show"
+      data-testid="translation-warning"
+      role="alert"
+      class="fixed inset-x-0 top-0 z-50 flex items-center gap-3 border-b border-amber-500/40 bg-amber-950/95 px-4 py-2 text-[13px] text-amber-100 shadow-lg backdrop-blur"
+    >
+      <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-amber-400" />
+      <p class="min-w-0 flex-1">
+        <span class="font-semibold">{{ t('language.warning.title') }}</span>
+        <span class="mx-1.5 text-amber-400/60">·</span>
+        <i18n-t keypath="language.warning.body" tag="span" scope="global">
+          <template #repoLink>
+            <a
+              :href="REPO_URL"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-1 font-medium text-sky-300 hover:underline"
+            >
+              {{ t('language.warning.repoLinkLabel') }}
+              <UIcon name="i-lucide-external-link" class="h-3 w-3" />
+            </a>
+          </template>
+        </i18n-t>
+      </p>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-x"
+        :aria-label="t('language.warning.dismiss')"
+        @click="dismissed = true"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/panels/AgentStepDetail.vue

@@ -176,7 +176,7 @@ async function copyOutput() {
       <div
         v-if="open && step && agent"
         data-testid="step-detail"
-        class="fixed inset-0 z-50 flex bg-slate-950/96 backdrop-blur-sm"
+        class="fixed inset-0 z-50 flex max-h-[100dvh] bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
       >
@@ -430,7 +430,7 @@ async function copyOutput() {
              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-[70vh] 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-l 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

@@ -44,7 +44,7 @@ const customJson = computed<string | null>(() => {
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/pipeline/PipelineBuilder.vue

@@ -210,9 +210,12 @@ async function clone(p: Pipeline) {
     :ui="{ content: 'max-w-[90vw] sm:max-w-2xl lg:max-w-5xl xl:max-w-6xl' }"
   >
     <template #body>
-      <div class="grid h-full grid-cols-1 gap-4 lg:grid-cols-3">
+      <!-- On compact viewports the three sections stack and the slideover body
+           scrolls as one column; on lg they become three independently-scrolling
+           columns filling the full height. -->
+      <div class="grid grid-cols-1 gap-4 lg:h-full lg:grid-cols-3">
         <!-- agent palette -->
-        <div class="flex min-h-0 flex-col overflow-hidden">
+        <div class="flex flex-col lg:min-h-0 lg:overflow-hidden">
           <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
               Agent palette
@@ -227,13 +230,13 @@ async function clone(p: Pipeline) {
               Add agent
             </UButton>
           </div>
-          <div class="min-h-0 flex-1 overflow-y-auto pr-1">
+          <div class="flex-1 pr-1 lg:min-h-0 lg:overflow-y-auto">
             <AgentPalette @add="add" />
           </div>
         </div>
 
         <!-- draft chain -->
-        <div class="flex min-h-0 flex-col overflow-hidden">
+        <div class="flex flex-col lg:min-h-0 lg:overflow-hidden">
           <div class="mb-2 flex items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">Pipeline</h3>
             <UButton
@@ -293,7 +296,7 @@ async function clone(p: Pipeline) {
             Click agents on the left to assemble a linear pipeline.
           </div>
 
-          <ol v-else class="min-h-0 flex-1 space-y-2 overflow-y-auto pr-1">
+          <ol v-else class="flex-1 space-y-2 pr-1 lg:min-h-0 lg:overflow-y-auto">
             <li
               v-for="(unit, vi) in pipelines.units"
               :key="unit.index"
@@ -608,7 +611,7 @@ async function clone(p: Pipeline) {
 
         <!-- Saved pipelines: review the library + delete (the run affordance
              moved to the task card / inspector when the palettes were removed). -->
-        <div v-if="pipelines.pipelines.length" class="flex min-h-0 flex-col overflow-hidden">
+        <div v-if="pipelines.pipelines.length" class="flex flex-col lg:min-h-0 lg:overflow-hidden">
           <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
               Saved pipelines
@@ -649,7 +652,7 @@ async function clone(p: Pipeline) {
             </UBadge>
           </div>
 
-          <ul class="min-h-0 flex-1 space-y-1.5 overflow-y-auto pr-1">
+          <ul class="flex-1 space-y-1.5 pr-1 lg:min-h-0 lg:overflow-y-auto">
             <li
               v-for="p in visiblePipelines"
               :key="p.id"

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -386,11 +386,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/settings/ModelConfigurationPanel.vue

@@ -240,7 +240,7 @@ function fail(title: string, e: unknown) {
     <Transition name="reader-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-50 flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        class="fixed inset-0 z-50 flex max-h-[100dvh] flex-col bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
       >

package/app/components/spec/ServiceSpecWindow.vue

@@ -104,11 +104,11 @@ function priorityMeta(item: RequirementItem) {
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/testing/TestReportWindow.vue

@@ -230,7 +230,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -181,7 +181,7 @@ const canApprove = computed(
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/pages/index.vue

@@ -208,6 +208,8 @@ watch(
 
 <template>
   <div class="flex h-screen w-screen overflow-hidden bg-slate-950 text-slate-100">
+    <!-- Non-English locale warning (unofficial translation); slim strip above everything. -->
+    <TranslationWarningBanner />
     <!-- Local-mode setup prompt (missing GitHub PAT); floats over whatever is shown below. -->
     <GitHubPatBanner />
     <!-- AI-readiness prompt (no usable model source, or default preset uses unavailable models). -->

package/app/plugins/locale.client.ts

@@ -0,0 +1,20 @@
+import { useLocaleStore } from '~/stores/locale'
+
+// Restore the user's persisted language choice on boot. The app defaults to English
+// (the locale store's default); this only re-applies an EXPLICIT prior pick. Kept
+// client-only (the SPA renders client-side) and guarded against an unknown code so a
+// stale/removed locale falls back to the i18n default instead of throwing.
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const i18n = nuxtApp.$i18n as {
+    locale: { value: string }
+    locales: { value: Array<{ code: string }> }
+    setLocale: (code: string) => Promise<void>
+  }
+  if (!i18n?.setLocale) return
+
+  const stored = useLocaleStore().current
+  const supported = i18n.locales.value.some((l) => l.code === stored)
+  if (supported && stored !== i18n.locale.value) {
+    await i18n.setLocale(stored)
+  }
+})

package/app/stores/locale.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+// Persists the user's EXPLICIT language choice so it survives reloads. The app always
+// boots in English (the `current` default) — there is no browser auto-detect — and only
+// an explicit pick via the switcher changes this. A client plugin applies `current` to
+// the active i18n locale on startup; the switcher writes here AND calls i18n's setLocale.
+export const useLocaleStore = defineStore(
+  'locale',
+  () => {
+    const current = ref('en')
+
+    function set(code: string) {
+      current.value = code
+    }
+
+    return { current, set }
+  },
+  { persist: { pick: ['current'] } },
+)

package/i18n/locales/en.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Language",
+    "warning": {
+      "title": "Unofficial translation",
+      "body": "This translation is community-provided and may be inaccurate. Spotted a mistake? Please report it or open a fix on {repoLink}.",
+      "repoLinkLabel": "the cat-factory repository",
+      "dismiss": "Dismiss"
+    }
+  },
   "common": {
     "save": "Save",
     "cancel": "Cancel",

package/i18n/locales/es.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Idioma",
+    "warning": {
+      "title": "Traducción no oficial",
+      "body": "Esta traducción es proporcionada por la comunidad y puede contener errores. ¿Has encontrado un error? Repórtalo o envía una corrección en {repoLink}.",
+      "repoLinkLabel": "el repositorio de cat-factory",
+      "dismiss": "Descartar"
+    }
+  },
   "common": {
     "save": "Guardar",
     "cancel": "Cancelar",

package/i18n/locales/fr.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Langue",
+    "warning": {
+      "title": "Traduction non officielle",
+      "body": "Cette traduction est fournie par la communauté et peut être inexacte. Vous avez repéré une erreur ? Signalez-la ou proposez une correction sur {repoLink}.",
+      "repoLinkLabel": "le dépôt cat-factory",
+      "dismiss": "Fermer"
+    }
+  },
   "common": {
     "save": "Enregistrer",
     "cancel": "Annuler",

package/i18n/locales/pl.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Język",
+    "warning": {
+      "title": "Nieoficjalne tłumaczenie",
+      "body": "To tłumaczenie pochodzi od społeczności i może być niedokładne. Zauważyłeś błąd? Zgłoś go lub prześlij poprawkę w {repoLink}.",
+      "repoLinkLabel": "repozytorium cat-factory",
+      "dismiss": "Odrzuć"
+    }
+  },
   "common": {
     "save": "Zapisz",
     "cancel": "Anuluj",

package/i18n/locales/uk.json

@@ -1,4 +1,13 @@
 {
+  "language": {
+    "switcher": "Мова",
+    "warning": {
+      "title": "Неофіційний переклад",
+      "body": "Цей переклад надано спільнотою та може бути неточним. Помітили помилку? Повідомте про неї або надішліть виправлення у {repoLink}.",
+      "repoLinkLabel": "репозиторії cat-factory",
+      "dismiss": "Закрити"
+    }
+  },
   "common": {
     "save": "Зберегти",
     "cancel": "Скасувати",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.46.0",
+  "version": "0.46.2",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",