claudeck 1.0.0

package/public/js/ui/parallel.js

@@ -0,0 +1,176 @@
+// Parallel mode — 2x2 chat panes
+import { $ } from '../core/dom.js';
+import { getState, setState } from '../core/store.js';
+import { CHAT_IDS } from '../core/constants.js';
+import { handleAutocompleteKeydown, handleSlashAutocomplete } from './commands.js';
+
+// Panes map — chatId -> pane state object
+export const panes = new Map();
+
+export function getPane(chatId) {
+  if (!getState("parallelMode")) return panes.get(null);
+  return panes.get(chatId) || panes.get(null);
+}
+
+export function initSinglePane() {
+  panes.clear();
+  panes.set(null, {
+    chatId: null,
+    messagesDiv: $.messagesDiv,
+    messageInput: $.messageInput,
+    sendBtn: $.sendBtn,
+    stopBtn: $.stopBtn,
+    isStreaming: false,
+    currentAssistantMsg: null,
+    autocompleteEl: document.getElementById("slash-autocomplete"),
+    _autocompleteIndex: -1,
+  });
+}
+
+// Initialize on load
+initSinglePane();
+
+export function createChatPane(chatId, index) {
+  // Lazy import to avoid circular dependency at module parse time
+  const { sendMessage, stopGeneration } = _getLazyChatFns();
+
+  const container = document.createElement("div");
+  container.className = "chat-pane";
+  container.dataset.chatId = chatId;
+
+  const header = document.createElement("div");
+  header.className = "chat-pane-header";
+  header.innerHTML = `
+    <span class="chat-pane-label">Chat ${index + 1}</span>
+    <span class="chat-pane-status">idle</span>
+  `;
+  container.appendChild(header);
+
+  const msgs = document.createElement("div");
+  msgs.className = "messages";
+  container.appendChild(msgs);
+
+  const inputBar = document.createElement("div");
+  inputBar.className = "input-bar";
+
+  const textarea = document.createElement("textarea");
+  textarea.placeholder = `Ask Claude... (Chat ${index + 1})`;
+  textarea.rows = 1;
+  inputBar.appendChild(textarea);
+
+  const paneSendBtn = document.createElement("button");
+  paneSendBtn.className = "pane-send-btn";
+  paneSendBtn.title = "Send";
+  paneSendBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M3 10l7-7m0 0l7 7m-7-7v14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(90, 10, 10)"/></svg>`;
+  inputBar.appendChild(paneSendBtn);
+
+  const paneStopBtn = document.createElement("button");
+  paneStopBtn.className = "pane-stop-btn hidden";
+  paneStopBtn.title = "Stop";
+  paneStopBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><rect x="4" y="4" width="12" height="12" rx="2" fill="currentColor"/></svg>`;
+  inputBar.appendChild(paneStopBtn);
+
+  const paneAutocomplete = document.createElement("div");
+  paneAutocomplete.className = "slash-autocomplete hidden";
+  inputBar.appendChild(paneAutocomplete);
+
+  container.appendChild(inputBar);
+
+  const state = {
+    chatId,
+    messagesDiv: msgs,
+    messageInput: textarea,
+    sendBtn: paneSendBtn,
+    stopBtn: paneStopBtn,
+    isStreaming: false,
+    currentAssistantMsg: null,
+    statusEl: header.querySelector(".chat-pane-status"),
+    autocompleteEl: paneAutocomplete,
+    _autocompleteIndex: -1,
+  };
+
+  paneSendBtn.addEventListener("click", () => sendMessage(state));
+  paneStopBtn.addEventListener("click", () => stopGeneration(state));
+
+  textarea.addEventListener("keydown", (e) => {
+    if (handleAutocompleteKeydown(e, state)) return;
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage(state);
+    }
+  });
+
+  textarea.addEventListener("input", () => {
+    textarea.style.height = "auto";
+    textarea.style.height = Math.min(textarea.scrollHeight, 80) + "px";
+    handleSlashAutocomplete(state);
+  });
+
+  return { container, state };
+}
+
+export function enterParallelMode() {
+  setState("parallelMode", true);
+  $.toggleParallelBtn.checked = true;
+
+  const chatArea = document.querySelector(".chat-area");
+  setState("savedChatArea", chatArea);
+
+  const grid = document.createElement("div");
+  grid.className = "chat-grid";
+  grid.id = "chat-grid";
+
+  panes.clear();
+
+  for (let i = 0; i < CHAT_IDS.length; i++) {
+    const { container, state } = createChatPane(CHAT_IDS[i], i);
+    grid.appendChild(container);
+    panes.set(CHAT_IDS[i], state);
+  }
+
+  chatArea.replaceWith(grid);
+
+  const sessionId = getState("sessionId");
+  if (sessionId) {
+    // Lazy import to avoid circular dependency
+    import('../features/sessions.js').then(({ loadPaneMessages }) => {
+      for (const chatId of CHAT_IDS) {
+        loadPaneMessages(sessionId, chatId);
+      }
+    });
+  }
+}
+
+export function exitParallelMode() {
+  setState("parallelMode", false);
+  $.toggleParallelBtn.checked = false;
+
+  const grid = document.getElementById("chat-grid");
+  const savedChatArea = getState("savedChatArea");
+  if (grid && savedChatArea) {
+    grid.replaceWith(savedChatArea);
+  }
+
+  initSinglePane();
+
+  const sessionId = getState("sessionId");
+  if (sessionId) {
+    import('../features/sessions.js').then(({ loadMessages }) => {
+      loadMessages(sessionId);
+    });
+  }
+}
+
+// Lazy getter for chat.js functions to avoid circular dependency
+let _chatFns = null;
+function _getLazyChatFns() {
+  if (!_chatFns) {
+    // These are set by chat.js during init
+    _chatFns = { sendMessage: () => {}, stopGeneration: () => {} };
+  }
+  return _chatFns;
+}
+
+export function _setChatFns(fns) {
+  _chatFns = fns;
+}

package/public/js/ui/permissions.js

@@ -0,0 +1,168 @@
+// Permission / Tool Approval system
+import { $ } from '../core/dom.js';
+import { getState } from '../core/store.js';
+import { on as onEvent } from '../core/events.js';
+import { sendNotification } from './notifications.js';
+
+const STORAGE_KEY = 'claudeck-perm-mode';
+
+// Per-session always-allow set (cleared on refresh or /new)
+const alwaysAllowTools = new Set();
+
+// Permission request queue — one modal at a time
+const permissionQueue = [];
+let activeRequest = null;
+
+export function getPermissionMode() {
+  return $.permModeSelect?.value || 'confirmDangerous';
+}
+
+export function clearSessionPermissions() {
+  alwaysAllowTools.clear();
+}
+
+export function enqueuePermissionRequest(msg) {
+  // Check if tool is in always-allow set — auto-approve without modal
+  if (alwaysAllowTools.has(msg.toolName)) {
+    sendPermissionResponse(msg.id, 'allow');
+    return;
+  }
+
+  permissionQueue.push(msg);
+  if (!activeRequest) {
+    processNext();
+  }
+}
+
+function processNext() {
+  if (permissionQueue.length === 0) {
+    activeRequest = null;
+    return;
+  }
+  activeRequest = permissionQueue.shift();
+  showPermissionModal(activeRequest);
+}
+
+function showPermissionModal(req) {
+  $.permModalToolName.textContent = `Tool Approval: ${req.toolName}`;
+  $.permModalSummary.textContent = getToolSummary(req.toolName, req.input);
+  $.permModalInput.textContent = JSON.stringify(req.input, null, 2);
+  $.permAlwaysAllowTool.textContent = req.toolName;
+  $.permAlwaysAllowCb.checked = false;
+
+  // Show background session badge if request is from a bg session
+  const bgBadge = document.getElementById('perm-bg-badge');
+  if (bgBadge) {
+    if (req._bgSessionTitle) {
+      bgBadge.textContent = `bg: ${req._bgSessionTitle}`;
+      bgBadge.classList.remove('hidden');
+    } else {
+      bgBadge.classList.add('hidden');
+    }
+  }
+
+  $.permModal.classList.remove('hidden');
+  $.permAllowBtn.focus();
+
+  // Notify when tab is not focused
+  const bgLabel = req._bgSessionTitle ? ` (${req._bgSessionTitle})` : '';
+  sendNotification('Tool Approval Needed', `${req.toolName}${bgLabel}`, `perm-${req.id}`);
+}
+
+function getToolSummary(name, input) {
+  if (!input) return name;
+  if (input.file_path) return input.file_path;
+  if (input.command) return input.command.slice(0, 120);
+  if (input.pattern) return input.pattern;
+  if (input.query) return input.query.slice(0, 120);
+  if (input.prompt) return input.prompt.slice(0, 120);
+  if (input.url) return input.url;
+  return name;
+}
+
+function hideModal() {
+  $.permModal.classList.add('hidden');
+}
+
+function handleAllow() {
+  if (!activeRequest) return;
+  const id = activeRequest.id;
+  const toolName = activeRequest.toolName;
+  if ($.permAlwaysAllowCb.checked) {
+    alwaysAllowTools.add(toolName);
+  }
+  hideModal();
+  sendPermissionResponse(id, 'allow');
+  activeRequest = null;
+  processNext();
+}
+
+function handleDeny() {
+  if (!activeRequest) return;
+  const id = activeRequest.id;
+  hideModal();
+  sendPermissionResponse(id, 'deny');
+  activeRequest = null;
+  processNext();
+}
+
+function sendPermissionResponse(id, behavior) {
+  const ws = getState('ws');
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: 'permission_response', id, behavior }));
+  }
+}
+
+/**
+ * Handle external permission response (e.g., from Telegram).
+ * Auto-dismisses the modal if it's showing the same approval.
+ */
+export function handleExternalPermissionResponse(id, behavior) {
+  // If the active modal is for this approval, dismiss it
+  if (activeRequest && activeRequest.id === id) {
+    hideModal();
+    activeRequest = null;
+    processNext();
+    return;
+  }
+
+  // If it's in the queue, remove it
+  const idx = permissionQueue.findIndex((r) => r.id === id);
+  if (idx !== -1) {
+    permissionQueue.splice(idx, 1);
+  }
+}
+
+// Block Escape from closing this modal (capture phase, before shortcuts.js closeAllModals)
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && activeRequest && !$.permModal.classList.contains('hidden')) {
+    e.stopImmediatePropagation();
+  }
+}, true);
+
+// Clean up on disconnect
+onEvent('ws:disconnected', () => {
+  hideModal();
+  permissionQueue.length = 0;
+  activeRequest = null;
+});
+
+// ── Init ──
+function initPermissions() {
+  // Restore saved mode
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved && $.permModeSelect) {
+    $.permModeSelect.value = saved;
+  }
+
+  // Persist mode changes
+  $.permModeSelect?.addEventListener('change', () => {
+    localStorage.setItem(STORAGE_KEY, $.permModeSelect.value);
+  });
+
+  // Button handlers
+  $.permAllowBtn?.addEventListener('click', handleAllow);
+  $.permDenyBtn?.addEventListener('click', handleDeny);
+}
+
+initPermissions();

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

@@ -0,0 +1,173 @@
+// Right Panel — tabbed container for Tasks, Files, Git, and plugin tabs
+import { $ } from "../core/dom.js";
+import { emit, on } from "../core/events.js";
+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
+
+function isPanelOpen() {
+  return !$.rightPanel.classList.contains("hidden");
+}
+
+function getActiveTab() {
+  const btn = $.rightPanel.querySelector(".right-panel-tab.active");
+  return btn ? btn.dataset.tab : TABS[0];
+}
+
+function isValidTab(tabName) {
+  return !!$.rightPanel.querySelector(`.right-panel-tab[data-tab="${tabName}"]`);
+}
+
+export function openRightPanel(tabName) {
+  if (tabName && isValidTab(tabName)) {
+    switchTab(tabName);
+  }
+  $.rightPanel.classList.remove("hidden");
+  $.rightPanelToggleBtn.classList.add("active");
+  localStorage.setItem(STORAGE_KEY, "open");
+  emit("rightPanel:opened", getActiveTab());
+}
+
+export function closeRightPanel() {
+  $.rightPanel.classList.add("hidden");
+  $.rightPanelToggleBtn.classList.remove("active");
+  localStorage.setItem(STORAGE_KEY, "closed");
+}
+
+export function toggleRightPanel(tabName) {
+  if (isPanelOpen()) {
+    // If clicking same tab, close. If different tab, switch.
+    if (tabName && tabName !== getActiveTab()) {
+      switchTab(tabName);
+      emit("rightPanel:tabChanged", tabName);
+    } else {
+      closeRightPanel();
+    }
+  } else {
+    openRightPanel(tabName);
+  }
+}
+
+function switchTab(tabName) {
+  if (!isValidTab(tabName)) return;
+  applyTab(tabName);
+  emit("rightPanel:tabChanged", tabName);
+}
+
+// Visual-only tab switch (no event emitted) — used during init restore
+function restoreTab(tabName) {
+  if (!isValidTab(tabName)) return;
+  applyTab(tabName);
+}
+
+function applyTab(tabName) {
+  // Update tab buttons
+  $.rightPanel.querySelectorAll(".right-panel-tab").forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.tab === tabName);
+  });
+
+  // Update panes
+  $.rightPanel.querySelectorAll(".right-panel-pane").forEach((pane) => {
+    pane.classList.toggle("active", pane.dataset.tab === tabName);
+  });
+
+  localStorage.setItem(TAB_KEY, 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", () => {
+      const tab = btn.dataset.tab;
+      if (isPanelOpen() && getActiveTab() === tab) return;
+      switchTab(tab);
+    });
+  });
+
+  // Close button
+  $.rightPanelClose.addEventListener("click", () => closeRightPanel());
+
+  // Header toggle button
+  $.rightPanelToggleBtn.addEventListener("click", () => toggleRightPanel());
+
+  // Initialize Tab SDK — allows plugin tabs to register
+  initTabSDK();
+
+  // Restore saved tab (silently — no event, listeners aren't ready yet)
+  const savedTab = localStorage.getItem(TAB_KEY);
+  if (savedTab && isValidTab(savedTab)) {
+    restoreTab(savedTab);
+  }
+
+  // Restore saved width
+  const savedWidth = localStorage.getItem(WIDTH_KEY);
+  if (savedWidth) {
+    const w = parseInt(savedWidth, 10);
+    if (w >= MIN_WIDTH) {
+      $.rightPanel.style.width = w + "px";
+    }
+  }
+
+  // Restore panel state (silently — defer event so other modules register first)
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved === "open") {
+    $.rightPanel.classList.remove("hidden");
+    $.rightPanelToggleBtn.classList.add("active");
+    // Emit after all modules have initialized their event listeners
+    queueMicrotask(() => emit("rightPanel:opened", getActiveTab()));
+  }
+
+  // ── Resize by dragging left edge ────────────────────
+  initResize();
+}
+
+function initResize() {
+  const handle = document.getElementById("right-panel-resize");
+  if (!handle) return;
+
+  let startX = 0;
+  let startWidth = 0;
+
+  function onMouseDown(e) {
+    e.preventDefault();
+    startX = e.clientX;
+    startWidth = $.rightPanel.offsetWidth;
+    handle.classList.add("active");
+    $.rightPanel.classList.add("resizing");
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }
+
+  function onMouseMove(e) {
+    const maxWidth = window.innerWidth * MAX_WIDTH_RATIO;
+    // Dragging left increases width (panel is on the right)
+    const delta = startX - e.clientX;
+    const newWidth = Math.min(Math.max(startWidth + delta, MIN_WIDTH), maxWidth);
+    $.rightPanel.style.width = newWidth + "px";
+  }
+
+  function onMouseUp() {
+    handle.classList.remove("active");
+    $.rightPanel.classList.remove("resizing");
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    // Persist
+    localStorage.setItem(WIDTH_KEY, Math.round($.rightPanel.offsetWidth));
+  }
+
+  handle.addEventListener("mousedown", onMouseDown);
+}
+
+initRightPanel();

package/public/js/ui/shortcuts.js

@@ -0,0 +1,143 @@
+// Keyboard shortcuts
+import { $ } from '../core/dom.js';
+import { getState, setState } from '../core/store.js';
+import { CHAT_IDS } from '../core/constants.js';
+import { panes } from './parallel.js';
+import { registerCommand } from './commands.js';
+import { toggleRightPanel, openRightPanel } from './right-panel.js';
+import { toggleTipsFeed } from '../panels/tips-feed.js';
+
+function closeAllModals() {
+  document.querySelectorAll(".modal-overlay:not([data-persistent])").forEach((m) => m.classList.add("hidden"));
+}
+
+document.getElementById("shortcuts-modal-close").addEventListener("click", () => {
+  $.shortcutsModal.classList.add("hidden");
+});
+$.shortcutsModal.addEventListener("click", (e) => {
+  if (e.target === $.shortcutsModal) $.shortcutsModal.classList.add("hidden");
+});
+
+document.addEventListener("keydown", (e) => {
+  const isMeta = e.metaKey || e.ctrlKey;
+
+  if (e.key === "Escape") {
+    closeAllModals();
+    return;
+  }
+
+  const tag = document.activeElement?.tagName;
+  if (!isMeta && (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT")) return;
+
+  if (isMeta && e.key === "k") {
+    e.preventDefault();
+    $.sessionSearchInput.focus();
+    return;
+  }
+
+  if (isMeta && e.key === "n") {
+    e.preventDefault();
+    $.newSessionBtn.click();
+    return;
+  }
+
+  if (isMeta && e.key === "/") {
+    e.preventDefault();
+    $.shortcutsModal.classList.toggle("hidden");
+    return;
+  }
+
+  // Cmd+B — Toggle right panel
+  if (isMeta && e.key === "b") {
+    e.preventDefault();
+    toggleRightPanel();
+    return;
+  }
+
+  // Cmd+Shift+E — Open Files tab
+  if (isMeta && e.shiftKey && e.key === "E") {
+    e.preventDefault();
+    openRightPanel("files");
+    return;
+  }
+
+  // Cmd+Shift+G — Open Git tab
+  if (isMeta && e.shiftKey && e.key === "G") {
+    e.preventDefault();
+    openRightPanel("git");
+    return;
+  }
+
+  // Cmd+Shift+R — Open Repos tab
+  if (isMeta && e.shiftKey && e.key === "R") {
+    e.preventDefault();
+    openRightPanel("repos");
+    return;
+  }
+
+  // Cmd+Shift+V — Open Events tab
+  if (isMeta && e.shiftKey && e.key === "V") {
+    e.preventDefault();
+    openRightPanel("events");
+    return;
+  }
+
+  // Cmd+Shift+A — Go to Home (Analytics)
+  if (isMeta && e.shiftKey && e.key === "A") {
+    e.preventDefault();
+    setState("view", "home");
+    setState("sessionId", null);
+    return;
+  }
+
+  // Cmd+Shift+T — Toggle Tips Feed
+  if (isMeta && e.shiftKey && e.key === "T") {
+    e.preventDefault();
+    toggleTipsFeed();
+    return;
+  }
+
+  if (isMeta && getState("parallelMode") && e.key >= "1" && e.key <= "4") {
+    e.preventDefault();
+    const idx = parseInt(e.key) - 1;
+    const chatId = CHAT_IDS[idx];
+    const pane = panes.get(chatId);
+    if (pane && pane.messageInput) {
+      pane.messageInput.focus();
+    }
+    return;
+  }
+});
+
+registerCommand("shortcuts", {
+  category: "app",
+  description: "Show keyboard shortcuts",
+  execute() {
+    $.shortcutsModal.classList.remove("hidden");
+  },
+});
+
+// Register /files and /git slash commands
+registerCommand("files", {
+  category: "app",
+  description: "Open file explorer",
+  execute() {
+    openRightPanel("files");
+  },
+});
+
+registerCommand("git", {
+  category: "app",
+  description: "Open git panel",
+  execute() {
+    openRightPanel("git");
+  },
+});
+
+registerCommand("events", {
+  category: "app",
+  description: "Open events panel",
+  execute() {
+    openRightPanel("events");
+  },
+});

package/public/js/ui/sidebar-toggle.js

@@ -0,0 +1,29 @@
+// Sidebar hamburger toggle for mobile/tablet viewports
+import { $ } from '../core/dom.js';
+
+const btn = document.getElementById('sidebar-toggle-btn');
+const backdrop = document.getElementById('sidebar-backdrop');
+const mq = window.matchMedia('(max-width: 1024px)');
+
+function openSidebar()  { document.body.classList.add('sidebar-open'); }
+function closeSidebar() { document.body.classList.remove('sidebar-open'); }
+
+if (btn) btn.addEventListener('click', () => {
+  document.body.classList.toggle('sidebar-open');
+});
+
+if (backdrop) backdrop.addEventListener('click', closeSidebar);
+
+// Close sidebar when a session is selected on mobile
+if ($.sessionList) {
+  $.sessionList.addEventListener('click', (e) => {
+    if (mq.matches && e.target.closest('li')) {
+      closeSidebar();
+    }
+  });
+}
+
+// Close sidebar if viewport grows past tablet breakpoint
+mq.addEventListener('change', (e) => {
+  if (!e.matches) closeSidebar();
+});