list.md 2.1 KB
Tools List Page
Overview
Card grid list of all tools (external + managed).
Follows the layout of specs/designs/10-layout/list.md, only the details are documented in this spec.
Page Name
"Tools" for title and breadcrumb
Filters
| Row | Mode | Values | Default | Extra |
|---|---|---|---|---|
| Mode | Single | All, External, Managed | All | shows count badge |
| Tags | Multi | the tags present across all tools | None | row hidden when no tags exist |
Card Anatomy
Tool icon sits at the left, a fixed 48 px square, vertically centered. The rest is on the right side of the card, vertically positioned. Card height is fixed at 128 px.
┌─────────────────────────────────────────────────────────────┐
│ ┌────────┐ Tool Name [status] │
│ │ │ Description text, clamped to two lines… │
│ │ icon │ │
│ │ │ │
│ └────────┘ [tag] [tag] │
└─────────────────────────────────────────────────────────────┘
The card is clickable as a whole and links to /workloads/tools/[id]. When onselect is provided (e.g. inside a tool picker), the card renders as a button instead and calls the handler on click / Enter.
Header
- Large text for the tool name
- Status badge (right, when status is set)
Body
- Description, clamped to two lines
Footer
- tags
Empty States
No tools at all:
WrenchIcon (muted)
"No tools yet."
[New Tool button]
No match:
WrenchIcon (muted)
"No tools match your filters."
[Clear filters link]