@cat-factory/app 0.237.0 → 0.238.0

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

@@ -32,7 +32,11 @@ const { lod } = useSemanticZoom()
 const { isTouch } = useViewport()
 
 const block = computed<Block | undefined>(() => board.getBlock(props.id))
-/** This service frame is mounted on more than one board in the org. */
+/**
+ * This service frame is mounted on more than one board in the org, which is a fact about the
+ * SERVICE that only its own card can state: nothing else on the board says the work lands in a
+ * repo another board also drives.
+ */
 const isShared = computed(() => services.isSharedFrame(props.id))
 const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
 
@@ -46,18 +50,7 @@ const taskCount = computed(() => allTasks.value.length)
 const hasTasks = computed(
   () => taskCount.value > 0 || modules.value.length > 0 || initiativeBlocks.value.length > 0,
 )
-// Single pass over the tasks for both rollups (vs. one filter each).
-const taskStats = computed(() => {
-  let merged = 0
-  let prReady = 0
-  for (const t of allTasks.value) {
-    if (t.status === 'done') merged++
-    else if (t.status === 'pr_ready') prReady++
-  }
-  return { merged, prReady }
-})
-const mergedTasks = computed(() => taskStats.value.merged)
-const prTasks = computed(() => taskStats.value.prReady)
+const prTasks = computed(() => allTasks.value.filter((t) => t.status === 'pr_ready').length)
 const canvas = computed(() => board.containerSize(props.id))
 
 // Frame status is derived from its tasks — services never reach "done".
@@ -92,11 +85,6 @@ const FRAME_STATUS_HINT_KEYS: Record<BlockStatus, string> = {
 const statusHint = computed(() => t(FRAME_STATUS_HINT_KEYS[frameStatus.value]))
 
 const selected = computed(() => ui.selectedBlockId === props.id)
-// Services are always expanded to their task canvas, at every zoom level: there is no
-// chip/compact collapse, so panning is a fixed layout and zooming has no expand/collapse
-// transition to snap on. The far-chip and compact-summary branches in the template are
-// kept (gated off) so the prior behaviour is one edit away if we want chips back.
-const showExpanded = computed(() => true)
 
 // Every child whose parked run the frame badge speaks for: its tasks AND its initiative
 // blocks. An initiative is a frame child like a module and runs an ordinary pipeline (its
@@ -144,10 +132,6 @@ function openFirstApproval() {
   if (a) ui.openApprovalDetail(a.instanceId, a.approval.id)
 }
 
-function toggleExpand() {
-  ui.toggleFrame(props.id)
-}
-
 // Expanded frames are not Vue Flow-draggable (so the pane can pan through them),
 // so they're repositioned by grabbing the header instead. The whole header bar is
 // the grab surface — only the action buttons (marked `.nodrag`) opt out, so a press
@@ -164,14 +148,12 @@ function onFrameHandle(e: PointerEvent) {
 const { enter: enterFrame, leave: leaveFrame } = useFrameStacking()
 
 function addTask() {
-  ui.expandFrame(props.id)
   ui.openAddTask(props.id)
 }
 
-// Open the tracker-issue modal scoped to THIS service: the create-in target and the
-// repo-scoped issue search are both pinned to this frame (see TaskImportModal).
+// Open the tracker-issue modal scoped to THIS service: the create-in target and the repo-scoped
+// issue search are narrowed to this frame and its modules (see `useContainerTargets`).
 function createTaskFromIssue() {
-  ui.expandFrame(props.id)
   ui.openTaskImport(null, props.id)
 }
 
@@ -182,12 +164,10 @@ function addRecurring() {
 // Hunt this service's tracker board for a bug worth picking up. Scoped to THIS frame, so
 // an adopted candidate lands here rather than wherever the board's first frame happens to be.
 function huntBugs() {
-  ui.expandFrame(props.id)
   ui.openBugHunt(null, props.id)
 }
 
 function createInitiative() {
-  ui.expandFrame(props.id)
   ui.openCreateInitiative(props.id)
 }
 
@@ -279,119 +259,13 @@ const ITEM_ICON: Record<string, string> = {
       />
     </div>
 
-    <!-- ===================== FAR: glanceable chip ===================== -->
-    <!-- Inert while services are always expanded (showExpanded is always true); the
-         compact branch below is reached via v-else-if and is likewise inert. -->
-    <div
-      v-if="!showExpanded && lod === 'far'"
-      class="flex w-44 items-center gap-2 rounded-xl border-2 px-3 py-3 shadow-lg backdrop-blur"
-      :class="[selected ? 'border-white' : '', pulseClass]"
-      :style="{ borderColor: accent, backgroundColor: accent + '26' }"
-    >
-      <span class="h-3 w-3 shrink-0 rounded-full" :style="{ backgroundColor: accent }" />
-      <span class="truncate text-sm font-semibold text-white">{{ block.title }}</span>
-      <UIcon
-        v-if="bootstrapping"
-        name="i-lucide-loader-circle"
-        class="ms-auto h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
-        :title="t('board.frame.bootstrapping')"
-      />
-      <UIcon
-        v-else-if="runFailed"
-        name="i-lucide-alert-triangle"
-        class="ms-auto h-3.5 w-3.5 shrink-0 text-rose-400"
-        :title="t('board.frame.runFailed')"
-      />
-      <span v-else-if="hasTasks" class="ms-auto shrink-0 text-[11px] text-slate-300">
-        {{ mergedTasks }}/{{ taskCount }}
-      </span>
-    </div>
-
-    <!-- ===================== COMPACT: summary (collapsed) ===================== -->
-    <div
-      v-else-if="!showExpanded"
-      class="w-56 overflow-hidden rounded-xl border bg-slate-900/90 shadow-xl backdrop-blur"
-      :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
-    >
-      <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"
-        data-testid="bootstrap-progress"
-      >
-        <div class="flex items-center gap-1.5 text-[11px]">
-          <UIcon
-            name="i-lucide-loader-circle"
-            class="h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
-          />
-          <span class="text-amber-300">{{ t('board.frame.bootstrapping') }}</span>
-          <span v-if="bootstrapSubtasks" class="ms-auto text-amber-200/80">
-            {{ bootstrapSubtasks.completed }}/{{ bootstrapSubtasks.total }}
-          </span>
-        </div>
-        <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-amber-900/40">
-          <div
-            class="h-full rounded bg-amber-400 transition-all"
-            :style="{ width: bootstrapPct + '%' }"
-          />
-        </div>
-        <div v-if="run" class="mt-2 flex justify-end">
-          <AgentStopButton :run-id="run.runId" :kind="run.kind" size="xs" variant="ghost" />
-        </div>
-      </div>
-      <!-- failed run: shared failure banner + retry -->
-      <div v-else-if="runFailed && run" class="p-2">
-        <AgentFailureCard :run="run" variant="compact" />
-      </div>
-      <div class="space-y-2 p-3">
-        <div class="flex items-center gap-2">
-          <UIcon
-            :name="typeMeta!.icon"
-            class="h-4 w-4 shrink-0"
-            :style="{ color: typeMeta!.accent }"
-          />
-          <span class="truncate text-sm font-semibold text-white">{{ block.title }}</span>
-          <UBadge
-            v-if="isShared"
-            color="info"
-            variant="subtle"
-            size="sm"
-            class="shrink-0"
-            :title="t('board.frame.sharedTitle')"
-          >
-            {{ t('board.frame.shared') }}
-          </UBadge>
-        </div>
-        <div class="flex items-center justify-between">
-          <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm" :title="statusHint">{{
-            statusLabel
-          }}</UBadge>
-          <span class="text-[11px] text-slate-400">{{
-            t('board.frame.taskCount', { count: taskCount }, taskCount)
-          }}</span>
-        </div>
-        <button
-          type="button"
-          class="nodrag flex w-full items-center gap-1 rounded-md bg-slate-800/60 px-2 py-1 text-[10px] text-slate-300 hover:bg-slate-800"
-          @click.stop="toggleExpand"
-        >
-          <UIcon name="i-lucide-layers" class="h-3 w-3 text-slate-400" />
-          <span v-if="hasTasks">{{
-            t('board.frame.mergedOfTotal', { merged: mergedTasks, total: taskCount })
-          }}</span>
-          <span v-else>{{ t('board.frame.noTasksYet') }}</span>
-          <span v-if="prTasks" class="text-emerald-400"
-            >· {{ t('board.frame.prCount', { count: prTasks }) }}</span
-          >
-          <UIcon name="i-lucide-chevron-down" class="ms-auto h-3 w-3" />
-        </button>
-      </div>
-    </div>
-
-    <!-- ===================== EXPANDED: 2D canvas of tasks + modules ===================== -->
+    <!-- ===================== The service card: 2D canvas of tasks + modules =====================
+         There is no chip or compact variant: a service is always expanded to its task canvas, at
+         every zoom level, so panning is a fixed layout and zooming has no expand/collapse
+         transition to snap on. The two gated-off branches that used to sit here (a far-zoom chip
+         and a collapsed summary) went with the header's collapse control, since between them they
+         held the only render of the "Shared" badge, which now lives in the header below. -->
     <div
-      v-else
       class="relative overflow-visible rounded-2xl border bg-slate-900/95 shadow-2xl backdrop-blur"
       :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
     >
@@ -484,7 +358,23 @@ const ITEM_ICON: Record<string, string> = {
                 />
               </div>
               <div>
-                <div class="text-sm font-semibold text-white">{{ block.title }}</div>
+                <div class="flex items-center gap-1.5">
+                  <span class="text-sm font-semibold text-white">{{ block.title }}</span>
+                  <!-- Mounted on more than one board in the org. On the title row rather than in
+                       the action strip, because it qualifies the service's NAME: the work lands in
+                       a repo another board also drives. -->
+                  <UBadge
+                    v-if="isShared"
+                    color="info"
+                    variant="subtle"
+                    size="sm"
+                    class="shrink-0"
+                    data-testid="frame-shared"
+                    :title="t('board.frame.sharedTitle')"
+                  >
+                    {{ t('board.frame.shared') }}
+                  </UBadge>
+                </div>
                 <div class="text-[11px] text-slate-400">{{ typeMeta!.label }}</div>
               </div>
             </div>
@@ -497,8 +387,8 @@ const ITEM_ICON: Record<string, string> = {
                 >{{ statusLabel }}</UBadge
               >
               <!-- Board-authoring buttons (create task / from issue / recurring / initiative)
-                   are `board.write` — hidden for a read-only viewer, who keeps the badge +
-                   collapse toggle (view-only affordances). -->
+                   are `board.write`, hidden for a read-only viewer, who keeps the status badge
+                   (the one view-only affordance here). -->
               <template v-if="access.canWriteBoard.value">
                 <UButton
                   class="nodrag"
@@ -562,15 +452,6 @@ const ITEM_ICON: Record<string, string> = {
                   @click.stop="huntBugs"
                 />
               </template>
-              <UButton
-                class="nodrag"
-                :size="isTouch ? 'sm' : 'xs'"
-                variant="ghost"
-                color="neutral"
-                icon="i-lucide-chevron-up"
-                :title="t('board.frame.collapseTitle')"
-                @click.stop="toggleExpand"
-              />
             </div>
           </div>
 

package/app/components/context/ContextAttachmentFields.vue

@@ -15,6 +15,7 @@
 // itself gated on `integrations.manage` for documents, whose ATTACH writes are member-tier while
 // storing the credential is not.
 import type { PendingContext } from '~/composables/useContextLinking'
+import { connectableSources } from '~/utils/sourcePicker'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 
@@ -48,15 +49,16 @@ const issuesConnected = computed(() => tasks.available && tasks.anyOffered)
 // connected via the App, so they never appear here); for issues, every configured tracker not yet
 // available. The connect modals are the same ones the Integrations hub opens.
 //
-// The document half is additionally empty for anyone without `integrations.manage`: connecting
-// stores a workspace credential and stays admin-tier, while attaching a document moved to the
-// member tier, so a member falls through to the disabled Attach button instead of a connect
-// action that opens a modal, takes a token and 403s.
+// The document half goes through the shared `connectableSources`, the ONE answer to "which document
+// sources could I connect", which the picker's own add tier reads too: as three near-copies these
+// disagreed about whether an unavailable integration counted.
 const { canManageIntegrations } = useWorkspaceAccess()
 const connectableDocSources = computed(() =>
-  documents.available && canManageIntegrations.value
-    ? documents.sources.filter((s) => !documents.isConnected(s.source))
-    : [],
+  connectableSources(documents.sources, {
+    isConnected: documents.isConnected,
+    canConnect: canManageIntegrations.value,
+    available: documents.available,
+  }),
 )
 const connectableIssueSources = computed(() =>
   tasks.available ? tasks.sources.filter((s) => !s.available) : [],

package/app/components/documents/ContextDocumentPicker.vue

@@ -9,6 +9,12 @@
 // useContextLinking). A search hit / pasted ref carries `needsImport: true` so
 // it's fetched + persisted before linking. Mirrors ContextIssuePicker.
 //
+// The source being searched is ALWAYS on screen (even when the workspace has exactly one, and
+// even when it has none), and its menu doubles as the "add a source" affordance: which source is
+// selected decides what a pasted ref resolves to and which repository a file pick browses, and
+// attaching context is where a missing integration is discovered. Connecting opens that source's
+// connect modal OVER the caller's form rather than navigating away from it.
+//
 // A PASTED REF IS RESOLVED BEFORE IT CAN BE STAGED, and that is the point of the ref
 // half of this picker. It used to stage whatever text was in the box, so a share link
 // carrying a title segment and `?p=`/`&t=` tracking params (what Figma's own Copy link
@@ -26,6 +32,7 @@
 // stageable with the import as the backstop, because only the source's own refusal is evidence
 // against a link. An outage that made attaching impossible would be a worse failure than the
 // one the pre-flight fixes.
+import { useId } from 'vue'
 import type { DocumentRefReason, DocumentSearchResult, DocumentSourceKind } from '~/types/domain'
 import {
   classifyRefFailure,
@@ -35,6 +42,13 @@ import {
 } from '~/components/documents/ContextDocumentPicker.logic'
 import EmptyState from '~/components/common/EmptyState.vue'
 import RepoContextDocPicker from '~/components/documents/RepoContextDocPicker.vue'
+import {
+  type AddSourceLabels,
+  buildConnectionSourceChoices,
+  menuIsPickable,
+  reconcileSource,
+  sourceMenuItems,
+} from '~/utils/sourcePicker'
 
 // Repo-backed document sources pick a FILE out of a repository (repo search → file
 // search / tree browse) instead of the generic free-text catalogue search. Today only
@@ -49,18 +63,80 @@ const emit = defineEmits<{ pick: [item: PendingContext] }>()
 
 const { t } = useI18n()
 const documents = useDocumentsStore()
+const ui = useUiStore()
+// Connecting a source stores a workspace credential and is admin-tier, while attaching what it
+// holds is member-tier, so the menu's "add a source" tier is withheld from a member rather than
+// offering a connect that would 403 (see `connectableSources`). The tier also decides which empty
+// state a reader gets, because "connect one" is not advice you can act on without it.
+const { canManageIntegrations } = useWorkspaceAccess()
 
 const chosen = computed(() => new Set(props.chosenKeys ?? []))
 
-// Source: default to the first connected source; a selector appears only when
-// more than one is connected (the common case is a single source).
+// Source: default to the first connected source. The selector is always rendered, single source
+// or not: which source is being searched decides what a pasted ref resolves to, so it must never
+// be invisible.
 const source = ref<DocumentSourceKind | undefined>(documents.connectedSources[0]?.source)
-const sourceItems = computed(() =>
-  documents.connectedSources.map((s) => ({ label: s.label, value: s.source })),
-)
 const descriptor = computed(() =>
   source.value ? documents.descriptorFor(source.value) : undefined,
 )
+
+// The source the user left to connect, so it becomes the selection the moment it turns up
+// connected (the connect modal re-probes on success). Also the reconcile trigger for a source
+// that stops being connected while the caller's form sat open.
+const awaitingConnect = ref<DocumentSourceKind | null>(null)
+function addSource(s: DocumentSourceKind) {
+  awaitingConnect.value = s
+  ui.openDocumentConnect(s)
+}
+watch(
+  () => documents.connectedSources.map((s) => s.source),
+  (connected) => {
+    const next = reconcileSource(connected, source.value, awaitingConnect.value)
+    if (next && next === awaitingConnect.value) awaitingConnect.value = null
+    if (next !== source.value) source.value = next
+  },
+)
+
+// Two-tier menu: pick a connected source, or connect one the workspace hasn't got yet. A document
+// source carries no per-workspace enable toggle, so `connect` is the ONLY add wording it can need,
+// and `buildConnectionSourceChoices` makes that a fact about the type rather than about this call
+// site: a source that one day gains a toggle fails the typecheck here instead of rendering
+// "Connect X" over something already connected.
+const sourceChoices = computed(() =>
+  buildConnectionSourceChoices(documents.sources, {
+    isConnected: documents.isConnected,
+    canConnect: canManageIntegrations.value,
+    available: documents.available,
+    selected: source.value,
+  }),
+)
+const ADD_LABEL: AddSourceLabels<'connect'> = {
+  connect: (label) => t('documents.picker.connectSource', { label }),
+}
+const sourceMenu = computed(() =>
+  sourceMenuItems(sourceChoices.value, {
+    onSelect: (s) => {
+      source.value = s
+    },
+    onAdd: addSource,
+    addLabel: ADD_LABEL,
+  }),
+)
+
+/**
+ * Whether the selector is a CONTROL or just a name. A member's add tier is withheld, so on the
+ * common deployment (GitHub docs implicitly connected, nothing else) their menu holds one entry
+ * that re-selects what is already selected: a chevron promising a choice that isn't there, which is
+ * the same papercut the always-visible selector was meant to remove. The source is still named,
+ * which was the point.
+ */
+const sourcePickable = computed(() => menuIsPickable(sourceChoices.value))
+
+// The trigger's own content is the source NAME, so the visible "Source" caption is joined to it as
+// the accessible name ("Source Confluence"). Per instance: the add-task form and the inspector can
+// both have a picker mounted, and a hard-coded id would make one claim the other's caption.
+const sourceLabelId = useId()
+const sourceTriggerId = useId()
 const searchable = computed(() => descriptor.value?.searchable ?? false)
 // A repo-backed source swaps the whole free-text search body for the repo→file picker.
 const isRepoSource = computed(() => !!source.value && REPO_SOURCES.has(source.value))
@@ -340,17 +416,59 @@ onMounted(() => {
 
 <template>
   <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2">
-    <USelect
-      v-if="sourceItems.length > 1"
-      v-model="source"
-      :items="sourceItems"
-      size="xs"
-      class="w-full"
+    <!-- Which source is being searched, always visible, plus the sources the user could add from
+         here (each opens the connect modal over the caller's form). Rendered as plain text when
+         there is nothing to decide, which for a member is the usual case. -->
+    <div class="flex items-center gap-1.5">
+      <span
+        :id="sourceLabelId"
+        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+      >
+        {{ t('documents.picker.sourceLabel') }}
+      </span>
+      <UDropdownMenu
+        v-if="sourcePickable"
+        :items="sourceMenu"
+        :content="{ side: 'bottom', align: 'start' }"
+      >
+        <UButton
+          :id="sourceTriggerId"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          :icon="icon"
+          trailing-icon="i-lucide-chevron-down"
+          class="max-w-full"
+          :aria-labelledby="`${sourceLabelId} ${sourceTriggerId}`"
+        >
+          <span class="truncate">{{ descriptor?.label ?? t('documents.picker.noSource') }}</span>
+        </UButton>
+      </UDropdownMenu>
+      <span v-else class="flex min-w-0 items-center gap-1 text-xs text-slate-300">
+        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0" />
+        <span class="truncate">{{ descriptor?.label ?? t('documents.picker.noSource') }}</span>
+      </span>
+    </div>
+
+    <!-- No source selected: nothing is connected (or the last one was disconnected while this sat
+         open), so say so rather than render a search box that can only fail. WHICH sentence depends
+         on who is reading: the admin tier is told to connect one, because the menu above is the
+         route; a member has no add tier (see `connectableSources`), so telling them to connect a
+         source would name an action their own menu withholds. -->
+    <EmptyState
+      v-if="!source"
+      compact
+      icon="i-lucide-plug"
+      :title="
+        canManageIntegrations
+          ? t('documents.picker.needsSource')
+          : t('documents.picker.needsSourceAdmin')
+      "
     />
 
     <!-- Repo-backed source (GitHub / GitLab): pick a repository, then a file. -->
     <RepoContextDocPicker
-      v-if="isRepoSource && source"
+      v-else-if="isRepoSource"
       :source="source!"
       :icon="icon"
       :chosen-keys="chosenKeys"

package/app/components/documents/TaskContextDocs.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
+import { connectableSources } from '~/utils/sourcePicker'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
@@ -52,21 +53,22 @@ const chosenKeys = computed(() =>
 )
 
 const connected = computed(() => documents.available && documents.anyConnected)
-// Sources the user could connect right now to unlock the picker, when none is
-// connected yet (GitHub docs are implicitly connected via the App, so never here).
-//
-// Empty for anyone without `integrations.manage`, because connecting stores a workspace
-// credential and stays admin-tier while ATTACHING moved to the member tier. Offering the
-// action to a member was a dead end: the connect modal opened, took a token, and 403'd.
-// Attaching is unaffected, which is the point of the split.
+// Sources the user could connect right now to unlock the picker, when none is connected yet (GitHub
+// docs are implicitly connected via the App, so never here). Through the shared
+// `connectableSources`, which owns both terms: an integration the deployment has not configured has
+// nothing to connect to, and connecting stores a workspace credential, which stays admin-tier while
+// ATTACHING moved to the member tier. Offering the action to a member was a dead end (the connect
+// modal opened, took a token, and 403'd); attaching is unaffected, which is the point of the split.
 const { canManageIntegrations } = useWorkspaceAccess()
-const connectableSources = computed(() =>
-  documents.available && canManageIntegrations.value
-    ? documents.sources.filter((s) => !documents.isConnected(s.source))
-    : [],
+const connectable = computed(() =>
+  connectableSources(documents.sources, {
+    isConnected: documents.isConnected,
+    canConnect: canManageIntegrations.value,
+    available: documents.available,
+  }),
 )
 const connectMenu = computed<DropdownMenuItem[][]>(() => [
-  connectableSources.value.map((s) => ({
+  connectable.value.map((s) => ({
     label: s.label,
     icon: s.icon,
     onSelect: () => ui.openDocumentConnect(s.source),
@@ -111,7 +113,7 @@ async function attach(item: PendingContext) {
         {{ showPicker ? t('common.done') : t('documents.taskDocs.attach') }}
       </UButton>
       <UDropdownMenu
-        v-else-if="connectableSources.length > 1"
+        v-else-if="connectable.length > 1"
         :items="connectMenu"
         :content="{ side: 'bottom', align: 'end' }"
       >
@@ -120,14 +122,14 @@ async function attach(item: PendingContext) {
         </UButton>
       </UDropdownMenu>
       <UButton
-        v-else-if="connectableSources.length === 1"
+        v-else-if="connectable.length === 1"
         color="neutral"
         variant="soft"
         size="xs"
         icon="i-lucide-plug"
-        @click="ui.openDocumentConnect(connectableSources[0]!.source)"
+        @click="ui.openDocumentConnect(connectable[0]!.source)"
       >
-        {{ t('documents.taskDocs.connectSourceNamed', { source: connectableSources[0]!.label }) }}
+        {{ t('documents.taskDocs.connectSourceNamed', { source: connectable[0]!.label }) }}
       </UButton>
     </template>
 

package/app/components/panels/AgentStepDetail.vue

@@ -7,6 +7,7 @@ import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepMetadataCard from '~/components/panels/StepMetadataCard.vue'
 import StepTestReport from '~/components/panels/StepTestReport.vue'
 import StepEffortReport from '~/components/panels/StepEffortReport.vue'
+import StepToolServers from '~/components/panels/StepToolServers.vue'
 import StepReproductionReport from '~/components/panels/StepReproductionReport.vue'
 import StepFragmentAdherence from '~/components/panels/StepFragmentAdherence.vue'
 import BinaryOutputReport from '~/components/binaryOutput/BinaryOutputReport.vue'
@@ -613,6 +614,16 @@ async function copyOutput() {
                    effectiveness, key obstacles). Only when the agent reported one. -->
               <StepEffortReport v-if="step.effortReport" :report="step.effortReport" />
 
+              <!-- the tool servers (MCP) this dispatch wired, and the ones it dropped with the
+                   reason. Only on a container step, and self-hiding when the record holds
+                   nothing: a recorded pair of empty lists is a kind that declared none, which is
+                   every step on a deployment that registers no tool servers at all. -->
+              <StepToolServers
+                v-if="step.toolServers"
+                :tool-servers="step.toolServers"
+                :step-agent-kind="step.agentKind"
+              />
+
               <!-- the bugfix REPRODUCTION PROOF: the declared reproducing check run against the
                    pre-fix tree and the final one, with both captured outputs, or the agent's
                    structural declaration that the bug cannot be reproduced. This panel is the

package/app/components/panels/StepToolServers.logic.spec.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest'
+import { KNOWN_REASONS, REASON_KEY, reasonText } from './StepToolServers.logic'
+import type { ToolServerUnavailableReason } from '~/types/toolServers'
+
+/**
+ * A dropped tool server is the whole point of this surface: until it existed, a run that quietly
+ * went without its issue tracker was stated only in the agent's own prompt and one backend warn
+ * line. These pin the two ways that could regress: a reason with no copy, and a reason this build
+ * does not know rendering as nothing at all.
+ */
+describe('tool-server unavailability reasons', () => {
+  it('gives every reason in the wire vocabulary its own copy', () => {
+    // Derived from the schema the backend decides against, not from a list retyped here: a member
+    // added on the backend then fails THIS assertion instead of shipping as a blank chip.
+    expect(Object.keys(REASON_KEY).sort()).toEqual([...KNOWN_REASONS].sort())
+  })
+
+  it('never points two reasons at one line', () => {
+    // Each member names a different fix (a variable to set, a declaration to change, a person to
+    // press Connect), so two sharing copy would send an operator to the wrong place.
+    const keys = Object.values(REASON_KEY)
+    expect(new Set(keys).size).toBe(keys.length)
+  })
+
+  it('renders a retired reason as unknown, naming the raw code', () => {
+    // The vocabulary is persisted on a run, so a step recorded under a member since retired reads
+    // back with that member. Dropping it would report a withheld tool as one never declared.
+    expect(render('legacy_reason')).toEqual([
+      {
+        key: 'panels.stepDetail.toolServers.reason.unknown',
+        params: { reason: 'legacy_reason' },
+      },
+    ])
+  })
+
+  it('takes the same path for a reason that names an Object.prototype member', () => {
+    // The mapping is an ordinary object literal, so `REASON_KEY['constructor']` reads back a
+    // truthy inherited function. A truthiness check on the lookup would hand THAT to `t` as a
+    // translation key, taking the retired-member path away from the one input shape most likely
+    // to reach it from a hand-edited or corrupted row.
+    for (const inherited of ['constructor', 'toString', 'hasOwnProperty', '__proto__']) {
+      expect(render(inherited)).toEqual([
+        {
+          key: 'panels.stepDetail.toolServers.reason.unknown',
+          params: { reason: inherited },
+        },
+      ])
+    }
+  })
+})
+
+/** Every `t` call `reasonText` made, so the assertion is about the key it CHOSE, not the copy. */
+function render(reason: string): { key: string; params?: Record<string, unknown> }[] {
+  const seen: { key: string; params?: Record<string, unknown> }[] = []
+  reasonText(reason as ToolServerUnavailableReason, (key, params) => {
+    seen.push({ key, ...(params ? { params } : {}) })
+    return key
+  })
+  return seen
+}