<!-- GENERATED by scripts/build-llms.mjs from llms/agent-tools.md — do not edit this file. -->

# `lr-subagent-panel`

- **Import** `import '@aceshooting/lyra-ui/components/lr-subagent-panel.js';` (stable tag alias; registers the tag)
- **Class** `LyraSubagentPanel`, also available unregistered from `@aceshooting/lyra-ui/components/agent-tools/subagent-panel/subagent-panel.class.js`
- **Family** `components/agent-tools/` — see `llms/index.md` for its siblings
- **Status** `stable` since `7.0.0` — see the maturity and deprecation policy in `llms/shared.md`
- **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
- **Deprecations** none
- **Optional peers** none
- **Themeable via** 16 parts, 11 custom properties — see this component's own `@csspart`/`@cssprop` list below
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`

---

## `lr-subagent-panel`

Controlled nested-agent hierarchy with lifecycle badges, task/model context, guarded progress,
selection, cancel, and retry intents. `SubagentRun.parentId` creates nesting; cycles and orphan
parents remain renderable instead of recursing forever.

**Properties:** `runs: SubagentRun[] = []` (attribute: false);
`selectedRunId: string | null = null` (attribute `selected-run-id`); `label?: string` — an
accessible-name override for the `role="tree"` element, where omission reads back `undefined` and
localizes the default while any supplied string, including `''`, renders verbatim; `compact: boolean
= false` (reflected) — tighter run-row padding/gaps and smaller task/model text, the same density
convention `lr-task-list`/`lr-stack-trace`/`lr-thinking-panel`/`lr-terminal` already pair with
`frame`; purely a density knob, since each run's own border stays, so reach for `frame="plain"` to
drop the chrome entirely; `frame: LyraFrame = 'card'` (reflected) — container treatment for each run
row, in the library-wide `frame` vocabulary (`'card' | 'plain'`). `'card'` keeps each run's own
border/radius; `'plain'` drops it, for a transcript or message-bubble context that already draws its
own border around a nested `<lr-subagent-panel>` and would otherwise double it.
`SubagentRun = { id: string; parentId?: string; label: string; status: AgentStatusKind; task?:
string; model?: string; readonly progressRatio?: number; startedAt?: number; endedAt?: number;
metadata?: Record<string, unknown> }`. `progressRatio` represents completion from `0` to `1`,
inclusive.
Empty/blank run ids are omitted and later duplicate ids are ignored before hierarchy, focus,
counts, selection, and events.

**Events:** `lr-run-activate` (`{ runId, run }`), `lr-cancel` (`{ runId }`), and
`lr-run-retry` (`{ runId }`).

**CSS parts:** `base`, `list`, `run`, `run-selected`, `run-row`, `run-trigger`, `label`, `status`,
`task`, `model`, `progress`, `actions`, `cancel`, `retry`, `limit`, `empty`.

At most 500 runs render, and visual indentation is capped at 12 levels while ARIA hierarchy keeps
the logical depth. The visible `limit` text is ordinary and non-live; newly reaching or changing the
run ceiling after the initial baseline appends the localized message to the shared polite light-DOM
announcement sink, while initial and reconnect renders stay silent. The roving treeitem accepts
Enter/Space as well as pointer activation for `lr-run-activate`; cancel/retry action names include the
run label so repeated row actions remain distinguishable to assistive technology. Progress is finite
and clamped. **Slots:** none.
**Optional peer deps:** none.

```ts
import "@aceshooting/lyra-ui/components/agent-tools/subagent-panel/subagent-panel.js";
```

**Additional API surface:**

- `part="limit"` — Resource-ceiling status shown when additional runs are omitted.
- `--lr-subagent-panel-selected-border` — Selected run border. Default: `var(--lr-color-brand)`.
- `--lr-subagent-panel-progress-track` — Progress track. Default: `var(--lr-color-border)`.
- `--lr-subagent-panel-progress-fill` — Progress fill. Default: `var(--lr-color-brand)`.
- `--lr-subagent-panel-compact-trigger-padding` — `[part="run-trigger"]` padding while `compact`.
  Default: `var(--lr-space-2xs) var(--lr-space-s)`.
- `--lr-subagent-panel-compact-trigger-gap` — Gap between `[part="run-trigger"]`'s
  label/status/task/model/progress while `compact`. Default: `var(--lr-space-2xs)`.
- `--lr-subagent-panel-compact-font-size` — `[part="task"]`/`[part="model"]` font size while
  `compact`. Default: `var(--lr-font-size-2xs)`.
- `--lr-subagent-panel-compact-action-padding` — `[part="cancel"]`/`[part="retry"]` padding while
  `compact`. Default: `var(--lr-space-2xs)`.
- `--lr-subagent-panel-background` — Resting fill of each run row's trigger and action buttons.
  Hover and press follow `--lr-subagent-panel-hover-background`, so retune both together.
  Default: `var(--lr-color-surface)`.
- `--lr-subagent-panel-hover-background` — Hovered fill of each run row's trigger and action
  buttons. The pressed fill is this value mixed a further `--lr-color-mix-active` toward
  `--lr-color-mix-partner`, so retuning hover carries the press with it.
  Default: `var(--lr-color-surface-raised)`.
- `--lr-subagent-panel-border-color` — Each run row's border and its action divider. A selected row
  still uses `--lr-subagent-panel-selected-border`. Default: `var(--lr-color-border)`.
- `--lr-subagent-panel-radius` — Each run row's corner radius; `frame="plain"` still squares them.
  Default: `var(--lr-radius)`.