@cat-factory/app 0.162.2 → 0.164.0

package/app/components/tasks/BugHuntModal.vue

@@ -0,0 +1,361 @@
+<script setup lang="ts">
+// Bug hunt: pick a connected tracker, pick one of its boards, and let the platform rank that
+// board's open, UNASSIGNED bugs by impact against implementation complexity. Confirming a
+// candidate adopts it as a bug task in the chosen container and starts the bug-fix pipeline.
+//
+// The interactive dual of the recurring bug-triage schedule: same reading and same pipeline,
+// but a human picks the bug instead of the oldest match being claimed unattended.
+//
+// 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.
+import type {
+  BugHuntAnalysisStatus,
+  BugHuntCandidate,
+  BugHuntConfidence,
+  TaskSourceKind,
+} from '~/types/domain'
+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()
+
+const open = computed({
+  get: () => ui.bugHunt !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeBugHunt()
+  },
+})
+const back = useIntegrationBack(open)
+
+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,
+    })),
+)
+
+const sourceItems = computed(() =>
+  tasks.offeredSources.map((s) => ({ label: s.label, value: s.source })),
+)
+
+const boardItems = computed(() =>
+  hunt.boards.map((b) => ({
+    label: b.key && b.key !== b.name ? `${b.name} (${b.key})` : b.name,
+    value: b.id,
+  })),
+)
+
+/**
+ * The tracker CANNOT enumerate boards, so the user types the scope in themselves. Keyed on the
+ * backend's reason code, not on "any error": an unreachable tracker or an expired token would
+ * otherwise present as a free-text field that simply moves the same failure to the next click.
+ */
+const boardIsFreeText = computed(
+  () => !hunt.boardsLoading && hunt.boardsErrorReason === 'boards_unsupported',
+)
+
+/** A board read that failed for a reason the user has to fix — shown, never silently swallowed. */
+const boardsFailure = computed(() =>
+  !hunt.boardsLoading && hunt.boardsError !== null && !boardIsFreeText.value
+    ? hunt.boardsError
+    : null,
+)
+
+/**
+ * A tracker date the SPA can actually format. A provider reports `createdAt` as an opaque
+ * string, so an unparseable one must render as nothing rather than as "Invalid Date".
+ */
+function createdAtDate(createdAt: string): Date | null {
+  if (!createdAt) return null
+  const parsed = new Date(createdAt)
+  return Number.isNaN(parsed.getTime()) ? null : parsed
+}
+
+const canHunt = computed(() => !!source.value && boardId.value.trim().length > 0)
+
+watch(open, (isOpen) => {
+  if (!isOpen) return
+  hunt.reset()
+  boardId.value = ''
+  issueType.value = ''
+  labels.value = ''
+  source.value = ui.bugHunt?.source ?? tasks.offeredSources[0]?.source ?? undefined
+  containerId.value = ui.bugHunt?.containerId ?? containerItems.value[0]?.value
+  if (source.value) hunt.loadBoards(source.value)
+})
+
+// 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 = ''
+  hunt.reset()
+  if (next) hunt.loadBoards(next)
+})
+
+async function runHunt() {
+  if (!source.value || !canHunt.value) return
+  const parsedLabels = labels.value
+    .split(',')
+    .map((l) => l.trim())
+    .filter((l) => l.length > 0)
+  const ok = await hunt.hunt(source.value, {
+    board: boardId.value.trim(),
+    ...(issueType.value.trim() ? { issueType: issueType.value.trim() } : {}),
+    ...(parsedLabels.length ? { labels: parsedLabels } : {}),
+  })
+  if (!ok) {
+    toast.add({
+      title: t('bugHunt.huntFailed'),
+      description: hunt.huntError ?? undefined,
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
+}
+
+async function adopt(candidate: BugHuntCandidate) {
+  if (!source.value || !containerId.value) return
+  try {
+    const blockId = await hunt.adopt(source.value, candidate.externalId, containerId.value)
+    if (!blockId) return // the user cancelled the personal-credential prompt
+    ui.closeBugHunt()
+    ui.select(blockId)
+    toast.add({
+      title: t('bugHunt.adopted', { id: candidate.externalId }),
+      description: t('bugHunt.adoptedRunning'),
+      icon: 'i-lucide-bug-play',
+    })
+  } catch (e) {
+    toast.add({
+      title: t('bugHunt.adoptFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
+}
+
+/** Colour the score chip by how good the impact-per-effort ratio is. */
+function scoreColor(score: number): 'success' | 'primary' | 'neutral' {
+  if (score >= 2) return 'success'
+  if (score >= 1) return 'primary'
+  return 'neutral'
+}
+
+/**
+ * Confidence labels, as an exhaustive Record over the closed union so a new member fails the
+ * typecheck rather than rendering a raw code (the enum→key drift guard).
+ */
+const CONFIDENCE_KEYS: Record<BugHuntConfidence, string> = {
+  high: 'bugHunt.confidence.high',
+  medium: 'bugHunt.confidence.medium',
+  low: 'bugHunt.confidence.low',
+}
+
+/** The banner shown above the results, per analysis status — same exhaustive-Record guard. */
+const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
+  ranked: 'bugHunt.status.ranked',
+  unavailable: 'bugHunt.status.unavailable',
+  failed: 'bugHunt.status.failed',
+  over_budget: 'bugHunt.status.over_budget',
+  empty: 'bugHunt.status.empty',
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('bugHunt.title')" :ui="{ content: 'max-w-3xl' }">
+    <template #title>
+      <IntegrationBackTitle :title="t('bugHunt.title')" @back="back" />
+    </template>
+    <template #body>
+      <!-- No tracker offered (none connected/installed, or all disabled). -->
+      <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
+        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
+        <p class="text-sm text-slate-400">{{ t('bugHunt.connectFirst') }}</p>
+        <div class="flex justify-center gap-2">
+          <UButton
+            v-for="s in tasks.sources"
+            :key="s.source"
+            color="primary"
+            variant="soft"
+            :icon="s.icon"
+            @click="ui.openTaskConnect(s.source)"
+          >
+            {{ t('bugHunt.connectSource', { label: s.label }) }}
+          </UButton>
+        </div>
+      </div>
+
+      <!-- No service frame yet → nowhere for an adopted bug to land. -->
+      <p v-else-if="!containerItems.length" class="text-center text-xs text-slate-500">
+        {{ t('bugHunt.needFrameFirst') }}
+      </p>
+
+      <div v-else class="space-y-4">
+        <p class="text-xs text-slate-400">{{ t('bugHunt.intro') }}</p>
+
+        <div class="grid gap-3 sm:grid-cols-2">
+          <UFormField :label="t('bugHunt.tracker')">
+            <USelect v-model="source" :items="sourceItems" class="w-full" />
+          </UFormField>
+
+          <UFormField :label="t('bugHunt.board')">
+            <!-- A tracker that can't enumerate its boards gets a free-text field rather than
+                 an empty picker, so the hunt is still usable. -->
+            <UInput
+              v-if="boardIsFreeText"
+              v-model="boardId"
+              :placeholder="t('bugHunt.boardPlaceholder')"
+              class="w-full"
+            />
+            <USelect
+              v-else
+              v-model="boardId"
+              :items="boardItems"
+              :loading="hunt.boardsLoading"
+              :placeholder="t('bugHunt.pickBoard')"
+              class="w-full"
+            />
+            <!-- A board read that failed for a fixable reason (unreachable site, expired
+                 token): named, so the user isn't left with an empty picker and no cause. -->
+            <p v-if="boardsFailure" class="mt-1 text-xs text-amber-400">
+              {{ t('bugHunt.boardsFailed', { reason: boardsFailure }) }}
+            </p>
+          </UFormField>
+
+          <UFormField :label="t('bugHunt.issueType')" :help="t('bugHunt.issueTypeHelp')">
+            <UInput v-model="issueType" placeholder="bug" class="w-full" />
+          </UFormField>
+
+          <UFormField :label="t('bugHunt.labels')" :help="t('bugHunt.labelsHelp')">
+            <UInput v-model="labels" placeholder="regression, checkout" class="w-full" />
+          </UFormField>
+        </div>
+
+        <UFormField :label="t('bugHunt.adoptInto')">
+          <USelect v-model="containerId" :items="containerItems" class="w-full" />
+        </UFormField>
+
+        <div class="flex items-center gap-2">
+          <UButton
+            color="primary"
+            icon="i-lucide-radar"
+            :loading="hunt.hunting"
+            :disabled="!canHunt"
+            @click="runHunt"
+          >
+            {{ t('bugHunt.run') }}
+          </UButton>
+          <span v-if="hunt.hunting" class="text-xs text-slate-400">
+            {{ t('bugHunt.running') }}
+          </span>
+        </div>
+
+        <!-- Results -->
+        <div v-if="hunt.hasResult" class="space-y-3 border-t border-slate-800 pt-3">
+          <p class="text-xs text-slate-400">
+            {{ t(STATUS_KEYS[hunt.result!.analysisStatus]) }}
+            <span v-if="hunt.result!.model" class="text-slate-500">
+              {{ t('bugHunt.viaModel', { model: hunt.result!.model }) }}
+            </span>
+          </p>
+          <p v-if="hunt.result!.truncated" class="text-xs text-amber-400">
+            {{ t('bugHunt.truncated', { count: hunt.result!.scanned }) }}
+          </p>
+
+          <div
+            v-for="candidate in hunt.candidates"
+            :key="candidate.externalId"
+            class="space-y-2 rounded-md border border-slate-800 p-3"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0 space-y-1">
+                <div class="flex items-center gap-2">
+                  <UBadge
+                    v-if="candidate.analysis"
+                    :color="scoreColor(candidate.analysis.score)"
+                    variant="soft"
+                  >
+                    {{ n(candidate.analysis.score) }}
+                  </UBadge>
+                  <UBadge v-else color="neutral" variant="soft">
+                    {{ t('bugHunt.notAssessed') }}
+                  </UBadge>
+                  <ULink
+                    :to="candidate.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="truncate text-sm font-medium text-slate-100"
+                  >
+                    {{ candidate.externalId }}: {{ candidate.title }}
+                  </ULink>
+                </div>
+                <p v-if="candidate.analysis" class="text-xs text-slate-400">
+                  {{
+                    t('bugHunt.ratings', {
+                      impact: candidate.analysis.impact,
+                      complexity: candidate.analysis.complexity,
+                      confidence: t(CONFIDENCE_KEYS[candidate.analysis.confidence]),
+                    })
+                  }}
+                </p>
+                <p v-if="candidate.analysis?.rationale" class="text-xs text-slate-300">
+                  {{ candidate.analysis.rationale }}
+                </p>
+                <div class="flex flex-wrap items-center gap-2 text-[11px] text-slate-500">
+                  <span v-if="candidate.priority">{{ candidate.priority }}</span>
+                  <span v-for="label in candidate.labels" :key="label">{{ label }}</span>
+                  <span v-if="createdAtDate(candidate.createdAt)">
+                    {{ d(createdAtDate(candidate.createdAt)!, 'short') }}
+                  </span>
+                  <span>{{
+                    t('bugHunt.comments', { count: candidate.commentCount }, candidate.commentCount)
+                  }}</span>
+                </div>
+              </div>
+              <div class="flex shrink-0 flex-col items-end gap-1">
+                <UBadge v-if="candidate.analysis?.recommended" color="success" variant="subtle">
+                  {{ t('bugHunt.recommended') }}
+                </UBadge>
+                <UButton
+                  color="primary"
+                  variant="soft"
+                  icon="i-lucide-play"
+                  size="xs"
+                  :loading="hunt.adopting === candidate.externalId"
+                  :disabled="hunt.adopting !== null"
+                  @click="adopt(candidate)"
+                >
+                  {{ t('bugHunt.adopt') }}
+                </UButton>
+              </div>
+            </div>
+          </div>
+
+          <p v-if="!hunt.candidates.length" class="text-center text-xs text-slate-500">
+            {{ t('bugHunt.noCandidates') }}
+          </p>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/tasks/ContextIssuePicker.logic.spec.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest'
+import { buildSourceChoices, reconcileSource } from './ContextIssuePicker.logic'
+import type { TaskSourceState } from '~/types/domain'
+
+/**
+ * The pure source-selection behind `<ContextIssuePicker>`. Pins what the always-visible
+ * selector promises: the tracker in use is named even when it is the only one, a tracker
+ * the workspace hasn't got yet is offered as something to ADD (worded for its actual
+ * state), and the selection stays valid as the offered set changes underneath it.
+ */
+const state = (source: string, { available = true, enabled = true } = {}): TaskSourceState =>
+  ({
+    source,
+    label: source.toUpperCase(),
+    icon: `i-lucide-${source}`,
+    available,
+    enabled,
+    credentialFields: [],
+    refLabel: '',
+    refPlaceholder: '',
+  }) as unknown as TaskSourceState
+
+describe('buildSourceChoices', () => {
+  it('lists a single offered tracker, marked active (the selector is never hidden)', () => {
+    const groups = buildSourceChoices([state('github')], 'github')
+    expect(groups).toEqual([
+      [
+        {
+          action: 'select',
+          source: 'github',
+          label: 'GITHUB',
+          icon: 'i-lucide-github',
+          active: true,
+        },
+      ],
+    ])
+  })
+
+  it('marks only the selected tracker active', () => {
+    const [offered] = buildSourceChoices([state('github'), state('jira')], 'jira')
+    expect(offered!.map((c) => [c.source, 'active' in c && c.active])).toEqual([
+      ['github', false],
+      ['jira', true],
+    ])
+  })
+
+  it('offers an unavailable tracker as `connect` and an available-but-off one as `enable`', () => {
+    const [, addable] = buildSourceChoices(
+      [state('github'), state('jira', { available: false }), state('linear', { enabled: false })],
+      'github',
+    )
+    expect(addable).toEqual([
+      { action: 'connect', source: 'jira', label: 'JIRA', icon: 'i-lucide-jira' },
+      { action: 'enable', source: 'linear', label: 'LINEAR', icon: 'i-lucide-linear' },
+    ])
+  })
+
+  it('drops empty groups so the menu renders no stray separator', () => {
+    expect(buildSourceChoices([state('github')], 'github')).toHaveLength(1)
+    expect(buildSourceChoices([state('jira', { available: false })], undefined)).toHaveLength(1)
+    expect(buildSourceChoices([], undefined)).toEqual([])
+  })
+})
+
+describe('reconcileSource', () => {
+  it('selects the tracker the user just went off to connect, once it is offered', () => {
+    expect(reconcileSource(['github', 'jira'], 'github', 'jira')).toBe('jira')
+  })
+
+  it('keeps the current selection while the connect is still pending', () => {
+    expect(reconcileSource(['github'], 'github', 'jira')).toBe('github')
+  })
+
+  it('keeps a still-offered selection', () => {
+    expect(reconcileSource(['github', 'jira'], 'jira', null)).toBe('jira')
+  })
+
+  it('falls back to the first offered tracker when the selection stopped being offered', () => {
+    expect(reconcileSource(['github'], 'jira', null)).toBe('github')
+  })
+
+  it('selects the first offered tracker when nothing is selected yet', () => {
+    expect(reconcileSource(['github'], undefined, null)).toBe('github')
+  })
+
+  it('resolves to nothing when the workspace offers no tracker at all', () => {
+    expect(reconcileSource([], 'jira', 'jira')).toBeUndefined()
+  })
+})

package/app/components/tasks/ContextIssuePicker.logic.ts

@@ -0,0 +1,74 @@
+import type { TaskSourceKind, TaskSourceState } from '~/types/domain'
+
+/**
+ * Pure source-selection logic for `<ContextIssuePicker>`: which tracker the picker is
+ * searching, and what the source menu offers. Kept out of the component so both the
+ * template's `computed`s and the unit spec call the same code.
+ *
+ * The menu is deliberately two-tier — pick an already-offered tracker, or go and add
+ * one — because "attach a context issue" is where a user first discovers a tracker is
+ * missing, and sending them to the Integrations hub loses their in-progress task.
+ */
+
+/** One row of the picker's source menu. */
+export type SourceChoice =
+  /** An offered tracker the picker can search right now. */
+  | { action: 'select'; source: TaskSourceKind; label: string; icon: string; active: boolean }
+  /**
+   * A configured tracker that is not offered yet, so it can be added from here. `connect`
+   * has no credential/App behind it; `enable` is connected but toggled off for the
+   * workspace. Both open the same connect modal, which serves either case — only the
+   * wording differs, so the user isn't told to "connect" something already connected.
+   */
+  | { action: 'connect' | 'enable'; source: TaskSourceKind; label: string; icon: string }
+
+/**
+ * The picker's source menu, as non-empty groups (the offered trackers, then the ones the
+ * user could add). Empty groups are dropped so the menu never renders a stray separator.
+ */
+export function buildSourceChoices(
+  sources: TaskSourceState[],
+  selected: TaskSourceKind | undefined,
+): SourceChoice[][] {
+  const offered: SourceChoice[] = []
+  const addable: SourceChoice[] = []
+  for (const s of sources) {
+    if (s.available && s.enabled) {
+      offered.push({
+        action: 'select',
+        source: s.source,
+        label: s.label,
+        icon: s.icon,
+        active: s.source === selected,
+      })
+    } else {
+      addable.push({
+        action: s.available ? 'enable' : 'connect',
+        source: s.source,
+        label: s.label,
+        icon: s.icon,
+      })
+    }
+  }
+  return [offered, addable].filter((group) => group.length > 0)
+}
+
+/**
+ * The source the picker should hold once the offered set changes — after a connect, a
+ * disconnect, or the per-workspace toggle flipping elsewhere.
+ *
+ * `awaiting` is the tracker the user just left to connect: the moment it becomes offered
+ * it wins, so they land back on the source they went to add rather than on whatever was
+ * selected before. Otherwise a still-offered selection is kept, and a selection that
+ * stopped being offered falls back to the first one (searching a tracker the workspace no
+ * longer offers only yields errors).
+ */
+export function reconcileSource(
+  offered: TaskSourceKind[],
+  selected: TaskSourceKind | undefined,
+  awaiting: TaskSourceKind | null,
+): TaskSourceKind | undefined {
+  if (awaiting && offered.includes(awaiting)) return awaiting
+  if (selected && offered.includes(selected)) return selected
+  return offered[0]
+}

package/app/components/tasks/ContextIssuePicker.vue

@@ -6,8 +6,15 @@
 // It only *stages* a choice: the caller collects PendingContext items and links
 // them once the block exists (see useContextLinking). A search hit / pasted ref
 // carries `needsImport: true` so it's fetched + persisted before linking.
+//
+// The tracker being searched is ALWAYS on screen (even when the workspace offers
+// 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 type { SourceTask, TaskSearchResult, TaskSourceKind } from '~/types/domain'
 import EmptyState from '~/components/common/EmptyState.vue'
+import { buildSourceChoices, reconcileSource } from '~/components/tasks/ContextIssuePicker.logic'
 
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
@@ -23,13 +30,6 @@ const props = defineProps<{
    * `v-model:source`); omitted, the picker manages it internally (the add-task case).
    */
   source?: TaskSourceKind
-  /**
-   * Always render the source selector, even with a single offered tracker — so the
-   * user can see *which* tracker is being searched (the "create task from issue"
-   * surface, where the source is otherwise invisible). Off by default: the inline
-   * add-task picker stays compact and only shows a selector when there's a choice.
-   */
-  alwaysShowSource?: boolean
 }>()
 const emit = defineEmits<{
   pick: [item: PendingContext]
@@ -38,12 +38,14 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const tasks = useTasksStore()
+const ui = useUiStore()
 
 const chosen = computed(() => new Set(props.chosenKeys ?? []))
 
 // Source: default to the first offered tracker. Controlled when the parent passes
-// `source` (write-through to `update:source`), else internal. A selector appears when
-// more than one source is offered, or whenever the parent asks (`alwaysShowSource`).
+// `source` (write-through to `update:source`), else internal. The selector is always
+// rendered, single tracker or not — which tracker is being searched decides what a
+// pasted key resolves to, so it must never be invisible.
 const internalSource = ref<TaskSourceKind | undefined>(tasks.offeredSources[0]?.source)
 const source = computed<TaskSourceKind | undefined>({
   get: () => props.source ?? internalSource.value,
@@ -52,13 +54,49 @@ const source = computed<TaskSourceKind | undefined>({
     if (v) emit('update:source', v)
   },
 })
-const sourceItems = computed(() =>
-  tasks.offeredSources.map((s) => ({ label: s.label, value: s.source })),
+const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
+
+// The tracker the user left to connect, so it becomes the selection the moment it turns
+// up offered (the connect modal re-probes on success). Also the reconcile trigger for a
+// source that stops being offered — disconnected, or toggled off in settings.
+const awaitingConnect = ref<TaskSourceKind | null>(null)
+function addSource(s: TaskSourceKind) {
+  awaitingConnect.value = s
+  ui.openTaskConnect(s)
+}
+watch(
+  () => tasks.offeredSources.map((s) => s.source),
+  (offered) => {
+    const next = reconcileSource(offered, source.value, awaitingConnect.value)
+    if (next && next === awaitingConnect.value) awaitingConnect.value = null
+    if (next !== source.value && next) source.value = next
+  },
 )
-const showSourceSelect = computed(
-  () => sourceItems.value.length > 1 || (props.alwaysShowSource && sourceItems.value.length > 0),
+
+// 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 descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 const searchable = computed(() => descriptor.value?.searchable ?? false)
 
 const query = ref('')
@@ -222,13 +260,25 @@ onMounted(() => {
 
 <template>
   <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2">
-    <USelect
-      v-if="showSourceSelect"
-      v-model="source"
-      :items="sourceItems"
-      size="xs"
-      class="w-full"
-    />
+    <!-- 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). -->
+    <div class="flex items-center gap-1.5">
+      <span 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' }">
+        <UButton
+          color="neutral"
+          variant="soft"
+          size="xs"
+          :icon="icon"
+          trailing-icon="i-lucide-chevron-down"
+          class="max-w-full"
+        >
+          <span class="truncate">{{ descriptor?.label ?? t('tasks.picker.noSource') }}</span>
+        </UButton>
+      </UDropdownMenu>
+    </div>
 
     <UInput
       v-model="query"

package/app/components/tasks/TaskImportModal.vue

@@ -27,7 +27,7 @@ const back = useIntegrationBack(open)
 
 // The tracker being browsed. Owned here (not the picker) so the epic action and the
 // ref-input placeholder share the same selected source; passed to the picker via
-// `v-model:source` with `always-show-source` so it's always visible + selectable.
+// `v-model:source`, whose selector always shows (and can add) the tracker in use.
 const source = ref<TaskSourceKind | undefined>(undefined)
 const ref_ = ref('')
 const importing = ref(false)
@@ -162,13 +162,11 @@ async function doSpawnEpic() {
              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
              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), and
-             the source selector is always shown so it's clear which tracker is in use. -->
+             in that service's repo and a pasted URL / bare number resolves there). -->
         <UFormField :label="t('tasks.import.searchIssues')">
           <ContextIssuePicker
             v-model:source="source"
             :scope-block-id="containerId"
-            always-show-source
             @pick="createFromPick"
           />
         </UFormField>