@sergeychuvayev/claude-fleet 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sergeychuvayev/claude-fleet",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "A local control room for Claude Code sessions",
   "keywords": [
     "claude",

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
@@ -177,6 +235,61 @@ function renderStatusbar(usage, sessions) {
     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
@@ -200,13 +313,11 @@ function render() {
   if (!shown.some(s => key(s) === selected)) selected = shown[0] ? key(shown[0]) : null
   $('shown-count').textContent = shown.length
   renderStatusbar(snapshot.usage, live)
-  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(''))
+  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,
@@ -224,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()
 }
@@ -380,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'})
@@ -405,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}`)
@@ -422,31 +568,63 @@ 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() })
 
 // Layout the operator controls: a draggable split between the session list and the
-// inspector, and a resizable console. Both are remembered per browser; a storage
+// inspector, and resizable session sections. Sizes 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 LAYOUT = { split: 'fleet:split' }
 const SPLIT_DEFAULT = 58, LIST_MIN = 300, DETAIL_MIN = 380
 
 function applySplit(percent, { save = true } = {}) {
@@ -512,20 +690,107 @@ function initSplitter() {
   })
 }
 
-// The console is rebuilt whenever a different agent is selected, so its height is
-// restored on each build and written back when the native resize grip is released.
-let conversationObserver = null
+// Vertical sections share the same interaction as the session-list divider.
+// Observe the container so saved sizes yield when the viewport or controls change.
+let panelLayoutCleanup = () => {}
 function watchConversation(element) {
+  panelLayoutCleanup()
   if (!element) return
-  const saved = store.get(LAYOUT.height)
-  if (saved) element.style.height = saved
-  conversationObserver ||= new ResizeObserver(entries => {
-    for (const entry of entries) if (entry.target.style.height) store.set(LAYOUT.height, entry.target.style.height)
-  })
-  conversationObserver.disconnect()
-  conversationObserver.observe(element)
+  const container = element.parentElement
+  const disposers = []
+  const addPanel = (panel, { key, label, min, initial, before = false }) => {
+    const divider = document.createElement('div')
+    divider.className = 'panel-splitter'
+    divider.tabIndex = 0
+    divider.setAttribute('role', 'separator')
+    divider.setAttribute('aria-orientation', 'horizontal')
+    divider.setAttribute('aria-label', label)
+    divider.setAttribute('aria-controls', panel.id)
+    divider.title = 'Drag to resize · arrow keys to adjust · double-click to reset'
+    before ? panel.before(divider) : panel.after(divider)
+    const saved = Number(store.get(key))
+    let preferred = Number.isFinite(saved) && saved >= min ? saved : initial
+    let drag = null
+    const height = () => panel.getBoundingClientRect().height
+    const maximum = () => Math.max(min, Math.min(container.clientHeight * .45,
+      height() + element.clientHeight - 120))
+    const apply = () => {
+      const mobile = matchMedia('(max-width:720px)').matches
+      const collapsed = panel.tagName === 'DETAILS' && !panel.open
+      divider.hidden = mobile || collapsed
+      if (mobile || collapsed) { panel.style.removeProperty('height'); return }
+      const max = Math.floor(maximum())
+      const value = Math.round(Math.max(min, Math.min(preferred, max)))
+      panel.style.height = `${value}px`
+      divider.setAttribute('aria-valuemin', String(min))
+      divider.setAttribute('aria-valuemax', String(max))
+      divider.setAttribute('aria-valuenow', String(value))
+      divider.setAttribute('aria-valuetext', `${value} pixels`)
+    }
+    const set = value => {
+      preferred = Math.max(min, Math.min(value, maximum()))
+      store.set(key, String(Math.round(preferred)))
+      apply()
+    }
+    const reset = () => { preferred = initial; store.clear(key); apply() }
+    const stop = () => {
+      if (!drag) return
+      const id = drag.id
+      drag = null
+      divider.removeAttribute('data-dragging')
+      document.body.removeAttribute('data-panel-resizing')
+      if (divider.hasPointerCapture?.(id)) divider.releasePointerCapture(id)
+    }
+    divider.addEventListener('pointerdown', event => {
+      if (event.button) return
+      event.preventDefault()
+      divider.focus({ preventScroll: true })
+      drag = { y: event.clientY, height: height(), id: event.pointerId }
+      divider.setPointerCapture(event.pointerId)
+      divider.setAttribute('data-dragging', '')
+      document.body.setAttribute('data-panel-resizing', '')
+    })
+    divider.addEventListener('pointermove', event => {
+      if (drag && event.pointerId === drag.id) set(drag.height + (event.clientY - drag.y) * (before ? -1 : 1))
+    })
+    for (const event of ['pointerup', 'pointercancel', 'lostpointercapture']) divider.addEventListener(event, stop)
+    divider.addEventListener('dblclick', reset)
+    divider.addEventListener('keydown', event => {
+      const delta = { ArrowUp: -10, ArrowDown: 10 }[event.key]
+      if (delta !== undefined) { event.preventDefault(); set(height() + delta * (before ? -1 : 1)) }
+      else if (['Home', 'End', 'Enter', ' '].includes(event.key)) {
+        event.preventDefault()
+        if (event.key === 'Home') set(min)
+        else if (event.key === 'End') set(maximum())
+        else reset()
+      }
+    })
+    panel.addEventListener('toggle', apply)
+    const observer = new ResizeObserver(apply)
+    observer.observe(container)
+    addEventListener('resize', apply)
+    const dispose = () => { stop(); observer.disconnect(); removeEventListener('resize', apply); panel.removeEventListener('toggle', apply); divider.remove() }
+    disposers.push(dispose)
+    apply()
+    return dispose
+  }
+  const composer = $('composer')
+  if (composer) addPanel(composer, { key: 'fleet:composer-height', label: 'Resize message composer', min: 130, initial: 170, before: true })
+  let board = null, disposeBoard = null
+  const syncBoard = () => {
+    const next = $('initiative-board')
+    if (next === board) return
+    disposeBoard?.()
+    board = next
+    if (board) {
+      disposeBoard = addPanel(board, { key: 'fleet:overview-height', label: 'Resize team overview', min: 90, initial: 220 })
+    }
+  }
+  const mutation = new MutationObserver(syncBoard)
+  mutation.observe(container, { childList: true })
+  syncBoard()
+  panelLayoutCleanup = () => { mutation.disconnect(); disposers.forEach(dispose => dispose()) }
 }
-window.FleetLayout = { watchConversation }
 initSplitter()
 
 // The session details sit behind a disclosure: with a console on screen the terminal
@@ -545,4 +810,4 @@ $('details-toggle')?.addEventListener('click', () => {
   store.set(DETAILS_KEY, open ? '1' : '0')
   syncDetails()
 })
-window.FleetLayout.syncDetails = syncDetails
+})()

package/public/ask.js

@@ -1,24 +1,36 @@
 'use strict'
+// An isolated scope, matching teams.js and blocks.js.
+;(() => {
+const { $, esc, key, age, update, status, render, toast, modalIsOpen, openModal, closeModal } = window.Fleet
+const api = (...args) => window.FleetControl.api(...args)
 // Ask panel: one question, searched across every transcript on this machine.
 // Keyword matches render the moment the server has them; the written answer
 // arrives a few seconds later and reorders the cards by what Claude found relevant.
 let askJob = null, askPoll = null, askRequest = 0
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform)
-$('ask-shortcut').textContent = isMac ? '⌘K' : 'Ctrl K'
 
 const openAsk = () => { renderAsk(); openModal('ask-backdrop', '#ask-input') }
-$('ask-welcome').addEventListener('click', event => {
+
+// ── What the rest of the page may use ───────────────────────────────────────
+// Published before the boot wiring below, as app.js and control.js do. Nothing
+// consumes this yet; it exists so opening the panel is a call rather than a
+// synthesised click, and so this file leaks one name like every other.
+window.FleetAsk = { openAsk }
+
+// ── Boot ────────────────────────────────────────────────────────────────────
+if ($('ask-shortcut')) $('ask-shortcut').textContent = isMac ? '⌘K' : 'Ctrl K'
+$('ask-welcome')?.addEventListener('click', event => {
   const suggestion = event.target.closest('[data-question]')
   if (!suggestion) return
   $('ask-input').value = suggestion.dataset.question
   $('ask-input').focus()
 })
-$('ask-sessions').addEventListener('click', () => modalIsOpen('ask-backdrop') ? closeModal() : openAsk())
+$('ask-sessions')?.addEventListener('click', () => modalIsOpen('ask-backdrop') ? closeModal() : openAsk())
 document.addEventListener('keydown', event => {
   if ((event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'k') { event.preventDefault(); openAsk() }
 })
 
-$('ask-form').addEventListener('submit', async event => {
+$('ask-form')?.addEventListener('submit', async event => {
   event.preventDefault()
   const question = $('ask-input').value.trim()
   if (!question) return
@@ -55,7 +67,9 @@ async function pollAsk() {
 
 const REL_WORD = { high: 'strong match', medium: 'related', low: 'loosely related' }
 const dateOf = ms => ms ? new Date(ms).toLocaleDateString([], { month: 'short', day: 'numeric' }) : ''
-const liveSession = id => snapshot?.sessions.find(s => s.sessionId === id) || null
+// Read through the accessor, never a captured binding: the poll replaces the
+// snapshot object every couple of seconds.
+const liveSession = id => window.Fleet.snapshot()?.sessions.find(s => s.sessionId === id) || null
 
 function hitCard(hit, match) {
   const live = liveSession(hit.sessionId)
@@ -97,7 +111,7 @@ function renderAsk() {
   update('ask-results', `<div class="ask-head"><span class="ask-question">“${esc(job.question)}”</span>${stats}</div>${status}${answer}${cards}`)
 }
 
-$('ask-results').addEventListener('click', async event => {
+$('ask-results')?.addEventListener('click', async event => {
   const button = event.target.closest('button')
   if (!button) return
   if (button.dataset.openSession) {
@@ -117,3 +131,5 @@ $('ask-results').addEventListener('click', async event => {
 // Live sessions may appear or vanish while the results are on screen; refresh the
 // "open now" state and the Open button from the latest snapshot.
 document.addEventListener('fleet-snapshot', () => { if (askJob && modalIsOpen('ask-backdrop')) renderAsk() })
+
+})()

package/public/blocks.js

@@ -1,4 +1,6 @@
 'use strict'
+// An isolated scope, matching teams.js. This file borrows nothing from the others.
+window.FleetBlocks = (() => {
 // Warp-style conversation blocks. Every message, tool call and result is its own
 // block with a sticky header, a copy action and collapse. Rendering is incremental:
 // a block is only rebuilt when its content signature changes, so a streaming turn
@@ -190,4 +192,5 @@ function renderBlocks(container, messages, { streamingId = null, onCopy = () =>
   for (const element of [...container.children]) if (!seen.has(element.dataset?.block)) element.remove()
 }
 
-window.FleetBlocks = { renderBlocks, proseHtml, codeHtml, highlight }
+return { renderBlocks, proseHtml, codeHtml, highlight }
+})()

package/public/control.js

@@ -1,4 +1,9 @@
 'use strict'
+// An isolated scope, matching teams.js and blocks.js. What this file borrows from
+// app.js is destructured once, here, instead of being picked out of a global scope
+// the two files happened to share.
+;(() => {
+const { $, esc, update, toast, modalIsOpen, openModal, closeModal } = window.Fleet
 let controlToken=null, controlSession=null, controlId=null, controlFetch=null, controlVersion=0
 const drafts=new Map()
 const inFlight=new Set()
@@ -60,7 +65,23 @@ function openLaunch(source=null) {
   $('launch-cwd').readOnly=!!source
   openModal('launch-backdrop', '[name=prompt]')
 }
-$('new-session').addEventListener('click',()=>modalIsOpen('launch-backdrop') ? closeModal() : openLaunch())
+// ── What the rest of the page may use ───────────────────────────────────────
+// Published before the boot wiring below, for the same reason app.js does it there:
+// teams.js destructures this at load, and an element missing from the wiring must
+// not cost it the whole namespace. The two values teams.js has to change are handed
+// out as setters rather than as variables it reaches in and assigns.
+window.FleetControl = {
+  selectControl, isWorking, updateLaunchTeam, renderUpdate,
+  // teams.js posts to the same endpoints through the same helper, and app.js and
+  // ask.js borrow it back: this file owns the token every write is signed with.
+  api,
+  launchTeams: () => launchTeams,
+  setLaunchTeams(teams) { launchTeams = teams },
+  setLaunchRequestId(id) { launchRequestId = id },
+}
+
+// ── Boot ────────────────────────────────────────────────────────────────────
+$('new-session')?.addEventListener('click',()=>modalIsOpen('launch-backdrop') ? closeModal() : openLaunch())
 document.addEventListener('keydown', event => {
   if ((event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'n') {
     event.preventDefault()
@@ -68,8 +89,8 @@ document.addEventListener('keydown', event => {
     else openLaunch()
   }
 })
-$('launch-form').addEventListener('input',()=>{launchRequestId=null})
-$('launch-form').addEventListener('submit',async event=>{
+$('launch-form')?.addEventListener('input',()=>{launchRequestId=null})
+$('launch-form')?.addEventListener('submit',async event=>{
   event.preventDefault()
   if(window.FleetTeams?.isEditing()){window.FleetTeams.save();return}
   const button=$('launch-submit'); if(button.disabled)return
@@ -91,12 +112,13 @@ function selectControl(session) {
   const next=session?.managedId || null
   if(next===controlId && next) return
   controlId=next;controlSession=null;controlVersion++
+  window.Fleet.watchConversation(null)
   $('control-panel').innerHTML=''
   if(next){
     $('control-panel').innerHTML=`<div class="conversation-header"><h3 id="conversation-title">Conversation</h3><button type="button" id="close-agent" class="button close-agent" title="Remove this conversation from Fleet">Close</button><label class="mode-picker"><span class="sr-only">Model for this agent</span><select id="model-choice" title="Applies from your next message"></select></label><label class="mode-picker"><span class="sr-only">Approvals for this agent</span><select id="approval-mode"><option value="auto">Auto approvals</option><option value="ask">Ask every time</option><option value="all">Approve everything</option></select></label><span id="agent-context" class="subtle context-chip"></span><span id="agent-state" class="subtle">Connecting…</span></div><div id="conversation" class="conversation" role="log" aria-label="Agent conversation" aria-live="off"><p class="note">Loading conversation…</p></div><div id="agent-error" class="form-error" role="status" hidden></div><div id="approvals"></div><form id="composer" class="composer"><label class="sr-only" for="message-input">Message this agent</label><ul id="slash-picker" class="slash-picker" role="listbox" aria-label="Commands and skills" hidden></ul><div id="attach-tray" class="attach-tray" hidden></div><textarea id="message-input" rows="3" maxlength="16000" placeholder="What should this agent do next?  ·  press / for commands  ·  paste an image" role="combobox" aria-expanded="false" aria-controls="slash-picker" aria-autocomplete="list"></textarea><div class="composer-footer"><span id="composer-hint" class="note">Enter to send · Shift + Enter for a new line</span><button id="stop-agent" type="button" class="button stop" hidden>■ Stop</button><button id="send-message" class="button resume" type="submit">Send ↗</button></div><p id="send-error" class="form-error" role="alert" hidden></p></form>`
-    window.FleetLayout?.watchConversation($('conversation'))
+    window.Fleet.watchConversation($('conversation'))
     catalog=[];catalogFor=null;closePicker();renderTray()
-    window.FleetLayout?.syncDetails?.()
+    window.Fleet.syncDetails()
     $('message-input').value=drafts.get(next)?.text || ''
     $('message-input').addEventListener('input',()=>drafts.set(next,{text:$('message-input').value,requestId:crypto.randomUUID()}))
     $('message-input').addEventListener('keydown',event=>{
@@ -129,7 +151,7 @@ function selectControl(session) {
   }else if(session){
     $('control-panel').innerHTML=`<div class="external-note"><strong>Opened outside Fleet</strong><p>${session.alive ? 'This session is running in a terminal. Use its terminal to send messages, or launch a new Fleet-managed agent.' : 'This process has stopped. Continue its saved conversation here with a new message.'}</p>${!session.alive && session.sessionId && session.cwd ? '<button id="resume-in-fleet" class="button">Continue in Fleet ↗</button>' : ''}</div>`
     $('resume-in-fleet')?.addEventListener('click',()=>openLaunch(session))
-    window.FleetLayout?.syncDetails?.()
+    window.Fleet.syncDetails()
   }
 }
 async function refreshControl() {
@@ -439,7 +461,7 @@ async function waitForRestart(deadline = Date.now() + 60000) {
   renderUpdate()
   toast('Fleet installed the update but did not come back. Start it again.')
 }
-$('update-pill').addEventListener('click', async () => {
+$('update-pill')?.addEventListener('click', async () => {
   if (fleetUpdateBusy || !fleetUpdate || !fleetUpdate.canInstall) return
   fleetUpdateBusy = true
   renderUpdate()
@@ -463,3 +485,4 @@ pollUpdate()
 // time to answer, then settle into a slow poll for long-lived windows.
 setTimeout(pollUpdate, 9000)
 setInterval(pollUpdate, 60 * 60 * 1000)
+})()