@proflandrigan/shards 1.1.0

package/src/ui/js/pinboard.js

@@ -0,0 +1,186 @@
+// ═══════════════════════════════════════════════════════════════
+// Pinboard — drag-and-drop context shelf above chat input
+// ═══════════════════════════════════════════════════════════════
+
+// Pin types: { type: 'file', path, name } or { type: 'snippet', path, name, text, startLine, endLine }
+
+function addPin(pin) {
+  // Deduplicate: don't add the same file twice (snippets can repeat)
+  if (pin.type === 'file') {
+    for (var i = 0; i < pinnedItems.length; i++) {
+      if (pinnedItems[i].type === 'file' && pinnedItems[i].path === pin.path) return;
+    }
+  }
+  pinnedItems.push(pin);
+  renderPinboard();
+}
+
+function removePin(index) {
+  pinnedItems.splice(index, 1);
+  renderPinboard();
+}
+
+function clearAllPins() {
+  pinnedItems.length = 0;
+  renderPinboard();
+}
+
+function pinCurrentSelection() {
+  var ctx = captureSelectionContext();
+  if (!ctx) return;
+  addPin({
+    type: 'snippet',
+    path: ctx.filePath,
+    name: ctx.filePath.split('/').pop() +
+      (ctx.startLine != null
+        ? ':' + ctx.startLine + (ctx.endLine !== ctx.startLine ? '-' + ctx.endLine : '')
+        : ''),
+    text: ctx.text,
+    startLine: ctx.startLine,
+    endLine: ctx.endLine,
+  });
+}
+
+function pinFileByPath(filePath) {
+  addPin({
+    type: 'file',
+    path: filePath,
+    name: filePath.split('/').pop(),
+  });
+}
+
+function renderPinboard() {
+  var el = document.getElementById('pinboard');
+  if (!el) return;
+
+  if (pinnedItems.length === 0) {
+    el.classList.remove('visible');
+    el.innerHTML = '';
+    if (typeof renderHud === 'function') renderHud();
+    return;
+  }
+
+  el.classList.add('visible');
+  var html = '<div class="pinboard-header">' +
+    '<span class="pinboard-label">Pinned Context</span>' +
+    '<button class="pinboard-clear" onclick="clearAllPins()" title="Clear all pins">&times; Clear</button>' +
+  '</div><div class="pinboard-chips">';
+
+  for (var i = 0; i < pinnedItems.length; i++) {
+    var pin = pinnedItems[i];
+    var icon = pin.type === 'file' ? '&#128196;' : '&#9998;';
+    var tooltip = pin.type === 'snippet'
+      ? esc(pin.path) + (pin.startLine != null ? ':' + pin.startLine + '-' + pin.endLine : '')
+      : esc(pin.path);
+    html += '<span class="pin-chip" title="' + tooltip + '" data-index="' + i + '">' +
+      '<span class="pin-chip-icon">' + icon + '</span>' +
+      '<span class="pin-chip-name">' + esc(pin.name) + '</span>' +
+      '<button class="pin-chip-remove" onclick="removePin(' + i + ')" title="Unpin">&times;</button>' +
+    '</span>';
+  }
+
+  html += '</div>';
+  el.innerHTML = html;
+  if (typeof renderHud === 'function') renderHud();
+}
+
+// ─── Format pinned context for message prepending ───────────
+
+async function formatPinnedContextForMessage(userMessage) {
+  if (pinnedItems.length === 0) return userMessage;
+
+  // Fetch all file contents in parallel
+  var fetches = pinnedItems.map(function(pin) {
+    if (pin.type === 'file') return fetchPinnedFileContent(pin.path);
+    return Promise.resolve(null);
+  });
+  var results = await Promise.all(fetches);
+
+  var sections = [];
+  for (var i = 0; i < pinnedItems.length; i++) {
+    var pin = pinnedItems[i];
+    if (pin.type === 'snippet') {
+      var fileRef = 'File: ' + pin.path;
+      if (pin.startLine != null) {
+        fileRef += pin.startLine === pin.endLine
+          ? ' (line ' + pin.startLine + ')'
+          : ' (lines ' + pin.startLine + '-' + pin.endLine + ')';
+      }
+      sections.push(fileRef + '\n```\n' + pin.text + '\n```');
+    } else if (pin.type === 'file') {
+      var content = results[i];
+      if (content !== null) {
+        sections.push('File: ' + pin.path + '\n```\n' + content + '\n```');
+      } else {
+        sections.push('File: ' + pin.path + ' (could not read)');
+      }
+    }
+  }
+
+  return '--- Pinned Context ---\n' + sections.join('\n\n') + '\n--- End Pinned Context ---\n\n' + userMessage;
+}
+
+async function fetchPinnedFileContent(filePath) {
+  try {
+    var res = await authFetch('/browse/file/text?path=' + encodeURIComponent(filePath));
+    if (!res.ok) return null;
+    var text = await res.text();
+    // Truncate very large files to keep context manageable
+    if (text.length > 20000) {
+      text = text.substring(0, 20000) + '\n... (truncated, ' + text.length + ' chars total)';
+    }
+    return text;
+  } catch (e) {
+    return null;
+  }
+}
+
+// ─── Drag-and-drop handling ─────────────────────────────────
+
+function initPinboardDropZone() {
+  var chatPane = document.getElementById('chat-pane');
+  if (!chatPane) return;
+
+  chatPane.addEventListener('dragover', function(e) {
+    if (!e.dataTransfer.types.includes('application/x-shards-file')) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    var pinboard = document.getElementById('pinboard');
+    if (pinboard) pinboard.classList.add('drag-over');
+  });
+
+  chatPane.addEventListener('dragleave', function(e) {
+    // Only remove highlight if leaving the chat pane entirely
+    if (e.relatedTarget && chatPane.contains(e.relatedTarget)) return;
+    var pinboard = document.getElementById('pinboard');
+    if (pinboard) pinboard.classList.remove('drag-over');
+  });
+
+  chatPane.addEventListener('drop', function(e) {
+    var pinboard = document.getElementById('pinboard');
+    if (pinboard) pinboard.classList.remove('drag-over');
+
+    var filePath = e.dataTransfer.getData('application/x-shards-file');
+    if (!filePath) return;
+    e.preventDefault();
+    pinFileByPath(filePath);
+  });
+}
+
+function makeExplorerEntryDraggable(row, fullPath) {
+  row.setAttribute('draggable', 'true');
+  row.addEventListener('dragstart', function(e) {
+    e.dataTransfer.setData('application/x-shards-file', fullPath);
+    e.dataTransfer.setData('text/plain', fullPath);
+    e.dataTransfer.effectAllowed = 'copy';
+    row.classList.add('dragging');
+    // Show drop zone indicator
+    var pinboard = document.getElementById('pinboard');
+    if (pinboard) pinboard.classList.add('drop-target');
+  });
+  row.addEventListener('dragend', function() {
+    row.classList.remove('dragging');
+    var pinboard = document.getElementById('pinboard');
+    if (pinboard) pinboard.classList.remove('drop-target');
+  });
+}

package/src/ui/js/quick-open.js

@@ -0,0 +1,164 @@
+// ═══════════════════════════════════════════════════════════════
+// Quick file picker (Cmd+P)
+// ═══════════════════════════════════════════════════════════════
+
+var quickOpenIdx = -1;
+
+function toggleQuickOpen() {
+  var overlay = document.getElementById('quick-open-overlay');
+  var isVisible = overlay.classList.contains('visible');
+  if (isVisible) {
+    overlay.classList.remove('visible');
+    return;
+  }
+  overlay.classList.add('visible');
+  var input = document.getElementById('quick-open-input');
+  input.value = '';
+  input.focus();
+  quickOpenIdx = -1;
+  renderQuickOpenResults('');
+}
+
+function getQuickOpenCandidates() {
+  // Combine open tabs + session-touched files, deduped
+  var seen = {};
+  var items = [];
+  // Open tabs first (most accessible)
+  for (var i = 0; i < fileTabOrder.length; i++) {
+    if (!seen[fileTabOrder[i]]) {
+      items.push(fileTabOrder[i]);
+      seen[fileTabOrder[i]] = true;
+    }
+  }
+  // Session files
+  sessionTouchedFiles.forEach(function(f) {
+    if (!seen[f]) {
+      items.push(f);
+      seen[f] = true;
+    }
+  });
+  return items;
+}
+
+function fuzzyMatch(query, str) {
+  query = query.toLowerCase();
+  str = str.toLowerCase();
+  if (!query) return true;
+  // Simple substring match — good enough for small file lists
+  return str.indexOf(query) !== -1;
+}
+
+function renderQuickOpenResults(query) {
+  var container = document.getElementById('quick-open-results');
+
+  // Symbol search mode: @ prefix
+  if (query.startsWith('@')) {
+    var symbolQuery = query.substring(1);
+    if (symbolQuery.length < 1) {
+      container.innerHTML = '<div class="overlay-empty">Type a symbol name to search...</div>';
+      return;
+    }
+    renderSymbolSearchResults(container, symbolQuery);
+    return;
+  }
+
+  var candidates = getQuickOpenCandidates();
+  var filtered = candidates.filter(function(f) { return fuzzyMatch(query, f); });
+
+  if (filtered.length === 0) {
+    container.innerHTML = '<div class="overlay-empty">' + (candidates.length === 0 ? 'No files in session yet' : 'No matches') + '</div>';
+    return;
+  }
+
+  container.innerHTML = '';
+  for (var i = 0; i < filtered.length; i++) {
+    var item = document.createElement('div');
+    item.className = 'overlay-item' + (i === quickOpenIdx ? ' active' : '');
+    item.textContent = filtered[i];
+    item.addEventListener('click', (function(path) {
+      return function() {
+        document.getElementById('quick-open-overlay').classList.remove('visible');
+        openFileFromExplorer(path);
+      };
+    })(filtered[i]));
+    container.appendChild(item);
+  }
+}
+
+var symbolSearchDebounce = null;
+
+function renderSymbolSearchResults(container, prefix) {
+  // Debounce server calls
+  if (symbolSearchDebounce) clearTimeout(symbolSearchDebounce);
+  symbolSearchDebounce = setTimeout(function() {
+    var currentFile = (typeof getCurrentFileKey === 'function' ? getCurrentFileKey() : '') || '';
+    authFetch('/symbols/completions?prefix=' + encodeURIComponent(prefix) + '&file=' + encodeURIComponent(currentFile))
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (!data.completions || data.completions.length === 0) {
+          container.innerHTML = '<div class="overlay-empty">No symbols matching "' + esc(prefix) + '"</div>';
+          return;
+        }
+        container.innerHTML = '';
+        for (var i = 0; i < data.completions.length; i++) {
+          var comp = data.completions[i];
+          var item = document.createElement('div');
+          item.className = 'overlay-item' + (i === quickOpenIdx ? ' active' : '');
+          var badge = typeof kindBadge === 'function' ? kindBadge(comp.kind) : comp.kind;
+          var badgeClass = typeof kindBadgeClass === 'function' ? kindBadgeClass(comp.kind) : 'ci-badge-other';
+          item.innerHTML = '<span class="ci-badge ' + badgeClass + '">' + esc(badge) + '</span> ' +
+            '<span class="ci-symbol-name">' + esc(comp.name) + '</span>' +
+            (comp.detail ? '<span class="ci-symbol-sig">' + esc(comp.detail) + '</span>' : '') +
+            '<span class="ci-symbol-file">' + esc(comp.file) + ':' + comp.line + '</span>';
+          item.addEventListener('click', (function(file, line) {
+            return function() {
+              document.getElementById('quick-open-overlay').classList.remove('visible');
+              navigateToDefinition(file, line);
+            };
+          })(comp.file, comp.line));
+          container.appendChild(item);
+        }
+      })
+      .catch(function() {
+        container.innerHTML = '<div class="overlay-empty">Symbol search unavailable</div>';
+      });
+  }, 150);
+}
+
+document.getElementById('quick-open-input').addEventListener('input', function() {
+  quickOpenIdx = -1;
+  renderQuickOpenResults(this.value);
+});
+
+document.getElementById('quick-open-input').addEventListener('keydown', function(e) {
+  var container = document.getElementById('quick-open-results');
+  var items = container.querySelectorAll('.overlay-item');
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    quickOpenIdx = Math.min(quickOpenIdx + 1, items.length - 1);
+    updateQuickOpenActive(items);
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    quickOpenIdx = Math.max(quickOpenIdx - 1, 0);
+    updateQuickOpenActive(items);
+  } else if (e.key === 'Enter') {
+    e.preventDefault();
+    if (quickOpenIdx >= 0 && items[quickOpenIdx]) {
+      items[quickOpenIdx].click();
+    } else if (items.length > 0) {
+      items[0].click();
+    }
+  } else if (e.key === 'Escape') {
+    document.getElementById('quick-open-overlay').classList.remove('visible');
+  }
+});
+
+function updateQuickOpenActive(items) {
+  for (var i = 0; i < items.length; i++) {
+    items[i].classList.toggle('active', i === quickOpenIdx);
+  }
+  if (items[quickOpenIdx]) {
+    items[quickOpenIdx].scrollIntoView({ block: 'nearest' });
+  }
+}

package/src/ui/js/selection-context.js

@@ -0,0 +1,131 @@
+// ═══════════════════════════════════════════════════════════════
+// Selection context — captures file viewer selections for chat
+// ═══════════════════════════════════════════════════════════════
+
+function getSelectionFromMonaco() {
+  var editor = activeMonacoInstance || activeNotebookCellMonaco;
+  if (!editor) return null;
+  var sel = editor.getSelection();
+  if (!sel || sel.isEmpty()) return null;
+  var text = editor.getModel().getValueInRange(sel);
+  if (!text.trim()) return null;
+  var source = (editor === activeNotebookCellMonaco) ? 'notebook' : 'monaco';
+  return {
+    text: text,
+    startLine: sel.startLineNumber,
+    endLine: sel.endLineNumber,
+    source: source,
+  };
+}
+
+function getSelectionFromTextarea() {
+  var ta = document.getElementById('code-edit');
+  if (!ta || !ta.classList.contains('visible')) return null;
+  if (ta.selectionStart === ta.selectionEnd) return null;
+  var text = ta.value.substring(ta.selectionStart, ta.selectionEnd);
+  if (!text.trim()) return null;
+  var before = ta.value.substring(0, ta.selectionStart);
+  var startLine = (before.match(/\n/g) || []).length + 1;
+  var endLine = startLine + (text.match(/\n/g) || []).length;
+  return { text: text, startLine: startLine, endLine: endLine, source: 'textarea' };
+}
+
+function getSelectionFromCodeView() {
+  var sel = window.getSelection();
+  if (!sel || sel.isCollapsed) return null;
+  var codeView = document.getElementById('code-view');
+  if (!codeView || codeView.style.display === 'none') return null;
+  if (!codeView.contains(sel.anchorNode) || !codeView.contains(sel.focusNode)) return null;
+  var text = sel.toString();
+  if (!text.trim()) return null;
+  var fullText = codeView.textContent;
+  var selStart = fullText.indexOf(text);
+  var startLine = null;
+  var endLine = null;
+  if (selStart !== -1) {
+    startLine = (fullText.substring(0, selStart).match(/\n/g) || []).length + 1;
+    endLine = startLine + (text.match(/\n/g) || []).length;
+  }
+  return { text: text, startLine: startLine, endLine: endLine, source: 'codeview' };
+}
+
+function getSelectionFromMarkdown() {
+  var sel = window.getSelection();
+  if (!sel || sel.isCollapsed) return null;
+  var renderedView = document.getElementById('file-rendered-view');
+  if (!renderedView || !renderedView.classList.contains('visible')) return null;
+  if (!renderedView.contains(sel.anchorNode) || !renderedView.contains(sel.focusNode)) return null;
+  var text = sel.toString();
+  if (!text.trim()) return null;
+  return { text: text, startLine: null, endLine: null, source: 'markdown' };
+}
+
+function captureSelectionContext() {
+  var filePath = getCurrentFileKey();
+  if (!filePath || filePath === 'chat') return null;
+
+  var sel = getSelectionFromMonaco()
+         || getSelectionFromTextarea()
+         || getSelectionFromCodeView()
+         || getSelectionFromMarkdown();
+
+  if (!sel) return null;
+
+  return {
+    filePath: filePath,
+    startLine: sel.startLine,
+    endLine: sel.endLine,
+    text: sel.text,
+    source: sel.source,
+  };
+}
+
+function setSelectionContext(ctx) {
+  selectionContext = ctx;
+  renderSelectionContextIndicator();
+}
+
+function clearSelectionContext() {
+  selectionContext = null;
+  renderSelectionContextIndicator();
+}
+
+function renderSelectionContextIndicator() {
+  var el = document.getElementById('selection-context-indicator');
+  if (!el) return;
+  if (!selectionContext) {
+    el.classList.remove('visible');
+    el.innerHTML = '';
+    return;
+  }
+  var ctx = selectionContext;
+  var fileName = ctx.filePath.split('/').pop();
+  var lineInfo = '';
+  if (ctx.startLine !== null) {
+    lineInfo = ctx.startLine === ctx.endLine
+      ? ' L' + ctx.startLine
+      : ' L' + ctx.startLine + '-' + ctx.endLine;
+  }
+  var preview = ctx.text.trim();
+  if (preview.length > 80) preview = preview.substring(0, 77) + '...';
+  preview = preview.replace(/\n/g, ' ');
+
+  el.innerHTML =
+    '<span class="sel-ctx-label">Selection:</span>' +
+    '<span class="sel-ctx-file">' + esc(fileName + lineInfo) + '</span>' +
+    '<span class="sel-ctx-preview">' + esc(preview) + '</span>' +
+    '<button class="sel-ctx-dismiss" onclick="clearSelectionContext()" title="Remove selection context">&times;</button>';
+  el.classList.add('visible');
+}
+
+function formatSelectionContextForMessage(userMessage) {
+  if (!selectionContext) return userMessage;
+  var ctx = selectionContext;
+  var fileRef = 'File: ' + ctx.filePath;
+  if (ctx.startLine !== null) {
+    fileRef += ctx.startLine === ctx.endLine
+      ? ' (line ' + ctx.startLine + ')'
+      : ' (lines ' + ctx.startLine + '-' + ctx.endLine + ')';
+  }
+  return '--- Selected Code ---\n' + fileRef + '\n```\n' + ctx.text + '\n```\n---\n\n' + userMessage;
+}