beads-ui 0.4.4 → 0.6.0

package/app/styles.css

@@ -196,6 +196,28 @@ a {
   align-items: center;
   gap: var(--space-5);
 }
+.header-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  color: var(--muted);
+}
+.header-loading__spinner {
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
+  border-top-color: var(--fg);
+  animation: header-spin 880ms linear infinite;
+}
+
+@keyframes header-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .theme-toggle {
   display: inline-flex;
   align-items: center;
@@ -967,6 +989,23 @@ input.inline-edit:focus {
   background: inherit;
   backdrop-filter: saturate(140%) blur(4px);
 }
+.board-column__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.board-column__title-text {
+  font-weight: inherit;
+}
+.board-column__count {
+  background: color-mix(in srgb, var(--panel-bg) 88%, var(--muted));
+  color: color-mix(in srgb, var(--muted) 82%, #000);
+  border-color: color-mix(in srgb, var(--muted) 28%, transparent);
+  min-width: 28px;
+  text-align: center;
+  letter-spacing: 0.02em;
+  font-variant-numeric: tabular-nums;
+}
 /* Small, unobtrusive select for closed filter */
 .board-closed-filter {
   margin: calc(var(--space-4) * -1) 0;
@@ -1440,6 +1479,102 @@ html[data-theme='dark'] {
   line-height: 1.2;
 }
 
+/* --- Fatal Error Dialog --- */
+#fatal-error-dialog {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--panel-bg) 82%, transparent),
+      var(--panel-bg)
+    ),
+    radial-gradient(
+      circle at 20% 0%,
+      color-mix(in srgb, #fca5a5 48%, transparent) 0%,
+      transparent 42%
+    );
+  color: var(--fg);
+  width: min(640px, 94vw);
+  max-height: 90vh;
+  margin: 4vh auto;
+  overflow: hidden;
+  box-shadow: 0 18px 48px -16px rgba(17, 24, 39, 0.35);
+}
+#fatal-error-dialog::backdrop {
+  background: color-mix(in srgb, #0f172a 55%, transparent);
+  backdrop-filter: blur(1px);
+}
+.fatal-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 20px 20px;
+}
+.fatal-error__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 20px;
+  color: #fff;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--type-bug-base) 78%, #000),
+    color-mix(in srgb, var(--type-bug-base) 58%, #111)
+  );
+  box-shadow: 0 10px 24px -12px rgba(159, 32, 17, 0.6);
+}
+.fatal-error__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.fatal-error__eyebrow {
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 11px;
+  color: color-mix(in srgb, var(--type-bug-base) 64%, #111);
+  font-weight: 700;
+}
+.fatal-error__title {
+  margin: 0;
+  font-size: 20px;
+  letter-spacing: 0.01em;
+}
+.fatal-error__message {
+  margin: 0;
+  color: color-mix(in srgb, var(--fg) 92%, #111);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.fatal-error__detail {
+  margin: 6px 0 0;
+  background: var(--pre-bg);
+  color: var(--pre-fg);
+  border-radius: 8px;
+  padding: 10px 12px;
+  max-height: 220px;
+  overflow: auto;
+  font-size: 12px;
+  border: 1px solid color-mix(in srgb, var(--pre-bg) 45%, #1f2937);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.fatal-error__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+
 /* Sidebar control aesthetics */
 #detail-root .props-card input[type='text'] {
   border: 1px solid var(--control-border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beads-ui",
-  "version": "0.4.4",
+  "version": "0.6.0",
   "description": "Local UI for Beads — Collaborate on issues with your coding agent.",
   "keywords": [
     "agent",
@@ -18,15 +18,15 @@
     "node": ">=22"
   },
   "scripts": {
-    "all": "npm run lint && npm run typecheck && npm test && npm run format:check",
+    "all": "npm run lint && npm run tsc && npm test && npm run prettier:check",
     "start": "node server/index.js --debug",
     "build": "node scripts/build-frontend.js",
     "test": "vitest run",
     "test:watch": "vitest",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "tsc": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint --ext .js .",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
+    "prettier:write": "prettier --write .",
+    "prettier:check": "prettier --check .",
     "preversion": "npm run all",
     "version": "changes --commits --footer",
     "postversion": "git push --follow-tags && npm publish",
@@ -36,29 +36,29 @@
   "dependencies": {
     "debug": "^4.4.3",
     "dompurify": "^3.3.0",
-    "express": "^5.1.0",
+    "express": "^5.2.1",
     "lit-html": "^3.3.1",
-    "marked": "^16.4.1",
+    "marked": "^17.0.1",
     "ws": "^8.18.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.38.0",
+    "@eslint/js": "^9.39.1",
     "@studio/changes": "^3.0.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "@types/debug": "^4.1.12",
-    "@types/express": "^5.0.3",
-    "@types/node": "^22.7.4",
+    "@types/express": "^5.0.6",
+    "@types/node": "^22.19.1",
     "@types/ws": "^8.18.1",
-    "esbuild": "^0.25.11",
-    "eslint": "^9.11.0",
+    "esbuild": "^0.27.1",
+    "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^61.1.9",
+    "eslint-plugin-jsdoc": "^61.4.1",
     "eslint-plugin-n": "^17.9.0",
-    "globals": "^16.4.0",
-    "jsdom": "^27.0.1",
-    "prettier": "^3.3.3",
+    "globals": "^16.5.0",
+    "jsdom": "^27.2.0",
+    "prettier": "^3.7.4",
     "typescript": "^5.6.3",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.15"
   },
   "files": [
     "app/index.html",

package/server/cli/commands.js

@@ -14,11 +14,9 @@ import { openUrl, waitForServer } from './open.js';
  * - Spawns a detached server process, writes PID file, returns 0.
  * - If already running (PID file present and process alive), prints URL and returns 0.
  *
+ * @param {{ open?: boolean, is_debug?: boolean, host?: string, port?: number }} [options]
  * @returns {Promise<number>} Exit code (0 on success)
  */
-/**
- * @param {{ open?: boolean, is_debug?: boolean }} [options]
- */
 export async function handleStart(options) {
   // Default: do not open a browser unless explicitly requested via `open: true`.
   const should_open = options?.open === true;
@@ -32,7 +30,19 @@ export async function handleStart(options) {
     removePidFile();
   }
 
-  const started = startDaemon({ is_debug: options?.is_debug });
+  // Set env vars in current process so getConfig() reflects the overrides
+  if (options?.host) {
+    process.env.HOST = options.host;
+  }
+  if (options?.port) {
+    process.env.PORT = String(options.port);
+  }
+
+  const started = startDaemon({
+    is_debug: options?.is_debug,
+    host: options?.host,
+    port: options?.port
+  });
   if (started && started.pid > 0) {
     printServerUrl();
     // Auto-open the browser once for a fresh daemon start

package/server/cli/daemon.js

@@ -140,7 +140,7 @@ export function getServerEntryPath() {
  * Spawn the server as a detached daemon, redirecting stdio to the log file.
  * Writes the PID file upon success.
  *
- * @param {{ is_debug?: boolean }} [options]
+ * @param {{ is_debug?: boolean, host?: string, port?: number }} [options]
  * @returns {{ pid: number } | null} Returns child PID on success; null on failure.
  */
 export function startDaemon(options = {}) {
@@ -160,10 +160,19 @@ export function startDaemon(options = {}) {
     log_fd = -1;
   }
 
+  /** @type {Record<string, string | undefined>} */
+  const spawn_env = { ...process.env };
+  if (options.host) {
+    spawn_env.HOST = options.host;
+  }
+  if (options.port) {
+    spawn_env.PORT = String(options.port);
+  }
+
   /** @type {SpawnOptions} */
   const opts = {
     detached: true,
-    env: { ...process.env },
+    env: spawn_env,
     stdio: log_fd >= 0 ? ['ignore', log_fd, log_fd] : 'ignore',
     windowsHide: true
   };

package/server/cli/index.js

@@ -3,18 +3,21 @@ import { handleRestart, handleStart, handleStop } from './commands.js';
 import { printUsage } from './usage.js';
 
 /**
- * Parse argv into a command token and flags.
+ * Parse argv into a command token, flags, and options.
  *
  * @param {string[]} args
- * @returns {{ command: string | null, flags: string[] }}
+ * @returns {{ command: string | null, flags: string[], options: { host?: string, port?: number } }}
  */
 export function parseArgs(args) {
   /** @type {string[]} */
   const flags = [];
   /** @type {string | null} */
   let command = null;
+  /** @type {{ host?: string, port?: number }} */
+  const options = {};
 
-  for (const token of args) {
+  for (let i = 0; i < args.length; i++) {
+    const token = args[i];
     if (token === '--help' || token === '-h') {
       flags.push('help');
       continue;
@@ -27,6 +30,17 @@ export function parseArgs(args) {
       flags.push('open');
       continue;
     }
+    if (token === '--host' && i + 1 < args.length) {
+      options.host = args[++i];
+      continue;
+    }
+    if (token === '--port' && i + 1 < args.length) {
+      const port_value = Number.parseInt(args[++i], 10);
+      if (Number.isFinite(port_value) && port_value > 0) {
+        options.port = port_value;
+      }
+      continue;
+    }
     if (
       !command &&
       (token === 'start' || token === 'stop' || token === 'restart')
@@ -37,7 +51,7 @@ export function parseArgs(args) {
     // Ignore unrecognized tokens for now; future flags may be parsed here.
   }
 
-  return { command, flags };
+  return { command, flags, options };
 }
 
 /**
@@ -48,7 +62,7 @@ export function parseArgs(args) {
  * @returns {Promise<number>}
  */
 export async function main(args) {
-  const { command, flags } = parseArgs(args);
+  const { command, flags, options } = parseArgs(args);
 
   const is_debug = flags.includes('debug');
   if (is_debug) {
@@ -68,21 +82,25 @@ export async function main(args) {
     /**
      * Default behavior: do NOT open a browser. `--open` explicitly opens.
      */
-    const options = {
+    const start_options = {
       open: flags.includes('open'),
-      is_debug: is_debug || Boolean(process.env.DEBUG)
+      is_debug: is_debug || Boolean(process.env.DEBUG),
+      host: options.host,
+      port: options.port
     };
-    return await handleStart(options);
+    return await handleStart(start_options);
   }
   if (command === 'stop') {
     return await handleStop();
   }
   if (command === 'restart') {
-    const options = {
+    const restart_options = {
       open: flags.includes('open'),
-      is_debug: is_debug || Boolean(process.env.DEBUG)
+      is_debug: is_debug || Boolean(process.env.DEBUG),
+      host: options.host,
+      port: options.port
     };
-    return await handleRestart(options);
+    return await handleRestart(restart_options);
   }
 
   // Unknown command path (should not happen due to parseArgs guard)

package/server/cli/usage.js

@@ -13,9 +13,11 @@ export function printUsage(out_stream) {
     '  restart     Restart the UI server',
     '',
     'Options:',
-    '  -h, --help    Show this help message',
-    '  -d, --debug   Enable debug logging',
-    '      --open    Open the browser after start/restart',
+    '  -h, --help        Show this help message',
+    '  -d, --debug       Enable debug logging',
+    '      --open        Open the browser after start/restart',
+    '      --host <addr> Bind to a specific host (default: 127.0.0.1)',
+    '      --port <num>  Bind to a specific port (default: 3000)',
     ''
   ];
   for (const line of lines) {

package/server/config.js

@@ -23,7 +23,8 @@ export function getConfig() {
     port_value = 3000;
   }
 
-  const host_value = '127.0.0.1';
+  const host_env = process.env.HOST;
+  const host_value = host_env && host_env.length > 0 ? host_env : '127.0.0.1';
 
   return {
     host: host_value,

package/server/index.js

@@ -10,6 +10,16 @@ if (process.argv.includes('--debug') || process.argv.includes('-d')) {
   enableAllDebug();
 }
 
+// Parse --host and --port from argv and set env vars before getConfig()
+for (let i = 0; i < process.argv.length; i++) {
+  if (process.argv[i] === '--host' && process.argv[i + 1]) {
+    process.env.HOST = process.argv[++i];
+  }
+  if (process.argv[i] === '--port' && process.argv[i + 1]) {
+    process.env.PORT = process.argv[++i];
+  }
+}
+
 const config = getConfig();
 const app = createApp(config);
 const server = createServer(app);

package/server/ws.js

@@ -534,7 +534,8 @@ export async function handleMessage(ws, data) {
 
   // subscribe-list: payload { id: string, type: string, params?: object }
   if (req.type === 'subscribe-list') {
-    log('subscribe-list %s', /** @type {any} */ (req.payload)?.id || '');
+    const payload_id = /** @type {any} */ (req.payload)?.id || '';
+    log('subscribe-list %s', payload_id);
     const validation = validateSubscribeListPayload(
       /** @type {any} */ (req.payload || {})
     );
@@ -546,31 +547,70 @@ export async function handleMessage(ws, data) {
     }
     const client_id = validation.id;
     const spec = validation.spec;
+    const key = keyOf(spec);
+
+    /**
+     * Reply with an error and avoid attaching the subscription when
+     * initialization fails.
+     *
+     * @param {string} code
+     * @param {string} message
+     * @param {Record<string, unknown>|undefined} details
+     */
+    const replyWithError = (code, message, details = undefined) => {
+      ws.send(JSON.stringify(makeError(req, code, message, details)));
+    };
+
+    /** @type {Awaited<ReturnType<typeof fetchListForSubscription>> | null} */
+    let initial = null;
+    try {
+      initial = await fetchListForSubscription(spec);
+    } catch (err) {
+      log('subscribe-list snapshot error for %s: %o', key, err);
+      const message =
+        (err && /** @type {any} */ (err).message) || 'Failed to load list';
+      replyWithError('bd_error', String(message), { key });
+      return;
+    }
+
+    if (!initial.ok) {
+      log(
+        'initial snapshot failed for %s: %s %o',
+        key,
+        initial.error.message,
+        initial.error
+      );
+      const details = { ...(initial.error.details || {}), key };
+      replyWithError(initial.error.code, initial.error.message, details);
+      return;
+    }
+
     const s = ensureSubs(ws);
-    // Attach to registry
-    const { key } = registry.attach(spec, ws);
-    s.list_subs?.set(client_id, { key, spec });
-    // Send an initial snapshot for this client id only and store items
+    const { key: attached_key } = registry.attach(spec, ws);
+    s.list_subs?.set(client_id, { key: attached_key, spec });
+
     try {
-      await registry.withKeyLock(key, async () => {
-        const res = await fetchListForSubscription(spec);
-        if (!res.ok) {
-          log(
-            'initial snapshot failed for %s: %s %o',
-            key,
-            res.error.message,
-            res.error
-          );
-          return;
-        }
-        const items = applyClosedIssuesFilter(spec, res.items);
-        void registry.applyItems(key, items);
-        emitSubscriptionSnapshot(ws, client_id, key, items);
+      await registry.withKeyLock(attached_key, async () => {
+        const items = applyClosedIssuesFilter(
+          spec,
+          initial ? initial.items : []
+        );
+        void registry.applyItems(attached_key, items);
+        emitSubscriptionSnapshot(ws, client_id, attached_key, items);
       });
     } catch (err) {
-      log('subscribe-list snapshot error for %s: %o', key, err);
+      log('subscribe-list snapshot error for %s: %o', attached_key, err);
+      s.list_subs?.delete(client_id);
+      try {
+        registry.detach(spec, ws);
+      } catch {
+        // ignore detach errors
+      }
+      replyWithError('bd_error', 'Failed to publish snapshot', { key });
+      return;
     }
-    ws.send(JSON.stringify(makeOk(req, { id: client_id, key })));
+
+    ws.send(JSON.stringify(makeOk(req, { id: client_id, key: attached_key })));
     return;
   }