Overview of the React frontend: company selector, agent list, issue board, heartbeat timeline, cost panel, and the activity feed. Key interactions and navigation patterns.
Navigate every section of the Agent detail view in the Paperclip UI, understand what each metric means, and use the dashboard to diagnose agent health.
From the Company Dashboard → Agents → click an agent name. The Agent Dashboard has five tabs:
| Tab | Contents |
|---|---|
| Overview | Status, role, adapter, budget gauge |
| Activity | Per-run history for this agent |
| Issues | Open, in-progress, and resolved issues |
| Cost | Daily/monthly spend chart |
| Settings | Edit prompt, adapter config, budget |
| Badge | Meaning |
|---|---|
| 🟢 Active | Agent will be invoked next heartbeat |
| 🟡 Paused | Per-agent budget exceeded; auto-paused |
| 🔴 Terminated | Permanently removed from rotation |
A progress bar showing current_month_spend / monthly_budget_usd. When it reaches 100% the agent auto-pauses. You can raise the budget in Settings without restarting anything.
Shows adapter_type and key adapter_config fields (model name, endpoint URL). Never shows raw API keys — those are masked.
A chronological list of every heartbeat invocation for this agent. Each entry shows:
- Issue title that was worked
- Duration (adapter invoke time)
- Tokens used and cost in USD
- Result status: resolved, escalated, failed
Clicking an entry expands the full adapter response.
Three columns:
- Open — issues assigned to this agent waiting to be picked up
- In Progress — currently being worked (during a heartbeat run)
- Resolved — completed issues with results
A bar chart of daily spend. Useful for spotting a day when an agent ran many expensive tasks. Below the chart is a table with cumulative totals by week and month.
companies.paused)activepnpm dev starts it)monthly_budget_usd in Settings