@cat-factory/app 0.139.0 → 0.140.0

package/app/components/board/AddTaskModal.vue

@@ -35,7 +35,7 @@ const agentConfig = useAgentConfigStore()
 const toast = useToast()
 const { t } = useI18n()
 
-const { linkPending } = useContextLinking()
+const { linkPending, presentLinkFailures } = useContextLinking()
 
 const open = computed({
   get: () => ui.addTaskContainerId !== null,
@@ -292,24 +292,6 @@ const selectedModelPresetLabel = computed(() => {
 const selectablePipelines = computed(() =>
   pipelines.pipelines.filter((p) => pipelineAllowedForManualStart(p, frame.value, board.blocks)),
 )
-const pipelineMenu = computed(() => [
-  [
-    {
-      label: t('board.addTask.chooseAtRunTime'),
-      icon: 'i-lucide-rotate-ccw',
-      onSelect: () => (pipelineId.value = ''),
-    },
-    ...selectablePipelines.value.map((p) => ({
-      label: p.name,
-      icon: 'i-lucide-workflow',
-      onSelect: () => (pipelineId.value = p.id),
-    })),
-  ],
-])
-const selectedPipelineLabel = computed(
-  () => pipelines.getPipeline(pipelineId.value)?.name ?? t('board.addTask.chooseAtRunTime'),
-)
-
 // Picking the Ralph loop task type auto-selects its pipeline, so the per-task validation
 // command + iteration budget (contributed by the `ralph` agent) surface immediately — the
 // loop is meaningless without them, so "choose at run time" would be a dead end here.
@@ -578,14 +560,10 @@ async function add() {
       ...(technical.value ? { technical: true } : {}),
     })
     if (block) {
-      const failed = await linkPending(block.id, pendingContext.value)
-      if (failed > 0) {
-        toast.add({
-          title: t('board.addTask.linkFailed', { count: failed }, failed),
-          icon: 'i-lucide-triangle-alert',
-          color: 'warning',
-        })
-      }
+      // Surface the SPECIFIC cause of any attachment that couldn't be linked (a GitHub
+      // permission/visibility error, a not-found doc, …) instead of a bare count, plus a
+      // one-click "Copy details" for a bug report.
+      presentLinkFailures(await linkPending(block.id, pendingContext.value), block.id)
     }
     ui.closeAddTask()
   } catch (e) {
@@ -895,18 +873,13 @@ async function add() {
 
           <div class="grid grid-cols-2 gap-3">
             <UFormField :label="t('board.addTask.pipeline')">
-              <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
+                :model-value="pipelineId"
+                :options="selectablePipelines"
+                :none-label="t('board.addTask.chooseAtRunTime')"
+                trigger-class="w-full justify-between"
+                @update:model-value="pipelineId = $event"
+              />
             </UFormField>
 
             <UFormField :label="t('board.addTask.mergePolicy')">

package/app/components/documents/ContextDocumentPicker.vue

@@ -10,6 +10,12 @@
 // it's fetched + persisted before linking. Mirrors ContextIssuePicker.
 import type { DocumentSearchResult, DocumentSourceKind } from '~/types/domain'
 import EmptyState from '~/components/common/EmptyState.vue'
+import RepoContextDocPicker from '~/components/documents/RepoContextDocPicker.vue'
+
+// 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
+// `github` (which transparently covers GitLab via the VCS adapter) is repo-backed.
+const REPO_SOURCES = new Set<DocumentSourceKind>(['github'])
 
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
@@ -32,6 +38,8 @@ const descriptor = computed(() =>
   source.value ? documents.descriptorFor(source.value) : undefined,
 )
 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))
 
 const query = ref('')
 const results = ref<DocumentSearchResult[]>([])
@@ -176,81 +184,92 @@ onMounted(() => {
       class="w-full"
     />
 
-    <UInput
-      v-model="query"
-      :icon="searching ? 'i-lucide-loader-circle' : 'i-lucide-search'"
-      :ui="{ leadingIcon: searching ? 'animate-spin' : '' }"
-      size="sm"
-      class="w-full"
-      :placeholder="
-        searchable
-          ? t('documents.picker.searchPlaceholder')
-          : (descriptor?.refPlaceholder ?? t('documents.picker.refPlaceholder'))
-      "
-      @keydown.enter="refRow && pickRef(refRow)"
+    <!-- Repo-backed source (GitHub / GitLab): pick a repository, then a file. -->
+    <RepoContextDocPicker
+      v-if="isRepoSource && source"
+      :source="source!"
+      :icon="icon"
+      :chosen-keys="chosenKeys"
+      @pick="(item: PendingContext) => emit('pick', item)"
     />
 
-    <p v-if="searchError" class="px-1 text-[11px] text-amber-400">
-      {{ t('documents.picker.searchFailed', { error: searchError }) }}
-    </p>
+    <template v-else>
+      <UInput
+        v-model="query"
+        :icon="searching ? 'i-lucide-loader-circle' : 'i-lucide-search'"
+        :ui="{ leadingIcon: searching ? 'animate-spin' : '' }"
+        size="sm"
+        class="w-full"
+        :placeholder="
+          searchable
+            ? t('documents.picker.searchPlaceholder')
+            : (descriptor?.refPlaceholder ?? t('documents.picker.refPlaceholder'))
+        "
+        @keydown.enter="refRow && pickRef(refRow)"
+      />
 
-    <div class="max-h-56 space-y-0.5 overflow-y-auto">
-      <!-- Already-imported documents (linked directly, no re-fetch). -->
-      <button
-        v-for="d in importedRows"
-        :key="`imp:${d.externalId}`"
-        type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
-        @click="pickImported(d.externalId, d.title, d.excerpt)"
-      >
-        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
-        <span class="truncate">{{ d.title }}</span>
-        <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
-          t('documents.picker.importedBadge')
-        }}</UBadge>
-      </button>
+      <p v-if="searchError" class="px-1 text-[11px] text-amber-400">
+        {{ t('documents.picker.searchFailed', { error: searchError }) }}
+      </p>
 
-      <!-- Source search hits (imported on add). -->
-      <button
-        v-for="r in searchRows"
-        :key="`hit:${r.externalId}`"
-        type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
-        @click="pickSearch(r)"
-      >
-        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
-        <span class="truncate">{{ r.title }}</span>
-      </button>
+      <div class="max-h-56 space-y-0.5 overflow-y-auto">
+        <!-- Already-imported documents (linked directly, no re-fetch). -->
+        <button
+          v-for="d in importedRows"
+          :key="`imp:${d.externalId}`"
+          type="button"
+          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          @click="pickImported(d.externalId, d.title, d.excerpt)"
+        >
+          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+          <span class="truncate">{{ d.title }}</span>
+          <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
+            t('documents.picker.importedBadge')
+          }}</UBadge>
+        </button>
 
-      <!-- Explicit URL/ID reference (imported on add). -->
-      <button
-        v-if="refRow"
-        type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
-        @click="pickRef(refRow)"
-      >
-        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
-        <span class="truncate">
-          <i18n-t keypath="documents.picker.attachByReference" scope="global">
-            <template #ref>
-              <span class="text-slate-200">{{ refRow }}</span>
-            </template>
-          </i18n-t>
-        </span>
-      </button>
+        <!-- Source search hits (imported on add). -->
+        <button
+          v-for="r in searchRows"
+          :key="`hit:${r.externalId}`"
+          type="button"
+          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          @click="pickSearch(r)"
+        >
+          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+          <span class="truncate">{{ r.title }}</span>
+        </button>
 
-      <EmptyState
-        v-if="empty"
-        compact
-        icon="i-lucide-file-search"
-        :title="
-          query.trim()
-            ? t('documents.picker.noMatches')
-            : searchable
-              ? t('documents.picker.emptySearchable')
-              : t('documents.picker.emptyRefOnly')
-        "
-      />
-    </div>
+        <!-- Explicit URL/ID reference (imported on add). -->
+        <button
+          v-if="refRow"
+          type="button"
+          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          @click="pickRef(refRow)"
+        >
+          <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+          <span class="truncate">
+            <i18n-t keypath="documents.picker.attachByReference" scope="global">
+              <template #ref>
+                <span class="text-slate-200">{{ refRow }}</span>
+              </template>
+            </i18n-t>
+          </span>
+        </button>
+
+        <EmptyState
+          v-if="empty"
+          compact
+          icon="i-lucide-file-search"
+          :title="
+            query.trim()
+              ? t('documents.picker.noMatches')
+              : searchable
+                ? t('documents.picker.emptySearchable')
+                : t('documents.picker.emptyRefOnly')
+          "
+        />
+      </div>
+    </template>
   </div>
 </template>

package/app/components/documents/RepoContextDocPicker.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+// Repo-backed context-document picker: the GitHub / GitLab branch of
+// ContextDocumentPicker. A repo-doc reference is a single file in a repository the
+// workspace's App (or PAT) can reach, so instead of the generic free-text search
+// this flow is: pick a repository, then pick one or more FILES from it — either by
+// searching the whole tree by path, or by browsing it with the same tree browser the
+// monorepo add-service flow uses. Each picked file is STAGED (emitted as a
+// `PendingContext`, imported + linked once the block exists); already-staged files
+// are shown "added" and can't be re-picked, mirroring the other context pickers.
+//
+// The repo search reuses `useRepoSearch` (debounce + stale-guard + per-instance
+// results, so it never clobbers another picker's list) and the file search reuses the
+// github store's recursive-tree cache (`loadRepoFiles`) so filtering is instant and
+// client-side after one fetch per repo. Nothing here is GitHub-specific beyond the
+// store it rides: the same store transparently returns GitLab projects via the VCS
+// adapter, so this works unchanged on a GitLab deployment.
+import type { DocumentSourceKind, GitHubAvailableRepo, RepoTreeEntry } from '~/types/domain'
+import EmptyState from '~/components/common/EmptyState.vue'
+import RepoSearchEmpty from '~/components/github/RepoSearchEmpty.vue'
+import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+
+const props = defineProps<{
+  /** The repo-backed document source (`github`) whose files are being attached. */
+  source: DocumentSourceKind
+  /** Lucide icon for the source, used on each staged file row. */
+  icon: string
+  /** contextKeys already staged by the caller, so they're shown "added" / not re-offered. */
+  chosenKeys?: string[]
+}>()
+const emit = defineEmits<{ pick: [item: PendingContext] }>()
+
+const { t } = useI18n()
+const github = useGitHubStore()
+
+const chosen = computed(() => new Set(props.chosenKeys ?? []))
+
+// ---- repo search (reused pattern) ----------------------------------------
+const {
+  search: repoSearch,
+  query: repoQueryRaw,
+  belowMinChars,
+  results: repoResults,
+  loading: repoLoading,
+  reset: resetRepoSearch,
+} = useRepoSearch()
+
+const selectedRepoId = ref<number | undefined>(undefined)
+// Captured when picked — the results list is volatile (a later search replaces it), so
+// the owner/name can't be recovered from it after the fact, and we need them to build
+// the `owner/repo:path` external id.
+const selectedRepo = ref<GitHubAvailableRepo | undefined>(undefined)
+
+function toRepoItem(r: GitHubAvailableRepo) {
+  const suffix = r.private ? t('github.addService.repoLabel.private') : ''
+  return { label: `${r.owner}/${r.name}${suffix}`, value: r.githubId }
+}
+const queryMatches = computed(() => (belowMinChars.value ? [] : repoResults.value.map(toRepoItem)))
+const repoMenuItems = computed(() => {
+  const matches = queryMatches.value
+  if (selectedRepoId.value === undefined) return matches
+  if (matches.some((r) => r.value === selectedRepoId.value)) return matches
+  return selectedRepo.value ? [toRepoItem(selectedRepo.value), ...matches] : matches
+})
+
+watch(selectedRepoId, (id) => {
+  if (id === undefined) {
+    selectedRepo.value = undefined
+    return
+  }
+  const found = repoResults.value.find((r) => r.githubId === id)
+  if (found) selectedRepo.value = found
+})
+
+function clearRepo() {
+  selectedRepoId.value = undefined
+  selectedRepo.value = undefined
+  resetRepoSearch()
+  fileQuery.value = ''
+}
+
+// ---- file selection (browse | search) ------------------------------------
+type FileMode = 'search' | 'browse'
+const fileMode = ref<FileMode>('search')
+
+// Files already staged for THIS repo, as repo-root-relative paths — derived from the
+// caller's chosen keys (`document:<source>:<owner>/<repo>:<path>`). Shown disabled in
+// both the tree browser and the search list so a file can't be staged twice.
+const addedPaths = computed<string[]>(() => {
+  const repo = selectedRepo.value
+  if (!repo) return []
+  const prefix = `document:${props.source}:${repo.owner}/${repo.name}:`
+  return [...chosen.value].filter((k) => k.startsWith(prefix)).map((k) => k.slice(prefix.length))
+})
+const addedSet = computed(() => new Set(addedPaths.value.map(normalizeRepoPath)))
+
+// The recursive file listing for the selected repo, loaded + cached on demand for the
+// search box. Loaded lazily when the user first switches to / lands on search.
+const files = computed<RepoTreeEntry[]>(() =>
+  selectedRepoId.value !== undefined ? (github.repoFiles[selectedRepoId.value] ?? []) : [],
+)
+const loadingFiles = ref(false)
+const filesError = ref<string | null>(null)
+
+async function ensureFilesLoaded() {
+  if (selectedRepoId.value === undefined) return
+  if (github.repoFiles[selectedRepoId.value]) return
+  loadingFiles.value = true
+  filesError.value = null
+  try {
+    await github.loadRepoFiles(selectedRepoId.value)
+  } catch (e) {
+    filesError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loadingFiles.value = false
+  }
+}
+
+// Load the file list as soon as a repo is picked (search is the default tab); browsing
+// uses the per-level tree endpoint and needs no preload.
+watch(selectedRepoId, (id) => {
+  fileQuery.value = ''
+  fileMode.value = 'search'
+  if (id !== undefined) void ensureFilesLoaded()
+})
+
+const fileQuery = ref('')
+// Matches are computed client-side from the cached tree (no per-keystroke server call).
+// A query is required so a large repo never renders thousands of rows at once; results
+// are capped for the same reason.
+const FILE_RESULTS_CAP = 50
+// Filter the cached tree ONCE per keystroke, then derive the capped view + the
+// "truncated" flag from that single pass (a large monorepo tree is filtered twice
+// otherwise, once per computed, on every keystroke).
+const fileMatchesAll = computed(() => {
+  const q = fileQuery.value.trim().toLowerCase()
+  if (!q) return []
+  return files.value.filter(
+    (f) => !addedSet.value.has(normalizeRepoPath(f.path)) && f.path.toLowerCase().includes(q),
+  )
+})
+const fileMatches = computed(() => fileMatchesAll.value.slice(0, FILE_RESULTS_CAP))
+const fileMatchesTruncated = computed(() => fileMatchesAll.value.length > FILE_RESULTS_CAP)
+
+function pickFile(path: string) {
+  const repo = selectedRepo.value
+  if (!repo || addedSet.value.has(normalizeRepoPath(path))) return
+  const clean = normalizeRepoPath(path)
+  emit('pick', {
+    kind: 'document',
+    source: props.source,
+    // The GitHub/GitLab doc source's canonical `owner/repo:path` external id.
+    externalId: `${repo.owner}/${repo.name}:${clean}`,
+    title: clean.split('/').pop() || clean,
+    subtitle: `${repo.owner}/${repo.name} · ${clean}`,
+    icon: props.icon,
+    needsImport: true,
+  })
+}
+
+onMounted(() => {
+  // The repo search rides the github store; make sure the App connection is probed so
+  // `searchAvailableRepos` sees `connected` (single-flighted — cheap to call).
+  github.ensureProbed().catch(() => {})
+})
+</script>
+
+<template>
+  <div class="space-y-2">
+    <!-- 1. pick a repository -->
+    <UInputMenu
+      v-model="selectedRepoId"
+      v-model:search-term="repoSearch"
+      :items="repoMenuItems"
+      :ignore-filter="true"
+      value-key="value"
+      :loading="repoLoading"
+      icon="i-lucide-search"
+      size="sm"
+      :placeholder="t('documents.repoPicker.searchRepoPlaceholder')"
+      class="w-full"
+    >
+      <template v-if="selectedRepoId !== undefined" #trailing>
+        <UButton
+          color="neutral"
+          variant="link"
+          size="sm"
+          icon="i-lucide-x"
+          :aria-label="t('documents.repoPicker.clearRepo')"
+          @click.stop="clearRepo"
+        />
+      </template>
+      <template #empty>
+        <RepoSearchEmpty
+          :below-min-chars="belowMinChars"
+          :loading="repoLoading"
+          :query="repoQueryRaw"
+        />
+      </template>
+    </UInputMenu>
+
+    <!-- 2. pick file(s) from the chosen repo -->
+    <template v-if="selectedRepoId !== undefined">
+      <div class="flex items-center gap-1">
+        <UButton
+          size="xs"
+          :color="fileMode === 'search' ? 'primary' : 'neutral'"
+          :variant="fileMode === 'search' ? 'soft' : 'ghost'"
+          icon="i-lucide-search"
+          @click="fileMode = 'search'"
+        >
+          {{ t('documents.repoPicker.searchTab') }}
+        </UButton>
+        <UButton
+          size="xs"
+          :color="fileMode === 'browse' ? 'primary' : 'neutral'"
+          :variant="fileMode === 'browse' ? 'soft' : 'ghost'"
+          icon="i-lucide-folder-tree"
+          @click="fileMode = 'browse'"
+        >
+          {{ t('documents.repoPicker.browseTab') }}
+        </UButton>
+      </div>
+
+      <!-- search files by path (client-side over the cached recursive tree) -->
+      <div v-if="fileMode === 'search'" class="space-y-2">
+        <UInput
+          v-model="fileQuery"
+          :icon="loadingFiles ? 'i-lucide-loader-circle' : 'i-lucide-file-search'"
+          :ui="{ leadingIcon: loadingFiles ? 'animate-spin' : '' }"
+          size="sm"
+          class="w-full"
+          :placeholder="t('documents.repoPicker.searchFilesPlaceholder')"
+        />
+        <p v-if="filesError" class="px-1 text-[11px] text-amber-400">
+          {{ t('documents.repoPicker.filesFailed', { error: filesError }) }}
+        </p>
+        <div class="max-h-56 space-y-0.5 overflow-y-auto">
+          <button
+            v-for="f in fileMatches"
+            :key="f.path"
+            type="button"
+            class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+            @click="pickFile(f.path)"
+          >
+            <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+            <span class="truncate">{{ f.path }}</span>
+          </button>
+          <p v-if="fileMatchesTruncated" class="px-2 py-1 text-[11px] text-slate-500">
+            {{ t('documents.repoPicker.moreFiles', { count: FILE_RESULTS_CAP }) }}
+          </p>
+          <EmptyState
+            v-if="!loadingFiles && !filesError && fileQuery.trim() && fileMatches.length === 0"
+            compact
+            icon="i-lucide-file-search"
+            :title="t('documents.repoPicker.noFileMatches')"
+          />
+          <p
+            v-else-if="!loadingFiles && !fileQuery.trim()"
+            class="px-2 py-1 text-[11px] text-slate-500"
+          >
+            {{ t('documents.repoPicker.searchFilesHint') }}
+          </p>
+        </div>
+      </div>
+
+      <!-- browse the tree, multi-pick files (same browser as the monorepo flow) -->
+      <RepoTreeBrowser
+        v-else
+        :repo-github-id="selectedRepoId"
+        mode="file"
+        multiple
+        :added-paths="addedPaths"
+        @toggle="pickFile"
+      />
+    </template>
+  </div>
+</template>

package/app/components/github/RepoTreeBrowser.vue

@@ -7,12 +7,13 @@
 // via `v-model`. The component owns its own navigation/loading state so callers
 // just bind a repo id + mode; it self-loads on mount and when those change.
 //
-// `dir` mode additionally supports `multiple`: instead of the single `v-model`
+// Both modes additionally support `multiple`: instead of the single `v-model`
 // path, the caller passes the current `selectedPaths` (a cart) + `addedPaths`
-// (directories already on the board, shown disabled) and handles the `toggle`
-// event to add/remove a directory. This lets one browse session accumulate
-// several services from ANY parent folder (the monorepo add flow) — navigating
-// away never drops earlier picks.
+// (paths already chosen elsewhere, shown disabled) and handles the `toggle`
+// event to add/remove a path. In `dir` mode this accumulates service directories
+// from ANY parent folder (the monorepo add flow); in `file` mode it accumulates
+// context-document files from anywhere in the tree — navigating away never drops
+// earlier picks.
 import type { RepoTreeEntry } from '~/types/domain'
 
 const props = withDefaults(
@@ -23,11 +24,11 @@ const props = withDefaults(
     modelValue?: string
     /** Directory to open at (e.g. a monorepo service's subdirectory). */
     startPath?: string
-    /** `dir` mode: accumulate a set of picks (via `selectedPaths`/`toggle`) instead of one. */
+    /** Accumulate a set of picks (via `selectedPaths`/`toggle`) instead of one. Either mode. */
     multiple?: boolean
-    /** `dir` + `multiple`: the current cart of picked directories (repo-root-relative). */
+    /** `multiple`: the current cart of picked paths (repo-root-relative). */
     selectedPaths?: string[]
-    /** `dir` + `multiple`: directories already on the board — listed but not selectable. */
+    /** `multiple`: paths already chosen elsewhere — listed but not selectable. */
     addedPaths?: string[]
   }>(),
   { mode: 'dir', startPath: '', multiple: false, selectedPaths: () => [], addedPaths: () => [] },
@@ -182,14 +183,22 @@ watch(
             <button
               type="button"
               class="flex items-center gap-2 truncate text-sm hover:text-primary-400"
-              :class="modelValue === entry.path ? 'text-primary-400' : 'text-slate-300'"
+              :class="isPicked(entry.path) ? 'text-primary-400' : 'text-slate-300'"
+              :disabled="isAdded(entry.path)"
               @click="pick(entry.path)"
             >
               <UIcon name="i-lucide-file" class="h-4 w-4 shrink-0 text-slate-400" />
               <span class="truncate">{{ entry.name }}</span>
             </button>
+            <span
+              v-if="isAdded(entry.path)"
+              class="flex shrink-0 items-center gap-1 text-xs text-slate-500"
+            >
+              <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
+              {{ t('github.repoTree.added') }}
+            </span>
             <UIcon
-              v-if="modelValue === entry.path"
+              v-else-if="isPicked(entry.path)"
               name="i-lucide-check"
               class="h-4 w-4 shrink-0 text-primary-400"
             />

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -142,20 +142,6 @@ const selectablePipelines = computed(() =>
     pipelineAllowedForManualStart(p, taskFrame.value, board.blocks),
   ),
 )
-const pipelineMenu = computed(() => [
-  [
-    {
-      label: t('inspector.runSettings.noDefault'),
-      icon: 'i-lucide-rotate-ccw',
-      onSelect: () => setPipeline(''),
-    },
-    ...selectablePipelines.value.map((p) => ({
-      label: p.name,
-      icon: 'i-lucide-workflow',
-      onSelect: () => setPipeline(p.id),
-    })),
-  ],
-])
 function setPipeline(id: string) {
   board.updateBlock(props.block.id, { pipelineId: id })
 }
@@ -271,15 +257,22 @@ const technicalLabel = computed(() => {
         <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
           {{ t('inspector.runSettings.pipeline') }}
         </span>
-        <UDropdownMenu :items="pipelineMenu">
-          <UButton
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-workflow"
-            trailing-icon="i-lucide-chevron-down"
-          />
-        </UDropdownMenu>
+        <PipelinePicker
+          :model-value="block.pipelineId ?? ''"
+          :options="selectablePipelines"
+          :none-label="t('inspector.runSettings.noDefault')"
+          @update:model-value="setPipeline"
+        >
+          <template #trigger>
+            <UButton
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-workflow"
+              trailing-icon="i-lucide-chevron-down"
+            />
+          </template>
+        </PipelinePicker>
       </div>
       <div v-if="selectedPipeline" class="flex items-center gap-1">
         <UBadge