@cat-factory/app 0.237.0 → 0.237.1

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')">

package/app/composables/useContainerTargets.spec.ts

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest'
+import { nextTick, ref } from 'vue'
+import type { Block } from '~/types/domain'
+import { useBoardStore } from '~/stores/board'
+import { useContainerTargets } from '~/composables/useContainerTargets'
+
+/**
+ * Where the frame-header authoring surfaces create. Two properties matter and only one of them is
+ * about the happy path: the frame a surface was opened from narrows the choice to that service
+ * WITHOUT removing its modules as targets, and the answer follows a live board, because the frame
+ * can be deleted (by another member, over the socket) while the surface sits open.
+ */
+const block = (over: Partial<Block> & Pick<Block, 'id' | 'level' | 'title'>): Block =>
+  ({ parentId: null, ...over }) as Block
+
+/** A board with two services, one of which has modules, plus a task (never a container). */
+function seedBoard(): void {
+  useBoardStore().blocks = [
+    block({ id: 'f_auth', level: 'frame', title: 'Auth' }),
+    block({ id: 'm_login', level: 'module', title: 'Login', parentId: 'f_auth' }),
+    block({ id: 'm_tokens', level: 'module', title: 'Tokens', parentId: 'f_auth' }),
+    block({ id: 'f_billing', level: 'frame', title: 'Billing' }),
+    block({ id: 't_1', level: 'task', title: 'A task', parentId: 'f_billing' }),
+  ]
+}
+
+describe('useContainerTargets', () => {
+  it('scopes to the opening frame and its modules, keeping the module as a target', () => {
+    seedBoard()
+    const { items, containerId, stated, pinned, reset } = useContainerTargets(() => 'f_auth')
+    reset()
+    // The button that opened this names the service, so the modules need no parent prefix.
+    expect(items.value).toEqual([
+      { label: 'Auth', value: 'f_auth' },
+      { label: 'Login', value: 'm_login' },
+      { label: 'Tokens', value: 'm_tokens' },
+    ])
+    expect(pinned.value?.id).toBe('f_auth')
+    // A frame with modules did NOT answer frame-or-which-module, so the picker still asks,
+    // preselected to the frame itself.
+    expect(stated.value).toBe(false)
+    expect(containerId.value).toBe('f_auth')
+  })
+
+  it('states the target rather than asking when the opening frame has no modules', () => {
+    seedBoard()
+    const { items, containerId, stated, reset } = useContainerTargets(() => 'f_billing')
+    reset()
+    expect(items.value).toEqual([{ label: 'Billing', value: 'f_billing' }])
+    expect(stated.value).toBe(true)
+    expect(containerId.value).toBe('f_billing')
+  })
+
+  it('offers every container on the board, parent-labelled, when opened standalone', () => {
+    seedBoard()
+    const { items, stated, reset } = useContainerTargets(() => null)
+    reset()
+    expect(items.value).toEqual([
+      { label: 'Auth', value: 'f_auth' },
+      { label: 'Auth › Login', value: 'm_login' },
+      { label: 'Auth › Tokens', value: 'm_tokens' },
+      { label: 'Billing', value: 'f_billing' },
+    ])
+    expect(stated.value).toBe(false)
+  })
+
+  // The finding this composable exists for: an id is not evidence the block is still there, so the
+  // surface widens back to the whole board AND re-derives its selection. Leaving the selection
+  // behind is the silent half: the picker renders unselected while the search under it stays scoped
+  // to the deleted frame and the create lands on an id the board no longer has.
+  it('widens and re-selects when the opening frame is deleted underneath it', async () => {
+    seedBoard()
+    const openedFrom = ref<string | null>('f_auth')
+    const { items, containerId, stated, pinned } = useContainerTargets(() => openedFrom.value)
+    containerId.value = 'm_login'
+
+    const board = useBoardStore()
+    board.blocks = board.blocks.filter((b) => !['f_auth', 'm_login', 'm_tokens'].includes(b.id))
+    await nextTick()
+
+    expect(pinned.value).toBeUndefined()
+    expect(stated.value).toBe(false)
+    expect(items.value).toEqual([{ label: 'Billing', value: 'f_billing' }])
+    expect(containerId.value).toBe('f_billing')
+  })
+
+  it('keeps a still-legal selection when a sibling module is added', async () => {
+    seedBoard()
+    const { containerId } = useContainerTargets(() => 'f_auth')
+    containerId.value = 'm_login'
+
+    const board = useBoardStore()
+    board.blocks = [
+      ...board.blocks,
+      block({ id: 'm_sessions', level: 'module', title: 'Sessions', parentId: 'f_auth' }),
+    ]
+    await nextTick()
+
+    expect(containerId.value).toBe('m_login')
+  })
+
+  // A block id that resolves to something no task can live in is the same fact as an id that
+  // resolves to nothing: the surface has no frame behind it and must not pin to one.
+  it('ignores an opening id that is not a legal container', () => {
+    seedBoard()
+    const { pinned, items, reset, containerId } = useContainerTargets(() => 't_1')
+    reset()
+    expect(pinned.value).toBeUndefined()
+    expect(items.value).toHaveLength(4)
+    expect(containerId.value).toBe('f_auth')
+  })
+})

package/app/composables/useContainerTargets.ts

@@ -0,0 +1,62 @@
+import { computed, ref, watch, type Ref } from 'vue'
+import type { Block } from '~/types/domain'
+import { useBoardStore } from '~/stores/board'
+import {
+  containerTargets,
+  isTaskContainer,
+  reconcileContainer,
+  type ContainerTarget,
+} from '~/utils/containerTargets'
+
+/**
+ * Where a board-authoring surface creates, tracking a live board.
+ *
+ * `openedFrom` is the frame id the surface was opened WITH, and is resolved through the board on
+ * every read rather than trusted: an id alone cannot say whether the block still exists or was ever
+ * a legal container. When it resolves and the frame holds no modules there is exactly one answer,
+ * so `stated` is true and the caller renders a line naming it instead of a picker asking a question
+ * the header button already answered. A frame WITH modules did not answer it, so the picker stays,
+ * scoped to that frame.
+ *
+ * Shared by `<TaskImportModal>` and `<BugHuntModal>`, which are opened from the same two frame
+ * header buttons with the same payload: as two copies they disagreed about whether the frame was
+ * the answer or the question.
+ */
+export function useContainerTargets(openedFrom: () => string | null | undefined): {
+  /** The frame or module the surface was opened from, while the board still holds it. */
+  pinned: Ref<Block | undefined>
+  items: Ref<ContainerTarget[]>
+  containerId: Ref<string | undefined>
+  /** One legal target, so the surface states where the work lands rather than asking. */
+  stated: Ref<boolean>
+  /** Re-seed the selection; the caller invokes this when the surface opens. */
+  reset: () => void
+} {
+  const board = useBoardStore()
+
+  const pinned = computed<Block | undefined>(() => {
+    const id = openedFrom()
+    const block = id ? board.getBlock(id) : undefined
+    return isTaskContainer(block) ? block : undefined
+  })
+
+  const items = computed(() => containerTargets(board.blocks, pinned.value))
+
+  const containerId = ref<string | undefined>(undefined)
+
+  function reset() {
+    containerId.value = reconcileContainer(items.value, pinned.value?.id)
+  }
+
+  // The board is live, so what is on offer moves under the open surface: a deleted frame, a new
+  // module. Watching the TARGETS rather than seeding once is what keeps the selection legal, and
+  // it is the reason the pinned frame is re-resolved on every read instead of captured on open.
+  watch(items, (next) => {
+    const resolved = reconcileContainer(next, containerId.value)
+    if (resolved !== containerId.value) containerId.value = resolved
+  })
+
+  const stated = computed(() => !!pinned.value && items.value.length === 1)
+
+  return { pinned, items, containerId, stated, reset }
+}