@cat-factory/app 0.45.2 → 0.46.0

package/app/components/layout/BoardToolbar.vue

@@ -81,7 +81,7 @@ const decisionItems = computed(() =>
 
 <template>
   <div
-    class="absolute left-1/2 top-4 z-20 flex -translate-x-1/2 items-center gap-1 rounded-full border border-slate-700 bg-slate-900/90 px-2 py-1.5 shadow-xl backdrop-blur"
+    class="absolute left-1/2 top-3 z-20 flex max-w-[calc(100vw-1rem)] -translate-x-1/2 items-center gap-1 overflow-x-auto rounded-full border border-slate-700 bg-slate-900/90 px-2 py-1.5 shadow-xl backdrop-blur"
   >
     <!-- zoom controls -->
     <UButton
@@ -91,7 +91,8 @@ const decisionItems = computed(() =>
       size="sm"
       @click="zoomOut()"
     />
-    <div class="w-20 text-center text-xs tabular-nums text-slate-300">
+    <!-- The zoom %/LOD readout is the first thing to drop on narrow viewports. -->
+    <div class="hidden w-20 text-center text-xs tabular-nums text-slate-300 sm:block">
       {{ zoomPct }}%
       <div class="text-[9px] uppercase tracking-wide text-slate-500">{{ lodLabel }}</div>
     </div>
@@ -115,16 +116,17 @@ const decisionItems = computed(() =>
         icon="i-lucide-circle-help"
         data-testid="decision-badge"
       >
-        {{ execution.pendingDecisionCount }} decision{{
-          execution.pendingDecisionCount === 1 ? '' : 's'
-        }}
+        {{ execution.pendingDecisionCount
+        }}<span class="hidden sm:inline"
+          >&nbsp;{{ $t('board.toolbar.decisionWord', execution.pendingDecisionCount) }}</span
+        >
       </UButton>
     </UDropdownMenu>
 
     <!-- in-org sharing: add an existing org service to this board -->
     <UDropdownMenu v-if="mountableItems.length" :items="mountableItems">
       <UButton color="neutral" variant="ghost" size="sm" icon="i-lucide-plus-circle">
-        Add service
+        <span class="hidden sm:inline">{{ $t('board.toolbar.addService') }}</span>
       </UButton>
     </UDropdownMenu>
 
@@ -140,7 +142,7 @@ const decisionItems = computed(() =>
       icon="i-lucide-wallet"
       :title="spend?.exceeded ? 'Spend limit reached — runs paused' : 'Token spend this month'"
     >
-      {{ spendLabel }}
+      <span class="hidden sm:inline">{{ spendLabel }}</span>
     </UButton>
   </div>
 </template>

package/app/components/layout/NotificationsInbox.vue

@@ -174,7 +174,7 @@ function revealDecision(n: Notification) {
     </UButton>
 
     <template #content>
-      <div class="max-h-[28rem] w-96 overflow-y-auto p-2">
+      <div class="max-h-[28rem] w-[min(24rem,92vw)] overflow-y-auto p-2">
         <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
           Needs your attention
         </div>

package/app/components/layout/SideBar.vue

@@ -5,8 +5,10 @@
 // actions, repository management, integration management, the workspace-wide
 // context-fragment library, and workspace configuration (merge thresholds +
 // default models).
+import { useEventListener, useScrollLock } from '@vueuse/core'
 import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
 import UserMenu from '~/components/auth/UserMenu.vue'
+import { useViewport } from '~/composables/useViewport'
 
 const documents = useDocumentsStore()
 const tasks = useTasksStore()
@@ -17,6 +19,60 @@ const workspace = useWorkspaceStore()
 const accounts = useAccountsStore()
 const ui = useUiStore()
 
+// `isCompact` (< lg) is the breakpoint at which the navbar is an off-canvas drawer;
+// above it the aside is static and the drawer flag is inert.
+const { isCompact } = useViewport()
+
+// The off-canvas drawer is a modal surface on compact viewports, so give it the
+// expected affordances:
+//   • Escape closes it (keyboard parity with the backdrop tap),
+//   • body scroll is locked while it's open (defensive — the shell root is already
+//     `overflow-hidden`, so this just guards any future scrollable ancestor),
+//   • crossing back to lg+ clears the flag so it can't linger as stale open state,
+//   • focus moves into the drawer on open, and back to the hamburger on close,
+//   • when closed (off-screen) on compact the whole aside is `inert`, so its nav
+//     controls aren't reachable by keyboard / assistive tech behind the board.
+const aside = ref<HTMLElement>()
+const drawerOpen = computed(() => isCompact.value && ui.mobileNavOpen)
+
+const bodyLocked = useScrollLock(import.meta.client ? document.body : null)
+watchEffect(() => {
+  bodyLocked.value = drawerOpen.value
+})
+
+useEventListener('keydown', (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && ui.mobileNavOpen) ui.closeMobileNav()
+})
+
+watch(isCompact, (compact) => {
+  if (!compact) ui.closeMobileNav()
+})
+
+// Closing via a nav action immediately opens a board-covering panel/modal that claims
+// focus itself, so don't yank focus back to the hamburger in that case.
+let suppressFocusRestore = false
+watch(drawerOpen, (open) => {
+  if (open) {
+    suppressFocusRestore = false
+    void nextTick(() => aside.value?.focus())
+  } else if (isCompact.value && !suppressFocusRestore) {
+    void nextTick(() =>
+      document.querySelector<HTMLElement>('[data-testid="mobile-nav-toggle"]')?.focus(),
+    )
+  }
+})
+
+// On compact (< lg) viewports the navbar is an off-canvas drawer. Activating any
+// nav control reveals a board-covering panel/modal, so close the drawer on the way
+// out — otherwise it lingers in front of (or behind) whatever just opened. Scoped to
+// the action sections (not the BoardSwitcher / UserMenu dropdowns at the ends).
+function onNavAction(e: MouseEvent) {
+  if ((e.target as HTMLElement).closest('button, a')) {
+    suppressFocusRestore = true
+    ui.closeMobileNav()
+  }
+}
+
 // Resolve whether the document-source / task-source / GitHub integrations are
 // enabled on the backend, so each section is hidden entirely when it is off
 // (mirrors how auth gates its UI). A 503 from a probe flips its `available` to
@@ -36,190 +92,219 @@ watch(
 </script>
 
 <template>
+  <!-- On < lg the navbar slides in over the board; this backdrop dims the board and
+       closes the drawer on tap. Hidden on lg+ where the navbar is a static aside. -->
+  <Transition
+    enter-active-class="transition-opacity duration-200"
+    leave-active-class="transition-opacity duration-200"
+    enter-from-class="opacity-0"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="ui.mobileNavOpen"
+      class="fixed inset-0 z-30 bg-slate-950/60 backdrop-blur-sm lg:hidden"
+      data-testid="sidebar-backdrop"
+      role="button"
+      tabindex="-1"
+      :aria-label="$t('common.close')"
+      @click="ui.closeMobileNav()"
+    />
+  </Transition>
+
   <aside
-    class="flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-r border-slate-800 bg-slate-900/80 p-3 backdrop-blur"
+    ref="aside"
+    data-testid="sidebar"
+    tabindex="-1"
+    :role="drawerOpen ? 'dialog' : undefined"
+    :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'"
   >
     <BoardSwitcher />
 
-    <!-- Command bar launcher (⌘K) — the primary way to create blocks / pipelines
+    <div class="contents" @click="onNavAction">
+      <!-- Command bar launcher (⌘K) — the primary way to create blocks / pipelines
          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"
-      @click="ui.openCommandBar()"
-    >
-      <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0" />
-      <span class="flex-1 truncate">Search or run a command…</span>
-      <UKbd value="⌘K" />
-    </button>
-
-    <section>
-      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Create
-      </h2>
-      <div class="space-y-1.5">
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-workflow"
-          class="justify-start"
-          @click="ui.openBuilder()"
-        >
-          Build a pipeline
-        </UButton>
-      </div>
-    </section>
-
-    <USeparator />
-
-    <section>
-      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Repositories
-      </h2>
-      <div class="space-y-1.5">
-        <UButton
-          v-if="github.available"
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-folder-git-2"
-          class="justify-start"
-          @click="ui.openAddService()"
-        >
-          Add from existing repo
-        </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-git-branch-plus"
-          class="justify-start"
-          @click="ui.openBootstrap()"
-        >
-          Bootstrap repo
-        </UButton>
-      </div>
-    </section>
-
-    <USeparator />
-
-    <section>
-      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Integrations
-      </h2>
-      <div class="space-y-1.5">
-        <!-- Every external system the workspace can enable/link now lives behind
+      <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"
+        @click="ui.openCommandBar()"
+      >
+        <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0" />
+        <span class="flex-1 truncate">{{ $t('nav.commandBar') }}</span>
+        <UKbd value="⌘K" />
+      </button>
+
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ $t('nav.create') }}
+        </h2>
+        <div class="space-y-1.5">
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-workflow"
+            class="justify-start"
+            @click="ui.openBuilder()"
+          >
+            {{ $t('nav.buildPipeline') }}
+          </UButton>
+        </div>
+      </section>
+
+      <USeparator />
+
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ $t('nav.repositories') }}
+        </h2>
+        <div class="space-y-1.5">
+          <UButton
+            v-if="github.available"
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-folder-git-2"
+            class="justify-start"
+            @click="ui.openAddService()"
+          >
+            {{ $t('nav.addFromRepo') }}
+          </UButton>
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-git-branch-plus"
+            class="justify-start"
+            @click="ui.openBootstrap()"
+          >
+            {{ $t('nav.bootstrapRepo') }}
+          </UButton>
+        </div>
+      </section>
+
+      <USeparator />
+
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ $t('nav.integrations') }}
+        </h2>
+        <div class="space-y-1.5">
+          <!-- Every external system the workspace can enable/link now lives behind
              this single button — the hub modal lists them grouped (source control,
              communication, documents, trackers, observability, model providers). -->
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-blocks"
-          class="justify-start"
-          @click="ui.openIntegrations()"
-        >
-          Integrations
-        </UButton>
-        <!-- The Sandbox: try prompt versions/models against graded fixtures, off to the
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-blocks"
+            class="justify-start"
+            @click="ui.openIntegrations()"
+          >
+            {{ $t('nav.integrations') }}
+          </UButton>
+          <!-- The Sandbox: try prompt versions/models against graded fixtures, off to the
              side of the board. Opens the on-demand testing window. -->
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-flask-conical"
-          class="justify-start"
-          @click="ui.openSandbox()"
-        >
-          Sandbox
-        </UButton>
-        <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. -->
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-sparkles"
-          class="justify-start"
-          @click="ui.openKaizen()"
-        >
-          Kaizen
-        </UButton>
-      </div>
-    </section>
-
-    <template v-if="library.available">
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-flask-conical"
+            class="justify-start"
+            @click="ui.openSandbox()"
+          >
+            {{ $t('nav.sandbox') }}
+          </UButton>
+          <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. -->
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-sparkles"
+            class="justify-start"
+            @click="ui.openKaizen()"
+          >
+            {{ $t('nav.kaizen') }}
+          </UButton>
+        </div>
+      </section>
+
+      <template v-if="library.available">
+        <USeparator />
+        <section>
+          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ $t('nav.workspaceContext') }}
+          </h2>
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-book-marked"
+            class="justify-start"
+            @click="ui.openFragmentLibrary()"
+          >
+            {{ $t('nav.contextFragments') }}
+          </UButton>
+        </section>
+      </template>
+
       <USeparator />
       <section>
         <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          Workspace context
+          {{ $t('nav.configuration') }}
         </h2>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-book-marked"
-          class="justify-start"
-          @click="ui.openFragmentLibrary()"
-        >
-          Context fragments
-        </UButton>
-      </section>
-    </template>
-
-    <USeparator />
-    <section>
-      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Configuration
-      </h2>
-      <div class="space-y-1.5">
-        <!-- Merge thresholds, issue writeback and default service best practices are
+        <div class="space-y-1.5">
+          <!-- Merge thresholds, issue writeback and default service best practices are
              now tabs inside Workspace settings. -->
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-sliders-horizontal"
-          class="justify-start"
-          @click="ui.openWorkspaceSettings()"
-        >
-          Workspace settings
-        </UButton>
-        <UButton
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-cpu"
-          class="justify-start"
-          @click="ui.openModelConfig()"
-        >
-          Model Configuration
-        </UButton>
-        <!-- Account & team: members + roles, invitations, email sender, account API keys.
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-sliders-horizontal"
+            class="justify-start"
+            @click="ui.openWorkspaceSettings()"
+          >
+            {{ $t('nav.workspaceSettings') }}
+          </UButton>
+          <UButton
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-cpu"
+            class="justify-start"
+            @click="ui.openModelConfig()"
+          >
+            {{ $t('nav.modelConfiguration') }}
+          </UButton>
+          <!-- Account & team: members + roles, invitations, email sender, account API keys.
              Shown once accounts (auth) are enabled. -->
-        <UButton
-          v-if="accounts.enabled"
-          block
-          color="primary"
-          variant="soft"
-          size="sm"
-          icon="i-lucide-users"
-          class="justify-start"
-          @click="ui.openAccountSettings()"
-        >
-          Account settings
-        </UButton>
-      </div>
-    </section>
+          <UButton
+            v-if="accounts.enabled"
+            block
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-users"
+            class="justify-start"
+            @click="ui.openAccountSettings()"
+          >
+            {{ $t('nav.accountSettings') }}
+          </UButton>
+        </div>
+      </section>
+    </div>
 
     <UserMenu class="mt-auto" />
   </aside>

package/app/components/panels/InspectorPanel.vue

@@ -204,13 +204,16 @@ const showOriginalDescription = ref(false)
 <template>
   <div
     v-if="block && statusMeta && typeMeta"
-    class="absolute right-4 top-4 z-20 w-80 overflow-hidden rounded-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur"
+    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"
   >
     <div class="h-1.5 w-full" :style="{ backgroundColor: statusMeta.color }" />
     <!-- A tall task (execution steps + scenarios + docs) can overflow the
          viewport; cap the body height and let it scroll so the lower controls
-         (Run / Focus / Delete) stay reachable. The status bar above stays put. -->
-    <div class="max-h-[calc(100vh-5rem)] space-y-4 overflow-y-auto p-4">
+         (Run / Focus / Delete) stay reachable. The status bar above stays put.
+         On compact viewports the panel is a bottom sheet capped to the visible
+         height (dvh excludes mobile browser chrome). -->
+    <div class="max-h-[80dvh] space-y-4 overflow-y-auto p-4 lg:max-h-[calc(100vh-5rem)]">
       <!-- header -->
       <div class="flex items-start justify-between gap-2">
         <div class="flex items-center gap-2">

package/app/composables/useViewport.ts

@@ -0,0 +1,19 @@
+import { useBreakpoints, breakpointsTailwind, useMediaQuery } from '@vueuse/core'
+
+/**
+ * Single source of truth for responsive / input-modality decisions across the SPA.
+ *
+ * `isCompact` is the app-wide "mobile/compact" flag: true below Tailwind's `lg`
+ * (1024px), matching the breakpoint the already-responsive surfaces use
+ * (`AgentStepDetail`, the review windows) so the whole shell stays consistent.
+ *
+ * `isTouch` reports a coarse pointer (phones/tablets) so a component can enlarge
+ * hit targets without affecting precise-pointer (mouse) desktops — orthogonal to
+ * width, since a small window on a desktop is compact but not touch.
+ */
+export function useViewport() {
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+  const isCompact = breakpoints.smaller('lg')
+  const isTouch = useMediaQuery('(pointer: coarse)')
+  return { isCompact, isTouch }
+}

package/app/pages/index.vue

@@ -231,6 +231,20 @@ watch(
       <SideBar />
       <main class="relative min-w-0 flex-1">
         <BoardCanvas />
+        <!-- Compact-viewport navbar trigger: the SideBar is an off-canvas drawer below
+             lg, so surface a hamburger to open it. Hidden on lg+ (static sidebar). -->
+        <!-- z-30 keeps the trigger above the centered BoardToolbar (z-20), whose
+             max-width can otherwise reach this corner on the narrowest viewports. -->
+        <UButton
+          class="absolute left-3 top-3 z-30 lg:hidden"
+          icon="i-lucide-menu"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          :aria-label="ui.mobileNavOpen ? $t('nav.closeMenu') : $t('nav.openMenu')"
+          data-testid="mobile-nav-toggle"
+          @click="ui.toggleMobileNav()"
+        />
         <BoardToolbar />
         <SpendWarningBanner />
         <InspectorPanel />

package/app/stores/ui.ts

@@ -85,6 +85,11 @@ export const useUiStore = defineStore('ui', () => {
   // Command bar (⌘K) — searchable launcher for every navbar action.
   const commandBarOpen = ref(false)
 
+  // Mobile navigation drawer: on compact (< lg) viewports the SideBar is an
+  // off-canvas drawer toggled by a hamburger; on lg+ it is a static aside and this
+  // flag is ignored. Closed on any nav action so the board is revealed immediately.
+  const mobileNavOpen = ref(false)
+
   // Integrations hub: a single modal listing every external system the workspace
   // can enable/link (GitHub, Slack, document + task sources, Datadog, LLM vendors,
   // local runners, OpenRouter). Replaces the per-integration navbar buttons; each
@@ -393,6 +398,15 @@ export const useUiStore = defineStore('ui', () => {
   function toggleCommandBar() {
     commandBarOpen.value = !commandBarOpen.value
   }
+  function openMobileNav() {
+    mobileNavOpen.value = true
+  }
+  function closeMobileNav() {
+    mobileNavOpen.value = false
+  }
+  function toggleMobileNav() {
+    mobileNavOpen.value = !mobileNavOpen.value
+  }
   // Clear BOTH hub came-from markers. Every direct `open*` below calls this so that a
   // panel opened outside the hubs never grows a dead Back control, and so switching from
   // one hub's panel to the other's clears the stale marker.
@@ -638,6 +652,7 @@ export const useUiStore = defineStore('ui', () => {
     slackOpen,
     fragmentLibraryOpen,
     commandBarOpen,
+    mobileNavOpen,
     integrationsOpen,
     cameFromIntegrations,
     personalSetupOpen,
@@ -707,6 +722,9 @@ export const useUiStore = defineStore('ui', () => {
     openCommandBar,
     closeCommandBar,
     toggleCommandBar,
+    openMobileNav,
+    closeMobileNav,
+    toggleMobileNav,
     openIntegrations,
     closeIntegrations,
     openFromIntegrations,

package/i18n/i18n.config.ts

@@ -19,11 +19,47 @@ export default defineI18nConfig(() => ({
       currency: { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' },
       percent: { style: 'percent', maximumFractionDigits: 1 },
     },
+    es: {
+      decimal: { style: 'decimal' },
+      currency: { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' },
+      percent: { style: 'percent', maximumFractionDigits: 1 },
+    },
+    pl: {
+      decimal: { style: 'decimal' },
+      currency: { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' },
+      percent: { style: 'percent', maximumFractionDigits: 1 },
+    },
+    uk: {
+      decimal: { style: 'decimal' },
+      currency: { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' },
+      percent: { style: 'percent', maximumFractionDigits: 1 },
+    },
+    fr: {
+      decimal: { style: 'decimal' },
+      currency: { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' },
+      percent: { style: 'percent', maximumFractionDigits: 1 },
+    },
   },
   datetimeFormats: {
     en: {
       short: { dateStyle: 'medium' },
       long: { dateStyle: 'long', timeStyle: 'short' },
     },
+    es: {
+      short: { dateStyle: 'medium' },
+      long: { dateStyle: 'long', timeStyle: 'short' },
+    },
+    pl: {
+      short: { dateStyle: 'medium' },
+      long: { dateStyle: 'long', timeStyle: 'short' },
+    },
+    uk: {
+      short: { dateStyle: 'medium' },
+      long: { dateStyle: 'long', timeStyle: 'short' },
+    },
+    fr: {
+      short: { dateStyle: 'medium' },
+      long: { dateStyle: 'long', timeStyle: 'short' },
+    },
   },
 }))

package/i18n/locales/en.json

@@ -3,7 +3,34 @@
     "save": "Save",
     "cancel": "Cancel",
     "retry": "Retry",
-    "actionFailed": "Action failed"
+    "actionFailed": "Action failed",
+    "close": "Close"
+  },
+  "nav": {
+    "menu": "Navigation menu",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu",
+    "commandBar": "Search or run a command…",
+    "create": "Create",
+    "buildPipeline": "Build a pipeline",
+    "repositories": "Repositories",
+    "addFromRepo": "Add from existing repo",
+    "bootstrapRepo": "Bootstrap repo",
+    "integrations": "Integrations",
+    "sandbox": "Sandbox",
+    "kaizen": "Kaizen",
+    "workspaceContext": "Workspace context",
+    "contextFragments": "Context fragments",
+    "configuration": "Configuration",
+    "workspaceSettings": "Workspace settings",
+    "modelConfiguration": "Model Configuration",
+    "accountSettings": "Account settings"
+  },
+  "board": {
+    "toolbar": {
+      "addService": "Add service",
+      "decisionWord": "decision | decisions"
+    }
   },
   "errors": {
     "action": {

package/i18n/locales/es.json

@@ -0,0 +1,62 @@
+{
+  "common": {
+    "save": "Guardar",
+    "cancel": "Cancelar",
+    "retry": "Reintentar",
+    "actionFailed": "La acción falló",
+    "close": "Cerrar"
+  },
+  "nav": {
+    "menu": "Menú de navegación",
+    "openMenu": "Abrir menú",
+    "closeMenu": "Cerrar menú",
+    "commandBar": "Buscar o ejecutar un comando…",
+    "create": "Crear",
+    "buildPipeline": "Crear una canalización",
+    "repositories": "Repositorios",
+    "addFromRepo": "Añadir desde un repositorio existente",
+    "bootstrapRepo": "Inicializar repositorio",
+    "integrations": "Integraciones",
+    "sandbox": "Entorno de pruebas",
+    "kaizen": "Kaizen",
+    "workspaceContext": "Contexto del espacio de trabajo",
+    "contextFragments": "Fragmentos de contexto",
+    "configuration": "Configuración",
+    "workspaceSettings": "Ajustes del espacio de trabajo",
+    "modelConfiguration": "Configuración del modelo",
+    "accountSettings": "Ajustes de la cuenta"
+  },
+  "board": {
+    "toolbar": {
+      "addService": "Añadir servicio",
+      "decisionWord": "decisión | decisiones"
+    }
+  },
+  "errors": {
+    "action": {
+      "retryFailed": "El reintento falló",
+      "startFailed": "No se pudo iniciar",
+      "mergeFailed": "No se pudo fusionar",
+      "restartFailed": "No se pudo reiniciar"
+    },
+    "conflict": {
+      "title": {
+        "dependencies_unmet": "Bloqueado por dependencias",
+        "task_limit_reached": "Límite de concurrencia alcanzado",
+        "tester_infra_unsupported": "Infraestructura de pruebas no configurada",
+        "agent_backend_unconfigured": "Backend del agente no configurado",
+        "run_not_retryable": "La ejecución no se puede reintentar",
+        "no_pr_to_merge": "No hay PR para fusionar",
+        "github_not_connected": "GitHub no conectado",
+        "bootstrap_not_retryable": "La inicialización no se puede reintentar",
+        "bootstrap_reference_missing": "La arquitectura de referencia ha desaparecido"
+      },
+      "fallbackMessage": "Esta acción entra en conflicto con el estado actual.",
+      "providersUnconfigured": {
+        "title": "No hay proveedor de IA para este modelo",
+        "body": "No hay ningún proveedor configurado para {models}. Añade una clave de proveedor, conecta una suscripción o activa Cloudflare AI para ejecutarlo.",
+        "action": "Configurar IA"
+      }
+    }
+  }
+}

package/i18n/locales/fr.json

@@ -0,0 +1,62 @@
+{
+  "common": {
+    "save": "Enregistrer",
+    "cancel": "Annuler",
+    "retry": "Réessayer",
+    "actionFailed": "Échec de l’action",
+    "close": "Fermer"
+  },
+  "nav": {
+    "menu": "Menu de navigation",
+    "openMenu": "Ouvrir le menu",
+    "closeMenu": "Fermer le menu",
+    "commandBar": "Rechercher ou exécuter une commande…",
+    "create": "Créer",
+    "buildPipeline": "Créer un pipeline",
+    "repositories": "Dépôts",
+    "addFromRepo": "Ajouter depuis un dépôt existant",
+    "bootstrapRepo": "Initialiser un dépôt",
+    "integrations": "Intégrations",
+    "sandbox": "Bac à sable",
+    "kaizen": "Kaizen",
+    "workspaceContext": "Contexte de l’espace de travail",
+    "contextFragments": "Fragments de contexte",
+    "configuration": "Configuration",
+    "workspaceSettings": "Paramètres de l’espace de travail",
+    "modelConfiguration": "Configuration du modèle",
+    "accountSettings": "Paramètres du compte"
+  },
+  "board": {
+    "toolbar": {
+      "addService": "Ajouter un service",
+      "decisionWord": "décision | décisions"
+    }
+  },
+  "errors": {
+    "action": {
+      "retryFailed": "Échec de la nouvelle tentative",
+      "startFailed": "Échec du démarrage",
+      "mergeFailed": "Échec de la fusion",
+      "restartFailed": "Échec du redémarrage"
+    },
+    "conflict": {
+      "title": {
+        "dependencies_unmet": "Bloqué par des dépendances",
+        "task_limit_reached": "Limite de concurrence atteinte",
+        "tester_infra_unsupported": "Infrastructure de test non configurée",
+        "agent_backend_unconfigured": "Backend de l’agent non configuré",
+        "run_not_retryable": "L’exécution ne peut pas être relancée",
+        "no_pr_to_merge": "Aucune PR à fusionner",
+        "github_not_connected": "GitHub non connecté",
+        "bootstrap_not_retryable": "L’initialisation ne peut pas être relancée",
+        "bootstrap_reference_missing": "L’architecture de référence a disparu"
+      },
+      "fallbackMessage": "Cette action est en conflit avec l’état actuel.",
+      "providersUnconfigured": {
+        "title": "Aucun fournisseur d’IA pour ce modèle",
+        "body": "Aucun fournisseur n’est configuré pour {models}. Ajoutez une clé de fournisseur, connectez un abonnement ou activez Cloudflare AI pour l’exécuter.",
+        "action": "Configurer l’IA"
+      }
+    }
+  }
+}

package/i18n/locales/pl.json

@@ -0,0 +1,62 @@
+{
+  "common": {
+    "save": "Zapisz",
+    "cancel": "Anuluj",
+    "retry": "Ponów",
+    "actionFailed": "Akcja nie powiodła się",
+    "close": "Zamknij"
+  },
+  "nav": {
+    "menu": "Menu nawigacji",
+    "openMenu": "Otwórz menu",
+    "closeMenu": "Zamknij menu",
+    "commandBar": "Wyszukaj lub uruchom polecenie…",
+    "create": "Utwórz",
+    "buildPipeline": "Zbuduj potok",
+    "repositories": "Repozytoria",
+    "addFromRepo": "Dodaj z istniejącego repozytorium",
+    "bootstrapRepo": "Zainicjuj repozytorium",
+    "integrations": "Integracje",
+    "sandbox": "Piaskownica",
+    "kaizen": "Kaizen",
+    "workspaceContext": "Kontekst obszaru roboczego",
+    "contextFragments": "Fragmenty kontekstu",
+    "configuration": "Konfiguracja",
+    "workspaceSettings": "Ustawienia obszaru roboczego",
+    "modelConfiguration": "Konfiguracja modelu",
+    "accountSettings": "Ustawienia konta"
+  },
+  "board": {
+    "toolbar": {
+      "addService": "Dodaj usługę",
+      "decisionWord": "decyzja | decyzje | decyzji"
+    }
+  },
+  "errors": {
+    "action": {
+      "retryFailed": "Ponowienie nie powiodło się",
+      "startFailed": "Nie udało się uruchomić",
+      "mergeFailed": "Nie udało się scalić",
+      "restartFailed": "Nie udało się ponownie uruchomić"
+    },
+    "conflict": {
+      "title": {
+        "dependencies_unmet": "Zablokowane przez zależności",
+        "task_limit_reached": "Osiągnięto limit współbieżności",
+        "tester_infra_unsupported": "Infrastruktura testowa nie jest skonfigurowana",
+        "agent_backend_unconfigured": "Backend agenta nie jest skonfigurowany",
+        "run_not_retryable": "Uruchomienia nie można ponowić",
+        "no_pr_to_merge": "Brak PR do scalenia",
+        "github_not_connected": "GitHub nie jest połączony",
+        "bootstrap_not_retryable": "Inicjalizacji nie można ponowić",
+        "bootstrap_reference_missing": "Architektura referencyjna zniknęła"
+      },
+      "fallbackMessage": "Ta akcja jest sprzeczna z bieżącym stanem.",
+      "providersUnconfigured": {
+        "title": "Brak dostawcy AI dla tego modelu",
+        "body": "Dla {models} nie skonfigurowano żadnego dostawcy. Dodaj klucz dostawcy, połącz subskrypcję lub włącz Cloudflare AI, aby go uruchomić.",
+        "action": "Skonfiguruj AI"
+      }
+    }
+  }
+}

package/i18n/locales/uk.json

@@ -0,0 +1,62 @@
+{
+  "common": {
+    "save": "Зберегти",
+    "cancel": "Скасувати",
+    "retry": "Повторити",
+    "actionFailed": "Не вдалося виконати дію",
+    "close": "Закрити"
+  },
+  "nav": {
+    "menu": "Меню навігації",
+    "openMenu": "Відкрити меню",
+    "closeMenu": "Закрити меню",
+    "commandBar": "Знайти або виконати команду…",
+    "create": "Створити",
+    "buildPipeline": "Створити конвеєр",
+    "repositories": "Репозиторії",
+    "addFromRepo": "Додати з наявного репозиторію",
+    "bootstrapRepo": "Ініціалізувати репозиторій",
+    "integrations": "Інтеграції",
+    "sandbox": "Пісочниця",
+    "kaizen": "Kaizen",
+    "workspaceContext": "Контекст робочого простору",
+    "contextFragments": "Фрагменти контексту",
+    "configuration": "Конфігурація",
+    "workspaceSettings": "Налаштування робочого простору",
+    "modelConfiguration": "Конфігурація моделі",
+    "accountSettings": "Налаштування облікового запису"
+  },
+  "board": {
+    "toolbar": {
+      "addService": "Додати сервіс",
+      "decisionWord": "рішення | рішення | рішень"
+    }
+  },
+  "errors": {
+    "action": {
+      "retryFailed": "Не вдалося повторити",
+      "startFailed": "Не вдалося запустити",
+      "mergeFailed": "Не вдалося злити",
+      "restartFailed": "Не вдалося перезапустити"
+    },
+    "conflict": {
+      "title": {
+        "dependencies_unmet": "Заблоковано залежностями",
+        "task_limit_reached": "Досягнуто ліміту одночасності",
+        "tester_infra_unsupported": "Тестову інфраструктуру не налаштовано",
+        "agent_backend_unconfigured": "Бекенд агента не налаштовано",
+        "run_not_retryable": "Запуск неможливо повторити",
+        "no_pr_to_merge": "Немає PR для злиття",
+        "github_not_connected": "GitHub не підключено",
+        "bootstrap_not_retryable": "Ініціалізацію неможливо повторити",
+        "bootstrap_reference_missing": "Еталонна архітектура зникла"
+      },
+      "fallbackMessage": "Ця дія суперечить поточному стану.",
+      "providersUnconfigured": {
+        "title": "Немає постачальника ШІ для цієї моделі",
+        "body": "Для {models} не налаштовано жодного постачальника. Додайте ключ постачальника, підключіть підписку або увімкніть Cloudflare AI, щоб запустити її.",
+        "action": "Налаштувати ШІ"
+      }
+    }
+  }
+}

package/nuxt.config.ts

@@ -46,7 +46,13 @@ export default defineNuxtConfig({
     // Pure SPA (`ssr: false`): a single in-app locale, no URL-prefix routing.
     strategy: 'no_prefix',
     defaultLocale: 'en',
-    locales: [{ code: 'en', language: 'en-US', file: 'en.json', name: 'English' }],
+    locales: [
+      { code: 'en', language: 'en-US', file: 'en.json', name: 'English' },
+      { code: 'es', language: 'es-ES', file: 'es.json', name: 'Español' },
+      { code: 'pl', language: 'pl-PL', file: 'pl.json', name: 'Polski' },
+      { code: 'uk', language: 'uk-UA', file: 'uk.json', name: 'Українська' },
+      { code: 'fr', language: 'fr-FR', file: 'fr.json', name: 'Français' },
+    ],
     vueI18n: 'i18n.config.ts',
     experimental: {
       // Generate types from the `en` messages so an unknown `$t`/`t` key is a `nuxt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.45.2",
+  "version": "0.46.0",
   "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",