# 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]
```