claudeck 1.0.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "claudeck",
+  "version": "1.0.0",
+  "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",
+  "bin": {
+    "claudeck": "./cli.js"
+  },
+  "files": [
+    "cli.js",
+    "server.js",
+    "db.js",
+    "server/",
+    "public/",
+    "config/",
+    "plugins/",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "claude",
+    "claude-code",
+    "ai",
+    "llm",
+    "web-ui",
+    "chat",
+    "mcp",
+    "agents",
+    "workflows",
+    "pwa",
+    "developer-tools"
+  ],
+  "homepage": "https://github.com/hamedafarag/claudeck",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hamedafarag/claudeck"
+  },
+  "license": "MIT",
+  "author": "Hamed Farag",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-code": "^1.0.128",
+    "better-sqlite3": "^11",
+    "dotenv": "^17.3.1",
+    "express": "^4",
+    "web-push": "^3.6.7",
+    "ws": "^8"
+  }
+}

package/plugins/claude-editor/client.css

@@ -0,0 +1,171 @@
+/* ── CLAUDE.md Editor ─────────────────────────────────── */
+.claude-editor-tab {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  font-family: var(--font-sans);
+}
+
+/* Toolbar */
+.claude-editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.claude-editor-file-select {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px 8px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.claude-editor-file-select:focus {
+  border-color: var(--accent);
+}
+
+.claude-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.claude-editor-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-dim);
+  font-family: var(--font-sans);
+  font-size: 11px;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.claude-editor-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.claude-editor-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.claude-editor-btn:disabled:hover {
+  color: var(--text-dim);
+  border-color: var(--border);
+  background: none;
+}
+
+.claude-editor-save--dirty {
+  color: var(--accent) !important;
+  border-color: var(--accent) !important;
+  background: var(--accent-dim) !important;
+  opacity: 1 !important;
+}
+
+.claude-editor-save--dirty:hover {
+  box-shadow: var(--glow);
+}
+
+/* Status bar */
+.claude-editor-status {
+  padding: 5px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.claude-editor-status-text {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-dim);
+  letter-spacing: 0.02em;
+}
+
+.claude-editor-status--success {
+  color: var(--success);
+}
+
+.claude-editor-status--error {
+  color: var(--error);
+}
+
+.claude-editor-status--warning {
+  color: var(--warning);
+}
+
+/* Editor area */
+.claude-editor-wrap {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.claude-editor-textarea {
+  width: 100%;
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  border: none;
+  padding: 14px 16px;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.65;
+  resize: none;
+  outline: none;
+  tab-size: 2;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.claude-editor-textarea::placeholder {
+  color: var(--text-dim);
+  opacity: 0.5;
+}
+
+.claude-editor-textarea:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Hints footer */
+.claude-editor-hints {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.claude-editor-hints p {
+  font-size: 10px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin: 0;
+  font-family: var(--font-sans);
+}
+
+.claude-editor-hints p + p {
+  margin-top: 2px;
+}
+
+/* Light theme */
+html[data-theme="light"] .claude-editor-btn:hover {
+  background: rgba(0, 0, 0, 0.03);
+}

package/plugins/claude-editor/client.js

@@ -0,0 +1,183 @@
+// CLAUDE.md Editor — Tab SDK plugin
+import { registerTab } from '/js/ui/tab-sdk.js';
+import { escapeHtml } from '/js/core/utils.js';
+
+registerTab({
+  id: 'claude-md',
+  title: 'CLAUDE.md',
+  icon: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>',
+  lazy: true,
+
+  init(ctx) {
+    let editor, statusEl, fileSelectEl, saveBtn, reloadBtn;
+    let currentFile = 'CLAUDE.md';
+    let originalContent = '';
+    let isDirty = false;
+
+    const FILES = [
+      { value: 'CLAUDE.md', label: 'CLAUDE.md (project root)' },
+    ];
+
+    // ── Build DOM ─────────────────────────────────────
+    const root = document.createElement('div');
+    root.className = 'claude-editor-tab';
+
+    root.innerHTML = `
+      <div class="claude-editor-toolbar">
+        <select class="claude-editor-file-select">
+          ${FILES.map(f => `<option value="${escapeHtml(f.value)}">${escapeHtml(f.label)}</option>`).join('')}
+        </select>
+        <div class="claude-editor-actions">
+          <button class="claude-editor-btn claude-editor-reload" title="Reload from disk">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          </button>
+          <button class="claude-editor-btn claude-editor-save" title="Save (Cmd+S)" disabled>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+            Save
+          </button>
+        </div>
+      </div>
+      <div class="claude-editor-status">
+        <span class="claude-editor-status-text">No project selected</span>
+      </div>
+      <div class="claude-editor-wrap">
+        <textarea class="claude-editor-textarea" placeholder="# CLAUDE.md\n\nAdd project instructions for Claude here..." spellcheck="false"></textarea>
+      </div>
+      <div class="claude-editor-hints">
+        <p>This file is automatically included by the Claude Code SDK as context for every conversation in this project.</p>
+        <p>Common uses: coding standards, project structure, preferred patterns, things to avoid.</p>
+      </div>
+    `;
+
+    editor = root.querySelector('.claude-editor-textarea');
+    statusEl = root.querySelector('.claude-editor-status-text');
+    fileSelectEl = root.querySelector('.claude-editor-file-select');
+    saveBtn = root.querySelector('.claude-editor-save');
+    reloadBtn = root.querySelector('.claude-editor-reload');
+
+    // ── State helpers ─────────────────────────────────
+    function setDirty(dirty) {
+      isDirty = dirty;
+      saveBtn.disabled = !dirty;
+      saveBtn.classList.toggle('claude-editor-save--dirty', dirty);
+    }
+
+    function setStatus(text, type = 'info') {
+      statusEl.textContent = text;
+      statusEl.className = 'claude-editor-status-text';
+      if (type === 'success') statusEl.classList.add('claude-editor-status--success');
+      if (type === 'error') statusEl.classList.add('claude-editor-status--error');
+      if (type === 'warning') statusEl.classList.add('claude-editor-status--warning');
+    }
+
+    // ── Load file ─────────────────────────────────────
+    async function loadFile() {
+      const projectPath = ctx.getProjectPath();
+      if (!projectPath) {
+        setStatus('No project selected');
+        editor.value = '';
+        editor.disabled = true;
+        setDirty(false);
+        return;
+      }
+
+      editor.disabled = false;
+      setStatus(`Loading ${currentFile}...`);
+
+      try {
+        const data = await ctx.api.fetchFileContent(projectPath, currentFile);
+        originalContent = data.content;
+        editor.value = originalContent;
+        setDirty(false);
+        setStatus(`${currentFile} loaded`, 'success');
+      } catch (err) {
+        if (err.message.includes('ENOENT') || err.message.includes('not found') || err.message.includes('no such file')) {
+          originalContent = '';
+          editor.value = '';
+          setDirty(false);
+          setStatus(`${currentFile} not found — create it by typing and saving`, 'warning');
+        } else {
+          setStatus(`Error: ${err.message}`, 'error');
+        }
+      }
+    }
+
+    // ── Save file ─────────────────────────────────────
+    async function saveFile() {
+      const projectPath = ctx.getProjectPath();
+      if (!projectPath || !isDirty) return;
+
+      setStatus(`Saving ${currentFile}...`);
+      saveBtn.disabled = true;
+
+      try {
+        await ctx.api.writeFileContent(projectPath, currentFile, editor.value);
+        originalContent = editor.value;
+        setDirty(false);
+        setStatus(`${currentFile} saved`, 'success');
+      } catch (err) {
+        setStatus(`Save failed: ${err.message}`, 'error');
+        saveBtn.disabled = false;
+      }
+    }
+
+    // ── Event bindings ────────────────────────────────
+    editor.addEventListener('input', () => {
+      setDirty(editor.value !== originalContent);
+    });
+
+    saveBtn.addEventListener('click', saveFile);
+    reloadBtn.addEventListener('click', loadFile);
+
+    fileSelectEl.addEventListener('change', () => {
+      if (isDirty && !confirm('You have unsaved changes. Discard them?')) {
+        fileSelectEl.value = currentFile;
+        return;
+      }
+      currentFile = fileSelectEl.value;
+      loadFile();
+    });
+
+    // Cmd+S / Ctrl+S to save
+    editor.addEventListener('keydown', (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        if (isDirty) saveFile();
+      }
+    });
+
+    // Tab key inserts spaces
+    editor.addEventListener('keydown', (e) => {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
+        editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
+        editor.selectionStart = editor.selectionEnd = start + 2;
+        setDirty(editor.value !== originalContent);
+      }
+    });
+
+    // Listen for project changes (projectSelect is a DOM <select>, not in store)
+    const projectSelect = document.getElementById('project-select');
+    if (projectSelect) {
+      projectSelect.addEventListener('change', () => {
+        if (isDirty && !confirm('You have unsaved CLAUDE.md changes. Discard them?')) return;
+        loadFile();
+      });
+    }
+
+    // Also reload when projects data arrives (covers initial page load)
+    ctx.onState('projectsData', () => {
+      setTimeout(() => loadFile(), 0);
+    });
+
+    // Initial load
+    loadFile();
+
+    return root;
+  },
+
+  onActivate() {},
+  onDeactivate() {},
+});

package/plugins/event-stream/client.css

@@ -0,0 +1,207 @@
+/* Event Stream Panel */
+.event-stream-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.event-stream-filters {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.event-filter-btn {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.event-filter-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.event-filter-btn.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.event-stream-search {
+  flex-grow: 1;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.event-stream-search:focus {
+  border-color: var(--accent);
+}
+
+.event-stream-clear-btn {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--bg-tertiary);
+  color: var(--error, #f85149);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.event-stream-clear-btn:hover {
+  background: var(--error, #f85149);
+  color: #fff;
+}
+
+.event-stream-list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+.event-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 4px 8px;
+  gap: 8px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  transition: background 0.1s;
+}
+
+.event-row:hover {
+  background: var(--bg-tertiary);
+}
+
+.event-row.expanded {
+  background: var(--bg-tertiary);
+}
+
+.event-time {
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  font-size: 10px;
+  line-height: 1.6;
+}
+
+.event-badge {
+  text-transform: uppercase;
+  font-size: 9px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  line-height: 1.6;
+  letter-spacing: 0.3px;
+}
+
+.badge-tool {
+  background: rgba(56, 189, 248, 0.15);
+  color: #38bdf8;
+}
+
+.badge-result {
+  background: rgba(63, 185, 80, 0.15);
+  color: #3fb950;
+}
+
+.badge-error {
+  background: rgba(248, 81, 73, 0.15);
+  color: #f85149;
+}
+
+.badge-done {
+  background: rgba(var(--accent-rgb, 130, 80, 223), 0.15);
+  color: var(--accent);
+}
+
+.event-summary {
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.6;
+}
+
+.event-detail {
+  display: none;
+  padding: 4px 0 4px 70px;
+  font-size: 10px;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow: auto;
+  word-break: break-all;
+}
+
+.event-row.expanded .event-detail {
+  display: block;
+}
+
+.event-stream-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  font-size: 10px;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+.event-autoscroll-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.event-autoscroll-toggle input[type="checkbox"] {
+  accent-color: var(--accent);
+}
+
+/* Empty state */
+.event-stream-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: var(--text-dim);
+  font-size: 12px;
+  text-align: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.event-stream-empty svg {
+  opacity: 0.4;
+}
+
+.event-stream-empty-hint {
+  font-size: 11px;
+  opacity: 0.6;
+}