claude-ws 0.3.99 → 0.3.100

package/bin/claude-ws.js

@@ -14,6 +14,18 @@ const path = require('path');
 const fs = require('fs');
 const os = require('os');
 
+// ── Subcommand detection ──────────────────────────────────────────────
+// If the first positional arg is a known subcommand, delegate and exit.
+// Otherwise, fall through to the existing foreground startup logic.
+const SUBCOMMANDS = ['start', 'stop', 'status', 'logs', 'open'];
+const _firstArg = process.argv[2];
+if (SUBCOMMANDS.includes(_firstArg)) {
+  require(`./lib/commands/${_firstArg}`).run(process.argv.slice(3));
+  // The command handles process.exit — nothing else to do here.
+  return;
+}
+// ── End subcommand detection ──────────────────────────────────────────
+
 const isWindows = process.platform === 'win32';
 
 /**
@@ -59,7 +71,23 @@ if (process.argv.includes('--help') || process.argv.includes('-h')) {
 Claude Workspace - Visual workspace for Claude Code
 
 Usage:
-  claude-ws [options]
+  claude-ws [options]          Start server in foreground (blocks terminal)
+  claude-ws <command> [flags]  Daemon management
+
+Commands:
+  start    Start as background daemon
+           --port, -p <port>   Server port (default: 8556)
+           --host <host>       Bind host (default: localhost)
+           --data-dir <dir>    Data directory
+           --log-dir <dir>     Log directory
+           --no-open           Don't open browser after start
+  stop     Stop the running daemon
+  status   Show daemon PID, URL, and health
+  logs     Tail daemon log files
+           -f, --follow        Follow log output
+           -n, --lines <N>     Number of lines (default: 50)
+           -e, --error         Show error log instead
+  open     Open browser to running instance
 
 Options:
   -v, --version    Show version number
@@ -68,10 +96,15 @@ Options:
 Environment:
   .env: Loaded from current working directory (./.env)
   Database: Stored in ./data/claude-ws.db (or DATA_DIR env)
+  Config:  ~/.claude-ws/config.json (port, host, dataDir, logDir)
 
 Examples:
-  claude-ws              Start server using .env from current directory
-  cd ~/myproject && claude-ws   Use ~/myproject/.env and database
+  claude-ws                     Start server in foreground
+  claude-ws start               Start as daemon
+  claude-ws start --port 3000   Start daemon on port 3000
+  claude-ws status              Check if daemon is running
+  claude-ws logs -f             Follow daemon logs
+  claude-ws stop                Stop the daemon
 
 For more info: https://github.com/Claude-Workspace/claude-ws
   `);

package/bin/lib/cli-parser.js

@@ -0,0 +1,109 @@
+/**
+ * Lightweight CLI argument parser.
+ * Zero dependencies - Node.js built-ins only.
+ *
+ * Supports:
+ *   --port 3000, --port=3000
+ *   --no-open (boolean negation)
+ *   -f (short flags)
+ *   -n 50 (short flags with values)
+ */
+
+/**
+ * @param {string[]} argv - process.argv.slice(N) after subcommand
+ * @param {{ flags: Record<string, { type: 'string'|'boolean', alias?: string, default?: any }> }} schema
+ * @returns {{ flags: Record<string, any>, args: string[] }}
+ */
+function parse(argv, schema) {
+  const flags = {};
+  const args = [];
+  const defs = schema.flags || {};
+
+  // Set defaults
+  for (const [key, def] of Object.entries(defs)) {
+    if (def.default !== undefined) {
+      flags[key] = def.default;
+    } else {
+      flags[key] = def.type === 'boolean' ? false : undefined;
+    }
+  }
+
+  // Build alias map: alias -> canonical name
+  const aliasMap = {};
+  for (const [key, def] of Object.entries(defs)) {
+    if (def.alias) {
+      aliasMap[def.alias] = key;
+    }
+  }
+
+  let i = 0;
+  while (i < argv.length) {
+    const arg = argv[i];
+
+    if (arg === '--') {
+      args.push(...argv.slice(i + 1));
+      break;
+    }
+
+    // --no-<flag> boolean negation
+    if (arg.startsWith('--no-')) {
+      const name = arg.slice(5);
+      if (defs[name] && defs[name].type === 'boolean') {
+        flags[name] = false;
+        i++;
+        continue;
+      }
+    }
+
+    // --flag=value
+    if (arg.startsWith('--') && arg.includes('=')) {
+      const eqIdx = arg.indexOf('=');
+      const name = arg.slice(2, eqIdx);
+      const value = arg.slice(eqIdx + 1);
+      if (defs[name]) {
+        flags[name] = defs[name].type === 'boolean' ? value !== 'false' : value;
+      }
+      i++;
+      continue;
+    }
+
+    // --flag [value]
+    if (arg.startsWith('--')) {
+      const name = arg.slice(2);
+      if (defs[name]) {
+        if (defs[name].type === 'boolean') {
+          flags[name] = true;
+          i++;
+        } else {
+          flags[name] = argv[i + 1];
+          i += 2;
+        }
+        continue;
+      }
+    }
+
+    // -f or -f value (short alias)
+    if (arg.startsWith('-') && !arg.startsWith('--') && arg.length === 2) {
+      const alias = arg.slice(1);
+      const canonical = aliasMap[alias];
+      if (canonical && defs[canonical]) {
+        if (defs[canonical].type === 'boolean') {
+          flags[canonical] = true;
+          i++;
+        } else {
+          flags[canonical] = argv[i + 1];
+          i += 2;
+        }
+        continue;
+      }
+    }
+
+    // Positional argument
+    args.push(arg);
+    i++;
+  }
+
+  return { flags, args };
+}
+
+module.exports = { parse };

package/bin/lib/commands/logs.js

@@ -0,0 +1,73 @@
+/**
+ * `claude-ws logs` — Tail daemon log files.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
+const { parse } = require('../cli-parser');
+const config = require('../config');
+
+const FLAG_SCHEMA = {
+  flags: {
+    follow: { type: 'boolean', alias: 'f', default: false },
+    lines: { type: 'string', alias: 'n', default: '50' },
+    error: { type: 'boolean', alias: 'e', default: false },
+  },
+};
+
+function run(argv) {
+  const { flags } = parse(argv, FLAG_SCHEMA);
+  const conf = config.resolve({});
+
+  const logFile = flags.error
+    ? path.join(conf.logDir, 'claude-ws-error.log')
+    : path.join(conf.logDir, 'claude-ws.log');
+
+  if (!fs.existsSync(logFile)) {
+    console.log(`[claude-ws] No log file found at ${logFile}`);
+    console.log('[claude-ws] Has the daemon been started? Try: claude-ws start');
+    process.exit(1);
+  }
+
+  const tailArgs = [];
+  tailArgs.push('-n', flags.lines);
+  if (flags.follow) {
+    tailArgs.push('-f');
+  }
+  tailArgs.push(logFile);
+
+  console.log(`[claude-ws] ${flags.error ? 'Error log' : 'Log'}: ${logFile}`);
+  console.log('---');
+
+  const tail = spawn('tail', tailArgs, { stdio: 'inherit' });
+
+  tail.on('error', (err) => {
+    // tail not available (Windows) — fall back to reading file
+    if (err.code === 'ENOENT') {
+      const content = fs.readFileSync(logFile, 'utf-8');
+      const lines = content.split('\n');
+      const n = parseInt(flags.lines, 10) || 50;
+      const tail = lines.slice(-n);
+      console.log(tail.join('\n'));
+
+      if (flags.follow) {
+        console.log('[claude-ws] -f (follow) is not supported on this platform.');
+      }
+    } else {
+      console.error(`[claude-ws] Error: ${err.message}`);
+    }
+    process.exit(1);
+  });
+
+  tail.on('close', (code) => {
+    process.exit(code || 0);
+  });
+
+  // Forward Ctrl+C to tail
+  process.on('SIGINT', () => {
+    tail.kill('SIGINT');
+  });
+}
+
+module.exports = { run };

package/bin/lib/commands/open.js

@@ -0,0 +1,49 @@
+/**
+ * `claude-ws open` — Open browser to the running instance.
+ */
+
+const { exec } = require('child_process');
+const config = require('../config');
+const daemon = require('../daemon');
+
+/**
+ * Open a URL in the default browser (cross-platform).
+ * @param {string} url
+ */
+function openUrl(url) {
+  const platform = process.platform;
+  let cmd;
+  if (platform === 'darwin') {
+    cmd = `open "${url}"`;
+  } else if (platform === 'win32') {
+    cmd = `start "" "${url}"`;
+  } else {
+    cmd = `xdg-open "${url}"`;
+  }
+
+  exec(cmd, (err) => {
+    if (err) {
+      console.log(`[claude-ws] Could not open browser. Visit: ${url}`);
+    }
+  });
+}
+
+async function run(_argv) {
+  const { running, pid } = daemon.checkRunning();
+
+  if (!running) {
+    console.log('[claude-ws] No running daemon found.');
+    console.log('[claude-ws] Start one first: claude-ws start');
+    process.exit(1);
+  }
+
+  const conf = config.resolve({});
+  const url = `http://${conf.host}:${conf.port}`;
+
+  console.log(`[claude-ws] Opening ${url} (PID ${pid})`);
+  openUrl(url);
+
+  process.exit(0);
+}
+
+module.exports = { run, openUrl };

package/bin/lib/commands/start.js

@@ -0,0 +1,73 @@
+/**
+ * `claude-ws start` — Start claude-ws as a background daemon.
+ */
+
+const { parse } = require('../cli-parser');
+const config = require('../config');
+const daemon = require('../daemon');
+const health = require('../health');
+
+const FLAG_SCHEMA = {
+  flags: {
+    port: { type: 'string', alias: 'p' },
+    host: { type: 'string' },
+    'data-dir': { type: 'string' },
+    'log-dir': { type: 'string' },
+    'no-open': { type: 'boolean' },
+  },
+};
+
+async function run(argv) {
+  const { flags } = parse(argv, FLAG_SCHEMA);
+  const conf = config.resolve(flags);
+
+  // Check if already running
+  const { running, pid } = daemon.checkRunning();
+  if (running) {
+    console.log(`[claude-ws] Already running (PID ${pid})`);
+    console.log(`[claude-ws] URL: http://${conf.host}:${conf.port}`);
+    console.log('[claude-ws] Use "claude-ws stop" to stop it first.');
+    process.exit(1);
+  }
+
+  console.log('[claude-ws] Starting daemon...');
+  console.log(`[claude-ws] Port: ${conf.port}`);
+  console.log(`[claude-ws] Host: ${conf.host}`);
+  console.log(`[claude-ws] Data: ${conf.dataDir}`);
+  console.log(`[claude-ws] Logs: ${conf.logDir}`);
+
+  const childPid = daemon.daemonize({
+    port: conf.port,
+    host: conf.host,
+    dataDir: conf.dataDir,
+    logDir: conf.logDir,
+    noOpen: flags['no-open'],
+  });
+
+  console.log(`[claude-ws] Daemon started (PID ${childPid})`);
+  console.log('[claude-ws] Waiting for server to become ready...');
+
+  const ready = await health.waitUntilReady(conf.host, conf.port, 60000, 2000);
+
+  if (ready) {
+    console.log(`[claude-ws] Server is ready at http://${conf.host}:${conf.port}`);
+
+    // Open browser unless --no-open
+    if (!flags['no-open']) {
+      try {
+        const openCmd = require('../commands/open');
+        openCmd.openUrl(`http://${conf.host}:${conf.port}`);
+      } catch {
+        // Non-critical — don't fail the start
+      }
+    }
+  } else {
+    console.log('[claude-ws] Server did not respond within 60s.');
+    console.log('[claude-ws] Check logs: claude-ws logs');
+    console.log('[claude-ws] The daemon may still be starting up (building, installing deps, etc.).');
+  }
+
+  process.exit(0);
+}
+
+module.exports = { run };

package/bin/lib/commands/status.js

@@ -0,0 +1,35 @@
+/**
+ * `claude-ws status` — Show daemon status, PID, URL, and health.
+ */
+
+const config = require('../config');
+const daemon = require('../daemon');
+const health = require('../health');
+
+async function run(_argv) {
+  const { running, pid } = daemon.checkRunning();
+
+  if (!running) {
+    console.log('[claude-ws] Status: NOT RUNNING');
+    process.exit(0);
+  }
+
+  const conf = config.resolve({});
+  const result = await health.check(conf.host, conf.port);
+
+  console.log('[claude-ws] Status: RUNNING');
+  console.log(`[claude-ws] PID: ${pid}`);
+  console.log(`[claude-ws] URL: http://${conf.host}:${conf.port}`);
+
+  if (result.ok) {
+    console.log(`[claude-ws] Health: OK (HTTP ${result.statusCode})`);
+  } else {
+    console.log(`[claude-ws] Health: UNREACHABLE (${result.error})`);
+    console.log('[claude-ws] The server process is running but not responding to HTTP.');
+    console.log('[claude-ws] It may still be starting up. Check: claude-ws logs');
+  }
+
+  process.exit(0);
+}
+
+module.exports = { run };

package/bin/lib/commands/stop.js

@@ -0,0 +1,50 @@
+/**
+ * `claude-ws stop` — Stop the running daemon.
+ */
+
+const daemon = require('../daemon');
+
+async function run(_argv) {
+  const { running, pid } = daemon.checkRunning();
+
+  if (!running) {
+    console.log('[claude-ws] No running daemon found.');
+    process.exit(0);
+  }
+
+  console.log(`[claude-ws] Stopping daemon (PID ${pid})...`);
+
+  // Send SIGTERM
+  const sent = daemon.sendSignal(pid, 'SIGTERM');
+  if (!sent) {
+    console.log('[claude-ws] Failed to send SIGTERM — process may have already exited.');
+    daemon.removePid();
+    process.exit(0);
+  }
+
+  // Poll for exit (up to 10s)
+  const exited = await daemon.waitForExit(pid, 10000);
+
+  if (exited) {
+    daemon.removePid();
+    console.log('[claude-ws] Daemon stopped.');
+    process.exit(0);
+  }
+
+  // Force kill
+  console.log('[claude-ws] Daemon did not exit gracefully, sending SIGKILL...');
+  daemon.sendSignal(pid, 'SIGKILL');
+
+  const killed = await daemon.waitForExit(pid, 5000);
+  daemon.removePid();
+
+  if (killed) {
+    console.log('[claude-ws] Daemon killed.');
+  } else {
+    console.log(`[claude-ws] Warning: Process ${pid} may still be running.`);
+  }
+
+  process.exit(0);
+}
+
+module.exports = { run };

package/bin/lib/config.js

@@ -0,0 +1,93 @@
+/**
+ * Configuration loader for claude-ws daemon mode.
+ *
+ * Priority: CLI flags > env vars > config file > defaults.
+ * Config file: ~/.claude-ws/config.json
+ * PID file:    ~/.claude-ws/claude-ws.pid
+ */
+
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const CLAUDE_WS_DIR = path.join(os.homedir(), '.claude-ws');
+const CONFIG_PATH = path.join(CLAUDE_WS_DIR, 'config.json');
+const PID_PATH = path.join(CLAUDE_WS_DIR, 'claude-ws.pid');
+
+const DEFAULTS = {
+  port: 8556,
+  host: 'localhost',
+  dataDir: path.join(CLAUDE_WS_DIR, 'data'),
+  logDir: path.join(CLAUDE_WS_DIR, 'logs'),
+};
+
+/**
+ * Ensure ~/.claude-ws/ directory exists.
+ */
+function ensureDir() {
+  if (!fs.existsSync(CLAUDE_WS_DIR)) {
+    fs.mkdirSync(CLAUDE_WS_DIR, { recursive: true });
+  }
+}
+
+/**
+ * Load config file if it exists.
+ * @returns {object}
+ */
+function loadConfigFile() {
+  if (!fs.existsSync(CONFIG_PATH)) {
+    return {};
+  }
+  try {
+    const raw = fs.readFileSync(CONFIG_PATH, 'utf-8');
+    return JSON.parse(raw);
+  } catch (err) {
+    console.error(`[claude-ws] Warning: Failed to parse ${CONFIG_PATH}: ${err.message}`);
+    return {};
+  }
+}
+
+/**
+ * Resolve the final configuration by merging defaults, config file, env vars,
+ * and CLI flags (passed as an object).
+ *
+ * @param {object} [cliFlags={}] - Parsed CLI flags (e.g. { port: '3000', host: '0.0.0.0' })
+ * @returns {{ port: number, host: string, dataDir: string, logDir: string }}
+ */
+function resolve(cliFlags = {}) {
+  ensureDir();
+
+  const file = loadConfigFile();
+
+  const port = parseInt(
+    cliFlags.port || process.env.PORT || file.port || DEFAULTS.port,
+    10,
+  );
+
+  const host =
+    cliFlags.host || process.env.HOST || file.host || DEFAULTS.host;
+
+  const dataDir =
+    cliFlags['data-dir'] || process.env.DATA_DIR || file.dataDir || DEFAULTS.dataDir;
+
+  const logDir =
+    cliFlags['log-dir'] || process.env.LOG_DIR || file.logDir || DEFAULTS.logDir;
+
+  // Ensure log and data dirs exist
+  for (const dir of [dataDir, logDir]) {
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  }
+
+  return { port, host, dataDir, logDir };
+}
+
+module.exports = {
+  CLAUDE_WS_DIR,
+  CONFIG_PATH,
+  PID_PATH,
+  DEFAULTS,
+  ensureDir,
+  resolve,
+};

package/bin/lib/daemon.js

@@ -0,0 +1,167 @@
+/**
+ * Daemon utilities: PID file management, process checks, daemonization.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
+const config = require('./config');
+
+/**
+ * Read PID from PID file.
+ * @returns {number|null}
+ */
+function readPid() {
+  try {
+    const raw = fs.readFileSync(config.PID_PATH, 'utf-8').trim();
+    const pid = parseInt(raw, 10);
+    return isNaN(pid) ? null : pid;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write PID to PID file.
+ * @param {number} pid
+ */
+function writePid(pid) {
+  config.ensureDir();
+  fs.writeFileSync(config.PID_PATH, String(pid), 'utf-8');
+}
+
+/**
+ * Remove PID file.
+ */
+function removePid() {
+  try {
+    fs.unlinkSync(config.PID_PATH);
+  } catch {
+    // Already gone — that's fine
+  }
+}
+
+/**
+ * Check whether a process with the given PID is alive.
+ * @param {number} pid
+ * @returns {boolean}
+ */
+function isAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a daemon is already running.
+ * Cleans up stale PID file if the process is dead.
+ *
+ * @returns {{ running: boolean, pid: number|null }}
+ */
+function checkRunning() {
+  const pid = readPid();
+  if (pid === null) {
+    return { running: false, pid: null };
+  }
+  if (isAlive(pid)) {
+    return { running: true, pid };
+  }
+  // Stale PID file — clean up
+  removePid();
+  return { running: false, pid: null };
+}
+
+/**
+ * Spawn the claude-ws foreground process as a detached daemon.
+ *
+ * @param {{ port: number, host: string, dataDir: string, logDir: string, noOpen?: boolean }} opts
+ * @returns {number} The child PID
+ */
+function daemonize(opts) {
+  const entryPoint = path.resolve(__dirname, '..', 'claude-ws.js');
+
+  const stdoutPath = path.join(opts.logDir, 'claude-ws.log');
+  const stderrPath = path.join(opts.logDir, 'claude-ws-error.log');
+
+  const stdoutFd = fs.openSync(stdoutPath, 'a');
+  const stderrFd = fs.openSync(stderrPath, 'a');
+
+  const env = {
+    ...process.env,
+    PORT: String(opts.port),
+    HOST: opts.host,
+    DATA_DIR: opts.dataDir,
+    CLAUDE_WS_DAEMON: '1', // Signal to the entry point that this is a daemon child
+  };
+
+  const child = spawn(process.execPath, [entryPoint], {
+    cwd: process.cwd(),
+    detached: true,
+    stdio: ['ignore', stdoutFd, stderrFd],
+    env,
+  });
+
+  child.unref();
+
+  // Close the fd handles in this (parent) process
+  fs.closeSync(stdoutFd);
+  fs.closeSync(stderrFd);
+
+  const pid = child.pid;
+  writePid(pid);
+
+  return pid;
+}
+
+/**
+ * Send a signal to the daemon process.
+ *
+ * @param {number} pid
+ * @param {string} signal - e.g. 'SIGTERM', 'SIGKILL'
+ * @returns {boolean} true if signal was sent successfully
+ */
+function sendSignal(pid, signal) {
+  try {
+    process.kill(pid, signal);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Wait for a process to exit, polling every interval ms.
+ *
+ * @param {number} pid
+ * @param {number} timeoutMs
+ * @param {number} [intervalMs=500]
+ * @returns {Promise<boolean>} true if process exited within timeout
+ */
+function waitForExit(pid, timeoutMs, intervalMs = 500) {
+  return new Promise((resolve) => {
+    const start = Date.now();
+    const timer = setInterval(() => {
+      if (!isAlive(pid)) {
+        clearInterval(timer);
+        resolve(true);
+      } else if (Date.now() - start >= timeoutMs) {
+        clearInterval(timer);
+        resolve(false);
+      }
+    }, intervalMs);
+  });
+}
+
+module.exports = {
+  readPid,
+  writePid,
+  removePid,
+  isAlive,
+  checkRunning,
+  daemonize,
+  sendSignal,
+  waitForExit,
+};

package/bin/lib/health.js

@@ -0,0 +1,62 @@
+/**
+ * HTTP health check against a running claude-ws server.
+ */
+
+const http = require('http');
+
+/**
+ * Perform a simple HTTP GET to check if the server is responding.
+ *
+ * @param {string} host
+ * @param {number} port
+ * @param {number} [timeoutMs=3000]
+ * @returns {Promise<{ ok: boolean, statusCode?: number, error?: string }>}
+ */
+function check(host, port, timeoutMs = 3000) {
+  return new Promise((resolve) => {
+    const req = http.get(`http://${host}:${port}/`, { timeout: timeoutMs }, (res) => {
+      // Any HTTP response means the server is alive
+      resolve({ ok: true, statusCode: res.statusCode });
+      res.resume(); // Drain the response
+    });
+
+    req.on('error', (err) => {
+      resolve({ ok: false, error: err.message });
+    });
+
+    req.on('timeout', () => {
+      req.destroy();
+      resolve({ ok: false, error: 'timeout' });
+    });
+  });
+}
+
+/**
+ * Poll until the server responds or timeout is reached.
+ *
+ * @param {string} host
+ * @param {number} port
+ * @param {number} [timeoutMs=30000]
+ * @param {number} [intervalMs=1000]
+ * @returns {Promise<boolean>}
+ */
+function waitUntilReady(host, port, timeoutMs = 30000, intervalMs = 1000) {
+  return new Promise((resolve) => {
+    const start = Date.now();
+    const attempt = async () => {
+      const result = await check(host, port, 2000);
+      if (result.ok) {
+        resolve(true);
+        return;
+      }
+      if (Date.now() - start >= timeoutMs) {
+        resolve(false);
+        return;
+      }
+      setTimeout(attempt, intervalMs);
+    };
+    attempt();
+  });
+}
+
+module.exports = { check, waitUntilReady };

package/locales/de.json

@@ -86,6 +86,8 @@
     "cancelled": "Abgebrochen",
     "deleteColumn": "Spalte löschen",
     "addColumn": "Spalte hinzufügen",
+    "columns": "Spalten",
+    "toggleColumns": "Spalten anzeigen",
     "noTasks": "Keine Aufgaben",
     "deleteAllTasks": "Alle {count} Aufgabe(n) in \"{status}\" löschen?",
     "newTaskShortcut": "Neue Aufgabe (Strg/⌘ + Leertaste)",

package/locales/en.json

@@ -86,6 +86,8 @@
     "cancelled": "Cancelled",
     "deleteColumn": "Delete Column",
     "addColumn": "Add Column",
+    "columns": "Columns",
+    "toggleColumns": "Toggle Columns",
     "noTasks": "No tasks",
     "deleteAllTasks": "Delete all {count} task(s) in \"{status}\"?",
     "newTaskShortcut": "New Task (Ctrl/⌘ + Space)",

package/locales/es.json

@@ -86,6 +86,8 @@
     "cancelled": "Cancelado",
     "deleteColumn": "Eliminar Columna",
     "addColumn": "Añadir Columna",
+    "columns": "Columnas",
+    "toggleColumns": "Mostrar columnas",
     "noTasks": "Sin tareas",
     "deleteAllTasks": "¿Eliminar {count} tarea(s) en \"{status}\"?",
     "newTaskShortcut": "Nueva Tarea (Ctrl/⌘ + Espacio)",

package/locales/fr.json

@@ -86,6 +86,8 @@
     "cancelled": "Annulé",
     "deleteColumn": "Supprimer la colonne",
     "addColumn": "Ajouter une colonne",
+    "columns": "Colonnes",
+    "toggleColumns": "Afficher les colonnes",
     "noTasks": "Aucune tâche",
     "deleteAllTasks": "Supprimer les {count} tâche(s) dans \"{status}\" ?",
     "newTaskShortcut": "Nouvelle tâche (Ctrl/⌘ + Espace)",

package/locales/ja.json

@@ -86,6 +86,8 @@
     "cancelled": "キャンセル済み",
     "deleteColumn": "列を削除",
     "addColumn": "列を追加",
+    "columns": "列",
+    "toggleColumns": "列の表示切替",
     "noTasks": "タスクなし",
     "deleteAllTasks": "「{status}」のすべての {count} 個のタスクを削除しますか？",
     "newTaskShortcut": "新しいタスク (Ctrl/⌘ + Space)",

package/locales/ko.json

@@ -86,6 +86,8 @@
     "cancelled": "취소됨",
     "deleteColumn": "열 삭제",
     "addColumn": "열 추가",
+    "columns": "열",
+    "toggleColumns": "열 표시",
     "noTasks": "작업 없음",
     "deleteAllTasks": "\"{status}\"의 모든 {count} 개의 작업을 삭제하시겠습니까?",
     "newTaskShortcut": "새 작업 (Ctrl/⌘ + Space)",

package/locales/vi.json

@@ -86,6 +86,8 @@
     "cancelled": "Đã hủy",
     "deleteColumn": "Xóa cột",
     "addColumn": "Thêm cột",
+    "columns": "Cột",
+    "toggleColumns": "Hiển thị cột",
     "noTasks": "Không có nhiệm vụ",
     "deleteAllTasks": "Xóa tất cả {count} nhiệm vụ trong \"{status}\"?",
     "newTaskShortcut": "Nhiệm vụ mới (Ctrl/⌘ + Space)",

package/locales/zh.json

@@ -86,6 +86,8 @@
     "cancelled": "已取消",
     "deleteColumn": "删除列",
     "addColumn": "添加列",
+    "columns": "列",
+    "toggleColumns": "切换列显示",
     "noTasks": "无任务",
     "deleteAllTasks": "删除\"{status}\"中的所有 {count} 个任务？",
     "newTaskShortcut": "新任务 (Ctrl/⌘ + 空格)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-ws",
-  "version": "0.3.99",
+  "version": "0.3.100",
   "private": false,
   "description": "A beautifully crafted workspace interface for Claude Code with real-time streaming and local SQLite database",
   "keywords": [

package/src/app/api/tasks/route.ts

@@ -8,46 +8,48 @@ import type { TaskStatus } from '@/types';
 // Query params:
 //   ?projectId=xxx - Single project (backward compat)
 //   ?projectIds=id1,id2,id3 - Multiple projects
+//   ?status=in_review - Filter by status (single or comma-separated)
 //   No params - All tasks
 export async function GET(request: NextRequest) {
   try {
     const searchParams = request.nextUrl.searchParams;
     const projectId = searchParams.get('projectId');
     const projectIds = searchParams.get('projectIds');
+    const statusParam = searchParams.get('status');
 
-    let tasks;
+    // Build status filter conditions
+    const validStatuses: TaskStatus[] = ['todo', 'in_progress', 'in_review', 'done', 'cancelled'];
+    let statusFilter: ReturnType<typeof inArray> | undefined;
+    if (statusParam) {
+      const statuses = statusParam.split(',').filter((s): s is TaskStatus => validStatuses.includes(s as TaskStatus));
+      if (statuses.length > 0) {
+        statusFilter = inArray(schema.tasks.status, statuses);
+      }
+    }
 
+    // Build project filter conditions
+    let projectFilter: ReturnType<typeof eq> | ReturnType<typeof inArray> | undefined;
     if (projectIds) {
-      // Multi-project mode
       const ids = projectIds.split(',').filter(Boolean);
       if (ids.length > 0) {
-        tasks = await db
-          .select()
-          .from(schema.tasks)
-          .where(inArray(schema.tasks.projectId, ids))
-          .orderBy(schema.tasks.status, schema.tasks.position);
-      } else {
-        // Empty filter = all tasks
-        tasks = await db
-          .select()
-          .from(schema.tasks)
-          .orderBy(schema.tasks.status, schema.tasks.position);
+        projectFilter = inArray(schema.tasks.projectId, ids);
       }
     } else if (projectId) {
-      // Single project mode (backward compat)
-      tasks = await db
-        .select()
-        .from(schema.tasks)
-        .where(eq(schema.tasks.projectId, projectId))
-        .orderBy(schema.tasks.status, schema.tasks.position);
-    } else {
-      // No filter - return all tasks
-      tasks = await db
-        .select()
-        .from(schema.tasks)
-        .orderBy(schema.tasks.status, schema.tasks.position);
+      projectFilter = eq(schema.tasks.projectId, projectId);
     }
 
+    // Combine filters
+    const conditions = [projectFilter, statusFilter].filter(Boolean);
+    const whereClause = conditions.length > 0
+      ? conditions.length === 1 ? conditions[0] : and(...conditions)
+      : undefined;
+
+    const tasks = await db
+      .select()
+      .from(schema.tasks)
+      .where(whereClause)
+      .orderBy(schema.tasks.status, schema.tasks.position);
+
     return NextResponse.json(tasks);
   } catch (error) {
     console.error('Failed to fetch tasks:', error);

package/src/components/kanban/board.tsx

@@ -18,15 +18,24 @@ import {
 } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
 import { useTranslations } from 'next-intl';
-import { Plus, Trash2, ArrowDown } from 'lucide-react';
+import { Plus, Trash2, ArrowDown, Columns3 } from 'lucide-react';
 import { Task, TaskStatus, KANBAN_COLUMNS } from '@/types';
 import { Column } from './column';
 import { TaskCard } from './task-card';
 import { useTaskStore } from '@/stores/task-store';
+import { usePanelLayoutStore } from '@/stores/panel-layout-store';
 import { useTouchDetection } from '@/hooks/use-touch-detection';
 import { useIsMobileViewport } from '@/hooks/use-mobile-viewport';
 import { useChatHistorySearch } from '@/hooks/use-chat-history-search';
 import { cn } from '@/lib/utils';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
 
 /**
  * Custom collision detector for mobile status tabs.
@@ -153,6 +162,20 @@ export function Board({ attempts = [], onCreateTask, searchQuery = '' }: BoardPr
   const isMobile = useTouchDetection(); // Single global touch detection
   const isMobileViewport = useIsMobileViewport();
 
+  const { hiddenColumns, toggleColumn } = usePanelLayoutStore();
+
+  const visibleColumns = useMemo(
+    () => KANBAN_COLUMNS.filter(col => !hiddenColumns.includes(col.id)),
+    [hiddenColumns]
+  );
+
+  // If mobile active column is hidden, reset to first visible column
+  useEffect(() => {
+    if (visibleColumns.length > 0 && !visibleColumns.some(c => c.id === mobileActiveColumn)) {
+      setMobileActiveColumn(visibleColumns[0].id);
+    }
+  }, [visibleColumns, mobileActiveColumn]);
+
   // Search chat history for matches
   const { matches: chatHistoryMatches } = useChatHistorySearch(searchQuery);
 
@@ -420,7 +443,7 @@ export function Board({ attempts = [], onCreateTask, searchQuery = '' }: BoardPr
     touchStartRef.current = null;
     setIsDragging(false);
 
-    const columnIds = KANBAN_COLUMNS.map(c => c.id);
+    const columnIds = visibleColumns.map(c => c.id);
     const currentIndex = columnIds.indexOf(mobileActiveColumn);
     const threshold = window.innerWidth * 0.2; // 20% of screen width to trigger column change
 
@@ -470,7 +493,7 @@ export function Board({ attempts = [], onCreateTask, searchQuery = '' }: BoardPr
   // Mobile: single column view with tab bar
   if (isMobileViewport) {
     const activeColumnTasks = tasksByStatus.get(mobileActiveColumn) || [];
-    const columnIds = KANBAN_COLUMNS.map(c => c.id);
+    const columnIds = visibleColumns.map(c => c.id);
     const currentIndex = columnIds.indexOf(mobileActiveColumn);
 
     // Determine which adjacent column to show based on swipe direction
@@ -501,7 +524,7 @@ export function Board({ attempts = [], onCreateTask, searchQuery = '' }: BoardPr
           {/* Column tab bar */}
           <div className="flex-shrink-0 border-b overflow-x-auto">
             <div className="flex min-w-min">
-              {KANBAN_COLUMNS.map((column) => {
+              {visibleColumns.map((column) => {
                 const count = (tasksByStatus.get(column.id) || []).length;
                 const isActive = column.id === mobileActiveColumn;
                 const isOver = hoveredStatusTab === column.id;
@@ -673,20 +696,45 @@ export function Board({ attempts = [], onCreateTask, searchQuery = '' }: BoardPr
       onDragEnd={handleDragEnd}
       onDragCancel={handleDragCancel}
     >
-      <div className="flex gap-4 h-full overflow-x-auto pb-4 pl-4">
-        {KANBAN_COLUMNS.map((column) => (
-          <Column
-            key={column.id}
-            status={column.id}
-            title={t(column.titleKey)}
-            tasks={tasksByStatus.get(column.id) || []}
-            attemptCounts={attemptCounts}
-            onCreateTask={onCreateTask}
-            searchQuery={searchQuery}
-            isMobile={isMobile}
-            chatHistoryMatches={chatHistoryMatches}
-          />
-        ))}
+      <div className="flex flex-col h-full">
+        <div className="flex justify-end px-4 pt-2 pb-1">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="inline-flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground hover:text-foreground rounded-md hover:bg-accent transition-colors">
+                <Columns3 className="h-3.5 w-3.5" />
+                <span>{t('columns')}</span>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>{t('toggleColumns')}</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {KANBAN_COLUMNS.map((column) => (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  checked={!hiddenColumns.includes(column.id)}
+                  onCheckedChange={() => toggleColumn(column.id)}
+                >
+                  {t(column.titleKey)}
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="flex gap-4 flex-1 min-h-0 overflow-x-auto pb-4 pl-4">
+          {visibleColumns.map((column) => (
+            <Column
+              key={column.id}
+              status={column.id}
+              title={t(column.titleKey)}
+              tasks={tasksByStatus.get(column.id) || []}
+              attemptCounts={attemptCounts}
+              onCreateTask={onCreateTask}
+              searchQuery={searchQuery}
+              isMobile={isMobile}
+              chatHistoryMatches={chatHistoryMatches}
+            />
+          ))}
+        </div>
       </div>
 
       <DragOverlay>

package/src/components/task/task-detail-panel.tsx

@@ -44,7 +44,7 @@ const STATUSES: TaskStatus[] = ['todo', 'in_progress', 'in_review', 'done', 'can
 export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
   const t = useTranslations('chat');
   const tk = useTranslations('kanban');
-  const { selectedTask, setSelectedTask, updateTaskStatus, setTaskChatInit, pendingAutoStartTask, pendingAutoStartPrompt, pendingAutoStartFileIds, setPendingAutoStartTask, moveTaskToInProgress, renameTask } = useTaskStore();
+  const { selectedTask, setSelectedTask, updateTaskStatus, setTaskChatInit, pendingAutoStartTask, pendingAutoStartPrompt, pendingAutoStartFileIds, setPendingAutoStartTask, moveTaskToInProgress, renameTask, updateTaskDescription } = useTaskStore();
   const { activeProjectId, selectedProjectIds, projects } = useProjectStore();
   const { widths, setWidth: setPanelWidth } = usePanelLayoutStore();
   const { getPendingFiles, clearFiles } = useAttachmentStore();
@@ -60,10 +60,13 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
   const [showQuestionPrompt, setShowQuestionPrompt] = useState(false);
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [editTitleValue, setEditTitleValue] = useState('');
+  const [isEditingDescription, setIsEditingDescription] = useState(false);
+  const [editDescriptionValue, setEditDescriptionValue] = useState('');
 
   const panelRef = useRef<HTMLDivElement>(null);
   const promptInputRef = useRef<PromptInputRef>(null);
   const titleInputRef = useRef<HTMLInputElement>(null);
+  const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);
   const { shells } = useShellStore();
   const hasAutoStartedRef = useRef(false);
   const lastCompletedTaskRef = useRef<string | null>(null);
@@ -167,6 +170,8 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
     setShowQuestionPrompt(false);
     setIsEditingTitle(false);
     setEditTitleValue('');
+    setIsEditingDescription(false);
+    setEditDescriptionValue('');
     lastCompletedTaskRef.current = null;
     hasAutoStartedRef.current = false;
 
@@ -268,6 +273,30 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
     setEditTitleValue('');
   };
 
+  const handleStartEditDescription = () => {
+    setEditDescriptionValue(selectedTask.description || '');
+    setIsEditingDescription(true);
+    setTimeout(() => descriptionTextareaRef.current?.focus(), 0);
+  };
+
+  const handleSaveDescription = async () => {
+    const trimmed = editDescriptionValue.trim();
+    const newValue = trimmed || null;
+    if (newValue !== (selectedTask.description || null)) {
+      try {
+        await updateTaskDescription(selectedTask.id, newValue);
+      } catch {
+        // Store reverts on failure
+      }
+    }
+    setIsEditingDescription(false);
+  };
+
+  const handleCancelEditDescription = () => {
+    setIsEditingDescription(false);
+    setEditDescriptionValue('');
+  };
+
   const handlePromptSubmit = (prompt: string, displayPrompt?: string, fileIds?: string[]) => {
     if (selectedTask?.status !== 'in_progress') {
       moveTaskToInProgress(selectedTask.id);
@@ -493,6 +522,32 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
             {selectedTask.title}
           </h2>
         )}
+        {isEditingDescription ? (
+          <textarea
+            ref={descriptionTextareaRef}
+            value={editDescriptionValue}
+            onChange={(e) => setEditDescriptionValue(e.target.value)}
+            onBlur={handleSaveDescription}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                handleSaveDescription();
+              } else if (e.key === 'Escape') {
+                handleCancelEditDescription();
+              }
+            }}
+            rows={3}
+            className="mt-1 text-sm text-muted-foreground w-full bg-transparent border border-border rounded-md p-2 outline-none resize-y"
+            placeholder="Add description..."
+          />
+        ) : (
+          <p
+            className="mt-1 text-sm text-muted-foreground line-clamp-3 cursor-text min-h-[1.25rem]"
+            onClick={handleStartEditDescription}
+          >
+            {selectedTask.description || 'Add description...'}
+          </p>
+        )}
       </div>
 
       {renderContent()}

package/src/stores/panel-layout-store.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { TaskStatus } from '@/types';
 
 export interface PanelWidths {
   leftSidebar: number;
@@ -23,11 +24,13 @@ export const PANEL_CONFIGS: Record<keyof PanelWidths, PanelConfig> = {
 
 interface PanelLayoutState {
   widths: PanelWidths;
+  hiddenColumns: TaskStatus[];
 }
 
 interface PanelLayoutActions {
   setWidth: (panel: keyof PanelWidths, width: number) => void;
   resetWidths: () => void;
+  toggleColumn: (status: TaskStatus) => void;
 }
 
 type PanelLayoutStore = PanelLayoutState & PanelLayoutActions;
@@ -43,6 +46,7 @@ export const usePanelLayoutStore = create<PanelLayoutStore>()(
   persist(
     (set) => ({
       widths: getDefaultWidths(),
+      hiddenColumns: [] as TaskStatus[],
 
       setWidth: (panel, width) =>
         set((state) => {
@@ -57,10 +61,17 @@ export const usePanelLayoutStore = create<PanelLayoutStore>()(
         }),
 
       resetWidths: () => set({ widths: getDefaultWidths() }),
+
+      toggleColumn: (status) =>
+        set((state) => ({
+          hiddenColumns: state.hiddenColumns.includes(status)
+            ? state.hiddenColumns.filter((s) => s !== status)
+            : [...state.hiddenColumns, status],
+        })),
     }),
     {
       name: 'panel-layout-store',
-      partialize: (state) => ({ widths: state.widths }),
+      partialize: (state) => ({ widths: state.widths, hiddenColumns: state.hiddenColumns }),
     }
   )
 );

package/src/stores/task-store.ts

@@ -35,6 +35,7 @@ interface TaskStore {
   reorderTasks: (taskId: string, newStatus: TaskStatus, newPosition: number) => Promise<void>;
   updateTaskStatus: (taskId: string, status: TaskStatus) => Promise<void>;
   renameTask: (taskId: string, title: string) => Promise<void>;
+  updateTaskDescription: (taskId: string, description: string | null) => Promise<void>;
 }
 
 export const useTaskStore = create<TaskStore>((set, get) => ({
@@ -331,6 +332,39 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
     }
   },
 
+  updateTaskDescription: async (taskId: string, description: string | null) => {
+    const oldTasks = get().tasks;
+    const task = oldTasks.find((t) => t.id === taskId);
+    if (!task) return;
+
+    // Optimistic update
+    get().updateTask(taskId, { description });
+
+    // Update selectedTask if it's the same task
+    const selected = get().selectedTask;
+    if (selected?.id === taskId) {
+      set({ selectedTask: { ...selected, description } });
+    }
+
+    try {
+      const res = await fetch(`/api/tasks/${taskId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ description }),
+      });
+      if (!res.ok) throw new Error('Failed to update task description');
+    } catch (error) {
+      // Revert on failure
+      get().updateTask(taskId, { description: task.description });
+      const selected = get().selectedTask;
+      if (selected?.id === taskId) {
+        set({ selectedTask: { ...selected, description: task.description } });
+      }
+      log.error({ error, taskId }, 'Error updating task description');
+      throw error;
+    }
+  },
+
   setTaskChatInit: async (taskId: string, chatInit: boolean) => {
     // Optimistic update
     get().updateTask(taskId, { chatInit });