← Design · c101

Surface Map

c1012026-09-28 · a brief for a designer

Every thing in Qpoint's dashboard has a page, and every page has a section called Surface that says what this thing reaches. Today that's nine lists. We think it wants to be a picture. Help us find out what that picture is.

The situation

Qpoint shows security and platform teams what AI coding tools are doing across their company. A person runs a tool like Claude Code or Cursor (we call it a harness) on their laptop (an endpoint). While it works, it calls AI models from providers, uses tools (some built in, some from plug-in MCP servers), carries skills, works in repos, opens files (some sensitive) and connects out to destinations on the internet. We record all of it over a time window.

Every harness, person, team, laptop, server, model and repo has a detail page. On each, the Surface section lists everything that thing reached: up to nine ranked lists. The lists are accurate, but they hide the shape of the answer. You can't see at a glance that this harness talks to five MCP servers, reaches three destinations nobody approved, and touched a shell-history file on the way.

Surface today

Priya's Claude Code install over 40 sessions, from our demo data, exactly as the lists show it now. This is the scene we'd like you to draw your way.

Surface

what this harness reaches

Everything this harness actually reaches across 40 sessions.

Models

2 in use
ModelCalls
claude-opus-4-8Anthropic
398
claude-sonnet-4-6Anthropic
371

MCP Servers

5 distinct
ServerCalls
sentry
21
linear
18
postgres-readonly
17
github
13
playwright
13

Tools

19 tools · 268 calls
ToolKindCalls
Globbuiltin
39
Bashbuiltin
27
Writebuiltin
23
WebFetchbuiltin
22
Readbuiltin
21
Grepbuiltin
19

Repos & Workspaces

from working dirs
WorkspaceRuns
payments-migration
40

Endpoints

1 host
EndpointRuns
priya-x1
40

Users

1 person
UserTeamSessions
priyaPayments
40

Sensitive File Access

2 paths
PathSeverityOpens
~/.bash_historymedium
1
payments-migration/.git/configlow
3

Network Egress

6 destinations
DestinationStatusConnections
api.anthropic.comallowed
40
api.slack.comnot allowed
7
sentry.ionot allowed
5
registry.npmjs.orgallowed
3
pypi.orgnot allowed
2
github.comallowed
2

2 blocked actions · 4 sensitive-file opens · 0 findings in the same window.

The goal

Let someone opening any detail page see what that thing reaches, and what's wrong with it, before they read a single label, and then get to the detail they need.

What people come asking

Twenty questions, grouped by the job behind them. How you frame them, which you favour and which you leave for later is yours to decide.

●our data answers it today · 13◐partly · 4○not yet · 3

What do we have?

  • ●What does this reach, and what dominates?
  • ●Where does this live?from a server or skill: every install, person and machine carrying it
  • ●Who answers for it?account → harness → person → laptop; a personal account breaks the chain
  • ◐Are these two things actually the same thing?figma configured, mcp.figma.com used

Is it in order?

  • ●What are we actually watching, and what's blind?
  • ●What's installed but never used?
  • ●What's running now, what went quiet, and what never ran?
  • ●Which copies are out of date or have drifted?
  • ◐What arrived or left since I last looked?

What could go wrong?

  • ◐What's in use that nobody set up?
  • ●What's leaving the building, and was it allowed?
  • ●Where does the risk sit?sensitive files, blocked actions, findings. If this were compromised, what could it reach?
  • ○What could it do?read-only vs destructive tools
  • ○Is this normal compared with its peers?

What should I do?

  • ◐What's waiting on my decision?
  • ○If I block this, who loses it?

Is it worth it?

  • ●How heavily is each thing used, and what does it cost?
  • ●Who's adopting what, and who isn't yet?
  • ●Where are we paying twice for the same job?

Can someone else understand it?

  • ●Can I show this to leadership or an auditor in one image?

Who asks: Security engineers, IT admins, SOC analysts, compliance and identity leads, engineering managers and FinOps. Some want reassurance, some want a to-do list, and some want a picture for a board deck.

The cast

The things a Surface can contain. Each needs to be recognizable on its own. Two already have a pawn; the rest are still marks in a list.

Harness
An AI coding tool installed for one person on one machine
States: vendor · watched or blind · live, active, quiet, never ran · up to date or not · normal or elevated risk
?
Person
Who runs it
States: team
Endpoint
The laptop or VM it runs on
⁂
Team
A group of people
States: usually a grouping, not a thing
◇
Model
An AI model (claude-opus-4-8, gpt-5…)
States: light or heavy use · cost
◈
Provider
Who sells the model (Anthropic, OpenAI…)
⇄
MCP server
A plug-in service offering tools
States: used · configured but never used · used but configured nowhere · local or remote
⚙
Tool
One action (Read, Bash, create_pull_request…)
States: built in or from a server
✦
Skill
Packaged instructions installed with a harness
States: present, use unknown · drifted copy
?
Repo
The folder it worked in
States: git repo or plain folder
▤
Sensitive file
Credentials, shell history, keys…
States: severity low / medium / high
?
Destination
A host on the internet it connected to
States: allowed or not · connection count
◉
Account
The login it used with a provider
States: company or personal

A page can centre on any of these, and the sizes vary a lot. One harness reaches about 37 things. A team is around 50. A whole company runs from a hundred to thousands.

The one pawn with states

The harness pawn already carries a small state system: a body plus decorations. It's a precedent, not a rule.

working
idle
errored
needs-input

What's fixed

  • It lives in the Surface section of a detail page. It sits beside the lists, not instead of them; the lists keep the exact numbers.
  • The things are pixel pawns. They're character-like forms from our Pixel Pawns family, recognizable by silhouette. Only the harness and endpoint pawns exist yet; the rest are yours to add to the family.
  • It renders in qmap, our isometric scene renderer. Custom models are welcome.
  • Colour is functional. It means state or risk, never decoration.
  • Everything with a page is a way in. A harness, server, model or repo opens its own detail page, just as its list row does. Files and destinations don't have pages yet.
  • It must stay honest. Our data says this reaches that. It mostly doesn't say how the reached things connect to each other, and a thing we can't see is unknown, not empty.
  • It works in light and dark, and from 1 thing to thousands.

What's open

Almost everything else is yours to decide:

  • · how the problem is framed
  • · which questions lead, and which become optional views
  • · how things are arranged and grouped
  • · how lines, weight, labels and marks work
  • · whether the viewer moves the camera
  • · what the empty state looks like

Some questions we've been asking ourselves, not to answer on our behalf, only as starting points:

  • · Full pawns for every thing, or simpler forms for the minor ones?
  • · Should nineteen tools be nineteen things, or collapse into their server?
  • · Map first or list first, and does it depend on the page?
  • · How far does the first round need to go toward the thousands case?

What we'd love to see first

  1. 1
    Your framing

    Which questions this map is really for, for whom, and what you'd leave out.

  2. 2
    The cast

    A first pass at the pawns and the states that matter.

  3. 3
    One real scene

    Priya's harness, shown above as it is today, drawn your way.

After that, we'll pick the next steps together.

Material

Qpoint Brand Style Guide