@cat-factory/app 0.6.0

package/app/components/observability/StepMetricsBar.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { StepMetrics } from '~/types/execution'
+import {
+  formatMs,
+  formatTokens,
+  headroomColor,
+  headroomRatio,
+  pct,
+  transportRatio,
+} from '~/utils/observability'
+
+// Compact, at-a-glance LLM rollup for one pipeline step: token usage, an
+// output-limit headroom bar (how close the step ran to truncation), a
+// transport-vs-execution latency split, and error/warning badges. Rendered inline
+// on the step surfaces (step detail, pipeline timeline). A no-op when there are no
+// recorded calls. Clicking anywhere emits `inspect` so a parent can open the
+// drill-down panel.
+const props = defineProps<{ metrics: StepMetrics; clickable?: boolean }>()
+defineEmits<{ inspect: [] }>()
+
+const m = computed(() => props.metrics)
+const headroom = computed(() => headroomRatio(m.value))
+const transport = computed(() => transportRatio(m.value))
+const headroomTone = computed(() => headroomColor(headroom.value, m.value.truncatedCalls > 0))
+</script>
+
+<template>
+  <div
+    v-if="m.calls > 0"
+    class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-[12px]"
+    :class="
+      clickable ? 'cursor-pointer transition hover:border-slate-700 hover:bg-slate-900/70' : ''
+    "
+    :role="clickable ? 'button' : undefined"
+    @click="clickable ? $emit('inspect') : undefined"
+  >
+    <!-- header line: call count + tokens + warning/error badges -->
+    <div class="flex items-center gap-2">
+      <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
+      <span class="text-slate-300"> {{ m.calls }} {{ m.calls === 1 ? 'call' : 'calls' }} </span>
+      <span class="text-slate-500">·</span>
+      <span class="tabular-nums text-slate-400" title="Prompt / completion tokens">
+        {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
+      </span>
+      <div class="ml-auto flex items-center gap-1">
+        <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
+          {{ m.errors }} error{{ m.errors === 1 ? '' : 's' }}
+        </UBadge>
+        <UBadge v-if="m.warnings > 0" color="warning" variant="subtle" size="sm">
+          {{ m.warnings }} warning{{ m.warnings === 1 ? '' : 's' }}
+        </UBadge>
+        <UIcon v-if="clickable" name="i-lucide-chevron-right" class="h-3.5 w-3.5 text-slate-600" />
+      </div>
+    </div>
+
+    <!-- output-limit headroom -->
+    <div v-if="headroom !== null" class="mt-2">
+      <div class="flex items-center justify-between text-[11px]">
+        <span class="text-slate-500">Output limit</span>
+        <span class="tabular-nums" :class="headroomTone">
+          {{ formatTokens(m.peakCompletionTokens) }} /
+          {{ formatTokens(m.maxOutputTokens ?? 0) }} ({{ pct(headroom) }}%)
+        </span>
+      </div>
+      <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full rounded-full transition-all duration-500"
+          :class="
+            m.truncatedCalls > 0 || headroom >= 0.98
+              ? 'bg-rose-400'
+              : headroom >= 0.8
+                ? 'bg-amber-400'
+                : 'bg-emerald-400'
+          "
+          :style="{ width: `${Math.max(2, pct(headroom))}%` }"
+        />
+      </div>
+      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-rose-400">
+        {{ m.truncatedCalls }} call{{ m.truncatedCalls === 1 ? '' : 's' }} truncated at the limit
+      </p>
+    </div>
+
+    <!-- transport overhead vs model execution -->
+    <div v-if="transport !== null" class="mt-2">
+      <div class="flex items-center justify-between text-[11px]">
+        <span class="text-slate-500">Transport vs execution</span>
+        <span class="tabular-nums text-slate-400">
+          {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}
+        </span>
+      </div>
+      <div class="mt-1 flex h-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full bg-sky-400/80"
+          :style="{ width: `${pct(transport)}%` }"
+          title="Transport / proxy overhead"
+        />
+        <div class="h-full bg-indigo-400/80 flex-1" title="Model execution" />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/palettes/AgentPalette.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import type { AgentKind } from '~/types/domain'
+import { AGENT_CATEGORIES, OBSERVABILITY_GATE_ARCHETYPE } from '~/utils/catalog'
+
+const agents = useAgentsStore()
+const releaseHealth = useReleaseHealthStore()
+defineEmits<{ (e: 'add', kind: AgentKind): void }>()
+
+// The post-release-health gate is only meaningful — and only accepted by the backend —
+// with an observability integration connected, so it appears in the palette ONLY then.
+const palette = computed(() =>
+  releaseHealth.connection.connected
+    ? [...agents.archetypes, OBSERVABILITY_GATE_ARCHETYPE]
+    : agents.archetypes,
+)
+
+// Group the palette into the ordered catalog categories, plus a trailing "Custom" bucket
+// for runtime-added agents that carry no category. Empty groups are dropped.
+const groups = computed(() => {
+  const ordered = AGENT_CATEGORIES.map((cat) => ({
+    id: cat.id as string,
+    label: cat.label,
+    agents: palette.value.filter((a) => a.category === cat.id),
+  }))
+  const custom = palette.value.filter((a) => !a.category)
+  if (custom.length) ordered.push({ id: 'custom', label: 'Custom agents', agents: custom })
+  return ordered.filter((g) => g.agents.length)
+})
+
+// Persist which category sections are collapsed across builder opens.
+const collapsed = useLocalStorage<string[]>('cf.pipelineBuilder.collapsedAgentCategories', [])
+function isCollapsed(id: string) {
+  return collapsed.value.includes(id)
+}
+function toggle(id: string) {
+  collapsed.value = isCollapsed(id)
+    ? collapsed.value.filter((c) => c !== id)
+    : [...collapsed.value, id]
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <p class="px-1 text-[11px] text-slate-500">Click an agent to append it to the pipeline.</p>
+    <div class="space-y-2">
+      <section v-for="g in groups" :key="g.id">
+        <button
+          type="button"
+          class="flex w-full items-center gap-1.5 rounded px-1 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-slate-400 transition hover:text-slate-200"
+          @click="toggle(g.id)"
+        >
+          <UIcon
+            :name="isCollapsed(g.id) ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
+            class="h-3.5 w-3.5 shrink-0"
+          />
+          <span>{{ g.label }}</span>
+          <span class="ml-auto text-slate-600">{{ g.agents.length }}</span>
+        </button>
+        <div v-if="!isCollapsed(g.id)" class="mt-1 space-y-1.5">
+          <button
+            v-for="a in g.agents"
+            :key="a.kind"
+            type="button"
+            class="flex w-full items-center gap-2.5 rounded-lg border border-slate-700 bg-slate-800/60 p-2 text-left transition hover:border-slate-500 hover:bg-slate-800"
+            :title="a.description"
+            @click="$emit('add', a.kind)"
+          >
+            <div
+              class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
+              :style="{ backgroundColor: a.color + '22' }"
+            >
+              <UIcon :name="a.icon" class="h-4 w-4" :style="{ color: a.color }" />
+            </div>
+            <div class="min-w-0">
+              <div class="text-xs font-semibold text-slate-100">{{ a.label }}</div>
+              <div class="truncate text-[10px] text-slate-400">{{ a.description }}</div>
+            </div>
+            <UIcon name="i-lucide-plus" class="ml-auto h-4 w-4 shrink-0 text-slate-500" />
+          </button>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>