agentdev-webui 1.0.0

package/public/js/app.js

@@ -0,0 +1,2379 @@
+// DOM elements
+const tabsEl = document.getElementById('tabs');
+const tabContent = document.getElementById('tabContent');
+const agentsEl = document.getElementById('agents');
+const agentsHistoryEl = document.getElementById('agentsHistory');
+const agentsTodoEl = document.getElementById('agentsTodo');
+const todoCountEl = document.getElementById('todoCount');
+const mobileTodoCountEl = document.getElementById('mobileTodoCount');
+const runBtn = document.getElementById('runBtn');
+const stopBtn = document.getElementById('stopBtn');
+const dot = document.getElementById('dot');
+const statusTxt = document.getElementById('statusTxt');
+const agentCount = document.getElementById('agentCount');
+const tooltip = document.getElementById('tooltip');
+const sidebar = document.getElementById('sidebar');
+const sidebarOverlay = document.getElementById('sidebarOverlay');
+const hamburger = document.getElementById('hamburger');
+const bottomSheet = document.getElementById('bottomSheet');
+const bottomSheetContent = document.getElementById('bottomSheetContent');
+const offlineBanner = document.getElementById('offlineBanner');
+const scrollToBottomBtn = document.getElementById('scrollToBottom');
+const logoutBtn = document.getElementById('logoutBtn');
+const projectSelector = document.getElementById('projectSelector');
+
+// ============================================================================
+// Project state
+// ============================================================================
+let currentProjectId = parseInt(localStorage.getItem('selectedProject')) || null;
+let projectsList = [];
+
+// Store raw SSE data for re-filtering on project switch
+let lastAgentsList = [];
+let lastHistoryList = [];
+let lastTodosList = [];
+
+let firstProjectMode = false;
+
+async function loadProjects() {
+  try {
+    const res = await fetch('/api/projects');
+    if (res.ok) {
+      projectsList = await res.json();
+      populateProjectSelector();
+      // Force first project creation if none exist
+      if (projectsList.length === 0 && !firstProjectMode) {
+        openFirstProjectModal();
+      }
+    }
+  } catch (e) {
+    console.log('Could not load projects:', e);
+  }
+}
+
+function openFirstProjectModal() {
+  firstProjectMode = true;
+  document.getElementById('projectModalTitle').textContent = 'Create Your First Project';
+  document.getElementById('projectSubmitBtn').textContent = 'Create Project';
+  // Make token required — update hint
+  const tokenInput = document.getElementById('projectGithubToken');
+  const tokenHint = tokenInput.parentElement.querySelector('.hint');
+  if (tokenHint) tokenHint.textContent = 'Required. This token will be used for all GitHub operations.';
+  tokenInput.setAttribute('required', 'required');
+  // Hide the close button
+  const closeBtn = document.querySelector('#manageProjectsModal .modal-close');
+  if (closeBtn) closeBtn.style.display = 'none';
+  // Hide the cancel button
+  const cancelBtn = document.querySelector('#manageProjectsModal .modal-footer button:first-child');
+  if (cancelBtn) cancelBtn.style.display = 'none';
+  document.getElementById('manageProjectsModal').classList.add('visible');
+}
+
+function populateProjectSelector() {
+  projectSelector.innerHTML = '<option value="">All Projects</option>';
+  projectsList.forEach(p => {
+    const opt = document.createElement('option');
+    opt.value = p.id;
+    opt.textContent = p.name;
+    if (currentProjectId && currentProjectId === p.id) opt.selected = true;
+    projectSelector.appendChild(opt);
+  });
+  // Show/hide edit button
+  const editBtn = document.getElementById('editProjectBtn');
+  if (editBtn) editBtn.style.display = currentProjectId ? '' : 'none';
+  populateRepoSelector();
+}
+
+function populateRepoSelector() {
+  const repoSelect = document.getElementById('ticketRepo');
+  if (!repoSelect) return;
+  repoSelect.innerHTML = '';
+
+  // Collect repos from selected project or all projects
+  let repos = [];
+  if (currentProjectId) {
+    const project = projectsList.find(p => p.id === currentProjectId);
+    if (project && project.repositories) {
+      repos = Array.isArray(project.repositories) ? project.repositories : [];
+    }
+  } else {
+    // All projects — merge all repos, deduplicate
+    const seen = new Set();
+    for (const p of projectsList) {
+      const pRepos = Array.isArray(p.repositories) ? p.repositories : [];
+      for (const r of pRepos) {
+        if (!seen.has(r)) { seen.add(r); repos.push(r); }
+      }
+    }
+  }
+
+  repos.forEach(r => {
+    const opt = document.createElement('option');
+    opt.value = r;
+    opt.textContent = r;
+    repoSelect.appendChild(opt);
+  });
+}
+
+function switchProject(val) {
+  currentProjectId = val ? parseInt(val) : null;
+  if (currentProjectId) {
+    localStorage.setItem('selectedProject', currentProjectId);
+  } else {
+    localStorage.removeItem('selectedProject');
+  }
+  // Show/hide edit button
+  const editBtn = document.getElementById('editProjectBtn');
+  if (editBtn) editBtn.style.display = currentProjectId ? '' : 'none';
+  // Re-filter all displayed data
+  updateAgents(lastAgentsList);
+  updateAgentsHistory(lastHistoryList);
+  updateTodoTickets(lastTodosList);
+  populateRepoSelector();
+}
+
+// Manage Projects Modal
+function openManageProjectsModal() {
+  document.getElementById('manageProjectsModal').classList.add('visible');
+}
+
+function closeManageProjectsModal() {
+  // Block closing if user must create their first project
+  if (firstProjectMode) return;
+
+  document.getElementById('manageProjectsModal').classList.remove('visible');
+  document.getElementById('projectFormStatus').classList.remove('visible', 'success', 'error');
+  // Reset form fields
+  document.getElementById('projectName').value = '';
+  document.getElementById('projectOrg').value = '';
+  document.getElementById('projectNumber').value = '';
+  document.getElementById('projectGithubId').value = '';
+  document.getElementById('projectStatusFieldId').value = '';
+  document.getElementById('projectGithubToken').value = '';
+  document.getElementById('projectRepositories').innerHTML = '';
+  document.getElementById('projectFieldsInfo').innerHTML = '';
+  document.getElementById('repoFetchStatus').textContent = '';
+  document.getElementById('fieldsFetchStatus').textContent = '';
+  // Reset edit state
+  editingProjectId = null;
+  document.getElementById('projectModalTitle').textContent = 'Add Project';
+  document.getElementById('projectSubmitBtn').textContent = 'Add Project';
+  // Restore close/cancel buttons
+  const closeBtn = document.querySelector('#manageProjectsModal .modal-close');
+  if (closeBtn) closeBtn.style.display = '';
+  const cancelBtn = document.querySelector('#manageProjectsModal .modal-footer button:first-child');
+  if (cancelBtn) cancelBtn.style.display = '';
+  // Restore token hint
+  const tokenInput = document.getElementById('projectGithubToken');
+  tokenInput.removeAttribute('required');
+  const tokenHint = tokenInput.parentElement.querySelector('.hint');
+  if (tokenHint) tokenHint.textContent = 'Optional. Used for fetching repos/fields below. If empty, uses your profile token.';
+
+  statusColumns = [];
+  renderStatusTable();
+}
+
+document.getElementById('manageProjectsModal')?.addEventListener('click', function(e) {
+  if (e.target === this && !firstProjectMode) closeManageProjectsModal();
+});
+
+async function fetchOrgRepos(btn) {
+  const org = document.getElementById('projectOrg').value.trim();
+  const token = document.getElementById('projectGithubToken').value.trim();
+  const statusSpan = document.getElementById('repoFetchStatus');
+  const selectEl = document.getElementById('projectRepositories');
+
+  if (!org) {
+    statusSpan.textContent = 'Fill in GitHub Org first';
+    statusSpan.style.color = '#ef4444';
+    return;
+  }
+
+  btn.disabled = true;
+  statusSpan.textContent = 'Fetching...';
+  statusSpan.style.color = '#888';
+
+  try {
+    const params = new URLSearchParams({ org });
+    if (token) params.set('token', token);
+    const res = await fetch('/api/github/repos?' + params.toString());
+    const data = await res.json();
+
+    if (!res.ok) {
+      statusSpan.textContent = data.error || 'Failed';
+      statusSpan.style.color = '#ef4444';
+      return;
+    }
+
+    // Preserve currently selected values
+    const previouslySelected = new Set(
+      Array.from(selectEl.selectedOptions).map(o => o.value)
+    );
+
+    selectEl.innerHTML = '';
+    data.forEach(repoName => {
+      const opt = document.createElement('option');
+      opt.value = repoName;
+      opt.textContent = repoName;
+      if (previouslySelected.has(repoName)) opt.selected = true;
+      selectEl.appendChild(opt);
+    });
+
+    statusSpan.textContent = data.length + ' repos loaded';
+    statusSpan.style.color = '#4ade80';
+  } catch (e) {
+    statusSpan.textContent = 'Error: ' + e.message;
+    statusSpan.style.color = '#ef4444';
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+// Status columns state for the project form
+let statusColumns = [];
+let editingProjectId = null;
+
+function editCurrentProject() {
+  if (!currentProjectId) return;
+  const project = projectsList.find(p => p.id === currentProjectId);
+  if (!project) return;
+
+  editingProjectId = currentProjectId;
+  document.getElementById('projectModalTitle').textContent = 'Edit Project';
+  document.getElementById('projectSubmitBtn').textContent = 'Save Changes';
+  document.getElementById('projectSubmitBtn').setAttribute('onclick', 'submitProject()');
+
+  // Populate form fields
+  document.getElementById('projectName').value = project.name || '';
+  document.getElementById('projectOrg').value = project.github_org || '';
+  document.getElementById('projectNumber').value = project.project_number || '';
+  document.getElementById('projectGithubId').value = project.github_project_id || '';
+  document.getElementById('projectStatusFieldId').value = project.status_field_id || '';
+  document.getElementById('projectGithubToken').value = '';
+  document.getElementById('projectFieldsInfo').innerHTML =
+    'Project ID: <span style="color:#888;">' + (project.github_project_id || '').substring(0, 25) + '...</span>' +
+    ' &bull; Status field: <span style="color:#888;">' + (project.status_field_id || '').substring(0, 25) + '...</span>';
+
+  // Populate status columns from existing status_options
+  const opts = typeof project.status_options === 'string' ? JSON.parse(project.status_options) : (project.status_options || {});
+  statusColumns = Object.entries(opts).map(([mapTo, id]) => ({
+    name: mapTo,
+    id: id,
+    mapTo: mapTo
+  }));
+  renderStatusTable();
+
+  // Populate repositories
+  const repoSelect = document.getElementById('projectRepositories');
+  repoSelect.innerHTML = '';
+  const repos = Array.isArray(project.repositories) ? project.repositories : [];
+  repos.forEach(r => {
+    const opt = document.createElement('option');
+    opt.value = r;
+    opt.textContent = r;
+    opt.selected = true;
+    repoSelect.appendChild(opt);
+  });
+
+  document.getElementById('manageProjectsModal').classList.add('visible');
+}
+
+function submitProject() {
+  if (editingProjectId) {
+    updateExistingProject();
+  } else {
+    createProject();
+  }
+}
+
+async function updateExistingProject() {
+  const name = document.getElementById('projectName').value.trim();
+  const github_org = document.getElementById('projectOrg').value.trim();
+  const project_number = parseInt(document.getElementById('projectNumber').value);
+  const github_project_id = document.getElementById('projectGithubId').value.trim();
+  const status_field_id = document.getElementById('projectStatusFieldId').value.trim();
+  const github_token = document.getElementById('projectGithubToken').value.trim();
+  const repoSelect = document.getElementById('projectRepositories');
+  const repositories = Array.from(repoSelect.selectedOptions).map(o => o.value);
+  const status_options = buildStatusOptions();
+  const statusEl = document.getElementById('projectFormStatus');
+
+  if (!name || !github_org || !project_number) {
+    statusEl.textContent = 'Name, Org, and Project Number are required';
+    statusEl.className = 'form-status visible error';
+    return;
+  }
+
+  try {
+    const body = { name, github_org, project_number, github_project_id, status_field_id, status_options, repositories };
+    if (github_token) body.github_token = github_token;
+
+    const res = await fetch('/api/projects/' + editingProjectId, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+    const data = await res.json();
+    if (res.ok) {
+      statusEl.textContent = 'Project updated!';
+      statusEl.className = 'form-status visible success';
+      await loadProjects();
+      setTimeout(closeManageProjectsModal, 1500);
+    } else {
+      statusEl.textContent = 'Error: ' + (data.error || 'Failed');
+      statusEl.className = 'form-status visible error';
+    }
+  } catch (e) {
+    statusEl.textContent = 'Error: ' + e.message;
+    statusEl.className = 'form-status visible error';
+  }
+}
+
+async function fetchProjectFields(btn) {
+  const org = document.getElementById('projectOrg').value.trim();
+  const projectNumber = document.getElementById('projectNumber').value.trim();
+  const token = document.getElementById('projectGithubToken').value.trim();
+  const statusSpan = document.getElementById('fieldsFetchStatus');
+  const infoDiv = document.getElementById('projectFieldsInfo');
+
+  if (!org || !projectNumber) {
+    statusSpan.textContent = 'Fill in Org and Project Number first';
+    statusSpan.style.color = '#ef4444';
+    return;
+  }
+
+  btn.disabled = true;
+  statusSpan.textContent = 'Fetching...';
+  statusSpan.style.color = '#888';
+
+  try {
+    const params = new URLSearchParams({ org, project_number: projectNumber });
+    if (token) params.set('token', token);
+    const res = await fetch('/api/github/project-fields?' + params.toString());
+    const data = await res.json();
+
+    if (!res.ok) {
+      statusSpan.textContent = data.error || 'Failed';
+      statusSpan.style.color = '#ef4444';
+      return;
+    }
+
+    // Auto-fill hidden fields
+    document.getElementById('projectGithubId').value = data.project_id || '';
+    if (data.status_field) {
+      document.getElementById('projectStatusFieldId').value = data.status_field.id;
+    }
+
+    infoDiv.innerHTML = 'Project: <span style="color:#4ade80;">' + (data.project_title || '?') + '</span>' +
+      ' &bull; ID: <span style="color:#888;">' + (data.project_id || '?').substring(0, 20) + '...</span>' +
+      (data.status_field ? ' &bull; Status field: <span style="color:#888;">' + data.status_field.id.substring(0, 20) + '...</span>' : '');
+
+    // Populate status columns table
+    if (data.status_field && data.status_field.options) {
+      statusColumns = data.status_field.options.map(opt => ({
+        name: opt.name,
+        id: opt.id,
+        mapTo: guessMapTo(opt.name)
+      }));
+      renderStatusTable();
+    }
+
+    statusSpan.textContent = 'Loaded';
+    statusSpan.style.color = '#4ade80';
+  } catch (e) {
+    statusSpan.textContent = 'Error: ' + e.message;
+    statusSpan.style.color = '#ef4444';
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+function guessMapTo(name) {
+  const lower = name.toLowerCase().replace(/[\s_-]/g, '');
+  if (lower === 'todo' || lower === 'backlog' || lower === 'new') return 'TODO';
+  if (lower === 'inprogress' || lower === 'doing' || lower === 'active') return 'IN_PROGRESS';
+  if (lower === 'test' || lower === 'review' || lower === 'testing' || lower === 'qa') return 'TEST';
+  if (lower === 'done' || lower === 'closed' || lower === 'complete' || lower === 'completed') return 'DONE';
+  return '';
+}
+
+function renderStatusTable() {
+  const tbody = document.getElementById('statusOptionsBody');
+  if (statusColumns.length === 0) {
+    tbody.innerHTML = '<tr><td colspan="5" style="color:#666;text-align:center;padding:12px;">No columns. Click "Fetch from GitHub" or "Add Column".</td></tr>';
+    return;
+  }
+
+  tbody.innerHTML = '';
+  statusColumns.forEach((col, i) => {
+    const tr = document.createElement('tr');
+    // Move arrows
+    const moveCell = document.createElement('td');
+    moveCell.style.cssText = 'text-align:center;white-space:nowrap;';
+    const upBtn = document.createElement('button');
+    upBtn.className = 'btn-move';
+    upBtn.textContent = '\u25B2';
+    upBtn.title = 'Move up';
+    upBtn.disabled = i === 0;
+    upBtn.onclick = () => moveStatusColumn(i, -1);
+    const downBtn = document.createElement('button');
+    downBtn.className = 'btn-move';
+    downBtn.textContent = '\u25BC';
+    downBtn.title = 'Move down';
+    downBtn.disabled = i === statusColumns.length - 1;
+    downBtn.onclick = () => moveStatusColumn(i, 1);
+    moveCell.appendChild(upBtn);
+    moveCell.appendChild(downBtn);
+    tr.appendChild(moveCell);
+
+    // Map-to selector
+    const mapCell = document.createElement('td');
+    const select = document.createElement('select');
+    ['', 'TODO', 'IN_PROGRESS', 'TEST', 'DONE'].forEach(val => {
+      const opt = document.createElement('option');
+      opt.value = val;
+      opt.textContent = val || '(skip)';
+      if (col.mapTo === val) opt.selected = true;
+      select.appendChild(opt);
+    });
+    select.onchange = () => { statusColumns[i].mapTo = select.value; };
+    mapCell.appendChild(select);
+    tr.appendChild(mapCell);
+
+    // Column name
+    const nameCell = document.createElement('td');
+    nameCell.textContent = col.name;
+    nameCell.style.color = '#eee';
+    tr.appendChild(nameCell);
+
+    // ID
+    const idCell = document.createElement('td');
+    idCell.className = 'col-id';
+    idCell.textContent = col.id;
+    idCell.title = col.id;
+    tr.appendChild(idCell);
+
+    // Remove button
+    const removeCell = document.createElement('td');
+    removeCell.className = 'col-actions';
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'btn-remove-col';
+    removeBtn.textContent = '\u00D7';
+    removeBtn.title = 'Remove column';
+    removeBtn.onclick = () => { statusColumns.splice(i, 1); renderStatusTable(); };
+    removeCell.appendChild(removeBtn);
+    tr.appendChild(removeCell);
+
+    tbody.appendChild(tr);
+  });
+}
+
+function moveStatusColumn(index, direction) {
+  const newIndex = index + direction;
+  if (newIndex < 0 || newIndex >= statusColumns.length) return;
+  const temp = statusColumns[index];
+  statusColumns[index] = statusColumns[newIndex];
+  statusColumns[newIndex] = temp;
+  renderStatusTable();
+}
+
+function showAddColumnRow() {
+  document.getElementById('addColumnRow').style.display = 'flex';
+  document.getElementById('addColumnBtn').style.display = 'none';
+  document.getElementById('addColName').value = '';
+  document.getElementById('addColId').value = '';
+  document.getElementById('addColMapTo').value = '';
+  document.getElementById('addColName').focus();
+}
+
+function hideAddColumnRow() {
+  document.getElementById('addColumnRow').style.display = 'none';
+  document.getElementById('addColumnBtn').style.display = '';
+}
+
+function confirmAddColumn() {
+  const name = document.getElementById('addColName').value.trim();
+  const id = document.getElementById('addColId').value.trim();
+  const mapTo = document.getElementById('addColMapTo').value;
+  if (!name) { document.getElementById('addColName').focus(); return; }
+  if (!id) { document.getElementById('addColId').focus(); return; }
+  statusColumns.push({ name, id, mapTo: mapTo || guessMapTo(name) });
+  renderStatusTable();
+  hideAddColumnRow();
+}
+
+function buildStatusOptions() {
+  const result = {};
+  statusColumns.forEach(col => {
+    if (col.mapTo) {
+      result[col.mapTo] = col.id;
+    }
+  });
+  return result;
+}
+
+async function createProject() {
+  const name = document.getElementById('projectName').value.trim();
+  const github_org = document.getElementById('projectOrg').value.trim();
+  const project_number = parseInt(document.getElementById('projectNumber').value);
+  const github_project_id = document.getElementById('projectGithubId').value.trim();
+  const status_field_id = document.getElementById('projectStatusFieldId').value.trim();
+  const github_token = document.getElementById('projectGithubToken').value.trim();
+  const repoSelect = document.getElementById('projectRepositories');
+  const repositories = Array.from(repoSelect.selectedOptions).map(o => o.value);
+  const status_options = buildStatusOptions();
+  const statusEl = document.getElementById('projectFormStatus');
+
+  if (!name || !github_org || !project_number || !github_project_id || !status_field_id) {
+    statusEl.textContent = 'Required: Name, Org, Project Number. Click "Fetch from GitHub" to auto-detect Project ID and Status Field.';
+    statusEl.className = 'form-status visible error';
+    return;
+  }
+
+  if (Object.keys(status_options).length === 0) {
+    statusEl.textContent = 'Map at least one status column (e.g. TODO)';
+    statusEl.className = 'form-status visible error';
+    return;
+  }
+
+  // First project requires a GitHub token
+  if (firstProjectMode && !github_token) {
+    statusEl.textContent = 'GitHub token is required for your first project';
+    statusEl.className = 'form-status visible error';
+    return;
+  }
+
+  try {
+    const payload = { name, github_org, project_number, github_project_id, status_field_id, status_options, repositories };
+    if (github_token) payload.github_token = github_token;
+    if (firstProjectMode) payload.save_token_globally = true;
+
+    const res = await fetch('/api/projects', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    const data = await res.json();
+    if (res.ok) {
+      statusEl.textContent = 'Project created!';
+      statusEl.className = 'form-status visible success';
+      const wasFirstProject = firstProjectMode;
+      firstProjectMode = false;
+      await loadProjects();
+      // Auto-select the new project
+      if (wasFirstProject && data.id) {
+        currentProjectId = data.id;
+        localStorage.setItem('selectedProject', data.id);
+        populateProjectSelector();
+      }
+      setTimeout(closeManageProjectsModal, 1500);
+    } else {
+      statusEl.textContent = 'Error: ' + (data.error || 'Failed');
+      statusEl.className = 'form-status visible error';
+    }
+  } catch (e) {
+    statusEl.textContent = 'Error: ' + e.message;
+    statusEl.className = 'form-status visible error';
+  }
+}
+
+function getOrgForProject(projectId) {
+  const p = projectsList.find(pr => pr.id === projectId);
+  return p ? p.github_org : 'data-tamer';
+}
+
+// Load projects on startup
+loadProjects();
+
+// Logout function
+async function logout() {
+  try {
+    await fetch('/api/logout', { method: 'POST' });
+  } catch (e) {
+    console.log('Logout error:', e);
+  }
+  window.location.href = '/login';
+}
+
+// Store agent data for tooltips
+const agentData = new Map();
+
+// Touch device detection
+const isTouchDevice = () => 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+// Sidebar toggle
+function toggleSidebar() {
+  sidebar.classList.toggle('open');
+  sidebarOverlay.classList.toggle('visible');
+  hamburger.classList.toggle('active');
+}
+
+function closeSidebar() {
+  sidebar.classList.remove('open');
+  sidebarOverlay.classList.remove('visible');
+  hamburger.classList.remove('active');
+}
+
+// Bottom sheet
+let currentBottomSheetAgent = null;
+
+function showBottomSheet(agent) {
+  const a = agentData.get(agent.id) || agent;
+  currentBottomSheetAgent = a;
+  let html = '';
+
+  if (a.authorAvatar || a.authorName) {
+    html += '<div class="tooltip-header">';
+    if (a.authorAvatar) {
+      html += '<img class="tooltip-avatar" src="' + a.authorAvatar + '" alt="">';
+    }
+    html += '<div class="tooltip-author">';
+    html += '<div class="tooltip-author-name">' + (a.authorName || 'Unknown') + '</div>';
+    html += '<div class="tooltip-author-time">Opened ' + (a.createdAt ? new Date(a.createdAt).toLocaleDateString() : 'recently') + '</div>';
+    html += '</div></div>';
+  }
+
+  html += '<div class="tooltip-title">#' + (a.ticket || '?') + ': ' + (a.title || 'No title') + '</div>';
+
+  if (a.description) {
+    const desc = a.description.replace(/@claude/gi, '').trim().slice(0, 300);
+    html += '<div class="tooltip-desc">' + desc + (a.description.length > 300 ? '...' : '') + '</div>';
+  }
+
+  html += '<div class="tooltip-meta">';
+  const statusClass = a.ticketStatus === 'OPEN' ? 'open' : (a.ticketStatus === 'CLOSED' ? 'closed' : 'in-progress');
+  html += '<span class="tooltip-status ' + statusClass + '">' + (a.ticketStatus || 'Unknown') + '</span>';
+  if (a.startTime) {
+    html += '<span class="tooltip-elapsed">⏱ ' + formatElapsed(a.startTime) + '</span>';
+  }
+  if (a.repo) {
+    html += '<span class="tooltip-repo">' + a.repo + '</span>';
+  }
+  html += '</div>';
+
+  html += '<button class="view-logs-btn" onclick="openAgentFromBottomSheet()">View Logs</button>';
+
+  bottomSheetContent.innerHTML = html;
+  bottomSheet.classList.add('visible');
+}
+
+function hideBottomSheet() {
+  bottomSheet.classList.remove('visible');
+  currentBottomSheetAgent = null;
+}
+
+function openAgentFromBottomSheet() {
+  if (currentBottomSheetAgent) {
+    const a = currentBottomSheetAgent;
+    hideBottomSheet();
+    closeSidebar();
+    openAgentTab(a.id, a.ticket, a.title);
+  }
+}
+
+// Close bottom sheet on tap outside or swipe down
+bottomSheet.addEventListener('touchstart', function(e) {
+  if (e.target === bottomSheet || e.target.classList.contains('bottom-sheet-handle')) {
+    this.startY = e.touches[0].clientY;
+  }
+});
+
+bottomSheet.addEventListener('touchmove', function(e) {
+  if (this.startY !== undefined) {
+    const deltaY = e.touches[0].clientY - this.startY;
+    if (deltaY > 50) {
+      hideBottomSheet();
+      this.startY = undefined;
+    }
+  }
+});
+
+bottomSheet.addEventListener('touchend', function() {
+  this.startY = undefined;
+});
+
+// Tap outside to close
+document.addEventListener('click', function(e) {
+  if (bottomSheet.classList.contains('visible') && !bottomSheet.contains(e.target) && !e.target.closest('.agent-item')) {
+    hideBottomSheet();
+  }
+});
+
+// Offline detection
+let eventSource = null;
+
+function updateOnlineStatus() {
+  if (navigator.onLine) {
+    offlineBanner.classList.remove('visible');
+    document.body.classList.remove('offline');
+    if (!eventSource || eventSource.readyState === EventSource.CLOSED) {
+      connectSSE();
+    }
+  } else {
+    offlineBanner.classList.add('visible');
+    document.body.classList.add('offline');
+  }
+}
+
+window.addEventListener('online', updateOnlineStatus);
+window.addEventListener('offline', updateOnlineStatus);
+
+// Reconnect SSE when PWA returns from background
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible' && navigator.onLine) {
+    if (!eventSource || eventSource.readyState === EventSource.CLOSED) {
+      connectSSE();
+    }
+  }
+});
+
+// Service worker registration with auto-update
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').then(function(reg) {
+    console.log('Service worker registered');
+
+    // Check for updates every 60 seconds
+    setInterval(() => {
+      reg.update().catch(err => console.log('SW update check failed:', err));
+    }, 60000);
+
+    // Check for updates on page visibility change (when user returns to app)
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        reg.update().catch(err => console.log('SW update check failed:', err));
+      }
+    });
+
+    // Handle new service worker waiting
+    reg.addEventListener('updatefound', () => {
+      const newWorker = reg.installing;
+      console.log('New service worker found, installing...');
+
+      newWorker.addEventListener('statechange', () => {
+        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+          console.log('New version ready, will reload...');
+          // New version installed, reload to activate
+          newWorker.postMessage({ type: 'SKIP_WAITING' });
+        }
+      });
+    });
+  }).catch(function(err) {
+    console.log('Service worker registration failed:', err);
+  });
+
+  // Listen for SW_UPDATED message and reload
+  navigator.serviceWorker.addEventListener('message', event => {
+    if (event.data && event.data.type === 'SW_UPDATED') {
+      console.log('Service worker updated, reloading page...');
+      window.location.reload();
+    }
+  });
+
+  // Reload when controller changes (new SW took over)
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    console.log('New service worker activated, reloading...');
+    window.location.reload();
+  });
+}
+
+// Notification system
+const notificationBell = document.getElementById('notificationBell');
+const notificationBadge = document.getElementById('notificationBadge');
+let completionCount = 0;
+const previousActiveAgents = new Map();
+
+// Audio context for notification sound
+let audioContext = null;
+
+function getAudioContext() {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  }
+  return audioContext;
+}
+
+function playNotificationSound() {
+  try {
+    const ctx = getAudioContext();
+    if (ctx.state === 'suspended') ctx.resume();
+
+    // Create a pleasant notification sound (two-tone chime)
+    const now = ctx.currentTime;
+
+    // First tone
+    const osc1 = ctx.createOscillator();
+    const gain1 = ctx.createGain();
+    osc1.connect(gain1);
+    gain1.connect(ctx.destination);
+    osc1.frequency.value = 880; // A5
+    osc1.type = 'sine';
+    gain1.gain.setValueAtTime(0.3, now);
+    gain1.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
+    osc1.start(now);
+    osc1.stop(now + 0.3);
+
+    // Second tone (higher)
+    const osc2 = ctx.createOscillator();
+    const gain2 = ctx.createGain();
+    osc2.connect(gain2);
+    gain2.connect(ctx.destination);
+    osc2.frequency.value = 1320; // E6
+    osc2.type = 'sine';
+    gain2.gain.setValueAtTime(0, now);
+    gain2.gain.setValueAtTime(0.3, now + 0.15);
+    gain2.gain.exponentialRampToValueAtTime(0.01, now + 0.5);
+    osc2.start(now + 0.15);
+    osc2.stop(now + 0.5);
+  } catch (e) {
+    console.log('Audio not available:', e);
+  }
+}
+
+// Bell state is now managed by the notification panel
+
+let notificationItems = [];
+const notificationPanel = document.getElementById('notificationPanel');
+const notificationPanelBody = document.getElementById('notificationPanelBody');
+
+function notifyCompletion(agent) {
+  // Play sound
+  playNotificationSound();
+
+  // Ring the bell
+  notificationBell.classList.add('ringing');
+  setTimeout(() => notificationBell.classList.remove('ringing'), 500);
+
+  // Add to local list
+  notificationItems.unshift({
+    title: agent.ticket ? 'Ticket #' + agent.ticket + (agent.success ? ' completed' : ' failed') : 'Agent completed',
+    message: (agent.title || agent.id) + ' ' + (agent.success ? 'completed' : 'failed'),
+    success: agent.success,
+    created_at: new Date().toISOString()
+  });
+
+  // Update badge
+  completionCount++;
+  notificationBadge.textContent = completionCount > 9 ? '9+' : completionCount;
+  notificationBadge.classList.add('visible');
+  renderNotifications();
+
+  // Show browser notification
+  if ('Notification' in window && Notification.permission === 'granted') {
+    const title = agent.ticket ? 'Ticket #' + agent.ticket + ' completed' : 'Agent completed';
+    const body = agent.title || agent.id.slice(0, 20) + '...';
+    const notification = new Notification(title, {
+      body: body,
+      icon: '/icon-192.png',
+      tag: 'agent-' + agent.id,
+      requireInteraction: false
+    });
+    notification.onclick = function() {
+      window.focus();
+      notification.close();
+    };
+    setTimeout(() => notification.close(), 5000);
+  }
+}
+
+function renderNotifications() {
+  if (notificationItems.length === 0) {
+    notificationPanelBody.innerHTML = '<div class="notification-empty">No notifications</div>';
+    return;
+  }
+  notificationPanelBody.innerHTML = notificationItems.map(n => {
+    const cls = n.metadata?.success !== false && n.success !== false ? 'success' : 'failure';
+    const ago = timeAgo(new Date(n.created_at));
+    return `<div class="notification-item ${cls}">
+      <div class="notif-title">${escapeHtml(n.title)}</div>
+      <div class="notif-message">${escapeHtml(n.message || '')}</div>
+      <div class="notif-time">${ago}</div>
+    </div>`;
+  }).join('');
+}
+
+function escapeHtml(s) {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+function timeAgo(date) {
+  const s = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (s < 60) return 'just now';
+  if (s < 3600) return Math.floor(s / 60) + 'm ago';
+  if (s < 86400) return Math.floor(s / 3600) + 'h ago';
+  return Math.floor(s / 86400) + 'd ago';
+}
+
+function toggleNotificationPanel() {
+  notificationPanel.classList.toggle('open');
+  if (notificationPanel.classList.contains('open')) {
+    renderNotifications();
+    // Request browser notification permission if not yet granted
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+  }
+}
+
+function clearNotifications() {
+  notificationItems = [];
+  completionCount = 0;
+  notificationBadge.classList.remove('visible');
+  renderNotifications();
+  fetch('/api/notifications/read', { method: 'POST' }).catch(() => {});
+}
+
+// Close panel when clicking outside
+document.addEventListener('click', function(e) {
+  if (!e.target.closest('.notification-bell') && !e.target.closest('.notification-panel')) {
+    notificationPanel.classList.remove('open');
+  }
+});
+
+// Load unread notifications from DB on page load
+async function loadNotifications() {
+  try {
+    const res = await fetch('/api/notifications');
+    if (!res.ok) return;
+    const data = await res.json();
+    if (data.notifications && data.notifications.length > 0) {
+      notificationItems = data.notifications;
+      completionCount = data.notifications.length;
+      notificationBadge.textContent = completionCount > 9 ? '9+' : completionCount;
+      notificationBadge.classList.add('visible');
+    }
+  } catch (e) { /* ignore */ }
+}
+
+// Initialize
+loadNotifications();
+
+// Create ticket modal
+const createTicketModal = document.getElementById('createTicketModal');
+const ticketRepo = document.getElementById('ticketRepo');
+const ticketDescription = document.getElementById('ticketDescription');
+const formStatus = document.getElementById('formStatus');
+const createTicketBtn = document.getElementById('createTicketBtn');
+
+function openCreateTicketModal() {
+  createTicketModal.classList.add('visible');
+  ticketDescription.focus();
+  formStatus.classList.remove('visible', 'success', 'error');
+}
+
+function closeCreateTicketModal() {
+  createTicketModal.classList.remove('visible');
+  ticketDescription.value = '';
+  formStatus.classList.remove('visible', 'success', 'error');
+}
+
+// Close on overlay click
+createTicketModal.addEventListener('click', function(e) {
+  if (e.target === createTicketModal) closeCreateTicketModal();
+});
+
+// Close on Escape key
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape' && createTicketModal.classList.contains('visible')) {
+    closeCreateTicketModal();
+  }
+});
+
+async function createTicket() {
+  const repo = ticketRepo.value;
+  const description = ticketDescription.value.trim();
+
+  if (!description) {
+    formStatus.textContent = 'Please enter a description';
+    formStatus.className = 'form-status visible error';
+    return;
+  }
+
+  // Extract title from first line
+  const lines = description.split('\n');
+  let title = lines[0].trim();
+  if (title.length > 80) title = title.slice(0, 77) + '...';
+
+  // Build body with @claude tag
+  let body = description;
+  if (!body.toLowerCase().includes('@claude')) {
+    body = '@claude\n\n' + body;
+  }
+
+  createTicketBtn.disabled = true;
+  createTicketBtn.textContent = 'Creating...';
+  formStatus.classList.remove('visible', 'success', 'error');
+
+  try {
+    const res = await fetch('/create-ticket', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repo, title, body, project_id: currentProjectId })
+    });
+
+    const data = await res.json();
+
+    if (data.success) {
+      formStatus.innerHTML = 'Ticket <a href="' + data.url + '" target="_blank">#' + data.number + '</a> created and added to project!';
+      formStatus.className = 'form-status visible success';
+
+      // Optimistic update: add ticket to board immediately
+      lastTodosList.push({
+        number: data.number,
+        repo: data.repo || repo,
+        title: title,
+        status: 'Todo',
+        hasClaude: true,
+        project_id: currentProjectId
+      });
+      updateTodoTickets(lastTodosList);
+
+      ticketDescription.value = '';
+      setTimeout(closeCreateTicketModal, 2000);
+    } else {
+      formStatus.textContent = 'Error: ' + (data.error || 'Failed to create ticket');
+      formStatus.className = 'form-status visible error';
+    }
+  } catch (e) {
+    formStatus.textContent = 'Error: ' + e.message;
+    formStatus.className = 'form-status visible error';
+  } finally {
+    createTicketBtn.disabled = false;
+    createTicketBtn.textContent = 'Create Ticket';
+  }
+}
+
+// Ctrl+Enter to submit
+ticketDescription.addEventListener('keydown', function(e) {
+  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    createTicket();
+  }
+});
+
+// Voice input using Web Speech API
+const voiceBtn = document.getElementById('voiceBtn');
+let recognition = null;
+let isRecording = false;
+
+// Check for speech recognition support
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+if (!SpeechRecognition) {
+  voiceBtn.classList.add('unsupported');
+  voiceBtn.title = 'Voice input not supported in this browser';
+} else {
+  recognition = new SpeechRecognition();
+  recognition.continuous = true;
+  recognition.interimResults = true;
+  recognition.lang = 'en-US';
+
+  let finalTranscript = '';
+  let interimTranscript = '';
+  let originalText = '';
+
+  recognition.onstart = function() {
+    isRecording = true;
+    voiceBtn.classList.add('recording');
+    voiceBtn.title = 'Recording... Click to stop';
+    originalText = ticketDescription.value;
+    finalTranscript = '';
+  };
+
+  recognition.onresult = function(event) {
+    interimTranscript = '';
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const transcript = event.results[i][0].transcript;
+      if (event.results[i].isFinal) {
+        finalTranscript += transcript + ' ';
+      } else {
+        interimTranscript += transcript;
+      }
+    }
+    // Show both final and interim results
+    const separator = originalText && !originalText.endsWith('\n') ? '\n' : '';
+    ticketDescription.value = originalText + separator + finalTranscript + interimTranscript;
+    // Scroll to bottom of textarea
+    ticketDescription.scrollTop = ticketDescription.scrollHeight;
+  };
+
+  recognition.onerror = function(event) {
+    console.log('Speech recognition error:', event.error);
+    if (event.error === 'not-allowed') {
+      formStatus.textContent = 'Microphone access denied. Please allow microphone access.';
+      formStatus.className = 'form-status visible error';
+    }
+    stopRecording();
+  };
+
+  recognition.onend = function() {
+    // Clean up the final text
+    if (finalTranscript) {
+      const separator = originalText && !originalText.endsWith('\n') ? '\n' : '';
+      ticketDescription.value = originalText + separator + finalTranscript.trim();
+    }
+    stopRecording();
+  };
+}
+
+function stopRecording() {
+  isRecording = false;
+  voiceBtn.classList.remove('recording');
+  voiceBtn.title = 'Voice input';
+}
+
+function toggleVoiceInput() {
+  if (!recognition) {
+    formStatus.textContent = 'Voice input not supported in this browser. Try Safari or Chrome.';
+    formStatus.className = 'form-status visible error';
+    return;
+  }
+
+  if (isRecording) {
+    recognition.stop();
+  } else {
+    try {
+      recognition.start();
+    } catch (e) {
+      // Already started, stop and restart
+      recognition.stop();
+      setTimeout(() => recognition.start(), 100);
+    }
+  }
+}
+
+// Add Comment Modal
+const addCommentModal = document.getElementById('addCommentModal');
+const commentFormStatus = document.getElementById('commentFormStatus');
+const commentTicketInfo = document.getElementById('commentTicketInfo');
+const commentText = document.getElementById('commentText');
+const addCommentBtn = document.getElementById('addCommentBtn');
+const commentVoiceBtn = document.getElementById('commentVoiceBtn');
+let currentCommentAgentId = null;
+
+function openCommentModal(agentId) {
+  currentCommentAgentId = agentId;
+  const agent = agentTabInfo.get(agentId) || agentData.get(agentId);
+
+  if (!agent || !agent.ticket) {
+    alert('No ticket associated with this agent');
+    return;
+  }
+
+  commentTicketInfo.innerHTML = '#' + agent.ticket + ' - ' + (agent.title || 'No title') +
+    '<br><span style="color:#888;font-size:11px;">Repo: ' + (agent.repo || 'unknown') + '</span>';
+  commentText.value = '';
+  commentFormStatus.classList.remove('visible', 'success', 'error');
+  addCommentModal.classList.add('visible');
+  commentText.focus();
+}
+
+function closeCommentModal() {
+  addCommentModal.classList.remove('visible');
+  commentText.value = '';
+  currentCommentAgentId = null;
+  commentFormStatus.classList.remove('visible', 'success', 'error');
+}
+
+// Close on overlay click
+addCommentModal.addEventListener('click', function(e) {
+  if (e.target === addCommentModal) closeCommentModal();
+});
+
+// Close on Escape
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape' && addCommentModal.classList.contains('visible')) {
+    closeCommentModal();
+  }
+});
+
+async function submitComment() {
+  const agent = agentTabInfo.get(currentCommentAgentId) || agentData.get(currentCommentAgentId);
+  if (!agent || !agent.ticket || !agent.repo) {
+    commentFormStatus.textContent = 'Missing ticket or repo information';
+    commentFormStatus.className = 'form-status visible error';
+    return;
+  }
+
+  let comment = commentText.value.trim();
+  if (!comment) {
+    commentFormStatus.textContent = 'Please enter a comment';
+    commentFormStatus.className = 'form-status visible error';
+    return;
+  }
+
+  // Auto-add @claude if not present
+  if (!comment.toLowerCase().includes('@claude')) {
+    comment = comment + '\n\n@claude';
+  }
+
+  addCommentBtn.disabled = true;
+  addCommentBtn.textContent = 'Submitting...';
+  commentFormStatus.classList.remove('visible', 'success', 'error');
+
+  try {
+    const res = await fetch('/add-comment', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        repo: agent.repo,
+        issue: agent.ticket,
+        comment: comment,
+        project_id: currentProjectId
+      })
+    });
+
+    const data = await res.json();
+
+    if (data.success) {
+      let msg = 'Comment added to ticket #' + agent.ticket;
+      if (data.reopened) {
+        msg += ' (ticket reopened and moved to Todo)';
+      }
+      commentFormStatus.textContent = msg;
+      commentFormStatus.className = 'form-status visible success';
+      commentText.value = '';
+      setTimeout(closeCommentModal, 2000);
+    } else {
+      commentFormStatus.textContent = 'Error: ' + (data.error || 'Failed to add comment');
+      commentFormStatus.className = 'form-status visible error';
+    }
+  } catch (e) {
+    commentFormStatus.textContent = 'Error: ' + e.message;
+    commentFormStatus.className = 'form-status visible error';
+  } finally {
+    addCommentBtn.disabled = false;
+    addCommentBtn.textContent = 'Add Comment';
+  }
+}
+
+// Ctrl+Enter to submit comment
+commentText.addEventListener('keydown', function(e) {
+  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    submitComment();
+  }
+});
+
+// Stop ticket
+async function stopTicket(agentId) {
+  if (!confirm('Stop this ticket? The running process will be killed and the ticket marked as failed.')) return;
+
+  try {
+    const res = await fetch('/api/agent/stop', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ agent_id: agentId })
+    });
+
+    const data = await res.json();
+    if (!data.success) {
+      alert('Failed to stop: ' + (data.error || 'Unknown error'));
+    }
+  } catch (e) {
+    alert('Failed to stop ticket: ' + e.message);
+  }
+}
+
+// Voice input for comment (reuse recognition)
+let commentRecording = false;
+let commentOriginalText = '';
+let commentFinalTranscript = '';
+
+function toggleCommentVoiceInput() {
+  if (!SpeechRecognition) {
+    commentFormStatus.textContent = 'Voice input not supported in this browser.';
+    commentFormStatus.className = 'form-status visible error';
+    return;
+  }
+
+  if (commentRecording) {
+    if (recognition) recognition.stop();
+    commentRecording = false;
+    commentVoiceBtn.classList.remove('recording');
+    return;
+  }
+
+  // Create a separate recognition instance for comments
+  const commentRecognition = new SpeechRecognition();
+  commentRecognition.continuous = true;
+  commentRecognition.interimResults = true;
+  commentRecognition.lang = 'en-US';
+
+  commentOriginalText = commentText.value;
+  commentFinalTranscript = '';
+
+  commentRecognition.onstart = function() {
+    commentRecording = true;
+    commentVoiceBtn.classList.add('recording');
+  };
+
+  commentRecognition.onresult = function(event) {
+    let interim = '';
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const transcript = event.results[i][0].transcript;
+      if (event.results[i].isFinal) {
+        commentFinalTranscript += transcript + ' ';
+      } else {
+        interim += transcript;
+      }
+    }
+    const sep = commentOriginalText && !commentOriginalText.endsWith('\n') ? '\n' : '';
+    commentText.value = commentOriginalText + sep + commentFinalTranscript + interim;
+    commentText.scrollTop = commentText.scrollHeight;
+  };
+
+  commentRecognition.onend = function() {
+    if (commentFinalTranscript) {
+      const sep = commentOriginalText && !commentOriginalText.endsWith('\n') ? '\n' : '';
+      commentText.value = commentOriginalText + sep + commentFinalTranscript.trim();
+    }
+    commentRecording = false;
+    commentVoiceBtn.classList.remove('recording');
+  };
+
+  commentRecognition.onerror = function() {
+    commentRecording = false;
+    commentVoiceBtn.classList.remove('recording');
+  };
+
+  try {
+    commentRecognition.start();
+  } catch (e) {
+    commentFormStatus.textContent = 'Could not start voice input';
+    commentFormStatus.className = 'form-status visible error';
+  }
+}
+
+function formatElapsed(startTime) {
+  if (!startTime) return '';
+  const elapsed = Date.now() - new Date(startTime).getTime();
+  const mins = Math.floor(elapsed / 60000);
+  const secs = Math.floor((elapsed % 60000) / 1000);
+  if (mins >= 60) {
+    const hrs = Math.floor(mins / 60);
+    return hrs + 'h ' + (mins % 60) + 'm';
+  }
+  return mins + 'm ' + secs + 's';
+}
+
+function showTooltip(e, agent) {
+  // Skip tooltip on touch devices - use bottom sheet instead
+  if (isTouchDevice()) return;
+
+  const a = agentData.get(agent.id) || agent;
+  let html = '';
+
+  // Header with author avatar and info
+  if (a.authorAvatar || a.authorName) {
+    html += '<div class="tooltip-header">';
+    if (a.authorAvatar) {
+      html += '<img class="tooltip-avatar" src="' + a.authorAvatar + '" alt="">';
+    }
+    html += '<div class="tooltip-author">';
+    html += '<div class="tooltip-author-name">' + (a.authorName || 'Unknown') + '</div>';
+    html += '<div class="tooltip-author-time">Opened ' + (a.createdAt ? new Date(a.createdAt).toLocaleDateString() : 'recently') + '</div>';
+    html += '</div></div>';
+  }
+
+  // Title
+  html += '<div class="tooltip-title">#' + (a.ticket || '?') + ': ' + (a.title || 'No title') + '</div>';
+
+  // Description
+  if (a.description) {
+    const desc = a.description.replace(/@claude/gi, '').trim().slice(0, 200);
+    html += '<div class="tooltip-desc">' + desc + (a.description.length > 200 ? '...' : '') + '</div>';
+  }
+
+  // Meta info
+  html += '<div class="tooltip-meta">';
+
+  // Status badge
+  const statusClass = a.ticketStatus === 'OPEN' ? 'open' : (a.ticketStatus === 'CLOSED' ? 'closed' : 'in-progress');
+  html += '<span class="tooltip-status ' + statusClass + '">' + (a.ticketStatus || 'Unknown') + '</span>';
+
+  // Elapsed time
+  if (a.startTime) {
+    html += '<span class="tooltip-elapsed">⏱ ' + formatElapsed(a.startTime) + '</span>';
+  }
+
+  // Repo
+  if (a.repo) {
+    html += '<span class="tooltip-repo">' + a.repo + '</span>';
+  }
+
+  html += '</div>';
+
+  tooltip.innerHTML = html;
+
+  // Position tooltip - use fixed width since offsetWidth may be 0 before render
+  const rect = e.target.closest('.agent-item').getBoundingClientRect();
+  const tooltipWidth = 350; // max-width from CSS
+
+  // Position to the left of sidebar
+  let left = rect.left - tooltipWidth - 15;
+  let top = rect.top;
+
+  // Keep in viewport
+  if (left < 10) {
+    // Position above or below if no room on left
+    left = Math.max(10, rect.left - tooltipWidth/2);
+    top = rect.bottom + 10;
+  }
+  if (top + 250 > window.innerHeight) {
+    top = Math.max(10, window.innerHeight - 260);
+  }
+
+  tooltip.style.left = left + 'px';
+  tooltip.style.top = top + 'px';
+  tooltip.classList.add('visible');
+}
+
+function hideTooltip() {
+  tooltip.classList.remove('visible');
+}
+
+// Handle agent item click - show bottom sheet on mobile, open tab on desktop
+function handleAgentClick(e, agent) {
+  if (isTouchDevice() && window.innerWidth <= 768) {
+    e.preventDefault();
+    showBottomSheet(agent);
+  } else {
+    openAgentTab(agent.id, agent.ticket, agent.title);
+  }
+}
+
+// Mobile sidebar tab bar: open sidebar with the correct tab
+function mobileSidebarTab(tab) {
+  // Update active state on mobile tab bar
+  document.querySelectorAll('.mobile-sidebar-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
+  switchSidebarTab(tab);
+  if (!sidebar.classList.contains('open')) {
+    toggleSidebar();
+  }
+}
+
+function switchSidebarTab(tab) {
+  document.querySelectorAll('.sidebar-tab').forEach(t => t.classList.toggle('active', t.textContent.trim().toLowerCase().startsWith(tab)));
+  document.querySelectorAll('.agent-list').forEach(l => l.classList.remove('active'));
+  if (tab === 'active') agentsEl.classList.add('active');
+  else if (tab === 'tickets') agentsTodoEl.classList.add('active');
+  else agentsHistoryEl.classList.add('active');
+}
+
+function updateAgentsHistory(list) {
+  // Store raw data for re-filtering
+  lastHistoryList = list;
+
+  // Filter by current project
+  const filtered = currentProjectId
+    ? list.filter(a => a.project_id === currentProjectId)
+    : list;
+
+  agentsHistoryEl.innerHTML = '';
+  if (filtered.length === 0) {
+    agentsHistoryEl.innerHTML = '<div style="color:#666;padding:10px;font-size:11px;">No history yet</div>';
+    return;
+  }
+  filtered.forEach(a => {
+    agentData.set(a.id, a);
+    const d = document.createElement('div');
+    d.className = 'agent-item';
+    const ticketLink = a.ticket && a.repo ?
+      '<a href="https://github.com/' + getOrgForProject(a.project_id) + '/' + a.repo + '/issues/' + a.ticket + '" target="_blank" onclick="event.stopPropagation();" style="color:#4ade80;text-decoration:none;font-weight:bold;">#' + a.ticket + '</a>' :
+      (a.ticket ? '<span class="ticket">#' + a.ticket + '</span>' : '');
+    d.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;">' +
+      '<div>' + (a.ticket ? ticketLink : '<span style="font-size:11px;color:#666;">No ticket</span>') + '</div>' +
+      '<span class="view-btn">View →</span></div>' +
+      (a.title ? '<div style="font-size:11px;color:#ccc;margin:4px 0;line-height:1.3;">' + a.title.slice(0,40) + (a.title.length > 40 ? '...' : '') + '</div>' : '') +
+      '<div style="font-size:10px;color:#888;margin-top:4px;">' + a.id.slice(0, 22) + '</div>' +
+      '<div style="font-size:10px;color:#666;">' + a.time + '</div>';
+    d.onclick = (e) => handleAgentClick(e, a);
+    d.onmouseenter = (e) => showTooltip(e, a);
+    d.onmouseleave = hideTooltip;
+    agentsHistoryEl.appendChild(d);
+  });
+}
+
+const STATUS_COLORS = { 'Todo': '#4ade80', 'In Progress': '#fbbf24', 'test': '#60a5fa', 'Done': '#888' };
+const STATUS_ORDER = ['Todo', 'In Progress', 'test', 'Done'];
+
+function updateTodoTickets(list) {
+  // Store raw data for re-filtering
+  lastTodosList = list;
+
+  // Filter by current project
+  const projectFiltered = currentProjectId
+    ? list.filter(t => t.project_id === currentProjectId)
+    : list;
+
+  // Sidebar only shows @claude tickets
+  const filtered = projectFiltered.filter(t => t.hasClaude);
+
+  agentsTodoEl.innerHTML = '';
+
+  // Update badge count (claude tickets only)
+  if (filtered.length > 0) {
+    todoCountEl.textContent = filtered.length;
+    todoCountEl.classList.add('visible');
+    if (mobileTodoCountEl) {
+      mobileTodoCountEl.textContent = filtered.length;
+      mobileTodoCountEl.classList.add('visible');
+    }
+  } else {
+    todoCountEl.classList.remove('visible');
+    if (mobileTodoCountEl) mobileTodoCountEl.classList.remove('visible');
+  }
+
+  if (filtered.length > 0) {
+    // Group by status for sidebar
+    const grouped = {};
+    filtered.forEach(t => {
+      const s = t.status || 'Todo';
+      if (!grouped[s]) grouped[s] = [];
+      grouped[s].push(t);
+    });
+
+    STATUS_ORDER.forEach(status => {
+      const tickets = grouped[status];
+      if (!tickets || tickets.length === 0) return;
+
+      const header = document.createElement('div');
+      header.style.cssText = 'padding:8px 14px;font-size:11px;font-weight:bold;color:' + (STATUS_COLORS[status] || '#888') + ';border-bottom:1px solid #0f3460;margin-top:4px;';
+      header.textContent = status + ' (' + tickets.length + ')';
+      agentsTodoEl.appendChild(header);
+
+      tickets.forEach(t => {
+        const d = document.createElement('div');
+        d.className = 'agent-item';
+        const ticketLink = '<a href="https://github.com/' + getOrgForProject(t.project_id) + '/' + t.repo + '/issues/' + t.number + '" target="_blank" onclick="event.stopPropagation();" style="color:#4ade80;text-decoration:none;font-weight:bold;">#' + t.number + '</a>';
+        d.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;">' +
+          '<div>' + ticketLink + '</div>' +
+          '<span style="font-size:10px;color:#888;">' + (t.repo || '') + '</span></div>' +
+          (t.title ? '<div style="font-size:11px;color:#ccc;margin:4px 0;line-height:1.3;">' + t.title.slice(0, 60) + (t.title.length > 60 ? '...' : '') + '</div>' : '') +
+          (t.author ? '<div style="font-size:10px;color:#666;margin-top:4px;">' +
+            (t.authorAvatar ? '<img src="' + t.authorAvatar + '" style="width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:4px;">' : '') +
+            t.author + '</div>' : '');
+        agentsTodoEl.appendChild(d);
+      });
+    });
+  }
+
+  // Always update board view
+  if (currentView === 'board') renderBoard();
+}
+
+// ============================================================================
+// Board View (Kanban)
+// ============================================================================
+const boardEl = document.getElementById('board');
+const boardContainer = document.getElementById('boardContainer');
+const logsContainer = document.getElementById('logsContainer');
+let currentView = localStorage.getItem('currentView') || 'logs';
+
+function switchView(view) {
+  currentView = view;
+  localStorage.setItem('currentView', view);
+  document.getElementById('viewLogsBtn').classList.toggle('active', view === 'logs');
+  document.getElementById('viewBoardBtn').classList.toggle('active', view === 'board');
+  if (view === 'board') {
+    logsContainer.style.display = 'none';
+    boardContainer.classList.add('active');
+    renderBoard();
+  } else {
+    boardContainer.classList.remove('active');
+    logsContainer.style.display = '';
+  }
+}
+
+function renderBoard() {
+  if (!boardEl) return;
+  const filtered = currentProjectId
+    ? lastTodosList.filter(t => t.project_id === currentProjectId)
+    : lastTodosList;
+
+  const grouped = {};
+  filtered.forEach(t => {
+    const s = t.status || 'Todo';
+    if (!grouped[s]) grouped[s] = [];
+    grouped[s].push(t);
+  });
+
+  boardEl.innerHTML = '';
+  STATUS_ORDER.forEach(status => {
+    const tickets = grouped[status] || [];
+    const color = STATUS_COLORS[status] || '#888';
+    const col = document.createElement('div');
+    col.className = 'board-column';
+    col.style.setProperty('--col-color', color);
+
+    col.innerHTML =
+      '<div class="board-column-header">' +
+        '<span class="col-title">' + status + '</span>' +
+        '<span class="col-count">' + tickets.length + '</span>' +
+      '</div>' +
+      '<div class="board-column-body"></div>';
+
+    const body = col.querySelector('.board-column-body');
+
+    // Drop zone events
+    body.dataset.status = status;
+    body.addEventListener('dragover', e => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      body.classList.add('drag-over');
+    });
+    body.addEventListener('dragleave', e => {
+      if (!body.contains(e.relatedTarget)) body.classList.remove('drag-over');
+    });
+    body.addEventListener('drop', e => {
+      e.preventDefault();
+      body.classList.remove('drag-over');
+      const data = JSON.parse(e.dataTransfer.getData('text/plain'));
+      if (data.fromStatus === status) return; // Same column
+      moveTicket(data, status);
+    });
+
+    if (tickets.length === 0) {
+      body.innerHTML = '<div class="board-empty">No tickets</div>';
+    } else {
+      tickets.forEach(t => {
+        const org = getOrgForProject(t.project_id);
+        const url = 'https://github.com/' + org + '/' + t.repo + '/issues/' + t.number;
+        const stateClass = (t.state || '').toLowerCase() === 'open' ? 'open' : 'closed';
+        const timeAgo = t.createdAt ? getTimeAgo(new Date(t.createdAt)) : '';
+        const card = document.createElement('div');
+        card.className = 'board-card';
+        card.draggable = true;
+        card.addEventListener('dragstart', e => {
+          e.dataTransfer.effectAllowed = 'move';
+          e.dataTransfer.setData('text/plain', JSON.stringify({
+            projectItemId: t.projectItemId,
+            projectId: t.project_id,
+            number: t.number,
+            fromStatus: status
+          }));
+          card.classList.add('dragging');
+          setTimeout(() => card.style.opacity = '0.4', 0);
+        });
+        card.addEventListener('dragend', () => {
+          card.classList.remove('dragging');
+          card.style.opacity = '';
+        });
+        card.addEventListener('click', e => {
+          if (e.target.tagName === 'A') return; // Don't open panel on link clicks
+          openTicketPanel(t);
+        });
+        card.innerHTML =
+          '<div class="board-card-header">' +
+            '<a href="' + url + '" target="_blank" class="board-card-number" onclick="event.stopPropagation();">#' + t.number + '</a>' +
+            '<div style="display:flex;align-items:center;gap:4px;">' +
+              (t.hasClaude ? '<span class="board-card-claude" title="@claude">AI</span>' : '') +
+              '<span class="board-card-repo">' + (t.repo || '') + '</span>' +
+            '</div>' +
+          '</div>' +
+          (t.title ? '<div class="board-card-title">' + escapeHtml(t.title) + '</div>' : '') +
+          '<div class="board-card-footer">' +
+            (t.author ? '<span class="board-card-author">' +
+              (t.authorAvatar ? '<img src="' + t.authorAvatar + '">' : '') +
+              t.author + '</span>' : '<span></span>') +
+            '<div style="display:flex;align-items:center;gap:6px;">' +
+              (timeAgo ? '<span>' + timeAgo + '</span>' : '') +
+              '<span class="board-card-state ' + stateClass + '">' + (t.state || '') + '</span>' +
+            '</div>' +
+          '</div>';
+        body.appendChild(card);
+      });
+    }
+    boardEl.appendChild(col);
+  });
+}
+
+async function moveTicket(data, targetStatus) {
+  // Optimistic update: move the ticket in local data
+  const ticket = lastTodosList.find(t => t.projectItemId === data.projectItemId);
+  if (ticket) {
+    ticket.status = targetStatus;
+    renderBoard();
+    // Also update sidebar
+    updateTodoTickets(lastTodosList);
+  }
+
+  try {
+    const res = await fetch('/api/tickets/move', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        projectItemId: data.projectItemId,
+        targetStatus: targetStatus,
+        projectId: data.projectId
+      })
+    });
+    const result = await res.json();
+    if (!result.success) {
+      console.error('Move failed:', result.error);
+      // Revert on failure
+      if (ticket) ticket.status = data.fromStatus;
+      renderBoard();
+    }
+  } catch (e) {
+    console.error('Move error:', e);
+    // Revert on failure
+    if (ticket) ticket.status = data.fromStatus;
+    renderBoard();
+  }
+}
+
+function getTimeAgo(date) {
+  const now = new Date();
+  const diff = now - date;
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return mins + 'm';
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return hrs + 'h';
+  const days = Math.floor(hrs / 24);
+  return days + 'd';
+}
+
+function escapeHtml(text) {
+  const d = document.createElement('div');
+  d.textContent = text;
+  return d.innerHTML;
+}
+
+// ============================================================================
+// Ticket Detail Panel
+// ============================================================================
+let currentPanelTicket = null;
+
+function openTicketPanel(ticket) {
+  currentPanelTicket = ticket;
+  const overlay = document.getElementById('ticketPanelOverlay');
+  const panel = document.getElementById('ticketPanel');
+  const titleEl = document.getElementById('ticketPanelTitle');
+  const bodyEl = document.getElementById('ticketPanelBody');
+
+  const org = getOrgForProject(ticket.project_id);
+  const url = 'https://github.com/' + org + '/' + ticket.repo + '/issues/' + ticket.number;
+  const stateClass = (ticket.state || '').toLowerCase() === 'open' ? 'open' : 'closed';
+  const statusColor = STATUS_COLORS[ticket.status] || '#888';
+
+  titleEl.innerHTML = '<a href="' + url + '" target="_blank">#' + ticket.number + '</a> ' +
+    '<span id="ticketTitleText">' + escapeHtml(ticket.title) + '</span>' +
+    ' <button class="ticket-edit-btn" onclick="editTicketTitle()" title="Edit title">&#9998;</button>';
+
+  let html = '<div class="ticket-meta">';
+  if (ticket.authorAvatar) {
+    html += '<span class="ticket-meta-item"><img src="' + ticket.authorAvatar + '">' + ticket.author + '</span>';
+  } else if (ticket.author) {
+    html += '<span class="ticket-meta-item">' + ticket.author + '</span>';
+  }
+  const isOpen = (ticket.state || '').toLowerCase() === 'open';
+  html += '<span class="ticket-meta-badge ' + stateClass + '">' + (ticket.state || '') + '</span>';
+  html += '<span class="ticket-meta-badge status" style="color:' + statusColor + '">' + ticket.status + '</span>';
+  html += '<span class="ticket-meta-item">' + ticket.repo + '</span>';
+  // Open/Close button
+  if (isOpen) {
+    html += '<button class="ticket-state-btn close-issue" onclick="toggleTicketState()" title="Close issue">Close issue</button>';
+  } else {
+    html += '<button class="ticket-state-btn reopen-issue" onclick="toggleTicketState()" title="Reopen issue">Reopen issue</button>';
+  }
+  if (ticket.createdAt) {
+    html += '<span class="ticket-meta-item">' + new Date(ticket.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>';
+  }
+  html += '</div>';
+
+  // Issue body with edit button
+  html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">' +
+    '<span style="font-size:12px;color:#888;font-weight:bold;">Description</span>' +
+    '<button class="ticket-edit-btn" onclick="editTicketBody()" title="Edit description">&#9998; Edit</button>' +
+  '</div>';
+  html += '<div class="ticket-body" id="ticketBodyContent">' + renderMarkdown(ticket.body || '') + '</div>';
+
+  // Comments
+  const comments = ticket.comments || [];
+  html += '<div class="ticket-comments-header">Comments (' + comments.length + ')</div>';
+  if (comments.length === 0) {
+    html += '<div class="ticket-no-comments">No comments yet</div>';
+  } else {
+    comments.forEach(c => {
+      const date = c.createdAt ? new Date(c.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
+      html += '<div class="ticket-comment">';
+      html += '<div class="ticket-comment-header">';
+      if (c.authorAvatar) html += '<img src="' + c.authorAvatar + '">';
+      html += '<span class="author">' + (c.author || 'unknown') + '</span>';
+      html += '<span class="date">' + date + '</span>';
+      html += '</div>';
+      html += '<div class="ticket-comment-body">' + renderMarkdown(c.body || '') + '</div>';
+      html += '</div>';
+    });
+  }
+
+  // Add comment input
+  html += '<div class="ticket-add-comment">' +
+    '<textarea id="newCommentText" placeholder="Write a comment..." rows="3"></textarea>' +
+    '<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:8px;">' +
+      '<button class="ticket-comment-submit" id="submitCommentBtn" onclick="submitPanelComment()">Comment</button>' +
+    '</div>' +
+  '</div>';
+
+  bodyEl.innerHTML = html;
+
+  // Ctrl+Enter to submit comment
+  const textarea = document.getElementById('newCommentText');
+  if (textarea) {
+    textarea.addEventListener('keydown', e => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        submitPanelComment();
+      }
+    });
+  }
+
+  overlay.classList.add('visible');
+  requestAnimationFrame(() => panel.classList.add('open'));
+}
+
+function closeTicketPanel() {
+  currentPanelTicket = null;
+  const overlay = document.getElementById('ticketPanelOverlay');
+  const panel = document.getElementById('ticketPanel');
+  panel.classList.remove('open');
+  setTimeout(() => overlay.classList.remove('visible'), 300);
+}
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && document.getElementById('ticketPanel').classList.contains('open')) {
+    closeTicketPanel();
+  }
+});
+
+// Edit ticket title inline
+function editTicketTitle() {
+  const t = currentPanelTicket;
+  if (!t) return;
+  const span = document.getElementById('ticketTitleText');
+  const current = t.title;
+  span.innerHTML = '<input type="text" id="editTitleInput" value="" style="width:100%;padding:4px 8px;background:#0f3460;border:1px solid #333;color:#eee;border-radius:4px;font-size:14px;">' +
+    '<div style="display:flex;gap:4px;margin-top:4px;">' +
+      '<button class="ticket-edit-save" onclick="saveTitleEdit()">Save</button>' +
+      '<button class="ticket-edit-cancel" onclick="openTicketPanel(currentPanelTicket)">Cancel</button>' +
+    '</div>';
+  document.getElementById('editTitleInput').value = current;
+  document.getElementById('editTitleInput').focus();
+  document.getElementById('editTitleInput').addEventListener('keydown', e => {
+    if (e.key === 'Enter') saveTitleEdit();
+    if (e.key === 'Escape') openTicketPanel(currentPanelTicket);
+  });
+}
+
+async function saveTitleEdit() {
+  const t = currentPanelTicket;
+  const input = document.getElementById('editTitleInput');
+  if (!t || !input) return;
+  const newTitle = input.value.trim();
+  if (!newTitle || newTitle === t.title) { openTicketPanel(t); return; }
+
+  input.disabled = true;
+  try {
+    const res = await fetch('/api/tickets/update', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repo: t.repo, issue: t.number, title: newTitle, projectId: t.project_id })
+    });
+    if (res.status === 401) { window.location.reload(); return; }
+    const result = await res.json();
+    if (result.success) {
+      t.title = newTitle;
+      openTicketPanel(t);
+    } else {
+      alert('Error: ' + result.error);
+      input.disabled = false;
+    }
+  } catch (e) {
+    alert('Error: ' + e.message);
+    input.disabled = false;
+  }
+}
+
+// Edit ticket body
+function editTicketBody() {
+  const t = currentPanelTicket;
+  if (!t) return;
+  const el = document.getElementById('ticketBodyContent');
+  el.innerHTML = '<textarea id="editBodyTextarea" style="width:100%;min-height:200px;padding:10px;background:#0f3460;border:1px solid #333;color:#eee;border-radius:4px;font-size:13px;font-family:monospace;resize:vertical;"></textarea>' +
+    '<div style="display:flex;gap:4px;margin-top:8px;">' +
+      '<button class="ticket-edit-save" onclick="saveBodyEdit()">Save</button>' +
+      '<button class="ticket-edit-cancel" onclick="openTicketPanel(currentPanelTicket)">Cancel</button>' +
+    '</div>';
+  document.getElementById('editBodyTextarea').value = t.body || '';
+  document.getElementById('editBodyTextarea').focus();
+}
+
+async function saveBodyEdit() {
+  const t = currentPanelTicket;
+  const textarea = document.getElementById('editBodyTextarea');
+  if (!t || !textarea) return;
+  const newBody = textarea.value;
+
+  textarea.disabled = true;
+  try {
+    const res = await fetch('/api/tickets/update', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repo: t.repo, issue: t.number, body: newBody, projectId: t.project_id })
+    });
+    if (res.status === 401) { window.location.reload(); return; }
+    const result = await res.json();
+    if (result.success) {
+      t.body = newBody;
+      openTicketPanel(t);
+    } else {
+      alert('Error: ' + result.error);
+      textarea.disabled = false;
+    }
+  } catch (e) {
+    alert('Error: ' + e.message);
+    textarea.disabled = false;
+  }
+}
+
+// Add comment from ticket panel
+async function submitPanelComment() {
+  const t = currentPanelTicket;
+  const textarea = document.getElementById('newCommentText');
+  const btn = document.getElementById('submitCommentBtn');
+  if (!t || !textarea) return;
+  const comment = textarea.value.trim();
+  if (!comment) { textarea.focus(); return; }
+
+  textarea.disabled = true;
+  btn.disabled = true;
+  btn.textContent = 'Sending...';
+
+  try {
+    const res = await fetch('/api/tickets/comment', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repo: t.repo, issue: t.number, comment, projectId: t.project_id })
+    });
+    if (res.status === 401) { window.location.reload(); return; }
+    const result = await res.json();
+    if (result.success) {
+      // Add comment locally and re-render
+      t.comments = t.comments || [];
+      t.comments.push({ body: comment, author: 'you', authorAvatar: '', createdAt: new Date().toISOString() });
+      openTicketPanel(t);
+      // Scroll to bottom of panel
+      const panelBody = document.getElementById('ticketPanelBody');
+      if (panelBody) panelBody.scrollTop = panelBody.scrollHeight;
+    } else {
+      alert('Error: ' + result.error);
+      textarea.disabled = false;
+      btn.disabled = false;
+      btn.textContent = 'Comment';
+    }
+  } catch (e) {
+    alert('Error: ' + e.message);
+    textarea.disabled = false;
+    btn.disabled = false;
+    btn.textContent = 'Comment';
+  }
+}
+
+// Toggle ticket open/closed state
+async function toggleTicketState() {
+  const t = currentPanelTicket;
+  if (!t) return;
+  const isOpen = (t.state || '').toLowerCase() === 'open';
+  const newState = isOpen ? 'closed' : 'open';
+  const btn = document.querySelector('.ticket-state-btn');
+  if (btn) { btn.disabled = true; btn.textContent = isOpen ? 'Closing...' : 'Reopening...'; }
+
+  try {
+    const res = await fetch('/api/tickets/update', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repo: t.repo, issue: t.number, state: newState, projectId: t.project_id })
+    });
+    if (res.status === 401) { window.location.reload(); return; }
+    const result = await res.json();
+    if (result.success) {
+      t.state = newState.toUpperCase();
+      openTicketPanel(t);
+    } else {
+      alert('Error: ' + result.error);
+      if (btn) { btn.disabled = false; btn.textContent = isOpen ? 'Close issue' : 'Reopen issue'; }
+    }
+  } catch (e) {
+    alert('Error: ' + e.message);
+    if (btn) { btn.disabled = false; btn.textContent = isOpen ? 'Close issue' : 'Reopen issue'; }
+  }
+}
+
+// Simple markdown-ish renderer for issue bodies/comments
+function renderMarkdown(text) {
+  let html = escapeHtml(text);
+  // Code blocks (must be before inline code)
+  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre style="background:#0f3460;padding:10px;border-radius:4px;overflow-x:auto;font-size:12px;margin:8px 0;">$2</pre>');
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code style="background:#0f3460;padding:1px 4px;border-radius:3px;font-size:12px;">$1</code>');
+  // Links
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+  // Bare URLs (not inside tags)
+  html = html.replace(/(^|[^"=])(https?:\/\/[^\s<]+)/g, '$1<a href="$2" target="_blank">$2</a>');
+  // Bold
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  // Italic
+  html = html.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>');
+  // Headers
+  html = html.replace(/^### (.+)$/gm, '<strong style="font-size:14px;color:#eee;">$1</strong>');
+  html = html.replace(/^## (.+)$/gm, '<strong style="font-size:15px;color:#eee;">$1</strong>');
+  html = html.replace(/^# (.+)$/gm, '<strong style="font-size:16px;color:#eee;">$1</strong>');
+  // Checkboxes
+  html = html.replace(/^- \[x\] (.+)$/gm, '<span style="color:#4ade80;">&#9745; $1</span>');
+  html = html.replace(/^- \[ \] (.+)$/gm, '<span style="color:#888;">&#9744; $1</span>');
+  // @mentions
+  html = html.replace(/@(\w+)/g, '<span style="color:#60a5fa;font-weight:bold;">@$1</span>');
+  return html;
+}
+
+// Initialize view on load
+if (currentView === 'board') {
+  setTimeout(() => switchView('board'), 100);
+}
+
+let running = false;
+let activeTab = 'global';
+const openTabs = new Set(['global']);
+const tabLogs = { global: [] };
+const autoScroll = { global: true };
+
+function setRun(r) {
+  running = r;
+  runBtn.disabled = r;
+  stopBtn.disabled = !r;
+  dot.classList.toggle('running', r);
+  statusTxt.textContent = r ? 'Running' : 'Ready';
+}
+
+function switchTab(tabId) {
+  activeTab = tabId;
+  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tabId));
+  // Hide all panels and wrappers
+  document.querySelectorAll('.logs-panel').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('[id^="wrapper-"]').forEach(w => w.style.display = 'none');
+  // Show the correct panel/wrapper
+  const wrapper = document.getElementById('wrapper-' + tabId);
+  if (wrapper) {
+    wrapper.style.display = 'block';
+  }
+  const panel = document.getElementById('panel-' + tabId);
+  if (panel) {
+    panel.classList.add('active');
+    // Always scroll to bottom when switching tabs
+    requestAnimationFrame(() => {
+      panel.scrollTo({ top: panel.scrollHeight });
+      autoScroll[tabId] = true;
+      updateScrollToBottomVisibility();
+    });
+  }
+}
+
+// Store agent tab info for comment modal
+const agentTabInfo = new Map();
+
+function openAgentTab(agentId, ticket, title) {
+  if (!openTabs.has(agentId)) {
+    openTabs.add(agentId);
+    tabLogs[agentId] = [];
+    autoScroll[agentId] = true;
+
+    // Store agent info for later use
+    const agent = agentData.get(agentId) || { id: agentId, ticket, title };
+    agentTabInfo.set(agentId, agent);
+
+    const tab = document.createElement('div');
+    tab.className = 'tab';
+    tab.dataset.tab = agentId;
+    tab.innerHTML = (ticket ? '#' + ticket + ' ' : '') + agentId.slice(0, 12) + '... <span class="close" onclick="event.stopPropagation();closeTab(\'' + agentId + '\')">&times;</span>';
+    tab.title = title || (ticket ? 'Ticket #' + ticket : 'Agent: ' + agentId);
+    tab.onclick = () => switchTab(agentId);
+    tabsEl.appendChild(tab);
+
+    // Create panel wrapper to hold both logs and footer
+    const panelWrapper = document.createElement('div');
+    panelWrapper.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;display:none;';
+    panelWrapper.id = 'wrapper-' + agentId;
+
+    const panel = document.createElement('div');
+    panel.className = 'logs-panel';
+    panel.id = 'panel-' + agentId;
+    panel.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;padding:16px;padding-bottom:70px;overflow-y:auto;';
+    panel.addEventListener('scroll', () => {
+      autoScroll[agentId] = panel.scrollTop + panel.clientHeight >= panel.scrollHeight - 50;
+      if (activeTab === agentId) {
+        updateScrollToBottomVisibility();
+      }
+    });
+
+    panelWrapper.appendChild(panel);
+
+    // Add footer with Stop + Add Comment buttons if ticket exists
+    if (ticket && agent.repo) {
+      const footer = document.createElement('div');
+      footer.className = 'logs-panel-footer visible';
+      footer.innerHTML = '<button class="stop-btn" onclick="stopTicket(\'' + agentId + '\')">' +
+        '<svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/></svg>' +
+        'Stop</button>' +
+        '<button onclick="openCommentModal(\'' + agentId + '\')">' +
+        '<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/><path d="M7 9h10v2H7zm0-3h10v2H7z"/></svg>' +
+        'Add Comment</button>';
+      panelWrapper.appendChild(footer);
+    }
+
+    tabContent.appendChild(panelWrapper);
+
+    tabLogs.global.filter(l => l.agent === agentId).forEach(l => {
+      addLogToPanel(panel, l.content, agentId, false);
+    });
+  }
+  switchTab(agentId);
+}
+
+function closeTab(tabId) {
+  if (tabId === 'global') return;
+  openTabs.delete(tabId);
+  delete tabLogs[tabId];
+  delete autoScroll[tabId];
+  agentTabInfo.delete(tabId);
+  document.querySelector('.tab[data-tab="' + tabId + '"]')?.remove();
+  document.getElementById('wrapper-' + tabId)?.remove();
+  document.getElementById('panel-' + tabId)?.remove();
+  if (activeTab === tabId) switchTab('global');
+}
+
+function clearCurrentTab() {
+  const panel = document.getElementById('panel-' + activeTab);
+  if (panel) panel.innerHTML = '';
+  if (tabLogs[activeTab]) tabLogs[activeTab] = [];
+}
+
+function formatRawJson(text) {
+  // Safety net: if raw JSON slips through, extract meaningful content
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed.type === 'assistant' && parsed.message?.content) {
+      const parts = [];
+      for (const item of parsed.message.content) {
+        if (item.type === 'text' && item.text) parts.push(item.text);
+        else if (item.type === 'tool_use') parts.push('🔧 ' + item.name + ': ' + (item.input?.description || item.input?.command || 'running'));
+      }
+      return parts.length ? parts.join('\n') : null;
+    } else if (parsed.type === 'user' && parsed.message?.content) {
+      const parts = [];
+      for (const item of parsed.message.content) {
+        if (item.type === 'tool_result') {
+          const c = typeof item.content === 'string' ? item.content : (Array.isArray(item.content) ? item.content.filter(x => x.type === 'text').map(x => x.text).join('\n') : '');
+          if (c.trim()) parts.push('  ✓ ' + c.substring(0, 200) + (c.length > 200 ? '...' : ''));
+        }
+      }
+      return parts.length ? parts.join('\n') : null;
+    } else if (parsed.type === 'result') {
+      const cost = parsed.cost_usd ? '$' + parsed.cost_usd.toFixed(4) : '';
+      return '✅ Complete' + (cost ? ' (' + cost + ')' : '');
+    }
+    return null; // Skip unknown JSON types
+  } catch (e) {
+    return text; // Not JSON, return as-is
+  }
+}
+
+function addLogToPanel(panel, text, agentId, scroll = true) {
+  // Detect and format raw JSON
+  if (text.startsWith('{') && text.includes('"type"')) {
+    text = formatRawJson(text);
+    if (!text) return; // Skip empty/unknown JSON
+  }
+
+  const d = document.createElement('div');
+  let cls = 'log-entry';
+  if (text.includes('===')) cls += ' ts';
+  else if (text.includes('✓') || text.includes('success') || text.includes('passed')) cls += ' ok';
+  else if (text.includes('error') || text.includes('FAIL') || text.includes('failed')) cls += ' err';
+  else if (text.startsWith('🔧')) cls += ' tool';
+  else if (text.includes('PHASE')) cls += ' phase';
+  d.className = cls;
+
+  // Truncate long lines and convert newlines to <br>
+  const MAX_LENGTH = 500;
+  const escapeHtml = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const formatText = (str) => escapeHtml(str).replace(/\\n/g, '\n').replace(/\n/g, '<br>');
+
+  if (text.length > MAX_LENGTH) {
+    const truncated = text.substring(0, MAX_LENGTH) + '...';
+    d.innerHTML = formatText(truncated);
+    d.title = 'Click to expand';
+    d.style.cursor = 'pointer';
+    d.dataset.fullText = text;
+    d.dataset.truncated = 'true';
+    d.onclick = function() {
+      if (this.dataset.truncated === 'true') {
+        this.innerHTML = formatText(this.dataset.fullText);
+        this.dataset.truncated = 'false';
+        this.title = 'Click to collapse';
+      } else {
+        this.innerHTML = formatText(truncated);
+        this.dataset.truncated = 'true';
+        this.title = 'Click to expand';
+      }
+    };
+  } else {
+    d.innerHTML = formatText(text);
+  }
+
+  panel.appendChild(d);
+  if (scroll) {
+    const tabId = panel.id.replace('panel-', '');
+    if (autoScroll[tabId]) {
+      requestAnimationFrame(() => panel.scrollTo({ top: panel.scrollHeight, behavior: 'smooth' }));
+    }
+  }
+}
+
+function addLog(text, agentId) {
+  tabLogs.global.push({ content: text, agent: agentId });
+  const globalPanel = document.getElementById('panel-global');
+  addLogToPanel(globalPanel, text, agentId);
+
+  if (agentId && openTabs.has(agentId)) {
+    tabLogs[agentId].push({ content: text, agent: agentId });
+    const agentPanel = document.getElementById('panel-' + agentId);
+    addLogToPanel(agentPanel, text, agentId);
+  }
+}
+
+function updateAgents(list) {
+  // Store raw data for re-filtering
+  lastAgentsList = list;
+
+  // Detect completed agents (were active before, now gone)
+  const currentActiveIds = new Set(list.filter(a => a.active).map(a => a.id));
+
+  for (const [agentId, agent] of previousActiveAgents) {
+    if (!currentActiveIds.has(agentId)) {
+      // Agent completed!
+      notifyCompletion(agent);
+      previousActiveAgents.delete(agentId);
+    }
+  }
+
+  // Update tracked active agents
+  list.filter(a => a.active).forEach(a => {
+    previousActiveAgents.set(a.id, a);
+  });
+
+  // Filter by current project
+  const filtered = currentProjectId
+    ? list.filter(a => a.project_id === currentProjectId)
+    : list;
+
+  agentsEl.innerHTML = '';
+  filtered.forEach(a => {
+    agentData.set(a.id, a);
+    const d = document.createElement('div');
+    d.className = 'agent-item' + (a.active ? ' active' : '');
+    const ticketLink = a.ticket && a.repo ?
+      '<a href="https://github.com/' + getOrgForProject(a.project_id) + '/' + a.repo + '/issues/' + a.ticket + '" target="_blank" onclick="event.stopPropagation();" style="color:#4ade80;text-decoration:none;font-weight:bold;">#' + a.ticket + '</a>' :
+      (a.ticket ? '<span class="ticket">#' + a.ticket + '</span>' : '');
+    d.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;">' +
+      '<div>' + (a.ticket ? ticketLink : '') + '</div>' +
+      '<span class="view-btn">View →</span></div>' +
+      (a.title ? '<div style="font-size:11px;color:#ccc;margin:4px 0;line-height:1.3;">' + a.title.slice(0,40) + (a.title.length > 40 ? '...' : '') + '</div>' : '') +
+      '<div style="font-size:10px;color:#666;">' + a.id.slice(0, 22) + '</div>' +
+      (a.startTime ? '<div class="elapsed">⏱ ' + formatElapsed(a.startTime) + '</div>' : '');
+    d.onclick = (e) => handleAgentClick(e, a);
+    d.onmouseenter = (e) => showTooltip(e, a);
+    d.onmouseleave = hideTooltip;
+    agentsEl.appendChild(d);
+  });
+  agentCount.textContent = 'Agents: ' + filtered.filter(a => a.active).length;
+  if (filtered.some(a => a.active)) setRun(true); else setRun(false);
+}
+
+// Update elapsed times every second
+setInterval(() => {
+  document.querySelectorAll('.agent-item .elapsed').forEach(el => {
+    const agentItem = el.closest('.agent-item');
+    const agentId = Array.from(agentData.keys()).find(id => {
+      const a = agentData.get(id);
+      return a && a.active && agentItem.textContent.includes(id.slice(0, 22));
+    });
+    if (agentId) {
+      const a = agentData.get(agentId);
+      if (a && a.startTime) {
+        el.textContent = '⏱ ' + formatElapsed(a.startTime);
+      }
+    }
+  });
+}, 1000);
+
+async function run() {
+  setRun(true);
+  try { await fetch('/run', { method: 'POST' }); } catch(e) { setRun(false); }
+}
+
+async function stop() {
+  try { await fetch('/stop', { method: 'POST' }); } catch(e) {}
+}
+
+document.getElementById('panel-global').addEventListener('scroll', function() {
+  autoScroll.global = this.scrollTop + this.clientHeight >= this.scrollHeight - 50;
+  updateScrollToBottomVisibility();
+});
+
+// Scroll to bottom button functionality
+function scrollToBottom() {
+  const panel = document.getElementById('panel-' + activeTab);
+  if (panel) {
+    panel.scrollTo({ top: panel.scrollHeight, behavior: 'smooth' });
+    autoScroll[activeTab] = true;
+  }
+}
+
+function updateScrollToBottomVisibility() {
+  const panel = document.getElementById('panel-' + activeTab);
+  if (panel) {
+    const isAtBottom = panel.scrollTop + panel.clientHeight >= panel.scrollHeight - 100;
+    if (isAtBottom) {
+      scrollToBottomBtn.classList.remove('visible');
+    } else {
+      scrollToBottomBtn.classList.add('visible');
+    }
+  }
+}
+
+function connectSSE() {
+  if (eventSource) {
+    eventSource.close();
+  }
+  eventSource = new EventSource('/logs');
+  eventSource.onmessage = e => {
+    const d = JSON.parse(e.data);
+    if (d.type === 'log') addLog(d.content, d.agent);
+    else if (d.type === 'agents') updateAgents(d.list);
+    else if (d.type === 'history') updateAgentsHistory(d.list);
+    else if (d.type === 'todos') updateTodoTickets(d.list);
+    else if (d.type === 'ticket-completed') notifyCompletion(d.ticket);
+    else if (d.type === 'done') setRun(false);
+  };
+  eventSource.onerror = () => {
+    if (!navigator.onLine) {
+      offlineBanner.classList.add('visible');
+      document.body.classList.add('offline');
+    }
+  };
+}
+
+// Initial connection
+connectSSE();
+updateOnlineStatus();