@cat-factory/app 0.70.0 → 0.70.1

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -13,6 +13,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const store = useLocalModelsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.localModelsOpen,
@@ -140,6 +141,16 @@ async function save() {
 }
 
 async function remove(p: LocalRunner) {
+  const ok = await confirm({
+    title: t('settings.localModelEndpoints.confirmRemove.title'),
+    description: t('settings.localModelEndpoints.confirmRemove.body', {
+      name: LOCAL_RUNNER_LABELS[p],
+    }),
+    variant: 'destructive',
+    confirmLabel: t('common.remove'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await store.remove(p)

package/app/components/settings/MergeThresholdsPanel.vue

@@ -29,6 +29,7 @@ const CONCERN_LEVELS = computed<{ value: RequirementConcernLevel; label: string
 
 const store = useMergePresetsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 // Local editable copy per preset, kept in sync with the store. Percentages are
 // edited 0..100 and stored 0..1.
@@ -116,6 +117,14 @@ async function makeDefault(p: MergeThresholdPreset) {
 }
 
 async function remove(p: MergeThresholdPreset) {
+  const ok = await confirm({
+    title: t('settings.mergeThresholds.confirmDelete.title'),
+    description: t('settings.mergeThresholds.confirmDelete.body', { name: p.name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = p.id
   try {
     await store.remove(p.id)

package/app/components/settings/ModelConfigurationPanel.vue

@@ -25,6 +25,7 @@ const agents = useAgentsStore()
 const creds = useVendorCredentialsStore()
 const workspace = useWorkspaceStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.modelConfigOpen,
@@ -144,6 +145,14 @@ async function setDefault(p: ModelPreset) {
 }
 
 async function remove(p: ModelPreset) {
+  const ok = await confirm({
+    title: t('settings.modelConfiguration.confirmDelete.title'),
+    description: t('settings.modelConfiguration.confirmDelete.body', { name: p.name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await presets.remove(p.id)

package/app/components/settings/UserSecretsSection.vue

@@ -12,6 +12,7 @@ const { t } = useI18n()
 const ui = useUiStore()
 const store = useUserSecretsStore()
 const toast = useToast()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.userSecretsOpen,
@@ -117,6 +118,16 @@ async function save() {
 }
 
 async function remove() {
+  const ok = await confirm({
+    title: t('settings.userSecrets.confirmRemove.title'),
+    description: t('settings.userSecrets.confirmRemove.body', {
+      name: descriptor.value?.label ?? t('settings.userSecrets.secretFallback'),
+    }),
+    variant: 'destructive',
+    confirmLabel: t('common.remove'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   busy.value = true
   try {
     await store.remove(kind.value)

package/app/components/slack/SlackPanel.vue

@@ -13,6 +13,7 @@ const ui = useUiStore()
 const slack = useSlackStore()
 const toast = useToast()
 const { t } = useI18n()
+const { confirm } = useConfirm()
 
 const open = computed({
   get: () => ui.slackOpen,
@@ -108,6 +109,14 @@ async function connectWithToken() {
 }
 
 async function disconnect() {
+  const ok = await confirm({
+    title: t('slack.confirmDisconnect.title'),
+    description: t('slack.confirmDisconnect.body'),
+    variant: 'destructive',
+    confirmLabel: t('common.disconnect'),
+    icon: 'i-lucide-unplug',
+  })
+  if (!ok) return
   try {
     await slack.disconnect()
   } catch (e) {

package/app/components/tasks/ContextIssuePicker.vue

@@ -7,6 +7,7 @@
 // them once the block exists (see useContextLinking). A search hit / pasted ref
 // carries `needsImport: true` so it's fetched + persisted before linking.
 import type { SourceTask, TaskSearchResult, TaskSourceKind } 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. */
@@ -245,15 +246,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-search-x"
+        :title="
           query.trim()
             ? t('tasks.picker.noMatches')
             : searchable
               ? t('tasks.picker.emptySearchable')
               : t('tasks.picker.emptyRefOnly')
-        }}
-      </p>
+        "
+      />
     </div>
   </div>
 </template>

package/app/composables/useBlockDeletion.ts

@@ -0,0 +1,63 @@
+import type { Block } from '~/types/domain'
+
+/**
+ * The single, confirm-gated block deletion used by BOTH the inspector's Delete button and
+ * the global keyboard shortcut, so the two paths can never drift (one safe, one not). It
+ * mirrors the ordering the inspector always used — close the inspector, cancel any run, then
+ * optimistically delete (the store restores + toasts on backend failure via `RemovalSnapshot`)
+ * — and only inserts the confirmation prompt in front of the mutation.
+ *
+ * A recurring-pipeline task owns its reused block + run history, so removing the schedule
+ * deletes them server-side; that case deletes the schedule rather than orphaning it.
+ */
+export function useBlockDeletion() {
+  const board = useBoardStore()
+  const execution = useExecutionStore()
+  const ui = useUiStore()
+  const recurring = useRecurringPipelinesStore()
+  const { confirm } = useConfirm()
+  const { t } = useI18n()
+
+  /** Resolve the confirm title/body for a block, matching the inspector's delete-label kinds. */
+  function copyFor(block: Block): { title: string; body: string } {
+    const schedule = recurring.byBlock(block.id)
+    const kind = schedule
+      ? 'recurring'
+      : block.level === 'task'
+        ? 'task'
+        : block.level === 'module'
+          ? 'module'
+          : 'service'
+    return {
+      title: t(`panels.inspector.confirmDelete.${kind}.title`),
+      body: t(`panels.inspector.confirmDelete.${kind}.body`, { name: block.title }),
+    }
+  }
+
+  async function deleteBlock(block: Block | undefined | null): Promise<boolean> {
+    if (!block) return false
+    const { title, body } = copyFor(block)
+    const ok = await confirm({
+      title,
+      description: body,
+      variant: 'destructive',
+      confirmLabel: t('common.delete'),
+      icon: 'i-lucide-trash-2',
+    })
+    if (!ok) return false
+
+    // Close the inspector right away; the stores hide the block optimistically and restore
+    // it (with a toast) only if the backend delete fails.
+    ui.select(null)
+    const schedule = recurring.byBlock(block.id)
+    if (schedule) {
+      void recurring.remove(schedule.id)
+      return true
+    }
+    execution.cancel(block.id)
+    void board.removeBlock(block.id)
+    return true
+  }
+
+  return { deleteBlock }
+}

package/app/composables/useConfirm.ts

@@ -0,0 +1,63 @@
+import { readonly, ref } from 'vue'
+
+/**
+ * A shared, promise-based confirmation dialog. Call `confirm(...)` from anywhere and
+ * `await` the boolean the user chose — resolve on Confirm, reject-to-`false` on Cancel or
+ * any dismissal (backdrop click, Escape, route change). One `<ConfirmDialog />` is mounted
+ * app-wide (in `pages/index.vue`) and reads this singleton, so callers never render a modal
+ * themselves — they just `await useConfirm().confirm({...})` and branch on the result.
+ *
+ * The state lives at module scope (outside the exported function) so every caller and the
+ * single mounted dialog share ONE request queue.
+ */
+export interface ConfirmRequest {
+  title: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  /** `destructive` renders the confirm button in the error colour. */
+  variant?: 'default' | 'destructive'
+  icon?: string
+}
+
+const open = ref(false)
+const current = ref<ConfirmRequest | null>(null)
+let resolver: ((ok: boolean) => void) | null = null
+
+/** Settle the pending promise (if any) with `ok`, then clear it. */
+function settle(ok: boolean): void {
+  const resolve = resolver
+  resolver = null
+  resolve?.(ok)
+}
+
+export function useConfirm() {
+  function confirm(request: ConfirmRequest): Promise<boolean> {
+    // A new request while one is open supersedes the old one — resolve the previous
+    // `false` so its awaiter never hangs, then show the new request.
+    if (resolver) settle(false)
+    current.value = request
+    open.value = true
+    return new Promise<boolean>((resolve) => {
+      resolver = resolve
+    })
+  }
+
+  function accept(): void {
+    open.value = false
+    settle(true)
+  }
+
+  function cancel(): void {
+    open.value = false
+    settle(false)
+  }
+
+  // Called by the dialog when `open` flips to false without an explicit accept/cancel
+  // (backdrop, Escape, unmount). Any still-pending promise resolves `false`.
+  function dismissed(): void {
+    if (resolver) settle(false)
+  }
+
+  return { open, current: readonly(current), confirm, accept, cancel, dismissed }
+}

package/app/composables/useKeyboardShortcuts.ts

@@ -0,0 +1,76 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+/**
+ * The app-wide keyboard shortcuts, registered ONCE from `pages/index.vue` (mirroring the
+ * ⌘K handler in `CommandBar.vue`). Keeping a single global listener — rather than one per
+ * component — is what stops N handlers each firing a delete.
+ *
+ *   · Escape    — deselect the current block / close the inspector, but ONLY when no modal
+ *                 is open (every modal is a `UModal` with `role="dialog"`, which already
+ *                 handles its own Escape, so we must not also steal it).
+ *   · Delete    — delete the selected block, through the SAME confirm-gated path the
+ *                 inspector button uses (`useBlockDeletion`). Guarded so it never fires
+ *                 while the user is typing in a field. NOTE: only `Delete`, deliberately
+ *                 NOT `Backspace` — `Backspace` collides with "navigate back" muscle memory
+ *                 and would delete the selected block from anywhere on the board.
+ *   · ?         — toggle the keyboard-shortcuts cheatsheet.
+ */
+export function useKeyboardShortcuts(): void {
+  const ui = useUiStore()
+  const board = useBoardStore()
+  const { deleteBlock } = useBlockDeletion()
+
+  /** A modal (UModal) is on screen — let it own the keyboard; don't run global shortcuts. */
+  function modalOpen(): boolean {
+    return ui.commandBarOpen || !!document.querySelector('[role="dialog"]')
+  }
+
+  /** The event originates from a text field, so printable/Delete keys are edits, not shortcuts. */
+  function isEditableTarget(e: KeyboardEvent): boolean {
+    const el = e.target as HTMLElement | null
+    if (!el) return false
+    const tag = el.tagName
+    return (
+      tag === 'INPUT' ||
+      tag === 'TEXTAREA' ||
+      tag === 'SELECT' ||
+      el.isContentEditable ||
+      !!el.closest('input, textarea, select, [contenteditable="true"]')
+    )
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    // "?" — toggle the cheatsheet. Shift+/ on most layouts; guard against typing. The
+    // cheatsheet is itself a modal, so allow the toggle to close it (a plain `modalOpen()`
+    // guard would trap it open, since "?" could then only ever open, never close).
+    if (e.key === '?' && !isEditableTarget(e) && (!modalOpen() || ui.shortcutsHelpOpen)) {
+      e.preventDefault()
+      ui.toggleShortcutsHelp()
+      return
+    }
+
+    if (e.key === 'Escape') {
+      // A modal owns Escape (it closes itself); only deselect when nothing is open.
+      if (modalOpen()) return
+      if (ui.selectedBlockId) {
+        e.preventDefault()
+        ui.select(null)
+      }
+      return
+    }
+
+    if (e.key === 'Delete') {
+      // Never destroy a block while the user is editing a title/description/query.
+      if (isEditableTarget(e) || modalOpen()) return
+      const id = ui.selectedBlockId
+      if (!id) return
+      const block = board.getBlock(id)
+      if (!block) return
+      e.preventDefault()
+      void deleteBlock(block)
+    }
+  }
+
+  onMounted(() => window.addEventListener('keydown', onKeydown))
+  onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+}

package/app/pages/index.vue

@@ -18,6 +18,8 @@ import AddTaskModal from '~/components/board/AddTaskModal.vue'
 import GitHubOnboarding from '~/components/github/GitHubOnboarding.vue'
 import CommandBar from '~/components/layout/CommandBar.vue'
 import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
+import ConfirmDialog from '~/components/common/ConfirmDialog.vue'
+import KeyboardShortcutsHelp from '~/components/common/KeyboardShortcutsHelp.vue'
 
 // Heavy, rarely-open panels — code-split into their own chunks via defineAsyncComponent
 // and mounted only while their ui open-flag is set (the v-if gates in the template), so
@@ -113,6 +115,10 @@ const models = useModelsStore()
 const ui = useUiStore()
 const aiReadiness = useAiReadiness()
 
+// App-wide keyboard shortcuts (Escape to deselect, Delete to remove the selected block, ?
+// for the cheatsheet). Registered ONCE here so a single global listener owns them.
+useKeyboardShortcuts()
+
 // Load the board from the backend before rendering it.
 onMounted(() => {
   void workspace.init()
@@ -307,6 +313,8 @@ watch(
       <AddTaskModal />
       <CommandBar />
       <PersonalCredentialModal />
+      <ConfirmDialog />
+      <KeyboardShortcutsHelp />
 
       <!-- Lazy panels: mounted only while their ui open-flag is set, so each loads on
            first open (its own chunk) rather than bloating the initial bundle. -->

package/app/stores/agentRuns.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import type { BootstrapJob } from '~/types/domain'
+import { useAgentRunsStore } from '~/stores/agentRuns'
+
+/** Minimal BootstrapJob factory — only the fields the store's reconcile logic touches. */
+function job(id: string, over: Partial<BootstrapJob> = {}): BootstrapJob {
+  return {
+    id,
+    workspaceId: 'ws_test',
+    referenceArchitectureId: null,
+    referenceArchitectureName: null,
+    repoName: id,
+    repoOwner: null,
+    repoUrl: null,
+    instructions: '',
+    status: 'running',
+    blockId: `blk_${id}`,
+    subtasks: null,
+    error: null,
+    failure: null,
+    createdAt: 1,
+    updatedAt: 1,
+    ...over,
+  }
+}
+
+describe('agentRuns store — monotonic bootstrap reconcile', () => {
+  let store: ReturnType<typeof useAgentRunsStore>
+  beforeEach(() => {
+    store = useAgentRunsStore()
+  })
+
+  it('hydrate does NOT regress a run a newer live event already advanced', () => {
+    // A live `bootstrap: failed` event landed first (newer updatedAt).
+    store.upsertBootstrap(job('j1', { status: 'failed', updatedAt: 5 }))
+    // A lagging `workspace.refresh()` then hydrates a STALE snapshot that still saw
+    // the run as `running` (older updatedAt) — it must NOT clobber the terminal state.
+    store.hydrate([job('j1', { status: 'running', updatedAt: 2 })])
+    expect(store.bootstrapJobs[0]!.status).toBe('failed')
+    expect(store.byBlock.blk_j1!.status).toBe('failed')
+  })
+
+  it('hydrate DOES apply a genuinely newer snapshot', () => {
+    store.upsertBootstrap(job('j1', { status: 'running', updatedAt: 2 }))
+    store.hydrate([job('j1', { status: 'succeeded', updatedAt: 9 })])
+    expect(store.bootstrapJobs[0]!.status).toBe('succeeded')
+  })
+
+  it('upsertBootstrap ignores an older/out-of-order event but applies newer/equal', () => {
+    store.upsertBootstrap(job('j1', { status: 'failed', updatedAt: 5 }))
+    store.upsertBootstrap(job('j1', { status: 'running', updatedAt: 3 })) // stale → ignored
+    expect(store.bootstrapJobs[0]!.status).toBe('failed')
+    store.upsertBootstrap(job('j1', { status: 'succeeded', updatedAt: 5 })) // equal → applied
+    expect(store.bootstrapJobs[0]!.status).toBe('succeeded')
+  })
+})

package/app/stores/agentRuns.ts

@@ -59,9 +59,24 @@ export const useAgentRunsStore = defineStore('agentRuns', () => {
    */
   const envConfigRepairJobs = ref<EnvConfigRepairJob[]>([])
 
-  /** Replace the cached bootstrap runs with a server snapshot. */
+  /**
+   * Reconcile the cached bootstrap runs with a server snapshot. A snapshot is
+   * authoritative EXCEPT where a live event has already advanced a run past what
+   * this (possibly stale) read observed: a `board` event triggers a debounced
+   * `workspace.refresh()`, and that snapshot read can resolve AFTER a newer
+   * `bootstrap` event already landed. A blind replace would then REGRESS a terminal
+   * run — e.g. a `failed` bootstrap reverting to `running`, leaving the frame stuck
+   * on the "bootstrapping…" badge with no further event to correct it (a failed run
+   * emits nothing more). Keep the newer-by-`updatedAt` version per id so a lagging
+   * refresh can't clobber a live transition.
+   */
   function hydrate(jobs: BootstrapJob[]) {
-    bootstrapJobs.value = [...jobs].sort((a, b) => b.createdAt - a.createdAt)
+    const held = new Map(bootstrapJobs.value.map((j) => [j.id, j]))
+    const reconciled = jobs.map((incoming) => {
+      const current = held.get(incoming.id)
+      return current && current.updatedAt > incoming.updatedAt ? current : incoming
+    })
+    bootstrapJobs.value = reconciled.sort((a, b) => b.createdAt - a.createdAt)
   }
 
   /** Replace the cached env-config-repair runs with a server snapshot. */
@@ -92,8 +107,11 @@ export const useAgentRunsStore = defineStore('agentRuns', () => {
    */
   function upsertBootstrap(job: BootstrapJob) {
     const i = bootstrapJobs.value.findIndex((j) => j.id === job.id)
-    if (i >= 0) bootstrapJobs.value[i] = job
-    else bootstrapJobs.value.unshift(job)
+    // Monotonic by `updatedAt`: never let a stale/out-of-order event regress a run a
+    // newer one already advanced (same guard as {@link hydrate}).
+    if (i >= 0) {
+      if (job.updatedAt >= bootstrapJobs.value[i]!.updatedAt) bootstrapJobs.value[i] = job
+    } else bootstrapJobs.value.unshift(job)
   }
 
   /**

package/app/stores/ui.ts

@@ -105,6 +105,9 @@ export const useUiStore = defineStore('ui', () => {
   // Command bar (⌘K) — searchable launcher for every navbar action.
   const commandBarOpen = ref(false)
 
+  // Keyboard-shortcuts cheatsheet (?) — a modal listing every global shortcut.
+  const shortcutsHelpOpen = 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.
@@ -446,6 +449,15 @@ export const useUiStore = defineStore('ui', () => {
   function toggleCommandBar() {
     commandBarOpen.value = !commandBarOpen.value
   }
+  function openShortcutsHelp() {
+    shortcutsHelpOpen.value = true
+  }
+  function closeShortcutsHelp() {
+    shortcutsHelpOpen.value = false
+  }
+  function toggleShortcutsHelp() {
+    shortcutsHelpOpen.value = !shortcutsHelpOpen.value
+  }
   function openMobileNav() {
     mobileNavOpen.value = true
   }
@@ -754,6 +766,7 @@ export const useUiStore = defineStore('ui', () => {
     slackOpen,
     fragmentLibraryOpen,
     commandBarOpen,
+    shortcutsHelpOpen,
     mobileNavOpen,
     integrationsOpen,
     cameFromIntegrations,
@@ -829,6 +842,9 @@ export const useUiStore = defineStore('ui', () => {
     openCommandBar,
     closeCommandBar,
     toggleCommandBar,
+    openShortcutsHelp,
+    closeShortcutsHelp,
+    toggleShortcutsHelp,
     openMobileNav,
     closeMobileNav,
     toggleMobileNav,