hiveops-aria/frontend/CLAUDE.md

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:

<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:

<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