claudeck 1.0.0

package/public/js/core/dom.js

@@ -0,0 +1,270 @@
+// Centralized DOM references
+export const $ = {
+  // Home
+  homeBtn: document.getElementById("home-btn"),
+  homePage: document.getElementById("home-page"),
+
+  // Main controls
+  projectSelect: document.getElementById("project-select"),
+  newSessionBtn: document.getElementById("new-session-btn"),
+  sessionList: document.getElementById("session-list"),
+  messagesDiv: document.getElementById("messages"),
+  messageInput: document.getElementById("message-input"),
+  sendBtn: document.getElementById("send-btn"),
+  stopBtn: document.getElementById("stop-btn"),
+  toggleParallelBtn: document.getElementById("toggle-parallel-btn"),
+
+  // Header
+  connectionDot: document.getElementById("connection-dot"),
+  connectionText: document.getElementById("connection-text"),
+  accountEmail: document.getElementById("account-email"),
+  accountPlan: document.getElementById("account-plan"),
+  totalCostEl: document.getElementById("total-cost"),
+  projectCostEl: document.getElementById("project-cost"),
+  headerProjectName: document.getElementById("header-project-name"),
+
+  // Toolbox
+  toolboxBtn: document.getElementById("toolbox-btn"),
+  toolboxPanel: document.getElementById("toolbox-panel"),
+
+  // Workflows (panel kept for legacy, button merged into agent-btn)
+  workflowBtn: document.getElementById("workflow-btn"),   // removed from DOM — will be null
+  workflowPanel: document.getElementById("workflow-panel"),
+
+  // Workflow CRUD Modal
+  wfModal: document.getElementById("wf-modal"),
+  wfModalTitle: document.getElementById("wf-modal-title"),
+  wfModalClose: document.getElementById("wf-modal-close"),
+  wfModalCancel: document.getElementById("wf-modal-cancel"),
+  wfForm: document.getElementById("wf-form"),
+  wfFormTitle: document.getElementById("wf-form-title"),
+  wfFormDesc: document.getElementById("wf-form-desc"),
+  wfStepsList: document.getElementById("wf-steps-list"),
+  wfAddStepBtn: document.getElementById("wf-add-step-btn"),
+  wfFormEditId: document.getElementById("wf-form-edit-id"),
+
+  // Agents
+  agentBtn: document.getElementById("agent-btn"),
+  agentPanel: document.getElementById("agent-panel"),
+  agentModal: document.getElementById("agent-modal"),
+  agentModalTitle: document.getElementById("agent-modal-title"),
+  agentModalClose: document.getElementById("agent-modal-close"),
+  agentModalCancel: document.getElementById("agent-modal-cancel"),
+  agentForm: document.getElementById("agent-form"),
+  agentFormTitle: document.getElementById("agent-form-title"),
+  agentFormDesc: document.getElementById("agent-form-desc"),
+  agentFormIcon: document.getElementById("agent-form-icon"),
+  agentFormGoal: document.getElementById("agent-form-goal"),
+  agentFormMaxTurns: document.getElementById("agent-form-max-turns"),
+  agentFormTimeout: document.getElementById("agent-form-timeout"),
+  agentFormEditId: document.getElementById("agent-form-edit-id"),
+
+  // Agent Chains
+  chainModal: document.getElementById("chain-modal"),
+  chainModalTitle: document.getElementById("chain-modal-title"),
+  chainModalClose: document.getElementById("chain-modal-close"),
+  chainModalCancel: document.getElementById("chain-modal-cancel"),
+  chainForm: document.getElementById("chain-form"),
+  chainFormTitle: document.getElementById("chain-form-title"),
+  chainFormDesc: document.getElementById("chain-form-desc"),
+  chainAgentList: document.getElementById("chain-agent-list"),
+  chainAddAgentBtn: document.getElementById("chain-add-agent-btn"),
+  chainFormContext: document.getElementById("chain-form-context"),
+  chainFormEditId: document.getElementById("chain-form-edit-id"),
+
+  // DAG Editor
+  dagModal: document.getElementById("dag-modal"),
+  dagModalTitle: document.getElementById("dag-modal-title"),
+  dagModalClose: document.getElementById("dag-modal-close"),
+  dagModalCancel: document.getElementById("dag-modal-cancel"),
+  dagModalSave: document.getElementById("dag-modal-save"),
+  dagAutoLayout: document.getElementById("dag-auto-layout"),
+  dagFormTitle: document.getElementById("dag-form-title"),
+  dagFormDesc: document.getElementById("dag-form-desc"),
+  dagFormEditId: document.getElementById("dag-form-edit-id"),
+  dagNodePalette: document.getElementById("dag-node-palette"),
+  dagCanvas: document.getElementById("dag-canvas"),
+
+  // System prompt
+  spBadge: document.getElementById("system-prompt-badge"),
+  spEditBtn: document.getElementById("system-prompt-edit-btn"),
+  spModal: document.getElementById("system-prompt-modal"),
+  spTextarea: document.getElementById("sp-textarea"),
+  spForm: document.getElementById("system-prompt-form"),
+
+  // File picker
+  attachBtn: document.getElementById("attach-btn"),
+  attachBadge: document.getElementById("attach-badge"),
+  fpModal: document.getElementById("file-picker-modal"),
+  fpSearch: document.getElementById("fp-search"),
+  fpList: document.getElementById("fp-list"),
+  fpCount: document.getElementById("fp-count"),
+
+  // Image attachments
+  imageBtn: document.getElementById("image-btn"),
+  imageFileInput: document.getElementById("image-file-input"),
+  imagePreviewStrip: document.getElementById("image-preview-strip"),
+
+  // Voice input
+  micBtn: document.getElementById("mic-btn"),
+
+  // Prompt modal
+  promptModal: document.getElementById("prompt-modal"),
+  promptForm: document.getElementById("prompt-form"),
+  modalCloseBtn: document.getElementById("modal-close"),
+  modalCancelBtn: document.getElementById("modal-cancel"),
+
+  // Shortcuts
+  shortcutsModal: document.getElementById("shortcuts-modal"),
+
+  // Cost dashboard
+  costDashboardModal: document.getElementById("cost-dashboard-modal"),
+  costModalClose: document.getElementById("cost-modal-close"),
+
+  // Theme
+  themeToggleBtn: document.getElementById("theme-toggle-btn"),
+  themeIconSun: document.getElementById("theme-icon-sun"),
+  themeIconMoon: document.getElementById("theme-icon-moon"),
+
+  // Session search
+  sessionSearchInput: document.getElementById("session-search"),
+
+  // Context gauge
+  contextGauge: document.getElementById("context-gauge"),
+  contextGaugeFill: document.getElementById("context-gauge-fill"),
+  contextGaugeLabel: document.getElementById("context-gauge-label"),
+
+  // Streaming tokens (status bar)
+  streamingTokens: document.getElementById("sb-streaming-tokens"),
+  streamingTokensValue: document.getElementById("sb-tokens-value"),
+  streamingTokensSep: document.getElementById("sb-tokens-sep"),
+
+  // Model selector
+  modelSelect: document.getElementById("model-select"),
+
+  // Max turns selector
+  maxTurnsSelect: document.getElementById("max-turns-select"),
+
+  // Permissions
+  permModeSelect: document.getElementById("perm-mode-select"),
+  permModal: document.getElementById("perm-modal"),
+  permModalToolName: document.getElementById("perm-modal-tool-name"),
+  permModalSummary: document.getElementById("perm-modal-summary"),
+  permModalInput: document.getElementById("perm-modal-input"),
+  permAlwaysAllowCb: document.getElementById("perm-always-allow-cb"),
+  permAlwaysAllowTool: document.getElementById("perm-always-allow-tool"),
+  permAllowBtn: document.getElementById("perm-allow-btn"),
+  permDenyBtn: document.getElementById("perm-deny-btn"),
+
+  // Background sessions
+  bgConfirmModal: document.getElementById("bg-confirm-modal"),
+  bgConfirmCancel: document.getElementById("bg-confirm-cancel"),
+  bgConfirmAbort: document.getElementById("bg-confirm-abort"),
+  bgConfirmBackground: document.getElementById("bg-confirm-background"),
+  bgSessionIndicator: document.getElementById("bg-session-indicator"),
+  bgSessionBadge: document.getElementById("bg-session-badge"),
+
+  // Telegram
+  telegramBtn: document.getElementById("telegram-settings-btn"),
+  telegramModal: document.getElementById("telegram-modal"),
+  telegramEnabled: document.getElementById("telegram-enabled"),
+  telegramBotToken: document.getElementById("telegram-bot-token"),
+  telegramChatId: document.getElementById("telegram-chat-id"),
+  telegramAfkTimeout: document.getElementById("telegram-afk-timeout"),
+  telegramTestBtn: document.getElementById("telegram-test-btn"),
+  telegramSaveBtn: document.getElementById("telegram-save-btn"),
+  telegramClose: document.getElementById("telegram-close"),
+  telegramLabel: document.getElementById("telegram-label"),
+  telegramStatus: document.getElementById("telegram-status"),
+  tgNotifySession: document.getElementById("tg-notify-session"),
+  tgNotifyWorkflow: document.getElementById("tg-notify-workflow"),
+  tgNotifyChain: document.getElementById("tg-notify-chain"),
+  tgNotifyAgent: document.getElementById("tg-notify-agent"),
+  tgNotifyOrchestrator: document.getElementById("tg-notify-orchestrator"),
+  tgNotifyDag: document.getElementById("tg-notify-dag"),
+  tgNotifyErrors: document.getElementById("tg-notify-errors"),
+  tgNotifyPermissions: document.getElementById("tg-notify-permissions"),
+  tgNotifyStart: document.getElementById("tg-notify-start"),
+
+  // Tips feed panel
+  tipsFeedPanel: document.getElementById("tips-feed-panel"),
+  tipsFeedToggleBtn: document.getElementById("tips-feed-toggle-btn"),
+  tipsFeedClose: document.getElementById("tips-feed-close"),
+  tipsFeedContent: document.getElementById("tips-feed-content"),
+  tipsFeedResize: document.getElementById("tips-feed-resize"),
+
+  // Right panel
+  rightPanel: document.getElementById("right-panel"),
+  rightPanelToggleBtn: document.getElementById("right-panel-toggle-btn"),
+  rightPanelClose: document.getElementById("right-panel-close"),
+
+  // File explorer (inside right panel files tab)
+  fileExplorerSearch: document.getElementById("file-explorer-search"),
+  fileRefreshBtn: document.getElementById("file-refresh-btn"),
+  fileTree: document.getElementById("file-tree"),
+  filePreview: document.getElementById("file-preview"),
+  filePreviewName: document.getElementById("file-preview-name"),
+  filePreviewContent: document.getElementById("file-preview-content"),
+  filePreviewImage: document.getElementById("file-preview-image"),
+  filePreviewClose: document.getElementById("file-preview-close"),
+
+
+  // Git panel (inside right panel git tab)
+  gitBranchSelect: document.getElementById("git-branch-select"),
+  gitRefreshBtn: document.getElementById("git-refresh-btn"),
+  gitStatusList: document.getElementById("git-status-list"),
+  gitCommitMsg: document.getElementById("git-commit-msg"),
+  gitCommitBtn: document.getElementById("git-commit-btn"),
+  gitLogList: document.getElementById("git-log-list"),
+
+  // MCP manager
+  mcpToggleBtn: document.getElementById("mcp-toggle-btn"),
+  mcpModal: document.getElementById("mcp-modal"),
+  mcpModalClose: document.getElementById("mcp-modal-close"),
+  mcpServerList: document.getElementById("mcp-server-list"),
+  mcpFormContainer: document.getElementById("mcp-form-container"),
+  mcpFormTitle: document.getElementById("mcp-form-title"),
+  mcpForm: document.getElementById("mcp-form"),
+  mcpName: document.getElementById("mcp-name"),
+  mcpType: document.getElementById("mcp-type"),
+  mcpStdioFields: document.getElementById("mcp-stdio-fields"),
+  mcpUrlFields: document.getElementById("mcp-url-fields"),
+  mcpCommand: document.getElementById("mcp-command"),
+  mcpArgs: document.getElementById("mcp-args"),
+  mcpEnv: document.getElementById("mcp-env"),
+  mcpUrl: document.getElementById("mcp-url"),
+  mcpFormCancel: document.getElementById("mcp-form-cancel"),
+  mcpFormSave: document.getElementById("mcp-form-save"),
+  mcpAddBtn: document.getElementById("mcp-add-btn"),
+
+  // Sidebar toggle (mobile)
+  sidebarToggleBtn: document.getElementById("sidebar-toggle-btn"),
+  sidebarBackdrop: document.getElementById("sidebar-backdrop"),
+
+  // Agent sidebar
+  agentSidebar: document.getElementById("agent-sidebar"),
+  agentSidebarClose: document.getElementById("agent-sidebar-close"),
+
+  // Orchestrate modal
+  orchModal: document.getElementById("orch-modal"),
+  orchModalClose: document.getElementById("orch-modal-close"),
+  orchModalCancel: document.getElementById("orch-modal-cancel"),
+  orchModalRun: document.getElementById("orch-modal-run"),
+  orchTaskInput: document.getElementById("orch-task-input"),
+
+  // Agent monitor
+  agentMonitorModal: document.getElementById("agent-monitor-modal"),
+  agentMonitorClose: document.getElementById("agent-monitor-close"),
+  agentMonitorContent: document.getElementById("agent-monitor-content"),
+
+  // Add project modal
+  openVscodeBtn: document.getElementById("open-vscode-btn"),
+  addProjectBtn: document.getElementById("add-project-btn"),
+  addProjectModal: document.getElementById("add-project-modal"),
+  addProjectClose: document.getElementById("add-project-close"),
+  addProjectName: document.getElementById("add-project-name"),
+  addProjectConfirm: document.getElementById("add-project-confirm"),
+  folderBreadcrumb: document.getElementById("folder-breadcrumb"),
+  folderList: document.getElementById("folder-list"),
+
+};

package/public/js/core/events.js

@@ -0,0 +1,10 @@
+// Simple pub/sub event bus for cross-module communication
+const bus = {};
+
+export function emit(event, data) {
+  (bus[event] || []).forEach((fn) => fn(data));
+}
+
+export function on(event, fn) {
+  (bus[event] ||= []).push(fn);
+}

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

@@ -0,0 +1,153 @@
+// Plugin Loader — auto-discovers and loads tab-sdk plugins
+//
+// How it works:
+//   1. Fetches GET /api/plugins → list of {name, js, css, source, apiBase} entries
+//   2. Stores manifest for the marketplace UI
+//   3. Only loads plugins the user has enabled (persisted in localStorage)
+//
+// Plugin sources (checked in order, first match wins):
+//   1. Built-in plugins in plugins/<name>/ (client.js, client.css, server.js, config.json)
+//   2. User plugins in ~/.claudeck/plugins/<name>/ (same directory structure)
+
+const STORAGE_KEY = 'claudeck-enabled-plugins';
+const ORDER_KEY = 'claudeck-plugin-order';
+let availablePlugins = [];
+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 },
+};
+const defaultMeta = { description: 'A tab-sdk plugin', icon: '🧩', order: 100 };
+
+export function getAvailablePlugins() {
+  return availablePlugins;
+}
+
+export function getEnabledPluginNames() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch { return []; }
+}
+
+export function setEnabledPluginNames(names) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(names));
+}
+
+export function getPluginMeta(name) {
+  return pluginMeta[name] || defaultMeta;
+}
+
+export function getPluginOrder() {
+  try {
+    const raw = localStorage.getItem(ORDER_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch { return []; }
+}
+
+export function setPluginOrder(names) {
+  localStorage.setItem(ORDER_KEY, JSON.stringify(names));
+}
+
+/** Return available plugins sorted by saved order (unsorted ones go to end by meta.order) */
+export function getSortedPlugins() {
+  const saved = getPluginOrder();
+  const all = [...availablePlugins];
+  all.sort((a, b) => {
+    const ai = saved.indexOf(a.name);
+    const bi = saved.indexOf(b.name);
+    // Both in saved order — use saved positions
+    if (ai !== -1 && bi !== -1) return ai - bi;
+    // Only one in saved order — it comes first
+    if (ai !== -1) return -1;
+    if (bi !== -1) return 1;
+    // Neither saved — fall back to meta.order
+    return (getPluginMeta(a.name).order ?? 100) - (getPluginMeta(b.name).order ?? 100);
+  });
+  return all;
+}
+
+/** Optional hook: set by tab-sdk to get current registered tab IDs */
+let _getRegisteredTabIds = null;
+export function setTabIdResolver(fn) { _getRegisteredTabIds = fn; }
+
+async function loadPlugin(plugin) {
+  if (loadedPlugins.has(plugin.name)) return;
+  if (plugin.css) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = `/${plugin.css}`;
+    link.dataset.plugin = plugin.name;
+    document.head.appendChild(link);
+  }
+
+  const before = _getRegisteredTabIds ? new Set(_getRegisteredTabIds()) : null;
+
+  try {
+    await import(`/${plugin.js}`);
+    loadedPlugins.add(plugin.name);
+    console.log(`Plugin loaded: ${plugin.name}`);
+
+    // Auto-detect which tab ID this plugin registered
+    if (before && _getRegisteredTabIds) {
+      for (const id of _getRegisteredTabIds()) {
+        if (!before.has(id)) {
+          pluginTabIds.set(plugin.name, id);
+        }
+      }
+    }
+  } catch (err) {
+    console.error(`Plugin failed: ${plugin.name}`, err);
+  }
+}
+
+export async function loadPluginByName(name) {
+  const plugin = availablePlugins.find(p => p.name === name);
+  if (plugin) await loadPlugin(plugin);
+}
+
+export function isPluginLoaded(name) {
+  return loadedPlugins.has(name);
+}
+
+/** Record which tab ID a plugin registered (called from tab-sdk) */
+export function trackPluginTab(pluginName, tabId) {
+  pluginTabIds.set(pluginName, tabId);
+}
+
+/** Get the tab ID registered by a plugin */
+export function getPluginTabId(pluginName) {
+  return pluginTabIds.get(pluginName);
+}
+
+/** Get all plugin-name → tab-id mappings */
+export function getPluginTabMap() {
+  return pluginTabIds;
+}
+
+export async function loadPlugins() {
+  try {
+    const res = await fetch('/api/plugins');
+    if (!res.ok) { console.warn('Plugin discovery failed:', res.status); return; }
+
+    availablePlugins = await res.json();
+    if (!availablePlugins.length) return;
+
+    // Only load enabled plugins
+    const enabled = getEnabledPluginNames();
+    const toLoad = availablePlugins.filter(p => enabled.includes(p.name));
+    await Promise.all(toLoad.map(loadPlugin));
+  } catch (err) {
+    console.error('Plugin loader error:', err);
+  }
+}

package/public/js/core/store.js

@@ -0,0 +1,39 @@
+// Centralized reactive state store
+const state = {
+  view: "home",
+  ws: null,
+  sessionId: null,
+  parallelMode: false,
+  streamingCharCount: 0,
+  prompts: [],
+  workflows: [],
+  agents: [],
+  projectsData: [],
+  attachedFiles: [],
+  imageAttachments: [],
+  allProjectFiles: [],
+  mermaidCounter: 0,
+  savedChatArea: null,
+  backgroundSessions: new Map(),
+  notificationsEnabled: false,
+  sessionTokens: { input: 0, output: 0, cacheRead: 0, cacheCreation: 0 },
+};
+
+const listeners = {};
+
+export function getState(key) {
+  return state[key];
+}
+
+export function setState(key, val) {
+  state[key] = val;
+  emit(key, val);
+}
+
+export function on(key, fn) {
+  (listeners[key] ||= []).push(fn);
+}
+
+function emit(key, val) {
+  (listeners[key] || []).forEach((fn) => fn(val));
+}

package/public/js/core/utils.js

@@ -0,0 +1,25 @@
+// Pure utility functions
+
+export function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+export function slugify(title) {
+  return title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+
+export function getToolDetail(name, input) {
+  if (!input) return "";
+  if (input.file_path) return escapeHtml(input.file_path);
+  if (input.command) return escapeHtml(input.command.slice(0, 80));
+  if (input.pattern) return escapeHtml(input.pattern);
+  if (input.query) return escapeHtml(input.query);
+  if (input.prompt) return escapeHtml(input.prompt.slice(0, 80));
+  return "";
+}
+
+export function scrollToBottom(pane) {
+  pane.messagesDiv.scrollTop = pane.messagesDiv.scrollHeight;
+}

package/public/js/core/ws.js

@@ -0,0 +1,64 @@
+// WebSocket connection + message dispatch with exponential backoff
+import { $ } from './dom.js';
+import { getState, setState } from './store.js';
+import { emit } from './events.js';
+
+let backoffAttempt = 0;
+let hasConnectedBefore = false;
+
+const BACKOFF_BASE_MS = 2000;
+const BACKOFF_FACTOR = 2;
+const BACKOFF_MAX_MS = 30000;
+
+function getBackoffDelay() {
+  const delay = Math.min(BACKOFF_BASE_MS * Math.pow(BACKOFF_FACTOR, backoffAttempt), BACKOFF_MAX_MS);
+  // Add 0-25% jitter
+  const jitter = delay * Math.random() * 0.25;
+  return delay + jitter;
+}
+
+export function connectWebSocket() {
+  const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  const ws = new WebSocket(`${protocol}//${location.host}/ws`);
+  setState("ws", ws);
+
+  ws.onopen = () => {
+    console.log("WebSocket connected");
+    $.connectionDot.className = "term-dot connected";
+    $.connectionText.textContent = "connected";
+    $.connectionText.className = "term-status ok";
+
+    // Reset backoff on successful connection
+    backoffAttempt = 0;
+
+    if (hasConnectedBefore) {
+      emit("ws:reconnected");
+    } else {
+      hasConnectedBefore = true;
+      emit("ws:connected");
+    }
+  };
+
+  ws.onmessage = (event) => {
+    const msg = JSON.parse(event.data);
+    emit("ws:message", msg);
+  };
+
+  ws.onclose = () => {
+    const delay = getBackoffDelay();
+    backoffAttempt++;
+    console.log(`WebSocket disconnected, reconnecting in ${Math.round(delay)}ms (attempt ${backoffAttempt})...`);
+    $.connectionDot.className = "term-dot reconnecting";
+    $.connectionText.textContent = "reconnecting";
+    $.connectionText.className = "term-status";
+    emit("ws:disconnected");
+    setTimeout(connectWebSocket, delay);
+  };
+
+  ws.onerror = (err) => {
+    console.error("WebSocket error:", err);
+    $.connectionDot.className = "term-dot";
+    $.connectionText.textContent = "disconnected";
+    $.connectionText.className = "term-status";
+  };
+}