@cat-factory/app 0.70.0 → 0.71.0

package/app/components/auth/LoginScreen.vue

@@ -129,8 +129,9 @@ const showOAuthDivider = computed(
 
 // Hosted (remote node) PAT login: the user pastes their OWN source-control PAT, which the
 // server resolves to an account and holds to its login/org/domain allowlist. The available
-// providers come from the server (`auth.patProviders`); empty in local mode (which uses the
-// configured-token flow above) and on OAuth-only facades like the Worker.
+// providers come from the server (`auth.patProviders`) — GitHub always, GitLab when configured,
+// on both hosted facades (Node + Worker); empty in local mode (which uses the configured-token
+// flow above).
 const remotePatProviders = computed<PatProvider[]>(() =>
   isLocalMode.value ? [] : (auth.patProviders as PatProvider[]),
 )

package/app/components/board/AddTaskModal.vue

@@ -16,6 +16,7 @@ import { DOC_KINDS } from '~/types/domain'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import { mergePresetOptionLabel, mergePresetThresholds } from '~/utils/mergePreset'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -195,6 +196,11 @@ const selectedModelPresetLabel = computed(() => {
   )
 })
 
+// Hide UI-testing pipelines (`tester-ui` / `visual-confirmation`) when the target frame has no
+// UI to exercise — they'd be refused server-side (see utils/pipeline + the backend gate).
+const selectablePipelines = computed(() =>
+  pipelines.pipelines.filter((p) => pipelineAllowedForFrame(p, frame.value, board.blocks)),
+)
 const pipelineMenu = computed(() => [
   [
     {
@@ -202,7 +208,7 @@ const pipelineMenu = computed(() => [
       icon: 'i-lucide-rotate-ccw',
       onSelect: () => (pipelineId.value = ''),
     },
-    ...pipelines.pipelines.map((p) => ({
+    ...selectablePipelines.value.map((p) => ({
       label: p.name,
       icon: 'i-lucide-workflow',
       onSelect: () => (pipelineId.value = p.id),

package/app/components/board/AgentFailureCard.vue

@@ -53,6 +53,8 @@ async function retry() {
   <div
     class="nodrag rounded-lg border border-rose-900/60 bg-rose-950/40"
     :class="compact ? 'px-3 py-2' : 'px-3 py-2.5'"
+    data-testid="agent-failure-banner"
+    :data-run-kind="run.kind"
   >
     <div class="flex items-center gap-1.5" :class="compact ? 'text-[11px]' : 'text-xs'">
       <UIcon
@@ -95,6 +97,7 @@ async function retry() {
       class="nodrag mt-2 flex items-center gap-1 rounded-md bg-rose-900/40 text-rose-200 hover:bg-rose-900/70 disabled:opacity-60"
       :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
       :disabled="retrying"
+      data-testid="agent-failure-retry"
       @click.stop="retry"
     >
       <UIcon

package/app/components/board/RecurringPipelineModal.vue

@@ -6,6 +6,7 @@
 // pipeline is picked, the workspace issue-tracker choice is surfaced inline (it is
 // where that pipeline files its ticket) and saved alongside.
 import type { Recurrence, ScheduleTemplate } from '~/types/recurring'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -47,8 +48,12 @@ function defaultRecurrence(): Recurrence {
   }
 }
 
+// Hide UI-testing pipelines when the frame has no UI to exercise — they'd be refused at run start.
+const selectablePipelines = computed(() =>
+  pipelines.pipelines.filter((p) => pipelineAllowedForFrame(p, frame.value, board.blocks)),
+)
 const pipelineMenu = computed(() => [
-  pipelines.pipelines.map((p) => ({
+  selectablePipelines.value.map((p) => ({
     label: p.name,
     icon: 'i-lucide-workflow',
     onSelect: () => (pipelineId.value = p.id),

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

@@ -256,7 +256,11 @@ const ITEM_ICON: Record<string, string> = {
     >
       <div class="h-1.5 w-full" :style="{ backgroundColor: accent }" />
       <!-- bootstrap-in-progress banner -->
-      <div v-if="bootstrapping" class="border-b border-amber-900/50 bg-amber-950/30 px-3 py-2">
+      <div
+        v-if="bootstrapping"
+        class="border-b border-amber-900/50 bg-amber-950/30 px-3 py-2"
+        data-testid="bootstrap-progress"
+      >
         <div class="flex items-center gap-1.5 text-[11px]">
           <UIcon
             name="i-lucide-loader-circle"
@@ -334,7 +338,11 @@ const ITEM_ICON: Record<string, string> = {
     >
       <div class="h-1.5 w-full rounded-t-2xl" :style="{ backgroundColor: accent }" />
       <!-- bootstrap-in-progress banner -->
-      <div v-if="bootstrapping" class="border-b border-amber-900/50 bg-amber-950/30 px-4 py-2">
+      <div
+        v-if="bootstrapping"
+        class="border-b border-amber-900/50 bg-amber-950/30 px-4 py-2"
+        data-testid="bootstrap-progress"
+      >
         <div class="flex items-center gap-1.5 text-xs">
           <UIcon
             name="i-lucide-loader-circle"

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

@@ -87,7 +87,18 @@ async function run() {
   // the start was refused — the store surfaces the actionable toast itself). Revert the
   // optimistic state; on success the button unmounts once the stream pushes in_progress.
   const started = await execution.start(props.taskId, pipeline)
-  if (!started) starting.value = false
+  if (started) {
+    // Confirm the (optimistic) start landed — the button unmounts once the stream pushes
+    // in_progress, so without this the successful action gives no feedback.
+    toast.add({
+      title: t('board.task.startedToast.title'),
+      description: t('board.task.startedToast.body', { name: pipeline.name }),
+      color: 'success',
+      icon: 'i-lucide-play',
+    })
+  } else {
+    starting.value = false
+  }
 }
 
 function review() {

package/app/components/bootstrap/BootstrapModal.vue

@@ -15,6 +15,7 @@ const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
 
 const open = computed({
   get: () => ui.bootstrapOpen,
@@ -349,9 +350,11 @@ async function saveArch() {
 }
 
 async function removeArch(a: ReferenceArchitecture) {
+  if (!(await confirmAction('remove', a.name))) return
   try {
     await bootstrap.deleteArchitecture(a.id)
     if (selectedArchId.value === a.id) selectedArchId.value = undefined
+    toastDone('remove', a.name)
   } catch (e) {
     toast.add({
       title: t('bootstrap.toast.deleteFailed'),

package/app/components/common/ConfirmDialog.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// The single, app-wide confirmation dialog. Mounted once in `pages/index.vue` and driven
+// entirely by the `useConfirm()` singleton, so any caller can `await confirm({...})` without
+// rendering its own modal. UModal already provides the focus trap, Escape-to-close and
+// backdrop, so this component adds none of that — it only resolves the pending promise and,
+// crucially, resolves `false` whenever the modal closes without an explicit choice.
+
+const { t } = useI18n()
+const { open, current, accept, cancel, dismissed } = useConfirm()
+
+const model = computed({
+  get: () => open.value,
+  set: (v: boolean) => {
+    // The user dismissed via backdrop / Escape — treat as cancel so the promise settles.
+    if (!v) dismissed()
+  },
+})
+
+const isDestructive = computed(() => current.value?.variant === 'destructive')
+</script>
+
+<template>
+  <UModal
+    v-model:open="model"
+    :title="current?.title ?? t('common.confirm.defaultTitle')"
+    :ui="{ content: 'max-w-md' }"
+  >
+    <template #body>
+      <div class="flex items-start gap-3" data-testid="confirm-dialog">
+        <div
+          v-if="current?.icon"
+          class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
+          :class="isDestructive ? 'bg-red-500/10 text-red-400' : 'bg-slate-700/40 text-slate-300'"
+        >
+          <UIcon :name="current.icon" class="h-5 w-5" />
+        </div>
+        <p v-if="current?.description" class="text-sm text-slate-300">
+          {{ current.description }}
+        </p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="ghost" data-testid="confirm-cancel" @click="cancel">
+          {{ current?.cancelLabel ?? t('common.cancel') }}
+        </UButton>
+        <UButton
+          :color="isDestructive ? 'error' : 'primary'"
+          data-testid="confirm-accept"
+          autofocus
+          @click="accept"
+        >
+          {{ current?.confirmLabel ?? t('common.confirm.confirm') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/common/EmptyState.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// A small, presentational "nothing here yet" placeholder — the reusable version of the
+// hand-coded empty renders scattered across the app (context pickers, dependency lists,
+// execution history, preset lists). Dumb by design: it takes already-resolved copy and an
+// icon, and exposes a default slot for an optional call-to-action button. `compact` shrinks
+// it for inline use inside a narrow panel section.
+withDefaults(
+  defineProps<{
+    icon?: string
+    title: string
+    description?: string
+    compact?: boolean
+  }>(),
+  { icon: 'i-lucide-inbox', compact: false },
+)
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center justify-center text-center text-slate-500"
+    :class="compact ? 'gap-1 py-4' : 'gap-2 py-10'"
+    data-testid="empty-state"
+  >
+    <UIcon :name="icon" :class="compact ? 'h-5 w-5' : 'h-8 w-8'" class="text-slate-600" />
+    <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-slate-400">
+      {{ title }}
+    </p>
+    <p v-if="description" :class="compact ? 'text-[11px]' : 'text-xs'" class="max-w-xs">
+      {{ description }}
+    </p>
+    <div v-if="$slots.default" :class="compact ? 'mt-1' : 'mt-2'">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/common/KeyboardShortcutsHelp.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// The keyboard-shortcuts cheatsheet, opened with "?" (or from the command bar). A plain
+// UModal listing every global shortcut with its keys rendered as UKbd chips. Driven by the
+// ui store so "?" anywhere toggles it.
+const { t } = useI18n()
+const ui = useUiStore()
+
+const open = computed({
+  get: () => ui.shortcutsHelpOpen,
+  set: (v: boolean) => (v ? ui.openShortcutsHelp() : ui.closeShortcutsHelp()),
+})
+
+// Each row: the display keys + the action label. `mod` renders as ⌘ on Apple, Ctrl elsewhere.
+// `navigator.platform` is deprecated; prefer the userAgentData hint, fall back to userAgent.
+const nav = typeof navigator !== 'undefined' ? navigator : undefined
+const platformHint =
+  (nav as { userAgentData?: { platform?: string } } | undefined)?.userAgentData?.platform ??
+  nav?.userAgent ??
+  ''
+const isApple = /Mac|iPhone|iPad/.test(platformHint)
+const modKey = isApple ? '⌘' : 'Ctrl'
+
+const shortcuts = computed(() => [
+  { keys: [modKey, 'K'], label: t('layout.shortcuts.commandBar') },
+  { keys: ['Esc'], label: t('layout.shortcuts.deselect') },
+  { keys: ['Del'], label: t('layout.shortcuts.deleteBlock') },
+  { keys: ['?'], label: t('layout.shortcuts.help') },
+])
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('layout.shortcuts.title')" :ui="{ content: 'max-w-md' }">
+    <template #body>
+      <dl class="space-y-2" data-testid="shortcuts-help">
+        <div
+          v-for="(s, i) in shortcuts"
+          :key="i"
+          class="flex items-center justify-between gap-4 rounded-md px-1 py-1.5"
+        >
+          <dt class="text-sm text-slate-300">{{ s.label }}</dt>
+          <dd class="flex shrink-0 items-center gap-1">
+            <UKbd v-for="k in s.keys" :key="k" :value="k" />
+          </dd>
+        </div>
+      </dl>
+    </template>
+  </UModal>
+</template>

package/app/components/documents/ContextDocumentPicker.vue

@@ -9,6 +9,7 @@
 // useContextLinking). A search hit / pasted ref carries `needsImport: true` so
 // it's fetched + persisted before linking. Mirrors ContextIssuePicker.
 import type { DocumentSearchResult, DocumentSourceKind } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
 
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
@@ -238,15 +239,18 @@ onMounted(() => {
         </span>
       </button>
 
-      <p v-if="empty" class="px-2 py-1.5 text-[11px] text-slate-500">
-        {{
+      <EmptyState
+        v-if="empty"
+        compact
+        icon="i-lucide-file-search"
+        :title="
           query.trim()
             ? t('documents.picker.noMatches')
             : searchable
               ? t('documents.picker.emptySearchable')
               : t('documents.picker.emptyRefOnly')
-        }}
-      </p>
+        "
+      />
     </div>
   </div>
 </template>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -10,6 +10,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
 const toast = useToast()
+const { confirmAction } = useConfirmAction()
 
 const source = computed(() => ui.documentConnect?.source ?? null)
 const descriptor = computed(() =>
@@ -70,11 +71,11 @@ async function submit() {
 
 async function disconnect() {
   if (!source.value) return
+  const label = descriptor.value?.label ?? t('documents.connect.sourceFallback')
+  if (!(await confirmAction('disconnect', label))) return
   await documents.disconnect(source.value)
   toast.add({
-    title: t('documents.connect.disconnected', {
-      source: descriptor.value?.label ?? t('documents.connect.sourceFallback'),
-    }),
+    title: t('documents.connect.disconnected', { source: label }),
     icon: 'i-lucide-unplug',
   })
   ui.closeDocumentConnect()

package/app/components/focus/BlockFocusView.vue

@@ -2,6 +2,7 @@
 import { onKeyStroke } from '@vueuse/core'
 import type { Block } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
+import { pipelineAllowedForFrame } from '~/utils/pipeline'
 import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
 
 const board = useBoardStore()
@@ -26,13 +27,17 @@ const deps = computed(() =>
   (block.value?.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
 )
 
-const runMenu = computed(() =>
-  pipelines.pipelines.map((p) => ({
-    label: p.name,
-    icon: 'i-lucide-play',
-    onSelect: () => block.value && execution.start(block.value.id, p),
-  })),
-)
+// Hide UI-testing pipelines when this block's frame has no UI to exercise (see the backend gate).
+const runMenu = computed(() => {
+  const frame = block.value ? board.serviceOf(block.value) : undefined
+  return pipelines.pipelines
+    .filter((p) => pipelineAllowedForFrame(p, frame, board.blocks))
+    .map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-play',
+      onSelect: () => block.value && execution.start(block.value.id, p),
+    }))
+})
 
 function close() {
   ui.focus(null)

package/app/components/fragments/FragmentLibraryManager.vue

@@ -31,6 +31,7 @@ const library =
 const documents = useDocumentsStore()
 const toast = useToast()
 const { t, d } = useI18n()
+const { confirm } = useConfirm()
 
 const isWorkspace = props.kind === 'workspace'
 /** Linking a document at the account scope needs a workspace connection to fetch through. */
@@ -121,6 +122,15 @@ async function createFragment() {
 }
 
 async function removeFragment(id: string) {
+  const name = library.fragments.find((f) => f.id === id)?.title ?? ''
+  const ok = await confirm({
+    title: t('fragments.confirmRemove.title'),
+    description: t('fragments.confirmRemove.body', { name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   try {
     await library.remove(id)
     toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })

package/app/components/github/GitHubPanel.vue

@@ -16,6 +16,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const github = useGitHubStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.githubOpen,
@@ -46,6 +47,14 @@ function notifyError(title: string, e: unknown) {
 }
 
 async function disconnect() {
+  const ok = await confirm({
+    title: t('github.panel.confirmDisconnect.title'),
+    description: t('github.panel.confirmDisconnect.body'),
+    variant: 'destructive',
+    confirmLabel: t('common.disconnect'),
+    icon: 'i-lucide-unplug',
+  })
+  if (!ok) return
   try {
     await github.disconnect()
     toast.add({ title: t('github.panel.toast.disconnected'), icon: 'i-lucide-unplug' })

package/app/components/humanTest/HumanTestWindow.vue

@@ -19,6 +19,8 @@ const board = useBoardStore()
 const execution = useExecutionStore()
 const humanTest = useHumanTestStore()
 const { t, d } = useI18n()
+const toast = useToast()
+const { confirmAction, toastDone } = useConfirmAction()
 
 // Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: the gate state
 // rides on the execution step, pushed over the stream.
@@ -102,7 +104,19 @@ async function recreate() {
 }
 async function destroy() {
   if (!blockId.value) return
-  await humanTest.destroyEnv(blockId.value)
+  const noun = t('humanTest.envNoun')
+  if (!(await confirmAction('destroy', noun))) return
+  try {
+    await humanTest.destroyEnv(blockId.value)
+    toastDone('destroy', noun)
+  } catch (e) {
+    toast.add({
+      title: t('humanTest.destroyFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
 }
 
 /** Env actions need a provider (an env is/was present, or it's provisioning) — disabled in degraded mode. */

package/app/components/layout/AccountDeploymentSettings.vue

@@ -14,6 +14,7 @@ const store = useAccountSettingsStore()
 const ui = useUiStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirmAction } = useConfirmAction()
 
 // Deep-link anchor: the pipeline-start "configure storage" prompt opens this tab with the
 // ui store's scroll target set to `content-storage`, so we bring the storage section (which
@@ -207,6 +208,7 @@ async function saveSlack() {
 }
 
 async function clearSlack() {
+  if (!(await confirmAction('clear', 'Slack'))) return
   savingSlack.value = true
   try {
     await store.save(props.accountId, { secrets: { slackOAuth: null } })
@@ -262,6 +264,7 @@ async function saveLinear() {
 }
 
 async function clearLinear() {
+  if (!(await confirmAction('clear', 'Linear'))) return
   savingLinear.value = true
   try {
     await store.save(props.accountId, { secrets: { linearOAuth: null } })
@@ -319,6 +322,7 @@ async function saveWeb() {
 }
 
 async function clearWeb() {
+  if (!(await confirmAction('clear', t('layout.accountDeployment.web.title')))) return
   savingWeb.value = true
   try {
     await store.save(props.accountId, { secrets: { webSearch: null } })

package/app/components/layout/AccountTeamSettings.vue

@@ -14,6 +14,7 @@ const props = defineProps<{ accountId: string }>()
 const accounts = useAccountsStore()
 const toast = useToast()
 const { t, te } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
 const busy = ref(false)
 
 const ROLE_ITEMS = computed<{ label: string; value: AccountRole }[]>(() => [
@@ -132,9 +133,11 @@ async function sendInvite() {
   }
 }
 
-async function revoke(id: string) {
+async function revoke(id: string, email: string) {
+  if (!(await confirmAction('revoke', email))) return
   try {
     await accounts.revokeInvite(props.accountId, id)
+    toastDone('revoke', email)
   } catch (e) {
     notifyError(t('layout.accountTeam.errors.revokeInvite'), e)
   }
@@ -164,9 +167,12 @@ async function connectEmail() {
 }
 
 async function disconnectEmail() {
+  const noun = t('layout.accountTeam.emailNoun')
+  if (!(await confirmAction('disconnect', noun))) return
   busy.value = true
   try {
     await accounts.disconnectEmail(props.accountId)
+    toastDone('disconnect', noun)
   } catch (e) {
     notifyError(t('layout.accountTeam.errors.disconnectEmail'), e)
   } finally {
@@ -258,7 +264,7 @@ async function disconnectEmail() {
               variant="ghost"
               icon="i-lucide-x"
               :aria-label="t('layout.accountTeam.invite.revoke')"
-              @click="revoke(inv.id)"
+              @click="revoke(inv.id, inv.email)"
             />
           </span>
         </li>

package/app/components/layout/AiProvidersBanner.vue

@@ -18,7 +18,9 @@ const show = computed(() => showSetup.value || showPreset.value)
 
 <template>
   <Transition name="fade">
-    <div v-if="show" class="absolute inset-x-0 top-0 z-40 flex justify-center px-4 pt-4">
+    <!-- Positioning/stacking is owned by the shared banner column in `pages/index.vue`; this
+         renders only its card and re-enables pointer events on it. -->
+    <div v-if="show" class="pointer-events-auto w-full max-w-3xl">
       <!-- (1) No usable AI source -->
       <div
         v-if="showSetup"

package/app/components/layout/BoardSwitcher.vue

@@ -12,6 +12,7 @@ const accounts = useAccountsStore()
 const workspace = useWorkspaceStore()
 const ui = useUiStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const busy = ref(false)
 
@@ -142,6 +143,16 @@ async function switchBoard(id: string) {
 async function removeBoard() {
   const id = workspace.workspaceId
   if (!id) return
+  const ok = await confirm({
+    title: t('layout.boardSwitcher.confirmDelete.title'),
+    description: t('layout.boardSwitcher.confirmDelete.body', {
+      name: workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback'),
+    }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await workspace.remove(id)

package/app/components/layout/CommandBar.vue

@@ -212,6 +212,14 @@ const commands = computed<Command[]>(() => {
     keywords: t('layout.commandBar.keywords.sandbox'),
     run: () => ui.openSandbox(),
   })
+  list.push({
+    id: 'keyboard-shortcuts',
+    label: t('layout.commandBar.cmd.shortcuts'),
+    group: groupWorkspace,
+    icon: 'i-lucide-keyboard',
+    keywords: t('layout.commandBar.keywords.shortcuts'),
+    run: () => ui.openShortcutsHelp(),
+  })
 
   return list
 })