claudehq 1.0.2 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudehq",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Claude HQ - A real-time command center for Claude Code sessions",
   "main": "lib/index.js",
   "bin": {

package/public/index.html

@@ -447,6 +447,70 @@
       color: #ef4444;
     }
 
+    /* Offline Sessions Section */
+    .offline-sessions-section {
+      margin-top: 8px;
+      border-top: 1px solid var(--border-primary);
+      padding-top: 8px;
+    }
+
+    .offline-sessions-section.collapsed .offline-sessions-list {
+      display: none;
+    }
+
+    .offline-sessions-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 12px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-tertiary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      cursor: pointer;
+    }
+
+    .offline-sessions-header:hover {
+      color: var(--text-secondary);
+    }
+
+    .offline-sessions-header .collapse-icon {
+      font-size: 8px;
+      transition: transform 0.15s;
+    }
+
+    .offline-sessions-section.collapsed .collapse-icon {
+      transform: rotate(-90deg);
+    }
+
+    .offline-sessions-count {
+      background: var(--bg-tertiary);
+      color: var(--text-tertiary);
+      padding: 1px 6px;
+      border-radius: 10px;
+      font-size: 10px;
+      font-weight: 500;
+    }
+
+    .offline-sessions-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Offline session groups have muted styling */
+    .offline-sessions-list .session-group {
+      opacity: 0.7;
+    }
+
+    .offline-sessions-list .session-group:hover {
+      opacity: 1;
+    }
+
+    .offline-sessions-list .session-group-icon {
+      filter: grayscale(40%);
+    }
+
     /* Session Group - Expandable container */
     .session-group {
       margin-bottom: 2px;
@@ -2552,6 +2616,77 @@
       min-height: 80px;
     }
 
+    .form-group select {
+      width: 100%;
+      padding: 10px 12px;
+      background: var(--bg-primary);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-size: 14px;
+      color: var(--text-primary);
+      font-family: inherit;
+      cursor: pointer;
+    }
+
+    .form-group select:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+    }
+
+    .form-group {
+      position: relative;
+    }
+
+    .autocomplete-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: 1000;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      margin-top: 4px;
+    }
+
+    .autocomplete-item {
+      padding: 10px 12px;
+      cursor: pointer;
+      font-size: 13px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .autocomplete-item:last-child {
+      border-bottom: none;
+    }
+
+    .autocomplete-item:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .autocomplete-item .path {
+      color: var(--text-primary);
+      font-family: 'SF Mono', monospace;
+    }
+
+    .autocomplete-item .name {
+      color: var(--text-tertiary);
+      font-size: 11px;
+      margin-top: 2px;
+    }
+
+    .autocomplete-item.type-known {
+      border-left: 3px solid var(--accent);
+    }
+
+    .autocomplete-item.type-filesystem {
+      border-left: 3px solid var(--text-tertiary);
+    }
+
     .modal-actions {
       display: flex;
       justify-content: flex-end;
@@ -2705,7 +2840,7 @@
 
       <!-- Create Session Button -->
       <div style="padding: 8px;">
-        <button class="create-session-btn" onclick="openCreateSessionModal()" title="Launch a new Claude Code session in tmux">
+        <button class="create-session-btn" onclick="alert('clicked'); document.getElementById('launch-session-modal').classList.add('open');" title="Launch a new Claude Code session in tmux">
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M12 5v14M5 12h14"/>
           </svg>
@@ -2952,6 +3087,41 @@
     </div>
   </div>
 
+  <!-- Launch Session Modal -->
+  <div class="modal-overlay" id="launch-session-modal" onclick="closeLaunchSessionModal(event)">
+    <div class="modal" onclick="event.stopPropagation()" style="max-width: 500px;">
+      <div class="modal-header">
+        <h3>Launch New Session</h3>
+        <button class="close-btn" onclick="closeLaunchSessionModal()">&times;</button>
+      </div>
+      <form class="modal-form" id="launch-session-form" onsubmit="submitLaunchSession(event)">
+        <div class="form-group">
+          <label for="launch-session-name">Session Name (optional)</label>
+          <input type="text" id="launch-session-name" placeholder="My Project">
+        </div>
+        <div class="form-group">
+          <label for="launch-session-cwd">Working Directory</label>
+          <input type="text" id="launch-session-cwd" placeholder="/path/to/project" required autocomplete="off">
+          <div id="cwd-autocomplete" class="autocomplete-dropdown" style="display: none;"></div>
+          <div class="form-hint">The directory where Claude Code will run</div>
+        </div>
+        <div class="form-group">
+          <label for="launch-session-model">Model (optional)</label>
+          <select id="launch-session-model">
+            <option value="">Default (Sonnet)</option>
+            <option value="sonnet">Sonnet</option>
+            <option value="opus">Opus</option>
+            <option value="haiku">Haiku</option>
+          </select>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" onclick="closeLaunchSessionModal()">Cancel</button>
+          <button type="submit" class="btn-primary">Launch Session</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
   <!-- Bulk Action Bar -->
   <div id="bulk-action-bar" class="bulk-action-bar" style="display: none;">
     <span class="bulk-count">0 selected</span>
@@ -3029,6 +3199,15 @@
     // Track expanded state for each session
     const expandedSessions = new Set();
 
+    // Track collapsed state for offline sessions section (collapsed by default)
+    let offlineSectionCollapsed = true;
+
+    // Toggle offline sessions section
+    function toggleOfflineSessionsSection() {
+      offlineSectionCollapsed = !offlineSectionCollapsed;
+      renderManagedSessions();
+    }
+
     // Render managed sessions list - Linear-style with expandable groups
     function renderManagedSessions() {
       const list = document.getElementById('managed-sessions-list');
@@ -3036,9 +3215,13 @@
 
       if (!list) return;
 
-      // Update count
+      // Separate active and offline sessions
+      const activeSessions = managedSessions.filter(s => s.status !== 'offline');
+      const offlineSessions = managedSessions.filter(s => s.status === 'offline');
+
+      // Update count (show only active sessions count)
       if (countEl) {
-        countEl.textContent = managedSessions.length;
+        countEl.textContent = activeSessions.length;
       }
 
       // SVG icons
@@ -3048,14 +3231,8 @@
       const plansIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>';
       const inboxIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>';
 
-      // "All Sessions" item at top
-      const allSessionsHtml = '<div class="session-view-item ' + (selectedManagedSession === null ? 'active' : '') + '" onclick="selectManagedSession(null)" style="margin: 0 4px 8px 4px;">' +
-        '<span class="view-icon">' + inboxIcon + '</span>' +
-        '<span class="view-name">All Sessions</span>' +
-      '</div>';
-
-      // Render session groups
-      list.innerHTML = allSessionsHtml + managedSessions.map(session => {
+      // Helper function to render a session group
+      function renderSessionGroup(session) {
         const isExpanded = expandedSessions.has(session.id);
         const isActiveSession = selectedManagedSession === session.id;
         const statusClass = session.status || 'offline';
@@ -3111,7 +3288,34 @@
             '</div>' +
           '</div>' +
         '</div>';
-      }).join('');
+      }
+
+      // "All Sessions" item at top
+      const allSessionsHtml = '<div class="session-view-item ' + (selectedManagedSession === null ? 'active' : '') + '" onclick="selectManagedSession(null)" style="margin: 0 4px 8px 4px;">' +
+        '<span class="view-icon">' + inboxIcon + '</span>' +
+        '<span class="view-name">All Sessions</span>' +
+      '</div>';
+
+      // Render active sessions
+      const activeSessionsHtml = activeSessions.map(renderSessionGroup).join('');
+
+      // Render offline sessions section (only if there are offline sessions)
+      let offlineSessionsHtml = '';
+      if (offlineSessions.length > 0) {
+        offlineSessionsHtml = '<div class="offline-sessions-section ' + (offlineSectionCollapsed ? 'collapsed' : '') + '">' +
+          '<div class="offline-sessions-header" onclick="toggleOfflineSessionsSection()">' +
+            '<span class="collapse-icon">▼</span>' +
+            '<span>Offline</span>' +
+            '<span class="offline-sessions-count">' + offlineSessions.length + '</span>' +
+          '</div>' +
+          '<div class="offline-sessions-list">' +
+            offlineSessions.map(renderSessionGroup).join('') +
+          '</div>' +
+        '</div>';
+      }
+
+      // Combine all HTML
+      list.innerHTML = allSessionsHtml + activeSessionsHtml + offlineSessionsHtml;
     }
 
     // Track current view within a session
@@ -3445,16 +3649,193 @@
       }
     }
 
-    // Open create session modal
+    // Open launch session modal
     function openCreateSessionModal() {
-      const name = prompt('Session name (optional):');
-      const cwd = prompt('Working directory:', process?.cwd?.() || '');
-      if (cwd === null) return; // Cancelled
+      alert('Function called!'); // Debug - remove after testing
+
+      const modal = document.getElementById('launch-session-modal');
+      if (!modal) {
+        alert('Modal not found!');
+        return;
+      }
+
+      alert('Modal found, adding open class'); // Debug - remove after testing
+
+      const form = document.getElementById('launch-session-form');
+      const cwdInput = document.getElementById('launch-session-cwd');
+      const nameInput = document.getElementById('launch-session-name');
+
+      if (form) form.reset();
+
+      // Load recent projects for autocomplete
+      loadRecentProjects();
+
+      // Set up autocomplete
+      if (cwdInput) setupCwdAutocomplete(cwdInput);
+
+      modal.classList.add('open');
+
+      if (nameInput) nameInput.focus();
+    }
+
+    function closeLaunchSessionModal(event) {
+      if (event && event.target !== event.currentTarget) return;
+      const modal = document.getElementById('launch-session-modal');
+      modal.classList.remove('open');
+      hideAutocomplete();
+    }
+
+    // Set up working directory autocomplete
+    let autocompleteTimeout = null;
+    function setupCwdAutocomplete(input) {
+      input.addEventListener('input', (e) => {
+        clearTimeout(autocompleteTimeout);
+        autocompleteTimeout = setTimeout(() => {
+          fetchAutocomplete(e.target.value);
+        }, 150);
+      });
+
+      input.addEventListener('keydown', (e) => {
+        const dropdown = document.getElementById('cwd-autocomplete');
+        const items = dropdown.querySelectorAll('.autocomplete-item');
+        const activeItem = dropdown.querySelector('.autocomplete-item.active');
+
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          if (!activeItem && items.length > 0) {
+            items[0].classList.add('active');
+          } else if (activeItem && activeItem.nextElementSibling) {
+            activeItem.classList.remove('active');
+            activeItem.nextElementSibling.classList.add('active');
+          }
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (activeItem && activeItem.previousElementSibling) {
+            activeItem.classList.remove('active');
+            activeItem.previousElementSibling.classList.add('active');
+          }
+        } else if (e.key === 'Enter' && activeItem) {
+          e.preventDefault();
+          selectAutocompleteItem(activeItem.dataset.path);
+        } else if (e.key === 'Escape') {
+          hideAutocomplete();
+        }
+      });
+
+      input.addEventListener('blur', () => {
+        // Delay hiding to allow click on item
+        setTimeout(hideAutocomplete, 200);
+      });
+    }
+
+    async function fetchAutocomplete(query) {
+      try {
+        const res = await fetch(`/api/spawner/projects/autocomplete?q=${encodeURIComponent(query)}`);
+        const data = await res.json();
+        if (data.ok && data.suggestions) {
+          showAutocomplete(data.suggestions);
+        }
+      } catch (e) {
+        console.error('Autocomplete error:', e);
+      }
+    }
+
+    function showAutocomplete(suggestions) {
+      const dropdown = document.getElementById('cwd-autocomplete');
+
+      if (suggestions.length === 0) {
+        hideAutocomplete();
+        return;
+      }
+
+      dropdown.innerHTML = suggestions.map(s => `
+        <div class="autocomplete-item type-${s.type || 'filesystem'}"
+             data-path="${escapeHtml(s.path)}"
+             onclick="selectAutocompleteItem(this.dataset.path)">
+          <div class="path">${escapeHtml(s.path)}</div>
+          ${s.name && s.name !== s.path ? `<div class="name">${escapeHtml(s.name)}</div>` : ''}
+        </div>
+      `).join('');
+
+      dropdown.style.display = 'block';
+    }
+
+    function hideAutocomplete() {
+      const dropdown = document.getElementById('cwd-autocomplete');
+      dropdown.style.display = 'none';
+    }
+
+    function selectAutocompleteItem(path) {
+      const input = document.getElementById('launch-session-cwd');
+      input.value = path;
+      hideAutocomplete();
+      input.focus();
+    }
+
+    async function loadRecentProjects() {
+      try {
+        const res = await fetch('/api/spawner/projects?limit=5');
+        const data = await res.json();
+        // Could show recent projects as suggestions, but for now just preload
+      } catch (e) {
+        // Ignore
+      }
+    }
+
+    // Submit launch session form
+    async function submitLaunchSession(event) {
+      event.preventDefault();
+
+      const name = document.getElementById('launch-session-name').value.trim();
+      const cwd = document.getElementById('launch-session-cwd').value.trim();
+      const model = document.getElementById('launch-session-model').value;
+
+      if (!cwd) {
+        alert('Working directory is required');
+        return;
+      }
+
+      try {
+        // Try the new spawner API first
+        const res = await fetch('/api/spawner/sessions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: name || undefined,
+            cwd,
+            model: model || undefined
+          })
+        });
+        const data = await res.json();
+
+        if (data.ok) {
+          closeLaunchSessionModal();
+          loadManagedSessions();
+          // Also refresh spawned sessions
+          loadSpawnedSessions();
+          showToast('Session launched successfully');
+        } else {
+          alert('Failed to launch session: ' + (data.error || 'Unknown error'));
+        }
+      } catch (e) {
+        console.error('Failed to launch session:', e);
+        alert('Failed to launch session: ' + e.message);
+      }
+    }
 
-      createManagedSession(name || undefined, cwd || undefined);
+    // Load spawned sessions (from new spawner API)
+    async function loadSpawnedSessions() {
+      try {
+        const res = await fetch('/api/spawner/sessions');
+        const data = await res.json();
+        // For now, just log - could merge with managed sessions display
+        console.log('Spawned sessions:', data.sessions);
+      } catch (e) {
+        // Ignore errors
+      }
     }
 
-    // Create managed session
+    // Legacy function for backwards compatibility
     async function createManagedSession(name, cwd) {
       try {
         const res = await fetch('/api/managed-sessions', {