Components
Every primitive in the kit, written from scratch — no headless dependency, one token set for both themes, and keyboard and screen-reader behaviour wired in rather than bolted on.
346 components138 basics208 blocks36 categories
Basics138
The vocabulary. Buttons, fields, dialogs, tables, charts — components that encode no business concept, so they belong in any product.
Forms
37- ButtonA control for a single action. Six variants across eight colour sets, ten sizes, and `asChild` to render as any element. Destructive is a colour, not a variant.
- Button GroupJoins controls into one segmented unit — buttons, inputs, selects, or a mix. Inner corners are squared and adjacent borders overlap, so the row reads as a single control rather than a queue of separate ones.
- InputA single-line text field, built on the headless Field primitive. Monochrome by design — it shares the Button size steps but none of its colour sets.
- TextareaThe multi-line sibling of Input. Same variants, same padding rule, with a resize control and no icon slot.
- LabelA form label. htmlFor is the point — clicking it focuses the control, and a screen reader announces the two together.
- CheckboxA binary choice. A real native checkbox under a styled box, so labels, forms, keyboard and the indeterminate state all work.
- Radio GroupOne choice out of several. Built on native radio inputs, so arrow-key roving, form submission and the single-selection invariant come from the platform.
- SwitchAn instant on/off toggle. A native checkbox with role="switch", so it submits with a form and toggles from the keyboard.
- SelectA custom dropdown, not a native select — the trigger matches Input exactly and the panel is real markup. Full keyboard support, type-ahead, and dismissal on Escape or outside click.
- SliderPick a value along a range. A restyled native range input, so arrow keys, Home/End, touch dragging and form submission all work without JavaScript.
- ToggleA button that stays pressed. Uses aria-pressed rather than a checkbox, because this is a control that changes state, not a value submitted with a form.
- ComboboxA Select you can type into. The search box lives inside the panel rather than replacing the trigger, so the chosen value stays visible while you filter.
- Date PickerCalendar in a Popover with a trigger that reads like an Input. Every Calendar capability passes through — range, presets, times, multiple months — so there is one date implementation, not two.
- Input OTPA fixed-length code entry, one box per character. Every box is a real input so autofill can target it, and paste is distributed across all of them.
- FieldWires a label, a control, help text and an error message together — id, aria-describedby and aria-invalid, all of which are easy to get one short of by hand.
- FormA thin bridge between React Hook Form and Field. Field owns the accessibility wiring and knows nothing about any form library; this adds only state and validation.
- DropzoneThe upload card: click it or drag onto it, and it runs the upload. Hand it onUpload and it moves each file through queued, uploading, done or error, reports progress, and keeps failures on screen with a retry.
- Input FileA file picker shaped like an Input that also runs the upload. Hand it onUpload and it moves each file through queued, uploading, done or error, reports progress, and keeps failures on screen with a retry.
- Number InputA number field with steppers. Uses type="text" with inputMode="decimal", because the native number input silently discards what it cannot parse — a half-typed "1e" or "-" vanishes as you type it.
- Password InputA password field with a reveal toggle and an optional strength meter that rewards length over symbols — the thing naive meters get wrong when they demand punctuation from a passphrase.
- Tag InputFree-text chips for keywords, recipients or labels. Backspace on an empty field removes the last tag, and pasting a comma-separated list splits it rather than making one long tag.
- Multi SelectPick several options. The gap Select cannot fill — it is a single-value combobox by construction, which is why the LogViewer level filter had to become a threshold instead of a set.
- Mask InputFormats as you type — card numbers, phone numbers, dates. Hands back the raw characters alongside the formatted text, so a form does not submit "(555) 010-9999" to an API expecting digits.
- Time PickerPick a time of day from generated slots. The value is always HH:mm in 24-hour form regardless of how it is displayed — the format is presentation, the value is data.
- Color PickerA palette first, free entry second. Most product colour pickers choose a label or category colour, where an arbitrary hex is a liability — a gradient invites a colour nobody can read text on.
- Range SliderTwo thumbs over one track. Slider is a restyled native input[type=range], which has exactly one thumb by construction — so a range needs a custom control with the ARIA written out.
- RatingA rating, readable or settable, drawn with monochrome marks. The icon is a prop; read-only renders one image with a text alternative — "4 out of 5" — rather than five separate announcements.
- Segmented ControlA small set of mutually exclusive choices shown at once, built from real radio inputs in a fieldset — so arrow keys, form submission and screen-reader announcement all work without any script.
- Phone InputA country selector and a national number that together produce E.164 — the shape every telephony API wants. Honest about not being a validator.
- Currency InputA money field whose value is an integer number of minor units, formatted only while unfocused. Reads its decimal count from Intl, so zero-decimal currencies work without a special case.
- Signature PadA canvas you sign with a finger, stylus or mouse. Strokes are kept as points and redrawn, so undo, resize and export all work — and stylus pressure varies the line.
- TransferTwo lists and the movement between them, for choosing a subset from a large pool. Both sides are searchable — filtering the target is what makes a 200-item selection usable.
- CascaderA regular hierarchy picked one level at a time, in side-by-side columns — so the path stays readable and the siblings you passed are still visible.
- Tree SelectA tree in a popover with real tri-state parents. Checking a branch checks its subtree, the value holds only leaves, and searching keeps the ancestors of every match.
- Emoji PickerA grouped, searchable grid with recents, rendered as text rather than sprites. One tab stop with arrow-key movement, and it never touches localStorage.
- Filter ToolbarThe filter row of a list page: a search box, the most used filter inline, the rest behind "Filters" — a popover on a wide screen, a bottom sheet on a phone — and what applies as removable chips. Values in, changes out, so it works over state, a store or the URL.
- Date Range FilterA date range as a list filter. It reports a range only once both ends are picked — the first click is half a range, and a filter that hears it fetches "everything since Tuesday" first — and the range runs to the last millisecond of the end day.
Display
25- CardA surface that groups related content. Header and footer are optional and draw their own dividers — a Card holding only a CardBody is just a padded box.
- GroupA recessed container that holds a set of cards. Padding and gap are the same value, and the corner radius is concentric with the cards inside it.
- Code BlockSyntax-highlighted source with an optional title or file path, copy, inline editing, line numbers and collapsing.
- BadgeA short status or category marker. Unlike a field, a badge exists to be noticed, so it keeps the full colour system and the tint escape hatch.
- AvatarAn image standing in for a person, with a fallback that always renders. Initials are derived from the name, and a broken image falls through to them.
- TableRows and columns of structured data. The wrapper scrolls rather than the page, so a wide table never forces horizontal scroll on the whole document.
- Data GridSorting and selection over Table, driven by a column definition. The sort is stable and never mutates your array, so re-sorting on an equal column leaves settled rows where they were.
- StatOne measurement: label, value and how it moved. Which direction counts as healthy is a prop, because a rise in incidents is not a rise in deployments.
- SparklineA microchart with no axes, legend or dependency — plain SVG over a normalised range, sized by whatever box you put it in.
- ChartA small line, area or bar plot in plain SVG. Not a charting library — everything here is a scale and a path, which is the right trade for six numbers on a dashboard card.
- GaugeA radial meter — the circular counterpart to Progress. Drawn with stroke-dasharray rather than an arc path, so the sweep is one number and there is no arc-flag maths to get wrong.
- DonutParts against a whole. Arcs are stroke-dasharray on a circle rather than wedge paths — one number per slice, and no arc-flag branch at the halfway point.
- FunnelConversion through ordered stages, with both the overall rate and the step rate. A funnel showing only the overall rate hides which single step is losing people.
- Heatmap GridA calendar heatmap — weeks as columns, weekdays as rows. UptimeStrip is the one-dimensional case; this is the grid.
- TypographyProse styling for content you did not author element by element — rendered markdown, a CMS body, a changelog. Headings start at h2, since the page already has its h1.
- KanbanColumns of cards, movable between them. Drag-and-drop is pointer-only, so every card also moves with the arrow keys — a board you can only drag excludes keyboard users from its main action.
- Description ListKey/value metadata as a real <dl>, so a screen reader announces each term with its value. Columns on wide screens, stacked on narrow ones.
- FmtOne component for every formatted value — dates, numbers, currency, bytes, durations, relative times — so the locale is a single decision rather than three developers reaching for toLocaleString, toFixed and padStart on one screen.
- SeparatorA rule between sections, horizontal or vertical, optionally with a label set into it.
- SkeletonA placeholder shape for content that has not arrived. The pulse animates opacity only, so it stays inside the kit motion rule, and stops under prefers-reduced-motion.
- Aspect RatioHold a box at a fixed ratio while its width is fluid. Modern CSS aspect-ratio, so no padding-top hack.
- KbdA keyboard key. Splits on "+" so a chord can be written as one string.
- CalendarA date grid in single or range mode, with presets, times, dropdown captions and multiple months. No date library — the grid, weekday names and times all come from Intl.
- CarouselA horizontally scrolling row of slides, built on CSS scroll-snap rather than a transform track — so touch swiping, momentum and keyboard scrolling all keep working.
- EmptyThe state a list is in before it has anything in it. An icon, a reason and a next action are what make the empty case useful rather than merely honest.
Navigation
18- TabsSwitch between panels in the same context. Full WAI-ARIA keyboard support: arrows rove, Home and End jump, and only the active tab is in the tab order.
- AccordionA stack of collapsible sections. Each header is a real button inside a heading, which is what makes the set navigable by heading in a screen reader.
- CollapsibleA single panel that expands and collapses. The open height is measured rather than assumed, because height: auto cannot be transitioned.
- BreadcrumbThe trail back up the hierarchy. An ordered list in a labelled nav, with the current page marked aria-current and deliberately not linked.
- StepperProgress through a fixed sequence. One `current` index drives the common case; any step can override its own status for a failure or a skip in the middle.
- TimelineA vertical run of events sharing one rail — deploys, incidents, review activity, an agent run. The connector stops at the last item instead of dangling past it.
- ToolbarA group of controls that arrow keys move between — the ARIA role ButtonGroup deliberately does not claim, because claiming it without implementing it is worse than not claiming it.
- MenubarAn application menu bar. What makes it a menu bar rather than a row of dropdowns: once one menu is open, moving along the bar opens the next instead of merely focusing it.
- Navigation MenuA site nav bar with mega-menu panels and hover intent — a short open delay so crossing the bar does not flash panels, and a longer close delay so the panel is reachable.
- Table of ContentsAn anchor list that tracks which heading is on screen, through IntersectionObserver rather than scroll offsets. Reads the DOM by default, so it works for rendered markdown.
- Virtual ListRenders only the rows in view. DataGrid and LogViewer both render every row they are given, which is fine until a few thousand and then stalls the main thread.
- TreeA collapsible hierarchy with real keyboard navigation — arrow keys move by what is visible, one tab stop for the whole tree, and ARIA that says where each row sits in its branch.
- PaginationMove between pages of results. The windowing rule — how many neighbours to show and where the gaps fall — is exported as pageItems, so it can be reused or tested on its own. OffsetPagination and CursorPagination cover lists that cannot be browsed by page number: a range, Previous and Next.
- SidebarTwo sidebars from one set of parts: the app frame, a transparent rail beside a rounded content panel, and a static nav that lives inside a page. Either can be pinned to the left or the right, two can share one frame, and a rail collapses to icons or to nothing at all.
- Scroll AreaA scrollable region with a themed scrollbar, styled through the standard scrollbar properties rather than a JavaScript overlay — so native momentum and keyboard scrolling stay intact.
- ResizableTwo panels with a draggable divider. Sizes are percentages, so the split survives a container resize — and the handle is a real slider, so arrow keys resize it too.
- Bottom NavThe mobile tab bar — three to five destinations, pinned to the bottom where thumbs are, with the home-indicator safe area accounted for.
- Back To TopAppears once you have scrolled the nearest scrolling ancestor — which it finds itself — and it moves focus, not just the viewport.
Overlays
13- StoryA full-screen sequence of panels over a darkened page. A dialog underneath — same overlay, focus trap, Escape and scroll lock — but it advances on its own, and everything else follows from that.
- DialogA modal window, built on the native <dialog> element — so the focus trap, background inerting, Escape handling and top-layer stacking come from the platform rather than from JavaScript.
- Alert DialogA modal that interrupts to confirm something consequential. Unlike Dialog it has no backdrop dismissal and no corner close — a destructive confirmation should take a deliberate answer.
- SheetA panel that slides in from an edge. Same native <dialog> machinery as Dialog, pinned to one side — so it inherits the focus trap and Escape handling.
- DrawerA bottom sheet you can drag away. Built on a native dialog, so focus containment and inerting the page come from the platform rather than a hand-rolled trap.
- TourGuided coach marks over the real interface. Steps point at selectors, so a tour is data next to the copy it belongs to rather than refs threaded through every component it visits.
- PopoverRich content anchored to a trigger. Positioned with a fixed-position popper that flips when it would overflow, and dismissed by Escape or an outside press.
- Dropdown MenuA menu of actions hung off a trigger. Unlike Select this is a list of commands, not a value — items are buttons, the menu closes on activation, and focus returns to the trigger.
- TooltipA short hint on hover or focus. Focus opens it immediately — a keyboard user has already committed — while pointer hover waits, so sweeping across a toolbar does not fire a row of them.
- Hover CardA preview card shown on hover — richer than a tooltip, and pointer-only. There is a close delay as well as an open delay, so the pointer can travel into the card without it vanishing.
- Context MenuA menu opened by right-click, positioned at the pointer. It has no element to anchor to — the anchor is a point — so it clamps against the viewport rather than flipping.
- CommandA command palette: type to filter, arrows to move, Enter to run. Items are data rather than children, because filtering has to reorder and hide them.
- PopconfirmA confirmation anchored to the control that triggered it, for reversible or single-item actions — so the row you are asking about stays visible.
Feedback
6- AlertA prominent message that stays on the page. Keeps the colour system, and picks its ARIA role from severity — a destructive alert interrupts, the rest wait their turn.
- BannerA page-level announcement strip. Distinct from Alert, which belongs to the content around it — a banner spans the page and belongs to the session.
- ToastTransient messages that stack and dismiss themselves. A provider plus a useToast() hook rather than a global singleton, so the queue lives in React state and two regions can coexist.
- ProgressHow far along a task is. Omit the value for an indeterminate bar, which sweeps rather than fills — the one honest way to say "working, duration unknown".
- SpinnerAn indeterminate busy indicator. Rotation is the one exception the motion rule has to allow — a still spinner says nothing. It stops under prefers-reduced-motion.
- ResultThe whole-page outcome — not found, forbidden, server error, done. Announced on render, so a client-side route change to an error page is not silent for a screen reader.
Utility
12- CountdownTime remaining until a deadline, ticking. It counts toward a Date rather than decrementing a number, because setInterval is throttled in a background tab — a decremented timer drifts and then confidently shows the wrong number.
- Copy ButtonCopies a string and says so. Extracted after the same clipboard-plus-timer was written four times in this kit — CodeBlock, Terminal, EnvVars and Message all route through it now.
- ComposerA live playground: drive a set of props and watch the generated source follow. Assembled from the kit’s own controls, so anything awkward about Select, Switch or NumberInput surfaces here first.
- LogoA brand mark that follows the room it has: the full artwork while the rail is open, the square mark once it collapses. Falls back to the product name, and to its initials when only 52px are left.
- Theme ToggleSwitches the document between light and dark. Uncontrolled by default: it reads the class already on the element rather than flashing to its own idea of the default on mount.
- Page HeaderThe masthead a page opens with: eyebrow, title, lead and a meta row. Extracted after four pages in this catalogue had each grown their own copy and drifted apart.
- Skip LinkThe first tab stop: jump past the navigation to the content. Invisible until focused, which is the whole design.
- Visually HiddenHidden from sight, present for screen readers. The clip technique — not display:none or visibility:hidden, both of which remove the element from the accessibility tree entirely.
- Live AnnouncerImperative screen-reader announcements for things with no visible region of their own — a background save finishing, a filter narrowing a list.
- Error BoundaryCatches a render error in its subtree and shows a fallback. The one component here that must be a class — getDerivedStateFromError has no hook equivalent.
- QR CodeA QR code encoded in the browser and drawn as SVG. No dependency and no network round trip — which matters, because the two things people encode most are a TOTP secret and a wallet address.
- Cookie ConsentA consent banner with reject as easy as accept, nothing pre-ticked, and no cookie written by the component itself — the arrangement regulators have repeatedly ruled is the compliant one.
Media
9- ImageAn img that reserves its space, covers its own load with a skeleton, shimmer or blurred thumbnail, builds a srcset from a list of widths, and renders a fallback in the same box when the URL is dead.
- Audio PlayerA player built on the real <audio> element, so buffering, codecs, media keys, the OS lock screen and Bluetooth controls all keep working. State is read back off the element rather than mirrored, so anything else touching playback stays in sync.
- Compare SliderTwo images stacked, with a handle that wipes between them. Side-by-side thumbnails make the reader diff from memory; a wipe puts both states in the same pixels, so the difference is the only thing that moves.
- MasonryA column layout for items of unequal height, built on CSS columns rather than a JS layout pass — so it packs before paint and reflows on resize for free. Items order top-to-bottom within a column, which is the trade.
- Video PlayerA player with a scrubber, quality and subtitle menus. Controls are real buttons on a real timeline, so the keyboard reaches every one of them — a div-based scrubber never does.
- Media GalleryA grid that opens into a lightbox. `alt` is required by the type rather than optional, because a gallery is exactly where missing alt text accumulates.
- Upload ListFiles in flight, with per-file progress and a retry for the ones that failed. A failed upload keeps its row rather than vanishing — silently dropping it is how people lose work.
- PDF ViewerA PDF in the browser’s own viewer with a toolbar around it. It delegates the rendering on purpose, and always shows a download link — because embedded PDFs fail routinely.
- Image CropperThe step between picking an image and saving it. The crop is stored in natural image coordinates and exported with toBlob, so it survives a resize and uploads directly.
Geo
5- Map EmbedA map on CARTO's near-monochrome basemap. A full-colour street map fights everything drawn on top of it; a greyscale ground lets the marker be the only saturated thing on screen.
- Location PickerPick a place by searching, or by typing coordinates. Both routes stay open: search covers the common case, the fields cover the field site or mooring that no geocoder knows.
- Address InputA postal address whose shape follows the country. A US form asks for a State and a ZIP; a UK one asks for a County and a Postcode; Japan puts the postal code first. Shipping the US layout everywhere is how forms reject valid addresses.
- Coordinate InputLatitude and longitude, accepting decimal degrees or DMS. A latitude above 90 is reported as "is this a longitude?" rather than "out of range" — swapped pairs are the most common coordinate bug there is.
- Timezone SelectAn IANA timezone picker showing each zone's current offset and local time. Zones are named by city, never by abbreviation — "CST" is Central, China and Cuba Standard Time.
Knowledge
4- Note GraphA vault of linked notes laid out by force — the Obsidian-shaped view. Nodes are sized by how many links touch them, hovering dims everything outside the neighbourhood, and orphans are drawn hollow rather than hidden.
- Knowledge GraphEntities and the named relations between them. Where a note graph answers what is connected, this answers how — and the edge label carries as much meaning as the nodes, so relations are labelled and directed.
- MarkdownRendered markdown with a switch to the source. It builds React nodes and never sets innerHTML, so a document you did not write cannot execute — and the RAW toggle is there because rendered output hides exactly what you look at when it renders wrongly.
- Markdown EditorA real textarea, a toolbar that edits the selection through setRangeText — so the browser undo stack survives — and the Markdown component as its preview.
Charts
5- Scatter PlotTwo measured variables plotted against each other, with an optional least-squares trend line and Pearson’s r. Points can carry a third dimension as area and a fourth as colour.
- Radar ChartSeveral measures for one subject on axes radiating from a centre. Good for recognising a profile’s shape; documented plainly as the wrong chart when the reader needs to compare values.
- SankeyFlow between stages, where band width is the quantity moving. Nodes are layered by longest path so every link runs forward, and a cycle is reported rather than drawn as something plausible.
- TreemapPart-to-whole as nested rectangles sized by area, laid out with the squarify algorithm so tiles stay close to square instead of degenerating into slivers.
- Box PlotQuartiles, Tukey whiskers and outliers — the distribution an average hides. Quartiles use linear interpolation, so they agree with what your analytics stack reports.
Views
4- Node CanvasA pannable, zoomable canvas of draggable nodes and the edges between them — the substrate for an agent pipeline, a retrieval chain or a build DAG. Nodes are real DOM, so you put your own components inside them.
- GanttWork on a timeline: drag a bar to reschedule and its edges to change the start or end, with a computed critical path and dependency conflicts surfaced as you create them.
- SchedulerA week of days with events laid out against the hours and edited in place — drag to move across days, drag an edge to change the end, drag empty grid to create. Overlaps split into columns rather than stacking.
- Org ChartA reporting hierarchy drawn top-down with connectors, built from flat { id, managerId } rows. Orphans and multiple roots are rendered rather than dropped; cycles are reported.
Blocks208
Built on the basics, for one job each. A block already knows what a commit is, or a wallet, an invoice, a span — the part normally rebuilt from scratch on every project.
Crypto
24- Wallet ConnectConnect button and connected account in one control. Wrong-network outranks showing a balance — a figure from the wrong ledger is worse than none, because it looks authoritative.
- Wallet AddressAn address shortened for display but never for copying. The truncation floor is security-relevant: attackers generate lookalikes sharing the first and last characters, so `chars` cannot go below six.
- Token AmountA balance formatted from base units without ever touching a float. 1 ETH is 10¹⁸ wei, which exceeds Number.MAX_SAFE_INTEGER by two orders of magnitude — a balance that passes through a JavaScript number is silently wrong.
- Token SelectA token picker with balances and search. Symbols are not unique — anyone can deploy a contract called "USDC" — so unverified tokens are segregated, badged, and shown by contract address rather than the name they claim.
- Chain SelectA network switcher. Testnets are labelled and grouped below mainnets — transacting on the wrong network is the most expensive user error in this space, and an unlabelled list invites it.
- Network StatusRPC health: block height, latency, sync state. Staleness is derived from the age of the last block — a stuck node answers cheerfully with an old height, so "connected" from the node proves nothing.
- Portfolio BalanceTotal value with its allocation. The hide toggle is part of the component, not an app-level bolt-on — people check balances on trains. Allocation is computed from the values, never taken as a percentage prop.
- Transaction ListWallet activity grouped by day. Direction is derived against the connected account, not passed in — the same transfer is a send for one wallet and a receive for another, and a self-transfer is both.
- Swap PanelThe pay/receive form of a token swap. Price impact is surfaced rather than buried behind a details toggle, and above a threshold the action is disabled outright.
- Transaction StatusA transaction from submitted to final. Confirmations are progress toward a threshold, not a tick at one block — chains reorganise, and "done" at one confirmation teaches a habit that eventually costs money.
- Gas TrackerGas tiers with what each actually costs. Gwei alone is not a decision — the same gas price costs four times more for a swap than a transfer, which is why gasLimit is a prop.
- Token ApprovalsSpending allowances granted to contracts, with revoke. An unlimited approval is stated as "unlimited" rather than rendered as 2²⁵⁶−1, which reads like a display bug — it is a standing permission to move the whole balance, forever.
- Staking PanelA staking position: stake, rewards, APY and unlock. APY is labelled variable unless told otherwise, because it almost always is — a bare percentage reads as a fixed-term rate.
- Price TickerA live price with its change. The flash on update is colour only — a ticker that moves makes the whole page twitch — and it compares against the previous rendered price, not the day’s direction.
- Market TableA market list with price, change, volume and cap. Rank is the caller’s, never the row index — a re-sorted table that renumbers from one destroys the identifier people use to talk about a market.
- Candlestick ChartOHLC candles with a volume strip. Unlike every other chart here it does not stretch — a stretched candle varies its body width with the container while the wick stays one unit, and the body-versus-wick reading stops working.
- Order BookBids and asks with cumulative depth. The bar is the running total from the top of book, not the size at that level — what matters when taking liquidity is how much sits between you and a price.
- NFT CardA token tile: media, collection, price. Broken media resolves to a placeholder rather than collapsing the tile — IPFS gateways fail constantly and a grid that reflows on every 404 is unusable.
- Mint PanelSupply, price and quantity, with the total shown before the button. A price of "0.08 ETH" beside a quantity of 5 is not a number anyone should be multiplying in their head at a mint.
- Bridge StatusA cross-chain transfer as its two legs. Not one progress bar: the legs fail independently and the second cannot begin until the first is final, so a single bar implies a state that does not exist.
- Liquidity PositionA concentrated-liquidity position with its range. In-range versus out-of-range is the headline — a position outside its range earns nothing, and a card showing only "fees earned" while it stopped earning last week is misleading.
- Governance ProposalA proposal with its tally. Quorum is tracked separately from the majority because they are separate tests — a 92% "for" reads as passing right up until it fails for turnout.
- Validator ListValidators with commission, uptime and voting power. Flags membership of the smallest set controlling a third of the stake, and sorts ascending by default — the conventional descending sort pushes delegators toward whoever is already largest.
- Seed PhraseA recovery phrase, blurred until revealed. Deliberately hostile to convenience: no copy button and no selection, because a seed phrase on the clipboard is readable by every page visited afterwards.
Product
4- Notification InboxA notification list grouped by day, with unread state. Unread is reported, never assumed — a panel that marks everything read on render clears what the user never saw.
- User MenuThe account button for a header or sidebar footer. The identity is repeated inside the panel, because on a collapsed rail the trigger is a bare avatar.
- PresenceWho else is here. The overflow count carries its own tooltip listing the rest — a "+5" that cannot tell you who is unhelpful in exactly the moment you care.
- Mention InputA textarea with @-mention autocomplete. The trigger only fires at a word boundary, so an email address does not open the menu halfway through every address anyone types.
Operations
10- PipelineCI stages left to right with parallel jobs stacked inside each. A stage is as bad as its worst job, so its state is derived rather than being another field to keep in sync.
- Service StatusThe rows of a status page. The headline banner is derived from the services — a status page whose headline can disagree with its own rows is worse than none.
- Uptime StripA run of per-period bars: uptime history or a contribution heatmap. One primitive for both, since they are the same picture — buckets coloured by state or by intensity.
- Resource MeterUsed against a cap: build minutes, storage, seats, rate limits. Unlike Progress it can exceed 100%, because a quota can be 130% used and hiding that is how a bill becomes a surprise.
- Incident CardAn incident: severity, state, owner, age. Severity is a left edge rather than a tinted surface, because a list of ten red cards is unreadable and the stripe scales to a queue.
- Env VarsEnvironment variables with secrets masked until asked for. Reveal is per-row and never sticky — nothing survives a remount, so a shared screen cannot leak what someone expanded an hour ago.
- Health ChecksEndpoint probes with status, latency and history. A 200 that takes four seconds reads as degraded — a probe list that only reports the status code is why slow outages get noticed by customers first.
- Cron ScheduleScheduled jobs: when each next runs and how the last went. An overdue job — next run in the past with nothing running — is called out, since that is the failure a schedule list exists to catch.
- Feature FlagA flag with its rollout percentage and targeting rules. The kill switch is a separate control from the rollout — during an incident, turning it off must be one action, not a slider drag.
- Traffic SplitTraffic weights across versions — canary or blue/green. Weights that do not total 100 are called out rather than silently rescaled, because a config adding to 97 is a real state during an edit.
Development
21- File TreeFiles and directories as a tree. Uses the ARIA tree pattern with roving focus — arrow keys move between rows, so a repository with 200 files does not cost 200 tab stops.
- Commit ListA history, grouped by day. The grouping is the point — a flat list of forty commits is unreadable, and "when" is the axis people actually scan along.
- Deploy ListDeployments, newest first. A running deploy shows an indeterminate bar rather than a fabricated percentage — a number nobody can compute is worse than admitting you cannot.
- Branch SelectA branch and tag picker. A Combobox underneath — repositories routinely have hundreds of branches, so search is not optional — with the default branch pinned first and tags labelled.
- Diff StatAdded and removed line counts with the five-square bar. The squares are proportional but never empty — one line changed in a thousand still lights one square.
- Diff ViewA unified or side-by-side diff. Takes parsed hunks rather than a patch string, with parseUnifiedDiff exported alongside for when you only have the text.
- TerminalConsole output with ANSI colour. Follow-tail sticks to the bottom only while the reader is already there, so scrolling up to read something is never undone by the next line.
- Log ViewerStructured logs with level filters, search and counts. Matches are highlighted in place rather than filtering the list down, so a search shows where the hits are in context.
- JSON ViewerA collapsible view of a parsed value. Collapsed nodes show their size, because "three entries or three thousand" is the question you have before expanding one.
- Code SearchSearch hits grouped by file, with the match marked inside its line. Ranges are clamped on render, because a wrong highlight is worse than none — it looks right.
- Shortcut SheetA keyboard reference grouped by area. Presentational by design — it never binds the keys, because the component that shows a cheat sheet is not the one that owns the handlers.
- Status ChecksThe CI check list on a pull request. The summary states the blocking outcome rather than the raw tally, because "3 failing" says nothing about whether you can merge.
- Test ResultsA test run with suites, tests and failure output. Failures expand by default and passes stay collapsed — nobody opens a report to read what passed.
- Stack TraceA parsed exception with its frames. Library frames collapse behind a count — a stack is typically three frames of your code buried in forty of the framework’s.
- Blame ViewEvery line attributed to the commit that last touched it. Consecutive lines from one commit collapse into a single gutter entry — a blame view that repeats itself hides where one commit ends and the next begins.
- Dependency ListPackages with their update and vulnerability state. Severity outranks staleness in the sort, because ordering by how out of date things are buries a critical advisory behind forty patch bumps.
- Pull Request CardA pull request at a glance — state, branches, checks, reviewers. State is shown as an icon and a word, never colour alone.
- Review ThreadA review conversation anchored to a line of code, with the line shown as context. Resolving is always a callback — a resolved thread is server truth other reviewers see.
- Label PickerColoured repository labels, picked from a searchable list. Chip text is derived from the fill by luminance, since a label set imported from a forge only gives you a background colour.
- Release ListA changelog as a document — each version an article with a real heading, so it can be linked to and navigated by heading. Never sorts, since "newest first" cannot be derived from semver once pre-releases exist.
- Commit GraphThe branch graph beside a commit list. Lanes are held by the commit each one is waiting for, which is what keeps a branch on a single vertical line instead of drifting sideways at every merge.
Agents
19- InspectorThe properties panel for whatever is selected — the other half of a canvas. Driven by a field schema rather than by children, because the fields change with the selection and writing that as JSX means a switch statement per kind at the call site.
- Agent CardOne agent’s definition as a card: the model behind it, the tools it may reach for, and whether it is allowed to run. Tools are listed by name rather than counted, because a count tells you nothing about blast radius.
- Tool PickerThe catalogue of tools an agent may call, with a switch on each. Destructive capabilities are marked rather than hidden — the whole risk of an agent is a capability nobody noticed it had.
- Tool SchemaA tool’s parameter schema, rendered as something a person can read. Required, type and default get their own column, because those are the three questions anyone actually has about a parameter.
- Run ControlsThe transport bar for an agent run: start, pause, step, stop, replay. Which buttons exist is derived from status, so the invalid combinations — running and paused, replay while live — cannot be expressed.
- Agent TasksThe plan an agent is working from, as it works through it. Not a trace of what happened — a list of what it intends to do, which is what lets you see it heading somewhere wrong while there is still time to stop it.
- Subagent TreeThe tree of subagents a run spawned and what each is costing. Cost aggregates up the tree — a parent that spent 400 tokens itself and fanned out to children that spent 90,000 is cheap by its own line and ruinous in total.
- Trace WaterfallAn agent run as a waterfall of spans. Bars are positioned against the whole run rather than each row’s own width, which is what makes concurrency visible — two tools that ran in parallel look identical to two that ran in sequence until you share the axis.
- Stream InspectorA model’s token stream event by event, with the timing between them. An average tokens-per-second hides both numbers that matter — time to first token, and the stalls after it.
- Context WindowWhat is in the context right now and how much room is left. Segments are drawn to scale against the window, not against what is used — a bar normalised to the used total always looks full, which is exactly backwards.
- Guardrail ListThe safety checks around a run and how each one landed, ordered by consequence rather than by execution. A skipped check is its own state — “we did not scan” and “the scan found nothing” are opposite facts.
- Sandbox PolicyThe permissions an agent actually runs under — filesystem, network and process execution. Built to make the dangerous configuration look dangerous: an allow-list of `/` is functionally no sandbox, and it says so.
- Handoff TrailWho handled a request, in order, and why each handover happened. The hardest question in a multi-agent system is “why did this agent answer”, and the answer is never in one agent’s transcript — it is in the chain.
- Agent MemoryWhat an agent has remembered and where each piece came from. Distinct from retrieval: these are injected into every future run whether relevant or not, which is why a person has to be able to inspect and delete them.
- Budget GuardSpend and token caps against what a run has consumed. A soft limit warns and a hard limit stops — collapsing them into one bar is how a team ends up believing they have a spend cap when what they have is a notification.
- Retry PolicyA retry policy and the attempts it produced. A policy shown alone reads as reasonable right up until you see it fired four times in ninety milliseconds — the attempt list is what proves the policy running is the one configured.
- Prompt DiffTwo versions of a prompt with what changed between them. Prompts are the source code of an agent and almost never treated that way — the reason a run regressed is usually a sentence somebody rewrote three days ago.
- Eval BoardWhich model to ship, and what is still broken — as a ranking plus a case list rather than a grid. Chips carry their own model name, so there is no column header to align to and nothing that scrolls sideways at four models.
- Tool LatencyPer-tool latency and failure rate — the ops view of a tool fleet. Bars are drawn from p95, not the mean: a tool averaging 200ms that spikes to nine seconds one call in twenty is the one blowing your timeout, and the mean hides it.
MCP
14- MCP Server CardOne MCP server: what it is, how it is attached, and what it brought with it. Leads with the transport and the actual command line, because a server named “filesystem” tells you nothing and `--root /` tells you everything.
- MCP Server PickerA catalogue of servers you could install. Installing one is running someone else’s code with your credentials, so the card leads with publisher and verification rather than with the blurb — which is written by the person asking to be trusted.
- MCP Config EditorThe mcpServers config with the mistakes people actually make called out. The usual failure parses cleanly and the server silently never appears — the error is in the shape, not the syntax, so a JSON editor catches none of it.
- MCP RootsThe roots a client has granted its servers — the closest thing MCP has to a permission boundary, and invisible in most clients. A root covering a whole home directory is drawn as a warning rather than as another grey row.
- MCP Capability MatrixWhich server provides which capability, and where two of them collide. MCP names are not namespaced by the protocol, so two servers exposing `search` is decided by your client’s merge order — silently. A per-server list can never show that.
- MCP Resource ListThe resources a server exposes, addressed by URI. The URI is always shown in full and is what search matches first — “SSH key” and file:///Users/me/.ssh/id_rsa are the same resource, and only one of them makes anyone look twice.
- MCP Prompt ListThe prompts a server offers, with the arguments each one takes. How much has to be filled in is visible without expanding, because that is what decides which prompt you pick.
- RPC ConsoleThe JSON-RPC wire between a client and an MCP server. Requests and responses are paired by id, which is what produces the latency figure and what makes an unanswered request visible — the single most useful thing this view can show.
- Tool ApprovalThe consent prompt before a tool runs. The arguments are shown in full above the buttons, because “Allow issue_refund?” asks you to approve a function name — what matters is that it wants to move £3,400.
- Tool ResultWhat a tool actually returned, rendered by content type. An MCP result is a list of blocks that can mix text, images and embedded resources — JSON.stringify turns a returned screenshot into four thousand characters of base64.
- Tool DiffWhat changed in a tool’s contract between two server versions, with breaking changes classified rather than just listed. Adding an optional parameter and making one required are both edits to `properties`; only one breaks every existing call.
- Schema FormA form generated from a JSON Schema, so a person can invoke a tool by hand. The counterpart to Tool Schema: that one explains the parameters, this one collects them — together they are how you test an MCP tool without writing a client.
- MCP SamplingA server asking the client to run a model on its behalf. Sampling inverts the usual direction — the server sends the request, your model and your budget answer it — so the messages are shown verbatim before the buttons.
- MCP ElicitationA server asking the user for structured input mid-run. Useful, and a good phishing surface — the prompt text is written by the server and appears wearing your client’s chrome, so the requesting server is named outside its own copy.
Prompts
4- Prompt VariablesA prompt template with its slots filled in, beside the exact text the model receives. Variables are parsed out of the template rather than declared separately, so they cannot drift out of sync with it.
- Prompt VersionsA prompt’s history with what each change did to the score. The pairing is the point: a history without outcomes says what happened, a score chart without edits says something changed, and neither answers which edit made it worse.
- Few-Shot EditorThe worked examples in a prompt, as editable pairs rather than one long string. Structured pairs can be counted, reordered, costed and switched off one at a time — a textarea holding six examples supports none of that.
- Token InspectorText broken into tokens, so a prompt’s cost stops being a mystery number. Tokenisation is not words — `astralyx` is three tokens — and people shorten prose while a JSON blob below costs ten times more.
AI
19- Prompt InputThe composer for a chat: a growing textarea, attached context as removable chips, and a toolbar. Enter sends, Shift+Enter adds a newline, and IME composition is checked first.
- MessageOne turn in a conversation. The two roles are shaped differently on purpose — a user message is a bubble, an assistant message is full-width prose, because a long answer in a bubble is unreadable.
- Context PickerPicks what an assistant can see. A dropdown rather than a dialog, because attaching context happens mid-thought and a modal takes focus off the prompt you were writing.
- Tool CallOne tool invocation inside an assistant turn. Collapsed by default — the arguments are long and the interesting part is that it ran — except a failure, which opens itself.
- Model SelectPicks which model answers. A Select with the naming convention folded in, so "Opus · most capable" is scannable where a bare model id is not.
- Token UsageHow much of a context window is spoken for. The colour crosses to amber at 75% and destructive at 90%, because the number only matters once it is close.
- SuggestionsStarter prompts, offered before the first message. Buttons rather than a list, because each one performs an action.
- Streaming TextText revealed as it arrives, with a caret while it is still coming. Driven by elapsed time rather than a per-character interval, so it never drifts or dumps a backlog after a background tab.
- Reasoning BlockA model's intermediate reasoning, folded away by default — it is supporting evidence, not the answer, and a panel that opens itself pushes the answer below the fold.
- CitationsNumbered sources for a generated answer. A marker is a real anchor with an accessible name, because a bare superscript "3" is meaningless read aloud — exactly when checking a claim matters most.
- Agent StepsAn agent's plan with each step's state. The whole plan is shown from the start, including steps not yet reached — revealing them one at a time hides how much is left, which is what someone watching most wants to know.
- Diff ProposalA model-proposed edit with accept and reject. The decision is reported, never applied — and once made, the actions are replaced by the outcome so a stale card cannot be clicked twice.
- Model ComparisonTwo or more outputs side by side with a pick. Columns are equal width and height regardless of content, because a taller box reads as the better answer before a word of it is read.
- Confidence MeterHow sure a model is, in five steps. Segmented on purpose — a smooth bar invites reading 0.834 as different from 0.851, which is not what a calibration score supports.
- FeedbackThumbs up or down, with an optional reason. The rating sends on click and the comment is a separate follow-up — holding the rating hostage to a comment box is how feedback widgets collect nothing.
- Retrieval ResultsThe chunks a retrieval step pulled, with relevance. Near-misses are dimmed rather than dropped — when an answer is wrong, "what did it nearly retrieve" is the useful question.
- Prompt TemplateA prompt with {{variable}} placeholders and a form to fill them. Variables are parsed out of the template rather than declared separately, so the two cannot drift.
- Eval ResultsA model-versus-benchmark score matrix. The best result is marked per benchmark rather than overall — a model can lead on reasoning and trail on latency, and one winner badge hides that.
- Cost BreakdownSpend by model, with token volume beside it. The two routinely disagree — the cheap model handling 90% of calls is often 10% of the bill — and either number alone leads to the wrong optimisation.
AIOps
7- Alert TriageAn alert queue grouped by fingerprint. A flapping check fires two hundred times, and an ungrouped list buries every other alert underneath it — which is how real pages get missed.
- Anomaly ChartA metric against its expected range, with outliers marked. The band is the point — 400ms at 03:00 may be an incident while 400ms at peak is Tuesday.
- Root Cause TreeA causal chain from symptom to candidate causes, each with a confidence band. Built on Tree, so it inherits the keyboard model rather than growing a second one.
- Runbook StepsRemediation steps, run one at a time and only in order. Offering "run" on step four while step two is untried invites exactly the mistake the runbook exists to prevent.
- SLO BudgetAn error budget and how fast it is burning. Shows the budget remaining rather than availability achieved — 99.4% against a 99.9% target sounds like a near miss and is a six-times overspend.
- Topology MapA service dependency graph with health. Laid out in dependency layers, not by a force simulation — during an incident nobody wants to re-find the database because the layout moved.
- On-call ScheduleA rotation across a window of days. Shifts are positioned proportionally rather than snapped to a day grid — rotations hand over at 09:00, and rounding shows the wrong person on call for most of two days.
Finance
6- Money InputA currency field that reads and writes integer minor units. Money that has been through a float has already lost — the value that leaves this control is a whole number of cents.
- Card InputCard number, expiry and CVC in one control, with brand detection and a Luhn check. Client-side validation catches the typo; it never claims the card is good.
- Payment MethodSaved cards and accounts, with expiry warnings. A card expiring next month is the reason a subscription fails, and saying so before it does is the entire value of this list.
- Invoice ListBilling history. Amounts are right-aligned and tabular, which is the whole reason this is not a generic list — a money column that does not line up cannot be scanned.
- Payout StatusWhere a payout is and when the money lands. "Expected Thursday" is the thing people open this to find out; the status word alone never answers it.
- Ledger TableDouble-entry lines with a running balance. Debits and credits get their own columns and are totalled separately, because a ledger where the two do not agree is the finding.
Commerce
4- CartA basket with quantities and per-line totals. Stock limits are enforced at the stepper, not on submit — letting someone add a ninth of eight units and saying so at checkout is the worst possible order.
- Checkout SummaryThe order total, broken into its lines. A charge that is not yet known renders as "calculated at next step" rather than as £0.00 — showing zero for a charge you will apply is a promise you cannot keep.
- Pricing TablePlans side by side. Every plan lists every feature, including the ones it lacks — omitting them makes the columns uneven and quietly hides what you would give up.
- Subscription StatePlan, price and what happens next. A cancelled subscription with three weeks of access left is the case people most often get wrong, and a status badge alone never says it.
Auth
6- Login FormEmail and password, with somewhere for SSO buttons and an error. The error is announced, not just coloured — a failed sign-in that only turns red is invisible to a screen reader.
- Two-Factor SetupScan, verify, save recovery codes. The recovery step is a step, not a footnote: an authenticator lost with no codes saved is an account lost, and burying them behind a link is why that happens.
- Session ListActive sign-ins, with the current one pinned and unrevokable from here. Signing yourself out of the session you are using is a footgun, so it is simply not offered.
- Device ListDevices trusted to skip the second factor, and when that trust lapses. A grant that expires in three days is worth seeing before you are asked for a code at an airport.
- Permission MatrixRoles against permissions, in a grid. Inherited grants are drawn differently from direct ones, because "why can this role still delete things" is the question a flat list of ticks cannot answer.
- API KeysCredentials, listed and revocable. A key is shown in full exactly once — after that only the prefix and last four, because a list that can reveal every key means a session holds every secret.
Security
4- Risk ScoreA score with the signals that produced it. The factors are the component, not a detail beside it — an analyst cannot approve or decline on "82", and an unexplained score is the one thing a regulator will ask you to justify.
- Fraud VerdictThe decision at the end of a review: what was decided, on what basis, by whom. A settled verdict offers to reopen rather than accept a second one, because two conflicting verdicts on one case is the failure this shape prevents.
- IP ClusterAccounts grouped by a shared address or device. The shape is the finding: one node fanning out to eight accounts is multi-accounting, eight accounts each on their own address is a shared ISP.
- Fingerprint DiffTwo device fingerprints, with only the differing attributes shown. The question is never what a device looks like — it is what changed between two sessions, and twenty-eight matching rows hide the two that matter.
Analytics
7- Date Range CompareA metric against the same metric last period, with the basis named. "+18%" is meaningless until you know against what — and against a partial period it is meaningless full stop.
- Cohort TableRetention by signup period, as a triangle. Cells are shaded by rate rather than by count, so a small cohort that retains well is not washed out by a large one that does not.
- A/B Test ResultsVariants with lift, a confidence interval and a two-proportion z-test — plus the peeking warning, because stopping at the first significant reading is the failure that actually happens.
- Retention CurveWhat fraction of each cohort is still here, period by period — normalised so growth cannot hide churn. Later cohorts are drawn shorter, not padded with zeroes.
- Event StreamA live tail of analytics events with their payloads — the tool for debugging the tracking itself. Autoscroll pauses when you scroll away and the list is capped rather than unbounded.
- Segment BuilderBuild an audience from conditions, with precedence shown as nesting rather than implied by a word — and the output a structure, not a concatenated string.
- AttributionCredit for a conversion split across touchpoints, with the model as a control rather than a buried setting — because the disagreement between models is the whole finding.
Admin
3- Audit LogWho did what to which thing, when. Denied and errored attempts are kept and marked rather than filtered out — a log of successes only tells you nothing about the attack you are looking for.
- Moderation QueueReported content with its report reasons and a decision. Sensitive items are blurred until revealed, because a moderator should choose when to look at the worst thing in the queue.
- Bulk Action BarThe bar that appears once rows are selected. It states the count in words next to the destructive button, because "Delete" and "Delete 4,812 records" deserve different amounts of hesitation.
Messaging
4- Thread ListAn inbox of conversations. Unread is carried by weight and a count, not by colour alone, and the timestamp coarsens with age — a message from March does not need a clock time.
- Ticket CardA support ticket with its SLA. Breach risk is computed from the due time, not from how old the ticket is — a two-week ticket with a monthly SLA is fine, and an hour-old one may not be.
- Typing IndicatorWho is currently typing. The animation is decorative and hidden from assistive tech; the sentence beside it is the actual content, and it is what gets announced.
- Attachment PreviewA file chip with an icon chosen from the MIME type. Never from the extension: a `.dat` that is really a PDF should show a PDF, and a `.pdf` that is really an executable should not.
Gaming
5- Bet InputA stake field with quick multipliers and a live return. Stakes are integer minor units and the max is clamped to the balance, so "all in" cannot stake money that is not there.
- Odds DisplayA selectable price in decimal, fractional or American. Decimal is the source of truth and the others are derived, so a format switch can never change what the bet actually pays.
- Multiplier ChartThe rising curve of a crash-style round. The crash is a state, not an animation that ends — the frozen curve and the final figure stay on screen so a player who looked away still sees what happened.
- Round HistoryRecent results as a strip. It carries an explicit note that past rounds do not predict the next one, because a row of results is read as a pattern whether or not one exists.
- LeaderboardRanked scores with movement since the last period, and the current user pinned even when they are nowhere near the top. A board you cannot find yourself on is a board you stop opening.
Affiliate
4- Campaign CardAn affiliate offer with its performance. EPC leads, not revenue — £40,000 and £4,000 cannot be ranked without knowing the traffic behind each, and earnings per click is the only comparable figure.
- UTM BuilderBuilds a tagged campaign URL. Values are lower-cased with underscores for spaces, because analytics tools treat Summer Sale, summer sale and summer_sale as three separate campaigns and nobody reconciles them later.
- Postback ConfigA server-to-server postback URL, validated against its macros. A postback missing {click_id} returns 200 and attributes nothing — this says so before it ships rather than in a reconciliation weeks later.
- Revenue Share TableHow a payout splits between parties. The unallocated remainder gets a named row instead of leaving the reader to subtract, and a split exceeding 100% is called out rather than quietly rendered.
API
7- Request BuilderMethod, URL, headers, query and body. Query parameters are edited as rows and the assembled URL is shown beneath — hand-editing a query string is where encoding bugs come from.
- Response ViewerStatus, timing, size, headers and body. The three headline figures share one line because they are read together — a 200 that took 4 seconds is a different result from one that took 40ms.
- Endpoint ListAPI routes, grouped and filterable. The method badge is fixed-width because a route table is scanned down the method column, and a ragged left edge makes that scan impossible.
- Schema ViewerJSON Schema as a tree. Required fields are marked on the field itself rather than left in the parent's `required` array — cross-referencing that list is the one job a renderer should do for you.
- Webhook InspectorInbound deliveries with payload and response. Signature status is its own field, never folded into the status code — a 200 with an invalid signature is a forged request your handler accepted.
- Curl CommandA request as a runnable curl command, shell-quoted and with secrets masked. This output gets pasted into tickets, and an Authorization header pasted into a ticket is a leaked credential.
- HTTP StatusA status code with its reason phrase. Colour follows the class, never the individual code — grading a 503 as worse than a 500 invents a severity ordering that does not exist.
Storage
6- Storage UsageA quota and what is filling it. The bar is scaled to the quota, not to what is used, so free space reads as free space — a bar normalised to the total consumed is always full, which is backwards for a component answering “how much room is left”.
- Bucket ListObject-storage buckets, with public access rendered as a warning rather than as one small grey tag among five. Every storage breach of the last decade is a bucket nobody realised was world-readable.
- Object ListObjects in a bucket, with the prefix hierarchy object stores only pretend to have. There are no folders in S3-shaped storage — `a/b/c.png` is one flat key — so keys deeper than the current prefix collapse into a prefix row with a count.
- Asset GridA media library as a selectable grid, built on this kit’s Image so every tile gets a placeholder, a reserved box and a failure state. A broken asset stays in the grid — it is exactly the one someone came to find and replace.
- File PreviewOne file rendered as whatever it actually is — image, text, audio, or an honest “no preview” panel. The MIME type decides, never the extension: a .png served as text/html is the oldest upload attack there is.
- Backup ListSnapshots, and whether any of them would actually restore. A backup nobody has restored is a hypothesis, so an untested one is drawn as a warning rather than as a success.
Data
6- Slow Query LogThe queries costing you the most, ranked by total time rather than mean. The 9-second report running twice a day is easy to find; the 40ms lookup running four thousand times a minute is the one saturating the database.
- Index ListThe indexes on a table and which are dead weight. An unused index is written on every insert and makes the planner’s job harder — but a primary key with no scans is not flagged, because suggesting you drop one is advice that loses data.
- Replication StatusA primary and its replicas with how far behind each one is, in seconds and bytes. Seconds say how stale a read is; bytes say whether it is catching up or falling further behind — a replica idling on 200MB of unsent log shows 0s until traffic arrives.
- Connection PoolWhat is checked out, idle and waiting. A pool at 100% with nothing queued is exactly the right size; the same pool with twelve waiting is an outage forming — so waiters are drawn beyond the bar rather than folded into it.
- CSV PreviewA parsed CSV before you import it, showing the rows that will break the import. A preview that renders the first ten rows of a clean file has shown you nothing — mismatched column counts are what abort an import halfway.
- Data QualityA column profile: how complete, how varied, and what the values look like. Sample values are the fastest way to spot that a “date” column holds three different formats — no summary statistic catches that.
Database
6- Query EditorA SQL editor that asks before running an UPDATE or DELETE with no WHERE clause. That is the most expensive mistake anyone makes in a query console, and it is trivial to detect.
- Query ConstructorA SELECT assembled a clause at a time — sources with a join button, columns, filter, then order, group and limit — with the finished statement underneath. Reads both ways: paste a SELECT and the blocks fill in. Values compile to bound parameters and identifiers are allow-listed against the schema.
- Query PlanAn EXPLAIN tree with cost bars drawn from self cost, not total. Every root holds 100% of total by definition, so a total-cost bar makes the root look like the problem in every query ever profiled.
- Schema TableColumns, keys and indexes. Foreign keys name their target inline, because `owner_id` tells you nothing about whether it points at users or accounts — which is exactly what you opened the schema to find out.
- Migration ListApplied and pending migrations, sorted by version. A migration applied after a later version is flagged — that is the signature of two branches merged without a rebase, and it means this schema matches no single branch.
- Connection StringA DSN parsed into the parts that matter for its driver. A file-backed database has a path and no host, user or port — pretending every database is Postgres is what makes most of these components useless outside it.
Build & Perf
6- Build LogSteps with their own output and timing bars. Failed steps open by default and successful ones stay closed — nobody opens a build log to read the steps that worked.
- Bundle TreemapBundle size by module, laid out by compressed size. Raw bytes overstate text-heavy modules dramatically — a 400KB locale file that gzips to 12KB dominates a raw treemap and barely matters on the wire.
- Coverage ReportCoverage per file, ranked by uncovered lines rather than by percentage. A 400-line file at 92% has 32 untested lines; a 12-line file at 60% has 5 — and percentage ranks the small one first.
- Benchmark TableRanked results with variance. A difference inside the combined error bars is reported as "within noise" rather than as a win — printing "1.03× faster" from two noisy runs is how performance myths start.
- Flame GraphWidth is time, depth is stack. Frames stay in call order rather than being sorted by cost — reordering them destroys the shape a flame graph exists to show.
- Lighthouse ScoreCategory rings with the metrics behind them. A performance score of 62 is not actionable; "LCP 4.1s" is — so the metrics are shown, not hidden behind the summary.
Code Tools
5- Regex TesterA pattern against a test string, with matches highlighted and capture groups listed. Zero-length matches are guarded — `/a*/g` matches empty at every position and hangs a naive exec loop.
- Merge ConflictBoth sides of a conflict with a resolution per hunk. "Keep both" is offered because it is frequently right — two people adding a different import conflict textually and agree semantically.
- Symbol OutlineA file's symbols as a tree, in file order rather than alphabetical. An outline is a map of the document you are reading; re-sorting it makes the outline and the editor disagree about where things are.
- Changelog EntryA release grouped by change type, with breaking changes hoisted to the top whatever order they came in. Everything else in a changelog is optional reading; a breaking change is not.
- JWT InspectorDecodes a token into header, payload and signature. Decoding is not verification and the component says so — a green tick without the signing key would be actively dangerous.
Runtime
7- Container ListRunning containers with state, image tag and resource use. Restart count is shown whenever it is non-zero — a container "running" with 47 restarts is crash-looping, and its state says everything is fine.
- Port TablePublished ports with their bind address. `0.0.0.0:5432` and `127.0.0.1:5432` are the difference between a database on the internet and a database on the machine — printing only the number hides that.
- Env DiffTwo environments side by side, values masked by default. A variable missing from one side is drawn differently from one whose value merely differs — "not set" and "set to something else" have different causes.
- Queue MonitorDepth, throughput and whether the queue is keeping up. Depth alone says nothing — 40,000 draining at 5,000/s is fine, 300 draining at 2/s is an incident.
- Cache StatsHit rate with the numbers behind it. 99% on 40 requests a day is noise and 80% on 4 million is a cost centre, so volume sits beside the percentage.
- Rate Limit MeterA quota with its reset time given equal weight. "9,800 of 10,000" is alarming; "resets in 40 seconds" makes it fine — showing the first without the second sends people to build a cache they do not need.
- WebSocket FramesA frame log with the delta between frames. Protocol bugs are about the gap — a heartbeat that stopped arriving is obvious as a 30-second delta and invisible as a list of clock times.