docs: add GroupCard to decision tree and agent health composition pattern
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -62,6 +62,7 @@
|
||||
- Section with title + action → **SectionHeader**
|
||||
- Empty content placeholder → **EmptyState**
|
||||
- Grouped content box → **Card** (with optional accent)
|
||||
- Grouped items with header + meta + footer → **GroupCard** (e.g., app instances)
|
||||
|
||||
### "I need to display text"
|
||||
- Code/JSON payload → **CodeBlock** (with line numbers, copy button)
|
||||
@@ -122,6 +123,17 @@ TreeView for hierarchical data (Application → Routes → Processors)
|
||||
onSelect navigates or opens DetailPanel
|
||||
```
|
||||
|
||||
### Agent/instance health pattern
|
||||
```
|
||||
StatCard strip (top, recalculates per scope)
|
||||
→ GroupCard grid (2-col for all, full-width for single app)
|
||||
Each GroupCard: header (app name + count) + meta (TPS, routes) + instance rows
|
||||
Instance rows: StatusDot + name + Badge + metrics
|
||||
Single instance: expanded with LineChart panels
|
||||
→ EventFeed (bottom, filtered by scope)
|
||||
URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/:instanceId
|
||||
```
|
||||
|
||||
## Component Index
|
||||
|
||||
| Component | Layer | When to use |
|
||||
|
||||
Reference in New Issue
Block a user