DataSurfacePanel
components/data/SurfacePanel.vue
Ranked rows with a trailing DataPercentBar column — the house shape for "what does this thing touch" lists (models, MCP servers, workspaces, tools, sessions). Owns its overflow behavior via UxShowMore.
MCP Servers
5 distinctServerCalls
github
412
postgres
168
stripe-test
84
linear
61
sentry
22
Scenarios
Three-column (label · pill · bar) with drill-down rows
Tools
calls observedOverflow — rowCap 3 engages UxShowMore
Models
ModelCalls
github
412
postgres
168
stripe-test
84
Empty
Repos & Workspaces
No working directories captured.
components/data/SurfacePanel.vue
Usage
<DataSurfacePanel
title = "—"
caption = "undefined"
:headers = "—"
:rows = "—"
barKey = "—"
:barMax = "barMax"
:rowKey = "—"
:rowTo = "rowTo"
allTo = "undefined"
listingTo = "undefined"
empty = "—"
:rowCap = "10"
:expandCap = "50"
:compact = "false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | String | — | Panel heading |
| caption | String | undefined | Mono caption beside the title (or use #caption) |
| headers | String[] | — | Column headers; 2 = [label, bar], 3 = [label, pill, bar] |
| rows | any[] | — | Row objects |
| barKey | String | — | Row field the bar plots |
| barMax | Number | undefined | Real denominator override; defaults to the leader value |
| rowKey | (row) => string | — | Row key function |
| rowTo | (row) => string | undefined | Row drill-down target; absent = static rows |
| allTo | String | undefined | Fleet "all →" header link |
| listingTo | String | undefined | Overflow hand-off target for UxShowMore |
| empty | String | — | Empty-state message |
| rowCap | Number | 10 | Rows shown before UxShowMore engages |
| expandCap | Number | 50 | Rows shown once expanded |
| compact | Boolean | false | Chrome-less dense mode; passed through to #row |
Slots
| Slot | Description |
|---|---|
| row | Label/pill cells for one row; scope: { row, border, clickable, compact } |
| caption | Custom caption content |