Files
beads/examples/monitor-webui/web/index.html
Markus Flür e7f532db93 Implementing an RPC monitoring solution with a web-ui as implementation example. (#244)
* bd sync: 2025-10-30 12:12:27

* Working on frontend

* bd sync: 2025-11-06 16:55:55

* feat: finish bd monitor human viewer

* Merge conflicts resolved and added tests

* bd sync: 2025-11-06 17:23:41

* bd sync: 2025-11-06 17:34:52

* feat: Add reload button and multiselect status filter to monitor

- Changed status filter from single select to multiselect with 'Open' selected by default
- Added reload button with visual feedback (hover/active states)
- Updated filterIssues() to handle multiple selected statuses
- Added reloadData() function that reloads both stats and issues
- Improved responsive design for mobile devices
- Filter controls now use flexbox layout with better spacing

* fix: Update monitor statistics to show Total, In Progress, Open, Closed

- Replaced 'Ready to Work' stat with 'In Progress' stat
- Reordered stats to show logical progression: Total -> In Progress -> Open -> Closed
- Updated loadStats() to fetch in-progress count from stats API
- Removed unnecessary separate API call for ready count

* fix: Correct API field names in monitor stats JavaScript

The JavaScript was using incorrect field names (stats.total, stats.by_status)
that don't match the actual types.Statistics struct which uses flat fields
with underscores (total_issues, in_progress_issues, etc).

Fixed by updating loadStats() to use correct field names:
- stats.total -> stats.total_issues
- stats.by_status?.['in-progress'] -> stats.in_progress_issues
- stats.by_status?.open -> stats.open_issues
- stats.by_status?.closed -> stats.closed_issues

Fixes beads-9

* bd sync: 2025-11-06 17:51:24

* bd sync: 2025-11-06 17:56:09

* fix: Make monitor require daemon to prevent SQLite locking

Implemented Option 1 from beads-eel: monitor now requires daemon and never
opens direct SQLite connection.

Changes:
- Added 'monitor' to noDbCommands list in main.go to skip normal DB initialization
- Added validateDaemonForMonitor() PreRun function that:
  - Finds database path using beads.FindDatabasePath()
  - Validates daemon is running and healthy
  - Fails gracefully with clear error message if no daemon
  - Only uses RPC connection, never opens SQLite directly

Benefits:
- Eliminates SQLite locking conflicts between monitor and daemon
- Users can now close/update issues via CLI while monitor runs
- Clear error messages guide users to start daemon first

Fixes beads-eel

* bd sync: 2025-11-06 18:03:50

* docs: Add bd daemons restart subcommand documentation

Added documentation for the 'bd daemons restart' subcommand across all documentation files:

- commands/daemons.md: Added full restart subcommand section with synopsis, description, arguments, flags, and examples
- README.md: Added restart examples to daemon management section
- AGENTS.md: Added restart examples with --json flag for agents

The restart command gracefully stops and starts a specific daemon by workspace path or PID,
useful after upgrading bd or when a daemon needs refreshing.

Fixes beads-11

* bd sync: 2025-11-06 18:13:16

* Separated the web ui from the general monitoring functionality

---------

Co-authored-by: Steve Yegge <stevey@sourcegraph.com>
2025-11-07 09:49:12 -08:00

109 lines
3.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bd monitor - Issue Tracker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
<link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
<div class="loading-overlay" id="loading-overlay">
<div class="spinner"></div>
</div>
<div class="header">
<div>
<h1>bd monitor</h1>
<p>Real-time issue tracking dashboard</p>
</div>
<div class="connection-status disconnected" id="connection-status">
<span class="connection-dot disconnected" id="connection-dot"></span>
<span id="connection-text">Connecting...</span>
</div>
</div>
<div class="error-message" id="error-message"></div>
<div class="stats">
<h2>Statistics</h2>
<div class="stats-grid" id="stats-grid">
<div class="stat-card">
<div class="stat-value" id="stat-total">-</div>
<div class="stat-label">Total Issues</div>
</div>
<div class="stat-card">
<div class="stat-value" id="stat-in-progress">-</div>
<div class="stat-label">In Progress</div>
</div>
<div class="stat-card">
<div class="stat-value" id="stat-open">-</div>
<div class="stat-label">Open</div>
</div>
<div class="stat-card">
<div class="stat-value" id="stat-closed">-</div>
<div class="stat-label">Closed</div>
</div>
</div>
</div>
<div class="filter-controls">
<label>
Status (multi-select):
<select id="filter-status" multiple>
<option value="open" selected>Open</option>
<option value="in-progress">In Progress</option>
<option value="closed">Closed</option>
</select>
</label>
<label>
Priority:
<select id="filter-priority">
<option value="">All</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
</label>
<button class="reload-button" id="reload-button" title="Reload all data">
🔄 Reload
</button>
</div>
<h2>Issues</h2>
<table id="issues-table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Status</th>
<th>Priority</th>
<th>Type</th>
<th>Assignee</th>
</tr>
</thead>
<tbody id="issues-tbody">
<tr><td colspan="6"><div class="spinner"></div></td></tr>
</tbody>
</table>
<!-- Mobile card view -->
<div class="issues-card-view" id="issues-card-view">
<div class="spinner"></div>
</div>
<!-- Modal for issue details -->
<div id="issue-modal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2 id="modal-title">Issue Details</h2>
<div id="modal-body">
<p>Loading...</p>
</div>
</div>
</div>
<script src="/static/js/app.js"></script>
</body>
</html>