Fix persisted run error rendering (#4573)

Fixes run error rendering in the agents timeline so handler failures
stay attached to the failed run after a refresh. Long or multiline error
messages now render using the same expandable event-card pattern as tool
calls.

## Root Cause

Handler failures were written to the entity `errors` collection without
a `run_id`:

```ts
entityStateSchema.errors.insert({
  value: {
    error_code: errCode,
    message: errMsg,
  },
})
```

The live UI could briefly surface the failure while the failed run was
still in memory, but after a refresh the run row only reads errors
associated with that run. Without `run_id`, the error became a
standalone stream error and disappeared from the failed run’s footer.

Separately, the UI rendered the full error text inline. Provider/runtime
errors can be long or multiline, so the footer could truncate important
details with no way to expand them.

## Approach

- Snapshot the set of run keys before invoking each handler pass.
- If the handler fails, find the last run created during that pass and
write the handler error with that run’s `run_id`.
- Reuse `InlineEventCard` for long or multiline run errors so they
follow the same expandable pattern as tool calls:
  - short errors stay inline and truncated in the response metadata row
- long or multiline errors render as a collapsible `run error` card with
the full message in the card body

## Key Invariants

- A handler error should attach only to a run created during the same
handler pass.
- Existing historical runs must not receive errors from later failed
handler passes.
- Standalone/non-run errors should remain standalone when no run was
created.
- Runtime-created run rows are appended sequentially, so the last
newly-created run is the run to associate with a handler failure.
- The UI should preserve full error text while keeping the collapsed
timeline readable.

## Non-goals

- This does not change standalone entity error rows in the timeline.
- This does not change model provider error classification or error-code
generation.
- This does not introduce a second expandable styling system for run
errors.

## Trade-offs

The runtime infers the failed run by comparing the pre-handler run-key
snapshot to the post-failure run collection, rather than threading a
current run id through every handler/agent path. That keeps the change
localized to `processWake` and preserves existing agent/run APIs, at the
cost of selecting the last newly-created run when a handler creates
multiple runs before failing.

Using `InlineEventCard` makes long run errors visually heavier than a
small inline footer, but it reuses the existing expandable UI pattern
instead of adding bespoke details styling.

## Verification

```bash
pnpm install
pnpm --filter @electric-ax/agents-runtime exec vitest run test/process-wake.test.ts --reporter=dot
pnpm --filter @electric-ax/agents-runtime build
pnpm --filter @electric-ax/agents-server-ui run typecheck
GITHUB_BASE_REF=main node scripts/check-changeset.mjs
```

## Files changed

- `packages/agents-runtime/src/process-wake.ts`
- Tracks runs created during each handler pass and attaches handler
errors to the last new run.

- `packages/agents-server-ui/src/components/AgentResponse.tsx`
- Adds shared run error rendering for both live and cached agent
responses.
  - Uses `InlineEventCard` for long or multiline error messages.

- `.changeset/run-error-rendering.md`
  - Adds patch changeset entries for the affected agents packages.

Author: KyleAMathews

.changeset/run-error-rendering.md

@@ -0,0 +1,6 @@
+---
+'@electric-ax/agents-runtime': patch
+'@electric-ax/agents-server-ui': patch
+---
+
+Persist handler errors on the run that produced them and render long run error messages in the agents UI as expandable details.

packages/agents-runtime/src/process-wake.ts

@@ -146,6 +146,14 @@ function toError(err: unknown): Error {
   return err instanceof Error ? err : new Error(String(err))
 }
 
+async function latestNewRunKey(
+  db: EntityStreamDBWithActions,
+  existingRunKeys: ReadonlySet<string>
+): Promise<string | undefined> {
+  const runs = await queryOnce((q) => q.from({ runs: db.collections.runs }))
+  return runs.filter((run) => !existingRunKeys.has(run.key)).at(-1)?.key
+}
+
 async function resolveHeadersProvider(
   provider: ProcessWakeConfig[`claimHeaders`]
 ): Promise<Record<string, string> | undefined> {
@@ -2158,6 +2166,9 @@ export async function processWake(
       })
 
       let sleepRequested = false
+      const existingRunKeys = new Set(
+        db.collections.runs.toArray.map((run) => run.key)
+      )
 
       try {
         await wirePendingSharedStates()
@@ -2208,12 +2219,14 @@ export async function processWake(
             ? setupErr.code
             : `HANDLER_FAILED`
         log.error(`handler failed for ${entityUrl}:`, errMsg)
+        const failedRunKey = await latestNewRunKey(db, existingRunKeys)
         writeEvent(
           entityStateSchema.errors.insert({
             key: `error-${epoch}-${crypto.randomUUID()}`,
             value: {
               error_code: errCode,
               message: errMsg,
+              ...(failedRunKey ? { run_id: failedRunKey } : {}),
             } as never,
           }) as ChangeEvent
         )

packages/agents-server-ui/src/components/AgentResponse.tsx

@@ -1,4 +1,4 @@
-import { Check, Copy, GitFork, Reply } from 'lucide-react'
+import { Check, Copy, CircleAlert, GitFork, Reply } from 'lucide-react'
 import {
   memo,
   useCallback,
@@ -24,6 +24,7 @@ import {
 } from '../lib/streamdownConfig'
 import { Icon, IconButton, Stack, Text, Tooltip } from '../ui'
 import { ToolCallView } from './ToolCallView'
+import { InlineEventCard } from './InlineEventCard'
 import { TimeText } from './TimeText'
 import { ThinkingIndicator } from './ThinkingIndicator'
 import { ElapsedTime } from './ElapsedTime'
@@ -32,6 +33,7 @@ import { TokenUsage } from './TokenUsage'
 
 import { formatElapsedDuration, toMillis } from '../lib/formatTime'
 import styles from './AgentResponse.module.css'
+import toolBlock from './toolBlock.module.css'
 import type { ForkFromHereAction } from './UserMessage'
 import type {
   EntityTimelineContentItem,
@@ -373,6 +375,41 @@ function errorText(errors: Array<EntityTimelineErrorItem>): string | undefined {
   return errors.length > 0 ? errors.map(formatError).join(`; `) : undefined
 }
 
+const RUN_ERROR_SUMMARY_LENGTH = 180
+
+function isLongRunError(message: string): boolean {
+  return message.length > RUN_ERROR_SUMMARY_LENGTH || message.includes(`\n`)
+}
+
+function runErrorSummary(message: string): string {
+  const normalized = message.replace(/\s+/g, ` `)
+  return normalized.length > RUN_ERROR_SUMMARY_LENGTH
+    ? `${normalized.slice(0, RUN_ERROR_SUMMARY_LENGTH)}…`
+    : normalized
+}
+
+function RunErrorInline({ message }: { message: string }): React.ReactElement {
+  return (
+    <Text size={1} tone="danger" truncate>
+      ✗ {message}
+    </Text>
+  )
+}
+
+function RunErrorCard({ message }: { message: string }): React.ReactElement {
+  return (
+    <InlineEventCard
+      icon={CircleAlert}
+      title="run error"
+      summary={runErrorSummary(message)}
+      defaultExpanded={false}
+      headerSurface
+    >
+      <pre className={toolBlock.codeBlock}>{message}</pre>
+    </InlineEventCard>
+  )
+}
+
 function failedRunText(
   run: EntityTimelineRunRow,
   items: Array<EntityTimelineRunItem>
@@ -658,6 +695,10 @@ export const AgentResponseLive = memo(function AgentResponseLive({
         )
       })}
 
+      {failureText && isLongRunError(failureText) && (
+        <RunErrorCard message={failureText} />
+      )}
+
       <Stack align="center" gap={2} className={styles.metaRow}>
         {showThinking && <ThinkingIndicator />}
         {done && (
@@ -667,10 +708,8 @@ export const AgentResponseLive = memo(function AgentResponseLive({
               : `✓ done`}
           </Text>
         )}
-        {failureText && (
-          <Text size={1} tone="danger">
-            ✗ {failureText}
-          </Text>
+        {failureText && !isLongRunError(failureText) && (
+          <RunErrorInline message={failureText} />
         )}
         {/* Elapsed-time ticker — visible while the response is still
             in flight so the user can see how long the model has been
@@ -896,6 +935,10 @@ export const AgentResponse = memo(function AgentResponse({
         return <ToolCallView key={item.toolCallId} item={item} />
       })}
 
+      {section.error && isLongRunError(section.error) && (
+        <RunErrorCard message={section.error} />
+      )}
+
       <Stack align="center" gap={2} className={styles.metaRow}>
         {showThinking && <ThinkingIndicator />}
         {section.done && (
@@ -905,10 +948,8 @@ export const AgentResponse = memo(function AgentResponse({
               : `✓ done`}
           </Text>
         )}
-        {section.error && (
-          <Text size={1} tone="danger">
-            ✗ {section.error}
-          </Text>
+        {section.error && !isLongRunError(section.error) && (
+          <RunErrorInline message={section.error} />
         )}
         {/* Elapsed-time ticker — kept in sync with the live variant
             above so cached sections (rare during streaming, but the