@cat-factory/app 0.163.0 → 0.164.0

package/README.md

@@ -77,7 +77,10 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
   structure, dependencies, model + fragment picker, live execution, and linked
   docs/issues/scenarios. Decisions resolve via `DecisionModal`.
 - **Pipeline builder** (`components/pipeline`) — assemble/edit agent chains and
-  watch `PipelineProgress`.
+  watch `PipelineProgress`. `PipelinePicker` (+ its `PipelinePreview` pane) is the
+  single way a pipeline is chosen anywhere — add-task, run settings, the recurring
+  schedule, the focus view's Run menu — so every surface explains a pipeline by the
+  ordered steps it will run rather than by its name alone.
 - **Integrations** — modals/panels for `github` (the source-control panel, shared
   by every VCS provider), `vcs` (the GitLab personal-access-token connect),
   `bootstrap`, `documents`, `tasks`, `requirements` (review), `scenarios`

package/app/components/board/RecurringPipelineModal.vue

@@ -70,17 +70,7 @@ function defaultRecurrence(): Recurrence {
 const selectablePipelines = computed(() =>
   pipelines.pipelines.filter((p) => pipelineAllowedForSchedule(p, frame.value, board.blocks)),
 )
-const pipelineMenu = computed(() => [
-  selectablePipelines.value.map((p) => ({
-    label: p.name,
-    icon: 'i-lucide-workflow',
-    onSelect: () => (pipelineId.value = p.id),
-  })),
-])
 const selectedPipeline = computed(() => pipelines.getPipeline(pipelineId.value))
-const selectedPipelineLabel = computed(
-  () => selectedPipeline.value?.name ?? t('board.recurring.pickPipeline'),
-)
 
 // Infer the template from the picked pipeline so the backend seeds the right block
 // description (and so we know to show the tracker config).
@@ -269,19 +259,16 @@ async function add() {
           />
         </UFormField>
 
+        <!-- The rich picker, not a name-only menu: which steps a schedule will run unattended,
+             every time it fires, is exactly what the person setting it up needs to see. A schedule
+             must name a pipeline, so there is no "none" row. -->
         <UFormField :label="t('board.recurring.pipeline')" required>
-          <UDropdownMenu :items="pipelineMenu" class="w-full">
-            <UButton
-              color="neutral"
-              variant="subtle"
-              size="sm"
-              icon="i-lucide-workflow"
-              trailing-icon="i-lucide-chevron-down"
-              class="w-full justify-between"
-            >
-              {{ selectedPipelineLabel }}
-            </UButton>
-          </UDropdownMenu>
+          <PipelinePicker
+            v-model="pipelineId"
+            :options="selectablePipelines"
+            :placeholder="t('board.recurring.pickPipeline')"
+            trigger-class="w-full justify-between"
+          />
         </UFormField>
 
         <UFormField :label="t('board.recurring.prompt')">

package/app/components/focus/BlockFocusView.vue

@@ -31,17 +31,19 @@ const deps = computed(() =>
 // Hide UI-testing pipelines when this block's frame has no UI to exercise, `'recurring'`-only
 // pipelines (a manual run of one is refused server-side), and — for a `document` task — every
 // non-document pipeline (per the `purpose` classifier) — see the backend gate.
-const runMenu = computed(() => {
+const runOptions = computed(() => {
   const frame = block.value ? board.serviceOf(block.value) : undefined
-  return pipelines.pipelines
-    .filter((p) => pipelineAllowedForManualStart(p, frame, board.blocks, block.value?.taskType))
-    .map((p) => ({
-      label: p.name,
-      icon: 'i-lucide-play',
-      onSelect: () => block.value && execution.start(block.value.id, p),
-    }))
+  return pipelines.pipelines.filter((p) =>
+    pipelineAllowedForManualStart(p, frame, board.blocks, block.value?.taskType),
+  )
 })
 
+/** Start the picked pipeline immediately — the Run menu chooses an ACTION, it stores no default. */
+function runPipeline(id: string) {
+  const pipeline = pipelines.getPipeline(id)
+  if (pipeline && block.value) void execution.start(block.value.id, pipeline)
+}
+
 function close() {
   ui.focus(null)
 }
@@ -97,17 +99,21 @@ function openApprovalFor(approvalId: string) {
         {{ statusMeta.label }}
       </UBadge>
       <div class="ms-auto flex items-center gap-2">
-        <UDropdownMenu :items="runMenu">
-          <UButton
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-play"
-            trailing-icon="i-lucide-chevron-down"
-          >
-            {{ instance ? t('focus.rerunPipeline') : t('focus.runPipeline') }}
-          </UButton>
-        </UDropdownMenu>
+        <!-- The rich picker rather than a list of names: the run starts the moment a row is
+             clicked, so the preview is the only chance to see which agents it will run. -->
+        <PipelinePicker model-value="" :options="runOptions" @update:model-value="runPipeline">
+          <template #trigger>
+            <UButton
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-play"
+              trailing-icon="i-lucide-chevron-down"
+            >
+              {{ instance ? t('focus.rerunPipeline') : t('focus.runPipeline') }}
+            </UButton>
+          </template>
+        </PipelinePicker>
         <IconButton
           icon="i-lucide-x"
           color="neutral"

package/app/components/pipeline/PipelinePicker.vue

@@ -1,25 +1,36 @@
 <script setup lang="ts">
-// The rich pipeline picker used wherever a pipeline is chosen (add-task modal, inspector run
-// settings). A master–detail popover: the left column lists the selectable pipelines (plus a
-// "none / choose at run time" row), and hovering a row reveals that pipeline's full preview — its
-// description + the ordered agent steps — in the right column, so a user sees exactly what a
-// pipeline does before picking it. The trigger is customizable via the `#trigger` slot (the
-// inspector uses a bare icon button; the modal a full-width labelled one).
+// The rich pipeline picker used wherever a pipeline is chosen — as a stored default (add-task
+// modal, inspector run settings, the recurring-schedule modal) or as an immediate action (the
+// focus view's Run menu). A master–detail popover: the left column lists the selectable pipelines
+// (plus an optional "none / choose at run time" row), and hovering a row reveals that pipeline's
+// full preview — its description and every step it will run, in order — in the right column, so a
+// user sees exactly what a pipeline does before picking it. The trigger is customizable via the
+// `#trigger` slot (the inspector uses a bare icon button; the modal a full-width labelled one).
 import { computed, ref } from 'vue'
 import type { Pipeline } from '~/types/domain'
 
 const props = withDefaults(
   defineProps<{
-    /** Selected pipeline id, or '' for the "none" option. */
+    /** Selected pipeline id, or '' for none. An action-mode caller passes a constant ''. */
     modelValue: string
     /** The pipelines offered (already filtered for the surface, e.g. manual-start allowed). */
     options: Pipeline[]
-    /** Label for the "none" row (e.g. "Choose at run time" / "No default"). */
-    noneLabel: string
+    /**
+     * Label for the "none" row (e.g. "Choose at run time" / "No default"). Omit where picking
+     * nothing is not a valid outcome — a schedule needs a pipeline, and a Run menu acts on the
+     * chosen row — and the row is left out entirely.
+     */
+    noneLabel?: string
+    /**
+     * Default-trigger text while nothing is selected. Defaults to {@link noneLabel}, which reads
+     * correctly when the "none" row IS the empty state; a surface without that row supplies its
+     * own prompt ("Pick a pipeline").
+     */
+    placeholder?: string
     /** Extra classes for the default trigger button (e.g. full-width in the modal). */
     triggerClass?: string
   }>(),
-  { triggerClass: '' },
+  { noneLabel: undefined, placeholder: undefined, triggerClass: '' },
 )
 
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
@@ -31,7 +42,9 @@ const open = ref(false)
 const hoverId = ref<string | undefined>(undefined)
 
 const selected = computed(() => props.options.find((p) => p.id === props.modelValue))
-const triggerLabel = computed(() => selected.value?.name ?? props.noneLabel)
+const triggerLabel = computed(
+  () => selected.value?.name ?? props.placeholder ?? props.noneLabel ?? '',
+)
 
 /** The pipeline the right pane previews: the hovered row, else the current selection. */
 const previewPipeline = computed<Pipeline | null>(() => {
@@ -39,6 +52,17 @@ const previewPipeline = computed<Pipeline | null>(() => {
   return id ? (props.options.find((p) => p.id === id) ?? null) : null
 })
 
+/**
+ * With no pipeline to preview the pane explains WHY it's empty, and the two reasons differ: the
+ * "none" row is a real choice worth describing, while a picker without one is simply waiting for
+ * a hover. Sharing one hint would tell a Run menu it has no default pipeline, which is nonsense.
+ */
+const emptyHint = computed(() =>
+  props.noneLabel !== undefined && (hoverId.value ?? props.modelValue) === ''
+    ? t('pipeline.picker.noneHint')
+    : t('pipeline.picker.hoverHint'),
+)
+
 function choose(id: string) {
   emit('update:modelValue', id)
   open.value = false
@@ -63,13 +87,13 @@ function choose(id: string) {
 
     <template #content>
       <div
-        class="flex max-h-[24rem] w-[min(44rem,94vw)]"
+        class="flex max-h-[28rem] w-[min(44rem,94vw)]"
         data-testid="pipeline-picker-panel"
         @mouseleave="hoverId = undefined"
       >
         <!-- left: selectable options -->
         <ul class="w-1/2 shrink-0 overflow-y-auto border-e border-slate-800 p-1">
-          <li>
+          <li v-if="noneLabel !== undefined">
             <button
               type="button"
               class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-slate-800/60"
@@ -110,9 +134,7 @@ function choose(id: string) {
         <!-- right: preview of the hovered (or selected) pipeline -->
         <div class="w-1/2 overflow-y-auto p-3">
           <PipelinePreview v-if="previewPipeline" :pipeline="previewPipeline" />
-          <div v-else class="text-[12px] leading-snug text-slate-500">
-            {{ t('pipeline.picker.noneHint') }}
-          </div>
+          <div v-else class="text-[12px] leading-snug text-slate-500">{{ emptyHint }}</div>
         </div>
       </div>
     </template>

package/app/components/pipeline/PipelinePreview.vue

@@ -1,17 +1,28 @@
 <script setup lang="ts">
 // A compact, read-only summary of a pipeline: its name, prose description (when authored), and the
-// ordered list of enabled agent steps rendered as icon+label chips (a human-gated step is flagged).
-// Shared by the pipeline pickers' hover preview so "what a pipeline consists of" is explained the
-// same way everywhere. Resolves each step's display metadata through the single `agentKindMeta`
-// path (via <AgentKindIcon>), so a system/custom kind can never blow up the renderer.
+// ordered list of steps it will actually run — each a numbered row carrying the agent's icon, label
+// and catalog description, with the human approval gates flagged. The FULL list, not a step count:
+// "what does this pipeline actually do" is the only question a picker's preview pane exists to
+// answer, and a row of interchangeable chips answers just "how many". Shared by the pipeline
+// pickers everywhere a pipeline is chosen, so the explanation is identical on every surface.
+// Resolves each step's display metadata through the single `agentKindMeta` path (via
+// <AgentKindIcon> and {@link stepDescription}), so a system/custom kind can never blow up the
+// renderer.
 import { computed } from 'vue'
 import type { Pipeline } from '~/types/domain'
-import { pipelineDisplaySteps } from '~/utils/pipeline'
+import { agentKindMeta } from '~/utils/catalog'
+import { pipelineDisplaySteps, pipelineGateCount } from '~/utils/pipeline'
 
 const props = defineProps<{ pipeline: Pipeline }>()
 const { t } = useI18n()
 
 const steps = computed(() => pipelineDisplaySteps(props.pipeline))
+const gateCount = computed(() => pipelineGateCount(props.pipeline))
+
+/** What the agent at this step does — the same catalog prose the palette and step tooltips use. */
+function stepDescription(kind: string): string {
+  return agentKindMeta(kind).description
+}
 </script>
 
 <template>
@@ -24,26 +35,57 @@ const steps = computed(() => pipelineDisplaySteps(props.pipeline))
     >
       {{ pipeline.description }}
     </p>
-    <div>
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-slate-500">
+
+    <div
+      class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] uppercase tracking-wide text-slate-500"
+    >
+      <span class="inline-flex items-center gap-1">
         <UIcon name="i-lucide-workflow" class="h-3 w-3" />
         {{ t('pipeline.preview.stepCount', { count: steps.length }, steps.length) }}
-      </div>
-      <ol class="flex flex-wrap items-center gap-1">
-        <li
-          v-for="(s, i) in steps"
-          :key="i"
-          class="inline-flex items-center gap-1 rounded bg-slate-800/70 px-1.5 py-0.5"
-        >
-          <AgentKindIcon :kind="s.kind" show-label icon-class="h-3.5 w-3.5" />
-          <UIcon
-            v-if="s.gated"
-            name="i-lucide-shield-check"
-            class="h-3 w-3 text-amber-400"
-            :title="t('pipeline.preview.gated')"
-          />
-        </li>
-      </ol>
+      </span>
+      <!-- Gates are the reason a run stops for a human, so they earn a headline of their own
+           rather than only the per-step marker below. -->
+      <span v-if="gateCount" class="inline-flex items-center gap-1 text-amber-500">
+        <UIcon name="i-lucide-shield-check" class="h-3 w-3" />
+        {{ t('pipeline.preview.gateCount', { count: gateCount }, gateCount) }}
+      </span>
     </div>
+
+    <!-- The ordered steps. The number column doubles as the flow connector (a rule drawn between
+         consecutive numbers), so the list reads as a sequence rather than an unordered set. -->
+    <ol>
+      <li
+        v-for="(s, i) in steps"
+        :key="i"
+        class="flex gap-2"
+        data-testid="pipeline-preview-step"
+        :data-step-kind="s.kind"
+      >
+        <div class="flex flex-col items-center">
+          <span
+            class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-slate-800 font-mono text-[9px] tabular-nums text-slate-400"
+          >
+            {{ i + 1 }}
+          </span>
+          <span v-if="i < steps.length - 1" class="w-px flex-1 bg-slate-800" />
+        </div>
+        <div class="min-w-0 flex-1 pb-2">
+          <div class="flex items-center gap-1">
+            <AgentKindIcon :kind="s.kind" show-label icon-class="h-3.5 w-3.5" />
+            <UIcon
+              v-if="s.gated"
+              name="i-lucide-shield-check"
+              class="h-3 w-3 shrink-0 text-amber-400"
+              :title="t('pipeline.preview.gated')"
+            />
+          </div>
+          <!-- Clamped: the catalog prose runs long for some kinds, and <AgentKindIcon> already
+               carries the full text in its hover tooltip. -->
+          <p class="line-clamp-2 text-[11px] leading-snug text-slate-500">
+            {{ stepDescription(s.kind) }}
+          </p>
+        </div>
+      </li>
+    </ol>
   </div>
 </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>

package/app/utils/pipeline.spec.ts

@@ -1,13 +1,53 @@
 import { describe, expect, it } from 'vitest'
 import { pipelineAllowedForTaskType, purposeAllowsAgentCategory } from '@cat-factory/contracts'
 import type { Block, Pipeline } from '~/types/domain'
-import { pipelineAllowedForManualStart } from '~/utils/pipeline'
+import {
+  pipelineAllowedForManualStart,
+  pipelineDisplaySteps,
+  pipelineGateCount,
+} from '~/utils/pipeline'
 
 // A minimal pipeline: only the fields the launch/task-type filters read matter here.
 function pipeline(over: Partial<Pipeline> = {}): Pipeline {
   return { id: 'pl_x', name: 'X', agentKinds: ['coder'], ...over } as Pipeline
 }
 
+// The data behind every picker's preview pane: the ordered steps a run will actually execute.
+describe('pipelineDisplaySteps', () => {
+  it('keeps the authored order and flags the gated steps', () => {
+    const p = pipeline({
+      agentKinds: ['task-estimator', 'coder', 'reviewer'],
+      gates: [false, true, false],
+    })
+    expect(pipelineDisplaySteps(p)).toEqual([
+      { kind: 'task-estimator', gated: false },
+      { kind: 'coder', gated: true },
+      { kind: 'reviewer', gated: false },
+    ])
+  })
+
+  it('drops steps disabled by default — they never run, so listing them would misdescribe it', () => {
+    // The short `enabled` array also pins "no entry ⇒ enabled": `tester` has none and stays.
+    const p = pipeline({ agentKinds: ['architect', 'coder', 'tester'], enabled: [false, true] })
+    expect(pipelineDisplaySteps(p).map((s) => s.kind)).toEqual(['coder', 'tester'])
+  })
+})
+
+describe('pipelineGateCount', () => {
+  it('counts only the gates that a run can actually stop at', () => {
+    expect(pipelineGateCount(pipeline({ agentKinds: ['coder'] }))).toBe(0)
+    expect(
+      pipelineGateCount(pipeline({ agentKinds: ['coder', 'merger'], gates: [true, true] })),
+    ).toBe(2)
+    // A gate declared on a disabled step gates nothing: the step is skipped at run.
+    expect(
+      pipelineGateCount(
+        pipeline({ agentKinds: ['coder', 'merger'], gates: [true, true], enabled: [true, false] }),
+      ),
+    ).toBe(1)
+  })
+})
+
 describe('pipelineAllowedForTaskType', () => {
   it('a document task offers ONLY document-purpose pipelines', () => {
     expect(pipelineAllowedForTaskType(pipeline({ purpose: 'document' }), 'document')).toBe(true)

package/app/utils/pipeline.ts

@@ -29,6 +29,15 @@ export function pipelineDisplaySteps(pipeline: Pipeline): PipelineDisplayStep[]
     .map(({ kind, gated }) => ({ kind, gated }))
 }
 
+/**
+ * How many times a run of `pipeline` will stop for a human. Counted off the DISPLAYED steps, not
+ * `pipeline.gates`, because a gate declared on a step that is disabled by default gates nothing —
+ * that step never runs, so promising a stop there would misstate what the pipeline does.
+ */
+export function pipelineGateCount(pipeline: Pipeline): number {
+  return pipelineDisplaySteps(pipeline).filter((s) => s.gated).length
+}
+
 // Re-exported so a picker can import the task-type gate from the same module as the
 // launch/frame gates it composes with (the classifier itself lives in `@cat-factory/contracts`).
 export { pipelineAllowedForTaskType }

package/i18n/locales/de.json

@@ -3245,7 +3245,11 @@
       "attachByReference": "{ref} per Referenz anhängen",
       "noMatches": "Keine passenden Issues.",
       "emptySearchable": "Nach Titel suchen oder ein importiertes Issue auswählen.",
-      "emptyRefOnly": "Fügen Sie eine Issue-URL oder einen -Schlüssel ein, um es anzuhängen."
+      "emptyRefOnly": "Fügen Sie eine Issue-URL oder einen -Schlüssel ein, um es anzuhängen.",
+      "sourceLabel": "Quelle",
+      "noSource": "Quelle wählen",
+      "connectSource": "{label} verbinden",
+      "enableSource": "{label} aktivieren"
     },
     "contextIssues": {
       "title": "Kontext-Issues",
@@ -3358,10 +3362,12 @@
     },
     "preview": {
       "stepCount": "{count} Schritt | {count} Schritte",
+      "gateCount": "{count} Freigabe | {count} Freigaben",
       "gated": "Manuelle Freigabe nach diesem Schritt"
     },
     "picker": {
-      "noneHint": "Keine Standard-Pipeline. Du wählst beim Ausführen der Aufgabe eine aus."
+      "noneHint": "Keine Standard-Pipeline. Du wählst beim Ausführen der Aufgabe eine aus.",
+      "hoverHint": "Fahre über eine Pipeline, um die Schritte zu sehen, die sie ausführt."
     },
     "builder": {
       "title": "Pipeline-Builder",

package/i18n/locales/en.json

@@ -3644,7 +3644,11 @@
       "attachByReference": "Attach {ref} by reference",
       "noMatches": "No matching issues.",
       "emptySearchable": "Search by title, or pick an imported issue.",
-      "emptyRefOnly": "Paste an issue URL or key to attach it."
+      "emptyRefOnly": "Paste an issue URL or key to attach it.",
+      "sourceLabel": "Source",
+      "noSource": "Choose a source",
+      "connectSource": "Connect {label}",
+      "enableSource": "Enable {label}"
     },
     "contextIssues": {
       "title": "Context issues",
@@ -3763,10 +3767,12 @@
     },
     "preview": {
       "stepCount": "{count} step | {count} steps",
+      "gateCount": "{count} approval gate | {count} approval gates",
       "gated": "Human approval gate after this step"
     },
     "picker": {
-      "noneHint": "No default pipeline. You choose one when you run the task."
+      "noneHint": "No default pipeline. You choose one when you run the task.",
+      "hoverHint": "Hover a pipeline to see the steps it runs."
     },
     "builder": {
       "title": "Pipeline builder",

package/i18n/locales/es.json

@@ -3539,7 +3539,11 @@
       "attachByReference": "Adjuntar {ref} por referencia",
       "noMatches": "No hay incidencias coincidentes.",
       "emptySearchable": "Busca por título o elige una incidencia importada.",
-      "emptyRefOnly": "Pega la URL o clave de una incidencia para adjuntarla."
+      "emptyRefOnly": "Pega la URL o clave de una incidencia para adjuntarla.",
+      "sourceLabel": "Fuente",
+      "noSource": "Elige una fuente",
+      "connectSource": "Conectar {label}",
+      "enableSource": "Habilitar {label}"
     },
     "contextIssues": {
       "title": "Incidencias de contexto",
@@ -3652,10 +3656,12 @@
     },
     "preview": {
       "stepCount": "{count} paso | {count} pasos",
+      "gateCount": "{count} aprobación | {count} aprobaciones",
       "gated": "Aprobación humana después de este paso"
     },
     "picker": {
-      "noneHint": "Sin pipeline predeterminado. Eliges uno al ejecutar la tarea."
+      "noneHint": "Sin pipeline predeterminado. Eliges uno al ejecutar la tarea.",
+      "hoverHint": "Pasa el cursor por una pipeline para ver los pasos que ejecuta."
     },
     "builder": {
       "title": "Constructor de pipelines",

package/i18n/locales/fr.json

@@ -3539,7 +3539,11 @@
       "attachByReference": "Joindre {ref} par référence",
       "noMatches": "Aucun ticket correspondant.",
       "emptySearchable": "Recherchez par titre ou choisissez un ticket importé.",
-      "emptyRefOnly": "Collez l'URL ou la clé d'un ticket pour le joindre."
+      "emptyRefOnly": "Collez l'URL ou la clé d'un ticket pour le joindre.",
+      "sourceLabel": "Source",
+      "noSource": "Choisir une source",
+      "connectSource": "Connecter {label}",
+      "enableSource": "Activer {label}"
     },
     "contextIssues": {
       "title": "Tickets de contexte",
@@ -3652,10 +3656,12 @@
     },
     "preview": {
       "stepCount": "{count} étape | {count} étapes",
+      "gateCount": "{count} validation | {count} validations",
       "gated": "Validation humaine après cette étape"
     },
     "picker": {
-      "noneHint": "Aucun pipeline par défaut. Vous en choisissez un au lancement de la tâche."
+      "noneHint": "Aucun pipeline par défaut. Vous en choisissez un au lancement de la tâche.",
+      "hoverHint": "Survolez un pipeline pour voir les étapes qu'il exécute."
     },
     "builder": {
       "title": "Constructeur de pipelines",

package/i18n/locales/he.json

@@ -3550,7 +3550,11 @@
       "attachByReference": "צרף {ref} לפי הפניה",
       "noMatches": "אין ניושנים תואמים.",
       "emptySearchable": "חפש לפי כותרת, או בחר ניושן מיובא.",
-      "emptyRefOnly": "הדבק URL או מפתח של ניושן כדי לצרף אותו."
+      "emptyRefOnly": "הדבק URL או מפתח של ניושן כדי לצרף אותו.",
+      "sourceLabel": "מקור",
+      "noSource": "בחר מקור",
+      "connectSource": "חבר {label}",
+      "enableSource": "הפעל {label}"
     },
     "contextIssues": {
       "title": "ניושני הקשר",
@@ -3663,10 +3667,12 @@
     },
     "preview": {
       "stepCount": "שלב {count} | {count} שלבים",
+      "gateCount": "אישור {count} | {count} אישורים",
       "gated": "אישור אנושי אחרי שלב זה"
     },
     "picker": {
-      "noneHint": "אין צינור ברירת מחדל. בוחרים אחד כשמריצים את המשימה."
+      "noneHint": "אין צינור ברירת מחדל. בוחרים אחד כשמריצים את המשימה.",
+      "hoverHint": "העבירו את העכבר מעל צינור כדי לראות את השלבים שהוא מריץ."
     },
     "builder": {
       "title": "בונה הצינור",

package/i18n/locales/it.json

@@ -3245,7 +3245,11 @@
       "attachByReference": "Allega {ref} per riferimento",
       "noMatches": "Nessuna issue corrispondente.",
       "emptySearchable": "Cerca per titolo, oppure scegli una issue importata.",
-      "emptyRefOnly": "Incolla l'URL o la chiave di una issue per allegarla."
+      "emptyRefOnly": "Incolla l'URL o la chiave di una issue per allegarla.",
+      "sourceLabel": "Fonte",
+      "noSource": "Scegli una fonte",
+      "connectSource": "Collega {label}",
+      "enableSource": "Abilita {label}"
     },
     "contextIssues": {
       "title": "Issue di contesto",
@@ -3358,10 +3362,12 @@
     },
     "preview": {
       "stepCount": "{count} step | {count} step",
+      "gateCount": "{count} approvazione | {count} approvazioni",
       "gated": "Approvazione umana dopo questo step"
     },
     "picker": {
-      "noneHint": "Nessuna pipeline predefinita. Ne scegli una quando esegui l'attivita."
+      "noneHint": "Nessuna pipeline predefinita. Ne scegli una quando esegui l'attivita.",
+      "hoverHint": "Passa il mouse su una pipeline per vedere gli step che esegue."
     },
     "builder": {
       "title": "Costruttore di pipeline",

package/i18n/locales/ja.json

@@ -3551,7 +3551,11 @@
       "attachByReference": "{ref} を参照で添付",
       "noMatches": "一致する課題がありません。",
       "emptySearchable": "タイトルで検索するか、インポート済みの課題を選択してください。",
-      "emptyRefOnly": "課題の URL またはキーを貼り付けて添付します。"
+      "emptyRefOnly": "課題の URL またはキーを貼り付けて添付します。",
+      "sourceLabel": "ソース",
+      "noSource": "ソースを選択",
+      "connectSource": "{label} を接続",
+      "enableSource": "{label} を有効化"
     },
     "contextIssues": {
       "title": "コンテキスト課題",
@@ -3664,10 +3668,12 @@
     },
     "preview": {
       "stepCount": "{count}ステップ | {count}ステップ",
+      "gateCount": "{count}件の承認 | {count}件の承認",
       "gated": "このステップの後に人による承認"
     },
     "picker": {
-      "noneHint": "デフォルトのパイプラインはありません。タスクの実行時に選択します。"
+      "noneHint": "デフォルトのパイプラインはありません。タスクの実行時に選択します。",
+      "hoverHint": "パイプラインにカーソルを合わせると、実行されるステップが表示されます。"
     },
     "builder": {
       "title": "パイプラインビルダー",

package/i18n/locales/pl.json

@@ -3539,7 +3539,11 @@
       "attachByReference": "Dołącz {ref} przez odniesienie",
       "noMatches": "Brak pasujących zgłoszeń.",
       "emptySearchable": "Szukaj według tytułu lub wybierz zaimportowane zgłoszenie.",
-      "emptyRefOnly": "Wklej adres URL lub klucz zgłoszenia, aby je dołączyć."
+      "emptyRefOnly": "Wklej adres URL lub klucz zgłoszenia, aby je dołączyć.",
+      "sourceLabel": "Źródło",
+      "noSource": "Wybierz źródło",
+      "connectSource": "Połącz {label}",
+      "enableSource": "Włącz {label}"
     },
     "contextIssues": {
       "title": "Zgłoszenia kontekstowe",
@@ -3652,10 +3656,12 @@
     },
     "preview": {
       "stepCount": "{count} krok | {count} kroki | {count} kroków",
+      "gateCount": "{count} zatwierdzenie | {count} zatwierdzenia | {count} zatwierdzeń",
       "gated": "Ręczne zatwierdzenie po tym kroku"
     },
     "picker": {
-      "noneHint": "Brak domyślnego pipeline'u. Wybierzesz go podczas uruchamiania zadania."
+      "noneHint": "Brak domyślnego pipeline'u. Wybierzesz go podczas uruchamiania zadania.",
+      "hoverHint": "Najedź na pipeline, aby zobaczyć kroki, które wykonuje."
     },
     "builder": {
       "title": "Kreator pipeline'ów",

package/i18n/locales/tr.json

@@ -3551,7 +3551,11 @@
       "attachByReference": "{ref} öğesini referansla ekle",
       "noMatches": "Eşleşen sorun yok.",
       "emptySearchable": "Başlığa göre ara veya içe aktarılmış bir sorun seç.",
-      "emptyRefOnly": "Eklemek için bir sorun URL'si veya anahtarı yapıştır."
+      "emptyRefOnly": "Eklemek için bir sorun URL'si veya anahtarı yapıştır.",
+      "sourceLabel": "Kaynak",
+      "noSource": "Bir kaynak seç",
+      "connectSource": "{label} bağla",
+      "enableSource": "{label} etkinleştir"
     },
     "contextIssues": {
       "title": "Bağlam sorunları",
@@ -3664,10 +3668,12 @@
     },
     "preview": {
       "stepCount": "{count} adım | {count} adım",
+      "gateCount": "{count} onay | {count} onay",
       "gated": "Bu adımdan sonra insan onayı"
     },
     "picker": {
-      "noneHint": "Varsayılan pipeline yok. Görevi çalıştırırken birini seçersin."
+      "noneHint": "Varsayılan pipeline yok. Görevi çalıştırırken birini seçersin.",
+      "hoverHint": "Çalıştırdığı adımları görmek için bir pipeline'ın üzerine gelin."
     },
     "builder": {
       "title": "Pipeline oluşturucu",

package/i18n/locales/uk.json

@@ -3539,7 +3539,11 @@
       "attachByReference": "Прикріпити {ref} за посиланням",
       "noMatches": "Немає відповідних завдань.",
       "emptySearchable": "Шукайте за назвою або виберіть імпортоване завдання.",
-      "emptyRefOnly": "Вставте URL або ключ завдання, щоб прикріпити його."
+      "emptyRefOnly": "Вставте URL або ключ завдання, щоб прикріпити його.",
+      "sourceLabel": "Джерело",
+      "noSource": "Виберіть джерело",
+      "connectSource": "Підключити {label}",
+      "enableSource": "Увімкнути {label}"
     },
     "contextIssues": {
       "title": "Контекстні завдання",
@@ -3652,10 +3656,12 @@
     },
     "preview": {
       "stepCount": "{count} крок | {count} кроки | {count} кроків",
+      "gateCount": "{count} підтвердження | {count} підтвердження | {count} підтверджень",
       "gated": "Ручне підтвердження після цього кроку"
     },
     "picker": {
-      "noneHint": "Немає типового пайплайну. Ви обираєте його під час запуску завдання."
+      "noneHint": "Немає типового пайплайну. Ви обираєте його під час запуску завдання.",
+      "hoverHint": "Наведіть курсор на пайплайн, щоб побачити кроки, які він виконує."
     },
     "builder": {
       "title": "Конструктор пайплайнів",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.163.0",
+  "version": "0.164.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",