@cat-factory/app 0.116.2 → 0.116.4

package/app/assets/css/main.css

@@ -9,6 +9,37 @@
   user-select: text;
 }
 
+/* Keep the bottom-anchored toaster clear of the home indicator / rounded corner
+ * on phones. The toaster viewport is bottom-anchored (Nuxt UI positions it at
+ * `bottom-4`), so we add the safe-area inset to that OFFSET rather than to the
+ * padding: each toast is `position: absolute; bottom: 0` inside the viewport, so
+ * padding-bottom does not lift it (an abs child anchored to `bottom-0` tracks the
+ * padding-box edge and ignores the padding). `env(safe-area-inset-bottom)` is 0
+ * until the viewport meta carries `viewport-fit=cover` (see nuxt.config.ts), so
+ * this collapses to the stock `1rem` on desktop. Assumes the default bottom
+ * placement (the app does not configure a top-anchored toaster). */
+[data-slot='viewport'] {
+  bottom: calc(1rem + env(safe-area-inset-bottom));
+}
+
+/* Input font floor (P-3): iOS Safari auto-zooms the viewport whenever a focused
+ * field renders below 16px, which yanks the layout around on every tap into an
+ * input. Floor every editable control at 16px on coarse-pointer (touch) devices.
+ * This is the app-wide, fix-once guard: it reaches Nuxt UI's rendered
+ * `<input>`/`<textarea>` AND every hand-rolled raw field, and — unlike a
+ * component-default override — cannot be defeated by a per-instance `size="sm"`.
+ * `max(16px, 1em)` floors at 16px while leaving any deliberately larger field
+ * (1em resolves against the surrounding font size) untouched. Fine-pointer
+ * (desktop) keeps the denser typography. Checkbox/radio/range/color have no
+ * text baseline and never trigger the zoom, so they're excluded. */
+@media (pointer: coarse) {
+  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
+  textarea,
+  select {
+    font-size: max(16px, 1em);
+  }
+}
+
 /* ---- Agent Architecture Board: shared visual language ---------------------- */
 
 :root {

package/app/components/layout/SideBar.vue

@@ -139,7 +139,7 @@ watch(
     :aria-modal="drawerOpen ? 'true' : undefined"
     :aria-label="isCompact ? t('nav.menu') : undefined"
     :inert="isCompact && !ui.mobileNavOpen"
-    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-slate-800 bg-slate-900/95 p-3 backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
+    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-slate-800 bg-slate-900/95 px-3 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
     :class="
       ui.mobileNavOpen ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full lg:translate-x-0'
     "

package/app/components/panels/AgentStepDetail.vue

@@ -572,7 +572,7 @@ async function copyOutput() {
             </p>
           </div>
 
-          <div class="flex-1 space-y-3 overflow-auto px-4 py-3">
+          <div class="flex-1 space-y-3 overflow-auto overscroll-contain px-4 py-3">
             <p
               v-if="editing"
               class="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-[12px] leading-relaxed text-amber-200/90"
@@ -659,7 +659,10 @@ async function copyOutput() {
           </div>
 
           <!-- edit-then-approve actions -->
-          <div v-if="editing" class="space-y-2 border-t border-slate-800 px-4 py-3">
+          <div
+            v-if="editing"
+            class="space-y-2 border-t border-slate-800 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+          >
             <UButton
               color="primary"
               size="sm"
@@ -682,7 +685,10 @@ async function copyOutput() {
             </UButton>
           </div>
 
-          <div v-else class="space-y-2 border-t border-slate-800 px-4 py-3">
+          <div
+            v-else
+            class="space-y-2 border-t border-slate-800 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+          >
             <UButton
               color="primary"
               data-testid="step-approve"

package/app/components/panels/InspectorPanel.vue

@@ -269,7 +269,9 @@ const showOriginalDescription = ref(false)
          (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)]">
+    <div
+      class="max-h-[80dvh] space-y-4 overflow-y-auto overscroll-contain px-4 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] 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/components/providers/PersonalSubscriptionSection.vue

@@ -4,7 +4,7 @@
 // rather than pooled on the workspace. Each token is double-encrypted server-side under a
 // personal PASSWORD (never stored); that password is what you'll enter when you start/retry
 // such a run (cached locally so it's usually transparent). Recurring schedules can't use them.
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { SubscriptionVendor } from '~/types/domain'
 import SecretInput from '~/components/common/SecretInput.vue'
 
@@ -87,7 +87,33 @@ const password = ref('')
 const expiresOn = ref('') // yyyy-mm-dd (optional)
 const busy = ref(false)
 
+// A transient "credentials stored" confirmation shown inline right after a successful save.
+// Emptying the form on success recomputes `disabledReason` back to "enter a token", so without
+// this the user is greeted by a red validation error immediately after they succeeded — which
+// reads as a failure. While this notice is set we suppress `disabledReason` and show it instead,
+// then clear it after a few seconds (or the moment the user starts entering a new credential).
+const savedNotice = ref<string | null>(null)
+let savedTimer: ReturnType<typeof setTimeout> | undefined
+
+function clearSavedNotice() {
+  savedNotice.value = null
+  if (savedTimer) {
+    clearTimeout(savedTimer)
+    savedTimer = undefined
+  }
+}
+
+// Once the user touches the form again the success notice is stale — drop it so `disabledReason`
+// guides the next entry as usual. Guard on non-empty input so the programmatic clear performed by
+// a successful `connect()` (which resets the fields to empty) doesn't immediately wipe the notice
+// we just set; switching vendor always clears it.
+watch([token, password], ([tok, pwd]) => {
+  if (savedNotice.value && (tok.trim() || pwd)) clearSavedNotice()
+})
+watch(vendor, () => clearSavedNotice())
+
 onMounted(() => void personal.load())
+onBeforeUnmount(() => clearSavedNotice())
 
 const selectedMeta = computed(() => vendorMeta(vendor.value) ?? PERSONAL_VENDORS.value[0]!)
 const existing = computed(() => personal.subscriptions.find((s) => s.vendor === vendor.value))
@@ -118,6 +144,7 @@ const renewals = computed(() =>
 
 async function connect() {
   if (!token.value.trim() || password.value.length < 6) return
+  const vendorName = selectedMeta.value.label
   busy.value = true
   try {
     await personal.store({
@@ -133,13 +160,19 @@ async function connect() {
     password.value = ''
     label.value = ''
     expiresOn.value = ''
+    // Confirm success inline (and transiently) so emptying the form doesn't surface the
+    // `disabledReason` validation text as if the save had failed. It clears after a few
+    // seconds, or as soon as the user starts entering another credential.
+    savedNotice.value = t('personalSubscriptions.saved', { vendor: vendorName })
+    if (savedTimer) clearTimeout(savedTimer)
+    savedTimer = setTimeout(clearSavedNotice, 5000)
     // A connected subscription makes its vendor's models usable, so refresh the catalog:
     // this clears the "No AI model configured" banner and, if the default preset still
     // points at models this subscription doesn't cover, reactively surfaces the
     // preset-mismatch prompt (with its "pick a different preset" link).
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
     toast.add({
-      title: t('personalSubscriptions.toast.connected', { vendor: selectedMeta.value.label }),
+      title: t('personalSubscriptions.toast.connected', { vendor: vendorName }),
       icon: 'i-lucide-check',
       color: 'success',
     })
@@ -266,7 +299,11 @@ async function disconnect(v: SubscriptionVendor) {
         </UFormField>
       </div>
       <div class="flex items-center justify-end gap-3">
-        <p v-if="disabledReason" class="text-sm text-rose-400">{{ disabledReason }}</p>
+        <p v-if="savedNotice" class="flex items-center gap-1.5 text-sm text-emerald-400">
+          <UIcon name="i-lucide-check" class="size-4" />
+          {{ savedNotice }}
+        </p>
+        <p v-else-if="disabledReason" class="text-sm text-rose-400">{{ disabledReason }}</p>
         <UButton
           :loading="busy"
           :disabled="disabledReason !== null"

package/i18n/locales/de.json

@@ -2569,6 +2569,7 @@
       "token": "Geben Sie Ihr Token ein, um fortzufahren",
       "password": "Geben Sie ein persönliches Passwort mit mindestens 6 Zeichen ein"
     },
+    "saved": "{vendor}-Zugangsdaten sicher gespeichert",
     "expires": "Läuft ab am {date}",
     "noExpiry": "Kein Ablaufdatum gesetzt",
     "renewal": {

package/i18n/locales/en.json

@@ -538,6 +538,7 @@
       "token": "Enter your token to continue",
       "password": "Enter a personal password of at least 6 characters"
     },
+    "saved": "{vendor} credentials stored securely",
     "expires": "Expires {date}",
     "noExpiry": "No expiry set",
     "renewal": {

package/i18n/locales/es.json

@@ -487,6 +487,7 @@
       "token": "Introduce tu token para continuar",
       "password": "Introduce una contraseña personal de al menos 6 caracteres"
     },
+    "saved": "Credenciales de {vendor} guardadas de forma segura",
     "expires": "Caduca el {date}",
     "noExpiry": "Sin fecha de caducidad",
     "renewal": {

package/i18n/locales/fr.json

@@ -487,6 +487,7 @@
       "token": "Saisissez votre jeton pour continuer",
       "password": "Saisissez un mot de passe personnel d'au moins 6 caractères"
     },
+    "saved": "Identifiants {vendor} enregistrés en toute sécurité",
     "expires": "Expire le {date}",
     "noExpiry": "Aucune date d'expiration",
     "renewal": {

package/i18n/locales/he.json

@@ -487,6 +487,7 @@
       "token": "הזן את הטוקן שלך כדי להמשיך",
       "password": "הזן סיסמה אישית באורך 6 תווים לפחות"
     },
+    "saved": "פרטי ההתחברות של {vendor} נשמרו בבטחה",
     "expires": "פג בתאריך {date}",
     "noExpiry": "לא הוגדרה תפוגה",
     "renewal": {

package/i18n/locales/it.json

@@ -2569,6 +2569,7 @@
       "token": "Inserisci il tuo token per continuare",
       "password": "Inserisci una password personale di almeno 6 caratteri"
     },
+    "saved": "Credenziali {vendor} salvate in modo sicuro",
     "expires": "Scade il {date}",
     "noExpiry": "Nessuna scadenza impostata",
     "renewal": {

package/i18n/locales/ja.json

@@ -487,6 +487,7 @@
       "token": "続行するにはトークンを入力してください",
       "password": "6文字以上の個人パスワードを入力してください"
     },
+    "saved": "{vendor} の認証情報を安全に保存しました",
     "expires": "有効期限 {date}",
     "noExpiry": "有効期限は未設定",
     "renewal": {

package/i18n/locales/pl.json

@@ -487,6 +487,7 @@
       "token": "Wprowadź token, aby kontynuować",
       "password": "Wprowadź hasło osobiste o długości co najmniej 6 znaków"
     },
+    "saved": "Poświadczenia {vendor} zapisane bezpiecznie",
     "expires": "Wygasa {date}",
     "noExpiry": "Brak daty wygaśnięcia",
     "renewal": {

package/i18n/locales/tr.json

@@ -487,6 +487,7 @@
       "token": "Devam etmek için token'ınızı girin",
       "password": "En az 6 karakterlik kişisel bir parola girin"
     },
+    "saved": "{vendor} kimlik bilgileri güvenli şekilde kaydedildi",
     "expires": "Son kullanma {date}",
     "noExpiry": "Son kullanma tarihi ayarlanmadı",
     "renewal": {

package/i18n/locales/uk.json

@@ -487,6 +487,7 @@
       "token": "Введіть свій токен, щоб продовжити",
       "password": "Введіть особистий пароль щонайменше з 6 символів"
     },
+    "saved": "Облікові дані {vendor} надійно збережено",
     "expires": "Завершується {date}",
     "noExpiry": "Дата завершення не вказана",
     "renewal": {

package/nuxt.config.ts

@@ -115,7 +115,21 @@ export default defineNuxtConfig({
   app: {
     head: {
       title: 'Agent Architecture Board',
-      meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+      meta: [
+        // `viewport-fit=cover` is what makes `env(safe-area-inset-*)` resolve to
+        // non-zero on notched/rounded phones — the safe-area padding on the
+        // bottom-anchored surfaces (inspector sheet, drawer, toaster) is inert
+        // without it, so the two ship together.
+        {
+          name: 'viewport',
+          content: 'width=device-width, initial-scale=1, viewport-fit=cover',
+        },
+        // Tint the mobile browser chrome / iOS Safari address bar to the board
+        // surface so the app doesn't sit under a mismatched white bar. Matches
+        // `--board-bg`. (Home-screen installability — manifest, standalone status
+        // bar, touch icons — is deferred to the initiative's E2/A5-icons follow-up.)
+        { name: 'theme-color', content: '#0b1020' },
+      ],
     },
   },
 })

package/package.json

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