# hiveops-aria frontend — CLAUDE.md

## Before writing ANY new component

Read an existing sibling component first. Mandatory. Use `IocManagement.svelte` or `DevicePosture.svelte` as the reference.

## Canonical patterns (copy exactly, no variations)

**Header** — text only, no buttons:
```svelte
<div class="header">
  <div class="header-text">
    <h1>Page Title</h1>
    <p>Subtitle</p>
  </div>
</div>
```

**Toolbar** — all buttons go here, never in the header:
```svelte
<div class="form-card">
  <div class="toolbar">
    <div class="toolbar-left"><span class="count">N items</span></div>
    <div class="toolbar-right">
      <button class="btn btn-secondary btn-sm">Refresh</button>
      <button class="btn btn-primary btn-sm">+ Add</button>
    </div>
  </div>
```

**Buttons** — always global classes, never custom button CSS:
- `btn btn-primary` / `btn btn-primary btn-sm`
- `btn btn-secondary` / `btn btn-secondary btn-sm`

**Table** — inside `.table-wrapper > .table-container`:
- `thead` background: `#f9fafb`, sticky
- `th` color: `#374151`, uppercase, `font-size: 0.78rem`
- `td` color: `#1f2937`
- `tbody tr:hover` background: `#eff6ff`

## Auto-poll
- Poll the STATUS endpoint only — never trigger a refresh from setInterval
- Use `onDestroy(() => clearInterval(interval))` always