claudeck 1.4.1 → 1.4.2

package/public/js/features/message-queue.js

@@ -0,0 +1,423 @@
+// Message Queue — queue messages during streaming, auto-fire sequentially
+import { $ } from '../core/dom.js';
+import { getState } from '../core/store.js';
+import { getPane } from '../ui/parallel.js';
+
+let _queueIdCounter = 0;
+
+// ── Lazy import to break circular dependency with chat.js ──
+let _chatFns = null;
+async function getChatFns() {
+  if (!_chatFns) {
+    _chatFns = await import('./chat.js');
+  }
+  return _chatFns;
+}
+
+// ── Pane initialization ──
+
+export function initQueueOnPane(pane) {
+  pane._messageQueue = [];
+  pane._queuePaused = false;
+  pane._queuePauseReason = null;
+}
+
+// ── Core queue operations ──
+
+export function enqueueMessage(text, pane) {
+  pane = pane || getPane(null);
+  pane._messageQueue.push({ id: ++_queueIdCounter, text });
+  renderQueueChips(pane);
+}
+
+export async function fireNextQueued(pane) {
+  pane = pane || getPane(null);
+  if (pane._messageQueue.length === 0 || pane._queuePaused) return;
+  const item = pane._messageQueue.shift();
+  renderQueueChips(pane);
+  const { _doSend } = await getChatFns();
+  _doSend(item.text, pane);
+}
+
+export function removeFromQueue(pane, index) {
+  pane = pane || getPane(null);
+  if (index >= 0 && index < pane._messageQueue.length) {
+    pane._messageQueue.splice(index, 1);
+    renderQueueChips(pane);
+  }
+}
+
+export function editQueueItem(pane, index, newText) {
+  pane = pane || getPane(null);
+  const trimmed = newText.trim();
+  if (!trimmed) {
+    removeFromQueue(pane, index);
+    return;
+  }
+  if (index >= 0 && index < pane._messageQueue.length) {
+    pane._messageQueue[index].text = trimmed;
+    renderQueueChips(pane);
+  }
+}
+
+export function reorderQueue(pane, fromIndex, toIndex) {
+  pane = pane || getPane(null);
+  if (fromIndex === toIndex) return;
+  const [item] = pane._messageQueue.splice(fromIndex, 1);
+  pane._messageQueue.splice(toIndex, 0, item);
+  renderQueueChips(pane);
+}
+
+export function clearQueue(pane) {
+  pane = pane || getPane(null);
+  pane._messageQueue = [];
+  pane._queuePaused = false;
+  pane._queuePauseReason = null;
+  renderQueueChips(pane);
+}
+
+export function getQueue(pane) {
+  pane = pane || getPane(null);
+  return [...pane._messageQueue];
+}
+
+// ── Pause / Resume ──
+
+export function pauseQueue(pane, reason) {
+  pane = pane || getPane(null);
+  pane._queuePaused = true;
+  pane._queuePauseReason = reason || 'user';
+  renderQueueChips(pane);
+}
+
+export function resumeQueue(pane) {
+  pane = pane || getPane(null);
+  pane._queuePaused = false;
+  pane._queuePauseReason = null;
+  renderQueueChips(pane);
+}
+
+// ── Stop with queue (3-option modal) ──
+
+export function handleStopWithQueue(pane) {
+  pane = pane || getPane(null);
+  const modal = $.queueStopModal;
+  if (!modal) return;
+
+  // Populate preview
+  const preview = $.queueStopPreview;
+  if (preview) {
+    preview.innerHTML = '';
+    for (const item of pane._messageQueue) {
+      const el = document.createElement('span');
+      el.className = 'mq-queue-preview-item';
+      el.textContent = truncateText(item.text, 40);
+      preview.appendChild(el);
+    }
+  }
+
+  modal.classList.remove('hidden');
+
+  const cleanup = () => {
+    modal.classList.add('hidden');
+    $.queueStopAll.removeEventListener('click', onTerminate);
+    $.queueStopSkip.removeEventListener('click', onSkip);
+    $.queueStopPause.removeEventListener('click', onPause);
+    modal.removeEventListener('click', onBackdrop);
+  };
+
+  const sendAbort = () => {
+    const ws = getState("ws");
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      const payload = { type: "abort" };
+      const parallelMode = getState("parallelMode");
+      if (parallelMode && pane.chatId) {
+        payload.chatId = pane.chatId;
+      }
+      ws.send(JSON.stringify(payload));
+    }
+  };
+
+  const onTerminate = () => {
+    clearQueue(pane);
+    sendAbort();
+    cleanup();
+  };
+
+  const onSkip = () => {
+    // Don't pause — finishStreamingHandler will auto-fire next
+    sendAbort();
+    cleanup();
+  };
+
+  const onPause = () => {
+    pauseQueue(pane, 'user');
+    sendAbort();
+    cleanup();
+  };
+
+  const onBackdrop = (e) => {
+    if (e.target === modal) cleanup();
+  };
+
+  $.queueStopAll.addEventListener('click', onTerminate);
+  $.queueStopSkip.addEventListener('click', onSkip);
+  $.queueStopPause.addEventListener('click', onPause);
+  modal.addEventListener('click', onBackdrop);
+}
+
+// ── Chip rendering ──
+
+function truncateText(text, max) {
+  if (text.length <= max) return text;
+  return text.slice(0, max) + '...';
+}
+
+function getChipContainer(pane) {
+  const parallelMode = getState("parallelMode");
+  if (parallelMode) {
+    // In parallel mode, the textarea is a direct child of the input-bar
+    const inputBar = pane.messageInput?.closest('.input-bar');
+    return inputBar || null;
+  }
+  // Single mode: use .input-textarea-wrap
+  const wrap = $.messageInput?.closest('.input-textarea-wrap');
+  return wrap || null;
+}
+
+export function renderQueueChips(pane) {
+  pane = pane || getPane(null);
+  const container = getChipContainer(pane);
+  if (!container) return;
+
+  // Find or create strip
+  let strip = container.querySelector('.mq-chip-strip');
+  if (pane._messageQueue.length === 0) {
+    if (strip) strip.remove();
+    return;
+  }
+
+  if (!strip) {
+    strip = document.createElement('div');
+    strip.className = 'mq-chip-strip';
+    // Insert as first child (above textarea)
+    container.insertBefore(strip, container.firstChild);
+  }
+
+  strip.innerHTML = '';
+
+  // Drag state
+  let dragItem = null;
+  let dragFromIndex = -1;
+  let dragPlaceholder = null;
+
+  pane._messageQueue.forEach((item, index) => {
+    const chip = document.createElement('div');
+    chip.className = 'mq-chip';
+    chip.draggable = true;
+    chip.dataset.queueIndex = index;
+
+    const num = document.createElement('span');
+    num.className = 'mq-chip-num';
+    num.textContent = index + 1;
+
+    const handle = document.createElement('span');
+    handle.className = 'mq-chip-handle';
+    handle.textContent = '\u2807'; // ⠇
+
+    const text = document.createElement('span');
+    text.className = 'mq-chip-text';
+    text.textContent = truncateText(item.text, 40);
+    text.title = item.text;
+
+    const editBtn = document.createElement('button');
+    editBtn.className = 'mq-chip-edit';
+    editBtn.title = 'Edit';
+    editBtn.innerHTML = '&#9998;'; // ✎
+    editBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      showInlineEditor(chip, item, pane, index);
+    });
+
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'mq-chip-remove';
+    removeBtn.title = 'Remove';
+    removeBtn.textContent = '\u00d7'; // ×
+    removeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      removeFromQueue(pane, index);
+    });
+
+    chip.appendChild(num);
+    chip.appendChild(text);
+    chip.appendChild(handle);
+    chip.appendChild(editBtn);
+    chip.appendChild(removeBtn);
+
+    // Drag events
+    chip.addEventListener('dragstart', (e) => {
+      dragItem = chip;
+      dragFromIndex = index;
+      chip.classList.add('dragging');
+      e.dataTransfer.effectAllowed = 'move';
+      dragPlaceholder = document.createElement('div');
+      dragPlaceholder.className = 'mq-drop-indicator';
+      requestAnimationFrame(() => { chip.style.opacity = '0.4'; });
+    });
+
+    chip.addEventListener('dragend', () => {
+      if (dragItem) {
+        dragItem.classList.remove('dragging');
+        dragItem.style.opacity = '';
+      }
+      if (dragPlaceholder?.parentNode) dragPlaceholder.remove();
+      dragItem = null;
+      dragFromIndex = -1;
+      dragPlaceholder = null;
+    });
+
+    chip.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      if (!dragItem || dragItem === chip) return;
+      const rect = chip.getBoundingClientRect();
+      const after = e.clientX > rect.left + rect.width / 2;
+      if (after) chip.after(dragPlaceholder);
+      else chip.before(dragPlaceholder);
+    });
+
+    chip.addEventListener('drop', (e) => {
+      e.preventDefault();
+      if (!dragItem || dragItem === chip) return;
+      // Calculate target index from placeholder position
+      const chips = [...strip.querySelectorAll('.mq-chip')];
+      const placeholderIdx = [...strip.children].indexOf(dragPlaceholder);
+      let toIndex = 0;
+      let chipsBefore = 0;
+      for (const child of strip.children) {
+        if (child === dragPlaceholder) break;
+        if (child.classList.contains('mq-chip')) chipsBefore++;
+      }
+      toIndex = chipsBefore;
+      if (dragFromIndex < toIndex) toIndex--;
+
+      if (dragPlaceholder?.parentNode) dragPlaceholder.remove();
+      dragItem.classList.remove('dragging');
+      dragItem.style.opacity = '';
+      reorderQueue(pane, dragFromIndex, toIndex);
+      dragItem = null;
+      dragFromIndex = -1;
+      dragPlaceholder = null;
+    });
+
+    strip.appendChild(chip);
+  });
+
+  // Queue count
+  const count = document.createElement('span');
+  count.className = 'mq-chip-count';
+  count.textContent = `${pane._messageQueue.length} queued`;
+  strip.appendChild(count);
+
+  // Paused indicator
+  if (pane._queuePaused) {
+    const paused = document.createElement('span');
+    paused.className = 'mq-queue-paused';
+    const reasonLabel = pane._queuePauseReason === 'error' ? 'error'
+      : pane._queuePauseReason === 'question' ? 'waiting for response'
+      : 'stopped';
+    paused.innerHTML = `\u23F8 Paused (${reasonLabel}) `;
+    const resumeBtn = document.createElement('button');
+    resumeBtn.className = 'mq-resume-btn';
+    resumeBtn.textContent = 'Resume';
+    resumeBtn.addEventListener('click', () => {
+      resumeQueue(pane);
+      // Auto-fire if not streaming
+      if (!pane.isStreaming && pane._messageQueue.length > 0) {
+        fireNextQueued(pane);
+      }
+    });
+    paused.appendChild(resumeBtn);
+    strip.appendChild(paused);
+  }
+}
+
+// ── Inline editor popover ──
+
+function showInlineEditor(chipEl, item, pane, index) {
+  // Close any existing editor
+  closeAllEditors();
+
+  const popover = document.createElement('div');
+  popover.className = 'mq-editor-popover';
+
+  const textarea = document.createElement('textarea');
+  textarea.className = 'mq-editor-textarea';
+  textarea.rows = 3;
+  textarea.value = item.text;
+
+  const actions = document.createElement('div');
+  actions.className = 'mq-editor-actions';
+
+  const hint = document.createElement('span');
+  hint.className = 'mq-editor-hint';
+  hint.textContent = 'Ctrl+Enter to save';
+
+  const buttons = document.createElement('div');
+  buttons.className = 'mq-editor-buttons';
+
+  const saveBtn = document.createElement('button');
+  saveBtn.className = 'mq-editor-save';
+  saveBtn.textContent = 'Save';
+
+  const cancelBtn = document.createElement('button');
+  cancelBtn.className = 'mq-editor-cancel';
+  cancelBtn.textContent = 'Cancel';
+
+  const close = () => popover.remove();
+
+  saveBtn.addEventListener('click', () => {
+    editQueueItem(pane, index, textarea.value);
+    close();
+  });
+
+  cancelBtn.addEventListener('click', close);
+
+  textarea.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      close();
+    }
+    if (e.key === 'Enter' && e.ctrlKey) {
+      e.preventDefault();
+      editQueueItem(pane, index, textarea.value);
+      close();
+    }
+  });
+
+  buttons.appendChild(cancelBtn);
+  buttons.appendChild(saveBtn);
+  actions.appendChild(hint);
+  actions.appendChild(buttons);
+  popover.appendChild(textarea);
+  popover.appendChild(actions);
+  chipEl.appendChild(popover);
+
+  // Focus textarea
+  requestAnimationFrame(() => textarea.focus());
+
+  // Close on outside click (deferred so this click doesn't trigger it)
+  requestAnimationFrame(() => {
+    const onOutside = (e) => {
+      if (!popover.contains(e.target) && !chipEl.contains(e.target)) {
+        close();
+        document.removeEventListener('mousedown', onOutside);
+      }
+    };
+    document.addEventListener('mousedown', onOutside);
+  });
+}
+
+function closeAllEditors() {
+  document.querySelectorAll('.mq-editor-popover').forEach(el => el.remove());
+}

package/public/js/features/projects.js

@@ -151,9 +151,81 @@ export async function loadProjectCommands() {
 // ── Add Project (folder browser) ────────────────────────
 let currentBrowsePath = "";
 
+const RECENTS_KEY = "claudeck-folder-recents";
+const RECENTS_MAX = 5;
+
+function loadRecents() {
+  try {
+    const raw = localStorage.getItem(RECENTS_KEY);
+    const arr = raw ? JSON.parse(raw) : [];
+    return Array.isArray(arr) ? arr.filter((p) => typeof p === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+function pushRecent(path) {
+  if (!path) return;
+  const existing = loadRecents().filter((p) => p !== path);
+  existing.unshift(path);
+  localStorage.setItem(RECENTS_KEY, JSON.stringify(existing.slice(0, RECENTS_MAX)));
+}
+
+function renderRecents() {
+  const recents = loadRecents();
+  $.folderRecents.innerHTML = "";
+  if (recents.length === 0) {
+    $.folderRecents.classList.add("hidden");
+    return;
+  }
+  $.folderRecents.classList.remove("hidden");
+  const label = document.createElement("span");
+  label.className = "folder-recents-label";
+  label.textContent = "Recent:";
+  $.folderRecents.appendChild(label);
+  for (const p of recents) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "folder-recent-chip";
+    chip.title = p;
+    chip.textContent = p.split(/[/\\]/).filter(Boolean).pop() || p;
+    chip.addEventListener("click", () => navigateToDir(p));
+    $.folderRecents.appendChild(chip);
+  }
+}
+
+function showMessage(text, kind = "error", action) {
+  if (!text) {
+    hideMessage();
+    return;
+  }
+  $.addProjectMessage.innerHTML = "";
+  $.addProjectMessage.className = `add-project-message add-project-message-${kind}`;
+  const span = document.createElement("span");
+  span.textContent = text;
+  $.addProjectMessage.appendChild(span);
+  if (action) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "add-project-message-action";
+    btn.textContent = action.label;
+    btn.addEventListener("click", action.onClick);
+    $.addProjectMessage.appendChild(btn);
+  }
+}
+
+function hideMessage() {
+  $.addProjectMessage.className = "add-project-message hidden";
+  $.addProjectMessage.innerHTML = "";
+}
+
 function openAddProjectModal() {
   $.addProjectModal.classList.remove("hidden");
   $.addProjectName.value = "";
+  $.folderPathInput.value = "";
+  hideMessage();
+  hideNewFolderRow();
+  renderRecents();
   navigateToDir(""); // defaults to $HOME on server
 }
 
@@ -163,6 +235,8 @@ function closeAddProjectModal() {
 
 async function navigateToDir(dir) {
   $.folderList.innerHTML = '<div class="folder-list-loading">Loading...</div>';
+  hideMessage();
+  hideNewFolderRow();
   try {
     const data = await api.browseFolders(dir || undefined);
     currentBrowsePath = data.current;
@@ -171,11 +245,84 @@ async function navigateToDir(dir) {
     // Auto-fill name from last segment
     const base = data.current.split(/[/\\]/).filter(Boolean).pop() || "";
     $.addProjectName.value = base;
+    $.folderPathInput.value = data.current;
   } catch (err) {
     $.folderList.innerHTML = `<div class="folder-list-empty">Error: ${err.message}</div>`;
   }
 }
 
+function showNewFolderRow() {
+  $.folderNewRow.classList.remove("hidden");
+  $.folderNewToggleRow.classList.add("hidden");
+  $.folderNewName.value = "";
+  $.folderNewName.focus();
+}
+
+function hideNewFolderRow() {
+  $.folderNewRow.classList.add("hidden");
+  $.folderNewToggleRow.classList.remove("hidden");
+}
+
+async function createFolderInline() {
+  const name = $.folderNewName.value.trim();
+  if (!name) {
+    $.folderNewName.focus();
+    return;
+  }
+  if (/[\/\\]/.test(name) || name === "." || name === "..") {
+    showMessage("Folder name cannot contain '/', '\\', or be '.' / '..'", "error");
+    return;
+  }
+  if (!currentBrowsePath) return;
+
+  try {
+    const result = await api.createFolder(currentBrowsePath, name);
+    hideNewFolderRow();
+    await navigateToDir(result.path);
+    showMessage(`Created "${name}". Click Add to use it as a project.`, "success");
+  } catch (err) {
+    if (err.status === 409) {
+      showMessage(`"${name}" already exists here.`, "error", {
+        label: "Open it",
+        onClick: async () => {
+          const target = currentBrowsePath.replace(/\/$/, "") + "/" + name;
+          hideNewFolderRow();
+          await navigateToDir(target);
+        },
+      });
+    } else {
+      showMessage(err.message || "Failed to create folder", "error");
+    }
+  }
+}
+
+async function goToTypedPath() {
+  const raw = $.folderPathInput.value.trim();
+  if (!raw) return;
+  // Expand leading ~ to $HOME on the server side — client just passes it along;
+  // the server resolves. But browse route uses resolve() which does not expand ~.
+  // So expand here against a best-effort guess: leave ~ as-is and let the user
+  // type absolute paths, OR expand client-side using a hardcoded "~" marker.
+  // Simpler: if the user types "~", ask the server to browse default (homedir)
+  // and then append the rest.
+  let target = raw;
+  if (raw === "~") {
+    await navigateToDir(""); // defaults to $HOME on server
+    return;
+  }
+  if (raw.startsWith("~/")) {
+    // Browse home first to learn its absolute path, then descend.
+    try {
+      const home = await api.browseFolders(undefined);
+      target = home.current.replace(/\/$/, "") + "/" + raw.slice(2);
+    } catch {
+      showMessage("Could not resolve ~", "error");
+      return;
+    }
+  }
+  await navigateToDir(target);
+}
+
 function renderBreadcrumb(pathStr) {
   $.folderBreadcrumb.innerHTML = "";
   const parts = pathStr.split(/[/\\]/).filter(Boolean);
@@ -237,18 +384,30 @@ function renderFolderList(data) {
   }
 }
 
+function selectExistingProject(path) {
+  if (![...$.projectSelect.options].some((o) => o.value === path)) return false;
+  $.projectSelect.value = path;
+  $.projectSelect.dispatchEvent(new Event("change"));
+  closeAddProjectModal();
+  return true;
+}
+
 async function confirmAddProject() {
   const name = $.addProjectName.value.trim();
   if (!name) {
+    showMessage("Enter a project name.", "error");
     $.addProjectName.focus();
     return;
   }
   if (!currentBrowsePath) return;
 
-  // Check for duplicate in dropdown
+  // Check for duplicate in dropdown — offer to switch instead of blocking.
   const existing = [...$.projectSelect.options].find((o) => o.value === currentBrowsePath);
   if (existing) {
-    alert("This project path is already added.");
+    showMessage("This folder is already added as a project.", "error", {
+      label: "Switch to it",
+      onClick: () => selectExistingProject(currentBrowsePath),
+    });
     return;
   }
 
@@ -268,6 +427,7 @@ async function confirmAddProject() {
     projects.push({ name: project.name, path: project.path });
 
     localStorage.setItem("claudeck-cwd", project.path);
+    pushRecent(project.path);
     updateSystemPromptIndicator();
     updateHeaderProjectName();
     updateSessionControls();
@@ -277,7 +437,7 @@ async function confirmAddProject() {
 
     closeAddProjectModal();
   } catch (err) {
-    alert("Failed to add project: " + err.message);
+    showMessage("Failed to add project: " + err.message, "error");
   }
 }
 
@@ -332,6 +492,28 @@ $.addProjectModal.addEventListener("click", (e) => {
   if (e.target === $.addProjectModal) closeAddProjectModal();
 });
 
+// Typed path navigation
+$.folderPathGo.addEventListener("click", goToTypedPath);
+$.folderPathInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    goToTypedPath();
+  }
+});
+
+// New folder inline row
+$.folderNewToggle.addEventListener("click", showNewFolderRow);
+$.folderNewCancel.addEventListener("click", hideNewFolderRow);
+$.folderNewCreate.addEventListener("click", createFolderInline);
+$.folderNewName.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    createFolderInline();
+  } else if (e.key === "Escape") {
+    hideNewFolderRow();
+  }
+});
+
 // System prompt modal event listeners
 $.spEditBtn.addEventListener("click", openSystemPromptModal);
 $.spForm.addEventListener("submit", async (e) => {

package/public/js/main.js

@@ -14,12 +14,13 @@ import './components/file-picker-modal.js';
 import './components/shortcuts-modal.js';
 import './components/cost-dashboard-modal.js';
 import './components/bg-confirm-modal.js';
+import './components/queue-stop-modal.js';
 import './components/permission-modal.js';
-import './components/linear-create-modal.js';
 import './components/telegram-modal.js';
 import './components/mcp-modal.js';
 import './components/settings-modal.js';
 import './components/add-project-modal.js';
+import './components/jump-to-latest.js';
 import './components/status-bar.js';
 
 import './core/store.js';
@@ -64,6 +65,7 @@ import './features/easter-egg.js';
 import './features/welcome.js';
 import './features/home.js';
 import './features/chat.js';
+import './features/message-queue.js';
 import './panels/file-explorer.js';
 import './panels/git-panel.js';
 import './panels/mcp-manager.js';

package/public/js/panels/dev-docs.js

@@ -301,7 +301,7 @@ registerDocSection({
       <li>Import paths: use absolute paths (e.g. <code>/js/ui/tab-sdk.js</code>)</li>
     </ul>
 
-    <div class="callout">When in doubt, look at <code>plugins/claude-editor/</code> or <code>plugins/repos/</code> as reference implementations. For full-stack with server routes, see <code>plugins/linear/</code>. More examples are available in the <a href="https://github.com/hamedafarag/claudeck-marketplace" target="_blank">marketplace repo</a>.</div>
+    <div class="callout">When in doubt, look at <code>plugins/claude-editor/</code> or <code>plugins/repos/</code> as reference implementations. For full-stack plugins with server routes, see the <a href="https://github.com/hamedafarag/claudeck-marketplace" target="_blank">marketplace repo</a> (e.g. the Linear plugin).</div>
   `,
 });