@sergeychuvayev/claude-fleet 0.11.0 → 0.12.0

package/README.md

@@ -6,12 +6,13 @@
 
 **A local control room for Claude Code.**
 
-See every session running on your machine, launch agents you can talk to,
-and ask one question across everything you have ever worked on.
+See every session running on your machine, launch agents you can talk to, hand a
+bigger job to a manager-led team whose work an independent verifier checks before
+it ships, and ask one question across everything you have ever worked on.
 
 <img src="https://img.shields.io/badge/node-%E2%89%A522-2aa889?style=flat-square&labelColor=0c1014" alt="Node 22+">
 <img src="https://img.shields.io/badge/binds-127.0.0.1-2aa889?style=flat-square&labelColor=0c1014" alt="Binds to localhost">
-<img src="https://img.shields.io/badge/deps-4%20runtime-2aa889?style=flat-square&labelColor=0c1014" alt="Four runtime dependencies">
+<img src="https://img.shields.io/badge/deps-5%20runtime-2aa889?style=flat-square&labelColor=0c1014" alt="Five runtime dependencies">
 <img src="https://img.shields.io/badge/license-MIT-2aa889?style=flat-square&labelColor=0c1014" alt="MIT license">
 
 <br>
@@ -205,6 +206,19 @@ from `marked`, `DOMPurify` and `highlight.js`, bundled into `public/vendor/libs.
 and served by Fleet itself. There is no CDN, and the page's content security policy
 still allows scripts only from Fleet.
 
+### Panels resize to fit the work
+
+The session list and inspector share a horizontal split; drag it, or focus it and use the
+arrow keys. Inside the inspector, the team overview and the composer are flat sections set
+off by a rule rather than the rounded cards earlier versions used, and each carries its own
+divider so the conversation between them can give up height to whichever one needs it.
+
+Drag a divider, resize it from the keyboard with the arrow keys, jump to an extreme with
+Home/End, or double-click to reset it. Sizes persist per browser and are clamped so neither
+the conversation nor the panel being resized can be squeezed out of use. Under 720px width,
+or while a panel is collapsed, its divider disappears and the layout falls back to normal
+document flow.
+
 ### Reference another agent
 
 In a Fleet-managed agent’s message composer, type **@** and search by session name,
@@ -266,24 +280,39 @@ conversation on every question.
 ### An initiative is a team behind one conversation
 
 Some work is too big for one agent and too small to project-manage by hand. Launch it with a
-**team** instead of alone and you get an *initiative*: a manager that plans and delegates, a
-developer that implements, and a QA that independently verifies, all behind a single
-conversation.
+**team** instead of alone and you get an *initiative*: a manager that plans and delegates,
+one or more roles that implement, and a required verifier that checks the work
+independently, all behind a single conversation.
 
 You talk to the manager and only to the manager. That is not a rule in a prompt: the manager
 holds the main thread, and the rest of the team is reachable only through the Agent tool, so
 they have no channel to you at all. Their work arrives as delegation blocks in the
 conversation, each showing the role, the mandate it was given, and the report it sent back.
 
-The manager has no edit tools. Its only way to ship is to delegate, which is the entire point
-of having a team rather than an agent with a long prompt. QA has no edit tools either: it
-reproduces the problem, runs the project's own gates, and returns PASS or FAIL with evidence,
-so a developer's account of its own work is never the last word.
+The manager has no shell or edit tools. Its only way to ship is to delegate and to track the
+work through Fleet's task tool, which is the entire point of having a team rather than an
+agent with a long prompt. A verifier has no direct edit tools either: it reproduces the
+problem, runs the project's own gates, and returns PASS or FAIL with evidence, so a
+developer's account of its own work is never the last word, and the manager cannot mark a
+task verified itself. Bash, where a verifier's role enables it for running tests, stays a
+general-purpose shell governed by the initiative's approval mode, not a read-only sandbox. A
+failed review sends work back for repair and invalidates the previous attempt's reviews.
+
+In **New agent**, **Software delivery** gives a brief to a Manager backed by Product,
+Developer, Reviewer and QA roles: three implementation attempts per task and $10 in reported
+SDK usage before it stops for you, adjustable while the initiative is idle. **Quick task**
+trims that to a Sonnet manager, one developer and one independent verifier, for small, clearly
+scoped changes, with two attempts and a $3 cap. **No team · single agent** skips orchestration
+for a one-line fix. **Customize team…** saves your own roster: rename, add or remove roles,
+write their instructions, pick a model and allowed tools per role, up to eight roles with at
+least one manager and one verifier. Each initiative snapshots its team at launch, so editing a
+template only affects the initiatives you start after that.
 
 An initiative works in a git worktree of its own, branched from wherever the project is
 checked out, so a team editing files cannot collide with your own editing or with another
-initiative. It finishes by opening a pull request. Pushing stops for your approval like any
-other publishing command, so nothing leaves the machine without you.
+initiative. It finishes at a local branch, with the manager expected to open a pull request
+as its last delegated action. Doing that requires a push, and a push stops for your approval
+like any other publishing command, so nothing leaves the machine without that click.
 
 Closing an initiative forgets Fleet's record of the conversation and leaves the worktree and
 its branch alone. Deleting code is never the same click as tidying a list.
@@ -291,6 +320,40 @@ its branch alone. Deleting code is never the same click as tidying a list.
 Teams cost roughly an order of magnitude more tokens than a single agent, and only earn it
 when the work genuinely splits. For a one-line fix, launch an agent.
 
+<details>
+<summary><b>The task board, and what "verified" actually means</b></summary>
+
+The manager creates tasks with owners, acceptance criteria and dependencies through Fleet's
+task tool, up to 100 per initiative. The initiative inspector shows the roster, task states,
+assignments and returned reports. Reads from the board return compact metadata, so checking
+task state repeatedly does not re-inject every assignment, tool output and report into the
+manager's context; the manager can pull one delegation's full record with the task tool's
+`inspect` action.
+
+Delegations run sequentially in the shared worktree. After an interruption, the saved board
+survives and unfinished delegations are marked interrupted, so messaging the manager resumes
+where it left off. "Verified" records the configured verifier's PASS/FAIL for that attempt,
+not a guarantee that the evaluation was correct or that later work cannot regress it. The SDK
+budget is an execution cutoff, not a billing guarantee: usage is reported at turn end, and a
+killed runtime may not report its final spend, and each turn also has a 100-turn SDK limit
+with bounded continuation reminders. Custom teams live in `teams.json` under Fleet's state
+directory; task history and team snapshots live with the initiative in `sessions.json`.
+
+</details>
+
+### Inspect individual agents
+
+Select a subagent row beneath a managed initiative to see its assignment, actual model,
+status, elapsed time, attempt, tool steps, and report. Expand **Input and output** for a
+tool's recorded payload. The inspector is read-only; direction and approvals still go through
+the manager. Tool history keeps the most recent 200 steps with bounded inputs and outputs, and
+older runs may have no recorded steps or usage.
+
+Reported input/output and cache tokens are shown when available, falling back to SDK progress
+totals otherwise; repeated assistant events do not count usage twice, and per-agent cost
+appears only when the SDK explicitly reports it rather than being shown as zero. Token totals
+describe recorded usage across messages, not current context size.
+
 ### Approvals that stay out of the way
 
 Every agent runs in one of three modes, chosen at launch and changeable from the
@@ -399,7 +462,7 @@ no API credentials are involved.
 ## How it is built
 
 Vanilla HTML, CSS and JavaScript over a Node HTTP server, with the official Claude
-Agent SDK for managed runs. Four runtime dependencies, no framework, no build step
+Agent SDK for managed runs. Five runtime dependencies, no framework, no build step
 for the app itself.
 
 | File | Responsibility |
@@ -408,18 +471,23 @@ for the app itself.
 | [`fleet.js`](fleet.js) | Cached, read-only collection of external Claude sessions |
 | [`archive.js`](archive.js) | Which sessions are put away, the age rule, and its store |
 | [`managed.js`](managed.js) | SDK runs, approvals, tool blocks, persistence, cancellation |
+| [`references.js`](references.js) | Resolves `@`-mentioned sessions and snapshots what a reference shares |
 | [`teams.js`](teams.js) | The roles an initiative runs, and how they compile into SDK options |
+| [`team-store.js`](team-store.js) | Custom team definitions, saved and edited outside the built-in presets |
+| [`tasks.js`](tasks.js) | The task board: tasks, delegations, and the initiative's verification ledger |
 | [`worktree.js`](worktree.js) | The git worktree an initiative works in, and its branch |
+| [`usage.js`](usage.js) | The account's plan-usage windows behind the status bar |
 | [`search.js`](search.js) | Transcript index, BM25 ranking, and the answering turn |
 | [`permissions.js`](permissions.js) | The three approval modes and the command list that still stops |
 | [`theme.js`](theme.js) | Reads the local Warp palette and renders it as CSS variables |
 | [`catalog.js`](catalog.js) | Read-only listing of a project's slash commands and skills |
-| `public/app.js` | Dashboard layout, session list, filters, monitoring |
+| `public/app.js` | Dashboard layout, session list, filters, monitoring, resizable panels |
 | `public/blocks.js` | Incremental block rendering, Markdown, highlighting |
 | `public/control.js` | Launch form, composer, approvals, streamed updates |
 | `public/ask.js` | The Ask panel, its polling, and the result cards |
 | [`paths.js`](paths.js) | Where Fleet's own state lives, and carrying over an old checkout's |
 | [`update.js`](update.js) | The npm version check, its cache, and the self-install |
+| [`open.js`](open.js) | Opens the dashboard as a Chromium app window, falling back across browsers |
 | [`bin/claude-fleet.js`](bin/claude-fleet.js) | The installed command: start, install-app, update |
 | `build/` | Vendored browser bundle, icon drawing, macOS launcher |
 
@@ -476,62 +544,3 @@ MIT. See [LICENSE](LICENSE).
 <div align="center">
 <sub>Screenshots use synthetic sessions generated for the purpose. Fleet is not affiliated with Anthropic.</sub>
 </div>
-
-### Configurable teams and durable tasks
-
-In **New agent**, choose **Software delivery** to give a brief to a Manager backed by
-Product, Developer, Reviewer and QA roles. Choose **Customize team…** to save your own
-team: rename/add/remove roles, write their instructions, select a Claude model per role,
-and choose allowed tools. Built-in teams are copied; existing custom teams can be edited.
-Choose **Quick task** for small, clearly scoped changes: a Sonnet manager, one developer,
-and one independent QA verifier, with two implementation attempts and a $3 usage cap.
-**Software delivery** keeps the thorough review-and-QA workflow. **No team · single agent**
-avoids orchestration entirely when you just need one agent. Existing initiatives keep
-their original team snapshot. The original Bug fix preset remains available.
-
-One role is the manager and at least one separate role is a required verifier. A third
-role owns the work. Fleet adds delegation and operator-question tools to the manager;
-workers report back to it. Manager roles cannot use the shell or edit tools. Verifiers
-cannot use direct edit tools; Bash, when enabled for tests, remains a general-purpose
-shell governed by the initiative's approval mode, not a read-only sandbox.
-
-Each initiative snapshots its team and works in its own Git worktree. Template edits
-apply to new initiatives. The Manager creates tasks with owners, acceptance criteria and
-dependencies through Fleet's task tool. The initiative inspector shows the roster,
-task states, assignments and returned reports. Verification comes from actual subagent
-reports, including each required verifier's PASS/FAIL; the Manager cannot mark a task
-verified itself. A failed review returns work for repair and invalidates the previous
-attempt's reviews. “Verified” records the configured agents' verdicts for that attempt,
-not a guarantee that their evaluation is correct or that later work cannot regress it.
-
-Delegations run sequentially in the shared initiative worktree. After an interruption,
-the saved task board survives and unfinished delegations are marked interrupted. Message
-the Manager to resume. Software delivery starts with three implementation attempts per task and
-$10 in reported SDK usage; **Adjust limits** changes them explicitly while idle. The SDK
-budget is an execution cutoff, not a billing guarantee: usage is reported at turn end,
-and a killed runtime may not report its final spend. Each turn also has a 100-turn SDK
-limit and bounded continuation reminders.
-
-Custom teams live in `teams.json` under Fleet's state directory; task history and team
-snapshots live with the initiative in `sessions.json`. This version supports models
-available through the Claude Agent SDK, up to eight roles per team, and 100 tasks per
-initiative. It finishes at a local branch ready for review; it does not automatically
-publish or merge changes.
-
-### Inspect individual agents
-
-Select a subagent row beneath a managed initiative to inspect its assignment, actual
-model, status, elapsed time, attempt, tool steps, and report. Expand **Input and output**
-to see a tool's recorded payload. The inspector is read-only; send direction and answer
-approvals through the manager. Tool history keeps the most recent 200 steps with bounded
-inputs and outputs. Older runs may have no recorded steps or usage.
-
-The inspector shows reported input/output and cache tokens, or SDK progress totals when
-only those are available. Repeated assistant events do not count usage twice. Per-agent
-cost appears only when the SDK explicitly reports it; missing data is not shown as zero.
-Token totals describe recorded usage across messages, not current context size.
-
-Task-board reads return compact metadata, so repeatedly checking task state does not
-re-inject all assignments, tool output and reports into the manager's context. The manager
-can request a specific delegation's full assignment/report using the task tool's
-`inspect` action with `delegationId`. Verification gates and saved evidence are unchanged.

package/package.json

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

package/public/app.js

@@ -14,6 +14,8 @@ const $ = id => document.getElementById(id)
 const api = (...args) => window.FleetControl.api(...args)
 const STATES = ['busy', 'idle', 'stale', 'dead']
 const LABELS = { busy: 'Working', idle: 'Waiting', stale: 'Stale', dead: 'Offline' }
+const DATE_FILTERS = ['today', 'week']
+const DATE_LABELS = { all: 'All time', today: 'Today', week: 'This week' }
 const esc = value => String(value ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]))
 const key = s => s.managedId || s.sessionId || `session:${s.pid}`
 const percent = s => s.contextTokens == null ? null : Math.min(100, Math.max(0, s.contextTokens / s.contextLimit * 100))
@@ -24,6 +26,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`
 }
+// "Today" resets at local midnight; "This week" is a rolling 7 days, so it never
+// jumps forward mid-session the way a calendar-week reset would.
+const startOfToday = () => { const d = new Date(); d.setHours(0, 0, 0, 0); return d.getTime() }
+const matchesDate = (s, when) => {
+  if (when === 'all') return true
+  if (!s.startedAt) return false
+  const started = new Date(s.startedAt).getTime()
+  return when === 'today' ? started >= startOfToday() : started >= Date.now() - 7 * 86400000
+}
 // 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
@@ -33,7 +44,7 @@ const store = {
   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
+let snapshot = null, filter = 'all', dateFilter = 'all', filterMenuOpen = false, 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.
 let selectedChild = null, childDetail = null, childDetailFor = null, childDetailError = null, childRequest = 0, lastChildId = null
@@ -279,12 +290,18 @@ function sessionRowHtml(s, spawnCounts) {
   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' : ''}" draggable="true" 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) => [
+// The trigger names whichever combination is active instead of repeating every
+// count Sessions' own header badge already shows.
+const filterTriggerLabel = () => {
+  const base = filter === 'all' ? 'All sessions' : filter === 'background' ? 'Background' : filter === 'archived' ? 'Archived' : LABELS[filter]
+  return dateFilter === 'all' ? base : `${base} · ${DATE_LABELS[dateFilter]}`
+}
+const filterMenuHtml = (counts, foreground, background, archived, dateCounts) => `<button type="button" class="filter-trigger" id="filter-trigger" aria-haspopup="menu" aria-expanded="${filterMenuOpen}" aria-controls="filter-panel">${esc(filterTriggerLabel())}<span class="filter-chevron" aria-hidden="true">⌄</span></button><div class="filter-panel" id="filter-panel" role="menu" aria-label="Filter sessions"${filterMenuOpen ? '' : ' hidden'}><div class="filter-group" role="group" aria-label="Status">${[
   ['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('')
+].map(([s, label, n]) => `<button type="button" class="filter" data-filter="${s}" aria-pressed="${filter === s}">${label}<span>${n}</span></button>`).join('')}</div><div class="filter-group"><span class="filter-group-heading">Created</span>${['all', ...DATE_FILTERS].map(k => `<button type="button" class="filter" data-date-filter="${k}" aria-pressed="${dateFilter === k}">${DATE_LABELS[k]}<span>${dateCounts[k]}</span></button>`).join('')}</div></div>`
 const emptyListHtml = total =>
   filter === 'background' ? 'No background sessions right now.'
   : total ? 'No sessions match your filters.<br>Try another search or select All sessions.'
@@ -309,11 +326,14 @@ function render() {
   const pool = filter === 'archived' ? archived : filter === 'background' ? background : foreground
   // Ordering comes from the server (approval, then busy, then most recent) and
   // finding a specific session is what the Ask modal is for.
-  const shown = pool.filter(s => filter === 'all' || filter === 'background' || filter === 'archived' || s.state === filter)
+  const shown = pool.filter(s => (filter === 'all' || filter === 'background' || filter === 'archived' || s.state === filter) && matchesDate(s, dateFilter))
   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', filterBarHtml(visibleCounts, foreground.length, background.length, archived.length))
+  // Date counts sit against the foreground pool, same base the status counts use,
+  // so switching status tabs never makes these numbers jump for an unrelated reason.
+  const dateCounts = { all: foreground.length, today: foreground.filter(s => matchesDate(s, 'today')).length, week: foreground.filter(s => matchesDate(s, 'week')).length }
+  update('filters', filterMenuHtml(visibleCounts, foreground.length, background.length, archived.length, dateCounts))
   renderArchiveBar(live.filter(s => s.state === 'dead'), archived.length)
   update('session-list', shown.length
     ? shown.map(s => sessionRowHtml(s, spawnCounts)).join('')
@@ -502,10 +522,21 @@ function toast(message) {
   clearTimeout(toastTimer)
   toastTimer = setTimeout(() => { box.hidden = true }, 3000)
 }
+// Click-outside is the one thing a plain button pair can't give a popover for
+// free, so it gets its own listener rather than folding into the delegated one
+// below, which only ever looks at clicks that landed on a button.
+document.addEventListener('click', event => {
+  if (filterMenuOpen && !event.target.closest('.filter-menu')) { filterMenuOpen = false; render() }
+})
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && filterMenuOpen) { filterMenuOpen = false; render(); $('filter-trigger')?.focus() }
+})
 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.id === 'filter-trigger') { filterMenuOpen = !filterMenuOpen; return render() }
+  if (b.dataset.filter) { filter = b.dataset.filter; filterMenuOpen = false; render() }
+  if (b.dataset.dateFilter) { dateFilter = b.dataset.dateFilter; filterMenuOpen = false; render() }
   if (b.dataset.foldSession) {
     const k = b.dataset.foldSession, collapsed = !collapsedChildren.has(k)
     setChildrenCollapsed(k, collapsed)

package/public/control.js

@@ -116,7 +116,7 @@ function selectControl(session) {
   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="reference-tray" class="reference-tray" aria-label="Referenced sessions" hidden></div><div id="attach-tray" class="attach-tray" hidden></div><textarea id="message-input" rows="3" maxlength="16000" placeholder="What should this agent do next?  ·  @ to reference an agent · / 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>`
+    $('control-panel').innerHTML=`<div class="conversation-header"><div class="header-title"><h3 id="conversation-title">Conversation</h3><span id="agent-context" class="subtle context-chip"></span><span id="agent-state" class="subtle">Connecting…</span></div><div class="header-controls"><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><button type="button" id="close-agent" class="button close-agent" title="Remove this conversation from Fleet">Close</button></div></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="reference-tray" class="reference-tray" aria-label="Referenced sessions" hidden></div><div id="attach-tray" class="attach-tray" hidden></div><textarea id="message-input" rows="3" maxlength="16000" placeholder="What should this agent do next?  ·  @ to reference an agent · / 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.Fleet.watchConversation($('conversation'))
     catalog=[];catalogFor=null;closePicker();renderTray();renderReferences()
     window.Fleet.syncDetails()

package/public/index.html

@@ -3,7 +3,7 @@
 <body><header class="topbar"><a class="brand" href="/" aria-label="Fleet home"><span class="brandmark">✳</span> fleet <span class="brand-sub">/ CLAUDE CODE</span></a><span class="app-version" id="app-version" title="The version of Fleet this server is running"></span><div class="refresh-info"><button id="update-pill" class="button update-pill" hidden></button><button id="refresh" class="button">↻ Refresh</button><button id="ask-sessions" class="button" aria-expanded="false" aria-controls="ask-backdrop" title="Ask a question across every session on this machine">⌕ Ask <kbd id="ask-shortcut">⌘K</kbd></button><button id="new-session" class="button resume" aria-expanded="false" aria-controls="launch-backdrop">＋ New agent</button></div></header>
 <main>
 <div id="error" class="error" role="status" hidden></div>
-<section class="workspace" aria-label="Sessions"><div class="sessions-pane"><div class="section-heading"><h2>Sessions <span id="shown-count">0</span></h2></div><div class="filters" id="filters" aria-label="Filter sessions by status"></div><div class="archive-bar" id="archive-bar" role="group" aria-label="Archive" hidden></div><div class="list-head"><span>SESSION / PROJECT</span><span>CONTEXT</span></div><div id="session-list" class="session-list"><div class="empty">Loading your sessions…</div></div></div><div id="splitter" class="splitter" role="separator" aria-orientation="vertical" aria-label="Resize the session inspector" aria-valuemin="25" aria-valuemax="75" aria-valuenow="58" tabindex="0" title="Drag to resize · double-click to reset"></div><aside id="detail" class="detail" aria-label="Session details"><section id="control-panel" aria-label="Agent controls"></section><button type="button" id="details-toggle" class="details-toggle" aria-expanded="true" aria-controls="detail-content" hidden><span class="details-chevron" aria-hidden="true">›</span>Session details</button><div id="detail-content"></div></aside></section>
+<section class="workspace" aria-label="Sessions"><div class="sessions-pane"><div class="section-heading"><h2>Sessions <span id="shown-count">0</span></h2></div><div class="filter-menu" id="filters"></div><div class="archive-bar" id="archive-bar" role="group" aria-label="Archive" hidden></div><div class="list-head"><span>SESSION / PROJECT</span><span>CONTEXT</span></div><div id="session-list" class="session-list"><div class="empty">Loading your sessions…</div></div></div><div id="splitter" class="splitter" role="separator" aria-orientation="vertical" aria-label="Resize the session inspector" aria-valuemin="25" aria-valuemax="75" aria-valuenow="58" tabindex="0" title="Drag to resize · double-click to reset"></div><aside id="detail" class="detail" aria-label="Session details"><section id="control-panel" aria-label="Agent controls"></section><button type="button" id="details-toggle" class="details-toggle" aria-expanded="true" aria-controls="detail-content" hidden><span class="details-chevron" aria-hidden="true">›</span>Session details</button><div id="detail-content"></div></aside></section>
 </main>
 <footer class="statusbar" id="statusbar"><div class="status-usage" id="status-usage"></div><div class="status-fleet" id="status-fleet"></div><div class="status-conn"><span id="connection-dot" class="dot busy"></span><span id="connection">Connecting</span><span id="updated">Waiting for first snapshot</span><span class="local">LOCAL CONTROL ROOM</span></div></footer>
 <div class="modal-backdrop" id="ask-backdrop" hidden>

package/public/styles.css

@@ -415,7 +415,7 @@ select {
 @media(max-width:720px) {
   .refresh-info #updated { display:none }
   .section-heading { padding-inline:16px }
-  .filters { padding-inline:13px }
+  .filter-menu { padding-inline:13px }
   .brand { font-size:24px }
   .session-title { font-size:var(--text-md) }
   .connection { font-size:var(--text-xs) }
@@ -488,6 +488,19 @@ select {
   border-top:1px solid var(--line);
 }
 .conversation-header h3 { font-size:var(--text-lg); margin:0 }
+.header-title {
+  display:flex;
+  align-items:center;
+  gap:10px;
+  flex-wrap:wrap;
+  min-width:0;
+}
+.header-controls {
+  display:flex;
+  align-items:center;
+  gap:8px;
+  flex:none;
+}
 .composer { margin-top:20px }
 .composer textarea:focus { outline:1px solid var(--accent); outline-offset:0 }
 .composer-footer {
@@ -917,7 +930,7 @@ body[data-resizing] { cursor:col-resize; user-select:none }
   .splitter::after { transition:none }
 }
 /* Approval mode */
-.mode-picker { margin-left:auto; margin-right:10px }
+.mode-picker { margin:0 }
 .mode-picker select {
   font-family:var(--mono);
   font-size:var(--text-xs);
@@ -1043,13 +1056,66 @@ body {
 }
 .section-heading { padding:13px 18px 10px }
 .section-heading { flex:none }
-.filters {
-  display:flex;
-  gap:5px;
+.filter-menu {
+  position:relative;
   padding:10px 18px 9px;
-  flex-wrap:wrap;
   flex:none;
 }
+.filter-trigger {
+  display:inline-flex;
+  align-items:center;
+  gap:7px;
+  border:1px solid var(--line);
+  background:var(--raised);
+  color:var(--text);
+  border-radius:var(--radius-md);
+  padding:6px 10px;
+  font-size:var(--text-sm);
+}
+.filter-trigger:hover { background:color-mix(in oklab,var(--raised) 85%,var(--text)) }
+.filter-chevron {
+  color:var(--faint);
+  font-size:var(--text-xs);
+  transition:transform .12s ease;
+}
+.filter-trigger[aria-expanded="true"] .filter-chevron { transform:rotate(180deg) }
+@media(prefers-reduced-motion:reduce) {
+  .filter-chevron { transition:none }
+}
+.filter-panel {
+  position:absolute;
+  top:calc(100% + 6px);
+  left:18px;
+  z-index:5;
+  min-width:210px;
+  padding:8px;
+  display:flex;
+  flex-direction:column;
+  gap:2px;
+  background:var(--panel);
+  border:1px solid var(--line);
+  border-radius:var(--radius-md);
+  box-shadow:0 12px 34px #0009;
+}
+.filter-group + .filter-group {
+  margin-top:6px;
+  padding-top:6px;
+  border-top:1px solid var(--line);
+}
+.filter-group-heading {
+  display:block;
+  font-size:var(--text-2xs);
+  letter-spacing:.6px;
+  text-transform:uppercase;
+  color:var(--faint);
+  padding:4px 9px 2px;
+}
+.filter-panel .filter {
+  display:flex;
+  justify-content:space-between;
+  width:100%;
+  text-align:left;
+}
 .list-head {
   display:flex;
   justify-content:space-between;
@@ -1127,18 +1193,30 @@ body {
   }
 }
 .close-agent {
+  position:relative;
   padding:3px 8px;
   font-size:var(--text-xs);
   font-family:var(--mono);
-  margin-left:auto;
+  margin-left:14px;
   color:var(--muted);
 }
+/* A divider in the gap, not on the button's own border box, keeps Close visually
+   apart from the model/approval pickers without a doubled-up border look. */
+.close-agent::before {
+  content:"";
+  position:absolute;
+  left:-8px;
+  top:50%;
+  transform:translateY(-50%);
+  width:1px;
+  height:16px;
+  background:var(--line);
+}
 .close-agent:hover { color:var(--text) }
 .close-agent[data-armed="1"] {
   color:color-mix(in oklab,var(--term-red) 70%,var(--term-fg));
   border-color:color-mix(in oklab,var(--term-red) 50%,var(--line));
 }
-.close-agent+.mode-picker { margin-left:8px }
 /* Controls live in the header now; the row they used to occupy is gone. */
 .topbar {
   height:46px;