beads-enhanced-ui 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2025 Maximilian Antoni
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+<h1 align="center">
+  Beads UI
+</h1>
+<p align="center">
+  <b>Local UI for the <code>bd</code> CLI – <a href="https://github.com/steveyegge/beads">Beads</a></b><br>
+  Collaborate on issues with your coding agent.
+</p>
+<div align="center">
+  <a href="https://www.npmjs.com/package/beads-ui"><img src="https://img.shields.io/npm/v/beads-ui.svg" alt="npm Version"></a>
+  <a href="https://semver.org"><img src="https://img.shields.io/:semver-%E2%9C%93-blue.svg" alt="SemVer"></a>
+  <a href="https://github.com/mantoni/beads-ui/actions/worflows/ci.yml"><img src="https://github.com/mantoni/eslint_d.js/actions/workflows/ci.yml/badge.svg" alt="Build Status"></a>
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/eslint_d.svg" alt="MIT License"></a>
+  <br>
+  <br>
+</div>
+
+## Features
+
+- ✨ **Zero setup** – just run `bdui start`
+- 📺 **Live updates** – Monitors the beads database for changes
+- 🔎 **Issues view** – Filter and search issues, edit inline
+- ⛰️ **Epics view** – Show progress per epic, expand rows, edit inline
+- 🏂 **Board view** – Blocked / Ready / In progress / Closed columns
+- ⌨️ **Keyboard navigation** – Navigate and edit without touching the mouse
+- 🔀 **Multi-workspace** – Switch between projects via dropdown, auto-registers
+  workspaces
+
+## Setup
+
+```sh
+npm i beads-ui -g
+# In your project directory:
+bdui start --open
+```
+
+See `bdui --help` for options.
+
+## Screenshots
+
+**Issues**
+
+![Issues view](https://github.com/mantoni/beads-ui/raw/main/media/bdui-issues.png)
+
+**Epics**
+
+![Epics view](https://github.com/mantoni/beads-ui/raw/main/media/bdui-epics.png)
+
+**Board**
+
+![Board view](https://github.com/mantoni/beads-ui/raw/main/media/bdui-board.png)
+
+## Environment variables
+
+- `BD_BIN`: path to the `bd` binary.
+- `BDUI_RUNTIME_DIR`: override runtime directory for PID/logs. Defaults to
+  `$XDG_RUNTIME_DIR/beads-ui` or the system temp dir.
+- `HOST`: overrides the bind address (default `127.0.0.1`).
+- `PORT`: overrides the listen port (default `3000`).
+
+These can also be set via CLI options: `bdui start --host 0.0.0.0 --port 8080`
+
+## Platform notes
+
+- macOS/Linux are fully supported. On Windows, the CLI uses `cmd /c start` to
+  open URLs and relies on Node’s `process.kill` semantics for stopping the
+  daemon.
+
+## Developer Workflow
+
+- 🔨 Clone the repo and run `npm install`.
+- 🚀 Start the dev server with `npm start`.
+- 🔗 Alternatively, use `npm link` to link the package globally and run
+  `bdui start` from any project.
+
+## Coverage Commands
+
+- `npm run all` runs lint, typecheck, the full Vitest suite, and the stable
+  frontend coverage gate via `npm run test:coverage:app`.
+- `npm run test:coverage:app` measures browser-side `jsdom` coverage for
+  `app/**/*.js`.
+- `npm run test:coverage` runs full-suite coverage across all Vitest projects,
+  so it reflects repo-wide test health rather than only the frontend gate.
+
+## Debug Logging
+
+- The codebase uses the `debug` package with namespaces like `beads-ui:*`.
+- Enable logs in the browser by running in DevTools:
+  - `localStorage.debug = 'beads-ui:*'` then reload the page
+- Enable logs for Node/CLI (server, build scripts) by setting `DEBUG`:
+  - `DEBUG=beads-ui:* bdui start`
+  - `DEBUG=beads-ui:* node scripts/build-frontend.js`
+
+## License
+
+MIT

package/app/index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Beads</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header class="app-header">
+      <div class="header-left">
+        <h1 class="app-title">Beads</h1>
+        <div id="workspace-picker" class="header-workspace"></div>
+        <nav id="top-nav" class="header-nav" aria-label="Primary"></nav>
+      </div>
+      <div class="header-actions">
+        <div
+          id="header-loading"
+          class="header-loading"
+          role="status"
+          aria-live="polite"
+          aria-label="Loading"
+          hidden
+        >
+          <span class="header-loading__spinner" aria-hidden="true"></span>
+          <span class="visually-hidden">Loading</span>
+        </div>
+        <label class="theme-toggle" title="Toggle dark mode">
+          <span>Dark</span>
+          <input
+            id="theme-switch"
+            type="checkbox"
+            aria-label="Toggle dark mode"
+          />
+        </label>
+        <button
+          id="new-issue-btn"
+          type="button"
+          aria-haspopup="dialog"
+          title="Create a new issue (Ctrl/Cmd+N)"
+        >
+          New issue
+        </button>
+      </div>
+    </header>
+    <main id="app" class="app-shell" aria-live="polite"></main>
+    <script type="module" src="/main.bundle.js"></script>
+  </body>
+</html>