claudeck 1.0.1 → 1.0.3

package/README.md

@@ -24,16 +24,19 @@
 # One-command launch (no install needed)
 npx claudeck
 
+# Custom port
+npx claudeck --port 3000
+
 # Or install globally
 npm install -g claudeck
 claudeck
 ```
 
-Open **http://localhost:9009** in your browser.
+On first run, Claudeck will ask you to choose a port (default: `9009`), then open your browser to the URL shown in the terminal. The port is saved to `~/.claudeck/.env` for future runs.
 
 > Requires **Node.js 18+** and Claude Code CLI authentication (`claude auth login`).
 
-On first run, Claudeck creates `~/.claudeck/` with your config, database, and plugins directory — safe for NPX upgrades.
+User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX upgrades.
 
 ---
 

package/cli.js

@@ -1,2 +1,67 @@
 #!/usr/bin/env node
-import("./server.js");
+import { homedir } from "os";
+import { join } from "path";
+import { readFileSync, writeFileSync, mkdirSync } from "fs";
+import { createInterface } from "readline";
+
+const DEFAULT_PORT = 9009;
+const envDir = process.env.CLAUDECK_HOME || join(homedir(), ".claudeck");
+const envPath = join(envDir, ".env");
+mkdirSync(envDir, { recursive: true });
+
+function readEnv() {
+  try { return readFileSync(envPath, "utf-8"); } catch { return ""; }
+}
+
+function savePort(port) {
+  let content = readEnv();
+  if (/^PORT=.*/m.test(content)) {
+    content = content.replace(/^PORT=.*/m, `PORT=${port}`);
+  } else {
+    content = content.trimEnd() + `\nPORT=${port}\n`;
+  }
+  writeFileSync(envPath, content);
+}
+
+function getSavedPort() {
+  const match = readEnv().match(/^PORT=(\d+)/m);
+  return match ? match[1] : null;
+}
+
+function ask(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(resolve => {
+    rl.question(question, answer => { rl.close(); resolve(answer.trim()); });
+  });
+}
+
+async function main() {
+  // --port flag takes priority
+  const portArg = process.argv.find(a => a.startsWith('--port'));
+  if (portArg) {
+    const port = portArg.includes('=') ? portArg.split('=')[1] : process.argv[process.argv.indexOf(portArg) + 1];
+    if (port) {
+      process.env.PORT = port;
+      savePort(port);
+      return import("./server.js");
+    }
+  }
+
+  // If port already saved, use it
+  const saved = getSavedPort();
+  if (saved) {
+    process.env.PORT = saved;
+    return import("./server.js");
+  }
+
+  // First run — ask user
+  console.log(`\n\x1b[36m  Claudeck\x1b[0m — first-time setup\n`);
+  const answer = await ask(`  Which port would you like to use? \x1b[2m(default: ${DEFAULT_PORT})\x1b[0m `);
+  const port = answer && /^\d+$/.test(answer) ? answer : String(DEFAULT_PORT);
+  process.env.PORT = port;
+  savePort(port);
+  console.log(`\x1b[2m  Saved to ~/.claudeck/.env\x1b[0m\n`);
+  return import("./server.js");
+}
+
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeck",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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/public/index.html

@@ -268,6 +268,11 @@
                 <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
               </svg>
             </button>
+            <button id="remove-project-btn" class="add-project-btn sidebar-tooltip" data-tooltip="Remove project">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+              </svg>
+            </button>
             <button id="add-project-btn" class="add-project-btn sidebar-tooltip" data-tooltip="Add project">+</button>
             <button id="system-prompt-edit-btn" class="system-prompt-edit-btn sidebar-tooltip" data-tooltip="System prompt">&#9881;</button>
           </div>

package/public/js/core/api.js

@@ -283,6 +283,19 @@ export async function addProject(name, path) {
   return res.json();
 }
 
+export async function deleteProject(path) {
+  const res = await fetch("/api/projects", {
+    method: "DELETE",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ path }),
+  });
+  if (!res.ok) {
+    const err = await res.json();
+    throw new Error(err.error);
+  }
+  return res.json();
+}
+
 export async function fetchProjectCommands(path) {
   const res = await fetch(`/api/projects/commands?path=${encodeURIComponent(path)}`);
   return res.json();

package/public/js/core/dom.js

@@ -259,6 +259,7 @@ export const $ = {
 
   // Add project modal
   openVscodeBtn: document.getElementById("open-vscode-btn"),
+  removeProjectBtn: document.getElementById("remove-project-btn"),
   addProjectBtn: document.getElementById("add-project-btn"),
   addProjectModal: document.getElementById("add-project-modal"),
   addProjectClose: document.getElementById("add-project-close"),

package/public/js/features/projects.js

@@ -278,6 +278,36 @@ $.openVscodeBtn.addEventListener("click", async () => {
   } catch { /* ignore */ }
 });
 
+// Remove project
+$.removeProjectBtn.addEventListener("click", async () => {
+  const path = $.projectSelect.value;
+  if (!path) return;
+  const name = $.projectSelect.options[$.projectSelect.selectedIndex].textContent;
+  if (!confirm(`Remove "${name}" from your projects?\n\nThis only removes it from Claudeck — your files won't be deleted.`)) return;
+  try {
+    await api.deleteProject(path);
+    // Remove from dropdown
+    const opt = [...$.projectSelect.options].find(o => o.value === path);
+    if (opt) opt.remove();
+    // Remove from state
+    const projects = getState("projectsData");
+    const idx = projects.findIndex(p => p.path === path);
+    if (idx !== -1) projects.splice(idx, 1);
+    // Reset selection
+    $.projectSelect.value = "";
+    localStorage.removeItem("claudeck-cwd");
+    updateSystemPromptIndicator();
+    updateHeaderProjectName();
+    updateSessionControls();
+    loadProjectCommands();
+    $.messagesDiv.innerHTML = "";
+    showWhalyPlaceholder();
+    loadSessions();
+  } catch (err) {
+    alert("Failed to remove project: " + err.message);
+  }
+});
+
 // Add project button & modal event listeners
 $.addProjectBtn.addEventListener("click", openAddProjectModal);
 $.addProjectClose.addEventListener("click", closeAddProjectModal);

package/server.js

@@ -164,7 +164,21 @@ const PORT = process.env.PORT || 9009;
 // Mount full-stack plugin routes, then start server
 mountPluginRoutes(app, fullStackPluginsDir).then(() => {
   server.listen(PORT, () => {
-    console.log(`Claudeck running at http://localhost:${PORT}`);
+    const url = `http://localhost:${PORT}`;
+    console.log(`
+\x1b[36m   _____ _                 _           _
+  / ____| |               | |         | |
+ | |    | | __ _ _   _  __| | ___  ___| | __
+ | |    | |/ _\` | | | |/ _\` |/ _ \\/ __| |/ /
+ | |____| | (_| | |_| | (_| |  __/ (__|   <
+  \\_____|_|\\__,_|\\__,_|\\__,_|\\___|\\___|_|\\_\\\x1b[0m
+
+\x1b[2m  Browser UI for Claude Code\x1b[0m
+
+  \x1b[1m\x1b[32m➜\x1b[0m  \x1b[1mReady:\x1b[0m   ${url}
+  \x1b[2m➜  Port:\x1b[0m    ${PORT}
+  \x1b[2m➜  Data:\x1b[0m    ~/.claudeck/
+`);
   });
 });