@cat-factory/app 0.71.2 → 0.73.1

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import type {
   Block,
   FrontendBackendBinding,
@@ -7,6 +7,7 @@ import type {
   FrontendEnvInjection,
   FrontendPackageManager,
   FrontendServeMode,
+  PreviewStatus,
 } from '~/types/domain'
 
 // Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
@@ -19,6 +20,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const auth = useAuthStore()
+const preview = usePreviewStore()
 const { t } = useI18n()
 
 // A browsable preview needs a long-lived host serve, so it is a local/node runtime capability
@@ -94,6 +96,39 @@ function addBinding() {
 function removeBinding(index: number) {
   save({ backendBindings: bindings.value.filter((_, i) => i !== index) })
 }
+
+// ---- Browsable preview (live runtime state, distinct from the persisted toggle) ----------
+// The live preview is a separate resource fetched from the preview endpoints; the store keys it
+// by frame id and self-polls while it is `starting`. Only relevant on a preview-capable runtime
+// with the toggle on.
+const previewActive = computed(() => previewSupported.value && config.value.previewEnabled === true)
+const previewState = computed(() => preview.byFrame[props.block.id])
+const previewStatus = computed<PreviewStatus>(() => previewState.value?.status ?? 'stopped')
+const previewBusy = computed(() => preview.busy[props.block.id] === true)
+// A start/stop request error (e.g. an unsupported runtime 503s) — shown inline; distinct from a
+// `failed` preview (a build that came up then broke), which carries `previewState.error`.
+const previewRequestError = computed(() => preview.requestError[props.block.id])
+
+// Exhaustive status → catalog key (tier-2 guard for the runtime-built lookup): adding a
+// PreviewStatus value without a label trips the typecheck on this map.
+const PREVIEW_STATUS_KEYS: Record<PreviewStatus, string> = {
+  starting: 'inspector.frontendConfig.preview.status.starting',
+  ready: 'inspector.frontendConfig.preview.status.ready',
+  failed: 'inspector.frontendConfig.preview.status.failed',
+  stopped: 'inspector.frontendConfig.preview.status.stopped',
+}
+const previewStatusLabel = computed(() => t(PREVIEW_STATUS_KEYS[previewStatus.value]))
+
+// Load the current state when the preview surface becomes relevant (mount + toggling it on, or
+// selecting a different frontend frame), so the inspector reflects an already-running preview.
+function refreshPreview() {
+  if (previewActive.value) void preview.refresh(props.block.id)
+}
+onMounted(refreshPreview)
+watch(() => [previewActive.value, props.block.id], refreshPreview)
+// Stop the store's self-poll for this frame when the inspector closes, so a `starting` preview
+// doesn't keep polling in the background after the panel is gone.
+onUnmounted(() => preview.stopPolling(props.block.id))
 </script>
 
 <template>
@@ -359,6 +394,81 @@ function removeBinding(index: number) {
             : t('inspector.frontendConfig.previewUnsupported')
         }}
       </p>
+
+      <!-- Live preview control: start / open (clickable URL) / stop, reflecting the runtime state. -->
+      <div v-if="previewActive" class="mt-2 space-y-1.5" data-testid="preview-panel">
+        <div class="flex items-center gap-2">
+          <span
+            class="text-[11px] font-medium"
+            :class="{
+              'text-emerald-400': previewStatus === 'ready',
+              'text-amber-400': previewStatus === 'starting',
+              'text-rose-400': previewStatus === 'failed',
+              'text-slate-400': previewStatus === 'stopped',
+            }"
+            data-testid="preview-status"
+          >
+            {{ previewStatusLabel }}
+          </span>
+
+          <UButton
+            v-if="previewStatus === 'ready' && previewState?.url"
+            :to="previewState.url"
+            target="_blank"
+            rel="noopener"
+            size="xs"
+            variant="soft"
+            color="primary"
+            trailing-icon="i-lucide-external-link"
+            data-testid="preview-url"
+          >
+            {{ t('inspector.frontendConfig.preview.open') }}
+          </UButton>
+        </div>
+
+        <div class="flex flex-wrap gap-1">
+          <UButton
+            v-if="previewStatus === 'stopped' || previewStatus === 'failed'"
+            size="xs"
+            variant="soft"
+            color="primary"
+            icon="i-lucide-play"
+            :loading="previewBusy"
+            data-testid="preview-start"
+            @click="preview.start(props.block.id)"
+          >
+            {{ t('inspector.frontendConfig.preview.start') }}
+          </UButton>
+          <UButton
+            v-if="previewStatus === 'ready' || previewStatus === 'starting'"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-square"
+            :loading="previewBusy"
+            data-testid="preview-stop"
+            @click="preview.stop(props.block.id)"
+          >
+            {{ t('inspector.frontendConfig.preview.stop') }}
+          </UButton>
+        </div>
+
+        <p
+          v-if="previewStatus === 'failed' && previewState?.error"
+          class="text-[11px] leading-snug text-rose-400"
+          data-testid="preview-error"
+        >
+          {{ previewState.error }}
+        </p>
+
+        <p
+          v-if="previewRequestError"
+          class="text-[11px] leading-snug text-rose-400"
+          data-testid="preview-request-error"
+        >
+          {{ previewRequestError }}
+        </p>
+      </div>
     </div>
   </div>
 </template>

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

@@ -18,6 +18,7 @@ const ui = useUiStore()
 const models = useModelsStore()
 const reviews = useReviewStage()
 const { t, te } = useI18n()
+const { confirm } = useConfirm()
 
 // The async stage this task's iterative reviewer gate (requirements-review / clarity-review)
 // is mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate is
@@ -99,7 +100,12 @@ function labelForStep(s: {
   // container is still cold-booting → "Spinning up"; up with a known phase → the phase
   // label ("Agent running" / "Preparing workspace"), so a finished cold-boot no longer
   // collapses into a blank "Working". A failed run's mid-flight step isn't booting.
-  if (!runFailed.value) {
+  //
+  // Only while the step is STILL RUNNING, though: the run's one shared container is kept
+  // alive until the pipeline's final step, so a step that has already finished (e.g. the
+  // merger, which resolves + advances to a trailing gate) would otherwise keep reading the
+  // stale "Agent running" phase even though its state is `done`. A done step reads "Done".
+  if (!runFailed.value && s.state !== 'done') {
     if (s.container?.status === 'starting') return t('inspector.execution.spinningUp')
     if (s.container?.status === 'up') {
       const label = containerPhaseLabel(s.container.phase, { t, te })
@@ -141,6 +147,16 @@ async function stopRun() {
 const resetting = ref(false)
 async function resetRun() {
   if (resetting.value) return
+  // Destructive: discards the run and returns the task to planned — gate it behind a confirm,
+  // matching the confirm-then-mutate contract the board delete path uses.
+  const ok = await confirm({
+    title: t('inspector.execution.resetConfirm.title'),
+    description: t('inspector.execution.resetConfirm.body'),
+    variant: 'destructive',
+    confirmLabel: t('inspector.execution.resetConfirm.confirm'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   resetting.value = true
   try {
     await execution.cancel(props.block.id)
@@ -148,6 +164,19 @@ async function resetRun() {
     resetting.value = false
   }
 }
+
+// Merging a PR is consequential and effectively irreversible — confirm first. `execution.mergePr`
+// surfaces its own error toast, so no catch is needed here.
+async function mergePr() {
+  const ok = await confirm({
+    title: t('inspector.execution.mergeConfirm.title'),
+    description: t('inspector.execution.mergeConfirm.body'),
+    confirmLabel: t('inspector.execution.mergeConfirm.confirm'),
+    icon: 'i-lucide-git-merge',
+  })
+  if (!ok) return
+  await execution.mergePr(props.block.id)
+}
 </script>
 
 <template>
@@ -431,7 +460,7 @@ async function resetRun() {
       size="sm"
       icon="i-lucide-git-merge"
       block
-      @click="execution.mergePr(block.id)"
+      @click="mergePr"
     >
       {{ t('inspector.execution.mergePr') }}
     </UButton>

package/app/components/pipeline/PipelineBuilder.vue

@@ -3,7 +3,12 @@ import { computed, ref, watch } from 'vue'
 import type { AgentKind, Pipeline } from '~/types/domain'
 import AgentPalette from '~/components/palettes/AgentPalette.vue'
 import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
-import { agentKindMeta, companionForProducer, isConsensusEligibleKind } from '~/utils/catalog'
+import {
+  agentKindMeta,
+  companionForProducer,
+  isConsensusEligibleKind,
+  isTesterKind,
+} from '~/utils/catalog'
 import type { ConsensusStrategy } from '~/types/consensus'
 
 type DraftUnit = { index: number; kind: AgentKind; companionIndex: number | null }
@@ -146,15 +151,18 @@ function companionLabel(kind: string): string | null {
 }
 
 // Surfaced as an inline hint: a gated step needs a task-estimator before it (mirrors the
-// backend validation, which also rejects the save/start).
+// backend validation, which also rejects the save/start). Both the companion estimate gate
+// (`draftGating`) and the Tester QC companion's estimate gate (`draftTesterQuality[i].gating`)
+// count — either without a preceding estimator is rejected on save.
 const gatingNeedsEstimator = computed(() => {
   const kinds = pipelines.draft
+  const hasEstimatorBefore = (i: number) =>
+    kinds.slice(0, i).some((k, j) => k === 'task-estimator' && pipelines.draftEnabled[j] !== false)
   for (let i = 0; i < kinds.length; i++) {
-    if (!pipelines.draftGating[i]?.enabled || pipelines.draftEnabled[i] === false) continue
-    const hasEstimator = kinds
-      .slice(0, i)
-      .some((k, j) => k === 'task-estimator' && pipelines.draftEnabled[j] !== false)
-    if (!hasEstimator) return true
+    if (pipelines.draftEnabled[i] === false) continue
+    const gated =
+      pipelines.draftGating[i]?.enabled || pipelines.draftTesterQuality[i]?.gating?.enabled
+    if (gated && !hasEstimatorBefore(i)) return true
   }
   return false
 })
@@ -434,6 +442,30 @@ async function clone(p: Pipeline) {
                     "
                     @click="pipelines.toggleDraftFollowUps(unit.index)"
                   />
+                  <!-- Test quality-control companion: audits the Tester's report for coverage
+                     before the greenlight/fixer decision and loops the Tester on gaps (Tester
+                     steps only). Enabled by default. -->
+                  <UButton
+                    v-if="isTesterKind(unit.kind)"
+                    :icon="
+                      pipelines.draftTesterQuality[unit.index]?.enabled === false
+                        ? 'i-lucide-shield-off'
+                        : 'i-lucide-shield-check'
+                    "
+                    :color="
+                      pipelines.draftTesterQuality[unit.index]?.enabled === false
+                        ? 'neutral'
+                        : 'secondary'
+                    "
+                    variant="ghost"
+                    size="xs"
+                    :title="
+                      pipelines.draftTesterQuality[unit.index]?.enabled === false
+                        ? t('pipeline.builder.testerQualityEnableTooltip')
+                        : t('pipeline.builder.testerQualityDisableTooltip')
+                    "
+                    @click="pipelines.toggleDraftTesterQuality(unit.index)"
+                  />
                   <UButton
                     icon="i-lucide-chevron-up"
                     color="neutral"
@@ -642,6 +674,77 @@ async function clone(p: Pipeline) {
                   </template>
                 </div>
               </div>
+
+              <!-- Test quality-control companion config (shown when QC is enabled on a Tester
+                 step): an optional estimate gate so only heavy tasks get the coverage audit. -->
+              <div
+                v-if="
+                  isTesterKind(unit.kind) &&
+                  pipelines.draftTesterQuality[unit.index]?.enabled !== false
+                "
+                class="ms-6 space-y-2 rounded-md border border-sky-800/40 bg-sky-950/20 p-2 text-xs"
+              >
+                <div class="flex items-center gap-1.5">
+                  <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5 text-sky-400" />
+                  <span class="min-w-0 flex-1 truncate text-slate-200">
+                    {{ t('pipeline.builder.testerQualityLabel') }}
+                  </span>
+                  <UButton
+                    :icon="
+                      pipelines.draftTesterQuality[unit.index]?.gating?.enabled
+                        ? 'i-lucide-toggle-right'
+                        : 'i-lucide-toggle-left'
+                    "
+                    :color="
+                      pipelines.draftTesterQuality[unit.index]?.gating?.enabled
+                        ? 'success'
+                        : 'neutral'
+                    "
+                    variant="ghost"
+                    size="xs"
+                    :label="t('pipeline.builder.gateOnEstimate')"
+                    :title="t('pipeline.builder.testerQualityGateTooltip')"
+                    @click="pipelines.toggleDraftTesterQualityGating(unit.index)"
+                  />
+                </div>
+                <div
+                  v-if="pipelines.draftTesterQuality[unit.index]?.gating?.enabled"
+                  class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2"
+                >
+                  <span class="text-[10px] text-slate-500">{{
+                    t('pipeline.builder.runWhenAny')
+                  }}</span>
+                  <label class="text-slate-400">{{
+                    t('pipeline.builder.complexityThreshold')
+                  }}</label>
+                  <input
+                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minComplexity"
+                    type="number"
+                    min="0"
+                    max="1"
+                    step="0.1"
+                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                  />
+                  <label class="text-slate-400">{{ t('pipeline.builder.riskThreshold') }}</label>
+                  <input
+                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minRisk"
+                    type="number"
+                    min="0"
+                    max="1"
+                    step="0.1"
+                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                  />
+                  <label class="text-slate-400">{{ t('pipeline.builder.impactThreshold') }}</label>
+                  <input
+                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minImpact"
+                    type="number"
+                    min="0"
+                    max="1"
+                    step="0.1"
+                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                  />
+                </div>
+              </div>
             </li>
           </ol>
         </div>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -414,6 +414,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/spec/ServiceSpecWindow.vue

@@ -123,6 +123,8 @@ function kindLabel(item: RequirementItem): string {
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/testing/TestReportWindow.vue

@@ -47,6 +47,12 @@ const testState = computed(() => step.value?.test ?? null)
 // ended), newest first, so the otherwise-opaque fixer sub-jobs have a surface here.
 const fixerAttempts = computed(() => [...(testState.value?.attemptLog ?? [])].reverse())
 
+// Test quality-control companion state: the coverage audit the QC reviewer ran on each report
+// (before the greenlight/fixer decision) plus its loop budget. Verdicts newest-first, so the
+// most recent audit leads. Absent when the companion is disabled or never ran.
+const quality = computed(() => step.value?.testerQuality ?? null)
+const qualityVerdicts = computed(() => [...(quality.value?.verdicts ?? [])].reverse())
+
 // Infrastructure observability — parity with the Coder's generic step detail, so the
 // Tester window surfaces WHERE its job runs (the container lifecycle: spinning up /
 // running phase / id+url / errored), the ephemeral environment it tests against, and the
@@ -551,6 +557,91 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               </ol>
             </section>
 
+            <!-- Test quality-control companion: the coverage audit(s) the QC reviewer ran on
+                 the report before the greenlight/fixer decision. Each verdict says whether the
+                 report adequately covered what the task needed tested, with the gaps that
+                 looped the Tester for a focused additional pass. -->
+            <section
+              v-if="quality && qualityVerdicts.length"
+              data-testid="tester-quality"
+              class="space-y-2"
+            >
+              <div class="flex items-center gap-2">
+                <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  {{ t('testing.quality.heading') }}
+                </h3>
+                <span
+                  v-if="quality.attempts"
+                  class="text-[11px] text-slate-400"
+                  :title="t('testing.quality.reruns')"
+                >
+                  {{
+                    t('testing.quality.rerunCount', {
+                      attempts: quality.attempts,
+                      max: quality.maxAttempts,
+                    })
+                  }}
+                </span>
+                <UBadge
+                  v-if="quality.exceeded"
+                  color="warning"
+                  variant="subtle"
+                  size="sm"
+                  data-testid="tester-quality-exceeded"
+                >
+                  {{ t('testing.quality.exceeded') }}
+                </UBadge>
+              </div>
+              <ol class="space-y-2">
+                <li
+                  v-for="(vd, vi) in qualityVerdicts"
+                  :key="`qc${vi}`"
+                  data-testid="tester-quality-verdict"
+                  class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+                >
+                  <div class="flex items-center gap-2">
+                    <UIcon
+                      :name="vd.adequate ? 'i-lucide-shield-check' : 'i-lucide-shield-alert'"
+                      class="h-3.5 w-3.5 shrink-0"
+                      :class="vd.adequate ? 'text-emerald-400' : 'text-amber-300'"
+                    />
+                    <span class="text-[13px] font-medium text-slate-200">
+                      {{
+                        vd.adequate
+                          ? t('testing.quality.adequate')
+                          : t('testing.quality.inadequate')
+                      }}
+                    </span>
+                    <span v-if="vd.model" class="ms-auto font-mono text-[10px] text-slate-500">{{
+                      vd.model
+                    }}</span>
+                    <span class="text-[11px] text-slate-500" :class="{ 'ms-auto': !vd.model }">{{
+                      d(new Date(vd.at), 'short')
+                    }}</span>
+                  </div>
+                  <p v-if="vd.feedback" class="mt-1 text-[12px] leading-snug text-slate-400">
+                    {{ vd.feedback }}
+                  </p>
+                  <div v-if="vd.gaps.length" class="mt-1.5">
+                    <p class="text-[11px] text-slate-500">{{ t('testing.quality.gaps') }}</p>
+                    <ul class="mt-1 space-y-0.5">
+                      <li
+                        v-for="(gap, gi) in vd.gaps"
+                        :key="`qc${vi}-g${gi}`"
+                        class="flex items-start gap-1.5 text-[12px] text-slate-300"
+                      >
+                        <UIcon
+                          name="i-lucide-dot"
+                          class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400"
+                        />
+                        <span>{{ gap }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+              </ol>
+            </section>
+
             <div
               v-if="!report"
               class="flex flex-col items-center justify-center gap-2 py-12 text-center text-slate-400"

package/app/composables/api/preview.ts

@@ -0,0 +1,20 @@
+import {
+  getPreviewContract,
+  startPreviewContract,
+  stopPreviewContract,
+} from '@cat-factory/contracts'
+import type { ApiContext } from './context'
+
+/** Browsable frontend preview: start / poll / stop a served preview for a `frontend` frame. */
+export function previewApi({ send, ws }: ApiContext) {
+  return {
+    getPreview: (workspaceId: string, frameId: string) =>
+      send(getPreviewContract, { pathPrefix: ws(workspaceId), pathParams: { frameId } }),
+
+    startPreview: (workspaceId: string, frameId: string) =>
+      send(startPreviewContract, { pathPrefix: ws(workspaceId), pathParams: { frameId } }),
+
+    stopPreview: (workspaceId: string, frameId: string) =>
+      send(stopPreviewContract, { pathPrefix: ws(workspaceId), pathParams: { frameId } }),
+  }
+}

package/app/composables/useApi.ts

@@ -22,6 +22,7 @@ import { presetsApi } from './api/presets'
 import { providerConnectionsApi } from './api/providerConnections'
 import { provisioningLogsApi } from './api/provisioningLogs'
 import { recurringApi } from './api/recurring'
+import { previewApi } from './api/preview'
 import { releaseHealthApi } from './api/releaseHealth'
 import { sandboxApi } from './api/sandbox'
 import { reviewsApi } from './api/reviews'
@@ -111,6 +112,7 @@ export function useApi() {
     ...infraHandlersApi(ctx),
     ...provisioningLogsApi(ctx),
     ...releaseHealthApi(ctx),
+    ...previewApi(ctx),
     ...recurringApi(ctx),
     ...sandboxApi(ctx),
     ...githubApi(ctx),

package/app/composables/useKeyboardShortcuts.ts

@@ -20,9 +20,17 @@ export function useKeyboardShortcuts(): void {
   const board = useBoardStore()
   const { deleteBlock } = useBlockDeletion()
 
-  /** A modal (UModal) is on screen — let it own the keyboard; don't run global shortcuts. */
+  /** A modal / full-screen window is on screen — let it own the keyboard; don't run global
+   * shortcuts (else e.g. Delete would delete the selected block hidden BEHIND the window). The
+   * hand-rolled result-view + focus windows now carry `role="dialog"`, so the DOM check catches
+   * them; the store flags are belt-and-suspenders for the same windows. */
   function modalOpen(): boolean {
-    return ui.commandBarOpen || !!document.querySelector('[role="dialog"]')
+    return (
+      ui.commandBarOpen ||
+      !!ui.resultView ||
+      !!ui.focusBlockId ||
+      !!document.querySelector('[role="dialog"]')
+    )
   }
 
   /** The event originates from a text field, so printable/Delete keys are edits, not shortcuts. */

package/app/pages/index.vue

@@ -3,6 +3,7 @@ import BoardCanvas from '~/components/board/BoardCanvas.vue'
 import SideBar from '~/components/layout/SideBar.vue'
 import BoardToolbar from '~/components/layout/BoardToolbar.vue'
 import SpendWarningBanner from '~/components/layout/SpendWarningBanner.vue'
+import ConnectionStatusBanner from '~/components/layout/ConnectionStatusBanner.vue'
 import TranslationWarningBanner from '~/components/layout/TranslationWarningBanner.vue'
 import GitHubPatBanner from '~/components/layout/GitHubPatBanner.vue'
 import AiProvidersBanner from '~/components/layout/AiProvidersBanner.vue'
@@ -275,7 +276,7 @@ watch(
       class="m-auto flex flex-col items-center gap-3 text-slate-400"
     >
       <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
-      <span class="text-sm">Loading…</span>
+      <span class="text-sm">{{ $t('app.loading') }}</span>
     </div>
 
     <!-- App enabled but not installed on this workspace: hard onboarding gate. -->
@@ -312,6 +313,7 @@ watch(
         />
         <BoardToolbar />
         <SpendWarningBanner />
+        <ConnectionStatusBanner :connected="streamConnected" />
         <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
@@ -368,17 +370,17 @@ watch(
     <!-- Backend unreachable / bootstrap failed -->
     <div v-else-if="workspace.error" class="m-auto max-w-md p-8 text-center">
       <UIcon name="i-lucide-plug-zap" class="mx-auto mb-3 h-10 w-10 text-amber-400" />
-      <h1 class="mb-1 text-lg font-semibold">Can’t reach the backend</h1>
+      <h1 class="mb-1 text-lg font-semibold">{{ $t('app.backendUnreachable') }}</h1>
       <p class="mb-4 text-sm text-slate-400">{{ workspace.error }}</p>
       <UButton color="primary" icon="i-lucide-rotate-ccw" @click="workspace.init()">
-        Retry
+        {{ $t('common.retry') }}
       </UButton>
     </div>
 
     <!-- Initial load -->
     <div v-else class="m-auto flex flex-col items-center gap-3 text-slate-400">
       <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
-      <span class="text-sm">Loading board…</span>
+      <span class="text-sm">{{ $t('app.loadingBoard') }}</span>
     </div>
   </div>
 </template>

package/app/stores/board.spec.ts

@@ -1,6 +1,8 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
 import type { Block, BlockStatus } from '~/types/domain'
 import { useBoardStore } from '~/stores/board'
+import { useWorkspaceStore } from '~/stores/workspace'
 
 /** Minimal Block factory — only the fields the read getters care about. */
 function block(id: string, over: Partial<Block> = {}): Block {
@@ -224,6 +226,22 @@ describe('board store read getters', () => {
     expect(() => store.previewMove('missing', { x: 1, y: 1 })).not.toThrow()
   })
 
+  it('updateBlock restores the patched fields and toasts when the write fails', async () => {
+    // Capture the toast the store surfaces on failure. Re-stub before creating the store so it
+    // binds this spy (the store resolves `useToast()` once at setup).
+    const addSpy = vi.fn()
+    vi.stubGlobal('useToast', () => ({ add: addSpy }))
+    setActivePinia(createPinia())
+    const s = useBoardStore()
+    s.hydrate([frame('f1', { title: 'Original', description: 'orig' })])
+    // With no active workspace, `requireId()` throws inside updateBlock's try — the same catch
+    // that a rejected API write hits — so this exercises the optimistic-rollback + toast path.
+    await s.updateBlock('f1', { title: 'Edited', description: 'changed' })
+    expect(s.getBlock('f1')?.title).toBe('Original')
+    expect(s.getBlock('f1')?.description).toBe('orig')
+    expect(addSpy).toHaveBeenCalledWith(expect.objectContaining({ color: 'error' }))
+  })
+
   it('hydrate replaces and upsert inserts/updates cached blocks', () => {
     store.hydrate([frame('f1')])
     store.upsert(task('t1', 'f1', { title: 'first' }))
@@ -233,3 +251,42 @@ describe('board store read getters', () => {
     expect(store.allTasks).toHaveLength(1)
   })
 })
+
+describe('board store optimistic rollback', () => {
+  // These instantiate their own store AFTER stubbing the api (the store captures
+  // `useApi()` at setup), unlike the read-getter suite above.
+  beforeEach(() => {
+    useWorkspaceStore().workspaceId = 'ws1'
+  })
+
+  it('moveBlock restores the pre-drag position when the API rejects', async () => {
+    vi.stubGlobal('useApi', () => ({
+      moveBlock: () => Promise.reject(new Error('conflict')),
+    }))
+    const store = useBoardStore()
+    store.hydrate([frame('f1'), task('t1', 'f1', { position: { x: 10, y: 20 } })])
+    await store.moveBlock('t1', { x: 500, y: 600 })
+    expect(store.getBlock('t1')?.position).toEqual({ x: 10, y: 20 })
+  })
+
+  it('moveBlock keeps the new position on success', async () => {
+    vi.stubGlobal('useApi', () => ({
+      moveBlock: async () => task('t1', 'f1', { position: { x: 500, y: 600 } }),
+    }))
+    const store = useBoardStore()
+    store.hydrate([frame('f1'), task('t1', 'f1', { position: { x: 10, y: 20 } })])
+    await store.moveBlock('t1', { x: 500, y: 600 })
+    expect(store.getBlock('t1')?.position).toEqual({ x: 500, y: 600 })
+  })
+
+  it('updateBlock restores only the patched fields when the API rejects', async () => {
+    vi.stubGlobal('useApi', () => ({
+      updateBlock: () => Promise.reject(new Error('validation')),
+    }))
+    const store = useBoardStore()
+    store.hydrate([frame('f1'), task('t1', 'f1', { title: 'orig', description: 'keep' })])
+    await store.updateBlock('t1', { title: 'renamed' })
+    expect(store.getBlock('t1')?.title).toBe('orig')
+    expect(store.getBlock('t1')?.description).toBe('keep')
+  })
+})