@sergeychuvayev/claude-fleet 0.7.0 → 0.9.0

package/README.md

@@ -121,6 +121,55 @@ session's own process and never appear as separate rows at all.
 
 </details>
 
+### The status bar watches the account, not the session
+
+Context pressure is per conversation. The five-hour and weekly plan windows are not:
+every Claude process on the machine draws on the same ones, including the terminal
+sessions Fleet only watches. They get one line along the bottom of the window.
+
+```
+5h ▇▇▇▇▇▇░░░░ 62%  resets 13:28   ·   week 31%   ·   opus wk 48%
+```
+
+Only the window closest to stopping you gets a bar; the rest stay bare numbers. The
+same 75% amber and 90% red as context, so "nearly full" reads the same way everywhere.
+Past 90% the countdown replaces the bar, because by then the question is when it clears,
+not how full it is.
+
+When a request is actually refused, the bar turns into the refusal, and the new-agent
+dialog says so before you write a prompt:
+
+```
+⊘ Rate limited · five-hour window · resets 11:42 (35m) · organisation spend cap reached
+```
+
+<details>
+<summary><b>Where the numbers come from, and when they are missing</b></summary>
+
+Three sources, none of them available all the time:
+
+| Source | Gives | Available |
+|---|---|---|
+| `rate_limit_event` | utilisation, reset | only while a Fleet agent streams |
+| The runtime's `/usage` data | every window, the plan | pulled once at the end of a turn |
+| A refused request in any transcript | the wall and its reset | whenever it happened, to any session |
+
+Nothing here ever spends a token to find out: a synthetic request would consume the
+window it claims to measure. That has consequences the bar is explicit about.
+
+Utilisation only refreshes while an agent is running, so after an idle stretch the
+cluster dims and stamps itself `as of 09:38` rather than presenting an old reading as
+current. Nothing measured yet shows nothing at all, never `0%`. On an API key, Bedrock
+or Vertex, where plan limits do not apply, the cluster is absent entirely.
+
+A refusal is the one signal that survives Fleet being idle, because it is written into
+the transcript of whichever session hit it. It expires by itself at its reset time, and
+a refusal with no reset time is discarded rather than shown: a warning that cannot
+clear itself is worse than none. Being blocked never disables anything. Fleet says what
+it knows and leaves the decision where it belongs.
+
+</details>
+
 ### Old sessions can be put away
 
 Every transcript Claude has ever written is a row, so a machine that has been

package/fleet.js

@@ -189,6 +189,9 @@ function readTranscript(file) {
     events: [],
     cwd: null,
     gitBranch: null,
+    // The newest 429 this transcript recorded, if any. Plan limits are account-wide, so
+    // a rejection here describes the whole machine, not only this session.
+    rateLimit: null,
   }
 
   for (const line of text.split('\n')) {
@@ -209,6 +212,16 @@ function readTranscript(file) {
       if (!data.firstTs) data.firstTs = d.timestamp
       data.lastTs = d.timestamp
     }
+    // Claude records the quota it hit only when a request was actually refused. There is
+    // no routine utilisation record to read here, so this is a wall, never a gauge.
+    if (d.quotaLimits && d.quotaLimits.status === 'rejected') {
+      data.rateLimit = {
+        at: d.timestamp ? Date.parse(d.timestamp) || null : null,
+        rateLimitType: d.quotaLimits.rateLimitType || null,
+        resetsAt: d.quotaLimits.resetsAt || null,
+        reason: d.quotaLimits.overageDisabledReason || null,
+      }
+    }
     if (d.timestamp) {
       const at = Date.parse(d.timestamp)
       if (at) for (const event of classify(d)) {
@@ -349,6 +362,7 @@ function collect() {
   const index = transcriptIndex()
   const now = Date.now()
   const sessions = []
+  let rateLimit = null
 
   // The registry describes running processes, not saved conversations: Claude
   // removes registrations on exit. Join it with durable transcripts so handoff
@@ -373,6 +387,10 @@ function collect() {
     const file = meta.sessionId ? index.get(meta.sessionId) : null
     const t = file ? readTranscript(file) : null
 
+    // Whoever hit the wall, the wall is the account's. The freshest rejection on this
+    // machine describes the whole fleet, including sessions Fleet only watches.
+    if (t && t.rateLimit && (!rateLimit || (t.rateLimit.at || 0) > (rateLimit.at || 0))) rateLimit = t.rateLimit
+
     const lastActivity = Math.max(
       meta.updatedAt || 0,
       t && t.lastTs ? Date.parse(t.lastTs) : 0
@@ -436,7 +454,7 @@ function collect() {
   const counts = { busy: 0, idle: 0, stale: 0, dead: 0 }
   for (const s of sessions) counts[s.state] = (counts[s.state] || 0) + 1
 
-  return { generatedAt: now, counts, total: sessions.length, sessions }
+  return { generatedAt: now, counts, total: sessions.length, sessions, rateLimit }
 }
 
 // Look up a transcript by session id without going through the process registry.

package/managed.js

@@ -9,6 +9,7 @@ const { askReason, normaliseMode, MODES, DEFAULT_MODE } = require('./permissions
 const { stateDir } = require('./paths')
 const { getTeam, compile } = require('./teams')
 const { TeamStore } = require('./team-store')
+const { UsageTracker } = require('./usage')
 const tasks = require('./tasks')
 const worktrees = require('./worktree')
 
@@ -63,6 +64,10 @@ class ManagedSessions extends EventEmitter {
     this.closed = false
     this.models = null
     this.saveTimer = null
+    // Plan windows belong to the account, so one tracker serves every session and
+    // outlives all of them. It is deliberately not persisted: a utilisation figure from
+    // before a restart describes a window that has probably already turned over.
+    this.usage = new UsageTracker()
     fs.mkdirSync(directory, { recursive: true, mode: 0o700 })
     this.file = path.join(directory, 'sessions.json')
     this.attachmentsDir = path.join(directory, 'attachments')
@@ -353,6 +358,8 @@ class ManagedSessions extends EventEmitter {
   }
   event(s,run,event) {
     if (event.session_id && !event.parent_tool_use_id) s.sessionId=event.session_id
+    // Account-wide, so it is recorded whoever emitted it, sub-agent turns included.
+    if (event.type==='rate_limit_event') this.usage.recordEvent(event.rate_limit_info)
     if (s.taskBoard && event.parent_tool_use_id) {
       const d=s.taskBoard.delegations.find(d=>d.id===event.parent_tool_use_id)
       if (d && event.type==='assistant') {
@@ -418,9 +425,21 @@ class ManagedSessions extends EventEmitter {
       else if (event.result && !s.messages.some(m=>m.role==='assistant' && m.text===event.result.slice(-24000))) s.messages.push({id:randomUUID(),role:'assistant',text:event.result.slice(-24000),at:Date.now()})
       s.costUsd=(s.costUsd||0)+(event.total_cost_usd||0)
       s.messages=s.messages.slice(-MAX_MESSAGES)
+      this.captureUsage(run)
     }
     this.changed(s)
   }
+  // The end of a turn is the one moment a query is both idle and still open, so it is
+  // where the every-window reading is taken. Fire and forget: the push event already
+  // carries the window that matters, this only fills in the rest. The method is marked
+  // experimental upstream and may simply not be there, which is not an error.
+  captureUsage(run) {
+    if (!run || run.usagePulled) return
+    const pull=run.query?.usage_EXPERIMENTAL_MAY_CHANGE_DO_NOT_RELY_ON_THIS_API_YET
+    if (typeof pull!=='function') return
+    run.usagePulled=true
+    Promise.resolve(pull.call(run.query)).then(response=>this.usage.recordUsage(response)).catch(()=>{})
+  }
   // A tool call becomes its own conversation entry so the UI can render it as a command block.
   toolStarted(s,run,block) {
     if (!block.id || run.tools?.has(block.id)) return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sergeychuvayev/claude-fleet",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "A local control room for Claude Code sessions",
   "keywords": [
     "claude",
@@ -39,7 +39,8 @@
     "update.js",
     "worktree.js",
     "team-store.js",
-    "tasks.js"
+    "tasks.js",
+    "usage.js"
   ],
   "scripts": {
     "start": "node bin/claude-fleet.js start",

package/public/app.js

@@ -1,5 +1,17 @@
 'use strict'
+// An isolated scope, the way teams.js and blocks.js already do it. Everything in
+// here used to sit in the page's shared global scope alongside control.js, blocks.js
+// and ask.js, where a name chosen twice in two files is a SyntaxError that takes the
+// whole dashboard down before a line of it runs. What the other files legitimately
+// need is window.Fleet, published partway down; nothing else escapes.
+// The leading semicolon is load-bearing: without it the directive above and the
+// parenthesis below join into a call on the string "use strict".
+;(() => {
 const $ = id => document.getElementById(id)
+// The one thing the core borrows back from control.js, which owns the control
+// token every write is authenticated with. Resolved per call, not at load: app.js
+// runs first, and every caller here is an event handler that fires long after.
+const api = (...args) => window.FleetControl.api(...args)
 const STATES = ['busy', 'idle', 'stale', 'dead']
 const LABELS = { busy: 'Working', idle: 'Waiting', stale: 'Stale', dead: 'Offline' }
 const esc = value => String(value ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]))
@@ -12,6 +24,15 @@ const age = timestamp => {
   const secs = Math.max(0, Math.floor((Date.now() - new Date(timestamp).getTime()) / 1000))
   return secs < 60 ? `${secs}s` : secs < 3600 ? `${Math.floor(secs/60)}m` : secs < 86400 ? `${Math.floor(secs/3600)}h` : `${Math.floor(secs/86400)}d`
 }
+// Everything Fleet remembers between visits goes through here. It is declared before
+// its first reader on purpose: a `const` used above its declaration throws a
+// ReferenceError that the callers' own try/catch would quietly absorb, leaving every
+// remembered preference silently reset on each load.
+const store = {
+  get(key) { try { return localStorage.getItem(key) } catch { return null } },
+  set(key, value) { try { localStorage.setItem(key, value) } catch {} },
+  clear(key) { try { localStorage.removeItem(key) } catch {} },
+}
 let snapshot = null, filter = 'all', selected = null, pending = false, toastTimer
 // A delegation row nested under a team session. Keyed on the delegation id, never on
 // its position or status, so a sub-agent finishing does not move the operator's focus.
@@ -23,7 +44,10 @@ const formatModel = m => m ? String(m).replace('claude-', '') : 'Model pending'
 // A child row shares its data-session with the parent that owns it, so the session
 // id alone is not a unique row key: folding in data-delegation is what tells a
 // delegation row apart from its parent when the list redraws underneath focus.
-const rowFocusKey = b => b.dataset.delegation ? `${b.dataset.session}::${b.dataset.delegation}` : b.dataset.session || b.dataset.filter
+// The fold header shares no data-session with anything, so it needs a key of its own:
+// without one it reads as unkeyed and the poll two seconds after a click would drop
+// the focus ring off the control the operator just used.
+const rowFocusKey = b => b.dataset.foldSession ? `fold::${b.dataset.foldSession}` : b.dataset.delegation ? `${b.dataset.session}::${b.dataset.delegation}` : b.dataset.session || b.dataset.filter
 function update(id, html) {
   const el = $(id)
   if (!el || el.innerHTML === html) return
@@ -95,10 +119,44 @@ function childRowHtml(s, d) {
   const label = DELEGATION_LABEL[d.status] || d.status
   return `<button class="session session-child" data-session="${esc(key(s))}" data-delegation="${esc(d.id)}" aria-pressed="${selectedChild === d.id}" aria-controls="detail"><span><span class="session-top"><span class="badge ${cls}"><span class="dot"></span>${esc(label)}</span><span class="session-name">⑂ ${esc(d.role)}</span></span><span class="session-title">${esc(formatModel(d.model))}</span></span><span class="session-context"></span></button>`
 }
+// A session's sub-agents fold away behind a header of their own. An initiative can sit
+// between two sessions with twenty delegation rows wedged in the gap, which buries the
+// list those rows belong to. Folding is per session and remembered, so putting one
+// team's sub-agents away leaves every other team's on screen.
+const COLLAPSED_KEY = 'fleet:children-collapsed'
+let collapsedChildren = new Set()
+try { collapsedChildren = new Set(JSON.parse(store.get(COLLAPSED_KEY) || '[]')) } catch { collapsedChildren = new Set() }
+const childGroupId = k => `children-${String(k).replace(/[^\w-]/g, '_')}`
+function setChildrenCollapsed(k, collapsed) {
+  if (collapsed) collapsedChildren.add(k)
+  else collapsedChildren.delete(k)
+  // Sessions come and go; only the folds still worth honouring are worth storing.
+  store.set(COLLAPSED_KEY, JSON.stringify([...collapsedChildren].slice(-200)))
+}
+// The header names the group and carries the fold. It is a sibling of the session
+// row rather than part of it because that row is itself a button, and a button
+// cannot hold another one.
+function childToggleHtml(s, collapsed) {
+  const all = s.delegations || []
+  const running = all.filter(d => d.status === 'running').length
+  const failed = all.filter(d => d.status === 'failed').length
+  const counts = [`${all.length} sub-agent${all.length === 1 ? '' : 's'}`, running ? `${running} working` : '', failed ? `${failed} failed` : ''].filter(Boolean).join(' · ')
+  return `<button class="session-children-toggle${collapsed ? ' is-collapsed' : ''}" data-fold-session="${esc(key(s))}" aria-expanded="${!collapsed}" aria-controls="${esc(childGroupId(key(s)))}"><span class="children-chevron" aria-hidden="true">›</span><span class="children-count">⑂ ${esc(counts)}</span></button>`
+}
 // An initiative that runs long enough accumulates delegations without bound; the
 // row list stays a list, not a scrollbar of its own, by showing only the tail.
 const CHILD_ROW_LIMIT = 20
 const childRowsHtml = s => {
+  const all = s.delegations || []
+  if (!all.length) return ''
+  // A fold never hides the one row the list reads as selected: clicking the header
+  // hands the selection back to the session first, and a group still holding the
+  // selected delegation by any other route draws open however it was left.
+  const collapsed = collapsedChildren.has(key(s)) && !all.some(d => d.id === selectedChild)
+  const group = `<div class="session-children" id="${esc(childGroupId(key(s)))}"${collapsed ? ' hidden' : ''}>${collapsed ? '' : childTailHtml(s)}</div>`
+  return childToggleHtml(s, collapsed) + group
+}
+const childTailHtml = s => {
   const all = s.delegations || []
   const recent = all.length > CHILD_ROW_LIMIT ? all.slice(-CHILD_ROW_LIMIT) : all
   // The parent row has already handed its aria-pressed to session-ancestor, so a
@@ -115,6 +173,123 @@ const childRowsHtml = s => {
   return (earlier ? `<div class="session-child-more">+${earlier} earlier</div>` : '') + shown.map(d => childRowHtml(s, d)).join('')
 }
 
+// ── Account usage ─────────────────────────────────────────────────────────────
+// The plan windows belong to the account, not to a session: every Claude process on
+// this machine draws on them, including the terminal sessions Fleet only watches. The
+// bar says so, and it uses the same thresholds and colours as context pressure so
+// "nearly full" reads the same way everywhere.
+const WINDOW_WORD = { five_hour:'five-hour', seven_day:'weekly', seven_day_opus:'weekly Opus', seven_day_sonnet:'weekly Sonnet', seven_day_oauth_apps:'weekly apps' }
+const BLOCK_REASON = {
+  org_spend_cap_reached:'organisation spend cap reached', out_of_credits:'out of credits',
+  overage_not_provisioned:'no overage configured', org_level_disabled:'overage off for this organisation',
+  member_level_disabled:'overage off for this member', no_limits_configured:'no overage limits set',
+  fetch_error:'usage lookup failed',
+}
+const clockAt = ms => new Date(ms).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})
+const untilReset = (ms, now) => {
+  const left = ms - now
+  if (left <= 0) return 'any moment'
+  return left < 3600000 ? `${Math.max(1, Math.round(left / 60000))}m` : `${Math.floor(left / 3600000)}h ${Math.round(left % 3600000 / 60000)}m`
+}
+const blockReason = r => BLOCK_REASON[r] || (r ? String(r).replace(/_/g, ' ') : null)
+const windowWord = name => WINDOW_WORD[name] || String(name || '').replace(/_/g, ' ')
+function usageHtml(usage, now) {
+  // Unknown is not zero. With nothing measured, and on an API key or a third-party
+  // provider where plan limits do not apply at all, the cluster is simply absent.
+  if (!usage || !usage.available || !usage.known) return ''
+  const blocked = usage.blocked
+  if (blocked) return `<span class="usage-blocked hot" title="A request was refused by this window. Every Claude session on this machine is affected until it resets.">⊘ Rate limited · ${esc(windowWord(blocked.rateLimitType))} window · resets ${clockAt(blocked.resetsAt)} (${untilReset(blocked.resetsAt, now)})${blockReason(blocked.reason) ? ` · ${esc(blockReason(blocked.reason))}` : ''}</span>`
+  const binding = usage.windows.find(w => w.name === usage.binding) || usage.windows[0]
+  if (!binding) return ''
+  const cls = heat(binding.utilization)
+  // Past 90% the countdown is the decision and the percentage is trivia, so they swap.
+  const critical = binding.utilization >= 90
+  const reset = binding.resetsAt ? (critical ? `${untilReset(binding.resetsAt, now)} left` : `resets ${clockAt(binding.resetsAt)}`) : ''
+  const detail = [
+    usage.subscription ? `Plan: ${usage.subscription}.` : '',
+    'Account-wide, including the terminal sessions Fleet only watches.',
+    usage.observedAt ? `Last read ${clockAt(usage.observedAt)}.` : '',
+  ].filter(Boolean).join(' ')
+  // One bar, on whichever window is closest to stopping the fleet. The rest are bare
+  // numbers: a second bar would just be a second thing to look at.
+  const others = usage.windows.filter(w => w !== binding)
+    .map(w => `<span class="usage-other ${heat(w.utilization)}"><b>${esc(w.label)}</b> ${w.utilization}%</span>`).join('')
+  return `<span class="usage-window ${cls}${usage.stale ? ' is-stale' : ''}" title="${esc(detail)}"><b>${esc(binding.label)}</b>${critical ? `<em>${reset}</em><span class="usage-pct">${binding.utilization}%</span>` : `<span class="mini-bar"><i class="${cls}" style="width:${binding.utilization}%"></i></span><span class="usage-pct">${binding.utilization}%</span>${reset ? `<small>${reset}</small>` : ''}`}</span>${others}${usage.stale && usage.observedAt ? `<small class="usage-stale" title="Utilisation only updates while a Fleet agent is running.">as of ${clockAt(usage.observedAt)}</small>` : ''}`
+}
+function renderStatusbar(usage, sessions) {
+  const now = Date.now()
+  update('status-usage', usageHtml(usage, now))
+  const managed = sessions.filter(s => s.managed && !s.archived)
+  const waiting = managed.filter(s => s.managedStatus === 'approval').length
+  const working = sessions.filter(s => !s.archived && isWorkingRow(s)).length
+  const spend = managed.reduce((sum, s) => sum + (s.costUsd || 0), 0)
+  update('status-fleet', [
+    `<span>${working} working</span>`,
+    waiting ? `<span class="warn">${waiting} needs you</span>` : '',
+    money(spend) ? `<span title="Reported for Fleet’s own conversations only. Terminal sessions are not included, and a Claude subscription is not billed for this.">${esc(money(spend))}</span>` : '',
+  ].filter(Boolean).join('<span class="status-sep" aria-hidden="true">·</span>'))
+  // The same wall, said where it changes a decision: in the dialog that starts agents.
+  const banner = $('launch-blocked')
+  if (banner) {
+    banner.hidden = !usage?.blocked
+    if (usage?.blocked) banner.textContent = `Rate limited until ${clockAt(usage.blocked.resetsAt)} (${untilReset(usage.blocked.resetsAt, now)}). A new agent will not get past its first message until this window resets.`
+  }
+}
+
+// ── The session row ─────────────────────────────────────────────────────────
+// One row is four lines: what the agent is and how it is doing, what it was asked,
+// where it is working, and the story of its latest turn. Each line is built by its
+// own function, so changing the look of one does not mean reading the other three.
+
+// Line one, after the status badge: the qualifiers that say this row is not an
+// ordinary foreground session you started yourself.
+function rowTags(s, spawnCounts) {
+  const spawned = spawnCounts.get(s.pid)
+  return [
+    spawned ? `<span class="spawn-badge" title="Running ${spawned} background session(s)">⑂ ${spawned}</span>` : '',
+    s.background ? `<span class="spawn-owner" title="Started by ${esc(s.spawnedByName || 'a program')}, not from a terminal">via ${esc(s.spawnedByName || 'a program')}</span>` : '',
+    s.archived ? '<span class="archived-tag" title="Archived. Hidden from your fleet, still on disk and still resumable.">archived</span>' : '',
+  ].join('')
+}
+// A team session says which team is running it and how far through its tasks it is.
+function initiativeTag(s) {
+  if (s.kind !== 'initiative') return ''
+  const p = s.taskProgress
+  const progress = p ? ` · ${p.verified}/${p.total} verified${p.blocked ? ` · ${p.blocked} need attention` : ''}` : ''
+  return `<span class="initiative-tag">Initiative · ${esc(s.teamName || s.teamId || 'Team')}${progress}</span>`
+}
+// Where the work is happening, and what it has cost.
+function rowMeta(s) {
+  const project = s.cwd?.split('/').filter(Boolean).pop() || 'No project'
+  const spend = money(s.costUsd)
+  return `<span class="session-meta"><span>${esc(project)}</span><span class="branch">⑂ ${esc(s.branch || 'No branch')}</span>${s.links?.length ? `<span>↗ ${s.links.length}</span>` : ''}${spend ? `<span class="session-cost" title="What this conversation has cost so far">${esc(spend)}</span>` : ''}</span>`
+}
+// The right-hand column: how full the context window is, and how long ago the
+// agent last did anything.
+function contextCell(s) {
+  const p = percent(s)
+  return `<span class="session-context ${heat(p)}">${p === null ? '—' : Math.round(p) + '%'}<span class="mini-bar"><i class="${heat(p)}" style="width:${p || 0}%"></i></span><small>${age(s.lastActivity)} ago</small></span>`
+}
+function sessionRowHtml(s, spawnCounts) {
+  // A row holding the selected sub-agent is an ancestor of the selection, not the
+  // selection itself, so it gives up aria-pressed to the child row below it.
+  const childSelectedHere = !!selectedChild && (s.delegations || []).some(d => d.id === selectedChild)
+  const name = (s.managed ? 'FLEET · ' : '') + (s.name || s.shortId || 'Unnamed session')
+  const top = `<span class="session-top">${hasUnseen(s) ? '<span class="unseen" aria-label="New output"></span>' : ''}${status(s)}<span class="session-name">${esc(name)}</span>${rowTags(s, spawnCounts)}</span>`
+  const body = `${top}${initiativeTag(s)}<span class="session-title">${esc(s.title || s.lastPrompt || 'Untitled session')}</span>${rowMeta(s)}${turnRow(s)}`
+  return `<button class="session${childSelectedHere ? ' session-ancestor' : ''}" data-session="${esc(key(s))}" aria-pressed="${selected === key(s) && !childSelectedHere}" aria-controls="detail" title="${hasUnseen(s) ? 'New output since you last opened this' : ''}"><span>${body}</span>${contextCell(s)}</button>${childRowsHtml(s)}`
+}
+const filterBarHtml = (counts, foreground, background, archived) => [
+  ['all', 'All sessions', foreground],
+  ...STATES.map(s => [s, LABELS[s], counts[s] || 0]),
+  ...(background ? [['background', 'Background', background]] : []),
+  ...(archived ? [['archived', 'Archived', archived]] : []),
+].map(([s, label, n]) => `<button class="filter" data-filter="${s}" aria-pressed="${filter === s}">${label}<span>${n}</span></button>`).join('')
+const emptyListHtml = total =>
+  filter === 'background' ? 'No background sessions right now.'
+  : total ? 'No sessions match your filters.<br>Try another search or select All sessions.'
+  : 'Your fleet is quiet.<br>Start a Claude Code session and it will appear here automatically.'
+
 function render() {
   if (!snapshot) return
   const {sessions, total} = snapshot
@@ -137,13 +312,12 @@ function render() {
   const shown = pool.filter(s => filter === 'all' || filter === 'background' || filter === 'archived' || s.state === filter)
   if (!shown.some(s => key(s) === selected)) selected = shown[0] ? key(shown[0]) : null
   $('shown-count').textContent = shown.length
-  update('filters', [['all','All sessions',foreground.length],...STATES.map(s => [s,LABELS[s],(visibleCounts[s] || 0)]),...(background.length ? [['background','Background',background.length]] : []),...(archived.length ? [['archived','Archived',archived.length]] : [])].map(([s,label,n]) => `<button class="filter" data-filter="${s}" aria-pressed="${filter === s}">${label}<span>${n}</span></button>`).join(''))
+  renderStatusbar(snapshot.usage, live)
+  update('filters', filterBarHtml(visibleCounts, foreground.length, background.length, archived.length))
   renderArchiveBar(live.filter(s => s.state === 'dead'), archived.length)
-  update('session-list', shown.length ? shown.map(s => {
-    const p = percent(s)
-    const childSelectedHere = !!selectedChild && (s.delegations || []).some(d => d.id === selectedChild)
-    return `<button class="session${childSelectedHere ? ' session-ancestor' : ''}" data-session="${esc(key(s))}" aria-pressed="${selected === key(s) && !childSelectedHere}" aria-controls="detail" title="${hasUnseen(s) ? 'New output since you last opened this' : ''}"><span><span class="session-top">${hasUnseen(s) ? '<span class="unseen" aria-label="New output"></span>' : ''}${status(s)}<span class="session-name">${esc((s.managed ? 'FLEET · ' : '') + (s.name || s.shortId || 'Unnamed session'))}</span>${spawnCounts.get(s.pid) ? `<span class="spawn-badge" title="Running ${spawnCounts.get(s.pid)} background session(s)">⑂ ${spawnCounts.get(s.pid)}</span>` : ''}${s.background ? `<span class="spawn-owner" title="Started by ${esc(s.spawnedByName || 'a program')}, not from a terminal">via ${esc(s.spawnedByName || 'a program')}</span>` : ''}${s.archived ? '<span class="archived-tag" title="Archived. Hidden from your fleet, still on disk and still resumable.">archived</span>' : ''}</span>${s.kind === 'initiative' ? `<span class="initiative-tag">Initiative · ${esc(s.teamName || s.teamId || 'Team')}${s.taskProgress ? ` · ${s.taskProgress.verified}/${s.taskProgress.total} verified${s.taskProgress.blocked ? ` · ${s.taskProgress.blocked} need attention` : ''}` : ''}</span>` : ''}<span class="session-title">${esc(s.title || s.lastPrompt || 'Untitled session')}</span><span class="session-meta"><span>${esc(s.cwd?.split('/').filter(Boolean).pop() || 'No project')}</span><span class="branch">⑂ ${esc(s.branch || 'No branch')}</span>${s.links?.length ? `<span>↗ ${s.links.length}</span>` : ''}${money(s.costUsd) ? `<span class="session-cost" title="What this conversation has cost so far">${esc(money(s.costUsd))}</span>` : ''}</span>${turnRow(s)}</span><span class="session-context ${heat(p)}">${p === null ? '—' : Math.round(p)+'%'}<span class="mini-bar"><i class="${heat(p)}" style="width:${p || 0}%"></i></span><small>${age(s.lastActivity)} ago</small></span></button>${childRowsHtml(s)}`
-  }).join('') : `<div class="empty">${filter === 'background' ? 'No background sessions right now.' : total ? 'No sessions match your filters.<br>Try another search or select All sessions.' : 'Your fleet is quiet.<br>Start a Claude Code session and it will appear here automatically.'}</div>`)
+  update('session-list', shown.length
+    ? shown.map(s => sessionRowHtml(s, spawnCounts)).join('')
+    : `<div class="empty">${emptyListHtml(total)}</div>`)
   const current = shown.find(s => key(s) === selected)
   if (current) markSeen(key(current), current.lastActivity)
   // A delegation belongs to whichever session is actually current; switching sessions,
@@ -161,10 +335,10 @@ function render() {
     renderChildDetail(current, childId)
     // A sub-agent is not addressable: clearing the control panel drops its composer
     // and conversation from the DOM entirely, not merely hiding them.
-    if (typeof selectControl === 'function') selectControl(null)
+    window.FleetControl?.selectControl(null)
   } else {
     renderDetail(current)
-    if (typeof selectControl === 'function') selectControl(current)
+    window.FleetControl?.selectControl(current)
   }
   syncDetails()
 }
@@ -317,11 +491,32 @@ document.addEventListener('click', event => {
   if (event.target === $(openModalId) || event.target.closest('[data-close-modal]')) closeModal()
 })
 
-function toast(message) { $('toast').textContent = message; $('toast').hidden = false; clearTimeout(toastTimer); toastTimer = setTimeout(() => $('toast').hidden = true, 3000) }
+// Reached from every error path, including ones that fire before the page has
+// finished wiring itself up, so a missing toast element costs the message and
+// nothing more.
+function toast(message) {
+  const box = $('toast')
+  if (!box) return
+  box.textContent = message
+  box.hidden = false
+  clearTimeout(toastTimer)
+  toastTimer = setTimeout(() => { box.hidden = true }, 3000)
+}
 document.addEventListener('click', async event => {
   const b = event.target.closest('button')
   if (!b) return
   if (b.dataset.filter) { filter = b.dataset.filter; render() }
+  if (b.dataset.foldSession) {
+    const k = b.dataset.foldSession, collapsed = !collapsedChildren.has(k)
+    setChildrenCollapsed(k, collapsed)
+    // Folding the group away takes the selection back up to the session that owns it,
+    // so the list never hides the one row reading as selected.
+    if (collapsed && selectedChild && snapshot?.sessions.find(s => key(s) === k)?.delegations?.some(d => d.id === selectedChild)) {
+      selected = k
+      selectedChild = null
+    }
+    return render()
+  }
   if (b.dataset.delegation) {
     selected = b.dataset.session; selectedChild = b.dataset.delegation; render()
     if (matchMedia('(max-width:720px)').matches) $('detail').scrollIntoView({behavior:'instant',block:'start'})
@@ -342,9 +537,23 @@ document.addEventListener('click', async event => {
     catch { toast('Clipboard unavailable. The command is shown below.'); const code = document.createElement('pre'); code.className = 'response'; code.textContent = s.resumeCmd; $('detail').append(code) }
   }
 })
+const setBusy = busy => { if ($('refresh')) $('refresh').disabled = busy }
+const setConnection = (text, state) => {
+  if ($('connection')) $('connection').textContent = text
+  if ($('connection-dot')) $('connection-dot').className = `dot ${state}`
+}
+const showError = message => {
+  const box = $('error')
+  if (!box) return
+  box.hidden = !message
+  if (message) box.textContent = message
+}
 async function tick() {
   if (pending) return
-  pending = true; $('refresh').disabled = true
+  // The poll runs on a timer and in the catch below, so it never assumes the
+  // chrome it writes into is mounted.
+  pending = true
+  setBusy(true)
   try {
     const r = await fetch('/api/sessions', {cache:'no-store',signal:AbortSignal.timeout(8000)})
     if (!r.ok) throw new Error(`HTTP ${r.status}`)
@@ -359,18 +568,55 @@ async function tick() {
     }
     // Other panels (the ask results) re-read the snapshot to refresh "open now" state.
     document.dispatchEvent(new CustomEvent('fleet-snapshot'))
-    $('connection').textContent = 'Live connection'; $('connection-dot').className = 'dot busy'
-    $('updated').textContent = `Updated ${new Date(data.generatedAt).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'})}`
-    $('error').hidden = !data.storageError
-    if (data.storageError) $('error').textContent = data.storageError
+    setConnection('Live connection', 'busy')
+    if ($('updated')) $('updated').textContent = `Updated ${new Date(data.generatedAt).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'})}`
+    showError(data.storageError)
   } catch {
-    $('connection').textContent = 'Disconnected'; $('connection-dot').className = 'dot stale'
-    $('error').textContent = snapshot ? 'Connection lost. Showing the last successful snapshot; retrying automatically.' : 'Unable to connect to the local server. Retrying automatically.'
-    $('error').hidden = false
+    setConnection('Disconnected', 'stale')
+    showError(snapshot ? 'Connection lost. Showing the last successful snapshot; retrying automatically.' : 'Unable to connect to the local server. Retrying automatically.')
     if (!snapshot) { update('session-list','<div class="empty">Waiting for the local server…</div>'); renderDetail(null) }
-  } finally { pending = false; $('refresh').disabled = false }
+  } finally { pending = false; setBusy(false) }
+}
+// ── What the rest of the page may use ───────────────────────────────────────
+// Published here, before the boot sequence below runs, and not as the value the
+// wrapper returns: control.js, teams.js and ask.js destructure this the moment they
+// load, so an element missing from the wiring that follows must not take the whole
+// page down with it. State is handed out through functions rather than as live
+// bindings, so a caller cannot take a copy of `snapshot` and read a stale one after
+// the next poll.
+window.Fleet = {
+  // DOM and formatting helpers the other files share.
+  $, esc, update, key, age, tokens, money, status, store,
+  // The account's plan windows, rendered from a usage reading.
+  usageHtml,
+  // Current state.
+  snapshot: () => snapshot,
+  // Actions. Each one renders, so a caller never has to remember to.
+  render,
+  setSnapshot(next) { snapshot = next; render() },
+  setFilter(next) { filter = next; render() },
+  select(sessionKey, delegationId = null) { selected = sessionKey; selectedChild = delegationId; render() },
+  setChildrenCollapsed(sessionKey, collapsed) { setChildrenCollapsed(sessionKey, collapsed); render() },
+  // What loadChildDetail's completion does: hand over the delegation the session
+  // route returned, then redraw. Select the delegation first; a detail handed over
+  // for one that is not selected has nowhere to be drawn.
+  setChildDetail(delegationId, detail, error = null) {
+    childDetail = detail
+    childDetailFor = delegationId
+    childDetailError = error
+    render()
+  },
+  toast,
+  // Modals.
+  modalIsOpen, openModal, closeModal,
+  // Layout, formerly window.FleetLayout.
+  watchConversation, syncDetails,
+  // Control-panel rendering, for tests and for the update poller.
+  renderUpdate: (...args) => window.FleetControl.renderUpdate(...args),
 }
-$('refresh').addEventListener('click',tick)
+
+// ── Boot ────────────────────────────────────────────────────────────────────
+$('refresh')?.addEventListener('click',tick)
 tick()
 setInterval(() => { if (!document.hidden) tick() },2000)
 document.addEventListener('visibilitychange', () => { if (!document.hidden) tick() })
@@ -379,11 +625,6 @@ document.addEventListener('visibilitychange', () => { if (!document.hidden) tick
 // inspector, and a resizable console. Both are remembered per browser; a storage
 // failure (private window, blocked site data) only costs the remembered size.
 const LAYOUT = { split: 'fleet:split', height: 'fleet:conv-height' }
-const store = {
-  get(key) { try { return localStorage.getItem(key) } catch { return null } },
-  set(key, value) { try { localStorage.setItem(key, value) } catch {} },
-  clear(key) { try { localStorage.removeItem(key) } catch {} },
-}
 const SPLIT_DEFAULT = 58, LIST_MIN = 300, DETAIL_MIN = 380
 
 function applySplit(percent, { save = true } = {}) {
@@ -462,7 +703,6 @@ function watchConversation(element) {
   conversationObserver.disconnect()
   conversationObserver.observe(element)
 }
-window.FleetLayout = { watchConversation }
 initSplitter()
 
 // The session details sit behind a disclosure: with a console on screen the terminal
@@ -482,4 +722,4 @@ $('details-toggle')?.addEventListener('click', () => {
   store.set(DETAILS_KEY, open ? '1' : '0')
   syncDetails()
 })
-window.FleetLayout.syncDetails = syncDetails
+})()