DataSurfaceSection

components/data/surface-section/index.vue

The chrome around a set of DataSurfacePanels — the "Surface" heading, a mono caption naming the scope ("what this agent touches"), a lede, an anchor id for NavJumpPills, and the responsive panel grid. Deliberately only the shell: which panels appear, what their bars measure, and where rows link is the consumer's composition.

Surface

what the fleet touches

Everything agents actually reach — models called, MCP servers connected, workspaces and tools in active use.

MCP Servers

3 distinctall →

Repos & Workspaces

from working dirsall →
Scenarios
Minimal — title only, one panel

Surface

Models

ModelCalls
claude-sonnet-4-6
398
claude-opus-4-8
299
gpt-5.5-codex
199
Three columns — the six-panel agent-detail case, with a #before strip

Surface

what this agent touches

Everything this agent actually reaches across all 40 sessions.

machines
1
mostly flat
models
2
1 → 2
MCP servers
5
3 → 5
workspaces
1
mostly flat
tool calls
268
147 → 268

Models

4 in use
ModelCalls
claude-sonnet-4-6
398
claude-opus-4-8
299
gpt-5.5-codex
199
gemini-2.5-pro
100

MCP Servers

3 distinct
ServerCalls
github
21
linear
14
sentry
7

Repos & Workspaces

from working dirs
WorkspaceRuns
payments-core
40
infra-tools
20

Tools

268 calls observed
Tool · top by callsKindCalls
Globbuiltin
39
Bashbuiltin
31
Writebuiltin
23
describe_tablemcp
16
get_issuemcp
8

Machines

2 hosts
MachineRuns
priya-x1
40
priya-mbp
20

Users

1 person
UserTeamSessions
priyaPayments
40
Empty — every panel shows its own empty copy; the chrome stays

Surface

what this machine touches

Nothing observed on this host yet.

Models

No model usage captured here yet.

MCP Servers

No MCP servers contacted here.

Repos & Workspaces

No working directories captured here.

Tools

No tool calls observed here.
Overflow — a 72-character caption and a long lede wrap under the heading

Surface

who connects to this server, and what it exposes, across every run the sensor has ever seen

Who reaches this server across every run the sensor has ever recorded — the tools it exposes, the agents calling them, the people behind those agents, and the machines they run on, ranked by how often each was seen so the leaders read first.

Tools

ToolKindCalls
Globbuiltin
39
Bashbuiltin
31
Writebuiltin
23
components/data/surface-section/index.vue

Usage

<DataSurfaceSection title = "Surface" caption = "undefined" lede = "undefined" id = "sec-surface" :columns = "2" > Content here </DataSurfaceSection>

Props

PropTypeDefaultDescription
titleString'Surface'Section heading
captionStringundefinedMono scope caption beside the heading (or use #caption)
ledeStringundefinedOne-line explanation under the heading (or use #lede)
idString'sec-surface'Anchor id for jump navs
columnsNumber2Panel grid columns at lg+: 1 stacks, 2 default, 3 for the six-panel case

Slots

SlotDescription
defaultThe DataSurfacePanels (or anything else) laid out in the grid
captionCustom caption content
ledeCustom lede content
beforeContent between the lede and the grid — a footprint strip, a trigger bar

Related

Qpoint Brand Style Guide