claudeck 1.3.1 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeck",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "type": "module",
   "description": "A browser-based UI for Claude Code — chat, run workflows, manage MCP servers, track costs, and orchestrate autonomous agents from a local web interface. Installable as a PWA.",
   "main": "server.js",
@@ -11,6 +11,7 @@
     "cli.js",
     "server.js",
     "db.js",
+    "db/",
     "server/",
     "public/",
     "config/",

package/plugins/claude-editor/manifest.json

@@ -0,0 +1,10 @@
+{
+  "id": "claude-editor",
+  "name": "CLAUDE.md Editor",
+  "version": "1.0.0",
+  "description": "Edit CLAUDE.md project instructions directly in the UI",
+  "author": "claudeck",
+  "icon": "📝",
+  "hasServer": false,
+  "minClaudeckVersion": "1.4.0"
+}

package/plugins/linear/manifest.json

@@ -0,0 +1,10 @@
+{
+  "id": "linear",
+  "name": "Linear",
+  "version": "1.0.0",
+  "description": "Linear issue tracking with settings and team management",
+  "author": "claudeck",
+  "icon": "📋",
+  "hasServer": true,
+  "minClaudeckVersion": "1.4.0"
+}

package/plugins/repos/manifest.json

@@ -0,0 +1,10 @@
+{
+  "id": "repos",
+  "name": "Repos",
+  "version": "1.0.0",
+  "description": "Git repository and group management with tree view",
+  "author": "claudeck",
+  "icon": "📁",
+  "hasServer": true,
+  "minClaudeckVersion": "1.4.0"
+}

package/public/css/ui/messages.css

@@ -25,6 +25,31 @@
   gap: 18px;
 }
 
+/* ── Load-more indicator (lazy loading) ─────────────── */
+.load-more-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 0;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+
+.load-more-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: load-more-spin 0.6s linear infinite;
+}
+
+@keyframes load-more-spin {
+  to { transform: rotate(360deg); }
+}
+
 .messages:empty::after {
   content: "";
   display: none;

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

@@ -486,3 +486,210 @@
   filter: brightness(1.1);
   box-shadow: var(--glow-strong);
 }
+
+/* ── Marketplace tabs ── */
+
+.marketplace-tabs {
+  display: flex;
+  gap: 4px;
+  margin-top: 12px;
+}
+
+.marketplace-tab {
+  padding: 6px 16px;
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+  border: 1px solid transparent;
+  background: none;
+  color: var(--text-dim);
+}
+
+.marketplace-tab:hover {
+  color: var(--text);
+  background: var(--bg-tertiary);
+}
+
+.marketplace-tab.active {
+  color: var(--accent);
+  background: var(--accent-dim);
+  border-color: var(--accent);
+}
+
+.marketplace-tab-content {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.marketplace-tab-content::-webkit-scrollbar {
+  width: 4px;
+}
+.marketplace-tab-content::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 2px;
+}
+
+.marketplace-tab-content > .marketplace-subtitle {
+  padding: 12px 16px 4px;
+}
+
+.marketplace-tab-content > .marketplace-list {
+  flex: 1;
+}
+
+.marketplace-tab-content > .marketplace-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.marketplace-tab-content > .marketplace-empty a {
+  color: var(--accent);
+  text-decoration: none;
+  margin-top: 8px;
+}
+
+.marketplace-tab-content > .marketplace-empty a:hover {
+  text-decoration: underline;
+}
+
+/* ── Community plugin items ── */
+
+.marketplace-community-item {
+  cursor: default;
+  padding: 12px;
+}
+
+.marketplace-item-meta {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.marketplace-author {
+  opacity: 0.7;
+}
+
+.marketplace-version {
+  opacity: 0.5;
+}
+
+.marketplace-version-old {
+  opacity: 0.4;
+  text-decoration: line-through;
+}
+
+.marketplace-source {
+  font-size: 9px;
+  font-family: var(--font-display);
+  padding: 1px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  vertical-align: middle;
+}
+
+.marketplace-source.community {
+  color: var(--purple);
+  background: color-mix(in srgb, var(--purple) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent);
+}
+
+.marketplace-source.server {
+  color: var(--orange, #f0a040);
+  background: color-mix(in srgb, var(--orange, #f0a040) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--orange, #f0a040) 30%, transparent);
+}
+
+/* ── Action buttons (install / uninstall / update) ── */
+
+.marketplace-item-actions {
+  flex-shrink: 0;
+}
+
+.marketplace-action-btn {
+  padding: 5px 14px;
+  border-radius: var(--radius-md);
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+  border: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.marketplace-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.marketplace-install-btn {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.marketplace-install-btn:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: var(--glow);
+}
+
+.marketplace-uninstall-btn {
+  background: none;
+  color: var(--text-dim);
+}
+
+.marketplace-uninstall-btn:hover:not(:disabled) {
+  color: var(--red, #e54);
+  border-color: var(--red, #e54);
+  background: color-mix(in srgb, var(--red, #e54) 10%, transparent);
+}
+
+.marketplace-update-btn {
+  background: var(--purple);
+  color: #fff;
+  border-color: var(--purple);
+}
+
+.marketplace-update-btn:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--purple) 40%, transparent);
+}
+
+/* ── Loading state ── */
+
+.marketplace-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 16px;
+  color: var(--text-dim);
+  font-size: 12px;
+  font-family: var(--font-sans);
+}
+
+.marketplace-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

package/public/css/ui/settings.css

@@ -0,0 +1,75 @@
+.settings-modal {
+  width: 380px;
+  max-width: 90vw;
+}
+
+.settings-list {
+  padding: 16px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.settings-row + .settings-row {
+  border-top: 1px solid var(--border);
+}
+
+.settings-label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.settings-label strong {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.settings-label small {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.settings-toggle {
+  appearance: none;
+  width: 36px;
+  height: 20px;
+  background: var(--bg-tertiary);
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.settings-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.settings-toggle::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  transition: transform 0.2s, background 0.2s;
+}
+
+.settings-toggle:checked {
+  background: var(--accent);
+}
+
+.settings-toggle:checked::after {
+  transform: translateX(16px);
+  background: #fff;
+}

package/public/index.html

@@ -166,6 +166,12 @@
             <span id="telegram-label">Telegram</span>
           </button>
           <div style="height:1px;background:var(--border);margin:4px 8px;"></div>
+          <button class="header-dropdown-item" id="settings-btn" title="Settings">
+            <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="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
+            </svg>
+            <span>Settings</span>
+          </button>
           <button class="header-dropdown-item" id="dev-docs-btn" title="Developer Documentation">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
@@ -519,6 +525,7 @@
   <claudeck-linear-create></claudeck-linear-create>
   <claudeck-telegram-modal></claudeck-telegram-modal>
   <claudeck-mcp-modal></claudeck-mcp-modal>
+  <claudeck-settings-modal></claudeck-settings-modal>
   <claudeck-add-project></claudeck-add-project>
 
   <!-- Status Bar (Web Component) -->

package/public/js/components/settings-modal.js

@@ -0,0 +1,65 @@
+// Web Component: Settings Modal
+const SETTINGS_KEY = 'claudeck-settings';
+
+function loadSettings() {
+  try { return JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}'); } catch { return {}; }
+}
+
+function saveSettings(s) {
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(s));
+}
+
+export function getSetting(key, fallback = true) {
+  const s = loadSettings();
+  return s[key] !== undefined ? s[key] : fallback;
+}
+
+class ClaudeckSettingsModal extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div id="settings-modal" class="modal-overlay hidden">
+        <div class="modal settings-modal">
+          <div class="modal-header">
+            <h3>Settings</h3>
+            <button id="settings-modal-close" class="modal-close">&times;</button>
+          </div>
+          <div class="settings-list">
+            <label class="settings-row">
+              <span class="settings-label">
+                <strong>Assistant Bot</strong>
+                <small>Show the floating assistant bot bubble</small>
+              </span>
+              <input type="checkbox" id="setting-assistant-bot" class="settings-toggle">
+            </label>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const overlay = this.querySelector('#settings-modal');
+    const closeBtn = this.querySelector('#settings-modal-close');
+    const botToggle = this.querySelector('#setting-assistant-bot');
+
+    // Init toggle state
+    botToggle.checked = getSetting('assistantBot', true);
+
+    closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.add('hidden'); });
+
+    botToggle.addEventListener('change', () => {
+      const s = loadSettings();
+      s.assistantBot = botToggle.checked;
+      saveSettings(s);
+      // Dispatch event so the bot module can react
+      window.dispatchEvent(new CustomEvent('setting:assistantBot', { detail: botToggle.checked }));
+    });
+
+    // Open from settings button
+    document.getElementById('settings-btn')?.addEventListener('click', () => {
+      botToggle.checked = getSetting('assistantBot', true);
+      overlay.classList.remove('hidden');
+    });
+  }
+}
+
+customElements.define('claudeck-settings-modal', ClaudeckSettingsModal);

package/public/js/core/api.js

@@ -36,18 +36,35 @@ export async function fetchActiveSessionIds() {
   return data.activeSessionIds || [];
 }
 
-export async function fetchMessages(sessionId) {
-  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/messages`);
+function _appendPaginationParams(url, { limit, before } = {}) {
+  const params = new URLSearchParams();
+  if (limit) params.set("limit", limit);
+  if (before) params.set("before", before);
+  const qs = params.toString();
+  return qs ? `${url}?${qs}` : url;
+}
+
+export async function fetchMessages(sessionId, opts) {
+  const url = _appendPaginationParams(
+    `/api/sessions/${encodeURIComponent(sessionId)}/messages`, opts
+  );
+  const res = await fetch(url);
   return res.json();
 }
 
-export async function fetchMessagesByChatId(sessionId, chatId) {
-  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/messages/${encodeURIComponent(chatId)}`);
+export async function fetchMessagesByChatId(sessionId, chatId, opts) {
+  const url = _appendPaginationParams(
+    `/api/sessions/${encodeURIComponent(sessionId)}/messages/${encodeURIComponent(chatId)}`, opts
+  );
+  const res = await fetch(url);
   return res.json();
 }
 
-export async function fetchSingleMessages(sessionId) {
-  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/messages-single`);
+export async function fetchSingleMessages(sessionId, opts) {
+  const url = _appendPaginationParams(
+    `/api/sessions/${encodeURIComponent(sessionId)}/messages-single`, opts
+  );
+  const res = await fetch(url);
   return res.json();
 }
 

package/public/js/core/events.js

@@ -5,6 +5,17 @@ export function emit(event, data) {
   (bus[event] || []).forEach((fn) => fn(data));
 }
 
+/** Subscribe to an event. Returns an unsubscribe function. */
 export function on(event, fn) {
   (bus[event] ||= []).push(fn);
+  return () => {
+    const arr = bus[event];
+    if (arr) bus[event] = arr.filter(f => f !== fn);
+  };
+}
+
+/** Remove a specific listener for an event. */
+export function off(event, fn) {
+  const arr = bus[event];
+  if (arr) bus[event] = arr.filter(f => f !== fn);
 }

package/public/js/core/plugin-loader.js

@@ -12,21 +12,13 @@
 const STORAGE_KEY = 'claudeck-enabled-plugins';
 const ORDER_KEY = 'claudeck-plugin-order';
 let availablePlugins = [];
+let marketplaceRegistry = null;
 const loadedPlugins = new Set();
 
 /** Maps plugin file name → tab ID registered by that plugin */
 const pluginTabIds = new Map();
 
-/** Plugin descriptions for the marketplace. order: lower = higher in the list */
-const pluginMeta = {
-  'claude-editor':    { description: 'Edit CLAUDE.md project instructions directly in the UI',    icon: '📝', order: 5 },
-  'event-stream':     { description: 'Real-time WebSocket event viewer with filtering and search', icon: '⚡', order: 10 },
-  'repos':            { description: 'Git repository and group management with tree view',        icon: '📁', order: 20 },
-  'linear':           { description: 'Linear issue tracking with settings and team management',   icon: '📋', order: 25 },
-  'tasks':            { description: 'Todo list with priority levels and brag tracking',           icon: '✅', order: 30 },
-  'tic-tac-toe':      { description: 'Classic tic-tac-toe game',                                   icon: '🎮', order: 90 },
-  'sudoku':           { description: 'Sudoku puzzle game',                                         icon: '🧩', order: 91 },
-};
+/** Fallback meta for plugins without manifest.json */
 const defaultMeta = { description: 'A tab-sdk plugin', icon: '🧩', order: 100 };
 
 export function getAvailablePlugins() {
@@ -45,7 +37,15 @@ export function setEnabledPluginNames(names) {
 }
 
 export function getPluginMeta(name) {
-  return pluginMeta[name] || defaultMeta;
+  const plugin = availablePlugins.find(p => p.name === name);
+  if (plugin?.manifest) {
+    return {
+      description: plugin.manifest.description || defaultMeta.description,
+      icon: plugin.manifest.icon || defaultMeta.icon,
+      order: defaultMeta.order,
+    };
+  }
+  return defaultMeta;
 }
 
 export function getPluginOrder() {
@@ -151,3 +151,88 @@ export async function loadPlugins() {
     console.error('Plugin loader error:', err);
   }
 }
+
+// ── Marketplace ─────────────────────────────────────────
+
+export function getMarketplaceRegistry() {
+  return marketplaceRegistry;
+}
+
+/** Fetch the community plugin registry from the server (which proxies GitHub) */
+export async function fetchMarketplace(refresh = false) {
+  try {
+    const url = refresh ? '/api/marketplace?refresh=true' : '/api/marketplace';
+    const res = await fetch(url);
+    if (!res.ok) { console.warn('Marketplace fetch failed:', res.status); return null; }
+    marketplaceRegistry = await res.json();
+    return marketplaceRegistry;
+  } catch (err) {
+    console.error('Marketplace error:', err);
+    return null;
+  }
+}
+
+/** Install a community plugin and auto-enable it */
+export async function installMarketplacePlugin(plugin) {
+  const res = await fetch('/api/marketplace/install', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id: plugin.id, repo: plugin.repo, source: plugin.source }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Install failed' }));
+    throw new Error(err.error);
+  }
+  const result = await res.json();
+
+  // Refresh local plugins list to include the newly installed plugin
+  const pluginsRes = await fetch('/api/plugins');
+  if (pluginsRes.ok) {
+    availablePlugins = await pluginsRes.json();
+  }
+
+  // Auto-enable the newly installed plugin
+  const enabled = getEnabledPluginNames();
+  if (!enabled.includes(plugin.id)) {
+    enabled.push(plugin.id);
+    setEnabledPluginNames(enabled);
+  }
+
+  // Load the plugin immediately
+  await loadPluginByName(plugin.id);
+
+  return result;
+}
+
+/** Uninstall a community plugin */
+export async function uninstallMarketplacePlugin(id) {
+  const res = await fetch('/api/marketplace/uninstall', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Uninstall failed' }));
+    throw new Error(err.error);
+  }
+
+  // Remove from enabled list
+  const enabled = getEnabledPluginNames().filter(n => n !== id);
+  setEnabledPluginNames(enabled);
+
+  // Clean up CSS link from DOM
+  const cssLink = document.head.querySelector(`link[data-plugin="${id}"]`);
+  if (cssLink) cssLink.remove();
+
+  // Clear loaded/tab tracking state
+  loadedPlugins.delete(id);
+  pluginTabIds.delete(id);
+
+  // Refresh local plugins list
+  const pluginsRes = await fetch('/api/plugins');
+  if (pluginsRes.ok) {
+    availablePlugins = await pluginsRes.json();
+  }
+
+  return await res.json();
+}

package/public/js/core/store.js

@@ -30,8 +30,19 @@ export function setState(key, val) {
   emit(key, val);
 }
 
+/** Subscribe to state changes for a key. Returns an unsubscribe function. */
 export function on(key, fn) {
   (listeners[key] ||= []).push(fn);
+  return () => {
+    const arr = listeners[key];
+    if (arr) listeners[key] = arr.filter(f => f !== fn);
+  };
+}
+
+/** Remove a specific listener for a key. */
+export function off(key, fn) {
+  const arr = listeners[key];
+  if (arr) listeners[key] = arr.filter(f => f !== fn);
 }
 
 function emit(key, val) {

package/public/js/core/ws.js

@@ -3,6 +3,12 @@ import { $ } from './dom.js';
 import { getState, setState } from './store.js';
 import { emit } from './events.js';
 
+export function subscribeToSession(sessionId) {
+  const ws = getState("ws");
+  if (!ws || ws.readyState !== 1 || !sessionId) return;
+  ws.send(JSON.stringify({ type: "subscribe", sessionId }));
+}
+
 let backoffAttempt = 0;
 let hasConnectedBefore = false;
 
@@ -37,6 +43,12 @@ export function connectWebSocket() {
       hasConnectedBefore = true;
       emit("ws:connected");
     }
+
+    // Subscribe to current session for multi-client broadcast
+    const currentSession = getState("sessionId");
+    if (currentSession) {
+      ws.send(JSON.stringify({ type: "subscribe", sessionId: currentSession }));
+    }
   };
 
   ws.onmessage = (event) => {