AgentMiniCard

components/agent/MiniCard.vue

Compact agent summary card — AgentPawn state at a glance, workspace + provider identity, request/file stats inside pixel-frame icons, tools & skills, and navigation links. Pixel icons render via UxPixelArt (theme-aware).

Claude Code
Requests
349
Files
21
8Read
4Write
9Edit
Tools & Skills8
db-skill
actuary-skill
+6 more
Designed states
Claude Code
Requests
349
Files
21
8Read
4Write
9Edit
Tools & Skills8
db-skill
actuary-skill
+6 more
Claude Code
Requests
349
Files
21
8Read
4Write
9Edit
Tools & Skills8
db-skill
actuary-skill
+6 more
Claude Code
Requests
349
Files
21
8Read
4Write
9Edit
Tools & Skills8
db-skill
actuary-skill
+6 more
Waiting for your input
Claude Code
Requests
349
Files
21
8Read
4Write
9Edit
Tools & Skills8
db-skill
actuary-skill
+6 more
components/agent/MiniCard.vue

Usage

<AgentMiniCard state = "working" agent = "claude-code" folder = "—" :requests = "0" :files = "{ total: 0, read: 0, write: 0, edit: 0 }" :tools = "{ count: 0, items: [] }" />

Props

PropTypeDefaultDescription
stateString'working'Passed to AgentPawn (working, idle, errored, needs-input, angel). needs-input renders the AgentInputBubble above the pawn.
agentString'claude-code'Resolved against the agent registry for the provider row (logo + label).
folderString''Workspace/folder label shown next to the pixel folder icon.
requestsNumber0Request count rendered inside the browser-frame pixel icon.
filesObject{ total: 0, read: 0, write: 0, edit: 0 }File totals — total renders inside the page icon, read/write/edit as the breakdown rows.
toolsObject{ count: 0, items: [] }Tools & Skills — count in the header, items as { icon, label } rows (icon = pixel-icons filename, e.g. "briefcase").

Events

EventDescription
view-detailsView Details link clicked.
go-to-agentGo to Agent link clicked — also emitted by the needs-input bubble button.

Related

Qpoint Brand Style Guide