@cat-factory/app 0.162.2 → 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/layout/CommandBar.vue

@@ -118,6 +118,14 @@ const dynamicIntegrationCommands = computed<Command[]>(() => {
         keywords: t('layout.commandBar.keywords.taskImport'),
         run: () => ui.openTaskImport(null),
       })
+      list.push({
+        id: 'bug-hunt',
+        label: t('layout.commandBar.cmd.bugHunt'),
+        group: groupIntegrations,
+        icon: 'i-lucide-radar',
+        keywords: t('layout.commandBar.keywords.bugHunt'),
+        run: () => ui.openBugHunt(null),
+      })
     }
   }
   return list

package/app/components/layout/IntegrationsHub.vue

@@ -241,6 +241,13 @@ const groups = computed<IntegrationGroup[]>(() => {
         description: t('layout.integrationsHub.items.taskImport.description'),
         onClick: () => go(() => ui.openTaskImport(null)),
       })
+      trackers.push({
+        key: 'task:bug-hunt',
+        icon: 'i-lucide-radar',
+        label: t('layout.integrationsHub.items.bugHunt.label'),
+        description: t('layout.integrationsHub.items.bugHunt.description'),
+        onClick: () => go(() => ui.openBugHunt(null)),
+      })
     }
     // Choosing the filing tracker / writeback is workspace CONFIG, not an integration, so it
     // sits as a quiet footer link under the sources rather than a competing row.

package/app/components/panels/InspectorPanel.vue

@@ -451,6 +451,19 @@ const showOriginalDescription = ref(false)
               : t('panels.inspector.connectTracker')
           }}
         </UButton>
+        <!-- Hunt this service's tracker board for a bug worth picking up. Scoped to the
+             selected container, so an adopted candidate lands here rather than wherever the
+             board's first frame happens to be. -->
+        <UButton
+          v-if="isContainer && tasks.anyOffered"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-radar"
+          @click="ui.openBugHunt(null, block!.id)"
+        >
+          {{ t('panels.inspector.huntBugs') }}
+        </UButton>
         <UButton
           v-if="isContainer && documents.available && documents.anyConnected"
           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>