Frontend: AgentChatPanel component — messages, tool calls, thinking blocks, input bar

[frankbria]

Parent Issue

Part of #500 — depends on #504 (useAgentChat hook)

Context

This is the main visual component for interactive agent sessions — a chat panel that renders streamed messages, tool call inputs/outputs, thinking blocks, and a user input bar. It consumes useAgentChat and has no backend dependencies of its own.

Existing Code to Reference

• web-ui/src/components/prd/DiscoveryPanel.tsx — multi-turn Q&A pattern in the same codebase (closest existing analogue)
• web-ui/src/components/execution/EventStream.tsx — grouped event rendering pattern
• Optio apps/web/src/components/session-chat.tsx — full reference implementation

What to Build

New file: web-ui/src/components/sessions/AgentChatPanel.tsx

Props:

interface AgentChatPanelProps {
  sessionId: string;
  className?: string;
}

Layout (top to bottom):

┌─────────────────────────────────┐
│ Header: model badge | cost | status dot │
├─────────────────────────────────┤
│                                 │
│  Message list (scrollable)      │
│                                 │
│  ┌─ user ────────────────────┐  │
│  │ "Add error handling..."   │  │
│  └───────────────────────────┘  │
│  ┌─ assistant ───────────────┐  │
│  │ Sure, let me read the...  │  │  ← text delta, streaming
│  └───────────────────────────┘  │
│  ┌─ tool_use ────────────────┐  │
│  │ ▶ Read  auth/service.py   │  │  ← collapsible
│  │   [input JSON]            │  │
│  └───────────────────────────┘  │
│  ┌─ tool_result ─────────────┐  │
│  │ class AuthService:...     │  │  ← truncated, expand on click
│  └───────────────────────────┘  │
│  ┌─ thinking ────────────────┐  │
│  │ 💡 I need to check...     │  │  ← italic, muted border-left
│  └───────────────────────────┘  │
│                                 │
├─────────────────────────────────┤
│ [Interrupt]  [textarea] [Send]  │
└─────────────────────────────────┘

Message rendering rules:

Role	Visual treatment
user	Right-aligned or distinct background (follow existing Discovery Panel style)
assistant	Left-aligned, plain text, streaming cursor indicator while status === "streaming"
tool_use	Collapsible card: tool name + short summary in header, raw toolInput JSON in body (collapsed by default)
tool_result	Collapsible card: first 200 chars visible, "Show more" expands
thinking	Italic text, left border, muted color, lightbulb icon
system	Centered small text, muted
error	Red border card with alert icon

Input bar:

• <textarea> that auto-grows (up to 6 lines)
• Enter sends, Shift+Enter inserts newline
• Disabled + shows spinner while status === "thinking" or "streaming"
• [Interrupt] button visible only while status === "thinking" or "streaming"; calls interrupt()

Header:

• Status dot (green = connected, yellow = connecting, red = disconnected)
• Cost counter: $0.0031 updating in real-time
• Model badge: claude-sonnet-4-6

Auto-scroll:

• Scroll to bottom on new messages
• Stop auto-scroll if user has scrolled up; resume when user scrolls back to bottom

Empty state:

• Icon + "Start a conversation with your agent" when no messages

Acceptance Criteria

• Renders all 7 message roles with correct visual treatment
• Tool use cards are collapsible (collapsed by default)
• Tool result cards truncate and have expand button
• Streaming cursor indicator visible while status === "streaming"
• Input bar disabled while agent is thinking/streaming
• Interrupt button appears during thinking/streaming, hidden otherwise
• Auto-scrolls to bottom on new messages, stops on manual scroll-up
• Empty state displayed with no messages
• Header shows live cost and connection status
• Accessible: keyboard navigable, proper ARIA labels on buttons

Notes

• Follow the existing Radix UI + Hugeicons + Tailwind pattern of the codebase
• Do not introduce new component library dependencies

[coderabbitai]

🔗 Related PRs

#10 - feat(frontend): Multi-Agent State Management with React Context [merged]
#26 - Feature 013: Context Panel Integration with TypeScript Fixes [merged]
#220 - feat(ui): Replace emojis with Hugeicons in Dashboard and SessionStatus [merged]
#337 - feat: PRD View - Document Creation & Discovery (#330) [merged]
#339 - feat: Execution Monitor View with real-time SSE streaming (#332) [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[traycerai]

Warning

Ticket Assist will be discontinued on May 1, 2026. After that date, the feature will no longer be available. We suggest installing the Traycer IDE Extension for continued AI-powered, spec-driven development. Thank you for choosing Traycer!

Plan

Observations

The codebase uses Next.js + React 19 + Tailwind CSS + Radix UI + @hugeicons/react + class-variance-authority. No Radix Collapsible primitive is installed — collapsible behaviour must be built with local useState. @radix-ui/react-scroll-area is available. The closest analogues are DiscoveryPanel.tsx / DiscoveryTranscript.tsx (chat bubble pattern) and EventStream.tsx (auto-scroll + collapsible groups). The useAgentChat hook (issue #504) does not yet exist in the repo; this component must consume it once created.

Approach

Create web-ui/src/components/sessions/AgentChatPanel.tsx as a single-file component that imports useAgentChat (to be delivered by #504), reuses existing Button, Badge, ScrollArea primitives, and follows the exact Hugeicons + Tailwind patterns seen in DiscoveryPanel and EventStream. Sub-renderers for each message role are co-located as private functions/components in the same file to keep the surface area minimal.

---

Implementation Steps

1. Define local types at the top of the new file

In file:web-ui/src/components/sessions/AgentChatPanel.tsx, declare the AgentChatPanelProps interface exactly as specified:

interface AgentChatPanelProps {
  sessionId: string;
  className?: string;
}

Also declare a local AgentMessage union type covering all seven roles (user, assistant, tool_use, tool_result, thinking, system, error) with the fields that useAgentChat will expose (e.g. id, role, content, toolName?, toolInput?, timestamp). Align this with whatever useAgentChat exports once #504 lands.

---

2. Wire up useAgentChat

At the top of AgentChatPanel, call:

const { messages, status, cost, model, send, interrupt } = useAgentChat(sessionId);

status drives: header dot colour, input disabled state, interrupt button visibility, streaming cursor. cost and model feed the header. send is called from the input bar. interrupt is called from the interrupt button.

---

3. Auto-scroll logic (mirror EventStream.tsx)

Maintain two refs — containerRef (the scrollable div) and bottomRef (sentinel) — plus autoScroll state (boolean, default true).

• In a useEffect keyed on messages.length: if autoScroll, call bottomRef.current?.scrollIntoView({ behavior: 'smooth' }).
• In handleScroll (attached to the container's onScroll): compute scrollHeight - scrollTop - clientHeight < 40; set autoScroll to true when at bottom, false otherwise.

---

4. Header sub-section

Render a <div> with flex items-center justify-between border-b px-4 py-3:

• Status dot: a <span> with h-2.5 w-2.5 rounded-full coloured by status:
  • "connected" / "open" → bg-green-500
  • "connecting" → bg-yellow-400
  • "disconnected" / "error" / "closed" → bg-red-500
• Model badge: use the existing Badge component from file:web-ui/src/components/ui/badge.tsx with variant="secondary", text = model.
• Cost counter: a <span className="font-mono text-xs text-muted-foreground"> showing $${cost.toFixed(4)}.

---

5. Message list

Render a scrollable container (native div with overflow-y-auto flex-1, matching EventStream's pattern — the existing ScrollArea wrapper can be used here for consistent scrollbar styling):

<div ref={containerRef} onScroll={handleScroll} role="log" aria-live="polite" aria-label="Agent chat messages" className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
  {messages.length === 0 ? <EmptyState /> : messages.map(msg => <MessageRow key={msg.id} message={msg} status={status} />)}
  <div ref={bottomRef} />
</div>

---

6. EmptyState private component

A centred <div> with a Hugeicons icon (e.g. ArtificialIntelligence01Icon already used in DiscoveryTranscript) and the text "Start a conversation with your agent" in text-sm text-muted-foreground.

---

7. MessageRow dispatcher

A private function that switches on message.role and delegates to one of seven sub-renderers:

Role	Sub-renderer
user	UserBubble
assistant	AssistantBubble
tool_use	ToolUseCard
tool_result	ToolResultCard
thinking	ThinkingBlock
system	SystemLine
error	ErrorCard

---

8. Per-role renderers

UserBubble — mirror DiscoveryTranscript's user bubble: flex-row-reverse, bg-primary text-primary-foreground rounded-lg px-3 py-2 text-sm max-w-[80%].

AssistantBubble — left-aligned bg-muted rounded-lg px-3 py-2 text-sm. When status === "streaming" and this is the last message, append a blinking cursor <span className="inline-block w-0.5 h-4 bg-current animate-pulse ml-0.5" aria-hidden="true" />.

ToolUseCard — collapsible card using local useState(false) for expanded. Header row: ArrowRight01Icon (rotated 90° when expanded, matching EventStream's ReadGroupRow), tool name in font-mono text-xs, short summary. Body (shown when expanded): raw toolInput JSON in a <pre className="text-xs overflow-x-auto bg-muted/50 rounded p-2 mt-2">. Collapsed by default.

ToolResultCard — collapsible card using local useState(false) for expanded. Always shows first 200 chars of content. When content.length > 200, show a "Show more" / "Show less" toggle button (variant="ghost" size="sm"). Full content in a <pre> when expanded.

ThinkingBlock — <div className="border-l-2 border-muted-foreground/30 pl-3 italic text-sm text-muted-foreground flex gap-2"> with a lightbulb icon (BulbIcon or Idea01Icon from @hugeicons/react).

SystemLine — <p className="text-center text-xs text-muted-foreground py-1">.

ErrorCard — <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive flex gap-2"> with Alert01Icon from @hugeicons/react.

---

9. Input bar

A <div className="border-t bg-background px-4 py-3"> containing:

• Interrupt button — visible only when status === "thinking" || status === "streaming". Use Button with variant="outline" size="sm" and Cancel01Icon (already imported in DiscoveryPanel). Calls interrupt(). Add aria-label="Interrupt agent".
• <textarea> — resize-none rounded-md border bg-background px-3 py-2 text-sm flex-1. Auto-grow: attach onInput handler that sets e.target.style.height = 'auto' then e.target.style.height = e.target.scrollHeight + 'px', capped at 6 * lineHeight via style={{ maxHeight: '9rem' }}. disabled when status === "thinking" || status === "streaming". onKeyDown: Enter without Shift calls handleSend and preventDefault; Shift+Enter inserts newline naturally.
• Send button — Button size="icon" with SentIcon (already used in DiscoveryInput). Disabled when textarea is empty or agent is busy. aria-label="Send message".

---

10. handleSend callback

const handleSend = useCallback(() => {
  const trimmed = value.trim();
  if (!trimmed || status === 'thinking' || status === 'streaming') return;
  send(trimmed);
  setValue('');
  // reset textarea height
}, [value, status, send]);

---

11. Accessibility

• Scrollable message list: role="log", aria-live="polite", aria-label="Agent chat messages".
• Collapsible cards: aria-expanded={expanded} on the toggle button (matching EventStream's ReadGroupRow).
• Interrupt button: aria-label="Interrupt agent".
• Send button: aria-label="Send message".
• Status dot: aria-label describing connection state (e.g. "Status: connected").

---

12. Export and barrel update

• Export AgentChatPanel as a named export from file:web-ui/src/components/sessions/AgentChatPanel.tsx.
• If a file:web-ui/src/components/sessions/index.ts barrel exists (or once created), re-export from it.

---

Component structure diagram

graph TD
    A[AgentChatPanel] --> B[Header]
    A --> C[Message List]
    A --> D[Input Bar]
    B --> B1[Status Dot]
    B --> B2[Model Badge]
    B --> B3[Cost Counter]
    C --> C1[EmptyState]
    C --> C2[MessageRow dispatcher]
    C2 --> R1[UserBubble]
    C2 --> R2[AssistantBubble + streaming cursor]
    C2 --> R3[ToolUseCard - collapsible]
    C2 --> R4[ToolResultCard - truncate + expand]
    C2 --> R5[ThinkingBlock]
    C2 --> R6[SystemLine]
    C2 --> R7[ErrorCard]
    D --> D1[Interrupt Button]
    D --> D2[Textarea auto-grow]
    D --> D3[Send Button]

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase uses **Next.js + React 19 + Tailwind CSS + Radix UI + `@hugeicons/react` + `class-variance-authority`**. No Radix `Collapsible` primitive is installed — collapsible behaviour must be built with local `useState`. `@radix-ui/react-scroll-area` is available. The closest analogues are `DiscoveryPanel.tsx` / `DiscoveryTranscript.tsx` (chat bubble pattern) and `EventStream.tsx` (auto-scroll + collapsible groups). The `useAgentChat` hook (issue #504) does not yet exist in the repo; this component must consume it once created.

## Approach

Create `web-ui/src/components/sessions/AgentChatPanel.tsx` as a single-file component that imports `useAgentChat` (to be delivered by #504), reuses existing `Button`, `Badge`, `ScrollArea` primitives, and follows the exact Hugeicons + Tailwind patterns seen in `DiscoveryPanel` and `EventStream`. Sub-renderers for each message role are co-located as private functions/components in the same file to keep the surface area minimal.

---

## Implementation Steps

### 1. Define local types at the top of the new file

In `file:web-ui/src/components/sessions/AgentChatPanel.tsx`, declare the `AgentChatPanelProps` interface exactly as specified:

```
interface AgentChatPanelProps {
  sessionId: string;
  className?: string;
}
```

Also declare a local `AgentMessage` union type covering all seven roles (`user`, `assistant`, `tool_use`, `tool_result`, `thinking`, `system`, `error`) with the fields that `useAgentChat` will expose (e.g. `id`, `role`, `content`, `toolName?`, `toolInput?`, `timestamp`). Align this with whatever `useAgentChat` exports once #504 lands.

---

### 2. Wire up `useAgentChat`

At the top of `AgentChatPanel`, call:

```
const { messages, status, cost, model, send, interrupt } = useAgentChat(sessionId);
```

`status` drives: header dot colour, input disabled state, interrupt button visibility, streaming cursor. `cost` and `model` feed the header. `send` is called from the input bar. `interrupt` is called from the interrupt button.

---

### 3. Auto-scroll logic (mirror `EventStream.tsx`)

Maintain two refs — `containerRef` (the scrollable div) and `bottomRef` (sentinel) — plus `autoScroll` state (boolean, default `true`).

- In a `useEffect` keyed on `messages.length`: if `autoScroll`, call `bottomRef.current?.scrollIntoView({ behavior: 'smooth' })`.
- In `handleScroll` (attached to the container's `onScroll`): compute `scrollHeight - scrollTop - clientHeight < 40`; set `autoScroll` to `true` when at bottom, `false` otherwise.

---

### 4. Header sub-section

Render a `<div>` with `flex items-center justify-between border-b px-4 py-3`:

- **Status dot**: a `<span>` with `h-2.5 w-2.5 rounded-full` coloured by `status`:
  - `"connected"` / `"open"` → `bg-green-500`
  - `"connecting"` → `bg-yellow-400`
  - `"disconnected"` / `"error"` / `"closed"` → `bg-red-500`
- **Model badge**: use the existing `Badge` component from `file:web-ui/src/components/ui/badge.tsx` with `variant="secondary"`, text = `model`.
- **Cost counter**: a `<span className="font-mono text-xs text-muted-foreground">` showing `$${cost.toFixed(4)}`.

---

### 5. Message list

Render a scrollable container (native `div` with `overflow-y-auto flex-1`, matching `EventStream`'s pattern — the existing `ScrollArea` wrapper can be used here for consistent scrollbar styling):

```
<div ref={containerRef} onScroll={handleScroll} role="log" aria-live="polite" aria-label="Agent chat messages" className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
  {messages.length === 0 ? <EmptyState /> : messages.map(msg => <MessageRow key={msg.id} message={msg} status={status} />)}
  <div ref={bottomRef} />
</div>
```

---

### 6. `EmptyState` private component

A centred `<div>` with a Hugeicons icon (e.g. `ArtificialIntelligence01Icon` already used in `DiscoveryTranscript`) and the text `"Start a conversation with your agent"` in `text-sm text-muted-foreground`.

---

### 7. `MessageRow` dispatcher

A private function that switches on `message.role` and delegates to one of seven sub-renderers:

| Role | Sub-renderer |
|---|---|
| `user` | `UserBubble` |
| `assistant` | `AssistantBubble` |
| `tool_use` | `ToolUseCard` |
| `tool_result` | `ToolResultCard` |
| `thinking` | `ThinkingBlock` |
| `system` | `SystemLine` |
| `error` | `ErrorCard` |

---

### 8. Per-role renderers

**`UserBubble`** — mirror `DiscoveryTranscript`'s user bubble: `flex-row-reverse`, `bg-primary text-primary-foreground rounded-lg px-3 py-2 text-sm max-w-[80%]`.

**`AssistantBubble`** — left-aligned `bg-muted rounded-lg px-3 py-2 text-sm`. When `status === "streaming"` and this is the last message, append a blinking cursor `<span className="inline-block w-0.5 h-4 bg-current animate-pulse ml-0.5" aria-hidden="true" />`.

**`ToolUseCard`** — collapsible card using local `useState(false)` for `expanded`. Header row: `ArrowRight01Icon` (rotated 90° when expanded, matching `EventStream`'s `ReadGroupRow`), tool name in `font-mono text-xs`, short summary. Body (shown when expanded): raw `toolInput` JSON in a `<pre className="text-xs overflow-x-auto bg-muted/50 rounded p-2 mt-2">`. Collapsed by default.

**`ToolResultCard`** — collapsible card using local `useState(false)` for `expanded`. Always shows first 200 chars of `content`. When `content.length > 200`, show a `"Show more"` / `"Show less"` toggle button (`variant="ghost" size="sm"`). Full content in a `<pre>` when expanded.

**`ThinkingBlock`** — `<div className="border-l-2 border-muted-foreground/30 pl-3 italic text-sm text-muted-foreground flex gap-2">` with a lightbulb icon (`BulbIcon` or `Idea01Icon` from `@hugeicons/react`).

**`SystemLine`** — `<p className="text-center text-xs text-muted-foreground py-1">`.

**`ErrorCard`** — `<div className="rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive flex gap-2">` with `Alert01Icon` from `@hugeicons/react`.

---

### 9. Input bar

A `<div className="border-t bg-background px-4 py-3">` containing:

- **Interrupt button** — visible only when `status === "thinking" || status === "streaming"`. Use `Button` with `variant="outline" size="sm"` and `Cancel01Icon` (already imported in `DiscoveryPanel`). Calls `interrupt()`. Add `aria-label="Interrupt agent"`.
- **`<textarea>`** — `resize-none rounded-md border bg-background px-3 py-2 text-sm flex-1`. Auto-grow: attach `onInput` handler that sets `e.target.style.height = 'auto'` then `e.target.style.height = e.target.scrollHeight + 'px'`, capped at `6 * lineHeight` via `style={{ maxHeight: '9rem' }}`. `disabled` when `status === "thinking" || status === "streaming"`. `onKeyDown`: `Enter` without Shift calls `handleSend` and `preventDefault`; Shift+Enter inserts newline naturally.
- **Send button** — `Button size="icon"` with `SentIcon` (already used in `DiscoveryInput`). Disabled when textarea is empty or agent is busy. `aria-label="Send message"`.

---

### 10. `handleSend` callback

```
const handleSend = useCallback(() => {
  const trimmed = value.trim();
  if (!trimmed || status === 'thinking' || status === 'streaming') return;
  send(trimmed);
  setValue('');
  // reset textarea height
}, [value, status, send]);
```

---

### 11. Accessibility

- Scrollable message list: `role="log"`, `aria-live="polite"`, `aria-label="Agent chat messages"`.
- Collapsible cards: `aria-expanded={expanded}` on the toggle button (matching `EventStream`'s `ReadGroupRow`).
- Interrupt button: `aria-label="Interrupt agent"`.
- Send button: `aria-label="Send message"`.
- Status dot: `aria-label` describing connection state (e.g. `"Status: connected"`).

---

### 12. Export and barrel update

- Export `AgentChatPanel` as a named export from `file:web-ui/src/components/sessions/AgentChatPanel.tsx`.
- If a `file:web-ui/src/components/sessions/index.ts` barrel exists (or once created), re-export from it.

---

## Component structure diagram

```mermaid
graph TD
    A[AgentChatPanel] --> B[Header]
    A --> C[Message List]
    A --> D[Input Bar]
    B --> B1[Status Dot]
    B --> B2[Model Badge]
    B --> B3[Cost Counter]
    C --> C1[EmptyState]
    C --> C2[MessageRow dispatcher]
    C2 --> R1[UserBubble]
    C2 --> R2[AssistantBubble + streaming cursor]
    C2 --> R3[ToolUseCard - collapsible]
    C2 --> R4[ToolResultCard - truncate + expand]
    C2 --> R5[ThinkingBlock]
    C2 --> R6[SystemLine]
    C2 --> R7[ErrorCard]
    D --> D1[Interrupt Button]
    D --> D2[Textarea auto-grow]
    D --> D3[Send Button]
```

---

Execution Information

Branch: main
Commit: cb074e3

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.