@cat-factory/app 0.237.0 → 0.238.0

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

@@ -0,0 +1,58 @@
+import { toolServerUnavailableReasonSchema } from '@cat-factory/contracts'
+import type { ToolServerUnavailableReason } from '~/types/toolServers'
+
+// The step surface's tool-server (MCP) reason mapping. Kept out of the SFC on the same seam as
+// `StepTestReport.logic.ts`, so the vocabulary rule can be asserted without mounting a component.
+//
+// The rule: a dropped tool server is reported with the reason it was dropped for, and a reason
+// this build does not recognise is rendered as unknown rather than dropped or folded onto a
+// neighbour. The vocabulary is CLOSED and PERSISTED on a run, so a step recorded before a member
+// was retired still carries that member, and a chip that silently vanished would report a
+// withheld capability as one that was never declared, which is the confusion this surface exists
+// to end.
+
+/**
+ * The i18n key per reason. An exhaustive `Record` rather than a lookup with a default, so a member
+ * added to the wire vocabulary fails to compile here instead of rendering as a blank chip.
+ */
+export const REASON_KEY: Record<ToolServerUnavailableReason, string> = {
+  harness_unsupported: 'panels.stepDetail.toolServers.reason.harnessUnsupported',
+  transport_unsupported: 'panels.stepDetail.toolServers.reason.transportUnsupported',
+  missing_secret: 'panels.stepDetail.toolServers.reason.missingSecret',
+  reserved_secret: 'panels.stepDetail.toolServers.reason.reservedSecret',
+  oauth_not_connected: 'panels.stepDetail.toolServers.reason.oauthNotConnected',
+  oauth_token_failed: 'panels.stepDetail.toolServers.reason.oauthTokenFailed',
+  over_budget: 'panels.stepDetail.toolServers.reason.overBudget',
+}
+
+/** The reason vocabulary as the SCHEMA states it: what a parity assertion grades {@link REASON_KEY} against. */
+export const KNOWN_REASONS = toolServerUnavailableReasonSchema.options
+
+/**
+ * Whether a persisted reason is a member THIS build knows, derived from the picklist's own options
+ * rather than from a list retyped here.
+ *
+ * A predicate rather than a truthiness check on the lookup, because `REASON_KEY` is an ordinary
+ * object literal: a persisted value that happens to name an inherited `Object.prototype` member
+ * (`constructor`, `toString`) reads back as a truthy non-key and would be handed to `t` as though
+ * it were a translation key, taking the retired-member path away from exactly the case it exists
+ * for. Narrowing at the boundary keeps the exhaustive `Record` compile-time guard intact.
+ */
+export function isKnownReason(reason: string): reason is ToolServerUnavailableReason {
+  return (KNOWN_REASONS as readonly string[]).includes(reason)
+}
+
+/**
+ * Render one reason, falling back to the retired-member line that names the raw code.
+ *
+ * `t` is passed in rather than composed here so this stays a pure function: the component owns the
+ * i18n instance, and the fallback branch is the one worth testing without one.
+ */
+export function reasonText(
+  reason: ToolServerUnavailableReason,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
+  return isKnownReason(reason)
+    ? t(REASON_KEY[reason])
+    : t('panels.stepDetail.toolServers.reason.unknown', { reason })
+}

package/app/components/panels/StepToolServers.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// The tool servers (MCP) one dispatch gave its agent, and the ones it declared and dropped.
+// Recorded on the step at dispatch (`step.toolServers`).
+//
+// The unavailable half is the reason this exists. A dropped server was, until now, stated in the
+// agent's own prompt and in one backend warn line, and nowhere a person looks: a run that quietly
+// went without its issue tracker read as a run whose agent simply did not use it. So an
+// unavailable server is a chip of its own with its own translated reason, never a shorter list of
+// the wired ones: "absent" and "zero" must not render the same.
+//
+// SELF-HIDING when the record holds nothing, like the sibling panels around it. The record is
+// written on EVERY container dispatch, so both lists empty is the state of every step on every
+// deployment that registers no tool servers at all — the overwhelming default. That state is a
+// fact about the DECLARATION rather than about this run (the dispatched kind declares none), and
+// the Infrastructure window is where declarations are read; rendering it here would put an empty
+// section on every step of every run to say nothing happened. The distinction absent-vs-empty is
+// still carried on the wire and answered by the debug API, which is where a reader asking it looks.
+import type { StepToolServers, ToolServerUnavailableReason } from '~/types/toolServers'
+import { reasonText } from '~/components/panels/StepToolServers.logic'
+import { agentKindMeta } from '~/utils/catalog'
+
+const props = defineProps<{
+  toolServers: StepToolServers
+  /**
+   * The kind the STEP is named for. The record carries the kind that was DISPATCHED, and the two
+   * differ whenever a helper ran on this step (a gate escalating to `ci-fixer`, the tester handing
+   * off to `fixer`, a fork's second phase). Each of those resolves its own kind's declarations and
+   * overwrites the record, so the surface names whose capabilities these are instead of letting
+   * them read as the step's.
+   */
+  stepAgentKind: string
+}>()
+
+const { t } = useI18n()
+
+const hasAny = computed(
+  () => props.toolServers.wired.length > 0 || props.toolServers.unavailable.length > 0,
+)
+
+/** Set only when a helper re-dispatch owns this record, so the ordinary case renders no extra line. */
+const dispatchedAs = computed(() =>
+  props.toolServers.agentKind && props.toolServers.agentKind !== props.stepAgentKind
+    ? agentKindMeta(props.toolServers.agentKind).label
+    : null,
+)
+
+/** Bind this component's i18n instance onto the pure mapping (see `StepToolServers.logic.ts`). */
+const describeReason = (reason: ToolServerUnavailableReason) =>
+  reasonText(reason, (key, params) => t(key, params ?? {}))
+</script>
+
+<template>
+  <section
+    v-if="hasAny"
+    data-testid="step-tool-servers"
+    class="scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+  >
+    <div
+      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+    >
+      <UIcon name="i-lucide-plug" class="h-3.5 w-3.5" />
+      <span>{{ t('panels.stepDetail.toolServers.heading') }}</span>
+    </div>
+
+    <p
+      v-if="dispatchedAs"
+      data-testid="step-tool-servers-dispatched-as"
+      class="mb-2 text-[12px] text-slate-400"
+    >
+      {{ t('panels.stepDetail.toolServers.dispatchedAs', { agent: dispatchedAs }) }}
+    </p>
+
+    <ul v-if="toolServers.wired.length" class="flex flex-wrap gap-1.5">
+      <li
+        v-for="server in toolServers.wired"
+        :key="server.id"
+        data-testid="step-tool-server-wired"
+        class="inline-flex items-center gap-1.5 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[12px] text-emerald-200"
+        :title="
+          server.tools?.length
+            ? t('panels.stepDetail.toolServers.narrowed', { tools: server.tools.join(', ') })
+            : t('panels.stepDetail.toolServers.allTools')
+        "
+      >
+        <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
+        <span>{{ server.label || server.id }}</span>
+      </li>
+    </ul>
+
+    <ul v-if="toolServers.unavailable.length" class="mt-2 space-y-1">
+      <li
+        v-for="server in toolServers.unavailable"
+        :key="server.id"
+        data-testid="step-tool-server-unavailable"
+        class="flex items-start gap-1.5 text-[12px] text-slate-300"
+      >
+        <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400/80" />
+        <span>
+          <span class="font-medium text-slate-200">{{ server.label || server.id }}</span>
+          <span class="text-slate-400"> {{ describeReason(server.reason) }}</span>
+        </span>
+      </li>
+    </ul>
+  </section>
+</template>

package/app/components/tasks/BugHuntModal.vue

@@ -8,15 +8,18 @@
 //
 // Two states this deliberately renders rather than hides: a board whose ranking was
 // unavailable or failed still shows its candidates (flagged as unassessed, since the scan is
-// useful on its own), and a scan that hit its cap says so — a silently shortened list reads
-// exactly like an exhaustive one.
+// useful on its own), and a scan that hit its cap says so, because a silently shortened list
+// reads exactly like an exhaustive one.
 //
 // The tracker selector doubles as the "add a tracker" affordance (the same two-tier menu
-// `<ContextIssuePicker>` renders, off the shared `buildSourceChoices`): a hunt is a common
-// place to find out the tracker holding the bugs isn't connected here yet, and the answer
-// has to be a route to that tracker's own connect screen rather than "go find the
+// `<ContextIssuePicker>` renders, off the shared `buildSourceChoices` + `sourceMenuItems`): a hunt
+// is a common place to find out the tracker holding the bugs isn't connected here yet, and the
+// answer has to be a route to that tracker's own connect screen rather than "go find the
 // Integrations hub". The connect modal opens OVER the hunt, so nothing typed here is lost.
-import type { DropdownMenuItem } from '@nuxt/ui'
+//
+// Where an adopted bug lands comes from `useContainerTargets`, shared with `<TaskImportModal>`:
+// both are opened from the same frame-header buttons with the same payload, so the frame either
+// answers "which service" for both or for neither.
 import type { TaskSourceReadReason } from '@cat-factory/contracts'
 import type {
   BugHuntAnalysisStatus,
@@ -24,13 +27,19 @@ import type {
   BugHuntConfidence,
   TaskSourceKind,
 } from '~/types/domain'
-import { type SourceChoice, buildSourceChoices, reconcileSource } from '~/utils/taskSources'
+import {
+  type AddSourceLabels,
+  addChoicesOf,
+  buildSourceChoices,
+  menuIsPickable,
+  reconcileSource,
+  sourceMenuItems,
+} from '~/utils/sourcePicker'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const { t, d, n } = useI18n()
 const ui = useUiStore()
 const tasks = useTasksStore()
-const board = useBoardStore()
 const hunt = useBugHuntStore()
 const toast = useToast()
 
@@ -46,61 +55,44 @@ const source = ref<TaskSourceKind | undefined>(undefined)
 const boardId = ref('')
 const issueType = ref('')
 const labels = ref('')
-const containerId = ref<string | undefined>(undefined)
-
-// Containers an adopted bug can land in: every service frame and module on the board. Modules
-// are labelled with their parent frame so the choice is unambiguous (same as the import modal).
-const containerItems = computed(() =>
-  board.blocks
-    .filter((b) => b.level === 'frame' || b.level === 'module')
-    .map((b) => ({
-      label:
-        b.level === 'module'
-          ? `${board.getBlock(b.parentId ?? '')?.title ?? '?'} › ${b.title}`
-          : b.title,
-      value: b.id,
-    })),
-)
+// Where an adopted bug lands. Stated rather than asked when the frame the hunt was opened from is
+// the only legal target; re-resolved through the board, so a frame deleted mid-hunt widens back.
+const {
+  pinned: pinnedContainer,
+  items: containerItems,
+  containerId,
+  stated: containerStated,
+  reset: resetContainer,
+} = useContainerTargets(() => ui.bugHunt?.containerId)
 
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 
+/**
+ * Wording for an addable tracker, as an exhaustive map over the add actions a TRACKER menu can
+ * carry: `enable` is connected but toggled off for this workspace, so the user is never told to
+ * "connect" something they already connected.
+ */
+const ADD_LABEL: AddSourceLabels<'connect' | 'enable'> = {
+  connect: (label) => t('bugHunt.connectSource', { label }),
+  enable: (label) => t('bugHunt.enableSource', { label }),
+}
+
 // Two-tier tracker menu: pick one the workspace already offers, or add one it doesn't.
 const sourceChoices = computed(() => buildSourceChoices(tasks.sources, source.value))
-const sourceMenu = computed<DropdownMenuItem[][]>(() =>
-  sourceChoices.value.map((group) =>
-    group.map((choice) =>
-      choice.action === 'select'
-        ? {
-            label: choice.label,
-            icon: choice.icon,
-            trailingIcon: choice.active ? 'i-lucide-check' : undefined,
-            onSelect: () => {
-              source.value = choice.source
-            },
-          }
-        : {
-            label: addLabel(choice),
-            icon: 'i-lucide-plug',
-            onSelect: () => addSource(choice.source),
-          },
-    ),
-  ),
+const sourceMenu = computed(() =>
+  sourceMenuItems(sourceChoices.value, {
+    onSelect: (s) => {
+      source.value = s
+    },
+    onAdd: addSource,
+    addLabel: ADD_LABEL,
+  }),
 )
+/** One entry decides nothing, so the tracker is named as a label rather than as a dead control. */
+const sourcePickable = computed(() => menuIsPickable(sourceChoices.value))
 
-/** The trackers that can be added — the empty state's buttons, where none is offered yet. */
-const addableSources = computed(() =>
-  sourceChoices.value.flat().filter((c) => c.action !== 'select'),
-)
-
-/**
- * Wording for an addable tracker: `enable` is connected but toggled off for this workspace,
- * so the user is never told to "connect" something they already connected.
- */
-function addLabel(choice: SourceChoice): string {
-  return choice.action === 'enable'
-    ? t('bugHunt.enableSource', { label: choice.label })
-    : t('bugHunt.connectSource', { label: choice.label })
-}
+/** The trackers that can be added: the empty state's buttons, where none is offered yet. */
+const addableSources = computed(() => addChoicesOf(sourceChoices.value))
 
 /**
  * The tracker the user left to add, so it becomes the selection the moment it turns up
@@ -166,11 +158,11 @@ watch(open, (isOpen) => {
   labels.value = ''
   awaitingConnect.value = null
   source.value = ui.bugHunt?.source ?? tasks.offeredSources[0]?.source ?? undefined
-  containerId.value = ui.bugHunt?.containerId ?? containerItems.value[0]?.value
+  resetContainer()
   if (source.value) hunt.loadBoards(source.value)
 })
 
-// Switching tracker invalidates both the board list and any ranking already on screen — the
+// Switching tracker invalidates both the board list and any ranking already on screen: the
 // candidates belong to the previous tracker's board and would otherwise sit there looking current.
 watch(source, (next) => {
   boardId.value = ''
@@ -267,7 +259,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
             :icon="choice.icon"
             @click="addSource(choice.source)"
           >
-            {{ addLabel(choice) }}
+            {{ ADD_LABEL[choice.action](choice.label) }}
           </UButton>
         </div>
       </div>
@@ -284,8 +276,11 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
           <UFormField :label="t('bugHunt.tracker')">
             <!-- The selector is also the way to ADD a tracker: each entry in the second group
                  opens that tracker's own connect screen over this modal, so the hunt (and
-                 anything typed into it) is still here when the user comes back. -->
+                 anything typed into it) is still here when the user comes back. With a single
+                 entry there is nothing to decide, so the tracker is named as plain text instead:
+                 a chevron that opens a one-item menu promises a choice that isn't there. -->
             <UDropdownMenu
+              v-if="sourcePickable"
               :items="sourceMenu"
               :content="{ side: 'bottom', align: 'start' }"
               class="w-full"
@@ -300,6 +295,10 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
                 <span class="truncate">{{ descriptor?.label ?? t('bugHunt.pickTracker') }}</span>
               </UButton>
             </UDropdownMenu>
+            <p v-else class="flex items-center gap-1.5 py-1 text-sm text-slate-300">
+              <UIcon v-if="descriptor?.icon" :name="descriptor.icon" class="h-4 w-4 shrink-0" />
+              <span class="truncate">{{ descriptor?.label ?? t('bugHunt.pickTracker') }}</span>
+            </p>
           </UFormField>
 
           <UFormField :label="t('bugHunt.board')">
@@ -335,7 +334,17 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
           </UFormField>
         </div>
 
-        <UFormField :label="t('bugHunt.adoptInto')">
+        <!-- Where an adopted bug lands. Stated when the frame this hunt was opened from is the
+             only legal target; a choice (scoped to that frame) when it has modules, or over the
+             whole board when the hunt was opened standalone. -->
+        <p v-if="containerStated" class="text-xs text-slate-400">
+          <i18n-t keypath="bugHunt.adoptingInto" tag="span" scope="global">
+            <template #container>
+              <span class="font-medium text-slate-200">{{ pinnedContainer!.title }}</span>
+            </template>
+          </i18n-t>
+        </p>
+        <UFormField v-else :label="t('bugHunt.adoptInto')">
           <USelect v-model="containerId" :items="containerItems" class="w-full" />
         </UFormField>
 

package/app/components/tasks/ContextIssuePicker.vue

@@ -16,12 +16,18 @@
 // exactly one), and its menu doubles as the "add a tracker" affordance: attaching a
 // context issue is where a missing integration is discovered, and the connect modal
 // opens over the caller's form rather than navigating away from it.
-import type { DropdownMenuItem } from '@nuxt/ui'
+import { useId } from 'vue'
 import type { TaskSourceReadReason } from '@cat-factory/contracts'
 import type { SourceTask, TaskSearchResult, TaskSourceKind } from '~/types/domain'
 import { apiErrorReason } from '~/composables/api/errors'
 import EmptyState from '~/components/common/EmptyState.vue'
-import { buildSourceChoices, reconcileSource } from '~/utils/taskSources'
+import {
+  type AddSourceLabels,
+  buildSourceChoices,
+  menuIsPickable,
+  reconcileSource,
+  sourceMenuItems,
+} from '~/utils/sourcePicker'
 
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
@@ -83,30 +89,32 @@ watch(
   },
 )
 
+/** Wording per add action, exhaustive over what a TRACKER menu can carry. */
+const ADD_LABEL: AddSourceLabels<'connect' | 'enable'> = {
+  connect: (label) => t('tasks.picker.connectSource', { label }),
+  enable: (label) => t('tasks.picker.enableSource', { label }),
+}
+
 // Two-tier menu: pick an offered tracker, or add one that isn't offered yet.
-const sourceMenu = computed<DropdownMenuItem[][]>(() =>
-  buildSourceChoices(tasks.sources, source.value).map((group) =>
-    group.map((choice) =>
-      choice.action === 'select'
-        ? {
-            label: choice.label,
-            icon: choice.icon,
-            trailingIcon: choice.active ? 'i-lucide-check' : undefined,
-            onSelect: () => {
-              source.value = choice.source
-            },
-          }
-        : {
-            label:
-              choice.action === 'enable'
-                ? t('tasks.picker.enableSource', { label: choice.label })
-                : t('tasks.picker.connectSource', { label: choice.label }),
-            icon: 'i-lucide-plug',
-            onSelect: () => addSource(choice.source),
-          },
-    ),
-  ),
+const sourceChoices = computed(() => buildSourceChoices(tasks.sources, source.value))
+const sourceMenu = computed(() =>
+  sourceMenuItems(sourceChoices.value, {
+    onSelect: (s) => {
+      source.value = s
+    },
+    onAdd: addSource,
+    addLabel: ADD_LABEL,
+  }),
 )
+/** One entry decides nothing, so the tracker is named as a label rather than as a dead control. */
+const sourcePickable = computed(() => menuIsPickable(sourceChoices.value))
+
+// The trigger's own content is the tracker NAME, which says nothing about what the name means, so
+// the visible "Source" caption is joined to it as the accessible name ("Source GitHub"). Per
+// instance, because this picker and the import modal's copy can be mounted at the same time and a
+// hard-coded id would make one trigger claim the other's caption.
+const sourceLabelId = useId()
+const sourceTriggerId = useId()
 const searchable = computed(() => descriptor.value?.searchable ?? false)
 
 const query = ref('')
@@ -277,24 +285,40 @@ onMounted(() => {
 
 <template>
   <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2">
-    <!-- Which tracker is being searched, always visible, plus the trackers the user
-         could add from here (each opens the connect modal over the caller's form). -->
+    <!-- Which tracker is being searched, always visible, plus the trackers the user could add from
+         here (each opens the connect modal over the caller's form). With a single entry there is
+         nothing to decide, so the tracker is named as plain text: a chevron opening a one-item menu
+         promises a choice that isn't there. `id` labels the trigger, whose own content is the
+         tracker name rather than what that name means. -->
     <div class="flex items-center gap-1.5">
-      <span class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <span
+        :id="sourceLabelId"
+        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+      >
         {{ t('tasks.picker.sourceLabel') }}
       </span>
-      <UDropdownMenu :items="sourceMenu" :content="{ side: 'bottom', align: 'start' }">
+      <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('tasks.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('tasks.picker.noSource') }}</span>
+      </span>
     </div>
 
     <UInput

package/app/components/tasks/TaskImportModal.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-// Create a board task from a connected tracker's issue. Pick a container (service
-// frame or module), then use the inline picker below to find an issue (search by
-// title, pick an already-imported one, or paste a URL/key) — choosing one opens the
+// Create a board task from a connected tracker's issue. Use the inline picker to find an issue
+// (search by title, pick an already-imported one, or paste a URL/key): choosing one opens the
 // prefilled add-task form (title seeded, issue staged as linked context) where the
 // user confirms the pipeline / presets before it's created. This is the same picker
 // the add-task form uses for "context issues", so the two behave identically. A
 // pasted parent/epic reference can instead be spawned as a whole linked task group.
+//
+// Where the task lands depends on how the modal was opened, and `useContainerTargets` is the shared
+// answer (`<BugHuntModal>` is the same question from the same frame header). From a service frame's
+// own "create task from issue" button that frame settles the SERVICE, so the modal states it rather
+// than asking; a frame with modules still asks frame-or-which-module, scoped to that frame, because
+// the button never answered that half. Opened standalone (the command bar / the Integrations hub)
+// there is no frame behind it and every container on the board is a candidate.
 import type { TaskSourceKind } from '~/types/domain'
 import type { PendingContext } from '~/composables/useContextLinking'
+import { type AddSourceLabels, addChoicesOf, buildSourceChoices } from '~/utils/sourcePicker'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const tasks = useTasksStore()
-const board = useBoardStore()
 const toast = useToast()
 
 const open = computed({
@@ -32,37 +38,42 @@ const source = ref<TaskSourceKind | undefined>(undefined)
 const ref_ = ref('')
 const importing = ref(false)
 
-// When opened from a service frame the modal is the "create a task from an issue"
-// surface; opened standalone it's the general tracker-issue browser/importer.
-const title = computed(() =>
-  ui.taskImport?.containerId ? t('tasks.import.titleCreate') : t('tasks.import.titleBrowse'),
-)
-
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 
-// The container (service frame or module) a new task is created in.
-const containerId = ref<string | undefined>(undefined)
+/**
+ * The trackers the "nothing connected yet" state offers, worded per add action off the shared
+ * builder rather than re-deciding `available ? enable : connect` here. `enable` is connected but
+ * toggled off for this workspace, so the user is never told to connect what they already have.
+ */
+const ADD_LABEL: AddSourceLabels<'connect' | 'enable'> = {
+  connect: (label) => t('tasks.import.connectSource', { label }),
+  enable: (label) => t('tasks.import.enableSource', { label }),
+}
+const addableSources = computed(() => addChoicesOf(buildSourceChoices(tasks.sources, source.value)))
 
-// Containers a new task can be created in: every service frame and module on the
-// board. Modules are labelled with their parent frame so the choice is unambiguous.
-const containerItems = computed(() =>
-  board.blocks
-    .filter((b) => b.level === 'frame' || b.level === 'module')
-    .map((b) => ({
-      label:
-        b.level === 'module'
-          ? `${board.getBlock(b.parentId ?? '')?.title ?? '?'} › ${b.title}`
-          : b.title,
-      value: b.id,
-    })),
+// Where the new task lands. `pinned` is re-resolved through the board on every read, so a frame
+// deleted while the modal sat open widens back to the whole board AND drops the selection that
+// pointed at it (`useContainerTargets`).
+const {
+  pinned: pinnedContainer,
+  items: containerItems,
+  containerId,
+  stated: containerStated,
+  reset: resetContainer,
+} = useContainerTargets(() => ui.taskImport?.containerId)
+
+// Which surface this is. Derived from the RESOLVED frame rather than the id the modal was opened
+// with, so the title cannot claim the frame-scoped surface while the body renders the standalone
+// browser: they answer "was this opened from a frame" from one source.
+const title = computed(() =>
+  pinnedContainer.value ? t('tasks.import.titleCreate') : t('tasks.import.titleBrowse'),
 )
+
 watch(open, (isOpen) => {
   if (isOpen) {
     ref_.value = ''
     source.value = ui.taskImport?.source ?? tasks.offeredSources[0]?.source ?? undefined
-    // Opened from a service frame → preselect it as the create-in target; otherwise
-    // fall back to the first container on the board.
-    containerId.value = ui.taskImport?.containerId ?? containerItems.value[0]?.value
+    resetContainer()
     tasks.loadTasks().catch(() => {})
   }
 })
@@ -125,18 +136,14 @@ async function doSpawnEpic() {
         <p class="text-sm text-slate-400">{{ t('tasks.import.connectFirst') }}</p>
         <div class="flex justify-center gap-2">
           <UButton
-            v-for="s in tasks.sources"
-            :key="s.source"
+            v-for="choice in addableSources"
+            :key="choice.source"
             color="primary"
             variant="soft"
-            :icon="s.icon"
-            @click="ui.openTaskConnect(s.source)"
+            :icon="choice.icon"
+            @click="ui.openTaskConnect(choice.source)"
           >
-            {{
-              s.available
-                ? t('tasks.import.enableSource', { label: s.label })
-                : t('tasks.import.connectSource', { label: s.label })
-            }}
+            {{ ADD_LABEL[choice.action](choice.label) }}
           </UButton>
         </div>
       </div>
@@ -148,8 +155,17 @@ async function doSpawnEpic() {
 
       <!-- Main form -->
       <div v-else class="space-y-4">
-        <!-- Where the new task lands (preselected when opened from a service frame). -->
-        <UFormField :label="t('tasks.import.createTasksIn')">
+        <!-- Where the new task lands. Stated when there is one legal target (opened from a service
+             frame that has no modules); otherwise a real choice, scoped to that frame when the
+             modal was opened from one. -->
+        <p v-if="containerStated" class="text-xs text-slate-400">
+          <i18n-t keypath="tasks.import.creatingIn" tag="span" scope="global">
+            <template #container>
+              <span class="font-medium text-slate-200">{{ pinnedContainer!.title }}</span>
+            </template>
+          </i18n-t>
+        </p>
+        <UFormField v-else :label="t('tasks.import.createTasksIn')">
           <USelect
             v-model="containerId"
             :items="containerItems"
@@ -160,7 +176,7 @@ async function doSpawnEpic() {
 
         <!-- Find an issue and create a task from it. Same picker the add-task form
              uses for context issues: search by title, pick an already-imported one,
-             or paste a URL/key — choosing one opens the prefilled add-task form. The
+             or paste a URL/key, and choosing one opens the prefilled add-task form. The
              search is scoped to the chosen container's repo (so a GitHub search stays
              in that service's repo and a pasted URL / bare number resolves there). -->
         <UFormField v-if="containerId" :label="t('tasks.import.searchIssues')">