@cat-factory/app 0.110.2 → 0.110.4

package/app/components/board/AddTaskModal.vue

@@ -40,7 +40,7 @@ const { linkPending } = useContextLinking()
 const open = computed({
   get: () => ui.addTaskContainerId !== null,
   set: (v: boolean) => {
-    if (!v) ui.closeAddTask()
+    if (!v) void requestClose()
   },
 })
 
@@ -405,6 +405,34 @@ watch(open, (isOpen) => {
   resolvePendingIssueBodies().catch(() => {})
 })
 
+// UX-18: prompt before discarding typed input on Escape / backdrop / Cancel. Registered
+// after the reset watcher so the baseline is the seeded form (a prefill is the clean
+// starting point, not a spurious edit). The snapshot covers the user-owned fields — the
+// cheap task-type / technical toggles are excluded, and only the *stable* context keys are
+// compared so the async issue-body resolution never reads as a change.
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => ui.closeAddTask(),
+  saving: () => saving.value,
+  snapshot: () => ({
+    title: title.value.trim(),
+    description: description.value.trim(),
+    severity: severity.value,
+    stepsToReproduce: stepsToReproduce.value.trim(),
+    timeboxHours: timeboxHours.value ?? null,
+    docKind: docKind.value,
+    docAudience: docAudience.value.trim(),
+    docTargetPath: docTargetPath.value.trim(),
+    docOutlineHints: docOutlineHints.value.trim(),
+    docKindFieldValues: { ...docKindFieldValues },
+    riskPolicyId: riskPolicyId.value,
+    modelPresetId: modelPresetId.value,
+    pipelineId: pipelineId.value,
+    agentConfig: { ...agentConfigValues.value },
+    context: pendingContext.value.map(contextKey),
+  }),
+})
+
 // A recurring task only needs a target frame (its details are filled in the schedule
 // modal); every other type needs a title.
 const canAdd = computed(() =>
@@ -921,7 +949,7 @@ async function add() {
 
     <template #footer>
       <div class="flex w-full justify-end gap-2">
-        <UButton color="neutral" variant="ghost" @click="ui.closeAddTask()">{{
+        <UButton color="neutral" variant="ghost" @click="requestClose()">{{
           t('common.cancel')
         }}</UButton>
         <UButton

package/app/components/board/RecurringPipelineModal.vue

@@ -21,7 +21,7 @@ const { t } = useI18n()
 const open = computed({
   get: () => ui.addRecurringFrameId !== null,
   set: (v: boolean) => {
-    if (!v) ui.closeAddRecurring()
+    if (!v) void requestClose()
   },
 })
 
@@ -131,6 +131,33 @@ watch(open, (isOpen) => {
   void tasks.probe()
 })
 
+// UX-18: prompt before discarding typed input on Escape / backdrop / Cancel. Registered
+// after the reset watcher so the baseline is the seeded form (the default pipeline + the
+// workspace tracker settings are the clean starting point, not a spurious edit).
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => ui.closeAddRecurring(),
+  saving: () => saving.value,
+  snapshot: () => ({
+    name: name.value.trim(),
+    description: description.value.trim(),
+    pipelineId: pipelineId.value,
+    onDemand: onDemand.value,
+    recurrence: recurrence.value,
+    trackerKind: trackerKind.value,
+    jiraProjectKey: jiraProjectKey.value.trim(),
+    linearTeamId: linearTeamId.value.trim(),
+    intakeSource: intakeSource.value,
+    intakeJiraProjectKey: intakeJiraProjectKey.value.trim(),
+    intakeLinearTeamId: intakeLinearTeamId.value.trim(),
+    intakeGithubRepo: intakeGithubRepo.value.trim(),
+    intakeTitleFragment: intakeTitleFragment.value.trim(),
+    intakeLabels: intakeLabels.value.trim(),
+    intakeIssueType: intakeIssueType.value.trim(),
+    intakeInProgressLabel: intakeInProgressLabel.value.trim(),
+  }),
+})
+
 // The board field required for the picked source must be filled before a bug-intake schedule saves.
 const intakeReady = computed(() => {
   if (!isBugIntake.value) return true
@@ -423,7 +450,7 @@ async function add() {
 
     <template #footer>
       <div class="flex w-full justify-end gap-2">
-        <UButton color="neutral" variant="ghost" @click="ui.closeAddRecurring()">{{
+        <UButton color="neutral" variant="ghost" @click="requestClose()">{{
           t('common.cancel')
         }}</UButton>
         <UButton

package/app/components/bootstrap/BootstrapModal.vue

@@ -22,7 +22,7 @@ const { confirmAction, toastDone } = useConfirmAction()
 const open = computed({
   get: () => ui.bootstrapOpen,
   set: (v: boolean) => {
-    if (!v) ui.closeBootstrap()
+    if (!v) void requestClose()
   },
 })
 
@@ -84,6 +84,23 @@ const typeItems = useFrameRepoTypeItems()
 
 const usingReference = computed(() => mode.value === 'reference')
 
+// UX-18: prompt before discarding a half-filled launch form on Escape / backdrop / the X.
+// The modal keeps its fields across opens (no reset watcher), so the baseline is whatever
+// the form held when it opened — a close only prompts once the user has typed something
+// new. Only the typed launch fields are guarded; the reference-architecture sub-form has
+// its own Cancel/Save. Declared here (below the launch-form refs) because the guard reads
+// its initial baseline synchronously.
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => ui.closeBootstrap(),
+  saving: () => launching.value,
+  snapshot: () => ({
+    repoName: repoName.value.trim(),
+    description: description.value.trim(),
+    instructions: instructions.value.trim(),
+  }),
+})
+
 // Mirror of the backend `slugField` rule (@cat-factory/contracts bootstrap
 // schema): the new repo name is a SINGLE GitHub name segment — no "owner/"
 // prefix — so reject a bad value inline before we hit the API. Kept in sync with

package/app/components/github/AddServiceFromRepoModal.vue

@@ -65,13 +65,19 @@ watch(
 // The integration is on but this workspace isn't bound yet — connect first.
 const needsGitHub = computed(() => github.available === true && !github.connected)
 
-// Repos already backing a board service can't be added again — UNLESS they're a
-// monorepo, which can host several services (each at its own subdirectory). Derived from
-// the account's service catalog (each service carries the repo it targets), since the repo
-// projection no longer carries a repo→block link.
+// Repos whose service is ALREADY mounted on THIS board can't be added again — adding here would
+// be a no-op. A repo whose service lives on ANOTHER board in the org stays addable: adding it
+// MOUNTS the shared service onto this board (backend `addServiceFromRepo`). Monorepos are exempt
+// (each subdirectory is its own service). Derived from the account's catalog cross-referenced with
+// this board's mounts (`byServiceId`), since the repo projection carries no repo→block link.
 const onBoardIds = computed(
   () =>
-    new Set(services.catalog.map((s) => s.repoGithubId).filter((id): id is number => id != null)),
+    new Set(
+      services.catalog
+        .filter((s) => services.byServiceId[s.id])
+        .map((s) => s.repoGithubId)
+        .filter((id): id is number => id != null),
+    ),
 )
 
 // Map an available repo to a combobox item. The label carries the private/monorepo/

package/app/components/layout/BoardToolbar.vue

@@ -44,6 +44,34 @@ const mountableItems = computed(() =>
   }),
 )
 
+async function restoreService(id: string, title: string) {
+  try {
+    await board.restoreService(id)
+    toast.add({
+      title: t('board.toast.restored', { name: title }),
+      icon: 'i-lucide-archive-restore',
+      color: 'neutral',
+    })
+  } catch (e) {
+    toast.add({
+      title: t('board.toast.restoreFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+
+// Archived services — hidden from the board but restorable here with no expiry.
+const archivedItems = computed(() =>
+  board.archived.map((b) => ({
+    label: b.title,
+    icon: 'i-lucide-box',
+    onSelect: () => {
+      void restoreService(b.id, b.title)
+    },
+  })),
+)
+
 const zoomPct = computed(() => Math.round(ui.zoom * 100))
 // Disable the zoom buttons once the camera hits a clamp (Vue Flow pins the zoom exactly
 // at the limit, so a small epsilon guards against float drift). UX-16.
@@ -186,6 +214,21 @@ const decisionItems = computed(() =>
       </UButton>
     </UDropdownMenu>
 
+    <!-- archived services: hidden from the board, restorable with no expiry -->
+    <UDropdownMenu v-if="archivedItems.length" :items="archivedItems">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        icon="i-lucide-archive"
+        :title="t('board.toolbar.archivedServices')"
+        data-testid="board-archived-services"
+      >
+        <span class="hidden sm:inline">{{ t('board.toolbar.archivedServices') }}</span>
+        <span>{{ n(archivedItems.length) }}</span>
+      </UButton>
+    </UDropdownMenu>
+
     <!-- human-actionable notifications (merge review, pipeline complete, CI failed) -->
     <NotificationsInbox />
 

package/app/components/panels/DecisionModal.vue

@@ -4,6 +4,7 @@ import { agentKindMeta } from '~/utils/catalog'
 const execution = useExecutionStore()
 const board = useBoardStore()
 const ui = useUiStore()
+const toast = useToast()
 const { t } = useI18n()
 
 const ctx = computed(() => ui.decisionContext)
@@ -16,17 +17,42 @@ const decision = computed(() => step.value?.decision ?? null)
 const block = computed(() => (instance.value ? board.getBlock(instance.value.blockId) : undefined))
 const agent = computed(() => (step.value ? agentKindMeta(step.value.agentKind) : null))
 
+// UX-25: which option is being resolved (null = idle). Guards against a fire-and-forget
+// double-submit — the resolve is awaited, all options disable while it runs, and a failed
+// resolve keeps the modal open with an error toast instead of closing silently.
+const resolvingOption = ref<string | null>(null)
+
 const open = computed({
   get: () => !!ctx.value && !!decision.value,
   set: (v: boolean) => {
-    if (!v) ui.closeDecision()
+    // While a resolve is in flight the options are disabled, so the dismiss affordances
+    // (Escape / backdrop) are locked too — the awaited resolve settles the modal itself.
+    if (!v && !resolvingOption.value) ui.closeDecision()
   },
 })
 
-function choose(option: string) {
-  if (!ctx.value) return
-  execution.resolveDecision(ctx.value.instanceId, ctx.value.decisionId, option)
-  ui.closeDecision()
+async function choose(option: string) {
+  if (!ctx.value || resolvingOption.value) return
+  resolvingOption.value = option
+  try {
+    // `resolveDecision` returns false when a required-credential prompt is cancelled — keep
+    // the modal open in that case so the choice isn't silently dropped.
+    const resolved = await execution.resolveDecision(
+      ctx.value.instanceId,
+      ctx.value.decisionId,
+      option,
+    )
+    if (resolved) ui.closeDecision()
+  } catch (e) {
+    toast.add({
+      title: t('panels.decision.resolveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    resolvingOption.value = null
+  }
 }
 </script>
 
@@ -65,6 +91,8 @@ function choose(option: string) {
             block
             data-testid="decision-option"
             class="justify-start"
+            :loading="resolvingOption === opt"
+            :disabled="resolvingOption !== null && resolvingOption !== opt"
             @click="choose(opt)"
           >
             {{ opt }}

package/app/components/panels/InspectorPanel.vue

@@ -186,10 +186,17 @@ const runMenu = computed(() => {
 
 // Delegate to the shared confirm-gated deletion so the button and the keyboard shortcut
 // (Delete/Backspace) follow the exact same prompt + optimistic-delete + rollback path.
-const { deleteBlock } = useBlockDeletion()
+const { deleteBlock, archiveBlock } = useBlockDeletion()
 function remove() {
   void deleteBlock(block.value)
 }
+function archive() {
+  void archiveBlock(block.value)
+}
+// A service (top-level frame) can be archived — hidden but restorable with no expiry.
+const isServiceFrame = computed(
+  () => block.value?.level === 'frame' && block.value?.parentId === null,
+)
 
 // ---- failed agent run (bootstrap or execution) ------------------------------
 // A block whose current run failed surfaces the shared failure banner + retry,
@@ -545,12 +552,25 @@ const showOriginalDescription = ref(false)
         >
           {{ t('panels.inspector.focus') }}
         </UButton>
+        <UButton
+          v-if="isServiceFrame"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          icon="i-lucide-archive"
+          :class="isServiceFrame ? 'ms-auto' : ''"
+          data-testid="inspector-archive"
+          :title="t('panels.inspector.archiveService')"
+          @click="archive"
+        >
+          {{ t('panels.inspector.archiveService') }}
+        </UButton>
         <UButton
           color="error"
           variant="ghost"
           size="sm"
           icon="i-lucide-trash-2"
-          class="ms-auto"
+          :class="isServiceFrame ? '' : 'ms-auto'"
           data-testid="inspector-delete"
           :title="deleteLabel"
           @click="remove"

package/app/composables/api/board.ts

@@ -4,6 +4,7 @@ import {
   addModuleContract,
   addServiceFromRepoContract,
   addTaskContract,
+  archiveBlockContract,
   assignEpicContract,
   clonePipelineContract,
   createPipelineContract,
@@ -14,6 +15,7 @@ import {
   removeBlockContract,
   reparentBlockContract,
   reseedPipelineContract,
+  restoreBlockContract,
   toggleDependencyContract,
   updateBlockContract,
   updatePipelineContract,
@@ -87,6 +89,13 @@ export function boardApi({ send, ws }: ApiContext) {
     removeBlock: (workspaceId: string, blockId: string) =>
       send(removeBlockContract, { pathPrefix: ws(workspaceId), pathParams: { blockId } }),
 
+    // Archive a service (hide it + its subtree, restorable with no expiry) instead of deleting.
+    archiveBlock: (workspaceId: string, blockId: string) =>
+      send(archiveBlockContract, { pathPrefix: ws(workspaceId), pathParams: { blockId } }),
+
+    restoreBlock: (workspaceId: string, blockId: string) =>
+      send(restoreBlockContract, { pathPrefix: ws(workspaceId), pathParams: { blockId } }),
+
     toggleDependency: (workspaceId: string, blockId: string, body: { sourceId: string }) =>
       send(toggleDependencyContract, {
         pathPrefix: ws(workspaceId),

package/app/composables/useBlockDeletion.ts

@@ -15,9 +15,54 @@ export function useBlockDeletion() {
   const execution = useExecutionStore()
   const ui = useUiStore()
   const recurring = useRecurringPipelinesStore()
+  const toast = useToast()
   const { confirm } = useConfirm()
   const { t } = useI18n()
 
+  /** A service is any top-level frame; only services are archivable. */
+  function isService(block: Block): boolean {
+    return block.level === 'frame' && block.parentId === null
+  }
+
+  /** Unfinished (`status !== 'done'`) task descendants of a service — the delete blocker. */
+  function unfinishedTaskCount(block: Block): number {
+    return board.descendantsOf(block.id).filter((b) => b.level === 'task' && b.status !== 'done')
+      .length
+  }
+
+  /**
+   * Archive a service: hide it (restorable with no expiry) instead of deleting. Used both as the
+   * explicit inspector action and as the automatic fallback when a service that still has
+   * unfinished work can't be deleted.
+   */
+  async function archiveBlock(block: Block | undefined | null): Promise<boolean> {
+    if (!block || !isService(block)) return false
+    const ok = await confirm({
+      title: t('panels.inspector.confirmArchive.title'),
+      description: t('panels.inspector.confirmArchive.body', { name: block.title }),
+      confirmLabel: t('panels.inspector.archiveService'),
+      icon: 'i-lucide-archive',
+    })
+    if (!ok) return false
+    ui.select(null)
+    try {
+      await board.archiveService(block.id)
+      toast.add({
+        title: t('board.toast.archived', { name: block.title }),
+        icon: 'i-lucide-archive',
+        color: 'neutral',
+      })
+    } catch (e) {
+      toast.add({
+        title: t('board.toast.archiveFailed'),
+        description: e instanceof Error ? e.message : String(e),
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+    }
+    return true
+  }
+
   /** 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)
@@ -49,6 +94,9 @@ export function useBlockDeletion() {
 
   async function deleteBlock(block: Block | undefined | null): Promise<boolean> {
     if (!block) return false
+    // A service with unfinished work can't be deleted (the backend rejects it) — archive it
+    // instead. Route straight to the archive flow so the user is never handed a dead-end error.
+    if (isService(block) && unfinishedTaskCount(block) > 0) return archiveBlock(block)
     const { title, body } = copyFor(block)
     const ok = await confirm({
       title,
@@ -75,5 +123,5 @@ export function useBlockDeletion() {
     return true
   }
 
-  return { deleteBlock }
+  return { deleteBlock, archiveBlock }
 }

package/app/composables/useUnsavedGuard.spec.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+import { useUnsavedGuard } from '~/composables/useUnsavedGuard'
+
+// Control the shared confirm dialog: `confirm()` resolves to the user's choice (discard
+// vs keep). `useI18n` is already stubbed to a passthrough in test/setup.ts.
+function stubConfirm(result: boolean) {
+  const confirm = vi.fn().mockResolvedValue(result)
+  vi.stubGlobal('useConfirm', () => ({ confirm }))
+  return confirm
+}
+
+describe('useUnsavedGuard', () => {
+  it('closes immediately without prompting when the form is unchanged', async () => {
+    const confirm = stubConfirm(true)
+    const close = vi.fn()
+    const value = ref('hello')
+    const { requestClose } = useUnsavedGuard({
+      open: ref(true),
+      close,
+      snapshot: () => ({ value: value.value }),
+    })
+
+    await requestClose()
+
+    expect(confirm).not.toHaveBeenCalled()
+    expect(close).toHaveBeenCalledOnce()
+  })
+
+  it('prompts and closes when dirty and the user confirms discard', async () => {
+    const confirm = stubConfirm(true)
+    const close = vi.fn()
+    const value = ref('hello')
+    const { requestClose, isDirty } = useUnsavedGuard({
+      open: ref(true),
+      close,
+      snapshot: () => ({ value: value.value }),
+    })
+
+    value.value = 'changed'
+    expect(isDirty()).toBe(true)
+    await requestClose()
+
+    expect(confirm).toHaveBeenCalledOnce()
+    expect(close).toHaveBeenCalledOnce()
+  })
+
+  it('prompts and keeps the modal open when the user cancels discard', async () => {
+    const confirm = stubConfirm(false)
+    const close = vi.fn()
+    const value = ref('hello')
+    const { requestClose } = useUnsavedGuard({
+      open: ref(true),
+      close,
+      snapshot: () => ({ value: value.value }),
+    })
+
+    value.value = 'changed'
+    await requestClose()
+
+    expect(confirm).toHaveBeenCalledOnce()
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('never prompts or closes while a submit is in flight', async () => {
+    const confirm = stubConfirm(true)
+    const close = vi.fn()
+    const value = ref('hello')
+    const { requestClose } = useUnsavedGuard({
+      open: ref(true),
+      close,
+      saving: () => true,
+      snapshot: () => ({ value: value.value }),
+    })
+
+    value.value = 'changed'
+    await requestClose()
+
+    expect(confirm).not.toHaveBeenCalled()
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('re-baselines the seeded form each time the modal opens', async () => {
+    stubConfirm(true)
+    const open = ref(false)
+    const value = ref('')
+    const { isDirty } = useUnsavedGuard({
+      open,
+      close: vi.fn(),
+      snapshot: () => ({ value: value.value }),
+    })
+
+    // A reset watcher seeds a prefill; the guard re-snapshots on open, so the seeded value
+    // is the clean baseline rather than a spurious edit.
+    value.value = 'seeded prefill'
+    open.value = true
+    await nextTick()
+    expect(isDirty()).toBe(false)
+
+    // A genuine edit after the modal is open is dirty.
+    value.value = 'user typed more'
+    expect(isDirty()).toBe(true)
+  })
+})

package/app/composables/useUnsavedGuard.ts

@@ -0,0 +1,66 @@
+import { watch } from 'vue'
+import type { Ref } from 'vue'
+
+/**
+ * Guard a content-heavy modal against silently discarding unsaved input when the user
+ * dismisses it (Escape, backdrop click, or a Cancel button). Wire it into a controlled
+ * `UModal` whose `open` is a store-backed writable computed: route the setter's close and
+ * the Cancel button through `requestClose()` instead of closing directly.
+ *
+ * `snapshot()` returns a serialisable view of the user-facing form state. The baseline is
+ * captured every time the modal opens, so register this AFTER the component's own reset
+ * watcher — it then snapshots the *seeded* form (a prefill or an existing edit is the
+ * clean baseline, not a spurious change). A close request only prompts when the current
+ * snapshot diverges from that baseline; when nothing changed — or a submit is in flight —
+ * the close proceeds immediately, so the common path is unchanged.
+ *
+ * Keep `snapshot()` to stable, user-owned values: exclude fields mutated by async loads
+ * (they would read as dirty the instant a background fetch settles) and prefer stable ids
+ * over objects that a best-effort resolve rewrites in place.
+ */
+export function useUnsavedGuard(opts: {
+  /** The modal's open state (the writable computed's underlying getter). */
+  open: Ref<boolean>
+  /** A serialisable view of the current form state. */
+  snapshot: () => unknown
+  /** Actually close the modal (the store close action). */
+  close: () => void
+  /** True while a submit is in flight — a close is then a no-op (the submit closes itself). */
+  saving?: () => boolean
+}) {
+  const { confirm } = useConfirm()
+  const { t } = useI18n()
+
+  let baseline = serialize(opts.snapshot())
+  watch(opts.open, (isOpen) => {
+    if (isOpen) baseline = serialize(opts.snapshot())
+  })
+
+  function isDirty(): boolean {
+    return serialize(opts.snapshot()) !== baseline
+  }
+
+  async function requestClose(): Promise<void> {
+    // A submit in flight closes itself on success — don't interrupt it or prompt.
+    if (opts.saving?.()) return
+    if (!isDirty()) {
+      opts.close()
+      return
+    }
+    const discard = await confirm({
+      title: t('common.discard.title'),
+      description: t('common.discard.body'),
+      confirmLabel: t('common.discard.confirm'),
+      cancelLabel: t('common.discard.keep'),
+      variant: 'destructive',
+      icon: 'i-lucide-triangle-alert',
+    })
+    if (discard) opts.close()
+  }
+
+  return { requestClose, isDirty }
+}
+
+function serialize(value: unknown): string {
+  return JSON.stringify(value ?? null)
+}