claudeck 1.4.0 → 1.4.1

package/README.md

@@ -252,16 +252,15 @@ See [CONFIGURATION.md](docs/CONFIGURATION.md) for the full guide.
 
 ## Plugins
 
-Claudeck includes 7 built-in plugins and supports user plugins via `~/.claudeck/plugins/`:
+Claudeck includes 3 built-in plugins, a community marketplace, and supports user plugins via `~/.claudeck/plugins/`:
 
 | Plugin | Description |
 |--------|-------------|
-| **Tasks** | Todo list with priority, archive, and brag tracking |
+| **Claude Editor** | Edit CLAUDE.md project instructions in-app |
 | **Linear** | Linear issue tracking with team management |
 | **Repos** | Repository management with tree view |
-| **Claude Editor** | Edit CLAUDE.md project instructions in-app |
-| **Event Stream** | Real-time WebSocket event viewer |
-| **Games** | Tic-tac-toe and Sudoku |
+
+**Community Marketplace** — browse, install, and update community plugins directly from the Plugin Marketplace tab. Plugins like Tasks, Event Stream, Sudoku, and Tic-Tac-Toe are available from the [marketplace](https://github.com/hamedafarag/claudeck-marketplace).
 
 **Create your own** — drop files in `~/.claudeck/plugins/<name>/` (persists across upgrades) with `client.js` and optionally `server.js`, `client.css`, `config.json`. No fork needed. See [CONFIGURATION.md](docs/CONFIGURATION.md#user-plugins) for details.
 
@@ -280,6 +279,7 @@ npx skills add https://github.com/hamedafarag/claudeck-skills
 | Document | Description |
 |----------|-------------|
 | [DOCUMENTATION.md](docs/DOCUMENTATION.md) | Full feature docs, API reference, database schema |
+| [TAB-SDK.md](docs/TAB-SDK.md) | Plugin SDK reference — ctx API, events, state, CSS tokens, examples |
 | [CONFIGURATION.md](docs/CONFIGURATION.md) | User data directory, config files, plugin system |
 | [AGENT-ARCHITECTURE.md](docs/AGENT-ARCHITECTURE.md) | How agents, chains, DAGs, and orchestrator work |
 | [PLAN-sqlite-adapter.md](docs/PLAN-sqlite-adapter.md) | Database adapter pattern, async interface, multi-DB roadmap |
@@ -305,7 +305,7 @@ npm run test:perf     # WebSocket performance benchmarks
 | **panels/** | 150+ | 35% |
 | **server/** | 1,350+ | 95% |
 
-19 Web Components in `public/js/components/` — each is a self-contained Custom Element (Light DOM) that owns its HTML, testable with zero mocks.
+20 Web Components in `public/js/components/` — each is a self-contained Custom Element (Light DOM) that owns its HTML, testable with zero mocks.
 
 ### Performance Benchmarks
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeck",
-  "version": "1.4.0",
+  "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",

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

@@ -18,6 +18,7 @@ import './components/permission-modal.js';
 import './components/linear-create-modal.js';
 import './components/telegram-modal.js';
 import './components/mcp-modal.js';
+import './components/settings-modal.js';
 import './components/add-project-modal.js';
 import './components/status-bar.js';
 

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 with server routes, see <code>plugins/linear/</code>. More examples are available in the <a href="https://github.com/hamedafarag/claudeck-marketplace" target="_blank">marketplace repo</a>.</div>
   `,
 });