claudeck 1.3.1 → 1.4.1

package/public/js/features/chat.js

@@ -399,6 +399,10 @@ function handleServerMessage(msg) {
       showThinking("Thinking...", pane);
       break;
 
+    case "user_message":
+      addUserMessage(msg.text, pane);
+      break;
+
     case "text":
       appendAssistantText(msg.text, pane);
       break;

package/public/js/features/sessions.js

@@ -5,8 +5,12 @@ import { CHAT_IDS } from '../core/constants.js';
 import { escapeHtml } from '../core/utils.js';
 import * as api from '../core/api.js';
 import { panes, enterParallelMode, exitParallelMode } from '../ui/parallel.js';
-import { renderMessagesIntoPane, showWhalyPlaceholder } from '../ui/messages.js';
+import { renderMessagesIntoPane, prependOlderMessages, showWhalyPlaceholder, showLoadingIndicator, hideLoadingIndicator } from '../ui/messages.js';
 import { loadContextGauge } from '../ui/context-gauge.js';
+import { subscribeToSession } from '../core/ws.js';
+
+const MESSAGE_PAGE_SIZE = 30;
+const SCROLL_LOAD_THRESHOLD = 150; // px from top to trigger load more
 
 const SESSION_STORAGE_KEY = "claudeck-session-id";
 
@@ -14,6 +18,7 @@ const SESSION_STORAGE_KEY = "claudeck-session-id";
 onState("sessionId", (val) => {
   if (val) {
     localStorage.setItem(SESSION_STORAGE_KEY, val);
+    subscribeToSession(val);
   } else {
     localStorage.removeItem(SESSION_STORAGE_KEY);
   }
@@ -228,16 +233,16 @@ export async function deleteSession(id) {
 
 export async function loadMessages(sid) {
   if (getState("parallelMode")) {
-    for (const chatId of CHAT_IDS) {
-      loadPaneMessages(sid, chatId);
-    }
+    // Load all panes concurrently instead of sequentially
+    await Promise.all(CHAT_IDS.map(chatId => loadPaneMessages(sid, chatId)));
     return;
   }
 
   const pane = panes.get(null);
   try {
-    const messages = await api.fetchSingleMessages(sid);
+    const messages = await api.fetchSingleMessages(sid, { limit: MESSAGE_PAGE_SIZE });
     renderMessagesIntoPane(messages, pane);
+    _initPanePagination(pane, messages, "single");
     loadContextGauge(sid);
   } catch (err) {
     console.error("Failed to load messages:", err);
@@ -248,22 +253,109 @@ export async function loadPaneMessages(sid, chatId) {
   const pane = panes.get(chatId);
   if (!pane) return;
   try {
-    let messages = await api.fetchMessagesByChatId(sid, chatId);
-
+    let messages;
     // For Chat 1 (chat-0): also load single-mode messages as fallback
     if (chatId === CHAT_IDS[0]) {
-      const singleMessages = await api.fetchSingleMessages(sid);
-      if (singleMessages.length > 0) {
-        messages = [...singleMessages, ...messages].sort((a, b) => a.id - b.id);
+      const [chatMsgs, singleMsgs] = await Promise.all([
+        api.fetchMessagesByChatId(sid, chatId, { limit: MESSAGE_PAGE_SIZE }),
+        api.fetchSingleMessages(sid, { limit: MESSAGE_PAGE_SIZE }),
+      ]);
+      if (singleMsgs.length > 0) {
+        messages = [...singleMsgs, ...chatMsgs].sort((a, b) => a.id - b.id);
+      } else {
+        messages = chatMsgs;
       }
+    } else {
+      messages = await api.fetchMessagesByChatId(sid, chatId, { limit: MESSAGE_PAGE_SIZE });
     }
 
     renderMessagesIntoPane(messages, pane);
+    _initPanePagination(pane, messages, chatId === CHAT_IDS[0] ? "chat0" : "chat");
   } catch (err) {
     console.error(`Failed to load messages for ${chatId}:`, err);
   }
 }
 
+// ── Lazy-load pagination ────────────────────────────────
+
+function _initPanePagination(pane, messages, mode) {
+  pane._hasMore = messages.length >= MESSAGE_PAGE_SIZE;
+  pane._oldestMessageId = messages.length > 0 ? messages[0].id : null;
+  pane._loadingMore = false;
+  pane._paginationMode = mode; // "single" | "chat" | "chat0"
+
+  // Remove any existing scroll listener
+  if (pane._scrollHandler) {
+    pane.messagesDiv.removeEventListener("scroll", pane._scrollHandler);
+  }
+
+  if (pane._hasMore) {
+    pane._scrollHandler = () => _onPaneScroll(pane);
+    pane.messagesDiv.addEventListener("scroll", pane._scrollHandler, { passive: true });
+  }
+}
+
+function _onPaneScroll(pane) {
+  if (
+    pane.messagesDiv.scrollTop < SCROLL_LOAD_THRESHOLD &&
+    pane._hasMore &&
+    !pane._loadingMore
+  ) {
+    _loadMoreMessages(pane);
+  }
+}
+
+async function _loadMoreMessages(pane) {
+  pane._loadingMore = true;
+  showLoadingIndicator(pane);
+
+  const sid = getState("sessionId");
+  const before = pane._oldestMessageId;
+  const opts = { limit: MESSAGE_PAGE_SIZE, before };
+
+  try {
+    let olderMessages;
+
+    switch (pane._paginationMode) {
+      case "single":
+        olderMessages = await api.fetchSingleMessages(sid, opts);
+        break;
+      case "chat0": {
+        // Chat 1 merges chatId + single messages
+        const [chatMsgs, singleMsgs] = await Promise.all([
+          api.fetchMessagesByChatId(sid, pane.chatId, opts),
+          api.fetchSingleMessages(sid, opts),
+        ]);
+        olderMessages = singleMsgs.length > 0
+          ? [...singleMsgs, ...chatMsgs].sort((a, b) => a.id - b.id)
+          : chatMsgs;
+        break;
+      }
+      default:
+        olderMessages = await api.fetchMessagesByChatId(sid, pane.chatId, opts);
+    }
+
+    if (olderMessages.length === 0) {
+      pane._hasMore = false;
+    } else {
+      pane._oldestMessageId = olderMessages[0].id;
+      pane._hasMore = olderMessages.length >= MESSAGE_PAGE_SIZE;
+      prependOlderMessages(olderMessages, pane);
+    }
+  } catch (err) {
+    console.error("Failed to load more messages:", err);
+  } finally {
+    hideLoadingIndicator(pane);
+    pane._loadingMore = false;
+
+    // Detach scroll listener if no more messages
+    if (!pane._hasMore && pane._scrollHandler) {
+      pane.messagesDiv.removeEventListener("scroll", pane._scrollHandler);
+      pane._scrollHandler = null;
+    }
+  }
+}
+
 // ── Session Context Menu ────────────────────────────────
 let sessionCtxMenu = null;
 

package/public/js/main.js

@@ -18,6 +18,7 @@ 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/status-bar.js';
 

package/public/js/panels/assistant-bot.js

@@ -6,6 +6,7 @@ import { renderMarkdown, highlightCodeBlocks, addCopyButtons } from '../ui/forma
 import * as api from '../core/api.js';
 import { getSelectedModel } from '../ui/model-selector.js';
 import { $ } from '../core/dom.js';
+import { getSetting } from '../components/settings-modal.js';
 
 const SESSIONS_KEY = 'claudeck-bot-sessions';
 let panel, messagesDiv, inputEl, sendBtn, stopBtn, settingsOverlay, promptTextarea;
@@ -433,12 +434,27 @@ function newBotSession() {
   showBotWhaly();
 }
 
+// ── Visibility ──────────────────────────────────────────
+
+let bubble; // reference set in createBotDOM
+
+function setBotVisible(visible) {
+  if (!bubble) return;
+  bubble.style.display = visible ? '' : 'none';
+  if (!visible && panel) closePanel();
+}
+
 // ── Init ────────────────────────────────────────────────
 
 function init() {
   createBotDOM();
+  bubble = document.querySelector('.bot-bubble');
   on('ws:message', handleBotWsMessage);
   fetchSystemPrompt();
+
+  // Respect enable/disable setting
+  setBotVisible(getSetting('assistantBot', true));
+  window.addEventListener('setting:assistantBot', (e) => setBotVisible(e.detail));
 }
 
 // Run on import

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

@@ -147,7 +147,7 @@ registerTab({
       <li>Existing shortcuts (e.g. <code>openRightPanel('my-tab')</code>) work automatically</li>
     </ul>
 
-    <div class="callout">See <code>plugins/event-stream/client.js</code> for a complete working example of a plugin tab.</div>
+    <div class="callout">See <code>plugins/claude-editor/client.js</code> for a complete working example of a plugin tab.</div>
   `,
 });
 
@@ -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/event-stream/</code>, <code>plugins/repos/</code>, or <code>plugins/tasks/</code> as reference implementations. For full-stack with server routes, see <code>plugins/linear/</code>.</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 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>
   `,
 });
 

package/public/js/panels/memory.js

@@ -109,6 +109,7 @@ function renderMemories() {
       try {
         await fetchApi(`/${m.id}`, { method: 'DELETE' });
         memories = memories.filter(x => x.id !== m.id);
+        if ($.memoryTitle) $.memoryTitle.textContent = `Memory (${memories.length})`;
         renderMemories();
         loadStats();
       } catch { /* ignore */ }

package/public/js/ui/context-gauge.js

@@ -5,11 +5,13 @@ import { $ } from '../core/dom.js';
 const sbGaugeSep = document.getElementById("sb-gauge-sep");
 
 const MODEL_LIMITS = {
+  opus: 1_000_000,
   default: 200_000,
 };
 
 function getLimit() {
-  return MODEL_LIMITS.default;
+  const model = $.modelSelect?.value || '';
+  return MODEL_LIMITS[model] || MODEL_LIMITS.default;
 }
 
 function formatTokens(n) {
@@ -73,6 +75,13 @@ export function resetContextGauge() {
   if (sbGaugeSep) sbGaugeSep.classList.add('hidden');
 }
 
+// Re-render gauge when model changes (limit may differ)
+$.modelSelect?.addEventListener('change', () => {
+  const tokens = getState('sessionTokens');
+  const total = tokens.input + tokens.output + tokens.cacheRead + tokens.cacheCreation;
+  if (total > 0) renderGauge(tokens);
+});
+
 export async function loadContextGauge(sessionId) {
   if (!sessionId) return;
   try {

package/public/js/ui/header-dropdowns.js

@@ -70,3 +70,33 @@ document.addEventListener("keydown", (e) => {
     document.querySelectorAll(".header-dropdown.open").forEach((d) => d.classList.remove("open"));
   }
 });
+
+// Sync header dropdown display when hidden selects change programmatically
+function syncDropdownDisplay(selectId) {
+  const select = document.getElementById(selectId);
+  if (!select) return;
+
+  function sync() {
+    const val = select.value;
+    const items = document.querySelectorAll(`.header-submenu-item[data-target="${selectId}"]`);
+    let matchedText = null;
+    items.forEach((item) => {
+      const isMatch = item.dataset.value === val;
+      item.classList.toggle("active", isMatch);
+      if (isMatch) matchedText = item.textContent.trim();
+    });
+    if (matchedText) {
+      const parent = items[0]?.closest(".header-dropdown-item");
+      const display = parent?.querySelector(".header-dropdown-item-value");
+      if (display) display.textContent = matchedText;
+    }
+  }
+
+  select.addEventListener("change", sync);
+  // Initial sync for values restored from localStorage
+  sync();
+}
+
+syncDropdownDisplay("model-select");
+syncDropdownDisplay("perm-mode-select");
+syncDropdownDisplay("max-turns-select");

package/public/js/ui/input-meta.js

@@ -6,16 +6,23 @@ const elPerm  = document.getElementById("input-meta-perm");
 const elTurns = document.getElementById("input-meta-turns");
 
 const permLabels = {
-  bypass: "bypass",
-  confirmDangerous: "confirm dangerous",
-  confirmAll: "confirm all",
-  plan: "plan only",
+  bypass: "Bypass",
+  confirmDangerous: "Confirm Writes",
+  confirmAll: "Confirm All",
+  plan: "Plan Mode",
+};
+
+const modelLabels = {
+  "": "Auto",
+  sonnet: "Sonnet",
+  opus: "Opus",
+  haiku: "Haiku",
 };
 
 function updateModel() {
   if (!elModel) return;
   const val = $.modelSelect?.value || "";
-  elModel.textContent = val || "default model";
+  elModel.textContent = modelLabels[val] || val || "Auto";
 }
 
 function updatePerm() {
@@ -27,7 +34,7 @@ function updatePerm() {
 function updateTurns() {
   if (!elTurns) return;
   const val = $.maxTurnsSelect?.value || "30";
-  elTurns.textContent = val === "0" ? "unlimited turns" : `${val} turns`;
+  elTurns.textContent = val === "0" ? "Unlimited" : `${val} turns`;
 }
 
 // Also watch header dropdown display elements (used when dropdowns replace <select>)

package/public/js/ui/max-turns.js

@@ -9,13 +9,16 @@ export function getMaxTurns() {
 }
 
 function init() {
+  $.maxTurnsSelect?.addEventListener('change', () => {
+    localStorage.setItem(STORAGE_KEY, $.maxTurnsSelect.value);
+  });
   const saved = localStorage.getItem(STORAGE_KEY);
   if (saved && $.maxTurnsSelect) {
     $.maxTurnsSelect.value = saved;
+    queueMicrotask(() => {
+      $.maxTurnsSelect?.dispatchEvent(new Event('change', { bubbles: true }));
+    });
   }
-  $.maxTurnsSelect?.addEventListener('change', () => {
-    localStorage.setItem(STORAGE_KEY, $.maxTurnsSelect.value);
-  });
 }
 
 init();

package/public/js/ui/messages.js

@@ -443,3 +443,45 @@ function addForkButton(msgEl, messageId) {
   btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>`;
   msgEl.appendChild(btn);
 }
+
+// ── Lazy-loading helpers ────────────────────────────────
+
+export function prependOlderMessages(messages, pane) {
+  if (!messages || messages.length === 0) return;
+
+  // Render older messages into a detached container using the same rendering logic
+  const tempContainer = document.createElement("div");
+  const tempPane = { messagesDiv: tempContainer, currentAssistantMsg: null };
+  renderMessagesIntoPane(messages, tempPane);
+
+  // Capture scroll position before DOM mutation
+  const scrollHeightBefore = pane.messagesDiv.scrollHeight;
+
+  // Move all rendered nodes into the real pane
+  const fragment = document.createDocumentFragment();
+  while (tempContainer.firstChild) {
+    fragment.appendChild(tempContainer.firstChild);
+  }
+
+  // Insert after loading indicator (if present) or at the top
+  const indicator = pane.messagesDiv.querySelector(".load-more-indicator");
+  const insertRef = indicator ? indicator.nextSibling : pane.messagesDiv.firstChild;
+  pane.messagesDiv.insertBefore(fragment, insertRef);
+
+  // Restore scroll position so the user's view doesn't jump
+  const scrollHeightAfter = pane.messagesDiv.scrollHeight;
+  pane.messagesDiv.scrollTop += (scrollHeightAfter - scrollHeightBefore);
+}
+
+export function showLoadingIndicator(pane) {
+  if (pane.messagesDiv.querySelector(".load-more-indicator")) return;
+  const el = document.createElement("div");
+  el.className = "load-more-indicator";
+  el.innerHTML = '<span class="load-more-spinner"></span> Loading older messages\u2026';
+  pane.messagesDiv.prepend(el);
+}
+
+export function hideLoadingIndicator(pane) {
+  const el = pane.messagesDiv.querySelector(".load-more-indicator");
+  if (el) el.remove();
+}

package/public/js/ui/model-selector.js

@@ -11,6 +11,7 @@ function init() {
   const saved = localStorage.getItem(STORAGE_KEY);
   if (saved && $.modelSelect) {
     $.modelSelect.value = saved;
+    $.modelSelect.dispatchEvent(new Event('change', { bubbles: true }));
   }
   $.modelSelect?.addEventListener('change', () => {
     localStorage.setItem(STORAGE_KEY, $.modelSelect.value);

package/public/js/ui/parallel.js

@@ -138,11 +138,9 @@ export function enterParallelMode() {
 
   const sessionId = getState("sessionId");
   if (sessionId) {
-    // Lazy import to avoid circular dependency
+    // Lazy import to avoid circular dependency — load all panes concurrently
     import('../features/sessions.js').then(({ loadPaneMessages }) => {
-      for (const chatId of CHAT_IDS) {
-        loadPaneMessages(sessionId, chatId);
-      }
+      Promise.all(CHAT_IDS.map(chatId => loadPaneMessages(sessionId, chatId)));
     });
   }
 }

package/public/js/ui/permissions.js

@@ -153,6 +153,7 @@ function initPermissions() {
   const saved = localStorage.getItem(STORAGE_KEY);
   if (saved && $.permModeSelect) {
     $.permModeSelect.value = saved;
+    $.permModeSelect.dispatchEvent(new Event('change', { bubbles: true }));
   }
 
   // Persist mode changes