claudeck 1.4.1 → 1.4.2

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/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/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/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", () => {

package/public/style.css

@@ -42,6 +42,7 @@
 @import url("css/panels/skills-manager.css");
 @import url("css/features/telegram.css");
 @import url("css/features/voice-input.css");
+@import url("css/features/message-queue.css");
 @import url("css/features/retro-terminal.css");
 @import url("css/features/welcome.css");
 @import url("css/features/tour.css");