@sergeychuvayev/claude-fleet 0.9.0 → 0.10.0

package/package.json

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

package/public/app.js

@@ -622,9 +622,9 @@ 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 LAYOUT = { split: 'fleet:split' }
 const SPLIT_DEFAULT = 58, LIST_MIN = 300, DETAIL_MIN = 380
 
 function applySplit(percent, { save = true } = {}) {
@@ -690,18 +690,106 @@ 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()) }
 }
 initSplitter()
 

package/public/control.js

@@ -112,6 +112,7 @@ 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>`

package/public/styles.css

@@ -2592,3 +2592,54 @@ body[data-modal] { overflow:hidden }
   .status-fleet { margin-left:0 }
   .status-conn { border:0; padding-left:0 }
 }
+
+/* Open session sections. The transcript keeps the remaining vertical space. */
+.detail:has(#composer) #control-panel { padding:14px 16px 0; overflow:hidden }
+.detail:has(#composer) .conversation {
+  border:0; border-radius:0; background:transparent; padding:0;
+  resize:none; flex:1 1 0; height:auto; min-height:120px;
+}
+.conversation .block {
+  border:0; border-radius:0; border-bottom:1px solid var(--line);
+  background:transparent; margin:0; overflow:visible;
+}
+.conversation .block-head { border:0; background:var(--panel) }
+.conversation .block[data-status="running"] .block-icon { color:var(--term-yellow) }
+.conversation .block[data-status="error"] .block-icon { color:var(--term-red) }
+#initiative-board {
+  border:0; border-radius:0; margin:0; background:transparent;
+  min-height:0; flex:0 1 auto;
+}
+#initiative-board[open] { display:flex; flex-direction:column }
+#initiative-board>summary { flex:none; background:transparent; padding:10px 0 }
+#initiative-board .initiative-body { min-height:0; max-height:none; overflow:auto; padding:10px 0 }
+#initiative-board .initiative-handoff { border-radius:0; background:transparent; border-left:1px solid var(--line) }
+.detail:has(#composer) .composer {
+  display:flex; flex-direction:column; min-height:130px; flex:0 1 auto;
+  margin:0; padding:6px 0 12px;
+}
+.composer textarea {
+  flex:1 1 0; min-height:50px; border:0; border-radius:0;
+  background:transparent; resize:none; padding:10px 0;
+}
+.composer textarea:focus { outline:0; box-shadow:inset 2px 0 var(--accent); padding-left:10px }
+.composer-footer { flex:none }
+.panel-splitter {
+  position:relative; height:9px; flex:0 0 9px; cursor:row-resize;
+  touch-action:none; margin:0 -16px;
+}
+.panel-splitter::before {
+  content:""; position:absolute; left:0; right:0; top:4px;
+  height:1px; background:var(--line);
+}
+.panel-splitter:hover::before, .panel-splitter:focus-visible::before,
+.panel-splitter[data-dragging]::before { height:2px; background:var(--accent) }
+.panel-splitter:focus-visible { outline:0 }
+body[data-panel-resizing], body[data-panel-resizing] * { cursor:row-resize!important; user-select:none!important }
+@media(max-width:720px) {
+  .detail:has(#composer) #control-panel { overflow:visible }
+  .panel-splitter { display:none }
+  #initiative-board .initiative-body { max-height:32vh }
+  .detail:has(#composer) .conversation { height:460px; flex:none }
+  .detail:has(#composer) .composer { height:auto; min-height:170px; border-top:1px solid var(--line) }
+}