beads-ui 0.4.3 → 0.5.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;
@@ -497,6 +519,9 @@ button:disabled {
   vertical-align: middle;
   user-select: none;
   border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  text-wrap: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .badge + .badge,
 .status-badge + .status-badge,
@@ -964,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;
@@ -1324,20 +1366,20 @@ html[data-theme='dark'] {
   gap: 10px;
   padding: 8px 0;
   border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
-}
-.prop:first-of-type {
-  border-top: none;
-}
-.prop .label {
-  color: var(--muted);
-  font-size: 12px;
-  min-width: 80px;
-}
-.prop .value {
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  &:first-of-type {
+    border-top: none;
+  }
+  & .label {
+    color: var(--muted);
+    font-size: 12px;
+    min-width: 80px;
+  }
+  & .value {
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
 }
 
 /* --- Issue Details Dialog (UI-104) --- */
@@ -1437,16 +1479,100 @@ html[data-theme='dark'] {
   line-height: 1.2;
 }
 
-.prop.labels {
-  align-items: start;
+/* --- 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);
 }
-.prop.labels .value > div {
+.fatal-error {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 20px 20px;
 }
-.prop.labels .value > div input {
+.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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beads-ui",
-  "version": "0.4.3",
+  "version": "0.5.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/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;
   }