Section 13 · Components

Tables.

The proxy log. The history list. The MITM event stream. These tables are the product. Density first, then everything else.

Anatomy

Method

Path

Status

Time

ms

POST

/v1/auth/login

● 200

12:04:11

143

GET

/v1/users/me

● 200

12:04:11

38

POST

/v1/messages

● 201

12:04:14

89

GET

/v1/messages?since=12:04

● 200

12:04:18

62

DELETE

/v1/messages/9f3a

● 500

12:04:21

2104

Spec

row height36px (md, default) · 32px (sm) · 44px (lg)

cell padding9px 12px (md) · matches row height

fontcell content: Geist Mono 12.5px (this is data, not prose)

header10.5px Mono 600 · uppercase · 0.08em tracking · fg-mute on bg-3

numbersfont-variant-numeric: tabular-nums · right-aligned · fg-dim

bordersline between rows · line-2 above header · no vertical lines

hoverrow bg → bg-2 · cursor pointer if clickable

selectionselected row → bg-2 + neon left bar (3px)

sortarrow glyph after header label · neon when active

Empty & full

Empty: table chrome stays · single row spans all columns · centred message + primary action (see Empty states).
Loading: chrome + 6 skeleton rows. Don't blank the chrome.
Long lists: virtualise above 200 rows. Sticky header. No pagination — these are logs, not records.

Don't

Don't zebra-stripe. Borders do that job; double-decorating is busy.
Don't centre cell content. Numbers right, everything else left.
Don't put a button in every row. Hover-reveal. Always-visible buttons turn the table into noise.