claudeck 1.4.1 → 1.4.2

package/public/css/ui/sessions.css

@@ -287,6 +287,179 @@
   font-family: var(--font-mono);
 }
 
+/* Typed path row */
+.folder-path-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.folder-path-row input {
+  flex: 1;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.folder-path-go {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  background: var(--bg);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.folder-path-go:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+/* Recents row */
+.folder-recents {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 0 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 6px;
+}
+
+.folder-recents-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  margin-right: 2px;
+}
+
+.folder-recent-chip {
+  padding: 3px 8px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.15s;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.folder-recent-chip:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+
+/* New folder row */
+.folder-new-toggle-row {
+  margin: 4px 0 8px;
+}
+
+.folder-new-toggle {
+  background: none;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 6px 10px;
+  width: 100%;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.folder-new-toggle:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.folder-new-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin: 4px 0 8px;
+}
+
+.folder-new-row input {
+  flex: 1;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.modal-btn-cancel {
+  flex-shrink: 0;
+  padding: 7px 12px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.modal-btn-cancel:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+
+/* Inline message area (error / success) */
+.add-project-message {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  margin-bottom: 10px;
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+.add-project-message-error {
+  background: rgba(255, 80, 80, 0.08);
+  color: #ff8080;
+  border: 1px solid rgba(255, 80, 80, 0.3);
+}
+
+.add-project-message-success {
+  background: rgba(80, 200, 120, 0.08);
+  color: #6ad48a;
+  border: 1px solid rgba(80, 200, 120, 0.3);
+}
+
+.add-project-message-action {
+  flex-shrink: 0;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  background: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 0.15s;
+}
+
+.add-project-message-action:hover {
+  opacity: 1;
+}
+
 /* Sessions */
 .sessions-section {
   flex: 1;

package/public/index.html

@@ -12,7 +12,7 @@
   <link rel="apple-touch-icon" href="/icons/icon-192.png">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
   <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.3.6/dist/driver.css">
@@ -324,6 +324,7 @@
           <span class="input-waiting-dot"></span>
           <span class="input-waiting-text">Claude is waiting for your response</span>
         </div>
+        <claudeck-jump-to-latest></claudeck-jump-to-latest>
         <div class="input-bar">
           <div class="input-textarea-wrap">
             <textarea id="message-input" placeholder="> type a message or / for commands..." rows="1"></textarea>
@@ -521,8 +522,8 @@
   <claudeck-shortcuts-modal></claudeck-shortcuts-modal>
   <claudeck-cost-dashboard></claudeck-cost-dashboard>
   <claudeck-bg-confirm></claudeck-bg-confirm>
+  <claudeck-queue-stop></claudeck-queue-stop>
   <claudeck-permission-modal></claudeck-permission-modal>
-  <claudeck-linear-create></claudeck-linear-create>
   <claudeck-telegram-modal></claudeck-telegram-modal>
   <claudeck-mcp-modal></claudeck-mcp-modal>
   <claudeck-settings-modal></claudeck-settings-modal>

package/public/js/components/add-project-modal.js

@@ -8,8 +8,22 @@ class AddProjectModal extends HTMLElement {
         <button id="add-project-close" class="modal-close">&times;</button>
       </div>
       <div class="add-project-body">
+        <div class="folder-path-row">
+          <input id="folder-path-input" type="text" placeholder="Type a path (e.g. ~/code/my-app) and press Enter" autocomplete="off" spellcheck="false">
+          <button id="folder-path-go" class="folder-path-go" title="Go to path">Go</button>
+        </div>
+        <div id="folder-recents" class="folder-recents hidden"></div>
         <div id="folder-breadcrumb" class="folder-breadcrumb"></div>
         <div id="folder-list" class="folder-list"></div>
+        <div id="folder-new-row" class="folder-new-row hidden">
+          <input id="folder-new-name" type="text" placeholder="New folder name" autocomplete="off" spellcheck="false">
+          <button id="folder-new-create" class="modal-btn-save">Create</button>
+          <button id="folder-new-cancel" class="modal-btn-cancel">Cancel</button>
+        </div>
+        <div id="folder-new-toggle-row" class="folder-new-toggle-row">
+          <button id="folder-new-toggle" class="folder-new-toggle" type="button">+ New folder here</button>
+        </div>
+        <div id="add-project-message" class="add-project-message hidden"></div>
         <div class="folder-select-row">
           <input id="add-project-name" type="text" placeholder="Project name" autocomplete="off">
           <button id="add-project-confirm" class="modal-btn-save">Add</button>

package/public/js/components/jump-to-latest.js

@@ -0,0 +1,42 @@
+// Jump-to-latest pill — shown when new content arrives while the user has
+// scrolled up. Click to force-scroll to the bottom and re-engage stick-to-bottom.
+class JumpToLatest extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <button id="jump-to-latest-btn" class="jump-to-latest hidden" type="button" aria-label="Jump to latest message">
+        <svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span class="jump-to-latest-label">New messages</span>
+      </button>`;
+
+    this._btn = this.querySelector('#jump-to-latest-btn');
+    this._onState = (e) => {
+      // Only react to the active (single-mode) pane for now. In parallel mode
+      // each pane handles its own scroll independently and the global pill stays hidden.
+      const detail = e.detail || {};
+      if (detail.chatId != null) return;
+      if (detail.hasNewBelow) {
+        this._btn.classList.remove('hidden');
+      } else {
+        this._btn.classList.add('hidden');
+      }
+    };
+    window.addEventListener('claudeck:scroll-state', this._onState);
+
+    this._btn.addEventListener('click', async () => {
+      // Lazy import to avoid pulling parallel.js into component init.
+      const [{ getPane }, { scrollToBottom }] = await Promise.all([
+        import('../ui/parallel.js'),
+        import('../core/utils.js'),
+      ]);
+      const pane = getPane(null);
+      if (pane) scrollToBottom(pane, { force: true });
+    });
+  }
+
+  disconnectedCallback() {
+    if (this._onState) window.removeEventListener('claudeck:scroll-state', this._onState);
+  }
+}
+customElements.define('claudeck-jump-to-latest', JumpToLatest);

package/public/js/components/queue-stop-modal.js

@@ -0,0 +1,23 @@
+// Web Component: Queue Stop Confirmation Dialog
+class ClaudeckQueueStop extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="queue-stop-modal" class="modal-overlay hidden" data-persistent>
+        <div class="modal queue-stop-modal">
+          <div class="modal-header">
+            <h3>Queue Active</h3>
+          </div>
+          <p class="queue-stop-text">You have queued messages. What would you like to do?</p>
+          <div class="mq-queue-preview" id="queue-stop-preview"></div>
+          <div class="modal-actions queue-stop-actions">
+            <button id="queue-stop-all" class="modal-btn-cancel queue-stop-terminate">Terminate All</button>
+            <button id="queue-stop-skip" class="modal-btn-cancel">Skip to Next</button>
+            <button id="queue-stop-pause" class="modal-btn-save">Just Stop Current</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('claudeck-queue-stop', ClaudeckQueueStop);

package/public/js/core/api.js

@@ -310,6 +310,21 @@ export async function addProject(name, path) {
   return res.json();
 }
 
+export async function createFolder(parent, name) {
+  const res = await fetch("/api/projects/create-folder", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ parent, name }),
+  });
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const err = new Error(body.error || "Failed to create folder");
+    err.status = res.status;
+    throw err;
+  }
+  return body;
+}
+
 export async function deleteProject(path) {
   const res = await fetch("/api/projects", {
     method: "DELETE",
@@ -474,49 +489,6 @@ export async function execCommand(command, cwd) {
   return res.json();
 }
 
-export async function fetchLinearIssues() {
-  const res = await fetch("/api/plugins/linear/issues");
-  return res.json();
-}
-
-export async function fetchLinearTeams() {
-  const res = await fetch("/api/plugins/linear/teams");
-  return res.json();
-}
-
-export async function fetchLinearTeamStates(teamId) {
-  const res = await fetch(`/api/plugins/linear/teams/${encodeURIComponent(teamId)}/states`);
-  return res.json();
-}
-
-export async function createLinearIssue({ title, description, teamId, stateId }) {
-  const res = await fetch("/api/plugins/linear/issues", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ title, description, teamId, stateId }),
-  });
-  if (!res.ok) throw new Error("Failed to create issue");
-  return res.json();
-}
-
-export async function fetchLinearConfig() {
-  const res = await fetch("/api/plugins/linear/config");
-  return res.json();
-}
-
-export async function saveLinearConfig(config) {
-  const res = await fetch("/api/plugins/linear/config", {
-    method: "PUT",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(config),
-  });
-  return res.json();
-}
-
-export async function testLinearConnection() {
-  const res = await fetch("/api/plugins/linear/test", { method: "POST" });
-  return res.json();
-}
 
 // Tips
 export async function fetchTips() {

package/public/js/core/dom.js

@@ -165,6 +165,13 @@ export const $ = {
   bgSessionIndicator: document.getElementById("bg-session-indicator"),
   bgSessionBadge: document.getElementById("bg-session-badge"),
 
+  // Message queue
+  queueStopModal: document.getElementById("queue-stop-modal"),
+  queueStopAll: document.getElementById("queue-stop-all"),
+  queueStopSkip: document.getElementById("queue-stop-skip"),
+  queueStopPause: document.getElementById("queue-stop-pause"),
+  queueStopPreview: document.getElementById("queue-stop-preview"),
+
   // Telegram
   telegramBtn: document.getElementById("telegram-settings-btn"),
   telegramModal: document.getElementById("telegram-modal"),
@@ -293,5 +300,15 @@ export const $ = {
   addProjectConfirm: document.getElementById("add-project-confirm"),
   folderBreadcrumb: document.getElementById("folder-breadcrumb"),
   folderList: document.getElementById("folder-list"),
+  folderPathInput: document.getElementById("folder-path-input"),
+  folderPathGo: document.getElementById("folder-path-go"),
+  folderRecents: document.getElementById("folder-recents"),
+  folderNewToggle: document.getElementById("folder-new-toggle"),
+  folderNewToggleRow: document.getElementById("folder-new-toggle-row"),
+  folderNewRow: document.getElementById("folder-new-row"),
+  folderNewName: document.getElementById("folder-new-name"),
+  folderNewCreate: document.getElementById("folder-new-create"),
+  folderNewCancel: document.getElementById("folder-new-cancel"),
+  addProjectMessage: document.getElementById("add-project-message"),
 
 };

package/public/js/core/utils.js

@@ -20,6 +20,42 @@ export function getToolDetail(name, input) {
   return "";
 }
 
-export function scrollToBottom(pane) {
-  pane.messagesDiv.scrollTop = pane.messagesDiv.scrollHeight;
+// Distance from bottom (px) within which we still consider the user "at bottom".
+// Absorbs sub-pixel rounding, momentum scrolling, and small layout shifts.
+export const NEAR_BOTTOM_THRESHOLD = 100;
+
+export function isNearBottom(el) {
+  if (!el) return true;
+  return el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_THRESHOLD;
+}
+
+// Stick-to-bottom: only scrolls if the user is already near the bottom, or
+// if `force` is set (e.g. user sent a message). When new content arrives
+// while the user has scrolled up, we set `pane.hasNewBelow = true` so the
+// "Jump to latest" pill can surface, and we leave their scroll position alone.
+export function scrollToBottom(pane, opts = {}) {
+  if (!pane || !pane.messagesDiv) return;
+  const el = pane.messagesDiv;
+  if (opts.force) {
+    el.scrollTop = el.scrollHeight;
+    pane.followBottom = true;
+    pane.hasNewBelow = false;
+    notifyPillUpdate(pane);
+    return;
+  }
+  if (pane.followBottom !== false && isNearBottom(el)) {
+    el.scrollTop = el.scrollHeight;
+    pane.followBottom = true;
+    pane.hasNewBelow = false;
+  } else {
+    pane.hasNewBelow = true;
+  }
+  notifyPillUpdate(pane);
+}
+
+function notifyPillUpdate(pane) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent("claudeck:scroll-state", {
+    detail: { chatId: pane.chatId, hasNewBelow: !!pane.hasNewBelow },
+  }));
 }

package/public/js/features/chat.js

@@ -4,7 +4,8 @@ import { getState, setState } from '../core/store.js';
 import { CHAT_IDS, BOT_CHAT_ID } from '../core/constants.js';
 import { on } from '../core/events.js';
 import { commandRegistry, dismissAutocomplete, handleAutocompleteKeydown, handleSlashAutocomplete, registerCommand } from '../ui/commands.js';
-import { addUserMessage, appendAssistantText, appendToolIndicator, appendToolResult, showThinking, removeThinking, addResultSummary, addStatus, showWhalyPlaceholder, addSkillUsedMessage } from '../ui/messages.js';
+import { addUserMessage, appendAssistantText, appendToolIndicator, appendToolResult, showThinking, removeThinking, addResultSummary, addStatus, showWhalyPlaceholder, addSkillUsedMessage, exitWelcomeState, isWelcomeStateActive } from '../ui/messages.js';
+import { enqueueMessage, pauseQueue, resumeQueue, fireNextQueued, handleStopWithQueue } from './message-queue.js';
 import { getPane, panes, _setChatFns, _setInputHistoryGetter } from '../ui/parallel.js';
 import { loadSessions } from './sessions.js';
 import { loadStats, loadAccountInfo } from './cost-dashboard.js';
@@ -100,6 +101,15 @@ export function sendMessage(pane) {
   const text = pane.messageInput.value.trim();
   const cwd = $.projectSelect.value;
 
+  // Queue message if currently streaming (don't queue slash commands)
+  if (pane.isStreaming && text && !text.startsWith('/')) {
+    enqueueMessage(text, pane);
+    pane.messageInput.value = "";
+    pane.messageInput.style.height = "auto";
+    dismissAutocomplete(pane);
+    return;
+  }
+
   if (!text || !cwd) {
     if (text && text.startsWith("/")) {
       const match = text.match(/^\/(\S+)\s*(.*)/s);
@@ -155,6 +165,24 @@ export function sendMessage(pane) {
     }
   }
 
+  // Resume queue if responding to a question
+  if (pane._queuePaused && pane._queuePauseReason === 'question') {
+    resumeQueue(pane);
+  }
+
+  // Animate out of welcome state if active
+  if (isWelcomeStateActive()) {
+    exitWelcomeState().then(() => {
+      _doSend(text, pane);
+    });
+    return;
+  }
+  _doSend(text, pane);
+}
+
+export function _doSend(text, pane) {
+  const cwd = $.projectSelect.value;
+  const ws = getState("ws");
   // Prepend attached files
   let fullMessage = text;
   const attachedFiles = getState("attachedFiles");
@@ -235,6 +263,11 @@ export function sendMessage(pane) {
 
 export function stopGeneration(pane) {
   pane = pane || getPane(null);
+  // Show 3-option dialog if queue has items
+  if (pane._messageQueue?.length > 0) {
+    handleStopWithQueue(pane);
+    return;
+  }
   const ws = getState("ws");
   if (ws && ws.readyState === WebSocket.OPEN) {
     const payload = { type: "abort" };
@@ -276,6 +309,13 @@ export function finishStreamingHandler(pane) {
   if (sid) {
     import('./sessions.js').then(({ loadMessages }) => loadMessages(sid));
   }
+
+  // Auto-fire next queued message (deferred to let state settle)
+  queueMicrotask(() => {
+    if (pane._messageQueue?.length > 0 && !pane._queuePaused) {
+      fireNextQueued(pane);
+    }
+  });
 }
 
 // Register the chat functions with parallel.js to break circular dependency
@@ -443,6 +483,10 @@ function handleServerMessage(msg) {
       finishStreamingHandler(pane);
       if (isQuestionText(rawText)) {
         showWaitingForInput(pane);
+        // Pause queue when Claude asks a question
+        if (pane._messageQueue?.length > 0) {
+          pauseQueue(pane, 'question');
+        }
       }
       break;
     }
@@ -455,6 +499,10 @@ function handleServerMessage(msg) {
     case "error":
       finishStreamingHandler(pane);
       addStatus("Error: " + msg.error, true, pane);
+      // Pause queue on error
+      if (pane._messageQueue?.length > 0) {
+        pauseQueue(pane, 'error');
+      }
       break;
 
     case "workflow_started":