fin1teds
v1.2.0
  1. ds
  2. Agent
  3. Status bar

Status bar

The dense bottom rail: path, branch, model, context and connection.

~/work/axon branchmain modelsonnet-4.5 permworkspace-write 42%86k/200k Connected
Code
<div class="statusbar" role="group" aria-label="Session status">
  <span class="sb-item sb-path" title="~/work/axon"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><b>~/work/axon</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg><span class="sb-word">branch</span><b>main</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item accent"><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 class="sb-word">model</span><b>sonnet-4.5</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg><span class="sb-word">perm</span><b>workspace-write</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item sb-ctx" title="86k of 200k tokens"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></svg><b>42%</b><span class="sb-meter" style="--v:.42"><i></i></span><span class="sb-count">86k/200k</span></span>
  <span class="sb-conn" data-state="ok" role="status"><span class="status-dot"></span>Connected</span>
</div>

The status bar is the quiet footer of an agent window. It answers the questions people ask while a turn runs: where am I, what branch, which model, what may it do, how much context is left and is the stream alive. Everything is mono at the label step and on one line.

The connection item is the only element that moves to the right. The rest keep a fixed order so the eye learns where to look. .sticky pins the bar to the bottom of a scrolling column.

Warning and offline

~/work/checkout branchfix/retry-queue modelsonnet-4.5 permask 79%158k/200k Degraded
~/work/checkout branchfix/retry-queue modelsonnet-4.5 permask 63%126k/200k Reconnecting
Show code
<div class="statusbar" role="group" aria-label="Session status">
  <span class="sb-item sb-path" title="~/work/checkout"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><b>~/work/checkout</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg><span class="sb-word">branch</span><b>fix/retry-queue</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item accent"><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 class="sb-word">model</span><b>sonnet-4.5</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg><span class="sb-word">perm</span><b>ask</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item sb-ctx" title="158k of 200k tokens"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></svg><b>79%</b><span class="sb-meter warn" style="--v:.79"><i></i></span><span class="sb-count">158k/200k</span></span>
  <span class="sb-conn" data-state="warn" role="status"><span class="status-dot warn"></span>Degraded</span>
</div>

<div class="statusbar" data-state="error" role="group" aria-label="Session status">
  <span class="sb-item sb-path" title="~/work/checkout"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><b>~/work/checkout</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg><span class="sb-word">branch</span><b>fix/retry-queue</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item accent"><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 class="sb-word">model</span><b>sonnet-4.5</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg><span class="sb-word">perm</span><b>ask</b></span>
  <span class="sb-sep" aria-hidden="true"></span>
  <span class="sb-item sb-ctx" title="126k of 200k tokens"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></svg><b>63%</b><span class="sb-meter down" style="--v:.63"><i></i></span><span class="sb-count">126k/200k</span></span>
  <span class="sb-conn" data-state="down" role="status"><span class="status-dot down"></span>Reconnecting</span>
</div>

Context pressure and connection state are separate. A full context meter stays amber or red while the stream is still connected; a dropped stream turns red on its own. Words carry both states, so the bar is readable without colour.

API

ClassOnWhat it does
.statusbardivThe rail. role="group" and a label.
.sticky.statusbarPins the bar to the bottom of a scroll container.
data-state="error".statusbarRed top rule for a session-level failure.
.sb-itemspanOne fact: icon, optional word and value.
.sb-path.sb-itemThe working directory. Truncates; keep the full path in title.
.sb-sepspanA short vertical rule between facts. Decorative.
.sb-wordspanThe small label before a value. Hidden under 560px.
.sb-ctx.sb-itemContext percentage, meter and token count.
.sb-meterspanThe mini meter. Set --v from 0 to 1. .warn and .down change the fill.
.sb-countspanThe token fraction. Hidden under 560px; keep it in title.
.sb-connspanConnection state, pushed right. data-state: ok, warn, down, idle.
Do
  • One line, one order, every session.
  • Put the full path and token count in title attributes.
  • Use words for connection state, not just the dot.
Don't
  • A second toolbar. This is a readout.
  • Hiding the model or permission at 390px.
  • Animating the context meter while it streams.

Accessibility

  • Give the bar role="group" and a label. Each connection item is a role="status", so a change is announced without stealing focus.
  • The dot is never the only signal. Connected, degraded and reconnecting are written out.
  • At 390px the separators, the labels before values and the token fraction are hidden. The values, the meter percentage and the connection word stay.
  • The bar wraps to two dense rows rather than clipping a fact. On touch, it does not compete with the composer above it.