@cat-factory/app 0.69.1 → 0.70.1

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/TaskDependencyEdges.vue

@@ -18,6 +18,9 @@ const segments = ref<Seg[]>([])
 // Epic→member membership links (distinct style from dependency edges).
 type MemberSeg = { id: string; x1: number; y1: number; x2: number; y2: number }
 const memberSegments = ref<MemberSeg[]>([])
+// Frontend frame → bound service frame links (from a frontend's backend bindings).
+type FrontendSeg = { id: string; x1: number; y1: number; x2: number; y2: number }
+const frontendSegments = ref<FrontendSeg[]>([])
 
 // task → its dependencies, both ends being tasks
 const taskDeps = computed(() => {
@@ -43,6 +46,26 @@ const epicLinks = computed(() => {
   return out
 })
 
+// frontend frame → each service it binds a backend upstream to (its ephemeral env is the
+// "service under test"). The link IS a `service`-sourced backend binding on the frontend's
+// config; deduped so multiple env vars bound to the same service draw one edge.
+const frontendLinks = computed(() => {
+  const out: { id: string; source: string; target: string }[] = []
+  for (const f of board.frames) {
+    if (f.type !== 'frontend') continue
+    const seen = new Set<string>()
+    for (const binding of f.frontendConfig?.backendBindings ?? []) {
+      if (binding.source.kind !== 'service') continue
+      const serviceId = binding.source.serviceBlockId
+      if (seen.has(serviceId)) continue
+      seen.add(serviceId)
+      if (board.getBlock(serviceId))
+        out.push({ id: `${f.id}__fe__${serviceId}`, source: f.id, target: serviceId })
+    }
+  }
+  return out
+})
+
 /** Resolve a task's anchor: walk up task → module → service to the first card
  * that's actually rendered (a container may be collapsed). */
 function anchorEl(taskId: string): HTMLElement | null {
@@ -112,6 +135,23 @@ function recompute() {
     members.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
   }
   memberSegments.value = members
+
+  const fes: FrontendSeg[] = []
+  for (const link of frontendLinks.value) {
+    const a = anchorEl(link.source)
+    const b = anchorEl(link.target)
+    if (!a || !b || a === b) continue
+    const ra = a.getBoundingClientRect()
+    const rb = b.getBoundingClientRect()
+    const ax = ra.left + ra.width / 2 - origin.left
+    const ay = ra.top + ra.height / 2 - origin.top
+    const bx = rb.left + rb.width / 2 - origin.left
+    const by = rb.top + rb.height / 2 - origin.top
+    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
+    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
+    fes.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
+  }
+  frontendSegments.value = fes
 }
 
 const { pause, resume } = useRafFn(recompute, { immediate: false })
@@ -144,8 +184,34 @@ onBeforeUnmount(pause)
       >
         <path d="M0,0 L10,5 L0,10 z" fill="#64748b" />
       </marker>
+      <marker
+        id="frontend-arrow"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M0,0 L10,5 L0,10 z" fill="#22d3ee" />
+      </marker>
     </defs>
 
+    <!-- frontend frame → bound service frame links (cyan, arrow toward the service under test) -->
+    <line
+      v-for="s in frontendSegments"
+      :key="s.id"
+      :x1="s.x1"
+      :y1="s.y1"
+      :x2="s.x2"
+      :y2="s.y2"
+      stroke="#22d3ee"
+      :stroke-width="1.5"
+      stroke-dasharray="1 4"
+      :stroke-opacity="0.6"
+      marker-end="url(#frontend-arrow)"
+    />
+
     <!-- epic → member membership links (soft violet, no arrowhead) -->
     <line
       v-for="s in memberSegments"

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

package/app/components/layout/NotificationsInbox.vue

@@ -12,6 +12,7 @@ const { t, te } = useI18n()
 const notifications = useNotificationsStore()
 const ui = useUiStore()
 const execution = useExecutionStore()
+const toast = useToast()
 
 const busy = ref<string | null>(null)
 
@@ -92,6 +93,11 @@ async function act(n: Notification) {
   busy.value = n.id
   try {
     await notifications.act(n.id)
+    toast.add({
+      title: t('layout.notifications.toast.acted'),
+      color: 'success',
+      icon: 'i-lucide-check',
+    })
   } finally {
     busy.value = null
   }
@@ -101,6 +107,11 @@ async function dismiss(n: Notification) {
   busy.value = n.id
   try {
     await notifications.dismiss(n.id)
+    toast.add({
+      title: t('layout.notifications.toast.dismissed'),
+      color: 'neutral',
+      icon: 'i-lucide-check',
+    })
   } finally {
     busy.value = null
   }

package/app/components/panels/InspectorPanel.vue

@@ -7,6 +7,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 FrontendConfig from '~/components/panels/inspector/FrontendConfig.vue'
 import ContainerSummary from '~/components/panels/inspector/ContainerSummary.vue'
 import TaskDependencies from '~/components/panels/inspector/TaskDependencies.vue'
 import TaskStructure from '~/components/panels/inspector/TaskStructure.vue'
@@ -144,20 +145,11 @@ 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()
 function remove() {
-  if (!block.value) return
-  const id = block.value.id
-  // 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)
-  // A schedule owns its reused block + run history — removing the schedule deletes
-  // them server-side, so delete the schedule rather than orphaning it.
-  if (schedule.value) {
-    void recurring.remove(schedule.value.id)
-    return
-  }
-  execution.cancel(id)
-  void board.removeBlock(id)
+  void deleteBlock(block.value)
 }
 
 // ---- failed agent run (bootstrap or execution) ------------------------------
@@ -435,6 +427,9 @@ const showOriginalDescription = ref(false)
 
       <!-- service / module: tasks summary -->
       <ContainerSummary v-if="isContainer" :block="block" />
+      <!-- frontend (frame): build/serve/mock config + backend bindings (board links) -->
+      <FrontendConfig v-if="isFrame && block.type === 'frontend'" :block="block" />
+
       <!-- service (frame): test infra + provisioning configuration -->
       <ServiceTestConfig v-if="isFrame" :block="block" />
 
@@ -488,6 +483,7 @@ const showOriginalDescription = ref(false)
           size="sm"
           icon="i-lucide-trash-2"
           class="ms-auto"
+          data-testid="inspector-delete"
           :title="deleteLabel"
           @click="remove"
         >

package/app/components/panels/StepContainerStatus.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useClipboard } from '@vueuse/core'
 import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
 
@@ -61,6 +62,22 @@ const CONTAINER_STATUS_META: Record<
 
 // The friendly phase label (clone → "Preparing workspace", …); only meaningful while up.
 const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phase, { t, te }))
+
+// Make the container id / URL one-click copyable (they're long and used to be
+// select-and-copy-by-hand), with a toast confirming the copy landed.
+const toast = useToast()
+const { copy, isSupported } = useClipboard()
+async function copyText(text: string) {
+  // Only claim success once the write actually landed — a failed/unsupported clipboard
+  // (insecure context, denied permission) must not show a misleading "Copied" toast.
+  try {
+    if (!isSupported.value) throw new Error('clipboard unsupported')
+    await copy(text)
+    toast.add({ title: t('common.copied'), color: 'success', icon: 'i-lucide-check' })
+  } catch {
+    toast.add({ title: t('common.copyFailed'), color: 'error', icon: 'i-lucide-x' })
+  }
+}
 </script>
 
 <template>
@@ -94,6 +111,16 @@ const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phas
           <dd class="truncate font-mono text-[11px] text-slate-300" :title="step.container.id">
             {{ step.container.id }}
           </dd>
+          <UButton
+            icon="i-lucide-copy"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            class="ms-auto shrink-0"
+            :title="t('panels.stepMeta.container.copyId')"
+            :aria-label="t('panels.stepMeta.container.copyId')"
+            @click="copyText(step.container.id)"
+          />
         </div>
         <div v-if="step.container?.url" class="flex items-center gap-2">
           <dt class="shrink-0 text-[11px] uppercase tracking-wide text-slate-500">
@@ -109,6 +136,16 @@ const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phas
               {{ step.container.url }}
             </a>
           </dd>
+          <UButton
+            icon="i-lucide-copy"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            class="ms-auto shrink-0"
+            :title="t('panels.stepMeta.container.copyUrl')"
+            :aria-label="t('panels.stepMeta.container.copyUrl')"
+            @click="copyText(step.container.url)"
+          />
         </div>
       </dl>
     </div>