@sergeychuvayev/claude-fleet 0.7.0 → 0.9.0

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
@@ -94,9 +115,9 @@ function selectControl(session) {
   $('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 +150,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 +460,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 +484,4 @@ pollUpdate()
 // time to answer, then settle into a slow poll for long-lived windows.
 setTimeout(pollUpdate, 9000)
 setInterval(pollUpdate, 60 * 60 * 1000)
+})()

package/public/index.html

@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="dark"><title>Fleet — Claude Code control room</title><link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/icons/fleet-192.png" type="image/png"><link rel="apple-touch-icon" href="/icons/fleet-192.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Fleet"><link rel="stylesheet" href="/theme.css"><link rel="stylesheet" href="/styles.css"><script src="/vendor/libs.js" defer></script><script src="/app.js" defer></script><script src="/blocks.js" defer></script><script src="/control.js" defer></script><script src="/teams.js" defer></script><script src="/ask.js" defer></script></head>
-<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="connection"><span id="connection-dot" class="dot busy"></span><span id="connection">Connecting</span><span class="local">LOCAL CONTROL ROOM</span></div><div class="refresh-info"><button id="update-pill" class="button update-pill" hidden></button><span id="updated">Waiting for first snapshot</span><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>
+<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>
 </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>
   <section class="modal modal-ask" role="dialog" aria-modal="true" aria-labelledby="ask-title">
     <header class="modal-head">
@@ -31,6 +32,7 @@
   <section class="modal modal-launch launch-panel" role="dialog" aria-modal="true" aria-labelledby="launch-title">
     <header class="modal-head"><div class="modal-heading"><span class="modal-spark" aria-hidden="true">✳</span><div><span class="modal-eyebrow">A FRESH PAIR OF HANDS</span><h2 id="launch-title">Give your next task a home.</h2><p>A little context. A clear task. Off you go.</p></div></div><button type="button" id="close-launch" class="modal-close" data-close-modal aria-label="Close new agent form">✕</button></header>
     <form id="launch-form" class="modal-body">
+      <p id="launch-blocked" class="rate-warning" role="status" hidden></p>
       <div class="launch-layout">
         <div class="launch-task"><label for="launch-prompt">What are we working on?</label><textarea id="launch-prompt" name="prompt" rows="8" placeholder="There’s something I’d love your help with…&#10;&#10;Describe the task, what a good result looks like, and anything your agent should know." required maxlength="16000"></textarea><p class="note launch-task-note">Big ideas, small fixes. Every task starts here.</p></div>
         <div class="launch-fields">