@citadel-labs/beads-ui 2.4.0 → 2.5.0

package/README.md

@@ -5,12 +5,15 @@ A minimal kanban dashboard and git log viewer for [Beads](https://github.com/ste
 ## Features
 
 - **Kanban board** — Issues organized by status: Ready, In Progress, Blocked, Done
-- **Git log** — Scrollable commit history with branch selector
-- **Bead ID linking** — Bead IDs in commit messages are highlighted as badges
+- **Git log** — Scrollable commit history with branch selector and diff viewer
+- **File explorer** — Browse project files with syntax-highlighted file viewer (40+ languages via Shiki)
+- **Dependency graph** — Interactive DAG visualization with hover highlighting, zoom, and pan
+- **Bead ID linking** — Bead IDs in commit messages are highlighted as clickable badges
+- **Search and filtering** — Filter issues by priority, type, assignee, or free-text search
 - **Dark/light theme** — Toggle between themes, dark by default
 - **Auto-refresh** — Polls for updates every 5 seconds
 - **Integrated terminal** — Built-in terminal panel powered by node-pty and xterm.js
-- **Minimal runtime dependencies** — Server uses Node.js stdlib plus `node-pty` and `ws` for the terminal
+- **Settings** — Configurable terminal font-family via settings modal
 
 ## Quick Start
 

package/bin/beads-board.js

@@ -1,183 +1,173 @@
-#!/usr/bin/env node
-
-const path = require('node:path');
-const fs = require('node:fs');
-const { spawn } = require('node:child_process');
-
-const SERVER_SCRIPT = path.join(__dirname, '..', 'server', 'index.js');
-
-// ---------------------------------------------------------------------------
-// Argument parsing
-// ---------------------------------------------------------------------------
-
-const rawArgs = process.argv.slice(2);
-
-// Extract subcommand (start, stop, status) — default to "start"
-const SUBCOMMANDS = ['start', 'stop', 'status'];
-let subcommand = 'start';
-const args = [];
-for (const arg of rawArgs) {
-  if (SUBCOMMANDS.includes(arg) && args.length === 0 && subcommand === 'start') {
-    subcommand = arg;
-  } else {
-    args.push(arg);
-  }
-}
-
-// --help
-if (args.includes('--help') || args.includes('-h')) {
-  console.log(`bdui — Kanban dashboard and git log viewer for Beads
-
-Usage:
-  bdui [project-dir] [options]        Start the dashboard (default)
-  bdui start [project-dir] [options]  Start the dashboard
-  bdui stop [project-dir]             Stop a running dashboard
-  bdui status [project-dir]           Show running dashboard info
-
-Options:
-  --port <port>     Port to listen on (default: 8377)
-  --foreground      Run in foreground (don't daemonize)
-  --help, -h        Show this help message
-  --version, -v     Show version number
-
-Examples:
-  bdui                     # Start dashboard for current directory
-  bdui /path/to/project    # Specify project directory
-  bdui --port 9000         # Custom port
-  bdui stop                # Stop the running dashboard
-  bdui status              # Check if dashboard is running`);
-  process.exit(0);
-}
-
-// --version
-if (args.includes('--version') || args.includes('-v')) {
-  const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
-  console.log(pkg.version);
-  process.exit(0);
-}
-
-// --foreground
-const foreground = args.includes('--foreground');
-const filteredArgs = args.filter(a => a !== '--foreground');
-
-// --port
-let customPort = null;
-const portIdx = filteredArgs.indexOf('--port');
-if (portIdx !== -1) {
-  customPort = filteredArgs[portIdx + 1];
-  if (!customPort || isNaN(parseInt(customPort, 10))) {
-    console.error('Error: --port requires a numeric value');
-    process.exit(1);
-  }
-  filteredArgs.splice(portIdx, 2);
-}
-
-// Remaining arg is the project directory
-const projectDir = filteredArgs[0] ? path.resolve(filteredArgs[0]) : process.cwd();
-
-// ---------------------------------------------------------------------------
-// Validation
-// ---------------------------------------------------------------------------
-
-if (!fs.existsSync(projectDir)) {
-  console.error(`Error: directory not found: ${projectDir}`);
-  process.exit(1);
-}
-
-if (!fs.existsSync(path.join(projectDir, '.beads'))) {
-  console.error(`Error: no .beads/ directory found in ${projectDir}`);
-  console.error('This project does not appear to use Beads issue tracking.');
-  console.error('See https://github.com/steveyegge/beads to get started.');
-  process.exit(1);
-}
-
-// ---------------------------------------------------------------------------
-// Pidfile helpers
-// ---------------------------------------------------------------------------
-
-const PIDFILE = path.join(projectDir, '.beads-board.pid');
-
-function getRunningInstance() {
-  try {
-    const data = JSON.parse(fs.readFileSync(PIDFILE, 'utf8'));
-    process.kill(data.pid, 0); // throws if not running
-    return data;
-  } catch {
-    // Clean up stale pidfile
-    try { fs.unlinkSync(PIDFILE); } catch {}
-    return null;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Subcommands
-// ---------------------------------------------------------------------------
-
-if (subcommand === 'status') {
-  const instance = getRunningInstance();
-  if (instance) {
-    console.log(`beads-board running at http://localhost:${instance.port} (pid ${instance.pid})`);
-  } else {
-    console.log('beads-board is not running');
-    process.exit(1);
-  }
-  process.exit(0);
-}
-
-if (subcommand === 'stop') {
-  const instance = getRunningInstance();
-  if (!instance) {
-    console.log('beads-board is not running');
-    process.exit(0);
-  }
-  try {
-    process.kill(instance.pid, 'SIGTERM');
-    console.log(`beads-board stopped (was http://localhost:${instance.port}, pid ${instance.pid})`);
-  } catch (err) {
-    console.error(`Failed to stop beads-board (pid ${instance.pid}): ${err.message}`);
-    process.exit(1);
-  }
-  process.exit(0);
-}
-
-// subcommand === 'start'
-const existing = getRunningInstance();
-if (existing) {
-  console.log(`beads-board already running at http://localhost:${existing.port} (pid ${existing.pid})`);
-  process.exit(0);
-}
-
-if (foreground) {
-  // Run server in foreground (debugging)
-  if (customPort) process.env.PORT = customPort;
-  process.argv = [process.argv[0], __filename, projectDir];
-  require(SERVER_SCRIPT);
-} else {
-  // Spawn detached server process
-  const env = { ...process.env };
-  if (customPort) env.PORT = customPort;
-
-  const child = spawn(process.execPath, [SERVER_SCRIPT, projectDir], {
-    detached: true,
-    stdio: 'ignore',
-    env,
-    windowsHide: true,
-  });
-  child.unref();
-
-  // Wait for pidfile to confirm startup (poll up to 3s)
-  const start = Date.now();
-  const poll = setInterval(() => {
-    const instance = getRunningInstance();
-    if (instance) {
-      clearInterval(poll);
-      console.log(`beads-board running at http://localhost:${instance.port}`);
-      process.exit(0);
-    }
-    if (Date.now() - start > 3000) {
-      clearInterval(poll);
-      console.error('Error: server failed to start within 3 seconds');
-      process.exit(1);
-    }
-  }, 100);
-}
+#!/usr/bin/env node
+
+const path = require('node:path');
+const fs = require('node:fs');
+const { spawn } = require('node:child_process');
+
+const SERVER_SCRIPT = path.join(__dirname, '..', 'server', 'index.js');
+
+// ---------------------------------------------------------------------------
+// Argument parsing
+// ---------------------------------------------------------------------------
+
+const rawArgs = process.argv.slice(2);
+
+// Extract subcommand (start, stop, status) — default to "start"
+const SUBCOMMANDS = ['start', 'stop', 'status'];
+let subcommand = 'start';
+const args = [];
+for (const arg of rawArgs) {
+  if (SUBCOMMANDS.includes(arg) && args.length === 0 && subcommand === 'start') {
+    subcommand = arg;
+  } else {
+    args.push(arg);
+  }
+}
+
+// --help
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`bdui — Kanban dashboard and git log viewer for Beads
+
+Usage:
+  bdui [project-dir] [options]        Start the dashboard (default)
+  bdui start [project-dir] [options]  Start the dashboard
+  bdui stop [project-dir]             Stop a running dashboard
+  bdui status [project-dir]           Show running dashboard info
+
+Options:
+  --port <port>     Port to listen on (default: 8377)
+  --foreground      Run in foreground (don't daemonize)
+  --help, -h        Show this help message
+  --version, -v     Show version number
+
+Examples:
+  bdui                     # Start dashboard for current directory
+  bdui /path/to/project    # Specify project directory
+  bdui --port 9000         # Custom port
+  bdui stop                # Stop the running dashboard
+  bdui status              # Check if dashboard is running`);
+  process.exit(0);
+}
+
+// --version
+if (args.includes('--version') || args.includes('-v')) {
+  const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
+  console.log(pkg.version);
+  process.exit(0);
+}
+
+// --foreground
+const foreground = args.includes('--foreground');
+const filteredArgs = args.filter(a => a !== '--foreground');
+
+// --port
+let customPort = null;
+const portIdx = filteredArgs.indexOf('--port');
+if (portIdx !== -1) {
+  customPort = filteredArgs[portIdx + 1];
+  if (!customPort || isNaN(parseInt(customPort, 10))) {
+    console.error('Error: --port requires a numeric value');
+    process.exit(1);
+  }
+  filteredArgs.splice(portIdx, 2);
+}
+
+// Remaining arg is the project directory
+const projectDir = filteredArgs[0] ? path.resolve(filteredArgs[0]) : process.cwd();
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+
+if (!fs.existsSync(projectDir)) {
+  console.error(`Error: directory not found: ${projectDir}`);
+  process.exit(1);
+}
+
+if (!fs.existsSync(path.join(projectDir, '.beads'))) {
+  console.error(`Error: no .beads/ directory found in ${projectDir}`);
+  console.error('This project does not appear to use Beads issue tracking.');
+  console.error('See https://github.com/steveyegge/beads to get started.');
+  process.exit(1);
+}
+
+// ---------------------------------------------------------------------------
+// Pidfile helpers (shared module)
+// ---------------------------------------------------------------------------
+
+const { createPidfileManager } = require('../server/pidfile.js');
+const pidfile = createPidfileManager(projectDir);
+function getRunningInstance() { return pidfile.getRunningInstance(); }
+
+// ---------------------------------------------------------------------------
+// Subcommands
+// ---------------------------------------------------------------------------
+
+if (subcommand === 'status') {
+  const instance = getRunningInstance();
+  if (instance) {
+    console.log(`beads-board running at http://localhost:${instance.port} (pid ${instance.pid})`);
+  } else {
+    console.log('beads-board is not running');
+    process.exit(1);
+  }
+  process.exit(0);
+}
+
+if (subcommand === 'stop') {
+  const instance = getRunningInstance();
+  if (!instance) {
+    console.log('beads-board is not running');
+    process.exit(0);
+  }
+  try {
+    process.kill(instance.pid, 'SIGTERM');
+    console.log(`beads-board stopped (was http://localhost:${instance.port}, pid ${instance.pid})`);
+  } catch (err) {
+    console.error(`Failed to stop beads-board (pid ${instance.pid}): ${err.message}`);
+    process.exit(1);
+  }
+  process.exit(0);
+}
+
+// subcommand === 'start'
+const existing = getRunningInstance();
+if (existing) {
+  console.log(`beads-board already running at http://localhost:${existing.port} (pid ${existing.pid})`);
+  process.exit(0);
+}
+
+if (foreground) {
+  // Run server in foreground (debugging)
+  if (customPort) process.env.PORT = customPort;
+  process.argv = [process.argv[0], __filename, projectDir];
+  require(SERVER_SCRIPT);
+} else {
+  // Spawn detached server process
+  const env = { ...process.env };
+  if (customPort) env.PORT = customPort;
+
+  const child = spawn(process.execPath, [SERVER_SCRIPT, projectDir], {
+    detached: true,
+    stdio: 'ignore',
+    env,
+    windowsHide: true,
+  });
+  child.unref();
+
+  // Wait for pidfile to confirm startup (poll up to 3s)
+  const start = Date.now();
+  const poll = setInterval(() => {
+    const instance = getRunningInstance();
+    if (instance) {
+      clearInterval(poll);
+      console.log(`beads-board running at http://localhost:${instance.port}`);
+      process.exit(0);
+    }
+    if (Date.now() - start > 3000) {
+      clearInterval(poll);
+      console.error('Error: server failed to start within 3 seconds');
+      process.exit(1);
+    }
+  }, 100);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citadel-labs/beads-ui",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Kanban dashboard and git log viewer for Beads",
   "bin": {
     "bdui": "bin/beads-board.js"
@@ -33,7 +33,7 @@
   "author": "Stuart Rimel <stuart.rimel@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "node-pty": "^1.1.0",
+    "node-pty": "1.2.0-beta.12",
     "ws": "^8.19.0"
   },
   "devDependencies": {

package/server/__tests__/api.test.js

@@ -55,6 +55,18 @@ async function get(urlPath) {
   return { status: r.status, data, text };
 }
 
+async function patch(urlPath, body) {
+  const r = await fetch(`${baseUrl}${urlPath}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  const text = await r.text();
+  let data = null;
+  try { data = JSON.parse(text); } catch {}
+  return { status: r.status, data, text };
+}
+
 describe('API endpoints', () => {
   it('GET /api/issues returns JSON array', async () => {
     mockExecFile((cmd, args) => {
@@ -251,11 +263,238 @@ describe('GET /api/files', () => {
     expect(res.data).toHaveProperty('language', 'javascript');
   });
 
-  it('excludes hidden files and common ignored directories', async () => {
+  it('excludes only .git but shows dotfiles, node_modules, and coverage', async () => {
     const res = await get('/api/files');
     expect(res.status).toBe(200);
     const names = res.data.map(e => e.name);
     expect(names).not.toContain('.git');
-    expect(names).not.toContain('node_modules');
+    // Dotfiles, node_modules, coverage should all be visible
+    expect(names).toContain('.gitignore');
+    expect(names).toContain('node_modules');
+  });
+});
+
+describe('Branch-aware endpoints', () => {
+  describe('GET /api/git-status', () => {
+    it('without branch param calls git status --porcelain', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git') {
+          expect(args[0]).toBe('status');
+          expect(args).toContain('--porcelain');
+          return 'M  README.md\n';
+        }
+        return '';
+      });
+      const res = await get('/api/git-status');
+      expect(res.status).toBe(200);
+      expect(res.data[0]).toHaveProperty('path', 'README.md');
+    });
+
+    it('with branch param calls git diff --name-status <branch>', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git') {
+          expect(args[0]).toBe('diff');
+          expect(args).toContain('--name-status');
+          expect(args).toContain('feature-branch');
+          return 'M\tREADME.md\nA\tnew-file.js\n';
+        }
+        return '';
+      });
+      const res = await get('/api/git-status?branch=feature-branch');
+      expect(res.status).toBe(200);
+      expect(Array.isArray(res.data)).toBe(true);
+      expect(res.data[0]).toHaveProperty('status', 'M');
+      expect(res.data[0]).toHaveProperty('path', 'README.md');
+      expect(res.data[1]).toHaveProperty('status', 'A');
+      expect(res.data[1]).toHaveProperty('path', 'new-file.js');
+    });
+
+    it('with branch param rejects invalid branch names', async () => {
+      const res = await get('/api/git-status?branch=bad;branch');
+      expect(res.status).toBe(400);
+      expect(res.data).toHaveProperty('error', 'Invalid branch name');
+    });
+  });
+
+  describe('GET /api/git-diff', () => {
+    it('without branch param calls git diff HEAD -- <file>', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git' && args.includes('diff')) {
+          expect(args).toContain('HEAD');
+          expect(args).toContain('README.md');
+          return '--- a/README.md\n+++ b/README.md\n@@ -1 +1 @@\n-old\n+new';
+        }
+        return '';
+      });
+      const res = await get('/api/git-diff?file=README.md');
+      expect(res.status).toBe(200);
+      expect(res.data).toHaveProperty('file', 'README.md');
+    });
+
+    it('with branch param calls git diff <branch> -- <file>', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git' && args.includes('diff')) {
+          expect(args).toContain('feature-branch');
+          expect(args).toContain('--');
+          expect(args).toContain('server.js');
+          return '--- a/server.js\n+++ b/server.js\n@@ -1 +1 @@\n-old\n+new';
+        }
+        return '';
+      });
+      const res = await get('/api/git-diff?file=server.js&branch=feature-branch');
+      expect(res.status).toBe(200);
+      expect(res.data).toHaveProperty('file', 'server.js');
+      expect(res.data).toHaveProperty('diff');
+    });
+
+    it('with branch param rejects invalid branch names', async () => {
+      const res = await get('/api/git-diff?file=README.md&branch=bad;branch');
+      expect(res.status).toBe(400);
+      expect(res.data).toHaveProperty('error', 'Invalid branch name');
+    });
+  });
+
+  describe('GET /api/files with branch param', () => {
+    it('with branch param calls git ls-tree (single call)', async () => {
+      let lsTreeCalls = 0;
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git') {
+          expect(args[0]).toBe('ls-tree');
+          expect(args).not.toContain('--name-only');
+          expect(args).toContain('feature-branch');
+          lsTreeCalls++;
+          return '100644 blob abcdef1234567890\tREADME.md\n100644 blob abcdef1234567891\tpackage.json\n040000 tree abcdef1234567892\tsrc\n';
+        }
+        return '';
+      });
+      const res = await get('/api/files?branch=feature-branch');
+      expect(res.status).toBe(200);
+      expect(lsTreeCalls).toBe(1);
+      expect(Array.isArray(res.data)).toBe(true);
+      expect(res.data.length).toBe(3);
+      const srcEntry = res.data.find(e => e.name === 'src');
+      expect(srcEntry).toHaveProperty('type', 'directory');
+      const readmeEntry = res.data.find(e => e.name === 'README.md');
+      expect(readmeEntry).toHaveProperty('type', 'file');
+    });
+
+    it('with branch param filters ignored directories', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git') {
+          return '040000 tree aaa\tnode_modules\n040000 tree bbb\t.git\n040000 tree ccc\tsrc\n100644 blob ddd\tREADME.md\n100644 blob eee\t.env\n';
+        }
+        return '';
+      });
+      const res = await get('/api/files?branch=feature-branch');
+      expect(res.status).toBe(200);
+      const names = res.data.map(e => e.name);
+      expect(names).toContain('src');
+      expect(names).toContain('README.md');
+      expect(names).toContain('node_modules');
+      expect(names).not.toContain('.git');
+      expect(names).toContain('.env');
+    });
+
+    it('with branch param and path lists subdirectory via git ls-tree', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git') {
+          expect(args[0]).toBe('ls-tree');
+          expect(args).toContain('feature-branch:server');
+          return '100644 blob abcdef1234567890\tindex.js\n100644 blob abcdef1234567891\thandlers.js\n';
+        }
+        return '';
+      });
+      const res = await get('/api/files?path=server&branch=feature-branch');
+      expect(res.status).toBe(200);
+      expect(Array.isArray(res.data)).toBe(true);
+      expect(res.data.length).toBe(2);
+    });
+
+    it('with branch param rejects invalid branch names', async () => {
+      const res = await get('/api/files?branch=bad;branch');
+      expect(res.status).toBe(400);
+      expect(res.data).toHaveProperty('error', 'Invalid branch name');
+    });
+
+    it('with branch param shows everything except .git', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git') {
+          return '040000 tree aaa\tnode_modules\n040000 tree bbb\t.git\n040000 tree ccc\tsrc\n100644 blob ddd\tREADME.md\n100644 blob eee\t.env\n100644 blob fff\t.eslintrc\n040000 tree abc\tcoverage\n';
+        }
+        return '';
+      });
+      const res = await get('/api/files?branch=feature-branch');
+      expect(res.status).toBe(200);
+      const names = res.data.map(e => e.name);
+      expect(names).toContain('src');
+      expect(names).toContain('README.md');
+      expect(names).toContain('.env');
+      expect(names).toContain('.eslintrc');
+      expect(names).toContain('node_modules');
+      expect(names).toContain('coverage');
+      expect(names).not.toContain('.git');
+    });
+  });
+
+  describe('PATCH /api/issue/:id', () => {
+    it('updates description via bd update', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'bd') {
+          expect(args[0]).toBe('update');
+          expect(args[1]).toBe('beads-board-abc');
+          expect(args).toContain('--description');
+          expect(args).toContain('New description text');
+          return '';
+        }
+        return '';
+      });
+      const res = await patch('/api/issue/beads-board-abc', { description: 'New description text' });
+      expect(res.status).toBe(200);
+      expect(res.data).toHaveProperty('ok', true);
+    });
+
+    it('returns 400 for invalid issue ID', async () => {
+      const res = await patch('/api/issue/invalid;id', { description: 'test' });
+      expect(res.status).toBe(400);
+      expect(res.data).toHaveProperty('error', 'Invalid issue ID');
+    });
+
+    it('returns 400 when description field is missing', async () => {
+      const res = await patch('/api/issue/beads-board-abc', {});
+      expect(res.status).toBe(400);
+      expect(res.data).toHaveProperty('error');
+    });
+
+    it('returns 500 when bd update fails', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'bd') throw new Error('bd update failed: issue not found');
+        return '';
+      });
+      const res = await patch('/api/issue/beads-board-abc', { description: 'test' });
+      expect(res.status).toBe(500);
+    });
+  });
+
+  describe('GET /api/file-content', () => {
+    it('with branch param calls git show <branch>:<path>', async () => {
+      mockExecFile((cmd, args) => {
+        if (cmd === 'git') {
+          expect(args[0]).toBe('show');
+          expect(args[1]).toBe('feature-branch:src/index.ts');
+          return 'console.log("hello")';
+        }
+        return '';
+      });
+      const res = await get('/api/file-content?path=src/index.ts&branch=feature-branch');
+      expect(res.status).toBe(200);
+      expect(res.data).toHaveProperty('content', 'console.log("hello")');
+      expect(res.data).toHaveProperty('language', 'typescript');
+    });
+
+    it('with branch param rejects invalid branch names', async () => {
+      const res = await get('/api/file-content?path=README.md&branch=bad;branch');
+      expect(res.status).toBe(400);
+      expect(res.data).toHaveProperty('error', 'Invalid branch name');
+    });
   });
 });