@cat-factory/app 0.6.0

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

@@ -0,0 +1,364 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import { agentKindMeta } from '~/utils/catalog'
+import { gateCompanionFor, COMPANION_STATE_META, isCompanionKind } from '~/utils/pipelineRender'
+import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+
+const props = defineProps<{ block: Block }>()
+
+const execution = useExecutionStore()
+const agentRuns = useAgentRunsStore()
+const ui = useUiStore()
+const models = useModelsStore()
+const reviews = useReviewStage()
+
+// The async stage this task's iterative reviewer gate (requirements-review / clarity-review)
+// is mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate is
+// doing background work and needs NO human, so its "Review" button is replaced by a working
+// indicator.
+const reviewStage = computed(() => reviews.stageForBlock(props.block.id))
+const reviewStageLabel = computed(() =>
+  reviewStage.value === 'incorporating'
+    ? 'Incorporating…'
+    : reviewStage.value === 'reviewing'
+      ? 'Re-reviewing…'
+      : null,
+)
+
+const instance = computed(() => execution.getInstance(props.block.executionId))
+// A failed run is no longer executing: a step left mid-flight must stop showing
+// its live "Spinning up…" phase (the shared failure banner renders below).
+const runFailed = computed(() => instance.value?.status === 'failed')
+
+// A failed pipeline run surfaces the shared failure banner + retry — the
+// execution failure surface that the old `pr_ready` flip used to hide.
+const failedRun = computed(() => {
+  const run = agentRuns.byBlock[props.block.id]
+  return run && run.status === 'failed' ? run : null
+})
+
+const pr = computed(() => props.block.pullRequest)
+/** A PR is merged once the block is `done`; otherwise it is open awaiting merge. */
+const prMerged = computed(() => props.block.status === 'done')
+const prLabel = computed(() => {
+  const number = pr.value?.number
+  return number ? `PR #${number}` : 'Pull request'
+})
+
+const stepLabel: Record<string, string> = {
+  pending: 'Pending',
+  working: 'Working',
+  waiting_decision: 'Needs decision',
+  done: 'Done',
+}
+
+/** A step left mid-flight (`working`) on a failed run gave up — not still working. */
+function stepFailed(s: { state: string }) {
+  return runFailed.value && s.state === 'working'
+}
+
+/** A gated step parked for approval reads "Needs approval", not "Needs decision". */
+function labelForStep(s: {
+  state: string
+  agentKind?: string
+  approval?: { status: string } | null
+  companion?: { exceeded?: boolean } | null
+  startingContainer?: boolean
+}) {
+  // A step left mid-flight on a failed run reads "Failed", not the misleading "Working".
+  if (stepFailed(s)) return 'Failed'
+  // A reviewer gate mid-cycle reads its working stage, not "Needs approval".
+  if (reviews.isBackground(s.agentKind, props.block.id) && reviewStageLabel.value)
+    return reviewStageLabel.value
+  // A companion that spent its rework budget needs a decision, not an approval.
+  if (s.approval?.status === 'pending' && s.companion?.exceeded) return 'Needs decision'
+  if (s.approval?.status === 'pending') return 'Needs approval'
+  // A container-backed step whose container is still cold-booting (only while the
+  // run is live — a failed run's mid-flight step is no longer spinning up).
+  if (s.startingContainer && !runFailed.value) return 'Spinning up…'
+  return stepLabel[s.state]
+}
+
+function openDecisionFor(decisionId: string) {
+  if (instance.value) ui.openDecision(instance.value.id, decisionId)
+}
+
+function openApprovalFor(approvalId: string) {
+  if (instance.value) ui.openApprovalDetail(instance.value.id, approvalId)
+}
+
+// Clicking any agent opens its step-detail overlay — execution metadata (state,
+// timing, model, subtasks) plus the full prose output when the agent produced one.
+function openStep(i: number) {
+  if (instance.value) ui.openStepDetail(instance.value.id, i)
+}
+
+// Stop the run WITHOUT deleting it: halts the container + driver and records a
+// `cancelled` failure, leaving the run readable + retryable (the block goes
+// `blocked`). The destructive reset (delete the run, return the task to `planned`)
+// is a separate, explicit action.
+const stopping = ref(false)
+async function stopRun() {
+  if (!instance.value || stopping.value) return
+  stopping.value = true
+  try {
+    await execution.stop(instance.value.id)
+  } finally {
+    stopping.value = false
+  }
+}
+const resetting = ref(false)
+async function resetRun() {
+  if (resetting.value) return
+  resetting.value = true
+  try {
+    await execution.cancel(props.block.id)
+  } finally {
+    resetting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- running pipeline -->
+    <div v-if="instance">
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ instance.pipelineName }}
+        </span>
+        <div class="flex items-center gap-1">
+          <!-- Stop without deleting: halts the run but keeps it readable + retryable. -->
+          <UButton
+            icon="i-lucide-square"
+            color="warning"
+            variant="ghost"
+            size="xs"
+            :loading="stopping"
+            :disabled="resetting"
+            title="Stop the run but keep it (readable + retryable)"
+            @click="stopRun"
+          >
+            Stop
+          </UButton>
+          <!-- Destructive: discard the run and return the task to planned. -->
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            size="xs"
+            :loading="resetting"
+            :disabled="stopping"
+            title="Discard this run and reset the task to planned"
+            @click="resetRun"
+          >
+            Reset
+          </UButton>
+        </div>
+      </div>
+      <ul class="space-y-1">
+        <li
+          v-for="(s, i) in instance.steps"
+          :key="i"
+          class="rounded-md px-2 py-1"
+          :class="i === instance.currentStep ? 'bg-slate-800/70' : ''"
+        >
+          <div class="flex items-center gap-2">
+            <!-- Every agent is clickable: it opens the step-detail overlay (timing,
+                 model, subtasks + the prose output when there is one). -->
+            <button
+              type="button"
+              class="flex min-w-0 cursor-pointer items-center gap-2 text-left transition hover:text-white"
+              :title="s.output ? 'View details & read output' : 'View step details'"
+              @click="openStep(i)"
+            >
+              <UIcon
+                :name="agentKindMeta(s.agentKind).icon"
+                class="h-4 w-4 shrink-0"
+                :style="{ color: agentKindMeta(s.agentKind).color }"
+              />
+              <span class="truncate text-xs text-slate-200">
+                {{ agentKindMeta(s.agentKind).label }}
+              </span>
+              <span
+                v-if="isCompanionKind(s.agentKind)"
+                class="shrink-0 rounded bg-slate-700/60 px-1 text-[9px] font-medium uppercase tracking-wide text-slate-300"
+                title="Companion of a producer step"
+              >
+                Companion
+              </span>
+              <UIcon
+                :name="s.output ? 'i-lucide-book-open-text' : 'i-lucide-info'"
+                class="h-3.5 w-3.5 shrink-0 text-slate-500"
+              />
+            </button>
+            <span
+              v-if="s.subtasks && s.subtasks.total > 0"
+              class="ml-auto font-mono text-[10px] tabular-nums text-slate-300"
+              :title="
+                s.subtasks.inProgress > 0
+                  ? `${s.subtasks.completed} of ${s.subtasks.total} subtasks done, ${s.subtasks.inProgress} in progress`
+                  : `${s.subtasks.completed} of ${s.subtasks.total} subtasks done`
+              "
+            >
+              {{ s.subtasks.completed }}/{{ s.subtasks.total }}
+            </span>
+            <span
+              class="inline-flex items-center gap-1 text-[10px]"
+              :class="[
+                stepFailed(s) ? 'text-rose-400' : 'text-slate-400',
+                { 'ml-auto': !s.subtasks },
+              ]"
+            >
+              <UIcon v-if="stepFailed(s)" name="i-lucide-circle-x" class="h-3 w-3 shrink-0" />
+              {{ labelForStep(s) }}
+            </span>
+            <UButton
+              v-if="s.decision && !s.decision.chosen"
+              color="warning"
+              variant="soft"
+              size="xs"
+              icon="i-lucide-circle-help"
+              @click="openDecisionFor(s.decision.id)"
+            >
+              Resolve
+            </UButton>
+            <!-- reviewer gate folding/re-reviewing in the background: a working
+                 indicator, NOT a "Review" gate (the human is summoned only if needed) -->
+            <span
+              v-else-if="reviews.isBackground(s.agentKind, block.id) && reviewStage"
+              class="inline-flex shrink-0 items-center gap-1 text-[10px] text-indigo-300"
+            >
+              <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
+              {{ reviewStageLabel }}
+            </span>
+            <!-- A companion that spent its rework budget parks on the iteration-cap
+                 gate: it needs a 3-way DECISION (one more round / proceed / stop &
+                 reset), not a plain approval — flag it distinctly so it can't read as
+                 a normal "Approve". Opens the same detail surface (IterationCapPrompt). -->
+            <UButton
+              v-else-if="s.approval && s.approval.status === 'pending' && s.companion?.exceeded"
+              color="error"
+              variant="soft"
+              size="xs"
+              icon="i-lucide-alert-triangle"
+              @click="openApprovalFor(s.approval.id)"
+            >
+              Decide
+            </UButton>
+            <UButton
+              v-else-if="s.approval && s.approval.status === 'pending'"
+              color="warning"
+              variant="soft"
+              size="xs"
+              :icon="
+                agentKindMeta(s.agentKind).resultView
+                  ? 'i-lucide-clipboard-check'
+                  : 'i-lucide-shield-check'
+              "
+              @click="openApprovalFor(s.approval.id)"
+            >
+              {{ agentKindMeta(s.agentKind).resultView ? 'Review' : 'Approve' }}
+            </UButton>
+          </div>
+          <div
+            v-if="s.subtasks && s.subtasks.total > 0"
+            class="mt-1 ml-6 h-1 overflow-hidden rounded-full bg-slate-700/60"
+          >
+            <div
+              class="h-full rounded-full bg-indigo-400 transition-all duration-500"
+              :style="{ width: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
+            />
+          </div>
+          <div
+            v-if="s.model"
+            class="mt-0.5 flex items-center gap-1 pl-6 text-[10px] text-slate-500"
+            :title="s.model"
+          >
+            <UIcon name="i-lucide-cpu" class="h-3 w-3" />
+            {{ models.labelForRef(s.model) }}
+          </div>
+          <!-- Prompt-fragment standards the library selected for this step. -->
+          <div
+            v-if="s.selectedFragmentIds && s.selectedFragmentIds.length"
+            class="mt-0.5 flex flex-wrap items-center gap-1 pl-6 text-[10px] text-slate-500"
+            :title="`Best-practice fragments folded into this step: ${s.selectedFragmentIds.join(', ')}`"
+          >
+            <UIcon name="i-lucide-book-marked" class="h-3 w-3 shrink-0" />
+            <span>{{ s.selectedFragmentIds.length }} standard(s) applied</span>
+          </div>
+          <!-- Conditionally-run companion (the Tester's fixer): possible/running/
+               completed/skipped, so it's clear whether a fix pass ran. -->
+          <div
+            v-if="gateCompanionFor(s, runFailed)"
+            class="mt-0.5 flex items-center gap-1.5 pl-6 text-[10px]"
+          >
+            <UIcon
+              :name="agentKindMeta(gateCompanionFor(s, runFailed)!.kind).icon"
+              class="h-3 w-3 shrink-0"
+              :class="[
+                COMPANION_STATE_META[gateCompanionFor(s, runFailed)!.state].text,
+                gateCompanionFor(s, runFailed)!.state === 'running' ? 'animate-spin' : '',
+              ]"
+            />
+            <span class="text-slate-400">
+              {{ agentKindMeta(gateCompanionFor(s, runFailed)!.kind).label }} (companion)
+            </span>
+            <span
+              class="ml-auto"
+              :class="COMPANION_STATE_META[gateCompanionFor(s, runFailed)!.state].text"
+            >
+              {{ COMPANION_STATE_META[gateCompanionFor(s, runFailed)!.state].label }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- failed run: shared failure banner + retry -->
+    <AgentFailureCard v-if="failedRun" :run="failedRun" />
+
+    <!-- Open PR: link straight to it on GitHub -->
+    <div v-if="pr" class="space-y-2">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Pull request
+      </span>
+      <UButton
+        :to="pr.url"
+        target="_blank"
+        rel="noopener"
+        external
+        color="neutral"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-git-pull-request"
+        trailing-icon="i-lucide-external-link"
+        block
+      >
+        <span class="flex w-full items-center gap-2">
+          {{ prLabel }}
+          <UBadge :color="prMerged ? 'success' : 'info'" variant="subtle" size="sm" class="ml-auto">
+            {{ prMerged ? 'Merged' : 'Open' }}
+          </UBadge>
+        </span>
+      </UButton>
+      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-[10px] text-slate-500">
+        <UIcon name="i-lucide-git-branch" class="h-3 w-3 shrink-0" />
+        <span class="truncate" :title="pr.branch">{{ pr.branch }}</span>
+      </p>
+    </div>
+
+    <!-- PR ready: merge -->
+    <UButton
+      v-if="block.status === 'pr_ready'"
+      color="success"
+      variant="solid"
+      size="sm"
+      icon="i-lucide-git-merge"
+      block
+      @click="execution.mergePr(block.id)"
+    >
+      Merge PR
+    </UButton>
+  </div>
+</template>

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

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import type { Block } from '~/types/domain'
+
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const mergePresets = useMergePresetsStore()
+const pipelines = usePipelinesStore()
+const accounts = useAccountsStore()
+
+// ---- responsible product person --------------------------------------------
+// The account member (a `product` role-holder) accountable for this task; they are
+// notified when requirement review flags findings. Picks from the account roster.
+onMounted(() => {
+  const id = accounts.activeAccountId
+  if (id && accounts.members.length === 0) void accounts.loadRoster(id).catch(() => {})
+})
+const productMembers = computed(() => accounts.members.filter((m) => m.roles.includes('product')))
+const responsible = computed(() =>
+  accounts.members.find((m) => m.userId === props.block.responsibleProductUserId),
+)
+const responsibleLabel = computed(() => {
+  const m = responsible.value
+  if (!m) return undefined
+  return m.name || m.email || m.userId
+})
+const responsibleMenu = computed(() => [
+  [
+    { label: 'Unassigned', icon: 'i-lucide-user-x', onSelect: () => setResponsible('') },
+    ...productMembers.value.map((m) => ({
+      label: m.name || m.email || m.userId,
+      icon: 'i-lucide-user',
+      onSelect: () => setResponsible(m.userId),
+    })),
+  ],
+])
+function setResponsible(userId: string) {
+  board.updateBlock(props.block.id, { responsibleProductUserId: userId })
+}
+
+// ---- merge policy preset ---------------------------------------------------
+// Which merge threshold preset governs this task's auto-merge decision + CI-fixer
+// budget. None selected → the workspace default preset. (The old confidence-based
+// auto-merge threshold is gone; the `merger` step gates on this policy instead.)
+const selectedPreset = computed(() => mergePresets.resolve(props.block.mergePresetId))
+const presetMenu = computed(() => [
+  [
+    {
+      label: mergePresets.defaultPreset
+        ? `Default (${mergePresets.defaultPreset.name})`
+        : 'Workspace default',
+      icon: 'i-lucide-rotate-ccw',
+      onSelect: () => setPreset(''),
+    },
+    ...mergePresets.presets.map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-git-merge',
+      onSelect: () => setPreset(p.id),
+    })),
+  ],
+])
+function setPreset(id: string) {
+  board.updateBlock(props.block.id, { mergePresetId: id })
+}
+
+// ---- pipeline --------------------------------------------------------------
+// The pipeline this task's Run controls default to. None selected → the user picks
+// at run time (the board falls back to the first defined pipeline).
+const selectedPipeline = computed(() =>
+  props.block.pipelineId ? pipelines.getPipeline(props.block.pipelineId) : undefined,
+)
+const pipelineMenu = computed(() => [
+  [
+    {
+      label: 'No default',
+      icon: 'i-lucide-rotate-ccw',
+      onSelect: () => setPipeline(''),
+    },
+    ...pipelines.pipelines.map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-workflow',
+      onSelect: () => setPipeline(p.id),
+    })),
+  ],
+])
+function setPipeline(id: string) {
+  board.updateBlock(props.block.id, { pipelineId: id })
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- pipeline -->
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Pipeline
+        </span>
+        <UDropdownMenu :items="pipelineMenu">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-workflow"
+            trailing-icon="i-lucide-chevron-down"
+          />
+        </UDropdownMenu>
+      </div>
+      <div v-if="selectedPipeline" class="flex items-center gap-1">
+        <UBadge
+          color="primary"
+          variant="subtle"
+          size="sm"
+          class="cursor-pointer"
+          @click="setPipeline('')"
+        >
+          {{ selectedPipeline.name }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        </UBadge>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        No default — pick a pipeline when you run this task.
+      </div>
+    </div>
+
+    <!-- merge policy preset -->
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Merge policy
+        </span>
+        <UDropdownMenu :items="presetMenu">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-git-merge"
+            trailing-icon="i-lucide-chevron-down"
+          />
+        </UDropdownMenu>
+      </div>
+      <div v-if="selectedPreset" class="text-[11px] text-slate-400">
+        <span class="text-slate-300">{{ selectedPreset.name }}</span>
+        — auto-merge when complexity ≤ {{ Math.round(selectedPreset.maxComplexity * 100) }}%, risk ≤
+        {{ Math.round(selectedPreset.maxRisk * 100) }}%, impact ≤
+        {{ Math.round(selectedPreset.maxImpact * 100) }}%; up to
+        {{ selectedPreset.ciMaxAttempts }} CI-fix attempts.
+        <span v-if="!block.mergePresetId" class="text-slate-500">(workspace default)</span>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        No preset configured — the merger raises a review notification for every PR.
+      </div>
+    </div>
+
+    <!-- responsible product person -->
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Responsible product
+        </span>
+        <UDropdownMenu :items="responsibleMenu">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-user"
+            trailing-icon="i-lucide-chevron-down"
+          />
+        </UDropdownMenu>
+      </div>
+      <div v-if="responsibleLabel" class="flex items-center gap-1">
+        <UBadge
+          color="primary"
+          variant="subtle"
+          size="sm"
+          class="cursor-pointer"
+          @click="setResponsible('')"
+        >
+          {{ responsibleLabel }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        </UBadge>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        Unassigned — set a product owner to notify them when requirement review flags this task.
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const fragments = useFragmentsStore()
+
+// ---- best-practice prompt fragments ----------------------------------------
+// Selected fragments (resolved against the catalog; unknown ids are dropped).
+const selectedFragments = computed(() =>
+  (props.block.fragmentIds ?? [])
+    .map((id) => fragments.getFragment(id))
+    .filter((f): f is NonNullable<typeof f> => !!f),
+)
+
+// Picker menu: fragments suitable for this block's type, not already selected,
+// grouped by category so the dropdown reads like the catalog.
+const fragmentMenu = computed(() => {
+  const selected = new Set(props.block.fragmentIds ?? [])
+  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  for (const f of fragments.forBlockType(props.block.type)) {
+    if (selected.has(f.id)) continue
+    const items = groups.get(f.category) ?? []
+    items.push({ label: f.title, onSelect: () => addFragment(f.id) })
+    groups.set(f.category, items)
+  }
+  return [...groups.values()]
+})
+
+function addFragment(id: string) {
+  const list = props.block.fragmentIds ? [...props.block.fragmentIds] : []
+  if (!list.includes(id)) list.push(id)
+  board.updateBlock(props.block.id, { fragmentIds: list })
+}
+
+function removeFragment(id: string) {
+  if (!props.block.fragmentIds) return
+  board.updateBlock(props.block.id, {
+    fragmentIds: props.block.fragmentIds.filter((x) => x !== id),
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- module assignment -->
+    <div>
+      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Module
+      </div>
+      <UInput
+        v-model="block.moduleName"
+        size="sm"
+        class="w-full"
+        placeholder="e.g. Sessions (created on implement if new)"
+        icon="i-lucide-package"
+      />
+    </div>
+
+    <!-- best practices (prompt fragments) -->
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Best practices
+        </span>
+        <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-plus"
+            trailing-icon="i-lucide-chevron-down"
+          />
+        </UDropdownMenu>
+      </div>
+      <div v-if="selectedFragments.length" class="mb-1 flex flex-wrap gap-1">
+        <UBadge
+          v-for="f in selectedFragments"
+          :key="f.id"
+          color="primary"
+          variant="subtle"
+          size="sm"
+          class="cursor-pointer"
+          :title="f.summary"
+          @click="removeFragment(f.id)"
+        >
+          {{ f.title }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        </UBadge>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        None — agents follow their default guidance.
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/pipeline/AgentKindIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// The single rendering path for an agent kind's icon (+ optional label) anywhere a
+// pipeline or run lists its steps. Resolves display metadata through
+// `agentKindMeta`, which is total over every kind — palette archetypes, custom
+// agents and the engine's system kinds (ci / merger / blueprints / conflicts) — so
+// a saved pipeline that contains a system kind can never blow up the renderer.
+import { computed } from 'vue'
+import { agentKindMeta } from '~/utils/catalog'
+
+const props = withDefaults(
+  defineProps<{ kind: string; showLabel?: boolean; iconClass?: string }>(),
+  { showLabel: false, iconClass: 'h-4 w-4' },
+)
+
+const meta = computed(() => agentKindMeta(props.kind))
+
+// Hover tooltip explaining what the agent does. Lead with the label (the icon
+// alone is ambiguous) then the catalog description, so every place that renders
+// an agent step through this single path gets the same explanation on hover.
+const tooltip = computed(() =>
+  meta.value.description ? `${meta.value.label} — ${meta.value.description}` : meta.value.label,
+)
+</script>
+
+<template>
+  <span class="inline-flex items-center gap-2" :title="tooltip">
+    <UIcon :name="meta.icon" :class="iconClass" class="shrink-0" :style="{ color: meta.color }" />
+    <span v-if="showLabel" class="text-xs text-slate-100">{{ meta.label }}</span>
+  </span>
+</template>