fin1teds
v1.3.0
  1. ds
  2. Agent
  3. Pane

Pane

A side panel: a 36px head, tabs that fold to icons, section cards and 24px rows.

Light
Dark
390px, dark
Show code
<aside class="pane" aria-label="Inspector" style="height:34rem">
  <header class="pane-head">
    <div class="tabs" role="tablist" aria-label="Inspector">
      <button class="tab" role="tab" type="button" aria-selected="true" title="Context"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"/><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"/></svg><span>Context</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Details"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><span>Details</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="File"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>File</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Problems"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><span>Problems</span><span class="pane-count down">3</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Agents"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg><span>Agents</span><span class="pane-count accent">2</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Tools"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg><span>Tools</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Graph"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg><span>Graph</span></button>
    </div>
    <button class="btn ghost icon mini" type="button" aria-label="Close inspector"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
  </header>
  <div class="pane-body" role="tabpanel" aria-label="Context">
    <details class="pane-sec" open>
      <summary>Context<span class="pane-count warn">79%</span></summary>
      <div class="pane-sec-body">
        <div class="ctx dense" data-state="near">
          <div class="ctx-head"><span class="ctx-label">Window</span><span class="ctx-value"><b>79%</b><small>158k of 200k</small></span></div>
          <div class="ctx-track" role="meter" aria-label="Context used" aria-valuemin="0" aria-valuemax="200000" aria-valuenow="158000"><span class="ctx-seg" data-k="system" style="--v:4"></span><span class="ctx-seg" data-k="tools" style="--v:12"></span><span class="ctx-seg" data-k="thread" style="--v:47"></span><span class="ctx-seg" data-k="files" style="--v:16"></span><span class="ctx-seg free" style="--v:21"></span><span class="ctx-mark" style="--at:.8"></span></div>
          <ul class="ctx-list">
            <li><span class="ctx-key"><i class="ctx-dot" data-k="thread"></i>Thread</span><span class="ctx-num">94.0k</span></li>
            <li><span class="ctx-key"><i class="ctx-dot" data-k="files"></i>Files</span><span class="ctx-num">32.0k</span></li>
            <li><span class="ctx-key"><i class="ctx-dot" data-k="tools"></i>Tools</span><span class="ctx-num">24.0k</span></li>
            <li class="free"><span class="ctx-key"><i class="ctx-dot"></i>Free</span><span class="ctx-num">42.0k</span></li>
          </ul>
          <p class="ctx-note">Near the limit. Compaction runs at 80%.</p>
        </div>
      </div>
    </details>
    <details class="pane-sec" open>
      <summary>Session</summary>
      <div class="pane-sec-body">
        <dl class="dlist">
          <div><dt>Workspace</dt><dd class="mono">~/work/checkout</dd></div>
          <div><dt>Branch</dt><dd class="mono">fix/retry-drain</dd></div>
          <div><dt>Model</dt><dd>sonnet-4.5</dd></div>
          <div><dt>Permission</dt><dd>Workspace write</dd></div>
          <div><dt>Spent</dt><dd class="mono">$0.42 · 41 turns</dd></div>
        </dl>
      </div>
    </details>
    <details class="pane-sec" open>
      <summary>Files in context<span class="pane-count">4</span></summary>
      <div class="pane-sec-body">
        <a class="pane-row" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>services/checkout/<b>retry.ts</b></span><small>2.1k</small></a>
        <a class="pane-row" href="#" aria-current="true"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>services/checkout/<b>orders_read.sql</b></span><small>640</small></a>
        <a class="pane-row" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>services/event-relay/internal/deliver/<b>relay_with_a_very_long_name_test.go</b></span><small>9.8k</small></a>
        <a class="pane-row" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>docs/<b>RUNBOOK.md</b></span><small>1.4k</small></a>
      </div>
    </details>
    <details class="pane-sec">
      <summary>Memory<span class="pane-count">12</span></summary>
      <div class="pane-sec-body"><p class="hint">Twelve notes from earlier sessions in this workspace.</p></div>
    </details>
  </div>
</aside>

A pane is a side panel: the inspector on the right, or a sidebar. Its head is 36px, the same as the top bar, so one rule runs across the window. The body scrolls, with 8px of padding and 6px between sections. Each section is a small card on the native details element: a 28px head with a 10.5px label, a count and a chevron, then rows of 24px.

The pane is a size container. Under 32rem only the current tab shows its label; the others show their icon and keep the label for screen readers and the title hint. Seven tabs fit in a 300px inspector without scrolling.

Title, actions and severity

Light
Dark
390px, dark
Show code
<aside class="pane" aria-label="Problems" style="height:24rem">
  <header class="pane-head">
    <h2 class="pane-title"><span>Problems</span><span class="pane-count down">3</span></h2>
    <button class="btn ghost mini" type="button"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>Run</button>
    <button class="btn ghost icon mini" type="button" aria-label="Close inspector"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
  </header>
  <div class="pane-body">
    <details class="pane-sec" open>
      <summary>Errors<span class="pane-count down">2</span></summary>
      <div class="pane-sec-body">
        <button class="pane-row" type="button" data-state="error"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg><span><b>retry.ts</b> Property 'drainInBackground' does not exist on type 'Queue'.</span><small>18:9</small></button>
        <button class="pane-row" type="button" data-state="error"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg><span><b>retry.ts</b> Cannot find name 'order'.</span><small>21:3</small></button>
      </div>
    </details>
    <details class="pane-sec" open>
      <summary>Warnings<span class="pane-count warn">1</span></summary>
      <div class="pane-sec-body">
        <button class="pane-row" type="button" data-state="warn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><span><b>lock.test.ts</b> 'db' is declared but its value is never read.</span><small>4:7</small></button>
      </div>
    </details>
    <details class="pane-sec">
      <summary>Hidden<span class="pane-count">0</span></summary>
      <div class="pane-sec-body"><button class="pane-row" type="button" disabled><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg><span>Nothing hidden</span></button></div>
    </details>
  </div>
  <footer class="pane-foot"><span>tsc · 1.4 s ago</span><button class="btn ghost mini" type="button">Copy all</button></footer>
</aside>

Without tabs, the head carries a .pane-title with its count, then 24px .btn.mini actions. Group rows by state under sections whose labels are the words, here Errors and Warnings, so severity reads without colour. Rows that act are buttons; their text truncates on one line and the location sits on the right.

Rows that are components

Light
Dark
Show code
<aside class="pane" aria-label="Agents" style="height:20rem">
  <header class="pane-head"><div class="tabs" role="tablist" aria-label="Inspector">
      <button class="tab" role="tab" type="button" aria-selected="false" title="Context"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"/><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"/></svg><span>Context</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Details"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><span>Details</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="File"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>File</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Problems"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><span>Problems</span><span class="pane-count down">3</span></button>
      <button class="tab" role="tab" type="button" aria-selected="true" title="Agents"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg><span>Agents</span><span class="pane-count accent">2</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Tools"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg><span>Tools</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Graph"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg><span>Graph</span></button>
    </div><button class="btn ghost icon mini" type="button" aria-label="Close inspector"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></header>
  <div class="pane-body">
    <details class="pane-sec" open>
      <summary>Running<span class="pane-count accent">2</span></summary>
      <div class="pane-sec-body">
        <ul class="subagents dense">
          <li><button class="subagent" type="button" data-state="running"><span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span><span class="subagent-main"><span class="subagent-head"><b class="subagent-name">Trace checkout</b><span class="subagent-model">haiku-4.5</span></span><span class="subagent-task">Reading the retry tests</span><span class="subagent-meta"><span class="subagent-state">Running</span><span class="subagent-time">12 s</span><span class="subagent-steps">6 steps</span></span></span></button></li>
          <li><button class="subagent" type="button" data-state="queued"><span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg></span><span class="subagent-main"><span class="subagent-head"><b class="subagent-name">Run the suite</b><span class="subagent-model">haiku-4.5</span></span><span class="subagent-task">Waiting for the patch</span><span class="subagent-meta"><span class="subagent-state">Queued</span><span class="subagent-time">0 s</span></span></span></button></li>
        </ul>
      </div>
    </details>
  </div>
</aside>

Inside a section, a context meter, a list, a tree or a list of subagents drops its own frame: the section is the frame. Use the dense variants.

Empty and loading

Light
Dark
Code
<aside class="pane" aria-label="Tools" style="height:15rem">
  <header class="pane-head"><h2 class="pane-title">Tools</h2><button class="btn ghost icon mini" type="button" aria-label="Close inspector"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></header>
  <div class="pane-body">
    <div class="empty sm"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg><b>No tool calls yet</b><p>Calls appear here as the agent runs them, newest first.</p></div>
  </div>
</aside>
<aside class="pane" aria-label="Graph" aria-busy="true" style="height:12rem">
  <header class="pane-head"><h2 class="pane-title">Graph</h2><button class="btn ghost icon mini" type="button" aria-label="Close inspector"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></header>
  <div class="pane-body">
    <section class="pane-sec"><header>Loading the memory graph</header><div class="pane-sec-body"><span class="skeleton row"></span><span class="skeleton row" style="width:82%"></span><span class="skeleton row" style="width:64%"></span></div></section>
  </div>
</aside>

An empty pane says what will appear and when, in two lines. A loading section shows skeleton rows of the real row height, so nothing moves when the content lands.

Wide

Code
<aside class="pane" aria-label="Inspector" style="height:9rem">
  <header class="pane-head"><div class="tabs" role="tablist" aria-label="Inspector">
      <button class="tab" role="tab" type="button" aria-selected="false" title="Context"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"/><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"/></svg><span>Context</span></button>
      <button class="tab" role="tab" type="button" aria-selected="true" title="Details"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><span>Details</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="File"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>File</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Problems"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><span>Problems</span><span class="pane-count down">3</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Agents"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg><span>Agents</span><span class="pane-count accent">2</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Tools"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg><span>Tools</span></button>
      <button class="tab" role="tab" type="button" aria-selected="false" title="Graph"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg><span>Graph</span></button>
    </div><button class="btn ghost icon mini" type="button" aria-label="Close inspector"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></header>
  <div class="pane-body"><section class="pane-sec"><header>Turn 41</header><div class="pane-sec-body"><div class="pane-row"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span>Started 09:14:02, finished 09:14:44</span><small>42 s</small></div><div class="pane-row"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg><span>sonnet-4.5, 19.1k in, 1.2k out</span><code>$0.021</code></div></div></section></div>
</aside>

From 32rem the tabs show every label.

API

ClassOnWhat it does
.paneaside, nav, sectionThe panel. A column with a 36px head, a scrolling body and an optional foot. A size container named pane.
.pane-headheaderThe 36px head with a rule under it. Holds .tabs or a .pane-title, then buttons.
.pane-titleh2, h3The title, 12px 600. Put its count inside it.
.pane-countspanA 16px count. .accent, .warn and .down follow the state.
.tabs > .tab.pane-headFull-height underlined tabs, 11.5px. Under 32rem the others fold to icons; their labels stay in the name.
.pane-bodydivThe scroll area: 8px padding, 6px between sections. .flush for an editor or a graph.
.pane-footfooterAn optional 32px foot for when it was updated and a quiet action.
.pane-secdetails, sectionA section card: 1px rule, 6px radius.
summary, header.pane-secThe 28px section head: a 10.5px uppercase label, then a count, buttons and the chevron.
.pane-sec-bodydivThe section content: 8px padding, 6px gaps, rows flush.
.pane-rowdiv, a, buttonA 24px row: a 12px icon, text that truncates, then small for a fact or code for a value.
data-state.pane-rowerror, warn, ok, running colour the icon. The section label carries the word.
aria-current, aria-selected.pane-rowThe open or selected row: an accent wash.
.btn.minibuttonThe 24px button for pane heads and rows.
.dlist.paneKey and value rows at 24px, 11px, with no rules.
Do
  • One rule under the head, cards in the body, nothing else framed.
  • Section labels that are words: Errors, Running, Files in context.
  • A count on every section that holds a list.
Don't
  • Grids of stat tiles. Use a row with the number on the right.
  • Fixed-height empty blocks waiting for data.
  • A second scroll area inside a section.

Accessibility

  • Give the pane a landmark and a name: aside aria-label="Inspector". Tabs follow the tabs pattern: role="tablist", role="tab", aria-selected, and a role="tabpanel" body.
  • Folded tabs keep their label in the accessible name; only its box moves off screen.
  • Sections are native details, so they open with Enter and Space. The focus ring sits inside the head.
  • Counts are text. Severity is said by the section label, and colour repeats it.
  • Rows that act are buttons or links, with an inset focus ring that the card does not clip. Disabled rows drop out of the pointer.