@cat-factory/app 0.110.3 → 0.111.0

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/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

@@ -8,6 +8,7 @@ import TaskAgentConfig from '~/components/panels/inspector/TaskAgentConfig.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
 import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
 import ServiceReleaseHealthConfig from '~/components/panels/inspector/ServiceReleaseHealthConfig.vue'
+import ServiceTestSecrets from '~/components/panels/inspector/ServiceTestSecrets.vue'
 import FrontendConfig from '~/components/panels/inspector/FrontendConfig.vue'
 import ServiceConnections from '~/components/panels/inspector/ServiceConnections.vue'
 import ContainerSummary from '~/components/panels/inspector/ContainerSummary.vue'
@@ -496,6 +497,9 @@ const showOriginalDescription = ref(false)
       <!-- service (frame): test infra + provisioning configuration -->
       <ServiceTestConfig v-if="isFrame" :key="`test-config-${block.id}`" :block="block" />
 
+      <!-- service (frame): SENSITIVE test credentials (sealed, injected out of band) -->
+      <ServiceTestSecrets v-if="isFrame" :key="`test-secrets-${block.id}`" :block="block" />
+
       <!-- service (frame): best-practice fragments for code-aware agents -->
       <ServiceFragments v-if="isFrame" :key="`fragments-${block.id}`" :block="block" />
 

package/app/components/panels/inspector/ServiceTestSecrets.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
+
+// Per-service (frame) SENSITIVE test credentials: a genuinely secret token a Tester needs
+// to exercise a third-party integration (e.g. a Stripe API key). Unlike the non-sensitive
+// pools, these are SEALED at rest and injected into the Tester container OUT OF BAND — never
+// rendered into a prompt or the telemetry snapshot. Keyed by THIS frame's block id.
+//
+// The backend stores the WHOLE set and values are write-only (never read back), so this is a
+// full-set replace editor: saving persists exactly the rows below and drops anything omitted.
+// The list prefills from the configured keys/descriptions; every value must be (re-)entered,
+// and Save stays disabled until each row has one — so an existing secret can never be blanked
+// by accident. Hidden entirely when the backend store is unconfigured (no ENCRYPTION_KEY).
+const props = defineProps<{ block: Block }>()
+
+const store = useTestSecretsStore()
+const toast = useToast()
+const { t } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
+
+const busy = ref(false)
+
+interface DraftRow {
+  key: string
+  description: string
+  value: string
+}
+const draft = reactive<{ rows: DraftRow[] }>({ rows: [] })
+
+const configured = computed(() => store.entriesForBlock(props.block.id))
+const available = computed(() => store.available !== false)
+
+const blankRow = (): DraftRow => ({ key: '', description: '', value: '' })
+
+// Load this frame's configured refs once, then (re)hydrate the editor from them. Runs again
+// after a save/clear (the store refs change) so the just-typed secret values don't linger in
+// the form — the persisted set is re-shown with empty value fields to re-enter.
+onMounted(() => {
+  store.ensureLoaded(props.block.id).catch(() => {})
+})
+watch(
+  configured,
+  (entries) => {
+    draft.rows = entries.length
+      ? entries.map((e) => ({ key: e.key, description: e.description, value: '' }))
+      : [blankRow()]
+  },
+  { immediate: true },
+)
+
+// A valid POSIX env-var name (mirrors the contract's testSecretKeySchema regex + max length).
+// The reserved/toolchain-name rejection lives server-side and surfaces as a save error — we
+// don't duplicate the harness's reserved-name list here.
+const KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/
+const KEY_MAX = 128
+function keyValid(key: string): boolean {
+  const k = key.trim()
+  return KEY_RE.test(k) && k.length <= KEY_MAX
+}
+
+// Keys that appear more than once (trimmed) — flagged inline and block saving.
+const duplicateKeys = computed(() => {
+  const seen = new Map<string, number>()
+  for (const r of draft.rows) {
+    const k = r.key.trim()
+    if (k) seen.set(k, (seen.get(k) ?? 0) + 1)
+  }
+  return new Set([...seen.entries()].filter(([, n]) => n > 1).map(([k]) => k))
+})
+
+function rowComplete(r: DraftRow): boolean {
+  return keyValid(r.key) && r.value.trim().length > 0
+}
+
+const canSave = computed(
+  () =>
+    !busy.value &&
+    draft.rows.length > 0 &&
+    draft.rows.every(rowComplete) &&
+    duplicateKeys.value.size === 0,
+)
+
+function addRow() {
+  draft.rows.push(blankRow())
+}
+function removeRow(index: number) {
+  draft.rows.splice(index, 1)
+}
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function save() {
+  busy.value = true
+  try {
+    await store.save(props.block.id, {
+      entries: draft.rows.map((r) => ({
+        key: r.key.trim(),
+        description: r.description.trim(),
+        value: r.value,
+      })),
+    })
+    toast.add({
+      title: t('inspector.testSecrets.savedToast'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    notifyError(t('inspector.testSecrets.saveFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function clearAll() {
+  const noun = t('inspector.testSecrets.configNoun')
+  if (!(await confirmAction('clear', noun))) return
+  busy.value = true
+  try {
+    await store.clear(props.block.id)
+    toastDone('clear', noun)
+  } catch (e) {
+    notifyError(t('inspector.testSecrets.clearFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <InspectorSection
+    v-if="available"
+    :title="t('inspector.testSecrets.title')"
+    :hint="t('inspector.testSecrets.sectionHint')"
+    :count="configured.length"
+    warning
+    default-open
+    data-testid="service-test-secrets"
+  >
+    <template #actions>
+      <UButton
+        v-if="configured.length"
+        color="error"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-trash-2"
+        :loading="busy"
+        data-testid="test-secrets-clear"
+        @click="clearAll"
+      >
+        {{ t('inspector.testSecrets.clear') }}
+      </UButton>
+    </template>
+
+    <!-- These are REAL secrets: an unmistakable sensitivity + replace-all warning. -->
+    <div
+      class="flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 px-2.5 py-2 text-[11px] leading-snug text-amber-200"
+    >
+      <UIcon name="i-lucide-shield-alert" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+      <span>{{ t('inspector.testSecrets.warning') }}</span>
+    </div>
+
+    <p class="text-[11px] leading-snug text-slate-500">
+      {{ t('inspector.testSecrets.replaceNote') }}
+    </p>
+
+    <div class="space-y-3">
+      <div
+        v-for="(row, index) in draft.rows"
+        :key="index"
+        class="space-y-2 rounded-md border border-slate-800 p-2.5"
+        :data-testid="`test-secret-row-${index}`"
+      >
+        <div class="flex items-start gap-2">
+          <UFormField
+            :label="t('inspector.testSecrets.key')"
+            :error="
+              row.key.trim() && !keyValid(row.key)
+                ? t('inspector.testSecrets.keyInvalid')
+                : undefined
+            "
+            class="flex-1"
+          >
+            <UInput
+              v-model="row.key"
+              placeholder="STRIPE_API_KEY"
+              size="sm"
+              class="w-full font-mono"
+              :data-testid="`test-secret-key-${index}`"
+            />
+          </UFormField>
+          <UButton
+            color="error"
+            variant="ghost"
+            size="xs"
+            icon="i-lucide-x"
+            class="mt-5 shrink-0"
+            :aria-label="t('inspector.testSecrets.removeRow')"
+            :data-testid="`test-secret-remove-${index}`"
+            @click="removeRow(index)"
+          />
+        </div>
+
+        <UFormField :label="t('inspector.testSecrets.description')">
+          <UInput
+            v-model="row.description"
+            :placeholder="t('inspector.testSecrets.descriptionPlaceholder')"
+            size="sm"
+            class="w-full"
+            :data-testid="`test-secret-description-${index}`"
+          />
+        </UFormField>
+
+        <UFormField :label="t('inspector.testSecrets.value')">
+          <SecretInput
+            v-model="row.value"
+            :placeholder="t('inspector.testSecrets.valuePlaceholder')"
+            size="sm"
+            class="w-full"
+            :data-testid="`test-secret-value-${index}`"
+          />
+        </UFormField>
+      </div>
+
+      <p v-if="duplicateKeys.size" class="text-[11px] text-error-400">
+        {{ t('inspector.testSecrets.duplicateKey') }}
+      </p>
+
+      <div class="flex items-center justify-between gap-2">
+        <UButton
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-plus"
+          data-testid="test-secret-add"
+          @click="addRow"
+        >
+          {{ t('inspector.testSecrets.addRow') }}
+        </UButton>
+        <UButton
+          color="primary"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-save"
+          :loading="busy"
+          :disabled="!canSave"
+          data-testid="test-secrets-save"
+          @click="save"
+        >
+          {{ t('inspector.testSecrets.save') }}
+        </UButton>
+      </div>
+    </div>
+  </InspectorSection>
+</template>

package/app/composables/api/testSecrets.ts

@@ -0,0 +1,36 @@
+import {
+  deleteServiceTestSecretsContract,
+  getServiceTestSecretsContract,
+  setServiceTestSecretsContract,
+} from '@cat-factory/contracts'
+import type { UpsertServiceTestSecretsInput } from '~/types/testSecrets'
+import type { ApiContext } from './context'
+
+/**
+ * Sensitive per-service test secrets (SEALED, write-only). The GET view returns only the
+ * configured keys + descriptions; the PUT replaces the whole set (values write-only) and
+ * an empty set clears it. Keyed by the service-frame block. See TestSecretsController.
+ */
+export function testSecretsApi({ send, ws }: ApiContext) {
+  return {
+    getServiceTestSecrets: (workspaceId: string, blockId: string) =>
+      send(getServiceTestSecretsContract, { pathPrefix: ws(workspaceId), pathParams: { blockId } }),
+
+    setServiceTestSecrets: (
+      workspaceId: string,
+      blockId: string,
+      body: UpsertServiceTestSecretsInput,
+    ) =>
+      send(setServiceTestSecretsContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { blockId },
+        body,
+      }),
+
+    deleteServiceTestSecrets: (workspaceId: string, blockId: string) =>
+      send(deleteServiceTestSecretsContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { blockId },
+      }),
+  }
+}

package/app/composables/useApi.ts

@@ -35,6 +35,7 @@ import { reviewsApi } from './api/reviews'
 import { slackApi } from './api/slack'
 import { specApi } from './api/spec'
 import { tasksApi } from './api/tasks'
+import { testSecretsApi } from './api/testSecrets'
 import { userSecretsApi } from './api/userSecrets'
 import { userSettingsApi } from './api/userSettings'
 import { workspacesApi } from './api/workspaces'
@@ -123,6 +124,7 @@ export function useApi() {
     ...docInterviewApi(ctx),
     ...provisioningLogsApi(ctx),
     ...releaseHealthApi(ctx),
+    ...testSecretsApi(ctx),
     ...packageRegistriesApi(ctx),
     ...previewApi(ctx),
     ...environmentsApi(ctx),

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)
+  })
+})