@cat-factory/app 0.95.1 → 0.96.1

package/app/components/panels/ObservabilityPanel.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
-import type { AgentContextSnapshot, LlmCallMetric } from '~/types/execution'
+import type {
+  AgentContextSnapshot,
+  AgentSearchQuery,
+  LlmCallMetric,
+  WebSearchProvider,
+} from '~/types/execution'
 import { agentKindMeta } from '~/utils/catalog'
 import { formatMs, formatTokens, pct } from '~/utils/observability'
 
@@ -32,9 +37,20 @@ const exporting = computed(
 const error = computed(() =>
   executionId.value ? (observability.errors[executionId.value] ?? null) : null,
 )
+const contextError = computed(() =>
+  executionId.value ? (observability.contextErrors[executionId.value] ?? null) : null,
+)
+
+function retryCalls() {
+  if (executionId.value) void observability.load(executionId.value)
+}
+function retryContext() {
+  if (executionId.value) void observability.loadContext(executionId.value)
+}
 
-// Which view is shown: the per-call model activity, or the complete provided context.
-const view = ref<'calls' | 'context'>('calls')
+// Which view is shown: per-call model activity, the complete provided context, or the
+// performed web searches.
+const view = ref<'calls' | 'context' | 'search'>('calls')
 
 const contextSnapshots = computed<AgentContextSnapshot[]>(() =>
   executionId.value ? observability.contextFor(executionId.value) : [],
@@ -43,6 +59,39 @@ const contextLoading = computed(
   () => !!executionId.value && observability.isContextLoading(executionId.value),
 )
 
+const searchQueries = computed<AgentSearchQuery[]>(() =>
+  executionId.value ? observability.searchQueriesFor(executionId.value) : [],
+)
+const searchLoading = computed(
+  () => !!executionId.value && observability.isSearchQueriesLoading(executionId.value),
+)
+
+// Brand names, kept verbatim across locales (not translatable prose).
+const PROVIDER_LABEL: Record<WebSearchProvider, string> = { brave: 'Brave', searxng: 'SearXNG' }
+function providerLabel(provider: WebSearchProvider | null): string {
+  return provider ? PROVIDER_LABEL[provider] : ''
+}
+
+// Whether web search was available to this run's container agents, and which provider(s)
+// served it — a static per-run fact set on each container step at dispatch (not gated by
+// prompt-recording telemetry, unlike the performed queries below).
+const searchAvailability = computed<{ available: boolean; providers: WebSearchProvider[] } | null>(
+  () => {
+    const steps = (instance.value?.steps ?? []).filter((s) => s.search)
+    if (!steps.length) return null
+    const available = steps.some((s) => s.search?.available)
+    const providers = [
+      ...new Set(
+        steps
+          .map((s) => s.search)
+          .filter((x): x is NonNullable<typeof x> => !!x?.available && !!x.provider)
+          .map((x) => x.provider as WebSearchProvider),
+      ),
+    ]
+    return { available, providers }
+  },
+)
+
 // Load (and refresh) whenever a different run's panel opens. Reset to the calls view
 // and load both the calls and the provided-context snapshots.
 watch(
@@ -52,6 +101,7 @@ watch(
       view.value = 'calls'
       void observability.load(id)
       void observability.loadContext(id)
+      void observability.loadSearchQueries(id)
     }
   },
   // Lazy v-if mount: the panel mounts with executionId already set, so load immediately.
@@ -182,6 +232,17 @@ function exportJson() {
               >
                 {{ t('observability.providedContext') }}
               </button>
+              <button
+                class="rounded-md px-2.5 py-1 transition"
+                :class="
+                  view === 'search'
+                    ? 'bg-slate-800 text-slate-100'
+                    : 'text-slate-400 hover:text-slate-200'
+                "
+                @click="view = 'search'"
+              >
+                {{ t('observability.webSearch') }}
+              </button>
             </div>
             <UButton
               v-if="view === 'calls'"
@@ -282,12 +343,22 @@ function exportJson() {
               <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
               {{ t('observability.loadingActivity') }}
             </p>
-            <p
+            <div
               v-else-if="error"
-              class="rounded-lg border border-dashed border-rose-900/60 py-6 text-center text-sm text-rose-400"
+              class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-rose-900/60 py-6 text-center text-sm text-rose-400"
             >
               {{ error }}
-            </p>
+              <UButton
+                icon="i-lucide-rotate-cw"
+                color="neutral"
+                variant="soft"
+                size="xs"
+                :loading="loading"
+                @click="retryCalls"
+              >
+                {{ t('common.retry') }}
+              </UButton>
+            </div>
             <p
               v-else-if="!calls.length"
               class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
@@ -434,7 +505,7 @@ function exportJson() {
           </div>
 
           <!-- Provided context: the complete context each container agent was given. -->
-          <div v-else class="mx-auto max-w-4xl space-y-5">
+          <div v-else-if="view === 'context'" class="mx-auto max-w-4xl space-y-5">
             <p
               v-if="contextLoading && !contextSnapshots.length"
               class="flex items-center justify-center gap-2 py-8 text-center text-sm text-slate-500"
@@ -442,6 +513,22 @@ function exportJson() {
               <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
               {{ t('observability.loadingContext') }}
             </p>
+            <div
+              v-else-if="contextError && !contextSnapshots.length"
+              class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-rose-900/60 py-8 text-center text-sm text-rose-400"
+            >
+              {{ t('observability.contextError') }}
+              <UButton
+                icon="i-lucide-rotate-cw"
+                color="neutral"
+                variant="soft"
+                size="xs"
+                :loading="contextLoading"
+                @click="retryContext"
+              >
+                {{ t('common.retry') }}
+              </UButton>
+            </div>
             <p
               v-else-if="!contextSnapshots.length"
               class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
@@ -553,6 +640,88 @@ function exportJson() {
               </li>
             </ul>
           </div>
+
+          <div v-else class="mx-auto max-w-4xl space-y-5">
+            <!-- Availability header: a static per-run fact (not telemetry-gated). -->
+            <section
+              v-if="searchAvailability"
+              class="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-xl border border-slate-800 bg-slate-900/50 px-4 py-3 text-[13px]"
+            >
+              <span class="text-[11px] uppercase tracking-wide text-slate-500">
+                {{ t('observability.webSearch') }}
+              </span>
+              <span
+                class="inline-flex items-center gap-1.5"
+                :class="searchAvailability.available ? 'text-emerald-300' : 'text-slate-400'"
+              >
+                <UIcon
+                  :name="searchAvailability.available ? 'i-lucide-globe' : 'i-lucide-globe-lock'"
+                  class="h-4 w-4"
+                />
+                {{
+                  searchAvailability.available
+                    ? t('observability.search.available')
+                    : t('observability.search.unavailable')
+                }}
+              </span>
+              <span v-if="searchAvailability.providers.length" class="text-slate-400 tabular-nums">
+                {{ t('observability.search.provider') }}:
+                {{ searchAvailability.providers.map(providerLabel).join(', ') }}
+              </span>
+            </section>
+
+            <p
+              v-if="searchLoading && !searchQueries.length"
+              class="flex items-center justify-center gap-2 py-8 text-center text-sm text-slate-500"
+            >
+              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+              {{ t('observability.loadingSearch') }}
+            </p>
+            <p
+              v-else-if="!searchQueries.length"
+              class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
+            >
+              {{ t('observability.noSearch') }}
+            </p>
+
+            <div v-else>
+              <div class="mb-2 text-[11px] uppercase tracking-wide text-slate-500">
+                {{ t('observability.search.queriesTitle') }}
+              </div>
+              <ul class="space-y-2">
+                <li
+                  v-for="q in searchQueries"
+                  :key="q.id"
+                  class="flex items-center gap-3 rounded-xl border border-slate-800 bg-slate-900/40 px-4 py-2.5"
+                >
+                  <UIcon
+                    :name="agentMeta(q.agentKind).icon"
+                    class="h-4 w-4 shrink-0"
+                    :style="{ color: agentMeta(q.agentKind).color }"
+                    :title="agentMeta(q.agentKind).label"
+                  />
+                  <span class="min-w-0 flex-1 truncate text-[13px] text-slate-200" :title="q.query">
+                    {{ q.query }}
+                  </span>
+                  <div
+                    class="flex shrink-0 items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
+                  >
+                    <span v-if="q.provider" class="hidden sm:inline">{{
+                      providerLabel(q.provider)
+                    }}</span>
+                    <span>{{
+                      t(
+                        'observability.search.resultsCount',
+                        { count: q.resultCount },
+                        q.resultCount,
+                      )
+                    }}</span>
+                    <span class="hidden text-slate-600 md:inline">{{ clock(q.createdAt) }}</span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
     </Transition>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -59,6 +59,10 @@ const { open, blockId, instanceId, stepIndex, close } = useResultView('requireme
     docCollapsedOverride.value = null
     void requirements.load(id)
   },
+  // Closing the window (X, backdrop, Escape) must not silently drop an answer the user typed
+  // but never blurred out of. Flush before the view tears down; flushDrafts captures the
+  // review up front so the persist survives blockId going null on close (UX-33).
+  onClose: () => void flushDrafts(),
 })
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const review = computed<RequirementReview | null>(() =>
@@ -167,23 +171,29 @@ function notifyError(title: string, e: unknown) {
 // the recorded reply (see the watch below); editing and blurring persists it. Persist only
 // when the trimmed draft actually differs from what's already recorded, so blurring an
 // untouched field is a no-op.
-async function persistDraft(item: RequirementReviewItem) {
-  if (!review.value || frozen.value) return
+async function persistDraft(
+  item: RequirementReviewItem,
+  r: RequirementReview | null = review.value,
+) {
+  if (!r || frozen.value) return
   const text = (drafts.value[item.id] ?? '').trim()
   if (!text || text === (item.reply ?? '').trim()) return
   try {
-    await requirements.reply(review.value, item.id, text)
+    await requirements.reply(r, item.id, text)
   } catch (e) {
     notifyError(t('requirements.errors.saveAnswer'), e)
   }
 }
 
-// Persist every dirty draft before an action that consumes the answers, so a value the
-// user typed but never blurred out of isn't lost.
+// Persist every dirty draft before an action that consumes the answers (or on window close),
+// so a value the user typed but never blurred out of isn't lost. Snapshots the review up front
+// and threads it through, so the persist completes even if the window closes mid-flush (the
+// reactive `review` goes null the moment the view tears down).
 async function flushDrafts() {
-  if (!review.value) return
-  for (const item of review.value.items) {
-    if (item.status === 'open' || item.status === 'answered') await persistDraft(item)
+  const r = review.value
+  if (!r) return
+  for (const item of r.items) {
+    if (item.status === 'open' || item.status === 'answered') await persistDraft(item, r)
   }
 }
 
@@ -483,7 +493,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
         </header>
 
-        <div class="flex min-h-0 flex-1">
+        <div class="flex min-h-0 flex-1 flex-col lg:flex-row">
           <!-- main column -->
           <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
             <i18n-t
@@ -842,10 +852,15 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </template>
           </div>
 
-          <!-- right action rail -->
-          <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
+          <!-- action rail: a right-hand column on wide screens, a bottom action bar below `lg`
+               (never hidden — the gate is otherwise unadvanceable on a laptop split-screen /
+               tablet, UX-32). The informational stats collapse away below `lg` to keep the
+               bottom bar compact; the actions themselves always show. -->
+          <aside
+            class="flex w-full shrink-0 flex-col border-t border-slate-800 lg:w-72 lg:border-s lg:border-t-0"
+          >
             <div class="flex flex-col gap-4 px-4 py-5">
-              <div v-if="review" class="space-y-2 text-xs text-slate-400">
+              <div v-if="review" class="hidden space-y-2 text-xs text-slate-400 lg:block">
                 <div class="flex items-center justify-between">
                   <span>{{ t('requirements.stats.findings') }}</span>
                   <span class="text-slate-300">{{ review.items.length }}</span>

package/app/components/spec/ServiceSpecWindow.vue

@@ -88,6 +88,11 @@ function selectGroup(m: number, g: number) {
   selected.value = { m, g }
 }
 
+// Re-fetch after a load failure — the only escape used to be close-and-reopen.
+function retry() {
+  if (blockId.value) void serviceSpec.load(blockId.value)
+}
+
 // Exhaustive priority → label/chip map. Literal `t()` keys keep the typed-key drift
 // guard live, vs a runtime-built `spec.priority.${value}`.
 const PRIORITY_META: Record<RequirementPriority, { label: string; chip: string }> = {
@@ -187,10 +192,20 @@ function kindLabel(item: RequirementItem): string {
         <!-- error -->
         <div
           v-else-if="errored"
-          class="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center text-sm text-slate-400"
+          class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center text-sm text-slate-400"
         >
           <UIcon name="i-lucide-triangle-alert" class="h-6 w-6 text-amber-400" />
           {{ t('spec.error') }}
+          <UButton
+            icon="i-lucide-rotate-cw"
+            color="neutral"
+            variant="soft"
+            size="xs"
+            :loading="loading"
+            @click="retry"
+          >
+            {{ t('common.retry') }}
+          </UButton>
         </div>
 
         <!-- empty: no spec on the repo's default branch yet -->

package/app/composables/api/execution.ts

@@ -4,6 +4,7 @@ import {
   exportExecutionLlmMetricsContract,
   getExecutionAgentContextContract,
   getExecutionLlmMetricsContract,
+  getExecutionSearchQueriesContract,
   mergeBlockContract,
   rejectStepContract,
   requestStepChangesContract,
@@ -145,6 +146,14 @@ export function executionApi({ send, sendWith, ws, pwHeaders }: ApiContext) {
         pathParams: { executionId },
       }),
 
+    // The web searches each container agent performed in a run (query, provider,
+    // result count). Empty when not wired / storing is off.
+    getSearchQueries: (workspaceId: string, executionId: string) =>
+      send(getExecutionSearchQueriesContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { executionId },
+      }),
+
     // ---- spend safeguard --------------------------------------------------
     resumeSpend: (workspaceId: string) =>
       send(resumeSpendContract, { pathPrefix: ws(workspaceId) }),

package/app/composables/usePipelineErrorToast.ts

@@ -93,6 +93,9 @@ export function usePipelineErrorToast() {
           : (conflict.message ?? t('errors.conflict.fallbackMessage')),
         color: 'error',
         icon: 'i-lucide-cpu',
+        // Stay until dismissed: an actionable toast whose remedy button vanishes on the ~5s
+        // auto-dismiss takes the one-click fix with it before the user can reach it.
+        duration: 0,
         actions: [
           {
             label: t('errors.conflict.providersUnconfigured.action'),
@@ -117,6 +120,9 @@ export function usePipelineErrorToast() {
           : (conflict.message ?? t('errors.conflict.fallbackMessage')),
         color: 'error',
         icon: 'i-lucide-image',
+        // Sticky, like the providers-unconfigured toast above: keep the "Configure storage"
+        // remedy reachable instead of letting it auto-dismiss.
+        duration: 0,
         actions: [
           {
             label: t('errors.conflict.binaryStorageUnconfigured.action'),

package/app/composables/useResultView.ts

@@ -12,8 +12,17 @@
  *
  * A synchronous window (one that reads its data straight off the execution step, like the
  * test report) simply omits `onOpen`.
+ *
+ * `onClose` runs on EVERY close path — the X button, backdrop click, and the Escape key
+ * handled here — BEFORE the view is torn down, so a window with unsaved draft input (the
+ * review windows) can flush it in one place instead of every caller having to remember to.
+ * It runs synchronously; if it kicks off async work it must capture whatever it needs first,
+ * because `blockId`/the derived state go null the moment the view closes.
  */
-export function useResultView(viewId: string, opts?: { onOpen?: (blockId: string) => void }) {
+export function useResultView(
+  viewId: string,
+  opts?: { onOpen?: (blockId: string) => void; onClose?: () => void },
+) {
   const ui = useUiStore()
 
   const open = computed(() => ui.resultView?.view === viewId)
@@ -26,6 +35,7 @@ export function useResultView(viewId: string, opts?: { onOpen?: (blockId: string
   const stage = computed(() => (open.value ? (ui.resultView!.stage ?? null) : null))
 
   function close() {
+    if (open.value) opts?.onClose?.()
     ui.closeResultView()
   }
 

package/app/composables/useWorkspaceStream.ts

@@ -31,6 +31,17 @@ export function useWorkspaceStream() {
   const apiBase = useRuntimeConfig().public.apiBase
 
   const connected = ref(false)
+  // Have we EVER been fully live (connected AND reconciled) for the current workspace? Drives the
+  // "reconnecting" vs "never connected" distinction in the banner. Set together with `connected`
+  // AFTER the on-open resync settles — NOT at `onopen` — so the initial resync window (socket open
+  // but not yet announced) can't be mistaken for a re-connection and flash the amber banner.
+  const everConnected = ref(false)
+  // The very first handshake keeps failing (proxy/firewall blocks WS while REST works, or the
+  // ticket mint throws) — the board loaded over REST but will never go live. Flagged after a
+  // few failed attempts so the banner can say "not receiving live updates" instead of nothing.
+  const connectionFailed = ref(false)
+  // Failed connect attempts before we ever go live gates the offline flag above.
+  const INITIAL_FAIL_ATTEMPTS = 3
 
   let socket: WebSocket | null = null
   let stopped = false
@@ -41,9 +52,29 @@ export function useWorkspaceStream() {
   // http→ws, https→wss (apiBase is an absolute origin, see nuxt.config.ts).
   const wsBase = String(apiBase).replace(/^http/, 'ws')
 
+  // A coarse board refresh (the resync on reconnect, and the `board` event fan-out) must not be
+  // left silently stale by ONE transient failure: retry a few times with backoff so a blip
+  // self-heals. Bounded (the socket-level reconnect + the offline banner are the backstop for a
+  // genuine outage). Aborts between attempts if the stream stopped or the workspace switched.
+  const REFRESH_MAX_ATTEMPTS = 4
+  const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms))
+  async function refreshWithRetry(workspaceId: string): Promise<void> {
+    for (let i = 0; i < REFRESH_MAX_ATTEMPTS; i++) {
+      if (stopped || workspace.workspaceId !== workspaceId) return
+      try {
+        await workspace.refresh()
+        return
+      } catch {
+        if (i < REFRESH_MAX_ATTEMPTS - 1) await sleep(Math.min(4_000, 400 * 2 ** i))
+      }
+    }
+  }
+
   function debouncedBoardRefresh() {
+    const workspaceId = workspace.workspaceId
+    if (!workspaceId) return
     if (boardDebounce) clearTimeout(boardDebounce)
-    boardDebounce = setTimeout(() => void workspace.refresh(), 300)
+    boardDebounce = setTimeout(() => void refreshWithRetry(workspaceId), 300)
   }
 
   function onMessage(raw: string) {
@@ -143,6 +174,7 @@ export function useWorkspaceStream() {
 
     socket.onopen = () => {
       attempt = 0
+      connectionFailed.value = false
       // Resync on (re)connect BEFORE announcing `connected`: any event missed while
       // disconnected is reconciled first. The snapshot carries `bootstrapJobs` +
       // executions, so one refresh rehydrates agentRuns too — a missed terminal event
@@ -157,18 +189,20 @@ export function useWorkspaceStream() {
       // live "bootstrapping…" badge flickers out with no further board event to restore
       // it. Anything acting on a `connected` board (a user, or an e2e spec gating on
       // `data-connected`) then does so only after this reconcile, so a lagging resync
-      // can't drop the state that action produces. `connected` is still set on failure
-      // (we ARE connected; a transient refresh error must not wedge the indicator/tests).
-      void workspace
-        .refresh()
-        .catch(() => {})
-        .finally(() => {
-          // A workspace switch (or stop()) may have happened while the refresh was in
-          // flight — don't announce a connection for a socket we've since abandoned.
-          if (!stopped && socket && workspace.workspaceId === workspaceId) {
-            connected.value = true
-          }
-        })
+      // can't drop the state that action produces. The resync RETRIES on a transient
+      // failure (`refreshWithRetry`) so a reconnect no longer presents as fully live while
+      // silently missing everything from the outage; `connected` is still set even if every
+      // retry fails (we ARE connected; a refresh error must not wedge the indicator/tests).
+      void refreshWithRetry(workspaceId).finally(() => {
+        // A workspace switch (or stop()) may have happened while the refresh was in
+        // flight — don't announce a connection for a socket we've since abandoned.
+        if (!stopped && socket && workspace.workspaceId === workspaceId) {
+          // Flip `everConnected` here (not at onopen): only now are we "fully live", so a later
+          // drop reads as a real re-connection while this initial resync window does not.
+          everConnected.value = true
+          connected.value = true
+        }
+      })
     }
     socket.onmessage = (e) => onMessage(typeof e.data === 'string' ? e.data : '')
     socket.onclose = () => {
@@ -181,6 +215,10 @@ export function useWorkspaceStream() {
   function scheduleReconnect() {
     if (stopped) return
     socket = null
+    // If we've never gone live and keep failing, flag the board as offline so the banner can
+    // surface a "not receiving live updates" state (a REST-only board otherwise looks fine but
+    // silently never updates). Reset the moment a socket opens (see `onopen`).
+    if (!everConnected.value && attempt + 1 >= INITIAL_FAIL_ATTEMPTS) connectionFailed.value = true
     const delay = Math.min(30_000, 500 * 2 ** attempt) // 0.5s → 30s cap
     attempt += 1
     reconnectTimer = setTimeout(connect, delay)
@@ -188,6 +226,11 @@ export function useWorkspaceStream() {
 
   function start() {
     stopped = false
+    // Reset the per-workspace connection lifecycle so a switch to a NEW workspace whose socket
+    // fails is flagged offline on its own merits, not masked by the previous workspace's history.
+    attempt = 0
+    everConnected.value = false
+    connectionFailed.value = false
     connect()
   }
 
@@ -201,5 +244,5 @@ export function useWorkspaceStream() {
   }
 
   onScopeDispose(stop)
-  return { start, stop, connected }
+  return { start, stop, connected, everConnected, connectionFailed }
 }

package/app/pages/index.vue

@@ -243,6 +243,8 @@ const stream = useWorkspaceStream()
 // in the template would not unwrap, since `stream` is a plain object). Drives the headless
 // `workspace-stream` readiness marker the e2e suite waits on.
 const streamConnected = computed(() => stream.connected.value)
+const streamEverConnected = computed(() => stream.everConnected.value)
+const streamConnectionFailed = computed(() => stream.connectionFailed.value)
 watch(
   () => workspace.workspaceId,
   (id) => {
@@ -320,7 +322,11 @@ watch(
         />
         <BoardToolbar />
         <SpendWarningBanner />
-        <ConnectionStatusBanner :connected="streamConnected" />
+        <ConnectionStatusBanner
+          :connected="streamConnected"
+          :ever-connected="streamEverConnected"
+          :connection-failed="streamConnectionFailed"
+        />
         <InspectorPanel />
         <!-- Code-split focus view. The fade lives here (not inside the component) so the
              leave animation still plays when `focusBlockId` clears and the v-if unmounts

package/app/stores/board.ts

@@ -557,7 +557,18 @@ export const useBoardStore = defineStore('board', () => {
     const t = getBlock(targetId)
     if (!t || !t.dependsOn.includes(sourceId)) return
     // the backend exposes a single toggle; the edge exists, so toggling removes it
-    upsert(await api.toggleDependency(useWorkspaceStore().requireId(), targetId, { sourceId }))
+    try {
+      upsert(await api.toggleDependency(useWorkspaceStore().requireId(), targetId, { sourceId }))
+    } catch (e) {
+      // Mirror `toggleDependency`: a failure must surface (and leave the edge visible) rather
+      // than rejecting unhandled with no feedback.
+      toast.add({
+        title: tr('board.toast.unlinkFailed'),
+        description: e instanceof Error ? e.message : String(e),
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+    }
   }
 
   return {

package/app/stores/execution.spec.ts

@@ -76,6 +76,41 @@ describe('execution store snapshot/event reconcile', () => {
     expect(store.getInstance('e1')?.rev).toBe(2)
   })
 
+  it('drops a superseded failed run when a retry replaces it under a new id (same block)', () => {
+    // A failed run for a block is cached...
+    store.hydrate(
+      [{ id: 'e_old', blockId: 'b1', steps: [], status: 'failed', rev: 1 } as never],
+      'ws1',
+    )
+    // ...then a retry mints a FRESH run (new id) for the SAME block and deletes the old one
+    // server-side. The post-retry snapshot carries only the new running run.
+    store.hydrate(
+      [{ id: 'e_new', blockId: 'b1', steps: [], status: 'running', rev: 1 } as never],
+      'ws1',
+    )
+    // The dead predecessor must not linger and shadow the running run in the by-block projection.
+    expect(store.getInstance('e_old')).toBeUndefined()
+    expect(store.getInstance('e_new')?.status).toBe('running')
+    expect(store.getByBlock('b1')?.id).toBe('e_new')
+  })
+
+  it('keeps a live-added running run when a stale snapshot still lists its block predecessor', () => {
+    // A retry already minted e_new (running) for b1 — a live event added it to the cache...
+    store.hydrate(
+      [{ id: 'e_new', blockId: 'b1', steps: [], status: 'running', rev: 1 } as never],
+      'ws1',
+    )
+    // ...but a reconnect resync fetched BEFORE the retry resolves late (under load) and still
+    // carries the now-deleted predecessor e_old (failed) for the same block.
+    store.hydrate(
+      [{ id: 'e_old', blockId: 'b1', steps: [], status: 'failed', rev: 1 } as never],
+      'ws1',
+    )
+    // The live running run must survive — only a TERMINAL cached run is a superseded predecessor.
+    expect(store.getInstance('e_new')?.status).toBe('running')
+    expect(store.getByBlock('b1')?.id).toBe('e_new')
+  })
+
   it('a workspace switch replaces the cache outright (no cross-board leak)', () => {
     store.hydrate([run('e1', 1, 'running')], 'ws1')
     store.upsert(run('e2', 1, 'running'))