@yemi33/minions 0.1.2131 → 0.1.2133

package/dashboard/js/live-stream.js

@@ -7,6 +7,27 @@ let _steerInFlight = false;
 let _lastRenderedText = '';
 let _runtimeTimer = null;
 
+// W-mq1jbd8z0008dfa0 — scrollback state. The tail-region wrapper keeps
+// prepended scrollback chunks safe when the 3s poll re-renders the tail.
+//
+// _oldestLoadedByte   — byte offset of the OLDEST bytes currently rendered in
+//                       #live-messages (anything older lives on disk).
+// _logFileSize        — most recent X-Log-Size value from the server. Used to
+//                       seed _oldestLoadedByte on the first tail poll.
+// _scrollbackFetchInFlight — guard so the scroll handler can't fire concurrent
+//                       pagination requests.
+// _tailRegionAgentId  — agentId the current tail region belongs to. Switching
+//                       agents resets all scrollback state so chunks from a
+//                       previous agent never bleed into the new tail.
+let _oldestLoadedByte = 0;
+let _logFileSize = 0;
+let _scrollbackFetchInFlight = false;
+let _tailRegionAgentId = null;
+
+const SCROLLBACK_CHUNK = 65536; // 64KB per scroll-up
+const SCROLLBACK_TRIGGER_PX = 200; // load older content when within 200px of top
+const TAIL_REGION_ID = 'live-tail-region';
+
 function _currentAgentRuntime() {
   var agent = (agentData || []).find(function(a) { return a.id === currentAgentId; });
   return agent && agent.runtime ? agent.runtime : '';
@@ -25,16 +46,34 @@ function _updateRuntimeCounter() {
   el.textContent = (hr > 0 ? hr + 'h ' : '') + min + 'm ' + sec + 's';
 }
 
+// Resolve (or lazily create) the inner tail-region wrapper. All tail-poll
+// renders write into this region; scrollback chunks live OUTSIDE it (above),
+// so a tail re-render never clobbers the prepended scrollback.
+function _ensureTailRegion() {
+  const container = document.getElementById('live-messages');
+  if (!container) return null;
+  let region = document.getElementById(TAIL_REGION_ID);
+  if (!region) {
+    region = document.createElement('div');
+    region.id = TAIL_REGION_ID;
+    region.style.display = 'contents'; // transparent flex container
+    container.appendChild(region);
+  }
+  return region;
+}
+
 function renderLiveChatMessage(raw) {
-  const el = document.getElementById('live-messages');
-  if (!el) return;
+  const container = document.getElementById('live-messages');
+  if (!container) return;
+  const region = _ensureTailRegion();
+  if (!region) return;
   const html = renderAgentOutput(raw);
   // eslint-disable-next-line no-unsanitized/method -- reason: renderAgentOutput() escapes all user-controlled fields before assembling HTML (see dashboard/js/render-utils.js)
-  if (html) el.insertAdjacentHTML('beforeend', html);
+  if (html) region.insertAdjacentHTML('beforeend', html);
 
   // Auto-scroll
-  if (el.scrollHeight - el.scrollTop - el.clientHeight < 150) {
-    el.scrollTop = el.scrollHeight;
+  if (container.scrollHeight - container.scrollTop - container.clientHeight < 150) {
+    container.scrollTop = container.scrollHeight;
   }
 }
 
@@ -45,6 +84,12 @@ function startLiveStream(agentId) {
   const msgEl = document.getElementById('live-messages');
   if (msgEl) msgEl.innerHTML = '';
   _lastRenderedText = '';
+  _oldestLoadedByte = 0;
+  _logFileSize = 0;
+  _scrollbackFetchInFlight = false;
+  _tailRegionAgentId = agentId;
+  _attachScrollHandler();
+  _updateJumpToLatestButton();
 
   // W-mpob4nyk0006580e — clear any stale banner from a previous agent.
   const bannerEl = document.getElementById('live-terminal-banner');
@@ -123,30 +168,156 @@ async function refreshLiveOutput() {
   if (!currentAgentId || currentTab !== 'live') { stopLivePolling(); return; }
   if (_steerInFlight) return; // Don't clobber immediate steering feedback
   try {
-    const text = await safeFetch('/api/agent/' + currentAgentId + '/live?tail=16384').then(r => r.text());
+    const r = await safeFetch('/api/agent/' + currentAgentId + '/live?tail=16384');
+    const text = await r.text();
+    // X-Log-Size lets us seed _oldestLoadedByte on the first tick + know
+    // whether more older content exists above what's currently rendered.
+    const logSizeHeader = r.headers.get('X-Log-Size');
+    if (logSizeHeader != null) _logFileSize = parseInt(logSizeHeader, 10) || 0;
     const el = document.getElementById('live-messages');
-    if (el) {
-      const wasAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 150;
-      const savedScrollTop = el.scrollTop;
-      const savedScrollLeft = el.scrollLeft;
-      const incrementalSafe = _currentAgentRuntime() !== 'copilot';
-      // Incremental render: only parse new content if text is an extension of previous
-      if (incrementalSafe && _lastRenderedText && text.length > _lastRenderedText.length && text.startsWith(_lastRenderedText.slice(0, 200))) {
-        renderLiveChatMessage(text.slice(_lastRenderedText.length));
-      } else {
-        el.innerHTML = '';
-        renderLiveChatMessage(text);
-      }
-      _lastRenderedText = text;
-      if (wasAtBottom) el.scrollTop = el.scrollHeight;
-      else {
-        el.scrollTop = savedScrollTop;
-        el.scrollLeft = savedScrollLeft;
-      }
+    if (!el) return;
+    const region = _ensureTailRegion();
+    if (!region) return;
+    // Seed _oldestLoadedByte the first time we have a server file-size.
+    // The tail fetch covers the last min(16384, _logFileSize) bytes, so the
+    // oldest byte currently rendered is that lower bound.
+    if (_logFileSize > 0 && _oldestLoadedByte === 0 && _lastRenderedText === '') {
+      _oldestLoadedByte = Math.max(0, _logFileSize - 16384);
     }
+    const wasAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 150;
+    const savedScrollTop = el.scrollTop;
+    const savedScrollLeft = el.scrollLeft;
+    const incrementalSafe = _currentAgentRuntime() !== 'copilot';
+    // Incremental render: only parse new content if text is an extension of previous
+    if (incrementalSafe && _lastRenderedText && text.length > _lastRenderedText.length && text.startsWith(_lastRenderedText.slice(0, 200))) {
+      renderLiveChatMessage(text.slice(_lastRenderedText.length));
+    } else {
+      // Clear the tail region only (NOT the whole #live-messages) so
+      // scrollback chunks prepended above the region survive the rerender.
+      region.innerHTML = '';
+      renderLiveChatMessage(text);
+    }
+    _lastRenderedText = text;
+    if (wasAtBottom) el.scrollTop = el.scrollHeight;
+    else {
+      el.scrollTop = savedScrollTop;
+      el.scrollLeft = savedScrollLeft;
+    }
+    _updateJumpToLatestButton();
   } catch (e) { console.error('live-stream reload:', e.message); }
 }
 
+// W-mq1jbd8z0008dfa0 — scrollback: load older transcript content when the
+// user scrolls near the top.
+async function _loadOlderScrollback() {
+  if (_scrollbackFetchInFlight) return;
+  if (_oldestLoadedByte <= 0) return;
+  if (!currentAgentId || _tailRegionAgentId !== currentAgentId) return;
+  _scrollbackFetchInFlight = true;
+  const container = document.getElementById('live-messages');
+  if (!container) { _scrollbackFetchInFlight = false; return; }
+  // Loading indicator at the top — structural HTML string literal, no user
+  // data interpolated, so lint passes without a disable directive.
+  const loadingId = '_scrollback-loading';
+  container.insertAdjacentHTML('afterbegin', '<div id="' + loadingId + '" style="padding:4px 8px;color:var(--muted);font-size:var(--text-sm);font-style:italic;text-align:center">Loading older\u2026</div>');
+  const from = Math.max(0, _oldestLoadedByte - SCROLLBACK_CHUNK);
+  const to = _oldestLoadedByte;
+  try {
+    const r = await safeFetch('/api/agent/' + currentAgentId + '/live-output?from=' + from + '&to=' + to);
+    const text = await r.text();
+    const logSizeHeader = r.headers.get('X-Log-Size');
+    if (logSizeHeader != null) _logFileSize = parseInt(logSizeHeader, 10) || _logFileSize;
+    const html = renderAgentOutput(text);
+    // Capture scrollHeight BEFORE prepend so we can restore the user's visible
+    // position afterward — otherwise the scrollbar jumps as content stacks up.
+    const savedScrollHeight = container.scrollHeight;
+    const savedScrollTop = container.scrollTop;
+    // Remove the loading indicator
+    const loadingEl = document.getElementById(loadingId);
+    if (loadingEl) loadingEl.remove();
+    if (html) {
+      // eslint-disable-next-line no-unsanitized/method -- reason: renderAgentOutput() escapes all user-controlled fields before assembling HTML
+      container.insertAdjacentHTML('afterbegin', html);
+    }
+    // Anchor the visible position so prepending doesn't visually jump the user.
+    container.scrollTop = savedScrollTop + (container.scrollHeight - savedScrollHeight);
+    _oldestLoadedByte = from;
+  } catch (e) {
+    console.error('scrollback fetch:', e.message);
+    const loadingEl = document.getElementById(loadingId);
+    if (loadingEl) loadingEl.remove();
+  } finally {
+    _scrollbackFetchInFlight = false;
+  }
+}
+
+// Wire scroll handler + "Jump to latest" button. Idempotent: re-attaches
+// when the live tab re-renders the container.
+function _attachScrollHandler() {
+  const container = document.getElementById('live-messages');
+  if (!container || container.dataset.scrollbackHooked === '1') return;
+  container.dataset.scrollbackHooked = '1';
+  container.addEventListener('scroll', function() {
+    // Load older content when within 200px of the top.
+    if (container.scrollTop <= SCROLLBACK_TRIGGER_PX && _oldestLoadedByte > 0 && !_scrollbackFetchInFlight) {
+      _loadOlderScrollback();
+    }
+    _updateJumpToLatestButton();
+  });
+}
+
+function _ensureJumpToLatestButton() {
+  // The button is positioned absolute inside #live-chat (already
+  // position:relative-friendly because of its flex column layout). Inject
+  // once; #live-chat is re-rendered on tab switch, which removes it, so
+  // this function lazy-creates as needed.
+  const liveChat = document.getElementById('live-chat');
+  if (!liveChat) return null;
+  // Ensure positioning context for absolute child.
+  if (liveChat.style.position !== 'relative' && getComputedStyle(liveChat).position === 'static') {
+    liveChat.style.position = 'relative';
+  }
+  let btn = document.getElementById('live-jump-latest');
+  if (!btn) {
+    btn = document.createElement('button');
+    btn.id = 'live-jump-latest';
+    btn.type = 'button';
+    btn.textContent = '\u2193 Jump to latest';
+    btn.style.cssText = [
+      'position:absolute',
+      'right:16px',
+      'bottom:96px',
+      'padding:6px 12px',
+      'background:var(--blue)',
+      'color:#fff',
+      'border:none',
+      'border-radius:var(--radius-sm)',
+      'font-size:var(--text-sm)',
+      'cursor:pointer',
+      'box-shadow:0 2px 6px rgba(0,0,0,0.25)',
+      'z-index:5',
+      'display:none',
+    ].join(';');
+    btn.addEventListener('click', function() {
+      const container = document.getElementById('live-messages');
+      if (!container) return;
+      container.scrollTop = container.scrollHeight;
+      _updateJumpToLatestButton();
+    });
+    liveChat.appendChild(btn);
+  }
+  return btn;
+}
+
+function _updateJumpToLatestButton() {
+  const container = document.getElementById('live-messages');
+  if (!container) return;
+  const btn = _ensureJumpToLatestButton();
+  if (!btn) return;
+  const atBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 150;
+  btn.style.display = atBottom ? 'none' : 'block';
+}
+
 async function sendSteering() {
   const input = document.getElementById('live-steer-input');
   if (!input || !input.value.trim() || !currentAgentId) return;
@@ -156,13 +327,15 @@ async function sendSteering() {
   // Pause polling so the immediate feedback isn't clobbered
   _steerInFlight = true;
 
-  // Immediate feedback — show the message right away
-  const el = document.getElementById('live-messages');
-  if (el) {
+  // Immediate feedback — show the message right away. Render INTO the tail
+  // region so a subsequent scrollback prepend stays above the steering bubble.
+  const region = _ensureTailRegion();
+  const container = document.getElementById('live-messages');
+  if (region) {
     // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: steering message)
-    el.insertAdjacentHTML('beforeend', '<div style="align-self:flex-end;background:var(--blue);color:#fff;padding:6px 12px;border-radius:12px 12px 2px 12px;max-width:80%;margin:4px 0;font-size:var(--text-md)">' + escHtml(message) +
+    region.insertAdjacentHTML('beforeend', '<div style="align-self:flex-end;background:var(--blue);color:#fff;padding:6px 12px;border-radius:12px 12px 2px 12px;max-width:80%;margin:4px 0;font-size:var(--text-md)">' + escHtml(message) +
       '<div id="steer-pending" style="font-size:var(--text-xs);opacity:0.7;margin-top:2px">\u2197 Sending...</div></div>');
-    el.scrollTop = el.scrollHeight;
+    if (container) container.scrollTop = container.scrollHeight;
   }
   showToast('cmd-toast', 'Steering message sent to ' + currentAgentId, true);
 

package/dashboard/js/render-watches.js

@@ -503,7 +503,7 @@ function _watchFormHtml() {
     '<div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;display:flex;flex-direction:column;gap:8px">' +
       '<div style="color:var(--text);font-size:var(--text-md);display:flex;align-items:center;justify-content:space-between">' +
         '<span>Follow-up Action(s) <span style="font-size:var(--text-sm);color:var(--muted)">(runs after the inbox notification when the watch fires; 1 step = single, 2+ = chain)</span></span>' +
-        '<button type="button" class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_addWatchStepRow()">+ Add step</button>' +
+        '<button type="button" class="btn-add btn-add-lg" onclick="_addWatchStepRow()">+ Add step</button>' +
       '</div>' +
       '<div id="watch-edit-steps"></div>' +
     '</div>' +
@@ -511,7 +511,7 @@ function _watchFormHtml() {
     '<div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;display:flex;flex-direction:column;gap:8px">' +
       '<div style="color:var(--text);font-size:var(--text-md);display:flex;align-items:center;justify-content:space-between">' +
         '<span>Requires <span style="font-size:var(--text-sm);color:var(--muted)">(cross-target AND-join — every requirement must also be true to fire)</span></span>' +
-        '<button type="button" class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_addRequireRow()">+ Add requirement</button>' +
+        '<button type="button" class="btn-add btn-add-lg" onclick="_addRequireRow()">+ Add requirement</button>' +
       '</div>' +
       '<div id="watch-edit-requires"></div>' +
     '</div>' +

package/dashboard/pages/home.html

@@ -12,7 +12,7 @@
           <span style="color:var(--blue);font-weight:600">Command Center</span>
           <span id="cmd-powered-by">Ask anything, dispatch work, manage plans</span>
           <button class="cmd-history-btn" onclick="cmdShowHistory()">Past Commands</button>
-          <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="openQuickNoteModal()">+ Note</button>
+          <button class="btn-add btn-add-lg" onclick="openQuickNoteModal()">+ Note</button>
         </div>
       </section>
       <section>
@@ -20,7 +20,7 @@
         <div class="agents" id="agents-grid">Loading...</div>
       </section>
       <section>
-        <h2>Pinned Context <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openPinNoteModal()">+ Pin</button> <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">injected into all agent prompts</span></h2>
+        <h2>Pinned Context <button class="btn-add" style="margin-left:8px" onclick="openPinNoteModal()">+ Pin</button> <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">injected into all agent prompts</span></h2>
         <div id="pinned-content"><p class="empty">No pinned notes.</p></div>
       </section>
       <section>

package/dashboard/pages/inbox.html

@@ -1,5 +1,5 @@
       <section>
-        <h2>Notes Inbox <span class="count" id="inbox-count">0</span> <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openQuickNoteModal()">+ Note</button> <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">auto-consolidates at <span id="inbox-threshold">3</span> notes</span></h2>
+        <h2>Notes Inbox <span class="count" id="inbox-count">0</span> <button class="btn-add btn-add-lg" style="margin-left:8px" onclick="openQuickNoteModal()">+ Note</button> <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">auto-consolidates at <span id="inbox-threshold">3</span> notes</span></h2>
         <div class="inbox-list" id="inbox-list">Loading...</div>
       </section>
       <section>
@@ -7,7 +7,7 @@
         <div id="notes-list">Loading...</div>
       </section>
       <section>
-        <h2>Knowledge Base <span class="count" id="kb-count">0</span> <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openCreateKbModal()">+ New</button><button id="kb-sweep-btn" onclick="kbSweep()" style="font-size:var(--text-xs);padding:2px 8px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);border-radius:4px;cursor:pointer;margin-left:8px;vertical-align:middle">sweep</button><span id="kb-swept-time" style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;margin-left:8px"></span></h2>
+        <h2>Knowledge Base <span class="count" id="kb-count">0</span> <button class="btn-add" style="margin-left:8px" onclick="openCreateKbModal()">+ New</button><button id="kb-sweep-btn" onclick="kbSweep()" style="font-size:var(--text-xs);padding:2px 8px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);border-radius:4px;cursor:pointer;margin-left:8px;vertical-align:middle">sweep</button><span id="kb-swept-time" style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;margin-left:8px"></span></h2>
         <div id="kb-sweep-toast" class="cmd-toast cmd-toast-inline" style="margin:6px 0"></div>
         <div class="kb-tabs" id="kb-tabs"></div>
         <div class="kb-list" id="kb-list"><p class="empty">No knowledge entries yet. Notes are classified here after consolidation.</p></div>

package/dashboard/pages/meetings.html

@@ -1,6 +1,6 @@
 <section>
   <h2>Team Meetings <span class="count" id="meetings-count">0</span>
-    <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openCreateMeetingModal()">+ New Meeting</button>
+    <button class="btn-add" style="margin-left:8px" onclick="openCreateMeetingModal()">+ New Meeting</button>
     <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">multi-round agent discussions — investigate, debate, conclude</span>
   </h2>
   <div id="meetings-content"><p class="empty">No meetings yet. Start one to have agents investigate, debate, and conclude on a topic.</p></div>

package/dashboard/pages/pipelines.html

@@ -1,6 +1,6 @@
 <section>
   <h2>Pipelines <span class="count" id="pipelines-count">0</span>
-    <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openCreatePipelineModal()">+ New Pipeline</button>
+    <button class="btn-add" style="margin-left:8px" onclick="openCreatePipelineModal()">+ New Pipeline</button>
     <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">multi-stage workflows with dependencies — chain meetings, plans, tasks, merges in any order, on a schedule or manual</span>
   </h2>
   <div id="pipelines-content"><p class="empty">No pipelines yet. Create one to chain stages like audit → meeting → plan → merge.</p></div>

package/dashboard/pages/plans.html

@@ -1,6 +1,6 @@
       <section>
         <h2>Plans <span class="count" id="plans-count">0</span>
-          <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openCreatePlanModal()">+ New Plan</button>
+          <button class="btn-add" style="margin-left:8px" onclick="openCreatePlanModal()">+ New Plan</button>
           <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">create via CC or + New Plan, then execute to generate a PRD</span>
         </h2>
         <div id="plans-list"><p class="empty">No plans yet. Create one via the command center or click + New Plan.</p></div>

package/dashboard/pages/prs.html

@@ -1,6 +1,6 @@
       <section class="pr-panel" id="pr-section">
         <h2>Pull Requests <span class="count" id="pr-count">0</span>
-          <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openAddPrModal()">+ Link PR</button>
+          <button class="btn-add" style="margin-left:8px" onclick="openAddPrModal()">+ Link PR</button>
           <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">created by agents, tracked with review + build status</span>
         </h2>
         <div id="pr-toast" class="cmd-toast cmd-toast-inline" style="margin:6px 0"></div>

package/dashboard/pages/schedule.html

@@ -1,6 +1,6 @@
       <section id="scheduled-section">
         <h2>Scheduled Tasks <span class="count" id="scheduled-count">0</span>
-          <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openCreateScheduleModal()">+ New</button>
+          <button class="btn-add" style="margin-left:8px" onclick="openCreateScheduleModal()">+ New</button>
           <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">single recurring tasks on a cron — for multi-step workflows, use Pipelines</span>
         </h2>
         <div id="scheduled-content"><p class="empty">No scheduled tasks. Add one to automate recurring work.</p></div>

package/dashboard/pages/watches.html

@@ -1,6 +1,6 @@
       <section id="watches-section">
         <h2>Watches <span class="count" id="watches-count">0</span>
-          <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openCreateWatchModal()">+ New</button>
+          <button class="btn-add" style="margin-left:8px" onclick="openCreateWatchModal()">+ New</button>
           <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">persistent watches that monitor PRs, work items, and branches for changes</span>
         </h2>
         <div id="watches-content"><p class="empty">No active watches. Create one to monitor PRs, work items, or branches.</p></div>

package/dashboard/pages/work.html

@@ -1,6 +1,6 @@
       <section id="work-items-section" style="overflow:visible">
         <h2>Work Items <span class="count" id="wi-count">0</span>
-          <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="openCreateWorkItemModal()">+ New</button>
+          <button class="btn-add" style="margin-left:8px" onclick="openCreateWorkItemModal()">+ New</button>
           <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;margin-left:4px" onclick="toggleWorkItemArchive()">See Archive</button>
           <span style="font-size:var(--text-sm);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">tasks dispatched to agents — auto-created from PRDs or added manually</span>
         </h2>

package/dashboard/styles.css

@@ -426,6 +426,34 @@
   .btn-danger { color: var(--red); border-color: var(--red); }
   .btn-warning { color: var(--yellow); border-color: var(--yellow); }
 
+  /* W-mq10dtaw000l7ad5 — "+ Add" / "+ New" button family. Single source of
+     truth for the green-bordered, green-text, "+" buttons used across the
+     dashboard: section-header creators (work, plans, prs, knowledge, inbox,
+     schedules, pipelines, watches, meetings, home pin/note) AND inline
+     form-row adders ("+ Add step", "+ Add requirement"). Change the green
+     hex / border / padding / hover once here and every "+ X" button updates.
+     Variant:
+       .btn-add        — compact text-xs / 1px 6px (section-header default)
+       .btn-add-lg     — text-sm / 2px 8px (form rows + larger header buttons)
+     Positional spacing (e.g. margin-left:8px after an h2 count) lives at
+     the callsite, not on the button itself. Do NOT re-create the green
+     inline style for a new "+ X" button — extend this primitive instead. */
+  .btn-add {
+    background: var(--surface2);
+    border: 1px solid var(--green);
+    color: var(--green);
+    font-size: var(--text-xs);
+    padding: 1px 6px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background var(--transition-base);
+  }
+  .btn-add:hover { background: rgba(63,185,80,0.1); }
+  .btn-add:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
+  .btn-add:disabled,
+  .btn-add.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+  .btn-add.btn-add-lg { font-size: var(--text-sm); padding: 2px 8px; }
+
   /* Badge — unified badge/pill base */
   .badge {
     font-size: var(--text-sm); font-weight: 600;

package/dashboard.js

@@ -6132,12 +6132,69 @@ const server = http.createServer(async (req, res) => {
     const prevPath = path.join(agentDir, 'live-output-prev.log');
     res.setHeader('Content-Type', 'text/plain; charset=utf-8');
     const params = new URL(req.url, 'http://localhost').searchParams;
+
+    // W-mq1jbd8z0008dfa0 — scrollback support. When `from`/`to` are supplied,
+    // serve an explicit byte range from live-output.log (or live-output-prev.log
+    // when `prev=1` is set) instead of the tail window. The client uses this to
+    // load progressively older transcript content as the user scrolls up.
+    // `X-Log-Size` is always emitted (for both tail and range responses) so the
+    // client knows whether more older content exists above its current top.
+    const MAX_RANGE_BYTES = 524288; // 512KB hard cap per request
+    const prevOnly = params.get('prev') === '1';
+    const hasRange = params.has('from') || params.has('to');
+
+    if (hasRange) {
+      if (!params.has('from') || !params.has('to')) {
+        return jsonReply(res, 400, { error: 'from and to must both be provided for a range read' });
+      }
+      const rawFrom = params.get('from');
+      const rawTo = params.get('to');
+      if (!/^\d+$/.test(rawFrom) || !/^\d+$/.test(rawTo)) {
+        return jsonReply(res, 400, { error: 'from and to must be non-negative integers' });
+      }
+      const from = parseInt(rawFrom, 10);
+      const to = parseInt(rawTo, 10);
+      if (!(from < to)) {
+        return jsonReply(res, 400, { error: 'from must be less than to' });
+      }
+      if ((to - from) > MAX_RANGE_BYTES) {
+        return jsonReply(res, 400, { error: `range exceeds MAX_RANGE_BYTES (${MAX_RANGE_BYTES})` });
+      }
+      const targetPath = prevOnly ? prevPath : livePath;
+      try {
+        const stat = fs.statSync(targetPath);
+        res.setHeader('X-Log-Size', String(stat.size));
+        res.setHeader('X-Log-Truncated', 'false');
+        // Past EOF — return empty body (NOT 416, the client polls and 416s
+        // would spam the console).
+        if (from >= stat.size) { res.end(''); return; }
+        const clampedTo = Math.min(to, stat.size);
+        const length = clampedTo - from;
+        const buf = Buffer.alloc(length);
+        const fd = fs.openSync(targetPath, 'r');
+        try {
+          fs.readSync(fd, buf, 0, length, from);
+        } finally {
+          fs.closeSync(fd);
+        }
+        res.end(buf.toString('utf8'));
+      } catch {
+        // File missing — fail soft to match the tail path's UX.
+        res.setHeader('X-Log-Size', '0');
+        res.setHeader('X-Log-Truncated', 'false');
+        res.end('');
+      }
+      return;
+    }
+
     const rawTail = parseInt(params.get('tail'));
     if (params.has('tail') && isNaN(rawTail)) return jsonReply(res, 400, { error: 'tail must be a number' });
     const tailBytes = isNaN(rawTail) ? 8192 : Math.max(1, Math.min(65536, rawTail));
     // Read only the tail bytes from disk instead of entire file
     try {
       const stat = fs.statSync(livePath);
+      res.setHeader('X-Log-Size', String(stat.size));
+      res.setHeader('X-Log-Truncated', 'false');
       if (stat.size === 0) { res.end('No live output. Agent may not be running.'); return; }
 
       // Fall back to previous session log when current is sparse (fixes #543)
@@ -6173,6 +6230,8 @@ const server = http.createServer(async (req, res) => {
         if (fs.existsSync(prevPath)) {
           const prevStat = fs.statSync(prevPath);
           if (prevStat.size > 0) {
+            res.setHeader('X-Log-Size', String(prevStat.size));
+            res.setHeader('X-Log-Truncated', 'false');
             const start = Math.max(0, prevStat.size - tailBytes);
             const buf = Buffer.alloc(Math.min(tailBytes, prevStat.size));
             const fd = fs.openSync(prevPath, 'r');
@@ -6183,6 +6242,8 @@ const server = http.createServer(async (req, res) => {
           }
         }
       } catch { /* fall through */ }
+      if (!res.getHeader('X-Log-Size')) res.setHeader('X-Log-Size', '0');
+      if (!res.getHeader('X-Log-Truncated')) res.setHeader('X-Log-Truncated', 'false');
       res.end('No live output. Agent may not be running.');
     }
     return;
@@ -11566,8 +11627,8 @@ What would you like to discuss or change? When you're happy, say "approve" and I
     { method: 'POST', path: '/api/agents/cancel', desc: 'Cancel an active agent by ID or task substring', params: 'agent? or agentId?, task?', handler: handleAgentsCancel },
     { method: 'POST', path: /^\/api\/agent\/([\w-]+)\/kill$/, template: '/api/agent/:id/kill', desc: 'Kill a running agent: stop process, clear dispatch, reset work items to pending', handler: handleAgentKill },
     { method: 'GET', path: /^\/api\/agent\/([\w-]+)\/live-stream(?:\?.*)?$/, template: '/api/agent/:id/live-stream', desc: 'SSE real-time live output streaming', handler: handleAgentLiveStream },
-    { method: 'GET', path: /^\/api\/agent\/([\w-]+)\/live(?:\?.*)?$/, template: '/api/agent/:id/live', desc: 'Tail live output for a working agent', params: 'tail? (bytes, default 8192)', handler: handleAgentLive },
-    { method: 'GET', path: /^\/api\/agent\/([\w-]+)\/live-output(?:\?.*)?$/, template: '/api/agent/:id/live-output', desc: 'Tail live output for a working agent (alias for /live)', params: 'tail? (bytes, default 8192)', handler: handleAgentLive },
+    { method: 'GET', path: /^\/api\/agent\/([\w-]+)\/live(?:\?.*)?$/, template: '/api/agent/:id/live', desc: 'Tail or range-read live output for a working agent', params: 'tail? (bytes, default 8192) | from?+to? (byte range, max 524288) | prev?=1 (read live-output-prev.log)', handler: handleAgentLive },
+    { method: 'GET', path: /^\/api\/agent\/([\w-]+)\/live-output(?:\?.*)?$/, template: '/api/agent/:id/live-output', desc: 'Tail or range-read live output for a working agent (alias for /live)', params: 'tail? (bytes, default 8192) | from?+to? (byte range, max 524288) | prev?=1 (read live-output-prev.log)', handler: handleAgentLive },
     { method: 'GET', path: /^\/api\/agent\/([\w-]+)\/output(?:\?.*)?$/, template: '/api/agent/:id/output', desc: 'Fetch final output.log for an agent', handler: handleAgentOutput },
     { method: 'GET', path: /^\/api\/agent\/([\w-]+)$/, template: '/api/agent/:id', desc: 'Get detailed agent info', handler: handleAgentDetail },
     { method: 'GET', path: /^\/api\/dispatch\/([\w.-]+)\/completion-report$/, template: '/api/dispatch/:id/completion-report', desc: 'Read structured completion report for a dispatch', handler: (req, res, match) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.2131",
+  "version": "0.1.2133",
   "description": "Multi-agent AI dev team that runs from ~/.minions/ — five autonomous agents share a single engine, dashboard, and knowledge base",
   "bin": {
     "minions": "bin/minions.js"