claudeck 1.0.0

package/public/js/features/tour.js

@@ -0,0 +1,210 @@
+// Guided tour — uses Driver.js to walk users through Claudeck features
+const TOUR_KEY = 'claudeck-tour-completed';
+
+function buildSteps() {
+  const hasSpeechApi = !document.body.classList.contains('no-speech-api');
+  const steps = [
+  // ── Sidebar & Navigation ──────────────────────────
+  {
+    element: '#home-btn',
+    popover: {
+      title: 'Home Dashboard',
+      description: 'Your activity hub — see AI usage heatmaps, session stats, streaks, and analytics at a glance.',
+      side: 'right',
+      align: 'center',
+    },
+  },
+  {
+    element: '#project-select',
+    popover: {
+      title: 'Project Selector',
+      description: 'Switch between projects. Each project has its own sessions, system prompt, and MCP config.',
+      side: 'right',
+      align: 'start',
+    },
+  },
+  {
+    element: '#session-search',
+    popover: {
+      title: 'Session Search',
+      description: 'Quickly find any session by name. Pro tip: use <kbd>Cmd+K</kbd> from anywhere.',
+      side: 'right',
+      align: 'start',
+    },
+  },
+  {
+    element: '#new-session-btn',
+    popover: {
+      title: 'New Chat',
+      description: 'Start a fresh conversation with Claude. Shortcut: <kbd>Cmd+N</kbd>',
+      side: 'right',
+      align: 'center',
+    },
+  },
+  {
+    element: '.mode-toggle .toggle-switch',
+    popover: {
+      title: 'Parallel Mode',
+      description: 'Split into a 2×2 grid and run 4 conversations simultaneously.',
+      side: 'right',
+      align: 'center',
+    },
+  },
+  {
+    element: '#session-list',
+    popover: {
+      title: 'Session History',
+      description: 'All your chat sessions in one place. Click to switch, right-click to rename or delete.',
+      side: 'right',
+      align: 'start',
+    },
+  },
+  {
+    element: '#theme-toggle-btn',
+    popover: {
+      title: 'Theme Toggle',
+      description: 'Switch between dark terminal mode and a warm light theme.',
+      side: 'right',
+      align: 'center',
+    },
+  },
+
+  // ── Header Controls ───────────────────────────────
+  {
+    element: '.header-dropdown:first-of-type .header-dropdown-trigger',
+    popover: {
+      title: 'Session Settings',
+      description: 'Configure approval mode (Bypass, Confirm Writes, Plan), choose your AI model, and set max conversation turns.',
+      side: 'bottom',
+      align: 'end',
+    },
+  },
+  {
+    element: '.header-dropdown:nth-of-type(2) .header-dropdown-trigger',
+    popover: {
+      title: 'Tools & Integrations',
+      description: 'Access MCP servers, browser notifications, Telegram alerts, and developer docs.',
+      side: 'bottom',
+      align: 'end',
+    },
+  },
+  {
+    element: '#tips-feed-toggle-btn',
+    popover: {
+      title: 'Tips Feed',
+      description: 'Contextual tips and learning resources to help you get more out of Claudeck. <kbd>Cmd+Shift+T</kbd>',
+      side: 'bottom',
+      align: 'center',
+    },
+  },
+  {
+    element: '#right-panel-toggle-btn',
+    popover: {
+      title: 'Right Panel',
+      description: 'Toggle the file explorer, git panel, and plugin tabs. <kbd>Cmd+B</kbd>',
+      side: 'bottom',
+      align: 'center',
+    },
+  },
+
+  // ── Chat Area ─────────────────────────────────────
+  {
+    element: '#agent-btn',
+    popover: {
+      title: 'Agents & Workflows',
+      description: 'Open the agent sidebar to run autonomous agents, sequential chains, DAG pipelines, or multi-step workflows.',
+      side: 'top',
+      align: 'center',
+    },
+  },
+  {
+    element: '#attach-btn',
+    popover: {
+      title: 'Attach Files',
+      description: 'Browse your project files and attach them as context for Claude.',
+      side: 'top',
+      align: 'center',
+    },
+  },
+  ...(hasSpeechApi ? [{
+    element: '#mic-btn',
+    popover: {
+      title: 'Voice Input',
+      description: 'Speak your message — uses Web Speech API for real-time speech-to-text.',
+      side: 'top',
+      align: 'center',
+    },
+  }] : []),
+  {
+    element: '#toolbox-btn',
+    popover: {
+      title: 'Prompt Templates',
+      description: 'Access your saved prompts. Create reusable templates with {{variable}} placeholders.',
+      side: 'top',
+      align: 'center',
+    },
+  },
+  {
+    element: '#message-input',
+    popover: {
+      title: 'Chat Input',
+      description: 'Type your message here. Start with <kbd>/</kbd> for slash commands like /clear, /export, /costs, and more. <kbd>Shift+Enter</kbd> for a new line.',
+      side: 'top',
+      align: 'center',
+    },
+  },
+  {
+    element: '#send-btn',
+    popover: {
+      title: 'Send Message',
+      description: 'Send your message to Claude, or press <kbd>Enter</kbd>. While streaming, this becomes a stop button.',
+      side: 'top',
+      align: 'center',
+    },
+  },
+
+  // ── Status Bar ────────────────────────────────────
+  {
+    element: '.status-bar',
+    popover: {
+      title: 'Status Bar',
+      description: 'Real-time info at a glance — connection status, git branch, active project, streaming tokens, context usage, and costs.',
+      side: 'top',
+      align: 'center',
+    },
+  },
+  ];
+
+  return steps;
+}
+
+/**
+ * Start the guided tour.
+ */
+export function startTour() {
+  if (typeof window.driver === 'undefined') {
+    console.warn('Driver.js not loaded');
+    return;
+  }
+
+  const driverObj = window.driver.js.driver({
+    showProgress: true,
+    animate: true,
+    overlayColor: 'rgba(0, 0, 0, 0.35)',
+    stagePadding: 6,
+    stageRadius: 8,
+    smoothScroll: true,
+    popoverClass: 'claudeck-tour',
+    allowClose: true,
+    doneBtnText: 'Finish',
+    nextBtnText: 'Next →',
+    prevBtnText: '← Back',
+    showButtons: ['next', 'previous', 'close'],
+    steps: buildSteps(),
+    onDestroyed: () => {
+      localStorage.setItem(TOUR_KEY, '1');
+    },
+  });
+
+  driverObj.drive();
+}

package/public/js/features/voice-input.js

@@ -0,0 +1,185 @@
+// Voice Input — Speech-to-Text using Web Speech API
+import { $ } from '../core/dom.js';
+import { getState } from '../core/store.js';
+import { addStatus } from '../ui/messages.js';
+import { getPane } from '../ui/parallel.js';
+
+const isEdge = /Edg\//.test(navigator.userAgent);
+const SpeechRecognition = !isEdge && (window.SpeechRecognition || window.webkitSpeechRecognition);
+
+if (!SpeechRecognition) {
+  document.body.classList.add('no-speech-api');
+}
+
+if (SpeechRecognition) {
+  let recognition = null;
+  let isRecording = false;
+  let shouldRestart = false;
+  let interimText = '';
+  let preVoiceText = '';
+  let finalizedText = '';
+
+  function hideButton() {
+    document.body.classList.add('no-speech-api');
+    stopRecording();
+  }
+
+  // Recording indicator element (created once, reused)
+  const indicator = document.createElement('div');
+  indicator.className = 'voice-recording-indicator hidden';
+  indicator.innerHTML = '<span class="voice-recording-dot"></span><span>Listening...</span>';
+
+  // Insert indicator before the input bar
+  const inputBar = $.messageInput.closest('.input-bar');
+  inputBar.parentNode.insertBefore(indicator, inputBar);
+
+  function updateTextarea() {
+    $.messageInput.value = preVoiceText + finalizedText + interimText;
+    // Trigger auto-resize
+    $.messageInput.style.height = 'auto';
+    $.messageInput.style.height = Math.min($.messageInput.scrollHeight, 200) + 'px';
+  }
+
+  function startRecording() {
+    if (isRecording) return;
+    if (getState('parallelMode')) {
+      addStatus('Voice input is not available in parallel mode', true, getPane(null));
+      return;
+    }
+
+    recognition = new SpeechRecognition();
+    recognition.lang = 'en-US';
+    recognition.continuous = true;
+    recognition.interimResults = true;
+
+    // Snapshot existing textarea content
+    const current = $.messageInput.value;
+    preVoiceText = current && !/\s$/.test(current) ? current + ' ' : current;
+    finalizedText = '';
+    interimText = '';
+
+    recognition.onresult = (event) => {
+      let finalChunk = '';
+      let interimChunk = '';
+
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalChunk += transcript;
+        } else {
+          interimChunk += transcript;
+        }
+      }
+
+      if (finalChunk) finalizedText += finalChunk;
+      interimText = interimChunk;
+      updateTextarea();
+    };
+
+    recognition.onend = () => {
+      if (shouldRestart && isRecording) {
+        // Chrome cuts off after ~60s of silence — restart
+        try { recognition.start(); } catch (_) { stopRecording(); }
+      } else {
+        cleanUp();
+      }
+    };
+
+    recognition.onerror = (event) => {
+      const pane = getPane(null);
+      switch (event.error) {
+        case 'service-not-allowed':
+        case 'language-not-supported':
+          // API exists but browser doesn't actually support it (e.g. Edge)
+          hideButton();
+          break;
+        case 'not-allowed':
+          addStatus('Microphone access denied. Check browser permissions.', true, pane);
+          stopRecording();
+          break;
+        case 'no-speech':
+          // Silence — let onend restart if needed
+          break;
+        case 'network':
+          addStatus('Speech recognition network error', true, pane);
+          stopRecording();
+          break;
+        default:
+          addStatus('Speech recognition error: ' + event.error, true, pane);
+          stopRecording();
+      }
+    };
+
+    isRecording = true;
+    shouldRestart = true;
+    $.micBtn.classList.add('recording');
+    indicator.classList.remove('hidden');
+
+    try {
+      recognition.start();
+    } catch (_) {
+      // Constructor exists but service unavailable — hide permanently
+      hideButton();
+    }
+  }
+
+  function stopRecording() {
+    shouldRestart = false;
+    isRecording = false;
+    if (recognition) {
+      try { recognition.stop(); } catch (_) {}
+    }
+    cleanUp();
+  }
+
+  function cleanUp() {
+    $.micBtn.classList.remove('recording');
+    indicator.classList.add('hidden');
+    // Commit any remaining interim text
+    if (interimText) {
+      finalizedText += interimText;
+      interimText = '';
+      updateTextarea();
+    }
+    recognition = null;
+  }
+
+  // Toggle on mic button click
+  $.micBtn.addEventListener('click', () => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  });
+
+  // Stop recording on send (capture phase so we commit text before sendMessage reads it)
+  $.sendBtn.addEventListener('click', () => {
+    if (isRecording) stopRecording();
+  }, true);
+
+  // Stop on Enter key (before chat.js handles it)
+  $.messageInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && isRecording) {
+      stopRecording();
+    }
+  }, true);
+
+  // Stop on session switch
+  $.newSessionBtn.addEventListener('click', () => {
+    if (isRecording) stopRecording();
+  });
+  $.sessionList.addEventListener('click', () => {
+    if (isRecording) stopRecording();
+  });
+
+  // Stop when parallel mode is toggled on
+  $.toggleParallelBtn.addEventListener('change', () => {
+    if (isRecording && $.toggleParallelBtn.checked) stopRecording();
+  });
+
+  // Stop when tab is hidden
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden && isRecording) stopRecording();
+  });
+}

package/public/js/features/welcome.js

@@ -0,0 +1,43 @@
+// Welcome overlay — shown once on first visit
+import { startTour } from './tour.js';
+
+const STORAGE_KEY = 'claudeck-welcome-seen';
+
+function init() {
+  if (localStorage.getItem(STORAGE_KEY)) return;
+
+  const overlay = document.getElementById('welcome-overlay');
+  if (!overlay) return;
+
+  overlay.classList.remove('hidden');
+
+  const getStartedBtn = document.getElementById('welcome-get-started');
+  const tourBtn = document.getElementById('welcome-take-tour');
+
+  getStartedBtn.addEventListener('click', () => dismiss(overlay));
+
+  tourBtn.addEventListener('click', () => {
+    dismiss(overlay, () => startTour());
+  });
+
+  // Also dismiss with Escape or Enter
+  function onKey(e) {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+      dismiss(overlay);
+      document.removeEventListener('keydown', onKey);
+    }
+  }
+  document.addEventListener('keydown', onKey);
+}
+
+function dismiss(overlay, onDone) {
+  localStorage.setItem(STORAGE_KEY, '1');
+  overlay.classList.add('hiding');
+  overlay.addEventListener('transitionend', () => {
+    overlay.classList.add('hidden');
+    overlay.remove();
+    if (onDone) onDone();
+  }, { once: true });
+}
+
+init();