@cat-factory/app 0.138.1 → 0.140.0

package/app/components/panels/GenericStructuredResultView.vue

@@ -18,11 +18,9 @@ const agents = useAgentsStore()
 const { t } = useI18n()
 
 // Shared seam contract (open/blockId/close). No `onOpen` loader: this window reads its data
-// straight off the execution step, so there's nothing to fetch on open. `manageEscape: false`
-// — `ResultWindowShell` owns Escape (and focus trap + scroll lock + stacking).
-const { open, blockId, instanceId, stepIndex, close } = useResultView('generic-structured', {
-  manageEscape: false,
-})
+// straight off the execution step, so there's nothing to fetch on open. `ResultWindowShell`
+// owns Escape (and focus trap + scroll lock + stacking).
+const { open, blockId, instanceId, stepIndex, close } = useResultView('generic-structured')
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 
 const instance = computed(() =>

package/app/components/panels/MergerResultView.vue

@@ -18,11 +18,9 @@ const agents = useAgentsStore()
 const { t, n } = useI18n()
 
 // Shared seam contract (open/blockId/close). No loader: the verdict is read straight off
-// the execution step. `manageEscape: false` — `ResultWindowShell` owns Escape (and focus
-// trap + scroll lock + stacking) via the shared overlay behaviour.
-const { open, blockId, instanceId, stepIndex, close } = useResultView('merger', {
-  manageEscape: false,
-})
+// the execution step. `ResultWindowShell` owns Escape (and focus trap + scroll lock +
+// stacking) via the shared overlay behaviour.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('merger')
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 
 const instance = computed(() =>

package/app/components/panels/ResultWindowShell.vue

@@ -12,7 +12,7 @@
 // `useModalBehavior` (`@modular-vue/core`, the slice-5 overlay-host release): focus-trap
 // + focus-return, body-scroll lock, and a shared overlay STACK so the top overlay closes
 // first on Escape. A window becomes body-only markup wrapped in `<ResultWindowShell>`; it
-// keeps its `useResultView` seam but passes `manageEscape: false` (the shell owns Escape).
+// keeps its `useResultView` seam (Escape lives in this shell now, not in `useResultView`).
 //
 // The pick-one SELECTION of which window is active stays exactly the slice-2
 // `resolveComponentRegistry` in `StepResultViewHost.vue` — this shell only owns the

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

package/app/components/pipeline/PipelineBuilder.vue

@@ -310,6 +310,16 @@ async function clone(p: Pipeline) {
             class="mb-2"
           />
 
+          <!-- Description: the prose summary shown next to the step list in the pipeline pickers. -->
+          <UTextarea
+            v-model="pipelines.draftDescription"
+            :placeholder="t('pipeline.builder.descriptionPlaceholder')"
+            :rows="2"
+            autoresize
+            size="sm"
+            class="mb-2 w-full"
+          />
+
           <!-- Labels: organize the pipeline in the library (filter/search). -->
           <div class="mb-3 flex flex-wrap items-center gap-1.5">
             <UBadge

package/app/components/pipeline/PipelinePicker.vue

@@ -0,0 +1,120 @@
+<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).
+import { computed, ref } from 'vue'
+import type { Pipeline } from '~/types/domain'
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected pipeline id, or '' for the "none" option. */
+    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
+    /** Extra classes for the default trigger button (e.g. full-width in the modal). */
+    triggerClass?: string
+  }>(),
+  { triggerClass: '' },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+const { t } = useI18n()
+
+const open = ref(false)
+// The row currently hovered, driving the right-column preview. `undefined` ⇒ fall back to the
+// selected pipeline; the sentinel '' means the "none" row is hovered (show the none hint).
+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)
+
+/** The pipeline the right pane previews: the hovered row, else the current selection. */
+const previewPipeline = computed<Pipeline | null>(() => {
+  const id = hoverId.value ?? props.modelValue
+  return id ? (props.options.find((p) => p.id === id) ?? null) : null
+})
+
+function choose(id: string) {
+  emit('update:modelValue', id)
+  open.value = false
+}
+</script>
+
+<template>
+  <UPopover v-model:open="open" :content="{ align: 'start' }">
+    <slot name="trigger" :label="triggerLabel">
+      <UButton
+        color="neutral"
+        variant="subtle"
+        size="sm"
+        icon="i-lucide-workflow"
+        trailing-icon="i-lucide-chevron-down"
+        :class="triggerClass"
+        data-testid="pipeline-picker-trigger"
+      >
+        {{ triggerLabel }}
+      </UButton>
+    </slot>
+
+    <template #content>
+      <div
+        class="flex max-h-[24rem] 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>
+            <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"
+              :class="modelValue ? 'text-slate-300' : 'text-slate-100'"
+              data-testid="pipeline-option-none"
+              @mouseenter="hoverId = ''"
+              @click="choose('')"
+            >
+              <UIcon name="i-lucide-rotate-ccw" class="h-4 w-4 shrink-0 text-slate-400" />
+              <span class="flex-1 truncate">{{ noneLabel }}</span>
+              <UIcon
+                v-if="!modelValue"
+                name="i-lucide-check"
+                class="h-4 w-4 shrink-0 text-primary-400"
+              />
+            </button>
+          </li>
+          <li v-for="p in options" :key="p.id">
+            <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"
+              :class="modelValue === p.id ? 'text-slate-100' : 'text-slate-300'"
+              :data-testid="`pipeline-option-${p.id}`"
+              @mouseenter="hoverId = p.id"
+              @click="choose(p.id)"
+            >
+              <UIcon name="i-lucide-workflow" class="h-4 w-4 shrink-0 text-slate-400" />
+              <span class="flex-1 truncate">{{ p.name }}</span>
+              <UIcon
+                v-if="modelValue === p.id"
+                name="i-lucide-check"
+                class="h-4 w-4 shrink-0 text-primary-400"
+              />
+            </button>
+          </li>
+        </ul>
+
+        <!-- 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>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/app/components/pipeline/PipelinePreview.vue

@@ -0,0 +1,49 @@
+<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.
+import { computed } from 'vue'
+import type { Pipeline } from '~/types/domain'
+import { pipelineDisplaySteps } from '~/utils/pipeline'
+
+const props = defineProps<{ pipeline: Pipeline }>()
+const { t } = useI18n()
+
+const steps = computed(() => pipelineDisplaySteps(props.pipeline))
+</script>
+
+<template>
+  <div class="space-y-2" data-testid="pipeline-preview">
+    <div class="text-sm font-semibold text-slate-100">{{ pipeline.name }}</div>
+    <p
+      v-if="pipeline.description"
+      class="text-[12px] leading-snug text-slate-400"
+      data-testid="pipeline-preview-description"
+    >
+      {{ pipeline.description }}
+    </p>
+    <div>
+      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-slate-500">
+        <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>
+    </div>
+  </div>
+</template>