@cat-factory/app 0.6.0

package/app/components/panels/ObservabilityPanel.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import type { LlmCallMetric } from '~/types/execution'
+import { agentKindMeta } from '~/utils/catalog'
+import { formatMs, formatTokens, pct } from '~/utils/observability'
+
+// Drill-down overlay for a run's LLM activity. Opened via
+// `ui.openObservability(instanceId)` from a step surface; loads the full per-call
+// detail (prompts, responses, token usage, output-limit headroom, the
+// transport-vs-execution latency split) from the observability store and lists
+// every model call, each expandable to its full prompt + response. Offers the
+// LLM-friendly JSON export for handing a run to a model to analyse.
+const ui = useUiStore()
+const execution = useExecutionStore()
+const board = useBoardStore()
+const observability = useObservabilityStore()
+
+const executionId = computed(() => ui.observabilityInstanceId)
+const open = computed(() => !!executionId.value)
+const instance = computed(() => execution.getInstance(executionId.value ?? undefined))
+const block = computed(() => (instance.value ? board.getBlock(instance.value.blockId) : undefined))
+
+const calls = computed<LlmCallMetric[]>(() =>
+  executionId.value ? observability.callsFor(executionId.value) : [],
+)
+const loading = computed(() => !!executionId.value && observability.isLoading(executionId.value))
+const exporting = computed(
+  () => !!executionId.value && observability.isExporting(executionId.value),
+)
+const error = computed(() =>
+  executionId.value ? (observability.errors[executionId.value] ?? null) : null,
+)
+
+// Load (and refresh) whenever a different run's panel opens.
+watch(executionId, (id) => {
+  if (id) void observability.load(id)
+})
+
+// Run-level totals, derived from the loaded calls.
+const totals = computed(() => {
+  const c = calls.value
+  const upstreamMs = sum(c, (x) => x.upstreamMs)
+  const overheadMs = sum(c, (x) => x.overheadMs)
+  const total = upstreamMs + overheadMs
+  return {
+    calls: c.length,
+    promptTokens: sum(c, (x) => x.promptTokens),
+    completionTokens: sum(c, (x) => x.completionTokens),
+    upstreamMs,
+    overheadMs,
+    transportPct: total > 0 ? pct(overheadMs / total) : null,
+    errors: c.filter((x) => !x.ok).length,
+    warnings: c.filter((x) => x.ok && isWarning(x.finishReason)).length,
+    truncated: c.filter((x) => x.finishReason === 'length').length,
+  }
+})
+
+function sum(items: LlmCallMetric[], pick: (m: LlmCallMetric) => number): number {
+  return items.reduce((acc, m) => acc + pick(m), 0)
+}
+function isWarning(finishReason: string | null): boolean {
+  return finishReason === 'length' || finishReason === 'content_filter'
+}
+
+const expanded = reactive<Record<string, boolean>>({})
+function toggle(c: LlmCallMetric) {
+  expanded[c.id] = !expanded[c.id]
+  // A live-streamed row arrives without its prompt/response bodies (the event stays
+  // small). On first expand, backfill them from the persisted metrics endpoint —
+  // `load` replaces the list with the full rows (same ids), so the open row fills in.
+  if (expanded[c.id] && !c.promptText && !c.responseText && executionId.value && !loading.value) {
+    void observability.load(executionId.value)
+  }
+}
+
+function agentMeta(kind: string) {
+  return agentKindMeta(kind)
+}
+function clock(ms: number): string {
+  return new Date(ms).toLocaleTimeString()
+}
+/** Pretty-print the prompt JSON; fall back to the raw string if it isn't JSON. */
+function prettyPrompt(raw: string): string {
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    return raw
+  }
+}
+function headroomOf(m: LlmCallMetric): number | null {
+  if (m.requestMaxTokens == null || m.requestMaxTokens <= 0) return null
+  return pct(Math.min(1, m.completionTokens / m.requestMaxTokens))
+}
+
+function close() {
+  ui.closeObservability()
+}
+onKeyStroke('Escape', () => {
+  if (open.value) close()
+})
+function exportJson() {
+  if (executionId.value) void observability.downloadExport(executionId.value)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="obs-fade">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        role="dialog"
+        aria-modal="true"
+      >
+        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/15">
+            <UIcon name="i-lucide-activity" class="h-5 w-5 text-sky-400" />
+          </div>
+          <div class="min-w-0">
+            <h1 class="truncate text-base font-semibold text-white">Model activity</h1>
+            <p v-if="block" class="truncate text-xs text-slate-500">
+              {{ block.title }} · {{ instance?.pipelineName }}
+            </p>
+          </div>
+          <div class="ml-auto flex items-center gap-1.5">
+            <UButton
+              icon="i-lucide-download"
+              color="neutral"
+              variant="soft"
+              size="sm"
+              :loading="exporting"
+              :disabled="!calls.length"
+              title="Download an LLM-friendly JSON export of this run"
+              @click="exportJson"
+            >
+              Export JSON
+            </UButton>
+            <UButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              title="Close (Esc)"
+              @click="close"
+            />
+          </div>
+        </header>
+
+        <div class="flex-1 overflow-auto px-6 py-6">
+          <div class="mx-auto max-w-4xl space-y-5">
+            <!-- run-level summary -->
+            <section class="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
+              <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-4">
+                <div>
+                  <dt class="text-[11px] uppercase tracking-wide text-slate-500">Calls</dt>
+                  <dd class="mt-0.5 tabular-nums text-slate-200">{{ totals.calls }}</dd>
+                </div>
+                <div>
+                  <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+                    Tokens (in / out)
+                  </dt>
+                  <dd class="mt-0.5 tabular-nums text-slate-200">
+                    {{ formatTokens(totals.promptTokens) }} /
+                    {{ formatTokens(totals.completionTokens) }}
+                  </dd>
+                </div>
+                <div>
+                  <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+                    Transport overhead
+                  </dt>
+                  <dd class="mt-0.5 tabular-nums text-slate-200">
+                    <span v-if="totals.transportPct !== null">
+                      {{ totals.transportPct }}% · {{ formatMs(totals.overheadMs) }}
+                    </span>
+                    <span v-else class="text-slate-500">—</span>
+                  </dd>
+                </div>
+                <div>
+                  <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+                    Model execution
+                  </dt>
+                  <dd class="mt-0.5 tabular-nums text-slate-200">
+                    {{ formatMs(totals.upstreamMs) }}
+                  </dd>
+                </div>
+              </dl>
+              <div class="mt-3 flex flex-wrap gap-1.5">
+                <UBadge v-if="totals.errors" color="error" variant="subtle" size="sm">
+                  {{ totals.errors }} error{{ totals.errors === 1 ? '' : 's' }}
+                </UBadge>
+                <UBadge v-if="totals.warnings" color="warning" variant="subtle" size="sm">
+                  {{ totals.warnings }} warning{{ totals.warnings === 1 ? '' : 's' }}
+                </UBadge>
+                <UBadge v-if="totals.truncated" color="error" variant="subtle" size="sm">
+                  {{ totals.truncated }} truncated
+                </UBadge>
+              </div>
+            </section>
+
+            <!-- states -->
+            <p
+              v-if="loading && !calls.length"
+              class="flex items-center gap-2 py-8 text-center text-sm text-slate-500 justify-center"
+            >
+              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" /> Loading model
+              activity…
+            </p>
+            <p
+              v-else-if="error"
+              class="rounded-lg border border-dashed border-rose-900/60 py-6 text-center text-sm text-rose-400"
+            >
+              {{ error }}
+            </p>
+            <p
+              v-else-if="!calls.length"
+              class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
+            >
+              No model calls recorded for this run.
+            </p>
+
+            <!-- per-call list -->
+            <ul v-else class="space-y-2">
+              <li
+                v-for="c in calls"
+                :key="c.id"
+                class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900/40"
+                :class="!c.ok ? 'border-rose-900/60' : ''"
+              >
+                <button
+                  class="flex w-full items-center gap-3 px-4 py-2.5 text-left transition hover:bg-slate-900/70"
+                  @click="toggle(c)"
+                >
+                  <UIcon
+                    name="i-lucide-chevron-right"
+                    class="h-4 w-4 shrink-0 text-slate-500 transition-transform"
+                    :class="expanded[c.id] ? 'rotate-90' : ''"
+                  />
+                  <UIcon
+                    :name="agentMeta(c.agentKind).icon"
+                    class="h-4 w-4 shrink-0"
+                    :style="{ color: agentMeta(c.agentKind).color }"
+                  />
+                  <span class="text-[13px] text-slate-200">{{ agentMeta(c.agentKind).label }}</span>
+                  <span
+                    class="hidden truncate text-[11px] text-slate-500 sm:inline"
+                    :title="c.model"
+                  >
+                    {{ c.provider }}:{{ c.model }}
+                  </span>
+                  <div
+                    class="ml-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
+                  >
+                    <span
+                      :title="`${c.promptTokens} prompt / ${c.completionTokens} completion tokens`"
+                    >
+                      {{ formatTokens(c.promptTokens) }}↑ {{ formatTokens(c.completionTokens) }}↓
+                    </span>
+                    <span v-if="headroomOf(c) !== null" :title="'Output used vs limit'">
+                      {{ headroomOf(c) }}%
+                    </span>
+                    <span title="Transport overhead / model execution">
+                      {{ formatMs(c.overheadMs) }} / {{ formatMs(c.upstreamMs) }}
+                    </span>
+                    <UBadge v-if="!c.ok" color="error" variant="subtle" size="sm">
+                      {{ c.httpStatus ?? 'error' }}
+                    </UBadge>
+                    <UBadge
+                      v-else-if="isWarning(c.finishReason)"
+                      color="warning"
+                      variant="subtle"
+                      size="sm"
+                    >
+                      {{ c.finishReason }}
+                    </UBadge>
+                    <span v-else class="text-slate-600">{{ c.finishReason ?? 'ok' }}</span>
+                    <span class="hidden text-slate-600 md:inline">{{ clock(c.createdAt) }}</span>
+                  </div>
+                </button>
+
+                <div v-if="expanded[c.id]" class="border-t border-slate-800 px-4 py-3 space-y-3">
+                  <p v-if="c.errorMessage" class="text-[12px] text-rose-400">
+                    {{ c.errorMessage }}
+                  </p>
+                  <div class="flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-slate-500">
+                    <span>{{ c.messageCount }} messages</span>
+                    <span>{{ c.toolCount }} tools</span>
+                    <span>{{ c.streaming ? 'streamed' : 'buffered' }}</span>
+                    <span v-if="c.requestMaxTokens != null"
+                      >max_tokens {{ c.requestMaxTokens }}</span
+                    >
+                    <span v-if="c.cachedPromptTokens > 0" class="text-emerald-400"
+                      >{{ c.cachedPromptTokens }}/{{ c.promptTokens }} prompt cached</span
+                    >
+                    <span>total {{ formatMs(c.totalMs) }}</span>
+                  </div>
+                  <div>
+                    <div
+                      class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500"
+                    >
+                      <span>Prompt</span>
+                      <span
+                        v-if="c.promptPrefixCount > 0"
+                        class="normal-case tracking-normal text-slate-600"
+                      >
+                        (new messages only — {{ c.promptPrefixCount }} earlier omitted)
+                      </span>
+                    </div>
+                    <pre
+                      class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
+                      >{{ prettyPrompt(c.promptText) }}</pre
+                    >
+                  </div>
+                  <div>
+                    <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                      Response
+                    </div>
+                    <pre
+                      class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
+                      >{{ c.responseText || '—' }}</pre
+                    >
+                  </div>
+                  <div v-if="c.reasoningText">
+                    <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+                      Reasoning
+                    </div>
+                    <pre
+                      class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-400"
+                      >{{ c.reasoningText }}</pre
+                    >
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.obs-fade-enter-active,
+.obs-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.obs-fade-enter-from,
+.obs-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/panels/StepMetadataCard.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { AgentState, PipelineStep, CompanionVerdict } from '~/types/execution'
+import { subtaskIconClass } from '~/utils/pipelineRender'
+import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
+
+// The step's metadata card body: state/timing/model/run id, the container cold-boot
+// phase, the live subtask breakdown, the LLM observability rollup, the applied
+// standards, any raised decision/approval gate, and the companion verdict sequence.
+// The scroll-spy `#step-details` section wrapper + ref stay in the parent reader.
+const props = defineProps<{
+  step: PipelineStep
+  runFailed: boolean
+  durationLabel: string | null
+  isRunning: boolean
+  stepNumber: number
+  totalSteps: number
+  instanceId?: string
+  companionVerdicts: CompanionVerdict[]
+  latestVerdict: CompanionVerdict | null
+}>()
+
+const ui = useUiStore()
+const models = useModelsStore()
+
+const STATE_META: Record<AgentState, { label: string; color: string }> = {
+  pending: { label: 'Pending', color: '#64748b' },
+  working: { label: 'Working', color: '#6366f1' },
+  waiting_decision: { label: 'Needs input', color: '#f59e0b' },
+  done: { label: 'Done', color: '#22c55e' },
+}
+
+// The state badge: a step left mid-flight on a failed run keeps `state: 'working'`,
+// so report it as "Failed" rather than the misleading "Working".
+const stateMeta = computed(() => {
+  const s = props.step
+  if (props.runFailed && s.state === 'working') return { label: 'Failed', color: '#ef4444' }
+  return STATE_META[s.state]
+})
+
+const modelLabel = computed(() => (props.step.model ? models.labelForRef(props.step.model) : null))
+
+const ITEM_ICON: Record<string, string> = {
+  completed: 'i-lucide-check-circle-2',
+  in_progress: 'i-lucide-loader-circle',
+  pending: 'i-lucide-circle',
+}
+
+const pctOf = (n: number) => `${Math.round(n * 100)}%`
+
+function formatClock(ms?: number | null): string | null {
+  return ms ? new Date(ms).toLocaleString() : null
+}
+
+async function copyRunId() {
+  const id = props.step.runId ?? props.instanceId
+  if (id) await navigator.clipboard?.writeText(id)
+}
+
+function openObservability() {
+  if (props.instanceId) ui.openObservability(props.instanceId)
+}
+</script>
+
+<template>
+  <div>
+    <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-3">
+      <div>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">State</dt>
+        <dd class="mt-0.5 flex items-center gap-1.5 text-slate-200">
+          <UIcon
+            v-if="runFailed && step.state === 'working'"
+            name="i-lucide-circle-x"
+            class="h-3.5 w-3.5 shrink-0"
+            :style="{ color: stateMeta.color }"
+          />
+          <span v-else class="h-2 w-2 rounded-full" :style="{ backgroundColor: stateMeta.color }" />
+          {{ stateMeta.label }}
+        </dd>
+      </div>
+      <div>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Duration</dt>
+        <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-slate-200">
+          <UIcon
+            v-if="isRunning"
+            name="i-lucide-loader-circle"
+            class="h-3 w-3 animate-spin text-indigo-400"
+          />
+          <span v-if="durationLabel">{{ durationLabel }}</span>
+          <span v-else class="text-slate-500">—</span>
+          <span v-if="isRunning" class="text-[11px] text-slate-500">elapsed</span>
+        </dd>
+      </div>
+      <div>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Step</dt>
+        <dd class="mt-0.5 text-slate-200">{{ stepNumber }} of {{ totalSteps }}</dd>
+      </div>
+      <div>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Started</dt>
+        <dd class="mt-0.5 text-slate-300">{{ formatClock(step.startedAt) ?? '—' }}</dd>
+      </div>
+      <div>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Finished</dt>
+        <dd class="mt-0.5 text-slate-300">{{ formatClock(step.finishedAt) ?? '—' }}</dd>
+      </div>
+      <div>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Model</dt>
+        <dd class="mt-0.5 truncate text-slate-300" :title="step.model">
+          {{ modelLabel ?? 'Not recorded' }}
+        </dd>
+      </div>
+      <!-- The run id this step belongs to, surfaced for debugging (copyable). -->
+      <div class="col-span-2 sm:col-span-3">
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Run</dt>
+        <dd
+          class="mt-0.5 cursor-pointer truncate font-mono text-[12px] text-slate-400 hover:text-slate-200"
+          :title="`${step.runId ?? instanceId ?? ''} — click to copy`"
+          @click="copyRunId"
+        >
+          {{ step.runId ?? instanceId ?? '—' }}
+        </dd>
+      </div>
+    </dl>
+
+    <!-- container cold-boot phase: shown until the container is up and
+         the agent starts reporting progress -->
+    <div
+      v-if="step.startingContainer && !runFailed"
+      class="mt-4 flex items-center gap-2 rounded-lg border border-sky-900/50 bg-sky-950/30 px-3 py-2 text-[12px] text-sky-300"
+    >
+      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
+      <span>Spinning up container…</span>
+    </div>
+
+    <!-- live subtask breakdown -->
+    <div v-if="step.subtasks && step.subtasks.total > 0" class="mt-4">
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+        Subtasks · {{ step.subtasks.completed }}/{{ step.subtasks.total }}
+      </div>
+      <div class="mt-1 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: `${(step.subtasks.completed / step.subtasks.total) * 100}%`,
+          }"
+        />
+      </div>
+      <ul v-if="step.subtasks.items?.length" class="mt-2 space-y-1">
+        <li
+          v-for="(item, idx) in step.subtasks.items"
+          :key="idx"
+          class="flex items-start gap-1.5 text-[12px]"
+          :class="
+            item.status === 'completed'
+              ? 'text-slate-500 line-through'
+              : item.status === 'in_progress'
+                ? 'text-slate-100'
+                : 'text-slate-400'
+          "
+        >
+          <UIcon
+            :name="ITEM_ICON[item.status]"
+            class="mt-px h-3 w-3 shrink-0"
+            :class="subtaskIconClass(item.status, runFailed)"
+          />
+          <span>{{ item.label }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <!-- LLM observability rollup (tokens, output-limit headroom,
+         transport-vs-execution); click to open the full per-call panel -->
+    <div v-if="step.metrics && step.metrics.calls > 0" class="mt-4">
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] uppercase tracking-wide text-slate-500"> Model activity </span>
+        <button class="text-[11px] text-sky-400 hover:text-sky-300" @click="openObservability">
+          View all calls →
+        </button>
+      </div>
+      <StepMetricsBar :metrics="step.metrics" clickable @inspect="openObservability" />
+    </div>
+
+    <!-- standards (prompt fragments) folded into this step -->
+    <div v-if="step.selectedFragmentIds && step.selectedFragmentIds.length" class="mt-4">
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">Standards applied</div>
+      <div class="mt-1 flex flex-wrap gap-1">
+        <UBadge
+          v-for="id in step.selectedFragmentIds"
+          :key="id"
+          color="neutral"
+          variant="subtle"
+          size="sm"
+        >
+          {{ id }}
+        </UBadge>
+      </div>
+    </div>
+
+    <!-- decision raised on this step -->
+    <div v-if="step.decision" class="mt-4">
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">Decision</div>
+      <p class="mt-0.5 text-[13px] text-slate-200">{{ step.decision.question }}</p>
+      <p
+        v-if="step.decision.chosen"
+        class="mt-0.5 flex items-center gap-1 text-[12px] text-emerald-400"
+      >
+        <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
+        {{ step.decision.chosen }}
+      </p>
+      <p v-else class="mt-0.5 text-[12px] text-amber-400">Awaiting a human choice</p>
+    </div>
+
+    <!-- approval gate state -->
+    <div v-if="step.approval" class="mt-4">
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">Approval gate</div>
+      <p class="mt-0.5 text-[13px] text-slate-200 capitalize">
+        {{ step.approval.status.replace('_', ' ') }}
+      </p>
+    </div>
+
+    <!-- companion verdict + full correction sequence -->
+    <div v-if="companionVerdicts.length" class="mt-4">
+      <div class="flex items-center justify-between">
+        <span class="text-[11px] uppercase tracking-wide text-slate-500"> Companion review </span>
+        <UBadge :color="latestVerdict?.passed ? 'success' : 'warning'" variant="subtle" size="sm">
+          {{ pctOf(latestVerdict!.rating) }}
+          {{ latestVerdict?.passed ? '≥' : '<' }} {{ pctOf(latestVerdict!.threshold) }}
+        </UBadge>
+      </div>
+      <ol class="mt-2 space-y-1.5">
+        <li v-for="(v, i) in companionVerdicts" :key="i" class="flex items-start gap-2 text-[12px]">
+          <span
+            class="mt-px inline-flex h-4 shrink-0 items-center rounded px-1 font-mono text-[11px] tabular-nums"
+            :class="
+              v.passed ? 'bg-emerald-500/15 text-emerald-300' : 'bg-amber-500/15 text-amber-300'
+            "
+          >
+            {{ i + 1 }}
+          </span>
+          <div class="min-w-0">
+            <span :class="v.passed ? 'text-emerald-300' : 'text-amber-300'">
+              {{ pctOf(v.rating) }} {{ v.passed ? '≥' : '<' }} {{ pctOf(v.threshold) }}
+            </span>
+            <span v-if="v.feedback" class="ml-1 text-slate-400">— {{ v.feedback }}</span>
+          </div>
+        </li>
+      </ol>
+      <p v-if="companionVerdicts.length > 1" class="mt-1 text-[11px] text-slate-500">
+        {{ companionVerdicts.length }} correction iteration(s).
+      </p>
+    </div>
+  </div>
+</template>