/artifact-interactive

If the real system has a threshold, rate, window size, or state transition, give the artifact that control so the user can feel the invariant by moving it.

---

1. Layout pattern: Controls → Live Readout → Visual

Do not wrap the whole interactive in a bordered card. Use a clean vertical stack (flex flex-col gap-4):

1. Controls bar: 1–3 sliders (<input type="range">) or toggle buttons (<button>), each paired with a label and a live formatted value (font-mono tabular-nums).
2. Metric readout row: 2–4 .metric-card blocks showing the computed outputs, rounded cleanly (integers or at most 1–2 decimals; sign before currency -$12, never $-12).
3. Visual surface: An SVG diagram whose elements (width, x, y, opacity, or c-* class) or a Chart.js canvas (chart.update()) updates immediately on the input event.

<div class="flex flex-col gap-4">
  <div class="grid grid-cols-2 gap-4 items-center raised-card">
    <label class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm">
        <span class="text-fg-subtle">Arrival rate (req/s)</span>
        <span id="rate-val" class="font-mono font-medium tabular-nums">40</span>
      </div>
      <input id="rate" type="range" min="10" max="100" step="5" value="40" />
    </label>
    <label class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm">
        <span class="text-fg-subtle">Worker capacity (req/s)</span>
        <span id="cap-val" class="font-mono font-medium tabular-nums">50</span>
      </div>
      <input id="cap" type="range" min="20" max="100" step="5" value="50" />
    </label>
  </div>

  <div class="grid grid-cols-3 gap-3">
    <div class="metric-card">
      <div class="text-xs text-fg-subtle">Utilization (ρ)</div>
      <div id="util-out" class="text-xl font-medium font-mono tabular-nums mt-1">80%</div>
    </div>
    <div class="metric-card">
      <div class="text-xs text-fg-subtle">Avg queue depth</div>
      <div id="depth-out" class="text-xl font-medium font-mono tabular-nums mt-1">3.2</div>
    </div>
    <div class="metric-card">
      <div class="text-xs text-fg-subtle">P95 latency</div>
      <div id="lat-out" class="text-xl font-medium font-mono tabular-nums mt-1">100 ms</div>
    </div>
  </div>

  <div id="visual-stage">
    <!-- SVG or Chart canvas updated by script -->
  </div>
</div>

---

2. Steppers for cycles, state machines, and code traces

Never draw a circular ring of arrows for a loop or multi-stage trace. Build a stepper:

• A compact header bar with Prev / Next buttons (Next wraps around to Step 1 for cycles), a step counter (Step 2 of 4), and a 1-sentence caption for the current beat.
• An SVG diagram where the active node gets a semantic highlight ramp (c-teal or c-purple) while inactive nodes stay c-gray, and a payload token or callout moves to the active stage.
• Include a drill-down button (onclick="sendPrompt('Show me the error-handling path in step 3')") or onclick="openFile('path/to/file.ts', 42)" when walking through code.

---

3. Rules

• Bind slider listeners to "input" (not "change") so the visual responds while dragging.
• Round every displayed number (Math.round, .toFixed(1)). Never let 0.30000000000000004 reach the DOM.
• Keep scripts self-contained at the bottom of the fragment; never rely on external CDNs.