@ycniuqton/devlens 0.1.0

package/public/js/rules.js

@@ -0,0 +1,174 @@
+// Rules tab — manage .devlens/rules.md
+
+let currentRules = [];
+
+async function loadRules() {
+  try {
+    const res = await fetch('/api/rules');
+    currentRules = await res.json();
+    renderRules();
+  } catch (err) {
+    showToast('Failed to load rules', 'error');
+  }
+}
+
+function renderRules() {
+  const list = document.getElementById('rules-list');
+  if (!list) return;
+
+  if (!currentRules.length) {
+    list.innerHTML = '<p class="panel-empty">No rules defined</p>';
+    return;
+  }
+
+  // Sort: protected (default) first
+  const sorted = [...currentRules].sort((a, b) => (b.protected ? 1 : 0) - (a.protected ? 1 : 0));
+
+  list.innerHTML = sorted.map(rule => {
+    const lockIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
+    const trashIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`;
+
+    return `
+      <div class="rule-card ${rule.active ? 'active' : 'inactive'} ${rule.protected ? 'protected' : ''}">
+        <label class="rule-toggle">
+          <input type="checkbox" ${rule.active ? 'checked' : ''} onchange="toggleRule(${rule.index})">
+          <span class="rule-toggle-slider"></span>
+        </label>
+        <div class="rule-content">
+          <div class="rule-text">${escapeHtml(rule.content)}</div>
+          ${rule.protected ? '<span class="rule-default-badge">DEFAULT</span>' : ''}
+        </div>
+        <div class="rule-actions">
+          ${rule.protected
+            ? `<span class="rule-lock" title="Protected — cannot be deleted">${lockIcon}</span>`
+            : `<button class="btn-icon btn-icon-sm rule-delete" onclick="deleteRule(${rule.index})" title="Delete rule">${trashIcon}</button>`}
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+async function toggleRule(index) {
+  try {
+    await fetch(`/api/rules/${index}/toggle`, { method: 'PATCH' });
+    showToast('Rule toggled', 'success');
+    loadRules();
+  } catch {
+    showToast('Failed to toggle rule', 'error');
+  }
+}
+
+async function deleteRule(index) {
+  if (!confirm('Delete this rule?')) return;
+  try {
+    const res = await fetch(`/api/rules/${index}`, { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json();
+      showToast(err.error || 'Cannot delete', 'error');
+      return;
+    }
+    showToast('Rule deleted', 'success');
+    loadRules();
+  } catch {
+    showToast('Failed to delete rule', 'error');
+  }
+}
+
+async function addRule(content) {
+  if (!content || !content.trim()) return;
+  try {
+    await fetch('/api/rules', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: content.trim() }),
+    });
+    showToast('Rule added', 'success');
+    loadRules();
+  } catch {
+    showToast('Failed to add rule', 'error');
+  }
+}
+
+// Add Rule button → simple prompt
+document.getElementById('add-rule-btn')?.addEventListener('click', () => {
+  const content = prompt('Enter the new rule:');
+  if (content) addRule(content);
+});
+
+// Preset buttons
+document.querySelectorAll('.preset-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const preset = btn.getAttribute('data-preset');
+    if (preset) addRule(preset);
+  });
+});
+
+// ============================================================
+// Commit Approval
+// ============================================================
+async function loadCommitApproval() {
+  try {
+    const res = await fetch('/api/rules/commit-approval/status');
+    const data = await res.json();
+    renderCommitApproval(data);
+  } catch {}
+}
+
+function renderCommitApproval(data) {
+  const pendingBanner = document.getElementById('commit-approval-banner');
+  const approvedBanner = document.getElementById('commit-approved-banner');
+  if (!pendingBanner || !approvedBanner) return;
+
+  if (data.pending) {
+    pendingBanner.style.display = '';
+    document.getElementById('commit-approval-message').textContent = data.pending;
+    approvedBanner.style.display = 'none';
+  } else {
+    pendingBanner.style.display = 'none';
+  }
+
+  if (data.approved && data.approvedAt) {
+    approvedBanner.style.display = '';
+    document.getElementById('commit-approved-time').textContent = new Date(data.approvedAt).toLocaleString();
+  } else if (!data.pending) {
+    approvedBanner.style.display = 'none';
+  }
+}
+
+document.getElementById('approve-commit-btn')?.addEventListener('click', async () => {
+  try {
+    await fetch('/api/rules/commit-approval/approve', { method: 'POST' });
+    showToast('Commit approved', 'success');
+    loadCommitApproval();
+  } catch {
+    showToast('Failed to approve', 'error');
+  }
+});
+
+document.getElementById('reject-commit-btn')?.addEventListener('click', async () => {
+  try {
+    await fetch('/api/rules/commit-approval/reject', { method: 'POST' });
+    showToast('Commit rejected', 'info');
+    loadCommitApproval();
+  } catch {
+    showToast('Failed to reject', 'error');
+  }
+});
+
+// WebSocket handlers
+function handleRulesUpdate(payload) {
+  if (payload?.rules) {
+    currentRules = payload.rules;
+    renderRules();
+  } else {
+    loadRules();
+  }
+}
+
+function handleCommitApprovalUpdate(payload) {
+  if (payload) renderCommitApproval(payload);
+}
+
+// Initial load
+loadRules();
+loadCommitApproval();

package/public/js/tasks.js

@@ -0,0 +1,301 @@
+// Task board
+const modal = document.getElementById('task-modal');
+const taskForm = document.getElementById('task-form');
+let allTasks = [];
+let currentSessionFilter = '';
+
+document.getElementById('add-task-btn').addEventListener('click', () => openModal());
+
+// Session filter dropdown
+const sessionSelect = document.getElementById('session-filter');
+sessionSelect?.addEventListener('change', () => {
+  currentSessionFilter = sessionSelect.value;
+  loadTasks();
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal();
+});
+document.getElementById('modal-cancel').addEventListener('click', () => closeModal());
+document.getElementById('modal-close').addEventListener('click', () => closeModal());
+document.querySelector('.modal-backdrop').addEventListener('click', () => closeModal());
+
+taskForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const id = document.getElementById('task-id').value;
+  const body = {
+    title: document.getElementById('task-title-input').value,
+    description: document.getElementById('task-desc-input').value,
+    priority: document.getElementById('task-priority-input').value,
+    status: document.getElementById('task-status-input').value,
+    tags: document.getElementById('task-tags-input').value
+      .split(',').map(t => t.trim()).filter(Boolean),
+  };
+
+  try {
+    if (id) {
+      await fetch(`/api/tasks/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+    } else {
+      await fetch('/api/tasks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+    }
+    closeModal();
+    loadTasks();
+  } catch (err) {
+    showToast('Failed to save task', 'error');
+  }
+});
+
+function openModal(task = null) {
+  document.getElementById('modal-title').textContent = task ? 'Edit Task' : 'New Task';
+  document.getElementById('task-id').value = task ? task.id : '';
+  document.getElementById('task-title-input').value = task ? task.title : '';
+  document.getElementById('task-desc-input').value = task ? task.description : '';
+  document.getElementById('task-priority-input').value = task ? task.priority : 'medium';
+  document.getElementById('task-status-input').value = task ? task.status : 'pending';
+  document.getElementById('task-tags-input').value = task ? task.tags.join(', ') : '';
+
+  // Header: task number + status badge
+  const taskNum = document.getElementById('modal-task-number');
+  const statusBadge = document.getElementById('modal-status-badge');
+  if (task?.claudeTaskId) {
+    taskNum.textContent = `#${task.claudeTaskId}`;
+  } else {
+    taskNum.textContent = '';
+  }
+  if (task) {
+    statusBadge.textContent = task.status;
+    statusBadge.className = 'modal-status-badge ' + task.status;
+  } else {
+    statusBadge.textContent = '';
+    statusBadge.className = 'modal-status-badge';
+  }
+
+  // Footer: session hint
+  const sessionHint = document.getElementById('modal-session-hint');
+  sessionHint.textContent = task?.claudeSessionId ? `Session ${task.claudeSessionId.substring(0, 8)}` : '';
+
+  // Parse context (stored as JSON string with userPrompt, claudeReasoning, filesTouched)
+  let ctx = null;
+  if (task?.context) {
+    try { ctx = typeof task.context === 'string' ? JSON.parse(task.context) : task.context; } catch { ctx = { userPrompt: task.context }; }
+  }
+
+  // User prompt
+  const contextGroup = document.getElementById('task-context-group');
+  if (ctx?.userPrompt) {
+    document.getElementById('task-context-prompt').textContent = ctx.userPrompt;
+    contextGroup.style.display = '';
+  } else {
+    contextGroup.style.display = 'none';
+  }
+
+  // Claude reasoning
+  const reasoningGroup = document.getElementById('task-reasoning-group');
+  if (ctx?.claudeReasoning) {
+    document.getElementById('task-context-reasoning').textContent = ctx.claudeReasoning;
+    reasoningGroup.style.display = '';
+  } else {
+    reasoningGroup.style.display = 'none';
+  }
+
+  // Files touched
+  const filesGroup = document.getElementById('task-files-group');
+  if (ctx?.filesTouched?.length) {
+    document.getElementById('task-context-files').textContent = ctx.filesTouched.join('\n');
+    filesGroup.style.display = '';
+  } else {
+    filesGroup.style.display = 'none';
+  }
+
+  // Completion context
+  let compCtx = null;
+  if (task?.completionContext) {
+    try { compCtx = typeof task.completionContext === 'string' ? JSON.parse(task.completionContext) : task.completionContext; } catch {}
+  }
+
+  const completionGroup = document.getElementById('task-completion-group');
+  if (compCtx?.claudeReasoning) {
+    document.getElementById('task-completion-display').textContent = compCtx.claudeReasoning;
+    completionGroup.style.display = '';
+  } else {
+    completionGroup.style.display = 'none';
+  }
+
+  const completionFilesGroup = document.getElementById('task-completion-files-group');
+  if (compCtx?.filesTouched?.length) {
+    document.getElementById('task-completion-files').textContent = compCtx.filesTouched.join('\n');
+    completionFilesGroup.style.display = '';
+  } else {
+    completionFilesGroup.style.display = 'none';
+  }
+
+  // Show Claude metadata if available
+  const metaGroup = document.getElementById('task-claude-meta-group');
+  const metaDisplay = document.getElementById('task-claude-meta');
+  const metaParts = [];
+  if (task?.claudeTaskId) metaParts.push(`Task ID: #${task.claudeTaskId}`);
+  if (task?.claudeSessionId) metaParts.push(`Session: ${task.claudeSessionId.substring(0, 8)}`);
+  if (task?.activeForm) metaParts.push(`Active: ${task.activeForm}`);
+  if (task?.owner) metaParts.push(`Owner: ${task.owner}`);
+  if (task?.completedAt) metaParts.push(`Completed: ${task.completedAt}`);
+  if (task?.metadata) metaParts.push(`Metadata: ${JSON.stringify(task.metadata)}`);
+
+  if (metaParts.length > 0) {
+    metaDisplay.textContent = metaParts.join('\n');
+    metaGroup.style.display = '';
+  } else {
+    metaGroup.style.display = 'none';
+  }
+
+  // Show/hide files row
+  const filesRow = document.getElementById('modal-row-files');
+  const hasFilesRow = ctx?.filesTouched?.length || compCtx?.filesTouched?.length || metaParts.length > 0;
+  if (filesRow) filesRow.style.display = hasFilesRow ? '' : 'none';
+
+  modal.classList.remove('hidden');
+}
+
+function closeModal() {
+  modal.classList.add('hidden');
+  taskForm.reset();
+}
+
+// ---- Kanban Board ----
+async function loadTasks() {
+  try {
+    const params = currentSessionFilter ? `?session=${currentSessionFilter}` : '';
+    const res = await fetch(`/api/tasks${params}`);
+    allTasks = await res.json();
+    renderBoard();
+  } catch (err) {
+    showToast('Failed to load tasks', 'error');
+  }
+}
+
+async function loadSessions() {
+  try {
+    const res = await fetch('/api/tasks/sessions');
+    const sessions = await res.json();
+    renderSessionDropdown(sessions);
+  } catch {}
+}
+
+function renderSessionDropdown(sessions) {
+  const select = document.getElementById('session-filter');
+  if (!select) return;
+
+  const current = select.value;
+  select.innerHTML = '<option value="">All Sessions</option>';
+
+  for (const s of sessions) {
+    const name = s.name || s.sessionId.substring(0, 8);
+    const dot = s.status === 'active' ? '\u{1F7E2}' : '\u26AA';
+    const opt = document.createElement('option');
+    opt.value = s.sessionId;
+    opt.textContent = `${dot} ${name} (${s.taskCount})`;
+    select.appendChild(opt);
+  }
+
+  // Restore selection
+  if (current) select.value = current;
+}
+
+function renderBoard() {
+  ['pending', 'in-progress', 'completed', 'archived'].forEach(status => {
+    const column = document.querySelector(`.column-cards[data-status="${status}"]`);
+    const tasks = allTasks.filter(t => t.status === status);
+    const count = column.closest('.kanban-column').querySelector('.count');
+    count.textContent = tasks.length;
+
+    column.innerHTML = tasks.map(task => `
+      <div class="task-card priority-${task.priority}" draggable="true" data-id="${task.id}">
+        <div class="task-title">${escapeHtml(task.title)}</div>
+        ${task.description ? `<div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:6px">${escapeHtml(task.description).substring(0, 100)}</div>` : ''}
+        <div class="task-meta">
+          ${task.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}
+        </div>
+        ${task.dependencies.length ? `<div class="task-deps">Blocked by: ${task.dependencies.length} task(s)</div>` : ''}
+        <div class="card-actions">
+          <button onclick="editTask('${task.id}')">Edit</button>
+          <button class="delete" onclick="deleteTask('${task.id}')">Delete</button>
+        </div>
+      </div>
+    `).join('');
+
+    // Click to edit + drag events
+    column.querySelectorAll('.task-card').forEach(card => {
+      card.addEventListener('click', (e) => {
+        if (e.target.closest('.card-actions')) return; // don't trigger on Edit/Delete buttons
+        editTask(card.dataset.id);
+      });
+      card.addEventListener('dragstart', (e) => {
+        e.dataTransfer.setData('text/plain', card.dataset.id);
+        card.classList.add('dragging');
+      });
+      card.addEventListener('dragend', () => card.classList.remove('dragging'));
+    });
+  });
+
+  // Drop targets
+  document.querySelectorAll('.column-cards').forEach(col => {
+    col.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      col.classList.add('drag-over');
+    });
+    col.addEventListener('dragleave', () => col.classList.remove('drag-over'));
+    col.addEventListener('drop', async (e) => {
+      e.preventDefault();
+      col.classList.remove('drag-over');
+      const taskId = e.dataTransfer.getData('text/plain');
+      const newStatus = col.dataset.status;
+      try {
+        await fetch(`/api/tasks/${taskId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ status: newStatus }),
+        });
+        loadTasks();
+      } catch (err) {
+        showToast('Failed to update task', 'error');
+      }
+    });
+  });
+}
+
+async function editTask(id) {
+  const task = allTasks.find(t => t.id === id);
+  if (task) openModal(task);
+}
+
+async function deleteTask(id) {
+  if (!confirm('Delete this task?')) return;
+  try {
+    await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
+    loadTasks();
+  } catch (err) {
+    showToast('Failed to delete task', 'error');
+  }
+}
+
+// ---- WebSocket handlers ----
+function handleTaskUpdate() {
+  loadSessions();
+  loadTasks();
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// Initial load
+loadSessions();
+loadTasks();