aicodeman 0.2.8 → 0.3.0

package/dist/web/public/constants.js

@@ -0,0 +1,238 @@
+// Codeman — Shared constants and utility functions for frontend modules
+
+// ============================================================================
+// Web Push Utilities
+// ============================================================================
+
+/** Convert a base64-encoded VAPID key to Uint8Array for pushManager.subscribe() */
+function urlBase64ToUint8Array(base64String) {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const rawData = atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+// Default terminal scrollback (can be changed via settings)
+const DEFAULT_SCROLLBACK = 5000;
+
+// Timing constants
+const STUCK_THRESHOLD_DEFAULT_MS = 600000;  // 10 minutes - default for stuck detection
+const GROUPING_TIMEOUT_MS = 5000;           // 5 seconds - notification grouping window
+const NOTIFICATION_LIST_CAP = 100;          // Max notifications in list
+const TITLE_FLASH_INTERVAL_MS = 1500;       // Title flash rate
+const BROWSER_NOTIF_RATE_LIMIT_MS = 3000;   // Rate limit for browser notifications
+const AUTO_CLOSE_NOTIFICATION_MS = 8000;    // Auto-close browser notifications
+const THROTTLE_DELAY_MS = 100;              // General UI throttle delay
+const TERMINAL_CHUNK_SIZE = 128 * 1024;     // 128KB chunks for terminal data
+const TERMINAL_TAIL_SIZE = 256 * 1024;      // 256KB tail for initial load
+const SYNC_WAIT_TIMEOUT_MS = 50;            // Wait timeout for terminal sync
+const STATS_POLLING_INTERVAL_MS = 2000;     // System stats polling
+
+// Z-index base values for layered floating windows
+const ZINDEX_SUBAGENT_BASE = 1000;
+const ZINDEX_PLAN_SUBAGENT_BASE = 1100;
+const ZINDEX_LOG_VIEWER_BASE = 2000;
+const ZINDEX_IMAGE_POPUP_BASE = 3000;
+
+// Subagent/floating window layout
+const WINDOW_INITIAL_TOP_PX = 120;
+const WINDOW_CASCADE_OFFSET_PX = 30;
+const WINDOW_MIN_WIDTH_PX = 200;
+const WINDOW_MIN_HEIGHT_PX = 200;
+const WINDOW_DEFAULT_WIDTH_PX = 300;
+
+// Scheduler API — prioritize terminal writes over background UI updates.
+// scheduler.postTask('background') defers non-critical work (connection lines, panel renders)
+// so the main thread stays free for terminal rendering at 60fps.
+const _hasScheduler = typeof globalThis.scheduler?.postTask === 'function';
+function scheduleBackground(fn) {
+  if (_hasScheduler) { scheduler.postTask(fn, { priority: 'background' }); }
+  else { requestAnimationFrame(fn); }
+}
+
+// DEC mode 2026 - Synchronized Output
+// Wrap terminal writes with these markers to prevent partial-frame flicker.
+// Terminal buffers all output between markers and renders atomically.
+// Supported by: WezTerm, Kitty, Ghostty, iTerm2 3.5+, Windows Terminal, VSCode terminal
+// xterm.js doesn't support DEC 2026 natively, so we implement buffering ourselves.
+const DEC_SYNC_START = '\x1b[?2026h';
+const DEC_SYNC_END = '\x1b[?2026l';
+// Pre-compiled regex for stripping DEC 2026 markers (single pass instead of two replaceAll calls)
+const DEC_SYNC_STRIP_RE = /\x1b\[\?2026[hl]/g;
+
+// Built-in respawn configuration presets
+const BUILTIN_RESPAWN_PRESETS = [
+  {
+    id: 'solo-work',
+    name: 'Solo',
+    description: 'Claude working alone — fast respawn cycles with context reset',
+    config: {
+      idleTimeoutMs: 3000,
+      updatePrompt: 'summarize your progress so far before the context reset.',
+      interStepDelayMs: 2000,
+      sendClear: true,
+      sendInit: true,
+      kickstartPrompt: 'continue working. Pick up where you left off based on the context above.',
+      autoAcceptPrompts: true,
+    },
+    durationMinutes: 60,
+    builtIn: true,
+    createdAt: 0,
+  },
+  {
+    id: 'subagent-workflow',
+    name: 'Subagents',
+    description: 'Lead session with Task tool subagents — longer idle tolerance',
+    config: {
+      idleTimeoutMs: 45000,
+      updatePrompt: 'check on your running subagents and summarize their results before the context reset. If all subagents have finished, note what was completed and what remains.',
+      interStepDelayMs: 3000,
+      sendClear: true,
+      sendInit: true,
+      kickstartPrompt: 'check on your running subagents and continue coordinating their work. If all subagents have finished, summarize their results and proceed with the next step.',
+      autoAcceptPrompts: true,
+    },
+    durationMinutes: 240,
+    builtIn: true,
+    createdAt: 0,
+  },
+  {
+    id: 'team-lead',
+    name: 'Team',
+    description: 'Leading an agent team via TeamCreate — tolerates long silences',
+    config: {
+      idleTimeoutMs: 90000,
+      updatePrompt: 'review the task list and teammate progress. Summarize the current state before the context reset.',
+      interStepDelayMs: 5000,
+      sendClear: true,
+      sendInit: true,
+      kickstartPrompt: 'check on your teammates by reviewing the task list and any messages in your inbox. Assign new tasks if teammates are idle, or continue coordinating the team effort.',
+      autoAcceptPrompts: true,
+    },
+    durationMinutes: 480,
+    builtIn: true,
+    createdAt: 0,
+  },
+  {
+    id: 'ralph-todo',
+    name: 'Ralph/Todo',
+    description: 'Ralph Loop task list — works through todos with progress tracking',
+    config: {
+      idleTimeoutMs: 8000,
+      updatePrompt: 'update CLAUDE.md with discoveries and progress notes, mark completed tasks in @fix_plan.md, write a brief summary so the next cycle can continue seamlessly.',
+      interStepDelayMs: 3000,
+      sendClear: true,
+      sendInit: true,
+      kickstartPrompt: 'read @fix_plan.md for task status, continue on the next uncompleted task. When ALL tasks are complete, output <promise>COMPLETE</promise>.',
+      autoAcceptPrompts: true,
+    },
+    durationMinutes: 480,
+    builtIn: true,
+    createdAt: 0,
+  },
+  {
+    id: 'overnight-autonomous',
+    name: 'Overnight',
+    description: 'Unattended overnight runs with full context reset between cycles',
+    config: {
+      idleTimeoutMs: 10000,
+      updatePrompt: 'summarize what you accomplished so far and write key progress notes to CLAUDE.md so the next cycle can pick up where you left off.',
+      interStepDelayMs: 3000,
+      sendClear: true,
+      sendInit: true,
+      kickstartPrompt: 'continue working on the task. Pick up where you left off based on the context above.',
+      autoAcceptPrompts: true,
+    },
+    durationMinutes: 480,
+    builtIn: true,
+    createdAt: 0,
+  },
+];
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Get unified coordinates from mouse or touch event.
+ * @param {MouseEvent|TouchEvent} e - The event
+ * @returns {{ clientX: number, clientY: number }} Coordinates
+ */
+function getEventCoords(e) {
+  if (e.touches && e.touches.length > 0) {
+    return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+  }
+  if (e.changedTouches && e.changedTouches.length > 0) {
+    return { clientX: e.changedTouches[0].clientX, clientY: e.changedTouches[0].clientY };
+  }
+  return { clientX: e.clientX, clientY: e.clientY };
+}
+
+/**
+ * Process data containing DEC 2026 sync markers.
+ * Strips markers and returns segments that should be written atomically.
+ * Each returned segment represents content between SYNC_START and SYNC_END.
+ * Content outside sync blocks is returned as-is.
+ *
+ * @param {string} data - Raw terminal data with potential sync markers
+ * @returns {string[]} - Array of content segments to write (markers stripped)
+ */
+function extractSyncSegments(data) {
+  const segments = [];
+  let remaining = data;
+
+  while (remaining.length > 0) {
+    const startIdx = remaining.indexOf(DEC_SYNC_START);
+
+    if (startIdx === -1) {
+      // No more sync blocks, return rest as-is
+      if (remaining.length > 0) {
+        segments.push(remaining);
+      }
+      break;
+    }
+
+    // Content before sync block (if any)
+    if (startIdx > 0) {
+      segments.push(remaining.slice(0, startIdx));
+    }
+
+    // Find matching end marker
+    const afterStart = remaining.slice(startIdx + DEC_SYNC_START.length);
+    const endIdx = afterStart.indexOf(DEC_SYNC_END);
+
+    if (endIdx === -1) {
+      // No end marker found - sync block continues in next chunk
+      // Include the start marker so it can be handled when more data arrives
+      segments.push(remaining.slice(startIdx));
+      break;
+    }
+
+    // Extract synchronized content (without markers)
+    const syncContent = afterStart.slice(0, endIdx);
+    if (syncContent.length > 0) {
+      segments.push(syncContent);
+    }
+
+    // Continue with content after end marker
+    remaining = afterStart.slice(endIdx + DEC_SYNC_END.length);
+  }
+
+  return segments;
+}
+
+// HTML escape utility (shared by NotificationManager, CodemanApp, and ralph-wizard.js)
+const _htmlEscapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+const _htmlEscapePattern = /[&<>"']/g;
+function escapeHtml(text) {
+  if (typeof text !== 'string') return '';
+  return text.replace(_htmlEscapePattern, (ch) => _htmlEscapeMap[ch]);
+}

package/dist/web/public/index.html

@@ -20,6 +20,7 @@
   <script defer src="vendor/xterm-addon-fit.min.js"></script>
   <script defer src="vendor/xterm-addon-webgl.min.js"></script>
   <script defer src="vendor/xterm-addon-unicode11.min.js"></script>
+  <script defer src="vendor/xterm-zerolag-input.js?v=0.2.9"></script>
   <!-- Synchronous mobile detection — runs before first paint to prevent panel flash -->
   <script>if(window.innerWidth<768||(('ontouchstart' in window||navigator.maxTouchPoints>0)&&window.innerWidth<1024))document.documentElement.classList.add('mobile-init');</script>
   <!-- Inline critical CSS for instant skeleton paint (before styles.css loads) -->
@@ -435,7 +436,7 @@
       <div class="monitor-panel-header" id="monitorPanelHeader">
         <div class="monitor-panel-title">Monitor</div>
         <div class="monitor-panel-actions">
-          <button class="btn-toolbar btn-sm btn-danger" onclick="app.killAllSessions()" title="Kill all sessions and their tmux processes">Kill All</button>
+          <button class="btn-toolbar btn-sm btn-danger" onclick="app.killAllMuxSessions()" title="Kill all sessions and their tmux processes">Kill All</button>
           <button class="btn-icon-sm" onclick="app.reconcileMuxSessions()" title="Refresh tmux sessions">&#x21BB;</button>
           <button class="btn-icon-sm" onclick="app.toggleMonitorDetach()" title="Detach panel" id="monitorDetachBtn">&#x29C9;</button>
           <button class="btn-icon-sm" onclick="app.toggleMonitorPanel()" title="Toggle panel" id="monitorToggleBtn">&#x25B2;</button>
@@ -1669,7 +1670,14 @@
     <!-- Lines drawn dynamically -->
   </svg>
 
-  <script defer src="app.js?v=0.1631"></script>
-  <script defer src="ralph-wizard.js?v=0.1631"></script>
+  <script defer src="constants.js?v=0.2.9"></script>
+  <script defer src="mobile-handlers.js?v=0.2.9"></script>
+  <script defer src="voice-input.js?v=0.2.9"></script>
+  <script defer src="notification-manager.js?v=0.2.9"></script>
+  <script defer src="keyboard-accessory.js?v=0.2.9"></script>
+  <script defer src="app.js?v=0.2.9"></script>
+  <script defer src="ralph-wizard.js?v=0.2.9"></script>
+  <script defer src="api-client.js?v=0.2.9"></script>
+  <script defer src="subagent-windows.js?v=0.2.9"></script>
 </body>
 </html>

package/dist/web/public/keyboard-accessory.js

@@ -0,0 +1,279 @@
+// Codeman — Keyboard accessory bar and focus trap for modals
+// Loaded after mobile-handlers.js, before app.js
+
+// ============================================================================
+// Mobile Keyboard Accessory Bar
+// ============================================================================
+
+/**
+ * KeyboardAccessoryBar - Quick action buttons shown above keyboard when typing.
+ */
+const KeyboardAccessoryBar = {
+  element: null,
+
+  /** Create and inject the accessory bar */
+  init() {
+    // Only on mobile
+    if (!MobileDetection.isTouchDevice()) return;
+
+    // Create accessory bar element
+    this.element = document.createElement('div');
+    this.element.className = 'keyboard-accessory-bar';
+    this.element.innerHTML = `
+      <button class="accessory-btn accessory-btn-arrow" data-action="scroll-up" title="Arrow up">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <path d="M5 15l7-7 7 7"/>
+        </svg>
+      </button>
+      <button class="accessory-btn accessory-btn-arrow" data-action="scroll-down" title="Arrow down">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <path d="M19 9l-7 7-7-7"/>
+        </svg>
+      </button>
+      <button class="accessory-btn" data-action="init" title="/init">/init</button>
+      <button class="accessory-btn" data-action="clear" title="/clear">/clear</button>
+      <button class="accessory-btn" data-action="compact" title="/compact">/compact</button>
+      <button class="accessory-btn" data-action="paste" title="Paste from clipboard">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+          <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
+        </svg>
+      </button>
+      <button class="accessory-btn accessory-btn-dismiss" data-action="dismiss" title="Dismiss keyboard">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+          <path d="M19 9l-7 7-7-7"/>
+        </svg>
+      </button>
+    `;
+
+    // Add click handlers — preventDefault stops event from reaching terminal
+    this.element.addEventListener('click', (e) => {
+      const btn = e.target.closest('.accessory-btn');
+      if (!btn) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      const action = btn.dataset.action;
+      this.handleAction(action, btn);
+
+      // Refocus terminal so keyboard stays open (tap blurs terminal → keyboard dismisses → toolbar shifts)
+      if ((action === 'scroll-up' || action === 'scroll-down') ||
+          ((action === 'clear' || action === 'compact') && this._confirmAction)) {
+        if (typeof app !== 'undefined' && app.terminal) {
+          app.terminal.focus();
+        }
+      }
+    });
+
+    // Insert before toolbar
+    const toolbar = document.querySelector('.toolbar');
+    if (toolbar && toolbar.parentNode) {
+      toolbar.parentNode.insertBefore(this.element, toolbar);
+    }
+  },
+
+  _confirmTimer: null,
+  _confirmAction: null,
+
+  /** Handle accessory button actions */
+  handleAction(action, btn) {
+    if (typeof app === 'undefined' || !app.activeSessionId) return;
+
+    switch (action) {
+      case 'scroll-up':
+        this.sendKey('\x1b[A');
+        break;
+      case 'scroll-down':
+        this.sendKey('\x1b[B');
+        break;
+      case 'init':
+        this.sendCommand('/init');
+        break;
+      case 'clear':
+      case 'compact': {
+        // Require double-tap: first tap turns amber, second tap within 2s sends
+        const cmd = action === 'clear' ? '/clear' : '/compact';
+        if (this._confirmAction === action && this._confirmTimer) {
+          this.clearConfirm();
+          this.sendCommand(cmd);
+        } else {
+          this.setConfirm(action, btn);
+        }
+        break;
+      }
+      case 'paste':
+        this.pasteFromClipboard();
+        break;
+      case 'dismiss':
+        // Blur active element to dismiss keyboard
+        document.activeElement?.blur();
+        break;
+    }
+  },
+
+  /** Enter confirm state: button turns amber for 2s waiting for second tap */
+  setConfirm(action, btn) {
+    this.clearConfirm();
+    this._confirmAction = action;
+    if (btn) {
+      btn.classList.add('confirming');
+      btn.dataset.origHtml = btn.innerHTML;
+      btn.textContent = 'Tap again';
+    }
+    this._confirmTimer = setTimeout(() => this.clearConfirm(), 2000);
+  },
+
+  /** Reset confirm state */
+  clearConfirm() {
+    if (this._confirmTimer) {
+      clearTimeout(this._confirmTimer);
+      this._confirmTimer = null;
+    }
+    if (this._confirmAction && this.element) {
+      const btn = this.element.querySelector(`[data-action="${this._confirmAction}"]`);
+      if (btn && btn.dataset.origHtml) {
+        btn.innerHTML = btn.dataset.origHtml;
+        delete btn.dataset.origHtml;
+      }
+      if (btn) btn.classList.remove('confirming');
+    }
+    this._confirmAction = null;
+  },
+
+  /** Send a slash command to the active session.
+   *  Sends text and Enter separately so Ink processes them as distinct events. */
+  sendCommand(command) {
+    if (!app.activeSessionId) return;
+    // Send command text first (without Enter)
+    app.sendInput(command);
+    // Send Enter separately after a brief delay so Ink has time to process the text.
+    setTimeout(() => app.sendInput('\r'), 120);
+  },
+
+  /** Send a special key (arrow, escape, etc.) directly to the PTY.
+   *  Bypasses tmux send-keys -l (literal mode) since escape sequences
+   *  must be written raw to be interpreted as key presses by Ink. */
+  sendKey(escapeSequence) {
+    if (!app.activeSessionId) return;
+    fetch(`/api/sessions/${app.activeSessionId}/input`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ input: escapeSequence })
+    }).catch(() => {});
+  },
+
+  /** Read clipboard and send contents as input */
+  /** Show a paste overlay with a textarea for iOS compatibility */
+  pasteFromClipboard() {
+    if (typeof app === 'undefined' || !app.activeSessionId) return;
+
+    // Create overlay
+    const overlay = document.createElement('div');
+    overlay.className = 'paste-overlay';
+    overlay.innerHTML = `
+      <div class="paste-dialog">
+        <textarea class="paste-textarea" placeholder="Long-press here and tap Paste"></textarea>
+        <div class="paste-actions">
+          <button class="paste-cancel">Cancel</button>
+          <button class="paste-send">Send</button>
+        </div>
+      </div>
+    `;
+
+    const textarea = overlay.querySelector('.paste-textarea');
+    const send = () => {
+      const text = textarea.value;
+      overlay.remove();
+      if (text) app.sendInput(text);
+    };
+    overlay.querySelector('.paste-cancel').addEventListener('click', () => overlay.remove());
+    overlay.querySelector('.paste-send').addEventListener('click', send);
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+
+    document.body.appendChild(overlay);
+    textarea.focus();
+  },
+
+  /** Show the accessory bar */
+  show() {
+    if (this.element) {
+      this.element.classList.add('visible');
+    }
+  },
+
+  /** Hide the accessory bar */
+  hide() {
+    if (this.element) {
+      this.element.classList.remove('visible');
+    }
+  }
+};
+
+// ============================================================================
+// Accessibility: Focus Trap for Modals
+// ============================================================================
+
+/**
+ * FocusTrap - Traps keyboard focus within an element (typically a modal).
+ * Saves the previously focused element and restores focus when deactivated.
+ */
+class FocusTrap {
+  constructor(element) {
+    this.element = element;
+    this.previouslyFocused = null;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
+  }
+
+  activate() {
+    this.previouslyFocused = document.activeElement;
+    this.element.addEventListener('keydown', this.boundHandleKeydown);
+
+    // Focus first focusable element after a brief delay (for CSS transitions)
+    requestAnimationFrame(() => {
+      const focusable = this.getFocusableElements();
+      if (focusable.length) {
+        focusable[0].focus();
+      }
+    });
+  }
+
+  deactivate() {
+    this.element.removeEventListener('keydown', this.boundHandleKeydown);
+    if (this.previouslyFocused && typeof this.previouslyFocused.focus === 'function') {
+      this.previouslyFocused.focus();
+    }
+  }
+
+  getFocusableElements() {
+    const selector = [
+      'button:not([disabled]):not([tabindex="-1"])',
+      'input:not([disabled]):not([tabindex="-1"])',
+      'select:not([disabled]):not([tabindex="-1"])',
+      'textarea:not([disabled]):not([tabindex="-1"])',
+      'a[href]:not([tabindex="-1"])',
+      '[tabindex]:not([tabindex="-1"]):not([disabled])'
+    ].join(', ');
+
+    return [...this.element.querySelectorAll(selector)].filter(
+      el => el.offsetParent !== null // Exclude hidden elements
+    );
+  }
+
+  handleKeydown(e) {
+    if (e.key !== 'Tab') return;
+
+    const focusable = this.getFocusableElements();
+    if (focusable.length === 0) return;
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+}