claude-code-hub 0.2.0

package/README.md

@@ -0,0 +1,54 @@
+# Claude Code Hub
+
+Unified launcher for Claude Code tools — browse plugins in **Marketplace** and track tasks in **Kanban**, all from a single chromeless PWA.
+
+## Quick Start
+
+```bash
+git clone --recurse-submodules https://github.com/NikiforovAll/claude-code-hub.git
+cd claude-code-hub
+npm install && npm install --prefix marketplace && npm install --prefix cck
+npm start        # http://localhost:3455
+```
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|---|---|
+| `Alt+1` | Switch to Marketplace |
+| `Alt+2` | Switch to Kanban |
+| `Ctrl+Alt+Right` | Switch to next tool |
+| `Ctrl+Alt+Left` | Switch to previous tool |
+
+## How It Works
+
+The hub server spawns both sub-apps as child processes, each on its own port. A minimal shell page embeds them in iframes and switches visibility on tab change — zero UI chrome, just keyboard shortcuts.
+
+Sub-apps communicate with the hub via `postMessage`:
+
+```js
+// From inside a sub-app, trigger cross-app navigation:
+hubNavigate('marketplace', '?project=/path/to/project');
+```
+
+The Kanban sidebar shows a marketplace button on session cards — click it to jump to the Marketplace pre-filtered to that project.
+
+## Included Tools
+
+| Tool | Submodule | Default Port |
+|---|---|---|
+| [Marketplace](https://github.com/NikiforovAll/claude-code-marketplace) | `marketplace/` | 3457 |
+| [Kanban](https://github.com/NikiforovAll/claude-task-viewer) | `cck/` | 3456 |
+
+## CLI Flags
+
+```
+--port <n>              Hub port (default: 3455)
+--marketplace-port <n>  Marketplace port (default: 3457)
+--kanban-port <n>       Kanban port (default: 3456)
+--open                  Auto-open browser
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "claude-code-hub",
+  "version": "0.2.0",
+  "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
+  "main": "server.js",
+  "bin": {
+    "claude-code-hub": "./server.js"
+  },
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js --open",
+    "lint": "npx @biomejs/biome check public/app.js server.js",
+    "lint:fix": "npx @biomejs/biome check --fix public/app.js server.js",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NikiforovAll/claude-code-hub.git"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "anthropic",
+    "hub",
+    "dashboard",
+    "marketplace",
+    "kanban",
+    "pwa",
+    "developer-tools"
+  ],
+  "author": "NikiforovAll",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NikiforovAll/claude-code-hub/issues"
+  },
+  "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
+  "dependencies": {
+    "claude-code-kanban": "^2.2.0",
+    "claude-code-marketplace": "^0.5.0",
+    "express": "^4.21.0",
+    "open": "^10.1.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "server.js",
+    "public/**/*"
+  ],
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.10",
+    "husky": "^9.1.7"
+  }
+}

package/public/app.js

@@ -0,0 +1,116 @@
+let apps = {};
+let activeApp = null;
+const iframes = {};
+const loadedApps = new Set();
+let allowedOrigins = new Set();
+
+async function init() {
+  const res = await fetch('/api/config');
+  apps = (await res.json()).apps;
+  allowedOrigins = new Set(Object.values(apps).map((a) => new URL(a.url).origin));
+  buildIframes();
+  switchTab(Object.keys(apps)[0]);
+  listenMessages();
+  listenKeys();
+  registerSW();
+}
+
+function buildIframes() {
+  const container = document.getElementById('iframe-container');
+  for (const [id, cfg] of Object.entries(apps)) {
+    const iframe = document.createElement('iframe');
+    iframe.id = `iframe-${id}`;
+    iframe.src = cfg.url;
+    iframe.className = 'hidden';
+    iframe.addEventListener('load', () => onIframeLoad(id));
+    container.appendChild(iframe);
+    iframes[id] = iframe;
+  }
+}
+
+function switchTab(appId) {
+  if (!apps[appId]) return;
+  activeApp = appId;
+
+  for (const [id, iframe] of Object.entries(iframes)) {
+    iframe.classList.toggle('hidden', id !== appId);
+  }
+
+  const overlay = document.getElementById('loading-overlay');
+  if (!loadedApps.has(appId)) {
+    overlay.classList.remove('fade-out');
+  } else {
+    overlay.classList.add('fade-out');
+  }
+}
+
+function onIframeLoad(appId) {
+  loadedApps.add(appId);
+  if (appId === activeApp) {
+    document.getElementById('loading-overlay').classList.add('fade-out');
+  }
+}
+
+function listenMessages() {
+  window.addEventListener('message', (e) => {
+    if (!allowedOrigins.has(e.origin)) return;
+    const data = e.data ?? {};
+    if (data.type === 'hub:navigate') {
+      if (!apps[data.app]) return;
+      switchTab(data.app);
+      if (data.url) iframes[data.app].src = apps[data.app].url + data.url;
+    } else if (data.type === 'hub:keydown') {
+      if (data.key === 'ArrowLeft') cycleTab(-1);
+      else if (data.key === 'ArrowRight') cycleTab(1);
+      else {
+        const digit = parseInt(data.key, 10);
+        if (digit >= 1 && digit <= 9) switchByIndex(digit - 1);
+      }
+    }
+  });
+}
+
+function cycleTab(delta) {
+  const ids = Object.keys(apps);
+  const idx = ids.indexOf(activeApp);
+  const next = ids[(idx + delta + ids.length) % ids.length];
+  switchTab(next);
+}
+
+function switchByIndex(idx) {
+  const ids = Object.keys(apps);
+  if (idx < ids.length) switchTab(ids[idx]);
+}
+
+function listenKeys() {
+  document.addEventListener('keydown', (e) => {
+    if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
+      const digit = parseInt(e.key, 10);
+      if (digit >= 1 && digit <= 9) {
+        e.preventDefault();
+        switchByIndex(digit - 1);
+        return;
+      }
+    }
+    if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey) {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        cycleTab(-1);
+        return;
+      }
+      if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        cycleTab(1);
+        return;
+      }
+    }
+  });
+}
+
+function registerSW() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js');
+  }
+}
+
+init();

package/public/icons/icon-192.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <rect width="192" height="192" rx="32" fill="#1a1a2e"/>
+  <g transform="translate(96,96)" stroke="#e94560" fill="none" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="-52" y="-52" width="40" height="40" rx="6"/>
+    <rect x="12" y="-52" width="40" height="40" rx="6"/>
+    <rect x="-52" y="12" width="40" height="40" rx="6"/>
+    <rect x="12" y="12" width="40" height="40" rx="6"/>
+  </g>
+</svg>

package/public/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#1a1a2e">
+  <link rel="manifest" href="/manifest.json">
+  <title>Claude Code Hub</title>
+  <style>
+    :root {
+      --bg: #1a1a2e;
+      --border: #0f3460;
+      --accent: #e94560;
+    }
+
+    @media (prefers-color-scheme: light) {
+      :root {
+        --bg: #f4f4f5;
+        --border: #e4e4e7;
+      }
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      background: var(--bg);
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    .iframe-container {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+
+    .iframe-container iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+      background: var(--bg);
+    }
+
+    .iframe-container iframe.hidden {
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    .loading-overlay {
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--bg);
+      z-index: 10;
+      transition: opacity 0.3s ease;
+    }
+
+    .loading-overlay.fade-out {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .spinner {
+      width: 28px;
+      height: 28px;
+      border: 3px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+  <div class="iframe-container" id="iframe-container">
+    <div class="loading-overlay" id="loading-overlay">
+      <div class="spinner"></div>
+    </div>
+  </div>
+
+  <script src="/app.js"></script>
+</body>
+</html>

package/public/manifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "Claude Code Hub",
+  "short_name": "CC Hub",
+  "description": "Unified hub for Claude Code tools",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1a1a2e",
+  "theme_color": "#1a1a2e",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

package/public/sw.js

@@ -0,0 +1,28 @@
+const CACHE_NAME = 'hub-shell-v1';
+const SHELL_ASSETS = ['/', '/index.html', '/app.js', '/manifest.json'];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_ASSETS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (e) => {
+  if (e.request.url.includes('/api/')) {
+    e.respondWith(fetch(e.request));
+    return;
+  }
+  e.respondWith(
+    fetch(e.request).catch(() => caches.match(e.request))
+  );
+});

package/server.js

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const express = require('express');
+const path = require('path');
+
+function getArg(name) {
+  const idx = process.argv.findIndex((a) => a.startsWith(`--${name}`));
+  if (idx === -1) return null;
+  const arg = process.argv[idx];
+  if (arg.includes('=')) return arg.split('=').slice(1).join('=');
+  return process.argv[idx + 1] || null;
+}
+
+const HUB_PORT = parseInt(getArg('port') || process.env.PORT || '3455', 10);
+const MARKETPLACE_PORT = parseInt(getArg('marketplace-port') || '3457', 10);
+const KANBAN_PORT = parseInt(getArg('kanban-port') || '3456', 10);
+
+const children = [];
+const actualPorts = { marketplace: MARKETPLACE_PORT, kanban: KANBAN_PORT };
+
+function spawnApp(name, cmd, args, envPort) {
+  const child = spawn(cmd, args, {
+    cwd: __dirname,
+    env: {
+      ...process.env,
+      PORT: String(envPort),
+      CLAUDE_HUB: '1',
+      HUB_URL: `http://localhost:${HUB_PORT}`,
+    },
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+
+  let stdoutBuf = '';
+  child.stdout.on('data', (d) => {
+    stdoutBuf += d.toString();
+    let nl;
+    while ((nl = stdoutBuf.indexOf('\n')) !== -1) {
+      const line = stdoutBuf.slice(0, nl + 1);
+      stdoutBuf = stdoutBuf.slice(nl + 1);
+      process.stdout.write(`[${name}] ${line}`);
+      const match = line.match(/running at http:\/\/localhost:(\d+)/i);
+      if (match) actualPorts[name] = parseInt(match[1], 10);
+    }
+  });
+  child.stderr.on('data', (d) => process.stderr.write(`[${name}] ${d}`));
+  child.on('exit', (code) => console.log(`[${name}] exited (code ${code})`));
+
+  children.push(child);
+  return child;
+}
+
+function killAll() {
+  for (const child of children) {
+    if (!child.killed) child.kill();
+  }
+}
+
+process.on('SIGINT', () => {
+  killAll();
+  process.exit(0);
+});
+process.on('SIGTERM', () => {
+  killAll();
+  process.exit(0);
+});
+
+function resolveApp(submoduleDir, npmPackage) {
+  const local = path.join(__dirname, submoduleDir, 'server.js');
+  try {
+    require.resolve(local);
+    return local;
+  } catch {}
+  return require.resolve(`${npmPackage}/server.js`);
+}
+
+const marketplacePath = resolveApp('marketplace', 'claude-code-marketplace');
+const kanbanPath = resolveApp('cck', 'claude-code-kanban');
+
+spawnApp('marketplace', process.execPath, [marketplacePath, `--port=${MARKETPLACE_PORT}`], MARKETPLACE_PORT);
+spawnApp('kanban', process.execPath, [kanbanPath], KANBAN_PORT);
+
+const app = express();
+
+app.get('/api/config', (_req, res) => {
+  res.json({
+    apps: {
+      marketplace: { name: 'Marketplace', url: `http://localhost:${actualPorts.marketplace}`, icon: 'store' },
+      kanban: { name: 'Kanban', url: `http://localhost:${actualPorts.kanban}`, icon: 'columns' },
+    },
+  });
+});
+
+app.use(express.static(path.join(__dirname, 'public')));
+
+const server = app.listen(HUB_PORT, () => {
+  const actual = server.address().port;
+  console.log(`Claude Code Hub running at http://localhost:${actual}`);
+  if (process.argv.includes('--open')) {
+    import('open').then((m) => m.default(`http://localhost:${actual}`));
+  }
+});
+
+server.on('error', (err) => {
+  if (err.code === 'EADDRINUSE') {
+    console.log(`Port ${HUB_PORT} in use, trying random port...`);
+    const fallback = app.listen(0, () => {
+      const actual = fallback.address().port;
+      console.log(`Claude Code Hub running at http://localhost:${actual}`);
+      if (process.argv.includes('--open')) {
+        import('open').then((m) => m.default(`http://localhost:${actual}`));
+      }
+    });
+  } else {
+    throw err;
+  }
+});