claudeck 1.4.0 → 1.4.2

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 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>
   `,
 });
 

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/formatting.js

@@ -31,21 +31,37 @@ function getLangLabel(lang) {
 export function renderMarkdown(text) {
   let html = escapeHtml(text);
 
-  // ── Code blocks — with language header ──
+  // ── Placeholder system ──
+  // Extract code blocks and inline code into placeholders FIRST to protect
+  // their content from text-level regex passes (bold, italic, links, etc.)
+  const placeholders = [];
+  function placeholder(content) {
+    placeholders.push(content);
+    return `\x00PH${placeholders.length - 1}\x00`;
+  }
+
+  // ── Code blocks — extract to placeholders ──
   html = html.replace(
     /```(\w*)\n([\s\S]*?)```/g,
     (_, lang, code) => {
       const langClass = lang ? `language-${lang}` : "";
       const label = getLangLabel(lang);
       const headerHtml = label
-        ? `<div class="code-block-header"><span class="code-lang-label">${escapeHtml(label)}</span></div>`
+        ? `<div class="code-block-header"><span class="code-lang-label">${label}</span></div>`
         : "";
-      return `<div class="code-block-wrapper">${headerHtml}<pre><code class="${langClass}" data-lang="${lang}">${code}</code></pre></div>`;
+      const wrappedCode = code
+        .replace(/\n$/, "")
+        .split("\n")
+        .map(line => `<span class="code-line">${line}</span>`)
+        .join("\n");
+      return placeholder(`<div class="code-block-wrapper">${headerHtml}<pre><code class="${langClass}" data-lang="${lang}">${wrappedCode}</code></pre></div>`);
     }
   );
 
-  // ── Inline code ──
-  html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+  // ── Inline code — extract to placeholders ──
+  html = html.replace(/`([^`]+)`/g, (_, code) => {
+    return placeholder(`<code class="inline-code">${code}</code>`);
+  });
 
   // ── Bold + Italic combined ──
   html = html.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
@@ -69,7 +85,6 @@ export function renderMarkdown(text) {
   html = html.replace(/^---+$/gm, '<hr class="md-hr">');
 
   // ── Blockquotes ──
-  // Match consecutive lines starting with >
   html = html.replace(/(?:^&gt; (.*)$\n?)+/gm, (match) => {
     const lines = match.trim().split("\n").map(l => l.replace(/^&gt; ?/, "")).join("<br>");
     return `<blockquote class="md-blockquote">${lines}</blockquote>\n`;
@@ -78,8 +93,13 @@ export function renderMarkdown(text) {
   // ── Links ──
   html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="md-link" target="_blank" rel="noopener">$1</a>');
 
+  // ── Auto-link bare URLs (not already inside an <a> tag or href attribute) ──
+  html = html.replace(
+    /(?<!href="|">)(https?:\/\/[^\s<>"'`)\]]+)/g,
+    '<a href="$1" class="md-link" target="_blank" rel="noopener">$1</a>'
+  );
+
   // ── Tables ──
-  // Match table blocks: header row, separator row, then data rows
   html = html.replace(
     /(?:^\|(.+)\|$\n^\|[-| :]+\|$\n(?:^\|(.+)\|$\n?)*)/gm,
     (match) => {
@@ -89,7 +109,6 @@ export function renderMarkdown(text) {
       const parseRow = (row) =>
         row.split("|").filter((_, i, arr) => i > 0 && i < arr.length - 1).map(c => c.trim());
 
-      // Parse alignment from separator row
       const sepCells = parseRow(rows[1]);
       const aligns = sepCells.map(c => {
         if (c.startsWith(":") && c.endsWith(":")) return "center";
@@ -119,22 +138,43 @@ export function renderMarkdown(text) {
   );
 
   // ── Ordered lists ──
-  // Match consecutive lines starting with digits followed by . or )
   html = html.replace(/(?:^\d+[.)]\s+.+$\n?)+/gm, (match) => {
     const items = match.trim().split("\n").map(l => l.replace(/^\d+[.)]\s+/, ""));
     return '<ol class="md-list md-ol">' + items.map(i => `<li>${i}</li>`).join("") + "</ol>\n";
   });
 
+  // ── Task lists (before general unordered lists) ──
+  html = html.replace(/(?:^[-*+]\s+\[[ xX]\]\s+.+$\n?)+/gm, (match) => {
+    const items = match.trim().split("\n").map(l => {
+      const checked = /^[-*+]\s+\[x\]/i.test(l);
+      const text = l.replace(/^[-*+]\s+\[[ xX]\]\s+/, "");
+      const checkbox = `<input type="checkbox" class="md-checkbox" ${checked ? "checked" : ""} disabled>`;
+      const spanClass = checked ? ' class="task-text-done"' : "";
+      return `<li>${checkbox}<span${spanClass}>${text}</span></li>`;
+    });
+    return '<ul class="md-list md-task-list">' + items.join("") + "</ul>\n";
+  });
+
   // ── Unordered lists ──
-  // Match consecutive lines starting with -, *, or +
   html = html.replace(/(?:^[-*+]\s+.+$\n?)+/gm, (match) => {
     const items = match.trim().split("\n").map(l => l.replace(/^[-*+]\s+/, ""));
     return '<ul class="md-list md-ul">' + items.map(i => `<li>${i}</li>`).join("") + "</ul>\n";
   });
 
   // ── Line breaks ──
+  html = html.replace(/\n{3,}/g, "\n\n");
   html = html.replace(/\n/g, "<br>");
 
+  // Remove redundant <br> around block elements that already have CSS margins
+  html = html.replace(/(<br>)+(<(?:h[1-4]|ul|ol|div|table|blockquote|hr)[\s>])/g, "$2");
+  html = html.replace(/(<\/(?:h[1-4]|ul|ol|div|table|blockquote|hr)>)(<br>)+/g, "$1");
+  // Also clean <br> around placeholder tokens (code blocks are block-level)
+  html = html.replace(/(<br>)+(\x00PH\d+\x00)/g, "$2");
+  html = html.replace(/(\x00PH\d+\x00)(<br>)+/g, "$1");
+
+  // ── Restore placeholders ──
+  html = html.replace(/\x00PH(\d+)\x00/g, (_, i) => placeholders[parseInt(i)]);
+
   return html;
 }
 
@@ -143,9 +183,23 @@ export function highlightCodeBlocks(container) {
   container.querySelectorAll("pre code").forEach((block) => {
     if (block.dataset.highlighted === "yes") return;
     try {
-      // Highlight both language-tagged and untagged blocks (auto-detect)
       hljs.highlightElement(block);
     } catch { /* ignore unsupported languages */ }
+    // Re-wrap lines for CSS line numbering after highlight.js processes the block
+    wrapCodeLinesInBlock(block);
+  });
+}
+
+function wrapCodeLinesInBlock(block) {
+  if (block.querySelector(".code-line")) return;
+  const html = block.innerHTML;
+  const lines = html.split("\n");
+  block.innerHTML = lines.map(l => `<span class="code-line">${l}</span>`).join("\n");
+}
+
+export function wrapCodeLines(container) {
+  container.querySelectorAll("pre code").forEach((block) => {
+    wrapCodeLinesInBlock(block);
   });
 }
 

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

@@ -6,9 +6,89 @@ import { getState, setState } from '../core/store.js';
 import { $ } from '../core/dom.js';
 import { getPane } from './parallel.js';
 
+const WELCOME_GREETINGS = [
+  "What can I help you build today?",
+  "Ready when you are!",
+  "Let's create something great together",
+  "What's on your mind?",
+  "Let's turn your ideas into code",
+  "What are we working on today?",
+  "Got a bug to squash or a feature to ship?",
+  "Your next big idea starts here",
+  "Let's make something awesome",
+  "How can I help you today?",
+  "What challenge are we tackling today?",
+  "Let's get things done together",
+];
+
+function getRandomGreeting() {
+  return WELCOME_GREETINGS[Math.floor(Math.random() * WELCOME_GREETINGS.length)];
+}
+
+function getChatAreaMain() {
+  return document.querySelector('.chat-area-main');
+}
+
+export function showWelcomeState() {
+  const chatMain = getChatAreaMain();
+  if (!chatMain) return;
+  // Create the welcome center element if it doesn't exist
+  let welcomeEl = chatMain.querySelector('.welcome-center');
+  if (!welcomeEl) {
+    welcomeEl = document.createElement('div');
+    welcomeEl.className = 'welcome-center';
+    welcomeEl.innerHTML = `<img class="whaly-welcome-img" src="/icons/whaly.png" alt="Whaly" draggable="false"><div class="welcome-greeting">${getRandomGreeting()}</div>`;
+    // Insert before the input-bar
+    const inputBar = chatMain.querySelector('.input-bar');
+    if (inputBar) {
+      chatMain.insertBefore(welcomeEl, inputBar);
+    } else {
+      chatMain.appendChild(welcomeEl);
+    }
+  } else {
+    // Update greeting text
+    const greetingEl = welcomeEl.querySelector('.welcome-greeting');
+    if (greetingEl) greetingEl.textContent = getRandomGreeting();
+  }
+  chatMain.classList.remove('welcome-exit');
+  chatMain.classList.add('welcome-state');
+}
+
+export function exitWelcomeState() {
+  const chatMain = getChatAreaMain();
+  if (!chatMain || !chatMain.classList.contains('welcome-state')) return Promise.resolve();
+
+  return new Promise(resolve => {
+    chatMain.classList.add('welcome-exit');
+
+    const onEnd = () => {
+      chatMain.classList.remove('welcome-state', 'welcome-exit');
+      resolve();
+    };
+    // Listen for the fade-out animation on the welcome center
+    const welcomeEl = chatMain.querySelector('.welcome-center');
+    if (welcomeEl) {
+      welcomeEl.addEventListener('animationend', onEnd, { once: true });
+    } else {
+      onEnd();
+    }
+  });
+}
+
+export function isWelcomeStateActive() {
+  const chatMain = getChatAreaMain();
+  return chatMain?.classList.contains('welcome-state') || false;
+}
+
 export function showWhalyPlaceholder(pane) {
   pane = pane || getPane(null);
   removeWhalyPlaceholder(pane);
+  // Use welcome state for the main (non-parallel) pane when the DOM supports it
+  const parallelMode = getState("parallelMode");
+  if (!parallelMode && getChatAreaMain()) {
+    showWelcomeState();
+  }
+  // Always add the placeholder into the messages div (tests + parallel mode rely on this)
   const el = document.createElement("div");
   el.className = "whaly-placeholder";
   el.innerHTML = `<img src="/icons/whaly.png" alt="Whaly" draggable="false"><div class="whaly-text">~ start chatting with claude ~</div><div class="whaly-hint">Type a message or select a prompt template</div>`;
@@ -24,6 +104,9 @@ export function removeWhalyPlaceholder(pane) {
 export function addUserMessage(text, pane, images = [], filePaths = []) {
   pane = pane || getPane(null);
   removeWhalyPlaceholder(pane);
+  // Exit welcome state immediately (no animation — message renders right away)
+  const chatMain = getChatAreaMain();
+  if (chatMain) chatMain.classList.remove('welcome-state', 'welcome-exit');
   pane.currentAssistantMsg = null;
   const div = document.createElement("div");
   div.className = "msg msg-user";
@@ -58,7 +141,8 @@ export function addUserMessage(text, pane, images = [], filePaths = []) {
   }
 
   pane.messagesDiv.appendChild(div);
-  scrollToBottom(pane);
+  // User pressed send — always pull them to the bottom regardless of scroll position.
+  scrollToBottom(pane, { force: true });
 }
 
 function renderChatImages(images, container) {
@@ -343,6 +427,9 @@ export function renderMessagesIntoPane(messages, pane) {
     showWhalyPlaceholder(pane);
     return;
   }
+  // Exit welcome state when loading existing messages
+  const chatMain = getChatAreaMain();
+  if (chatMain) chatMain.classList.remove('welcome-state', 'welcome-exit');
   // Track last assistant message ID for fork button placement
   let lastAssistantMsgEl = null;
   let lastAssistantMsgId = null;
@@ -432,6 +519,15 @@ export function renderMessagesIntoPane(messages, pane) {
   highlightCodeBlocks(pane.messagesDiv);
   addCopyButtons(pane.messagesDiv);
   renderMermaidBlocks(pane.messagesDiv);
+  // Loading a saved session: jump to the latest message and re-engage follow mode.
+  // Per-message scrollToBottom calls during the render loop are no-ops because
+  // scrollTop=0 + a tall scrollHeight fails the near-bottom check; the final
+  // forced scroll lands the user where they expect (newest message visible).
+  // Skip when rendering into a detached temp container (e.g. prependOlderMessages),
+  // which only uses this function for DOM rendering and manages scroll itself.
+  if (pane.messagesDiv && pane.messagesDiv.isConnected) {
+    scrollToBottom(pane, { force: true });
+  }
 }
 
 function addForkButton(msgEl, messageId) {

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

@@ -4,6 +4,26 @@ import { getState, setState } from '../core/store.js';
 import { CHAT_IDS } from '../core/constants.js';
 import { handleAutocompleteKeydown, handleSlashAutocomplete } from './commands.js';
 import { handleHistoryKeydown } from '../features/input-history.js';
+import { isNearBottom } from '../core/utils.js';
+
+// Wire stick-to-bottom tracking onto a pane. Updates pane.followBottom as the
+// user scrolls so scrollToBottom() knows whether to yank them or leave them be.
+function attachScrollTracking(pane) {
+  pane.followBottom = true;
+  pane.hasNewBelow = false;
+  const el = pane.messagesDiv;
+  if (!el || !el.addEventListener) return;
+  el.addEventListener("scroll", () => {
+    const atBottom = isNearBottom(el);
+    pane.followBottom = atBottom;
+    if (atBottom && pane.hasNewBelow) {
+      pane.hasNewBelow = false;
+      window.dispatchEvent(new CustomEvent("claudeck:scroll-state", {
+        detail: { chatId: pane.chatId, hasNewBelow: false },
+      }));
+    }
+  }, { passive: true });
+}
 
 // Panes map — chatId -> pane state object
 export const panes = new Map();
@@ -15,7 +35,7 @@ export function getPane(chatId) {
 
 export function initSinglePane() {
   panes.clear();
-  panes.set(null, {
+  const pane = {
     chatId: null,
     messagesDiv: $.messagesDiv,
     messageInput: $.messageInput,
@@ -25,7 +45,12 @@ export function initSinglePane() {
     currentAssistantMsg: null,
     autocompleteEl: document.getElementById("slash-autocomplete"),
     _autocompleteIndex: -1,
-  });
+    _messageQueue: [],
+    _queuePaused: false,
+    _queuePauseReason: null,
+  };
+  attachScrollTracking(pane);
+  panes.set(null, pane);
 }
 
 // Initialize on load
@@ -88,8 +113,13 @@ export function createChatPane(chatId, index) {
     statusEl: header.querySelector(".chat-pane-status"),
     autocompleteEl: paneAutocomplete,
     _autocompleteIndex: -1,
+    _messageQueue: [],
+    _queuePaused: false,
+    _queuePauseReason: null,
   };
 
+  attachScrollTracking(state);
+
   paneSendBtn.addEventListener("click", () => sendMessage(state));
   paneStopBtn.addEventListener("click", () => stopGeneration(state));
 

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

package/public/js/ui/right-panel.js

@@ -6,7 +6,6 @@ import { initTabSDK } from "./tab-sdk.js";
 const STORAGE_KEY = "claudeck-right-panel";
 const TAB_KEY = "claudeck-right-panel-tab";
 const WIDTH_KEY = "claudeck-right-panel-width";
-const OLD_LINEAR_KEY = "claudeck-linear-panel";
 const MIN_WIDTH = 200;
 const MAX_WIDTH_RATIO = 0.6; // 60vw
 
@@ -82,13 +81,6 @@ function applyTab(tabName) {
 }
 
 function initRightPanel() {
-  // Migrate old linear panel localStorage key
-  const oldState = localStorage.getItem(OLD_LINEAR_KEY);
-  if (oldState && !localStorage.getItem(STORAGE_KEY)) {
-    localStorage.setItem(STORAGE_KEY, oldState);
-    localStorage.removeItem(OLD_LINEAR_KEY);
-  }
-
   // Tab click handlers
   $.rightPanel.querySelectorAll(".right-panel-tab").forEach((btn) => {
     btn.addEventListener("click", () => {