@ycniuqton/devlens 0.1.0

package/public/js/diff.js

@@ -0,0 +1,337 @@
+// Diff viewer
+var currentFilter = 'all';
+var currentViewMode = 'line-by-line';
+var fileListMode = localStorage.getItem('devlens-file-view') || 'flat';
+var diffFiles = [];
+var currentFiles = [];
+
+// Restore file list view mode from localStorage
+(function restoreFileViewMode() {
+  const flatBtn = document.getElementById('file-view-flat');
+  const treeBtn = document.getElementById('file-view-tree');
+  if (fileListMode === 'tree') {
+    treeBtn?.classList.add('active');
+    flatBtn?.classList.remove('active');
+  } else {
+    flatBtn?.classList.add('active');
+    treeBtn?.classList.remove('active');
+  }
+})();
+
+// Filter and view toggle
+document.querySelector('.header-actions')?.addEventListener('click', (e) => {
+  const btn = e.target.closest('[data-filter]') || e.target.closest('[data-view]');
+  if (!btn) return;
+
+  if (btn.dataset.filter !== undefined) {
+    document.querySelectorAll('[data-filter]').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentFilter = btn.dataset.filter;
+    loadDiff();
+  }
+
+  if (btn.dataset.view !== undefined) {
+    document.querySelectorAll('[data-view]').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentViewMode = btn.dataset.view;
+    renderAllFiles();
+  }
+});
+
+// File list click → collapse all, expand clicked, scroll to it
+document.getElementById('file-list-items').addEventListener('click', (e) => {
+  const li = e.target.closest('li');
+  if (!li || li.classList.contains('empty-state-inline')) return;
+
+  // Folder click → toggle expand/collapse
+  if (li.classList.contains('tree-folder')) {
+    const folderPath = li.dataset.folder;
+    if (folderPath) toggleFolder(folderPath);
+    return;
+  }
+
+  const fileName = li.getAttribute('title');
+  if (!fileName) return;
+
+  document.querySelectorAll('#file-list-items li').forEach(l => l.classList.remove('selected'));
+  li.classList.add('selected');
+
+  // Collapse all, expand only the clicked file
+  const sections = document.querySelectorAll('.diff-file-section');
+  for (const section of sections) {
+    if (section.dataset.file === fileName) {
+      section.classList.add('expanded');
+    } else {
+      section.classList.remove('expanded');
+    }
+  }
+
+  // Wait for reflow, then scroll with fixed header offset
+  setTimeout(() => {
+    const target = document.querySelector(`.diff-file-section[data-file="${fileName}"]`);
+    if (target) {
+      const headerOffset = 80;
+      const top = target.getBoundingClientRect().top + window.scrollY - headerOffset;
+      window.scrollTo({ top, behavior: 'smooth' });
+    }
+  }, 50);
+});
+
+// Expand all / Collapse all folders (tree view only)
+function getAllFolderPaths(files) {
+  const folderSet = new Set();
+  for (const f of files) {
+    const parts = f.path.split('/');
+    let current = '';
+    for (let i = 0; i < parts.length - 1; i++) {
+      current = current ? `${current}/${parts[i]}` : parts[i];
+      folderSet.add(current);
+    }
+  }
+  return Array.from(folderSet);
+}
+
+document.getElementById('expand-all-btn')?.addEventListener('click', () => {
+  collapsedFolders.clear();
+  saveCollapsedFolders();
+  renderFileList(currentFiles);
+});
+
+document.getElementById('collapse-all-btn')?.addEventListener('click', () => {
+  const allFolders = getAllFolderPaths(currentFiles);
+  collapsedFolders = new Set(allFolders);
+  saveCollapsedFolders();
+  renderFileList(currentFiles);
+});
+
+// Word wrap toggle
+document.getElementById('toggle-wrap')?.addEventListener('click', (e) => {
+  const btn = e.currentTarget;
+  btn.classList.toggle('active');
+  document.getElementById('diff-output').classList.toggle('word-wrap');
+});
+
+// File list view mode toggles — persist to localStorage
+function updateExpandButtonsVisibility() {
+  const visible = fileListMode === 'tree';
+  const expandBtn = document.getElementById('expand-all-btn');
+  const collapseBtn = document.getElementById('collapse-all-btn');
+  const divider = document.querySelector('.file-list-divider');
+  if (expandBtn) expandBtn.style.display = visible ? '' : 'none';
+  if (collapseBtn) collapseBtn.style.display = visible ? '' : 'none';
+  if (divider) divider.style.display = visible ? '' : 'none';
+}
+
+document.getElementById('file-view-flat')?.addEventListener('click', () => {
+  fileListMode = 'flat';
+  localStorage.setItem('devlens-file-view', 'flat');
+  document.getElementById('file-view-flat').classList.add('active');
+  document.getElementById('file-view-tree').classList.remove('active');
+  updateExpandButtonsVisibility();
+  renderFileList(currentFiles);
+});
+document.getElementById('file-view-tree')?.addEventListener('click', () => {
+  fileListMode = 'tree';
+  localStorage.setItem('devlens-file-view', 'tree');
+  document.getElementById('file-view-tree').classList.add('active');
+  document.getElementById('file-view-flat').classList.remove('active');
+  updateExpandButtonsVisibility();
+  renderFileList(currentFiles);
+});
+
+// Initial visibility
+updateExpandButtonsVisibility();
+
+async function loadDiff() {
+  try {
+    const params = currentFilter !== 'all' ? `?filter=${currentFilter}` : '';
+    const res = await fetch(`/api/diff${params}`);
+    const data = await res.json();
+    diffFiles = splitDiffByFile(data.diff || '');
+    currentFiles = data.files || [];
+    renderFileList(currentFiles);
+    renderAllFiles();
+  } catch (err) {
+    console.error('Failed to load diff:', err);
+  }
+}
+
+function splitDiffByFile(rawDiff) {
+  if (!rawDiff || !rawDiff.trim()) return [];
+
+  const files = [];
+  const lines = rawDiff.split('\n');
+  let current = null;
+
+  for (const line of lines) {
+    if (line.startsWith('diff --git')) {
+      if (current) files.push(current);
+      const match = line.match(/diff --git a\/(.*) b\/(.*)/);
+      current = {
+        name: match ? match[2] : 'unknown',
+        lines: [line],
+      };
+    } else if (current) {
+      current.lines.push(line);
+    }
+  }
+  if (current) files.push(current);
+
+  return files.map(f => ({
+    name: f.name,
+    diff: f.lines.join('\n'),
+  }));
+}
+
+function renderAllFiles() {
+  const container = document.getElementById('diff-output');
+
+  if (diffFiles.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3">
+          <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>
+        <p>No changes detected</p>
+        <span>Edit files in your project to see diffs here</span>
+      </div>`;
+    return;
+  }
+
+  const outputFormat = currentViewMode === 'side-by-side' ? 'side-by-side' : 'line-by-line';
+
+  // First file expanded, rest collapsed
+  container.innerHTML = diffFiles.map((file, i) => {
+    const diffHtml = Diff2Html.html(file.diff, {
+      drawFileList: false,
+      matching: 'lines',
+      outputFormat: outputFormat,
+      colorScheme: 'dark',
+    });
+
+    const shortName = file.name.split('/').pop();
+
+    return `
+      <div class="diff-file-section ${i === 0 ? 'expanded' : ''}" data-file="${file.name}">
+        <div class="diff-file-header" onclick="toggleFileSection(this)">
+          <svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="9 18 15 12 9 6"/>
+          </svg>
+          <span class="diff-file-name">${file.name}</span>
+          <span class="diff-file-badge">${shortName}</span>
+        </div>
+        <div class="diff-file-body">${diffHtml}</div>
+      </div>
+    `;
+  }).join('');
+}
+
+// Chevron click — toggle just this file, don't touch others
+function toggleFileSection(headerEl) {
+  const section = headerEl.closest('.diff-file-section');
+  section.classList.toggle('expanded');
+}
+
+var STATUS_LABELS = { modified: 'M', added: 'A', deleted: 'D', untracked: 'U', renamed: 'R' };
+
+function renderFileList(files) {
+  const list = document.getElementById('file-list-items');
+  const countEl = document.getElementById('file-count');
+
+  if (!files || files.length === 0) {
+    list.innerHTML = '<li class="empty-state-inline">No changed files</li>';
+    if (countEl) countEl.textContent = '0';
+    return;
+  }
+
+  if (countEl) countEl.textContent = files.length;
+
+  if (fileListMode === 'tree') {
+    list.innerHTML = renderTreeView(files);
+  } else {
+    list.innerHTML = files.map(f => `
+      <li title="${f.path}" role="button" tabindex="0" class="file-status-${f.status}">
+        <span class="status-badge ${f.status}"></span>
+        <span class="file-name">${f.path.split('/').pop()}</span>
+        <span class="status-label-tag ${f.status}">${STATUS_LABELS[f.status] || '?'}</span>
+        ${f.staged ? '<span class="tag">S</span>' : ''}
+      </li>
+    `).join('');
+  }
+}
+
+// Track collapsed folder state across renders
+var collapsedFolders = new Set(JSON.parse(localStorage.getItem('devlens-collapsed-folders') || '[]'));
+
+function saveCollapsedFolders() {
+  localStorage.setItem('devlens-collapsed-folders', JSON.stringify(Array.from(collapsedFolders)));
+}
+
+function toggleFolder(folderPath) {
+  if (collapsedFolders.has(folderPath)) {
+    collapsedFolders.delete(folderPath);
+  } else {
+    collapsedFolders.add(folderPath);
+  }
+  saveCollapsedFolders();
+  renderFileList(currentFiles);
+}
+
+function renderTreeView(files) {
+  const tree = {};
+  for (const f of files) {
+    const parts = f.path.split('/');
+    let node = tree;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (!node[parts[i]]) node[parts[i]] = {};
+      node = node[parts[i]];
+    }
+    node[parts[parts.length - 1]] = f;
+  }
+
+  function renderNode(obj, depth, parentPath) {
+    let html = '';
+    const folders = Object.keys(obj).filter(k => typeof obj[k] === 'object' && !obj[k].path);
+    const fileKeys = Object.keys(obj).filter(k => typeof obj[k] === 'object' && obj[k].path);
+
+    for (const folder of folders.sort()) {
+      const folderPath = parentPath ? `${parentPath}/${folder}` : folder;
+      const isCollapsed = collapsedFolders.has(folderPath);
+      html += `<li class="tree-folder" data-folder="${folderPath}" style="padding-left:${depth * 16}px">
+        <svg class="tree-chevron ${isCollapsed ? '' : 'expanded'}" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="9 18 15 12 9 6"/>
+        </svg>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;color:var(--color-text-muted)">
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+        </svg>
+        <span class="folder-name">${folder}</span>
+      </li>`;
+      if (!isCollapsed) {
+        html += renderNode(obj[folder], depth + 1, folderPath);
+      }
+    }
+
+    for (const key of fileKeys.sort()) {
+      const f = obj[key];
+      html += `<li title="${f.path}" role="button" tabindex="0" style="padding-left:${depth * 16 + 8}px" class="file-status-${f.status}">
+        <span class="status-badge ${f.status}"></span>
+        <span class="file-name">${key}</span>
+        <span class="status-label-tag ${f.status}">${STATUS_LABELS[f.status] || '?'}</span>
+        ${f.staged ? '<span class="tag">S</span>' : ''}
+      </li>`;
+    }
+
+    return html;
+  }
+
+  return renderNode(tree, 0, '');
+}
+
+function handleDiffUpdate(payload) {
+  loadDiff();
+}
+
+function handleStatusUpdate(payload) {}
+
+// Initial load
+loadDiff();

package/public/js/integrations.js

@@ -0,0 +1,194 @@
+// Integrations — Tunnel + Task Managers
+
+// ---- Tunnel ----
+async function loadTunnelStatus() {
+  try {
+    const res = await fetch('/api/integrations/tunnel/status');
+    const status = await res.json();
+    updateTunnelUI(status);
+  } catch {}
+}
+
+function updateTunnelUI(status) {
+  const badge = document.getElementById('tunnel-badge');
+  const activeCard = document.getElementById('tunnel-active');
+  const controls = document.getElementById('tunnel-controls');
+  const urlEl = document.getElementById('tunnel-url');
+
+  badge.className = 'tunnel-status-badge ' + status.status;
+  badge.textContent = status.status;
+
+  if (status.status === 'connected' && status.url) {
+    activeCard.style.display = '';
+    controls.style.display = 'none';
+    urlEl.href = status.url;
+    urlEl.textContent = status.url;
+  } else {
+    activeCard.style.display = 'none';
+    controls.style.display = '';
+  }
+}
+
+async function startTunnelAction(provider) {
+  const badge = document.getElementById('tunnel-badge');
+  badge.className = 'tunnel-status-badge connecting';
+  badge.textContent = 'connecting';
+
+  try {
+    const res = await fetch('/api/integrations/tunnel/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ provider }),
+    });
+    const data = await res.json();
+    if (data.ok) {
+      updateTunnelUI({ status: 'connected', url: data.url });
+      showToast(`Tunnel connected: ${data.url}`, 'success');
+    } else {
+      updateTunnelUI({ status: 'error' });
+      showToast(data.error || 'Tunnel failed', 'error');
+    }
+  } catch (err) {
+    updateTunnelUI({ status: 'error' });
+    showToast('Failed to start tunnel', 'error');
+  }
+}
+
+async function stopTunnelAction() {
+  try {
+    await fetch('/api/integrations/tunnel/stop', { method: 'POST' });
+    updateTunnelUI({ status: 'disconnected' });
+    showToast('Tunnel disconnected', 'info');
+  } catch {
+    showToast('Failed to stop tunnel', 'error');
+  }
+}
+
+function copyTunnelUrl() {
+  const url = document.getElementById('tunnel-url').textContent;
+  navigator.clipboard.writeText(url).then(() => {
+    showToast('URL copied!', 'success');
+  });
+}
+
+// ---- Task Managers (Jira / Linear) ----
+async function loadIntegrations() {
+  const container = document.getElementById('integrations-content');
+  try {
+    const res = await fetch('/api/integrations/status');
+    const status = await res.json();
+
+    if (!status.jira && !status.linear) {
+      container.innerHTML = `
+        <div class="integration-card">
+          <h4><span class="source-badge jira">Jira</span> Configuration</h4>
+          <form id="jira-config-form" class="config-form">
+            <div class="form-row">
+              <div class="form-group"><label>Base URL<input type="url" id="jira-url" placeholder="https://myorg.atlassian.net"></label></div>
+              <div class="form-group"><label>Email<input type="email" id="jira-email" placeholder="you@example.com"></label></div>
+            </div>
+            <div class="form-row">
+              <div class="form-group"><label>API Token<input type="password" id="jira-token"></label></div>
+              <div class="form-group"><label>Project Key<input type="text" id="jira-project" placeholder="DEV"></label></div>
+            </div>
+            <button type="submit" class="btn btn-primary" style="margin-top:var(--sp-2)">Save Jira Config</button>
+          </form>
+        </div>
+        <div class="integration-card">
+          <h4><span class="source-badge linear">Linear</span> Configuration</h4>
+          <form id="linear-config-form" class="config-form">
+            <div class="form-row">
+              <div class="form-group"><label>API Key<input type="password" id="linear-key"></label></div>
+              <div class="form-group"><label>Team ID (optional)<input type="text" id="linear-team"></label></div>
+            </div>
+            <button type="submit" class="btn btn-primary" style="margin-top:var(--sp-2)">Save Linear Config</button>
+          </form>
+        </div>
+      `;
+
+      document.getElementById('jira-config-form')?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        await saveConfig({
+          jira: {
+            baseUrl: document.getElementById('jira-url').value,
+            email: document.getElementById('jira-email').value,
+            apiToken: document.getElementById('jira-token').value,
+            projectKey: document.getElementById('jira-project').value,
+          }
+        });
+      });
+
+      document.getElementById('linear-config-form')?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        await saveConfig({
+          linear: {
+            apiKey: document.getElementById('linear-key').value,
+            teamId: document.getElementById('linear-team').value || undefined,
+          }
+        });
+      });
+    } else {
+      const issuesRes = await fetch('/api/integrations/all');
+      const issues = await issuesRes.json();
+      renderExternalTasks(container, issues, status);
+    }
+  } catch (err) {
+    container.innerHTML = '<p class="panel-empty">Failed to load integrations</p>';
+  }
+}
+
+async function saveConfig(config) {
+  try {
+    await fetch('/api/integrations/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(config),
+    });
+    showToast('Configuration saved', 'success');
+    loadIntegrations();
+  } catch (err) {
+    showToast('Failed to save config', 'error');
+  }
+}
+
+function renderExternalTasks(container, tasks, status) {
+  const sources = [];
+  if (status.jira) sources.push('<span class="source-badge jira">Jira</span>');
+  if (status.linear) sources.push('<span class="source-badge linear">Linear</span>');
+
+  container.innerHTML = `
+    <div style="display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)">
+      <span style="color:var(--color-text-secondary)">Connected:</span>
+      ${sources.join(' ')}
+      <button class="btn btn-ghost btn-sm" onclick="loadIntegrations()" style="margin-left:auto">Refresh</button>
+    </div>
+    ${tasks.length === 0 ? '<p class="panel-empty">No external tasks found</p>' : ''}
+    ${tasks.map(t => `
+      <div class="integration-card">
+        <h4>
+          <span class="source-badge ${t.source}">${t.source}</span>
+          <a href="${escapeHtml(t.url)}" target="_blank" style="color:var(--color-primary-hover)">${escapeHtml(t.externalId)}</a>
+          — ${escapeHtml(t.title)}
+        </h4>
+        <p style="color:var(--color-text-secondary);font-size:var(--text-sm)">${escapeHtml(t.description || '').substring(0, 200)}</p>
+        <div style="margin-top:var(--sp-2);display:flex;gap:var(--sp-2)">
+          <span class="tag">${t.status}</span>
+          <span class="tag">${t.priority}</span>
+          ${t.assignee ? `<span style="color:var(--color-text-muted);font-size:var(--text-xs)">${escapeHtml(t.assignee)}</span>` : ''}
+        </div>
+      </div>
+    `).join('')}
+  `;
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// Load on tab click
+document.querySelector('[data-tab="integrations"]')?.addEventListener('click', () => {
+  loadTunnelStatus();
+  loadIntegrations();
+});