@cat-factory/app 0.232.1 → 0.233.0

package/app/components/layout/BoardSwitcher.vue

@@ -107,12 +107,17 @@ const boardItems = computed<DropdownMenuItem[][]>(() => [
     // manages membership can see at a glance which boards are scoped vs open to the account.
     icon: w.accessMode === 'restricted' ? 'i-lucide-lock' : 'i-lucide-layout-dashboard',
     trailingIcon: w.id === workspace.workspaceId ? 'i-lucide-check' : undefined,
+    // Addressable per board id: which board a row opens is the one thing about this menu a test
+    // (or a screen reader's user testing a switch) cannot get from the label, which is a name a
+    // person chose and two boards may share.
+    'data-testid': `board-option-${w.id}`,
     onSelect: () => void switchBoard(w.id),
   })),
   [
     {
       label: t('layout.boardSwitcher.board.new'),
       icon: 'i-lucide-plus',
+      'data-testid': 'board-new',
       onSelect: () => openPrompt('board'),
     },
     // Rename/delete of the active board is `settings.manage` — omit for a member/viewer,
@@ -290,6 +295,8 @@ async function submitPrompt() {
         class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-2.5 py-1.5 text-start transition hover:bg-slate-800/60"
         :class="collapsed ? 'justify-center' : ''"
         :disabled="busy"
+        data-testid="board-switcher"
+        :data-board-id="workspace.workspaceId ?? ''"
       >
         <UIcon name="i-lucide-layout-dashboard" class="h-4 w-4 shrink-0 text-indigo-400" />
         <span v-if="!collapsed" class="truncate text-sm font-medium text-white">

package/app/components/observability/OutcomeFilterChips.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts" generic="T extends string">
+// The ok/failure narrowing shared by the observability panel's two drill-downs (model calls and
+// the tool-call trajectory).
+//
+// Every option carries its COUNT and stays rendered at zero. A chip that disappeared when its
+// class was empty would answer "are there any failures?" by absence, which reads exactly like a
+// list that has not finished loading — and "no tool call failed" is precisely the fact this
+// panel exists to state out loud rather than imply.
+const props = defineProps<{
+  /** The options, in display order. `count` is what each would show if selected. */
+  options: readonly { value: T; label: string; count: number; tone?: 'error' | 'warning' }[]
+  modelValue: T
+}>()
+const emit = defineEmits<{ 'update:modelValue': [value: T] }>()
+
+/** Colour a chip by what it selects, so the failing one reads as failing even unselected. */
+function toneClass(option: (typeof props.options)[number], active: boolean): string {
+  if (active) return 'bg-slate-800 text-slate-100'
+  if (option.count === 0) return 'text-slate-600 hover:text-slate-400'
+  if (option.tone === 'error') return 'text-rose-400 hover:text-rose-300'
+  if (option.tone === 'warning') return 'text-amber-400 hover:text-amber-300'
+  return 'text-slate-400 hover:text-slate-200'
+}
+</script>
+
+<template>
+  <div class="flex rounded-lg border border-slate-800 p-0.5 text-[12px]">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      type="button"
+      class="rounded-md px-2.5 py-1 transition"
+      :class="toneClass(option, option.value === modelValue)"
+      :aria-pressed="option.value === modelValue"
+      @click="emit('update:modelValue', option.value)"
+    >
+      {{ option.label }}
+      <span class="tabular-nums opacity-70">{{ option.count }}</span>
+    </button>
+  </div>
+</template>

package/app/components/observability/RunFailureSummary.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RunFailureEvidence } from '~/utils/observability'
+import { noFailingCallReason } from '~/utils/observability'
+import { agentKindMeta } from '~/utils/catalog'
+import { FAILURE_KIND_KEYS } from '~/utils/failureKinds'
+import FailureDetail from '~/components/board/FailureDetail.vue'
+
+// The panel's FIRST section: what broke, pinned above the call list instead of found by
+// scrolling it.
+//
+// Three things are shown together because each answers a question the others cannot:
+//
+//  - the run's own structured failure record (`agent_runs.failure`), which names the class of
+//    death and where to look, but never which call;
+//  - the last MODEL call that failed, the transport / proxy / spend-gate side;
+//  - the last TOOL call that failed, the side no rollup counts — a tool that errors inside the
+//    container leaves the model call that requested it reporting `ok` with a clean finish
+//    reason, so every LLM number on this panel reads healthy right up to the moment the run dies.
+//
+// The two evidence rows are shown in a FIXED order and are not ranked against each other. They
+// come from different clocks (a call's recorded `createdAt`, a tool span's harness-stamped
+// `startedAt`), so "which happened last" is not a comparison this can make honestly, and a
+// confident wrong ordering here is worse than none: the whole section exists to be believed.
+//
+// Every count it prints is a run-level SQL aggregate rather than the length of a list the panel
+// happens to hold, and any bound it renders under says so. Counting off the loaded rows would be
+// the same mistake one layer up as filtering a bounded prefix in JS, and it fails the same way:
+// silently, on exactly the long runs worth opening this panel for.
+const props = defineProps<{ evidence: RunFailureEvidence }>()
+const emit = defineEmits<{
+  /** Open the model call with this id in the call list. */
+  showCall: [callId: string]
+  /** Open the tool-call trajectory, narrowed to the failures. */
+  showFailingTools: []
+  /** Re-request whichever telemetry read failed. */
+  retry: []
+}>()
+
+const { t, d } = useI18n()
+
+/** Why no failing call could be pinned, or null when one was. See `noFailingCallReason`. */
+const emptyReason = computed(() => noFailingCallReason(props.evidence))
+
+function clock(ms: number): string {
+  return d(new Date(ms), 'long')
+}
+function agentMeta(kind: string) {
+  return agentKindMeta(kind)
+}
+
+/**
+ * The failure's kind as translated copy.
+ *
+ * Through the shared `FAILURE_KIND_KEYS` map, never the raw enum: `job_failed` and
+ * `companion_rejected` are storage spellings, and the map is an exhaustive
+ * `Record<AgentFailureKind, …>` so a kind added to the contract fails the typecheck here instead
+ * of surfacing as a code in the middle of a sentence.
+ */
+const failureKindLabel = computed(() => {
+  const failure = props.evidence.failure
+  return failure ? t(FAILURE_KIND_KEYS[failure.kind]) : ''
+})
+
+/**
+ * A tool call's result text, or null when there is nothing honest to show.
+ *
+ * `withheld` is NOT an empty result: the bodies were never captured (the deployment switch or
+ * the workspace opt-out), so rendering `''` would present the failing call as a tool that said
+ * nothing about why it failed. The template says which of the two it is.
+ */
+const failedToolResult = computed(() => {
+  const call = props.evidence.lastFailedToolCall
+  if (!call || call.bodies !== 'stored') return null
+  return call.result || null
+})
+
+/** How many failing tool calls precede the pinned one, or null when it is the only one. */
+const earlierFailedToolCalls = computed(() =>
+  props.evidence.failedToolCallCount > 1 ? props.evidence.failedToolCallCount - 1 : null,
+)
+</script>
+
+<template>
+  <section class="rounded-xl border border-rose-900/60 bg-rose-950/20 p-4">
+    <div class="flex items-start gap-3">
+      <UIcon name="i-lucide-siren" class="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
+      <div class="min-w-0 flex-1">
+        <h2 class="text-[13px] font-semibold text-rose-200">
+          {{ t('observability.failure.title') }}
+        </h2>
+
+        <!-- The run's own structured record. Absent on a run that is still going, or that
+             failed without one; the evidence below stands on its own either way. -->
+        <template v-if="evidence.failure">
+          <p class="mt-1 text-[13px] text-slate-200">{{ evidence.failure.message }}</p>
+          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-slate-500">
+            <span>{{ t('observability.failure.kind', { kind: failureKindLabel }) }}</span>
+            <span v-if="evidence.failure.stepIndex != null">
+              {{ t('observability.failure.atStep', { index: evidence.failure.stepIndex + 1 }) }}
+            </span>
+            <span>{{ clock(evidence.failure.occurredAt) }}</span>
+          </div>
+          <!-- The shared disclosure the failure banner and the prior-errors history use:
+               collapsed, copyable, and silent when the detail merely repeats the message. A
+               pinned triage header is the last place an unbounded stack trace should sit
+               expanded by default, pushing the failing call it exists to surface off-screen. -->
+          <FailureDetail
+            :detail="evidence.failure.detail"
+            :message="evidence.failure.message"
+            summary-class="text-[11px] text-slate-500 hover:text-slate-300"
+            pre-class="bg-slate-950/60 text-[11px] text-slate-400"
+          />
+          <p v-if="evidence.failure.hint" class="mt-1.5 text-[12px] text-slate-300">
+            {{ evidence.failure.hint }}
+          </p>
+        </template>
+      </div>
+    </div>
+
+    <!-- The failing calls themselves. -->
+    <div class="mt-3 space-y-2">
+      <!-- Last model call that FAILED outright. -->
+      <button
+        v-if="evidence.lastErroredCall"
+        type="button"
+        class="flex w-full items-start gap-3 rounded-lg border border-rose-900/50 bg-slate-950/50 px-3 py-2 text-start transition hover:bg-slate-900/70"
+        @click="emit('showCall', evidence.lastErroredCall.id)"
+      >
+        <UIcon
+          :name="agentMeta(evidence.lastErroredCall.agentKind).icon"
+          class="mt-0.5 h-4 w-4 shrink-0"
+          :style="{ color: agentMeta(evidence.lastErroredCall.agentKind).color }"
+        />
+        <div class="min-w-0 flex-1">
+          <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
+            <span class="font-medium text-slate-200">
+              {{ t('observability.failure.lastErroredCall') }}
+            </span>
+            <span class="text-slate-500">
+              {{ agentMeta(evidence.lastErroredCall.agentKind).label }} ·
+              {{ evidence.lastErroredCall.provider }}:{{ evidence.lastErroredCall.model }}
+            </span>
+            <UBadge color="error" variant="subtle" size="sm">
+              {{ evidence.lastErroredCall.httpStatus ?? t('observability.call.error') }}
+            </UBadge>
+          </div>
+          <p v-if="evidence.lastErroredCall.errorMessage" class="mt-0.5 text-[12px] text-rose-300">
+            {{ evidence.lastErroredCall.errorMessage }}
+          </p>
+          <p v-if="evidence.erroredCallCount > 1" class="mt-0.5 text-[11px] text-slate-500">
+            {{
+              t(
+                'observability.failure.moreErroredCalls',
+                { count: evidence.erroredCallCount - 1 },
+                evidence.erroredCallCount - 1,
+              )
+            }}
+          </p>
+        </div>
+        <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-slate-600" />
+      </button>
+
+      <!-- Last TOOL call that failed: the row no rollup counts. -->
+      <button
+        v-if="evidence.lastFailedToolCall"
+        type="button"
+        class="flex w-full items-start gap-3 rounded-lg border border-rose-900/50 bg-slate-950/50 px-3 py-2 text-start transition hover:bg-slate-900/70"
+        @click="emit('showFailingTools')"
+      >
+        <UIcon name="i-lucide-wrench" class="mt-0.5 h-4 w-4 shrink-0 text-rose-400" />
+        <div class="min-w-0 flex-1">
+          <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
+            <span class="font-medium text-slate-200">
+              <!-- "One of the failing calls" when even the failures were bounded: the row is
+                   real either way, but calling it the LAST would be a claim about rows this
+                   read never saw. -->
+              {{
+                evidence.failedToolCallsTruncated
+                  ? t('observability.failure.aFailedToolCall')
+                  : t('observability.failure.lastFailedToolCall')
+              }}
+            </span>
+            <span class="font-mono text-slate-300">{{ evidence.lastFailedToolCall.tool }}</span>
+            <span class="text-slate-500">
+              {{ agentMeta(evidence.lastFailedToolCall.agentKind).label }}
+            </span>
+          </div>
+          <pre
+            v-if="failedToolResult"
+            class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-[11px] leading-relaxed text-rose-300"
+            >{{ failedToolResult }}</pre>
+          <p v-else class="mt-0.5 text-[11px] italic text-slate-500">
+            {{
+              evidence.lastFailedToolCall.bodies === 'stored'
+                ? t('observability.failure.toolReturnedNothing')
+                : t('observability.failure.toolBodiesWithheld')
+            }}
+          </p>
+          <p v-if="earlierFailedToolCalls" class="mt-0.5 text-[11px] text-slate-500">
+            {{
+              t(
+                'observability.failure.moreFailedToolCalls',
+                { count: earlierFailedToolCalls },
+                earlierFailedToolCalls,
+              )
+            }}
+          </p>
+        </div>
+        <UIcon name="i-lucide-chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-slate-600" />
+      </button>
+
+      <!-- Nothing failing to point at. Which of the reasons it is decides what an operator should
+           do next, so each gets its own sentence rather than one shared shrug. `emptyReason` is
+           null whenever EITHER sink held a failure, so it already covers the model-call arm
+           above, and null while a sink is still loading, which is what stops a read that has not
+           come back from being reported as one that came back clean. -->
+      <div
+        v-else-if="emptyReason"
+        class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed px-3 py-2 text-[12px]"
+        :class="
+          emptyReason === 'sink-unreachable'
+            ? 'border-amber-900/60 text-amber-300'
+            : 'border-slate-800 text-slate-400'
+        "
+      >
+        <span>{{ t(`observability.failure.noFailingCall.${emptyReason}`) }}</span>
+        <!-- The one empty state with an action attached: the others are answers, this one is the
+             absence of one. -->
+        <UButton
+          v-if="emptyReason === 'sink-unreachable'"
+          icon="i-lucide-rotate-cw"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          @click="emit('retry')"
+        >
+          {{ t('common.retry') }}
+        </UButton>
+      </div>
+    </div>
+  </section>
+</template>

package/app/components/observability/ToolCallList.vue

@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import type { AgentToolCall, RunToolCallFailures, RunToolCallTrajectory } from '~/types/execution'
+import type { ToolOutcomeFilter } from '~/utils/observability'
+import { filterToolCallsByOutcome, formatMs } from '~/utils/observability'
+import { agentKindMeta } from '~/utils/catalog'
+import OutcomeFilterChips from '~/components/observability/OutcomeFilterChips.vue'
+
+// The tool-call TRAJECTORY drill-down: what the run's agents DID, oldest first, in the order
+// they did it. The sibling of the model-call list, and the one that holds the failures no LLM
+// rollup counts — a tool that errors inside the container leaves the call that requested it
+// reporting `ok`.
+//
+// Rows keep their trajectory order under every filter. Narrowing to the failures and reading
+// them in sequence is what tells one tool that failed and was worked around from an edit loop
+// stuck repeating the same failing call, and re-sorting by anything else destroys exactly that.
+//
+// TWO sources, because they answer at different bounds. `trajectory` is a bounded PREFIX of the
+// run, so counting or narrowing it here would repeat, in JavaScript, the exact mistake the
+// stores refuse to make in SQL: a run whose failures came after its opening moves would be shown
+// as one whose tools all worked. So the failing rows and every count come from `failures`, which
+// the backend narrowed and aggregated over the whole run, and only the browse view reads the
+// prefix — under a banner that says it is one.
+const props = defineProps<{
+  trajectory: RunToolCallTrajectory
+  /** The run-level failure read: exact counts, and the failing rows in trajectory order. */
+  failures: RunToolCallFailures | null
+  loading: boolean
+  error: string | null
+  failuresLoading: boolean
+  failuresError: string | null
+}>()
+const emit = defineEmits<{
+  /** Re-request the trajectory. */
+  retry: []
+  /** Re-request the failure read. */
+  retryFailures: []
+}>()
+
+/** Which calls the list is narrowed to. Two-way bound so the failure summary can jump here. */
+const filter = defineModel<ToolOutcomeFilter>('filter', { required: true })
+
+const { t, d } = useI18n()
+
+/**
+ * Chip counts, taken from the run-level aggregate rather than the loaded rows.
+ *
+ * A chip is a claim about the run ("4 failed"), so counting the prefix would make it a claim
+ * about the first two thousand calls wearing the run's name. Null until the aggregate answers:
+ * the chips then read 0, which the loading state above them already accounts for.
+ */
+const counts = computed(() => {
+  const total = props.failures?.total ?? 0
+  const failed = props.failures?.failed ?? 0
+  return { all: total, error: failed, ok: total - failed }
+})
+const filterOptions = computed(
+  () =>
+    [
+      { value: 'all', label: t('observability.filter.all'), count: counts.value.all },
+      {
+        value: 'error',
+        label: t('observability.filter.failed'),
+        count: counts.value.error,
+        tone: 'error',
+      },
+      { value: 'ok', label: t('observability.filter.ok'), count: counts.value.ok },
+    ] as const,
+)
+
+/**
+ * The rows on screen.
+ *
+ * `error` is served from the run-level failure read, so narrowing to the failures shows the
+ * run's failures rather than the prefix's. `all` and `ok` browse the prefix, which is what the
+ * banner below is for.
+ */
+const visible = computed(() =>
+  filter.value === 'error'
+    ? (props.failures?.failures ?? [])
+    : filterToolCallsByOutcome(props.trajectory.toolCalls, filter.value),
+)
+
+/**
+ * Whether what is on screen is bounded, and by which read.
+ *
+ * Stated per view rather than once for the component: narrowing to the failures escapes the
+ * trajectory's prefix entirely, so carrying that bound's warning into the failure view would
+ * cast doubt on a list that has none.
+ */
+/**
+ * Which read backs the current view, with its own loading and error state.
+ *
+ * Per view, not per component. The failure view does not read the trajectory at all, so a
+ * trajectory that is still loading (or failed to) must not blank out failing rows already in
+ * hand — reporting an unrelated read's trouble as this view's emptiness is the same class of
+ * mistake as reporting a prefix as a run.
+ */
+const source = computed(() =>
+  filter.value === 'error'
+    ? {
+        loading: props.failuresLoading,
+        error: props.failuresError,
+        retry: () => emit('retryFailures'),
+      }
+    : { loading: props.loading, error: props.error, retry: () => emit('retry') },
+)
+
+const boundedNotice = computed(() => {
+  if (filter.value === 'error') {
+    return props.failures?.failuresTruncated
+      ? t('observability.toolCalls.failuresTruncated', { shown: visible.value.length })
+      : null
+  }
+  return props.trajectory.truncated
+    ? t('observability.toolCalls.truncated', { shown: props.trajectory.toolCalls.length })
+    : null
+})
+
+const expanded = reactive<Record<string, boolean>>({})
+function toggle(call: AgentToolCall) {
+  expanded[call.id] = !expanded[call.id]
+}
+
+function agentMeta(kind: string) {
+  return agentKindMeta(kind)
+}
+function clock(ms: number): string {
+  return d(new Date(ms), 'long')
+}
+/** Pretty-print JSON arguments; fall back to the raw string when they are not JSON. */
+function prettyArgs(raw: string): string {
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    return raw
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <div>
+        <h2 class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('observability.toolCalls.title') }}
+        </h2>
+        <p class="text-[11px] text-slate-600">{{ t('observability.toolCalls.subtitle') }}</p>
+      </div>
+      <OutcomeFilterChips v-model="filter" :options="filterOptions" />
+    </div>
+
+    <!-- Every state below is gated on having NOTHING to show: rows already in hand outrank a
+         read still in flight behind them, and outrank one that failed. -->
+    <p
+      v-if="source.loading && !visible.length"
+      class="flex items-center justify-center gap-2 py-8 text-center text-sm text-slate-500"
+    >
+      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+      {{ t('observability.toolCalls.loading') }}
+    </p>
+    <div
+      v-else-if="source.error && !visible.length"
+      class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-rose-900/60 py-6 text-center text-sm text-rose-400"
+    >
+      {{ t('observability.toolCalls.error') }}
+      <UButton
+        icon="i-lucide-rotate-cw"
+        color="neutral"
+        variant="soft"
+        size="xs"
+        :loading="source.loading"
+        @click="source.retry()"
+      >
+        {{ t('common.retry') }}
+      </UButton>
+    </div>
+    <!-- "The run made no tool calls" is a claim about the RUN, so it comes off the aggregate,
+         never off an empty prefix that may simply not have loaded. -->
+    <p
+      v-else-if="!counts.all"
+      class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
+    >
+      {{ t('observability.toolCalls.none') }}
+    </p>
+    <!-- Narrowed to nothing is a different statement from recorded nothing, and it is the more
+         reassuring of the two: the operator asked for the failures and there are none. -->
+    <p
+      v-else-if="!visible.length"
+      class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
+    >
+      {{ t('observability.toolCalls.noneMatching') }}
+    </p>
+
+    <template v-else>
+      <!-- What this view is bounded by, when it is. A cap nobody can see is a prefix read as a
+           whole run: the count beside every chip is the run's, so a shorter list than the count
+           implies has to explain itself here. -->
+      <p
+        v-if="boundedNotice"
+        class="rounded-lg border border-dashed border-amber-900/50 px-3 py-2 text-[11px] text-amber-300/90"
+      >
+        {{ boundedNotice }}
+      </p>
+
+      <ul class="space-y-2">
+        <li
+          v-for="call in visible"
+          :key="call.id"
+          class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900/40"
+          :class="!call.ok ? 'border-rose-900/60' : ''"
+        >
+          <button
+            class="flex w-full items-center gap-3 px-4 py-2.5 text-start transition hover:bg-slate-900/70"
+            @click="toggle(call)"
+          >
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="h-4 w-4 shrink-0 text-slate-500 transition-transform"
+              :class="expanded[call.id] ? 'rotate-90' : ''"
+            />
+            <UIcon
+              :name="agentMeta(call.agentKind).icon"
+              class="h-4 w-4 shrink-0"
+              :style="{ color: agentMeta(call.agentKind).color }"
+              :title="agentMeta(call.agentKind).label"
+            />
+            <span class="font-mono text-[13px] text-slate-200">{{ call.tool }}</span>
+            <div class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400">
+              <span :title="t('observability.toolCalls.durationHint')">
+                {{ formatMs(Math.max(0, call.endedAt - call.startedAt)) }}
+              </span>
+              <UBadge v-if="!call.ok" color="error" variant="subtle" size="sm">
+                {{ t('observability.toolCalls.failed') }}
+              </UBadge>
+              <span class="hidden text-slate-600 md:inline">{{ clock(call.startedAt) }}</span>
+            </div>
+          </button>
+
+          <div v-if="expanded[call.id]" class="border-t border-slate-800 px-4 py-3 space-y-3">
+            <div class="flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-slate-500">
+              <span>{{ t('observability.toolCalls.dispatch', { jobId: call.jobId }) }}</span>
+              <span>{{ t('observability.toolCalls.seq', { seq: call.seq }) }}</span>
+            </div>
+            <!-- `withheld` is not an empty body: nothing was captured, so an empty `args` here
+               must not read as a tool that took none. -->
+            <p v-if="call.bodies !== 'stored'" class="text-[12px] italic text-slate-500">
+              {{ t('observability.toolCalls.bodiesWithheld') }}
+            </p>
+            <template v-else>
+              <div>
+                <div
+                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500"
+                >
+                  <span>{{ t('observability.toolCalls.arguments') }}</span>
+                  <span
+                    v-if="call.argsDropped > 0"
+                    class="normal-case tracking-normal text-slate-600"
+                  >
+                    {{ t('observability.toolCalls.dropped', { chars: call.argsDropped }) }}
+                  </span>
+                </div>
+                <pre
+                  class="max-h-60 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
+                  >{{ call.args ? prettyArgs(call.args) : '—' }}</pre>
+              </div>
+              <div>
+                <div
+                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500"
+                >
+                  <span>{{ t('observability.toolCalls.result') }}</span>
+                  <span
+                    v-if="call.resultDropped > 0"
+                    class="normal-case tracking-normal text-slate-600"
+                  >
+                    {{ t('observability.toolCalls.dropped', { chars: call.resultDropped }) }}
+                  </span>
+                </div>
+                <pre
+                  class="max-h-60 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed"
+                  :class="call.ok ? 'text-slate-300' : 'text-rose-300'"
+                  >{{ call.result || '—' }}</pre>
+              </div>
+            </template>
+          </div>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>

package/app/components/palettes/AgentPalette.vue

@@ -86,6 +86,7 @@ function toggle(id: string) {
             type="button"
             class="flex w-full items-center gap-2.5 rounded-lg border border-slate-700 bg-slate-800/60 p-2 text-start transition hover:border-slate-500 hover:bg-slate-800"
             :title="a.description"
+            :data-testid="`palette-agent-${a.kind}`"
             @click="$emit('add', a.kind)"
           >
             <div

package/app/components/panels/AgentStepDetail.vue

@@ -304,9 +304,13 @@ async function copyOutput() {
 <template>
   <Teleport to="body">
     <Transition name="reader-fade">
+      <!-- `data-agent-kind` names WHICH step this window is scoped to, as the kind rather than as
+           the heading beside it: the heading is a translated display label, so it is the wrong
+           thing to read for anything that needs to know which agent's step is open. -->
       <div
         v-if="open && step && agent"
         data-testid="step-detail"
+        :data-agent-kind="step?.agentKind"
         class="fixed inset-0 z-50 flex max-h-[100dvh] bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"