@cat-factory/app 0.45.1 → 0.45.3

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -18,6 +18,10 @@ const connection = computed(() =>
   source.value ? documents.connectionFor(source.value) : undefined,
 )
 const connected = computed(() => connection.value !== undefined)
+// A `credentialScope: 'user'` source (e.g. Claude Design) stores a PERSONAL credential
+// keyed to the signed-in user and never shared with the workspace — surface that so a
+// member understands they're connecting their own account, not the team's.
+const isPersonal = computed(() => descriptor.value?.credentialScope === 'user')
 
 const open = computed({
   get: () => ui.documentConnect !== null,
@@ -90,6 +94,18 @@ async function disconnect() {
           structure or attach them to tasks as agent context.
         </p>
 
+        <p
+          v-if="isPersonal"
+          class="flex items-start gap-1.5 text-xs text-amber-400/90"
+          data-testid="document-source-personal-note"
+        >
+          <UIcon name="i-lucide-user" class="mt-0.5 size-3.5 shrink-0" />
+          <span>
+            Personal connection — this credential authenticates as you and is stored only for your
+            account, never shared with the rest of the workspace.
+          </span>
+        </p>
+
         <div class="space-y-3">
           <UFormField
             v-for="field in descriptor.credentialFields"

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.45.1",
+  "version": "0.45.3",
   "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",
@@ -34,7 +34,7 @@
     "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.38",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.42.0"
+    "@cat-factory/contracts": "0.43.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.1",