Chat: Unify error display to match diff_error banner (less jarring, dynamic, and robust)

[hannesrudolph]

Problem Description

Error messages in the chat view are visually jarring and inconsistent. The generic error path renders a bold red header and paragraph, which demands attention even for routine or recoverable issues. The desired behavior is to adopt the same visual pattern used by diff_error: a subtle, collapsible banner with a warning icon, an optional copy-to-clipboard action, and expandable details. This will make errors less disruptive while remaining clear and actionable.

Who is affected: all users interacting with the Chat view when an error occurs.
When it happens: any time the backend sends a generic error (type "say":"error") or similar error states.

Current vs expected:

• Current: Hard red header + paragraph output, always visible.
  • Header construction: ChatRow.tsx
  • Generic error render: ChatRow.tsx
• Expected: Use the same subdued, collapsible pattern as diff_error:
  • diff_error banner implementation entry: ChatRow.tsx
  • Title text for banner: ChatRow.tsx
  • Expandable code/details block: ChatRow.tsx

Impact:

• Reduces visual noise and stress in the Chat UI
• Maintains clarity, provides access to details on demand
• Establishes consistent error presentation across scenarios

Additional Context

• “Current” and “Desired” screenshots provided in the originating task. The new presentation should mirror the diff_error look-and-feel.

Proposed Solution

Introduce a reusable ErrorBanner component and replace the generic error path to use it.

Component spec (ErrorBanner):

• Props: title, variant ("warning" | "error" | "info"), icon (codicon name), details (string), defaultExpanded (bool), onCopy? (optional), actions? (optional right-side actions).
• Visuals: same structure and spacing as diff_error (warning icon, bold title text, chevron to expand/collapse, optional copy button).
• Behavior: collapsed by default; expand reveals details area (supporting plaintext; optionally code block syntax selection).
• Accessibility: proper ARIA attributes, keyboard operable toggle, focus styles.

Adoption in ChatRow:

• Replace the generic error render at ChatRow.tsx with ErrorBanner:
  • Title: localized “Error” (reuse existing i18n string from ChatRow.tsx)
  • Details: message.text (plaintext); if content looks like structured XML/JSON, keep rendering as plain text initially (keep scope simple).
• Keep diff_error logic intact but migrate its UI to use ErrorBanner to ensure a single pattern source:
  • Collapsible container and copy affordance from ChatRow.tsx
  • Details block rendering from ChatRow.tsx

Notes on existing patterns to reference:

• diff_error implementation: ChatRow.tsx
• Similar “subtle warning” pattern (not collapsible but stylistically aligned): ContextCondenseRow.tsx
• Narrow banner with border-left style used elsewhere: McpErrorRow.tsx

Impact

• Consistent, less intrusive error experience in Chat
• Users can copy details when needed without overwhelming the default view
• Easier future maintenance via a shared component

Acceptance Criteria

Given the assistant emits a generic error ("say":"error")
When it is rendered in the chat view
Then the UI shows a subdued, collapsible banner with a warning icon and “Error” title, collapsed by default, with an affordance to expand details, and optional copy action.

Given the assistant emits a diff_error
When it is rendered
Then the UI uses the same ErrorBanner component with the diff_error title and behavior (copy button, collapsible details), preserving existing functionality.

Given a long/structured error message
When the banner is expanded
Then the details are displayed in a scrollable block without overflowing the chat layout.

Given keyboard-only navigation
When focusing the banner
Then users can toggle expand/collapse via keyboard and copy details if the action is provided.

Technical Context (verified)

• Generic error header/title composition: ChatRow.tsx
• Generic error content output: ChatRow.tsx
• diff_error banner UI: ChatRow.tsx
• Copy button flow for diff_error: ChatRow.tsx

[roomote]

I'm exploring a potential fix for unifying the error display to match the diff_error banner pattern. I'll work on creating a reusable ErrorBanner component and updating the generic error rendering to use this consistent, less jarring approach.

[roomote]

I've opened PR #7359 with my attempt at addressing this issue: #7359

The implementation creates a reusable ErrorBanner component that provides a consistent, less jarring error display pattern across the chat view. The component supports collapsible details, copy functionality, and different severity variants (warning/error/info).

Key changes:

• Created ErrorBanner component with comprehensive test coverage
• Replaced both generic error and diff_error implementations to use the new component
• Removed 104 lines of redundant code while maintaining all functionality

All tests are passing and the implementation has been reviewed with 95% confidence. Feedback welcome!