@cat-factory/app 0.236.1 → 0.237.1

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/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