loco-admin-web/specs/designs/12-tools/list.md

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]