claudeck 1.2.0 → 1.3.1

package/README.md

@@ -8,6 +8,10 @@
   A browser-based UI for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a> — chat, workflows, agents, cost tracking, and more.
 </p>
 
+<p align="center">
+  <a href="https://www.producthunt.com/products/claudeck?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-claudeck" target="_blank" rel="noopener noreferrer"><img alt="Claudeck on Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1105387&theme=light&t=1774340505179" /></a>
+</p>
+
 <p align="center">
   <a href="https://www.npmjs.com/package/claudeck"><img src="https://img.shields.io/npm/v/claudeck?color=cb3837&label=npm" alt="npm version" /></a>
   <a href="https://github.com/hamedafarag/claudeck/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/claudeck?color=blue" alt="license" /></a>
@@ -27,6 +31,9 @@ npx claudeck
 # Custom port
 npx claudeck --port 3000
 
+# Enable authentication (for remote access via Cloudflare Tunnel, etc.)
+npx claudeck --auth
+
 # Or install globally
 npm install -g claudeck
 claudeck
@@ -42,10 +49,11 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
 
 ## Why Claudeck?
 
-- **Zero-framework** — Vanilla JS, 6 npm dependencies, no build step
+- **Zero-framework** — Vanilla JS + Web Components, 6 npm dependencies, no build step
 - **Full agent orchestration** — Chains, DAGs, orchestrator, and monitoring dashboard
 - **Persistent memory** — Cross-session project knowledge with FTS5 search and AI optimization
 - **Cost visibility** — Per-session tracking, daily charts, token breakdowns
+- **Secure remote access** — Token-based auth for Cloudflare Tunnel or reverse proxy setups
 - **Works everywhere** — PWA, mobile responsive, Telegram AFK approval
 - **Extensible** — Full-stack plugin system with auto-discovery
 
@@ -80,6 +88,7 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
 ### Code & Files
 
 - **File Explorer** — Lazy tree, syntax-highlighted preview, drag-to-chat
+- **File Picker** — Attach files with type dots, binary detection, search, selected chips
 - **Git Panel** — Branch switching, staging, commit, log, inline diff viewer
 - **Git Worktrees** — Run any chat/agent task in an isolated worktree; merge, diff, or discard results
 - **Repos Manager** — Organize repos in nested groups with GitHub links
@@ -141,8 +150,9 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
 | **Confirm All** | Prompt for every tool call |
 | **Plan Mode** | No execution, planning only |
 
-### UI & Experience
+### Security & UI
 
+- **Authentication** — `--auth` flag enables token-based auth with login page, HttpOnly cookies, and WebSocket verification. Localhost bypasses auth by default (auto-detected proxy headers like `X-Forwarded-For` disable the bypass for tunneled requests).
 - Dark theme (terminal CRT aesthetic) and light theme
 - Installable as a PWA with offline fallback
 - Mobile responsive with tablet/mobile breakpoints
@@ -162,7 +172,8 @@ browser ──── WebSocket ──── server.js ──── Claude Code S
                           server/dag-executor.js   ├── data.db     (SQLite + memories)
                           server/notification-logger.js
                           server/utils/git-worktree.js
-                          server/memory-optimizer.js └── .env      (VAPID keys)
+                          server/auth.js
+                          server/memory-optimizer.js └── .env      (VAPID keys, auth token)
                           plugins/
 ```
 
@@ -172,7 +183,8 @@ browser ──── WebSocket ──── server.js ──── Claude Code S
 | Backend | Express 4, WebSocket (ws 8), web-push 3 |
 | AI SDK | @anthropic-ai/claude-code |
 | Database | SQLite via better-sqlite3 (WAL mode) |
-| Frontend | Vanilla JS ES modules, CSS custom properties |
+| Frontend | Vanilla JS ES modules + Web Components (Light DOM), CSS custom properties |
+| Testing | Vitest + happy-dom (2,400+ unit tests, 55% coverage) + WS perf benchmarks |
 | Rendering | highlight.js, Mermaid (diagrams) — CDN |
 
 ---
@@ -226,7 +238,7 @@ All user data lives in `~/.claudeck/` (override with `CLAUDECK_HOME`):
 │   └── skillsmp-config.json  Skills Marketplace config
 ├── plugins/                  User-installed plugins
 ├── data.db                   SQLite database
-└── .env                      VAPID keys, port config
+└── .env                      VAPID keys, port, auth token
 ```
 
 Defaults are copied on first run. User edits are never overwritten on upgrade.
@@ -272,6 +284,52 @@ npx skills add https://github.com/hamedafarag/claudeck-skills
 
 ---
 
+## Testing
+
+```bash
+npm test              # Run all 2,400+ tests
+npm test -- --coverage  # With coverage report
+npm run test:perf     # WebSocket performance benchmarks
+```
+
+| Layer | Tests | Coverage |
+|-------|-------|----------|
+| **components/** (Web Components) | 170+ | 100% |
+| **core/** | 110+ | 90% |
+| **ui/** | 280+ | 65% |
+| **features/** | 210+ | 22% |
+| **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.
+
+### Performance Benchmarks
+
+The `test:perf` suite measures WebSocket relay performance with real TCP connections over localhost (no mocked sockets). Results from 4 scenarios:
+
+**Approval Round-Trip Latency** — server sends `permission_request` → client responds → server receives:
+
+| Concurrent Sessions | p50 | p95 | p99 |
+|---|---|---|---|
+| 1 | 70 µs | 132 µs | 196 µs |
+| 5 | 187 µs | 222 µs | 244 µs |
+| 10 | 300 µs | 466 µs | 721 µs |
+| 25 | 382 µs | 570 µs | 764 µs |
+
+**Message Throughput** — streaming text chunks to connected clients:
+
+| Clients | Total msg/s |
+|---|---|
+| 1 | ~295k |
+| 10 | ~393k |
+| 50 | ~435k |
+
+**Connection Scaling** — 100 simultaneous connections: p50 establish time 156 µs, ~35 KB memory per connection.
+
+**Broadcast Fan-Out** — notification delivery to all connected clients: p50 under 1 ms even at 100 clients.
+
+---
+
 ## Contributing
 
 Contributions are welcome! Fork the repo, make your changes, and open a PR.
@@ -281,6 +339,7 @@ git clone https://github.com/hamedafarag/claudeck.git
 cd claudeck
 npm install
 npm start
+npm test    # Run tests before submitting
 ```
 
 See [DOCUMENTATION.md](docs/DOCUMENTATION.md) for architecture details and [CONFIGURATION.md](docs/CONFIGURATION.md) for the config system.

package/cli.js

@@ -3,6 +3,7 @@ import { homedir } from "os";
 import { join } from "path";
 import { readFileSync, writeFileSync, mkdirSync } from "fs";
 import { createInterface } from "readline";
+import crypto from "crypto";
 
 const DEFAULT_PORT = 9009;
 const envDir = process.env.CLAUDECK_HOME || join(homedir(), ".claudeck");
@@ -13,16 +14,21 @@ function readEnv() {
   try { return readFileSync(envPath, "utf-8"); } catch { return ""; }
 }
 
-function savePort(port) {
+function saveEnvVar(key, value) {
   let content = readEnv();
-  if (/^PORT=.*/m.test(content)) {
-    content = content.replace(/^PORT=.*/m, `PORT=${port}`);
+  const re = new RegExp(`^${key}=.*`, "m");
+  if (re.test(content)) {
+    content = content.replace(re, `${key}=${value}`);
   } else {
-    content = content.trimEnd() + `\nPORT=${port}\n`;
+    content = content.trimEnd() + `\n${key}=${value}\n`;
   }
   writeFileSync(envPath, content);
 }
 
+function savePort(port) {
+  saveEnvVar("PORT", port);
+}
+
 function getSavedPort() {
   const match = readEnv().match(/^PORT=(\d+)/m);
   return match ? match[1] : null;
@@ -35,7 +41,50 @@ function ask(question) {
   });
 }
 
+function handleAuthFlags() {
+  // --no-auth: explicitly disable for this run
+  if (process.argv.includes("--no-auth")) {
+    process.env.CLAUDECK_AUTH = "false";
+    return;
+  }
+
+  // --token <value> or --token=<value>: set custom token + enable auth
+  const tokenArg = process.argv.find(a => a.startsWith("--token"));
+  if (tokenArg) {
+    const token = tokenArg.includes("=")
+      ? tokenArg.split("=")[1]
+      : process.argv[process.argv.indexOf(tokenArg) + 1];
+    if (token) {
+      process.env.CLAUDECK_TOKEN = token;
+      process.env.CLAUDECK_AUTH = "true";
+      saveEnvVar("CLAUDECK_TOKEN", token);
+      saveEnvVar("CLAUDECK_AUTH", "true");
+      console.log(`\x1b[2m  Auth token set and saved to ~/.claudeck/.env\x1b[0m`);
+    }
+    return;
+  }
+
+  // --auth: enable auth, auto-generate token if missing
+  if (process.argv.includes("--auth")) {
+    process.env.CLAUDECK_AUTH = "true";
+    const envContent = readEnv();
+    const existingToken = envContent.match(/^CLAUDECK_TOKEN=(.+)/m);
+    if (existingToken) {
+      process.env.CLAUDECK_TOKEN = existingToken[1];
+    } else {
+      const token = crypto.randomBytes(32).toString("hex");
+      process.env.CLAUDECK_TOKEN = token;
+      saveEnvVar("CLAUDECK_TOKEN", token);
+      saveEnvVar("CLAUDECK_AUTH", "true");
+      console.log(`\x1b[2m  Generated auth token and saved to ~/.claudeck/.env\x1b[0m`);
+    }
+  }
+}
+
 async function main() {
+  // Handle auth flags before anything else
+  handleAuthFlags();
+
   // --port flag takes priority
   const portArg = process.argv.find(a => a.startsWith('--port'));
   if (portArg) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeck",
-  "version": "1.2.0",
+  "version": "1.3.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",
@@ -45,7 +45,8 @@
     "start": "node server.js",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "test:perf": "vitest run --config vitest.config.perf.js"
   },
   "dependencies": {
     "@anthropic-ai/claude-code": "^1.0.128",

package/public/css/core/responsive.css

@@ -150,8 +150,8 @@ body.sidebar-open #sidebar-backdrop {
     padding: 6px 8px;
   }
 
-  /* Hide toolbox/agent/workflow buttons on mobile */
-  .input-bar > .toolbox-toggle {
+  /* Hide toolbox strip on mobile */
+  .toolbox-strip {
     display: none;
   }
 

package/public/css/ui/file-picker.css

@@ -1,46 +1,266 @@
 /* ── File Picker ──────────────────────────────────────── */
 .file-picker-modal {
-  width: 560px;
-  max-height: 70vh;
+  width: 580px;
+  max-height: 75vh;
   display: flex;
   flex-direction: column;
 }
 
-.file-picker-search {
-  width: 100%;
+/* Constraint info banner */
+.fp-info-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  background: var(--accent-dim);
+  border: 1px solid var(--accent-mid);
+  border-radius: var(--radius-md);
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  line-height: 1.4;
+}
+
+.fp-info-banner svg {
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.fp-info-banner strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+/* Search wrapper */
+.fp-search-wrap {
+  position: relative;
   margin-bottom: 10px;
 }
 
+.fp-search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-dim);
+  pointer-events: none;
+}
+
+.fp-search-wrap .file-picker-search {
+  width: 100%;
+  padding-left: 32px;
+}
+
+/* Selected files chip strip */
+.fp-selected-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding-bottom: 10px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.fp-selected-strip.hidden { display: none; }
+
+.fp-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 4px 3px 8px;
+  background: var(--accent-dim);
+  border: 1px solid var(--accent-mid);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--accent);
+  max-width: 220px;
+  animation: fpChipIn 0.15s var(--ease-out-expo);
+}
+
+@keyframes fpChipIn {
+  from { opacity: 0; transform: scale(0.9); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.fp-chip-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+}
+
+.fp-chip-remove {
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 15px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+  opacity: 0.5;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+
+.fp-chip-remove:hover { opacity: 1; }
+
+/* File list */
 .file-picker-list {
   flex: 1;
   overflow-y: auto;
-  max-height: 350px;
+  max-height: 320px;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   background: var(--bg);
 }
 
+/* File items */
 .file-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 7px 12px;
   font-size: 12px;
   font-family: var(--font-mono);
   color: var(--text-secondary);
   cursor: pointer;
   border-bottom: 1px solid var(--border-subtle);
-  transition: background 0.08s, color 0.08s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  transition: background 0.1s, color 0.1s;
+  position: relative;
 }
 
 .file-picker-item:last-child { border-bottom: none; }
-.file-picker-item:hover { background: var(--bg-tertiary); color: var(--text); }
+
+.file-picker-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text);
+}
 
 .file-picker-item.selected {
   background: var(--accent-dim);
   color: var(--accent);
 }
 
+/* File type color dot */
+.fp-type-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.fp-type-dot.type-code    { background: var(--accent); }
+.fp-type-dot.type-config  { background: var(--amber); }
+.fp-type-dot.type-markup  { background: var(--cyan); }
+.fp-type-dot.type-docs    { background: var(--purple); }
+.fp-type-dot.type-data    { background: var(--user); }
+.fp-type-dot.type-binary  { background: var(--error); }
+.fp-type-dot.type-default { background: var(--text-dim); }
+
+/* File path text */
+.fp-path {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Checkmark for selected items */
+.fp-check {
+  opacity: 0;
+  color: var(--accent);
+  flex-shrink: 0;
+  transition: opacity 0.1s;
+  margin-left: auto;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.file-picker-item.selected .fp-check {
+  opacity: 1;
+}
+
+/* Loading state */
+.file-picker-item.loading {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.fp-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: fpSpin 0.6s linear infinite;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+@keyframes fpSpin {
+  to { transform: rotate(360deg); }
+}
+
+/* Error state */
+.file-picker-item.error {
+  background: rgba(237, 51, 59, 0.05);
+  cursor: not-allowed;
+}
+
+.file-picker-item.error .fp-path {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+.fp-error-msg {
+  font-size: 10px;
+  color: var(--error);
+  margin-left: auto;
+  flex-shrink: 0;
+  font-family: var(--font-sans);
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+/* Binary file warning */
+.file-picker-item.binary-warn {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.fp-binary-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  margin-left: auto;
+  flex-shrink: 0;
+  font-family: var(--font-sans);
+  font-style: italic;
+}
+
+/* Empty state */
+.fp-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 16px;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  gap: 10px;
+  min-height: 120px;
+}
+
+.fp-empty-state.hidden { display: none; }
+
+.fp-empty-state svg {
+  opacity: 0.3;
+}
+
+/* Footer */
 .file-picker-footer {
   display: flex;
   align-items: center;
@@ -50,20 +270,26 @@
   color: var(--text-dim);
 }
 
+/* Badge */
+#attach-btn {
+  position: relative;
+}
+
 .attach-badge {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  min-width: 16px;
-  height: 16px;
+  top: -3px;
+  right: -3px;
+  min-width: 14px;
+  height: 14px;
   background: var(--accent-solid);
   color: #fff;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 700;
-  border-radius: 8px;
+  border-radius: 7px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 4px;
+  padding: 0 3px;
   line-height: 1;
+  pointer-events: none;
 }

package/public/css/ui/messages.css

@@ -770,12 +770,17 @@ html[data-theme="light"] .msg-user {
   border-top: 1px solid var(--border);
   display: flex;
   gap: 8px;
-  align-items: flex-start;
+  align-items: flex-end;
   max-width: calc(var(--chat-max-w) + 48px);
   width: 100%;
   margin: 0 auto;
 }
 
+.input-bar > .send-history-group {
+  align-self: flex-end;
+  margin-bottom: 24px;
+}
+
 /* Gradient fade above input */
 .input-bar::before {
   content: "";
@@ -837,21 +842,79 @@ html[data-theme="light"] .msg-user {
   transition: all 0.2s var(--ease-smooth);
 }
 
-#send-btn             { background: var(--accent-solid); color: #000; }
-#send-btn:hover       { background: var(--accent); box-shadow: var(--glow-strong); transform: scale(1.02); }
-#send-btn:active      { transform: scale(0.97); }
-#send-btn:disabled    { opacity: 0.25; cursor: not-allowed; transform: none; }
-#stop-btn             { background: var(--error); color: #fff; }
-#stop-btn:hover       { opacity: 0.85; transform: scale(1.02); }
-#stop-btn:active      { transform: scale(0.97); }
+/* Send button */
+#send-btn {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--accent-solid);
+  color: #000;
+  position: relative;
+  box-shadow: 0 0 12px rgba(46, 194, 126, 0.2);
+}
+
+#send-btn::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  border: 1.5px solid var(--accent);
+  opacity: 0;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: scale(0.95);
+}
+
+#send-btn:hover {
+  background: var(--accent);
+  box-shadow: 0 0 20px rgba(46, 194, 126, 0.35), var(--glow-strong);
+  transform: scale(1.05);
+}
+
+#send-btn:hover::after {
+  opacity: 0.4;
+  transform: scale(1);
+}
+
+#send-btn:active {
+  transform: scale(0.93);
+  box-shadow: 0 0 8px rgba(46, 194, 126, 0.15);
+}
+
+#send-btn:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+#send-btn:disabled::after { display: none; }
+
+/* Stop button */
+#stop-btn {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--error);
+  color: #fff;
+  box-shadow: 0 0 12px rgba(237, 51, 59, 0.2);
+}
+
+#stop-btn:hover {
+  box-shadow: 0 0 20px rgba(237, 51, 59, 0.35);
+  transform: scale(1.05);
+}
+
+#stop-btn:active {
+  transform: scale(0.93);
+}
 
 /* ── Input Meta Labels ────────────────────────────────── */
 .input-meta {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 2px 0;
   user-select: none;
+  margin-left: auto;
 }
 
 .input-meta-item {