# 568 Agent Response Panel 89a51af1

> Agent Response Panel

- Skill: `tools-only/568-agent-response-panel-89a51af1` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/568-agent-response-panel-89a51af1`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/568-agent-response-panel-89a51af1/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tools-only/568-agent-response-panel-89a51af1

---

# Agent Response Panel

**Date:** 2026-01-08
**Scope:** UI / Agent Output
**Status:** Canonical

## Overview

Agent text responses are rendered in styled panels matching the NeXTSTEP tool panel aesthetic. This provides visual consistency across all output types.

## Layout

```
┌─────────────────────────── agent ───────────────────────────┐
│                                                              │
│  [Markdown Content]                                          │
│  The agent's response with proper syntax highlighting,       │
│  code blocks, lists, and other markdown formatting.          │
│                                                              │
│  ──────────                                                  │
│  ANTH/claude-3.5-sonnet  ·  2.3s  ·  1.2k                   │
└─────────────────────────────────────────────┘
```

### Components

1. **Title Bar**: "agent" label in accent color
2. **Viewport**: Markdown-rendered content (full width)
3. **Separator**: Horizontal line before status
4. **Status Bar**: `model · t/s · tokens`
5. **Subtitle**: Timestamp (bottom border)

## Design Decisions

### Border Color: Accent (Pink)
Matches the existing "agent:" label styling throughout the UI. NeXTSTEP principle: "Objects that look the same should act the same."

### Full Width Panels
Panels expand to fill the viewport rather than using fixed width. Per NeXTSTEP guidelines: "A standard window should fill a reasonable portion of the screen."

### Model in Panel, Not Top Bar
Model name moved from the top resource bar to the agent response status bar. This reduces clutter in the persistent UI while showing the model contextually with each response.

### Status Bar Metrics
Three metrics provide actionable feedback:
- **Model**: Capability awareness (Provider abbreviated, e.g., `ANTH/`, `OA/`, max 40 chars)
- **Tokens**: Cost awareness
- **Duration**: Performance awareness (removed)

## Implementation

**File:** `src/tunacode/ui/renderers/agent_response.py`

```python
from tunacode.ui.renderers.agent_response import render_agent_response

panel = render_agent_response(
    content="Agent's markdown response...",
    tokens=1234,
    duration_ms=2340,
    model="anthropic/claude-3.5-sonnet",
)
rich_log.write(panel)
```

### Duration Tracking
Duration is tracked in `app.py:_process_request` using `time.monotonic()`:
- Start time captured before request
- Delta calculated at finalization
- Passed to renderer in milliseconds

### Model Name Formatting
Provider prefixes are abbreviated for compact display:
- `anthropic/claude-3.5-sonnet` → `ANTH/claude-3.5-sonnet`
- `openai/gpt-4o` → `OA/gpt-4o`
- `google/gemini-pro` → `GOOG/gemini-pro`

## Resize Behavior

RichLog renders content once at write time. On terminal resize:
- New panels render at new width
- Existing panels retain original width

This is a Textual/RichLog limitation, not a bug. Accepted trade-off.

## Related Files

- `src/tunacode/ui/renderers/agent_response.py` - Panel renderer
- `src/tunacode/ui/app.py` - Integration point (lines 309-324)
- `src/tunacode/ui/widgets/resource_bar.py` - Top bar (model removed)
- `docs/ui/nextstep_panels.md` - Tool panel specification