@cat-factory/app 0.71.2 → 0.73.1

package/app/components/board/nodes/TaskCard.vue

@@ -14,6 +14,7 @@ const agentRuns = useAgentRunsStore()
 const reviews = useReviewStage()
 const toast = useToast()
 const { t } = useI18n()
+const { confirm } = useConfirm()
 
 const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
@@ -106,8 +107,17 @@ function review() {
   ui.focus(props.taskId)
 }
 
-function merge() {
-  execution.mergePr(props.taskId)
+async function merge() {
+  // Merging a PR into its base is consequential and effectively irreversible — gate it behind a
+  // confirm (plain, not the destructive shape). `execution.mergePr` surfaces its own error toast.
+  const ok = await confirm({
+    title: t('board.task.mergeConfirm.title'),
+    description: t('board.task.mergeConfirm.body'),
+    confirmLabel: t('board.task.mergeConfirm.confirm'),
+    icon: 'i-lucide-git-merge',
+  })
+  if (!ok) return
+  await execution.mergePr(props.taskId)
 }
 
 // A `blocked` task is waiting on a human for one of two reasons — an agent-raised

package/app/components/bootstrap/BootstrapModal.vue

@@ -444,7 +444,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <UInput v-model="repoName" placeholder="payments-service" class="w-full" />
+                <UInput
+                  v-model="repoName"
+                  :placeholder="t('bootstrap.targetRepo.namePlaceholder')"
+                  class="w-full"
+                />
                 <UButton
                   color="neutral"
                   variant="subtle"
@@ -493,7 +497,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <UInput
               v-model="description"
-              placeholder="Handles payment intents and refunds"
+              :placeholder="t('bootstrap.description.placeholder')"
               class="w-full"
             />
           </UFormField>
@@ -640,7 +644,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               <USelect
                 v-model="archRepoSlug"
                 :items="repoOptions"
-                placeholder="owner/name"
+                :placeholder="t('bootstrap.arch.pickRepo.placeholder')"
                 class="w-full"
               />
             </UFormField>
@@ -650,14 +654,26 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               :description="t('bootstrap.arch.name.description')"
               required
             >
-              <UInput v-model="archForm.name" placeholder="Service Template" class="w-full" />
+              <UInput
+                v-model="archForm.name"
+                :placeholder="t('bootstrap.arch.name.placeholder')"
+                class="w-full"
+              />
             </UFormField>
             <div class="grid grid-cols-2 gap-2">
               <UFormField :label="t('bootstrap.arch.repoOwner')" required>
-                <UInput v-model="archForm.repoOwner" placeholder="acme" class="w-full" />
+                <UInput
+                  v-model="archForm.repoOwner"
+                  :placeholder="t('bootstrap.arch.repoOwnerPlaceholder')"
+                  class="w-full"
+                />
               </UFormField>
               <UFormField :label="t('bootstrap.arch.repoName')" required>
-                <UInput v-model="archForm.repoName" placeholder="service-template" class="w-full" />
+                <UInput
+                  v-model="archForm.repoName"
+                  :placeholder="t('bootstrap.arch.repoNamePlaceholder')"
+                  class="w-full"
+                />
               </UFormField>
             </div>
             <UFormField :label="t('bootstrap.description.label')">
@@ -674,7 +690,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               <UTextarea
                 v-model="archForm.defaultInstructions"
                 :rows="2"
-                placeholder="e.g. keep the structure; rename packages to match the new service"
+                :placeholder="t('bootstrap.arch.defaultInstructions.placeholder')"
                 class="w-full"
               />
             </UFormField>

package/app/components/brainstorm/BrainstormWindow.vue

@@ -256,6 +256,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/clarity/ClarityReviewWindow.vue

@@ -246,6 +246,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/consensus/ConsensusSessionWindow.vue

@@ -98,6 +98,8 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
     >
       <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/focus/BlockFocusView.vue

@@ -62,6 +62,8 @@ function openApprovalFor(approvalId: string) {
   <div
     v-if="block && statusMeta && typeMeta"
     class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+    role="dialog"
+    aria-modal="true"
   >
     <!-- header / breadcrumb -->
     <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/followUp/FollowUpWindow.vue

@@ -90,6 +90,8 @@ const STATUS_META: Record<
     >
       <div
         class="m-4 flex w-full max-w-3xl 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-5 py-3">

package/app/components/gates/GateResultView.vue

@@ -170,6 +170,8 @@ const conflictVerdict = computed(() => {
     >
       <div
         class="m-4 flex w-full max-w-3xl 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-5 py-3">

package/app/components/humanTest/HumanTestWindow.vue

@@ -142,6 +142,8 @@ const canDestroy = computed(
     >
       <div
         class="m-4 flex w-full max-w-3xl 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-5 py-3">

package/app/components/layout/ConnectionStatusBanner.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+// A slim top strip shown when the real-time WebSocket has dropped and is reconnecting, so a
+// silently-frozen board (events stop arriving, nothing updates) is no longer indistinguishable
+// from an idle one. `useWorkspaceStream` already reconnects with exponential backoff and
+// resyncs on reconnect — this only makes that state visible. The `connected` ref is passed in
+// as a prop (the page owns the single stream instance; creating another here would open a
+// second socket).
+const props = defineProps<{ connected: boolean }>()
+
+const { t } = useI18n()
+
+// Only surface a RE-connection, never the initial connect: once we've been connected we know a
+// later drop is a real interruption worth flagging. A short debounce rides out a quick socket
+// flap so a momentary blip doesn't flash the strip.
+const everConnected = ref(false)
+const showAfterDelay = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(
+  () => props.connected,
+  (connected) => {
+    if (connected) {
+      everConnected.value = true
+      showAfterDelay.value = false
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      return
+    }
+    if (!everConnected.value || timer) return
+    timer = setTimeout(() => {
+      showAfterDelay.value = true
+      timer = null
+    }, 1500)
+  },
+  { immediate: true },
+)
+
+const visible = computed(() => everConnected.value && !props.connected && showAfterDelay.value)
+
+// Don't leave a pending debounce timer firing into a torn-down component.
+onBeforeUnmount(() => {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="visible"
+      class="pointer-events-none absolute inset-x-0 top-0 z-50 flex justify-center px-4 pt-2"
+    >
+      <div
+        class="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-500/60 bg-amber-950/90 px-3 py-1.5 text-xs text-amber-100 shadow-lg backdrop-blur"
+        role="status"
+        aria-live="polite"
+        data-testid="stream-reconnecting"
+      >
+        <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin" />
+        <span>{{ t('app.reconnecting') }}</span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/layout/NotificationsInbox.vue

@@ -16,6 +16,17 @@ const toast = useToast()
 
 const busy = ref<string | null>(null)
 
+/** Toast a failed act/dismiss — the store throws, so without this a failure was silent and the
+ * item just stayed in the inbox with no explanation. */
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
 /** Per-type display metadata (icon, colour). The primary-action label is resolved
  * separately through the i18n catalog (`ACTION_KEYS`). */
 type Accent = 'warning' | 'primary' | 'error'
@@ -98,6 +109,8 @@ async function act(n: Notification) {
       color: 'success',
       icon: 'i-lucide-check',
     })
+  } catch (e) {
+    notifyError(t('layout.notifications.toast.actFailed'), e)
   } finally {
     busy.value = null
   }
@@ -112,6 +125,8 @@ async function dismiss(n: Notification) {
       color: 'neutral',
       icon: 'i-lucide-check',
     })
+  } catch (e) {
+    notifyError(t('layout.notifications.toast.dismissFailed'), e)
   } finally {
     busy.value = null
   }

package/app/components/panels/GenericStructuredResultView.vue

@@ -60,6 +60,8 @@ const customJson = computed<string | null>(() => {
     >
       <div
         class="m-4 flex w-full max-w-4xl 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-5 py-3">

package/app/components/panels/InspectorPanel.vue

@@ -54,6 +54,21 @@ const block = computed<Block | undefined>(() =>
 )
 const level = computed(() => block.value?.level ?? 'frame')
 const isFrame = computed(() => level.value === 'frame')
+
+// The title to fall back to when the user clears the field and blurs. Editing the title binds
+// straight to the store object via v-model, so there is nothing to fall back to otherwise —
+// restore this rather than persisting (and showing) an empty title. It is captured fresh at
+// edit start (`captureTitle` on focus), so it always reflects the current known-good value —
+// robust against a failed save (which rolls the title back) and an external rename of the same
+// block. Seeded here on block switch so the fallback is sane even before the first focus.
+const lastSavedTitle = ref('')
+watch(
+  () => block.value?.id,
+  () => {
+    lastSavedTitle.value = block.value?.title ?? ''
+  },
+  { immediate: true },
+)
 const isContainer = computed(() => level.value === 'frame' || level.value === 'module')
 const isTask = computed(() => level.value === 'task')
 const isEpic = computed(() => level.value === 'epic')
@@ -103,11 +118,24 @@ const started = computed(
 )
 const editable = computed(() => !started.value)
 
+// Snapshot the current title as the fallback the moment editing begins, so it reflects the
+// last known-good value (survives a failed save or an external rename) rather than a value we
+// only optimistically assumed had persisted.
+function captureTitle() {
+  lastSavedTitle.value = block.value?.title ?? ''
+}
 function saveTitle() {
   const b = block.value
   if (!b) return
   const next = b.title.trim()
-  if (next) board.updateBlock(b.id, { title: next })
+  // An emptied title can't persist — restore the last saved value so the field never shows a
+  // blank the user didn't intend (and the board keeps a real label).
+  if (!next) {
+    b.title = lastSavedTitle.value
+    return
+  }
+  b.title = next
+  board.updateBlock(b.id, { title: next })
 }
 function saveDescription() {
   const b = block.value
@@ -253,6 +281,7 @@ const showOriginalDescription = ref(false)
           size="sm"
           class="w-full"
           :placeholder="t('panels.inspector.titlePlaceholder')"
+          @focus="captureTitle"
           @change="saveTitle"
           @blur="saveTitle"
         />

package/app/components/panels/MergerResultView.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+// Dedicated result view for a completed `merger` step. The merger agent scores the PR
+// (complexity / risk / impact + a rationale) and the engine records its structured
+// decision on the step (`step.custom`, a `MergeDecision`): whether it auto-merged or
+// routed the PR to a human, and WHY. This renders that verdict — the three scores as
+// bars against their preset ceilings, the rationale, and a plain-language decision
+// banner — instead of the agent's raw JSON. Opened via the universal result-view host,
+// the same seam the requirements / tester windows use.
+import { computed } from 'vue'
+import type { MergeAxis, MergeDecision } from '@cat-factory/contracts'
+import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+
+const board = useBoardStore()
+const execution = useExecutionStore()
+const agents = useAgentsStore()
+const { t, n } = useI18n()
+
+// Shared seam contract (open/blockId/close + Escape). No loader: the verdict is read
+// straight off the execution step.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('merger')
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+
+const instance = computed(() =>
+  instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
+)
+const step = computed(() => {
+  if (instance.value === null || stepIndex.value === null) return null
+  return instance.value.steps[stepIndex.value] ?? null
+})
+const meta = computed(() => (step.value ? agents.get(step.value.agentKind) : undefined))
+
+const headerLabel = computed(() => meta.value?.label ?? t('panels.mergerResult.title'))
+const headerTitle = computed(() =>
+  block.value
+    ? t('panels.mergerResult.titleWithBlock', { title: block.value.title })
+    : headerLabel.value,
+)
+
+/** The engine's structured verdict; null for a step that predates the structured decision. */
+const decision = computed<MergeDecision | null>(() => {
+  const custom = step.value?.custom
+  return custom && typeof custom === 'object' && 'outcome' in custom
+    ? (custom as MergeDecision)
+    : null
+})
+
+const merged = computed(() => decision.value?.outcome === 'auto_merged')
+// Only redden bars when a threshold breach is the ACTUAL reason for review. For
+// `auto_merge_disabled` / `no_rationale` / `no_assessment` a score above its ceiling is
+// incidental, so it must not imply the axis is what caused the review.
+const exceeded = computed(() =>
+  decision.value?.reason === 'exceeded_thresholds'
+    ? new Set<MergeAxis>(decision.value.exceededAxes)
+    : new Set<MergeAxis>(),
+)
+
+// Exhaustive enum → i18n-key maps keyed off the contract unions, so adding a new
+// `MergeDecision` reason/outcome (or a merge axis) fails typecheck here until its key is
+// added — the drift guard the dynamic `t(\`...\${x}\`)` lookups can't provide on their own.
+const REASON_KEYS: Record<MergeDecision['reason'], string> = {
+  within_thresholds: 'panels.mergerResult.reason.within_thresholds',
+  exceeded_thresholds: 'panels.mergerResult.reason.exceeded_thresholds',
+  auto_merge_disabled: 'panels.mergerResult.reason.auto_merge_disabled',
+  no_rationale: 'panels.mergerResult.reason.no_rationale',
+  no_assessment: 'panels.mergerResult.reason.no_assessment',
+  merge_failed: 'panels.mergerResult.reason.merge_failed',
+}
+const OUTCOME_KEYS: Record<MergeDecision['outcome'], string> = {
+  auto_merged: 'panels.mergerResult.outcome.auto_merged',
+  awaiting_review: 'panels.mergerResult.outcome.awaiting_review',
+}
+const AXIS_KEYS: Record<MergeAxis, string> = {
+  complexity: 'panels.mergerResult.axis.complexity',
+  risk: 'panels.mergerResult.axis.risk',
+  impact: 'panels.mergerResult.axis.impact',
+}
+
+const outcomeText = computed(() => (decision.value ? t(OUTCOME_KEYS[decision.value.outcome]) : ''))
+
+/** The three axes with their score + preset ceiling, for the bar rows. */
+const axes = computed(() => {
+  const d = decision.value
+  if (!d?.assessment) return []
+  return [
+    {
+      key: 'complexity' as const,
+      label: t(AXIS_KEYS.complexity),
+      score: d.assessment.complexity,
+      ceiling: d.thresholds.maxComplexity,
+    },
+    {
+      key: 'risk' as const,
+      label: t(AXIS_KEYS.risk),
+      score: d.assessment.risk,
+      ceiling: d.thresholds.maxRisk,
+    },
+    {
+      key: 'impact' as const,
+      label: t(AXIS_KEYS.impact),
+      score: d.assessment.impact,
+      ceiling: d.thresholds.maxImpact,
+    },
+  ]
+})
+
+/** The plain-language "why" line, interpolating the preset + any exceeded axes. */
+const reasonText = computed(() => {
+  const d = decision.value
+  if (!d) return ''
+  const axisLabels = d.exceededAxes.map((a) => t(AXIS_KEYS[a])).join(', ')
+  return t(REASON_KEYS[d.reason], {
+    preset: d.thresholds.presetName,
+    axes: axisLabels,
+  })
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div
+        class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+      >
+        <!-- Header -->
+        <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
+          <span
+            class="flex h-8 w-8 items-center justify-center rounded-lg bg-lime-500/15 text-lime-300"
+          >
+            <UIcon :name="meta?.icon ?? 'i-lucide-git-pull-request'" class="h-4 w-4" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-sm font-semibold text-slate-100">{{ headerTitle }}</h2>
+            <p class="truncate text-[11px] text-slate-400">
+              {{ t('panels.mergerResult.description') }}
+            </p>
+          </div>
+          <StepRestartControl
+            :instance-id="instanceId"
+            :step-index="stepIndex"
+            @restarted="close"
+          />
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            @click="close"
+          >
+            <UIcon name="i-lucide-x" class="h-4 w-4" />
+          </button>
+        </header>
+
+        <div class="flex min-h-0 flex-1">
+          <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
+            <template v-if="decision">
+              <!-- Decision banner: auto-merged (success) vs awaiting human review (warning). -->
+              <div
+                class="mb-4 flex items-start gap-3 rounded-lg border p-3"
+                :class="
+                  merged
+                    ? 'border-emerald-800/70 bg-emerald-500/10'
+                    : 'border-amber-800/70 bg-amber-500/10'
+                "
+                data-testid="merger-decision"
+                :data-outcome="decision.outcome"
+              >
+                <UIcon
+                  :name="merged ? 'i-lucide-git-merge' : 'i-lucide-user-round-check'"
+                  class="mt-0.5 h-5 w-5 shrink-0"
+                  :class="merged ? 'text-emerald-300' : 'text-amber-300'"
+                />
+                <div class="min-w-0">
+                  <p
+                    class="text-sm font-semibold"
+                    :class="merged ? 'text-emerald-200' : 'text-amber-200'"
+                  >
+                    {{ outcomeText }}
+                  </p>
+                  <p class="mt-0.5 text-[13px] leading-relaxed text-slate-300">{{ reasonText }}</p>
+                </div>
+              </div>
+
+              <!-- Scores vs the resolved preset's ceilings. -->
+              <template v-if="axes.length">
+                <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  {{ t('panels.mergerResult.scores') }}
+                </h3>
+                <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-950/40 p-3">
+                  <div v-for="axis in axes" :key="axis.key" class="flex items-center gap-2">
+                    <span class="w-20 shrink-0 text-xs text-slate-400">{{ axis.label }}</span>
+                    <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-800">
+                      <div
+                        class="h-full rounded-full"
+                        :class="exceeded.has(axis.key) ? 'bg-rose-500' : 'bg-emerald-500'"
+                        :style="{ width: `${Math.round(axis.score * 100)}%` }"
+                      />
+                    </div>
+                    <span
+                      class="w-11 shrink-0 text-end text-xs tabular-nums"
+                      :class="exceeded.has(axis.key) ? 'text-rose-300' : 'text-slate-300'"
+                    >
+                      {{ n(axis.score, { key: 'percent' }) }}
+                    </span>
+                    <span class="w-24 shrink-0 text-end text-[10px] tabular-nums text-slate-500">
+                      {{
+                        t('panels.mergerResult.ceiling', {
+                          value: n(axis.ceiling, { key: 'percent' }),
+                        })
+                      }}
+                    </span>
+                  </div>
+                </div>
+              </template>
+
+              <!-- The agent's prose justification. -->
+              <template v-if="decision.assessment?.rationale">
+                <h3
+                  class="mb-2 mt-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+                >
+                  {{ t('panels.mergerResult.rationale') }}
+                </h3>
+                <p class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
+                  {{ decision.assessment.rationale }}
+                </p>
+              </template>
+              <p v-else class="text-[13px] italic leading-relaxed text-slate-500">
+                {{ t('panels.mergerResult.noAssessment') }}
+              </p>
+            </template>
+
+            <!-- Pre-structured runs kept only the raw prose output. -->
+            <p
+              v-else-if="step?.output"
+              class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300"
+            >
+              {{ step.output }}
+            </p>
+            <div
+              v-else
+              class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+            >
+              <UIcon name="i-lucide-git-pull-request" class="h-8 w-8 opacity-40" />
+              <p class="text-sm">{{ t('panels.mergerResult.noResult') }}</p>
+            </div>
+          </div>
+
+          <!-- Sidebar: shared run metadata. -->
+          <aside
+            class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+          >
+            <StepRunMeta
+              v-if="step"
+              :step="step"
+              :instance-id="instanceId ?? undefined"
+              :step-number="stepIndex === null ? undefined : stepIndex + 1"
+              :total-steps="instance?.steps.length"
+              :run-failed="instance?.status === 'failed'"
+              :failure-at="instance?.failure?.occurredAt"
+            />
+          </aside>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/panels/StepResultViewHost.vue

@@ -22,6 +22,7 @@ import ConsensusSessionWindow from '~/components/consensus/ConsensusSessionWindo
 import GenericStructuredResultView from '~/components/panels/GenericStructuredResultView.vue'
 import ServiceSpecWindow from '~/components/spec/ServiceSpecWindow.vue'
 import FollowUpWindow from '~/components/followUp/FollowUpWindow.vue'
+import MergerResultView from '~/components/panels/MergerResultView.vue'
 
 const ui = useUiStore()
 
@@ -48,6 +49,9 @@ const STEP_RESULT_VIEWS: Record<string, Component> = {
   // The future-looking Follow-up companion: the Coder's surfaced loose ends / questions.
   // Opened directly via `ui.openFollowUps` (the blinking chip + the `followup_pending` card).
   'follow-ups': FollowUpWindow,
+  // The merger's verdict: the PR's complexity/risk/impact scores + the engine's auto-merge
+  // or awaiting-review decision (and why), instead of the agent's raw JSON.
+  merger: MergerResultView,
 }
 
 const active = computed<Component | null>(() => {